slexkit 0.2.0

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

@@ -0,0 +1,2922 @@
+{
+  "name": "slexkit-ai-docs",
+  "packageName": "slexkit",
+  "version": "0.2.0",
+  "generatedAt": "2026-05-29T16:08:38.010Z",
+  "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"
+    },
+    "llms-full.txt": {
+      "path": "/llms-full.txt",
+      "title": "llms-full.txt",
+      "summary": "Version: 0.2.0",
+      "hash": "578d915f"
+    },
+    "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"
+    },
+    "llms-runtime.txt": {
+      "path": "/llms-runtime.txt",
+      "title": "llms-runtime.txt",
+      "summary": "Raw Markdown: /docs/reference/spec.md",
+      "hash": "97f74329"
+    },
+    "llms-toolhost.txt": {
+      "path": "/llms-toolhost.txt",
+      "title": "llms-toolhost.txt",
+      "summary": "ToolHost is the structured-input path for confirmations, choices, and forms. Do not use it for ordinary display-only UI.",
+      "hash": "6fe87511"
+    },
+    "llms-authoring.txt": {
+      "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"
+    }
+  },
+  "pages": [
+    {
+      "id": "README",
+      "group": "Guides",
+      "title": "README",
+      "summary": "Root package overview and installation matrix.",
+      "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"
+    },
+    {
+      "id": "guides/intro",
+      "group": "Guides",
+      "title": "SlexKit Introduction",
+      "summary": "What SlexKit is and where it fits.",
+      "href": "/docs/guides/intro",
+      "rawHref": "/docs/guides/intro.md",
+      "sourcePath": "site/content/guides/intro/en-US.md",
+      "body": "---\ntitle: SlexKit Introduction\ncategory: Guides\nstatus: ready\norder: 10\nsummary: \"Markdown-friendly reactive UI runtime for explicit slex fences.\"\nslexkitRenderMode: component\n---\n\n# SlexKit Introduction\n\nSlexKit is a Markdown-friendly reactive UI runtime for explicit `slex` fences. Hosts can render small interactive fragments inside AI conversations, documents, agent panels, and dashboards without adding a build step to the generated content.\n\nSlexKit is currently v0/beta. The public surface is usable, but long-term compatibility is not yet guaranteed.\n\n## Use Cases\n\nWhen Markdown needs a small amount of interaction:\n\n- Status cards, counters, calculators, parameter panels, lightweight dashboards\n- AI-generated UI fragments that should degrade to plain Markdown\n- React, Svelte, Obsidian, or vanilla HTML hosts rendering the same fenced source\n\nSlexKit is not a full application framework. It does not provide routing, server-side rendering, a data fetching layer, or a cross-platform pure JSON UI standard.\n\n## Source Format\n\nA Slex source is a JavaScript object literal with state in `g` and the component tree in `layout`:\n\n```slex\n{\n  namespace: \"intro_counter\",\n  g: {\n    count: 0\n  },\n  layout: {\n    \"card:counter\": {\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```\n\n- `namespace` identifies the state domain\n- `g` contains reactive state, functions, and small calculations\n- `layout` contains component nodes keyed as `type:name`\n- `$`-prefixed props are read expressions, such as `\"$text\": \"'Count: ' + g.count\"`\n- `on*` props are write expressions, such as `onclick: \"g.count++\"`\n\nThe runtime also accepts a bare component tree as shorthand, but the full envelope is preferred for documentation and shared examples.\n\n## Fence Convention\n\nHosts must process only fences explicitly marked as `slex`:\n\n````md\n```slex\n{\n  namespace: \"status\",\n  layout: {\n    \"badge:state\": { label: \"Ready\", tone: \"success\" }\n  }\n}\n```\n\n**Status:** Ready\n````\n\nThe Markdown after the fence is the fallback. Plain Markdown readers show the fallback text; SlexKit-capable hosts replace the fence with interactive UI.\n\nPlain JavaScript, JSON, or untagged code blocks must not be scanned or executed.\n\n## Runtime Modes\n\n**Trusted mode** executes Slex source in the host page. Use it for application-generated content, local documents, and repository-maintained examples.\n\n**Secure mode** executes untrusted or agent-generated source in a sandbox iframe. Sensitive capabilities such as network, timers, animation, and canvas are exposed only through host policy and `api.*`.\n\nUse secure mode when rendering third-party or unreviewed content. See [Secure Runtime Setup](security-runtime).\n\n## Boundary Separation\n\n**Display UI** renders via `slex` fences or `mount()`. These fragments show information and local interaction but are not function calls.\n\n**ToolHost** is a separate boundary. It renders confirmations, option pickers, and forms that must return structured input to the host. The `submit` component is the explicit completion boundary for tool templates.\n\nThis separation prevents ordinary display UI from being mispackaged as tool invocations.\n\n## Core APIs\n\n| API | Use |\n|---|---|\n| `mount(input, container, options?)` | Render trusted Slex source into a container |\n| `ingest(input)` | Merge state-only source without rendering UI |\n| `boot(options?)` | Enhance static page `slex` fences |\n| `createSlexKitMarkdownRuntimeHost(options?)` | Recommended API for Markdown hosts |\n| `mountSecureArtifact(input, container, options)` | Render source in the secure sandbox runtime |\n| `renderToolCall(call, container)` | Render a ToolHost template and collect a result |\n\nFor exact types and beta compatibility notes, use the [Slex Specification](../../reference/spec/en-US.md) as the technical reference.\n\n## Next Steps\n\n- [Getting Started](quick-start): developer integration path\n- [Integration](integration): Streamdown and Obsidian host plugins\n- [Design Guidelines](design): authoring public examples and component usage\n- [Secure Runtime Setup](security-runtime): untrusted content boundary\n- [Component Reference](../components/card): built-in component catalog\n- [AI / Agents](ai-agents): SlexKit context for models and agents",
+      "hash": "bff82366"
+    },
+    {
+      "id": "guides/quick-start",
+      "group": "Guides",
+      "title": "Quick Start",
+      "summary": "Install SlexKit and render a first Markdown-friendly Slex source.",
+      "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"
+    },
+    {
+      "id": "guides/integration",
+      "group": "Guides",
+      "title": "Integration",
+      "summary": "React/Streamdown and Obsidian host plugins for explicit Slex fences.",
+      "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"
+    },
+    {
+      "id": "guides/design",
+      "group": "Guides",
+      "title": "Design Guidelines",
+      "summary": "Design and authoring guidelines for SlexKit components and docs.",
+      "href": "/docs/guides/design",
+      "rawHref": "/docs/guides/design.md",
+      "sourcePath": "site/content/guides/design/en-US.md",
+      "body": "---\ntitle: Design Philosophy\ncategory: Guides\nstatus: ready\norder: 30\nsummary: \"Design principles for live Markdown, components, and agent-friendly UI output.\"\nincludeTitleInToc: true\nslexkitRenderMode: component\n---\n\n# SlexKit Design Philosophy\n\n**Docs as tools, tools as docs.**\n\nMake static documents come alive. Give AI agents the power to output interactive experiences.\n\n```slex\n{\n  namespace: \"design_philosophy\",\n  layout: {\n    \"diagram:philosophy\": {},\n    \"grid:philosophy\": {\n      columns: 1,\n      lgColumns: 3,\n      \"card:task\": {\n        \"heading:title\": { level: 4, title: \"Task-First\" },\n        \"text:bodyA\": { text: \"Start from the task the user needs to complete.\" },\n        \"text:bodyB\": { text: \"Every design decision serves the core task.\" }\n      },\n      \"card:intuitive\": {\n        \"heading:title\": { level: 4, title: \"Intuitive\" },\n        \"text:bodyA\": { text: \"Docs include live examples that update instantly.\" },\n        \"text:bodyB\": { text: \"Data flows across components through scoped binding.\" }\n      },\n      \"card:breath\": {\n        \"heading:title\": { level: 4, title: \"Visual Breath\" },\n        \"text:bodyA\": { text: \"Whitespace and spacing create visual rhythm.\" },\n        \"text:bodyB\": { text: \"Typography and color build clear hierarchy.\" }\n      }\n    }\n  }\n}\n```\n\n## Color Semantics\n\nColor expresses role, not personal preference.\n\n```slex\n{\n  namespace: \"design_color\",\n  layout: {\n    \"grid:colors\": {\n      columns: 1,\n      mdColumns: 2,\n      lgColumns: 3,\n      \"card:primary\": {\n        \"swatch:primary\": { tone: \"primary\" },\n        \"heading:title\": { level: 4, title: \"Primary\" },\n        \"text:body\": { text: \"Main actions, current selection, high-priority emphasis. Do not use as decoration.\" }\n      },\n      \"card:info\": {\n        \"swatch:info\": { tone: \"info\" },\n        \"heading:title\": { level: 4, title: \"Info\" },\n        \"text:body\": { text: \"Guidance, hints, informational states. Do not replace Primary.\" }\n      },\n      \"card:success\": {\n        \"swatch:success\": { tone: \"success\" },\n        \"heading:title\": { level: 4, title: \"Success\" },\n        \"text:body\": { text: \"Completed, passed, safe to continue. Use only when the result is confirmed.\" }\n      },\n      \"card:warning\": {\n        \"swatch:warning\": { tone: \"warning\" },\n        \"heading:title\": { level: 4, title: \"Warning\" },\n        \"text:body\": { text: \"Risk, threshold, needs attention but not failed. Do not use to brighten pages.\" }\n      },\n      \"card:destructive\": {\n        \"swatch:destructive\": { tone: \"destructive\" },\n        \"heading:title\": { level: 4, title: \"Destructive\" },\n        \"text:body\": { text: \"Errors, deletions, irreversible actions. Must include consequence description.\" }\n      },\n      \"card:neutral\": {\n        \"swatch:neutral\": { tone: \"neutral\" },\n        \"heading:title\": { level: 4, title: \"Neutral\" },\n        \"text:body\": { text: \"Backgrounds, dividers, secondary information, default containers. Provides structure, not emphasis.\" }\n      }\n    }\n  }\n}\n```\n\n## Card Arrangement\n\nSmall cards are for comparison and judgment. Run metrics side-by-side; the system handles equal width, spacing, and wrapping. Wrap in a parent card when items share context; stack vertically when order matters.\n\n```slex\n{\n  namespace: \"design_arrangement\",\n  layout: {\n    \"column:arrange\": {\n      \"row:metrics\": {\n        \"stat:requests\": {\n          label: \"Requests\",\n          value: \"1.2k\",\n          unit: \"/min\",\n          tone: \"info\"\n        },\n        \"stat:success\": {\n          label: \"Success\",\n          value: \"98.4\",\n          unit: \"%\",\n          tone: \"success\"\n        },\n        \"stat:latency\": {\n          label: \"Latency\",\n          value: \"42\",\n          unit: \"ms\"\n        },\n        \"stat:errors\": {\n          label: \"Errors\",\n          value: \"3\",\n          tone: \"warning\"\n        },\n        \"stat:queued\": {\n          label: \"Queued\",\n          value: \"8\"\n        }\n      },\n      \"grid:examples\": {\n        columns: 1,\n        mdColumns: 2,\n        \"card:summary\": {\n          title: \"Same Object\",\n          \"row:service\": {\n            \"stat:idle\": {\n              label: \"Pending\",\n              value: \"12\"\n            },\n            \"stat:active\": {\n              label: \"Running\",\n              value: \"5\",\n              tone: \"info\"\n            },\n            \"stat:done\": {\n              label: \"Done\",\n              value: \"47\",\n              tone: \"success\"\n            },\n            \"stat:failed\": {\n              label: \"Failed\",\n              value: \"2\",\n              tone: \"danger\"\n            }\n          }\n        },\n        \"card:flow\": {\n          title: \"Sequential\",\n          \"column:steps\": {\n            \"stat:input\": {\n              label: \"Input\",\n              value: \"1\"\n            },\n            \"stat:compute\": {\n              label: \"Compute\",\n              value: \"2\",\n              tone: \"info\"\n            },\n            \"stat:output\": {\n              label: \"Output\",\n              value: \"3\",\n              tone: \"success\"\n            }\n          }\n        }\n      }\n    }\n  }\n}\n```\n\n## Typography & Icons\n\nSlexKit's typography is calm, clear, and technical. Icons are light, rounded, and restrained — serving as punctuation marks in the interface, not illustrations.\n\n```slex\n{\n  namespace: \"design_type_icon\",\n  layout: {\n    \"grid:type\": {\n      columns: 1,\n      lgColumns: 2,\n      \"card:type\": {\n        \"heading:title\": { level: 4, title: \"Type Voice\", meta: \"GEIST / NOTO SANS SC\" },\n        \"diagram:font\": { kind: \"font-sample\" },\n        \"text:body\": { text: \"English uses Geist, Chinese uses Noto Sans SC. Letterforms stay open and clean, serving readability rather than volume.\" }\n      },\n      \"card:icon\": {\n        \"heading:title\": { level: 4, title: \"Icon Voice\", meta: \"PHOSPHOR ICONS\" },\n        \"row:icons\": {\n          \"button:sparkle\": { icon: \"sparkle\", iconOnly: true, label: \"Assist\" },\n          \"button:book\": { icon: \"book-open-text\", iconOnly: true, label: \"Manual\" },\n          \"button:terminal\": { icon: \"terminal-window\", iconOnly: true, label: \"Terminal\" },\n          \"button:cursor\": { icon: \"cursor-click\", iconOnly: true, label: \"Click\" },\n          \"button:nut\": { icon: \"nut\", iconOnly: true, label: \"Nut\" },\n          \"button:gear\": { icon: \"gear-six\", iconOnly: true, label: \"Gear\" }\n        },\n        \"text:body\": { text: \"Phosphor's character comes from geometric outlines, rounded corners, and consistent stroke width. When choosing icons, first check tone consistency, then semantic accuracy.\" }\n      }\n    }\n  }\n}\n```\n\n## Markdown Authoring\n\nDesign specs and component pages use Markdown for prose, with `slex` fenced blocks for runnable examples, achieving docs-as-examples authoring.\n\n```slex\n{\n  namespace: \"design_markdown\",\n  layout: {\n    \"grid:doc\": {\n      columns: 1,\n      lgColumns: 3,\n      \"card:write\": {\n        \"diagram:markdown\": {},\n        \"heading:title\": { level: 4, title: \"Prose in Markdown\" },\n        \"text:body\": { text: \"Explain context, boundaries, and rules. Do not write explanations inside UI components.\" }\n      },\n      \"card:run\": {\n        \"diagram:fence\": {},\n        \"heading:title\": { level: 4, title: \"Examples in slex\" },\n        \"text:body\": { text: \"Every key example should render and preview live, not be a screenshot.\" }\n      },\n      \"card:compare\": {\n        \"diagram:cards\": {},\n        \"heading:title\": { level: 4, title: \"Rules as Small Cards\" },\n        \"text:body\": { text: \"Put comparable principles into cards so readers can judge at a glance.\" }\n      }\n    }\n  }\n}\n```\n\n## Product Shape\n\nSlexKit targets interactive fragments inside Markdown, not full applications. Typical scenarios include:\n\n- A card explaining a result\n- A row of metrics\n- A form-like control area\n- A status or confirmation block\n\nThe framework focuses on embedded document interactions, not routing, global app state, SSR, data fetching frameworks, or general UI standardization.\n\n```slex\n{\n  namespace: \"design_shape\",\n  layout: {\n    \"card:status\": {\n      title: \"Build summary\",\n      tone: \"info\",\n      \"row:metrics\": {\n        \"stat:passed\": { label: \"Passed\", value: 28, tone: \"success\" },\n        \"stat:failed\": { label: \"Failed\", value: 1, tone: \"danger\" },\n        \"stat:queued\": { label: \"Queued\", value: 3, tone: \"muted\" }\n      },\n      \"text:note\": {\n        text: \"Keep the surface focused on one document or message task.\"\n      }\n    }\n  }\n}\n```\n\n## Tone Rules\n\nComponents support semantic tone values for expressing state roles.\n\n```slex\n{\n  namespace: \"design_tones\",\n  layout: {\n    \"grid:tones\": {\n      columns: 1,\n      mdColumns: 2,\n      lgColumns: 3,\n      \"card:info\": {\n        \"badge:tone\": { label: \"info\", tone: \"info\" },\n        \"text:body\": { text: \"Neutral guidance, current process, or informational state.\" }\n      },\n      \"card:success\": {\n        \"badge:tone\": { label: \"success\", tone: \"success\" },\n        \"text:body\": { text: \"Completed, accepted, or safe-to-continue state.\" }\n      },\n      \"card:warning\": {\n        \"badge:tone\": { label: \"warning\", tone: \"warning\" },\n        \"text:body\": { text: \"Risk, threshold, or review-needed state.\" }\n      },\n      \"card:danger\": {\n        \"badge:tone\": { label: \"danger\", tone: \"danger\" },\n        \"text:body\": { text: \"Error, destructive action, or blocked state.\" }\n      },\n      \"card:muted\": {\n        \"badge:tone\": { label: \"muted\", tone: \"muted\" },\n        \"text:body\": { text: \"Secondary or background information.\" }\n      }\n    }\n  }\n}\n```\n\n## Display UI Versus ToolHost\n\nDisplay UI is for information presentation and local interaction. ToolHost mode is used when the host needs structured results from the user.\n\n```slex\n{\n  namespace: \"design_boundary\",\n  layout: {\n    \"grid:boundary\": {\n      columns: 1,\n      mdColumns: 2,\n      \"card:display\": {\n        title: \"Display UI\",\n        \"text:body\": { text: \"Use slex fences for status, metrics, previews, and local controls.\" },\n        \"badge:kind\": { label: \"No host result\", tone: \"muted\" }\n      },\n      \"card:toolhost\": {\n        title: \"ToolHost\",\n        \"text:body\": { text: \"Use tool templates when confirmation or form data must return to the host.\" },\n        \"badge:kind\": { label: \"Returns ToolResult\", tone: \"info\" }\n      }\n    }\n  }\n}\n```",
+      "hash": "8a3b35fd"
+    },
+    {
+      "id": "guides/security-runtime",
+      "group": "Guides",
+      "title": "Secure Runtime Setup",
+      "summary": "Decision and setup guide for rendering untrusted or agent-generated Slex source.",
+      "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"
+    },
+    {
+      "id": "guides/ai-agents",
+      "group": "Guides",
+      "title": "AI / Agents",
+      "summary": "LLM docs, MCP server, skills, and authoring rules for SlexKit agents.",
+      "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"
+    },
+    {
+      "id": "components/accordion",
+      "group": "Components",
+      "title": "Accordion",
+      "summary": "Expandable grouped panels.",
+      "href": "/docs/components/accordion",
+      "rawHref": "/docs/components/accordion.md",
+      "sourcePath": "site/content/components/accordion/en-US.md",
+      "body": "---\ntitle: \"Accordion\"\ncategory: Disclosure\nstatus: ready\nsummary: \"Multi-panel collapse for FAQs or grouped details.\"\n---\n# Accordion\n\nManages multiple collapsible panels, with one or more open at a time.\n\n<!-- slex:spec-example:start component=\"accordion\" id=\"basic\" sourceHash=\"0a070e32\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_accordion_typical\",\n  \"layout\": {\n    \"accordion:faq\": {\n      \"multiple\": true,\n      \"value\": [\n        \"install\"\n      ],\n      \"items\": [\n        {\n          \"value\": \"install\",\n          \"label\": \"Install\",\n          \"icon\": \"download-simple\",\n          \"content\": \"Prepare dependencies.\"\n        },\n        {\n          \"value\": \"review\",\n          \"label\": \"Review\",\n          \"icon\": \"check-circle\",\n          \"content\": \"Check the result.\"\n        },\n        {\n          \"value\": \"ship\",\n          \"label\": \"Ship\",\n          \"icon\": \"rocket-launch\",\n          \"content\": \"Publish the change.\"\n        }\n      ]\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for FAQs, grouped details, and collapsible setting lists.\n- Not suitable for a single expandable area (use `collapsible`).\n- Related components: `collapsible` for single expandable regions.\n- Use `$value` and `onchange` for controlled expansion.\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"accordion\" sourceHash=\"e838d3e9\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `value` | string \\| string[] | No | Yes |  | Current expanded item value; use an array when multiple is true. |\n| `multiple` | boolean | No | No | `false` | Allow multiple items to be expanded at the same time. |\n| `items` | array | No | No |  | Panel definitions with value, label, content, and optional icon. |\n| `items[].icon` | string | No | No |  | Icon name shown before an item trigger label. |\n| `onchange` | write-expression | No | No |  | Write expression invoked when expanded items change. |\n<!-- slex:spec-api:end -->",
+      "hash": "9e90867f"
+    },
+    {
+      "id": "components/badge",
+      "group": "Components",
+      "title": "Badge",
+      "summary": "Compact label for status or classification.",
+      "href": "/docs/components/badge",
+      "rawHref": "/docs/components/badge.md",
+      "sourcePath": "site/content/components/badge/en-US.md",
+      "body": "---\ntitle: \"Badge\"\ncategory: Content\nstatus: ready\nsummary: \"Compact label for status or classification.\"\n---\n# Badge\n\nCompact status label component with semantic tone colors.\n\n<!-- slex:spec-example:start component=\"badge\" id=\"basic\" sourceHash=\"0f5f8aba\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_badge_typical\",\n  \"layout\": {\n    \"row:badges\": {\n      \"badge:ready\": {\n        \"label\": \"ready\",\n        \"icon\": \"check-circle\",\n        \"tone\": \"success\"\n      },\n      \"badge:pending\": {\n        \"label\": \"pending\",\n        \"tone\": \"warning\"\n      },\n      \"badge:info\": {\n        \"label\": \"info\",\n        \"tone\": \"info\"\n      }\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for status indicators (success / warning / error), classification labels, and count markers.\n- Not suitable for long text labels (use `callout`) or interactive triggers (use `button`).\n- Related components: `callout` for titled message blocks, `stat` for numeric metrics.\n- Multiple badges are typically placed inside a `row`.\n- Use `tone` only for semantic state, not as an arbitrary style picker.\n\n### Tone variants\n\n```slex\n{\n  namespace: \"doc_badge_tone_diff\",\n  layout: {\n    \"row:tones\": {\n      \"badge:info\": {\n        label: \"info\",\n        tone: \"info\"\n      },\n      \"badge:success\": {\n        label: \"success\",\n        tone: \"success\"\n      },\n      \"badge:warning\": {\n        label: \"warning\",\n        tone: \"warning\"\n      },\n      \"badge:danger\": {\n        label: \"danger\",\n        tone: \"danger\"\n      },\n      \"badge:muted\": {\n        label: \"muted\",\n        tone: \"muted\"\n      }\n    }\n  }\n}\n```\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"badge\" sourceHash=\"5621b8b3\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `label` | string | No | Yes |  | Badge text. |\n| `text` | string | No | Yes |  | Alias for label. |\n| `content` | string | No | Yes |  | Alias for label. |\n| `icon` | string | No | No |  | Icon name shown before the badge label. |\n| `tone` | string: info, success, warning, danger, muted | No | No | `\"info\"` | Semantic tone applied to the badge. |\n| `variant` | string: info, success, warning, danger, muted | No | No |  | Alias for tone. |\n<!-- slex:spec-api:end -->",
+      "hash": "fb8275e7"
+    },
+    {
+      "id": "components/button",
+      "group": "Components",
+      "title": "Button",
+      "summary": "Action trigger.",
+      "href": "/docs/components/button",
+      "rawHref": "/docs/components/button.md",
+      "sourcePath": "site/content/components/button/en-US.md",
+      "body": "---\ntitle: \"Button\"\ncategory: Action\nstatus: ready\nsummary: \"Action trigger button.\"\n---\n# Button\n\nTriggers actions in interactive SlexKit layouts.\n\n<!-- slex:spec-example:start component=\"button\" id=\"basic\" sourceHash=\"267bd8d1\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_button_typical\",\n  \"layout\": {\n    \"row:actions\": {\n      \"button:save\": {\n        \"label\": \"Save\",\n        \"icon\": \"floppy-disk\",\n        \"variant\": \"primary\"\n      },\n      \"button:cancel\": {\n        \"label\": \"Cancel\",\n        \"variant\": \"secondary\"\n      },\n      \"button:delete\": {\n        \"label\": \"Delete\",\n        \"variant\": \"danger\"\n      }\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for form submission, confirmation actions, and command triggers.\n- When `href` is present, the button renders as a button-styled link action; use `link` for ordinary inline navigation.\n- `selected`, `active`, and `pressed` describe the visual state of the button icon and pressed metadata.\n- Related components: `link` for navigation instead of actions, `submit` for ToolHost submission flows.\n- Multiple buttons are typically placed inside a `row`.\n- Use `variant` only for semantic action types, not as a general style picker.\n\n### Variants\n\n```slex\n{\n  namespace: \"doc_button_variant_diff\",\n  layout: {\n    \"row:variants\": {\n      \"button:primary\": {\n        label: \"Primary\",\n        variant: \"primary\"\n      },\n      \"button:secondary\": {\n        label: \"Secondary\",\n        variant: \"secondary\"\n      },\n      \"button:danger\": {\n        label: \"Danger\",\n        variant: \"danger\"\n      },\n      \"button:ghost\": {\n        label: \"Ghost\",\n        variant: \"ghost\"\n      }\n    }\n  }\n}\n```\n\n### Disabled state\n\n```slex\n{\n  namespace: \"doc_button_disabled_diff\",\n  layout: {\n    \"row:disabled\": {\n      \"button:enabled\": {\n        label: \"Enabled\"\n      },\n      \"button:disabled\": {\n        label: \"Disabled\",\n        disabled: true\n      }\n    }\n  }\n}\n```\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"button\" sourceHash=\"11a5a574\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `label` | string | No | Yes |  | Visible button text and accessible name. |\n| `icon` | string | No | No |  | Icon name shown before the label. |\n| `iconOnly` | boolean | No | No | `false` | Show only the icon while retaining label as the accessible name. |\n| `variant` | string: primary, secondary, danger, ghost | No | No | `\"primary\"` | Semantic action variant. |\n| `disabled` | boolean | No | Yes | `false` | Disable the action. |\n| `href` | string | No | Yes |  | Render the button surface as a link to this URL. |\n| `target` | string | No | No |  | Link target used when href is present. |\n| `title` | string | No | Yes |  | Tooltip and accessible-label fallback. |\n| `selected` | boolean | No | Yes |  | Render the icon in its selected visual state. |\n| `active` | boolean | No | Yes |  | Render the icon in its active visual state. |\n| `pressed` | boolean | No | Yes |  | Expose pressed state and render the selected icon style. |\n| `onclick` | write-expression | No | No |  | Write expression invoked when the button is clicked. |\n<!-- slex:spec-api:end -->",
+      "hash": "30463322"
+    },
+    {
+      "id": "components/callout",
+      "group": "Components",
+      "title": "Callout",
+      "summary": "Highlighted contextual message.",
+      "href": "/docs/components/callout",
+      "rawHref": "/docs/components/callout.md",
+      "sourcePath": "site/content/components/callout/en-US.md",
+      "body": "---\ntitle: \"Callout\"\ncategory: Content\nstatus: ready\nsummary: \"Highlighted contextual message for notes, warnings, and tips.\"\n---\n# Callout\n\nProminent notice block with title, body text, and semantic tone.\n\n<!-- slex:spec-example:start component=\"callout\" id=\"basic\" sourceHash=\"e07c6bdd\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_callout_typical\",\n  \"layout\": {\n    \"callout:notice\": {\n      \"tone\": \"info\",\n      \"title\": \"Notice\",\n      \"icon\": \"info\",\n      \"text\": \"Use callout for information that should stand out.\"\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for operation instructions, caution warnings, success prompts, and informational messages.\n- Not suitable for pure status labels (use `badge`) or interactive content that needs its own flow.\n- Related components: `badge` for compact labels, `toast` for transient feedback.\n- Child components can be nested inside a callout to extend the body area.\n- Use `tone` only for semantic state, not as an arbitrary style picker.\n\n### Tone variants\n\n```slex\n{\n  namespace: \"doc_callout_tone_diff\",\n  layout: {\n    \"column:tones\": {\n      \"callout:info\": {\n        tone: \"info\",\n        title: \"Info\",\n        text: \"This is an informational message.\"\n      },\n      \"callout:success\": {\n        tone: \"success\",\n        title: \"Success\",\n        text: \"Operation completed successfully.\"\n      },\n      \"callout:warning\": {\n        tone: \"warning\",\n        title: \"Warning\",\n        text: \"Please review before proceeding.\"\n      },\n      \"callout:danger\": {\n        tone: \"danger\",\n        title: \"Danger\",\n        text: \"This action cannot be undone.\"\n      }\n    }\n  }\n}\n```\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"callout\" sourceHash=\"aed6ad17\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `title` | string | No | Yes |  | Callout title. |\n| `heading` | string | No | Yes |  | Alias for title. |\n| `label` | string | No | Yes |  | Alias for title. |\n| `icon` | string | No | No |  | Icon name shown before the title. |\n| `text` | string | No | Yes |  | Callout body text. |\n| `message` | string | No | Yes |  | Alias for text. |\n| `content` | string | No | Yes |  | Alias for text. |\n| `tone` | string: info, success, warning, danger | No | No | `\"info\"` | Semantic tone for the callout. |\n| child components | object | No | No |  | Nested component fields are rendered as child content in field order. |\n<!-- slex:spec-api:end -->",
+      "hash": "d16f713d"
+    },
+    {
+      "id": "components/card",
+      "group": "Components",
+      "title": "Card",
+      "summary": "Bordered grouping container.",
+      "href": "/docs/components/card",
+      "rawHref": "/docs/components/card.md",
+      "sourcePath": "site/content/components/card/en-US.md",
+      "body": "---\ntitle: \"Card\"\ncategory: Layout\nstatus: ready\nsummary: \"Bordered grouping container for related content.\"\n---\n# Card\n\nBordered container with optional title and semantic tone.\n\n<!-- slex:spec-example:start component=\"card\" id=\"basic\" sourceHash=\"74b8c7a0\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_card_typical\",\n  \"layout\": {\n    \"card:metrics\": {\n      \"title\": \"Metrics\",\n      \"icon\": \"chart-bar\",\n      \"grid:items\": {\n        \"columns\": 2,\n        \"stat:requests\": {\n          \"label\": \"Requests\",\n          \"value\": \"1.2k\",\n          \"unit\": \"/min\"\n        },\n        \"stat:latency\": {\n          \"label\": \"Latency\",\n          \"value\": \"42\",\n          \"unit\": \"ms\"\n        }\n      }\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for grouped metrics, settings blocks, and information summaries.\n- Not suitable for page-level section headers (use `section`) or pure layout containers (use `column` or `grid`).\n- Related components: `section` provides a complete page block structure (title + subtitle + action), while `card` is more lightweight.\n- Child components arrange naturally inside a card; nest `row`, `column`, or `grid`.\n- Use `tone` only for semantic state, not as an arbitrary style picker.\n\n### Tone variants\n\n```slex\n{\n  namespace: \"doc_card_tone_diff\",\n  layout: {\n    \"row:tones\": {\n      \"card:info\": {\n        title: \"Info\",\n        tone: \"info\",\n        \"text:body\": {\n          text: \"Information card.\"\n        }\n      },\n      \"card:success\": {\n        title: \"Success\",\n        tone: \"success\",\n        \"text:body\": {\n          text: \"Success card.\"\n        }\n      },\n      \"card:warning\": {\n        title: \"Warning\",\n        tone: \"warning\",\n        \"text:body\": {\n          text: \"Warning card.\"\n        }\n      }\n    }\n  }\n}\n```\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"card\" sourceHash=\"add47956\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `title` | string | No | Yes |  | Card title. |\n| `icon` | string | No | No |  | Icon name shown before the title. |\n| `tone` | string: info, success, warning, danger, muted | No | No |  | Optional semantic tone for the card surface. |\n| child components | object | No | No |  | Nested component fields are rendered as child content in field order. |\n<!-- slex:spec-api:end -->",
+      "hash": "99f4bf99"
+    },
+    {
+      "id": "components/checkbox",
+      "group": "Components",
+      "title": "Checkbox",
+      "summary": "Boolean checkbox input.",
+      "href": "/docs/components/checkbox",
+      "rawHref": "/docs/components/checkbox.md",
+      "sourcePath": "site/content/components/checkbox/en-US.md",
+      "body": "---\ntitle: \"Checkbox\"\ncategory: Input\nstatus: ready\nsummary: \"Boolean checkbox for confirmations and multi-select.\"\n---\n# Checkbox\n\nBoolean toggle for confirmation or multi-select scenarios.\n\n<!-- slex:spec-example:start component=\"checkbox\" id=\"basic\" sourceHash=\"060e0c05\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_checkbox_typical\",\n  \"layout\": {\n    \"checkbox:agree\": {\n      \"checked\": true,\n      \"label\": \"I agree\",\n      \"icon\": \"handshake\"\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for terms agreement, multi-select settings, and per-item enable/disable.\n- Not suitable for instant-activation toggles (use `switch`) or mutually exclusive options (use `radio-group`).\n- Related components: `switch` for instant effect toggles, `radio-group` for exclusive options.\n- Multiple options are typically arranged vertically inside a `column`.\n- Use `$checked` and `onchange` for state binding.\n\n### Checked / disabled states\n\n```slex\n{\n  namespace: \"doc_checkbox_state_diff\",\n  layout: {\n    \"column:diff\": {\n      \"checkbox:checked\": {\n        label: \"Checked\",\n        checked: true\n      },\n      \"checkbox:unchecked\": {\n        label: \"Unchecked\"\n      },\n      \"checkbox:disabled-checked\": {\n        label: \"Disabled checked\",\n        checked: true,\n        disabled: true\n      },\n      \"checkbox:disabled\": {\n        label: \"Disabled\",\n        disabled: true\n      }\n    }\n  }\n}\n```\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"checkbox\" sourceHash=\"a507c04a\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `checked` | boolean | No | Yes | `false` | Checked state. |\n| `label` | string | No | Yes |  | Checkbox label. |\n| `icon` | string | No | No |  | Icon name shown before the visible label. |\n| `disabled` | boolean | No | Yes | `false` | Disable the checkbox. |\n| `haptic` | boolean | No | No | `true` | Enable vibration feedback on supported devices. |\n| `haptics` | boolean | No | No | `true` | Alias for haptic. |\n| `onchange` | write-expression | No | No |  | Write expression invoked when checked state changes. |\n<!-- slex:spec-api:end -->",
+      "hash": "6d83ab0c"
+    },
+    {
+      "id": "components/code-block",
+      "group": "Components",
+      "title": "Code Block",
+      "summary": "Formatted code or log block.",
+      "href": "/docs/components/code-block",
+      "rawHref": "/docs/components/code-block.md",
+      "sourcePath": "site/content/components/code-block/en-US.md",
+      "body": "---\ntitle: \"Code Block\"\ncategory: Content\nstatus: ready\nsummary: \"Code or configuration snippet display.\"\n---\n# Code Block\n\nDisplay code, configuration, or source snippets with a language label and optional title.\n\n<!-- slex:spec-example:start component=\"code-block\" id=\"basic\" sourceHash=\"9c3453f7\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_code_block_typical\",\n  \"layout\": {\n    \"code-block:config\": {\n      \"title\": \"Config\",\n      \"icon\": \"code\",\n      \"language\": \"js\",\n      \"code\": \"export const enabled = true;\"\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for code samples, JSON config, CLI snippets, and log output.\n- Not suitable for runnable SlexKit examples (use `slex` fence or `playground`).\n- Related components: `playground` for editable interactive previews.\n- Code content is display-only; editing is not supported.\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"code-block\" sourceHash=\"0cc54fab\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `code` | string | No | Yes |  | Code text content. |\n| `source` | string | No | Yes |  | Alias for code. |\n| `content` | string | No | Yes |  | Alias for code. |\n| `language` | string | No | No |  | Language label. |\n| `title` | string | No | No |  | Code block title. |\n| `icon` | string | No | No |  | Icon name shown before the title. |\n| `lineNumbers` | boolean | No | No | `true` | Show line numbers. |\n<!-- slex:spec-api:end -->",
+      "hash": "171d1695"
+    },
+    {
+      "id": "components/collapsible",
+      "group": "Components",
+      "title": "Collapsible",
+      "summary": "Single expandable region.",
+      "href": "/docs/components/collapsible",
+      "rawHref": "/docs/components/collapsible.md",
+      "sourcePath": "site/content/components/collapsible/en-US.md",
+      "body": "---\ntitle: \"Collapsible\"\ncategory: Disclosure\nstatus: ready\nsummary: \"Single expandable content area.\"\n---\n# Collapsible\n\nManages a single expand/collapse region for supplementary details or secondary information.\n\n<!-- slex:spec-example:start component=\"collapsible\" id=\"basic\" sourceHash=\"d074a138\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_collapsible_typical\",\n  \"layout\": {\n    \"collapsible:more\": {\n      \"open\": true,\n      \"trigger\": \"Details\",\n      \"icon\": \"caret-circle-down\",\n      \"content\": \"This secondary content can be collapsed.\"\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for expandable details, supplementary notes, and collapsible secondary info.\n- Not suitable for multi-panel lists (use `accordion`).\n- Related components: `accordion` for multi-panel collapse.\n- Child components extend the default body content area.\n- Use `$value` and `onchange` for controlled expansion.\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"collapsible\" sourceHash=\"7580b7c4\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `open` | boolean | No | Yes | `false` | Expanded state. |\n| `trigger` | string | No | Yes |  | Trigger button text. |\n| `icon` | string | No | No |  | Icon name shown before trigger text. |\n| `content` | string | No | Yes |  | Static body content. |\n| `onchange` | write-expression | No | No |  | Write expression invoked when open state changes. |\n| child components | object | No | No |  | Nested component fields are rendered as child content in field order. |\n<!-- slex:spec-api:end -->",
+      "hash": "003307a3"
+    },
+    {
+      "id": "components/column",
+      "group": "Components",
+      "title": "Column",
+      "summary": "Vertical layout container.",
+      "href": "/docs/components/column",
+      "rawHref": "/docs/components/column.md",
+      "sourcePath": "site/content/components/column/en-US.md",
+      "body": "---\ntitle: \"Column\"\ncategory: Layout\nstatus: ready\nsummary: \"Vertical layout container for forms, text, and control groups.\"\n---\n# Column\n\nBasic vertical layout container.\n\n<!-- slex:spec-example:start component=\"column\" id=\"basic\" sourceHash=\"b28bf5e9\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_column_typical\",\n  \"layout\": {\n    \"column:form\": {\n      \"input:name\": {\n        \"placeholder\": \"Name\"\n      },\n      \"input:email\": {\n        \"placeholder\": \"Email\"\n      },\n      \"button:save\": {\n        \"label\": \"Save\"\n      }\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for form field groups, settings panels, description text, and sequences of actions.\n- Not suitable for horizontal layouts (use `row`) or equal-width card grids (use `grid`).\n- Related components: `row` for horizontal layout, `grid` for two-dimensional equal-width layout.\n- Place child components as fields, stacked top-to-bottom.\n- Default width fills the parent container; height is content-driven.\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"column\" sourceHash=\"5a83045d\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| child components | object | No | No |  | Nested component fields are rendered as child content in field order. |\n<!-- slex:spec-api:end -->",
+      "hash": "718a5b54"
+    },
+    {
+      "id": "components/divider",
+      "group": "Components",
+      "title": "Divider",
+      "summary": "Visual separator.",
+      "href": "/docs/components/divider",
+      "rawHref": "/docs/components/divider.md",
+      "sourcePath": "site/content/components/divider/en-US.md",
+      "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/grid",
+      "group": "Components",
+      "title": "Grid",
+      "summary": "Responsive grid container.",
+      "href": "/docs/components/grid",
+      "rawHref": "/docs/components/grid.md",
+      "sourcePath": "site/content/components/grid/en-US.md",
+      "body": "---\ntitle: \"Grid\"\ncategory: Layout\nstatus: ready\nsummary: \"Responsive equal-width grid for sibling cards, metrics, and field groups.\"\n---\n# Grid\n\nResponsive equal-width column layout with breakpoint-prefixed column count.\n\n<!-- slex:spec-example:start component=\"grid\" id=\"basic\" sourceHash=\"fc9c72e9\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_grid_typical\",\n  \"layout\": {\n    \"grid:stats\": {\n      \"columns\": 1,\n      \"mdColumns\": 3,\n      \"stat:a\": {\n        \"label\": \"Requests\",\n        \"value\": \"1.2k\"\n      },\n      \"stat:b\": {\n        \"label\": \"Success\",\n        \"value\": \"98%\"\n      },\n      \"stat:c\": {\n        \"label\": \"Errors\",\n        \"value\": \"3\"\n      }\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for metric dashboards, card lists, and horizontal equal-width groups of form fields.\n- Not suitable for mixed-width layouts (use `row` + `column` combinations) or single-column arrangements (use `column`).\n- Related components: `row` for horizontal layout without equal-width guarantees, `column` for vertical layout.\n- Child components are automatically equal-width — best for same-level content.\n- Use `gap` to override the spacing; when omitted, the grid keeps its theme CSS default.\n\n### Column variants\n\n```slex\n{\n  namespace: \"doc_grid_columns_diff\",\n  layout: {\n    \"column:demo\": {\n      \"text:cols2\": {\n        text: \"columns: 2\"\n      },\n      \"grid:cols2\": {\n        columns: 2,\n        \"stat:a\": {\n          label: \"A\",\n          value: \"1\"\n        },\n        \"stat:b\": {\n          label: \"B\",\n          value: \"2\"\n        },\n        \"stat:c\": {\n          label: \"C\",\n          value: \"3\"\n        }\n      },\n      \"text:cols3\": {\n        text: \"columns: 3\"\n      },\n      \"grid:cols3\": {\n        columns: 3,\n        \"stat:a\": {\n          label: \"A\",\n          value: \"1\"\n        },\n        \"stat:b\": {\n          label: \"B\",\n          value: \"2\"\n        },\n        \"stat:c\": {\n          label: \"C\",\n          value: \"3\"\n        }\n      }\n    }\n  }\n}\n```\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"grid\" sourceHash=\"e8ab3ffb\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `columns` | number | No | Yes | `1` | Base column count. |\n| `smColumns` | number | No | Yes |  | Column count at the small breakpoint. |\n| `mdColumns` | number | No | Yes |  | Column count at the medium breakpoint. |\n| `lgColumns` | number | No | Yes |  | Column count at the large breakpoint. |\n| `xlColumns` | number | No | Yes |  | Column count at the extra-large breakpoint. |\n| `gap` | string | No | Yes |  | Spacing between grid items. |\n| child components | object | No | No |  | Nested component fields are rendered as child content in field order. |\n<!-- slex:spec-api:end -->",
+      "hash": "07d773b2"
+    },
+    {
+      "id": "components/icon",
+      "group": "Components",
+      "title": "Icon",
+      "summary": "Shared icon field capability.",
+      "href": "/docs/components/icon",
+      "rawHref": "/docs/components/icon.md",
+      "sourcePath": "site/content/components/icon/en-US.md",
+      "body": "---\ntitle: \"Icon\"\ncategory: Component\nstatus: ready\nsummary: \"Shared icon field capability used by all icon-supporting components.\"\n---\n# Icon\n\nIcon is not a standalone layout component — it is a component field capability. Components that support the `icon` field resolve icon names through the global icon manager and place the resulting SVG in their own visual position.\n\n<!-- slex:spec-example:start component=\"icon\" id=\"basic\" sourceHash=\"5fce5080\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"spec_button_basic\",\n  \"layout\": {\n    \"button:demo\": {\n      \"label\": \"Settings\",\n      \"icon\": \"gear-six\",\n      \"iconOnly\": true,\n      \"variant\": \"ghost\"\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Supported components\n\n| Component | Field | Description |\n| --- | --- | --- |\n| accordion | `items[].icon` | Icon before each accordion item trigger label. |\n| badge | `icon` | Icon before the badge text. |\n| button | `icon`, `iconOnly` | Icon before the button label; `iconOnly: true` shows only the icon while still requiring `label`. |\n| callout | `icon` | Icon before the callout title. |\n| card | `icon` | Icon before the card title. |\n| checkbox | `icon` | Icon before the visible checkbox label. |\n| code-block | `icon` | Icon before the code block title. |\n| collapsible | `icon` | Icon before the collapsible trigger text. |\n| divider | `icon` | Icon before the divider label text. |\n| link | `icon` | Icon before the link text. |\n| progress | `icon` | Icon before the progress label. |\n| radio-group | `icon`, `options[].icon` | Icon before the group label and each option label. |\n| section | `icon` | Icon before the section title. |\n| select | `icon`, `options[].icon` | `icon` decorates the top label; `options[].icon` decorates menu options and the selected value. |\n| slider | `icon` | Icon before the slider label. |\n| stat | `icon` | Icon before the metric label. |\n| switch | `icon` | Icon before the visible switch label. |\n| table | `columns[].icon` | Icon before each table column header label. |\n| tabs | `tabs[].icon`, `tabs[].iconOnly` | Icon in each tab trigger; selected tab may request an active variant. |\n| toast | `icon` | Replaces the default left semantic marker with an icon while retaining tone color. |\n\n`playground` internally reuses button for its toolbar actions, so it benefits from the same icon manager, but it does not expose a public `icon` field. `select`'s dropdown arrow is a fixed control indicator; `select.icon` only decorates the top label, not the dropdown arrow.\n\n## Name resolution\n\nUnprefixed icon names default to Iconify's `ph` collection (Phosphor icons).\n\n```slex\n{\n  namespace: \"doc_icon_names\",\n  layout: {\n    \"row:icons\": {\n      \"button:chart\": {\n        label: \"Chart\",\n        icon: \"ChartBar\"\n      },\n      \"button:copy\": {\n        label: \"Copy\",\n        icon: \"lucide:copy\",\n        variant: \"secondary\"\n      },\n      \"button:settings\": {\n        label: \"Settings\",\n        icon: \"gear-six\",\n        iconOnly: true,\n        variant: \"ghost\"\n      }\n    }\n  }\n}\n```\n\nCommon syntax:\n\n| Syntax | Resolves to |\n| ----------------- | ---------------------------------------- |\n| `ChartBar` | `ph:chart-bar` |\n| `chart-bar` | `ph:chart-bar` |\n| `ph:chart-bar` | Phosphor / Iconify `ph` collection |\n| `lucide:copy` | Iconify `lucide` collection |\n| `brand:logo-mark` | Custom icon registered by the host via `registerIcon` |\n\n## Tabs with icons\n\n```slex\n{\n  namespace: \"doc_icon_tabs\",\n  layout: {\n    \"tabs:main\": {\n      value: \"overview\",\n      tabs: [\n        {\n          value: \"overview\",\n          label: \"Overview\",\n          icon: \"ChartBar\"\n        },\n        {\n          value: \"activity\",\n          label: \"Activity\",\n          icon: \"pulse\"\n        },\n        {\n          value: \"settings\",\n          label: \"Settings\",\n          icon: \"Gear\",\n          iconOnly: true\n        }\n      ]\n    }\n  }\n}\n```\n\n## Label and title icons\n\n```slex\n{\n  namespace: \"doc_icon_labels\",\n  layout: {\n    \"column:demo\": {\n      \"callout:notice\": {\n        title: \"Notice\",\n        icon: \"info\",\n        text: \"Title-bearing components can use the same icon field.\"\n      },\n      \"accordion:faq\": {\n        value: \"install\",\n        items: [\n          {\n            value: \"install\",\n            label: \"Install\",\n            icon: \"download-simple\",\n            content: \"Prepare dependencies.\"\n          },\n          {\n            value: \"review\",\n            label: \"Review\",\n            icon: \"check-circle\",\n            content: \"Verify the result.\"\n          }\n        ]\n      },\n      \"select:env\": {\n        label: \"Environment\",\n        icon: \"server\",\n        value: \"prod\",\n        options: [\n          { label: \"Development\", value: \"dev\", icon: \"code\" },\n          { label: \"Production\", value: \"prod\", icon: \"rocket-launch\" }\n        ]\n      },\n      \"radio-group:mode\": {\n        label: \"Mode\",\n        icon: \"sliders-horizontal\",\n        value: \"auto\",\n        options: [\n          { label: \"Auto\", value: \"auto\", icon: \"sparkle\" },\n          { label: \"Manual\", value: \"manual\", icon: \"wrench\" }\n        ]\n      }\n    }\n  }\n}\n```\n\n## Custom icons\n\nHosts can register their own SVG icons before mounting content. Once registered, all components that support the `icon` field can use them by name.\n\n```js\nimport { registerIcon, registerIcons } from \"slexkit\";\n\nregisterIcon(\n  \"brand:logo-mark\",\n  '<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M8 1 15 15H1L8 1Z\"/></svg>',\n  { aliases: [\"logo-mark\"] },\n);\n\nregisterIcons({\n  \"status:healthy\":\n    '<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><circle cx=\"8\" cy=\"8\" r=\"6\"/></svg>',\n});\n```\n\n## Usage rules\n\n- `iconOnly` is supported on `button` and `tabs` only; titles, labels, and column headers never hide text.\n- `iconOnly` must be paired with `label`, `title`, or `aria-label` — assistive technology needs a readable name.\n- Without a prefix, prefer Phosphor semantic names; use an explicit prefix such as `lucide:copy` for cross-icon-set usage.\n- The runtime does not accept arbitrary URLs as icon sources. Remote icons are fetched via the Iconify API and the returned SVG passes through basic filtering.\n- Bundled icons display synchronously on first paint; unbundled icons load asynchronously. When the network is unavailable, components retain their text content.\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"icon\" sourceHash=\"cf2e09a0\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `icon` | string | No | No |  | Icon name resolved through the global icon manager. |\n| `iconOnly` | boolean | No | No |  | Render only the icon while retaining an accessible label where supported. |\n| `items[].icon` | string | No | No |  | Accordion item trigger icon. |\n| `options[].icon` | string | No | No |  | Select or radio option icon. |\n| `columns[].icon` | string | No | No |  | Table column header icon. |\n| `tabs[].icon` | string | No | No |  | Tab trigger icon. |\n| `tabs[].iconOnly` | boolean | No | No |  | Tab trigger icon-only mode. |\n<!-- slex:spec-api:end -->",
+      "hash": "a8497d85"
+    },
+    {
+      "id": "components/input",
+      "group": "Components",
+      "title": "Input",
+      "summary": "Text or engineering-value input.",
+      "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"
+    },
+    {
+      "id": "components/link",
+      "group": "Components",
+      "title": "Link",
+      "summary": "Inline navigation link.",
+      "href": "/docs/components/link",
+      "rawHref": "/docs/components/link.md",
+      "sourcePath": "site/content/components/link/en-US.md",
+      "body": "---\ntitle: \"Link\"\ncategory: Content\nstatus: ready\nsummary: \"Navigation or lightweight jump action.\"\n---\n# Link\n\nText link navigation.\n\n<!-- slex:spec-example:start component=\"link\" id=\"basic\" sourceHash=\"cf9f6896\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_link_typical\",\n  \"layout\": {\n    \"column:links\": {\n      \"link:docs\": {\n        \"href\": \"/components\",\n        \"icon\": \"arrow-square-out\",\n        \"text\": \"View components\"\n      }\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for page navigation, external links, and inline text links.\n- Not suitable for primary action buttons (use `button`).\n- Related components: `button` for explicit action triggers.\n- Keep link text short.\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"link\" sourceHash=\"7404dc9d\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `href` | string | No | No |  | Target URL. |\n| `text` | string | No | Yes |  | Visible link text. |\n| `label` | string | No | Yes |  | Alias for text. |\n| `content` | string | No | Yes |  | Alias for text. |\n| `icon` | string | No | No |  | Icon name shown before link text. |\n| `target` | string | No | No |  | Native link target attribute. |\n| `variant` | string: default, muted | No | No | `\"default\"` | Link visual variant. |\n<!-- slex:spec-api:end -->",
+      "hash": "8eeb87ad"
+    },
+    {
+      "id": "components/playground",
+      "group": "Components",
+      "title": "Playground",
+      "summary": "Interactive source preview.",
+      "href": "/docs/components/playground",
+      "rawHref": "/docs/components/playground.md",
+      "sourcePath": "site/content/components/playground/en-US.md",
+      "body": "---\ntitle: \"Playground\"\ncategory: Tooling\nstatus: ready\nsummary: \"Interactive preview and editor for SlexKit / Markdown source.\"\n---\n# Playground\n\nInteractive preview component that embeds editable, runnable SlexKit or Markdown source previews inside a page.\n\n<!-- slex:spec-example:start component=\"playground\" id=\"basic\" sourceHash=\"bccf9e4b\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_playground_typical\",\n  \"layout\": {\n    \"playground:demo\": {\n      \"title\": \"Stat Playground\",\n      \"previewMinHeight\": \"180px\",\n      \"source\": {\n        \"namespace\": \"inner_stat_demo\",\n        \"layout\": {\n          \"stat:value\": {\n            \"label\": \"Requests\",\n            \"value\": \"1.2k\",\n            \"unit\": \"/min\"\n          }\n        }\n      }\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for runnable examples in documentation, interactive demos, and source code teaching.\n- Not suitable for ordinary component rendering (use layout components directly).\n- Related components: `code-block` for read-only code display.\n- Nested source is rendered in an isolated scope — it does not conflict with the parent namespace.\n- Playground is a documentation and teaching surface, not part of the product UI.\n- Public fields cover source parsing, preview placement, theme toggle controls, labels, and open/copy URLs.\n- `domain`, `pluginVersion`, and `version` are host integration metadata and are not part of the public component API.\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"playground\" sourceHash=\"beb5402a\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `source` | object \\| string | No | No |  | SlexKit or Markdown source to preview. |\n| `sourceType` | string: slex, markdown, auto-markdown | No | No | `\"slex\"` | Source parser mode. |\n| `title` | string | No | No |  | Playground title. |\n| `previewAlign` | string: center, start | No | No | `\"center\"` | Vertical preview alignment in render mode. |\n| `alignPreview` | string: center, start | No | No |  | Alias for previewAlign. |\n| `previewPlacement` | string: center, start | No | No |  | Alias for previewAlign. |\n| `previewMinHeight` | string | No | No |  | Minimum preview area height. |\n| `previewMaxWidth` | string | No | No |  | Maximum preview content width. |\n| `themeToggle` | boolean | No | No | `false` | Show the theme toggle action. |\n| `showThemeToggle` | boolean | No | No | `false` | Alias for themeToggle. |\n| `enableThemeToggle` | boolean | No | No | `false` | Alias for themeToggle. |\n| `themeLabel` | string | No | No |  | Accessible label for the theme toggle action. |\n| `themeToggleLabel` | string | No | No |  | Alias for themeLabel. |\n| `sourceTypeLabel` | string | No | No |  | Accessible label for the source type selector. |\n| `copyLabel` | string | No | No |  | Accessible label for the copy source action. |\n| `openWebLabel` | string | No | No |  | Accessible label for opening the source in the standalone playground. |\n| `webUrl` | string | No | No |  | Standalone playground URL used by the open action. |\n| `playgroundUrl` | string | No | No |  | Alias for webUrl. |\n<!-- slex:spec-api:end -->",
+      "hash": "7313ccc4"
+    },
+    {
+      "id": "components/progress",
+      "group": "Components",
+      "title": "Progress",
+      "summary": "Progress bar.",
+      "href": "/docs/components/progress",
+      "rawHref": "/docs/components/progress.md",
+      "sourcePath": "site/content/components/progress/en-US.md",
+      "body": "---\ntitle: \"Progress\"\ncategory: Feedback\nstatus: ready\nsummary: \"Progress bar.\"\n---\n# Progress\n\nDisplay task completion progress controlled by value.\n\n<!-- slex:spec-example:start component=\"progress\" id=\"basic\" sourceHash=\"d5fe2c3c\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_progress_typical\",\n  \"layout\": {\n    \"progress:build\": {\n      \"label\": \"Build progress\",\n      \"icon\": \"gear-six\",\n      \"value\": 64\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for build progress, upload progress, and task completion.\n- Not suitable for indeterminate waiting states.\n- Related components: `stat` for numeric metric display.\n- Value range is 0-100.\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"progress\" sourceHash=\"a6111bbf\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `value` | number | No | Yes | `0` | Progress percentage from 0 to 100. |\n| `label` | string | No | Yes |  | Progress label. |\n| `icon` | string | No | No |  | Icon name shown before the label. |\n| `indeterminate` | boolean | No | Yes | `false` | Render an indeterminate progress state without aria-valuenow. |\n<!-- slex:spec-api:end -->",
+      "hash": "7d008e59"
+    },
+    {
+      "id": "components/radio-group",
+      "group": "Components",
+      "title": "Radio Group",
+      "summary": "Single-choice option group.",
+      "href": "/docs/components/radio-group",
+      "rawHref": "/docs/components/radio-group.md",
+      "sourcePath": "site/content/components/radio-group/en-US.md",
+      "body": "---\ntitle: \"Radio Group\"\ncategory: Input\nstatus: ready\nsummary: \"Mutually exclusive radio selection.\"\n---\n# Radio Group\n\nMutually exclusive option selection for small choice sets.\n\n<!-- slex:spec-example:start component=\"radio-group\" id=\"basic\" sourceHash=\"4ad4aa38\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_radio_group_typical\",\n  \"layout\": {\n    \"radio-group:mode\": {\n      \"label\": \"Mode\",\n      \"icon\": \"sliders-horizontal\",\n      \"value\": \"auto\",\n      \"options\": [\n        {\n          \"label\": \"Auto\",\n          \"value\": \"auto\",\n          \"icon\": \"sparkle\"\n        },\n        {\n          \"label\": \"Manual\",\n          \"value\": \"manual\",\n          \"icon\": \"wrench\"\n        }\n      ]\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for mode selection, small enum choices, and mutually exclusive config items.\n- Not suitable for many options (use `select`).\n- Related components: `select` for dropdown single selection with more options.\n- Keep options between 2-5 items.\n- Use `$value` and `onchange` for state binding.\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"radio-group\" sourceHash=\"9770be28\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `value` | string | No | Yes |  | Current selected value. |\n| `label` | string | No | Yes |  | Group label. |\n| `icon` | string | No | No |  | Icon name shown before the group label. |\n| `options` | array | No | No |  | Options with label, value, and optional icon. |\n| `options[].icon` | string | No | No |  | Icon name shown before a single option label. |\n| `disabled` | boolean | No | Yes | `false` | Disable every radio option in the group. |\n| `orientation` | string: vertical, horizontal | No | No | `\"vertical\"` | Radio option layout direction. |\n| `haptic` | boolean | No | No | `true` | Enable vibration feedback on supported devices. |\n| `haptics` | boolean | No | No | `true` | Alias for haptic. |\n| `name` | string | No | No |  | Native radio group name shared by options. |\n| `onchange` | write-expression | No | No |  | Write expression invoked when selection changes. |\n<!-- slex:spec-api:end -->",
+      "hash": "c3190775"
+    },
+    {
+      "id": "components/row",
+      "group": "Components",
+      "title": "Row",
+      "summary": "Horizontal layout container.",
+      "href": "/docs/components/row",
+      "rawHref": "/docs/components/row.md",
+      "sourcePath": "site/content/components/row/en-US.md",
+      "body": "---\ntitle: \"Row\"\ncategory: Layout\nstatus: ready\nsummary: \"Horizontal layout container for toolbars, status lines, and button groups.\"\n---\n# Row\n\nBasic horizontal layout container.\n\n<!-- slex:spec-example:start component=\"row\" id=\"basic\" sourceHash=\"6d23c539\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_row_typical\",\n  \"layout\": {\n    \"row:toolbar\": {\n      \"justify\": \"space-between\",\n      \"text:title\": {\n        \"text\": \"Runtime status\"\n      },\n      \"button:refresh\": {\n        \"label\": \"Refresh\"\n      }\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for button groups, toolbars, status indicator lines, and table header actions.\n- Not suitable for vertical form fields (use `column`) or equal-width card grids (use `grid`).\n- Related components: `column` for vertical layout, `grid` for two-dimensional equal-width layout.\n- Children arrange at natural width; use `justify` to control distribution.\n- Use `gap` to override the spacing between children; when omitted, the row keeps its theme CSS default.\n\n### Justify variants\n\n```slex\n{\n  namespace: \"doc_row_justify_diff\",\n  layout: {\n    \"column:demo\": {\n      \"text:start\": {\n        text: \"justify: start\"\n      },\n      \"row:justify-start\": {\n        justify: \"start\",\n        \"badge:a\": {\n          label: \"A\"\n        },\n        \"badge:b\": {\n          label: \"B\"\n        }\n      },\n      \"text:center\": {\n        text: \"justify: center\"\n      },\n      \"row:justify-center\": {\n        justify: \"center\",\n        \"badge:a\": {\n          label: \"A\"\n        },\n        \"badge:b\": {\n          label: \"B\"\n        }\n      },\n      \"text:end\": {\n        text: \"justify: end\"\n      },\n      \"row:justify-end\": {\n        justify: \"end\",\n        \"badge:a\": {\n          label: \"A\"\n        },\n        \"badge:b\": {\n          label: \"B\"\n        }\n      },\n      \"text:space-between\": {\n        text: \"justify: space-between\"\n      },\n      \"row:justify-between\": {\n        justify: \"space-between\",\n        \"badge:a\": {\n          label: \"A\"\n        },\n        \"badge:b\": {\n          label: \"B\"\n        }\n      }\n    }\n  }\n}\n```\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"row\" sourceHash=\"70f941d7\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `justify` | string: start, center, end, space-between, space-around | No | No | `\"start\"` | Main-axis distribution. |\n| `align` | string: start, center, end, baseline, stretch | No | No | `\"center\"` | Cross-axis alignment. |\n| `gap` | string | No | Yes |  | Spacing between children. |\n| child components | object | No | No |  | Nested component fields are rendered as child content in field order. |\n<!-- slex:spec-api:end -->",
+      "hash": "026953f5"
+    },
+    {
+      "id": "components/section",
+      "group": "Components",
+      "title": "Section",
+      "summary": "Page section with optional heading chrome.",
+      "href": "/docs/components/section",
+      "rawHref": "/docs/components/section.md",
+      "sourcePath": "site/content/components/section/en-US.md",
+      "body": "---\ntitle: \"Section\"\ncategory: Layout\nstatus: ready\nsummary: \"Page section with title, subtitle, optional action, and content area.\"\n---\n# Section\n\nPage-level block container with title, subtitle, optional action link, and content area.\n\n<!-- slex:spec-example:start component=\"section\" id=\"basic\" sourceHash=\"094666a8\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_section_typical\",\n  \"layout\": {\n    \"section:overview\": {\n      \"eyebrow\": \"Dashboard\",\n      \"title\": \"Runtime overview\",\n      \"icon\": \"chart-bar\",\n      \"subtitle\": \"This section groups the most important state.\",\n      \"stat:latency\": {\n        \"label\": \"Latency\",\n        \"value\": \"42\",\n        \"unit\": \"ms\"\n      }\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for dashboard blocks, settings groups, and categorized content areas.\n- Not suitable for purely visual cards (use `card`) or untitled containers (use `column`).\n- Related components: `card` is a lighter grouping container, while `section` provides a more complete heading structure.\n- The heading area and content area are distinct; nest any layout component inside the content area.\n\n### Eyebrow / subtitle variants\n\n```slex\n{\n  namespace: \"doc_section_eyebrow_diff\",\n  layout: {\n    \"column:demo\": {\n      \"section:with-eyebrow\": {\n        eyebrow: \"Overview\",\n        title: \"With eyebrow\",\n        \"text:body\": {\n          text: \"Eyebrow appears above the title.\"\n        }\n      },\n      \"section:with-subtitle\": {\n        title: \"With subtitle\",\n        subtitle: \"Additional context below the title.\",\n        \"text:body\": {\n          text: \"Subtitle provides extra context.\"\n        }\n      }\n    }\n  }\n}\n```\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"section\" sourceHash=\"03916011\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `title` | string | No | Yes |  | Section title. |\n| `icon` | string | No | No |  | Icon name shown before the title. |\n| `eyebrow` | string | No | Yes |  | Small label above the title. |\n| `subtitle` | string | No | Yes |  | Subtitle text below the title. |\n| `actionLabel` | string | No | Yes |  | Optional action link label. |\n| `actionHref` | string | No | No |  | Optional action link target. |\n| child components | object | No | No |  | Nested component fields are rendered as child content in field order. |\n<!-- slex:spec-api:end -->",
+      "hash": "f6df61a4"
+    },
+    {
+      "id": "components/select",
+      "group": "Components",
+      "title": "Select",
+      "summary": "Dropdown selection input.",
+      "href": "/docs/components/select",
+      "rawHref": "/docs/components/select.md",
+      "sourcePath": "site/content/components/select/en-US.md",
+      "body": "---\ntitle: \"Select\"\ncategory: Input\nstatus: ready\nsummary: \"Single-select dropdown.\"\n---\n# Select\n\nSingle-select dropdown with options defined as an array and the current value controlled via value.\n\n<!-- slex:spec-example:start component=\"select\" id=\"basic\" sourceHash=\"b5675bcc\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_select_typical\",\n  \"layout\": {\n    \"select:env\": {\n      \"label\": \"Environment\",\n      \"icon\": \"server\",\n      \"value\": \"prod\",\n      \"options\": [\n        {\n          \"label\": \"Development\",\n          \"value\": \"dev\",\n          \"icon\": \"code\"\n        },\n        {\n          \"label\": \"Production\",\n          \"value\": \"prod\",\n          \"icon\": \"rocket-launch\"\n        }\n      ]\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for enum selection, config items, and environment choice.\n- Not suitable for small mutually exclusive groups (use `radio-group`).\n- Related components: `radio-group` for smaller option sets.\n- Combine with `column` to compose forms.\n- Use `$value` and `onchange` for state binding.\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"select\" sourceHash=\"44dbc082\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `label` | string | No | Yes |  | Select label. |\n| `icon` | string | No | No |  | Icon name shown before the top label. |\n| `value` | string | No | Yes |  | Current selected value. |\n| `options` | array | No | No |  | Options with label, value, and optional icon. |\n| `options[].icon` | string | No | No |  | Icon name shown before an option label. |\n| `placeholder` | string | No | No |  | Placeholder shown when no value is selected. |\n| `disabled` | boolean | No | Yes | `false` | Disable the select trigger and native select. |\n| `required` | boolean | No | Yes | `false` | Require a non-placeholder value in the native select. |\n| `variant` | string: default, toolbar | No | No | `\"default\"` | Select surface variant. |\n| `onchange` | write-expression | No | No |  | Write expression invoked when selection changes. |\n<!-- slex:spec-api:end -->",
+      "hash": "43c6a193"
+    },
+    {
+      "id": "components/slider",
+      "group": "Components",
+      "title": "Slider",
+      "summary": "Numeric range input.",
+      "href": "/docs/components/slider",
+      "rawHref": "/docs/components/slider.md",
+      "sourcePath": "site/content/components/slider/en-US.md",
+      "body": "---\ntitle: \"Slider\"\ncategory: Input\nstatus: ready\nsummary: \"Numeric range input.\"\n---\n# Slider\n\nNumeric range selection with min, max, step control and unit display.\n\n<!-- slex:spec-example:start component=\"slider\" id=\"basic\" sourceHash=\"a0525d92\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_slider_typical\",\n  \"layout\": {\n    \"slider:volume\": {\n      \"label\": \"Volume\",\n      \"icon\": \"speaker-high\",\n      \"value\": 42,\n      \"min\": 0,\n      \"max\": 100,\n      \"step\": 1,\n      \"unit\": \"%\"\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for volume, brightness, threshold, and percentage adjustments.\n- Not suitable for precise text entry (use `input`).\n- Related components: `input` for text input.\n- Use `$value` and `onchange` for state binding.\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"slider\" sourceHash=\"0939dc16\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `label` | string | No | Yes |  | Slider label. |\n| `icon` | string | No | No |  | Icon name shown before the label. |\n| `value` | number | No | Yes | `0` | Current numeric value. |\n| `min` | number | No | Yes | `0` | Minimum value. |\n| `max` | number | No | Yes | `100` | Maximum value. |\n| `step` | number | No | Yes | `1` | Step interval. |\n| `unit` | string | No | Yes |  | Unit shown after the value. |\n| `disabled` | boolean | No | Yes | `false` | Disable the range input. |\n| `orientation` | string: horizontal, vertical | No | No | `\"horizontal\"` | Slider orientation metadata used for styling. |\n| `haptic` | boolean | No | No | `true` | Enable vibration feedback on supported devices. |\n| `haptics` | boolean | No | No | `true` | Alias for haptic. |\n| `onchange` | write-expression | No | No |  | Write expression invoked when the value changes. |\n<!-- slex:spec-api:end -->",
+      "hash": "b34cc3f8"
+    },
+    {
+      "id": "components/stat",
+      "group": "Components",
+      "title": "Stat",
+      "summary": "Metric display.",
+      "href": "/docs/components/stat",
+      "rawHref": "/docs/components/stat.md",
+      "sourcePath": "site/content/components/stat/en-US.md",
+      "body": "---\ntitle: \"Stat\"\ncategory: Display\nstatus: ready\nsummary: \"Metric display with label, value, unit, and semantic tone.\"\n---\n# Stat\n\nPresent a labeled metric value with optional unit and semantic tone.\n\n<!-- slex:spec-example:start component=\"stat\" id=\"basic\" sourceHash=\"9fa58aeb\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_stat_typical\",\n  \"layout\": {\n    \"grid:stats\": {\n      \"columns\": 2,\n      \"stat:requests\": {\n        \"label\": \"Requests\",\n        \"icon\": \"activity\",\n        \"value\": \"1.2k\",\n        \"unit\": \"/min\"\n      },\n      \"stat:success\": {\n        \"label\": \"Success\",\n        \"icon\": \"check-circle\",\n        \"value\": \"98.4\",\n        \"unit\": \"%\",\n        \"tone\": \"success\"\n      }\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for data dashboards, metric overviews, and key indicator displays.\n- Not suitable for long text (use `text`) or interactive input (use `input`).\n- Related components: `text` for text output, `badge` for label status.\n- Stats are typically used inside a `grid` or `row`.\n- Use `tone` only for semantic state, not as an arbitrary style picker.\n\n### Tone variants\n\n```slex\n{\n  namespace: \"doc_stat_tone_diff\",\n  layout: {\n    \"row:tones\": {\n      \"stat:info\": {\n        label: \"Info\",\n        value: \"42\",\n        tone: \"info\"\n      },\n      \"stat:success\": {\n        label: \"Success\",\n        value: \"98%\",\n        tone: \"success\"\n      },\n      \"stat:warning\": {\n        label: \"Warning\",\n        value: \"73\",\n        tone: \"warning\"\n      },\n      \"stat:danger\": {\n        label: \"Danger\",\n        value: \"5\",\n        tone: \"danger\"\n      },\n      \"stat:muted\": {\n        label: \"Muted\",\n        value: \"0\",\n        tone: \"muted\"\n      }\n    }\n  }\n}\n```\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"stat\" sourceHash=\"389443e6\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `label` | string | No | Yes |  | Metric label. |\n| `icon` | string | No | No |  | Icon name shown before the label. |\n| `value` | string \\| number | No | Yes |  | Metric value. |\n| `unit` | string | No | Yes |  | Unit shown after the value. |\n| `tone` | string: info, success, warning, danger, muted | No | No |  | Optional semantic tone. |\n| `animateInitial` | boolean | No | No | `false` | Animate the initial rendered value. |\n<!-- slex:spec-api:end -->",
+      "hash": "e352f69e"
+    },
+    {
+      "id": "components/submit",
+      "group": "Components",
+      "title": "Submit",
+      "summary": "ToolHost submit and ignore controls.",
+      "href": "/docs/components/submit",
+      "rawHref": "/docs/components/submit.md",
+      "sourcePath": "site/content/components/submit/en-US.md",
+      "body": "---\ntitle: \"Submit\"\ncategory: Action\nstatus: ready\nsummary: \"ToolHost submission boundary that returns current selection or form values to the host.\"\n---\n# Submit\n\nToolHost submission boundary component providing submit and ignore actions.\n\n<!-- slex:spec-example:start component=\"submit\" id=\"basic\" sourceHash=\"b5d89128\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_submit_typical\",\n  \"layout\": {\n    \"column:tool\": {\n      \"input:title\": {\n        \"value\": \"Release note\",\n        \"placeholder\": \"Title\"\n      },\n      \"submit:done\": {\n        \"submitLabel\": \"Submit\",\n        \"ignoreLabel\": \"Ignore\",\n        \"returnKeys\": [\n          \"title\"\n        ]\n      }\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for AI toolchain confirmation forms, parameter panels, and selection confirmation flows.\n- Not suitable for ordinary action buttons (use `button`).\n- Related components: `button` for local action triggers.\n- Combine with input components such as `input` and `select` to read user choices.\n- Paths in `returnKeys` are read from the global state `g`.\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"submit\" sourceHash=\"1c7c766f\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `submitLabel` | string | No | No | `\"Submit\"` | Submit button text. |\n| `ignoreLabel` | string | No | No | `\"Ignore\"` | Ignore button text. |\n| `returnKeys` | string[] | No | No |  | State field paths returned to ToolHost. |\n| `disabled` | boolean | No | Yes | `false` | Disable submit action. |\n<!-- slex:spec-api:end -->",
+      "hash": "ab4cdd10"
+    },
+    {
+      "id": "components/switch",
+      "group": "Components",
+      "title": "Switch",
+      "summary": "Boolean switch input.",
+      "href": "/docs/components/switch",
+      "rawHref": "/docs/components/switch.md",
+      "sourcePath": "site/content/components/switch/en-US.md",
+      "body": "---\ntitle: \"Switch\"\ncategory: Input\nstatus: ready\nsummary: \"Boolean toggle input for instant settings.\"\n---\n# Switch\n\nBoolean toggle for instant-activation settings.\n\n<!-- slex:spec-example:start component=\"switch\" id=\"basic\" sourceHash=\"9c7b3bda\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_switch_typical\",\n  \"layout\": {\n    \"switch:feature\": {\n      \"enabled\": true,\n      \"label\": \"Enable sync\",\n      \"icon\": \"arrows-clockwise\"\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for feature toggles, preference enable/disable, and instant-effect settings.\n- Not suitable for confirmation-style toggles (use `checkbox`).\n- Related components: `checkbox` for confirmations or multi-select.\n- Typically placed inside a `row` or `column`.\n- Use `$enabled` and `onchange` for state binding.\n\n### Enabled / disabled variants\n\n```slex\n{\n  namespace: \"doc_switch_state_diff\",\n  layout: {\n    \"row:diff\": {\n      \"switch:enabled\": {\n        label: \"Enabled\",\n        enabled: true\n      },\n      \"switch:disabled\": {\n        label: \"Disabled\"\n      },\n      \"switch:enabled-not-available\": {\n        label: \"Enabled (not available)\",\n        enabled: true,\n        disabled: true\n      },\n      \"switch:disabled-not-available\": {\n        label: \"Disabled (not available)\",\n        disabled: true\n      }\n    }\n  }\n}\n```\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"switch\" sourceHash=\"27367ad0\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `enabled` | boolean | No | Yes | `false` | Enabled state. |\n| `label` | string | No | Yes |  | Switch label. |\n| `icon` | string | No | No |  | Icon name shown before the visible label. |\n| `disabled` | boolean | No | Yes | `false` | Disable the switch. |\n| `haptic` | boolean | No | No | `true` | Enable vibration feedback on supported devices. |\n| `haptics` | boolean | No | No | `true` | Alias for haptic. |\n| `onchange` | write-expression | No | No |  | Write expression invoked when enabled state changes. |\n<!-- slex:spec-api:end -->",
+      "hash": "d72058e4"
+    },
+    {
+      "id": "components/table",
+      "group": "Components",
+      "title": "Table",
+      "summary": "Simple data table.",
+      "href": "/docs/components/table",
+      "rawHref": "/docs/components/table.md",
+      "sourcePath": "site/content/components/table/en-US.md",
+      "body": "---\ntitle: \"Table\"\ncategory: Data\nstatus: ready\nsummary: \"Structured table with columns and rows.\"\n---\n# Table\n\nStructured row-column data display with column headers and data rows.\n\n<!-- slex:spec-example:start component=\"table\" id=\"basic\" sourceHash=\"8491bf94\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_table_typical\",\n  \"layout\": {\n    \"table:routes\": {\n      \"columns\": [\n        {\n          \"key\": \"name\",\n          \"label\": \"Name\",\n          \"icon\": \"text-t\"\n        },\n        {\n          \"key\": \"status\",\n          \"label\": \"Status\",\n          \"icon\": \"check-circle\"\n        }\n      ],\n      \"rows\": [\n        {\n          \"name\": \"Parse\",\n          \"status\": \"ready\"\n        },\n        {\n          \"name\": \"Publish\",\n          \"status\": \"pending\"\n        }\n      ]\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for data lists, configuration tables, and structured information display.\n- Not suitable for card-style layouts (use `grid`).\n- Related components: `grid` for equal-width card layouts.\n- Column `key` values correspond to field names in each row.\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"table\" sourceHash=\"9a408c2a\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `columns` | array | No | No |  | Column definitions with key, label, and optional icon. |\n| `columns[].icon` | string | No | No |  | Icon name shown before a column label. |\n| `rows` | array | No | No |  | Row data objects keyed by column key. |\n| `items` | array | No | No |  | Alias for rows. |\n<!-- slex:spec-api:end -->",
+      "hash": "be8190d7"
+    },
+    {
+      "id": "components/tabs",
+      "group": "Components",
+      "title": "Tabs",
+      "summary": "Tabbed view switcher.",
+      "href": "/docs/components/tabs",
+      "rawHref": "/docs/components/tabs.md",
+      "sourcePath": "site/content/components/tabs/en-US.md",
+      "body": "---\ntitle: \"Tabs\"\ncategory: Navigation\nstatus: ready\nsummary: \"Tabbed view switcher.\"\n---\n# Tabs\n\nSwitch between named content panels.\n\n<!-- slex:spec-example:start component=\"tabs\" id=\"basic\" sourceHash=\"df3a28e8\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_tabs_typical\",\n  \"layout\": {\n    \"tabs:main\": {\n      \"value\": \"overview\",\n      \"tabs\": [\n        {\n          \"value\": \"overview\",\n          \"label\": \"Overview\"\n        },\n        {\n          \"value\": \"settings\",\n          \"label\": \"Settings\"\n        }\n      ]\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for settings panel sections, content category switching, and configuration groups.\n- Not suitable for multi-page wizards — use explicit page state and navigation.\n- Related components: `button` for submit actions, `link` for cross-page navigation.\n- Use `$value` and `onchange` for controlled switching.\n\n### Orientation variants\n\n```slex\n{\n  namespace: \"doc_tabs_orientation_diff\",\n  layout: {\n    \"row:orientations\": {\n      \"column:h\": {\n        \"text:horiz\": {\n          text: \"horizontal (default)\"\n        },\n        \"tabs:horizontal\": {\n          value: \"a\",\n          orientation: \"horizontal\",\n          tabs: [\n            {\n              value: \"a\",\n              label: \"Tab A\"\n            },\n            {\n              value: \"b\",\n              label: \"Tab B\"\n            }\n          ]\n        }\n      },\n      \"column:v\": {\n        \"text:vert\": {\n          text: \"vertical\"\n        },\n        \"tabs:vertical\": {\n          value: \"a\",\n          orientation: \"vertical\",\n          tabs: [\n            {\n              value: \"a\",\n              label: \"Tab A\"\n            },\n            {\n              value: \"b\",\n              label: \"Tab B\"\n            }\n          ]\n        }\n      }\n    }\n  }\n}\n```\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"tabs\" sourceHash=\"a8288681\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `value` | string | No | Yes |  | Current active tab value. |\n| `tabs` | array | No | No |  | Tab definitions with value, label, content, icon, and iconOnly. |\n| `tabs[].icon` | string | No | No |  | Icon name shown before a tab trigger label. |\n| `tabs[].iconOnly` | boolean | No | No |  | Show only the tab icon while retaining label as accessible text. |\n| `orientation` | string: horizontal, vertical | No | No | `\"horizontal\"` | Tab list orientation. |\n| `onchange` | write-expression | No | No |  | Write expression invoked when the active tab changes. |\n<!-- slex:spec-api:end -->",
+      "hash": "a0029940"
+    },
+    {
+      "id": "components/text",
+      "group": "Components",
+      "title": "Text",
+      "summary": "Plain text display.",
+      "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"
+    },
+    {
+      "id": "components/toast",
+      "group": "Components",
+      "title": "Toast",
+      "summary": "Transient notification.",
+      "href": "/docs/components/toast",
+      "rawHref": "/docs/components/toast.md",
+      "sourcePath": "site/content/components/toast/en-US.md",
+      "body": "---\ntitle: \"Toast\"\ncategory: Feedback\nstatus: ready\nsummary: \"Transient notification with semantic type.\"\n---\n# Toast\n\nInline notification with semantic type and optional icon.\n\n<!-- slex:spec-example:start component=\"toast\" id=\"basic\" sourceHash=\"1cab367e\" -->\n```slex\n{\n  \"slex\": \"0.1\",\n  \"namespace\": \"doc_toast_typical\",\n  \"layout\": {\n    \"toast:saved\": {\n      \"type\": \"success\",\n      \"title\": \"Saved\",\n      \"icon\": \"check-circle\",\n      \"description\": \"Changes have been written.\"\n    }\n  }\n}\n```\n<!-- slex:spec-example:end -->\n\n## Usage Notes\n\n- Use for save confirmations, operation errors, and status change notifications.\n- Not suitable for messages that require user response or long-term visibility — use an inline form or `callout` instead.\n- Related components: `callout` for in-page prompt blocks, `badge` for compact status.\n- Set `duration` for auto-hide behavior; without it, the toast renders as an inline notification card.\n- Use `type` only for semantic message purpose.\n\n### Type variants\n\n```slex\n{\n  namespace: \"doc_toast_type_diff\",\n  layout: {\n    \"column:types\": {\n      \"toast:info\": {\n        type: \"info\",\n        title: \"Info\",\n        description: \"A new update is available.\"\n      },\n      \"toast:success\": {\n        type: \"success\",\n        title: \"Success\",\n        description: \"Operation completed.\"\n      },\n      \"toast:warning\": {\n        type: \"warning\",\n        title: \"Warning\",\n        description: \"Review before proceeding.\"\n      },\n      \"toast:danger\": {\n        type: \"danger\",\n        title: \"Error\",\n        description: \"Something went wrong.\"\n      }\n    }\n  }\n}\n```\n\n## API Reference {#api}\n\n<!-- slex:spec-api:start component=\"toast\" sourceHash=\"854ea3a2\" -->\n| Field | Type | Required | Dynamic | Default | Description |\n|---|---|---|---|---|---|\n| `title` | string | No | Yes |  | Toast title. |\n| `heading` | string | No | Yes |  | Alias for title. |\n| `label` | string | No | Yes |  | Alias for title. |\n| `icon` | string | No | No |  | Icon name shown at the left of the toast. |\n| `description` | string | No | Yes |  | Toast body text. |\n| `text` | string | No | Yes |  | Alias for description. |\n| `message` | string | No | Yes |  | Alias for description. |\n| `content` | string | No | Yes |  | Alias for description. |\n| `type` | string: info, success, warning, danger | No | No | `\"info\"` | Semantic notification type. |\n| `tone` | string: info, success, warning, danger | No | No | `\"info\"` | Alias for type. |\n| `duration` | number | No | No |  | Auto-hide delay in milliseconds. |\n| `dismissable` | boolean | No | No | `true` | Show a close button. |\n| `dismissible` | boolean | No | No | `true` | Alias for dismissable. |\n| `closeLabel` | string | No | No | `\"Close notification\"` | Accessible close button label. |\n| `closeAriaLabel` | string | No | No |  | Alias for closeLabel. |\n<!-- slex:spec-api:end -->",
+      "hash": "960011bc"
+    },
+    {
+      "id": "reference/spec",
+      "group": "Reference",
+      "title": "Slex Specification",
+      "summary": "Public Slex expression envelope, component keys, props, directives, and lifecycle.",
+      "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"
+    },
+    {
+      "id": "reference/usage",
+      "group": "Reference",
+      "title": "Slex Usage Reference",
+      "summary": "Slex source structure, props, directives, events, theming, custom components, and ToolHost boundaries.",
+      "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"
+    },
+    {
+      "id": "reference/runtime",
+      "group": "Reference",
+      "title": "Runtime Model",
+      "summary": "Mounting, ingestion, boot, namespace store, lifecycle, and runtime APIs.",
+      "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"
+    },
+    {
+      "id": "reference/integration",
+      "group": "Reference",
+      "title": "Host Integration",
+      "summary": "Markdown renderers, Streamdown, Obsidian, custom hosts, and artifact lifecycle.",
+      "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"
+    },
+    {
+      "id": "reference/security",
+      "group": "Reference",
+      "title": "Security Runtime",
+      "summary": "Threat model, sandbox iframe, postMessage bridge, policy, and fail-closed behavior.",
+      "href": "/docs/reference/security",
+      "rawHref": "/docs/reference/security.md",
+      "sourcePath": "site/content/reference/security/en-US.md",
+      "body": "---\ntitle: Security Runtime Contract\ncategory: Reference\nstatus: ready\norder: 50\nsummary: \"Threat model, sandbox iframe deployment, host policy, postMessage bridge, and fail-closed behavior.\"\nslexkitRenderMode: component\n---\n\n# Security Runtime Contract\n\nThe secure runtime defines what untrusted Slex source can and cannot do, how the host authorizes capabilities, and how sandbox isolation works.\n\n## Threat model\n\n- The host page and host application are trusted.\n- Slex source may be untrusted.\n- Secure artifacts run inside a sandbox iframe.\n- The iframe uses an opaque origin by default (no `allow-same-origin`).\n- Slex source must not access the host DOM, cookies, `localStorage`, `IndexedDB`, or host global objects.\n\nSecure mode confines expression execution to an isolated environment and consolidates sensitive capabilities under the host `policy` and `api.*`.\n\n## Authorization source\n\nThe sole authorization source is the `HostRuntimePolicy` provided by the host. Slex source fields such as `capabilities`, `permissions`, `api`, or other top-level declarations cannot grant themselves authority.\n\nAll capabilities are accessed through `api.*`:\n\n```\napi.get(url, options)\napi.post(url, body, options)\napi.fetch(url, options)\n\napi.setTimeout(fn, ms)\napi.clearTimeout(id)\napi.setInterval(fn, ms)\napi.clearInterval(id)\n\napi.raf(fn)\napi.cancelRaf(id)\n\napi.createCanvas(width, height)\napi.getCanvasContext(canvas, contextId, options)\n\napi.onDispose(fn)\napi.now()\n\napi.isTimeoutError(error)\napi.isNetworkError(error)\napi.isPolicyError(error)\napi.errorMessage(error)\n```\n\nCapabilities not exposed through `api.*` are unsupported.\n\n## HostRuntimePolicy\n\n```ts\ntype HostRuntimePolicy = {\n  network?: {\n    enabled: boolean;\n    methods: (\"GET\" | \"POST\")[];\n    allowOrigins: string[];\n    allowHeaders?: string[];\n    allowContentTypes?: string[];\n    credentials: \"omit\" | \"same-origin\" | \"include\";\n    timeoutMs: number;\n    maxBodyBytes: number;\n    maxResponseBytes?: number;\n  };\n  timer?: {\n    enabled: boolean;\n    maxTimers: number;\n    minIntervalMs: number;\n  };\n  animation?: {\n    enabled: boolean;\n  };\n  canvas?: {\n    enabled: boolean;\n    maxCanvases?: number;\n    maxPixels?: number;\n    allowedContexts?: (\"2d\" | \"webgl\" | \"webgl2\" | \"bitmaprenderer\")[];\n  };\n  execution?: {\n    heartbeatIntervalMs?: number;\n    maxUnresponsiveMs?: number;\n  };\n};\n```\n\n### Network policy\n\nNetwork is denied by default unless `policy.network.enabled` is `true`. The policy constrains:\n- HTTP method (only listed methods allowed)\n- Origin (supports `*`, exact match, `protocol://*` protocol wildcard, and `protocol://*.domain` subdomain wildcard)\n- Request headers (only listed headers pass; `Authorization`, `Cookie`, `Proxy-Authorization`, `Set-Cookie`, and Sec-Fetch headers are always blocked)\n- Credentials mode\n- Request body size\n- Request timeout\n- Response body size\n- Response content-type\n\n`hostAdapter.fetch` can replace the actual request implementation. `hostAdapter.onNetworkLog` is observational only -it must not alter runtime behavior.\n\n### Timer, animation, and canvas\n\n- **Timer**: denied by default. When enabled, subject to `maxTimers` (total concurrent) and `minIntervalMs` (minimum delay). All timers and intervals are cleaned up on dispose.\n- **Animation**: denied by default. Controlled via `animation.enabled`; `api.raf` is the only animation primitive.\n- **Canvas**: denied by default. When enabled, subject to `maxCanvases`, `maxPixels`, and `allowedContexts`.\n\n### Execution monitoring\n\n`execution.heartbeatIntervalMs` controls how often the sandbox sends a heartbeat to the host. `execution.maxUnresponsiveMs` defines the maximum silence before the sandbox is terminated as unresponsive.\n\n## HostRuntimeAdapter\n\nThe adapter allows the host to override or observe runtime behavior:\n\n```ts\ntype HostRuntimeAdapter = {\n  fetch?: (request: HostFetchRequest) => Promise<NetworkResult>;\n  onNetworkLog?: (event: RuntimeNetworkLogEvent) => void;\n  onRuntimeError?: (event: RuntimeErrorEvent) => void;\n  now?: () => number;\n  setTimeout?: (fn: () => void, ms: number) => TimerId;\n  clearTimeout?: (id: TimerId) => void;\n  setInterval?: (fn: () => void, ms: number) => TimerId;\n  clearInterval?: (id: TimerId) => void;\n  requestAnimationFrame?: (fn: (time: number) => void) => RafId;\n  cancelAnimationFrame?: (id: RafId) => void;\n};\n```\n\n`onNetworkLog` and `onRuntimeError` are audit hooks -they must not change runtime behavior. Errors thrown within them are silently caught.\n\n## Sandbox iframe deployment\n\nThe secure frame imports the main runtime module from a `runtimeUrl`:\n\n```ts\nmountSecureArtifact(script, container, {\n  frame: {\n    runtimeUrl: \"/slexkit.runtime.js\"\n  }\n});\n```\n\nThis URL must serve as a public ES module and return:\n\n```\nAccess-Control-Allow-Origin: *\nContent-Type: text/javascript\n```\n\nThis is server or deployment layer configuration -it cannot be set from frontend JavaScript.\n\n### CSP\n\nThe sandbox iframe is served via `srcdoc` with a strict Content-Security-Policy:\n\n```\ndefault-src 'none'\nscript-src 'nonce-{random}' 'unsafe-eval' {runtimeOrigin}\nconnect-src 'none'\nimg-src data: blob:\nstyle-src 'unsafe-inline'\nfont-src data:\nform-action 'none'\nbase-uri 'none'\n```\n\nA random nonce is generated for each frame instance. `unsafe-eval` is required because Slex source expression evaluation uses `eval()` inside the sandbox.\n\n### Sandbox attribute\n\nThe iframe requires `allow-scripts`. `allow-same-origin` is **blocked by default** -it would weaken the opaque origin isolation. Only set `unsafeAllowSameOrigin: true` explicitly if the host accepts the risk:\n\n```ts\nframe: {\n  unsafeAllowSameOrigin: true,  // only with explicit host acceptance\n  sandbox: \"allow-scripts allow-same-origin\"\n}\n```\n\nDo not add `allow-same-origin` to fix CORS or debugging issues.\n\n## postMessage bridge protocol\n\nThe host and sandbox communicate via `window.postMessage`. All messages are tagged with `channel: \"slexkit-secure\"`.\n\n### Host -Sandbox messages\n\n| Type | Purpose |\n|------|---------|\n| `mount` | Sends Slex source, policy, theme to render |\n| `dispose` | Tells sandbox to tear down |\n| `fetch-result` | Returns fetch response or error |\n| `slots` | Synchronizes artifact slot positions |\n\n### Sandbox -Host messages\n\n| Type | Purpose |\n|------|---------|\n| `ready` | Runner module loaded and listening |\n| `mounted` | Artifact render confirmed |\n| `disposed` | Sandbox teardown acknowledged |\n| `heartbeat` | Periodic liveness signal |\n| `error` | Mount or runtime error |\n| `fetch` | Proxied network request |\n| `slot-size` | Artifact slot height report |\n\nEvery host→sandbox message includes an `id` and `token`. The token is opaque, cryptographically random, and scoped to a single mount instance. Messages with mismatched tokens are rejected.\n\nMessages are verified: the sandbox checks `event.source === window.parent`; the host checks `event.source === iframe.contentWindow`.\n\n## Artifact slot bridge\n\nMultiple Markdown fences belonging to one artifact share a single sandbox iframe. The host sends slot rectangles to the sandbox, which renders each fence's output inside the corresponding slot container. The sandbox reports each slot's rendered height back via `slot-size` messages.\n\nA `ResizeObserver` on the host side and inside the sandbox keeps positions and heights synchronized. This allows visual continuity across fence boundaries while keeping all execution confined to one isolation context.\n\n## Heartbeat watchdog\n\nWhen `execution.maxUnresponsiveMs` is set, the host monitors the sandbox heartbeat interval. If no heartbeat arrives within the threshold, the iframe is terminated, a diagnostic alert (`role=\"alert\"`) is rendered, and a `console.error` is emitted.\n\n## Fail-closed behavior\n\nIf the iframe cannot load the runtime, does not send a ready/mounted message, or the heartbeat times out, SlexKit:\n\n1. Removes the unresponsive iframe.\n2. Renders a `role=\"alert\"` diagnostic element with a description of the failure.\n3. Emits the same information via `console.error`.\n\nLoad timeout is configurable via `frame.loadTimeoutMs` (default: 8000ms).\n\n## Escape hatches\n\n### `unsafeInlineExecution`\n\nAllows a secure artifact to execute inline in the host page with an injected secure runtime API. **Intended for testing or host-trusted content only.** Not recommended for untrusted paths.\n\n```ts\nmountSecureArtifact(script, container, {\n  policy,\n  hostAdapter,\n  unsafeInlineExecution: true\n});\n```\n\n### `unsafeAllowSameOrigin`\n\nAllows `allow-same-origin` in the sandbox attribute. **Reduces isolation strength** -only use when the host explicitly accepts the risk.\n\n```ts\nframe: {\n  sandbox: \"allow-scripts allow-same-origin\",\n  unsafeAllowSameOrigin: true\n}\n```\n\n## Sandbox hardening\n\nWhen the sandbox runner starts, it hardens the global scope:\n\n**Blocked network globals** -`fetch`, `XMLHttpRequest`, `WebSocket`, `EventSource`, `Worker`, `SharedWorker`, and `navigator.sendBeacon` are replaced with functions that throw, ensuring all network traffic must go through the bridge.\n\n**Blocked scheduling globals** -`setTimeout`, `setInterval`, `requestAnimationFrame` are replaced with functions that throw, directing code to `api.setTimeout()`, `api.setInterval()`, and `api.raf()`.\n\n**Canvas prototype wrapping** -`HTMLCanvasElement.prototype.getContext` is wrapped to enforce canvas policy on context creation. `OffscreenCanvas` is replaced with a subclass that validates dimensions on construction.\n\n## Maintenance principles\n\n- New capabilities must define a policy field first, then an `api.*` method, then the bridge.\n- Slex source declarations are never an authorization source.\n- Default to opaque origin.\n- Always fail closed.\n- Log and error hooks are observational -they must not alter runtime behavior.",
+      "hash": "4cfe36f1"
+    },
+    {
+      "id": "reference/packages",
+      "group": "Reference",
+      "title": "Package Boundaries",
+      "summary": "Package relationships, installation matrix, and packaging strategy.",
+      "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"
+    },
+    {
+      "id": "reference/toolhost",
+      "group": "Reference",
+      "title": "ToolHost",
+      "summary": "Tool call rendering, built-in templates, custom templates, and submit boundaries.",
+      "href": "/docs/reference/toolhost",
+      "rawHref": "/docs/reference/toolhost.md",
+      "sourcePath": "site/content/reference/toolhost/en-US.md",
+      "body": "---\ntitle: ToolHost\ncategory: Reference\nstatus: ready\norder: 70\nsummary: \"Structured user-input UI for confirmations, choices, forms, templates, and submit boundaries.\"\nslexkitRenderMode: component\n---\n\n# ToolHost\n\nToolHost bridges AI tool calls to interactive UI. Instead of the AI executing tools server-side, ToolHost renders a structured input form in the browser and returns the user's response as a `ToolResult`.\n\n## Concepts\n\nWhen an AI model emits a tool call (e.g., `confirm-action`, `fill-form`), ToolHost compiles it into a standard `SlexExpression` and mounts it using the core runtime. The mounted UI has a **submit boundary** (`submit:actions` component) that settles a Promise with the user's input.\n\nToolHost is **separate from display-oriented `slex` fences**. Display components render information; ToolHost components collect structured user input and return it programmatically.\n\n## Public API\n\n### `renderToolCall(call, container) → ToolRenderHandle`\n\nCompiles a tool call into a SlexExpression, mounts it, and returns a handle.\n\n```ts\nfunction renderToolCall(call: ToolCall, container: HTMLElement): ToolRenderHandle;\n```\n\n```ts\ntype ToolRenderHandle = {\n  promise: Promise<ToolResult>;  // Resolves when user submits or ignores\n  dispose: () => void;           // Clean up the rendered UI\n};\n\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**Usage:**\n\n```js\nimport { renderToolCall } from \"slexkit\";\n\nconst handle = renderToolCall(\n  {\n    id: \"call_001\",\n    name: \"confirm-action\",\n    arguments: {\n      title: \"Delete file?\",\n      description: \"This action cannot be undone.\",\n      confirmLabel: \"Delete\",\n      requireReason: true,\n    },\n  },\n  document.getElementById(\"tool-container\"),\n);\n\nhandle.promise.then((result) => {\n  console.log(result.status); // \"submitted\" or \"ignored\"\n  console.log(result.value);  // { confirmed: true, reason: \"Obsolete file\" }\n  handle.dispose();\n});\n```\n\n### `registerToolTemplate(name, compiler)`\n\nRegister a custom tool template. The compiler function receives the tool arguments and returns a `SlexExpression`.\n\n```ts\nfunction registerToolTemplate(name: string, compiler: ToolTemplateCompiler): void;\n\ntype ToolTemplateCompiler<TArgs = Record<string, unknown>> = (\n  args: TArgs,\n  runtime: ToolRuntime,\n  call: ToolCall,\n) => SlexExpression;\n\ntype ToolRuntime = {\n  submit: (value: Record<string, unknown>) => void;\n  ignore: () => void;\n};\n```\n\n## Built-in templates\n\n### `confirm-action`\n\nYes/no confirmation dialog. Supports an optional reason field.\n\n**Arguments (`ConfirmActionArguments`):**\n\n| Field | Type | Default | Description |\n|-------|------|---------|-------------|\n| `title` | `string` | `\"Confirm action\"` | Dialog title |\n| `description` | `string` | — | Optional explanation text |\n| `confirmLabel` | `string` | `\"Confirm\"` | Submit button label |\n| `ignoreLabel` | `string` | `\"Ignore\"` | Cancel button label |\n| `requireReason` | `boolean` | `false` | Show a reason text input |\n| `reasonLabel` | `string` | `\"Reason\"` | Label for the reason input |\n| `reasonPlaceholder` | `string` | `\"Add a reason\"` | Placeholder for the reason input |\n\n**Result value:**\n\n| Key | Type | Description |\n|-----|------|-------------|\n| `confirmed` | `boolean` | Always `true` when submitted |\n| `reason` | `string` | User's reason text (only if `requireReason: true`) |\n\n**Example:**\n\n```js\nrenderToolCall({\n  name: \"confirm-action\",\n  arguments: {\n    title: \"Delete project?\",\n    description: \"This will permanently delete all files.\",\n    confirmLabel: \"Delete\",\n    requireReason: true,\n  },\n}, container);\n```\n\n### `choose-options` / `option-list`\n\nSingle or multi-select option list. `option-list` is an alias for `choose-options` — behavior is identical.\n\n**Arguments (`ChooseOptionsArguments` / `OptionListArguments`):**\n\n| Field | Type | Default | Description |\n|-------|------|---------|-------------|\n| `title` | `string` | `\"Choose options\"` | Dialog title |\n| `description` | `string` | — | Optional explanation text |\n| `options` / `items` | `OptionListItem[]` | `[]` | List of selectable items |\n| `multiple` | `boolean` | `true` | Allow multiple selection |\n| `selected` | `string[]` | auto | Pre-selected item IDs |\n| `minSelected` | `number` | `0` | Minimum required selections |\n| `maxSelected` | `number` | `Infinity` | Maximum allowed selections |\n| `submitLabel` | `string` | `\"Submit\"` | Submit button label |\n| `ignoreLabel` | `string` | `\"Ignore\"` | Cancel button label |\n\n**OptionListItem:**\n\n| Field | Type | Description |\n|-------|------|-------------|\n| `label` | `string` | Display text (required) |\n| `id` | `string` | Unique identifier (defaults to `value` or index) |\n| `value` | `string` | Submitted value (defaults to `id`) |\n| `description` | `string` | Secondary text shown after label |\n| `selected` | `boolean` | Pre-selected state |\n| `disabled` | `boolean` | Disabled state |\n\n**Rendering:**\n- When `multiple: true` (default): renders **checkboxes**\n- When `multiple: false`: renders a **radio group**\n\n**Result value:**\n\n| Key | Type | Description |\n|-----|------|-------------|\n| `selected` | `string[]` | IDs of selected items |\n\n**Example:**\n\n```js\nrenderToolCall({\n  name: \"choose-options\",\n  arguments: {\n    title: \"Select dependencies\",\n    options: [\n      { id: \"react\", label: \"React\", description: \"UI library\" },\n      { id: \"vue\", label: \"Vue\", description: \"Progressive framework\" },\n      { id: \"svelte\", label: \"Svelte\", description: \"Compiled framework\", selected: true },\n    ],\n    multiple: true,\n    minSelected: 1,\n    maxSelected: 2,\n  },\n}, container);\n```\n\n### `fill-form`\n\nMulti-field form with various field types.\n\n**Arguments (`FillFormArguments`):**\n\n| Field | Type | Default | Description |\n|-------|------|---------|-------------|\n| `title` | `string` | `\"Fill form\"` | Form title |\n| `description` | `string` | — | Optional explanation text |\n| `fields` | `FormField[]` | `[]` | Form field definitions |\n| `values` | `Record<string, unknown>` | — | Initial field values |\n| `submitLabel` | `string` | `\"Submit\"` | Submit button label |\n| `ignoreLabel` | `string` | `\"Ignore\"` | Cancel button label |\n\n**FormField:**\n\n| Field | Type | Default | Description |\n|-------|------|---------|-------------|\n| `name` | `string` | (required) | Field name (used as key in result value) |\n| `type` | `FormFieldType` | `\"text\"` | Field type |\n| `label` | `string` | `name` | Display label |\n| `description` | `string` | — | Help text below the field |\n| `placeholder` | `string` | — | Input placeholder |\n| `required` | `boolean` | `false` | Require non-empty value to submit |\n| `disabled` | `boolean` | `false` | Disable the field |\n| `value` | `unknown` | — | Initial value |\n| `options` | `Array<{label, value}>` | — | Options for `select` type |\n\n**FormFieldType:**\n\n| Type | Renders | Description |\n|------|---------|-------------|\n| `text` | `<input>` | Free-form text |\n| `number` | `<input type=\"number\">` | Numeric input, value is `number \\| null` |\n| `engineering` | `<input>` with SI prefix parsing | Accepts values like `\"10kΩ\"`, `\"100nF\"`, `\"1.5MegHz\"`. Parsed with `parseEngineeringNumber()`. State includes `raw`, `number`, `valid`, `prefix`, `unit`, `normalized` |\n| `select` | `<select>` | Dropdown from `options` array |\n| `checkbox` | Checkbox | Boolean toggle |\n| `switch` | Switch toggle | Boolean toggle (switch style) |\n\n**Result value:**\n\nAn object with a key for each field name, containing the submitted value. For `engineering` fields, the raw input string is submitted. For `checkbox`/`switch` fields, a boolean is submitted. For `number` fields, a number or `null` is submitted.\n\n**Example:**\n\n```js\nrenderToolCall({\n  name: \"fill-form\",\n  arguments: {\n    title: \"New project\",\n    fields: [\n      { name: \"name\", type: \"text\", label: \"Project name\", required: true },\n      { name: \"framework\", type: \"select\", label: \"Framework\", options: [\n        { label: \"React\", value: \"react\" },\n        { label: \"Svelte\", value: \"svelte\" },\n      ]},\n      { name: \"resistance\", type: \"engineering\", label: \"Target resistance\", placeholder: \"e.g. 10kΩ\" },\n      { name: \"typescript\", type: \"checkbox\", label: \"Use TypeScript\", value: true },\n    ],\n  },\n}, container);\n```\n\n## Writing a custom template\n\nImplement the `ToolTemplateCompiler` function and register it:\n\n```js\nimport { registerToolTemplate, renderToolCall } from \"slexkit\";\n\nregisterToolTemplate(\"greet-user\", (args, runtime, call) => ({\n  namespace: `tool_greet_${Date.now()}`,\n  g: {\n    __slexkitTool: runtime,\n    name: args.name || \"World\",\n  },\n  layout: {\n    \"card:tool\": {\n      title: \"Greeting\",\n      \"text:message\": { \"$content\": \"'Hello, ' + g.name + '!'\" },\n      \"submit:actions\": {\n        returnKeys: [\"name\"],\n        submitLabel: args.submitLabel || \"OK\",\n        ignoreLabel: args.ignoreLabel || \"Cancel\",\n      },\n    },\n  },\n}));\n\nrenderToolCall(\n  { name: \"greet-user\", arguments: { name: \"Alice\" } },\n  container,\n);\n```\n\n### Key patterns\n\n1. **`__slexkitTool`** — Set `g.__slexkitTool = runtime` to give expressions access to `submit()` and `ignore()`\n2. **`submit:actions`** — Always include a `submit:actions` component as the completion boundary. Set `returnKeys` to the property names that should be included in the result value\n3. **`canSubmit`** — Add a `g.canSubmit()` method to control the submit button's disabled state\n4. **Unique namespace** — Use a timestamp-based namespace to avoid collisions with other tool calls\n5. **Validation** — Implement validation logic in `g` methods and wire `$disabled` on the submit button",
+      "hash": "f62ba8aa"
+    },
+    {
+      "id": "reference/icons",
+      "group": "Reference",
+      "title": "Icon System",
+      "summary": "Phosphor icons, custom icon registration, Iconify fallback, and API reference.",
+      "href": "/docs/reference/icons",
+      "rawHref": "/docs/reference/icons.md",
+      "sourcePath": "site/content/reference/icons/en-US.md",
+      "body": "---\ntitle: Icon System\ncategory: Reference\nstatus: ready\norder: 90\nsummary: \"Phosphor icons, custom icon registration, Iconify fallback, and component icon usage.\"\nslexkitRenderMode: component\n---\n\n# Icon System\n\nSlexKit includes a built-in icon system powered by Phosphor Icons with a custom registration API for extended icon sets.\n\n## Resolution chain\n\nWhen a component requests an icon by name, the system resolves it through this chain:\n\n1. **Registered icons** — custom icons registered via `registerIcon()` or `registerIcons()`\n2. **Phosphor Icons** — 24 bundled Phosphor icons available synchronously\n3. **Iconify fallback** — `loadIcon()` fetches from the Iconify API if neither source has the icon\n\n## Public API\n\n### Registration\n\n#### `registerIcon(name, svg, options?)`\n\nRegister a single SVG icon globally. All components with an `icon` field can reference it by name.\n\n```ts\nfunction registerIcon(name: string, svg: string, options?: RegisterIconOptions): void;\n```\n\n```ts\ntype RegisterIconOptions = {\n  aliases?: string[];    // Alternative names for the same icon\n  weight?: IconWeight;   // \"regular\" | \"duotone\" — defaults to \"regular\"\n};\n```\n\n**Example:**\n\n```js\nimport { registerIcon } from \"slexkit\";\n\nregisterIcon(\n  \"my-custom-icon\",\n  `<svg viewBox=\"0 0 24 24\" fill=\"none\" ...>...</svg>`,\n  { aliases: [\"custom\", \"my-icon\"] }\n);\n```\n\n#### `registerIcons(icons, options?)`\n\nRegister multiple icons at once.\n\n```ts\nfunction registerIcons(icons: Record<string, string>, options?: RegisterIconOptions): void;\n```\n\n**Example:**\n\n```js\nimport { registerIcons } from \"slexkit\";\n\nregisterIcons(\n  {\n    \"cpu\": `<svg>...</svg>`,\n    \"memory\": `<svg>...</svg>`,\n    \"database\": `<svg>...</svg>`,\n  },\n  { weight: \"regular\" }\n);\n```\n\n#### `clearRegisteredIcons()`\n\nRemove all custom registered icons from the global registry.\n\n```ts\nfunction clearRegisteredIcons(): void;\n```\n\n### Retrieval\n\n#### `getIcon(name, state?)`\n\nResolve an icon synchronously. Returns the SVG string or an empty string if not found.\n\n```ts\nfunction getIcon(name: string, state?: IconWeight | IconState): string;\n```\n\nLooks up registered icons first, then falls back to bundled Phosphor icons. Does **not** fetch from Iconify.\n\n#### `getRegisteredIcon(name, state?)`\n\nLook up only from the registered icon registry. Returns the SVG string or an empty string. Does not check Phosphor or Iconify.\n\n```ts\nfunction getRegisteredIcon(name: string, state?: IconWeight | IconState): string;\n```\n\nUseful for checking if a custom icon exists without triggering Phosphor or Iconify lookups.\n\n#### `loadIcon(name, state?)`\n\nResolve an icon asynchronously. Returns a Promise that resolves to the SVG string.\n\n```ts\nfunction loadIcon(name: string, state?: IconWeight | IconState): Promise<string>;\n```\n\nSearches registered icons → Phosphor → fetches from Iconify API as a last resort. Use this when the icon set is not known at build time.\n\n### Name and weight utilities\n\n#### `normalizeIconName(name)`\n\nNormalize an icon name to standard kebab-case format. Handles set prefixes.\n\n```ts\nfunction normalizeIconName(name: string): string;\n```\n\n**Examples:**\n- `\"ArrowCircleUp\"` → `\"arrow-circle-up\"`\n- `\"ph:arrow-circle-up\"` → `\"ph:arrow-circle-up\"`\n- `\"my_set:MyIcon\"` → `\"my-set:my-icon\"`\n- `\"phosphor:ArrowCircleUp\"` → `\"ph:arrow-circle-up\"`\n\nSet prefixes are normalized: `\"phosphor\"` / `\"phosphor-icons\"` become `\"ph\"`.\n\n#### `resolveIconWeight(state?)`\n\nResolve the icon weight from component state. Auto-selects `\"duotone\"` for `selected`/`active`/`pressed`/`current` states.\n\n```ts\nfunction resolveIconWeight(state?: IconWeight | IconState): IconWeight;\n```\n\n```ts\ntype IconWeight = \"regular\" | \"duotone\";\ntype IconState = {\n  selected?: boolean;\n  active?: boolean;\n  pressed?: boolean;\n  current?: boolean;\n};\n```\n\n#### `resolveIconifyIcon(name, state?)`\n\nResolve to an Iconify-compatible `{ prefix, name }` pair.\n\n```ts\nfunction resolveIconifyIcon(name: string, state?: IconWeight | IconState): { prefix: string; name: string };\n```\n\n#### `iconifySvgUrl(name, state?)`\n\nBuild the full Iconify API SVG URL for fetching a remote icon.\n\n```ts\nfunction iconifySvgUrl(name: string, state?: IconWeight | IconState): string;\n```\n\n#### `iconCacheKey(name, state?)`\n\nReturn the lookup key used internally for icon caching.\n\n```ts\nfunction iconCacheKey(name: string, state?: IconWeight | IconState): string;\n```\n\n## Built-in Phosphor icons\n\nSlexKit bundles 23 Phosphor Icons in both regular and duotone weights (46 total SVG files):\n\n| Icon | Name |\n|------|------|\n| CaretDown | `caret-down` |\n| Check | `check` |\n| CircleHalf | `circle-half` |\n| List | `list` |\n| Moon | `moon` |\n| Sun | `sun` |\n| Code | `code` |\n| BookOpenText | `book-open-text` |\n| CursorClick | `cursor-click` |\n| GearSix | `gear-six` |\n| Nut | `nut` |\n| Screwdriver | `screwdriver` |\n| Sparkle | `sparkle` |\n| TerminalWindow | `terminal-window` |\n| Wrench | `wrench` |\n| Copy | `copy` |\n| Eye | `eye` |\n| ArrowSquareOut | `arrow-square-out` |\n| SplitHorizontal | `split-horizontal` |\n| SquareHalf | `square-half` |\n| SquareSplitHorizontal | `square-split-horizontal` |\n| File | `file` |\n| X | `x` |\n\n## Icon naming convention\n\nIcons are referenced in Slex expressions using kebab-case names:\n\n```js\n\"button:add\": { text: \"Add\", icon: \"plus\" }\n\"link:docs\": { text: \"Docs\", icon: \"book-open-text\" }\n```\n\nTo use a custom icon set prefix:\n\n```js\n\"card:info\": { title: \"Info\", icon: \"ph:info\" }\n\"callout:tip\": { title: \"Tip\", icon: \"my-set:custom-bulb\" }\n```\n\nThe name resolution chain handles: `custom-icon` → registered first → bundled Phosphor → Iconify fetch (async only).\n\n## Iconify fallback\n\nWhen `loadIcon()` cannot find an icon in the registered or Phosphor sets, it fetches from the Iconify API:\n\n```\nhttps://api.iconify.design/<prefix>/<name>.svg\n```\n\nThis enables access to thousands of icons beyond the built-in set. Fetched SVGs are sanitized before use.\n\n## Usage in components\n\nComponents that accept an `icon` prop:\n\n| Component | Icon location |\n|-----------|--------------|\n| Button | Before text |\n| Badge | Before text |\n| Card | Title area |\n| Callout | Title area |\n| Section | Eyebrow/title area |\n| Link | Before text |\n| Divider | Before/around label |\n| Tabs | Tab header (icon or iconOnly mode) |\n| Toast | Title area |\n| Stat | Next to value |\n| Accordion | Trigger area |\n| Collapsible | Trigger area |\n| Submit | Button icon area |\n\nIcons automatically use duotone weight when the component or icon is in a selected/active/pressed state.",
+      "hash": "3d32cbbf"
+    },
+    {
+      "id": "reference/rationale",
+      "group": "Reference",
+      "title": "Design Rationale",
+      "summary": "Why SlexKit uses object literals, expressions, explicit fences, and secure/trusted modes.",
+      "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"
+    },
+    {
+      "id": "releases/changelog",
+      "group": "Releases",
+      "title": "Changelog",
+      "summary": "Release notes and notable changes for SlexKit.",
+      "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"
+    }
+  ],
+  "components": [
+    {
+      "type": "accordion",
+      "title": "Accordion",
+      "category": "Disclosure",
+      "status": "ready",
+      "state": "none",
+      "since": "0.1.0",
+      "summary": "Expandable grouped panels.",
+      "docsHref": "/docs/components/accordion",
+      "rawHref": "/docs/components/accordion.md",
+      "propCount": 5,
+      "exampleCount": 1,
+      "props": {
+        "value": {
+          "type": "string | string[]",
+          "dynamic": true,
+          "description": "Current expanded item value; use an array when multiple is true."
+        },
+        "multiple": {
+          "type": "boolean",
+          "default": false,
+          "description": "Allow multiple items to be expanded at the same time."
+        },
+        "items": {
+          "type": "array",
+          "description": "Panel definitions with value, label, content, and optional icon."
+        },
+        "items[].icon": {
+          "type": "string",
+          "description": "Icon name shown before an item trigger label."
+        },
+        "onchange": {
+          "type": "write-expression",
+          "description": "Write expression invoked when expanded items change."
+        }
+      },
+      "children": {
+        "allowed": false,
+        "description": "This component does not render nested child components."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_accordion_typical",
+            "layout": {
+              "accordion:faq": {
+                "multiple": true,
+                "value": [
+                  "install"
+                ],
+                "items": [
+                  {
+                    "value": "install",
+                    "label": "Install",
+                    "icon": "download-simple",
+                    "content": "Prepare dependencies."
+                  },
+                  {
+                    "value": "review",
+                    "label": "Review",
+                    "icon": "check-circle",
+                    "content": "Check the result."
+                  },
+                  {
+                    "value": "ship",
+                    "label": "Ship",
+                    "icon": "rocket-launch",
+                    "content": "Publish the change."
+                  }
+                ]
+              }
+            }
+          }
+        }
+      ],
+      "hash": "ff1be273"
+    },
+    {
+      "type": "badge",
+      "title": "Badge",
+      "category": "Content",
+      "status": "ready",
+      "state": "readable",
+      "since": "0.1.0",
+      "summary": "Compact label for status or classification.",
+      "docsHref": "/docs/components/badge",
+      "rawHref": "/docs/components/badge.md",
+      "propCount": 6,
+      "exampleCount": 1,
+      "props": {
+        "label": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Badge text."
+        },
+        "text": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Alias for label."
+        },
+        "content": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Alias for label."
+        },
+        "icon": {
+          "type": "string",
+          "description": "Icon name shown before the badge label."
+        },
+        "tone": {
+          "type": "string",
+          "values": [
+            "info",
+            "success",
+            "warning",
+            "danger",
+            "muted"
+          ],
+          "default": "info",
+          "description": "Semantic tone applied to the badge."
+        },
+        "variant": {
+          "type": "string",
+          "values": [
+            "info",
+            "success",
+            "warning",
+            "danger",
+            "muted"
+          ],
+          "description": "Alias for tone."
+        }
+      },
+      "children": {
+        "allowed": false,
+        "description": "This component does not render nested child components."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_badge_typical",
+            "layout": {
+              "row:badges": {
+                "badge:ready": {
+                  "label": "ready",
+                  "icon": "check-circle",
+                  "tone": "success"
+                },
+                "badge:pending": {
+                  "label": "pending",
+                  "tone": "warning"
+                },
+                "badge:info": {
+                  "label": "info",
+                  "tone": "info"
+                }
+              }
+            }
+          }
+        }
+      ],
+      "hash": "eece8f49"
+    },
+    {
+      "type": "button",
+      "title": "Button",
+      "category": "Action",
+      "status": "ready",
+      "state": "none",
+      "since": "0.1.0",
+      "summary": "Action trigger.",
+      "docsHref": "/docs/components/button",
+      "rawHref": "/docs/components/button.md",
+      "propCount": 12,
+      "exampleCount": 1,
+      "props": {
+        "label": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Visible button text and accessible name."
+        },
+        "icon": {
+          "type": "string",
+          "description": "Icon name shown before the label."
+        },
+        "iconOnly": {
+          "type": "boolean",
+          "default": false,
+          "description": "Show only the icon while retaining label as the accessible name."
+        },
+        "variant": {
+          "type": "string",
+          "values": [
+            "primary",
+            "secondary",
+            "danger",
+            "ghost"
+          ],
+          "default": "primary",
+          "description": "Semantic action variant."
+        },
+        "disabled": {
+          "type": "boolean",
+          "default": false,
+          "dynamic": true,
+          "description": "Disable the action."
+        },
+        "href": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Render the button surface as a link to this URL."
+        },
+        "target": {
+          "type": "string",
+          "description": "Link target used when href is present."
+        },
+        "title": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Tooltip and accessible-label fallback."
+        },
+        "selected": {
+          "type": "boolean",
+          "dynamic": true,
+          "description": "Render the icon in its selected visual state."
+        },
+        "active": {
+          "type": "boolean",
+          "dynamic": true,
+          "description": "Render the icon in its active visual state."
+        },
+        "pressed": {
+          "type": "boolean",
+          "dynamic": true,
+          "description": "Expose pressed state and render the selected icon style."
+        },
+        "onclick": {
+          "type": "write-expression",
+          "description": "Write expression invoked when the button is clicked."
+        }
+      },
+      "children": {
+        "allowed": false,
+        "description": "This component does not render nested child components."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_button_typical",
+            "layout": {
+              "row:actions": {
+                "button:save": {
+                  "label": "Save",
+                  "icon": "floppy-disk",
+                  "variant": "primary"
+                },
+                "button:cancel": {
+                  "label": "Cancel",
+                  "variant": "secondary"
+                },
+                "button:delete": {
+                  "label": "Delete",
+                  "variant": "danger"
+                }
+              }
+            }
+          }
+        }
+      ],
+      "hash": "3bd71fe1"
+    },
+    {
+      "type": "callout",
+      "title": "Callout",
+      "category": "Content",
+      "status": "ready",
+      "state": "readable",
+      "since": "0.1.0",
+      "summary": "Highlighted contextual message.",
+      "docsHref": "/docs/components/callout",
+      "rawHref": "/docs/components/callout.md",
+      "propCount": 8,
+      "exampleCount": 1,
+      "props": {
+        "title": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Callout title."
+        },
+        "heading": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Alias for title."
+        },
+        "label": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Alias for title."
+        },
+        "icon": {
+          "type": "string",
+          "description": "Icon name shown before the title."
+        },
+        "text": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Callout body text."
+        },
+        "message": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Alias for text."
+        },
+        "content": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Alias for text."
+        },
+        "tone": {
+          "type": "string",
+          "values": [
+            "info",
+            "success",
+            "warning",
+            "danger"
+          ],
+          "default": "info",
+          "description": "Semantic tone for the callout."
+        }
+      },
+      "children": {
+        "allowed": true,
+        "description": "Nested component fields are rendered as child content in field order."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_callout_typical",
+            "layout": {
+              "callout:notice": {
+                "tone": "info",
+                "title": "Notice",
+                "icon": "info",
+                "text": "Use callout for information that should stand out."
+              }
+            }
+          }
+        }
+      ],
+      "hash": "0fee87ac"
+    },
+    {
+      "type": "card",
+      "title": "Card",
+      "category": "Layout",
+      "status": "ready",
+      "state": "none",
+      "since": "0.1.0",
+      "summary": "Bordered grouping container.",
+      "docsHref": "/docs/components/card",
+      "rawHref": "/docs/components/card.md",
+      "propCount": 3,
+      "exampleCount": 1,
+      "props": {
+        "title": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Card title."
+        },
+        "icon": {
+          "type": "string",
+          "description": "Icon name shown before the title."
+        },
+        "tone": {
+          "type": "string",
+          "values": [
+            "info",
+            "success",
+            "warning",
+            "danger",
+            "muted"
+          ],
+          "description": "Optional semantic tone for the card surface."
+        }
+      },
+      "children": {
+        "allowed": true,
+        "description": "Nested component fields are rendered as child content in field order."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_card_typical",
+            "layout": {
+              "card:metrics": {
+                "title": "Metrics",
+                "icon": "chart-bar",
+                "grid:items": {
+                  "columns": 2,
+                  "stat:requests": {
+                    "label": "Requests",
+                    "value": "1.2k",
+                    "unit": "/min"
+                  },
+                  "stat:latency": {
+                    "label": "Latency",
+                    "value": "42",
+                    "unit": "ms"
+                  }
+                }
+              }
+            }
+          }
+        }
+      ],
+      "hash": "d5c9d358"
+    },
+    {
+      "type": "checkbox",
+      "title": "Checkbox",
+      "category": "Input",
+      "status": "ready",
+      "state": "checked",
+      "since": "0.1.0",
+      "summary": "Boolean checkbox input.",
+      "docsHref": "/docs/components/checkbox",
+      "rawHref": "/docs/components/checkbox.md",
+      "propCount": 7,
+      "exampleCount": 1,
+      "props": {
+        "checked": {
+          "type": "boolean",
+          "default": false,
+          "dynamic": true,
+          "description": "Checked state."
+        },
+        "label": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Checkbox label."
+        },
+        "icon": {
+          "type": "string",
+          "description": "Icon name shown before the visible label."
+        },
+        "disabled": {
+          "type": "boolean",
+          "default": false,
+          "dynamic": true,
+          "description": "Disable the checkbox."
+        },
+        "haptic": {
+          "type": "boolean",
+          "default": true,
+          "description": "Enable vibration feedback on supported devices."
+        },
+        "haptics": {
+          "type": "boolean",
+          "default": true,
+          "description": "Alias for haptic."
+        },
+        "onchange": {
+          "type": "write-expression",
+          "description": "Write expression invoked when checked state changes."
+        }
+      },
+      "children": {
+        "allowed": false,
+        "description": "This component does not render nested child components."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_checkbox_typical",
+            "layout": {
+              "checkbox:agree": {
+                "checked": true,
+                "label": "I agree",
+                "icon": "handshake"
+              }
+            }
+          }
+        }
+      ],
+      "hash": "f02a8e1f"
+    },
+    {
+      "type": "code-block",
+      "title": "Code Block",
+      "category": "Content",
+      "status": "ready",
+      "state": "readable",
+      "since": "0.1.0",
+      "summary": "Formatted code or log block.",
+      "docsHref": "/docs/components/code-block",
+      "rawHref": "/docs/components/code-block.md",
+      "propCount": 7,
+      "exampleCount": 1,
+      "props": {
+        "code": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Code text content."
+        },
+        "source": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Alias for code."
+        },
+        "content": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Alias for code."
+        },
+        "language": {
+          "type": "string",
+          "description": "Language label."
+        },
+        "title": {
+          "type": "string",
+          "description": "Code block title."
+        },
+        "icon": {
+          "type": "string",
+          "description": "Icon name shown before the title."
+        },
+        "lineNumbers": {
+          "type": "boolean",
+          "default": true,
+          "description": "Show line numbers."
+        }
+      },
+      "children": {
+        "allowed": false,
+        "description": "This component does not render nested child components."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_code_block_typical",
+            "layout": {
+              "code-block:config": {
+                "title": "Config",
+                "icon": "code",
+                "language": "js",
+                "code": "export const enabled = true;"
+              }
+            }
+          }
+        }
+      ],
+      "hash": "70ce858c"
+    },
+    {
+      "type": "collapsible",
+      "title": "Collapsible",
+      "category": "Disclosure",
+      "status": "ready",
+      "state": "none",
+      "since": "0.1.0",
+      "summary": "Single expandable region.",
+      "docsHref": "/docs/components/collapsible",
+      "rawHref": "/docs/components/collapsible.md",
+      "propCount": 5,
+      "exampleCount": 1,
+      "props": {
+        "open": {
+          "type": "boolean",
+          "default": false,
+          "dynamic": true,
+          "description": "Expanded state."
+        },
+        "trigger": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Trigger button text."
+        },
+        "icon": {
+          "type": "string",
+          "description": "Icon name shown before trigger text."
+        },
+        "content": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Static body content."
+        },
+        "onchange": {
+          "type": "write-expression",
+          "description": "Write expression invoked when open state changes."
+        }
+      },
+      "children": {
+        "allowed": true,
+        "description": "Nested component fields are rendered as child content in field order."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_collapsible_typical",
+            "layout": {
+              "collapsible:more": {
+                "open": true,
+                "trigger": "Details",
+                "icon": "caret-circle-down",
+                "content": "This secondary content can be collapsed."
+              }
+            }
+          }
+        }
+      ],
+      "hash": "fbb14382"
+    },
+    {
+      "type": "column",
+      "title": "Column",
+      "category": "Layout",
+      "status": "ready",
+      "state": "none",
+      "since": "0.1.0",
+      "summary": "Vertical layout container.",
+      "docsHref": "/docs/components/column",
+      "rawHref": "/docs/components/column.md",
+      "propCount": 0,
+      "exampleCount": 1,
+      "props": {},
+      "children": {
+        "allowed": true,
+        "description": "Nested component fields are rendered as child content in field order."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_column_typical",
+            "layout": {
+              "column:form": {
+                "input:name": {
+                  "placeholder": "Name"
+                },
+                "input:email": {
+                  "placeholder": "Email"
+                },
+                "button:save": {
+                  "label": "Save"
+                }
+              }
+            }
+          }
+        }
+      ],
+      "hash": "764d30da"
+    },
+    {
+      "type": "divider",
+      "title": "Divider",
+      "category": "Content",
+      "status": "ready",
+      "state": "readable",
+      "since": "0.1.0",
+      "summary": "Visual separator.",
+      "docsHref": "/docs/components/divider",
+      "rawHref": "/docs/components/divider.md",
+      "propCount": 2,
+      "exampleCount": 1,
+      "props": {
+        "label": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Text shown in the divider."
+        },
+        "icon": {
+          "type": "string",
+          "description": "Icon name shown before the label."
+        }
+      },
+      "children": {
+        "allowed": false,
+        "description": "This component does not render nested child components."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_divider_typical",
+            "layout": {
+              "column:content": {
+                "text:top": {
+                  "text": "Above"
+                },
+                "divider:line": {
+                  "label": "Divider",
+                  "icon": "flag"
+                },
+                "text:bottom": {
+                  "text": "Below"
+                }
+              }
+            }
+          }
+        }
+      ],
+      "hash": "447bf44a"
+    },
+    {
+      "type": "grid",
+      "title": "Grid",
+      "category": "Layout",
+      "status": "ready",
+      "state": "none",
+      "since": "0.1.0",
+      "summary": "Responsive grid container.",
+      "docsHref": "/docs/components/grid",
+      "rawHref": "/docs/components/grid.md",
+      "propCount": 6,
+      "exampleCount": 1,
+      "props": {
+        "columns": {
+          "type": "number",
+          "default": 1,
+          "dynamic": true,
+          "description": "Base column count."
+        },
+        "smColumns": {
+          "type": "number",
+          "dynamic": true,
+          "description": "Column count at the small breakpoint."
+        },
+        "mdColumns": {
+          "type": "number",
+          "dynamic": true,
+          "description": "Column count at the medium breakpoint."
+        },
+        "lgColumns": {
+          "type": "number",
+          "dynamic": true,
+          "description": "Column count at the large breakpoint."
+        },
+        "xlColumns": {
+          "type": "number",
+          "dynamic": true,
+          "description": "Column count at the extra-large breakpoint."
+        },
+        "gap": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Spacing between grid items."
+        }
+      },
+      "children": {
+        "allowed": true,
+        "description": "Nested component fields are rendered as child content in field order."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_grid_typical",
+            "layout": {
+              "grid:stats": {
+                "columns": 1,
+                "mdColumns": 3,
+                "stat:a": {
+                  "label": "Requests",
+                  "value": "1.2k"
+                },
+                "stat:b": {
+                  "label": "Success",
+                  "value": "98%"
+                },
+                "stat:c": {
+                  "label": "Errors",
+                  "value": "3"
+                }
+              }
+            }
+          }
+        }
+      ],
+      "hash": "912458b7"
+    },
+    {
+      "type": "icon",
+      "title": "Icon",
+      "category": "Component",
+      "status": "ready",
+      "state": "none",
+      "since": "0.1.0",
+      "summary": "Shared icon field capability.",
+      "docsHref": "/docs/components/icon",
+      "rawHref": "/docs/components/icon.md",
+      "propCount": 7,
+      "exampleCount": 1,
+      "props": {
+        "icon": {
+          "type": "string",
+          "description": "Icon name resolved through the global icon manager."
+        },
+        "iconOnly": {
+          "type": "boolean",
+          "description": "Render only the icon while retaining an accessible label where supported."
+        },
+        "items[].icon": {
+          "type": "string",
+          "description": "Accordion item trigger icon."
+        },
+        "options[].icon": {
+          "type": "string",
+          "description": "Select or radio option icon."
+        },
+        "columns[].icon": {
+          "type": "string",
+          "description": "Table column header icon."
+        },
+        "tabs[].icon": {
+          "type": "string",
+          "description": "Tab trigger icon."
+        },
+        "tabs[].iconOnly": {
+          "type": "boolean",
+          "description": "Tab trigger icon-only mode."
+        }
+      },
+      "children": {
+        "allowed": false,
+        "description": "This component does not render nested child components."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Icon field usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "spec_button_basic",
+            "layout": {
+              "button:demo": {
+                "label": "Settings",
+                "icon": "gear-six",
+                "iconOnly": true,
+                "variant": "ghost"
+              }
+            }
+          }
+        }
+      ],
+      "hash": "0b7a18c9"
+    },
+    {
+      "type": "input",
+      "title": "Input",
+      "category": "Input",
+      "status": "ready",
+      "state": "value",
+      "since": "0.1.0",
+      "summary": "Text or engineering-value input.",
+      "docsHref": "/docs/components/input",
+      "rawHref": "/docs/components/input.md",
+      "propCount": 22,
+      "exampleCount": 1,
+      "props": {
+        "value": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Current input value."
+        },
+        "label": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Input label."
+        },
+        "unit": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Trailing unit text."
+        },
+        "description": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Assistive description below the input."
+        },
+        "help": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Alias for description."
+        },
+        "hint": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Alias for description."
+        },
+        "error": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Error text shown below the input and linked with aria-describedby."
+        },
+        "errorMessage": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Alias for error."
+        },
+        "invalid": {
+          "type": "boolean",
+          "default": false,
+          "dynamic": true,
+          "description": "Mark the input as invalid with aria-invalid and error styling."
+        },
+        "placeholder": {
+          "type": "string",
+          "description": "Placeholder text for empty values."
+        },
+        "type": {
+          "type": "string",
+          "default": "text",
+          "description": "Input value kind; use engineering for parsed engineering values."
+        },
+        "disabled": {
+          "type": "boolean",
+          "default": false,
+          "dynamic": true,
+          "description": "Disable editing."
+        },
+        "readonly": {
+          "type": "boolean",
+          "default": false,
+          "dynamic": true,
+          "description": "Make the input read-only."
+        },
+        "readOnly": {
+          "type": "boolean",
+          "default": false,
+          "dynamic": true,
+          "description": "Alias for readonly."
+        },
+        "required": {
+          "type": "boolean",
+          "default": false,
+          "dynamic": true,
+          "description": "Mark the input as required."
+        },
+        "id": {
+          "type": "string",
+          "description": "Native input id; defaults to a stable id derived from the component name."
+        },
+        "name": {
+          "type": "string",
+          "description": "Native input name attribute."
+        },
+        "min": {
+          "type": "string | number",
+          "dynamic": true,
+          "description": "Minimum value used by numeric input controls."
+        },
+        "max": {
+          "type": "string | number",
+          "dynamic": true,
+          "description": "Maximum value used by numeric input controls."
+        },
+        "step": {
+          "type": "string | number",
+          "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."
+        }
+      },
+      "children": {
+        "allowed": false,
+        "description": "This component does not render nested child components."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_input_typical",
+            "layout": {
+              "input:name": {
+                "label": "Project",
+                "value": "SlexKit",
+                "placeholder": "Enter name",
+                "description": "Visible labels keep form fields scannable."
+              }
+            }
+          }
+        }
+      ],
+      "hash": "66f5dbc5"
+    },
+    {
+      "type": "link",
+      "title": "Link",
+      "category": "Content",
+      "status": "ready",
+      "state": "readable",
+      "since": "0.1.0",
+      "summary": "Inline navigation link.",
+      "docsHref": "/docs/components/link",
+      "rawHref": "/docs/components/link.md",
+      "propCount": 7,
+      "exampleCount": 1,
+      "props": {
+        "href": {
+          "type": "string",
+          "description": "Target URL."
+        },
+        "text": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Visible link text."
+        },
+        "label": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Alias for text."
+        },
+        "content": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Alias for text."
+        },
+        "icon": {
+          "type": "string",
+          "description": "Icon name shown before link text."
+        },
+        "target": {
+          "type": "string",
+          "description": "Native link target attribute."
+        },
+        "variant": {
+          "type": "string",
+          "values": [
+            "default",
+            "muted"
+          ],
+          "default": "default",
+          "description": "Link visual variant."
+        }
+      },
+      "children": {
+        "allowed": false,
+        "description": "This component does not render nested child components."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_link_typical",
+            "layout": {
+              "column:links": {
+                "link:docs": {
+                  "href": "/components",
+                  "icon": "arrow-square-out",
+                  "text": "View components"
+                }
+              }
+            }
+          }
+        }
+      ],
+      "hash": "1404518b"
+    },
+    {
+      "type": "playground",
+      "title": "Playground",
+      "category": "Tooling",
+      "status": "ready",
+      "state": "none",
+      "since": "0.1.0",
+      "summary": "Interactive source preview.",
+      "docsHref": "/docs/components/playground",
+      "rawHref": "/docs/components/playground.md",
+      "propCount": 18,
+      "exampleCount": 1,
+      "props": {
+        "source": {
+          "type": "object | string",
+          "description": "SlexKit or Markdown source to preview."
+        },
+        "sourceType": {
+          "type": "string",
+          "values": [
+            "slex",
+            "markdown",
+            "auto-markdown"
+          ],
+          "default": "slex",
+          "description": "Source parser mode."
+        },
+        "title": {
+          "type": "string",
+          "description": "Playground title."
+        },
+        "previewAlign": {
+          "type": "string",
+          "values": [
+            "center",
+            "start"
+          ],
+          "default": "center",
+          "description": "Vertical preview alignment in render mode."
+        },
+        "alignPreview": {
+          "type": "string",
+          "values": [
+            "center",
+            "start"
+          ],
+          "description": "Alias for previewAlign."
+        },
+        "previewPlacement": {
+          "type": "string",
+          "values": [
+            "center",
+            "start"
+          ],
+          "description": "Alias for previewAlign."
+        },
+        "previewMinHeight": {
+          "type": "string",
+          "description": "Minimum preview area height."
+        },
+        "previewMaxWidth": {
+          "type": "string",
+          "description": "Maximum preview content width."
+        },
+        "themeToggle": {
+          "type": "boolean",
+          "default": false,
+          "description": "Show the theme toggle action."
+        },
+        "showThemeToggle": {
+          "type": "boolean",
+          "default": false,
+          "description": "Alias for themeToggle."
+        },
+        "enableThemeToggle": {
+          "type": "boolean",
+          "default": false,
+          "description": "Alias for themeToggle."
+        },
+        "themeLabel": {
+          "type": "string",
+          "description": "Accessible label for the theme toggle action."
+        },
+        "themeToggleLabel": {
+          "type": "string",
+          "description": "Alias for themeLabel."
+        },
+        "sourceTypeLabel": {
+          "type": "string",
+          "description": "Accessible label for the source type selector."
+        },
+        "copyLabel": {
+          "type": "string",
+          "description": "Accessible label for the copy source action."
+        },
+        "openWebLabel": {
+          "type": "string",
+          "description": "Accessible label for opening the source in the standalone playground."
+        },
+        "webUrl": {
+          "type": "string",
+          "description": "Standalone playground URL used by the open action."
+        },
+        "playgroundUrl": {
+          "type": "string",
+          "description": "Alias for webUrl."
+        }
+      },
+      "children": {
+        "allowed": false,
+        "description": "This component does not render nested child components."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_playground_typical",
+            "layout": {
+              "playground:demo": {
+                "title": "Stat Playground",
+                "previewMinHeight": "180px",
+                "source": {
+                  "namespace": "inner_stat_demo",
+                  "layout": {
+                    "stat:value": {
+                      "label": "Requests",
+                      "value": "1.2k",
+                      "unit": "/min"
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      ],
+      "hash": "7d8e1d36"
+    },
+    {
+      "type": "progress",
+      "title": "Progress",
+      "category": "Feedback",
+      "status": "ready",
+      "state": "readable",
+      "since": "0.1.0",
+      "summary": "Progress bar.",
+      "docsHref": "/docs/components/progress",
+      "rawHref": "/docs/components/progress.md",
+      "propCount": 4,
+      "exampleCount": 1,
+      "props": {
+        "value": {
+          "type": "number",
+          "default": 0,
+          "dynamic": true,
+          "description": "Progress percentage from 0 to 100."
+        },
+        "label": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Progress label."
+        },
+        "icon": {
+          "type": "string",
+          "description": "Icon name shown before the label."
+        },
+        "indeterminate": {
+          "type": "boolean",
+          "default": false,
+          "dynamic": true,
+          "description": "Render an indeterminate progress state without aria-valuenow."
+        }
+      },
+      "children": {
+        "allowed": false,
+        "description": "This component does not render nested child components."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_progress_typical",
+            "layout": {
+              "progress:build": {
+                "label": "Build progress",
+                "icon": "gear-six",
+                "value": 64
+              }
+            }
+          }
+        }
+      ],
+      "hash": "706fde5e"
+    },
+    {
+      "type": "radio-group",
+      "title": "Radio Group",
+      "category": "Input",
+      "status": "ready",
+      "state": "value",
+      "since": "0.1.0",
+      "summary": "Single-choice option group.",
+      "docsHref": "/docs/components/radio-group",
+      "rawHref": "/docs/components/radio-group.md",
+      "propCount": 11,
+      "exampleCount": 1,
+      "props": {
+        "value": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Current selected value."
+        },
+        "label": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Group label."
+        },
+        "icon": {
+          "type": "string",
+          "description": "Icon name shown before the group label."
+        },
+        "options": {
+          "type": "array",
+          "description": "Options with label, value, and optional icon."
+        },
+        "options[].icon": {
+          "type": "string",
+          "description": "Icon name shown before a single option label."
+        },
+        "disabled": {
+          "type": "boolean",
+          "default": false,
+          "dynamic": true,
+          "description": "Disable every radio option in the group."
+        },
+        "orientation": {
+          "type": "string",
+          "values": [
+            "vertical",
+            "horizontal"
+          ],
+          "default": "vertical",
+          "description": "Radio option layout direction."
+        },
+        "haptic": {
+          "type": "boolean",
+          "default": true,
+          "description": "Enable vibration feedback on supported devices."
+        },
+        "haptics": {
+          "type": "boolean",
+          "default": true,
+          "description": "Alias for haptic."
+        },
+        "name": {
+          "type": "string",
+          "description": "Native radio group name shared by options."
+        },
+        "onchange": {
+          "type": "write-expression",
+          "description": "Write expression invoked when selection changes."
+        }
+      },
+      "children": {
+        "allowed": false,
+        "description": "This component does not render nested child components."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_radio_group_typical",
+            "layout": {
+              "radio-group:mode": {
+                "label": "Mode",
+                "icon": "sliders-horizontal",
+                "value": "auto",
+                "options": [
+                  {
+                    "label": "Auto",
+                    "value": "auto",
+                    "icon": "sparkle"
+                  },
+                  {
+                    "label": "Manual",
+                    "value": "manual",
+                    "icon": "wrench"
+                  }
+                ]
+              }
+            }
+          }
+        }
+      ],
+      "hash": "66c04b44"
+    },
+    {
+      "type": "row",
+      "title": "Row",
+      "category": "Layout",
+      "status": "ready",
+      "state": "none",
+      "since": "0.1.0",
+      "summary": "Horizontal layout container.",
+      "docsHref": "/docs/components/row",
+      "rawHref": "/docs/components/row.md",
+      "propCount": 3,
+      "exampleCount": 1,
+      "props": {
+        "justify": {
+          "type": "string",
+          "values": [
+            "start",
+            "center",
+            "end",
+            "space-between",
+            "space-around"
+          ],
+          "default": "start",
+          "description": "Main-axis distribution."
+        },
+        "align": {
+          "type": "string",
+          "values": [
+            "start",
+            "center",
+            "end",
+            "baseline",
+            "stretch"
+          ],
+          "default": "center",
+          "description": "Cross-axis alignment."
+        },
+        "gap": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Spacing between children."
+        }
+      },
+      "children": {
+        "allowed": true,
+        "description": "Nested component fields are rendered as child content in field order."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_row_typical",
+            "layout": {
+              "row:toolbar": {
+                "justify": "space-between",
+                "text:title": {
+                  "text": "Runtime status"
+                },
+                "button:refresh": {
+                  "label": "Refresh"
+                }
+              }
+            }
+          }
+        }
+      ],
+      "hash": "6c9327b6"
+    },
+    {
+      "type": "section",
+      "title": "Section",
+      "category": "Content",
+      "status": "ready",
+      "state": "readable",
+      "since": "0.1.0",
+      "summary": "Page section with optional heading chrome.",
+      "docsHref": "/docs/components/section",
+      "rawHref": "/docs/components/section.md",
+      "propCount": 6,
+      "exampleCount": 1,
+      "props": {
+        "title": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Section title."
+        },
+        "icon": {
+          "type": "string",
+          "description": "Icon name shown before the title."
+        },
+        "eyebrow": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Small label above the title."
+        },
+        "subtitle": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Subtitle text below the title."
+        },
+        "actionLabel": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Optional action link label."
+        },
+        "actionHref": {
+          "type": "string",
+          "description": "Optional action link target."
+        }
+      },
+      "children": {
+        "allowed": true,
+        "description": "Nested component fields are rendered as child content in field order."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_section_typical",
+            "layout": {
+              "section:overview": {
+                "eyebrow": "Dashboard",
+                "title": "Runtime overview",
+                "icon": "chart-bar",
+                "subtitle": "This section groups the most important state.",
+                "stat:latency": {
+                  "label": "Latency",
+                  "value": "42",
+                  "unit": "ms"
+                }
+              }
+            }
+          }
+        }
+      ],
+      "hash": "d2fe0297"
+    },
+    {
+      "type": "select",
+      "title": "Select",
+      "category": "Input",
+      "status": "ready",
+      "state": "value",
+      "since": "0.1.0",
+      "summary": "Dropdown selection input.",
+      "docsHref": "/docs/components/select",
+      "rawHref": "/docs/components/select.md",
+      "propCount": 10,
+      "exampleCount": 1,
+      "props": {
+        "label": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Select label."
+        },
+        "icon": {
+          "type": "string",
+          "description": "Icon name shown before the top label."
+        },
+        "value": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Current selected value."
+        },
+        "options": {
+          "type": "array",
+          "description": "Options with label, value, and optional icon."
+        },
+        "options[].icon": {
+          "type": "string",
+          "description": "Icon name shown before an option label."
+        },
+        "placeholder": {
+          "type": "string",
+          "description": "Placeholder shown when no value is selected."
+        },
+        "disabled": {
+          "type": "boolean",
+          "default": false,
+          "dynamic": true,
+          "description": "Disable the select trigger and native select."
+        },
+        "required": {
+          "type": "boolean",
+          "default": false,
+          "dynamic": true,
+          "description": "Require a non-placeholder value in the native select."
+        },
+        "variant": {
+          "type": "string",
+          "values": [
+            "default",
+            "toolbar"
+          ],
+          "default": "default",
+          "description": "Select surface variant."
+        },
+        "onchange": {
+          "type": "write-expression",
+          "description": "Write expression invoked when selection changes."
+        }
+      },
+      "children": {
+        "allowed": false,
+        "description": "This component does not render nested child components."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_select_typical",
+            "layout": {
+              "select:env": {
+                "label": "Environment",
+                "icon": "server",
+                "value": "prod",
+                "options": [
+                  {
+                    "label": "Development",
+                    "value": "dev",
+                    "icon": "code"
+                  },
+                  {
+                    "label": "Production",
+                    "value": "prod",
+                    "icon": "rocket-launch"
+                  }
+                ]
+              }
+            }
+          }
+        }
+      ],
+      "hash": "0636d6dd"
+    },
+    {
+      "type": "slider",
+      "title": "Slider",
+      "category": "Input",
+      "status": "ready",
+      "state": "value",
+      "since": "0.1.0",
+      "summary": "Numeric range input.",
+      "docsHref": "/docs/components/slider",
+      "rawHref": "/docs/components/slider.md",
+      "propCount": 12,
+      "exampleCount": 1,
+      "props": {
+        "label": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Slider label."
+        },
+        "icon": {
+          "type": "string",
+          "description": "Icon name shown before the label."
+        },
+        "value": {
+          "type": "number",
+          "default": 0,
+          "dynamic": true,
+          "description": "Current numeric value."
+        },
+        "min": {
+          "type": "number",
+          "default": 0,
+          "dynamic": true,
+          "description": "Minimum value."
+        },
+        "max": {
+          "type": "number",
+          "default": 100,
+          "dynamic": true,
+          "description": "Maximum value."
+        },
+        "step": {
+          "type": "number",
+          "default": 1,
+          "dynamic": true,
+          "description": "Step interval."
+        },
+        "unit": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Unit shown after the value."
+        },
+        "disabled": {
+          "type": "boolean",
+          "default": false,
+          "dynamic": true,
+          "description": "Disable the range input."
+        },
+        "orientation": {
+          "type": "string",
+          "values": [
+            "horizontal",
+            "vertical"
+          ],
+          "default": "horizontal",
+          "description": "Slider orientation metadata used for styling."
+        },
+        "haptic": {
+          "type": "boolean",
+          "default": true,
+          "description": "Enable vibration feedback on supported devices."
+        },
+        "haptics": {
+          "type": "boolean",
+          "default": true,
+          "description": "Alias for haptic."
+        },
+        "onchange": {
+          "type": "write-expression",
+          "description": "Write expression invoked when the value changes."
+        }
+      },
+      "children": {
+        "allowed": false,
+        "description": "This component does not render nested child components."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_slider_typical",
+            "layout": {
+              "slider:volume": {
+                "label": "Volume",
+                "icon": "speaker-high",
+                "value": 42,
+                "min": 0,
+                "max": 100,
+                "step": 1,
+                "unit": "%"
+              }
+            }
+          }
+        }
+      ],
+      "hash": "490f7f36"
+    },
+    {
+      "type": "stat",
+      "title": "Stat",
+      "category": "Display",
+      "status": "ready",
+      "state": "readable",
+      "since": "0.1.0",
+      "summary": "Metric display.",
+      "docsHref": "/docs/components/stat",
+      "rawHref": "/docs/components/stat.md",
+      "propCount": 6,
+      "exampleCount": 1,
+      "props": {
+        "label": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Metric label."
+        },
+        "icon": {
+          "type": "string",
+          "description": "Icon name shown before the label."
+        },
+        "value": {
+          "type": "string | number",
+          "dynamic": true,
+          "description": "Metric value."
+        },
+        "unit": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Unit shown after the value."
+        },
+        "tone": {
+          "type": "string",
+          "values": [
+            "info",
+            "success",
+            "warning",
+            "danger",
+            "muted"
+          ],
+          "description": "Optional semantic tone."
+        },
+        "animateInitial": {
+          "type": "boolean",
+          "default": false,
+          "description": "Animate the initial rendered value."
+        }
+      },
+      "children": {
+        "allowed": false,
+        "description": "This component does not render nested child components."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_stat_typical",
+            "layout": {
+              "grid:stats": {
+                "columns": 2,
+                "stat:requests": {
+                  "label": "Requests",
+                  "icon": "activity",
+                  "value": "1.2k",
+                  "unit": "/min"
+                },
+                "stat:success": {
+                  "label": "Success",
+                  "icon": "check-circle",
+                  "value": "98.4",
+                  "unit": "%",
+                  "tone": "success"
+                }
+              }
+            }
+          }
+        }
+      ],
+      "hash": "cd525fc5"
+    },
+    {
+      "type": "submit",
+      "title": "Submit",
+      "category": "Action",
+      "status": "ready",
+      "state": "none",
+      "since": "0.1.0",
+      "summary": "ToolHost submit and ignore controls.",
+      "docsHref": "/docs/components/submit",
+      "rawHref": "/docs/components/submit.md",
+      "propCount": 4,
+      "exampleCount": 1,
+      "props": {
+        "submitLabel": {
+          "type": "string",
+          "default": "Submit",
+          "description": "Submit button text."
+        },
+        "ignoreLabel": {
+          "type": "string",
+          "default": "Ignore",
+          "description": "Ignore button text."
+        },
+        "returnKeys": {
+          "type": "string[]",
+          "description": "State field paths returned to ToolHost."
+        },
+        "disabled": {
+          "type": "boolean",
+          "default": false,
+          "dynamic": true,
+          "description": "Disable submit action."
+        }
+      },
+      "children": {
+        "allowed": false,
+        "description": "This component does not render nested child components."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_submit_typical",
+            "layout": {
+              "column:tool": {
+                "input:title": {
+                  "value": "Release note",
+                  "placeholder": "Title"
+                },
+                "submit:done": {
+                  "submitLabel": "Submit",
+                  "ignoreLabel": "Ignore",
+                  "returnKeys": [
+                    "title"
+                  ]
+                }
+              }
+            }
+          }
+        }
+      ],
+      "hash": "b3753761"
+    },
+    {
+      "type": "switch",
+      "title": "Switch",
+      "category": "Input",
+      "status": "ready",
+      "state": "enabled",
+      "since": "0.1.0",
+      "summary": "Boolean switch input.",
+      "docsHref": "/docs/components/switch",
+      "rawHref": "/docs/components/switch.md",
+      "propCount": 7,
+      "exampleCount": 1,
+      "props": {
+        "enabled": {
+          "type": "boolean",
+          "default": false,
+          "dynamic": true,
+          "description": "Enabled state."
+        },
+        "label": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Switch label."
+        },
+        "icon": {
+          "type": "string",
+          "description": "Icon name shown before the visible label."
+        },
+        "disabled": {
+          "type": "boolean",
+          "default": false,
+          "dynamic": true,
+          "description": "Disable the switch."
+        },
+        "haptic": {
+          "type": "boolean",
+          "default": true,
+          "description": "Enable vibration feedback on supported devices."
+        },
+        "haptics": {
+          "type": "boolean",
+          "default": true,
+          "description": "Alias for haptic."
+        },
+        "onchange": {
+          "type": "write-expression",
+          "description": "Write expression invoked when enabled state changes."
+        }
+      },
+      "children": {
+        "allowed": false,
+        "description": "This component does not render nested child components."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_switch_typical",
+            "layout": {
+              "switch:feature": {
+                "enabled": true,
+                "label": "Enable sync",
+                "icon": "arrows-clockwise"
+              }
+            }
+          }
+        }
+      ],
+      "hash": "c5fd6169"
+    },
+    {
+      "type": "table",
+      "title": "Table",
+      "category": "Data",
+      "status": "ready",
+      "state": "readable",
+      "since": "0.1.0",
+      "summary": "Simple data table.",
+      "docsHref": "/docs/components/table",
+      "rawHref": "/docs/components/table.md",
+      "propCount": 4,
+      "exampleCount": 1,
+      "props": {
+        "columns": {
+          "type": "array",
+          "description": "Column definitions with key, label, and optional icon."
+        },
+        "columns[].icon": {
+          "type": "string",
+          "description": "Icon name shown before a column label."
+        },
+        "rows": {
+          "type": "array",
+          "description": "Row data objects keyed by column key."
+        },
+        "items": {
+          "type": "array",
+          "description": "Alias for rows."
+        }
+      },
+      "children": {
+        "allowed": false,
+        "description": "This component does not render nested child components."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_table_typical",
+            "layout": {
+              "table:routes": {
+                "columns": [
+                  {
+                    "key": "name",
+                    "label": "Name",
+                    "icon": "text-t"
+                  },
+                  {
+                    "key": "status",
+                    "label": "Status",
+                    "icon": "check-circle"
+                  }
+                ],
+                "rows": [
+                  {
+                    "name": "Parse",
+                    "status": "ready"
+                  },
+                  {
+                    "name": "Publish",
+                    "status": "pending"
+                  }
+                ]
+              }
+            }
+          }
+        }
+      ],
+      "hash": "546ee458"
+    },
+    {
+      "type": "tabs",
+      "title": "Tabs",
+      "category": "Navigation",
+      "status": "ready",
+      "state": "value",
+      "since": "0.1.0",
+      "summary": "Tabbed view switcher.",
+      "docsHref": "/docs/components/tabs",
+      "rawHref": "/docs/components/tabs.md",
+      "propCount": 6,
+      "exampleCount": 1,
+      "props": {
+        "value": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Current active tab value."
+        },
+        "tabs": {
+          "type": "array",
+          "description": "Tab definitions with value, label, content, icon, and iconOnly."
+        },
+        "tabs[].icon": {
+          "type": "string",
+          "description": "Icon name shown before a tab trigger label."
+        },
+        "tabs[].iconOnly": {
+          "type": "boolean",
+          "description": "Show only the tab icon while retaining label as accessible text."
+        },
+        "orientation": {
+          "type": "string",
+          "values": [
+            "horizontal",
+            "vertical"
+          ],
+          "default": "horizontal",
+          "description": "Tab list orientation."
+        },
+        "onchange": {
+          "type": "write-expression",
+          "description": "Write expression invoked when the active tab changes."
+        }
+      },
+      "children": {
+        "allowed": false,
+        "description": "This component does not render nested child components."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_tabs_typical",
+            "layout": {
+              "tabs:main": {
+                "value": "overview",
+                "tabs": [
+                  {
+                    "value": "overview",
+                    "label": "Overview"
+                  },
+                  {
+                    "value": "settings",
+                    "label": "Settings"
+                  }
+                ]
+              }
+            }
+          }
+        }
+      ],
+      "hash": "e5cff5dc"
+    },
+    {
+      "type": "text",
+      "title": "Text",
+      "category": "Display",
+      "status": "ready",
+      "state": "readable",
+      "since": "0.1.0",
+      "summary": "Plain text display.",
+      "docsHref": "/docs/components/text",
+      "rawHref": "/docs/components/text.md",
+      "propCount": 5,
+      "exampleCount": 1,
+      "props": {
+        "text": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Displayed text."
+        },
+        "content": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Alias for text."
+        },
+        "label": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Alias for text."
+        },
+        "variant": {
+          "type": "string",
+          "values": [
+            "default",
+            "muted"
+          ],
+          "default": "default",
+          "description": "Text visual variant."
+        },
+        "class": {
+          "type": "string",
+          "description": "Additional host-controlled CSS class."
+        }
+      },
+      "children": {
+        "allowed": false,
+        "description": "This component does not render nested child components."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_text_typical",
+            "layout": {
+              "text:status": {
+                "text": "System is healthy"
+              }
+            }
+          }
+        }
+      ],
+      "hash": "d498fd82"
+    },
+    {
+      "type": "toast",
+      "title": "Toast",
+      "category": "Feedback",
+      "status": "ready",
+      "state": "none",
+      "since": "0.1.0",
+      "summary": "Transient notification.",
+      "docsHref": "/docs/components/toast",
+      "rawHref": "/docs/components/toast.md",
+      "propCount": 15,
+      "exampleCount": 1,
+      "props": {
+        "title": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Toast title."
+        },
+        "heading": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Alias for title."
+        },
+        "label": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Alias for title."
+        },
+        "icon": {
+          "type": "string",
+          "description": "Icon name shown at the left of the toast."
+        },
+        "description": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Toast body text."
+        },
+        "text": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Alias for description."
+        },
+        "message": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Alias for description."
+        },
+        "content": {
+          "type": "string",
+          "dynamic": true,
+          "description": "Alias for description."
+        },
+        "type": {
+          "type": "string",
+          "values": [
+            "info",
+            "success",
+            "warning",
+            "danger"
+          ],
+          "default": "info",
+          "description": "Semantic notification type."
+        },
+        "tone": {
+          "type": "string",
+          "values": [
+            "info",
+            "success",
+            "warning",
+            "danger"
+          ],
+          "default": "info",
+          "description": "Alias for type."
+        },
+        "duration": {
+          "type": "number",
+          "description": "Auto-hide delay in milliseconds."
+        },
+        "dismissable": {
+          "type": "boolean",
+          "default": true,
+          "description": "Show a close button."
+        },
+        "dismissible": {
+          "type": "boolean",
+          "default": true,
+          "description": "Alias for dismissable."
+        },
+        "closeLabel": {
+          "type": "string",
+          "default": "Close notification",
+          "description": "Accessible close button label."
+        },
+        "closeAriaLabel": {
+          "type": "string",
+          "description": "Alias for closeLabel."
+        }
+      },
+      "children": {
+        "allowed": false,
+        "description": "This component does not render nested child components."
+      },
+      "examples": [
+        {
+          "id": "basic",
+          "title": "Basic usage",
+          "source": {
+            "slex": "0.1",
+            "namespace": "doc_toast_typical",
+            "layout": {
+              "toast:saved": {
+                "type": "success",
+                "title": "Saved",
+                "icon": "check-circle",
+                "description": "Changes have been written."
+              }
+            }
+          }
+        }
+      ],
+      "hash": "cc0c6b05"
+    }
+  ],
+  "sourceHashes": {
+    "README.md": "e1cb682c",
+    "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/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/reference/security/en-US.md": "4cfe36f1",
+    "site/content/reference/packages/en-US.md": "79d87cbd",
+    "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/components/accordion/en-US.md": "9e90867f",
+    "site/content/components/badge/en-US.md": "fb8275e7",
+    "site/content/components/button/en-US.md": "30463322",
+    "site/content/components/callout/en-US.md": "d16f713d",
+    "site/content/components/card/en-US.md": "99f4bf99",
+    "site/content/components/checkbox/en-US.md": "6d83ab0c",
+    "site/content/components/code-block/en-US.md": "171d1695",
+    "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/grid/en-US.md": "07d773b2",
+    "site/content/components/icon/en-US.md": "a8497d85",
+    "site/content/components/input/en-US.md": "558a0288",
+    "site/content/components/link/en-US.md": "8eeb87ad",
+    "site/content/components/playground/en-US.md": "7313ccc4",
+    "site/content/components/progress/en-US.md": "7d008e59",
+    "site/content/components/radio-group/en-US.md": "c3190775",
+    "site/content/components/row/en-US.md": "026953f5",
+    "site/content/components/section/en-US.md": "f6df61a4",
+    "site/content/components/select/en-US.md": "43c6a193",
+    "site/content/components/slider/en-US.md": "b34cc3f8",
+    "site/content/components/stat/en-US.md": "e352f69e",
+    "site/content/components/submit/en-US.md": "ab4cdd10",
+    "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/toast/en-US.md": "960011bc",
+    "component:accordion": "ff1be273",
+    "component:badge": "eece8f49",
+    "component:button": "3bd71fe1",
+    "component:callout": "0fee87ac",
+    "component:card": "d5c9d358",
+    "component:checkbox": "f02a8e1f",
+    "component:code-block": "70ce858c",
+    "component:collapsible": "fbb14382",
+    "component:column": "764d30da",
+    "component:divider": "447bf44a",
+    "component:grid": "912458b7",
+    "component:icon": "0b7a18c9",
+    "component:input": "66f5dbc5",
+    "component:link": "1404518b",
+    "component:playground": "7d8e1d36",
+    "component:progress": "706fde5e",
+    "component:radio-group": "66c04b44",
+    "component:row": "6c9327b6",
+    "component:section": "d2fe0297",
+    "component:select": "0636d6dd",
+    "component:slider": "490f7f36",
+    "component:stat": "cd525fc5",
+    "component:submit": "b3753761",
+    "component:switch": "c5fd6169",
+    "component:table": "546ee458",
+    "component:tabs": "e5cff5dc",
+    "component:text": "d498fd82",
+    "component:toast": "cc0c6b05"
+  }
+}