slexkit 0.3.1 → 0.3.2

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 All notable changes to SlexKit.
 
+## v0.3.2 - Host CSS isolation and repeated layout hardening
+
+### Changed
+- `$for` rendering now uses comment anchors and direct child insertion instead of a wrapper element that depended on `display: contents`.
+- Site-only mobile navigation CSS moved out of the runtime base stylesheet and into the documentation site shell.
+- Component accessors now share one reactive effect across subscribers instead of creating duplicate subscriber fan-out work.
+
+### Fixed
+- Obsidian and other Markdown hosts no longer need to rewrite `$for` wrapper CSS to avoid `display: contents`, preserving grid and row layouts for repeated items.
+- Published runtime base CSS no longer leaks `#mobileNav` or `body[data-mobile-nav-open]` selectors into host pages.
+- Custom renderers that return no element no longer leave invalid `$for` slots behind during diffing or cleanup.
+
 ## v0.3.1 - Host stability and control rendering hardening
 
 ### Added

package/README.md

@@ -15,7 +15,7 @@
     <a href="README.zh-CN.md">简体中文</a>
   </p>
   <p>
-    <img alt="version" src="https://img.shields.io/badge/version-0.3.1-18181b">
+    <img alt="version" src="https://img.shields.io/badge/version-0.3.2-18181b">
     <img alt="script" src="https://img.shields.io/badge/Slex-v0.1-18181b">
     <img alt="TypeScript" src="https://img.shields.io/badge/runtime-TypeScript-3178c6">
     <img alt="Svelte 5" src="https://img.shields.io/badge/components-Svelte_5-ff3e00">

package/README.zh-CN.md

@@ -15,7 +15,7 @@
     <a href="README.md">English</a>
   </p>
   <p>
-    <img alt="version" src="https://img.shields.io/badge/version-0.3.1-18181b">
+    <img alt="version" src="https://img.shields.io/badge/version-0.3.2-18181b">
     <img alt="script" src="https://img.shields.io/badge/Slex-v0.1-18181b">
     <img alt="TypeScript" src="https://img.shields.io/badge/runtime-TypeScript-3178c6">
     <img alt="Svelte 5" src="https://img.shields.io/badge/components-Svelte_5-ff3e00">

package/dist/ai/llms-full.txt

@@ -1,6 +1,6 @@
 # SlexKit Full LLM Documentation
 
-Version: 0.3.1
+Version: 0.3.2
 
 This file concatenates SlexKit's canonical English Markdown docs. `slex` fences are preserved exactly.
 
@@ -27,7 +27,7 @@ Source: README.md
     <a href="README.zh-CN.md">简体中文</a>
   </p>
   <p>
-    <img alt="version" src="https://img.shields.io/badge/version-0.3.1-18181b">
+    <img alt="version" src="https://img.shields.io/badge/version-0.3.2-18181b">
     <img alt="script" src="https://img.shields.io/badge/Slex-v0.1-18181b">
     <img alt="TypeScript" src="https://img.shields.io/badge/runtime-TypeScript-3178c6">
     <img alt="Svelte 5" src="https://img.shields.io/badge/components-Svelte_5-ff3e00">
@@ -7574,6 +7574,18 @@ slexkitRenderMode: component
 
 All notable changes to SlexKit.
 
+## v0.3.2 - Host CSS isolation and repeated layout hardening
+
+### Changed
+- `$for` rendering now uses comment anchors and direct child insertion instead of a wrapper element that depended on `display: contents`.
+- Site-only mobile navigation CSS moved out of the runtime base stylesheet and into the documentation site shell.
+- Component accessors now share one reactive effect across subscribers instead of creating duplicate subscriber fan-out work.
+
+### Fixed
+- Obsidian and other Markdown hosts no longer need to rewrite `$for` wrapper CSS to avoid `display: contents`, preserving grid and row layouts for repeated items.
+- Published runtime base CSS no longer leaks `#mobileNav` or `body[data-mobile-nav-open]` selectors into host pages.
+- Custom renderers that return no element no longer leave invalid `$for` slots behind during diffing or cleanup.
+
 ## v0.3.1 - Host stability and control rendering hardening
 
 ### Added

package/dist/ai/llms.txt

@@ -12,7 +12,7 @@
 
 SlexKit raw docs are Markdown (`.md`) with explicit `slex` fences. The interactive layer is the fenced `slex` source inside each Markdown page.
 
-Version: 0.3.1
+Version: 0.3.2
 
 ## Table of Contents
 

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

@@ -1,20 +1,20 @@
 {
   "name": "slexkit-ai-docs",
   "packageName": "slexkit",
-  "version": "0.3.1",
-  "generatedAt": "2026-06-20T08:01:21.373Z",
+  "version": "0.3.2",
+  "generatedAt": "2026-06-20T09:40:31.853Z",
   "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": "1445b5b6"
+      "hash": "b492e34b"
     },
     "llms-full.txt": {
       "path": "/llms-full.txt",
       "title": "llms-full.txt",
-      "summary": "Version: 0.3.1",
-      "hash": "000eb11f"
+      "summary": "Version: 0.3.2",
+      "hash": "34989439"
     },
     "llms-components.txt": {
       "path": "/llms-components.txt",
@@ -56,8 +56,8 @@
       "href": "/",
       "rawHref": "/README.md",
       "sourcePath": "README.md",
-      "body": "<div align=\"center\">\n  <p>\n    <img src=\"site/assets/logo.svg\" alt=\"SlexKit\" width=\"84\" height=\"84\" />\n  </p>\n  <h1>SlexKit</h1>\n  <p><strong>Streaming Live EXpressions Kit</strong></p>\n  <p>\n    \"Docs as tools, tools as docs.\" Give Markdown interactive power and make every AI output come alive.\n  </p>\n  <p>\n    <a href=\"site/content/guides/intro/en-US.md\">Documentation</a> ·\n    <a href=\"site/content/components/accordion/en-US.md\">Components</a> ·\n    <a href=\"site/content/reference/spec/en-US.md\">Specification</a> ·\n    <a href=\"site/content/guides/ai-agents/en-US.md\">AI / Agents</a> ·\n    <a href=\"README.zh-CN.md\">简体中文</a>\n  </p>\n  <p>\n    <img alt=\"version\" src=\"https://img.shields.io/badge/version-0.3.1-18181b\">\n    <img alt=\"script\" src=\"https://img.shields.io/badge/Slex-v0.1-18181b\">\n    <img alt=\"TypeScript\" src=\"https://img.shields.io/badge/runtime-TypeScript-3178c6\">\n    <img alt=\"Svelte 5\" src=\"https://img.shields.io/badge/components-Svelte_5-ff3e00\">\n    <img alt=\"license\" src=\"https://img.shields.io/badge/license-MIT-16a34a\">\n  </p>\n</div>\n\n## Live interface blocks inside Markdown\n\n**SlexKit** turns explicit `slex` Markdown fences into live, stateful UI blocks. A Slex source is just a JavaScript object literal: `g` holds state and logic, `layout` describes the component tree, and the browser runtime renders the result in place.\n\nIt is built for chat messages, documents, agent panels, tool results, and AI-authored dashboards. It is not a full application framework.\n\n## Installation\n\n> Just want to use SlexKit in Obsidian? Open **Settings -> Community plugins**, search for **SlexKit**, then install and enable it. The npm package below is for developers integrating SlexKit into web apps, Markdown renderers, Streamdown, or custom hosts.\n\n```sh\nnpm install slexkit\n```\n\n```ts\nimport { mount } from \"slexkit\";\nimport \"slexkit/style.css\";\n```\n\n## Usage\n\n```html\n<div id=\"app\"></div>\n\n<script type=\"module\">\n  import { mount } from \"slexkit\";\n  import \"slexkit/style.css\";\n\n  mount(\n    {\n      slex: \"0.1\",\n      namespace: \"hello\",\n      g: { name: \"World\", count: 0 },\n      layout: {\n        \"card:greeting\": {\n          title: \"Greeting\",\n          \"text:message\": {\n            \"$text\": \"'Hello, ' + g.name + '! Count: ' + g.count\"\n          },\n          \"button:add\": {\n            label: \"+1\",\n            onclick: \"g.count++\"\n          }\n        }\n      }\n    },\n    document.getElementById(\"app\")\n  );\n</script>\n```\n\n## Markdown Native\n\nSlexKit-capable hosts process explicit `slex` fences only. Plain `js`, `json`, and unlabeled code blocks stay inert.\n\n````md\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"status\",\n  g: { done: 3, total: 4 },\n  layout: {\n    \"badge:state\": { label: \"Ready\", tone: \"success\" },\n    \"text:summary\": { \"$text\": \"g.done + '/' + g.total + ' complete'\" }\n  }\n}\n```\n\n**Status:** Ready. 3/4 complete.\n````\n\nMarkdown platforms without SlexKit support show the fallback text. Hosts with SlexKit render the interactive UI.\n\n## What You Get\n\n- **Zero-build Slex source**: object literals with no imports, scaffolding, or component bundling in the generated output.\n- **Reactive `g` / `layout` model**: centralized state and logic with declarative component trees.\n- **Expression pipes**: `$` read expressions for dynamic props and `on*` write expressions for events.\n- **Directives**: `$if` and `$for` for conditional rendering and keyed list reconciliation.\n- **Official Svelte components**: 40+ layout, input, content, display, disclosure, feedback, and tooling components.\n- **Extensible registry**: custom component types, Svelte renderers, and component state modes.\n- **Trusted and secure runtimes**: host-realm rendering for trusted content, sandbox iframe rendering for untrusted source.\n- **ToolHost**: confirm, choose, and fill-form templates for structured AI tool-call UX.\n- **AI-friendly docs surface**: `llms.txt`, skills, and the `@slexkit/mcp` read-only MCP server.\n\n## Packages\n\n| Package | Install | Contents |\n| --- | --- | --- |\n| `slexkit` | `npm install slexkit` | Runtime, Svelte components, ToolHost, styles |\n| `@slexkit/runtime` | `npm install slexkit @slexkit/runtime` | Component-free runtime wrapper |\n| `@slexkit/components-svelte` | `npm install slexkit @slexkit/runtime @slexkit/components-svelte` | Svelte component registration |\n| `@slexkit/theme-shadcn` | `npm install @slexkit/theme-shadcn` | CSS theme tokens |\n| `@slexkit/streamdown` | `npm install slexkit @slexkit/theme-shadcn @slexkit/streamdown streamdown react react-dom` | React / Streamdown Markdown renderer |\n| `@slexkit/mcp` | `npx -y @slexkit/mcp` | Read-only MCP server for docs, examples, and source validation |\n\nSee [Package Boundaries](site/content/reference/packages/en-US.md) for details.\n\n## Integrations\n\n| Host | Path |\n| --- | --- |\n| Browser DOM | `mount()`, `ingest()`, `boot()`, `disposeNamespace()` |\n| Markdown renderers | `createSlexKitMarkdownRuntimeHost()` |\n| React / Streamdown | `@slexkit/streamdown` |\n| Obsidian | Install **SlexKit** from Community Plugins; release repo: <https://github.com/slexkit/obsidian-slexkit> |\n| AI agents | `@slexkit/mcp`, `llms.txt`, SlexKit skill docs |\n| Custom components | `register()`, `registerSvelteComponent()`, `registerSubset()` |\n\n## Security Runtime\n\nTrusted mode runs inside the host realm and is intended for application-authored or reviewed source. Secure mode isolates untrusted Slex source in a sandbox iframe with an opaque origin, nonce-based CSP, locked-down globals, host-mediated network access, and a heartbeat watchdog.\n\nRead the [Security Runtime](site/content/reference/security/en-US.md) docs before rendering unreviewed user or model output.\n\n## Documentation\n\n| Document | Topic |\n| --- | --- |\n| [Getting Started](site/content/guides/quick-start/en-US.md) | Install and render a first Markdown-friendly Slex source |\n| [Integration](site/content/guides/integration/en-US.md) | Streamdown, Obsidian, and custom host paths |\n| [Runtime model](site/content/reference/runtime/en-US.md) | Mounting, updates, namespace store, lifecycle |\n| [Slex usage reference](site/content/reference/usage/en-US.md) | Source structure, directives, expressions, events, custom components |\n| [Security runtime](site/content/reference/security/en-US.md) | Threat model, sandbox iframe, policy, postMessage bridge |\n| [Slex Specification](site/content/reference/spec/en-US.md) | Protocol v0.1, types, merge rules, lifecycle hooks |\n| [ToolHost](site/content/reference/toolhost/en-US.md) | Tool-call rendering and custom templates |\n| [Icon system](site/content/reference/icons/en-US.md) | Phosphor icons, custom registration, Iconify fallback |\n| [AI / Agents](site/content/guides/ai-agents/en-US.md) | `llms.txt`, MCP server, skills, and authoring rules |\n| [Changelog](CHANGELOG.md) | Release notes and notable changes |\n\n## Version Information\n\n```ts\nimport { SLEXKIT_VERSION, SLEX_PROTOCOL_VERSION, getSlexKitInfo } from \"slexkit\";\n```\n\nThe npm package version, component implementation version, and Slex protocol version are exposed separately. The current public protocol is `v0.1`.\n\n## License\n\nMIT",
-      "hash": "117cabab"
+      "body": "<div align=\"center\">\n  <p>\n    <img src=\"site/assets/logo.svg\" alt=\"SlexKit\" width=\"84\" height=\"84\" />\n  </p>\n  <h1>SlexKit</h1>\n  <p><strong>Streaming Live EXpressions Kit</strong></p>\n  <p>\n    \"Docs as tools, tools as docs.\" Give Markdown interactive power and make every AI output come alive.\n  </p>\n  <p>\n    <a href=\"site/content/guides/intro/en-US.md\">Documentation</a> ·\n    <a href=\"site/content/components/accordion/en-US.md\">Components</a> ·\n    <a href=\"site/content/reference/spec/en-US.md\">Specification</a> ·\n    <a href=\"site/content/guides/ai-agents/en-US.md\">AI / Agents</a> ·\n    <a href=\"README.zh-CN.md\">简体中文</a>\n  </p>\n  <p>\n    <img alt=\"version\" src=\"https://img.shields.io/badge/version-0.3.2-18181b\">\n    <img alt=\"script\" src=\"https://img.shields.io/badge/Slex-v0.1-18181b\">\n    <img alt=\"TypeScript\" src=\"https://img.shields.io/badge/runtime-TypeScript-3178c6\">\n    <img alt=\"Svelte 5\" src=\"https://img.shields.io/badge/components-Svelte_5-ff3e00\">\n    <img alt=\"license\" src=\"https://img.shields.io/badge/license-MIT-16a34a\">\n  </p>\n</div>\n\n## Live interface blocks inside Markdown\n\n**SlexKit** turns explicit `slex` Markdown fences into live, stateful UI blocks. A Slex source is just a JavaScript object literal: `g` holds state and logic, `layout` describes the component tree, and the browser runtime renders the result in place.\n\nIt is built for chat messages, documents, agent panels, tool results, and AI-authored dashboards. It is not a full application framework.\n\n## Installation\n\n> Just want to use SlexKit in Obsidian? Open **Settings -> Community plugins**, search for **SlexKit**, then install and enable it. The npm package below is for developers integrating SlexKit into web apps, Markdown renderers, Streamdown, or custom hosts.\n\n```sh\nnpm install slexkit\n```\n\n```ts\nimport { mount } from \"slexkit\";\nimport \"slexkit/style.css\";\n```\n\n## Usage\n\n```html\n<div id=\"app\"></div>\n\n<script type=\"module\">\n  import { mount } from \"slexkit\";\n  import \"slexkit/style.css\";\n\n  mount(\n    {\n      slex: \"0.1\",\n      namespace: \"hello\",\n      g: { name: \"World\", count: 0 },\n      layout: {\n        \"card:greeting\": {\n          title: \"Greeting\",\n          \"text:message\": {\n            \"$text\": \"'Hello, ' + g.name + '! Count: ' + g.count\"\n          },\n          \"button:add\": {\n            label: \"+1\",\n            onclick: \"g.count++\"\n          }\n        }\n      }\n    },\n    document.getElementById(\"app\")\n  );\n</script>\n```\n\n## Markdown Native\n\nSlexKit-capable hosts process explicit `slex` fences only. Plain `js`, `json`, and unlabeled code blocks stay inert.\n\n````md\n```slex\n{\n  slex: \"0.1\",\n  namespace: \"status\",\n  g: { done: 3, total: 4 },\n  layout: {\n    \"badge:state\": { label: \"Ready\", tone: \"success\" },\n    \"text:summary\": { \"$text\": \"g.done + '/' + g.total + ' complete'\" }\n  }\n}\n```\n\n**Status:** Ready. 3/4 complete.\n````\n\nMarkdown platforms without SlexKit support show the fallback text. Hosts with SlexKit render the interactive UI.\n\n## What You Get\n\n- **Zero-build Slex source**: object literals with no imports, scaffolding, or component bundling in the generated output.\n- **Reactive `g` / `layout` model**: centralized state and logic with declarative component trees.\n- **Expression pipes**: `$` read expressions for dynamic props and `on*` write expressions for events.\n- **Directives**: `$if` and `$for` for conditional rendering and keyed list reconciliation.\n- **Official Svelte components**: 40+ layout, input, content, display, disclosure, feedback, and tooling components.\n- **Extensible registry**: custom component types, Svelte renderers, and component state modes.\n- **Trusted and secure runtimes**: host-realm rendering for trusted content, sandbox iframe rendering for untrusted source.\n- **ToolHost**: confirm, choose, and fill-form templates for structured AI tool-call UX.\n- **AI-friendly docs surface**: `llms.txt`, skills, and the `@slexkit/mcp` read-only MCP server.\n\n## Packages\n\n| Package | Install | Contents |\n| --- | --- | --- |\n| `slexkit` | `npm install slexkit` | Runtime, Svelte components, ToolHost, styles |\n| `@slexkit/runtime` | `npm install slexkit @slexkit/runtime` | Component-free runtime wrapper |\n| `@slexkit/components-svelte` | `npm install slexkit @slexkit/runtime @slexkit/components-svelte` | Svelte component registration |\n| `@slexkit/theme-shadcn` | `npm install @slexkit/theme-shadcn` | CSS theme tokens |\n| `@slexkit/streamdown` | `npm install slexkit @slexkit/theme-shadcn @slexkit/streamdown streamdown react react-dom` | React / Streamdown Markdown renderer |\n| `@slexkit/mcp` | `npx -y @slexkit/mcp` | Read-only MCP server for docs, examples, and source validation |\n\nSee [Package Boundaries](site/content/reference/packages/en-US.md) for details.\n\n## Integrations\n\n| Host | Path |\n| --- | --- |\n| Browser DOM | `mount()`, `ingest()`, `boot()`, `disposeNamespace()` |\n| Markdown renderers | `createSlexKitMarkdownRuntimeHost()` |\n| React / Streamdown | `@slexkit/streamdown` |\n| Obsidian | Install **SlexKit** from Community Plugins; release repo: <https://github.com/slexkit/obsidian-slexkit> |\n| AI agents | `@slexkit/mcp`, `llms.txt`, SlexKit skill docs |\n| Custom components | `register()`, `registerSvelteComponent()`, `registerSubset()` |\n\n## Security Runtime\n\nTrusted mode runs inside the host realm and is intended for application-authored or reviewed source. Secure mode isolates untrusted Slex source in a sandbox iframe with an opaque origin, nonce-based CSP, locked-down globals, host-mediated network access, and a heartbeat watchdog.\n\nRead the [Security Runtime](site/content/reference/security/en-US.md) docs before rendering unreviewed user or model output.\n\n## Documentation\n\n| Document | Topic |\n| --- | --- |\n| [Getting Started](site/content/guides/quick-start/en-US.md) | Install and render a first Markdown-friendly Slex source |\n| [Integration](site/content/guides/integration/en-US.md) | Streamdown, Obsidian, and custom host paths |\n| [Runtime model](site/content/reference/runtime/en-US.md) | Mounting, updates, namespace store, lifecycle |\n| [Slex usage reference](site/content/reference/usage/en-US.md) | Source structure, directives, expressions, events, custom components |\n| [Security runtime](site/content/reference/security/en-US.md) | Threat model, sandbox iframe, policy, postMessage bridge |\n| [Slex Specification](site/content/reference/spec/en-US.md) | Protocol v0.1, types, merge rules, lifecycle hooks |\n| [ToolHost](site/content/reference/toolhost/en-US.md) | Tool-call rendering and custom templates |\n| [Icon system](site/content/reference/icons/en-US.md) | Phosphor icons, custom registration, Iconify fallback |\n| [AI / Agents](site/content/guides/ai-agents/en-US.md) | `llms.txt`, MCP server, skills, and authoring rules |\n| [Changelog](CHANGELOG.md) | Release notes and notable changes |\n\n## Version Information\n\n```ts\nimport { SLEXKIT_VERSION, SLEX_PROTOCOL_VERSION, getSlexKitInfo } from \"slexkit\";\n```\n\nThe npm package version, component implementation version, and Slex protocol version are exposed separately. The current public protocol is `v0.1`.\n\n## License\n\nMIT",
+      "hash": "4c55b5dc"
     },
     {
       "id": "guides/intro",
@@ -738,8 +738,8 @@
       "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.3.1 - Host stability and control rendering hardening\n\n### Added\n- Runtime style safety tests that block broad `:has()` selectors, `clip-path`, and slider track regressions in shipped CSS.\n- Regression coverage for disabled Switch, Checkbox, and Radio state attributes.\n\n### Changed\n- CI now installs dependencies with `bun install --frozen-lockfile` and runs lint before tests.\n- Disabled Switch, Checkbox, and Radio styling now uses explicit `data-disabled` attributes instead of broad relational selectors.\n- Select and sr-only helper styles avoid `clip-path` for better host and Obsidian CSS compatibility.\n\n### Fixed\n- Slider thumb rendering artifacts caused by painting the range track on the native input box.\n- Input focus visibility after removing custom engineering steppers.\n- Home RC example input labels now use native Input component labels instead of separate text labels.\n- Stat cards no longer clip updated text during cross-document state examples.\n- Markdown calculator examples no longer render duplicate section labels.\n\n## v0.3.0 - Examples overhaul with component audit and i18n\n\n### Added\n- Example gallery: 17 high-quality examples organized by usage scenario (Getting Started, Calculators, Data Browsing, Dashboards, Config Wizards, Decision Support, Platform Features)\n- English translations for all 17 example pages\n- `toolhost-demo`: real `renderToolCall` API with chat-style conversation UI\n- Example rendering infrastructure: `site/routes/examples.js`, `site/pages/examples.slex.js`, `site/data/examples.js`\n- Formula component (`src/components/svelte/content/Formula.svelte`) with KaTeX rendering\n- `src/engine/capabilities.ts`: structured capability docs for AI agents\n- `src/engine/validation.ts`: SPEC contract validation\n- `src/engine/stdlib.ts`: standard library with `math.clamp`, `math.safeDivide`, and other utilities\n- `src/engine/sandbox-runner.ts`: sandbox runner for secure runtime\n- Component state eval context shadowing test suite (`component-state-shadowing.test.ts`)\n- Collapsible and Callout double-rendering regression tests\n- Slider component name shadowing regression test\n\n### Changed\n- Examples reduced from 64 to 17 high-quality examples, organized by user story\n- Example source locale: `zh-CN` (with `en-US` translations)\n- `renderChildren` (`helpers.ts`) now clears existing content when children are present\n- Switch component now accepts `checked`/`value` props for initialization consistency with Checkbox\n- Site UI: DocsShell, DocRail, router, shell improvements\n- Components: Input, Select, Tabs, Table, PlaygroundMarkdown refinements\n- CSS: theme-shadcn, text-input, docs-shell styling updates\n\n### Fixed\n- Eval context shadowing: component names `g` and `api` no longer overwrite reserved context keys\n- `renderChildren` double rendering in Collapsible and Callout\n- Voltage divider summary typo (\"输入输入电压\")\n- Salary calculator fallback numbers to match actual calculator output\n- Tabs-and-branching: title and length conversion mismatch\n- 4 pre-existing test failures (ai-docs, page-structure, theme, markdown-content)\n\n### Removed\n- 47 low-quality/duplicate examples (reduced from 64 to 17)\n- Dead \"Fallback\" copywriting from all example files\n- Unused `DialogShell.svelte` component\n\n## v0.2.0 - First public release\n\n### Added\n- `@slexkit/mcp`: AI Agent Model Context Protocol server with `slexkitDocs`, `slexkitExamples`, `slexkitValidate` tools\n- Protocol marker: `\"slex\": \"0.1\"` required on all Slex expressions and ToolHost templates\n- SPEC contract validation: component specs are now validated against the runtime contract\n- Version sync automation (`scripts/sync-version.ts`) and changelog sync (`scripts/sync-changelog.ts`)\n- AI documentation generation pipeline with structured LLM-friendly output\n- Static site export with SEO metadata engine (`site/data/seo.js`, `site/scripts/export-static.ts`)\n- Chinese documentation for all reference and guide pages\n- Enhanced component state management with lifecycle hooks (`onMount`, `onUnmount`, `onUpdate`)\n\n### Changed\n- Switch component migrated from `checked` to `enabled` state mode\n- Documentation: restructured site content, synced en-US with zh-CN, added reference section\n- Theme: refined select styling, dropdown shadows, footer and info tone polish\n- AI docs generation enhanced with Chinese/English locale awareness\n\n### Fixed\n- Component spec alignment with documentation across all 28 components\n- Site routing and code block highlighting\n- Introduction and quick-start guide wording for clarity\n- Broken links and factual errors in component and reference documentation\n\n## v0.1.9\n\n### Added\n- Icon manager with Phosphor icon system (`registerIcon`, `registerIcons`, `getIcon`, `loadIcon`)\n- Expanded icon support across labeled components (badge, button, callout, etc.)\n- Icon docs page with registration API reference\n\n### Fixed\n- Refined component interactions in static site export\n- Tabs indicator animation restored\n- Callout and toast icon placement in titles\n- Numeric value display formatting\n\n### Changed\n- Site docs shell refactored for static export\n- Site navigation and theme controls alignment\n- Slex naming standardized across codebase\n\n## v0.1.8\n\n### Added\n- CSP-hardened secure runtime sandbox with heartbeat watchdog\n- `mountSecureArtifact()` for isolated iframe rendering\n- `createSlexKitMarkdownRuntimeHost()` for Markdown-hosted SlexKit blocks\n- Streamdown React renderer (`@slexkit/streamdown`)\n- Obsidian plugin adapter (`@slexkit/obsidian`)\n- Shadcn-compatible CSS theme (`@slexkit/theme-shadcn`)\n- Package boundary wrappers (`@slexkit/runtime`, `@slexkit/components-svelte`)\n- ToolHost with built-in templates: `confirm-action`, `choose-options`, `fill-form`\n\n### Changed\n- Component registration model: side-effect import registers all components\n- Styles reorganized into per-component CSS files\n- Build system: Bun.build with Svelte plugin, split ESM entries\n\n## v0.1.7\n\n### Added\n- `$for` list rendering with keyed reconciliation (delete / add-update-reorder / trim phases)\n- `$if` conditional rendering with enter/leave animation support\n- `$key` strategy: `$value`, property-based, or fallback to index\n- Component instance state modes: `value`, `checked`, `enabled`, `readable`, `none`\n- Lifecycle hooks: `g.onMount_<name>()`, `g.onUnmount_<name>()`, `g.onUpdate_<name>()`\n- Engineering number input with SI prefix parsing\n- Rich error diagnostics with line/column/excerpt display\n\n### Changed\n- Expression evaluation: `new Function()` compilation with reactive dependency tracking\n- Layout tree renderer now supports three rendering paths (normal, `$if`, `$for`)\n- `g` deep-merge preserves keys not present in the new state\n\n## v0.1.6 and earlier\n\n### Added\n- Reactive `g`/`layout` split with expression pipes (`$` read-pipes, `on*` write-pipes)\n- Custom fine-grained reactivity system (~280 lines, no external dependency)\n- Component registry with extensible renderer interface\n- Svelte 5 component adapter (creates stores from props, flushSync DOM)\n- `mount()`, `ingest()`, `boot()` entry points\n- 28 built-in Svelte components across 8 categories\n- `parseSlexSource()` DSL parser with `diagnoseSlexKitSource()` error reporting\n- Documentation site with interactive playground",
-      "hash": "bc737cc1"
+      "body": "---\ntitle: Changelog\ncategory: Releases\nstatus: ready\norder: 10\nsummary: \"Release notes and notable changes for SlexKit.\"\nslexkitRenderMode: component\n---\n\n# Changelog\n\nAll notable changes to SlexKit.\n\n## v0.3.2 - Host CSS isolation and repeated layout hardening\n\n### Changed\n- `$for` rendering now uses comment anchors and direct child insertion instead of a wrapper element that depended on `display: contents`.\n- Site-only mobile navigation CSS moved out of the runtime base stylesheet and into the documentation site shell.\n- Component accessors now share one reactive effect across subscribers instead of creating duplicate subscriber fan-out work.\n\n### Fixed\n- Obsidian and other Markdown hosts no longer need to rewrite `$for` wrapper CSS to avoid `display: contents`, preserving grid and row layouts for repeated items.\n- Published runtime base CSS no longer leaks `#mobileNav` or `body[data-mobile-nav-open]` selectors into host pages.\n- Custom renderers that return no element no longer leave invalid `$for` slots behind during diffing or cleanup.\n\n## v0.3.1 - Host stability and control rendering hardening\n\n### Added\n- Runtime style safety tests that block broad `:has()` selectors, `clip-path`, and slider track regressions in shipped CSS.\n- Regression coverage for disabled Switch, Checkbox, and Radio state attributes.\n\n### Changed\n- CI now installs dependencies with `bun install --frozen-lockfile` and runs lint before tests.\n- Disabled Switch, Checkbox, and Radio styling now uses explicit `data-disabled` attributes instead of broad relational selectors.\n- Select and sr-only helper styles avoid `clip-path` for better host and Obsidian CSS compatibility.\n\n### Fixed\n- Slider thumb rendering artifacts caused by painting the range track on the native input box.\n- Input focus visibility after removing custom engineering steppers.\n- Home RC example input labels now use native Input component labels instead of separate text labels.\n- Stat cards no longer clip updated text during cross-document state examples.\n- Markdown calculator examples no longer render duplicate section labels.\n\n## v0.3.0 - Examples overhaul with component audit and i18n\n\n### Added\n- Example gallery: 17 high-quality examples organized by usage scenario (Getting Started, Calculators, Data Browsing, Dashboards, Config Wizards, Decision Support, Platform Features)\n- English translations for all 17 example pages\n- `toolhost-demo`: real `renderToolCall` API with chat-style conversation UI\n- Example rendering infrastructure: `site/routes/examples.js`, `site/pages/examples.slex.js`, `site/data/examples.js`\n- Formula component (`src/components/svelte/content/Formula.svelte`) with KaTeX rendering\n- `src/engine/capabilities.ts`: structured capability docs for AI agents\n- `src/engine/validation.ts`: SPEC contract validation\n- `src/engine/stdlib.ts`: standard library with `math.clamp`, `math.safeDivide`, and other utilities\n- `src/engine/sandbox-runner.ts`: sandbox runner for secure runtime\n- Component state eval context shadowing test suite (`component-state-shadowing.test.ts`)\n- Collapsible and Callout double-rendering regression tests\n- Slider component name shadowing regression test\n\n### Changed\n- Examples reduced from 64 to 17 high-quality examples, organized by user story\n- Example source locale: `zh-CN` (with `en-US` translations)\n- `renderChildren` (`helpers.ts`) now clears existing content when children are present\n- Switch component now accepts `checked`/`value` props for initialization consistency with Checkbox\n- Site UI: DocsShell, DocRail, router, shell improvements\n- Components: Input, Select, Tabs, Table, PlaygroundMarkdown refinements\n- CSS: theme-shadcn, text-input, docs-shell styling updates\n\n### Fixed\n- Eval context shadowing: component names `g` and `api` no longer overwrite reserved context keys\n- `renderChildren` double rendering in Collapsible and Callout\n- Voltage divider summary typo (\"输入输入电压\")\n- Salary calculator fallback numbers to match actual calculator output\n- Tabs-and-branching: title and length conversion mismatch\n- 4 pre-existing test failures (ai-docs, page-structure, theme, markdown-content)\n\n### Removed\n- 47 low-quality/duplicate examples (reduced from 64 to 17)\n- Dead \"Fallback\" copywriting from all example files\n- Unused `DialogShell.svelte` component\n\n## v0.2.0 - First public release\n\n### Added\n- `@slexkit/mcp`: AI Agent Model Context Protocol server with `slexkitDocs`, `slexkitExamples`, `slexkitValidate` tools\n- Protocol marker: `\"slex\": \"0.1\"` required on all Slex expressions and ToolHost templates\n- SPEC contract validation: component specs are now validated against the runtime contract\n- Version sync automation (`scripts/sync-version.ts`) and changelog sync (`scripts/sync-changelog.ts`)\n- AI documentation generation pipeline with structured LLM-friendly output\n- Static site export with SEO metadata engine (`site/data/seo.js`, `site/scripts/export-static.ts`)\n- Chinese documentation for all reference and guide pages\n- Enhanced component state management with lifecycle hooks (`onMount`, `onUnmount`, `onUpdate`)\n\n### Changed\n- Switch component migrated from `checked` to `enabled` state mode\n- Documentation: restructured site content, synced en-US with zh-CN, added reference section\n- Theme: refined select styling, dropdown shadows, footer and info tone polish\n- AI docs generation enhanced with Chinese/English locale awareness\n\n### Fixed\n- Component spec alignment with documentation across all 28 components\n- Site routing and code block highlighting\n- Introduction and quick-start guide wording for clarity\n- Broken links and factual errors in component and reference documentation\n\n## v0.1.9\n\n### Added\n- Icon manager with Phosphor icon system (`registerIcon`, `registerIcons`, `getIcon`, `loadIcon`)\n- Expanded icon support across labeled components (badge, button, callout, etc.)\n- Icon docs page with registration API reference\n\n### Fixed\n- Refined component interactions in static site export\n- Tabs indicator animation restored\n- Callout and toast icon placement in titles\n- Numeric value display formatting\n\n### Changed\n- Site docs shell refactored for static export\n- Site navigation and theme controls alignment\n- Slex naming standardized across codebase\n\n## v0.1.8\n\n### Added\n- CSP-hardened secure runtime sandbox with heartbeat watchdog\n- `mountSecureArtifact()` for isolated iframe rendering\n- `createSlexKitMarkdownRuntimeHost()` for Markdown-hosted SlexKit blocks\n- Streamdown React renderer (`@slexkit/streamdown`)\n- Obsidian plugin adapter (`@slexkit/obsidian`)\n- Shadcn-compatible CSS theme (`@slexkit/theme-shadcn`)\n- Package boundary wrappers (`@slexkit/runtime`, `@slexkit/components-svelte`)\n- ToolHost with built-in templates: `confirm-action`, `choose-options`, `fill-form`\n\n### Changed\n- Component registration model: side-effect import registers all components\n- Styles reorganized into per-component CSS files\n- Build system: Bun.build with Svelte plugin, split ESM entries\n\n## v0.1.7\n\n### Added\n- `$for` list rendering with keyed reconciliation (delete / add-update-reorder / trim phases)\n- `$if` conditional rendering with enter/leave animation support\n- `$key` strategy: `$value`, property-based, or fallback to index\n- Component instance state modes: `value`, `checked`, `enabled`, `readable`, `none`\n- Lifecycle hooks: `g.onMount_<name>()`, `g.onUnmount_<name>()`, `g.onUpdate_<name>()`\n- Engineering number input with SI prefix parsing\n- Rich error diagnostics with line/column/excerpt display\n\n### Changed\n- Expression evaluation: `new Function()` compilation with reactive dependency tracking\n- Layout tree renderer now supports three rendering paths (normal, `$if`, `$for`)\n- `g` deep-merge preserves keys not present in the new state\n\n## v0.1.6 and earlier\n\n### Added\n- Reactive `g`/`layout` split with expression pipes (`$` read-pipes, `on*` write-pipes)\n- Custom fine-grained reactivity system (~280 lines, no external dependency)\n- Component registry with extensible renderer interface\n- Svelte 5 component adapter (creates stores from props, flushSync DOM)\n- `mount()`, `ingest()`, `boot()` entry points\n- 28 built-in Svelte components across 8 categories\n- `parseSlexSource()` DSL parser with `diagnoseSlexKitSource()` error reporting\n- Documentation site with interactive playground",
+      "hash": "57cc5d83"
     }
   ],
   "expressionContext": [
@@ -3481,7 +3481,7 @@
     }
   ],
   "sourceHashes": {
-    "README.md": "117cabab",
+    "README.md": "4c55b5dc",
     "site/content/guides/intro/en-US.md": "bff82366",
     "site/content/guides/quick-start/en-US.md": "ba82b030",
     "site/content/guides/integration/en-US.md": "1138bddd",
@@ -3514,7 +3514,7 @@
     "site/content/reference/toolhost/en-US.md": "f62ba8aa",
     "site/content/reference/icons/en-US.md": "3d32cbbf",
     "site/content/reference/rationale/en-US.md": "dcf53947",
-    "site/content/releases/changelog/en-US.md": "bc737cc1",
+    "site/content/releases/changelog/en-US.md": "57cc5d83",
     "site/content/components/accordion/en-US.md": "9e90867f",
     "site/content/components/badge/en-US.md": "fb8275e7",
     "site/content/components/button/en-US.md": "30463322",

package/dist/base.css

@@ -133,52 +133,6 @@ color-scheme: dark;
   box-sizing: border-box;
 }
 
-body[data-mobile-nav-open] {
-  overflow: hidden;
-  overscroll-behavior: contain;
-}
-
-#mobileNav {
-  --mobile-nav-backdrop-opacity: 0;
-  --mobile-nav-panel-translate: -100%;
-  pointer-events: none;
-}
-
-#mobileNav[data-open="true"] {
-  --mobile-nav-backdrop-opacity: 1;
-  --mobile-nav-panel-translate: 0px;
-  pointer-events: auto;
-}
-
-#mobileNav [data-mobile-nav-backdrop] {
-  opacity: var(--mobile-nav-backdrop-opacity);
-  touch-action: pan-y;
-  transition: opacity 180ms ease;
-}
-
-#mobileNav [data-mobile-nav-panel] {
-  transform: translateX(var(--mobile-nav-panel-translate));
-  touch-action: pan-y;
-  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
-  will-change: transform;
-}
-
-#mobileNav[data-dragging="true"] [data-mobile-nav-backdrop],
-#mobileNav[data-dragging="true"] [data-mobile-nav-panel] {
-  transition: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  #mobileNav [data-mobile-nav-backdrop],
-  #mobileNav [data-mobile-nav-panel] {
-    transition: none;
-  }
-}
-
-.slexkit-for-wrapper {
-  display: contents;
-}
-
 .slexkit-source-toolbar {
   display: flex;
   align-items: center;

package/dist/runtime.cjs

@@ -468,19 +468,31 @@ function configureComponentScope(options) {
 function createComponentAccessor(read) {
   const subscribers = new Set;
   let current = read();
-  const accessor = () => current;
-  accessor.subscribe = (run) => {
-    subscribers.add(run);
-    run(current);
-    const stop = createEffect(() => {
+  let stopEffect;
+  const start = () => {
+    if (stopEffect)
+      return;
+    stopEffect = createEffect(() => {
       current = read();
-      for (const subscriber of subscribers)
+      for (const subscriber of Array.from(subscribers))
         subscriber(current);
       flushDom?.();
     });
+  };
+  const accessor = () => current;
+  accessor.subscribe = (run) => {
+    const wasIdle = subscribers.size === 0;
+    subscribers.add(run);
+    if (wasIdle)
+      start();
+    else
+      run(current);
     return () => {
       subscribers.delete(run);
-      stop();
+      if (subscribers.size === 0) {
+        stopEffect?.();
+        stopEffect = undefined;
+      }
     };
   };
   return accessor;
@@ -1331,9 +1343,10 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
   const renderer = getRenderer(type);
   if (!renderer)
     return;
-  const forWrapper = (container.ownerDocument || document).createElement("div");
-  forWrapper.className = "slexkit-for-wrapper";
-  container.appendChild(forWrapper);
+  const doc = container.ownerDocument || document;
+  const startAnchor = doc.createComment(`slexkit-for:${fullKey}:start`);
+  const endAnchor = doc.createComment(`slexkit-for:${fullKey}:end`);
+  container.append(startAnchor, endAnchor);
   const evalCtx = buildComponentEvalContext(g, components, componentTypes, api, forCtx);
   const items = createMemo(() => trackForCollection(evalRead(props.$for, evalCtx, ns, `${fullKey}:$for`)));
   const $keyProp = props.$key;
@@ -1346,8 +1359,10 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
     disposedSlots.add(slot);
     leavingSlots.delete(slot);
     callHook(g, name, "onUnmount");
-    disposeComponent(slot.el);
-    slot.el.remove();
+    if (slot.el) {
+      disposeComponent(slot.el);
+      slot.el.remove();
+    }
     if (slot.dispose)
       slot.dispose();
   };
@@ -1372,12 +1387,16 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
       }
     }
     for (const slot of deletedSlots) {
-      container.appendChild(slot.el);
       leavingSlots.add(slot);
+      if (!slot.el) {
+        disposeSlot(slot);
+        continue;
+      }
       applyLeaveAnimation(slot.el, slot.props, () => {
         disposeSlot(slot);
       });
     }
+    let cursor = startAnchor;
     arr.forEach((item, index) => {
       item = asReactiveValue(item, g);
       const keyVal = newKeys[index];
@@ -1405,20 +1424,22 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
         const indexSignal = createSignal(index);
         const revisionSignal = createSignal(0);
         slot = renderAndMountSlot(item, index, keyVal, indexSignal, revisionSignal, renderer, type, name, props, container, g, components, componentTypes, api, forCtx, ns, fullKey, options);
-        if (slot.el) {
-          applyEnterAnimation(slot.el, slot.props);
-          callHook(g, name, "onMount");
+        if (!slot.el) {
+          disposeSlot(slot);
+          return;
         }
+        applyEnterAnimation(slot.el, slot.props);
+        callHook(g, name, "onMount");
         slotMap.set(keyVal, slot);
       }
-      const refChild = forWrapper.children[index];
-      if (slot.el && refChild !== slot.el) {
-        forWrapper.insertBefore(slot.el, refChild ?? null);
+      const nextChild = cursor.nextSibling;
+      if (slot.el && nextChild !== slot.el) {
+        container.insertBefore(slot.el, nextChild ?? endAnchor);
+      }
+      if (slot.el) {
+        cursor = slot.el;
       }
     });
-    while (forWrapper.children.length > arr.length) {
-      forWrapper.lastChild.remove();
-    }
   });
   onCleanup(() => {
     for (const slot of Array.from(slotMap.values()))
@@ -1426,7 +1447,8 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
     slotMap.clear();
     for (const slot of Array.from(leavingSlots))
       disposeSlot(slot);
-    forWrapper.remove();
+    startAnchor.remove();
+    endAnchor.remove();
   });
 }
 function renderNormalNode(fullKey, props, container, g, components, componentTypes, api, forCtx, ns, options) {
@@ -1803,7 +1825,7 @@ ${parseSource}
 var parseSlexKitDsl = parseSlexSource;
 
 // src/version.ts
-var SLEXKIT_VERSION = "0.3.1";
+var SLEXKIT_VERSION = "0.3.2";
 var SLEX_PROTOCOL_VERSION = "0.1";
 var SLEXKIT_COMPONENTS_VERSION = SLEXKIT_VERSION;
 function getSlexKitInfo() {

package/dist/runtime.js

@@ -396,19 +396,31 @@ function configureComponentScope(options) {
 function createComponentAccessor(read) {
   const subscribers = new Set;
   let current = read();
-  const accessor = () => current;
-  accessor.subscribe = (run) => {
-    subscribers.add(run);
-    run(current);
-    const stop = createEffect(() => {
+  let stopEffect;
+  const start = () => {
+    if (stopEffect)
+      return;
+    stopEffect = createEffect(() => {
       current = read();
-      for (const subscriber of subscribers)
+      for (const subscriber of Array.from(subscribers))
         subscriber(current);
       flushDom?.();
     });
+  };
+  const accessor = () => current;
+  accessor.subscribe = (run) => {
+    const wasIdle = subscribers.size === 0;
+    subscribers.add(run);
+    if (wasIdle)
+      start();
+    else
+      run(current);
     return () => {
       subscribers.delete(run);
-      stop();
+      if (subscribers.size === 0) {
+        stopEffect?.();
+        stopEffect = undefined;
+      }
     };
   };
   return accessor;
@@ -1259,9 +1271,10 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
   const renderer = getRenderer(type);
   if (!renderer)
     return;
-  const forWrapper = (container.ownerDocument || document).createElement("div");
-  forWrapper.className = "slexkit-for-wrapper";
-  container.appendChild(forWrapper);
+  const doc = container.ownerDocument || document;
+  const startAnchor = doc.createComment(`slexkit-for:${fullKey}:start`);
+  const endAnchor = doc.createComment(`slexkit-for:${fullKey}:end`);
+  container.append(startAnchor, endAnchor);
   const evalCtx = buildComponentEvalContext(g, components, componentTypes, api, forCtx);
   const items = createMemo(() => trackForCollection(evalRead(props.$for, evalCtx, ns, `${fullKey}:$for`)));
   const $keyProp = props.$key;
@@ -1274,8 +1287,10 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
     disposedSlots.add(slot);
     leavingSlots.delete(slot);
     callHook(g, name, "onUnmount");
-    disposeComponent(slot.el);
-    slot.el.remove();
+    if (slot.el) {
+      disposeComponent(slot.el);
+      slot.el.remove();
+    }
     if (slot.dispose)
       slot.dispose();
   };
@@ -1300,12 +1315,16 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
       }
     }
     for (const slot of deletedSlots) {
-      container.appendChild(slot.el);
       leavingSlots.add(slot);
+      if (!slot.el) {
+        disposeSlot(slot);
+        continue;
+      }
       applyLeaveAnimation(slot.el, slot.props, () => {
         disposeSlot(slot);
       });
     }
+    let cursor = startAnchor;
     arr.forEach((item, index) => {
       item = asReactiveValue(item, g);
       const keyVal = newKeys[index];
@@ -1333,20 +1352,22 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
         const indexSignal = createSignal(index);
         const revisionSignal = createSignal(0);
         slot = renderAndMountSlot(item, index, keyVal, indexSignal, revisionSignal, renderer, type, name, props, container, g, components, componentTypes, api, forCtx, ns, fullKey, options);
-        if (slot.el) {
-          applyEnterAnimation(slot.el, slot.props);
-          callHook(g, name, "onMount");
+        if (!slot.el) {
+          disposeSlot(slot);
+          return;
         }
+        applyEnterAnimation(slot.el, slot.props);
+        callHook(g, name, "onMount");
         slotMap.set(keyVal, slot);
       }
-      const refChild = forWrapper.children[index];
-      if (slot.el && refChild !== slot.el) {
-        forWrapper.insertBefore(slot.el, refChild ?? null);
+      const nextChild = cursor.nextSibling;
+      if (slot.el && nextChild !== slot.el) {
+        container.insertBefore(slot.el, nextChild ?? endAnchor);
+      }
+      if (slot.el) {
+        cursor = slot.el;
       }
     });
-    while (forWrapper.children.length > arr.length) {
-      forWrapper.lastChild.remove();
-    }
   });
   onCleanup(() => {
     for (const slot of Array.from(slotMap.values()))
@@ -1354,7 +1375,8 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
     slotMap.clear();
     for (const slot of Array.from(leavingSlots))
       disposeSlot(slot);
-    forWrapper.remove();
+    startAnchor.remove();
+    endAnchor.remove();
   });
 }
 function renderNormalNode(fullKey, props, container, g, components, componentTypes, api, forCtx, ns, options) {
@@ -1731,7 +1753,7 @@ ${parseSource}
 var parseSlexKitDsl = parseSlexSource;
 
 // src/version.ts
-var SLEXKIT_VERSION = "0.3.1";
+var SLEXKIT_VERSION = "0.3.2";
 var SLEX_PROTOCOL_VERSION = "0.1";
 var SLEXKIT_COMPONENTS_VERSION = SLEXKIT_VERSION;
 function getSlexKitInfo() {

package/dist/slexkit.cjs

@@ -490,19 +490,31 @@ function configureComponentScope(options) {
 function createComponentAccessor(read) {
   const subscribers = new Set;
   let current = read();
-  const accessor = () => current;
-  accessor.subscribe = (run) => {
-    subscribers.add(run);
-    run(current);
-    const stop = createEffect(() => {
+  let stopEffect;
+  const start = () => {
+    if (stopEffect)
+      return;
+    stopEffect = createEffect(() => {
       current = read();
-      for (const subscriber of subscribers)
+      for (const subscriber of Array.from(subscribers))
         subscriber(current);
       flushDom?.();
     });
+  };
+  const accessor = () => current;
+  accessor.subscribe = (run) => {
+    const wasIdle = subscribers.size === 0;
+    subscribers.add(run);
+    if (wasIdle)
+      start();
+    else
+      run(current);
     return () => {
       subscribers.delete(run);
-      stop();
+      if (subscribers.size === 0) {
+        stopEffect?.();
+        stopEffect = undefined;
+      }
     };
   };
   return accessor;
@@ -1353,9 +1365,10 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
   const renderer = getRenderer(type);
   if (!renderer)
     return;
-  const forWrapper = (container.ownerDocument || document).createElement("div");
-  forWrapper.className = "slexkit-for-wrapper";
-  container.appendChild(forWrapper);
+  const doc = container.ownerDocument || document;
+  const startAnchor = doc.createComment(`slexkit-for:${fullKey}:start`);
+  const endAnchor = doc.createComment(`slexkit-for:${fullKey}:end`);
+  container.append(startAnchor, endAnchor);
   const evalCtx = buildComponentEvalContext(g, components, componentTypes, api, forCtx);
   const items = createMemo(() => trackForCollection(evalRead(props.$for, evalCtx, ns, `${fullKey}:$for`)));
   const $keyProp = props.$key;
@@ -1368,8 +1381,10 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
     disposedSlots.add(slot);
     leavingSlots.delete(slot);
     callHook(g, name, "onUnmount");
-    disposeComponent(slot.el);
-    slot.el.remove();
+    if (slot.el) {
+      disposeComponent(slot.el);
+      slot.el.remove();
+    }
     if (slot.dispose)
       slot.dispose();
   };
@@ -1394,12 +1409,16 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
       }
     }
     for (const slot of deletedSlots) {
-      container.appendChild(slot.el);
       leavingSlots.add(slot);
+      if (!slot.el) {
+        disposeSlot(slot);
+        continue;
+      }
       applyLeaveAnimation(slot.el, slot.props, () => {
         disposeSlot(slot);
       });
     }
+    let cursor = startAnchor;
     arr.forEach((item, index) => {
       item = asReactiveValue(item, g);
       const keyVal = newKeys[index];
@@ -1427,20 +1446,22 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
         const indexSignal = createSignal(index);
         const revisionSignal = createSignal(0);
         slot = renderAndMountSlot(item, index, keyVal, indexSignal, revisionSignal, renderer, type, name, props, container, g, components, componentTypes, api, forCtx, ns, fullKey, options);
-        if (slot.el) {
-          applyEnterAnimation(slot.el, slot.props);
-          callHook(g, name, "onMount");
+        if (!slot.el) {
+          disposeSlot(slot);
+          return;
         }
+        applyEnterAnimation(slot.el, slot.props);
+        callHook(g, name, "onMount");
         slotMap.set(keyVal, slot);
       }
-      const refChild = forWrapper.children[index];
-      if (slot.el && refChild !== slot.el) {
-        forWrapper.insertBefore(slot.el, refChild ?? null);
+      const nextChild = cursor.nextSibling;
+      if (slot.el && nextChild !== slot.el) {
+        container.insertBefore(slot.el, nextChild ?? endAnchor);
+      }
+      if (slot.el) {
+        cursor = slot.el;
       }
     });
-    while (forWrapper.children.length > arr.length) {
-      forWrapper.lastChild.remove();
-    }
   });
   onCleanup(() => {
     for (const slot of Array.from(slotMap.values()))
@@ -1448,7 +1469,8 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
     slotMap.clear();
     for (const slot of Array.from(leavingSlots))
       disposeSlot(slot);
-    forWrapper.remove();
+    startAnchor.remove();
+    endAnchor.remove();
   });
 }
 function renderNormalNode(fullKey, props, container, g, components, componentTypes, api, forCtx, ns, options) {
@@ -1825,7 +1847,7 @@ ${parseSource}
 var parseSlexKitDsl = parseSlexSource;
 
 // src/version.ts
-var SLEXKIT_VERSION = "0.3.1";
+var SLEXKIT_VERSION = "0.3.2";
 var SLEX_PROTOCOL_VERSION = "0.1";
 var SLEXKIT_COMPONENTS_VERSION = SLEXKIT_VERSION;
 function getSlexKitInfo() {

package/dist/slexkit.css

@@ -904,52 +904,6 @@ color-scheme: dark;
   box-sizing: border-box;
 }
 
-body[data-mobile-nav-open] {
-  overflow: hidden;
-  overscroll-behavior: contain;
-}
-
-#mobileNav {
-  --mobile-nav-backdrop-opacity: 0;
-  --mobile-nav-panel-translate: -100%;
-  pointer-events: none;
-}
-
-#mobileNav[data-open="true"] {
-  --mobile-nav-backdrop-opacity: 1;
-  --mobile-nav-panel-translate: 0px;
-  pointer-events: auto;
-}
-
-#mobileNav [data-mobile-nav-backdrop] {
-  opacity: var(--mobile-nav-backdrop-opacity);
-  touch-action: pan-y;
-  transition: opacity 180ms ease;
-}
-
-#mobileNav [data-mobile-nav-panel] {
-  transform: translateX(var(--mobile-nav-panel-translate));
-  touch-action: pan-y;
-  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
-  will-change: transform;
-}
-
-#mobileNav[data-dragging="true"] [data-mobile-nav-backdrop],
-#mobileNav[data-dragging="true"] [data-mobile-nav-panel] {
-  transition: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  #mobileNav [data-mobile-nav-backdrop],
-  #mobileNav [data-mobile-nav-panel] {
-    transition: none;
-  }
-}
-
-.slexkit-for-wrapper {
-  display: contents;
-}
-
 .slexkit-source-toolbar {
   display: flex;
   align-items: center;

package/dist/slexkit.js

@@ -396,19 +396,31 @@ function configureComponentScope(options) {
 function createComponentAccessor(read) {
   const subscribers = new Set;
   let current = read();
-  const accessor = () => current;
-  accessor.subscribe = (run) => {
-    subscribers.add(run);
-    run(current);
-    const stop = createEffect(() => {
+  let stopEffect;
+  const start = () => {
+    if (stopEffect)
+      return;
+    stopEffect = createEffect(() => {
       current = read();
-      for (const subscriber of subscribers)
+      for (const subscriber of Array.from(subscribers))
         subscriber(current);
       flushDom?.();
     });
+  };
+  const accessor = () => current;
+  accessor.subscribe = (run) => {
+    const wasIdle = subscribers.size === 0;
+    subscribers.add(run);
+    if (wasIdle)
+      start();
+    else
+      run(current);
     return () => {
       subscribers.delete(run);
-      stop();
+      if (subscribers.size === 0) {
+        stopEffect?.();
+        stopEffect = undefined;
+      }
     };
   };
   return accessor;
@@ -1259,9 +1271,10 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
   const renderer = getRenderer(type);
   if (!renderer)
     return;
-  const forWrapper = (container.ownerDocument || document).createElement("div");
-  forWrapper.className = "slexkit-for-wrapper";
-  container.appendChild(forWrapper);
+  const doc = container.ownerDocument || document;
+  const startAnchor = doc.createComment(`slexkit-for:${fullKey}:start`);
+  const endAnchor = doc.createComment(`slexkit-for:${fullKey}:end`);
+  container.append(startAnchor, endAnchor);
   const evalCtx = buildComponentEvalContext(g, components, componentTypes, api, forCtx);
   const items = createMemo(() => trackForCollection(evalRead(props.$for, evalCtx, ns, `${fullKey}:$for`)));
   const $keyProp = props.$key;
@@ -1274,8 +1287,10 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
     disposedSlots.add(slot);
     leavingSlots.delete(slot);
     callHook(g, name, "onUnmount");
-    disposeComponent(slot.el);
-    slot.el.remove();
+    if (slot.el) {
+      disposeComponent(slot.el);
+      slot.el.remove();
+    }
     if (slot.dispose)
       slot.dispose();
   };
@@ -1300,12 +1315,16 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
       }
     }
     for (const slot of deletedSlots) {
-      container.appendChild(slot.el);
       leavingSlots.add(slot);
+      if (!slot.el) {
+        disposeSlot(slot);
+        continue;
+      }
       applyLeaveAnimation(slot.el, slot.props, () => {
         disposeSlot(slot);
       });
     }
+    let cursor = startAnchor;
     arr.forEach((item, index) => {
       item = asReactiveValue(item, g);
       const keyVal = newKeys[index];
@@ -1333,20 +1352,22 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
         const indexSignal = createSignal(index);
         const revisionSignal = createSignal(0);
         slot = renderAndMountSlot(item, index, keyVal, indexSignal, revisionSignal, renderer, type, name, props, container, g, components, componentTypes, api, forCtx, ns, fullKey, options);
-        if (slot.el) {
-          applyEnterAnimation(slot.el, slot.props);
-          callHook(g, name, "onMount");
+        if (!slot.el) {
+          disposeSlot(slot);
+          return;
         }
+        applyEnterAnimation(slot.el, slot.props);
+        callHook(g, name, "onMount");
         slotMap.set(keyVal, slot);
       }
-      const refChild = forWrapper.children[index];
-      if (slot.el && refChild !== slot.el) {
-        forWrapper.insertBefore(slot.el, refChild ?? null);
+      const nextChild = cursor.nextSibling;
+      if (slot.el && nextChild !== slot.el) {
+        container.insertBefore(slot.el, nextChild ?? endAnchor);
+      }
+      if (slot.el) {
+        cursor = slot.el;
       }
     });
-    while (forWrapper.children.length > arr.length) {
-      forWrapper.lastChild.remove();
-    }
   });
   onCleanup(() => {
     for (const slot of Array.from(slotMap.values()))
@@ -1354,7 +1375,8 @@ function renderForNode(fullKey, props, container, g, components, componentTypes,
     slotMap.clear();
     for (const slot of Array.from(leavingSlots))
       disposeSlot(slot);
-    forWrapper.remove();
+    startAnchor.remove();
+    endAnchor.remove();
   });
 }
 function renderNormalNode(fullKey, props, container, g, components, componentTypes, api, forCtx, ns, options) {
@@ -1731,7 +1753,7 @@ ${parseSource}
 var parseSlexKitDsl = parseSlexSource;
 
 // src/version.ts
-var SLEXKIT_VERSION = "0.3.1";
+var SLEXKIT_VERSION = "0.3.2";
 var SLEX_PROTOCOL_VERSION = "0.1";
 var SLEXKIT_COMPONENTS_VERSION = SLEXKIT_VERSION;
 function getSlexKitInfo() {

package/dist/types/engine/types.d.ts

@@ -23,7 +23,7 @@ export type ForContext = {
 };
 export type ForSlot = {
     key: unknown;
-    el: HTMLElement;
+    el: HTMLElement | null;
     forCtx: ForContext;
     index: number;
     item: unknown;

package/dist/types/version.d.ts

@@ -1,6 +1,6 @@
-export declare const SLEXKIT_VERSION = "0.3.1";
+export declare const SLEXKIT_VERSION = "0.3.2";
 export declare const SLEX_PROTOCOL_VERSION = "0.1";
-export declare const SLEXKIT_COMPONENTS_VERSION = "0.3.1";
+export declare const SLEXKIT_COMPONENTS_VERSION = "0.3.2";
 export declare function getSlexKitInfo(): {
     version: string;
     protocolVersion: string;

package/dist/umd/slexkit.tooling.umd.js

@@ -493,19 +493,31 @@
   function createComponentAccessor(read) {
     const subscribers = new Set;
     let current = read();
-    const accessor = () => current;
-    accessor.subscribe = (run) => {
-      subscribers.add(run);
-      run(current);
-      const stop = createEffect(() => {
+    let stopEffect;
+    const start = () => {
+      if (stopEffect)
+        return;
+      stopEffect = createEffect(() => {
         current = read();
-        for (const subscriber of subscribers)
+        for (const subscriber of Array.from(subscribers))
           subscriber(current);
         flushDom?.();
       });
+    };
+    const accessor = () => current;
+    accessor.subscribe = (run) => {
+      const wasIdle = subscribers.size === 0;
+      subscribers.add(run);
+      if (wasIdle)
+        start();
+      else
+        run(current);
       return () => {
         subscribers.delete(run);
-        stop();
+        if (subscribers.size === 0) {
+          stopEffect?.();
+          stopEffect = undefined;
+        }
       };
     };
     return accessor;
@@ -1356,9 +1368,10 @@
     const renderer = getRenderer(type);
     if (!renderer)
       return;
-    const forWrapper = (container.ownerDocument || document).createElement("div");
-    forWrapper.className = "slexkit-for-wrapper";
-    container.appendChild(forWrapper);
+    const doc = container.ownerDocument || document;
+    const startAnchor = doc.createComment(`slexkit-for:${fullKey}:start`);
+    const endAnchor = doc.createComment(`slexkit-for:${fullKey}:end`);
+    container.append(startAnchor, endAnchor);
     const evalCtx = buildComponentEvalContext(g, components, componentTypes, api, forCtx);
     const items = createMemo(() => trackForCollection(evalRead(props.$for, evalCtx, ns, `${fullKey}:$for`)));
     const $keyProp = props.$key;
@@ -1371,8 +1384,10 @@
       disposedSlots.add(slot);
       leavingSlots.delete(slot);
       callHook(g, name, "onUnmount");
-      disposeComponent(slot.el);
-      slot.el.remove();
+      if (slot.el) {
+        disposeComponent(slot.el);
+        slot.el.remove();
+      }
       if (slot.dispose)
         slot.dispose();
     };
@@ -1397,12 +1412,16 @@
         }
       }
       for (const slot of deletedSlots) {
-        container.appendChild(slot.el);
         leavingSlots.add(slot);
+        if (!slot.el) {
+          disposeSlot(slot);
+          continue;
+        }
         applyLeaveAnimation(slot.el, slot.props, () => {
           disposeSlot(slot);
         });
       }
+      let cursor = startAnchor;
       arr.forEach((item, index) => {
         item = asReactiveValue(item, g);
         const keyVal = newKeys[index];
@@ -1430,20 +1449,22 @@
           const indexSignal = createSignal(index);
           const revisionSignal = createSignal(0);
           slot = renderAndMountSlot(item, index, keyVal, indexSignal, revisionSignal, renderer, type, name, props, container, g, components, componentTypes, api, forCtx, ns, fullKey, options);
-          if (slot.el) {
-            applyEnterAnimation(slot.el, slot.props);
-            callHook(g, name, "onMount");
+          if (!slot.el) {
+            disposeSlot(slot);
+            return;
           }
+          applyEnterAnimation(slot.el, slot.props);
+          callHook(g, name, "onMount");
           slotMap.set(keyVal, slot);
         }
-        const refChild = forWrapper.children[index];
-        if (slot.el && refChild !== slot.el) {
-          forWrapper.insertBefore(slot.el, refChild ?? null);
+        const nextChild = cursor.nextSibling;
+        if (slot.el && nextChild !== slot.el) {
+          container.insertBefore(slot.el, nextChild ?? endAnchor);
+        }
+        if (slot.el) {
+          cursor = slot.el;
         }
       });
-      while (forWrapper.children.length > arr.length) {
-        forWrapper.lastChild.remove();
-      }
     });
     onCleanup(() => {
       for (const slot of Array.from(slotMap.values()))
@@ -1451,7 +1472,8 @@
       slotMap.clear();
       for (const slot of Array.from(leavingSlots))
         disposeSlot(slot);
-      forWrapper.remove();
+      startAnchor.remove();
+      endAnchor.remove();
     });
   }
   function renderNormalNode(fullKey, props, container, g, components, componentTypes, api, forCtx, ns, options) {

package/dist/umd/slexkit.umd.js

@@ -499,19 +499,31 @@
   function createComponentAccessor(read) {
     const subscribers = new Set;
     let current = read();
-    const accessor = () => current;
-    accessor.subscribe = (run) => {
-      subscribers.add(run);
-      run(current);
-      const stop = createEffect(() => {
+    let stopEffect;
+    const start = () => {
+      if (stopEffect)
+        return;
+      stopEffect = createEffect(() => {
         current = read();
-        for (const subscriber of subscribers)
+        for (const subscriber of Array.from(subscribers))
           subscriber(current);
         flushDom?.();
       });
+    };
+    const accessor = () => current;
+    accessor.subscribe = (run) => {
+      const wasIdle = subscribers.size === 0;
+      subscribers.add(run);
+      if (wasIdle)
+        start();
+      else
+        run(current);
       return () => {
         subscribers.delete(run);
-        stop();
+        if (subscribers.size === 0) {
+          stopEffect?.();
+          stopEffect = undefined;
+        }
       };
     };
     return accessor;
@@ -1362,9 +1374,10 @@
     const renderer = getRenderer(type);
     if (!renderer)
       return;
-    const forWrapper = (container.ownerDocument || document).createElement("div");
-    forWrapper.className = "slexkit-for-wrapper";
-    container.appendChild(forWrapper);
+    const doc = container.ownerDocument || document;
+    const startAnchor = doc.createComment(`slexkit-for:${fullKey}:start`);
+    const endAnchor = doc.createComment(`slexkit-for:${fullKey}:end`);
+    container.append(startAnchor, endAnchor);
     const evalCtx = buildComponentEvalContext(g, components, componentTypes, api, forCtx);
     const items = createMemo(() => trackForCollection(evalRead(props.$for, evalCtx, ns, `${fullKey}:$for`)));
     const $keyProp = props.$key;
@@ -1377,8 +1390,10 @@
       disposedSlots.add(slot);
       leavingSlots.delete(slot);
       callHook(g, name, "onUnmount");
-      disposeComponent(slot.el);
-      slot.el.remove();
+      if (slot.el) {
+        disposeComponent(slot.el);
+        slot.el.remove();
+      }
       if (slot.dispose)
         slot.dispose();
     };
@@ -1403,12 +1418,16 @@
         }
       }
       for (const slot of deletedSlots) {
-        container.appendChild(slot.el);
         leavingSlots.add(slot);
+        if (!slot.el) {
+          disposeSlot(slot);
+          continue;
+        }
         applyLeaveAnimation(slot.el, slot.props, () => {
           disposeSlot(slot);
         });
       }
+      let cursor = startAnchor;
       arr.forEach((item, index) => {
         item = asReactiveValue(item, g);
         const keyVal = newKeys[index];
@@ -1436,20 +1455,22 @@
           const indexSignal = createSignal(index);
           const revisionSignal = createSignal(0);
           slot = renderAndMountSlot(item, index, keyVal, indexSignal, revisionSignal, renderer, type, name, props, container, g, components, componentTypes, api, forCtx, ns, fullKey, options);
-          if (slot.el) {
-            applyEnterAnimation(slot.el, slot.props);
-            callHook(g, name, "onMount");
+          if (!slot.el) {
+            disposeSlot(slot);
+            return;
           }
+          applyEnterAnimation(slot.el, slot.props);
+          callHook(g, name, "onMount");
           slotMap.set(keyVal, slot);
         }
-        const refChild = forWrapper.children[index];
-        if (slot.el && refChild !== slot.el) {
-          forWrapper.insertBefore(slot.el, refChild ?? null);
+        const nextChild = cursor.nextSibling;
+        if (slot.el && nextChild !== slot.el) {
+          container.insertBefore(slot.el, nextChild ?? endAnchor);
+        }
+        if (slot.el) {
+          cursor = slot.el;
         }
       });
-      while (forWrapper.children.length > arr.length) {
-        forWrapper.lastChild.remove();
-      }
     });
     onCleanup(() => {
       for (const slot of Array.from(slotMap.values()))
@@ -1457,7 +1478,8 @@
       slotMap.clear();
       for (const slot of Array.from(leavingSlots))
         disposeSlot(slot);
-      forWrapper.remove();
+      startAnchor.remove();
+      endAnchor.remove();
     });
   }
   function renderNormalNode(fullKey, props, container, g, components, componentTypes, api, forCtx, ns, options) {
@@ -1834,7 +1856,7 @@ ${parseSource}
   var parseSlexKitDsl = parseSlexSource;
 
   // src/version.ts
-  var SLEXKIT_VERSION = "0.3.1";
+  var SLEXKIT_VERSION = "0.3.2";
   var SLEX_PROTOCOL_VERSION = "0.1";
   var SLEXKIT_COMPONENTS_VERSION = SLEXKIT_VERSION;
   function getSlexKitInfo() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slexkit",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Zero-build, Markdown-friendly reactive UI runtime for AI output.",
   "author": "SlexKit contributors",
   "type": "module",

package/src/styles/layout.css

@@ -32,52 +32,6 @@
   box-sizing: border-box;
 }
 
-body[data-mobile-nav-open] {
-  overflow: hidden;
-  overscroll-behavior: contain;
-}
-
-#mobileNav {
-  --mobile-nav-backdrop-opacity: 0;
-  --mobile-nav-panel-translate: -100%;
-  pointer-events: none;
-}
-
-#mobileNav[data-open="true"] {
-  --mobile-nav-backdrop-opacity: 1;
-  --mobile-nav-panel-translate: 0px;
-  pointer-events: auto;
-}
-
-#mobileNav [data-mobile-nav-backdrop] {
-  opacity: var(--mobile-nav-backdrop-opacity);
-  touch-action: pan-y;
-  transition: opacity 180ms ease;
-}
-
-#mobileNav [data-mobile-nav-panel] {
-  transform: translateX(var(--mobile-nav-panel-translate));
-  touch-action: pan-y;
-  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
-  will-change: transform;
-}
-
-#mobileNav[data-dragging="true"] [data-mobile-nav-backdrop],
-#mobileNav[data-dragging="true"] [data-mobile-nav-panel] {
-  transition: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  #mobileNav [data-mobile-nav-backdrop],
-  #mobileNav [data-mobile-nav-panel] {
-    transition: none;
-  }
-}
-
-.slexkit-for-wrapper {
-  display: contents;
-}
-
 .slexkit-source-toolbar {
   display: flex;
   align-items: center;