diff --git a/.agents/skills/commit-make-pr/SKILL.md b/.agents/skills/commit-make-pr/SKILL.md
index c64eacf..5cb3bf5 100644
--- a/.agents/skills/commit-make-pr/SKILL.md
+++ b/.agents/skills/commit-make-pr/SKILL.md
@@ -19,7 +19,7 @@ Use this skill to finish repository work cleanly once code changes are ready. Fo
 - When Codex creates a commit, include this trailer in the commit message:
 
 ```text
-Co-authored-by: chatgpt-codex-connector[bot] <199175422+chatgpt-codex-connector[bot]@users.noreply.github.com>
+Co-authored-by: codex <codex@openai.com>
 ```
 
 - Add the trailer as part of the actual commit message, not as a separate note in the response.
diff --git a/.codex b/.codex
new file mode 100644
index 0000000..e69de29
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 0000000..28e35cd
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,15 @@
+# These are supported funding model platforms
+
+github: nakasyou # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+polar: # Replace with a single Polar username
+buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
+thanks_dev: # Replace with a single thanks.dev username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 0000000..1d748f1
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,60 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  id-token: write
+
+jobs:
+  quality:
+    name: Quality
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    concurrency:
+      group: ci-quality-${{ github.workflow }}-${{ github.ref }}
+      cancel-in-progress: true
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 1.3.10
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+
+      - name: Setup Rust
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: Cache Rust
+        uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: packages/eclipsa/compiler/rust
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Typecheck
+        run: bun run typecheck
+
+      - name: Lint
+        run: bun run lint
+
+      - name: Unit tests with coverage
+        run: bun run test:coverage
+
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v5
+        with:
+          use_oidc: true
+          fail_ci_if_error: true
diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
new file mode 100644
index 0000000..8a747cb
--- /dev/null
+++ b/.github/workflows/codeql.yml
@@ -0,0 +1,41 @@
+name: 'Code Quality: CodeQL'
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+permissions:
+  actions: read
+  contents: read
+  security-events: write
+
+jobs:
+  analyze:
+    name: Analyze (javascript-typescript)
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    concurrency:
+      group: codeql-${{ github.workflow }}-${{ github.ref }}
+      cancel-in-progress: true
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      # The Android Compose host introduces Kotlin sources, but the repository
+      # does not yet provision an Android SDK in CI. Keeping CodeQL scoped to
+      # JavaScript/TypeScript avoids breaking the default branch until a
+      # dedicated Android/Kotlin analysis job is added.
+      - name: Initialize CodeQL
+        uses: github/codeql-action/init@v4
+        with:
+          languages: javascript-typescript
+          build-mode: none
+          queries: security-and-quality
+
+      - name: Perform CodeQL Analysis
+        uses: github/codeql-action/analyze@v4
+        with:
+          category: /language:javascript-typescript
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 487ea53..934cbc2 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -11,6 +11,9 @@ on:
           - eclipsa
           - create-eclipsa
           - image
+          - content
+          - motion
+          - markdown
       release_type:
         description: 'Version bump type'
         required: true
@@ -108,6 +111,15 @@ jobs:
             image)
               package_dir="packages/image"
               ;;
+            content)
+              package_dir="packages/content"
+              ;;
+            motion)
+              package_dir="packages/motion"
+              ;;
+            markdown)
+              package_dir="packages/markdown"
+              ;;
             *)
               echo "Unsupported package: $PACKAGE_KEY"
               exit 1
@@ -115,15 +127,9 @@ jobs:
           esac
 
           package_json_path="$package_dir/package.json"
-          if [ "$PACKAGE_KEY" = "eclipsa" ]; then
-            publish_dir="$package_dir"
-            publish_package_json_path="$package_json_path"
-            build_command="bun run --filter eclipsa build:js"
-          else
-            publish_dir="$package_dir/dist"
-            publish_package_json_path="$publish_dir/package.json"
-            build_command="bun run --filter ./$package_dir build"
-          fi
+          publish_dir="$package_dir/dist"
+          publish_package_json_path="$publish_dir/package.json"
+          build_command="bun run --filter ./$package_dir build"
 
           if [ ! -r "$package_json_path" ]; then
             echo "package.json not found or not readable: $package_json_path"
@@ -165,16 +171,7 @@ jobs:
             exit 1
           fi
 
-      - name: Ensure workflow runs on branch
-        shell: bash
-        run: |
-          if [[ '${{ github.ref_type }}' != 'branch' ]]; then
-            echo "This workflow must run on a branch ref to push version updates."
-            echo "Current ref_type: ${{ github.ref_type }}"
-            exit 1
-          fi
-
-  build_eclipsa_bindings:
+  build_optimizer_bindings:
     if: ${{ inputs.package == 'eclipsa' }}
     needs: prepare
     runs-on: ${{ matrix.settings.host }}
@@ -184,31 +181,31 @@ jobs:
         settings:
           - host: macos-latest
             target: x86_64-apple-darwin
-            build: bunx @napi-rs/cli build --platform --release --manifest-path ./compiler/rust/Cargo.toml --package-json-path ./package.json --target-dir ./compiler/rust/target --output-dir ./compiler/native/generated --js-package-name eclipsa --target x86_64-apple-darwin
+            build: bun ./scripts/run-napi.ts build --platform --release --manifest-path ../eclipsa/compiler/rust/Cargo.toml --package-json-path ./package.json --target-dir ../eclipsa/compiler/rust/target --output-dir ./generated --js-package-name @eclipsa/optimizer --target x86_64-apple-darwin
           - host: macos-latest
             target: aarch64-apple-darwin
-            build: bunx @napi-rs/cli build --platform --release --manifest-path ./compiler/rust/Cargo.toml --package-json-path ./package.json --target-dir ./compiler/rust/target --output-dir ./compiler/native/generated --js-package-name eclipsa --target aarch64-apple-darwin
+            build: bun ./scripts/run-napi.ts build --platform --release --manifest-path ../eclipsa/compiler/rust/Cargo.toml --package-json-path ./package.json --target-dir ../eclipsa/compiler/rust/target --output-dir ./generated --js-package-name @eclipsa/optimizer --target aarch64-apple-darwin
           - host: windows-latest
             target: x86_64-pc-windows-msvc
-            build: bunx @napi-rs/cli build --platform --release --manifest-path ./compiler/rust/Cargo.toml --package-json-path ./package.json --target-dir ./compiler/rust/target --output-dir ./compiler/native/generated --js-package-name eclipsa --target x86_64-pc-windows-msvc
+            build: bun ./scripts/run-napi.ts build --platform --release --manifest-path ../eclipsa/compiler/rust/Cargo.toml --package-json-path ./package.json --target-dir ../eclipsa/compiler/rust/target --output-dir ./generated --js-package-name @eclipsa/optimizer --target x86_64-pc-windows-msvc
           - host: windows-latest
             target: aarch64-pc-windows-msvc
-            build: bunx @napi-rs/cli build --platform --release --manifest-path ./compiler/rust/Cargo.toml --package-json-path ./package.json --target-dir ./compiler/rust/target --output-dir ./compiler/native/generated --js-package-name eclipsa --target aarch64-pc-windows-msvc
+            build: bun ./scripts/run-napi.ts build --platform --release --manifest-path ../eclipsa/compiler/rust/Cargo.toml --package-json-path ./package.json --target-dir ../eclipsa/compiler/rust/target --output-dir ./generated --js-package-name @eclipsa/optimizer --target aarch64-pc-windows-msvc
           - host: ubuntu-latest
             target: x86_64-unknown-linux-gnu
-            build: bunx @napi-rs/cli build --platform --release --manifest-path ./compiler/rust/Cargo.toml --package-json-path ./package.json --target-dir ./compiler/rust/target --output-dir ./compiler/native/generated --js-package-name eclipsa --target x86_64-unknown-linux-gnu --use-napi-cross
+            build: bun ./scripts/run-napi.ts build --platform --release --manifest-path ../eclipsa/compiler/rust/Cargo.toml --package-json-path ./package.json --target-dir ../eclipsa/compiler/rust/target --output-dir ./generated --js-package-name @eclipsa/optimizer --target x86_64-unknown-linux-gnu --use-napi-cross
           - host: ubuntu-latest
             target: aarch64-unknown-linux-gnu
-            build: bunx @napi-rs/cli build --platform --release --manifest-path ./compiler/rust/Cargo.toml --package-json-path ./package.json --target-dir ./compiler/rust/target --output-dir ./compiler/native/generated --js-package-name eclipsa --target aarch64-unknown-linux-gnu --use-napi-cross
+            build: bun ./scripts/run-napi.ts build --platform --release --manifest-path ../eclipsa/compiler/rust/Cargo.toml --package-json-path ./package.json --target-dir ../eclipsa/compiler/rust/target --output-dir ./generated --js-package-name @eclipsa/optimizer --target aarch64-unknown-linux-gnu --use-napi-cross
           - host: ubuntu-latest
             target: x86_64-unknown-linux-musl
-            build: bunx @napi-rs/cli build --platform --release --manifest-path ./compiler/rust/Cargo.toml --package-json-path ./package.json --target-dir ./compiler/rust/target --output-dir ./compiler/native/generated --js-package-name eclipsa --target x86_64-unknown-linux-musl -x
+            build: bun ./scripts/run-napi.ts build --platform --release --manifest-path ../eclipsa/compiler/rust/Cargo.toml --package-json-path ./package.json --target-dir ../eclipsa/compiler/rust/target --output-dir ./generated --js-package-name @eclipsa/optimizer --target x86_64-unknown-linux-musl -x
           - host: ubuntu-latest
             target: aarch64-unknown-linux-musl
-            build: bunx @napi-rs/cli build --platform --release --manifest-path ./compiler/rust/Cargo.toml --package-json-path ./package.json --target-dir ./compiler/rust/target --output-dir ./compiler/native/generated --js-package-name eclipsa --target aarch64-unknown-linux-musl -x
+            build: bun ./scripts/run-napi.ts build --platform --release --manifest-path ../eclipsa/compiler/rust/Cargo.toml --package-json-path ./package.json --target-dir ../eclipsa/compiler/rust/target --output-dir ./generated --js-package-name @eclipsa/optimizer --target aarch64-unknown-linux-musl -x
           - host: ubuntu-latest
             target: wasm32-wasip1-threads
-            build: bunx @napi-rs/cli build --platform --release --manifest-path ./compiler/rust/Cargo.toml --package-json-path ./package.json --target-dir ./compiler/rust/target --output-dir ./compiler/native/generated --js-package-name eclipsa --target wasm32-wasip1-threads
+            build: bun ./scripts/run-napi.ts build --platform --release --manifest-path ../eclipsa/compiler/rust/Cargo.toml --package-json-path ./package.json --target-dir ../eclipsa/compiler/rust/target --output-dir ./generated --js-package-name @eclipsa/optimizer --target wasm32-wasip1-threads
     env:
       MACOSX_DEPLOYMENT_TARGET: '10.13'
 
@@ -256,32 +253,32 @@ jobs:
           const pkg = JSON.parse(fs.readFileSync(path, 'utf8'));
           pkg.version = version;
           fs.writeFileSync(path, JSON.stringify(pkg, null, 2) + '\n');
-          " 'packages/eclipsa/package.json' '${{ needs.prepare.outputs.version }}'
+          " 'packages/optimizer/package.json' '${{ needs.prepare.outputs.version }}'
 
       - name: Build binding
         shell: bash
-        working-directory: packages/eclipsa
+        working-directory: packages/optimizer
         run: ${{ matrix.settings.build }}
 
       - name: Verify WASI binding entry
         if: ${{ matrix.settings.target == 'wasm32-wasip1-threads' }}
         shell: bash
-        working-directory: packages/eclipsa
+        working-directory: packages/optimizer
         run: |
-          node -e "const binding = require('./compiler/native/generated/eclipsa.wasi.cjs'); if (typeof binding.compileClient !== 'function') { throw new Error('Expected compileClient export from WASI binding entry.'); }"
+          node -e "const binding = require('./generated/optimizer.wasi.cjs'); if (typeof binding.compileClient !== 'function') { throw new Error('Expected compileClient export from WASI binding entry.'); }"
 
       - name: Upload binding artifact
         uses: actions/upload-artifact@v4
         with:
           name: bindings-${{ matrix.settings.target }}
-          path: packages/eclipsa/compiler/native/generated/*
+          path: packages/optimizer/generated/*
           if-no-files-found: error
 
   publish_eclipsa:
     if: ${{ inputs.package == 'eclipsa' }}
     needs:
       - prepare
-      - build_eclipsa_bindings
+      - build_optimizer_bindings
     runs-on: ubuntu-latest
     permissions:
       contents: write
@@ -312,92 +309,212 @@ jobs:
       - name: Install dependencies
         run: bun install --frozen-lockfile
 
-      - name: Update package version for publish
+      - name: Update package versions for publish
         shell: bash
         run: |
           node -e "
           const fs = require('fs');
-          const path = process.argv[1];
-          const version = process.argv[2];
-          const pkg = JSON.parse(fs.readFileSync(path, 'utf8'));
-          pkg.version = version;
-          fs.writeFileSync(path, JSON.stringify(pkg, null, 2) + '\n');
-          " '${{ needs.prepare.outputs.package_json_path }}' '${{ needs.prepare.outputs.version }}'
+          const version = process.argv[1];
+          const paths = process.argv.slice(2);
+          for (const path of paths) {
+            const pkg = JSON.parse(fs.readFileSync(path, 'utf8'));
+            pkg.version = version;
+            fs.writeFileSync(path, JSON.stringify(pkg, null, 2) + '\n');
+          }
+          " '${{ needs.prepare.outputs.version }}' 'packages/eclipsa/package.json' 'packages/optimizer/package.json'
+
+      - name: Build optimizer JS package
+        shell: bash
+        run: bun run --filter @eclipsa/optimizer build:js
+
+      - name: Build eclipsa package
+        if: needs.prepare.outputs.build_command != ''
+        shell: bash
+        run: ${{ needs.prepare.outputs.build_command }}
 
-      - name: Build JS package
+      - name: Verify eclipsa dist package metadata
         shell: bash
-        run: bun run --filter eclipsa build:js
+        run: |
+          publish_package_json_path='${{ needs.prepare.outputs.publish_package_json_path }}'
+
+          if [ ! -r "$publish_package_json_path" ]; then
+            echo "dist package.json not found or not readable: $publish_package_json_path"
+            exit 1
+          fi
+
+          node -e "
+          const fs = require('fs');
+          const packageJsonPath = process.argv[1];
+          const expectedVersion = process.argv[2];
+          const pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+          if (pkg.private !== false) {
+            throw new Error(\`Expected private=false in \${packageJsonPath}\`);
+          }
+          if (pkg.version !== expectedVersion) {
+            throw new Error(\`Expected version \${expectedVersion} in \${packageJsonPath}, got \${pkg.version}\`);
+          }
+          if (!pkg.repository) {
+            throw new Error(\`Expected repository in \${packageJsonPath}\`);
+          }
+          if (!pkg.exports) {
+            throw new Error(\`Expected exports in \${packageJsonPath}\`);
+          }
+          " "$publish_package_json_path" '${{ needs.prepare.outputs.version }}'
 
       - name: Generate root WASI loader assets
         shell: bash
-        working-directory: packages/eclipsa
+        working-directory: packages/optimizer
         run: bun run build:native -- --target wasm32-wasip1-threads
 
       - name: Create npm package directories
         shell: bash
-        run: bun run --filter eclipsa create:npm-dirs
+        run: bun run --filter @eclipsa/optimizer create:npm-dirs
 
       - name: Download all binding artifacts
         uses: actions/download-artifact@v4
         with:
-          path: packages/eclipsa/artifacts
+          path: packages/optimizer/artifacts
           pattern: bindings-*
           merge-multiple: false
 
+      - name: Flatten downloaded binding artifacts
+        shell: bash
+        working-directory: packages/optimizer
+        run: bun ./scripts/prepare-downloaded-artifacts.ts
+
       - name: Sync npm package versions
         shell: bash
-        run: bun run --filter eclipsa version:napi
+        run: bun run --filter @eclipsa/optimizer version:napi
 
       - name: Hydrate npm package artifacts
         shell: bash
-        run: bun run --filter eclipsa artifacts
+        run: bun run --filter @eclipsa/optimizer artifacts
 
-      - name: Publish eclipsa package
+      - name: Publish optimizer native packages
         shell: bash
-        working-directory: packages/eclipsa
         run: |
-          publish_args=(npm publish --provenance --access public)
+          publish_args=(--provenance --access public)
 
           if [[ '${{ needs.prepare.outputs.npm_tag }}' != 'latest' ]]; then
             publish_args+=(--tag '${{ needs.prepare.outputs.npm_tag }}')
           fi
 
-          "${publish_args[@]}"
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          for package_dir in packages/optimizer/npm/*; do
+            if [[ ! -d "$package_dir" ]]; then
+              continue
+            fi
 
-      - name: Restore development manifest
-        shell: bash
-        run: bun run --filter eclipsa restore:manifest
+            package_json_path="$package_dir/package.json"
+            if [[ ! -f "$package_json_path" ]]; then
+              echo "Skipping package without package.json: $package_dir"
+              continue
+            fi
+
+            package_name="$(node -e "const fs = require('fs'); const pkg = JSON.parse(fs.readFileSync(process.argv[1], 'utf8')); process.stdout.write(pkg.name ?? '');" "$package_json_path")"
+            package_version="$(node -e "const fs = require('fs'); const pkg = JSON.parse(fs.readFileSync(process.argv[1], 'utf8')); process.stdout.write(pkg.version ?? '');" "$package_json_path")"
+
+            if [[ -z "$package_name" || -z "$package_version" ]]; then
+              echo "Skipping package with invalid name/version: $package_dir"
+              continue
+            fi
+
+            if npm view "${package_name}@${package_version}" version --json >/dev/null 2>&1; then
+              echo "Skipping already published package: ${package_name}@${package_version}"
+              continue
+            fi
 
-      - name: Commit and push version update
-        id: version_commit
+            npm publish "$package_dir" "${publish_args[@]}"
+          done
+
+      - name: Pack optimizer tarball
+        id: pack_optimizer
         shell: bash
+        working-directory: packages/optimizer
         run: |
-          file_path='${{ needs.prepare.outputs.package_json_path }}'
+          bun ./scripts/sync-package-manifest.ts publish
+          tarball_output="$(bun pm pack --quiet --destination "$RUNNER_TEMP")"
+          tarball_output="$(echo "$tarball_output" | tr -d '\r\n')"
+
+          if [[ "$tarball_output" = /* ]]; then
+            tarball_path="$tarball_output"
+          else
+            tarball_path="$RUNNER_TEMP/$tarball_output"
+          fi
+
+          if [[ ! -f "$tarball_path" ]]; then
+            echo "Tarball was not generated at expected path: $tarball_path"
+            exit 1
+          fi
+
+          echo "path=$tarball_path" >> "$GITHUB_OUTPUT"
 
-          git config user.name 'github-actions[bot]'
-          git config user.email '41898282+github-actions[bot]@users.noreply.github.com'
+      - name: Publish optimizer package
+        shell: bash
+        run: |
+          optimizer_package_json='packages/optimizer/package.json'
+          package_name="$(node -e "const fs = require('fs'); const pkg = JSON.parse(fs.readFileSync(process.argv[1], 'utf8')); process.stdout.write(pkg.name ?? '');" "$optimizer_package_json")"
+          package_version="$(node -e "const fs = require('fs'); const pkg = JSON.parse(fs.readFileSync(process.argv[1], 'utf8')); process.stdout.write(pkg.version ?? '');" "$optimizer_package_json")"
 
-          git add "$file_path"
+          if [[ -z "$package_name" || -z "$package_version" ]]; then
+            echo "Optimizer package.json is missing a valid name/version"
+            exit 1
+          fi
 
-          if git diff --cached --quiet; then
-            echo "No version updates to commit."
-            echo "sha=$(git rev-parse HEAD)" >> "$GITHUB_OUTPUT"
+          if npm view "${package_name}@${package_version}" version --json >/dev/null 2>&1; then
+            echo "Skipping already published package: ${package_name}@${package_version}"
             exit 0
           fi
 
-          git commit -m 'chore(release): bump eclipsa to v${{ needs.prepare.outputs.version }}'
-          git pull --rebase origin "${{ github.ref_name }}"
-          git push origin "HEAD:${{ github.ref_name }}"
-          echo "sha=$(git rev-parse HEAD)" >> "$GITHUB_OUTPUT"
+          publish_args=(npm publish '${{ steps.pack_optimizer.outputs.path }}' --provenance --access public)
+
+          if [[ '${{ needs.prepare.outputs.npm_tag }}' != 'latest' ]]; then
+            publish_args+=(--tag '${{ needs.prepare.outputs.npm_tag }}')
+          fi
+
+          "${publish_args[@]}"
+
+      - name: Pack eclipsa tarball
+        id: pack_eclipsa
+        shell: bash
+        run: |
+          publish_dir='${{ needs.prepare.outputs.publish_dir }}'
+          tarball_output="$(cd "$publish_dir" && bun pm pack --quiet --destination "$RUNNER_TEMP")"
+          tarball_output="$(echo "$tarball_output" | tr -d '\r\n')"
+
+          if [[ "$tarball_output" = /* ]]; then
+            tarball_path="$tarball_output"
+          else
+            tarball_path="$RUNNER_TEMP/$tarball_output"
+          fi
+
+          if [[ ! -f "$tarball_path" ]]; then
+            echo "Tarball was not generated at expected path: $tarball_path"
+            exit 1
+          fi
+
+          echo "path=$tarball_path" >> "$GITHUB_OUTPUT"
+
+      - name: Publish eclipsa package
+        shell: bash
+        run: |
+          publish_args=(npm publish '${{ steps.pack_eclipsa.outputs.path }}' --provenance --access public)
+
+          if [[ '${{ needs.prepare.outputs.npm_tag }}' != 'latest' ]]; then
+            publish_args+=(--tag '${{ needs.prepare.outputs.npm_tag }}')
+          fi
+
+          "${publish_args[@]}"
+
+      - name: Restore development manifest
+        shell: bash
+        run: bun run --filter @eclipsa/optimizer restore:manifest
 
       - name: Create release with generated notes
         shell: bash
         run: |
           gh release create '${{ needs.prepare.outputs.tag }}' \
             --generate-notes \
-            --target '${{ steps.version_commit.outputs.sha }}'
+            --target '${{ github.sha }}'
 
   publish_other:
     if: ${{ inputs.package != 'eclipsa' }}
@@ -508,31 +625,9 @@ jobs:
 
           "${publish_args[@]}"
 
-      - name: Commit and push version update
-        id: version_commit
-        shell: bash
-        run: |
-          file_path='${{ needs.prepare.outputs.package_json_path }}'
-
-          git config user.name 'github-actions[bot]'
-          git config user.email '41898282+github-actions[bot]@users.noreply.github.com'
-
-          git add "$file_path"
-
-          if git diff --cached --quiet; then
-            echo "No version updates to commit."
-            echo "sha=$(git rev-parse HEAD)" >> "$GITHUB_OUTPUT"
-            exit 0
-          fi
-
-          git commit -m 'chore(release): bump ${{ inputs.package }} to v${{ needs.prepare.outputs.version }}'
-          git pull --rebase origin "${{ github.ref_name }}"
-          git push origin "HEAD:${{ github.ref_name }}"
-          echo "sha=$(git rev-parse HEAD)" >> "$GITHUB_OUTPUT"
-
       - name: Create release with generated notes
         shell: bash
         run: |
           gh release create '${{ needs.prepare.outputs.tag }}' \
             --generate-notes \
-            --target '${{ steps.version_commit.outputs.sha }}'
+            --target '${{ github.sha }}'
diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml
new file mode 100644
index 0000000..9a8da9f
--- /dev/null
+++ b/.github/workflows/website.yml
@@ -0,0 +1,148 @@
+name: Website
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: read
+  issues: write
+  pull-requests: write
+
+jobs:
+  deploy:
+    name: Deploy Website
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+    concurrency:
+      group: website-${{ github.event.pull_request.number || github.ref }}
+      cancel-in-progress: true
+    if: ${{ github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.pull_request.head.repo.full_name == github.repository) }}
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 1.3.10
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+
+      - name: Setup Rust
+        uses: dtolnay/rust-toolchain@stable
+
+      - name: Cache Rust
+        uses: Swatinem/rust-cache@v2
+        with:
+          workspaces: packages/eclipsa/compiler/rust
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Build optimizer native artifacts
+        run: bun run --filter @eclipsa/optimizer build:native:dev
+
+      - name: Build website
+        run: bun run --cwd docs build
+
+      - name: Resolve preview metadata
+        if: ${{ github.event_name == 'pull_request' }}
+        id: preview
+        shell: bash
+        run: |
+          echo "alias=pr-${{ github.event.pull_request.number }}" >> "$GITHUB_OUTPUT"
+
+      - name: Deploy preview
+        if: ${{ github.event_name == 'pull_request' }}
+        id: deploy_preview
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          packageManager: bun
+          workingDirectory: docs
+          command: versions upload --preview-alias ${{ steps.preview.outputs.alias }}
+
+      - name: Comment preview URL
+        if: ${{ github.event_name == 'pull_request' }}
+        uses: actions/github-script@v7
+        env:
+          PREVIEW_ALIAS: ${{ steps.preview.outputs.alias }}
+          WORKER_NAME: eclipsa
+          WRANGLER_OUTPUT: ${{ steps.deploy_preview.outputs.command-output }}
+          WRANGLER_STDERR: ${{ steps.deploy_preview.outputs.command-stderr }}
+        with:
+          script: |
+            const escapeRegex = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+            const alias = process.env.PREVIEW_ALIAS
+            const workerName = process.env.WORKER_NAME
+            const wranglerText = [process.env.WRANGLER_OUTPUT, process.env.WRANGLER_STDERR]
+              .filter(Boolean)
+              .join('\n')
+
+            const aliasPattern = new RegExp(
+              `https://${escapeRegex(alias)}-${escapeRegex(workerName)}\\.[^\\s)]+\\.workers\\.dev`,
+              'i',
+            )
+            const previewUrl =
+              wranglerText.match(aliasPattern)?.[0] ??
+              wranglerText.match(/https:\/\/[a-z0-9-]+(?:\.[a-z0-9-]+)*\.workers\.dev/gi)?.[0]
+
+            if (!previewUrl) {
+              throw new Error(`Could not find preview URL in Wrangler output:\n${wranglerText}`)
+            }
+
+            const marker = '<!-- eclipsa-website-preview -->'
+            const body = [
+              marker,
+              `Website preview: ${previewUrl}`,
+              '',
+              `Commit: ${context.payload.pull_request.head.sha.slice(0, 7)}`,
+            ].join('\n')
+
+            const { owner, repo } = context.repo
+            const issue_number = context.issue.number
+            const comments = await github.paginate(github.rest.issues.listComments, {
+              owner,
+              repo,
+              issue_number,
+              per_page: 100,
+            })
+            const existing = comments.find(
+              (comment) =>
+                comment.user?.login === 'github-actions[bot]' && comment.body?.includes(marker),
+            )
+
+            if (existing) {
+              await github.rest.issues.updateComment({
+                owner,
+                repo,
+                comment_id: existing.id,
+                body,
+              })
+              return
+            }
+
+            await github.rest.issues.createComment({
+              owner,
+              repo,
+              issue_number,
+              body,
+            })
+
+      - name: Deploy production
+        if: ${{ github.event_name == 'push' }}
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          packageManager: bun
+          workingDirectory: docs
+          command: deploy
diff --git a/.gitignore b/.gitignore
index 29378c2..ce634fc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,10 +1,17 @@
 # Dependencies and build outputs
 node_modules
 dist
+.eclipsa
 target
+**/.build
+**/.swiftpm
+Package.resolved
 packages/eclipsa/compiler/native/generated
 packages/eclipsa/npm
 packages/eclipsa/artifacts
+packages/optimizer/generated
+packages/optimizer/npm
+packages/optimizer/artifacts
 
 # Tool caches
 .vite
@@ -17,11 +24,16 @@ coverage
 .env.*
 !.env.example
 
-# Temporary editor/OS files
+# Local editor/IDE files
 .DS_Store
+.vscode
+.idea
 *.swp
 *.swo
 *.tmp
+*.xcuserstate
+DerivedData
+xcuserdata
 
 # Test artifacts
 playwright-report
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 73d2f17..79b2f2d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,6 +4,6 @@
     "editor.defaultFormatter": "oxc.oxc-vscode"
   },
   "[typescriptreact]": {
-    "editor.defaultFormatter": "oxc.oxc-vscode"
+    "editor.defaultFormatter": "vscode.typescript-language-features"
   }
 }
diff --git a/AGENTS.md b/AGENTS.md
index 3961cfb..65cb7ea 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -5,33 +5,25 @@ This file applies to the whole repository.
 ## Overview
 
 - `packages/eclipsa` is the framework package.
-- `example` is the integration app used to verify dev, SSR, build, and resume behavior.
+- `e2e` is the integration app used to verify dev, SSR, build, and resume behavior.
 - `.contexts/` is reference-only. Do not copy code, tests, comments, names, or wire formats from it.
 
 ## Working Rules
 
 - Prefer `bun` and workspace scripts from the repository root.
-- Do not edit generated output under `dist/`.
-- Do not edit dependency contents under `node_modules/`.
 - Keep resumable behavior and DOM-compiled client behavior aligned. Avoid reintroducing route-level full-body hydration.
 - You have to create a new test when you fix a bug or add a feature.
 - This project is before alpha, so any breaking change is allowed.
 - You have to remove dead code when you change a way to do something.
+- Do not fear large-scale changes. If the change is a good one, it is welcomed. See it through to the end, regardless of the cost. Make changes that prioritize long-term costs over short-term ones.
+- These rules can be broken if a user permits it.
+- 極力 docs/e2e ではなくランタイムのバグとして直す。ドキュメント化されていないのにあきらかに React/Solid と同じノリで書いているのに動かないならフレームワークの問題、明らかに一般的なフレームワークで動かないまたは明文化されている禁じられた書き方をしているのなら docs/e2e の問題
+- Before finishing a task, run `vp lint`, `vp fmt`, and `vp run typecheck` and run test to keep the codebase clean.
 
 ## Common Commands
 
 - `bun run dev`
 - `bun run build`
 - `bun run test`
+- `bun run test:e2e`
 - `bun typecheck`
-
-## Directory Guide
-
-- `example/`: app-level verification target
-- `packages/eclipsa/core/`: runtime, resume, signals, SSR payloads
-- `packages/eclipsa/jsx/`: JSX object model and SSR-side rendering glue
-- `packages/eclipsa/compiler/analyze/`: resumable symbol extraction and compile-time analysis
-- `packages/eclipsa/compiler/client/`: client DOM code generation
-- `packages/eclipsa/compiler/ssr/`: SSR JSX runtime code generation
-- `packages/eclipsa/compiler/shared/`: compiler utilities shared across stages
-- `packages/eclipsa/vite/`: dev server, symbol loading, build integration
diff --git a/README.md b/README.md
index 7c0907d..51b5033 100644
--- a/README.md
+++ b/README.md
@@ -1,38 +1,43 @@
-# eclipsa
+# <img src="./docs/eclipsa.svg" align="right" width="128" alt=""> eclipsa
 
-<img src="./docs/eclipsa.svg" align="right" width="128">
+[![npm](https://img.shields.io/npm/v/eclipsa)](https://www.npmjs.com/package/eclipsa)
+[![codecov](https://codecov.io/github/pnsk-lab/eclipsa/graph/badge.svg)](https://codecov.io/github/pnsk-lab/eclipsa)
+[![Ask DeepWiki](https://deepwiki.com/badge.svg)](https://deepwiki.com/pnsk-lab/eclipsa)
 
 eclipsa is a frontend framework, built on Vite Environment API and Hono.
 
-## Development
+```tsx
+// app/+page.tsx
+import { useSignal } from 'eclipsa'
 
-```bash
-bun install
-bun run dev
+export default function Page() {
+  const count = useSignal(0)
+
+  return <button onClick={() => count.value++}>
+    Count: {count.value]
+  </button>
+}
 ```
 
-## Build
+## Quick Start
 
 ```bash
-bun run pack
+npm create eclipsa@latest
+# or use the package manager you like
 ```
 
-The publishable packages use package-local `vite.config.ts` files with
-`vite-plus` `pack`, emit declarations into `dist/`, and generate a
-publish-ready `dist/package.json` from package-local `publishConfig`.
+## Skills
 
-## Docs Deploy
+eclipsa has a agent skills:
 
 ```bash
-cd docs
-bun run deploy
+npx skills add pnsk-lab/eclipsa/skills
 ```
 
-This deploys `docs/dist/client` with Cloudflare Workers Static Assets using
-[`docs/wrangler.jsonc`](/home/nakasyou/eclipsa/docs/wrangler.jsonc).
-
-## Test
+## Features
 
-```bash
-bun run test
-```
+- 🚥 Signal APIs like [preact](https://preactjs.com/guide/v10/signals/), [Qwik](https://qwik.dev/) and [Vue](https://vuejs.org)
+- ▶️ Resumability like [Qwik](https://qwik.dev/)
+- 🔍 Fine-grained Reactivity like [Solid.js](https://www.solidjs.com/) and [Svelte](https://svelte.dev/)
+- 🏎️ JSX Compilation like [Solid.js](https://www.solidjs.com/)
+- ✏️ Content Management System like [Astro](https://astro.build/)
diff --git a/benchmarks/README.md b/benchmarks/README.md
new file mode 100644
index 0000000..77d4acf
--- /dev/null
+++ b/benchmarks/README.md
@@ -0,0 +1,39 @@
+# benchmarks
+
+Build the benchmark fixtures first:
+
+```bash
+bun run build
+# or from the repo root
+bun run benchmark:build
+```
+
+Run on Bun:
+
+```bash
+bun run bench:bun
+# or from the repo root
+bun run benchmark:bun
+```
+
+Run on Node.js:
+
+```bash
+node ./benchmark.js
+```
+
+Run on Deno:
+
+```bash
+deno run --import-map=./deno.import-map.json --allow-read --allow-env --allow-sys --node-modules-dir=auto ./benchmark.js
+```
+
+You can also use the package scripts:
+
+```bash
+bun run bench:node
+bun run bench:deno
+# or from the repo root
+bun run benchmark:node
+bun run benchmark:deno
+```
diff --git a/benchmarks/apps/astro/.astro/content.d.ts b/benchmarks/apps/astro/.astro/content.d.ts
new file mode 100644
index 0000000..5a3ee1f
--- /dev/null
+++ b/benchmarks/apps/astro/.astro/content.d.ts
@@ -0,0 +1,150 @@
+declare module 'astro:content' {
+  export interface RenderResult {
+    Content: import('astro/runtime/server/index.js').AstroComponentFactory
+    headings: import('astro').MarkdownHeading[]
+    remarkPluginFrontmatter: Record<string, any>
+  }
+  interface Render {
+    '.md': Promise<RenderResult>
+  }
+
+  export interface RenderedContent {
+    html: string
+    metadata?: {
+      imagePaths: Array<string>
+      [key: string]: unknown
+    }
+  }
+
+  type Flatten<T> = T extends { [K: string]: infer U } ? U : never
+
+  export type CollectionKey = keyof DataEntryMap
+  export type CollectionEntry<C extends CollectionKey> = Flatten<DataEntryMap[C]>
+
+  type AllValuesOf<T> = T extends any ? T[keyof T] : never
+
+  export type ReferenceDataEntry<
+    C extends CollectionKey,
+    E extends keyof DataEntryMap[C] = string,
+  > = {
+    collection: C
+    id: E
+  }
+
+  export type ReferenceLiveEntry<C extends keyof LiveContentConfig['collections']> = {
+    collection: C
+    id: string
+  }
+
+  export function getCollection<C extends keyof DataEntryMap, E extends CollectionEntry<C>>(
+    collection: C,
+    filter?: (entry: CollectionEntry<C>) => entry is E,
+  ): Promise<E[]>
+  export function getCollection<C extends keyof DataEntryMap>(
+    collection: C,
+    filter?: (entry: CollectionEntry<C>) => unknown,
+  ): Promise<CollectionEntry<C>[]>
+
+  export function getLiveCollection<C extends keyof LiveContentConfig['collections']>(
+    collection: C,
+    filter?: LiveLoaderCollectionFilterType<C>,
+  ): Promise<
+    import('astro').LiveDataCollectionResult<LiveLoaderDataType<C>, LiveLoaderErrorType<C>>
+  >
+
+  export function getEntry<
+    C extends keyof DataEntryMap,
+    E extends keyof DataEntryMap[C] | (string & {}),
+  >(
+    entry: ReferenceDataEntry<C, E>,
+  ): E extends keyof DataEntryMap[C]
+    ? Promise<DataEntryMap[C][E]>
+    : Promise<CollectionEntry<C> | undefined>
+  export function getEntry<
+    C extends keyof DataEntryMap,
+    E extends keyof DataEntryMap[C] | (string & {}),
+  >(
+    collection: C,
+    id: E,
+  ): E extends keyof DataEntryMap[C]
+    ? string extends keyof DataEntryMap[C]
+      ? Promise<DataEntryMap[C][E]> | undefined
+      : Promise<DataEntryMap[C][E]>
+    : Promise<CollectionEntry<C> | undefined>
+  export function getLiveEntry<C extends keyof LiveContentConfig['collections']>(
+    collection: C,
+    filter: string | LiveLoaderEntryFilterType<C>,
+  ): Promise<import('astro').LiveDataEntryResult<LiveLoaderDataType<C>, LiveLoaderErrorType<C>>>
+
+  /** Resolve an array of entry references from the same collection */
+  export function getEntries<C extends keyof DataEntryMap>(
+    entries: ReferenceDataEntry<C, keyof DataEntryMap[C]>[],
+  ): Promise<CollectionEntry<C>[]>
+
+  export function render<C extends keyof DataEntryMap>(
+    entry: DataEntryMap[C][string],
+  ): Promise<RenderResult>
+
+  export function reference<
+    C extends
+      | keyof DataEntryMap
+      // Allow generic `string` to avoid excessive type errors in the config
+      // if `dev` is not running to update as you edit.
+      // Invalid collection names will be caught at build time.
+      | (string & {}),
+  >(
+    collection: C,
+  ): import('astro/zod').ZodPipe<
+    import('astro/zod').ZodString,
+    import('astro/zod').ZodTransform<
+      C extends keyof DataEntryMap
+        ? {
+            collection: C
+            id: string
+          }
+        : never,
+      string
+    >
+  >
+
+  type ReturnTypeOrOriginal<T> = T extends (...args: any[]) => infer R ? R : T
+  type InferEntrySchema<C extends keyof DataEntryMap> = import('astro/zod').infer<
+    ReturnTypeOrOriginal<Required<ContentConfig['collections'][C]>['schema']>
+  >
+  type ExtractLoaderConfig<T> = T extends { loader: infer L } ? L : never
+  type InferLoaderSchema<
+    C extends keyof DataEntryMap,
+    L = ExtractLoaderConfig<ContentConfig['collections'][C]>,
+  > = L extends { schema: import('astro/zod').ZodSchema }
+    ? import('astro/zod').infer<L['schema']>
+    : any
+
+  type DataEntryMap = {}
+
+  type ExtractLoaderTypes<T> = T extends import('astro/loaders').LiveLoader<
+    infer TData,
+    infer TEntryFilter,
+    infer TCollectionFilter,
+    infer TError
+  >
+    ? { data: TData; entryFilter: TEntryFilter; collectionFilter: TCollectionFilter; error: TError }
+    : { data: never; entryFilter: never; collectionFilter: never; error: never }
+  type ExtractEntryFilterType<T> = ExtractLoaderTypes<T>['entryFilter']
+  type ExtractCollectionFilterType<T> = ExtractLoaderTypes<T>['collectionFilter']
+  type ExtractErrorType<T> = ExtractLoaderTypes<T>['error']
+
+  type LiveLoaderDataType<C extends keyof LiveContentConfig['collections']> =
+    LiveContentConfig['collections'][C]['schema'] extends undefined
+      ? ExtractDataType<LiveContentConfig['collections'][C]['loader']>
+      : import('astro/zod').infer<Exclude<LiveContentConfig['collections'][C]['schema'], undefined>>
+  type LiveLoaderEntryFilterType<C extends keyof LiveContentConfig['collections']> =
+    ExtractEntryFilterType<LiveContentConfig['collections'][C]['loader']>
+  type LiveLoaderCollectionFilterType<C extends keyof LiveContentConfig['collections']> =
+    ExtractCollectionFilterType<LiveContentConfig['collections'][C]['loader']>
+  type LiveLoaderErrorType<C extends keyof LiveContentConfig['collections']> = ExtractErrorType<
+    LiveContentConfig['collections'][C]['loader']
+  >
+
+  export type ContentConfig = never
+  export type LiveContentConfig = never
+}
diff --git a/benchmarks/apps/astro/.astro/types.d.ts b/benchmarks/apps/astro/.astro/types.d.ts
new file mode 100644
index 0000000..92baac6
--- /dev/null
+++ b/benchmarks/apps/astro/.astro/types.d.ts
@@ -0,0 +1,2 @@
+import 'astro/client'
+import './content.d.ts'
diff --git a/benchmarks/apps/astro/astro.config.mjs b/benchmarks/apps/astro/astro.config.mjs
new file mode 100644
index 0000000..5fb5828
--- /dev/null
+++ b/benchmarks/apps/astro/astro.config.mjs
@@ -0,0 +1,9 @@
+import { defineConfig } from 'astro/config'
+import node from '@astrojs/node'
+
+export default defineConfig({
+  output: 'server',
+  adapter: node({
+    mode: 'middleware',
+  }),
+})
diff --git a/benchmarks/apps/astro/package.json b/benchmarks/apps/astro/package.json
new file mode 100644
index 0000000..a917aff
--- /dev/null
+++ b/benchmarks/apps/astro/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "benchmarks-astro",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "astro build"
+  },
+  "dependencies": {
+    "@astrojs/node": "^10.0.4",
+    "astro": "^6.1.4"
+  }
+}
diff --git a/benchmarks/apps/astro/render.js b/benchmarks/apps/astro/render.js
new file mode 100644
index 0000000..34d3161
--- /dev/null
+++ b/benchmarks/apps/astro/render.js
@@ -0,0 +1,27 @@
+import path from 'node:path'
+import { readdirSync, readFileSync } from 'node:fs'
+import { fileURLToPath, pathToFileURL } from 'node:url'
+import { experimental_AstroContainer } from 'astro/container'
+
+const renderTarget = '/src/pages/index.astro'
+const chunksDir = fileURLToPath(new URL('./dist/server/chunks/', import.meta.url))
+const pageChunkPath = readdirSync(chunksDir)
+  .sort()
+  .map((entry) => path.join(chunksDir, entry))
+  .find((entry) => {
+    const source = readFileSync(entry, 'utf8')
+    return source.includes(renderTarget) && source.includes('export { page }')
+  })
+
+if (!pageChunkPath) {
+  throw new Error(`Unable to locate the compiled Astro page chunk for ${renderTarget}.`)
+}
+
+const pageModuleFactory = (await import(pathToFileURL(pageChunkPath).href)).page
+const Page = pageModuleFactory().default
+const container = await experimental_AstroContainer.create()
+
+export const render = async () => {
+  const html = await container.renderToString(Page)
+  return html.length
+}
diff --git a/benchmarks/apps/astro/src/pages/index.astro b/benchmarks/apps/astro/src/pages/index.astro
new file mode 100644
index 0000000..79003b4
--- /dev/null
+++ b/benchmarks/apps/astro/src/pages/index.astro
@@ -0,0 +1,14 @@
+---
+import { createData } from '../../../../data'
+
+const items = createData()
+---
+
+<div>
+  {items.map((item) => (
+    <div>
+      <h3>{item.name}</h3>
+      <p>{item.value}</p>
+    </div>
+  ))}
+</div>
diff --git a/benchmarks/apps/eclipsa/app/+client.dev.tsx b/benchmarks/apps/eclipsa/app/+client.dev.tsx
new file mode 100644
index 0000000..698439c
--- /dev/null
+++ b/benchmarks/apps/eclipsa/app/+client.dev.tsx
@@ -0,0 +1,3 @@
+import { resumeContainer } from 'eclipsa'
+
+resumeContainer(document)
diff --git a/benchmarks/apps/eclipsa/app/+page.tsx b/benchmarks/apps/eclipsa/app/+page.tsx
new file mode 100644
index 0000000..4f2629a
--- /dev/null
+++ b/benchmarks/apps/eclipsa/app/+page.tsx
@@ -0,0 +1,14 @@
+import { createData } from '../../../data'
+
+export default () => {
+  return (
+    <div>
+      {createData().map((item) => (
+        <div key={item.id}>
+          <h3>{item.name}</h3>
+          <p>{item.value}</p>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/benchmarks/apps/eclipsa/app/+server-entry.ts b/benchmarks/apps/eclipsa/app/+server-entry.ts
new file mode 100644
index 0000000..686f2bb
--- /dev/null
+++ b/benchmarks/apps/eclipsa/app/+server-entry.ts
@@ -0,0 +1,5 @@
+import { Hono } from 'hono'
+
+const app = new Hono()
+
+export default app
diff --git a/benchmarks/apps/eclipsa/app/+ssr-root.tsx b/benchmarks/apps/eclipsa/app/+ssr-root.tsx
new file mode 100644
index 0000000..4832b5a
--- /dev/null
+++ b/benchmarks/apps/eclipsa/app/+ssr-root.tsx
@@ -0,0 +1,14 @@
+import type { SSRRootProps } from 'eclipsa'
+
+export default function Root(props: SSRRootProps) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        {props.head}
+      </head>
+      <body>{props.children}</body>
+    </html>
+  )
+}
diff --git a/benchmarks/apps/eclipsa/app/vite-env.d.ts b/benchmarks/apps/eclipsa/app/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/benchmarks/apps/eclipsa/app/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/benchmarks/apps/eclipsa/package.json b/benchmarks/apps/eclipsa/package.json
new file mode 100644
index 0000000..704fa7f
--- /dev/null
+++ b/benchmarks/apps/eclipsa/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "eclipsa",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "start": "node dist/server/index.mjs",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "hono": "^4.6.4"
+  },
+  "devDependencies": {
+    "@types/node": "^24.5.2",
+    "typescript": "^5.9.2",
+    "vite": "latest"
+  }
+}
diff --git a/benchmarks/apps/eclipsa/render.js b/benchmarks/apps/eclipsa/render.js
new file mode 100644
index 0000000..4684292
--- /dev/null
+++ b/benchmarks/apps/eclipsa/render.js
@@ -0,0 +1,7 @@
+import { renderSSRAsync } from '../../../packages/eclipsa/dist/mod.mjs'
+import Page from './dist/ssr/entries/route___page.mjs'
+
+export const render = async () => {
+  const { html } = await renderSSRAsync(Page)
+  return html.length
+}
diff --git a/benchmarks/apps/eclipsa/tsconfig.json b/benchmarks/apps/eclipsa/tsconfig.json
new file mode 100644
index 0000000..1bd962d
--- /dev/null
+++ b/benchmarks/apps/eclipsa/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "eclipsa",
+    "paths": {
+      "eclipsa": ["../../../packages/eclipsa/mod.ts"],
+      "eclipsa/client": ["../../../packages/eclipsa/core/client/mod.ts"],
+      "eclipsa/dev-client": ["../../../packages/eclipsa/core/dev-client/mod.ts"],
+      "eclipsa/internal": ["../../../packages/eclipsa/core/internal.ts"],
+      "eclipsa/jsx": ["../../../packages/eclipsa/jsx/mod.ts"],
+      "eclipsa/jsx-dev-runtime": ["../../../packages/eclipsa/jsx/jsx-dev-runtime.ts"],
+      "eclipsa/jsx-runtime": ["../../../packages/eclipsa/jsx/jsx-runtime.ts"],
+      "eclipsa/prod-client": ["../../../packages/eclipsa/core/prod-client/mod.ts"],
+      "eclipsa/vite": ["../../../packages/eclipsa/vite/mod.ts"]
+    },
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["node"]
+  },
+  "include": ["./**/*.ts", "./**/*.tsx", "./**/*.d.ts"]
+}
diff --git a/benchmarks/apps/eclipsa/vite.config.ts b/benchmarks/apps/eclipsa/vite.config.ts
new file mode 100644
index 0000000..e39675c
--- /dev/null
+++ b/benchmarks/apps/eclipsa/vite.config.ts
@@ -0,0 +1,51 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vite'
+import { eclipsa } from '../../../packages/eclipsa/vite/mod.ts'
+
+const rootDir = path.dirname(fileURLToPath(import.meta.url))
+const eclipsaPackageDir = path.resolve(rootDir, '../../../packages/eclipsa')
+
+export default defineConfig({
+  appType: 'custom',
+  build: {
+    rolldownOptions: {
+      input: './app/index.ts',
+    },
+  },
+  resolve: {
+    alias: [
+      { find: /^eclipsa$/, replacement: path.join(eclipsaPackageDir, 'mod.ts') },
+      {
+        find: /^eclipsa\/client$/,
+        replacement: path.join(eclipsaPackageDir, 'core/client/mod.ts'),
+      },
+      {
+        find: /^eclipsa\/dev-client$/,
+        replacement: path.join(eclipsaPackageDir, 'core/dev-client/mod.ts'),
+      },
+      {
+        find: /^eclipsa\/internal$/,
+        replacement: path.join(eclipsaPackageDir, 'core/internal.ts'),
+      },
+      {
+        find: /^eclipsa\/jsx$/,
+        replacement: path.join(eclipsaPackageDir, 'jsx/mod.ts'),
+      },
+      {
+        find: /^eclipsa\/jsx-dev-runtime$/,
+        replacement: path.join(eclipsaPackageDir, 'jsx/jsx-dev-runtime.ts'),
+      },
+      {
+        find: /^eclipsa\/jsx-runtime$/,
+        replacement: path.join(eclipsaPackageDir, 'jsx/jsx-runtime.ts'),
+      },
+      {
+        find: /^eclipsa\/prod-client$/,
+        replacement: path.join(eclipsaPackageDir, 'core/prod-client/mod.ts'),
+      },
+      { find: /^eclipsa\/vite$/, replacement: path.join(eclipsaPackageDir, 'vite/mod.ts') },
+    ],
+  },
+  plugins: [eclipsa()],
+})
diff --git a/benchmarks/apps/hono/package.json b/benchmarks/apps/hono/package.json
new file mode 100644
index 0000000..781f2f7
--- /dev/null
+++ b/benchmarks/apps/hono/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "benchmarks-hono",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build --ssr"
+  },
+  "dependencies": {
+    "hono": "^4.10.4",
+    "vite": "^8.0.5"
+  }
+}
diff --git a/benchmarks/apps/hono/render.js b/benchmarks/apps/hono/render.js
new file mode 100644
index 0000000..e40257f
--- /dev/null
+++ b/benchmarks/apps/hono/render.js
@@ -0,0 +1 @@
+export { render } from './dist/main.js'
diff --git a/benchmarks/apps/hono/src/App.js b/benchmarks/apps/hono/src/App.js
new file mode 100644
index 0000000..a447096
--- /dev/null
+++ b/benchmarks/apps/hono/src/App.js
@@ -0,0 +1,15 @@
+import { html } from 'hono/html'
+import { createData } from '../../../data'
+
+export const App = () => html`
+  <div>
+    ${createData().map(
+      (item) => html`
+      <div>
+        <h3>${item.name}</h3>
+        <p>${item.value}</p>
+      </div>
+    `,
+    )}
+  </div>
+`
diff --git a/benchmarks/apps/hono/src/main.js b/benchmarks/apps/hono/src/main.js
new file mode 100644
index 0000000..19929f2
--- /dev/null
+++ b/benchmarks/apps/hono/src/main.js
@@ -0,0 +1,6 @@
+import { App } from './App.js'
+
+export async function render() {
+  const html = App().toString()
+  return html.length
+}
diff --git a/benchmarks/apps/hono/vite.config.ts b/benchmarks/apps/hono/vite.config.ts
new file mode 100644
index 0000000..1a20f2a
--- /dev/null
+++ b/benchmarks/apps/hono/vite.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    rolldownOptions: {
+      input: './src/main.js',
+    },
+  },
+})
diff --git a/benchmarks/apps/qwik/.gitignore b/benchmarks/apps/qwik/.gitignore
new file mode 100644
index 0000000..13cd1fa
--- /dev/null
+++ b/benchmarks/apps/qwik/.gitignore
@@ -0,0 +1 @@
+server
\ No newline at end of file
diff --git a/benchmarks/apps/qwik/package.json b/benchmarks/apps/qwik/package.json
new file mode 100644
index 0000000..b20c878
--- /dev/null
+++ b/benchmarks/apps/qwik/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "benchmarks-qwik",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build && vite build --ssr"
+  },
+  "dependencies": {
+    "@builder.io/qwik": "^1.19.2",
+    "vite": "^8.0.5"
+  }
+}
diff --git a/benchmarks/apps/qwik/render.js b/benchmarks/apps/qwik/render.js
new file mode 100644
index 0000000..fe872f2
--- /dev/null
+++ b/benchmarks/apps/qwik/render.js
@@ -0,0 +1 @@
+export { render } from './server/entry.ssr.js'
diff --git a/benchmarks/apps/qwik/src/App.tsx b/benchmarks/apps/qwik/src/App.tsx
new file mode 100644
index 0000000..827953c
--- /dev/null
+++ b/benchmarks/apps/qwik/src/App.tsx
@@ -0,0 +1,14 @@
+/** @jsxImportSource @builder.io/qwik */
+import { component$ } from '@builder.io/qwik'
+import { createData } from '../../../data'
+
+export const App = component$(() => (
+  <div>
+    {createData().map((item) => (
+      <div key={item.id}>
+        <h3>{item.name}</h3>
+        <p>{item.value}</p>
+      </div>
+    ))}
+  </div>
+))
diff --git a/benchmarks/apps/qwik/src/entry.ssr.tsx b/benchmarks/apps/qwik/src/entry.ssr.tsx
new file mode 100644
index 0000000..d53c2de
--- /dev/null
+++ b/benchmarks/apps/qwik/src/entry.ssr.tsx
@@ -0,0 +1,8 @@
+/** @jsxImportSource @builder.io/qwik */
+import { renderToString } from '@builder.io/qwik/server'
+import Root from './root'
+
+export async function render() {
+  const result = await renderToString(<Root />)
+  return result.html.length
+}
diff --git a/benchmarks/apps/qwik/src/root.tsx b/benchmarks/apps/qwik/src/root.tsx
new file mode 100644
index 0000000..a4d0aa8
--- /dev/null
+++ b/benchmarks/apps/qwik/src/root.tsx
@@ -0,0 +1,5 @@
+/** @jsxImportSource @builder.io/qwik */
+import { component$ } from '@builder.io/qwik'
+import { App } from './App'
+
+export default component$(() => <App />)
diff --git a/benchmarks/apps/qwik/vite.config.ts b/benchmarks/apps/qwik/vite.config.ts
new file mode 100644
index 0000000..5b4bfa3
--- /dev/null
+++ b/benchmarks/apps/qwik/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import { qwikVite } from '@builder.io/qwik/optimizer'
+
+export default defineConfig({
+  plugins: [qwikVite()],
+})
diff --git a/benchmarks/apps/react/package.json b/benchmarks/apps/react/package.json
new file mode 100644
index 0000000..19d0797
--- /dev/null
+++ b/benchmarks/apps/react/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "benchmarks",
+  "private": true,
+  "workspaces": [
+    "apps/*"
+  ],
+  "type": "module",
+  "module": "index.ts",
+  "scripts": {
+    "build": "vite build --ssr"
+  },
+  "dependencies": {
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "vite": "^8.0.5"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  }
+}
diff --git a/benchmarks/apps/react/render.js b/benchmarks/apps/react/render.js
new file mode 100644
index 0000000..e40257f
--- /dev/null
+++ b/benchmarks/apps/react/render.js
@@ -0,0 +1 @@
+export { render } from './dist/main.js'
diff --git a/benchmarks/apps/react/src/App.jsx b/benchmarks/apps/react/src/App.jsx
new file mode 100644
index 0000000..d25dc3a
--- /dev/null
+++ b/benchmarks/apps/react/src/App.jsx
@@ -0,0 +1,14 @@
+import { createData } from '../../../data'
+
+export default function App() {
+  return (
+    <div>
+      {createData().map((item) => (
+        <div key={item.id}>
+          <h3>{item.name}</h3>
+          <p>{item.value}</p>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/benchmarks/apps/react/src/main.jsx b/benchmarks/apps/react/src/main.jsx
new file mode 100644
index 0000000..2817913
--- /dev/null
+++ b/benchmarks/apps/react/src/main.jsx
@@ -0,0 +1,7 @@
+import { renderToString } from 'react-dom/server'
+import App from './App.jsx'
+
+export async function render() {
+  const html = renderToString(<App />)
+  return html.length
+}
diff --git a/benchmarks/apps/react/vite.config.ts b/benchmarks/apps/react/vite.config.ts
new file mode 100644
index 0000000..2e74127
--- /dev/null
+++ b/benchmarks/apps/react/vite.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    rolldownOptions: {
+      input: './src/main.jsx',
+    },
+  },
+})
diff --git a/benchmarks/apps/solid/package.json b/benchmarks/apps/solid/package.json
new file mode 100644
index 0000000..5cdf3c3
--- /dev/null
+++ b/benchmarks/apps/solid/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "benchmarks-solid",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build --ssr"
+  },
+  "dependencies": {
+    "solid-js": "^1.9.9",
+    "vite": "^8.0.5"
+  }
+}
diff --git a/benchmarks/apps/solid/render.js b/benchmarks/apps/solid/render.js
new file mode 100644
index 0000000..e40257f
--- /dev/null
+++ b/benchmarks/apps/solid/render.js
@@ -0,0 +1 @@
+export { render } from './dist/main.js'
diff --git a/benchmarks/apps/solid/src/App.js b/benchmarks/apps/solid/src/App.js
new file mode 100644
index 0000000..97cef3b
--- /dev/null
+++ b/benchmarks/apps/solid/src/App.js
@@ -0,0 +1,10 @@
+import { escape, ssr } from 'solid-js/web'
+import { createData } from '../../../data'
+
+export const App = () =>
+  ssr(
+    ['<div>', '</div>'],
+    createData().map((item) =>
+      ssr(['<div><h3>', '</h3><p>', '</p></div>'], escape(item.name), escape(item.value)),
+    ),
+  )
diff --git a/benchmarks/apps/solid/src/main.js b/benchmarks/apps/solid/src/main.js
new file mode 100644
index 0000000..b0a43e2
--- /dev/null
+++ b/benchmarks/apps/solid/src/main.js
@@ -0,0 +1,7 @@
+import { renderToString } from 'solid-js/web'
+import { App } from './App.js'
+
+export async function render() {
+  const html = renderToString(App)
+  return html.length
+}
diff --git a/benchmarks/apps/solid/vite.config.ts b/benchmarks/apps/solid/vite.config.ts
new file mode 100644
index 0000000..1a20f2a
--- /dev/null
+++ b/benchmarks/apps/solid/vite.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    rolldownOptions: {
+      input: './src/main.js',
+    },
+  },
+})
diff --git a/benchmarks/apps/svelte/package.json b/benchmarks/apps/svelte/package.json
new file mode 100644
index 0000000..5bbad86
--- /dev/null
+++ b/benchmarks/apps/svelte/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "benchmarks-svelte",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build --ssr"
+  },
+  "dependencies": {
+    "svelte": "^5.40.1",
+    "vite": "^8.0.5"
+  },
+  "devDependencies": {
+    "@sveltejs/vite-plugin-svelte": "^6.2.1"
+  }
+}
diff --git a/benchmarks/apps/svelte/render.js b/benchmarks/apps/svelte/render.js
new file mode 100644
index 0000000..e40257f
--- /dev/null
+++ b/benchmarks/apps/svelte/render.js
@@ -0,0 +1 @@
+export { render } from './dist/main.js'
diff --git a/benchmarks/apps/svelte/src/App.svelte b/benchmarks/apps/svelte/src/App.svelte
new file mode 100644
index 0000000..f526619
--- /dev/null
+++ b/benchmarks/apps/svelte/src/App.svelte
@@ -0,0 +1,14 @@
+<script>
+  import { createData } from '../../../data';
+
+  const items = createData();
+</script>
+
+<div>
+  {#each items as item (item.id)}
+    <div>
+      <h3>{item.name}</h3>
+      <p>{item.value}</p>
+    </div>
+  {/each}
+</div>
diff --git a/benchmarks/apps/svelte/src/main.js b/benchmarks/apps/svelte/src/main.js
new file mode 100644
index 0000000..f9f24d4
--- /dev/null
+++ b/benchmarks/apps/svelte/src/main.js
@@ -0,0 +1,7 @@
+import { render as renderComponent } from 'svelte/server'
+import App from './App.svelte'
+
+export async function render() {
+  const result = renderComponent(App)
+  return result.body.length
+}
diff --git a/benchmarks/apps/svelte/vite.config.ts b/benchmarks/apps/svelte/vite.config.ts
new file mode 100644
index 0000000..f84bef1
--- /dev/null
+++ b/benchmarks/apps/svelte/vite.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+export default defineConfig({
+  plugins: [svelte()],
+  build: {
+    rolldownOptions: {
+      input: './src/main.js',
+    },
+  },
+})
diff --git a/benchmarks/apps/vue-vapor/package.json b/benchmarks/apps/vue-vapor/package.json
new file mode 100644
index 0000000..eeedc28
--- /dev/null
+++ b/benchmarks/apps/vue-vapor/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "benchmarks-vue-vapor",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build --ssr"
+  },
+  "dependencies": {
+    "@vue-vapor/server-renderer": "3.20240714.0-6608bb3",
+    "@vue-vapor/vapor": "3.20240714.0-6608bb3",
+    "@vue-vapor/vite-plugin-vue": "0.0.0-alpha.6",
+    "vite": "^8.0.5"
+  }
+}
diff --git a/benchmarks/apps/vue-vapor/render.js b/benchmarks/apps/vue-vapor/render.js
new file mode 100644
index 0000000..e40257f
--- /dev/null
+++ b/benchmarks/apps/vue-vapor/render.js
@@ -0,0 +1 @@
+export { render } from './dist/main.js'
diff --git a/benchmarks/apps/vue-vapor/src/App.vue b/benchmarks/apps/vue-vapor/src/App.vue
new file mode 100644
index 0000000..c4b0149
--- /dev/null
+++ b/benchmarks/apps/vue-vapor/src/App.vue
@@ -0,0 +1,14 @@
+<script setup>
+import { createData } from '../../../data'
+
+const items = createData()
+</script>
+
+<template>
+  <div>
+    <div v-for="item in items" :key="item.id">
+      <h3>{{ item.name }}</h3>
+      <p>{{ item.value }}</p>
+    </div>
+  </div>
+</template>
diff --git a/benchmarks/apps/vue-vapor/src/main.js b/benchmarks/apps/vue-vapor/src/main.js
new file mode 100644
index 0000000..18ee457
--- /dev/null
+++ b/benchmarks/apps/vue-vapor/src/main.js
@@ -0,0 +1,18 @@
+import { createVaporApp } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import App from './App.vue'
+
+const prepareSSRApp = (app) => {
+  app._context.optionsCache ??= new WeakMap()
+  app._context.propsCache ??= new WeakMap()
+  app._context.emitsCache ??= new WeakMap()
+  app._context.config.optionMergeStrategies ??= {}
+  app._context.config.compilerOptions ??= {}
+  return app
+}
+
+export async function render() {
+  const app = prepareSSRApp(createVaporApp(App))
+  const html = await renderToString(app)
+  return html.length
+}
diff --git a/benchmarks/apps/vue-vapor/src/vue-compat.js b/benchmarks/apps/vue-vapor/src/vue-compat.js
new file mode 100644
index 0000000..b645d9d
--- /dev/null
+++ b/benchmarks/apps/vue-vapor/src/vue-compat.js
@@ -0,0 +1,3 @@
+export * from '@vue-vapor/vapor'
+
+export const useSSRContext = () => ({})
diff --git a/benchmarks/apps/vue-vapor/vite.config.ts b/benchmarks/apps/vue-vapor/vite.config.ts
new file mode 100644
index 0000000..40eaf44
--- /dev/null
+++ b/benchmarks/apps/vue-vapor/vite.config.ts
@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite'
+import vue from '@vue-vapor/vite-plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: [
+      { find: /^vue\/server-renderer$/, replacement: '@vue-vapor/server-renderer' },
+      {
+        find: /^vue$/,
+        replacement: './src/vue-compat.js',
+      },
+    ],
+  },
+  build: {
+    rolldownOptions: {
+      input: './src/main.js',
+      external: ['@vue-vapor/server-renderer', '@vue-vapor/vapor'],
+    },
+  },
+})
diff --git a/benchmarks/apps/vue/package.json b/benchmarks/apps/vue/package.json
new file mode 100644
index 0000000..206760f
--- /dev/null
+++ b/benchmarks/apps/vue/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "benchmarks-vue",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build --ssr"
+  },
+  "dependencies": {
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/server-renderer": "^3.5.22",
+    "vite": "^8.0.5",
+    "vue": "^3.5.22"
+  }
+}
diff --git a/benchmarks/apps/vue/render.js b/benchmarks/apps/vue/render.js
new file mode 100644
index 0000000..e40257f
--- /dev/null
+++ b/benchmarks/apps/vue/render.js
@@ -0,0 +1 @@
+export { render } from './dist/main.js'
diff --git a/benchmarks/apps/vue/src/App.vue b/benchmarks/apps/vue/src/App.vue
new file mode 100644
index 0000000..c4b0149
--- /dev/null
+++ b/benchmarks/apps/vue/src/App.vue
@@ -0,0 +1,14 @@
+<script setup>
+import { createData } from '../../../data'
+
+const items = createData()
+</script>
+
+<template>
+  <div>
+    <div v-for="item in items" :key="item.id">
+      <h3>{{ item.name }}</h3>
+      <p>{{ item.value }}</p>
+    </div>
+  </div>
+</template>
diff --git a/benchmarks/apps/vue/src/main.js b/benchmarks/apps/vue/src/main.js
new file mode 100644
index 0000000..3b9a15b
--- /dev/null
+++ b/benchmarks/apps/vue/src/main.js
@@ -0,0 +1,9 @@
+import { createSSRApp } from 'vue'
+import { renderToString } from 'vue/server-renderer'
+import App from './App.vue'
+
+export async function render() {
+  const app = createSSRApp(App)
+  const html = await renderToString(app)
+  return html.length
+}
diff --git a/benchmarks/apps/vue/vite.config.ts b/benchmarks/apps/vue/vite.config.ts
new file mode 100644
index 0000000..e4e945b
--- /dev/null
+++ b/benchmarks/apps/vue/vite.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  build: {
+    rolldownOptions: {
+      input: './src/main.js',
+    },
+  },
+})
diff --git a/benchmarks/benchmark.js b/benchmarks/benchmark.js
new file mode 100644
index 0000000..503d50b
--- /dev/null
+++ b/benchmarks/benchmark.js
@@ -0,0 +1,22 @@
+import { bench, run, summary } from 'mitata'
+import { benchmarkCases } from './cases.js'
+import { detectRuntime } from './runtime.js'
+
+const loadedCases = await Promise.all(
+  benchmarkCases.map(async ({ name, loadRender }) => ({
+    name,
+    render: await loadRender(),
+  })),
+)
+
+console.log(`Running SSR benchmarks on ${detectRuntime()}.`)
+
+summary(() => {
+  for (const { name, render } of loadedCases) {
+    bench(`SSR Render (${name})`, async () => {
+      await render()
+    })
+  }
+})
+
+await run()
diff --git a/benchmarks/bun.lock b/benchmarks/bun.lock
new file mode 100644
index 0000000..d8a9306
--- /dev/null
+++ b/benchmarks/bun.lock
@@ -0,0 +1,1189 @@
+{
+  "lockfileVersion": 1,
+  "configVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "benchmarks",
+      "dependencies": {
+        "mitata": "^1.0.34",
+      },
+      "devDependencies": {
+        "@types/bun": "latest",
+        "vite-plus": "^0.1.16",
+      },
+      "peerDependencies": {
+        "typescript": "^5",
+      },
+    },
+    "apps/astro": {
+      "name": "benchmarks-astro",
+      "dependencies": {
+        "@astrojs/node": "^10.0.4",
+        "astro": "^6.1.4",
+      },
+    },
+    "apps/eclipsa": {
+      "name": "eclipsa",
+      "dependencies": {
+        "hono": "^4.6.4",
+      },
+      "devDependencies": {
+        "@types/node": "^24.5.2",
+        "typescript": "^5.9.2",
+        "vite": "latest",
+      },
+    },
+    "apps/hono": {
+      "name": "benchmarks-hono",
+      "dependencies": {
+        "hono": "^4.10.4",
+        "vite": "^8.0.5",
+      },
+    },
+    "apps/qwik": {
+      "name": "benchmarks-qwik",
+      "dependencies": {
+        "@builder.io/qwik": "^1.19.2",
+        "vite": "^8.0.5",
+      },
+    },
+    "apps/react": {
+      "name": "benchmarks",
+      "dependencies": {
+        "react": "^19.2.4",
+        "react-dom": "^19.2.4",
+        "vite": "^8.0.5",
+      },
+      "devDependencies": {
+        "@types/bun": "latest",
+        "@types/react-dom": "^19.2.3",
+        "@vitejs/plugin-react": "^6.0.1",
+      },
+      "peerDependencies": {
+        "typescript": "^5",
+      },
+    },
+    "apps/solid": {
+      "name": "benchmarks-solid",
+      "dependencies": {
+        "solid-js": "^1.9.9",
+        "vite": "^8.0.5",
+      },
+    },
+    "apps/svelte": {
+      "name": "benchmarks-svelte",
+      "dependencies": {
+        "svelte": "^5.40.1",
+        "vite": "^8.0.5",
+      },
+      "devDependencies": {
+        "@sveltejs/vite-plugin-svelte": "^6.2.1",
+      },
+    },
+    "apps/vue": {
+      "name": "benchmarks-vue",
+      "dependencies": {
+        "@vitejs/plugin-vue": "^6.0.5",
+        "@vue/server-renderer": "^3.5.22",
+        "vite": "^8.0.5",
+        "vue": "^3.5.22",
+      },
+    },
+    "apps/vue-vapor": {
+      "name": "benchmarks-vue-vapor",
+      "dependencies": {
+        "@vue-vapor/server-renderer": "3.20240714.0-6608bb3",
+        "@vue-vapor/vapor": "3.20240714.0-6608bb3",
+        "@vue-vapor/vite-plugin-vue": "0.0.0-alpha.6",
+        "vite": "^8.0.5",
+      },
+    },
+  },
+  "packages": {
+    "@astrojs/compiler": ["@astrojs/compiler@3.0.1", "", {}, "sha512-z97oYbdebO5aoWzuJ/8q5hLK232+17KcLZ7cJ8BCWk6+qNzVxn/gftC0KzMBUTD8WAaBkPpNSQK6PXLnNrZ0CA=="],
+
+    "@astrojs/internal-helpers": ["@astrojs/internal-helpers@0.8.0", "", { "dependencies": { "picomatch": "^4.0.3" } }, "sha512-J56GrhEiV+4dmrGLPNOl2pZjpHXAndWVyiVDYGDuw6MWKpBSEMLdFxHzeM/6sqaknw9M+HFfHZAcvi3OfT3D/w=="],
+
+    "@astrojs/markdown-remark": ["@astrojs/markdown-remark@7.1.0", "", { "dependencies": { "@astrojs/internal-helpers": "0.8.0", "@astrojs/prism": "4.0.1", "github-slugger": "^2.0.0", "hast-util-from-html": "^2.0.3", "hast-util-to-text": "^4.0.2", "js-yaml": "^4.1.1", "mdast-util-definitions": "^6.0.0", "rehype-raw": "^7.0.0", "rehype-stringify": "^10.0.1", "remark-gfm": "^4.0.1", "remark-parse": "^11.0.0", "remark-rehype": "^11.1.2", "remark-smartypants": "^3.0.2", "retext-smartypants": "^6.2.0", "shiki": "^4.0.0", "smol-toml": "^1.6.0", "unified": "^11.0.5", "unist-util-remove-position": "^5.0.0", "unist-util-visit": "^5.1.0", "unist-util-visit-parents": "^6.0.2", "vfile": "^6.0.3" } }, "sha512-P+HnCsu2js3BoTc8kFmu+E9gOcFeMdPris75g+Zl4sY8+bBRbSQV6xzcBDbZ27eE7yBGEGQoqjpChx+KJYIPYQ=="],
+
+    "@astrojs/node": ["@astrojs/node@10.0.4", "", { "dependencies": { "@astrojs/internal-helpers": "0.8.0", "send": "^1.2.1", "server-destroy": "^1.0.1" }, "peerDependencies": { "astro": "^6.0.0" } }, "sha512-7pVgiVSscQHRC2WqjlXcnbbcKMYp2GXrYpmuvdGg5zgA8J1lFm2vmwVhHZFuZK3Ik5PzoxiDROaEgoDGLbfhLw=="],
+
+    "@astrojs/prism": ["@astrojs/prism@4.0.1", "", { "dependencies": { "prismjs": "^1.30.0" } }, "sha512-nksZQVjlferuWzhPsBpQ1JE5XuKAf1id1/9Hj4a9KG4+ofrlzxUUwX4YGQF/SuDiuiGKEnzopGOt38F3AnVWsQ=="],
+
+    "@astrojs/telemetry": ["@astrojs/telemetry@3.3.0", "", { "dependencies": { "ci-info": "^4.2.0", "debug": "^4.4.0", "dlv": "^1.1.3", "dset": "^3.1.4", "is-docker": "^3.0.0", "is-wsl": "^3.1.0", "which-pm-runs": "^1.1.0" } }, "sha512-UFBgfeldP06qu6khs/yY+q1cDAaArM2/7AEIqQ9Cuvf7B1hNLq0xDrZkct+QoIGyjq56y8IaE2I3CTvG99mlhQ=="],
+
+    "@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "@builder.io/qwik": ["@builder.io/qwik@1.19.2", "", { "dependencies": { "csstype": "^3.1.3", "launch-editor": "^2.11.1", "rollup": "^4.59.0" }, "peerDependencies": { "vite": ">=5 <8" }, "bin": { "qwik": "qwik-cli.cjs" } }, "sha512-aLQIZm3BdX6jStSR6XdXhT9jQo5JN9bxuYJOD8p5IhZxBNgjQaRwIfZkXksgs6RkzdTsSpXo5+G6lkb/jMZQsg=="],
+
+    "@capsizecss/unpack": ["@capsizecss/unpack@4.0.0", "", { "dependencies": { "fontkitten": "^1.0.0" } }, "sha512-VERIM64vtTP1C4mxQ5thVT9fK0apjPFobqybMtA1UdUujWka24ERHbRHFGmpbbhp73MhV+KSsHQH9C6uOTdEQA=="],
+
+    "@clack/core": ["@clack/core@1.2.0", "", { "dependencies": { "fast-wrap-ansi": "^0.1.3", "sisteransi": "^1.0.5" } }, "sha512-qfxof/3T3t9DPU/Rj3OmcFyZInceqj/NVtO9rwIuJqCUgh32gwPjpFQQp/ben07qKlhpwq7GzfWpST4qdJ5Drg=="],
+
+    "@clack/prompts": ["@clack/prompts@1.2.0", "", { "dependencies": { "@clack/core": "1.2.0", "fast-string-width": "^1.1.0", "fast-wrap-ansi": "^0.1.3", "sisteransi": "^1.0.5" } }, "sha512-4jmztR9fMqPMjz6H/UZXj0zEmE43ha1euENwkckKKel4XpSfokExPo5AiVStdHSAlHekz4d0CA/r45Ok1E4D3w=="],
+
+    "@emnapi/core": ["@emnapi/core@1.9.2", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.1", "tslib": "^2.4.0" } }, "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA=="],
+
+    "@emnapi/runtime": ["@emnapi/runtime@1.9.2", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw=="],
+
+    "@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w=="],
+
+    "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.27.7", "", { "os": "aix", "cpu": "ppc64" }, "sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg=="],
+
+    "@esbuild/android-arm": ["@esbuild/android-arm@0.27.7", "", { "os": "android", "cpu": "arm" }, "sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ=="],
+
+    "@esbuild/android-arm64": ["@esbuild/android-arm64@0.27.7", "", { "os": "android", "cpu": "arm64" }, "sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ=="],
+
+    "@esbuild/android-x64": ["@esbuild/android-x64@0.27.7", "", { "os": "android", "cpu": "x64" }, "sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg=="],
+
+    "@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.27.7", "", { "os": "darwin", "cpu": "arm64" }, "sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw=="],
+
+    "@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.27.7", "", { "os": "darwin", "cpu": "x64" }, "sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ=="],
+
+    "@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.27.7", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w=="],
+
+    "@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.27.7", "", { "os": "freebsd", "cpu": "x64" }, "sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ=="],
+
+    "@esbuild/linux-arm": ["@esbuild/linux-arm@0.27.7", "", { "os": "linux", "cpu": "arm" }, "sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA=="],
+
+    "@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.27.7", "", { "os": "linux", "cpu": "arm64" }, "sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A=="],
+
+    "@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.27.7", "", { "os": "linux", "cpu": "ia32" }, "sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg=="],
+
+    "@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.27.7", "", { "os": "linux", "cpu": "none" }, "sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q=="],
+
+    "@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.27.7", "", { "os": "linux", "cpu": "none" }, "sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw=="],
+
+    "@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.27.7", "", { "os": "linux", "cpu": "ppc64" }, "sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ=="],
+
+    "@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.27.7", "", { "os": "linux", "cpu": "none" }, "sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ=="],
+
+    "@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.27.7", "", { "os": "linux", "cpu": "s390x" }, "sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw=="],
+
+    "@esbuild/linux-x64": ["@esbuild/linux-x64@0.27.7", "", { "os": "linux", "cpu": "x64" }, "sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA=="],
+
+    "@esbuild/netbsd-arm64": ["@esbuild/netbsd-arm64@0.27.7", "", { "os": "none", "cpu": "arm64" }, "sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w=="],
+
+    "@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.27.7", "", { "os": "none", "cpu": "x64" }, "sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw=="],
+
+    "@esbuild/openbsd-arm64": ["@esbuild/openbsd-arm64@0.27.7", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A=="],
+
+    "@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.27.7", "", { "os": "openbsd", "cpu": "x64" }, "sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg=="],
+
+    "@esbuild/openharmony-arm64": ["@esbuild/openharmony-arm64@0.27.7", "", { "os": "none", "cpu": "arm64" }, "sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw=="],
+
+    "@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.27.7", "", { "os": "sunos", "cpu": "x64" }, "sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA=="],
+
+    "@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.27.7", "", { "os": "win32", "cpu": "arm64" }, "sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA=="],
+
+    "@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.27.7", "", { "os": "win32", "cpu": "ia32" }, "sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw=="],
+
+    "@esbuild/win32-x64": ["@esbuild/win32-x64@0.27.7", "", { "os": "win32", "cpu": "x64" }, "sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg=="],
+
+    "@img/colour": ["@img/colour@1.1.0", "", {}, "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ=="],
+
+    "@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.2.4" }, "os": "darwin", "cpu": "arm64" }, "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w=="],
+
+    "@img/sharp-darwin-x64": ["@img/sharp-darwin-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-x64": "1.2.4" }, "os": "darwin", "cpu": "x64" }, "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw=="],
+
+    "@img/sharp-libvips-darwin-arm64": ["@img/sharp-libvips-darwin-arm64@1.2.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g=="],
+
+    "@img/sharp-libvips-darwin-x64": ["@img/sharp-libvips-darwin-x64@1.2.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg=="],
+
+    "@img/sharp-libvips-linux-arm": ["@img/sharp-libvips-linux-arm@1.2.4", "", { "os": "linux", "cpu": "arm" }, "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A=="],
+
+    "@img/sharp-libvips-linux-arm64": ["@img/sharp-libvips-linux-arm64@1.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw=="],
+
+    "@img/sharp-libvips-linux-ppc64": ["@img/sharp-libvips-linux-ppc64@1.2.4", "", { "os": "linux", "cpu": "ppc64" }, "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA=="],
+
+    "@img/sharp-libvips-linux-riscv64": ["@img/sharp-libvips-linux-riscv64@1.2.4", "", { "os": "linux", "cpu": "none" }, "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA=="],
+
+    "@img/sharp-libvips-linux-s390x": ["@img/sharp-libvips-linux-s390x@1.2.4", "", { "os": "linux", "cpu": "s390x" }, "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ=="],
+
+    "@img/sharp-libvips-linux-x64": ["@img/sharp-libvips-linux-x64@1.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw=="],
+
+    "@img/sharp-libvips-linuxmusl-arm64": ["@img/sharp-libvips-linuxmusl-arm64@1.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw=="],
+
+    "@img/sharp-libvips-linuxmusl-x64": ["@img/sharp-libvips-linuxmusl-x64@1.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg=="],
+
+    "@img/sharp-linux-arm": ["@img/sharp-linux-arm@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm": "1.2.4" }, "os": "linux", "cpu": "arm" }, "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw=="],
+
+    "@img/sharp-linux-arm64": ["@img/sharp-linux-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm64": "1.2.4" }, "os": "linux", "cpu": "arm64" }, "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg=="],
+
+    "@img/sharp-linux-ppc64": ["@img/sharp-linux-ppc64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-ppc64": "1.2.4" }, "os": "linux", "cpu": "ppc64" }, "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA=="],
+
+    "@img/sharp-linux-riscv64": ["@img/sharp-linux-riscv64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-riscv64": "1.2.4" }, "os": "linux", "cpu": "none" }, "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw=="],
+
+    "@img/sharp-linux-s390x": ["@img/sharp-linux-s390x@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-s390x": "1.2.4" }, "os": "linux", "cpu": "s390x" }, "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg=="],
+
+    "@img/sharp-linux-x64": ["@img/sharp-linux-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-x64": "1.2.4" }, "os": "linux", "cpu": "x64" }, "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ=="],
+
+    "@img/sharp-linuxmusl-arm64": ["@img/sharp-linuxmusl-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-arm64": "1.2.4" }, "os": "linux", "cpu": "arm64" }, "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg=="],
+
+    "@img/sharp-linuxmusl-x64": ["@img/sharp-linuxmusl-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-x64": "1.2.4" }, "os": "linux", "cpu": "x64" }, "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q=="],
+
+    "@img/sharp-wasm32": ["@img/sharp-wasm32@0.34.5", "", { "dependencies": { "@emnapi/runtime": "^1.7.0" }, "cpu": "none" }, "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw=="],
+
+    "@img/sharp-win32-arm64": ["@img/sharp-win32-arm64@0.34.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g=="],
+
+    "@img/sharp-win32-ia32": ["@img/sharp-win32-ia32@0.34.5", "", { "os": "win32", "cpu": "ia32" }, "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg=="],
+
+    "@img/sharp-win32-x64": ["@img/sharp-win32-x64@0.34.5", "", { "os": "win32", "cpu": "x64" }, "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw=="],
+
+    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
+
+    "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
+
+    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
+
+    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
+
+    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
+
+    "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.2", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-sNXv5oLJ7ob93xkZ1XnxisYhGYXfaG9f65/ZgYuAu3qt7b3NadcOEhLvx28hv31PgX8SZJRYrAIPQilQmFpLVw=="],
+
+    "@oslojs/encoding": ["@oslojs/encoding@1.1.0", "", {}, "sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ=="],
+
+    "@oxc-project/runtime": ["@oxc-project/runtime@0.123.0", "", {}, "sha512-wRf0z8saz9tHLcK3YeTeBmwISrpy4bBimvKxUmryiIhbt+ZJb0nwwJNL3D8xpeWbNfZlGSlzRBZbfcbApIGZJw=="],
+
+    "@oxc-project/types": ["@oxc-project/types@0.123.0", "", {}, "sha512-YtECP/y8Mj1lSHiUWGSRzy/C6teUKlS87dEfuVKT09LgQbUsBW1rNg+MiJ4buGu3yuADV60gbIvo9/HplA56Ew=="],
+
+    "@oxfmt/binding-android-arm-eabi": ["@oxfmt/binding-android-arm-eabi@0.43.0", "", { "os": "android", "cpu": "arm" }, "sha512-CgU2s+/9hHZgo0IxVxrbMPrMj+tJ6VM3mD7Mr/4oiz4FNTISLoCvRmB5nk4wAAle045RtRjd86m673jwPyb1OQ=="],
+
+    "@oxfmt/binding-android-arm64": ["@oxfmt/binding-android-arm64@0.43.0", "", { "os": "android", "cpu": "arm64" }, "sha512-T9OfRwjA/EdYxAqbvR7TtqLv5nIrwPXuCtTwOHtS7aR9uXyn74ZYgzgTo6/ZwvTq9DY4W+DsV09hB2EXgn9EbA=="],
+
+    "@oxfmt/binding-darwin-arm64": ["@oxfmt/binding-darwin-arm64@0.43.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-o3i49ZUSJWANzXMAAVY1wnqb65hn4JVzwlRQ5qfcwhRzIA8lGVaud31Q3by5ALHPrksp5QEaKCQF9aAS3TXpZA=="],
+
+    "@oxfmt/binding-darwin-x64": ["@oxfmt/binding-darwin-x64@0.43.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-vWECzzCFkb0kK6jaHjbtC5sC3adiNWtqawFCxhpvsWlzVeKmv5bNvkB4nux+o4JKWTpHCM57NDK/MeXt44txmA=="],
+
+    "@oxfmt/binding-freebsd-x64": ["@oxfmt/binding-freebsd-x64@0.43.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-rgz8JpkKiI/umOf7fl9gwKyQasC8bs5SYHy6g7e4SunfLBY3+8ATcD5caIg8KLGEtKFm5ujKaH8EfjcmnhzTLg=="],
+
+    "@oxfmt/binding-linux-arm-gnueabihf": ["@oxfmt/binding-linux-arm-gnueabihf@0.43.0", "", { "os": "linux", "cpu": "arm" }, "sha512-nWYnF3vIFzT4OM1qL/HSf1Yuj96aBuKWSaObXHSWliwAk2rcj7AWd6Lf7jowEBQMo4wCZVnueIGw/7C4u0KTBQ=="],
+
+    "@oxfmt/binding-linux-arm-musleabihf": ["@oxfmt/binding-linux-arm-musleabihf@0.43.0", "", { "os": "linux", "cpu": "arm" }, "sha512-sFg+NWJbLfupYTF4WELHAPSnLPOn1jiDZ33Z1jfDnTaA+cC3iB35x0FMMZTFdFOz3icRIArncwCcemJFGXu6TQ=="],
+
+    "@oxfmt/binding-linux-arm64-gnu": ["@oxfmt/binding-linux-arm64-gnu@0.43.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-MelWqv68tX6wZEILDrTc9yewiGXe7im62+5x0bNXlCYFOZdA+VnYiJfAihbROsZ5fm90p9C3haFrqjj43XnlAA=="],
+
+    "@oxfmt/binding-linux-arm64-musl": ["@oxfmt/binding-linux-arm64-musl@0.43.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-ROaWfYh+6BSJ1Arwy5ujijTlwnZetxDxzBpDc1oBR4d7rfrPBqzeyjd5WOudowzQUgyavl2wEpzn1hw3jWcqLA=="],
+
+    "@oxfmt/binding-linux-ppc64-gnu": ["@oxfmt/binding-linux-ppc64-gnu@0.43.0", "", { "os": "linux", "cpu": "ppc64" }, "sha512-PJRs/uNxmFipJJ8+SyKHh7Y7VZIKQicqrrBzvfyM5CtKi8D7yZKTwUOZV3ffxmiC2e7l1SDJpkBEOyue5NAFsg=="],
+
+    "@oxfmt/binding-linux-riscv64-gnu": ["@oxfmt/binding-linux-riscv64-gnu@0.43.0", "", { "os": "linux", "cpu": "none" }, "sha512-j6biGAgzIhj+EtHXlbNumvwG7XqOIdiU4KgIWRXAEj/iUbHKukKW8eXa4MIwpQwW1YkxovduKtzEAPnjlnAhVQ=="],
+
+    "@oxfmt/binding-linux-riscv64-musl": ["@oxfmt/binding-linux-riscv64-musl@0.43.0", "", { "os": "linux", "cpu": "none" }, "sha512-RYWxAcslKxvy7yri24Xm9cmD0RiANaiEPs007EFG6l9h1ChM69Q5SOzACaCoz4Z9dEplnhhneeBaTWMEdpgIbA=="],
+
+    "@oxfmt/binding-linux-s390x-gnu": ["@oxfmt/binding-linux-s390x-gnu@0.43.0", "", { "os": "linux", "cpu": "s390x" }, "sha512-DT6Q8zfQQy3jxpezAsBACEHNUUixKSYTwdXeXojNHe4DQOoxjPdjr3Szu6BRNjxLykZM/xMNmp9ElOIyDppwtw=="],
+
+    "@oxfmt/binding-linux-x64-gnu": ["@oxfmt/binding-linux-x64-gnu@0.43.0", "", { "os": "linux", "cpu": "x64" }, "sha512-R8Yk7iYcuZORXmCfFZClqbDxRZgZ9/HEidUuBNdoX8Ptx07cMePnMVJ/woB84lFIDjh2ROHVaOP40Ds3rBXFqg=="],
+
+    "@oxfmt/binding-linux-x64-musl": ["@oxfmt/binding-linux-x64-musl@0.43.0", "", { "os": "linux", "cpu": "x64" }, "sha512-F2YYqyvnQNvi320RWZNAvsaWEHwmW3k4OwNJ1hZxRKXupY63expbBaNp6jAgvYs7y/g546vuQnGHQuCBhslhLQ=="],
+
+    "@oxfmt/binding-openharmony-arm64": ["@oxfmt/binding-openharmony-arm64@0.43.0", "", { "os": "none", "cpu": "arm64" }, "sha512-OE6TdietLXV3F6c7pNIhx/9YC1/2YFwjU9DPc/fbjxIX19hNIaP1rS0cFjCGJlGX+cVJwIKWe8Mos+LdQ1yAJw=="],
+
+    "@oxfmt/binding-win32-arm64-msvc": ["@oxfmt/binding-win32-arm64-msvc@0.43.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-0nWK6a7pGkbdoypfVicmV9k/N1FwjPZENoqhlTU+5HhZnAhpIO3za30nEE33u6l6tuy9OVfpdXUqxUgZ+4lbZw=="],
+
+    "@oxfmt/binding-win32-ia32-msvc": ["@oxfmt/binding-win32-ia32-msvc@0.43.0", "", { "os": "win32", "cpu": "ia32" }, "sha512-9aokTR4Ft+tRdvgN/pKzSkVy2ksc4/dCpDm9L/xFrbIw0yhLtASLbvoG/5WOTUh/BRPPnfGTsWznEqv0dlOmhA=="],
+
+    "@oxfmt/binding-win32-x64-msvc": ["@oxfmt/binding-win32-x64-msvc@0.43.0", "", { "os": "win32", "cpu": "x64" }, "sha512-4bPgdQux2ZLWn3bf2TTXXMHcJB4lenmuxrLqygPmvCJ104Yqzj1UctxSRzR31TiJ4MLaG22RK8dUsVpJtrCz5g=="],
+
+    "@oxlint-tsgolint/darwin-arm64": ["@oxlint-tsgolint/darwin-arm64@0.20.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-KKQcIHZHMxqpHUA1VXIbOG6chNCFkUWbQy6M+AFVtPKkA/3xAeJkJ3njoV66bfzwPHRcWQO+kcj5XqtbkjakoA=="],
+
+    "@oxlint-tsgolint/darwin-x64": ["@oxlint-tsgolint/darwin-x64@0.20.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-7HeVMuclGfG+NLZi2ybY0T4fMI7/XxO/208rJk+zEIloKkVnlh11Wd241JMGwgNFXn+MLJbOqOfojDb2Dt4L1g=="],
+
+    "@oxlint-tsgolint/linux-arm64": ["@oxlint-tsgolint/linux-arm64@0.20.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-zxhUwz+WSxE6oWlZLK2z2ps9yC6ebmgoYmjAl0Oa48+GqkZ56NVgo+wb8DURNv6xrggzHStQxqQxe3mK51HZag=="],
+
+    "@oxlint-tsgolint/linux-x64": ["@oxlint-tsgolint/linux-x64@0.20.0", "", { "os": "linux", "cpu": "x64" }, "sha512-/1l6FnahC9im8PK+Ekkx/V3yetO/PzZnJegE2FXcv/iXEhbeVxP/ouiTYcUQu9shT1FWJCSNti1VJHH+21Y1dg=="],
+
+    "@oxlint-tsgolint/win32-arm64": ["@oxlint-tsgolint/win32-arm64@0.20.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-oPZ5Yz8sVdo7P/5q+i3IKeix31eFZ55JAPa1+RGPoe9PoaYVsdMvR6Jvib6YtrqoJnFPlg3fjEjlEPL8VBKYJA=="],
+
+    "@oxlint-tsgolint/win32-x64": ["@oxlint-tsgolint/win32-x64@0.20.0", "", { "os": "win32", "cpu": "x64" }, "sha512-4stx8RHj3SP9vQyRF/yZbz5igtPvYMEUR8CUoha4BVNZihi39DpCR8qkU7lpjB5Ga1DRMo2pHaA4bdTOMaY4mw=="],
+
+    "@oxlint/binding-android-arm-eabi": ["@oxlint/binding-android-arm-eabi@1.58.0", "", { "os": "android", "cpu": "arm" }, "sha512-1T7UN3SsWWxpWyWGn1cT3ASNJOo+pI3eUkmEl7HgtowapcV8kslYpFQcYn431VuxghXakPNlbjRwhqmR37PFOg=="],
+
+    "@oxlint/binding-android-arm64": ["@oxlint/binding-android-arm64@1.58.0", "", { "os": "android", "cpu": "arm64" }, "sha512-GryzujxuiRv2YFF7bRy8mKcxlbuAN+euVUtGJt9KKbLT8JBUIosamVhcthLh+VEr6KE6cjeVMAQxKAzJcoN7dg=="],
+
+    "@oxlint/binding-darwin-arm64": ["@oxlint/binding-darwin-arm64@1.58.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-7/bRSJIwl4GxeZL9rPZ11anNTyUO9epZrfEJH/ZMla3+/gbQ6xZixh9nOhsZ0QwsTW7/5J2A/fHbD1udC5DQQA=="],
+
+    "@oxlint/binding-darwin-x64": ["@oxlint/binding-darwin-x64@1.58.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-EqdtJSiHweS2vfILNrpyJ6HUwpEq2g7+4Zx1FPi4hu3Hu7tC3znF6ufbXO8Ub2LD4mGgznjI7kSdku9NDD1Mkg=="],
+
+    "@oxlint/binding-freebsd-x64": ["@oxlint/binding-freebsd-x64@1.58.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-VQt5TH4M42mY20F545G637RKxV/yjwVtKk2vfXuazfReSIiuvWBnv+FVSvIV5fKVTJNjt3GSJibh6JecbhGdBw=="],
+
+    "@oxlint/binding-linux-arm-gnueabihf": ["@oxlint/binding-linux-arm-gnueabihf@1.58.0", "", { "os": "linux", "cpu": "arm" }, "sha512-fBYcj4ucwpAtjJT3oeBdFBYKvNyjRSK+cyuvBOTQjh0jvKp4yeA4S/D0IsCHus/VPaNG5L48qQkh+Vjy3HL2/Q=="],
+
+    "@oxlint/binding-linux-arm-musleabihf": ["@oxlint/binding-linux-arm-musleabihf@1.58.0", "", { "os": "linux", "cpu": "arm" }, "sha512-0BeuFfwlUHlJ1xpEdSD1YO3vByEFGPg36uLjK1JgFaxFb4W6w17F8ET8sz5cheZ4+x5f2xzdnRrrWv83E3Yd8g=="],
+
+    "@oxlint/binding-linux-arm64-gnu": ["@oxlint/binding-linux-arm64-gnu@1.58.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-TXlZgnPTlxrQzxG9ZXU7BNwx1Ilrr17P3GwZY0If2EzrinqRH3zXPc3HrRcBJgcsoZNMuNL5YivtkJYgp467UQ=="],
+
+    "@oxlint/binding-linux-arm64-musl": ["@oxlint/binding-linux-arm64-musl@1.58.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-zSoYRo5dxHLcUx93Stl2hW3hSNjPt99O70eRVWt5A1zwJ+FPjeCCANCD2a9R4JbHsdcl11TIQOjyigcRVOH2mw=="],
+
+    "@oxlint/binding-linux-ppc64-gnu": ["@oxlint/binding-linux-ppc64-gnu@1.58.0", "", { "os": "linux", "cpu": "ppc64" }, "sha512-NQ0U/lqxH2/VxBYeAIvMNUK1y0a1bJ3ZicqkF2c6wfakbEciP9jvIE4yNzCFpZaqeIeRYaV7AVGqEO1yrfVPjA=="],
+
+    "@oxlint/binding-linux-riscv64-gnu": ["@oxlint/binding-linux-riscv64-gnu@1.58.0", "", { "os": "linux", "cpu": "none" }, "sha512-X9J+kr3gIC9FT8GuZt0ekzpNUtkBVzMVU4KiKDSlocyQuEgi3gBbXYN8UkQiV77FTusLDPsovjo95YedHr+3yg=="],
+
+    "@oxlint/binding-linux-riscv64-musl": ["@oxlint/binding-linux-riscv64-musl@1.58.0", "", { "os": "linux", "cpu": "none" }, "sha512-CDze3pi1OO3Wvb/QsXjmLEY4XPKGM6kIo82ssNOgmcl1IdndF9VSGAE38YLhADWmOac7fjqhBw82LozuUVxD0Q=="],
+
+    "@oxlint/binding-linux-s390x-gnu": ["@oxlint/binding-linux-s390x-gnu@1.58.0", "", { "os": "linux", "cpu": "s390x" }, "sha512-b/89glbxFaEAcA6Uf1FvCNecBJEgcUTsV1quzrqXM/o4R1M4u+2KCVuyGCayN2UpsRWtGGLb+Ver0tBBpxaPog=="],
+
+    "@oxlint/binding-linux-x64-gnu": ["@oxlint/binding-linux-x64-gnu@1.58.0", "", { "os": "linux", "cpu": "x64" }, "sha512-0/yYpkq9VJFCEcuRlrViGj8pJUFFvNS4EkEREaN7CB1EcLXJIaVSSa5eCihwBGXtOZxhnblWgxks9juRdNQI7w=="],
+
+    "@oxlint/binding-linux-x64-musl": ["@oxlint/binding-linux-x64-musl@1.58.0", "", { "os": "linux", "cpu": "x64" }, "sha512-hr6FNvmcAXiH+JxSvaJ4SJ1HofkdqEElXICW9sm3/Rd5eC3t7kzvmLyRAB3NngKO2wzXRCAm4Z/mGWfrsS4X8w=="],
+
+    "@oxlint/binding-openharmony-arm64": ["@oxlint/binding-openharmony-arm64@1.58.0", "", { "os": "none", "cpu": "arm64" }, "sha512-R+O368VXgRql1K6Xar+FEo7NEwfo13EibPMoTv3sesYQedRXd6m30Dh/7lZMxnrQVFfeo4EOfYIP4FpcgWQNHg=="],
+
+    "@oxlint/binding-win32-arm64-msvc": ["@oxlint/binding-win32-arm64-msvc@1.58.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-Q0FZiAY/3c4YRj4z3h9K1PgaByrifrfbBoODSeX7gy97UtB7pySPUQfC2B/GbxWU6k7CzQrRy5gME10PltLAFQ=="],
+
+    "@oxlint/binding-win32-ia32-msvc": ["@oxlint/binding-win32-ia32-msvc@1.58.0", "", { "os": "win32", "cpu": "ia32" }, "sha512-Y8FKBABrSPp9H0QkRLHDHOSUgM/309a3IvOVgPcVxYcX70wxJrk608CuTg7w+C6vEd724X5wJoNkBcGYfH7nNQ=="],
+
+    "@oxlint/binding-win32-x64-msvc": ["@oxlint/binding-win32-x64-msvc@1.58.0", "", { "os": "win32", "cpu": "x64" }, "sha512-bCn5rbiz5My+Bj7M09sDcnqW0QJyINRVxdZ65x1/Y2tGrMwherwK/lpk+HRQCKvXa8pcaQdF5KY5j54VGZLwNg=="],
+
+    "@polka/url": ["@polka/url@1.0.0-next.29", "", {}, "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww=="],
+
+    "@rolldown/binding-android-arm64": ["@rolldown/binding-android-arm64@1.0.0-rc.12", "", { "os": "android", "cpu": "arm64" }, "sha512-pv1y2Fv0JybcykuiiD3qBOBdz6RteYojRFY1d+b95WVuzx211CRh+ytI/+9iVyWQ6koTh5dawe4S/yRfOFjgaA=="],
+
+    "@rolldown/binding-darwin-arm64": ["@rolldown/binding-darwin-arm64@1.0.0-rc.12", "", { "os": "darwin", "cpu": "arm64" }, "sha512-cFYr6zTG/3PXXF3pUO+umXxt1wkRK/0AYT8lDwuqvRC+LuKYWSAQAQZjCWDQpAH172ZV6ieYrNnFzVVcnSflAg=="],
+
+    "@rolldown/binding-darwin-x64": ["@rolldown/binding-darwin-x64@1.0.0-rc.12", "", { "os": "darwin", "cpu": "x64" }, "sha512-ZCsYknnHzeXYps0lGBz8JrF37GpE9bFVefrlmDrAQhOEi4IOIlcoU1+FwHEtyXGx2VkYAvhu7dyBf75EJQffBw=="],
+
+    "@rolldown/binding-freebsd-x64": ["@rolldown/binding-freebsd-x64@1.0.0-rc.12", "", { "os": "freebsd", "cpu": "x64" }, "sha512-dMLeprcVsyJsKolRXyoTH3NL6qtsT0Y2xeuEA8WQJquWFXkEC4bcu1rLZZSnZRMtAqwtrF/Ib9Ddtpa/Gkge9Q=="],
+
+    "@rolldown/binding-linux-arm-gnueabihf": ["@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.12", "", { "os": "linux", "cpu": "arm" }, "sha512-YqWjAgGC/9M1lz3GR1r1rP79nMgo3mQiiA+Hfo+pvKFK1fAJ1bCi0ZQVh8noOqNacuY1qIcfyVfP6HoyBRZ85Q=="],
+
+    "@rolldown/binding-linux-arm64-gnu": ["@rolldown/binding-linux-arm64-gnu@1.0.0-rc.12", "", { "os": "linux", "cpu": "arm64" }, "sha512-/I5AS4cIroLpslsmzXfwbe5OmWvSsrFuEw3mwvbQ1kDxJ822hFHIx+vsN/TAzNVyepI/j/GSzrtCIwQPeKCLIg=="],
+
+    "@rolldown/binding-linux-arm64-musl": ["@rolldown/binding-linux-arm64-musl@1.0.0-rc.12", "", { "os": "linux", "cpu": "arm64" }, "sha512-V6/wZztnBqlx5hJQqNWwFdxIKN0m38p8Jas+VoSfgH54HSj9tKTt1dZvG6JRHcjh6D7TvrJPWFGaY9UBVOaWPw=="],
+
+    "@rolldown/binding-linux-ppc64-gnu": ["@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.12", "", { "os": "linux", "cpu": "ppc64" }, "sha512-AP3E9BpcUYliZCxa3w5Kwj9OtEVDYK6sVoUzy4vTOJsjPOgdaJZKFmN4oOlX0Wp0RPV2ETfmIra9x1xuayFB7g=="],
+
+    "@rolldown/binding-linux-s390x-gnu": ["@rolldown/binding-linux-s390x-gnu@1.0.0-rc.12", "", { "os": "linux", "cpu": "s390x" }, "sha512-nWwpvUSPkoFmZo0kQazZYOrT7J5DGOJ/+QHHzjvNlooDZED8oH82Yg67HvehPPLAg5fUff7TfWFHQS8IV1n3og=="],
+
+    "@rolldown/binding-linux-x64-gnu": ["@rolldown/binding-linux-x64-gnu@1.0.0-rc.12", "", { "os": "linux", "cpu": "x64" }, "sha512-RNrafz5bcwRy+O9e6P8Z/OCAJW/A+qtBczIqVYwTs14pf4iV1/+eKEjdOUta93q2TsT/FI0XYDP3TCky38LMAg=="],
+
+    "@rolldown/binding-linux-x64-musl": ["@rolldown/binding-linux-x64-musl@1.0.0-rc.12", "", { "os": "linux", "cpu": "x64" }, "sha512-Jpw/0iwoKWx3LJ2rc1yjFrj+T7iHZn2JDg1Yny1ma0luviFS4mhAIcd1LFNxK3EYu3DHWCps0ydXQ5i/rrJ2ig=="],
+
+    "@rolldown/binding-openharmony-arm64": ["@rolldown/binding-openharmony-arm64@1.0.0-rc.12", "", { "os": "none", "cpu": "arm64" }, "sha512-vRugONE4yMfVn0+7lUKdKvN4D5YusEiPilaoO2sgUWpCvrncvWgPMzK00ZFFJuiPgLwgFNP5eSiUlv2tfc+lpA=="],
+
+    "@rolldown/binding-wasm32-wasi": ["@rolldown/binding-wasm32-wasi@1.0.0-rc.12", "", { "dependencies": { "@napi-rs/wasm-runtime": "^1.1.1" }, "cpu": "none" }, "sha512-ykGiLr/6kkiHc0XnBfmFJuCjr5ZYKKofkx+chJWDjitX+KsJuAmrzWhwyOMSHzPhzOHOy7u9HlFoa5MoAOJ/Zg=="],
+
+    "@rolldown/binding-win32-arm64-msvc": ["@rolldown/binding-win32-arm64-msvc@1.0.0-rc.12", "", { "os": "win32", "cpu": "arm64" }, "sha512-5eOND4duWkwx1AzCxadcOrNeighiLwMInEADT0YM7xeEOOFcovWZCq8dadXgcRHSf3Ulh1kFo/qvzoFiCLOL1Q=="],
+
+    "@rolldown/binding-win32-x64-msvc": ["@rolldown/binding-win32-x64-msvc@1.0.0-rc.12", "", { "os": "win32", "cpu": "x64" }, "sha512-PyqoipaswDLAZtot351MLhrlrh6lcZPo2LSYE+VDxbVk24LVKAGOuE4hb8xZQmrPAuEtTZW8E6D2zc5EUZX4Lw=="],
+
+    "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.7", "", {}, "sha512-qujRfC8sFVInYSPPMLQByRh7zhwkGFS4+tyMQ83srV1qrxL4g8E2tyxVVyxd0+8QeBM1mIk9KbWxkegRr76XzA=="],
+
+    "@rollup/pluginutils": ["@rollup/pluginutils@5.3.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-walker": "^2.0.2", "picomatch": "^4.0.2" }, "peerDependencies": { "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0" }, "optionalPeers": ["rollup"] }, "sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q=="],
+
+    "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.60.1", "", { "os": "android", "cpu": "arm" }, "sha512-d6FinEBLdIiK+1uACUttJKfgZREXrF0Qc2SmLII7W2AD8FfiZ9Wjd+rD/iRuf5s5dWrr1GgwXCvPqOuDquOowA=="],
+
+    "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.60.1", "", { "os": "android", "cpu": "arm64" }, "sha512-YjG/EwIDvvYI1YvYbHvDz/BYHtkY4ygUIXHnTdLhG+hKIQFBiosfWiACWortsKPKU/+dUwQQCKQM3qrDe8c9BA=="],
+
+    "@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.60.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-mjCpF7GmkRtSJwon+Rq1N8+pI+8l7w5g9Z3vWj4T7abguC4Czwi3Yu/pFaLvA3TTeMVjnu3ctigusqWUfjZzvw=="],
+
+    "@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.60.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-haZ7hJ1JT4e9hqkoT9R/19XW2QKqjfJVv+i5AGg57S+nLk9lQnJ1F/eZloRO3o9Scy9CM3wQ9l+dkXtcBgN5Ew=="],
+
+    "@rollup/rollup-freebsd-arm64": ["@rollup/rollup-freebsd-arm64@4.60.1", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-czw90wpQq3ZsAVBlinZjAYTKduOjTywlG7fEeWKUA7oCmpA8xdTkxZZlwNJKWqILlq0wehoZcJYfBvOyhPTQ6w=="],
+
+    "@rollup/rollup-freebsd-x64": ["@rollup/rollup-freebsd-x64@4.60.1", "", { "os": "freebsd", "cpu": "x64" }, "sha512-KVB2rqsxTHuBtfOeySEyzEOB7ltlB/ux38iu2rBQzkjbwRVlkhAGIEDiiYnO2kFOkJp+Z7pUXKyrRRFuFUKt+g=="],
+
+    "@rollup/rollup-linux-arm-gnueabihf": ["@rollup/rollup-linux-arm-gnueabihf@4.60.1", "", { "os": "linux", "cpu": "arm" }, "sha512-L+34Qqil+v5uC0zEubW7uByo78WOCIrBvci69E7sFASRl0X7b/MB6Cqd1lky/CtcSVTydWa2WZwFuWexjS5o6g=="],
+
+    "@rollup/rollup-linux-arm-musleabihf": ["@rollup/rollup-linux-arm-musleabihf@4.60.1", "", { "os": "linux", "cpu": "arm" }, "sha512-n83O8rt4v34hgFzlkb1ycniJh7IR5RCIqt6mz1VRJD6pmhRi0CXdmfnLu9dIUS6buzh60IvACM842Ffb3xd6Gg=="],
+
+    "@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.60.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-Nql7sTeAzhTAja3QXeAI48+/+GjBJ+QmAH13snn0AJSNL50JsDqotyudHyMbO2RbJkskbMbFJfIJKWA6R1LCJQ=="],
+
+    "@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.60.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-+pUymDhd0ys9GcKZPPWlFiZ67sTWV5UU6zOJat02M1+PiuSGDziyRuI/pPue3hoUwm2uGfxdL+trT6Z9rxnlMA=="],
+
+    "@rollup/rollup-linux-loong64-gnu": ["@rollup/rollup-linux-loong64-gnu@4.60.1", "", { "os": "linux", "cpu": "none" }, "sha512-VSvgvQeIcsEvY4bKDHEDWcpW4Yw7BtlKG1GUT4FzBUlEKQK0rWHYBqQt6Fm2taXS+1bXvJT6kICu5ZwqKCnvlQ=="],
+
+    "@rollup/rollup-linux-loong64-musl": ["@rollup/rollup-linux-loong64-musl@4.60.1", "", { "os": "linux", "cpu": "none" }, "sha512-4LqhUomJqwe641gsPp6xLfhqWMbQV04KtPp7/dIp0nzPxAkNY1AbwL5W0MQpcalLYk07vaW9Kp1PBhdpZYYcEw=="],
+
+    "@rollup/rollup-linux-ppc64-gnu": ["@rollup/rollup-linux-ppc64-gnu@4.60.1", "", { "os": "linux", "cpu": "ppc64" }, "sha512-tLQQ9aPvkBxOc/EUT6j3pyeMD6Hb8QF2BTBnCQWP/uu1lhc9AIrIjKnLYMEroIz/JvtGYgI9dF3AxHZNaEH0rw=="],
+
+    "@rollup/rollup-linux-ppc64-musl": ["@rollup/rollup-linux-ppc64-musl@4.60.1", "", { "os": "linux", "cpu": "ppc64" }, "sha512-RMxFhJwc9fSXP6PqmAz4cbv3kAyvD1etJFjTx4ONqFP9DkTkXsAMU4v3Vyc5BgzC+anz7nS/9tp4obsKfqkDHg=="],
+
+    "@rollup/rollup-linux-riscv64-gnu": ["@rollup/rollup-linux-riscv64-gnu@4.60.1", "", { "os": "linux", "cpu": "none" }, "sha512-QKgFl+Yc1eEk6MmOBfRHYF6lTxiiiV3/z/BRrbSiW2I7AFTXoBFvdMEyglohPj//2mZS4hDOqeB0H1ACh3sBbg=="],
+
+    "@rollup/rollup-linux-riscv64-musl": ["@rollup/rollup-linux-riscv64-musl@4.60.1", "", { "os": "linux", "cpu": "none" }, "sha512-RAjXjP/8c6ZtzatZcA1RaQr6O1TRhzC+adn8YZDnChliZHviqIjmvFwHcxi4JKPSDAt6Uhf/7vqcBzQJy0PDJg=="],
+
+    "@rollup/rollup-linux-s390x-gnu": ["@rollup/rollup-linux-s390x-gnu@4.60.1", "", { "os": "linux", "cpu": "s390x" }, "sha512-wcuocpaOlaL1COBYiA89O6yfjlp3RwKDeTIA0hM7OpmhR1Bjo9j31G1uQVpDlTvwxGn2nQs65fBFL5UFd76FcQ=="],
+
+    "@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.60.1", "", { "os": "linux", "cpu": "x64" }, "sha512-77PpsFQUCOiZR9+LQEFg9GClyfkNXj1MP6wRnzYs0EeWbPcHs02AXu4xuUbM1zhwn3wqaizle3AEYg5aeoohhg=="],
+
+    "@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.60.1", "", { "os": "linux", "cpu": "x64" }, "sha512-5cIATbk5vynAjqqmyBjlciMJl1+R/CwX9oLk/EyiFXDWd95KpHdrOJT//rnUl4cUcskrd0jCCw3wpZnhIHdD9w=="],
+
+    "@rollup/rollup-openbsd-x64": ["@rollup/rollup-openbsd-x64@4.60.1", "", { "os": "openbsd", "cpu": "x64" }, "sha512-cl0w09WsCi17mcmWqqglez9Gk8isgeWvoUZ3WiJFYSR3zjBQc2J5/ihSjpl+VLjPqjQ/1hJRcqBfLjssREQILw=="],
+
+    "@rollup/rollup-openharmony-arm64": ["@rollup/rollup-openharmony-arm64@4.60.1", "", { "os": "none", "cpu": "arm64" }, "sha512-4Cv23ZrONRbNtbZa37mLSueXUCtN7MXccChtKpUnQNgF010rjrjfHx3QxkS2PI7LqGT5xXyYs1a7LbzAwT0iCA=="],
+
+    "@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.60.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-i1okWYkA4FJICtr7KpYzFpRTHgy5jdDbZiWfvny21iIKky5YExiDXP+zbXzm3dUcFpkEeYNHgQ5fuG236JPq0g=="],
+
+    "@rollup/rollup-win32-ia32-msvc": ["@rollup/rollup-win32-ia32-msvc@4.60.1", "", { "os": "win32", "cpu": "ia32" }, "sha512-u09m3CuwLzShA0EYKMNiFgcjjzwqtUMLmuCJLeZWjjOYA3IT2Di09KaxGBTP9xVztWyIWjVdsB2E9goMjZvTQg=="],
+
+    "@rollup/rollup-win32-x64-gnu": ["@rollup/rollup-win32-x64-gnu@4.60.1", "", { "os": "win32", "cpu": "x64" }, "sha512-k+600V9Zl1CM7eZxJgMyTUzmrmhB/0XZnF4pRypKAlAgxmedUA+1v9R+XOFv56W4SlHEzfeMtzujLJD22Uz5zg=="],
+
+    "@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.60.1", "", { "os": "win32", "cpu": "x64" }, "sha512-lWMnixq/QzxyhTV6NjQJ4SFo1J6PvOX8vUx5Wb4bBPsEb+8xZ89Bz6kOXpfXj9ak9AHTQVQzlgzBEc1SyM27xQ=="],
+
+    "@shikijs/core": ["@shikijs/core@4.0.2", "", { "dependencies": { "@shikijs/primitive": "4.0.2", "@shikijs/types": "4.0.2", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4", "hast-util-to-html": "^9.0.5" } }, "sha512-hxT0YF4ExEqB8G/qFdtJvpmHXBYJ2lWW7qTHDarVkIudPFE6iCIrqdgWxGn5s+ppkGXI0aEGlibI0PAyzP3zlw=="],
+
+    "@shikijs/engine-javascript": ["@shikijs/engine-javascript@4.0.2", "", { "dependencies": { "@shikijs/types": "4.0.2", "@shikijs/vscode-textmate": "^10.0.2", "oniguruma-to-es": "^4.3.4" } }, "sha512-7PW0Nm49DcoUIQEXlJhNNBHyoGMjalRETTCcjMqEaMoJRLljy1Bi/EGV3/qLBgLKQejdspiiYuHGQW6dX94Nag=="],
+
+    "@shikijs/engine-oniguruma": ["@shikijs/engine-oniguruma@4.0.2", "", { "dependencies": { "@shikijs/types": "4.0.2", "@shikijs/vscode-textmate": "^10.0.2" } }, "sha512-UpCB9Y2sUKlS9z8juFSKz7ZtysmeXCgnRF0dlhXBkmQnek7lAToPte8DkxmEYGNTMii72zU/lyXiCB6StuZeJg=="],
+
+    "@shikijs/langs": ["@shikijs/langs@4.0.2", "", { "dependencies": { "@shikijs/types": "4.0.2" } }, "sha512-KaXby5dvoeuZzN0rYQiPMjFoUrz4hgwIE+D6Du9owcHcl6/g16/yT5BQxSW5cGt2MZBz6Hl0YuRqf12omRfUUg=="],
+
+    "@shikijs/primitive": ["@shikijs/primitive@4.0.2", "", { "dependencies": { "@shikijs/types": "4.0.2", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-M6UMPrSa3fN5ayeJwFVl9qWofl273wtK1VG8ySDZ1mQBfhCpdd8nEx7nPZ/tk7k+TYcpqBZzj/AnwxT9lO+HJw=="],
+
+    "@shikijs/themes": ["@shikijs/themes@4.0.2", "", { "dependencies": { "@shikijs/types": "4.0.2" } }, "sha512-mjCafwt8lJJaVSsQvNVrJumbnnj1RI8jbUKrPKgE6E3OvQKxnuRoBaYC51H4IGHePsGN/QtALglWBU7DoKDFnA=="],
+
+    "@shikijs/types": ["@shikijs/types@4.0.2", "", { "dependencies": { "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-qzbeRooUTPnLE+sHD/Z8DStmaDgnbbc/pMrU203950aRqjX/6AFHeDYT+j00y2lPdz0ywJKx7o/7qnqTivtlXg=="],
+
+    "@shikijs/vscode-textmate": ["@shikijs/vscode-textmate@10.0.2", "", {}, "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg=="],
+
+    "@standard-schema/spec": ["@standard-schema/spec@1.1.0", "", {}, "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w=="],
+
+    "@sveltejs/acorn-typescript": ["@sveltejs/acorn-typescript@1.0.9", "", { "peerDependencies": { "acorn": "^8.9.0" } }, "sha512-lVJX6qEgs/4DOcRTpo56tmKzVPtoWAaVbL4hfO7t7NVwl9AAXzQR6cihesW1BmNMPl+bK6dreu2sOKBP2Q9CIA=="],
+
+    "@sveltejs/vite-plugin-svelte": ["@sveltejs/vite-plugin-svelte@6.2.4", "", { "dependencies": { "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0", "deepmerge": "^4.3.1", "magic-string": "^0.30.21", "obug": "^2.1.0", "vitefu": "^1.1.1" }, "peerDependencies": { "svelte": "^5.0.0", "vite": "^6.3.0 || ^7.0.0" } }, "sha512-ou/d51QSdTyN26D7h6dSpusAKaZkAiGM55/AKYi+9AGZw7q85hElbjK3kEyzXHhLSnRISHOYzVge6x0jRZ7DXA=="],
+
+    "@sveltejs/vite-plugin-svelte-inspector": ["@sveltejs/vite-plugin-svelte-inspector@5.0.2", "", { "dependencies": { "obug": "^2.1.0" }, "peerDependencies": { "@sveltejs/vite-plugin-svelte": "^6.0.0-next.0", "svelte": "^5.0.0", "vite": "^6.3.0 || ^7.0.0" } }, "sha512-TZzRTcEtZffICSAoZGkPSl6Etsj2torOVrx6Uw0KpXxrec9Gg6jFWQ60Q3+LmNGfZSxHRCZL7vXVZIWmuV50Ig=="],
+
+    "@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="],
+
+    "@types/bun": ["@types/bun@1.3.11", "", { "dependencies": { "bun-types": "1.3.11" } }, "sha512-5vPne5QvtpjGpsGYXiFyycfpDF2ECyPcTSsFBMa0fraoxiQyMJ3SmuQIGhzPg2WJuWxVBoxWJ2kClYTcw/4fAg=="],
+
+    "@types/chai": ["@types/chai@5.2.3", "", { "dependencies": { "@types/deep-eql": "*", "assertion-error": "^2.0.1" } }, "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA=="],
+
+    "@types/debug": ["@types/debug@4.1.13", "", { "dependencies": { "@types/ms": "*" } }, "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw=="],
+
+    "@types/deep-eql": ["@types/deep-eql@4.0.2", "", {}, "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw=="],
+
+    "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
+
+    "@types/hast": ["@types/hast@3.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ=="],
+
+    "@types/mdast": ["@types/mdast@4.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA=="],
+
+    "@types/ms": ["@types/ms@2.1.0", "", {}, "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA=="],
+
+    "@types/nlcst": ["@types/nlcst@2.0.3", "", { "dependencies": { "@types/unist": "*" } }, "sha512-vSYNSDe6Ix3q+6Z7ri9lyWqgGhJTmzRjZRqyq15N0Z/1/UnVsno9G/N40NBijoYx2seFDIl0+B2mgAb9mezUCA=="],
+
+    "@types/node": ["@types/node@24.12.2", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-A1sre26ke7HDIuY/M23nd9gfB+nrmhtYyMINbjI1zHJxYteKR6qSMX56FsmjMcDb3SMcjJg5BiRRgOCC/yBD0g=="],
+
+    "@types/react": ["@types/react@19.2.14", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w=="],
+
+    "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
+
+    "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
+
+    "@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
+
+    "@typescript-eslint/types": ["@typescript-eslint/types@8.58.0", "", {}, "sha512-O9CjxypDT89fbHxRfETNoAnHj/i6IpRK0CvbVN3qibxlLdo5p5hcLmUuCCrHMpxiWSwKyI8mCP7qRNYuOJ0Uww=="],
+
+    "@ungap/structured-clone": ["@ungap/structured-clone@1.3.0", "", {}, "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="],
+
+    "@vitejs/plugin-react": ["@vitejs/plugin-react@6.0.1", "", { "dependencies": { "@rolldown/pluginutils": "1.0.0-rc.7" }, "peerDependencies": { "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0", "babel-plugin-react-compiler": "^1.0.0", "vite": "^8.0.0" }, "optionalPeers": ["@rolldown/plugin-babel", "babel-plugin-react-compiler"] }, "sha512-l9X/E3cDb+xY3SWzlG1MOGt2usfEHGMNIaegaUGFsLkb3RCn/k8/TOXBcab+OndDI4TBtktT8/9BwwW8Vi9KUQ=="],
+
+    "@vitejs/plugin-vue": ["@vitejs/plugin-vue@6.0.5", "", { "dependencies": { "@rolldown/pluginutils": "1.0.0-rc.2" }, "peerDependencies": { "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0", "vue": "^3.2.25" } }, "sha512-bL3AxKuQySfk1iGcBsQnoRVexTPJq0Z/ixFVM8OhVJAP6ZXXXLtM7NFKWhLl30Kg7uTBqIaPXbh+nuQCuBDedg=="],
+
+    "@voidzero-dev/vite-plus-core": ["@voidzero-dev/vite-plus-core@0.1.16", "", { "dependencies": { "@oxc-project/runtime": "=0.123.0", "@oxc-project/types": "=0.123.0", "lightningcss": "^1.30.2", "postcss": "^8.5.6" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@arethetypeswrong/core": "^0.18.1", "@tsdown/css": "0.21.7", "@tsdown/exe": "0.21.7", "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.1.0", "esbuild": "^0.28.0", "jiti": ">=1.21.0", "less": "^4.0.0", "publint": "^0.3.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "typescript": "^5.0.0 || ^6.0.0", "unplugin-unused": "^0.5.0", "yaml": "^2.4.2" }, "optionalPeers": ["@arethetypeswrong/core", "@tsdown/css", "@tsdown/exe", "@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "publint", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "typescript", "unplugin-unused", "yaml"] }, "sha512-fOyf14CXjcXqANFs2fCXEX+0Tn9ZjmqfFV+qTnARwIF1Kzl8WquO4XtvlDgs/fTQ91H4AyoNUgkvWdKS+C4xYA=="],
+
+    "@voidzero-dev/vite-plus-darwin-arm64": ["@voidzero-dev/vite-plus-darwin-arm64@0.1.16", "", { "os": "darwin", "cpu": "arm64" }, "sha512-InG0ZmuGh7DTrn7zWQ0UvKapElphKI6G1oYfys+jraedG70EhIIee9gtO+mTE1T0bF67SgAcLXwNyaiNda0XwA=="],
+
+    "@voidzero-dev/vite-plus-darwin-x64": ["@voidzero-dev/vite-plus-darwin-x64@0.1.16", "", { "os": "darwin", "cpu": "x64" }, "sha512-LGNrECstuhkCRKRj/dE98Xcprw8HU3VMIMJnZsnDR2C5RB2HADNIu21at/a/G3giA9eWm7uhtPp9FvUtTCK9TA=="],
+
+    "@voidzero-dev/vite-plus-linux-arm64-gnu": ["@voidzero-dev/vite-plus-linux-arm64-gnu@0.1.16", "", { "os": "linux", "cpu": "arm64" }, "sha512-AoFKu6dIOtlkp/mwmtU8ES2uzoaxCHhIym1Tk7qMxyvke4IXnye6VDc4kPMRQwD8mwR3T3bO0HuaEEHxrIWDxw=="],
+
+    "@voidzero-dev/vite-plus-linux-arm64-musl": ["@voidzero-dev/vite-plus-linux-arm64-musl@0.1.16", "", { "os": "linux", "cpu": "arm64" }, "sha512-PloCsGTRIhcXIpUOJ6PqVG8gYNpq+ooJNyqy5sQ82BRnJuo8oV7uBLFvg0X9B3Bzh+vO1F8/+92+o5TiL35JMg=="],
+
+    "@voidzero-dev/vite-plus-linux-x64-gnu": ["@voidzero-dev/vite-plus-linux-x64-gnu@0.1.16", "", { "os": "linux", "cpu": "x64" }, "sha512-nY9/2g+qjhwsW5U3MrFLlx+bOBsdOJiO2HzbxQy7jo/S3jPTnXhFlrRegQuAmqrHAXrSdNwgblgRpICKhx1xZg=="],
+
+    "@voidzero-dev/vite-plus-linux-x64-musl": ["@voidzero-dev/vite-plus-linux-x64-musl@0.1.16", "", { "os": "linux", "cpu": "x64" }, "sha512-JGKEAMoXqzdr9lHT/13uRNV9uzrSYXAFhjAfIC8WEQMG2VUFksvq5/TOc26hzmzbqu+bxRmfN8h1aVTDL8KwFg=="],
+
+    "@voidzero-dev/vite-plus-test": ["@voidzero-dev/vite-plus-test@0.1.16", "", { "dependencies": { "@standard-schema/spec": "^1.1.0", "@types/chai": "^5.2.2", "@voidzero-dev/vite-plus-core": "0.1.16", "es-module-lexer": "^1.7.0", "obug": "^2.1.1", "pixelmatch": "^7.1.0", "pngjs": "^7.0.0", "sirv": "^3.0.2", "std-env": "^4.0.0", "tinybench": "^2.9.0", "tinyexec": "^1.0.2", "tinyglobby": "^0.2.15", "ws": "^8.18.3" }, "peerDependencies": { "@edge-runtime/vm": "*", "@opentelemetry/api": "^1.9.0", "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0", "@vitest/ui": "4.1.2", "happy-dom": "*", "jsdom": "*", "vite": "^6.0.0 || ^7.0.0 || ^8.0.0" }, "optionalPeers": ["@edge-runtime/vm", "@opentelemetry/api", "@types/node", "@vitest/ui", "happy-dom", "jsdom"] }, "sha512-d/rJPX/heMzoAFdnpZsp04MAa6nw1yH1tA4mVCV4m8goVcE9nAvt69mjLMzE8N/rYIQOSgenf3hDXuQRuD6OKQ=="],
+
+    "@voidzero-dev/vite-plus-win32-arm64-msvc": ["@voidzero-dev/vite-plus-win32-arm64-msvc@0.1.16", "", { "os": "win32", "cpu": "arm64" }, "sha512-IugPUCLY7HmiPcCeuHKUqO1+G2vxHnYzAGhS02AixD0sJLTAIKCUANDOiVUFf/HMw+jh/UkugW7MWek8lf/JrQ=="],
+
+    "@voidzero-dev/vite-plus-win32-x64-msvc": ["@voidzero-dev/vite-plus-win32-x64-msvc@0.1.16", "", { "os": "win32", "cpu": "x64" }, "sha512-tq93CIeMs92HF7rdylJknRiyzMOWMKCmpw+g8nl5Q5nmUDNLUsrL3CGfbyqjgbruuPnIr761r9MfydPqZU/cYg=="],
+
+    "@vue-vapor/server-renderer": ["@vue-vapor/server-renderer@3.20240714.0-6608bb3", "", { "dependencies": { "@vue/compiler-ssr": "npm:@vue-vapor/compiler-ssr@3.20240714.0-6608bb3", "@vue/shared": "npm:@vue-vapor/shared@3.20240714.0-6608bb3" }, "peerDependencies": { "vue": "npm:@vue-vapor/vue@3.20240714.0-6608bb3" } }, "sha512-UyxN80FXKeA8z7aucvtJ3T/2KlTsaC2BShBiB8jx3RJppqCdw32/HlOff96xH+8N+5eMu82IKyb4JgaEOHpXzQ=="],
+
+    "@vue-vapor/vapor": ["@vue-vapor/vapor@3.20240714.0-6608bb3", "", { "dependencies": { "@vue/compiler-vapor": "npm:@vue-vapor/compiler-vapor@3.20240714.0-6608bb3", "@vue/runtime-vapor": "npm:@vue-vapor/runtime-vapor@3.20240714.0-6608bb3" } }, "sha512-NFeGr0h7r2eM5cZ3rxK2Asre7qGm6Bmu0H2LFjsWqjSRYK998hu/qVGvWDOOPLJL0DNhfn5xlAraobmr+MlpRg=="],
+
+    "@vue-vapor/vite-plugin-vue": ["@vue-vapor/vite-plugin-vue@0.0.0-alpha.6", "", { "peerDependencies": { "vite": "^5.0.0", "vue": "*" } }, "sha512-V2aTQ7bkDXsoPvYIkTA54m3ypUXDIVpTFspn+ycuYcMfIY37cZ0ny6jm/afNY6k1DiaQ9JfAMBXAKzTBpu2B9A=="],
+
+    "@vue/compiler-core": ["@vue/compiler-core@3.5.32", "", { "dependencies": { "@babel/parser": "^7.29.2", "@vue/shared": "3.5.32", "entities": "^7.0.1", "estree-walker": "^2.0.2", "source-map-js": "^1.2.1" } }, "sha512-4x74Tbtqnda8s/NSD6e1Dr5p1c8HdMU5RWSjMSUzb8RTcUQqevDCxVAitcLBKT+ie3o0Dl9crc/S/opJM7qBGQ=="],
+
+    "@vue/compiler-dom": ["@vue/compiler-dom@3.5.32", "", { "dependencies": { "@vue/compiler-core": "3.5.32", "@vue/shared": "3.5.32" } }, "sha512-ybHAu70NtiEI1fvAUz3oXZqkUYEe5J98GjMDpTGl5iHb0T15wQYLR4wE3h9xfuTNA+Cm2f4czfe8B4s+CCH57Q=="],
+
+    "@vue/compiler-sfc": ["@vue/compiler-sfc@3.5.32", "", { "dependencies": { "@babel/parser": "^7.29.2", "@vue/compiler-core": "3.5.32", "@vue/compiler-dom": "3.5.32", "@vue/compiler-ssr": "3.5.32", "@vue/shared": "3.5.32", "estree-walker": "^2.0.2", "magic-string": "^0.30.21", "postcss": "^8.5.8", "source-map-js": "^1.2.1" } }, "sha512-8UYUYo71cP/0YHMO814TRZlPuUUw3oifHuMR7Wp9SNoRSrxRQnhMLNlCeaODNn6kNTJsjFoQ/kqIj4qGvya4Xg=="],
+
+    "@vue/compiler-ssr": ["@vue/compiler-ssr@3.5.32", "", { "dependencies": { "@vue/compiler-dom": "3.5.32", "@vue/shared": "3.5.32" } }, "sha512-Gp4gTs22T3DgRotZ8aA/6m2jMR+GMztvBXUBEUOYOcST+giyGWJ4WvFd7QLHBkzTxkfOt8IELKNdpzITLbA2rw=="],
+
+    "@vue/compiler-vapor": ["@vue-vapor/compiler-vapor@3.20240714.0-6608bb3", "", { "dependencies": { "@vue/compiler-dom": "npm:@vue-vapor/compiler-dom@3.20240714.0-6608bb3", "@vue/shared": "npm:@vue-vapor/shared@3.20240714.0-6608bb3", "source-map-js": "^1.0.2" } }, "sha512-/T1yIZhTE6nCeRQ0UAhvglV2drBDV/aLwgSF7npLmW9ljLh/TzDzlX66Pf2IevDsH3S+QgZx5ueAurIwZp2TIA=="],
+
+    "@vue/reactivity": ["@vue/reactivity@3.5.32", "", { "dependencies": { "@vue/shared": "3.5.32" } }, "sha512-/ORasxSGvZ6MN5gc+uE364SxFdJ0+WqVG0CENXaGW58TOCdrAW76WWaplDtECeS1qphvtBZtR+3/o1g1zL4xPQ=="],
+
+    "@vue/runtime-core": ["@vue/runtime-core@3.5.32", "", { "dependencies": { "@vue/reactivity": "3.5.32", "@vue/shared": "3.5.32" } }, "sha512-pDrXCejn4UpFDFmMd27AcJEbHaLemaE5o4pbb7sLk79SRIhc6/t34BQA7SGNgYtbMnvbF/HHOftYBgFJtUoJUQ=="],
+
+    "@vue/runtime-dom": ["@vue/runtime-dom@3.5.32", "", { "dependencies": { "@vue/reactivity": "3.5.32", "@vue/runtime-core": "3.5.32", "@vue/shared": "3.5.32", "csstype": "^3.2.3" } }, "sha512-1CDVv7tv/IV13V8Nip1k/aaObVbWqRlVCVezTwx3K07p7Vxossp5JU1dcPNhJk3w347gonIUT9jQOGutyJrSVQ=="],
+
+    "@vue/runtime-shared": ["@vue-vapor/runtime-shared@3.20240714.0-6608bb3", "", {}, "sha512-yExB6sG+CX+tJdDjgY1JF/84f66PdtnB1f18UCBThpm8ZKaPDaf2sbYf6I8mxJCVKGGBpsPS8i/sAu/NHaoVRg=="],
+
+    "@vue/runtime-vapor": ["@vue-vapor/runtime-vapor@3.20240714.0-6608bb3", "", { "dependencies": { "@vue/reactivity": "npm:@vue-vapor/reactivity@3.20240714.0-6608bb3", "@vue/runtime-shared": "npm:@vue-vapor/runtime-shared@3.20240714.0-6608bb3", "@vue/shared": "npm:@vue-vapor/shared@3.20240714.0-6608bb3" } }, "sha512-S8D3E65nq8OW4T5DGWbG3DrfN5W3jVtr4heL4sMoWK94808q0Vtz2qyk0t1830YmUKMoi+uVVjEZW2zmSfPv+w=="],
+
+    "@vue/server-renderer": ["@vue/server-renderer@3.5.32", "", { "dependencies": { "@vue/compiler-ssr": "3.5.32", "@vue/shared": "3.5.32" }, "peerDependencies": { "vue": "3.5.32" } }, "sha512-IOjm2+JQwRFS7W28HNuJeXQle9KdZbODFY7hFGVtnnghF51ta20EWAZJHX+zLGtsHhaU6uC9BGPV52KVpYryMQ=="],
+
+    "@vue/shared": ["@vue/shared@3.5.32", "", {}, "sha512-ksNyrmRQzWJJ8n3cRDuSF7zNNontuJg1YHnmWRJd2AMu8Ij2bqwiiri2lH5rHtYPZjj4STkNcgcmiQqlOjiYGg=="],
+
+    "@vue/vapor": ["@vue-vapor/vapor@3.20240714.0-6608bb3", "", { "dependencies": { "@vue/compiler-vapor": "npm:@vue-vapor/compiler-vapor@3.20240714.0-6608bb3", "@vue/runtime-vapor": "npm:@vue-vapor/runtime-vapor@3.20240714.0-6608bb3" } }, "sha512-NFeGr0h7r2eM5cZ3rxK2Asre7qGm6Bmu0H2LFjsWqjSRYK998hu/qVGvWDOOPLJL0DNhfn5xlAraobmr+MlpRg=="],
+
+    "acorn": ["acorn@8.16.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw=="],
+
+    "anymatch": ["anymatch@3.1.3", "", { "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" } }, "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw=="],
+
+    "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],
+
+    "aria-query": ["aria-query@5.3.2", "", {}, "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw=="],
+
+    "array-iterate": ["array-iterate@2.0.1", "", {}, "sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg=="],
+
+    "assertion-error": ["assertion-error@2.0.1", "", {}, "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA=="],
+
+    "astro": ["astro@6.1.4", "", { "dependencies": { "@astrojs/compiler": "^3.0.1", "@astrojs/internal-helpers": "0.8.0", "@astrojs/markdown-remark": "7.1.0", "@astrojs/telemetry": "3.3.0", "@capsizecss/unpack": "^4.0.0", "@clack/prompts": "^1.1.0", "@oslojs/encoding": "^1.1.0", "@rollup/pluginutils": "^5.3.0", "aria-query": "^5.3.2", "axobject-query": "^4.1.0", "ci-info": "^4.4.0", "clsx": "^2.1.1", "common-ancestor-path": "^2.0.0", "cookie": "^1.1.1", "devalue": "^5.6.3", "diff": "^8.0.3", "dlv": "^1.1.3", "dset": "^3.1.4", "es-module-lexer": "^2.0.0", "esbuild": "^0.27.3", "flattie": "^1.1.1", "fontace": "~0.4.1", "github-slugger": "^2.0.0", "html-escaper": "3.0.3", "http-cache-semantics": "^4.2.0", "js-yaml": "^4.1.1", "magic-string": "^0.30.21", "magicast": "^0.5.2", "mrmime": "^2.0.1", "neotraverse": "^0.6.18", "obug": "^2.1.1", "p-limit": "^7.3.0", "p-queue": "^9.1.0", "package-manager-detector": "^1.6.0", "piccolore": "^0.1.3", "picomatch": "^4.0.3", "rehype": "^13.0.2", "semver": "^7.7.4", "shiki": "^4.0.2", "smol-toml": "^1.6.0", "svgo": "^4.0.1", "tinyclip": "^0.1.12", "tinyexec": "^1.0.4", "tinyglobby": "^0.2.15", "tsconfck": "^3.1.6", "ultrahtml": "^1.6.0", "unifont": "~0.7.4", "unist-util-visit": "^5.1.0", "unstorage": "^1.17.4", "vfile": "^6.0.3", "vite": "^7.3.1", "vitefu": "^1.1.2", "xxhash-wasm": "^1.1.0", "yargs-parser": "^22.0.0", "zod": "^4.3.6" }, "optionalDependencies": { "sharp": "^0.34.0" }, "bin": { "astro": "bin/astro.mjs" } }, "sha512-SRy1bONuCHkGWhI5JiWCQKVDVbeaXOikjAVZs/Nz+lvUvubtdLoZfnacmuZHQ9RL2IOkU54M8/qZYm9ypJDKrg=="],
+
+    "axobject-query": ["axobject-query@4.1.0", "", {}, "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ=="],
+
+    "bail": ["bail@2.0.2", "", {}, "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw=="],
+
+    "benchmarks": ["benchmarks@workspace:apps/react"],
+
+    "benchmarks-astro": ["benchmarks-astro@workspace:apps/astro"],
+
+    "benchmarks-hono": ["benchmarks-hono@workspace:apps/hono"],
+
+    "benchmarks-qwik": ["benchmarks-qwik@workspace:apps/qwik"],
+
+    "benchmarks-solid": ["benchmarks-solid@workspace:apps/solid"],
+
+    "benchmarks-svelte": ["benchmarks-svelte@workspace:apps/svelte"],
+
+    "benchmarks-vue": ["benchmarks-vue@workspace:apps/vue"],
+
+    "benchmarks-vue-vapor": ["benchmarks-vue-vapor@workspace:apps/vue-vapor"],
+
+    "boolbase": ["boolbase@1.0.0", "", {}, "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="],
+
+    "bun-types": ["bun-types@1.3.11", "", { "dependencies": { "@types/node": "*" } }, "sha512-1KGPpoxQWl9f6wcZh57LvrPIInQMn2TQ7jsgxqpRzg+l0QPOFvJVH7HmvHo/AiPgwXy+/Thf6Ov3EdVn1vOabg=="],
+
+    "ccount": ["ccount@2.0.1", "", {}, "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg=="],
+
+    "character-entities": ["character-entities@2.0.2", "", {}, "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ=="],
+
+    "character-entities-html4": ["character-entities-html4@2.1.0", "", {}, "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA=="],
+
+    "character-entities-legacy": ["character-entities-legacy@3.0.0", "", {}, "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ=="],
+
+    "chokidar": ["chokidar@5.0.0", "", { "dependencies": { "readdirp": "^5.0.0" } }, "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw=="],
+
+    "ci-info": ["ci-info@4.4.0", "", {}, "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg=="],
+
+    "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
+
+    "comma-separated-tokens": ["comma-separated-tokens@2.0.3", "", {}, "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg=="],
+
+    "commander": ["commander@11.1.0", "", {}, "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ=="],
+
+    "common-ancestor-path": ["common-ancestor-path@2.0.0", "", {}, "sha512-dnN3ibLeoRf2HNC+OlCiNc5d2zxbLJXOtiZUudNFSXZrNSydxcCsSpRzXwfu7BBWCIfHPw+xTayeBvJCP/D8Ng=="],
+
+    "cookie": ["cookie@1.1.1", "", {}, "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ=="],
+
+    "cookie-es": ["cookie-es@1.2.3", "", {}, "sha512-lXVyvUvrNXblMqzIRrxHb57UUVmqsSWlxqt3XIjCkUP0wDAf6uicO6KMbEgYrMNtEvWgWHwe42CKxPu9MYAnWw=="],
+
+    "crossws": ["crossws@0.3.5", "", { "dependencies": { "uncrypto": "^0.1.3" } }, "sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA=="],
+
+    "css-select": ["css-select@5.2.2", "", { "dependencies": { "boolbase": "^1.0.0", "css-what": "^6.1.0", "domhandler": "^5.0.2", "domutils": "^3.0.1", "nth-check": "^2.0.1" } }, "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw=="],
+
+    "css-tree": ["css-tree@3.2.1", "", { "dependencies": { "mdn-data": "2.27.1", "source-map-js": "^1.2.1" } }, "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA=="],
+
+    "css-what": ["css-what@6.2.2", "", {}, "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA=="],
+
+    "csso": ["csso@5.0.5", "", { "dependencies": { "css-tree": "~2.2.0" } }, "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ=="],
+
+    "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
+
+    "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
+
+    "decode-named-character-reference": ["decode-named-character-reference@1.3.0", "", { "dependencies": { "character-entities": "^2.0.0" } }, "sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q=="],
+
+    "deepmerge": ["deepmerge@4.3.1", "", {}, "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="],
+
+    "defu": ["defu@6.1.6", "", {}, "sha512-f8mefEW4WIVg4LckePx3mALjQSPQgFlg9U8yaPdlsbdYcHQyj9n2zL2LJEA52smeYxOvmd/nB7TpMtHGMTHcug=="],
+
+    "depd": ["depd@2.0.0", "", {}, "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="],
+
+    "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
+
+    "destr": ["destr@2.0.5", "", {}, "sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA=="],
+
+    "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
+
+    "devalue": ["devalue@5.7.0", "", {}, "sha512-qCvc8m7cImp1QDCsiY+C2EdSBWSj7Ucfoq87scSdYboDiIKdvMtFbH1U2VReBls6WMhMaUOoK3ZJEDNG/7zm3w=="],
+
+    "devlop": ["devlop@1.1.0", "", { "dependencies": { "dequal": "^2.0.0" } }, "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA=="],
+
+    "diff": ["diff@8.0.4", "", {}, "sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw=="],
+
+    "dlv": ["dlv@1.1.3", "", {}, "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="],
+
+    "dom-serializer": ["dom-serializer@2.0.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", "entities": "^4.2.0" } }, "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="],
+
+    "domelementtype": ["domelementtype@2.3.0", "", {}, "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="],
+
+    "domhandler": ["domhandler@5.0.3", "", { "dependencies": { "domelementtype": "^2.3.0" } }, "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w=="],
+
+    "domutils": ["domutils@3.2.2", "", { "dependencies": { "dom-serializer": "^2.0.0", "domelementtype": "^2.3.0", "domhandler": "^5.0.3" } }, "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw=="],
+
+    "dset": ["dset@3.1.4", "", {}, "sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA=="],
+
+    "eclipsa": ["eclipsa@workspace:apps/eclipsa"],
+
+    "ee-first": ["ee-first@1.1.1", "", {}, "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="],
+
+    "encodeurl": ["encodeurl@2.0.0", "", {}, "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg=="],
+
+    "entities": ["entities@7.0.1", "", {}, "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA=="],
+
+    "es-module-lexer": ["es-module-lexer@2.0.0", "", {}, "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw=="],
+
+    "esbuild": ["esbuild@0.27.7", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.27.7", "@esbuild/android-arm": "0.27.7", "@esbuild/android-arm64": "0.27.7", "@esbuild/android-x64": "0.27.7", "@esbuild/darwin-arm64": "0.27.7", "@esbuild/darwin-x64": "0.27.7", "@esbuild/freebsd-arm64": "0.27.7", "@esbuild/freebsd-x64": "0.27.7", "@esbuild/linux-arm": "0.27.7", "@esbuild/linux-arm64": "0.27.7", "@esbuild/linux-ia32": "0.27.7", "@esbuild/linux-loong64": "0.27.7", "@esbuild/linux-mips64el": "0.27.7", "@esbuild/linux-ppc64": "0.27.7", "@esbuild/linux-riscv64": "0.27.7", "@esbuild/linux-s390x": "0.27.7", "@esbuild/linux-x64": "0.27.7", "@esbuild/netbsd-arm64": "0.27.7", "@esbuild/netbsd-x64": "0.27.7", "@esbuild/openbsd-arm64": "0.27.7", "@esbuild/openbsd-x64": "0.27.7", "@esbuild/openharmony-arm64": "0.27.7", "@esbuild/sunos-x64": "0.27.7", "@esbuild/win32-arm64": "0.27.7", "@esbuild/win32-ia32": "0.27.7", "@esbuild/win32-x64": "0.27.7" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w=="],
+
+    "escape-html": ["escape-html@1.0.3", "", {}, "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="],
+
+    "escape-string-regexp": ["escape-string-regexp@5.0.0", "", {}, "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw=="],
+
+    "esm-env": ["esm-env@1.2.2", "", {}, "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA=="],
+
+    "esrap": ["esrap@2.2.4", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.4.15", "@typescript-eslint/types": "^8.2.0" } }, "sha512-suICpxAmZ9A8bzJjEl/+rLJiDKC0X4gYWUxT6URAWBLvlXmtbZd5ySMu/N2ZGEtMCAmflUDPSehrP9BQcsGcSg=="],
+
+    "estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
+
+    "etag": ["etag@1.8.1", "", {}, "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="],
+
+    "eventemitter3": ["eventemitter3@5.0.4", "", {}, "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw=="],
+
+    "extend": ["extend@3.0.2", "", {}, "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="],
+
+    "fast-string-truncated-width": ["fast-string-truncated-width@1.2.1", "", {}, "sha512-Q9acT/+Uu3GwGj+5w/zsGuQjh9O1TyywhIwAxHudtWrgF09nHOPrvTLhQevPbttcxjr/SNN7mJmfOw/B1bXgow=="],
+
+    "fast-string-width": ["fast-string-width@1.1.0", "", { "dependencies": { "fast-string-truncated-width": "^1.2.0" } }, "sha512-O3fwIVIH5gKB38QNbdg+3760ZmGz0SZMgvwJbA1b2TGXceKE6A2cOlfogh1iw8lr049zPyd7YADHy+B7U4W9bQ=="],
+
+    "fast-wrap-ansi": ["fast-wrap-ansi@0.1.6", "", { "dependencies": { "fast-string-width": "^1.1.0" } }, "sha512-HlUwET7a5gqjURj70D5jl7aC3Zmy4weA1SHUfM0JFI0Ptq987NH2TwbBFLoERhfwk+E+eaq4EK3jXoT+R3yp3w=="],
+
+    "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
+
+    "flattie": ["flattie@1.1.1", "", {}, "sha512-9UbaD6XdAL97+k/n+N7JwX46K/M6Zc6KcFYskrYL8wbBV/Uyk0CTAMY0VT+qiK5PM7AIc9aTWYtq65U7T+aCNQ=="],
+
+    "fontace": ["fontace@0.4.1", "", { "dependencies": { "fontkitten": "^1.0.2" } }, "sha512-lDMvbAzSnHmbYMTEld5qdtvNH2/pWpICOqpean9IgC7vUbUJc3k+k5Dokp85CegamqQpFbXf0rAVkbzpyTA8aw=="],
+
+    "fontkitten": ["fontkitten@1.0.3", "", { "dependencies": { "tiny-inflate": "^1.0.3" } }, "sha512-Wp1zXWPVUPBmfoa3Cqc9ctaKuzKAV6uLstRqlR56kSjplf5uAce+qeyYym7F+PHbGTk+tCEdkCW6RD7DX/gBZw=="],
+
+    "fresh": ["fresh@2.0.0", "", {}, "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A=="],
+
+    "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
+
+    "github-slugger": ["github-slugger@2.0.0", "", {}, "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw=="],
+
+    "h3": ["h3@1.15.11", "", { "dependencies": { "cookie-es": "^1.2.3", "crossws": "^0.3.5", "defu": "^6.1.6", "destr": "^2.0.5", "iron-webcrypto": "^1.2.1", "node-mock-http": "^1.0.4", "radix3": "^1.1.2", "ufo": "^1.6.3", "uncrypto": "^0.1.3" } }, "sha512-L3THSe2MPeBwgIZVSH5zLdBBU90TOxarvhK9d04IDY2AmVS8j2Jz2LIWtwsGOU3lu2I5jCN7FNvVfY2+XyF+mg=="],
+
+    "hast-util-from-html": ["hast-util-from-html@2.0.3", "", { "dependencies": { "@types/hast": "^3.0.0", "devlop": "^1.1.0", "hast-util-from-parse5": "^8.0.0", "parse5": "^7.0.0", "vfile": "^6.0.0", "vfile-message": "^4.0.0" } }, "sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw=="],
+
+    "hast-util-from-parse5": ["hast-util-from-parse5@8.0.3", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "devlop": "^1.0.0", "hastscript": "^9.0.0", "property-information": "^7.0.0", "vfile": "^6.0.0", "vfile-location": "^5.0.0", "web-namespaces": "^2.0.0" } }, "sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg=="],
+
+    "hast-util-is-element": ["hast-util-is-element@3.0.0", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g=="],
+
+    "hast-util-parse-selector": ["hast-util-parse-selector@4.0.0", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A=="],
+
+    "hast-util-raw": ["hast-util-raw@9.1.0", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "@ungap/structured-clone": "^1.0.0", "hast-util-from-parse5": "^8.0.0", "hast-util-to-parse5": "^8.0.0", "html-void-elements": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "parse5": "^7.0.0", "unist-util-position": "^5.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0", "web-namespaces": "^2.0.0", "zwitch": "^2.0.0" } }, "sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw=="],
+
+    "hast-util-to-html": ["hast-util-to-html@9.0.5", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "ccount": "^2.0.0", "comma-separated-tokens": "^2.0.0", "hast-util-whitespace": "^3.0.0", "html-void-elements": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "property-information": "^7.0.0", "space-separated-tokens": "^2.0.0", "stringify-entities": "^4.0.0", "zwitch": "^2.0.4" } }, "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw=="],
+
+    "hast-util-to-parse5": ["hast-util-to-parse5@8.0.1", "", { "dependencies": { "@types/hast": "^3.0.0", "comma-separated-tokens": "^2.0.0", "devlop": "^1.0.0", "property-information": "^7.0.0", "space-separated-tokens": "^2.0.0", "web-namespaces": "^2.0.0", "zwitch": "^2.0.0" } }, "sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA=="],
+
+    "hast-util-to-text": ["hast-util-to-text@4.0.2", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "hast-util-is-element": "^3.0.0", "unist-util-find-after": "^5.0.0" } }, "sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A=="],
+
+    "hast-util-whitespace": ["hast-util-whitespace@3.0.0", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw=="],
+
+    "hastscript": ["hastscript@9.0.1", "", { "dependencies": { "@types/hast": "^3.0.0", "comma-separated-tokens": "^2.0.0", "hast-util-parse-selector": "^4.0.0", "property-information": "^7.0.0", "space-separated-tokens": "^2.0.0" } }, "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w=="],
+
+    "hono": ["hono@4.12.11", "", {}, "sha512-r4xbIa3mGGGoH9nN4A14DOg2wx7y2oQyJEb5O57C/xzETG/qx4c7CVDQ5WMeKHZ7ORk2W0hZ/sQKXTav3cmYBA=="],
+
+    "html-escaper": ["html-escaper@3.0.3", "", {}, "sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ=="],
+
+    "html-void-elements": ["html-void-elements@3.0.0", "", {}, "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg=="],
+
+    "http-cache-semantics": ["http-cache-semantics@4.2.0", "", {}, "sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ=="],
+
+    "http-errors": ["http-errors@2.0.1", "", { "dependencies": { "depd": "~2.0.0", "inherits": "~2.0.4", "setprototypeof": "~1.2.0", "statuses": "~2.0.2", "toidentifier": "~1.0.1" } }, "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ=="],
+
+    "inherits": ["inherits@2.0.4", "", {}, "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="],
+
+    "iron-webcrypto": ["iron-webcrypto@1.2.1", "", {}, "sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg=="],
+
+    "is-docker": ["is-docker@3.0.0", "", { "bin": { "is-docker": "cli.js" } }, "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ=="],
+
+    "is-inside-container": ["is-inside-container@1.0.0", "", { "dependencies": { "is-docker": "^3.0.0" }, "bin": { "is-inside-container": "cli.js" } }, "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA=="],
+
+    "is-plain-obj": ["is-plain-obj@4.1.0", "", {}, "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg=="],
+
+    "is-reference": ["is-reference@3.0.3", "", { "dependencies": { "@types/estree": "^1.0.6" } }, "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw=="],
+
+    "is-wsl": ["is-wsl@3.1.1", "", { "dependencies": { "is-inside-container": "^1.0.0" } }, "sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw=="],
+
+    "js-yaml": ["js-yaml@4.1.1", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA=="],
+
+    "launch-editor": ["launch-editor@2.13.2", "", { "dependencies": { "picocolors": "^1.1.1", "shell-quote": "^1.8.3" } }, "sha512-4VVDnbOpLXy/s8rdRCSXb+zfMeFR0WlJWpET1iA9CQdlZDfwyLjUuGQzXU4VeOoey6AicSAluWan7Etga6Kcmg=="],
+
+    "lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="],
+
+    "lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="],
+
+    "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.32.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ=="],
+
+    "lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.32.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w=="],
+
+    "lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.32.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig=="],
+
+    "lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.32.0", "", { "os": "linux", "cpu": "arm" }, "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw=="],
+
+    "lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ=="],
+
+    "lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg=="],
+
+    "lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA=="],
+
+    "lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg=="],
+
+    "lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.32.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw=="],
+
+    "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.32.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q=="],
+
+    "locate-character": ["locate-character@3.0.0", "", {}, "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="],
+
+    "longest-streak": ["longest-streak@3.1.0", "", {}, "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g=="],
+
+    "lru-cache": ["lru-cache@11.3.2", "", {}, "sha512-wgWa6FWQ3QRRJbIjbsldRJZxdxYngT/dO0I5Ynmlnin8qy7tC6xYzbcJjtN4wHLXtkbVwHzk0C+OejVw1XM+DQ=="],
+
+    "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
+
+    "magicast": ["magicast@0.5.2", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "source-map-js": "^1.2.1" } }, "sha512-E3ZJh4J3S9KfwdjZhe2afj6R9lGIN5Pher1pF39UGrXRqq/VDaGVIGN13BjHd2u8B61hArAGOnso7nBOouW3TQ=="],
+
+    "markdown-table": ["markdown-table@3.0.4", "", {}, "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw=="],
+
+    "mdast-util-definitions": ["mdast-util-definitions@6.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "@types/unist": "^3.0.0", "unist-util-visit": "^5.0.0" } }, "sha512-scTllyX6pnYNZH/AIp/0ePz6s4cZtARxImwoPJ7kS42n+MnVsI4XbnG6d4ibehRIldYMWM2LD7ImQblVhUejVQ=="],
+
+    "mdast-util-find-and-replace": ["mdast-util-find-and-replace@3.0.2", "", { "dependencies": { "@types/mdast": "^4.0.0", "escape-string-regexp": "^5.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg=="],
+
+    "mdast-util-from-markdown": ["mdast-util-from-markdown@2.0.3", "", { "dependencies": { "@types/mdast": "^4.0.0", "@types/unist": "^3.0.0", "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "mdast-util-to-string": "^4.0.0", "micromark": "^4.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-decode-string": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q=="],
+
+    "mdast-util-gfm": ["mdast-util-gfm@3.1.0", "", { "dependencies": { "mdast-util-from-markdown": "^2.0.0", "mdast-util-gfm-autolink-literal": "^2.0.0", "mdast-util-gfm-footnote": "^2.0.0", "mdast-util-gfm-strikethrough": "^2.0.0", "mdast-util-gfm-table": "^2.0.0", "mdast-util-gfm-task-list-item": "^2.0.0", "mdast-util-to-markdown": "^2.0.0" } }, "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ=="],
+
+    "mdast-util-gfm-autolink-literal": ["mdast-util-gfm-autolink-literal@2.0.1", "", { "dependencies": { "@types/mdast": "^4.0.0", "ccount": "^2.0.0", "devlop": "^1.0.0", "mdast-util-find-and-replace": "^3.0.0", "micromark-util-character": "^2.0.0" } }, "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ=="],
+
+    "mdast-util-gfm-footnote": ["mdast-util-gfm-footnote@2.1.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "devlop": "^1.1.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0" } }, "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ=="],
+
+    "mdast-util-gfm-strikethrough": ["mdast-util-gfm-strikethrough@2.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0" } }, "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg=="],
+
+    "mdast-util-gfm-table": ["mdast-util-gfm-table@2.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "markdown-table": "^3.0.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0" } }, "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg=="],
+
+    "mdast-util-gfm-task-list-item": ["mdast-util-gfm-task-list-item@2.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "mdast-util-from-markdown": "^2.0.0", "mdast-util-to-markdown": "^2.0.0" } }, "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ=="],
+
+    "mdast-util-phrasing": ["mdast-util-phrasing@4.1.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "unist-util-is": "^6.0.0" } }, "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w=="],
+
+    "mdast-util-to-hast": ["mdast-util-to-hast@13.2.1", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "@ungap/structured-clone": "^1.0.0", "devlop": "^1.0.0", "micromark-util-sanitize-uri": "^2.0.0", "trim-lines": "^3.0.0", "unist-util-position": "^5.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" } }, "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA=="],
+
+    "mdast-util-to-markdown": ["mdast-util-to-markdown@2.1.2", "", { "dependencies": { "@types/mdast": "^4.0.0", "@types/unist": "^3.0.0", "longest-streak": "^3.0.0", "mdast-util-phrasing": "^4.0.0", "mdast-util-to-string": "^4.0.0", "micromark-util-classify-character": "^2.0.0", "micromark-util-decode-string": "^2.0.0", "unist-util-visit": "^5.0.0", "zwitch": "^2.0.0" } }, "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA=="],
+
+    "mdast-util-to-string": ["mdast-util-to-string@4.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0" } }, "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg=="],
+
+    "mdn-data": ["mdn-data@2.27.1", "", {}, "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ=="],
+
+    "micromark": ["micromark@4.0.2", "", { "dependencies": { "@types/debug": "^4.0.0", "debug": "^4.0.0", "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "micromark-core-commonmark": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-combine-extensions": "^2.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-encode": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-sanitize-uri": "^2.0.0", "micromark-util-subtokenize": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA=="],
+
+    "micromark-core-commonmark": ["micromark-core-commonmark@2.0.3", "", { "dependencies": { "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "micromark-factory-destination": "^2.0.0", "micromark-factory-label": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-factory-title": "^2.0.0", "micromark-factory-whitespace": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-classify-character": "^2.0.0", "micromark-util-html-tag-name": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-subtokenize": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg=="],
+
+    "micromark-extension-gfm": ["micromark-extension-gfm@3.0.0", "", { "dependencies": { "micromark-extension-gfm-autolink-literal": "^2.0.0", "micromark-extension-gfm-footnote": "^2.0.0", "micromark-extension-gfm-strikethrough": "^2.0.0", "micromark-extension-gfm-table": "^2.0.0", "micromark-extension-gfm-tagfilter": "^2.0.0", "micromark-extension-gfm-task-list-item": "^2.0.0", "micromark-util-combine-extensions": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w=="],
+
+    "micromark-extension-gfm-autolink-literal": ["micromark-extension-gfm-autolink-literal@2.1.0", "", { "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-sanitize-uri": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw=="],
+
+    "micromark-extension-gfm-footnote": ["micromark-extension-gfm-footnote@2.1.0", "", { "dependencies": { "devlop": "^1.0.0", "micromark-core-commonmark": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-sanitize-uri": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw=="],
+
+    "micromark-extension-gfm-strikethrough": ["micromark-extension-gfm-strikethrough@2.1.0", "", { "dependencies": { "devlop": "^1.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-classify-character": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw=="],
+
+    "micromark-extension-gfm-table": ["micromark-extension-gfm-table@2.1.1", "", { "dependencies": { "devlop": "^1.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg=="],
+
+    "micromark-extension-gfm-tagfilter": ["micromark-extension-gfm-tagfilter@2.0.0", "", { "dependencies": { "micromark-util-types": "^2.0.0" } }, "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg=="],
+
+    "micromark-extension-gfm-task-list-item": ["micromark-extension-gfm-task-list-item@2.1.0", "", { "dependencies": { "devlop": "^1.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw=="],
+
+    "micromark-factory-destination": ["micromark-factory-destination@2.0.1", "", { "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA=="],
+
+    "micromark-factory-label": ["micromark-factory-label@2.0.1", "", { "dependencies": { "devlop": "^1.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg=="],
+
+    "micromark-factory-space": ["micromark-factory-space@2.0.1", "", { "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg=="],
+
+    "micromark-factory-title": ["micromark-factory-title@2.0.1", "", { "dependencies": { "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw=="],
+
+    "micromark-factory-whitespace": ["micromark-factory-whitespace@2.0.1", "", { "dependencies": { "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ=="],
+
+    "micromark-util-character": ["micromark-util-character@2.1.1", "", { "dependencies": { "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q=="],
+
+    "micromark-util-chunked": ["micromark-util-chunked@2.0.1", "", { "dependencies": { "micromark-util-symbol": "^2.0.0" } }, "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA=="],
+
+    "micromark-util-classify-character": ["micromark-util-classify-character@2.0.1", "", { "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q=="],
+
+    "micromark-util-combine-extensions": ["micromark-util-combine-extensions@2.0.1", "", { "dependencies": { "micromark-util-chunked": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg=="],
+
+    "micromark-util-decode-numeric-character-reference": ["micromark-util-decode-numeric-character-reference@2.0.2", "", { "dependencies": { "micromark-util-symbol": "^2.0.0" } }, "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw=="],
+
+    "micromark-util-decode-string": ["micromark-util-decode-string@2.0.1", "", { "dependencies": { "decode-named-character-reference": "^1.0.0", "micromark-util-character": "^2.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-symbol": "^2.0.0" } }, "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ=="],
+
+    "micromark-util-encode": ["micromark-util-encode@2.0.1", "", {}, "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw=="],
+
+    "micromark-util-html-tag-name": ["micromark-util-html-tag-name@2.0.1", "", {}, "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA=="],
+
+    "micromark-util-normalize-identifier": ["micromark-util-normalize-identifier@2.0.1", "", { "dependencies": { "micromark-util-symbol": "^2.0.0" } }, "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q=="],
+
+    "micromark-util-resolve-all": ["micromark-util-resolve-all@2.0.1", "", { "dependencies": { "micromark-util-types": "^2.0.0" } }, "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg=="],
+
+    "micromark-util-sanitize-uri": ["micromark-util-sanitize-uri@2.0.1", "", { "dependencies": { "micromark-util-character": "^2.0.0", "micromark-util-encode": "^2.0.0", "micromark-util-symbol": "^2.0.0" } }, "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ=="],
+
+    "micromark-util-subtokenize": ["micromark-util-subtokenize@2.1.0", "", { "dependencies": { "devlop": "^1.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA=="],
+
+    "micromark-util-symbol": ["micromark-util-symbol@2.0.1", "", {}, "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q=="],
+
+    "micromark-util-types": ["micromark-util-types@2.0.2", "", {}, "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA=="],
+
+    "mime-db": ["mime-db@1.54.0", "", {}, "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ=="],
+
+    "mime-types": ["mime-types@3.0.2", "", { "dependencies": { "mime-db": "^1.54.0" } }, "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A=="],
+
+    "mitata": ["mitata@1.0.34", "", {}, "sha512-Mc3zrtNBKIMeHSCQ0XqRLo1vbdIx1wvFV9c8NJAiyho6AjNfMY8bVhbS12bwciUdd1t4rj8099CH3N3NFahaUA=="],
+
+    "mrmime": ["mrmime@2.0.1", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="],
+
+    "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
+
+    "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
+
+    "neotraverse": ["neotraverse@0.6.18", "", {}, "sha512-Z4SmBUweYa09+o6pG+eASabEpP6QkQ70yHj351pQoEXIs8uHbaU2DWVmzBANKgflPa47A50PtB2+NgRpQvr7vA=="],
+
+    "nlcst-to-string": ["nlcst-to-string@4.0.0", "", { "dependencies": { "@types/nlcst": "^2.0.0" } }, "sha512-YKLBCcUYKAg0FNlOBT6aI91qFmSiFKiluk655WzPF+DDMA02qIyy8uiRqI8QXtcFpEvll12LpL5MXqEmAZ+dcA=="],
+
+    "node-fetch-native": ["node-fetch-native@1.6.7", "", {}, "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q=="],
+
+    "node-mock-http": ["node-mock-http@1.0.4", "", {}, "sha512-8DY+kFsDkNXy1sJglUfuODx1/opAGJGyrTuFqEoN90oRc2Vk0ZbD4K2qmKXBBEhZQzdKHIVfEJpDU8Ak2NJEvQ=="],
+
+    "normalize-path": ["normalize-path@3.0.0", "", {}, "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="],
+
+    "nth-check": ["nth-check@2.1.1", "", { "dependencies": { "boolbase": "^1.0.0" } }, "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w=="],
+
+    "obug": ["obug@2.1.1", "", {}, "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ=="],
+
+    "ofetch": ["ofetch@1.5.1", "", { "dependencies": { "destr": "^2.0.5", "node-fetch-native": "^1.6.7", "ufo": "^1.6.1" } }, "sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA=="],
+
+    "ohash": ["ohash@2.0.11", "", {}, "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ=="],
+
+    "on-finished": ["on-finished@2.4.1", "", { "dependencies": { "ee-first": "1.1.1" } }, "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg=="],
+
+    "oniguruma-parser": ["oniguruma-parser@0.12.1", "", {}, "sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w=="],
+
+    "oniguruma-to-es": ["oniguruma-to-es@4.3.5", "", { "dependencies": { "oniguruma-parser": "^0.12.1", "regex": "^6.1.0", "regex-recursion": "^6.0.2" } }, "sha512-Zjygswjpsewa0NLTsiizVuMQZbp0MDyM6lIt66OxsF21npUDlzpHi1Mgb/qhQdkb+dWFTzJmFbEWdvZgRho8eQ=="],
+
+    "oxfmt": ["oxfmt@0.43.0", "", { "dependencies": { "tinypool": "2.1.0" }, "optionalDependencies": { "@oxfmt/binding-android-arm-eabi": "0.43.0", "@oxfmt/binding-android-arm64": "0.43.0", "@oxfmt/binding-darwin-arm64": "0.43.0", "@oxfmt/binding-darwin-x64": "0.43.0", "@oxfmt/binding-freebsd-x64": "0.43.0", "@oxfmt/binding-linux-arm-gnueabihf": "0.43.0", "@oxfmt/binding-linux-arm-musleabihf": "0.43.0", "@oxfmt/binding-linux-arm64-gnu": "0.43.0", "@oxfmt/binding-linux-arm64-musl": "0.43.0", "@oxfmt/binding-linux-ppc64-gnu": "0.43.0", "@oxfmt/binding-linux-riscv64-gnu": "0.43.0", "@oxfmt/binding-linux-riscv64-musl": "0.43.0", "@oxfmt/binding-linux-s390x-gnu": "0.43.0", "@oxfmt/binding-linux-x64-gnu": "0.43.0", "@oxfmt/binding-linux-x64-musl": "0.43.0", "@oxfmt/binding-openharmony-arm64": "0.43.0", "@oxfmt/binding-win32-arm64-msvc": "0.43.0", "@oxfmt/binding-win32-ia32-msvc": "0.43.0", "@oxfmt/binding-win32-x64-msvc": "0.43.0" }, "bin": { "oxfmt": "bin/oxfmt" } }, "sha512-KTYNG5ISfHSdmeZ25Xzb3qgz9EmQvkaGAxgBY/p38+ZiAet3uZeu7FnMwcSQJg152Qwl0wnYAxDc+Z/H6cvrwA=="],
+
+    "oxlint": ["oxlint@1.58.0", "", { "optionalDependencies": { "@oxlint/binding-android-arm-eabi": "1.58.0", "@oxlint/binding-android-arm64": "1.58.0", "@oxlint/binding-darwin-arm64": "1.58.0", "@oxlint/binding-darwin-x64": "1.58.0", "@oxlint/binding-freebsd-x64": "1.58.0", "@oxlint/binding-linux-arm-gnueabihf": "1.58.0", "@oxlint/binding-linux-arm-musleabihf": "1.58.0", "@oxlint/binding-linux-arm64-gnu": "1.58.0", "@oxlint/binding-linux-arm64-musl": "1.58.0", "@oxlint/binding-linux-ppc64-gnu": "1.58.0", "@oxlint/binding-linux-riscv64-gnu": "1.58.0", "@oxlint/binding-linux-riscv64-musl": "1.58.0", "@oxlint/binding-linux-s390x-gnu": "1.58.0", "@oxlint/binding-linux-x64-gnu": "1.58.0", "@oxlint/binding-linux-x64-musl": "1.58.0", "@oxlint/binding-openharmony-arm64": "1.58.0", "@oxlint/binding-win32-arm64-msvc": "1.58.0", "@oxlint/binding-win32-ia32-msvc": "1.58.0", "@oxlint/binding-win32-x64-msvc": "1.58.0" }, "peerDependencies": { "oxlint-tsgolint": ">=0.18.0" }, "optionalPeers": ["oxlint-tsgolint"], "bin": { "oxlint": "bin/oxlint" } }, "sha512-t4s9leczDMqlvOSjnbCQe7gtoLkWgBGZ7sBdCJ9EOj5IXFSG/X7OAzK4yuH4iW+4cAYe8kLFbC8tuYMwWZm+Cg=="],
+
+    "oxlint-tsgolint": ["oxlint-tsgolint@0.20.0", "", { "optionalDependencies": { "@oxlint-tsgolint/darwin-arm64": "0.20.0", "@oxlint-tsgolint/darwin-x64": "0.20.0", "@oxlint-tsgolint/linux-arm64": "0.20.0", "@oxlint-tsgolint/linux-x64": "0.20.0", "@oxlint-tsgolint/win32-arm64": "0.20.0", "@oxlint-tsgolint/win32-x64": "0.20.0" }, "bin": { "tsgolint": "bin/tsgolint.js" } }, "sha512-/Uc9TQyN1l8w9QNvXtVHYtz+SzDJHKpb5X0UnHodl0BVzijUPk0LPlDOHAvogd1UI+iy9ZSF6gQxEqfzUxCULQ=="],
+
+    "p-limit": ["p-limit@7.3.0", "", { "dependencies": { "yocto-queue": "^1.2.1" } }, "sha512-7cIXg/Z0M5WZRblrsOla88S4wAK+zOQQWeBYfV3qJuJXMr+LnbYjaadrFaS0JILfEDPVqHyKnZ1Z/1d6J9VVUw=="],
+
+    "p-queue": ["p-queue@9.1.1", "", { "dependencies": { "eventemitter3": "^5.0.1", "p-timeout": "^7.0.0" } }, "sha512-yQS1vV2V7Q14MQrgD8jMNY5owPuGgVHVdSK8NqmKpOVajnjbaeMa6uLOzTALPtvJ7Vo4bw0BGsw7qfUT8z24Ig=="],
+
+    "p-timeout": ["p-timeout@7.0.1", "", {}, "sha512-AxTM2wDGORHGEkPCt8yqxOTMgpfbEHqF51f/5fJCmwFC3C/zNcGT63SymH2ttOAaiIws2zVg4+izQCjrakcwHg=="],
+
+    "package-manager-detector": ["package-manager-detector@1.6.0", "", {}, "sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA=="],
+
+    "parse-latin": ["parse-latin@7.0.0", "", { "dependencies": { "@types/nlcst": "^2.0.0", "@types/unist": "^3.0.0", "nlcst-to-string": "^4.0.0", "unist-util-modify-children": "^4.0.0", "unist-util-visit-children": "^3.0.0", "vfile": "^6.0.0" } }, "sha512-mhHgobPPua5kZ98EF4HWiH167JWBfl4pvAIXXdbaVohtK7a6YBOy56kvhCqduqyo/f3yrHFWmqmiMg/BkBkYYQ=="],
+
+    "parse5": ["parse5@7.3.0", "", { "dependencies": { "entities": "^6.0.0" } }, "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw=="],
+
+    "piccolore": ["piccolore@0.1.3", "", {}, "sha512-o8bTeDWjE086iwKrROaDf31K0qC/BENdm15/uH9usSC/uZjJOKb2YGiVHfLY4GhwsERiPI1jmwI2XrA7ACOxVw=="],
+
+    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
+
+    "picomatch": ["picomatch@4.0.4", "", {}, "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A=="],
+
+    "pixelmatch": ["pixelmatch@7.1.0", "", { "dependencies": { "pngjs": "^7.0.0" }, "bin": { "pixelmatch": "bin/pixelmatch" } }, "sha512-1wrVzJ2STrpmONHKBy228LM1b84msXDUoAzVEl0R8Mz4Ce6EPr+IVtxm8+yvrqLYMHswREkjYFaMxnyGnaY3Ng=="],
+
+    "pngjs": ["pngjs@7.0.0", "", {}, "sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow=="],
+
+    "postcss": ["postcss@8.5.8", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg=="],
+
+    "prismjs": ["prismjs@1.30.0", "", {}, "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw=="],
+
+    "property-information": ["property-information@7.1.0", "", {}, "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ=="],
+
+    "radix3": ["radix3@1.1.2", "", {}, "sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA=="],
+
+    "range-parser": ["range-parser@1.2.1", "", {}, "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="],
+
+    "react": ["react@19.2.4", "", {}, "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ=="],
+
+    "react-dom": ["react-dom@19.2.4", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.4" } }, "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ=="],
+
+    "readdirp": ["readdirp@5.0.0", "", {}, "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ=="],
+
+    "regex": ["regex@6.1.0", "", { "dependencies": { "regex-utilities": "^2.3.0" } }, "sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg=="],
+
+    "regex-recursion": ["regex-recursion@6.0.2", "", { "dependencies": { "regex-utilities": "^2.3.0" } }, "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg=="],
+
+    "regex-utilities": ["regex-utilities@2.3.0", "", {}, "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng=="],
+
+    "rehype": ["rehype@13.0.2", "", { "dependencies": { "@types/hast": "^3.0.0", "rehype-parse": "^9.0.0", "rehype-stringify": "^10.0.0", "unified": "^11.0.0" } }, "sha512-j31mdaRFrwFRUIlxGeuPXXKWQxet52RBQRvCmzl5eCefn/KGbomK5GMHNMsOJf55fgo3qw5tST5neDuarDYR2A=="],
+
+    "rehype-parse": ["rehype-parse@9.0.1", "", { "dependencies": { "@types/hast": "^3.0.0", "hast-util-from-html": "^2.0.0", "unified": "^11.0.0" } }, "sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag=="],
+
+    "rehype-raw": ["rehype-raw@7.0.0", "", { "dependencies": { "@types/hast": "^3.0.0", "hast-util-raw": "^9.0.0", "vfile": "^6.0.0" } }, "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww=="],
+
+    "rehype-stringify": ["rehype-stringify@10.0.1", "", { "dependencies": { "@types/hast": "^3.0.0", "hast-util-to-html": "^9.0.0", "unified": "^11.0.0" } }, "sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA=="],
+
+    "remark-gfm": ["remark-gfm@4.0.1", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-gfm": "^3.0.0", "micromark-extension-gfm": "^3.0.0", "remark-parse": "^11.0.0", "remark-stringify": "^11.0.0", "unified": "^11.0.0" } }, "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg=="],
+
+    "remark-parse": ["remark-parse@11.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-from-markdown": "^2.0.0", "micromark-util-types": "^2.0.0", "unified": "^11.0.0" } }, "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA=="],
+
+    "remark-rehype": ["remark-rehype@11.1.2", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "mdast-util-to-hast": "^13.0.0", "unified": "^11.0.0", "vfile": "^6.0.0" } }, "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw=="],
+
+    "remark-smartypants": ["remark-smartypants@3.0.2", "", { "dependencies": { "retext": "^9.0.0", "retext-smartypants": "^6.0.0", "unified": "^11.0.4", "unist-util-visit": "^5.0.0" } }, "sha512-ILTWeOriIluwEvPjv67v7Blgrcx+LZOkAUVtKI3putuhlZm84FnqDORNXPPm+HY3NdZOMhyDwZ1E+eZB/Df5dA=="],
+
+    "remark-stringify": ["remark-stringify@11.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-to-markdown": "^2.0.0", "unified": "^11.0.0" } }, "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw=="],
+
+    "retext": ["retext@9.0.0", "", { "dependencies": { "@types/nlcst": "^2.0.0", "retext-latin": "^4.0.0", "retext-stringify": "^4.0.0", "unified": "^11.0.0" } }, "sha512-sbMDcpHCNjvlheSgMfEcVrZko3cDzdbe1x/e7G66dFp0Ff7Mldvi2uv6JkJQzdRcvLYE8CA8Oe8siQx8ZOgTcA=="],
+
+    "retext-latin": ["retext-latin@4.0.0", "", { "dependencies": { "@types/nlcst": "^2.0.0", "parse-latin": "^7.0.0", "unified": "^11.0.0" } }, "sha512-hv9woG7Fy0M9IlRQloq/N6atV82NxLGveq+3H2WOi79dtIYWN8OaxogDm77f8YnVXJL2VD3bbqowu5E3EMhBYA=="],
+
+    "retext-smartypants": ["retext-smartypants@6.2.0", "", { "dependencies": { "@types/nlcst": "^2.0.0", "nlcst-to-string": "^4.0.0", "unist-util-visit": "^5.0.0" } }, "sha512-kk0jOU7+zGv//kfjXEBjdIryL1Acl4i9XNkHxtM7Tm5lFiCog576fjNC9hjoR7LTKQ0DsPWy09JummSsH1uqfQ=="],
+
+    "retext-stringify": ["retext-stringify@4.0.0", "", { "dependencies": { "@types/nlcst": "^2.0.0", "nlcst-to-string": "^4.0.0", "unified": "^11.0.0" } }, "sha512-rtfN/0o8kL1e+78+uxPTqu1Klt0yPzKuQ2BfWwwfgIUSayyzxpM1PJzkKt4V8803uB9qSy32MvI7Xep9khTpiA=="],
+
+    "rolldown": ["rolldown@1.0.0-rc.12", "", { "dependencies": { "@oxc-project/types": "=0.122.0", "@rolldown/pluginutils": "1.0.0-rc.12" }, "optionalDependencies": { "@rolldown/binding-android-arm64": "1.0.0-rc.12", "@rolldown/binding-darwin-arm64": "1.0.0-rc.12", "@rolldown/binding-darwin-x64": "1.0.0-rc.12", "@rolldown/binding-freebsd-x64": "1.0.0-rc.12", "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.12", "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.12", "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-x64-musl": "1.0.0-rc.12", "@rolldown/binding-openharmony-arm64": "1.0.0-rc.12", "@rolldown/binding-wasm32-wasi": "1.0.0-rc.12", "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.12", "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.12" }, "bin": { "rolldown": "bin/cli.mjs" } }, "sha512-yP4USLIMYrwpPHEFB5JGH1uxhcslv6/hL0OyvTuY+3qlOSJvZ7ntYnoWpehBxufkgN0cvXxppuTu5hHa/zPh+A=="],
+
+    "rollup": ["rollup@4.60.1", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.60.1", "@rollup/rollup-android-arm64": "4.60.1", "@rollup/rollup-darwin-arm64": "4.60.1", "@rollup/rollup-darwin-x64": "4.60.1", "@rollup/rollup-freebsd-arm64": "4.60.1", "@rollup/rollup-freebsd-x64": "4.60.1", "@rollup/rollup-linux-arm-gnueabihf": "4.60.1", "@rollup/rollup-linux-arm-musleabihf": "4.60.1", "@rollup/rollup-linux-arm64-gnu": "4.60.1", "@rollup/rollup-linux-arm64-musl": "4.60.1", "@rollup/rollup-linux-loong64-gnu": "4.60.1", "@rollup/rollup-linux-loong64-musl": "4.60.1", "@rollup/rollup-linux-ppc64-gnu": "4.60.1", "@rollup/rollup-linux-ppc64-musl": "4.60.1", "@rollup/rollup-linux-riscv64-gnu": "4.60.1", "@rollup/rollup-linux-riscv64-musl": "4.60.1", "@rollup/rollup-linux-s390x-gnu": "4.60.1", "@rollup/rollup-linux-x64-gnu": "4.60.1", "@rollup/rollup-linux-x64-musl": "4.60.1", "@rollup/rollup-openbsd-x64": "4.60.1", "@rollup/rollup-openharmony-arm64": "4.60.1", "@rollup/rollup-win32-arm64-msvc": "4.60.1", "@rollup/rollup-win32-ia32-msvc": "4.60.1", "@rollup/rollup-win32-x64-gnu": "4.60.1", "@rollup/rollup-win32-x64-msvc": "4.60.1", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w=="],
+
+    "sax": ["sax@1.6.0", "", {}, "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA=="],
+
+    "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
+
+    "semver": ["semver@7.7.4", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA=="],
+
+    "send": ["send@1.2.1", "", { "dependencies": { "debug": "^4.4.3", "encodeurl": "^2.0.0", "escape-html": "^1.0.3", "etag": "^1.8.1", "fresh": "^2.0.0", "http-errors": "^2.0.1", "mime-types": "^3.0.2", "ms": "^2.1.3", "on-finished": "^2.4.1", "range-parser": "^1.2.1", "statuses": "^2.0.2" } }, "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ=="],
+
+    "seroval": ["seroval@1.5.2", "", {}, "sha512-xcRN39BdsnO9Tf+VzsE7b3JyTJASItIV1FVFewJKCFcW4s4haIKS3e6vj8PGB9qBwC7tnuOywQMdv5N4qkzi7Q=="],
+
+    "seroval-plugins": ["seroval-plugins@1.5.2", "", { "peerDependencies": { "seroval": "^1.0" } }, "sha512-qpY0Cl+fKYFn4GOf3cMiq6l72CpuVaawb6ILjubOQ+diJ54LfOWaSSPsaswN8DRPIPW4Yq+tE1k5aKd7ILyaFg=="],
+
+    "server-destroy": ["server-destroy@1.0.1", "", {}, "sha512-rb+9B5YBIEzYcD6x2VKidaa+cqYBJQKnU4oe4E3ANwRRN56yk/ua1YCJT1n21NTS8w6CcOclAKNP3PhdCXKYtQ=="],
+
+    "setprototypeof": ["setprototypeof@1.2.0", "", {}, "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="],
+
+    "sharp": ["sharp@0.34.5", "", { "dependencies": { "@img/colour": "^1.0.0", "detect-libc": "^2.1.2", "semver": "^7.7.3" }, "optionalDependencies": { "@img/sharp-darwin-arm64": "0.34.5", "@img/sharp-darwin-x64": "0.34.5", "@img/sharp-libvips-darwin-arm64": "1.2.4", "@img/sharp-libvips-darwin-x64": "1.2.4", "@img/sharp-libvips-linux-arm": "1.2.4", "@img/sharp-libvips-linux-arm64": "1.2.4", "@img/sharp-libvips-linux-ppc64": "1.2.4", "@img/sharp-libvips-linux-riscv64": "1.2.4", "@img/sharp-libvips-linux-s390x": "1.2.4", "@img/sharp-libvips-linux-x64": "1.2.4", "@img/sharp-libvips-linuxmusl-arm64": "1.2.4", "@img/sharp-libvips-linuxmusl-x64": "1.2.4", "@img/sharp-linux-arm": "0.34.5", "@img/sharp-linux-arm64": "0.34.5", "@img/sharp-linux-ppc64": "0.34.5", "@img/sharp-linux-riscv64": "0.34.5", "@img/sharp-linux-s390x": "0.34.5", "@img/sharp-linux-x64": "0.34.5", "@img/sharp-linuxmusl-arm64": "0.34.5", "@img/sharp-linuxmusl-x64": "0.34.5", "@img/sharp-wasm32": "0.34.5", "@img/sharp-win32-arm64": "0.34.5", "@img/sharp-win32-ia32": "0.34.5", "@img/sharp-win32-x64": "0.34.5" } }, "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg=="],
+
+    "shell-quote": ["shell-quote@1.8.3", "", {}, "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw=="],
+
+    "shiki": ["shiki@4.0.2", "", { "dependencies": { "@shikijs/core": "4.0.2", "@shikijs/engine-javascript": "4.0.2", "@shikijs/engine-oniguruma": "4.0.2", "@shikijs/langs": "4.0.2", "@shikijs/themes": "4.0.2", "@shikijs/types": "4.0.2", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-eAVKTMedR5ckPo4xne/PjYQYrU3qx78gtJZ+sHlXEg5IHhhoQhMfZVzetTYuaJS0L2Ef3AcCRzCHV8T0WI6nIQ=="],
+
+    "sirv": ["sirv@3.0.2", "", { "dependencies": { "@polka/url": "^1.0.0-next.24", "mrmime": "^2.0.0", "totalist": "^3.0.0" } }, "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g=="],
+
+    "sisteransi": ["sisteransi@1.0.5", "", {}, "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="],
+
+    "smol-toml": ["smol-toml@1.6.1", "", {}, "sha512-dWUG8F5sIIARXih1DTaQAX4SsiTXhInKf1buxdY9DIg4ZYPZK5nGM1VRIYmEbDbsHt7USo99xSLFu5Q1IqTmsg=="],
+
+    "solid-js": ["solid-js@1.9.12", "", { "dependencies": { "csstype": "^3.1.0", "seroval": "~1.5.0", "seroval-plugins": "~1.5.0" } }, "sha512-QzKaSJq2/iDrWR1As6MHZQ8fQkdOBf8GReYb7L5iKwMGceg7HxDcaOHk0at66tNgn9U2U7dXo8ZZpLIAmGMzgw=="],
+
+    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
+
+    "space-separated-tokens": ["space-separated-tokens@2.0.2", "", {}, "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q=="],
+
+    "statuses": ["statuses@2.0.2", "", {}, "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw=="],
+
+    "std-env": ["std-env@4.0.0", "", {}, "sha512-zUMPtQ/HBY3/50VbpkupYHbRroTRZJPRLvreamgErJVys0ceuzMkD44J/QjqhHjOzK42GQ3QZIeFG1OYfOtKqQ=="],
+
+    "stringify-entities": ["stringify-entities@4.0.4", "", { "dependencies": { "character-entities-html4": "^2.0.0", "character-entities-legacy": "^3.0.0" } }, "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg=="],
+
+    "svelte": ["svelte@5.55.1", "", { "dependencies": { "@jridgewell/remapping": "^2.3.4", "@jridgewell/sourcemap-codec": "^1.5.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/estree": "^1.0.5", "@types/trusted-types": "^2.0.7", "acorn": "^8.12.1", "aria-query": "5.3.1", "axobject-query": "^4.1.0", "clsx": "^2.1.1", "devalue": "^5.6.4", "esm-env": "^1.2.1", "esrap": "^2.2.4", "is-reference": "^3.0.3", "locate-character": "^3.0.0", "magic-string": "^0.30.11", "zimmerframe": "^1.1.2" } }, "sha512-QjvU7EFemf6mRzdMGlAFttMWtAAVXrax61SZYHdkD6yoVGQ89VeyKfZD4H1JrV1WLmJBxWhFch9H6ig/87VGjw=="],
+
+    "svgo": ["svgo@4.0.1", "", { "dependencies": { "commander": "^11.1.0", "css-select": "^5.1.0", "css-tree": "^3.0.1", "css-what": "^6.1.0", "csso": "^5.0.5", "picocolors": "^1.1.1", "sax": "^1.5.0" }, "bin": "./bin/svgo.js" }, "sha512-XDpWUOPC6FEibaLzjfe0ucaV0YrOjYotGJO1WpF0Zd+n6ZGEQUsSugaoLq9QkEZtAfQIxT42UChcssDVPP3+/w=="],
+
+    "tiny-inflate": ["tiny-inflate@1.0.3", "", {}, "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw=="],
+
+    "tinybench": ["tinybench@2.9.0", "", {}, "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg=="],
+
+    "tinyclip": ["tinyclip@0.1.12", "", {}, "sha512-Ae3OVUqifDw0wBriIBS7yVaW44Dp6eSHQcyq4Igc7eN2TJH/2YsicswaW+J/OuMvhpDPOKEgpAZCjkb4hpoyeA=="],
+
+    "tinyexec": ["tinyexec@1.0.4", "", {}, "sha512-u9r3uZC0bdpGOXtlxUIdwf9pkmvhqJdrVCH9fapQtgy/OeTTMZ1nqH7agtvEfmGui6e1XxjcdrlxvxJvc3sMqw=="],
+
+    "tinyglobby": ["tinyglobby@0.2.15", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.3" } }, "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ=="],
+
+    "tinypool": ["tinypool@2.1.0", "", {}, "sha512-Pugqs6M0m7Lv1I7FtxN4aoyToKg1C4tu+/381vH35y8oENM/Ai7f7C4StcoK4/+BSw9ebcS8jRiVrORFKCALLw=="],
+
+    "toidentifier": ["toidentifier@1.0.1", "", {}, "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="],
+
+    "totalist": ["totalist@3.0.1", "", {}, "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ=="],
+
+    "trim-lines": ["trim-lines@3.0.1", "", {}, "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg=="],
+
+    "trough": ["trough@2.2.0", "", {}, "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw=="],
+
+    "tsconfck": ["tsconfck@3.1.6", "", { "peerDependencies": { "typescript": "^5.0.0" }, "optionalPeers": ["typescript"], "bin": { "tsconfck": "bin/tsconfck.js" } }, "sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w=="],
+
+    "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
+
+    "ufo": ["ufo@1.6.3", "", {}, "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q=="],
+
+    "ultrahtml": ["ultrahtml@1.6.0", "", {}, "sha512-R9fBn90VTJrqqLDwyMph+HGne8eqY1iPfYhPzZrvKpIfwkWZbcYlfpsb8B9dTvBfpy1/hqAD7Wi8EKfP9e8zdw=="],
+
+    "uncrypto": ["uncrypto@0.1.3", "", {}, "sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q=="],
+
+    "undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="],
+
+    "unified": ["unified@11.0.5", "", { "dependencies": { "@types/unist": "^3.0.0", "bail": "^2.0.0", "devlop": "^1.0.0", "extend": "^3.0.0", "is-plain-obj": "^4.0.0", "trough": "^2.0.0", "vfile": "^6.0.0" } }, "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA=="],
+
+    "unifont": ["unifont@0.7.4", "", { "dependencies": { "css-tree": "^3.1.0", "ofetch": "^1.5.1", "ohash": "^2.0.11" } }, "sha512-oHeis4/xl42HUIeHuNZRGEvxj5AaIKR+bHPNegRq5LV1gdc3jundpONbjglKpihmJf+dswygdMJn3eftGIMemg=="],
+
+    "unist-util-find-after": ["unist-util-find-after@5.0.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0" } }, "sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ=="],
+
+    "unist-util-is": ["unist-util-is@6.0.1", "", { "dependencies": { "@types/unist": "^3.0.0" } }, "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g=="],
+
+    "unist-util-modify-children": ["unist-util-modify-children@4.0.0", "", { "dependencies": { "@types/unist": "^3.0.0", "array-iterate": "^2.0.0" } }, "sha512-+tdN5fGNddvsQdIzUF3Xx82CU9sMM+fA0dLgR9vOmT0oPT2jH+P1nd5lSqfCfXAw+93NhcXNY2qqvTUtE4cQkw=="],
+
+    "unist-util-position": ["unist-util-position@5.0.0", "", { "dependencies": { "@types/unist": "^3.0.0" } }, "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA=="],
+
+    "unist-util-remove-position": ["unist-util-remove-position@5.0.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-visit": "^5.0.0" } }, "sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q=="],
+
+    "unist-util-stringify-position": ["unist-util-stringify-position@4.0.0", "", { "dependencies": { "@types/unist": "^3.0.0" } }, "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ=="],
+
+    "unist-util-visit": ["unist-util-visit@5.1.0", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg=="],
+
+    "unist-util-visit-children": ["unist-util-visit-children@3.0.0", "", { "dependencies": { "@types/unist": "^3.0.0" } }, "sha512-RgmdTfSBOg04sdPcpTSD1jzoNBjt9a80/ZCzp5cI9n1qPzLZWF9YdvWGN2zmTumP1HWhXKdUWexjy/Wy/lJ7tA=="],
+
+    "unist-util-visit-parents": ["unist-util-visit-parents@6.0.2", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-is": "^6.0.0" } }, "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ=="],
+
+    "unstorage": ["unstorage@1.17.5", "", { "dependencies": { "anymatch": "^3.1.3", "chokidar": "^5.0.0", "destr": "^2.0.5", "h3": "^1.15.10", "lru-cache": "^11.2.7", "node-fetch-native": "^1.6.7", "ofetch": "^1.5.1", "ufo": "^1.6.3" }, "peerDependencies": { "@azure/app-configuration": "^1.8.0", "@azure/cosmos": "^4.2.0", "@azure/data-tables": "^13.3.0", "@azure/identity": "^4.6.0", "@azure/keyvault-secrets": "^4.9.0", "@azure/storage-blob": "^12.26.0", "@capacitor/preferences": "^6 || ^7 || ^8", "@deno/kv": ">=0.9.0", "@netlify/blobs": "^6.5.0 || ^7.0.0 || ^8.1.0 || ^9.0.0 || ^10.0.0", "@planetscale/database": "^1.19.0", "@upstash/redis": "^1.34.3", "@vercel/blob": ">=0.27.1", "@vercel/functions": "^2.2.12 || ^3.0.0", "@vercel/kv": "^1 || ^2 || ^3", "aws4fetch": "^1.0.20", "db0": ">=0.2.1", "idb-keyval": "^6.2.1", "ioredis": "^5.4.2", "uploadthing": "^7.4.4" }, "optionalPeers": ["@azure/app-configuration", "@azure/cosmos", "@azure/data-tables", "@azure/identity", "@azure/keyvault-secrets", "@azure/storage-blob", "@capacitor/preferences", "@deno/kv", "@netlify/blobs", "@planetscale/database", "@upstash/redis", "@vercel/blob", "@vercel/functions", "@vercel/kv", "aws4fetch", "db0", "idb-keyval", "ioredis", "uploadthing"] }, "sha512-0i3iqvRfx29hkNntHyQvJTpf5W9dQ9ZadSoRU8+xVlhVtT7jAX57fazYO9EHvcRCfBCyi5YRya7XCDOsbTgkPg=="],
+
+    "vfile": ["vfile@6.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile-message": "^4.0.0" } }, "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q=="],
+
+    "vfile-location": ["vfile-location@5.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile": "^6.0.0" } }, "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg=="],
+
+    "vfile-message": ["vfile-message@4.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw=="],
+
+    "vite": ["vite@8.0.5", "", { "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.4", "postcss": "^8.5.8", "rolldown": "1.0.0-rc.12", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.1.0", "esbuild": "^0.27.0 || ^0.28.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-nmu43Qvq9UopTRfMx2jOYW5l16pb3iDC1JH6yMuPkpVbzK0k+L7dfsEDH4jRgYFmsg0sTAqkojoZgzLMlwHsCQ=="],
+
+    "vite-plus": ["vite-plus@0.1.16", "", { "dependencies": { "@oxc-project/types": "=0.123.0", "@voidzero-dev/vite-plus-core": "0.1.16", "@voidzero-dev/vite-plus-test": "0.1.16", "oxfmt": "=0.43.0", "oxlint": "=1.58.0", "oxlint-tsgolint": "=0.20.0" }, "optionalDependencies": { "@voidzero-dev/vite-plus-darwin-arm64": "0.1.16", "@voidzero-dev/vite-plus-darwin-x64": "0.1.16", "@voidzero-dev/vite-plus-linux-arm64-gnu": "0.1.16", "@voidzero-dev/vite-plus-linux-arm64-musl": "0.1.16", "@voidzero-dev/vite-plus-linux-x64-gnu": "0.1.16", "@voidzero-dev/vite-plus-linux-x64-musl": "0.1.16", "@voidzero-dev/vite-plus-win32-arm64-msvc": "0.1.16", "@voidzero-dev/vite-plus-win32-x64-msvc": "0.1.16" }, "bin": { "oxfmt": "bin/oxfmt", "oxlint": "bin/oxlint", "vp": "bin/vp" } }, "sha512-sgYHc5zWLSDInaHb/abvEA7UOwh7sUWuyNt+Slphj55jPvzodT8Dqw115xyKwDARTuRFSpm1eo/t58qZ8/NylQ=="],
+
+    "vitefu": ["vitefu@1.1.3", "", { "peerDependencies": { "vite": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" }, "optionalPeers": ["vite"] }, "sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg=="],
+
+    "vue": ["vue@3.5.32", "", { "dependencies": { "@vue/compiler-dom": "3.5.32", "@vue/compiler-sfc": "3.5.32", "@vue/runtime-dom": "3.5.32", "@vue/server-renderer": "3.5.32", "@vue/shared": "3.5.32" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-vM4z4Q9tTafVfMAK7IVzmxg34rSzTFMyIe0UUEijUCkn9+23lj0WRfA83dg7eQZIUlgOSGrkViIaCfqSAUXsMw=="],
+
+    "web-namespaces": ["web-namespaces@2.0.1", "", {}, "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ=="],
+
+    "which-pm-runs": ["which-pm-runs@1.1.0", "", {}, "sha512-n1brCuqClxfFfq/Rb0ICg9giSZqCS+pLtccdag6C2HyufBrh3fBOiy9nb6ggRMvWOVH5GrdJskj5iGTZNxd7SA=="],
+
+    "ws": ["ws@8.20.0", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA=="],
+
+    "xxhash-wasm": ["xxhash-wasm@1.1.0", "", {}, "sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA=="],
+
+    "yargs-parser": ["yargs-parser@22.0.0", "", {}, "sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw=="],
+
+    "yocto-queue": ["yocto-queue@1.2.2", "", {}, "sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ=="],
+
+    "zimmerframe": ["zimmerframe@1.1.4", "", {}, "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ=="],
+
+    "zod": ["zod@4.3.6", "", {}, "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg=="],
+
+    "zwitch": ["zwitch@2.0.4", "", {}, "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="],
+
+    "@builder.io/qwik/vite": ["vite@7.3.2", "", { "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg=="],
+
+    "@vitejs/plugin-vue/@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.2", "", {}, "sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw=="],
+
+    "@voidzero-dev/vite-plus-test/es-module-lexer": ["es-module-lexer@1.7.0", "", {}, "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA=="],
+
+    "@vue-vapor/server-renderer/@vue/compiler-ssr": ["@vue-vapor/compiler-ssr@3.20240714.0-6608bb3", "", { "dependencies": { "@vue/compiler-dom": "npm:@vue-vapor/compiler-dom@3.20240714.0-6608bb3", "@vue/shared": "npm:@vue-vapor/shared@3.20240714.0-6608bb3" } }, "sha512-6qpFNcwjjiSBo6s+hCeaMQI8LKo4I2tB/rR9JMnzWHKOcy5hSPYZ+vikB2lYO2CfRgB8KIwJKdaBaeTJ9DqPhQ=="],
+
+    "@vue-vapor/server-renderer/@vue/shared": ["@vue-vapor/shared@3.20240714.0-6608bb3", "", {}, "sha512-ZZDvRm/PEcS9lS07h23IcsvsV2E6tYO+K/MP7N84ZJ36ytyaWrYvmgVaW5J8kbdmrvKEGsp9xOw5aYk9aTCLng=="],
+
+    "@vue-vapor/server-renderer/vue": ["@vue-vapor/vue@3.20240714.0-6608bb3", "", { "dependencies": { "@vue/compiler-dom": "npm:@vue-vapor/compiler-dom@3.20240714.0-6608bb3", "@vue/compiler-sfc": "npm:@vue-vapor/compiler-sfc@3.20240714.0-6608bb3", "@vue/runtime-dom": "npm:@vue-vapor/runtime-dom@3.20240714.0-6608bb3", "@vue/server-renderer": "npm:@vue-vapor/server-renderer@3.20240714.0-6608bb3", "@vue/shared": "npm:@vue-vapor/shared@3.20240714.0-6608bb3", "@vue/vapor": "npm:@vue-vapor/vapor@3.20240714.0-6608bb3" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-smCc6HYzlgrvJQ3Ly8uh1x6H8yH8zl2JMMg1M4CREwtDWTm5VWHPpdSq176L5dYDfZOvYYOV2pmnZzrrNytZjg=="],
+
+    "@vue/compiler-vapor/@vue/compiler-dom": ["@vue-vapor/compiler-dom@3.20240714.0-6608bb3", "", { "dependencies": { "@vue/compiler-core": "npm:@vue-vapor/compiler-core@3.20240714.0-6608bb3", "@vue/shared": "npm:@vue-vapor/shared@3.20240714.0-6608bb3" } }, "sha512-7rbrVpW5bNqyyz2BCO3ewXF4wIZVlxdMVLRa7zVEiMNnfLdZma9Q8Ww4E3svZhWFbPxytrNX4f/Da8jmeYX9Hg=="],
+
+    "@vue/compiler-vapor/@vue/shared": ["@vue-vapor/shared@3.20240714.0-6608bb3", "", {}, "sha512-ZZDvRm/PEcS9lS07h23IcsvsV2E6tYO+K/MP7N84ZJ36ytyaWrYvmgVaW5J8kbdmrvKEGsp9xOw5aYk9aTCLng=="],
+
+    "@vue/runtime-vapor/@vue/reactivity": ["@vue-vapor/reactivity@3.20240714.0-6608bb3", "", { "dependencies": { "@vue/shared": "npm:@vue-vapor/shared@3.20240714.0-6608bb3" } }, "sha512-5jF87WPMUS3k9vTOMKthcNGxSkb8vk2LKi8wnl3d5wfyHhCK/PGsvspDxz6vF2TzPPtkmGn+IVWkWLdWSfjIPA=="],
+
+    "@vue/runtime-vapor/@vue/shared": ["@vue-vapor/shared@3.20240714.0-6608bb3", "", {}, "sha512-ZZDvRm/PEcS9lS07h23IcsvsV2E6tYO+K/MP7N84ZJ36ytyaWrYvmgVaW5J8kbdmrvKEGsp9xOw5aYk9aTCLng=="],
+
+    "anymatch/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
+
+    "astro/vite": ["vite@7.3.2", "", { "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg=="],
+
+    "csso/css-tree": ["css-tree@2.2.1", "", { "dependencies": { "mdn-data": "2.0.28", "source-map-js": "^1.0.1" } }, "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA=="],
+
+    "dom-serializer/entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
+
+    "parse5/entities": ["entities@6.0.1", "", {}, "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g=="],
+
+    "rolldown/@oxc-project/types": ["@oxc-project/types@0.122.0", "", {}, "sha512-oLAl5kBpV4w69UtFZ9xqcmTi+GENWOcPF7FCrczTiBbmC0ibXxCwyvZGbO39rCVEuLGAZM84DH0pUIyyv/YJzA=="],
+
+    "rolldown/@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.12", "", {}, "sha512-HHMwmarRKvoFsJorqYlFeFRzXZqCt2ETQlEDOb9aqssrnVBB1/+xgTGtuTrIk5vzLNX1MjMtTf7W9z3tsSbrxw=="],
+
+    "svelte/aria-query": ["aria-query@5.3.1", "", {}, "sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g=="],
+
+    "@vue-vapor/server-renderer/@vue/compiler-ssr/@vue/compiler-dom": ["@vue-vapor/compiler-dom@3.20240714.0-6608bb3", "", { "dependencies": { "@vue/compiler-core": "npm:@vue-vapor/compiler-core@3.20240714.0-6608bb3", "@vue/shared": "npm:@vue-vapor/shared@3.20240714.0-6608bb3" } }, "sha512-7rbrVpW5bNqyyz2BCO3ewXF4wIZVlxdMVLRa7zVEiMNnfLdZma9Q8Ww4E3svZhWFbPxytrNX4f/Da8jmeYX9Hg=="],
+
+    "@vue-vapor/server-renderer/vue/@vue/compiler-dom": ["@vue-vapor/compiler-dom@3.20240714.0-6608bb3", "", { "dependencies": { "@vue/compiler-core": "npm:@vue-vapor/compiler-core@3.20240714.0-6608bb3", "@vue/shared": "npm:@vue-vapor/shared@3.20240714.0-6608bb3" } }, "sha512-7rbrVpW5bNqyyz2BCO3ewXF4wIZVlxdMVLRa7zVEiMNnfLdZma9Q8Ww4E3svZhWFbPxytrNX4f/Da8jmeYX9Hg=="],
+
+    "@vue-vapor/server-renderer/vue/@vue/compiler-sfc": ["@vue-vapor/compiler-sfc@3.20240714.0-6608bb3", "", { "dependencies": { "@babel/parser": "^7.24.7", "@vue/compiler-core": "npm:@vue-vapor/compiler-core@3.20240714.0-6608bb3", "@vue/compiler-dom": "npm:@vue-vapor/compiler-dom@3.20240714.0-6608bb3", "@vue/compiler-ssr": "npm:@vue-vapor/compiler-ssr@3.20240714.0-6608bb3", "@vue/compiler-vapor": "npm:@vue-vapor/compiler-vapor@3.20240714.0-6608bb3", "@vue/shared": "npm:@vue-vapor/shared@3.20240714.0-6608bb3", "estree-walker": "^2.0.2", "magic-string": "^0.30.10", "postcss": "^8.4.38", "source-map-js": "^1.2.0" } }, "sha512-+Naoc8118R+bWz3Ei4Y09Jx5hNDC5A3YzWg1YUSNcFKtLL5RZwUdNtDxouj4xshI+DFMv2R8QFY0CXeY3f196A=="],
+
+    "@vue-vapor/server-renderer/vue/@vue/runtime-dom": ["@vue-vapor/runtime-dom@3.20240714.0-6608bb3", "", { "dependencies": { "@vue/reactivity": "npm:@vue-vapor/reactivity@3.20240714.0-6608bb3", "@vue/runtime-core": "npm:@vue-vapor/runtime-core@3.20240714.0-6608bb3", "@vue/shared": "npm:@vue-vapor/shared@3.20240714.0-6608bb3", "csstype": "^3.1.3" } }, "sha512-PtTo4+dk1JOkV6VGMrTw4X2VIP286CRs5CfYnPgxcUbR6j1SrXviTbhdD8XHBqyd6ZjEOJigLjm/4DBOV0qdZA=="],
+
+    "@vue-vapor/server-renderer/vue/@vue/server-renderer": ["@vue-vapor/server-renderer@3.20240714.0-6608bb3", "", { "dependencies": { "@vue/compiler-ssr": "npm:@vue-vapor/compiler-ssr@3.20240714.0-6608bb3", "@vue/shared": "npm:@vue-vapor/shared@3.20240714.0-6608bb3" }, "peerDependencies": { "vue": "npm:@vue-vapor/vue@3.20240714.0-6608bb3" } }, "sha512-UyxN80FXKeA8z7aucvtJ3T/2KlTsaC2BShBiB8jx3RJppqCdw32/HlOff96xH+8N+5eMu82IKyb4JgaEOHpXzQ=="],
+
+    "@vue/compiler-vapor/@vue/compiler-dom/@vue/compiler-core": ["@vue-vapor/compiler-core@3.20240714.0-6608bb3", "", { "dependencies": { "@babel/parser": "^7.24.7", "@vue/shared": "npm:@vue-vapor/shared@3.20240714.0-6608bb3", "entities": "^4.5.0", "estree-walker": "^2.0.2", "source-map-js": "^1.2.0" } }, "sha512-Cslp8odqclDHAKe04nodrVLi8vzsnc7Vku9P3HzuK8rBTmMozvguWGUwFEzQ15Pr/Y3zqF6ld9g2Wwzkg2S7pA=="],
+
+    "csso/css-tree/mdn-data": ["mdn-data@2.0.28", "", {}, "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="],
+
+    "@vue-vapor/server-renderer/@vue/compiler-ssr/@vue/compiler-dom/@vue/compiler-core": ["@vue-vapor/compiler-core@3.20240714.0-6608bb3", "", { "dependencies": { "@babel/parser": "^7.24.7", "@vue/shared": "npm:@vue-vapor/shared@3.20240714.0-6608bb3", "entities": "^4.5.0", "estree-walker": "^2.0.2", "source-map-js": "^1.2.0" } }, "sha512-Cslp8odqclDHAKe04nodrVLi8vzsnc7Vku9P3HzuK8rBTmMozvguWGUwFEzQ15Pr/Y3zqF6ld9g2Wwzkg2S7pA=="],
+
+    "@vue-vapor/server-renderer/vue/@vue/compiler-dom/@vue/compiler-core": ["@vue-vapor/compiler-core@3.20240714.0-6608bb3", "", { "dependencies": { "@babel/parser": "^7.24.7", "@vue/shared": "npm:@vue-vapor/shared@3.20240714.0-6608bb3", "entities": "^4.5.0", "estree-walker": "^2.0.2", "source-map-js": "^1.2.0" } }, "sha512-Cslp8odqclDHAKe04nodrVLi8vzsnc7Vku9P3HzuK8rBTmMozvguWGUwFEzQ15Pr/Y3zqF6ld9g2Wwzkg2S7pA=="],
+
+    "@vue-vapor/server-renderer/vue/@vue/compiler-sfc/@vue/compiler-core": ["@vue-vapor/compiler-core@3.20240714.0-6608bb3", "", { "dependencies": { "@babel/parser": "^7.24.7", "@vue/shared": "npm:@vue-vapor/shared@3.20240714.0-6608bb3", "entities": "^4.5.0", "estree-walker": "^2.0.2", "source-map-js": "^1.2.0" } }, "sha512-Cslp8odqclDHAKe04nodrVLi8vzsnc7Vku9P3HzuK8rBTmMozvguWGUwFEzQ15Pr/Y3zqF6ld9g2Wwzkg2S7pA=="],
+
+    "@vue-vapor/server-renderer/vue/@vue/runtime-dom/@vue/reactivity": ["@vue-vapor/reactivity@3.20240714.0-6608bb3", "", { "dependencies": { "@vue/shared": "npm:@vue-vapor/shared@3.20240714.0-6608bb3" } }, "sha512-5jF87WPMUS3k9vTOMKthcNGxSkb8vk2LKi8wnl3d5wfyHhCK/PGsvspDxz6vF2TzPPtkmGn+IVWkWLdWSfjIPA=="],
+
+    "@vue-vapor/server-renderer/vue/@vue/runtime-dom/@vue/runtime-core": ["@vue-vapor/runtime-core@3.20240714.0-6608bb3", "", { "dependencies": { "@vue/reactivity": "npm:@vue-vapor/reactivity@3.20240714.0-6608bb3", "@vue/runtime-shared": "npm:@vue-vapor/runtime-shared@3.20240714.0-6608bb3", "@vue/shared": "npm:@vue-vapor/shared@3.20240714.0-6608bb3" } }, "sha512-z570f8gdBWX7D3ZvjWy9yzwGEeGJGsxkEFZxsc2I9fpw2ielxKZo7s1XhUY1rbKZiyBDVShke7+kkLe29BnqdA=="],
+
+    "@vue/compiler-vapor/@vue/compiler-dom/@vue/compiler-core/entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
+
+    "@vue-vapor/server-renderer/@vue/compiler-ssr/@vue/compiler-dom/@vue/compiler-core/entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
+
+    "@vue-vapor/server-renderer/vue/@vue/compiler-dom/@vue/compiler-core/entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
+
+    "@vue-vapor/server-renderer/vue/@vue/compiler-sfc/@vue/compiler-core/entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
+  }
+}
diff --git a/benchmarks/cases.js b/benchmarks/cases.js
new file mode 100644
index 0000000..45d4b32
--- /dev/null
+++ b/benchmarks/cases.js
@@ -0,0 +1,38 @@
+export const benchmarkCases = [
+  {
+    name: 'astro',
+    loadRender: async () => (await import('./apps/astro/render.js')).render,
+  },
+  {
+    name: 'react',
+    loadRender: async () => (await import('./apps/react/render.js')).render,
+  },
+  {
+    name: 'qwik',
+    loadRender: async () => (await import('./apps/qwik/render.js')).render,
+  },
+  {
+    name: 'eclipsa',
+    loadRender: async () => (await import('./apps/eclipsa/render.js')).render,
+  },
+  {
+    name: 'hono',
+    loadRender: async () => (await import('./apps/hono/render.js')).render,
+  },
+  {
+    name: 'solid',
+    loadRender: async () => (await import('./apps/solid/render.js')).render,
+  },
+  {
+    name: 'svelte',
+    loadRender: async () => (await import('./apps/svelte/render.js')).render,
+  },
+  {
+    name: 'vue',
+    loadRender: async () => (await import('./apps/vue/render.js')).render,
+  },
+  {
+    name: 'vue-vapor',
+    loadRender: async () => (await import('./apps/vue-vapor/render.js')).render,
+  },
+]
diff --git a/benchmarks/cases.test.ts b/benchmarks/cases.test.ts
new file mode 100644
index 0000000..5ffd994
--- /dev/null
+++ b/benchmarks/cases.test.ts
@@ -0,0 +1,23 @@
+import { expect, test } from 'bun:test'
+import { benchmarkCases } from './cases.js'
+
+test('benchmarkCases includes Astro and Qwik', () => {
+  expect(benchmarkCases.map((entry) => entry.name)).toEqual([
+    'astro',
+    'react',
+    'qwik',
+    'eclipsa',
+    'hono',
+    'solid',
+    'svelte',
+    'vue',
+    'vue-vapor',
+  ])
+})
+
+test('eclipsa benchmark render can be loaded without workspace package resolution', async () => {
+  const eclipsaCase = benchmarkCases.find((entry) => entry.name === 'eclipsa')
+
+  expect(eclipsaCase).toBeDefined()
+  expect(await eclipsaCase.loadRender()).toBeFunction()
+})
diff --git a/benchmarks/data.ts b/benchmarks/data.ts
new file mode 100644
index 0000000..f13792a
--- /dev/null
+++ b/benchmarks/data.ts
@@ -0,0 +1,9 @@
+export const createData = () => {
+  return Array.from({ length: 1000 })
+    .fill(0)
+    .map((_, i) => ({
+      id: i,
+      name: `Item ${i}`,
+      value: Math.random(),
+    }))
+}
diff --git a/benchmarks/deno.import-map.json b/benchmarks/deno.import-map.json
new file mode 100644
index 0000000..2d7cc2f
--- /dev/null
+++ b/benchmarks/deno.import-map.json
@@ -0,0 +1,12 @@
+{
+  "imports": {
+    "child_process": "node:child_process",
+    "crypto": "node:crypto",
+    "fs": "node:fs",
+    "path": "node:path",
+    "stream": "node:stream",
+    "tty": "node:tty",
+    "url": "node:url",
+    "util": "node:util"
+  }
+}
diff --git a/benchmarks/deno.lock b/benchmarks/deno.lock
new file mode 100644
index 0000000..a066d89
--- /dev/null
+++ b/benchmarks/deno.lock
@@ -0,0 +1,3392 @@
+{
+  "version": "5",
+  "specifiers": {
+    "npm:@astrojs/node@^10.0.4": "10.0.4_astro@6.1.5__@types+node@24.12.2__typescript@5.9.3_@types+node@24.12.2_typescript@5.9.3",
+    "npm:@builder.io/qwik@^1.19.2": "1.19.2_vite@8.0.8__@types+node@24.12.2_@types+node@24.12.2",
+    "npm:@sveltejs/vite-plugin-svelte@^6.2.1": "6.2.4_svelte@5.55.2_vite@8.0.8__@types+node@24.12.2_@types+node@24.12.2",
+    "npm:@types/bun@latest": "1.3.11",
+    "npm:@types/node@^24.5.2": "24.12.2",
+    "npm:@types/react-dom@^19.2.3": "19.2.3_@types+react@19.2.14",
+    "npm:@vitejs/plugin-react@^6.0.1": "6.0.1_vite@8.0.8__@types+node@24.12.2_@types+node@24.12.2",
+    "npm:@vitejs/plugin-vue@^6.0.5": "6.0.5_vite@8.0.8__@types+node@24.12.2_vue@3.5.32__typescript@5.9.3_@types+node@24.12.2_typescript@5.9.3",
+    "npm:@vue-vapor/server-renderer@3.20240714.0-6608bb3": "3.20240714.0-6608bb3_vue@3.5.32__typescript@5.9.3_typescript@5.9.3",
+    "npm:@vue-vapor/vapor@3.20240714.0-6608bb3": "3.20240714.0-6608bb3",
+    "npm:@vue-vapor/vite-plugin-vue@0.0.0-alpha.6": "0.0.0-alpha.6_vite@8.0.8__@types+node@24.12.2_vue@3.5.32__typescript@5.9.3_@types+node@24.12.2_typescript@5.9.3",
+    "npm:@vue/server-renderer@^3.5.22": "3.5.32_vue@3.5.32__typescript@5.9.3_typescript@5.9.3",
+    "npm:astro@^6.1.4": "6.1.5_@types+node@24.12.2_typescript@5.9.3",
+    "npm:hono@^4.10.4": "4.12.12",
+    "npm:hono@^4.6.4": "4.12.12",
+    "npm:mitata@^1.0.34": "1.0.34",
+    "npm:react-dom@^19.2.4": "19.2.5_react@19.2.5",
+    "npm:react@^19.2.4": "19.2.5",
+    "npm:solid-js@^1.9.9": "1.9.12",
+    "npm:svelte@^5.40.1": "5.55.2",
+    "npm:typescript@^5.9.2": "5.9.3",
+    "npm:vite-plus@~0.1.16": "0.1.16_@types+node@24.12.2_typescript@5.9.3_vite@8.0.8__@types+node@24.12.2",
+    "npm:vite@^8.0.5": "8.0.8_@types+node@24.12.2",
+    "npm:vite@latest": "8.0.8_@types+node@24.12.2",
+    "npm:vue@^3.5.22": "3.5.32_typescript@5.9.3"
+  },
+  "npm": {
+    "@astrojs/compiler@3.0.1": {
+      "integrity": "sha512-z97oYbdebO5aoWzuJ/8q5hLK232+17KcLZ7cJ8BCWk6+qNzVxn/gftC0KzMBUTD8WAaBkPpNSQK6PXLnNrZ0CA=="
+    },
+    "@astrojs/internal-helpers@0.8.0": {
+      "integrity": "sha512-J56GrhEiV+4dmrGLPNOl2pZjpHXAndWVyiVDYGDuw6MWKpBSEMLdFxHzeM/6sqaknw9M+HFfHZAcvi3OfT3D/w==",
+      "dependencies": [
+        "picomatch@4.0.4"
+      ]
+    },
+    "@astrojs/markdown-remark@7.1.0": {
+      "integrity": "sha512-P+HnCsu2js3BoTc8kFmu+E9gOcFeMdPris75g+Zl4sY8+bBRbSQV6xzcBDbZ27eE7yBGEGQoqjpChx+KJYIPYQ==",
+      "dependencies": [
+        "@astrojs/internal-helpers",
+        "@astrojs/prism",
+        "github-slugger",
+        "hast-util-from-html",
+        "hast-util-to-text",
+        "js-yaml",
+        "mdast-util-definitions",
+        "rehype-raw",
+        "rehype-stringify",
+        "remark-gfm",
+        "remark-parse",
+        "remark-rehype",
+        "remark-smartypants",
+        "retext-smartypants",
+        "shiki",
+        "smol-toml",
+        "unified",
+        "unist-util-remove-position",
+        "unist-util-visit",
+        "unist-util-visit-parents",
+        "vfile"
+      ]
+    },
+    "@astrojs/node@10.0.4_astro@6.1.5__@types+node@24.12.2__typescript@5.9.3_@types+node@24.12.2_typescript@5.9.3": {
+      "integrity": "sha512-7pVgiVSscQHRC2WqjlXcnbbcKMYp2GXrYpmuvdGg5zgA8J1lFm2vmwVhHZFuZK3Ik5PzoxiDROaEgoDGLbfhLw==",
+      "dependencies": [
+        "@astrojs/internal-helpers",
+        "astro",
+        "send",
+        "server-destroy"
+      ]
+    },
+    "@astrojs/prism@4.0.1": {
+      "integrity": "sha512-nksZQVjlferuWzhPsBpQ1JE5XuKAf1id1/9Hj4a9KG4+ofrlzxUUwX4YGQF/SuDiuiGKEnzopGOt38F3AnVWsQ==",
+      "dependencies": [
+        "prismjs"
+      ]
+    },
+    "@astrojs/telemetry@3.3.0": {
+      "integrity": "sha512-UFBgfeldP06qu6khs/yY+q1cDAaArM2/7AEIqQ9Cuvf7B1hNLq0xDrZkct+QoIGyjq56y8IaE2I3CTvG99mlhQ==",
+      "dependencies": [
+        "ci-info",
+        "debug",
+        "dlv",
+        "dset",
+        "is-docker",
+        "is-wsl",
+        "which-pm-runs"
+      ]
+    },
+    "@babel/helper-string-parser@7.27.1": {
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="
+    },
+    "@babel/helper-validator-identifier@7.28.5": {
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="
+    },
+    "@babel/parser@7.29.2": {
+      "integrity": "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==",
+      "dependencies": [
+        "@babel/types"
+      ],
+      "bin": true
+    },
+    "@babel/types@7.29.0": {
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "dependencies": [
+        "@babel/helper-string-parser",
+        "@babel/helper-validator-identifier"
+      ]
+    },
+    "@builder.io/qwik@1.19.2_vite@8.0.8__@types+node@24.12.2_@types+node@24.12.2": {
+      "integrity": "sha512-aLQIZm3BdX6jStSR6XdXhT9jQo5JN9bxuYJOD8p5IhZxBNgjQaRwIfZkXksgs6RkzdTsSpXo5+G6lkb/jMZQsg==",
+      "dependencies": [
+        "csstype",
+        "launch-editor",
+        "rollup",
+        "vite@8.0.8_@types+node@24.12.2"
+      ],
+      "bin": true
+    },
+    "@capsizecss/unpack@4.0.0": {
+      "integrity": "sha512-VERIM64vtTP1C4mxQ5thVT9fK0apjPFobqybMtA1UdUujWka24ERHbRHFGmpbbhp73MhV+KSsHQH9C6uOTdEQA==",
+      "dependencies": [
+        "fontkitten"
+      ]
+    },
+    "@clack/core@1.2.0": {
+      "integrity": "sha512-qfxof/3T3t9DPU/Rj3OmcFyZInceqj/NVtO9rwIuJqCUgh32gwPjpFQQp/ben07qKlhpwq7GzfWpST4qdJ5Drg==",
+      "dependencies": [
+        "fast-wrap-ansi",
+        "sisteransi"
+      ]
+    },
+    "@clack/prompts@1.2.0": {
+      "integrity": "sha512-4jmztR9fMqPMjz6H/UZXj0zEmE43ha1euENwkckKKel4XpSfokExPo5AiVStdHSAlHekz4d0CA/r45Ok1E4D3w==",
+      "dependencies": [
+        "@clack/core",
+        "fast-string-width",
+        "fast-wrap-ansi",
+        "sisteransi"
+      ]
+    },
+    "@emnapi/core@1.9.2": {
+      "integrity": "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==",
+      "dependencies": [
+        "@emnapi/wasi-threads",
+        "tslib"
+      ]
+    },
+    "@emnapi/runtime@1.9.2": {
+      "integrity": "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==",
+      "dependencies": [
+        "tslib"
+      ]
+    },
+    "@emnapi/wasi-threads@1.2.1": {
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dependencies": [
+        "tslib"
+      ]
+    },
+    "@esbuild/aix-ppc64@0.27.7": {
+      "integrity": "sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==",
+      "os": ["aix"],
+      "cpu": ["ppc64"]
+    },
+    "@esbuild/android-arm64@0.27.7": {
+      "integrity": "sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==",
+      "os": ["android"],
+      "cpu": ["arm64"]
+    },
+    "@esbuild/android-arm@0.27.7": {
+      "integrity": "sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==",
+      "os": ["android"],
+      "cpu": ["arm"]
+    },
+    "@esbuild/android-x64@0.27.7": {
+      "integrity": "sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==",
+      "os": ["android"],
+      "cpu": ["x64"]
+    },
+    "@esbuild/darwin-arm64@0.27.7": {
+      "integrity": "sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==",
+      "os": ["darwin"],
+      "cpu": ["arm64"]
+    },
+    "@esbuild/darwin-x64@0.27.7": {
+      "integrity": "sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==",
+      "os": ["darwin"],
+      "cpu": ["x64"]
+    },
+    "@esbuild/freebsd-arm64@0.27.7": {
+      "integrity": "sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==",
+      "os": ["freebsd"],
+      "cpu": ["arm64"]
+    },
+    "@esbuild/freebsd-x64@0.27.7": {
+      "integrity": "sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==",
+      "os": ["freebsd"],
+      "cpu": ["x64"]
+    },
+    "@esbuild/linux-arm64@0.27.7": {
+      "integrity": "sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@esbuild/linux-arm@0.27.7": {
+      "integrity": "sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==",
+      "os": ["linux"],
+      "cpu": ["arm"]
+    },
+    "@esbuild/linux-ia32@0.27.7": {
+      "integrity": "sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==",
+      "os": ["linux"],
+      "cpu": ["ia32"]
+    },
+    "@esbuild/linux-loong64@0.27.7": {
+      "integrity": "sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==",
+      "os": ["linux"],
+      "cpu": ["loong64"]
+    },
+    "@esbuild/linux-mips64el@0.27.7": {
+      "integrity": "sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==",
+      "os": ["linux"],
+      "cpu": ["mips64el"]
+    },
+    "@esbuild/linux-ppc64@0.27.7": {
+      "integrity": "sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==",
+      "os": ["linux"],
+      "cpu": ["ppc64"]
+    },
+    "@esbuild/linux-riscv64@0.27.7": {
+      "integrity": "sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==",
+      "os": ["linux"],
+      "cpu": ["riscv64"]
+    },
+    "@esbuild/linux-s390x@0.27.7": {
+      "integrity": "sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==",
+      "os": ["linux"],
+      "cpu": ["s390x"]
+    },
+    "@esbuild/linux-x64@0.27.7": {
+      "integrity": "sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@esbuild/netbsd-arm64@0.27.7": {
+      "integrity": "sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==",
+      "os": ["netbsd"],
+      "cpu": ["arm64"]
+    },
+    "@esbuild/netbsd-x64@0.27.7": {
+      "integrity": "sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==",
+      "os": ["netbsd"],
+      "cpu": ["x64"]
+    },
+    "@esbuild/openbsd-arm64@0.27.7": {
+      "integrity": "sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==",
+      "os": ["openbsd"],
+      "cpu": ["arm64"]
+    },
+    "@esbuild/openbsd-x64@0.27.7": {
+      "integrity": "sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==",
+      "os": ["openbsd"],
+      "cpu": ["x64"]
+    },
+    "@esbuild/openharmony-arm64@0.27.7": {
+      "integrity": "sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==",
+      "os": ["openharmony"],
+      "cpu": ["arm64"]
+    },
+    "@esbuild/sunos-x64@0.27.7": {
+      "integrity": "sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==",
+      "os": ["sunos"],
+      "cpu": ["x64"]
+    },
+    "@esbuild/win32-arm64@0.27.7": {
+      "integrity": "sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==",
+      "os": ["win32"],
+      "cpu": ["arm64"]
+    },
+    "@esbuild/win32-ia32@0.27.7": {
+      "integrity": "sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==",
+      "os": ["win32"],
+      "cpu": ["ia32"]
+    },
+    "@esbuild/win32-x64@0.27.7": {
+      "integrity": "sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==",
+      "os": ["win32"],
+      "cpu": ["x64"]
+    },
+    "@img/colour@1.1.0": {
+      "integrity": "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ=="
+    },
+    "@img/sharp-darwin-arm64@0.34.5": {
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "optionalDependencies": [
+        "@img/sharp-libvips-darwin-arm64"
+      ],
+      "os": ["darwin"],
+      "cpu": ["arm64"]
+    },
+    "@img/sharp-darwin-x64@0.34.5": {
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "optionalDependencies": [
+        "@img/sharp-libvips-darwin-x64"
+      ],
+      "os": ["darwin"],
+      "cpu": ["x64"]
+    },
+    "@img/sharp-libvips-darwin-arm64@1.2.4": {
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "os": ["darwin"],
+      "cpu": ["arm64"]
+    },
+    "@img/sharp-libvips-darwin-x64@1.2.4": {
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "os": ["darwin"],
+      "cpu": ["x64"]
+    },
+    "@img/sharp-libvips-linux-arm64@1.2.4": {
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@img/sharp-libvips-linux-arm@1.2.4": {
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "os": ["linux"],
+      "cpu": ["arm"]
+    },
+    "@img/sharp-libvips-linux-ppc64@1.2.4": {
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "os": ["linux"],
+      "cpu": ["ppc64"]
+    },
+    "@img/sharp-libvips-linux-riscv64@1.2.4": {
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "os": ["linux"],
+      "cpu": ["riscv64"]
+    },
+    "@img/sharp-libvips-linux-s390x@1.2.4": {
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "os": ["linux"],
+      "cpu": ["s390x"]
+    },
+    "@img/sharp-libvips-linux-x64@1.2.4": {
+      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@img/sharp-libvips-linuxmusl-arm64@1.2.4": {
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@img/sharp-libvips-linuxmusl-x64@1.2.4": {
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@img/sharp-linux-arm64@0.34.5": {
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "optionalDependencies": [
+        "@img/sharp-libvips-linux-arm64"
+      ],
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@img/sharp-linux-arm@0.34.5": {
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "optionalDependencies": [
+        "@img/sharp-libvips-linux-arm"
+      ],
+      "os": ["linux"],
+      "cpu": ["arm"]
+    },
+    "@img/sharp-linux-ppc64@0.34.5": {
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "optionalDependencies": [
+        "@img/sharp-libvips-linux-ppc64"
+      ],
+      "os": ["linux"],
+      "cpu": ["ppc64"]
+    },
+    "@img/sharp-linux-riscv64@0.34.5": {
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "optionalDependencies": [
+        "@img/sharp-libvips-linux-riscv64"
+      ],
+      "os": ["linux"],
+      "cpu": ["riscv64"]
+    },
+    "@img/sharp-linux-s390x@0.34.5": {
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "optionalDependencies": [
+        "@img/sharp-libvips-linux-s390x"
+      ],
+      "os": ["linux"],
+      "cpu": ["s390x"]
+    },
+    "@img/sharp-linux-x64@0.34.5": {
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "optionalDependencies": [
+        "@img/sharp-libvips-linux-x64"
+      ],
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@img/sharp-linuxmusl-arm64@0.34.5": {
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "optionalDependencies": [
+        "@img/sharp-libvips-linuxmusl-arm64"
+      ],
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@img/sharp-linuxmusl-x64@0.34.5": {
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "optionalDependencies": [
+        "@img/sharp-libvips-linuxmusl-x64"
+      ],
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@img/sharp-wasm32@0.34.5": {
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "dependencies": [
+        "@emnapi/runtime"
+      ],
+      "cpu": ["wasm32"]
+    },
+    "@img/sharp-win32-arm64@0.34.5": {
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "os": ["win32"],
+      "cpu": ["arm64"]
+    },
+    "@img/sharp-win32-ia32@0.34.5": {
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "os": ["win32"],
+      "cpu": ["ia32"]
+    },
+    "@img/sharp-win32-x64@0.34.5": {
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "os": ["win32"],
+      "cpu": ["x64"]
+    },
+    "@jridgewell/gen-mapping@0.3.13": {
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dependencies": [
+        "@jridgewell/sourcemap-codec",
+        "@jridgewell/trace-mapping"
+      ]
+    },
+    "@jridgewell/remapping@2.3.5": {
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dependencies": [
+        "@jridgewell/gen-mapping",
+        "@jridgewell/trace-mapping"
+      ]
+    },
+    "@jridgewell/resolve-uri@3.1.2": {
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="
+    },
+    "@jridgewell/sourcemap-codec@1.5.5": {
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="
+    },
+    "@jridgewell/trace-mapping@0.3.31": {
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dependencies": [
+        "@jridgewell/resolve-uri",
+        "@jridgewell/sourcemap-codec"
+      ]
+    },
+    "@napi-rs/wasm-runtime@1.1.3_@emnapi+core@1.9.2_@emnapi+runtime@1.9.2": {
+      "integrity": "sha512-xK9sGVbJWYb08+mTJt3/YV24WxvxpXcXtP6B172paPZ+Ts69Re9dAr7lKwJoeIx8OoeuimEiRZ7umkiUVClmmQ==",
+      "dependencies": [
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util"
+      ]
+    },
+    "@oslojs/encoding@1.1.0": {
+      "integrity": "sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ=="
+    },
+    "@oxc-project/runtime@0.123.0": {
+      "integrity": "sha512-wRf0z8saz9tHLcK3YeTeBmwISrpy4bBimvKxUmryiIhbt+ZJb0nwwJNL3D8xpeWbNfZlGSlzRBZbfcbApIGZJw=="
+    },
+    "@oxc-project/types@0.123.0": {
+      "integrity": "sha512-YtECP/y8Mj1lSHiUWGSRzy/C6teUKlS87dEfuVKT09LgQbUsBW1rNg+MiJ4buGu3yuADV60gbIvo9/HplA56Ew=="
+    },
+    "@oxc-project/types@0.124.0": {
+      "integrity": "sha512-VBFWMTBvHxS11Z5Lvlr3IWgrwhMTXV+Md+EQF0Xf60+wAdsGFTBx7X7K/hP4pi8N7dcm1RvcHwDxZ16Qx8keUg=="
+    },
+    "@oxfmt/binding-android-arm-eabi@0.43.0": {
+      "integrity": "sha512-CgU2s+/9hHZgo0IxVxrbMPrMj+tJ6VM3mD7Mr/4oiz4FNTISLoCvRmB5nk4wAAle045RtRjd86m673jwPyb1OQ==",
+      "os": ["android"],
+      "cpu": ["arm"]
+    },
+    "@oxfmt/binding-android-arm64@0.43.0": {
+      "integrity": "sha512-T9OfRwjA/EdYxAqbvR7TtqLv5nIrwPXuCtTwOHtS7aR9uXyn74ZYgzgTo6/ZwvTq9DY4W+DsV09hB2EXgn9EbA==",
+      "os": ["android"],
+      "cpu": ["arm64"]
+    },
+    "@oxfmt/binding-darwin-arm64@0.43.0": {
+      "integrity": "sha512-o3i49ZUSJWANzXMAAVY1wnqb65hn4JVzwlRQ5qfcwhRzIA8lGVaud31Q3by5ALHPrksp5QEaKCQF9aAS3TXpZA==",
+      "os": ["darwin"],
+      "cpu": ["arm64"]
+    },
+    "@oxfmt/binding-darwin-x64@0.43.0": {
+      "integrity": "sha512-vWECzzCFkb0kK6jaHjbtC5sC3adiNWtqawFCxhpvsWlzVeKmv5bNvkB4nux+o4JKWTpHCM57NDK/MeXt44txmA==",
+      "os": ["darwin"],
+      "cpu": ["x64"]
+    },
+    "@oxfmt/binding-freebsd-x64@0.43.0": {
+      "integrity": "sha512-rgz8JpkKiI/umOf7fl9gwKyQasC8bs5SYHy6g7e4SunfLBY3+8ATcD5caIg8KLGEtKFm5ujKaH8EfjcmnhzTLg==",
+      "os": ["freebsd"],
+      "cpu": ["x64"]
+    },
+    "@oxfmt/binding-linux-arm-gnueabihf@0.43.0": {
+      "integrity": "sha512-nWYnF3vIFzT4OM1qL/HSf1Yuj96aBuKWSaObXHSWliwAk2rcj7AWd6Lf7jowEBQMo4wCZVnueIGw/7C4u0KTBQ==",
+      "os": ["linux"],
+      "cpu": ["arm"]
+    },
+    "@oxfmt/binding-linux-arm-musleabihf@0.43.0": {
+      "integrity": "sha512-sFg+NWJbLfupYTF4WELHAPSnLPOn1jiDZ33Z1jfDnTaA+cC3iB35x0FMMZTFdFOz3icRIArncwCcemJFGXu6TQ==",
+      "os": ["linux"],
+      "cpu": ["arm"]
+    },
+    "@oxfmt/binding-linux-arm64-gnu@0.43.0": {
+      "integrity": "sha512-MelWqv68tX6wZEILDrTc9yewiGXe7im62+5x0bNXlCYFOZdA+VnYiJfAihbROsZ5fm90p9C3haFrqjj43XnlAA==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@oxfmt/binding-linux-arm64-musl@0.43.0": {
+      "integrity": "sha512-ROaWfYh+6BSJ1Arwy5ujijTlwnZetxDxzBpDc1oBR4d7rfrPBqzeyjd5WOudowzQUgyavl2wEpzn1hw3jWcqLA==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@oxfmt/binding-linux-ppc64-gnu@0.43.0": {
+      "integrity": "sha512-PJRs/uNxmFipJJ8+SyKHh7Y7VZIKQicqrrBzvfyM5CtKi8D7yZKTwUOZV3ffxmiC2e7l1SDJpkBEOyue5NAFsg==",
+      "os": ["linux"],
+      "cpu": ["ppc64"]
+    },
+    "@oxfmt/binding-linux-riscv64-gnu@0.43.0": {
+      "integrity": "sha512-j6biGAgzIhj+EtHXlbNumvwG7XqOIdiU4KgIWRXAEj/iUbHKukKW8eXa4MIwpQwW1YkxovduKtzEAPnjlnAhVQ==",
+      "os": ["linux"],
+      "cpu": ["riscv64"]
+    },
+    "@oxfmt/binding-linux-riscv64-musl@0.43.0": {
+      "integrity": "sha512-RYWxAcslKxvy7yri24Xm9cmD0RiANaiEPs007EFG6l9h1ChM69Q5SOzACaCoz4Z9dEplnhhneeBaTWMEdpgIbA==",
+      "os": ["linux"],
+      "cpu": ["riscv64"]
+    },
+    "@oxfmt/binding-linux-s390x-gnu@0.43.0": {
+      "integrity": "sha512-DT6Q8zfQQy3jxpezAsBACEHNUUixKSYTwdXeXojNHe4DQOoxjPdjr3Szu6BRNjxLykZM/xMNmp9ElOIyDppwtw==",
+      "os": ["linux"],
+      "cpu": ["s390x"]
+    },
+    "@oxfmt/binding-linux-x64-gnu@0.43.0": {
+      "integrity": "sha512-R8Yk7iYcuZORXmCfFZClqbDxRZgZ9/HEidUuBNdoX8Ptx07cMePnMVJ/woB84lFIDjh2ROHVaOP40Ds3rBXFqg==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@oxfmt/binding-linux-x64-musl@0.43.0": {
+      "integrity": "sha512-F2YYqyvnQNvi320RWZNAvsaWEHwmW3k4OwNJ1hZxRKXupY63expbBaNp6jAgvYs7y/g546vuQnGHQuCBhslhLQ==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@oxfmt/binding-openharmony-arm64@0.43.0": {
+      "integrity": "sha512-OE6TdietLXV3F6c7pNIhx/9YC1/2YFwjU9DPc/fbjxIX19hNIaP1rS0cFjCGJlGX+cVJwIKWe8Mos+LdQ1yAJw==",
+      "os": ["openharmony"],
+      "cpu": ["arm64"]
+    },
+    "@oxfmt/binding-win32-arm64-msvc@0.43.0": {
+      "integrity": "sha512-0nWK6a7pGkbdoypfVicmV9k/N1FwjPZENoqhlTU+5HhZnAhpIO3za30nEE33u6l6tuy9OVfpdXUqxUgZ+4lbZw==",
+      "os": ["win32"],
+      "cpu": ["arm64"]
+    },
+    "@oxfmt/binding-win32-ia32-msvc@0.43.0": {
+      "integrity": "sha512-9aokTR4Ft+tRdvgN/pKzSkVy2ksc4/dCpDm9L/xFrbIw0yhLtASLbvoG/5WOTUh/BRPPnfGTsWznEqv0dlOmhA==",
+      "os": ["win32"],
+      "cpu": ["ia32"]
+    },
+    "@oxfmt/binding-win32-x64-msvc@0.43.0": {
+      "integrity": "sha512-4bPgdQux2ZLWn3bf2TTXXMHcJB4lenmuxrLqygPmvCJ104Yqzj1UctxSRzR31TiJ4MLaG22RK8dUsVpJtrCz5g==",
+      "os": ["win32"],
+      "cpu": ["x64"]
+    },
+    "@oxlint-tsgolint/darwin-arm64@0.20.0": {
+      "integrity": "sha512-KKQcIHZHMxqpHUA1VXIbOG6chNCFkUWbQy6M+AFVtPKkA/3xAeJkJ3njoV66bfzwPHRcWQO+kcj5XqtbkjakoA==",
+      "os": ["darwin"],
+      "cpu": ["arm64"]
+    },
+    "@oxlint-tsgolint/darwin-x64@0.20.0": {
+      "integrity": "sha512-7HeVMuclGfG+NLZi2ybY0T4fMI7/XxO/208rJk+zEIloKkVnlh11Wd241JMGwgNFXn+MLJbOqOfojDb2Dt4L1g==",
+      "os": ["darwin"],
+      "cpu": ["x64"]
+    },
+    "@oxlint-tsgolint/linux-arm64@0.20.0": {
+      "integrity": "sha512-zxhUwz+WSxE6oWlZLK2z2ps9yC6ebmgoYmjAl0Oa48+GqkZ56NVgo+wb8DURNv6xrggzHStQxqQxe3mK51HZag==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@oxlint-tsgolint/linux-x64@0.20.0": {
+      "integrity": "sha512-/1l6FnahC9im8PK+Ekkx/V3yetO/PzZnJegE2FXcv/iXEhbeVxP/ouiTYcUQu9shT1FWJCSNti1VJHH+21Y1dg==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@oxlint-tsgolint/win32-arm64@0.20.0": {
+      "integrity": "sha512-oPZ5Yz8sVdo7P/5q+i3IKeix31eFZ55JAPa1+RGPoe9PoaYVsdMvR6Jvib6YtrqoJnFPlg3fjEjlEPL8VBKYJA==",
+      "os": ["win32"],
+      "cpu": ["arm64"]
+    },
+    "@oxlint-tsgolint/win32-x64@0.20.0": {
+      "integrity": "sha512-4stx8RHj3SP9vQyRF/yZbz5igtPvYMEUR8CUoha4BVNZihi39DpCR8qkU7lpjB5Ga1DRMo2pHaA4bdTOMaY4mw==",
+      "os": ["win32"],
+      "cpu": ["x64"]
+    },
+    "@oxlint/binding-android-arm-eabi@1.58.0": {
+      "integrity": "sha512-1T7UN3SsWWxpWyWGn1cT3ASNJOo+pI3eUkmEl7HgtowapcV8kslYpFQcYn431VuxghXakPNlbjRwhqmR37PFOg==",
+      "os": ["android"],
+      "cpu": ["arm"]
+    },
+    "@oxlint/binding-android-arm64@1.58.0": {
+      "integrity": "sha512-GryzujxuiRv2YFF7bRy8mKcxlbuAN+euVUtGJt9KKbLT8JBUIosamVhcthLh+VEr6KE6cjeVMAQxKAzJcoN7dg==",
+      "os": ["android"],
+      "cpu": ["arm64"]
+    },
+    "@oxlint/binding-darwin-arm64@1.58.0": {
+      "integrity": "sha512-7/bRSJIwl4GxeZL9rPZ11anNTyUO9epZrfEJH/ZMla3+/gbQ6xZixh9nOhsZ0QwsTW7/5J2A/fHbD1udC5DQQA==",
+      "os": ["darwin"],
+      "cpu": ["arm64"]
+    },
+    "@oxlint/binding-darwin-x64@1.58.0": {
+      "integrity": "sha512-EqdtJSiHweS2vfILNrpyJ6HUwpEq2g7+4Zx1FPi4hu3Hu7tC3znF6ufbXO8Ub2LD4mGgznjI7kSdku9NDD1Mkg==",
+      "os": ["darwin"],
+      "cpu": ["x64"]
+    },
+    "@oxlint/binding-freebsd-x64@1.58.0": {
+      "integrity": "sha512-VQt5TH4M42mY20F545G637RKxV/yjwVtKk2vfXuazfReSIiuvWBnv+FVSvIV5fKVTJNjt3GSJibh6JecbhGdBw==",
+      "os": ["freebsd"],
+      "cpu": ["x64"]
+    },
+    "@oxlint/binding-linux-arm-gnueabihf@1.58.0": {
+      "integrity": "sha512-fBYcj4ucwpAtjJT3oeBdFBYKvNyjRSK+cyuvBOTQjh0jvKp4yeA4S/D0IsCHus/VPaNG5L48qQkh+Vjy3HL2/Q==",
+      "os": ["linux"],
+      "cpu": ["arm"]
+    },
+    "@oxlint/binding-linux-arm-musleabihf@1.58.0": {
+      "integrity": "sha512-0BeuFfwlUHlJ1xpEdSD1YO3vByEFGPg36uLjK1JgFaxFb4W6w17F8ET8sz5cheZ4+x5f2xzdnRrrWv83E3Yd8g==",
+      "os": ["linux"],
+      "cpu": ["arm"]
+    },
+    "@oxlint/binding-linux-arm64-gnu@1.58.0": {
+      "integrity": "sha512-TXlZgnPTlxrQzxG9ZXU7BNwx1Ilrr17P3GwZY0If2EzrinqRH3zXPc3HrRcBJgcsoZNMuNL5YivtkJYgp467UQ==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@oxlint/binding-linux-arm64-musl@1.58.0": {
+      "integrity": "sha512-zSoYRo5dxHLcUx93Stl2hW3hSNjPt99O70eRVWt5A1zwJ+FPjeCCANCD2a9R4JbHsdcl11TIQOjyigcRVOH2mw==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@oxlint/binding-linux-ppc64-gnu@1.58.0": {
+      "integrity": "sha512-NQ0U/lqxH2/VxBYeAIvMNUK1y0a1bJ3ZicqkF2c6wfakbEciP9jvIE4yNzCFpZaqeIeRYaV7AVGqEO1yrfVPjA==",
+      "os": ["linux"],
+      "cpu": ["ppc64"]
+    },
+    "@oxlint/binding-linux-riscv64-gnu@1.58.0": {
+      "integrity": "sha512-X9J+kr3gIC9FT8GuZt0ekzpNUtkBVzMVU4KiKDSlocyQuEgi3gBbXYN8UkQiV77FTusLDPsovjo95YedHr+3yg==",
+      "os": ["linux"],
+      "cpu": ["riscv64"]
+    },
+    "@oxlint/binding-linux-riscv64-musl@1.58.0": {
+      "integrity": "sha512-CDze3pi1OO3Wvb/QsXjmLEY4XPKGM6kIo82ssNOgmcl1IdndF9VSGAE38YLhADWmOac7fjqhBw82LozuUVxD0Q==",
+      "os": ["linux"],
+      "cpu": ["riscv64"]
+    },
+    "@oxlint/binding-linux-s390x-gnu@1.58.0": {
+      "integrity": "sha512-b/89glbxFaEAcA6Uf1FvCNecBJEgcUTsV1quzrqXM/o4R1M4u+2KCVuyGCayN2UpsRWtGGLb+Ver0tBBpxaPog==",
+      "os": ["linux"],
+      "cpu": ["s390x"]
+    },
+    "@oxlint/binding-linux-x64-gnu@1.58.0": {
+      "integrity": "sha512-0/yYpkq9VJFCEcuRlrViGj8pJUFFvNS4EkEREaN7CB1EcLXJIaVSSa5eCihwBGXtOZxhnblWgxks9juRdNQI7w==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@oxlint/binding-linux-x64-musl@1.58.0": {
+      "integrity": "sha512-hr6FNvmcAXiH+JxSvaJ4SJ1HofkdqEElXICW9sm3/Rd5eC3t7kzvmLyRAB3NngKO2wzXRCAm4Z/mGWfrsS4X8w==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@oxlint/binding-openharmony-arm64@1.58.0": {
+      "integrity": "sha512-R+O368VXgRql1K6Xar+FEo7NEwfo13EibPMoTv3sesYQedRXd6m30Dh/7lZMxnrQVFfeo4EOfYIP4FpcgWQNHg==",
+      "os": ["openharmony"],
+      "cpu": ["arm64"]
+    },
+    "@oxlint/binding-win32-arm64-msvc@1.58.0": {
+      "integrity": "sha512-Q0FZiAY/3c4YRj4z3h9K1PgaByrifrfbBoODSeX7gy97UtB7pySPUQfC2B/GbxWU6k7CzQrRy5gME10PltLAFQ==",
+      "os": ["win32"],
+      "cpu": ["arm64"]
+    },
+    "@oxlint/binding-win32-ia32-msvc@1.58.0": {
+      "integrity": "sha512-Y8FKBABrSPp9H0QkRLHDHOSUgM/309a3IvOVgPcVxYcX70wxJrk608CuTg7w+C6vEd724X5wJoNkBcGYfH7nNQ==",
+      "os": ["win32"],
+      "cpu": ["ia32"]
+    },
+    "@oxlint/binding-win32-x64-msvc@1.58.0": {
+      "integrity": "sha512-bCn5rbiz5My+Bj7M09sDcnqW0QJyINRVxdZ65x1/Y2tGrMwherwK/lpk+HRQCKvXa8pcaQdF5KY5j54VGZLwNg==",
+      "os": ["win32"],
+      "cpu": ["x64"]
+    },
+    "@polka/url@1.0.0-next.29": {
+      "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww=="
+    },
+    "@rolldown/binding-android-arm64@1.0.0-rc.15": {
+      "integrity": "sha512-YYe6aWruPZDtHNpwu7+qAHEMbQ/yRl6atqb/AhznLTnD3UY99Q1jE7ihLSahNWkF4EqRPVC4SiR4O0UkLK02tA==",
+      "os": ["android"],
+      "cpu": ["arm64"]
+    },
+    "@rolldown/binding-darwin-arm64@1.0.0-rc.15": {
+      "integrity": "sha512-oArR/ig8wNTPYsXL+Mzhs0oxhxfuHRfG7Ikw7jXsw8mYOtk71W0OkF2VEVh699pdmzjPQsTjlD1JIOoHkLP1Fg==",
+      "os": ["darwin"],
+      "cpu": ["arm64"]
+    },
+    "@rolldown/binding-darwin-x64@1.0.0-rc.15": {
+      "integrity": "sha512-YzeVqOqjPYvUbJSWJ4EDL8ahbmsIXQpgL3JVipmN+MX0XnXMeWomLN3Fb+nwCmP/jfyqte5I3XRSm7OfQrbyxw==",
+      "os": ["darwin"],
+      "cpu": ["x64"]
+    },
+    "@rolldown/binding-freebsd-x64@1.0.0-rc.15": {
+      "integrity": "sha512-9Erhx956jeQ0nNTyif1+QWAXDRD38ZNjr//bSHrt6wDwB+QkAfl2q6Mn1k6OBPerznjRmbM10lgRb1Pli4xZPw==",
+      "os": ["freebsd"],
+      "cpu": ["x64"]
+    },
+    "@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.15": {
+      "integrity": "sha512-cVwk0w8QbZJGTnP/AHQBs5yNwmpgGYStL88t4UIaqcvYJWBfS0s3oqVLZPwsPU6M0zlW4GqjP0Zq5MnAGwFeGA==",
+      "os": ["linux"],
+      "cpu": ["arm"]
+    },
+    "@rolldown/binding-linux-arm64-gnu@1.0.0-rc.15": {
+      "integrity": "sha512-eBZ/u8iAK9SoHGanqe/jrPnY0JvBN6iXbVOsbO38mbz+ZJsaobExAm1Iu+rxa4S1l2FjG0qEZn4Rc6X8n+9M+w==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@rolldown/binding-linux-arm64-musl@1.0.0-rc.15": {
+      "integrity": "sha512-ZvRYMGrAklV9PEkgt4LQM6MjQX2P58HPAuecwYObY2DhS2t35R0I810bKi0wmaYORt6m/2Sm+Z+nFgb0WhXNcQ==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.15": {
+      "integrity": "sha512-VDpgGBzgfg5hLg+uBpCLoFG5kVvEyafmfxGUV0UHLcL5irxAK7PKNeC2MwClgk6ZAiNhmo9FLhRYgvMmedLtnQ==",
+      "os": ["linux"],
+      "cpu": ["ppc64"]
+    },
+    "@rolldown/binding-linux-s390x-gnu@1.0.0-rc.15": {
+      "integrity": "sha512-y1uXY3qQWCzcPgRJATPSOUP4tCemh4uBdY7e3EZbVwCJTY3gLJWnQABgeUetvED+bt1FQ01OeZwvhLS2bpNrAQ==",
+      "os": ["linux"],
+      "cpu": ["s390x"]
+    },
+    "@rolldown/binding-linux-x64-gnu@1.0.0-rc.15": {
+      "integrity": "sha512-023bTPBod7J3Y/4fzAN6QtpkSABR0rigtrwaP+qSEabUh5zf6ELr9Nc7GujaROuPY3uwdSIXWrvhn1KxOvurWA==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@rolldown/binding-linux-x64-musl@1.0.0-rc.15": {
+      "integrity": "sha512-witB2O0/hU4CgfOOKUoeFgQ4GktPi1eEbAhaLAIpgD6+ZnhcPkUtPsoKKHRzmOoWPZue46IThdSgdo4XneOLYw==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@rolldown/binding-openharmony-arm64@1.0.0-rc.15": {
+      "integrity": "sha512-UCL68NJ0Ud5zRipXZE9dF5PmirzJE4E4BCIOOssEnM7wLDsxjc6Qb0sGDxTNRTP53I6MZpygyCpY8Aa8sPfKPg==",
+      "os": ["openharmony"],
+      "cpu": ["arm64"]
+    },
+    "@rolldown/binding-wasm32-wasi@1.0.0-rc.15": {
+      "integrity": "sha512-ApLruZq/ig+nhaE7OJm4lDjayUnOHVUa77zGeqnqZ9pn0ovdVbbNPerVibLXDmWeUZXjIYIT8V3xkT58Rm9u5Q==",
+      "dependencies": [
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@napi-rs/wasm-runtime"
+      ],
+      "cpu": ["wasm32"]
+    },
+    "@rolldown/binding-win32-arm64-msvc@1.0.0-rc.15": {
+      "integrity": "sha512-KmoUoU7HnN+Si5YWJigfTws1jz1bKBYDQKdbLspz0UaqjjFkddHsqorgiW1mxcAj88lYUE6NC/zJNwT+SloqtA==",
+      "os": ["win32"],
+      "cpu": ["arm64"]
+    },
+    "@rolldown/binding-win32-x64-msvc@1.0.0-rc.15": {
+      "integrity": "sha512-3P2A8L+x75qavWLe/Dll3EYBJLQmtkJN8rfh+U/eR3MqMgL/h98PhYI+JFfXuDPgPeCB7iZAKiqii5vqOvnA0g==",
+      "os": ["win32"],
+      "cpu": ["x64"]
+    },
+    "@rolldown/pluginutils@1.0.0-rc.15": {
+      "integrity": "sha512-UromN0peaE53IaBRe9W7CjrZgXl90fqGpK+mIZbA3qSTeYqg3pqpROBdIPvOG3F5ereDHNwoHBI2e50n1BDr1g=="
+    },
+    "@rolldown/pluginutils@1.0.0-rc.2": {
+      "integrity": "sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw=="
+    },
+    "@rolldown/pluginutils@1.0.0-rc.7": {
+      "integrity": "sha512-qujRfC8sFVInYSPPMLQByRh7zhwkGFS4+tyMQ83srV1qrxL4g8E2tyxVVyxd0+8QeBM1mIk9KbWxkegRr76XzA=="
+    },
+    "@rollup/pluginutils@5.3.0": {
+      "integrity": "sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==",
+      "dependencies": [
+        "@types/estree",
+        "estree-walker",
+        "picomatch@4.0.4"
+      ]
+    },
+    "@rollup/rollup-android-arm-eabi@4.60.1": {
+      "integrity": "sha512-d6FinEBLdIiK+1uACUttJKfgZREXrF0Qc2SmLII7W2AD8FfiZ9Wjd+rD/iRuf5s5dWrr1GgwXCvPqOuDquOowA==",
+      "os": ["android"],
+      "cpu": ["arm"]
+    },
+    "@rollup/rollup-android-arm64@4.60.1": {
+      "integrity": "sha512-YjG/EwIDvvYI1YvYbHvDz/BYHtkY4ygUIXHnTdLhG+hKIQFBiosfWiACWortsKPKU/+dUwQQCKQM3qrDe8c9BA==",
+      "os": ["android"],
+      "cpu": ["arm64"]
+    },
+    "@rollup/rollup-darwin-arm64@4.60.1": {
+      "integrity": "sha512-mjCpF7GmkRtSJwon+Rq1N8+pI+8l7w5g9Z3vWj4T7abguC4Czwi3Yu/pFaLvA3TTeMVjnu3ctigusqWUfjZzvw==",
+      "os": ["darwin"],
+      "cpu": ["arm64"]
+    },
+    "@rollup/rollup-darwin-x64@4.60.1": {
+      "integrity": "sha512-haZ7hJ1JT4e9hqkoT9R/19XW2QKqjfJVv+i5AGg57S+nLk9lQnJ1F/eZloRO3o9Scy9CM3wQ9l+dkXtcBgN5Ew==",
+      "os": ["darwin"],
+      "cpu": ["x64"]
+    },
+    "@rollup/rollup-freebsd-arm64@4.60.1": {
+      "integrity": "sha512-czw90wpQq3ZsAVBlinZjAYTKduOjTywlG7fEeWKUA7oCmpA8xdTkxZZlwNJKWqILlq0wehoZcJYfBvOyhPTQ6w==",
+      "os": ["freebsd"],
+      "cpu": ["arm64"]
+    },
+    "@rollup/rollup-freebsd-x64@4.60.1": {
+      "integrity": "sha512-KVB2rqsxTHuBtfOeySEyzEOB7ltlB/ux38iu2rBQzkjbwRVlkhAGIEDiiYnO2kFOkJp+Z7pUXKyrRRFuFUKt+g==",
+      "os": ["freebsd"],
+      "cpu": ["x64"]
+    },
+    "@rollup/rollup-linux-arm-gnueabihf@4.60.1": {
+      "integrity": "sha512-L+34Qqil+v5uC0zEubW7uByo78WOCIrBvci69E7sFASRl0X7b/MB6Cqd1lky/CtcSVTydWa2WZwFuWexjS5o6g==",
+      "os": ["linux"],
+      "cpu": ["arm"]
+    },
+    "@rollup/rollup-linux-arm-musleabihf@4.60.1": {
+      "integrity": "sha512-n83O8rt4v34hgFzlkb1ycniJh7IR5RCIqt6mz1VRJD6pmhRi0CXdmfnLu9dIUS6buzh60IvACM842Ffb3xd6Gg==",
+      "os": ["linux"],
+      "cpu": ["arm"]
+    },
+    "@rollup/rollup-linux-arm64-gnu@4.60.1": {
+      "integrity": "sha512-Nql7sTeAzhTAja3QXeAI48+/+GjBJ+QmAH13snn0AJSNL50JsDqotyudHyMbO2RbJkskbMbFJfIJKWA6R1LCJQ==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@rollup/rollup-linux-arm64-musl@4.60.1": {
+      "integrity": "sha512-+pUymDhd0ys9GcKZPPWlFiZ67sTWV5UU6zOJat02M1+PiuSGDziyRuI/pPue3hoUwm2uGfxdL+trT6Z9rxnlMA==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@rollup/rollup-linux-loong64-gnu@4.60.1": {
+      "integrity": "sha512-VSvgvQeIcsEvY4bKDHEDWcpW4Yw7BtlKG1GUT4FzBUlEKQK0rWHYBqQt6Fm2taXS+1bXvJT6kICu5ZwqKCnvlQ==",
+      "os": ["linux"],
+      "cpu": ["loong64"]
+    },
+    "@rollup/rollup-linux-loong64-musl@4.60.1": {
+      "integrity": "sha512-4LqhUomJqwe641gsPp6xLfhqWMbQV04KtPp7/dIp0nzPxAkNY1AbwL5W0MQpcalLYk07vaW9Kp1PBhdpZYYcEw==",
+      "os": ["linux"],
+      "cpu": ["loong64"]
+    },
+    "@rollup/rollup-linux-ppc64-gnu@4.60.1": {
+      "integrity": "sha512-tLQQ9aPvkBxOc/EUT6j3pyeMD6Hb8QF2BTBnCQWP/uu1lhc9AIrIjKnLYMEroIz/JvtGYgI9dF3AxHZNaEH0rw==",
+      "os": ["linux"],
+      "cpu": ["ppc64"]
+    },
+    "@rollup/rollup-linux-ppc64-musl@4.60.1": {
+      "integrity": "sha512-RMxFhJwc9fSXP6PqmAz4cbv3kAyvD1etJFjTx4ONqFP9DkTkXsAMU4v3Vyc5BgzC+anz7nS/9tp4obsKfqkDHg==",
+      "os": ["linux"],
+      "cpu": ["ppc64"]
+    },
+    "@rollup/rollup-linux-riscv64-gnu@4.60.1": {
+      "integrity": "sha512-QKgFl+Yc1eEk6MmOBfRHYF6lTxiiiV3/z/BRrbSiW2I7AFTXoBFvdMEyglohPj//2mZS4hDOqeB0H1ACh3sBbg==",
+      "os": ["linux"],
+      "cpu": ["riscv64"]
+    },
+    "@rollup/rollup-linux-riscv64-musl@4.60.1": {
+      "integrity": "sha512-RAjXjP/8c6ZtzatZcA1RaQr6O1TRhzC+adn8YZDnChliZHviqIjmvFwHcxi4JKPSDAt6Uhf/7vqcBzQJy0PDJg==",
+      "os": ["linux"],
+      "cpu": ["riscv64"]
+    },
+    "@rollup/rollup-linux-s390x-gnu@4.60.1": {
+      "integrity": "sha512-wcuocpaOlaL1COBYiA89O6yfjlp3RwKDeTIA0hM7OpmhR1Bjo9j31G1uQVpDlTvwxGn2nQs65fBFL5UFd76FcQ==",
+      "os": ["linux"],
+      "cpu": ["s390x"]
+    },
+    "@rollup/rollup-linux-x64-gnu@4.60.1": {
+      "integrity": "sha512-77PpsFQUCOiZR9+LQEFg9GClyfkNXj1MP6wRnzYs0EeWbPcHs02AXu4xuUbM1zhwn3wqaizle3AEYg5aeoohhg==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@rollup/rollup-linux-x64-musl@4.60.1": {
+      "integrity": "sha512-5cIATbk5vynAjqqmyBjlciMJl1+R/CwX9oLk/EyiFXDWd95KpHdrOJT//rnUl4cUcskrd0jCCw3wpZnhIHdD9w==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@rollup/rollup-openbsd-x64@4.60.1": {
+      "integrity": "sha512-cl0w09WsCi17mcmWqqglez9Gk8isgeWvoUZ3WiJFYSR3zjBQc2J5/ihSjpl+VLjPqjQ/1hJRcqBfLjssREQILw==",
+      "os": ["openbsd"],
+      "cpu": ["x64"]
+    },
+    "@rollup/rollup-openharmony-arm64@4.60.1": {
+      "integrity": "sha512-4Cv23ZrONRbNtbZa37mLSueXUCtN7MXccChtKpUnQNgF010rjrjfHx3QxkS2PI7LqGT5xXyYs1a7LbzAwT0iCA==",
+      "os": ["openharmony"],
+      "cpu": ["arm64"]
+    },
+    "@rollup/rollup-win32-arm64-msvc@4.60.1": {
+      "integrity": "sha512-i1okWYkA4FJICtr7KpYzFpRTHgy5jdDbZiWfvny21iIKky5YExiDXP+zbXzm3dUcFpkEeYNHgQ5fuG236JPq0g==",
+      "os": ["win32"],
+      "cpu": ["arm64"]
+    },
+    "@rollup/rollup-win32-ia32-msvc@4.60.1": {
+      "integrity": "sha512-u09m3CuwLzShA0EYKMNiFgcjjzwqtUMLmuCJLeZWjjOYA3IT2Di09KaxGBTP9xVztWyIWjVdsB2E9goMjZvTQg==",
+      "os": ["win32"],
+      "cpu": ["ia32"]
+    },
+    "@rollup/rollup-win32-x64-gnu@4.60.1": {
+      "integrity": "sha512-k+600V9Zl1CM7eZxJgMyTUzmrmhB/0XZnF4pRypKAlAgxmedUA+1v9R+XOFv56W4SlHEzfeMtzujLJD22Uz5zg==",
+      "os": ["win32"],
+      "cpu": ["x64"]
+    },
+    "@rollup/rollup-win32-x64-msvc@4.60.1": {
+      "integrity": "sha512-lWMnixq/QzxyhTV6NjQJ4SFo1J6PvOX8vUx5Wb4bBPsEb+8xZ89Bz6kOXpfXj9ak9AHTQVQzlgzBEc1SyM27xQ==",
+      "os": ["win32"],
+      "cpu": ["x64"]
+    },
+    "@shikijs/core@4.0.2": {
+      "integrity": "sha512-hxT0YF4ExEqB8G/qFdtJvpmHXBYJ2lWW7qTHDarVkIudPFE6iCIrqdgWxGn5s+ppkGXI0aEGlibI0PAyzP3zlw==",
+      "dependencies": [
+        "@shikijs/primitive",
+        "@shikijs/types",
+        "@shikijs/vscode-textmate",
+        "@types/hast",
+        "hast-util-to-html"
+      ]
+    },
+    "@shikijs/engine-javascript@4.0.2": {
+      "integrity": "sha512-7PW0Nm49DcoUIQEXlJhNNBHyoGMjalRETTCcjMqEaMoJRLljy1Bi/EGV3/qLBgLKQejdspiiYuHGQW6dX94Nag==",
+      "dependencies": [
+        "@shikijs/types",
+        "@shikijs/vscode-textmate",
+        "oniguruma-to-es"
+      ]
+    },
+    "@shikijs/engine-oniguruma@4.0.2": {
+      "integrity": "sha512-UpCB9Y2sUKlS9z8juFSKz7ZtysmeXCgnRF0dlhXBkmQnek7lAToPte8DkxmEYGNTMii72zU/lyXiCB6StuZeJg==",
+      "dependencies": [
+        "@shikijs/types",
+        "@shikijs/vscode-textmate"
+      ]
+    },
+    "@shikijs/langs@4.0.2": {
+      "integrity": "sha512-KaXby5dvoeuZzN0rYQiPMjFoUrz4hgwIE+D6Du9owcHcl6/g16/yT5BQxSW5cGt2MZBz6Hl0YuRqf12omRfUUg==",
+      "dependencies": [
+        "@shikijs/types"
+      ]
+    },
+    "@shikijs/primitive@4.0.2": {
+      "integrity": "sha512-M6UMPrSa3fN5ayeJwFVl9qWofl273wtK1VG8ySDZ1mQBfhCpdd8nEx7nPZ/tk7k+TYcpqBZzj/AnwxT9lO+HJw==",
+      "dependencies": [
+        "@shikijs/types",
+        "@shikijs/vscode-textmate",
+        "@types/hast"
+      ]
+    },
+    "@shikijs/themes@4.0.2": {
+      "integrity": "sha512-mjCafwt8lJJaVSsQvNVrJumbnnj1RI8jbUKrPKgE6E3OvQKxnuRoBaYC51H4IGHePsGN/QtALglWBU7DoKDFnA==",
+      "dependencies": [
+        "@shikijs/types"
+      ]
+    },
+    "@shikijs/types@4.0.2": {
+      "integrity": "sha512-qzbeRooUTPnLE+sHD/Z8DStmaDgnbbc/pMrU203950aRqjX/6AFHeDYT+j00y2lPdz0ywJKx7o/7qnqTivtlXg==",
+      "dependencies": [
+        "@shikijs/vscode-textmate",
+        "@types/hast"
+      ]
+    },
+    "@shikijs/vscode-textmate@10.0.2": {
+      "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg=="
+    },
+    "@standard-schema/spec@1.1.0": {
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w=="
+    },
+    "@sveltejs/acorn-typescript@1.0.9_acorn@8.16.0": {
+      "integrity": "sha512-lVJX6qEgs/4DOcRTpo56tmKzVPtoWAaVbL4hfO7t7NVwl9AAXzQR6cihesW1BmNMPl+bK6dreu2sOKBP2Q9CIA==",
+      "dependencies": [
+        "acorn"
+      ]
+    },
+    "@sveltejs/vite-plugin-svelte-inspector@5.0.2_@sveltejs+vite-plugin-svelte@6.2.4__svelte@5.55.2__vite@8.0.8___@types+node@24.12.2__@types+node@24.12.2_svelte@5.55.2_vite@8.0.8__@types+node@24.12.2_@types+node@24.12.2": {
+      "integrity": "sha512-TZzRTcEtZffICSAoZGkPSl6Etsj2torOVrx6Uw0KpXxrec9Gg6jFWQ60Q3+LmNGfZSxHRCZL7vXVZIWmuV50Ig==",
+      "dependencies": [
+        "@sveltejs/vite-plugin-svelte",
+        "obug",
+        "svelte",
+        "vite@8.0.8_@types+node@24.12.2"
+      ]
+    },
+    "@sveltejs/vite-plugin-svelte@6.2.4_svelte@5.55.2_vite@8.0.8__@types+node@24.12.2_@types+node@24.12.2": {
+      "integrity": "sha512-ou/d51QSdTyN26D7h6dSpusAKaZkAiGM55/AKYi+9AGZw7q85hElbjK3kEyzXHhLSnRISHOYzVge6x0jRZ7DXA==",
+      "dependencies": [
+        "@sveltejs/vite-plugin-svelte-inspector",
+        "deepmerge",
+        "magic-string",
+        "obug",
+        "svelte",
+        "vite@8.0.8_@types+node@24.12.2",
+        "vitefu@1.1.3_vite@8.0.8__@types+node@24.12.2_@types+node@24.12.2"
+      ]
+    },
+    "@tybys/wasm-util@0.10.1": {
+      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "dependencies": [
+        "tslib"
+      ]
+    },
+    "@types/bun@1.3.11": {
+      "integrity": "sha512-5vPne5QvtpjGpsGYXiFyycfpDF2ECyPcTSsFBMa0fraoxiQyMJ3SmuQIGhzPg2WJuWxVBoxWJ2kClYTcw/4fAg==",
+      "dependencies": [
+        "bun-types"
+      ]
+    },
+    "@types/chai@5.2.3": {
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dependencies": [
+        "@types/deep-eql",
+        "assertion-error"
+      ]
+    },
+    "@types/debug@4.1.13": {
+      "integrity": "sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==",
+      "dependencies": [
+        "@types/ms"
+      ]
+    },
+    "@types/deep-eql@4.0.2": {
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw=="
+    },
+    "@types/estree@1.0.8": {
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="
+    },
+    "@types/hast@3.0.4": {
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "dependencies": [
+        "@types/unist"
+      ]
+    },
+    "@types/mdast@4.0.4": {
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "dependencies": [
+        "@types/unist"
+      ]
+    },
+    "@types/ms@2.1.0": {
+      "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA=="
+    },
+    "@types/nlcst@2.0.3": {
+      "integrity": "sha512-vSYNSDe6Ix3q+6Z7ri9lyWqgGhJTmzRjZRqyq15N0Z/1/UnVsno9G/N40NBijoYx2seFDIl0+B2mgAb9mezUCA==",
+      "dependencies": [
+        "@types/unist"
+      ]
+    },
+    "@types/node@24.12.2": {
+      "integrity": "sha512-A1sre26ke7HDIuY/M23nd9gfB+nrmhtYyMINbjI1zHJxYteKR6qSMX56FsmjMcDb3SMcjJg5BiRRgOCC/yBD0g==",
+      "dependencies": [
+        "undici-types"
+      ]
+    },
+    "@types/react-dom@19.2.3_@types+react@19.2.14": {
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dependencies": [
+        "@types/react"
+      ]
+    },
+    "@types/react@19.2.14": {
+      "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
+      "dependencies": [
+        "csstype"
+      ]
+    },
+    "@types/trusted-types@2.0.7": {
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="
+    },
+    "@types/unist@3.0.3": {
+      "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
+    },
+    "@typescript-eslint/types@8.58.1": {
+      "integrity": "sha512-io/dV5Aw5ezwzfPBBWLoT+5QfVtP8O7q4Kftjn5azJ88bYyp/ZMCsyW1lpKK46EXJcaYMZ1JtYj+s/7TdzmQMw=="
+    },
+    "@ungap/structured-clone@1.3.0": {
+      "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="
+    },
+    "@vitejs/plugin-react@6.0.1_vite@8.0.8__@types+node@24.12.2_@types+node@24.12.2": {
+      "integrity": "sha512-l9X/E3cDb+xY3SWzlG1MOGt2usfEHGMNIaegaUGFsLkb3RCn/k8/TOXBcab+OndDI4TBtktT8/9BwwW8Vi9KUQ==",
+      "dependencies": [
+        "@rolldown/pluginutils@1.0.0-rc.7",
+        "vite@8.0.8_@types+node@24.12.2"
+      ]
+    },
+    "@vitejs/plugin-vue@6.0.5_vite@8.0.8__@types+node@24.12.2_vue@3.5.32__typescript@5.9.3_@types+node@24.12.2_typescript@5.9.3": {
+      "integrity": "sha512-bL3AxKuQySfk1iGcBsQnoRVexTPJq0Z/ixFVM8OhVJAP6ZXXXLtM7NFKWhLl30Kg7uTBqIaPXbh+nuQCuBDedg==",
+      "dependencies": [
+        "@rolldown/pluginutils@1.0.0-rc.2",
+        "vite@8.0.8_@types+node@24.12.2",
+        "vue"
+      ]
+    },
+    "@voidzero-dev/vite-plus-core@0.1.16_@types+node@24.12.2_typescript@5.9.3": {
+      "integrity": "sha512-fOyf14CXjcXqANFs2fCXEX+0Tn9ZjmqfFV+qTnARwIF1Kzl8WquO4XtvlDgs/fTQ91H4AyoNUgkvWdKS+C4xYA==",
+      "dependencies": [
+        "@oxc-project/runtime",
+        "@oxc-project/types@0.123.0",
+        "@types/node",
+        "lightningcss",
+        "postcss",
+        "typescript"
+      ],
+      "optionalDependencies": [
+        "fsevents"
+      ],
+      "optionalPeers": [
+        "@types/node",
+        "typescript"
+      ]
+    },
+    "@voidzero-dev/vite-plus-darwin-arm64@0.1.16": {
+      "integrity": "sha512-InG0ZmuGh7DTrn7zWQ0UvKapElphKI6G1oYfys+jraedG70EhIIee9gtO+mTE1T0bF67SgAcLXwNyaiNda0XwA==",
+      "os": ["darwin"],
+      "cpu": ["arm64"]
+    },
+    "@voidzero-dev/vite-plus-darwin-x64@0.1.16": {
+      "integrity": "sha512-LGNrECstuhkCRKRj/dE98Xcprw8HU3VMIMJnZsnDR2C5RB2HADNIu21at/a/G3giA9eWm7uhtPp9FvUtTCK9TA==",
+      "os": ["darwin"],
+      "cpu": ["x64"]
+    },
+    "@voidzero-dev/vite-plus-linux-arm64-gnu@0.1.16": {
+      "integrity": "sha512-AoFKu6dIOtlkp/mwmtU8ES2uzoaxCHhIym1Tk7qMxyvke4IXnye6VDc4kPMRQwD8mwR3T3bO0HuaEEHxrIWDxw==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@voidzero-dev/vite-plus-linux-arm64-musl@0.1.16": {
+      "integrity": "sha512-PloCsGTRIhcXIpUOJ6PqVG8gYNpq+ooJNyqy5sQ82BRnJuo8oV7uBLFvg0X9B3Bzh+vO1F8/+92+o5TiL35JMg==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "@voidzero-dev/vite-plus-linux-x64-gnu@0.1.16": {
+      "integrity": "sha512-nY9/2g+qjhwsW5U3MrFLlx+bOBsdOJiO2HzbxQy7jo/S3jPTnXhFlrRegQuAmqrHAXrSdNwgblgRpICKhx1xZg==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@voidzero-dev/vite-plus-linux-x64-musl@0.1.16": {
+      "integrity": "sha512-JGKEAMoXqzdr9lHT/13uRNV9uzrSYXAFhjAfIC8WEQMG2VUFksvq5/TOc26hzmzbqu+bxRmfN8h1aVTDL8KwFg==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "@voidzero-dev/vite-plus-test@0.1.16_@types+node@24.12.2_vite@8.0.8__@types+node@24.12.2_typescript@5.9.3": {
+      "integrity": "sha512-d/rJPX/heMzoAFdnpZsp04MAa6nw1yH1tA4mVCV4m8goVcE9nAvt69mjLMzE8N/rYIQOSgenf3hDXuQRuD6OKQ==",
+      "dependencies": [
+        "@standard-schema/spec",
+        "@types/chai",
+        "@types/node",
+        "@voidzero-dev/vite-plus-core",
+        "es-module-lexer@1.7.0",
+        "obug",
+        "pixelmatch",
+        "pngjs",
+        "sirv",
+        "std-env",
+        "tinybench",
+        "tinyexec",
+        "tinyglobby",
+        "vite@8.0.8_@types+node@24.12.2",
+        "ws"
+      ],
+      "optionalPeers": [
+        "@types/node"
+      ]
+    },
+    "@voidzero-dev/vite-plus-win32-arm64-msvc@0.1.16": {
+      "integrity": "sha512-IugPUCLY7HmiPcCeuHKUqO1+G2vxHnYzAGhS02AixD0sJLTAIKCUANDOiVUFf/HMw+jh/UkugW7MWek8lf/JrQ==",
+      "os": ["win32"],
+      "cpu": ["arm64"]
+    },
+    "@voidzero-dev/vite-plus-win32-x64-msvc@0.1.16": {
+      "integrity": "sha512-tq93CIeMs92HF7rdylJknRiyzMOWMKCmpw+g8nl5Q5nmUDNLUsrL3CGfbyqjgbruuPnIr761r9MfydPqZU/cYg==",
+      "os": ["win32"],
+      "cpu": ["x64"]
+    },
+    "@vue-vapor/compiler-core@3.20240714.0-6608bb3": {
+      "integrity": "sha512-Cslp8odqclDHAKe04nodrVLi8vzsnc7Vku9P3HzuK8rBTmMozvguWGUwFEzQ15Pr/Y3zqF6ld9g2Wwzkg2S7pA==",
+      "dependencies": [
+        "@babel/parser",
+        "@vue/shared@npm:@vue-vapor/shared@3.20240714.0-6608bb3",
+        "entities@4.5.0",
+        "estree-walker",
+        "source-map-js"
+      ]
+    },
+    "@vue-vapor/compiler-dom@3.20240714.0-6608bb3": {
+      "integrity": "sha512-7rbrVpW5bNqyyz2BCO3ewXF4wIZVlxdMVLRa7zVEiMNnfLdZma9Q8Ww4E3svZhWFbPxytrNX4f/Da8jmeYX9Hg==",
+      "dependencies": [
+        "@vue/compiler-core@npm:@vue-vapor/compiler-core@3.20240714.0-6608bb3",
+        "@vue/shared@npm:@vue-vapor/shared@3.20240714.0-6608bb3"
+      ]
+    },
+    "@vue-vapor/compiler-ssr@3.20240714.0-6608bb3": {
+      "integrity": "sha512-6qpFNcwjjiSBo6s+hCeaMQI8LKo4I2tB/rR9JMnzWHKOcy5hSPYZ+vikB2lYO2CfRgB8KIwJKdaBaeTJ9DqPhQ==",
+      "dependencies": [
+        "@vue/compiler-dom@npm:@vue-vapor/compiler-dom@3.20240714.0-6608bb3",
+        "@vue/shared@npm:@vue-vapor/shared@3.20240714.0-6608bb3"
+      ]
+    },
+    "@vue-vapor/compiler-vapor@3.20240714.0-6608bb3": {
+      "integrity": "sha512-/T1yIZhTE6nCeRQ0UAhvglV2drBDV/aLwgSF7npLmW9ljLh/TzDzlX66Pf2IevDsH3S+QgZx5ueAurIwZp2TIA==",
+      "dependencies": [
+        "@vue/compiler-dom@npm:@vue-vapor/compiler-dom@3.20240714.0-6608bb3",
+        "@vue/shared@npm:@vue-vapor/shared@3.20240714.0-6608bb3",
+        "source-map-js"
+      ]
+    },
+    "@vue-vapor/reactivity@3.20240714.0-6608bb3": {
+      "integrity": "sha512-5jF87WPMUS3k9vTOMKthcNGxSkb8vk2LKi8wnl3d5wfyHhCK/PGsvspDxz6vF2TzPPtkmGn+IVWkWLdWSfjIPA==",
+      "dependencies": [
+        "@vue/shared@npm:@vue-vapor/shared@3.20240714.0-6608bb3"
+      ]
+    },
+    "@vue-vapor/runtime-shared@3.20240714.0-6608bb3": {
+      "integrity": "sha512-yExB6sG+CX+tJdDjgY1JF/84f66PdtnB1f18UCBThpm8ZKaPDaf2sbYf6I8mxJCVKGGBpsPS8i/sAu/NHaoVRg=="
+    },
+    "@vue-vapor/runtime-vapor@3.20240714.0-6608bb3": {
+      "integrity": "sha512-S8D3E65nq8OW4T5DGWbG3DrfN5W3jVtr4heL4sMoWK94808q0Vtz2qyk0t1830YmUKMoi+uVVjEZW2zmSfPv+w==",
+      "dependencies": [
+        "@vue/reactivity@npm:@vue-vapor/reactivity@3.20240714.0-6608bb3",
+        "@vue/runtime-shared@npm:@vue-vapor/runtime-shared@3.20240714.0-6608bb3",
+        "@vue/shared@npm:@vue-vapor/shared@3.20240714.0-6608bb3"
+      ]
+    },
+    "@vue-vapor/server-renderer@3.20240714.0-6608bb3_vue@3.5.32__typescript@5.9.3_typescript@5.9.3": {
+      "integrity": "sha512-UyxN80FXKeA8z7aucvtJ3T/2KlTsaC2BShBiB8jx3RJppqCdw32/HlOff96xH+8N+5eMu82IKyb4JgaEOHpXzQ==",
+      "dependencies": [
+        "@vue/compiler-ssr@npm:@vue-vapor/compiler-ssr@3.20240714.0-6608bb3",
+        "@vue/shared@npm:@vue-vapor/shared@3.20240714.0-6608bb3",
+        "vue"
+      ]
+    },
+    "@vue-vapor/shared@3.20240714.0-6608bb3": {
+      "integrity": "sha512-ZZDvRm/PEcS9lS07h23IcsvsV2E6tYO+K/MP7N84ZJ36ytyaWrYvmgVaW5J8kbdmrvKEGsp9xOw5aYk9aTCLng=="
+    },
+    "@vue-vapor/vapor@3.20240714.0-6608bb3": {
+      "integrity": "sha512-NFeGr0h7r2eM5cZ3rxK2Asre7qGm6Bmu0H2LFjsWqjSRYK998hu/qVGvWDOOPLJL0DNhfn5xlAraobmr+MlpRg==",
+      "dependencies": [
+        "@vue/compiler-vapor@npm:@vue-vapor/compiler-vapor@3.20240714.0-6608bb3",
+        "@vue/runtime-vapor@npm:@vue-vapor/runtime-vapor@3.20240714.0-6608bb3"
+      ]
+    },
+    "@vue-vapor/vite-plugin-vue@0.0.0-alpha.6_vite@8.0.8__@types+node@24.12.2_vue@3.5.32__typescript@5.9.3_@types+node@24.12.2_typescript@5.9.3": {
+      "integrity": "sha512-V2aTQ7bkDXsoPvYIkTA54m3ypUXDIVpTFspn+ycuYcMfIY37cZ0ny6jm/afNY6k1DiaQ9JfAMBXAKzTBpu2B9A==",
+      "dependencies": [
+        "vite@8.0.8_@types+node@24.12.2",
+        "vue"
+      ]
+    },
+    "@vue/compiler-core@3.5.32": {
+      "integrity": "sha512-4x74Tbtqnda8s/NSD6e1Dr5p1c8HdMU5RWSjMSUzb8RTcUQqevDCxVAitcLBKT+ie3o0Dl9crc/S/opJM7qBGQ==",
+      "dependencies": [
+        "@babel/parser",
+        "@vue/shared",
+        "entities@7.0.1",
+        "estree-walker",
+        "source-map-js"
+      ]
+    },
+    "@vue/compiler-dom@3.5.32": {
+      "integrity": "sha512-ybHAu70NtiEI1fvAUz3oXZqkUYEe5J98GjMDpTGl5iHb0T15wQYLR4wE3h9xfuTNA+Cm2f4czfe8B4s+CCH57Q==",
+      "dependencies": [
+        "@vue/compiler-core",
+        "@vue/shared"
+      ]
+    },
+    "@vue/compiler-sfc@3.5.32": {
+      "integrity": "sha512-8UYUYo71cP/0YHMO814TRZlPuUUw3oifHuMR7Wp9SNoRSrxRQnhMLNlCeaODNn6kNTJsjFoQ/kqIj4qGvya4Xg==",
+      "dependencies": [
+        "@babel/parser",
+        "@vue/compiler-core",
+        "@vue/compiler-dom",
+        "@vue/compiler-ssr",
+        "@vue/shared",
+        "estree-walker",
+        "magic-string",
+        "postcss",
+        "source-map-js"
+      ]
+    },
+    "@vue/compiler-ssr@3.5.32": {
+      "integrity": "sha512-Gp4gTs22T3DgRotZ8aA/6m2jMR+GMztvBXUBEUOYOcST+giyGWJ4WvFd7QLHBkzTxkfOt8IELKNdpzITLbA2rw==",
+      "dependencies": [
+        "@vue/compiler-dom",
+        "@vue/shared"
+      ]
+    },
+    "@vue/reactivity@3.5.32": {
+      "integrity": "sha512-/ORasxSGvZ6MN5gc+uE364SxFdJ0+WqVG0CENXaGW58TOCdrAW76WWaplDtECeS1qphvtBZtR+3/o1g1zL4xPQ==",
+      "dependencies": [
+        "@vue/shared"
+      ]
+    },
+    "@vue/runtime-core@3.5.32": {
+      "integrity": "sha512-pDrXCejn4UpFDFmMd27AcJEbHaLemaE5o4pbb7sLk79SRIhc6/t34BQA7SGNgYtbMnvbF/HHOftYBgFJtUoJUQ==",
+      "dependencies": [
+        "@vue/reactivity",
+        "@vue/shared"
+      ]
+    },
+    "@vue/runtime-dom@3.5.32": {
+      "integrity": "sha512-1CDVv7tv/IV13V8Nip1k/aaObVbWqRlVCVezTwx3K07p7Vxossp5JU1dcPNhJk3w347gonIUT9jQOGutyJrSVQ==",
+      "dependencies": [
+        "@vue/reactivity",
+        "@vue/runtime-core",
+        "@vue/shared",
+        "csstype"
+      ]
+    },
+    "@vue/server-renderer@3.5.32_vue@3.5.32__typescript@5.9.3_typescript@5.9.3": {
+      "integrity": "sha512-IOjm2+JQwRFS7W28HNuJeXQle9KdZbODFY7hFGVtnnghF51ta20EWAZJHX+zLGtsHhaU6uC9BGPV52KVpYryMQ==",
+      "dependencies": [
+        "@vue/compiler-ssr",
+        "@vue/shared",
+        "vue"
+      ]
+    },
+    "@vue/shared@3.5.32": {
+      "integrity": "sha512-ksNyrmRQzWJJ8n3cRDuSF7zNNontuJg1YHnmWRJd2AMu8Ij2bqwiiri2lH5rHtYPZjj4STkNcgcmiQqlOjiYGg=="
+    },
+    "acorn@8.16.0": {
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
+      "bin": true
+    },
+    "anymatch@3.1.3": {
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dependencies": [
+        "normalize-path",
+        "picomatch@2.3.2"
+      ]
+    },
+    "argparse@2.0.1": {
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+    },
+    "aria-query@5.3.1": {
+      "integrity": "sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g=="
+    },
+    "aria-query@5.3.2": {
+      "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw=="
+    },
+    "array-iterate@2.0.1": {
+      "integrity": "sha512-I1jXZMjAgCMmxT4qxXfPXa6SthSoE8h6gkSI9BGGNv8mP8G/v0blc+qFnZu6K42vTOiuME596QaLO0TP3Lk0xg=="
+    },
+    "assertion-error@2.0.1": {
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA=="
+    },
+    "astro@6.1.5_@types+node@24.12.2_typescript@5.9.3": {
+      "integrity": "sha512-AJVw/JlssxUCBFi3Hp4djL8Pt7wUQqStBBawCd8cNGBBM2lBzp/rXGguzt4OcMfW+86fs0hpFwMyopHM2r6d3g==",
+      "dependencies": [
+        "@astrojs/compiler",
+        "@astrojs/internal-helpers",
+        "@astrojs/markdown-remark",
+        "@astrojs/telemetry",
+        "@capsizecss/unpack",
+        "@clack/prompts",
+        "@oslojs/encoding",
+        "@rollup/pluginutils",
+        "aria-query@5.3.2",
+        "axobject-query",
+        "ci-info",
+        "clsx",
+        "common-ancestor-path",
+        "cookie",
+        "devalue",
+        "diff",
+        "dset",
+        "es-module-lexer@2.0.0",
+        "esbuild",
+        "flattie",
+        "fontace",
+        "github-slugger",
+        "html-escaper",
+        "http-cache-semantics",
+        "js-yaml",
+        "magic-string",
+        "magicast",
+        "mrmime",
+        "neotraverse",
+        "obug",
+        "p-limit",
+        "p-queue",
+        "package-manager-detector",
+        "piccolore",
+        "picomatch@4.0.4",
+        "rehype",
+        "semver",
+        "shiki",
+        "smol-toml",
+        "svgo",
+        "tinyclip",
+        "tinyexec",
+        "tinyglobby",
+        "tsconfck",
+        "ultrahtml",
+        "unifont",
+        "unist-util-visit",
+        "unstorage",
+        "vfile",
+        "vite@7.3.2_@types+node@24.12.2",
+        "vitefu@1.1.3_vite@7.3.2__@types+node@24.12.2_@types+node@24.12.2",
+        "xxhash-wasm",
+        "yargs-parser",
+        "zod"
+      ],
+      "optionalDependencies": [
+        "sharp"
+      ],
+      "bin": true
+    },
+    "axobject-query@4.1.0": {
+      "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ=="
+    },
+    "bail@2.0.2": {
+      "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw=="
+    },
+    "boolbase@1.0.0": {
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+    },
+    "bun-types@1.3.11": {
+      "integrity": "sha512-1KGPpoxQWl9f6wcZh57LvrPIInQMn2TQ7jsgxqpRzg+l0QPOFvJVH7HmvHo/AiPgwXy+/Thf6Ov3EdVn1vOabg==",
+      "dependencies": [
+        "@types/node"
+      ]
+    },
+    "ccount@2.0.1": {
+      "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg=="
+    },
+    "character-entities-html4@2.1.0": {
+      "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA=="
+    },
+    "character-entities-legacy@3.0.0": {
+      "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ=="
+    },
+    "character-entities@2.0.2": {
+      "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ=="
+    },
+    "chokidar@5.0.0": {
+      "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==",
+      "dependencies": [
+        "readdirp"
+      ]
+    },
+    "ci-info@4.4.0": {
+      "integrity": "sha512-77PSwercCZU2Fc4sX94eF8k8Pxte6JAwL4/ICZLFjJLqegs7kCuAsqqj/70NQF6TvDpgFjkubQB2FW2ZZddvQg=="
+    },
+    "clsx@2.1.1": {
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
+    },
+    "comma-separated-tokens@2.0.3": {
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg=="
+    },
+    "commander@11.1.0": {
+      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ=="
+    },
+    "common-ancestor-path@2.0.0": {
+      "integrity": "sha512-dnN3ibLeoRf2HNC+OlCiNc5d2zxbLJXOtiZUudNFSXZrNSydxcCsSpRzXwfu7BBWCIfHPw+xTayeBvJCP/D8Ng=="
+    },
+    "cookie-es@1.2.3": {
+      "integrity": "sha512-lXVyvUvrNXblMqzIRrxHb57UUVmqsSWlxqt3XIjCkUP0wDAf6uicO6KMbEgYrMNtEvWgWHwe42CKxPu9MYAnWw=="
+    },
+    "cookie@1.1.1": {
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ=="
+    },
+    "crossws@0.3.5": {
+      "integrity": "sha512-ojKiDvcmByhwa8YYqbQI/hg7MEU0NC03+pSdEq4ZUnZR9xXpwk7E43SMNGkn+JxJGPFtNvQ48+vV2p+P1ml5PA==",
+      "dependencies": [
+        "uncrypto"
+      ]
+    },
+    "css-select@5.2.2": {
+      "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "dependencies": [
+        "boolbase",
+        "css-what",
+        "domhandler",
+        "domutils",
+        "nth-check"
+      ]
+    },
+    "css-tree@2.2.1": {
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "dependencies": [
+        "mdn-data@2.0.28",
+        "source-map-js"
+      ]
+    },
+    "css-tree@3.2.1": {
+      "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dependencies": [
+        "mdn-data@2.27.1",
+        "source-map-js"
+      ]
+    },
+    "css-what@6.2.2": {
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA=="
+    },
+    "csso@5.0.5": {
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "dependencies": [
+        "css-tree@2.2.1"
+      ]
+    },
+    "csstype@3.2.3": {
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="
+    },
+    "debug@4.4.3": {
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dependencies": [
+        "ms"
+      ]
+    },
+    "decode-named-character-reference@1.3.0": {
+      "integrity": "sha512-GtpQYB283KrPp6nRw50q3U9/VfOutZOe103qlN7BPP6Ad27xYnOIWv4lPzo8HCAL+mMZofJ9KEy30fq6MfaK6Q==",
+      "dependencies": [
+        "character-entities"
+      ]
+    },
+    "deepmerge@4.3.1": {
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="
+    },
+    "defu@6.1.7": {
+      "integrity": "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ=="
+    },
+    "depd@2.0.0": {
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="
+    },
+    "dequal@2.0.3": {
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="
+    },
+    "destr@2.0.5": {
+      "integrity": "sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA=="
+    },
+    "detect-libc@2.1.2": {
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="
+    },
+    "devalue@5.7.1": {
+      "integrity": "sha512-MUbZ586EgQqdRnC4yDrlod3BEdyvE4TapGYHMW2CiaW+KkkFmWEFqBUaLltEZCGi0iFXCEjRF0OjF0DV2QHjOA=="
+    },
+    "devlop@1.1.0": {
+      "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+      "dependencies": [
+        "dequal"
+      ]
+    },
+    "diff@8.0.4": {
+      "integrity": "sha512-DPi0FmjiSU5EvQV0++GFDOJ9ASQUVFh5kD+OzOnYdi7n3Wpm9hWWGfB/O2blfHcMVTL5WkQXSnRiK9makhrcnw=="
+    },
+    "dlv@1.1.3": {
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
+    },
+    "dom-serializer@2.0.0": {
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "dependencies": [
+        "domelementtype",
+        "domhandler",
+        "entities@4.5.0"
+      ]
+    },
+    "domelementtype@2.3.0": {
+      "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="
+    },
+    "domhandler@5.0.3": {
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "dependencies": [
+        "domelementtype"
+      ]
+    },
+    "domutils@3.2.2": {
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "dependencies": [
+        "dom-serializer",
+        "domelementtype",
+        "domhandler"
+      ]
+    },
+    "dset@3.1.4": {
+      "integrity": "sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA=="
+    },
+    "ee-first@1.1.1": {
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
+    },
+    "encodeurl@2.0.0": {
+      "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg=="
+    },
+    "entities@4.5.0": {
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="
+    },
+    "entities@6.0.1": {
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g=="
+    },
+    "entities@7.0.1": {
+      "integrity": "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA=="
+    },
+    "es-module-lexer@1.7.0": {
+      "integrity": "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA=="
+    },
+    "es-module-lexer@2.0.0": {
+      "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw=="
+    },
+    "esbuild@0.27.7": {
+      "integrity": "sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==",
+      "optionalDependencies": [
+        "@esbuild/aix-ppc64",
+        "@esbuild/android-arm",
+        "@esbuild/android-arm64",
+        "@esbuild/android-x64",
+        "@esbuild/darwin-arm64",
+        "@esbuild/darwin-x64",
+        "@esbuild/freebsd-arm64",
+        "@esbuild/freebsd-x64",
+        "@esbuild/linux-arm",
+        "@esbuild/linux-arm64",
+        "@esbuild/linux-ia32",
+        "@esbuild/linux-loong64",
+        "@esbuild/linux-mips64el",
+        "@esbuild/linux-ppc64",
+        "@esbuild/linux-riscv64",
+        "@esbuild/linux-s390x",
+        "@esbuild/linux-x64",
+        "@esbuild/netbsd-arm64",
+        "@esbuild/netbsd-x64",
+        "@esbuild/openbsd-arm64",
+        "@esbuild/openbsd-x64",
+        "@esbuild/openharmony-arm64",
+        "@esbuild/sunos-x64",
+        "@esbuild/win32-arm64",
+        "@esbuild/win32-ia32",
+        "@esbuild/win32-x64"
+      ],
+      "scripts": true,
+      "bin": true
+    },
+    "escape-html@1.0.3": {
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
+    "escape-string-regexp@5.0.0": {
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw=="
+    },
+    "esm-env@1.2.2": {
+      "integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA=="
+    },
+    "esrap@2.2.4": {
+      "integrity": "sha512-suICpxAmZ9A8bzJjEl/+rLJiDKC0X4gYWUxT6URAWBLvlXmtbZd5ySMu/N2ZGEtMCAmflUDPSehrP9BQcsGcSg==",
+      "dependencies": [
+        "@jridgewell/sourcemap-codec",
+        "@typescript-eslint/types"
+      ]
+    },
+    "estree-walker@2.0.2": {
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+    },
+    "etag@1.8.1": {
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="
+    },
+    "eventemitter3@5.0.4": {
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw=="
+    },
+    "extend@3.0.2": {
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
+    },
+    "fast-string-truncated-width@1.2.1": {
+      "integrity": "sha512-Q9acT/+Uu3GwGj+5w/zsGuQjh9O1TyywhIwAxHudtWrgF09nHOPrvTLhQevPbttcxjr/SNN7mJmfOw/B1bXgow=="
+    },
+    "fast-string-width@1.1.0": {
+      "integrity": "sha512-O3fwIVIH5gKB38QNbdg+3760ZmGz0SZMgvwJbA1b2TGXceKE6A2cOlfogh1iw8lr049zPyd7YADHy+B7U4W9bQ==",
+      "dependencies": [
+        "fast-string-truncated-width"
+      ]
+    },
+    "fast-wrap-ansi@0.1.6": {
+      "integrity": "sha512-HlUwET7a5gqjURj70D5jl7aC3Zmy4weA1SHUfM0JFI0Ptq987NH2TwbBFLoERhfwk+E+eaq4EK3jXoT+R3yp3w==",
+      "dependencies": [
+        "fast-string-width"
+      ]
+    },
+    "fdir@6.5.0_picomatch@4.0.4": {
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dependencies": [
+        "picomatch@4.0.4"
+      ],
+      "optionalPeers": [
+        "picomatch@4.0.4"
+      ]
+    },
+    "flattie@1.1.1": {
+      "integrity": "sha512-9UbaD6XdAL97+k/n+N7JwX46K/M6Zc6KcFYskrYL8wbBV/Uyk0CTAMY0VT+qiK5PM7AIc9aTWYtq65U7T+aCNQ=="
+    },
+    "fontace@0.4.1": {
+      "integrity": "sha512-lDMvbAzSnHmbYMTEld5qdtvNH2/pWpICOqpean9IgC7vUbUJc3k+k5Dokp85CegamqQpFbXf0rAVkbzpyTA8aw==",
+      "dependencies": [
+        "fontkitten"
+      ]
+    },
+    "fontkitten@1.0.3": {
+      "integrity": "sha512-Wp1zXWPVUPBmfoa3Cqc9ctaKuzKAV6uLstRqlR56kSjplf5uAce+qeyYym7F+PHbGTk+tCEdkCW6RD7DX/gBZw==",
+      "dependencies": [
+        "tiny-inflate"
+      ]
+    },
+    "fresh@2.0.0": {
+      "integrity": "sha512-Rx/WycZ60HOaqLKAi6cHRKKI7zxWbJ31MhntmtwMoaTeF7XFH9hhBp8vITaMidfljRQ6eYWCKkaTK+ykVJHP2A=="
+    },
+    "fsevents@2.3.3": {
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "os": ["darwin"],
+      "scripts": true
+    },
+    "github-slugger@2.0.0": {
+      "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw=="
+    },
+    "h3@1.15.11": {
+      "integrity": "sha512-L3THSe2MPeBwgIZVSH5zLdBBU90TOxarvhK9d04IDY2AmVS8j2Jz2LIWtwsGOU3lu2I5jCN7FNvVfY2+XyF+mg==",
+      "dependencies": [
+        "cookie-es",
+        "crossws",
+        "defu",
+        "destr",
+        "iron-webcrypto",
+        "node-mock-http",
+        "radix3",
+        "ufo",
+        "uncrypto"
+      ]
+    },
+    "hast-util-from-html@2.0.3": {
+      "integrity": "sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==",
+      "dependencies": [
+        "@types/hast",
+        "devlop",
+        "hast-util-from-parse5",
+        "parse5",
+        "vfile",
+        "vfile-message"
+      ]
+    },
+    "hast-util-from-parse5@8.0.3": {
+      "integrity": "sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==",
+      "dependencies": [
+        "@types/hast",
+        "@types/unist",
+        "devlop",
+        "hastscript",
+        "property-information",
+        "vfile",
+        "vfile-location",
+        "web-namespaces"
+      ]
+    },
+    "hast-util-is-element@3.0.0": {
+      "integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==",
+      "dependencies": [
+        "@types/hast"
+      ]
+    },
+    "hast-util-parse-selector@4.0.0": {
+      "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+      "dependencies": [
+        "@types/hast"
+      ]
+    },
+    "hast-util-raw@9.1.0": {
+      "integrity": "sha512-Y8/SBAHkZGoNkpzqqfCldijcuUKh7/su31kEBp67cFY09Wy0mTRgtsLYsiIxMJxlu0f6AA5SUTbDR8K0rxnbUw==",
+      "dependencies": [
+        "@types/hast",
+        "@types/unist",
+        "@ungap/structured-clone",
+        "hast-util-from-parse5",
+        "hast-util-to-parse5",
+        "html-void-elements",
+        "mdast-util-to-hast",
+        "parse5",
+        "unist-util-position",
+        "unist-util-visit",
+        "vfile",
+        "web-namespaces",
+        "zwitch"
+      ]
+    },
+    "hast-util-to-html@9.0.5": {
+      "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==",
+      "dependencies": [
+        "@types/hast",
+        "@types/unist",
+        "ccount",
+        "comma-separated-tokens",
+        "hast-util-whitespace",
+        "html-void-elements",
+        "mdast-util-to-hast",
+        "property-information",
+        "space-separated-tokens",
+        "stringify-entities",
+        "zwitch"
+      ]
+    },
+    "hast-util-to-parse5@8.0.1": {
+      "integrity": "sha512-MlWT6Pjt4CG9lFCjiz4BH7l9wmrMkfkJYCxFwKQic8+RTZgWPuWxwAfjJElsXkex7DJjfSJsQIt931ilUgmwdA==",
+      "dependencies": [
+        "@types/hast",
+        "comma-separated-tokens",
+        "devlop",
+        "property-information",
+        "space-separated-tokens",
+        "web-namespaces",
+        "zwitch"
+      ]
+    },
+    "hast-util-to-text@4.0.2": {
+      "integrity": "sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==",
+      "dependencies": [
+        "@types/hast",
+        "@types/unist",
+        "hast-util-is-element",
+        "unist-util-find-after"
+      ]
+    },
+    "hast-util-whitespace@3.0.0": {
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "dependencies": [
+        "@types/hast"
+      ]
+    },
+    "hastscript@9.0.1": {
+      "integrity": "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==",
+      "dependencies": [
+        "@types/hast",
+        "comma-separated-tokens",
+        "hast-util-parse-selector",
+        "property-information",
+        "space-separated-tokens"
+      ]
+    },
+    "hono@4.12.12": {
+      "integrity": "sha512-p1JfQMKaceuCbpJKAPKVqyqviZdS0eUxH9v82oWo1kb9xjQ5wA6iP3FNVAPDFlz5/p7d45lO+BpSk1tuSZMF4Q=="
+    },
+    "html-escaper@3.0.3": {
+      "integrity": "sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ=="
+    },
+    "html-void-elements@3.0.0": {
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg=="
+    },
+    "http-cache-semantics@4.2.0": {
+      "integrity": "sha512-dTxcvPXqPvXBQpq5dUr6mEMJX4oIEFv6bwom3FDwKRDsuIjjJGANqhBuoAn9c1RQJIdAKav33ED65E2ys+87QQ=="
+    },
+    "http-errors@2.0.1": {
+      "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==",
+      "dependencies": [
+        "depd",
+        "inherits",
+        "setprototypeof",
+        "statuses",
+        "toidentifier"
+      ]
+    },
+    "inherits@2.0.4": {
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+    },
+    "iron-webcrypto@1.2.1": {
+      "integrity": "sha512-feOM6FaSr6rEABp/eDfVseKyTMDt+KGpeB35SkVn9Tyn0CqvVsY3EwI0v5i8nMHyJnzCIQf7nsy3p41TPkJZhg=="
+    },
+    "is-docker@3.0.0": {
+      "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
+      "bin": true
+    },
+    "is-inside-container@1.0.0": {
+      "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
+      "dependencies": [
+        "is-docker"
+      ],
+      "bin": true
+    },
+    "is-plain-obj@4.1.0": {
+      "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg=="
+    },
+    "is-reference@3.0.3": {
+      "integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
+      "dependencies": [
+        "@types/estree"
+      ]
+    },
+    "is-wsl@3.1.1": {
+      "integrity": "sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==",
+      "dependencies": [
+        "is-inside-container"
+      ]
+    },
+    "js-yaml@4.1.1": {
+      "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
+      "dependencies": [
+        "argparse"
+      ],
+      "bin": true
+    },
+    "launch-editor@2.13.2": {
+      "integrity": "sha512-4VVDnbOpLXy/s8rdRCSXb+zfMeFR0WlJWpET1iA9CQdlZDfwyLjUuGQzXU4VeOoey6AicSAluWan7Etga6Kcmg==",
+      "dependencies": [
+        "picocolors",
+        "shell-quote"
+      ]
+    },
+    "lightningcss-android-arm64@1.32.0": {
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "os": ["android"],
+      "cpu": ["arm64"]
+    },
+    "lightningcss-darwin-arm64@1.32.0": {
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "os": ["darwin"],
+      "cpu": ["arm64"]
+    },
+    "lightningcss-darwin-x64@1.32.0": {
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "os": ["darwin"],
+      "cpu": ["x64"]
+    },
+    "lightningcss-freebsd-x64@1.32.0": {
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "os": ["freebsd"],
+      "cpu": ["x64"]
+    },
+    "lightningcss-linux-arm-gnueabihf@1.32.0": {
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "os": ["linux"],
+      "cpu": ["arm"]
+    },
+    "lightningcss-linux-arm64-gnu@1.32.0": {
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "lightningcss-linux-arm64-musl@1.32.0": {
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "os": ["linux"],
+      "cpu": ["arm64"]
+    },
+    "lightningcss-linux-x64-gnu@1.32.0": {
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "lightningcss-linux-x64-musl@1.32.0": {
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "os": ["linux"],
+      "cpu": ["x64"]
+    },
+    "lightningcss-win32-arm64-msvc@1.32.0": {
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "os": ["win32"],
+      "cpu": ["arm64"]
+    },
+    "lightningcss-win32-x64-msvc@1.32.0": {
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "os": ["win32"],
+      "cpu": ["x64"]
+    },
+    "lightningcss@1.32.0": {
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "dependencies": [
+        "detect-libc"
+      ],
+      "optionalDependencies": [
+        "lightningcss-android-arm64",
+        "lightningcss-darwin-arm64",
+        "lightningcss-darwin-x64",
+        "lightningcss-freebsd-x64",
+        "lightningcss-linux-arm-gnueabihf",
+        "lightningcss-linux-arm64-gnu",
+        "lightningcss-linux-arm64-musl",
+        "lightningcss-linux-x64-gnu",
+        "lightningcss-linux-x64-musl",
+        "lightningcss-win32-arm64-msvc",
+        "lightningcss-win32-x64-msvc"
+      ]
+    },
+    "locate-character@3.0.0": {
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
+    },
+    "longest-streak@3.1.0": {
+      "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g=="
+    },
+    "lru-cache@11.3.3": {
+      "integrity": "sha512-JvNw9Y81y33E+BEYPr0U7omo+U9AySnsMsEiXgwT6yqd31VQWTLNQqmT4ou5eqPFUrTfIDFta2wKhB1hyohtAQ=="
+    },
+    "magic-string@0.30.21": {
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dependencies": [
+        "@jridgewell/sourcemap-codec"
+      ]
+    },
+    "magicast@0.5.2": {
+      "integrity": "sha512-E3ZJh4J3S9KfwdjZhe2afj6R9lGIN5Pher1pF39UGrXRqq/VDaGVIGN13BjHd2u8B61hArAGOnso7nBOouW3TQ==",
+      "dependencies": [
+        "@babel/parser",
+        "@babel/types",
+        "source-map-js"
+      ]
+    },
+    "markdown-table@3.0.4": {
+      "integrity": "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw=="
+    },
+    "mdast-util-definitions@6.0.0": {
+      "integrity": "sha512-scTllyX6pnYNZH/AIp/0ePz6s4cZtARxImwoPJ7kS42n+MnVsI4XbnG6d4ibehRIldYMWM2LD7ImQblVhUejVQ==",
+      "dependencies": [
+        "@types/mdast",
+        "@types/unist",
+        "unist-util-visit"
+      ]
+    },
+    "mdast-util-find-and-replace@3.0.2": {
+      "integrity": "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==",
+      "dependencies": [
+        "@types/mdast",
+        "escape-string-regexp",
+        "unist-util-is",
+        "unist-util-visit-parents"
+      ]
+    },
+    "mdast-util-from-markdown@2.0.3": {
+      "integrity": "sha512-W4mAWTvSlKvf8L6J+VN9yLSqQ9AOAAvHuoDAmPkz4dHf553m5gVj2ejadHJhoJmcmxEnOv6Pa8XJhpxE93kb8Q==",
+      "dependencies": [
+        "@types/mdast",
+        "@types/unist",
+        "decode-named-character-reference",
+        "devlop",
+        "mdast-util-to-string",
+        "micromark",
+        "micromark-util-decode-numeric-character-reference",
+        "micromark-util-decode-string",
+        "micromark-util-normalize-identifier",
+        "micromark-util-symbol",
+        "micromark-util-types",
+        "unist-util-stringify-position"
+      ]
+    },
+    "mdast-util-gfm-autolink-literal@2.0.1": {
+      "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+      "dependencies": [
+        "@types/mdast",
+        "ccount",
+        "devlop",
+        "mdast-util-find-and-replace",
+        "micromark-util-character"
+      ]
+    },
+    "mdast-util-gfm-footnote@2.1.0": {
+      "integrity": "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==",
+      "dependencies": [
+        "@types/mdast",
+        "devlop",
+        "mdast-util-from-markdown",
+        "mdast-util-to-markdown",
+        "micromark-util-normalize-identifier"
+      ]
+    },
+    "mdast-util-gfm-strikethrough@2.0.0": {
+      "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+      "dependencies": [
+        "@types/mdast",
+        "mdast-util-from-markdown",
+        "mdast-util-to-markdown"
+      ]
+    },
+    "mdast-util-gfm-table@2.0.0": {
+      "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+      "dependencies": [
+        "@types/mdast",
+        "devlop",
+        "markdown-table",
+        "mdast-util-from-markdown",
+        "mdast-util-to-markdown"
+      ]
+    },
+    "mdast-util-gfm-task-list-item@2.0.0": {
+      "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+      "dependencies": [
+        "@types/mdast",
+        "devlop",
+        "mdast-util-from-markdown",
+        "mdast-util-to-markdown"
+      ]
+    },
+    "mdast-util-gfm@3.1.0": {
+      "integrity": "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==",
+      "dependencies": [
+        "mdast-util-from-markdown",
+        "mdast-util-gfm-autolink-literal",
+        "mdast-util-gfm-footnote",
+        "mdast-util-gfm-strikethrough",
+        "mdast-util-gfm-table",
+        "mdast-util-gfm-task-list-item",
+        "mdast-util-to-markdown"
+      ]
+    },
+    "mdast-util-phrasing@4.1.0": {
+      "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
+      "dependencies": [
+        "@types/mdast",
+        "unist-util-is"
+      ]
+    },
+    "mdast-util-to-hast@13.2.1": {
+      "integrity": "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==",
+      "dependencies": [
+        "@types/hast",
+        "@types/mdast",
+        "@ungap/structured-clone",
+        "devlop",
+        "micromark-util-sanitize-uri",
+        "trim-lines",
+        "unist-util-position",
+        "unist-util-visit",
+        "vfile"
+      ]
+    },
+    "mdast-util-to-markdown@2.1.2": {
+      "integrity": "sha512-xj68wMTvGXVOKonmog6LwyJKrYXZPvlwabaryTjLh9LuvovB/KAH+kvi8Gjj+7rJjsFi23nkUxRQv1KqSroMqA==",
+      "dependencies": [
+        "@types/mdast",
+        "@types/unist",
+        "longest-streak",
+        "mdast-util-phrasing",
+        "mdast-util-to-string",
+        "micromark-util-classify-character",
+        "micromark-util-decode-string",
+        "unist-util-visit",
+        "zwitch"
+      ]
+    },
+    "mdast-util-to-string@4.0.0": {
+      "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
+      "dependencies": [
+        "@types/mdast"
+      ]
+    },
+    "mdn-data@2.0.28": {
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g=="
+    },
+    "mdn-data@2.27.1": {
+      "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ=="
+    },
+    "micromark-core-commonmark@2.0.3": {
+      "integrity": "sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==",
+      "dependencies": [
+        "decode-named-character-reference",
+        "devlop",
+        "micromark-factory-destination",
+        "micromark-factory-label",
+        "micromark-factory-space",
+        "micromark-factory-title",
+        "micromark-factory-whitespace",
+        "micromark-util-character",
+        "micromark-util-chunked",
+        "micromark-util-classify-character",
+        "micromark-util-html-tag-name",
+        "micromark-util-normalize-identifier",
+        "micromark-util-resolve-all",
+        "micromark-util-subtokenize",
+        "micromark-util-symbol",
+        "micromark-util-types"
+      ]
+    },
+    "micromark-extension-gfm-autolink-literal@2.1.0": {
+      "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+      "dependencies": [
+        "micromark-util-character",
+        "micromark-util-sanitize-uri",
+        "micromark-util-symbol",
+        "micromark-util-types"
+      ]
+    },
+    "micromark-extension-gfm-footnote@2.1.0": {
+      "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+      "dependencies": [
+        "devlop",
+        "micromark-core-commonmark",
+        "micromark-factory-space",
+        "micromark-util-character",
+        "micromark-util-normalize-identifier",
+        "micromark-util-sanitize-uri",
+        "micromark-util-symbol",
+        "micromark-util-types"
+      ]
+    },
+    "micromark-extension-gfm-strikethrough@2.1.0": {
+      "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+      "dependencies": [
+        "devlop",
+        "micromark-util-chunked",
+        "micromark-util-classify-character",
+        "micromark-util-resolve-all",
+        "micromark-util-symbol",
+        "micromark-util-types"
+      ]
+    },
+    "micromark-extension-gfm-table@2.1.1": {
+      "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
+      "dependencies": [
+        "devlop",
+        "micromark-factory-space",
+        "micromark-util-character",
+        "micromark-util-symbol",
+        "micromark-util-types"
+      ]
+    },
+    "micromark-extension-gfm-tagfilter@2.0.0": {
+      "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+      "dependencies": [
+        "micromark-util-types"
+      ]
+    },
+    "micromark-extension-gfm-task-list-item@2.1.0": {
+      "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+      "dependencies": [
+        "devlop",
+        "micromark-factory-space",
+        "micromark-util-character",
+        "micromark-util-symbol",
+        "micromark-util-types"
+      ]
+    },
+    "micromark-extension-gfm@3.0.0": {
+      "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+      "dependencies": [
+        "micromark-extension-gfm-autolink-literal",
+        "micromark-extension-gfm-footnote",
+        "micromark-extension-gfm-strikethrough",
+        "micromark-extension-gfm-table",
+        "micromark-extension-gfm-tagfilter",
+        "micromark-extension-gfm-task-list-item",
+        "micromark-util-combine-extensions",
+        "micromark-util-types"
+      ]
+    },
+    "micromark-factory-destination@2.0.1": {
+      "integrity": "sha512-Xe6rDdJlkmbFRExpTOmRj9N3MaWmbAgdpSrBQvCFqhezUn4AHqJHbaEnfbVYYiexVSs//tqOdY/DxhjdCiJnIA==",
+      "dependencies": [
+        "micromark-util-character",
+        "micromark-util-symbol",
+        "micromark-util-types"
+      ]
+    },
+    "micromark-factory-label@2.0.1": {
+      "integrity": "sha512-VFMekyQExqIW7xIChcXn4ok29YE3rnuyveW3wZQWWqF4Nv9Wk5rgJ99KzPvHjkmPXF93FXIbBp6YdW3t71/7Vg==",
+      "dependencies": [
+        "devlop",
+        "micromark-util-character",
+        "micromark-util-symbol",
+        "micromark-util-types"
+      ]
+    },
+    "micromark-factory-space@2.0.1": {
+      "integrity": "sha512-zRkxjtBxxLd2Sc0d+fbnEunsTj46SWXgXciZmHq0kDYGnck/ZSGj9/wULTV95uoeYiK5hRXP2mJ98Uo4cq/LQg==",
+      "dependencies": [
+        "micromark-util-character",
+        "micromark-util-types"
+      ]
+    },
+    "micromark-factory-title@2.0.1": {
+      "integrity": "sha512-5bZ+3CjhAd9eChYTHsjy6TGxpOFSKgKKJPJxr293jTbfry2KDoWkhBb6TcPVB4NmzaPhMs1Frm9AZH7OD4Cjzw==",
+      "dependencies": [
+        "micromark-factory-space",
+        "micromark-util-character",
+        "micromark-util-symbol",
+        "micromark-util-types"
+      ]
+    },
+    "micromark-factory-whitespace@2.0.1": {
+      "integrity": "sha512-Ob0nuZ3PKt/n0hORHyvoD9uZhr+Za8sFoP+OnMcnWK5lngSzALgQYKMr9RJVOWLqQYuyn6ulqGWSXdwf6F80lQ==",
+      "dependencies": [
+        "micromark-factory-space",
+        "micromark-util-character",
+        "micromark-util-symbol",
+        "micromark-util-types"
+      ]
+    },
+    "micromark-util-character@2.1.1": {
+      "integrity": "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==",
+      "dependencies": [
+        "micromark-util-symbol",
+        "micromark-util-types"
+      ]
+    },
+    "micromark-util-chunked@2.0.1": {
+      "integrity": "sha512-QUNFEOPELfmvv+4xiNg2sRYeS/P84pTW0TCgP5zc9FpXetHY0ab7SxKyAQCNCc1eK0459uoLI1y5oO5Vc1dbhA==",
+      "dependencies": [
+        "micromark-util-symbol"
+      ]
+    },
+    "micromark-util-classify-character@2.0.1": {
+      "integrity": "sha512-K0kHzM6afW/MbeWYWLjoHQv1sgg2Q9EccHEDzSkxiP/EaagNzCm7T/WMKZ3rjMbvIpvBiZgwR3dKMygtA4mG1Q==",
+      "dependencies": [
+        "micromark-util-character",
+        "micromark-util-symbol",
+        "micromark-util-types"
+      ]
+    },
+    "micromark-util-combine-extensions@2.0.1": {
+      "integrity": "sha512-OnAnH8Ujmy59JcyZw8JSbK9cGpdVY44NKgSM7E9Eh7DiLS2E9RNQf0dONaGDzEG9yjEl5hcqeIsj4hfRkLH/Bg==",
+      "dependencies": [
+        "micromark-util-chunked",
+        "micromark-util-types"
+      ]
+    },
+    "micromark-util-decode-numeric-character-reference@2.0.2": {
+      "integrity": "sha512-ccUbYk6CwVdkmCQMyr64dXz42EfHGkPQlBj5p7YVGzq8I7CtjXZJrubAYezf7Rp+bjPseiROqe7G6foFd+lEuw==",
+      "dependencies": [
+        "micromark-util-symbol"
+      ]
+    },
+    "micromark-util-decode-string@2.0.1": {
+      "integrity": "sha512-nDV/77Fj6eH1ynwscYTOsbK7rR//Uj0bZXBwJZRfaLEJ1iGBR6kIfNmlNqaqJf649EP0F3NWNdeJi03elllNUQ==",
+      "dependencies": [
+        "decode-named-character-reference",
+        "micromark-util-character",
+        "micromark-util-decode-numeric-character-reference",
+        "micromark-util-symbol"
+      ]
+    },
+    "micromark-util-encode@2.0.1": {
+      "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw=="
+    },
+    "micromark-util-html-tag-name@2.0.1": {
+      "integrity": "sha512-2cNEiYDhCWKI+Gs9T0Tiysk136SnR13hhO8yW6BGNyhOC4qYFnwF1nKfD3HFAIXA5c45RrIG1ub11GiXeYd1xA=="
+    },
+    "micromark-util-normalize-identifier@2.0.1": {
+      "integrity": "sha512-sxPqmo70LyARJs0w2UclACPUUEqltCkJ6PhKdMIDuJ3gSf/Q+/GIe3WKl0Ijb/GyH9lOpUkRAO2wp0GVkLvS9Q==",
+      "dependencies": [
+        "micromark-util-symbol"
+      ]
+    },
+    "micromark-util-resolve-all@2.0.1": {
+      "integrity": "sha512-VdQyxFWFT2/FGJgwQnJYbe1jjQoNTS4RjglmSjTUlpUMa95Htx9NHeYW4rGDJzbjvCsl9eLjMQwGeElsqmzcHg==",
+      "dependencies": [
+        "micromark-util-types"
+      ]
+    },
+    "micromark-util-sanitize-uri@2.0.1": {
+      "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+      "dependencies": [
+        "micromark-util-character",
+        "micromark-util-encode",
+        "micromark-util-symbol"
+      ]
+    },
+    "micromark-util-subtokenize@2.1.0": {
+      "integrity": "sha512-XQLu552iSctvnEcgXw6+Sx75GflAPNED1qx7eBJ+wydBb2KCbRZe+NwvIEEMM83uml1+2WSXpBAcp9IUCgCYWA==",
+      "dependencies": [
+        "devlop",
+        "micromark-util-chunked",
+        "micromark-util-symbol",
+        "micromark-util-types"
+      ]
+    },
+    "micromark-util-symbol@2.0.1": {
+      "integrity": "sha512-vs5t8Apaud9N28kgCrRUdEed4UJ+wWNvicHLPxCa9ENlYuAY31M0ETy5y1vA33YoNPDFTghEbnh6efaE8h4x0Q=="
+    },
+    "micromark-util-types@2.0.2": {
+      "integrity": "sha512-Yw0ECSpJoViF1qTU4DC6NwtC4aWGt1EkzaQB8KPPyCRR8z9TWeV0HbEFGTO+ZY1wB22zmxnJqhPyTpOVCpeHTA=="
+    },
+    "micromark@4.0.2": {
+      "integrity": "sha512-zpe98Q6kvavpCr1NPVSCMebCKfD7CA2NqZ+rykeNhONIJBpc1tFKt9hucLGwha3jNTNI8lHpctWJWoimVF4PfA==",
+      "dependencies": [
+        "@types/debug",
+        "debug",
+        "decode-named-character-reference",
+        "devlop",
+        "micromark-core-commonmark",
+        "micromark-factory-space",
+        "micromark-util-character",
+        "micromark-util-chunked",
+        "micromark-util-combine-extensions",
+        "micromark-util-decode-numeric-character-reference",
+        "micromark-util-encode",
+        "micromark-util-normalize-identifier",
+        "micromark-util-resolve-all",
+        "micromark-util-sanitize-uri",
+        "micromark-util-subtokenize",
+        "micromark-util-symbol",
+        "micromark-util-types"
+      ]
+    },
+    "mime-db@1.54.0": {
+      "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ=="
+    },
+    "mime-types@3.0.2": {
+      "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==",
+      "dependencies": [
+        "mime-db"
+      ]
+    },
+    "mitata@1.0.34": {
+      "integrity": "sha512-Mc3zrtNBKIMeHSCQ0XqRLo1vbdIx1wvFV9c8NJAiyho6AjNfMY8bVhbS12bwciUdd1t4rj8099CH3N3NFahaUA=="
+    },
+    "mrmime@2.0.1": {
+      "integrity": "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="
+    },
+    "ms@2.1.3": {
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "nanoid@3.3.11": {
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "bin": true
+    },
+    "neotraverse@0.6.18": {
+      "integrity": "sha512-Z4SmBUweYa09+o6pG+eASabEpP6QkQ70yHj351pQoEXIs8uHbaU2DWVmzBANKgflPa47A50PtB2+NgRpQvr7vA=="
+    },
+    "nlcst-to-string@4.0.0": {
+      "integrity": "sha512-YKLBCcUYKAg0FNlOBT6aI91qFmSiFKiluk655WzPF+DDMA02qIyy8uiRqI8QXtcFpEvll12LpL5MXqEmAZ+dcA==",
+      "dependencies": [
+        "@types/nlcst"
+      ]
+    },
+    "node-fetch-native@1.6.7": {
+      "integrity": "sha512-g9yhqoedzIUm0nTnTqAQvueMPVOuIY16bqgAJJC8XOOubYFNwz6IER9qs0Gq2Xd0+CecCKFjtdDTMA4u4xG06Q=="
+    },
+    "node-mock-http@1.0.4": {
+      "integrity": "sha512-8DY+kFsDkNXy1sJglUfuODx1/opAGJGyrTuFqEoN90oRc2Vk0ZbD4K2qmKXBBEhZQzdKHIVfEJpDU8Ak2NJEvQ=="
+    },
+    "normalize-path@3.0.0": {
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
+    },
+    "nth-check@2.1.1": {
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dependencies": [
+        "boolbase"
+      ]
+    },
+    "obug@2.1.1": {
+      "integrity": "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ=="
+    },
+    "ofetch@1.5.1": {
+      "integrity": "sha512-2W4oUZlVaqAPAil6FUg/difl6YhqhUR7x2eZY4bQCko22UXg3hptq9KLQdqFClV+Wu85UX7hNtdGTngi/1BxcA==",
+      "dependencies": [
+        "destr",
+        "node-fetch-native",
+        "ufo"
+      ]
+    },
+    "ohash@2.0.11": {
+      "integrity": "sha512-RdR9FQrFwNBNXAr4GixM8YaRZRJ5PUWbKYbE5eOsrwAjJW0q2REGcf79oYPsLyskQCZG1PLN+S/K1V00joZAoQ=="
+    },
+    "on-finished@2.4.1": {
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
+      "dependencies": [
+        "ee-first"
+      ]
+    },
+    "oniguruma-parser@0.12.1": {
+      "integrity": "sha512-8Unqkvk1RYc6yq2WBYRj4hdnsAxVze8i7iPfQr8e4uSP3tRv0rpZcbGUDvxfQQcdwHt/e9PrMvGCsa8OqG9X3w=="
+    },
+    "oniguruma-to-es@4.3.5": {
+      "integrity": "sha512-Zjygswjpsewa0NLTsiizVuMQZbp0MDyM6lIt66OxsF21npUDlzpHi1Mgb/qhQdkb+dWFTzJmFbEWdvZgRho8eQ==",
+      "dependencies": [
+        "oniguruma-parser",
+        "regex",
+        "regex-recursion"
+      ]
+    },
+    "oxfmt@0.43.0": {
+      "integrity": "sha512-KTYNG5ISfHSdmeZ25Xzb3qgz9EmQvkaGAxgBY/p38+ZiAet3uZeu7FnMwcSQJg152Qwl0wnYAxDc+Z/H6cvrwA==",
+      "dependencies": [
+        "tinypool"
+      ],
+      "optionalDependencies": [
+        "@oxfmt/binding-android-arm-eabi",
+        "@oxfmt/binding-android-arm64",
+        "@oxfmt/binding-darwin-arm64",
+        "@oxfmt/binding-darwin-x64",
+        "@oxfmt/binding-freebsd-x64",
+        "@oxfmt/binding-linux-arm-gnueabihf",
+        "@oxfmt/binding-linux-arm-musleabihf",
+        "@oxfmt/binding-linux-arm64-gnu",
+        "@oxfmt/binding-linux-arm64-musl",
+        "@oxfmt/binding-linux-ppc64-gnu",
+        "@oxfmt/binding-linux-riscv64-gnu",
+        "@oxfmt/binding-linux-riscv64-musl",
+        "@oxfmt/binding-linux-s390x-gnu",
+        "@oxfmt/binding-linux-x64-gnu",
+        "@oxfmt/binding-linux-x64-musl",
+        "@oxfmt/binding-openharmony-arm64",
+        "@oxfmt/binding-win32-arm64-msvc",
+        "@oxfmt/binding-win32-ia32-msvc",
+        "@oxfmt/binding-win32-x64-msvc"
+      ],
+      "bin": true
+    },
+    "oxlint-tsgolint@0.20.0": {
+      "integrity": "sha512-/Uc9TQyN1l8w9QNvXtVHYtz+SzDJHKpb5X0UnHodl0BVzijUPk0LPlDOHAvogd1UI+iy9ZSF6gQxEqfzUxCULQ==",
+      "optionalDependencies": [
+        "@oxlint-tsgolint/darwin-arm64",
+        "@oxlint-tsgolint/darwin-x64",
+        "@oxlint-tsgolint/linux-arm64",
+        "@oxlint-tsgolint/linux-x64",
+        "@oxlint-tsgolint/win32-arm64",
+        "@oxlint-tsgolint/win32-x64"
+      ],
+      "bin": true
+    },
+    "oxlint@1.58.0_oxlint-tsgolint@0.20.0": {
+      "integrity": "sha512-t4s9leczDMqlvOSjnbCQe7gtoLkWgBGZ7sBdCJ9EOj5IXFSG/X7OAzK4yuH4iW+4cAYe8kLFbC8tuYMwWZm+Cg==",
+      "dependencies": [
+        "oxlint-tsgolint"
+      ],
+      "optionalDependencies": [
+        "@oxlint/binding-android-arm-eabi",
+        "@oxlint/binding-android-arm64",
+        "@oxlint/binding-darwin-arm64",
+        "@oxlint/binding-darwin-x64",
+        "@oxlint/binding-freebsd-x64",
+        "@oxlint/binding-linux-arm-gnueabihf",
+        "@oxlint/binding-linux-arm-musleabihf",
+        "@oxlint/binding-linux-arm64-gnu",
+        "@oxlint/binding-linux-arm64-musl",
+        "@oxlint/binding-linux-ppc64-gnu",
+        "@oxlint/binding-linux-riscv64-gnu",
+        "@oxlint/binding-linux-riscv64-musl",
+        "@oxlint/binding-linux-s390x-gnu",
+        "@oxlint/binding-linux-x64-gnu",
+        "@oxlint/binding-linux-x64-musl",
+        "@oxlint/binding-openharmony-arm64",
+        "@oxlint/binding-win32-arm64-msvc",
+        "@oxlint/binding-win32-ia32-msvc",
+        "@oxlint/binding-win32-x64-msvc"
+      ],
+      "optionalPeers": [
+        "oxlint-tsgolint"
+      ],
+      "bin": true
+    },
+    "p-limit@7.3.0": {
+      "integrity": "sha512-7cIXg/Z0M5WZRblrsOla88S4wAK+zOQQWeBYfV3qJuJXMr+LnbYjaadrFaS0JILfEDPVqHyKnZ1Z/1d6J9VVUw==",
+      "dependencies": [
+        "yocto-queue"
+      ]
+    },
+    "p-queue@9.1.2": {
+      "integrity": "sha512-ktsDOALzTYTWWF1PbkNVg2rOt+HaOaMWJMUnt7T3qf5tvZ1L8dBW3tObzprBcXNMKkwj+yFSLqHso0x+UFcJXw==",
+      "dependencies": [
+        "eventemitter3",
+        "p-timeout"
+      ]
+    },
+    "p-timeout@7.0.1": {
+      "integrity": "sha512-AxTM2wDGORHGEkPCt8yqxOTMgpfbEHqF51f/5fJCmwFC3C/zNcGT63SymH2ttOAaiIws2zVg4+izQCjrakcwHg=="
+    },
+    "package-manager-detector@1.6.0": {
+      "integrity": "sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA=="
+    },
+    "parse-latin@7.0.0": {
+      "integrity": "sha512-mhHgobPPua5kZ98EF4HWiH167JWBfl4pvAIXXdbaVohtK7a6YBOy56kvhCqduqyo/f3yrHFWmqmiMg/BkBkYYQ==",
+      "dependencies": [
+        "@types/nlcst",
+        "@types/unist",
+        "nlcst-to-string",
+        "unist-util-modify-children",
+        "unist-util-visit-children",
+        "vfile"
+      ]
+    },
+    "parse5@7.3.0": {
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "dependencies": [
+        "entities@6.0.1"
+      ]
+    },
+    "piccolore@0.1.3": {
+      "integrity": "sha512-o8bTeDWjE086iwKrROaDf31K0qC/BENdm15/uH9usSC/uZjJOKb2YGiVHfLY4GhwsERiPI1jmwI2XrA7ACOxVw=="
+    },
+    "picocolors@1.1.1": {
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
+    },
+    "picomatch@2.3.2": {
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="
+    },
+    "picomatch@4.0.4": {
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A=="
+    },
+    "pixelmatch@7.1.0": {
+      "integrity": "sha512-1wrVzJ2STrpmONHKBy228LM1b84msXDUoAzVEl0R8Mz4Ce6EPr+IVtxm8+yvrqLYMHswREkjYFaMxnyGnaY3Ng==",
+      "dependencies": [
+        "pngjs"
+      ],
+      "bin": true
+    },
+    "pngjs@7.0.0": {
+      "integrity": "sha512-LKWqWJRhstyYo9pGvgor/ivk2w94eSjE3RGVuzLGlr3NmD8bf7RcYGze1mNdEHRP6TRP6rMuDHk5t44hnTRyow=="
+    },
+    "postcss@8.5.9": {
+      "integrity": "sha512-7a70Nsot+EMX9fFU3064K/kdHWZqGVY+BADLyXc8Dfv+mTLLVl6JzJpPaCZ2kQL9gIJvKXSLMHhqdRRjwQeFtw==",
+      "dependencies": [
+        "nanoid",
+        "picocolors",
+        "source-map-js"
+      ]
+    },
+    "prismjs@1.30.0": {
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw=="
+    },
+    "property-information@7.1.0": {
+      "integrity": "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ=="
+    },
+    "radix3@1.1.2": {
+      "integrity": "sha512-b484I/7b8rDEdSDKckSSBA8knMpcdsXudlE/LNL639wFoHKwLbEkQFZHWEYwDC0wa0FKUcCY+GAF73Z7wxNVFA=="
+    },
+    "range-parser@1.2.1": {
+      "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="
+    },
+    "react-dom@19.2.5_react@19.2.5": {
+      "integrity": "sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag==",
+      "dependencies": [
+        "react",
+        "scheduler"
+      ]
+    },
+    "react@19.2.5": {
+      "integrity": "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA=="
+    },
+    "readdirp@5.0.0": {
+      "integrity": "sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ=="
+    },
+    "regex-recursion@6.0.2": {
+      "integrity": "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==",
+      "dependencies": [
+        "regex-utilities"
+      ]
+    },
+    "regex-utilities@2.3.0": {
+      "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng=="
+    },
+    "regex@6.1.0": {
+      "integrity": "sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==",
+      "dependencies": [
+        "regex-utilities"
+      ]
+    },
+    "rehype-parse@9.0.1": {
+      "integrity": "sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==",
+      "dependencies": [
+        "@types/hast",
+        "hast-util-from-html",
+        "unified"
+      ]
+    },
+    "rehype-raw@7.0.0": {
+      "integrity": "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==",
+      "dependencies": [
+        "@types/hast",
+        "hast-util-raw",
+        "vfile"
+      ]
+    },
+    "rehype-stringify@10.0.1": {
+      "integrity": "sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==",
+      "dependencies": [
+        "@types/hast",
+        "hast-util-to-html",
+        "unified"
+      ]
+    },
+    "rehype@13.0.2": {
+      "integrity": "sha512-j31mdaRFrwFRUIlxGeuPXXKWQxet52RBQRvCmzl5eCefn/KGbomK5GMHNMsOJf55fgo3qw5tST5neDuarDYR2A==",
+      "dependencies": [
+        "@types/hast",
+        "rehype-parse",
+        "rehype-stringify",
+        "unified"
+      ]
+    },
+    "remark-gfm@4.0.1": {
+      "integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
+      "dependencies": [
+        "@types/mdast",
+        "mdast-util-gfm",
+        "micromark-extension-gfm",
+        "remark-parse",
+        "remark-stringify",
+        "unified"
+      ]
+    },
+    "remark-parse@11.0.0": {
+      "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
+      "dependencies": [
+        "@types/mdast",
+        "mdast-util-from-markdown",
+        "micromark-util-types",
+        "unified"
+      ]
+    },
+    "remark-rehype@11.1.2": {
+      "integrity": "sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==",
+      "dependencies": [
+        "@types/hast",
+        "@types/mdast",
+        "mdast-util-to-hast",
+        "unified",
+        "vfile"
+      ]
+    },
+    "remark-smartypants@3.0.2": {
+      "integrity": "sha512-ILTWeOriIluwEvPjv67v7Blgrcx+LZOkAUVtKI3putuhlZm84FnqDORNXPPm+HY3NdZOMhyDwZ1E+eZB/Df5dA==",
+      "dependencies": [
+        "retext",
+        "retext-smartypants",
+        "unified",
+        "unist-util-visit"
+      ]
+    },
+    "remark-stringify@11.0.0": {
+      "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+      "dependencies": [
+        "@types/mdast",
+        "mdast-util-to-markdown",
+        "unified"
+      ]
+    },
+    "retext-latin@4.0.0": {
+      "integrity": "sha512-hv9woG7Fy0M9IlRQloq/N6atV82NxLGveq+3H2WOi79dtIYWN8OaxogDm77f8YnVXJL2VD3bbqowu5E3EMhBYA==",
+      "dependencies": [
+        "@types/nlcst",
+        "parse-latin",
+        "unified"
+      ]
+    },
+    "retext-smartypants@6.2.0": {
+      "integrity": "sha512-kk0jOU7+zGv//kfjXEBjdIryL1Acl4i9XNkHxtM7Tm5lFiCog576fjNC9hjoR7LTKQ0DsPWy09JummSsH1uqfQ==",
+      "dependencies": [
+        "@types/nlcst",
+        "nlcst-to-string",
+        "unist-util-visit"
+      ]
+    },
+    "retext-stringify@4.0.0": {
+      "integrity": "sha512-rtfN/0o8kL1e+78+uxPTqu1Klt0yPzKuQ2BfWwwfgIUSayyzxpM1PJzkKt4V8803uB9qSy32MvI7Xep9khTpiA==",
+      "dependencies": [
+        "@types/nlcst",
+        "nlcst-to-string",
+        "unified"
+      ]
+    },
+    "retext@9.0.0": {
+      "integrity": "sha512-sbMDcpHCNjvlheSgMfEcVrZko3cDzdbe1x/e7G66dFp0Ff7Mldvi2uv6JkJQzdRcvLYE8CA8Oe8siQx8ZOgTcA==",
+      "dependencies": [
+        "@types/nlcst",
+        "retext-latin",
+        "retext-stringify",
+        "unified"
+      ]
+    },
+    "rolldown@1.0.0-rc.15": {
+      "integrity": "sha512-Ff31guA5zT6WjnGp0SXw76X6hzGRk/OQq2hE+1lcDe+lJdHSgnSX6nK3erbONHyCbpSj9a9E+uX/OvytZoWp2g==",
+      "dependencies": [
+        "@oxc-project/types@0.124.0",
+        "@rolldown/pluginutils@1.0.0-rc.15"
+      ],
+      "optionalDependencies": [
+        "@rolldown/binding-android-arm64",
+        "@rolldown/binding-darwin-arm64",
+        "@rolldown/binding-darwin-x64",
+        "@rolldown/binding-freebsd-x64",
+        "@rolldown/binding-linux-arm-gnueabihf",
+        "@rolldown/binding-linux-arm64-gnu",
+        "@rolldown/binding-linux-arm64-musl",
+        "@rolldown/binding-linux-ppc64-gnu",
+        "@rolldown/binding-linux-s390x-gnu",
+        "@rolldown/binding-linux-x64-gnu",
+        "@rolldown/binding-linux-x64-musl",
+        "@rolldown/binding-openharmony-arm64",
+        "@rolldown/binding-wasm32-wasi",
+        "@rolldown/binding-win32-arm64-msvc",
+        "@rolldown/binding-win32-x64-msvc"
+      ],
+      "bin": true
+    },
+    "rollup@4.60.1": {
+      "integrity": "sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w==",
+      "dependencies": [
+        "@types/estree"
+      ],
+      "optionalDependencies": [
+        "@rollup/rollup-android-arm-eabi",
+        "@rollup/rollup-android-arm64",
+        "@rollup/rollup-darwin-arm64",
+        "@rollup/rollup-darwin-x64",
+        "@rollup/rollup-freebsd-arm64",
+        "@rollup/rollup-freebsd-x64",
+        "@rollup/rollup-linux-arm-gnueabihf",
+        "@rollup/rollup-linux-arm-musleabihf",
+        "@rollup/rollup-linux-arm64-gnu",
+        "@rollup/rollup-linux-arm64-musl",
+        "@rollup/rollup-linux-loong64-gnu",
+        "@rollup/rollup-linux-loong64-musl",
+        "@rollup/rollup-linux-ppc64-gnu",
+        "@rollup/rollup-linux-ppc64-musl",
+        "@rollup/rollup-linux-riscv64-gnu",
+        "@rollup/rollup-linux-riscv64-musl",
+        "@rollup/rollup-linux-s390x-gnu",
+        "@rollup/rollup-linux-x64-gnu",
+        "@rollup/rollup-linux-x64-musl",
+        "@rollup/rollup-openbsd-x64",
+        "@rollup/rollup-openharmony-arm64",
+        "@rollup/rollup-win32-arm64-msvc",
+        "@rollup/rollup-win32-ia32-msvc",
+        "@rollup/rollup-win32-x64-gnu",
+        "@rollup/rollup-win32-x64-msvc",
+        "fsevents"
+      ],
+      "bin": true
+    },
+    "sax@1.6.0": {
+      "integrity": "sha512-6R3J5M4AcbtLUdZmRv2SygeVaM7IhrLXu9BmnOGmmACak8fiUtOsYNWUS4uK7upbmHIBbLBeFeI//477BKLBzA=="
+    },
+    "scheduler@0.27.0": {
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="
+    },
+    "semver@7.7.4": {
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "bin": true
+    },
+    "send@1.2.1": {
+      "integrity": "sha512-1gnZf7DFcoIcajTjTwjwuDjzuz4PPcY2StKPlsGAQ1+YH20IRVrBaXSWmdjowTJ6u8Rc01PoYOGHXfP1mYcZNQ==",
+      "dependencies": [
+        "debug",
+        "encodeurl",
+        "escape-html",
+        "etag",
+        "fresh",
+        "http-errors",
+        "mime-types",
+        "ms",
+        "on-finished",
+        "range-parser",
+        "statuses"
+      ]
+    },
+    "seroval-plugins@1.5.2_seroval@1.5.2": {
+      "integrity": "sha512-qpY0Cl+fKYFn4GOf3cMiq6l72CpuVaawb6ILjubOQ+diJ54LfOWaSSPsaswN8DRPIPW4Yq+tE1k5aKd7ILyaFg==",
+      "dependencies": [
+        "seroval"
+      ]
+    },
+    "seroval@1.5.2": {
+      "integrity": "sha512-xcRN39BdsnO9Tf+VzsE7b3JyTJASItIV1FVFewJKCFcW4s4haIKS3e6vj8PGB9qBwC7tnuOywQMdv5N4qkzi7Q=="
+    },
+    "server-destroy@1.0.1": {
+      "integrity": "sha512-rb+9B5YBIEzYcD6x2VKidaa+cqYBJQKnU4oe4E3ANwRRN56yk/ua1YCJT1n21NTS8w6CcOclAKNP3PhdCXKYtQ=="
+    },
+    "setprototypeof@1.2.0": {
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
+    },
+    "sharp@0.34.5": {
+      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "dependencies": [
+        "@img/colour",
+        "detect-libc",
+        "semver"
+      ],
+      "optionalDependencies": [
+        "@img/sharp-darwin-arm64",
+        "@img/sharp-darwin-x64",
+        "@img/sharp-libvips-darwin-arm64",
+        "@img/sharp-libvips-darwin-x64",
+        "@img/sharp-libvips-linux-arm",
+        "@img/sharp-libvips-linux-arm64",
+        "@img/sharp-libvips-linux-ppc64",
+        "@img/sharp-libvips-linux-riscv64",
+        "@img/sharp-libvips-linux-s390x",
+        "@img/sharp-libvips-linux-x64",
+        "@img/sharp-libvips-linuxmusl-arm64",
+        "@img/sharp-libvips-linuxmusl-x64",
+        "@img/sharp-linux-arm",
+        "@img/sharp-linux-arm64",
+        "@img/sharp-linux-ppc64",
+        "@img/sharp-linux-riscv64",
+        "@img/sharp-linux-s390x",
+        "@img/sharp-linux-x64",
+        "@img/sharp-linuxmusl-arm64",
+        "@img/sharp-linuxmusl-x64",
+        "@img/sharp-wasm32",
+        "@img/sharp-win32-arm64",
+        "@img/sharp-win32-ia32",
+        "@img/sharp-win32-x64"
+      ],
+      "scripts": true
+    },
+    "shell-quote@1.8.3": {
+      "integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw=="
+    },
+    "shiki@4.0.2": {
+      "integrity": "sha512-eAVKTMedR5ckPo4xne/PjYQYrU3qx78gtJZ+sHlXEg5IHhhoQhMfZVzetTYuaJS0L2Ef3AcCRzCHV8T0WI6nIQ==",
+      "dependencies": [
+        "@shikijs/core",
+        "@shikijs/engine-javascript",
+        "@shikijs/engine-oniguruma",
+        "@shikijs/langs",
+        "@shikijs/themes",
+        "@shikijs/types",
+        "@shikijs/vscode-textmate",
+        "@types/hast"
+      ]
+    },
+    "sirv@3.0.2": {
+      "integrity": "sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==",
+      "dependencies": [
+        "@polka/url",
+        "mrmime",
+        "totalist"
+      ]
+    },
+    "sisteransi@1.0.5": {
+      "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
+    },
+    "smol-toml@1.6.1": {
+      "integrity": "sha512-dWUG8F5sIIARXih1DTaQAX4SsiTXhInKf1buxdY9DIg4ZYPZK5nGM1VRIYmEbDbsHt7USo99xSLFu5Q1IqTmsg=="
+    },
+    "solid-js@1.9.12": {
+      "integrity": "sha512-QzKaSJq2/iDrWR1As6MHZQ8fQkdOBf8GReYb7L5iKwMGceg7HxDcaOHk0at66tNgn9U2U7dXo8ZZpLIAmGMzgw==",
+      "dependencies": [
+        "csstype",
+        "seroval",
+        "seroval-plugins"
+      ]
+    },
+    "source-map-js@1.2.1": {
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="
+    },
+    "space-separated-tokens@2.0.2": {
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q=="
+    },
+    "statuses@2.0.2": {
+      "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw=="
+    },
+    "std-env@4.0.0": {
+      "integrity": "sha512-zUMPtQ/HBY3/50VbpkupYHbRroTRZJPRLvreamgErJVys0ceuzMkD44J/QjqhHjOzK42GQ3QZIeFG1OYfOtKqQ=="
+    },
+    "stringify-entities@4.0.4": {
+      "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
+      "dependencies": [
+        "character-entities-html4",
+        "character-entities-legacy"
+      ]
+    },
+    "svelte@5.55.2": {
+      "integrity": "sha512-z41M/hi0ZPTzrwVKLvB/R1/Oo08gL1uIib8HZ+FncqxxtY9MLb01emg2fqk+WLZ/lNrrtNDFh7BZLDxAHvMgLw==",
+      "dependencies": [
+        "@jridgewell/remapping",
+        "@jridgewell/sourcemap-codec",
+        "@sveltejs/acorn-typescript",
+        "@types/estree",
+        "@types/trusted-types",
+        "acorn",
+        "aria-query@5.3.1",
+        "axobject-query",
+        "clsx",
+        "devalue",
+        "esm-env",
+        "esrap",
+        "is-reference",
+        "locate-character",
+        "magic-string",
+        "zimmerframe"
+      ]
+    },
+    "svgo@4.0.1": {
+      "integrity": "sha512-XDpWUOPC6FEibaLzjfe0ucaV0YrOjYotGJO1WpF0Zd+n6ZGEQUsSugaoLq9QkEZtAfQIxT42UChcssDVPP3+/w==",
+      "dependencies": [
+        "commander",
+        "css-select",
+        "css-tree@3.2.1",
+        "css-what",
+        "csso",
+        "picocolors",
+        "sax"
+      ],
+      "bin": true
+    },
+    "tiny-inflate@1.0.3": {
+      "integrity": "sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw=="
+    },
+    "tinybench@2.9.0": {
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg=="
+    },
+    "tinyclip@0.1.12": {
+      "integrity": "sha512-Ae3OVUqifDw0wBriIBS7yVaW44Dp6eSHQcyq4Igc7eN2TJH/2YsicswaW+J/OuMvhpDPOKEgpAZCjkb4hpoyeA=="
+    },
+    "tinyexec@1.1.1": {
+      "integrity": "sha512-VKS/ZaQhhkKFMANmAOhhXVoIfBXblQxGX1myCQ2faQrfmobMftXeJPcZGp0gS07ocvGJWDLZGyOZDadDBqYIJg=="
+    },
+    "tinyglobby@0.2.16": {
+      "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
+      "dependencies": [
+        "fdir",
+        "picomatch@4.0.4"
+      ]
+    },
+    "tinypool@2.1.0": {
+      "integrity": "sha512-Pugqs6M0m7Lv1I7FtxN4aoyToKg1C4tu+/381vH35y8oENM/Ai7f7C4StcoK4/+BSw9ebcS8jRiVrORFKCALLw=="
+    },
+    "toidentifier@1.0.1": {
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="
+    },
+    "totalist@3.0.1": {
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ=="
+    },
+    "trim-lines@3.0.1": {
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg=="
+    },
+    "trough@2.2.0": {
+      "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw=="
+    },
+    "tsconfck@3.1.6_typescript@5.9.3": {
+      "integrity": "sha512-ks6Vjr/jEw0P1gmOVwutM3B7fWxoWBL2KRDb1JfqGVawBmO5UsvmWOQFGHBPl5yxYz4eERr19E6L7NMv+Fej4w==",
+      "dependencies": [
+        "typescript"
+      ],
+      "optionalPeers": [
+        "typescript"
+      ],
+      "bin": true
+    },
+    "tslib@2.8.1": {
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+    },
+    "typescript@5.9.3": {
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "bin": true
+    },
+    "ufo@1.6.3": {
+      "integrity": "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q=="
+    },
+    "ultrahtml@1.6.0": {
+      "integrity": "sha512-R9fBn90VTJrqqLDwyMph+HGne8eqY1iPfYhPzZrvKpIfwkWZbcYlfpsb8B9dTvBfpy1/hqAD7Wi8EKfP9e8zdw=="
+    },
+    "uncrypto@0.1.3": {
+      "integrity": "sha512-Ql87qFHB3s/De2ClA9e0gsnS6zXG27SkTiSJwjCc9MebbfapQfuPzumMIUMi38ezPZVNFcHI9sUIepeQfw8J8Q=="
+    },
+    "undici-types@7.16.0": {
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="
+    },
+    "unified@11.0.5": {
+      "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
+      "dependencies": [
+        "@types/unist",
+        "bail",
+        "devlop",
+        "extend",
+        "is-plain-obj",
+        "trough",
+        "vfile"
+      ]
+    },
+    "unifont@0.7.4": {
+      "integrity": "sha512-oHeis4/xl42HUIeHuNZRGEvxj5AaIKR+bHPNegRq5LV1gdc3jundpONbjglKpihmJf+dswygdMJn3eftGIMemg==",
+      "dependencies": [
+        "css-tree@3.2.1",
+        "ofetch",
+        "ohash"
+      ]
+    },
+    "unist-util-find-after@5.0.0": {
+      "integrity": "sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==",
+      "dependencies": [
+        "@types/unist",
+        "unist-util-is"
+      ]
+    },
+    "unist-util-is@6.0.1": {
+      "integrity": "sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==",
+      "dependencies": [
+        "@types/unist"
+      ]
+    },
+    "unist-util-modify-children@4.0.0": {
+      "integrity": "sha512-+tdN5fGNddvsQdIzUF3Xx82CU9sMM+fA0dLgR9vOmT0oPT2jH+P1nd5lSqfCfXAw+93NhcXNY2qqvTUtE4cQkw==",
+      "dependencies": [
+        "@types/unist",
+        "array-iterate"
+      ]
+    },
+    "unist-util-position@5.0.0": {
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "dependencies": [
+        "@types/unist"
+      ]
+    },
+    "unist-util-remove-position@5.0.0": {
+      "integrity": "sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==",
+      "dependencies": [
+        "@types/unist",
+        "unist-util-visit"
+      ]
+    },
+    "unist-util-stringify-position@4.0.0": {
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+      "dependencies": [
+        "@types/unist"
+      ]
+    },
+    "unist-util-visit-children@3.0.0": {
+      "integrity": "sha512-RgmdTfSBOg04sdPcpTSD1jzoNBjt9a80/ZCzp5cI9n1qPzLZWF9YdvWGN2zmTumP1HWhXKdUWexjy/Wy/lJ7tA==",
+      "dependencies": [
+        "@types/unist"
+      ]
+    },
+    "unist-util-visit-parents@6.0.2": {
+      "integrity": "sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==",
+      "dependencies": [
+        "@types/unist",
+        "unist-util-is"
+      ]
+    },
+    "unist-util-visit@5.1.0": {
+      "integrity": "sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==",
+      "dependencies": [
+        "@types/unist",
+        "unist-util-is",
+        "unist-util-visit-parents"
+      ]
+    },
+    "unstorage@1.17.5": {
+      "integrity": "sha512-0i3iqvRfx29hkNntHyQvJTpf5W9dQ9ZadSoRU8+xVlhVtT7jAX57fazYO9EHvcRCfBCyi5YRya7XCDOsbTgkPg==",
+      "dependencies": [
+        "anymatch",
+        "chokidar",
+        "destr",
+        "h3",
+        "lru-cache",
+        "node-fetch-native",
+        "ofetch",
+        "ufo"
+      ]
+    },
+    "vfile-location@5.0.3": {
+      "integrity": "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==",
+      "dependencies": [
+        "@types/unist",
+        "vfile"
+      ]
+    },
+    "vfile-message@4.0.3": {
+      "integrity": "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==",
+      "dependencies": [
+        "@types/unist",
+        "unist-util-stringify-position"
+      ]
+    },
+    "vfile@6.0.3": {
+      "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
+      "dependencies": [
+        "@types/unist",
+        "vfile-message"
+      ]
+    },
+    "vite-plus@0.1.16_@types+node@24.12.2_typescript@5.9.3_vite@8.0.8__@types+node@24.12.2": {
+      "integrity": "sha512-sgYHc5zWLSDInaHb/abvEA7UOwh7sUWuyNt+Slphj55jPvzodT8Dqw115xyKwDARTuRFSpm1eo/t58qZ8/NylQ==",
+      "dependencies": [
+        "@oxc-project/types@0.123.0",
+        "@voidzero-dev/vite-plus-core",
+        "@voidzero-dev/vite-plus-test",
+        "oxfmt",
+        "oxlint",
+        "oxlint-tsgolint"
+      ],
+      "optionalDependencies": [
+        "@voidzero-dev/vite-plus-darwin-arm64",
+        "@voidzero-dev/vite-plus-darwin-x64",
+        "@voidzero-dev/vite-plus-linux-arm64-gnu",
+        "@voidzero-dev/vite-plus-linux-arm64-musl",
+        "@voidzero-dev/vite-plus-linux-x64-gnu",
+        "@voidzero-dev/vite-plus-linux-x64-musl",
+        "@voidzero-dev/vite-plus-win32-arm64-msvc",
+        "@voidzero-dev/vite-plus-win32-x64-msvc"
+      ],
+      "bin": true
+    },
+    "vite@7.3.2_@types+node@24.12.2": {
+      "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
+      "dependencies": [
+        "@types/node",
+        "esbuild",
+        "fdir",
+        "picomatch@4.0.4",
+        "postcss",
+        "rollup",
+        "tinyglobby"
+      ],
+      "optionalDependencies": [
+        "fsevents"
+      ],
+      "optionalPeers": [
+        "@types/node"
+      ],
+      "bin": true
+    },
+    "vite@8.0.8_@types+node@24.12.2": {
+      "integrity": "sha512-dbU7/iLVa8KZALJyLOBOQ88nOXtNG8vxKuOT4I2mD+Ya70KPceF4IAmDsmU0h1Qsn5bPrvsY9HJstCRh3hG6Uw==",
+      "dependencies": [
+        "@types/node",
+        "lightningcss",
+        "picomatch@4.0.4",
+        "postcss",
+        "rolldown",
+        "tinyglobby"
+      ],
+      "optionalDependencies": [
+        "fsevents"
+      ],
+      "optionalPeers": [
+        "@types/node"
+      ],
+      "bin": true
+    },
+    "vitefu@1.1.3_vite@7.3.2__@types+node@24.12.2_@types+node@24.12.2": {
+      "integrity": "sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg==",
+      "dependencies": [
+        "vite@7.3.2_@types+node@24.12.2"
+      ],
+      "optionalPeers": [
+        "vite@7.3.2_@types+node@24.12.2"
+      ]
+    },
+    "vitefu@1.1.3_vite@8.0.8__@types+node@24.12.2_@types+node@24.12.2": {
+      "integrity": "sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg==",
+      "dependencies": [
+        "vite@8.0.8_@types+node@24.12.2"
+      ],
+      "optionalPeers": [
+        "vite@8.0.8_@types+node@24.12.2"
+      ]
+    },
+    "vue@3.5.32_typescript@5.9.3": {
+      "integrity": "sha512-vM4z4Q9tTafVfMAK7IVzmxg34rSzTFMyIe0UUEijUCkn9+23lj0WRfA83dg7eQZIUlgOSGrkViIaCfqSAUXsMw==",
+      "dependencies": [
+        "@vue/compiler-dom",
+        "@vue/compiler-sfc",
+        "@vue/runtime-dom",
+        "@vue/server-renderer",
+        "@vue/shared",
+        "typescript"
+      ],
+      "optionalPeers": [
+        "typescript"
+      ]
+    },
+    "web-namespaces@2.0.1": {
+      "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ=="
+    },
+    "which-pm-runs@1.1.0": {
+      "integrity": "sha512-n1brCuqClxfFfq/Rb0ICg9giSZqCS+pLtccdag6C2HyufBrh3fBOiy9nb6ggRMvWOVH5GrdJskj5iGTZNxd7SA=="
+    },
+    "ws@8.20.0": {
+      "integrity": "sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA=="
+    },
+    "xxhash-wasm@1.1.0": {
+      "integrity": "sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA=="
+    },
+    "yargs-parser@22.0.0": {
+      "integrity": "sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw=="
+    },
+    "yocto-queue@1.2.2": {
+      "integrity": "sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ=="
+    },
+    "zimmerframe@1.1.4": {
+      "integrity": "sha512-B58NGBEoc8Y9MWWCQGl/gq9xBCe4IiKM0a2x7GZdQKOW5Exr8S1W24J6OgM1njK8xCRGvAJIL/MxXHf6SkmQKQ=="
+    },
+    "zod@4.3.6": {
+      "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg=="
+    },
+    "zwitch@2.0.4": {
+      "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="
+    }
+  },
+  "workspace": {
+    "packageJson": {
+      "dependencies": [
+        "npm:@types/bun@latest",
+        "npm:mitata@^1.0.34",
+        "npm:vite-plus@~0.1.16"
+      ]
+    },
+    "members": {
+      "apps/astro": {
+        "packageJson": {
+          "dependencies": [
+            "npm:@astrojs/node@^10.0.4",
+            "npm:astro@^6.1.4"
+          ]
+        }
+      },
+      "apps/eclipsa": {
+        "packageJson": {
+          "dependencies": [
+            "npm:@types/node@^24.5.2",
+            "npm:hono@^4.6.4",
+            "npm:typescript@^5.9.2",
+            "npm:vite@latest"
+          ]
+        }
+      },
+      "apps/hono": {
+        "packageJson": {
+          "dependencies": [
+            "npm:hono@^4.10.4",
+            "npm:vite@^8.0.5"
+          ]
+        }
+      },
+      "apps/qwik": {
+        "packageJson": {
+          "dependencies": [
+            "npm:@builder.io/qwik@^1.19.2",
+            "npm:vite@^8.0.5"
+          ]
+        }
+      },
+      "apps/react": {
+        "packageJson": {
+          "dependencies": [
+            "npm:@types/bun@latest",
+            "npm:@types/react-dom@^19.2.3",
+            "npm:@vitejs/plugin-react@^6.0.1",
+            "npm:react-dom@^19.2.4",
+            "npm:react@^19.2.4",
+            "npm:vite@^8.0.5"
+          ]
+        }
+      },
+      "apps/solid": {
+        "packageJson": {
+          "dependencies": [
+            "npm:solid-js@^1.9.9",
+            "npm:vite@^8.0.5"
+          ]
+        }
+      },
+      "apps/svelte": {
+        "packageJson": {
+          "dependencies": [
+            "npm:@sveltejs/vite-plugin-svelte@^6.2.1",
+            "npm:svelte@^5.40.1",
+            "npm:vite@^8.0.5"
+          ]
+        }
+      },
+      "apps/vue": {
+        "packageJson": {
+          "dependencies": [
+            "npm:@vitejs/plugin-vue@^6.0.5",
+            "npm:@vue/server-renderer@^3.5.22",
+            "npm:vite@^8.0.5",
+            "npm:vue@^3.5.22"
+          ]
+        }
+      },
+      "apps/vue-vapor": {
+        "packageJson": {
+          "dependencies": [
+            "npm:@vue-vapor/server-renderer@3.20240714.0-6608bb3",
+            "npm:@vue-vapor/vapor@3.20240714.0-6608bb3",
+            "npm:@vue-vapor/vite-plugin-vue@0.0.0-alpha.6",
+            "npm:vite@^8.0.5"
+          ]
+        }
+      }
+    }
+  }
+}
diff --git a/benchmarks/package.json b/benchmarks/package.json
new file mode 100644
index 0000000..770c12d
--- /dev/null
+++ b/benchmarks/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "benchmarks",
+  "private": true,
+  "workspaces": [
+    "apps/*"
+  ],
+  "type": "module",
+  "scripts": {
+    "build": "vite-plus run build:all",
+    "bench": "bun run ./benchmark.js",
+    "bench:bun": "bun run ./benchmark.js",
+    "bench:node": "node ./benchmark.js",
+    "bench:deno": "deno run --import-map=./deno.import-map.json --allow-read --allow-env --allow-sys --node-modules-dir=auto ./benchmark.js",
+    "test": "bun test"
+  },
+  "dependencies": {
+    "mitata": "^1.0.34"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "vite-plus": "^0.1.16"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  },
+  "packageManager": "bun@1.3.11"
+}
diff --git a/benchmarks/runtime.js b/benchmarks/runtime.js
new file mode 100644
index 0000000..f33197d
--- /dev/null
+++ b/benchmarks/runtime.js
@@ -0,0 +1,30 @@
+export const benchmarkRuntimes = ['bun', 'node', 'deno']
+
+export const detectRuntime = () => {
+  if (typeof Bun !== 'undefined') {
+    return 'bun'
+  }
+
+  if (typeof Deno !== 'undefined') {
+    return 'deno'
+  }
+
+  if (typeof process !== 'undefined' && typeof process.versions?.node === 'string') {
+    return 'node'
+  }
+
+  return 'unknown'
+}
+
+export const getBenchmarkCommand = (runtime) => {
+  switch (runtime) {
+    case 'bun':
+      return 'bun run ./benchmark.js'
+    case 'node':
+      return 'node ./benchmark.js'
+    case 'deno':
+      return 'deno run --import-map=./deno.import-map.json --allow-read --allow-env --allow-sys --node-modules-dir=auto ./benchmark.js'
+    default:
+      throw new Error(`Unsupported runtime: ${runtime}`)
+  }
+}
diff --git a/benchmarks/runtime.test.ts b/benchmarks/runtime.test.ts
new file mode 100644
index 0000000..9ce7472
--- /dev/null
+++ b/benchmarks/runtime.test.ts
@@ -0,0 +1,15 @@
+import { expect, test } from 'bun:test'
+import { benchmarkRuntimes, detectRuntime, getBenchmarkCommand } from './runtime.js'
+
+test('runtime commands are exposed for bun, node, and deno', () => {
+  expect(benchmarkRuntimes).toEqual(['bun', 'node', 'deno'])
+  expect(getBenchmarkCommand('bun')).toBe('bun run ./benchmark.js')
+  expect(getBenchmarkCommand('node')).toBe('node ./benchmark.js')
+  expect(getBenchmarkCommand('deno')).toBe(
+    'deno run --import-map=./deno.import-map.json --allow-read --allow-env --allow-sys --node-modules-dir=auto ./benchmark.js',
+  )
+})
+
+test('runtime detection recognizes bun in this environment', () => {
+  expect(detectRuntime()).toBe('bun')
+})
diff --git a/benchmarks/tsconfig.json b/benchmarks/tsconfig.json
new file mode 100644
index 0000000..bfa0fea
--- /dev/null
+++ b/benchmarks/tsconfig.json
@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    // Environment setup & latest features
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}
diff --git a/benchmarks/vite.config.ts b/benchmarks/vite.config.ts
new file mode 100644
index 0000000..c45e99e
--- /dev/null
+++ b/benchmarks/vite.config.ts
@@ -0,0 +1,63 @@
+import { defineConfig } from 'vite-plus'
+
+export default defineConfig({
+  run: {
+    tasks: {
+      'build:all': {
+        dependsOn: [
+          'build:framework',
+          'build:astro',
+          'build:react',
+          'build:qwik',
+          'build:eclipsa',
+          'build:hono',
+          'build:solid',
+          'build:svelte',
+          'build:vue',
+          'build:vue-vapor',
+        ],
+        command: '',
+      },
+      'build:framework': {
+        command: 'bun run build',
+        cwd: '../packages/eclipsa',
+      },
+      'build:astro': {
+        command: 'bun run build',
+        cwd: 'apps/astro',
+      },
+      'build:react': {
+        command: 'bun run build',
+        cwd: 'apps/react',
+      },
+      'build:qwik': {
+        command: 'bun run build',
+        cwd: 'apps/qwik',
+      },
+      'build:eclipsa': {
+        command: 'bun run build',
+        cwd: 'apps/eclipsa',
+      },
+      'build:hono': {
+        command: 'bun run build',
+        cwd: 'apps/hono',
+      },
+      'build:solid': {
+        command: 'bun run build',
+        cwd: 'apps/solid',
+      },
+      'build:svelte': {
+        command: 'bun run build',
+        cwd: 'apps/svelte',
+      },
+      'build:vue': {
+        command: 'bun run build',
+        cwd: 'apps/vue',
+      },
+      'build:vue-vapor': {
+        command: 'bun run build',
+        cwd: 'apps/vue-vapor',
+      },
+    },
+  },
+})
diff --git a/bun.lock b/bun.lock
index d429769..8189df6 100644
--- a/bun.lock
+++ b/bun.lock
@@ -5,25 +5,44 @@
     "": {
       "name": "eclipsa-workspace",
       "devDependencies": {
+        "@eclipsa/optimizer": "workspace:^",
         "@types/node": "^24.5.2",
+        "@types/react": "^19.2.2",
+        "@types/react-dom": "^19.2.2",
         "@voidzero-dev/vite-plus-core": "^0.1.4",
         "@voidzero-dev/vite-plus-test": "^0.1.4",
+        "c8": "^11.0.0",
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0",
         "turbo": "^2.8.16",
         "typescript": "^5.9.2",
         "vite": "npm:@voidzero-dev/vite-plus-core@^0.1.4",
         "vite-plus": "^0.1.4",
         "vitest": "npm:@voidzero-dev/vite-plus-test@^0.1.4",
+        "vue": "^3.5.22",
       },
     },
     "docs": {
       "name": "@eclipsa/docs",
       "dependencies": {
+        "@eclipsa/content": "workspace:*",
+        "@eclipsa/image": "workspace:*",
+        "@eclipsa/motion": "workspace:*",
+        "@eclipsa/optimizer": "workspace:*",
+        "@iconify-json/simple-icons": "^1.2.75",
+        "@iconify-json/tabler": "^1.2.31",
+        "clsx": "^2.1.1",
         "eclipsa": "workspace:*",
+        "hono": "^4.6.4",
+        "monaco-editor": "^0.55.1",
         "shiki": "^4.0.2",
         "tailwindcss": "^4.2.1",
+        "three": "^0.180.0",
       },
       "devDependencies": {
+        "@egoist/tailwindcss-icons": "^1.9.2",
         "@tailwindcss/vite": "^4.2.1",
+        "@types/three": "^0.180.0",
         "@typescript/native-preview": "^7.0.0-dev.20260310.1",
         "wrangler": "^4.73.0",
       },
@@ -31,8 +50,15 @@
     "e2e": {
       "name": "@eclipsa/e2e",
       "dependencies": {
+        "@eclipsa/content": "workspace:*",
         "@eclipsa/image": "workspace:*",
+        "@eclipsa/motion": "workspace:*",
+        "@eclipsa/react": "workspace:*",
+        "@eclipsa/vue": "workspace:*",
         "eclipsa": "workspace:*",
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0",
+        "vue": "^3.5.22",
         "zod": "^4.3.6",
       },
       "devDependencies": {
@@ -42,22 +68,44 @@
         "mitata": "^1.0.34",
       },
     },
+    "examples/android-compose": {
+      "name": "@eclipsa/example-android-compose",
+    },
+    "examples/gtk4": {
+      "name": "@eclipsa/example-gtk4",
+    },
+    "examples/swiftui": {
+      "name": "@eclipsa/example-swiftui",
+    },
+    "packages/content": {
+      "name": "@eclipsa/content",
+      "dependencies": {
+        "@ox-content/napi": "^0.17.0",
+        "eclipsa": "workspace:*",
+        "fast-glob": "^3.3.2",
+        "shiki": "^4.0.2",
+        "yaml": "^2.8.1",
+      },
+      "peerDependencies": {
+        "vite": "*",
+      },
+    },
     "packages/create-eclipsa": {
       "name": "create-eclipsa",
+      "version": "0.0.0",
       "bin": {
         "create-eclipsa": "./mod.ts",
       },
     },
     "packages/eclipsa": {
       "name": "eclipsa",
-      "version": "0.1.0",
+      "version": "0.0.0",
       "dependencies": {
-        "@napi-rs/wasm-runtime": "^1.1.1",
+        "@eclipsa/optimizer": "workspace:^",
         "fast-glob": "^3.3.2",
         "hono": "^4.6.4",
       },
       "devDependencies": {
-        "@napi-rs/cli": "^3.5.1",
         "@typescript/native-preview": "^7.0.0-dev.20260310.1",
       },
       "peerDependencies": {
@@ -74,12 +122,113 @@
         "vite": "*",
       },
     },
+    "packages/markdown": {
+      "name": "@eclipsa/markdown",
+      "version": "0.0.0",
+      "dependencies": {
+        "eclipsa": "workspace:*",
+      },
+    },
+    "packages/motion": {
+      "name": "@eclipsa/motion",
+      "version": "0.0.0",
+      "dependencies": {
+        "eclipsa": "workspace:*",
+        "motion-dom": "12.38.0",
+        "motion-utils": "12.36.0",
+      },
+    },
+    "packages/native": {
+      "name": "@eclipsa/native",
+      "version": "0.0.0",
+      "dependencies": {
+        "@eclipsa/native-core": "workspace:^",
+        "@eclipsa/optimizer": "workspace:^",
+        "eclipsa": "workspace:^",
+      },
+      "peerDependencies": {
+        "vite": "*",
+      },
+    },
+    "packages/native-compose": {
+      "name": "@eclipsa/native-compose",
+      "version": "0.0.0",
+      "dependencies": {
+        "@eclipsa/native": "workspace:^",
+        "@eclipsa/native-core": "workspace:^",
+      },
+    },
+    "packages/native-core": {
+      "name": "@eclipsa/native-core",
+      "version": "0.0.0",
+      "dependencies": {
+        "eclipsa": "workspace:^",
+      },
+    },
+    "packages/native-gtk4": {
+      "name": "@eclipsa/native-gtk4",
+      "version": "0.0.0",
+      "dependencies": {
+        "@eclipsa/native": "workspace:^",
+        "@eclipsa/native-core": "workspace:^",
+      },
+    },
+    "packages/native-swiftui": {
+      "name": "@eclipsa/native-swiftui",
+      "version": "0.0.0",
+      "dependencies": {
+        "@eclipsa/native": "workspace:^",
+        "@eclipsa/native-core": "workspace:^",
+      },
+    },
+    "packages/optimizer": {
+      "name": "@eclipsa/optimizer",
+      "version": "0.0.0",
+      "dependencies": {
+        "@emnapi/core": "^1.9.0",
+        "@emnapi/runtime": "^1.9.0",
+        "@emnapi/wasi-threads": "^1.2.0",
+        "@napi-rs/wasm-runtime": "^1.1.1",
+      },
+      "devDependencies": {
+        "@napi-rs/cli": "^3.5.1",
+      },
+    },
+    "packages/react": {
+      "name": "@eclipsa/react",
+      "version": "0.0.0",
+      "peerDependencies": {
+        "eclipsa": "*",
+        "react": "*",
+        "react-dom": "*",
+      },
+    },
+    "packages/vue": {
+      "name": "@eclipsa/vue",
+      "version": "0.0.0",
+      "peerDependencies": {
+        "eclipsa": "*",
+        "vue": "*",
+      },
+    },
   },
   "overrides": {
     "vite": "npm:@voidzero-dev/vite-plus-core@^0.1.4",
     "vitest": "npm:@voidzero-dev/vite-plus-test@^0.1.4",
   },
   "packages": {
+    "@antfu/install-pkg": ["@antfu/install-pkg@1.1.0", "", { "dependencies": { "package-manager-detector": "^1.3.0", "tinyexec": "^1.0.1" } }, "sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ=="],
+
+    "@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "@bcoe/v8-coverage": ["@bcoe/v8-coverage@1.0.2", "", {}, "sha512-6zABk/ECA/QYSCQ1NGiVwwbQerUCZ+TQbp64Q3AgmfNvurHH0j8TtXa1qbShXA6qqkpAj4V5W8pP6mLe1mcMqA=="],
+
     "@cloudflare/kv-asset-handler": ["@cloudflare/kv-asset-handler@0.4.2", "", {}, "sha512-SIOD2DxrRRwQ+jgzlXCqoEFiKOFqaPjhnNTGKXSRLvp1HiOvapLaFG2kEr9dYQTYe8rKrd9uvDUzmAITeNyaHQ=="],
 
     "@cloudflare/unenv-preset": ["@cloudflare/unenv-preset@2.15.0", "", { "peerDependencies": { "unenv": "2.0.0-rc.24", "workerd": "1.20260301.1 || ~1.20260302.1 || ~1.20260303.1 || ~1.20260304.1 || >1.20260305.0 <2.0.0-0" }, "optionalPeers": ["workerd"] }, "sha512-EGYmJaGZKWl+X8tXxcnx4v2bOZSjQeNI5dWFeXivgX9+YCT69AkzHHwlNbVpqtEUTbew8eQurpyOpeN8fg00nw=="],
@@ -96,12 +245,44 @@
 
     "@cspotcode/source-map-support": ["@cspotcode/source-map-support@0.8.1", "", { "dependencies": { "@jridgewell/trace-mapping": "0.3.9" } }, "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw=="],
 
+    "@dimforge/rapier3d-compat": ["@dimforge/rapier3d-compat@0.12.0", "", {}, "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow=="],
+
+    "@eclipsa/content": ["@eclipsa/content@workspace:packages/content"],
+
     "@eclipsa/docs": ["@eclipsa/docs@workspace:docs"],
 
     "@eclipsa/e2e": ["@eclipsa/e2e@workspace:e2e"],
 
+    "@eclipsa/example-android-compose": ["@eclipsa/example-android-compose@workspace:examples/android-compose"],
+
+    "@eclipsa/example-gtk4": ["@eclipsa/example-gtk4@workspace:examples/gtk4"],
+
+    "@eclipsa/example-swiftui": ["@eclipsa/example-swiftui@workspace:examples/swiftui"],
+
     "@eclipsa/image": ["@eclipsa/image@workspace:packages/image"],
 
+    "@eclipsa/markdown": ["@eclipsa/markdown@workspace:packages/markdown"],
+
+    "@eclipsa/motion": ["@eclipsa/motion@workspace:packages/motion"],
+
+    "@eclipsa/native": ["@eclipsa/native@workspace:packages/native"],
+
+    "@eclipsa/native-compose": ["@eclipsa/native-compose@workspace:packages/native-compose"],
+
+    "@eclipsa/native-core": ["@eclipsa/native-core@workspace:packages/native-core"],
+
+    "@eclipsa/native-gtk4": ["@eclipsa/native-gtk4@workspace:packages/native-gtk4"],
+
+    "@eclipsa/native-swiftui": ["@eclipsa/native-swiftui@workspace:packages/native-swiftui"],
+
+    "@eclipsa/optimizer": ["@eclipsa/optimizer@workspace:packages/optimizer"],
+
+    "@eclipsa/react": ["@eclipsa/react@workspace:packages/react"],
+
+    "@eclipsa/vue": ["@eclipsa/vue@workspace:packages/vue"],
+
+    "@egoist/tailwindcss-icons": ["@egoist/tailwindcss-icons@1.9.2", "", { "dependencies": { "@iconify/utils": "^3.1.0" }, "peerDependencies": { "tailwindcss": "*" } }, "sha512-I6XsSykmhu2cASg5Hp/ICLsJ/K/1aXPaSKjgbWaNp2xYnb4We/arWMmkhhV+9CglOFCUbqx0A3mM2kWV32ZIhw=="],
+
     "@emnapi/core": ["@emnapi/core@1.9.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.0", "tslib": "^2.4.0" } }, "sha512-0DQ98G9ZQZOxfUcQn1waV2yS8aWdZ6kJMbYCJB3oUBecjWYO1fqJ+a1DRfPF3O5JEkwqwP1A9QEN/9mYm2Yd0w=="],
 
     "@emnapi/runtime": ["@emnapi/runtime@1.9.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-QN75eB0IH2ywSpRpNddCRfQIhmJYBCJ1x5Lb3IscKAL8bMnVAKnRg8dCoXbHzVLLH7P38N2Z3mtulB7W0J0FKw=="],
@@ -160,6 +341,14 @@
 
     "@esbuild/win32-x64": ["@esbuild/win32-x64@0.27.3", "", { "os": "win32", "cpu": "x64" }, "sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA=="],
 
+    "@iconify-json/simple-icons": ["@iconify-json/simple-icons@1.2.75", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-KvcCUbvcBWb0sbqLIxHoY8z5/piXY08wcY9gfMhF+ph3AfzGMaSmZFkUY71HSXAljQngXkgs4bdKdekO0HQWvg=="],
+
+    "@iconify-json/tabler": ["@iconify-json/tabler@1.2.31", "", { "dependencies": { "@iconify/types": "*" } }, "sha512-Jfcw5TpGhfKKWyz1dGk7e79zIgDmpMKNYL0bjt17sURBPifAxowQcWAzcEhuiWU7FGXUM2NT6UhvACFZp7Hnjw=="],
+
+    "@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="],
+
+    "@iconify/utils": ["@iconify/utils@3.1.0", "", { "dependencies": { "@antfu/install-pkg": "^1.1.0", "@iconify/types": "^2.0.0", "mlly": "^1.8.0" } }, "sha512-Zlzem1ZXhI1iHeeERabLNzBHdOa4VhQbqAcOQaMKuTuyZCpwKbC2R4Dd0Zo3g9EAc+Y4fiarO8HIHRAth7+skw=="],
+
     "@img/colour": ["@img/colour@1.1.0", "", {}, "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ=="],
 
     "@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.2.4" }, "os": "darwin", "cpu": "arm64" }, "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w=="],
@@ -242,6 +431,8 @@
 
     "@inquirer/type": ["@inquirer/type@4.0.4", "", { "peerDependencies": { "@types/node": ">=18" }, "optionalPeers": ["@types/node"] }, "sha512-PamArxO3cFJZoOzspzo6cxVlLeIftyBsZw/S9bKY5DzxqJVZgjoj1oP8d0rskKtp7sZxBycsoer1g6UeJV1BBA=="],
 
+    "@istanbuljs/schema": ["@istanbuljs/schema@0.1.3", "", {}, "sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA=="],
+
     "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
 
     "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
@@ -386,6 +577,18 @@
 
     "@octokit/types": ["@octokit/types@16.0.0", "", { "dependencies": { "@octokit/openapi-types": "^27.0.0" } }, "sha512-sKq+9r1Mm4efXW1FCk7hFSeJo4QKreL/tTbR0rz/qx/r1Oa2VV83LTA/H/MuCOX7uCIJmQVRKBcbmWoySjAnSg=="],
 
+    "@ox-content/binding-darwin-arm64": ["@ox-content/binding-darwin-arm64@0.17.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-BNhYU9uiThnvVviuLLagybgZWvfvpfhc2dppWZpbVG0ZGQB6gNjmCZCT+6DH6Jo6XV12LxL+8A1JeqLcTPsFrg=="],
+
+    "@ox-content/binding-darwin-x64": ["@ox-content/binding-darwin-x64@0.17.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-BDpd8Tg03u8mrldRBTt+4N3olzfvoTD2WXpEHCYGCaAikot5hDy2xAGTUdKJDVbdASDTlUvp7ssWayx1x/jJ+w=="],
+
+    "@ox-content/binding-linux-arm64-gnu": ["@ox-content/binding-linux-arm64-gnu@0.17.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-wkN+3mRNtE+txZSEXjRDSLsg6GmNsHAbafIeAsMaxjq2EjRT47So6k60dwpS72v9lCpsWvcyudY+gTQ9tJKcOA=="],
+
+    "@ox-content/binding-linux-x64-gnu": ["@ox-content/binding-linux-x64-gnu@0.17.0", "", { "os": "linux", "cpu": "x64" }, "sha512-SWDwjzaeJ8fpbTKG4EfeTy+fKS+Y2OV01eBC1XX38gnDaDNs9V2D3S1mDQRDZQuHow4QAHBnVk3zmKTh9syEvg=="],
+
+    "@ox-content/binding-win32-x64-msvc": ["@ox-content/binding-win32-x64-msvc@0.17.0", "", { "os": "win32", "cpu": "x64" }, "sha512-ItbHCq4iOp022EHL3G5wwSlDyN5uB8/VTeCULl8Q1FuVmccNSHhmQWEqG+M4uNHMBIGAZvyoV6G/gNnFs/OpSQ=="],
+
+    "@ox-content/napi": ["@ox-content/napi@0.17.0", "", { "optionalDependencies": { "@ox-content/binding-darwin-arm64": "0.17.0", "@ox-content/binding-darwin-x64": "0.17.0", "@ox-content/binding-linux-arm64-gnu": "0.17.0", "@ox-content/binding-linux-x64-gnu": "0.17.0", "@ox-content/binding-win32-x64-msvc": "0.17.0" } }, "sha512-GHu6DZ1S4p0lFnW8cWO/7A7eAF/M1l0iwlbshvMcGhnzgE4FviQPcyaIECgOidRHWYURyuJYTGOE41iq1t4RiA=="],
+
     "@oxc-project/runtime": ["@oxc-project/runtime@0.115.0", "", {}, "sha512-Rg8Wlt5dCbXhQnsXPrkOjL1DTSvXLgb2R/KYfnf1/K+R0k6UMLEmbQXPM+kwrWqSmWA2t0B1EtHy2/3zikQpvQ=="],
 
     "@oxc-project/types": ["@oxc-project/types@0.115.0", "", {}, "sha512-4n91DKnebUS4yjUHl2g3/b2T+IUdCfmoZGhmwsovZCDaJSs+QkVAM+0AqqTxHSsHfeiMuueT75cZaZcT/m0pSw=="],
@@ -540,6 +743,8 @@
 
     "@tailwindcss/vite": ["@tailwindcss/vite@4.2.1", "", { "dependencies": { "@tailwindcss/node": "4.2.1", "@tailwindcss/oxide": "4.2.1", "tailwindcss": "4.2.1" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7" } }, "sha512-TBf2sJjYeb28jD2U/OhwdW0bbOsxkWPwQ7SrqGf9sVcoYwZj7rkXljroBO9wKBut9XnmQLXanuDUeqQK0lGg/w=="],
 
+    "@tweenjs/tween.js": ["@tweenjs/tween.js@23.1.3", "", {}, "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA=="],
+
     "@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="],
 
     "@types/chai": ["@types/chai@5.2.3", "", { "dependencies": { "@types/deep-eql": "*", "assertion-error": "^2.0.1" } }, "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA=="],
@@ -548,12 +753,26 @@
 
     "@types/hast": ["@types/hast@3.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ=="],
 
+    "@types/istanbul-lib-coverage": ["@types/istanbul-lib-coverage@2.0.6", "", {}, "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w=="],
+
     "@types/mdast": ["@types/mdast@4.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA=="],
 
     "@types/node": ["@types/node@24.12.0", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-GYDxsZi3ChgmckRT9HPU0WEhKLP08ev/Yfcq2AstjrDASOYCSXeyjDsHg4v5t4jOj7cyDX3vmprafKlWIG9MXQ=="],
 
+    "@types/react": ["@types/react@19.2.14", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w=="],
+
+    "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
+
+    "@types/stats.js": ["@types/stats.js@0.17.4", "", {}, "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA=="],
+
+    "@types/three": ["@types/three@0.180.0", "", { "dependencies": { "@dimforge/rapier3d-compat": "~0.12.0", "@tweenjs/tween.js": "~23.1.3", "@types/stats.js": "*", "@types/webxr": "*", "@webgpu/types": "*", "fflate": "~0.8.2", "meshoptimizer": "~0.22.0" } }, "sha512-ykFtgCqNnY0IPvDro7h+9ZeLY+qjgUWv+qEvUt84grhenO60Hqd4hScHE7VTB9nOQ/3QM8lkbNE+4vKjEpUxKg=="],
+
+    "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
+
     "@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
 
+    "@types/webxr": ["@types/webxr@0.5.24", "", {}, "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg=="],
+
     "@typescript/native-preview": ["@typescript/native-preview@7.0.0-dev.20260310.1", "", { "optionalDependencies": { "@typescript/native-preview-darwin-arm64": "7.0.0-dev.20260310.1", "@typescript/native-preview-darwin-x64": "7.0.0-dev.20260310.1", "@typescript/native-preview-linux-arm": "7.0.0-dev.20260310.1", "@typescript/native-preview-linux-arm64": "7.0.0-dev.20260310.1", "@typescript/native-preview-linux-x64": "7.0.0-dev.20260310.1", "@typescript/native-preview-win32-arm64": "7.0.0-dev.20260310.1", "@typescript/native-preview-win32-x64": "7.0.0-dev.20260310.1" }, "bin": { "tsgo": "bin/tsgo.js" } }, "sha512-g1Hi6V5YTYLzh4cf9yJwUMLmnFvqhqe/5V/rZ6Lx70P4BwSW5QuQBcXQMPWSD9CpsiO/xbhGfmtHZaxClAzosw=="],
 
     "@typescript/native-preview-darwin-arm64": ["@typescript/native-preview-darwin-arm64@7.0.0-dev.20260310.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-mzMXa3AIcEh3OKkuVYf/bvb8D6wsJ/kn1KLwBGb4C1NCak102spy1Bio1myrTMyjb/R+hRM7gom+KZ/5IHJvIg=="],
@@ -588,16 +807,48 @@
 
     "@voidzero-dev/vite-plus-win32-x64-msvc": ["@voidzero-dev/vite-plus-win32-x64-msvc@0.1.4", "", { "os": "win32", "cpu": "x64" }, "sha512-zWEv8aRsW8qNaezA0dySaQSI/+34ljQEfSaftzazbQQfPzbddJDF7lvMGh0O/S/CjjhREEV3IS6VqJeWAaVbUA=="],
 
+    "@vue/compiler-core": ["@vue/compiler-core@3.5.32", "", { "dependencies": { "@babel/parser": "^7.29.2", "@vue/shared": "3.5.32", "entities": "^7.0.1", "estree-walker": "^2.0.2", "source-map-js": "^1.2.1" } }, "sha512-4x74Tbtqnda8s/NSD6e1Dr5p1c8HdMU5RWSjMSUzb8RTcUQqevDCxVAitcLBKT+ie3o0Dl9crc/S/opJM7qBGQ=="],
+
+    "@vue/compiler-dom": ["@vue/compiler-dom@3.5.32", "", { "dependencies": { "@vue/compiler-core": "3.5.32", "@vue/shared": "3.5.32" } }, "sha512-ybHAu70NtiEI1fvAUz3oXZqkUYEe5J98GjMDpTGl5iHb0T15wQYLR4wE3h9xfuTNA+Cm2f4czfe8B4s+CCH57Q=="],
+
+    "@vue/compiler-sfc": ["@vue/compiler-sfc@3.5.32", "", { "dependencies": { "@babel/parser": "^7.29.2", "@vue/compiler-core": "3.5.32", "@vue/compiler-dom": "3.5.32", "@vue/compiler-ssr": "3.5.32", "@vue/shared": "3.5.32", "estree-walker": "^2.0.2", "magic-string": "^0.30.21", "postcss": "^8.5.8", "source-map-js": "^1.2.1" } }, "sha512-8UYUYo71cP/0YHMO814TRZlPuUUw3oifHuMR7Wp9SNoRSrxRQnhMLNlCeaODNn6kNTJsjFoQ/kqIj4qGvya4Xg=="],
+
+    "@vue/compiler-ssr": ["@vue/compiler-ssr@3.5.32", "", { "dependencies": { "@vue/compiler-dom": "3.5.32", "@vue/shared": "3.5.32" } }, "sha512-Gp4gTs22T3DgRotZ8aA/6m2jMR+GMztvBXUBEUOYOcST+giyGWJ4WvFd7QLHBkzTxkfOt8IELKNdpzITLbA2rw=="],
+
+    "@vue/reactivity": ["@vue/reactivity@3.5.32", "", { "dependencies": { "@vue/shared": "3.5.32" } }, "sha512-/ORasxSGvZ6MN5gc+uE364SxFdJ0+WqVG0CENXaGW58TOCdrAW76WWaplDtECeS1qphvtBZtR+3/o1g1zL4xPQ=="],
+
+    "@vue/runtime-core": ["@vue/runtime-core@3.5.32", "", { "dependencies": { "@vue/reactivity": "3.5.32", "@vue/shared": "3.5.32" } }, "sha512-pDrXCejn4UpFDFmMd27AcJEbHaLemaE5o4pbb7sLk79SRIhc6/t34BQA7SGNgYtbMnvbF/HHOftYBgFJtUoJUQ=="],
+
+    "@vue/runtime-dom": ["@vue/runtime-dom@3.5.32", "", { "dependencies": { "@vue/reactivity": "3.5.32", "@vue/runtime-core": "3.5.32", "@vue/shared": "3.5.32", "csstype": "^3.2.3" } }, "sha512-1CDVv7tv/IV13V8Nip1k/aaObVbWqRlVCVezTwx3K07p7Vxossp5JU1dcPNhJk3w347gonIUT9jQOGutyJrSVQ=="],
+
+    "@vue/server-renderer": ["@vue/server-renderer@3.5.32", "", { "dependencies": { "@vue/compiler-ssr": "3.5.32", "@vue/shared": "3.5.32" }, "peerDependencies": { "vue": "3.5.32" } }, "sha512-IOjm2+JQwRFS7W28HNuJeXQle9KdZbODFY7hFGVtnnghF51ta20EWAZJHX+zLGtsHhaU6uC9BGPV52KVpYryMQ=="],
+
+    "@vue/shared": ["@vue/shared@3.5.32", "", {}, "sha512-ksNyrmRQzWJJ8n3cRDuSF7zNNontuJg1YHnmWRJd2AMu8Ij2bqwiiri2lH5rHtYPZjj4STkNcgcmiQqlOjiYGg=="],
+
+    "@webgpu/types": ["@webgpu/types@0.1.69", "", {}, "sha512-RPmm6kgRbI8e98zSD3RVACvnuktIja5+yLgDAkTmxLr90BEwdTXRQWNLF3ETTTyH/8mKhznZuN5AveXYFEsMGQ=="],
+
+    "acorn": ["acorn@8.16.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw=="],
+
+    "ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
+
+    "ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
+
     "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],
 
     "assertion-error": ["assertion-error@2.0.1", "", {}, "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA=="],
 
+    "balanced-match": ["balanced-match@4.0.4", "", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
+
     "before-after-hook": ["before-after-hook@4.0.0", "", {}, "sha512-q6tR3RPqIB1pMiTRMFcZwuG5T8vwp+vUvEG0vuI6B+Rikh5BfPp2fQ82c925FOs+b0lcFQ8CFrL+KbilfZFhOQ=="],
 
     "blake3-wasm": ["blake3-wasm@2.1.5", "", {}, "sha512-F1+K8EbfOZE49dtoPtmxUQrpXaBIl3ICvasLh+nJta0xkz+9kF/7uet9fLnwKqhDrmj6g+6K3Tw9yQPUg2ka5g=="],
 
+    "brace-expansion": ["brace-expansion@5.0.5", "", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ=="],
+
     "braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
 
+    "c8": ["c8@11.0.0", "", { "dependencies": { "@bcoe/v8-coverage": "^1.0.1", "@istanbuljs/schema": "^0.1.3", "find-up": "^5.0.0", "foreground-child": "^3.1.1", "istanbul-lib-coverage": "^3.2.0", "istanbul-lib-report": "^3.0.1", "istanbul-reports": "^3.1.6", "test-exclude": "^8.0.0", "v8-to-istanbul": "^9.0.0", "yargs": "^17.7.2", "yargs-parser": "^21.1.1" }, "peerDependencies": { "monocart-coverage-reports": "^2" }, "optionalPeers": ["monocart-coverage-reports"], "bin": { "c8": "bin/c8.js" } }, "sha512-e/uRViGHSVIJv7zsaDKM7VRn2390TgHXqUSvYwPHBQaU6L7E9L0n9JbdkwdYPvshDT0KymBmmlwSpms3yBaMNg=="],
+
     "cac": ["cac@6.7.14", "", {}, "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ=="],
 
     "ccount": ["ccount@2.0.1", "", {}, "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg=="],
@@ -612,16 +863,30 @@
 
     "clipanion": ["clipanion@4.0.0-rc.4", "", { "dependencies": { "typanion": "^3.8.0" } }, "sha512-CXkMQxU6s9GklO/1f714dkKBMu1lopS1WFF0B8o4AxPykR1hpozxSiUZ5ZUeBjfPgCWqbcNOtZVFhB8Lkfp1+Q=="],
 
+    "cliui": ["cliui@8.0.1", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.1", "wrap-ansi": "^7.0.0" } }, "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ=="],
+
+    "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
+
+    "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
+
+    "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
+
     "colorette": ["colorette@2.0.20", "", {}, "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w=="],
 
     "comma-separated-tokens": ["comma-separated-tokens@2.0.3", "", {}, "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg=="],
 
+    "confbox": ["confbox@0.1.8", "", {}, "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w=="],
+
+    "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
+
     "cookie": ["cookie@1.1.1", "", {}, "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ=="],
 
     "create-eclipsa": ["create-eclipsa@workspace:packages/create-eclipsa"],
 
     "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
 
+    "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
+
     "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
 
     "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
@@ -630,12 +895,18 @@
 
     "devlop": ["devlop@1.1.0", "", { "dependencies": { "dequal": "^2.0.0" } }, "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA=="],
 
+    "dompurify": ["dompurify@3.2.7", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw=="],
+
     "eclipsa": ["eclipsa@workspace:packages/eclipsa"],
 
     "emnapi": ["emnapi@1.9.0", "", { "peerDependencies": { "node-addon-api": ">= 6.1.0" }, "optionalPeers": ["node-addon-api"] }, "sha512-o/MgVYc9Xa92jNd5pk+PRtFx/IuWlILW1vqm9UU7V49Cnos+bK2y982HEtXcRgkdtxZylYBaGWEznC9Alo6xhg=="],
 
+    "emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
+
     "enhanced-resolve": ["enhanced-resolve@5.20.0", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.3.0" } }, "sha512-/ce7+jQ1PQ6rVXwe+jKEg5hW5ciicHwIQUagZkp6IufBoY3YDgdTTY1azVs0qoRgVmvsNB+rbjLJxDAeHHtwsQ=="],
 
+    "entities": ["entities@7.0.1", "", {}, "sha512-TWrgLOFUQTH994YUyl1yT4uyavY5nNB5muff+RtWaqNVCAK408b5ZnnbNAUEWLTCpum9w6arT70i1XdQ4UeOPA=="],
+
     "error-stack-parser-es": ["error-stack-parser-es@1.0.5", "", {}, "sha512-5qucVt2XcuGMcEGgWI7i+yZpmpByQ8J1lHhcL7PwqCwu9FPP3VUXzT4ltHe5i2z9dePwEHcDVOAfSnHsOlCXRA=="],
 
     "es-module-lexer": ["es-module-lexer@1.7.0", "", {}, "sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA=="],
@@ -644,6 +915,10 @@
 
     "esbuild": ["esbuild@0.27.3", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.27.3", "@esbuild/android-arm": "0.27.3", "@esbuild/android-arm64": "0.27.3", "@esbuild/android-x64": "0.27.3", "@esbuild/darwin-arm64": "0.27.3", "@esbuild/darwin-x64": "0.27.3", "@esbuild/freebsd-arm64": "0.27.3", "@esbuild/freebsd-x64": "0.27.3", "@esbuild/linux-arm": "0.27.3", "@esbuild/linux-arm64": "0.27.3", "@esbuild/linux-ia32": "0.27.3", "@esbuild/linux-loong64": "0.27.3", "@esbuild/linux-mips64el": "0.27.3", "@esbuild/linux-ppc64": "0.27.3", "@esbuild/linux-riscv64": "0.27.3", "@esbuild/linux-s390x": "0.27.3", "@esbuild/linux-x64": "0.27.3", "@esbuild/netbsd-arm64": "0.27.3", "@esbuild/netbsd-x64": "0.27.3", "@esbuild/openbsd-arm64": "0.27.3", "@esbuild/openbsd-x64": "0.27.3", "@esbuild/openharmony-arm64": "0.27.3", "@esbuild/sunos-x64": "0.27.3", "@esbuild/win32-arm64": "0.27.3", "@esbuild/win32-ia32": "0.27.3", "@esbuild/win32-x64": "0.27.3" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg=="],
 
+    "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
+
+    "estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
+
     "fast-content-type-parse": ["fast-content-type-parse@3.0.0", "", {}, "sha512-ZvLdcY8P+N8mGQJahJV5G4U88CSvT1rP8ApL6uETe88MBXrBHAkZlSEySdUlyztF7ccb+Znos3TFqaepHxdhBg=="],
 
     "fast-glob": ["fast-glob@3.3.3", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.8" } }, "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg=="],
@@ -658,32 +933,54 @@
 
     "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
 
+    "fflate": ["fflate@0.8.2", "", {}, "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A=="],
+
     "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
 
+    "find-up": ["find-up@5.0.0", "", { "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" } }, "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng=="],
+
+    "foreground-child": ["foreground-child@3.3.1", "", { "dependencies": { "cross-spawn": "^7.0.6", "signal-exit": "^4.0.1" } }, "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw=="],
+
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 
+    "get-caller-file": ["get-caller-file@2.0.5", "", {}, "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="],
+
+    "glob": ["glob@13.0.6", "", { "dependencies": { "minimatch": "^10.2.2", "minipass": "^7.1.3", "path-scurry": "^2.0.2" } }, "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw=="],
+
     "glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
     "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
 
+    "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="],
+
     "hast-util-to-html": ["hast-util-to-html@9.0.5", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", "ccount": "^2.0.0", "comma-separated-tokens": "^2.0.0", "hast-util-whitespace": "^3.0.0", "html-void-elements": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "property-information": "^7.0.0", "space-separated-tokens": "^2.0.0", "stringify-entities": "^4.0.0", "zwitch": "^2.0.4" } }, "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw=="],
 
     "hast-util-whitespace": ["hast-util-whitespace@3.0.0", "", { "dependencies": { "@types/hast": "^3.0.0" } }, "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw=="],
 
     "hono": ["hono@4.12.6", "", {}, "sha512-KljEp+MeEEEIOT75qBo1UjqqB29fRMtlDEwCxcexOzdkUq6LR/vRvHk5pdROcxyOYyW1niq7Gb5pFVGy5R1eBw=="],
 
+    "html-escaper": ["html-escaper@2.0.2", "", {}, "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg=="],
+
     "html-void-elements": ["html-void-elements@3.0.0", "", {}, "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg=="],
 
     "iconv-lite": ["iconv-lite@0.7.2", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" } }, "sha512-im9DjEDQ55s9fL4EYzOAv0yMqmMBSZp6G0VvFyTMPKWxiSBHUj9NW/qqLmXUwXrrM7AvqSlTCfvqRb0cM8yYqw=="],
 
     "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
 
+    "is-fullwidth-code-point": ["is-fullwidth-code-point@3.0.0", "", {}, "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="],
+
     "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
 
     "is-number": ["is-number@7.0.0", "", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="],
 
     "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
 
+    "istanbul-lib-coverage": ["istanbul-lib-coverage@3.2.2", "", {}, "sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg=="],
+
+    "istanbul-lib-report": ["istanbul-lib-report@3.0.1", "", { "dependencies": { "istanbul-lib-coverage": "^3.0.0", "make-dir": "^4.0.0", "supports-color": "^7.1.0" } }, "sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw=="],
+
+    "istanbul-reports": ["istanbul-reports@3.2.0", "", { "dependencies": { "html-escaper": "^2.0.0", "istanbul-lib-report": "^3.0.0" } }, "sha512-HGYWWS/ehqTV3xN10i23tkPkpH46MLCIMFNCaaKNavAXTF1RkqxawEPtnjnGZ6XKSInBKkiOA5BKS+aZiY3AvA=="],
+
     "jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],
 
     "js-yaml": ["js-yaml@4.1.1", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA=="],
@@ -716,12 +1013,22 @@
 
     "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.32.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q=="],
 
+    "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
+
+    "lru-cache": ["lru-cache@11.3.3", "", {}, "sha512-JvNw9Y81y33E+BEYPr0U7omo+U9AySnsMsEiXgwT6yqd31VQWTLNQqmT4ou5eqPFUrTfIDFta2wKhB1hyohtAQ=="],
+
     "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
 
+    "make-dir": ["make-dir@4.0.0", "", { "dependencies": { "semver": "^7.5.3" } }, "sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw=="],
+
+    "marked": ["marked@14.0.0", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ=="],
+
     "mdast-util-to-hast": ["mdast-util-to-hast@13.2.1", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "@ungap/structured-clone": "^1.0.0", "devlop": "^1.0.0", "micromark-util-sanitize-uri": "^2.0.0", "trim-lines": "^3.0.0", "unist-util-position": "^5.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" } }, "sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA=="],
 
     "merge2": ["merge2@1.4.1", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],
 
+    "meshoptimizer": ["meshoptimizer@0.22.0", "", {}, "sha512-IebiK79sqIy+E4EgOr+CAw+Ke8hAspXKzBd0JdgEmPHiAwmvEj2S4h1rfvo+o/BnfEYd/jAOg5IeeIjzlzSnDg=="],
+
     "micromark-util-character": ["micromark-util-character@2.1.1", "", { "dependencies": { "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q=="],
 
     "micromark-util-encode": ["micromark-util-encode@2.0.1", "", {}, "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw=="],
@@ -736,8 +1043,20 @@
 
     "miniflare": ["miniflare@4.20260312.0", "", { "dependencies": { "@cspotcode/source-map-support": "0.8.1", "sharp": "^0.34.5", "undici": "7.18.2", "workerd": "1.20260312.1", "ws": "8.18.0", "youch": "4.1.0-beta.10" }, "bin": { "miniflare": "bootstrap.js" } }, "sha512-pieP2rfXynPT6VRINYaiHe/tfMJ4c5OIhqRlIdLF6iZ9g5xgpEmvimvIgMpgAdDJuFlrLcwDUi8MfAo2R6dt/w=="],
 
+    "minimatch": ["minimatch@10.2.5", "", { "dependencies": { "brace-expansion": "^5.0.5" } }, "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg=="],
+
+    "minipass": ["minipass@7.1.3", "", {}, "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A=="],
+
     "mitata": ["mitata@1.0.34", "", {}, "sha512-Mc3zrtNBKIMeHSCQ0XqRLo1vbdIx1wvFV9c8NJAiyho6AjNfMY8bVhbS12bwciUdd1t4rj8099CH3N3NFahaUA=="],
 
+    "mlly": ["mlly@1.8.2", "", { "dependencies": { "acorn": "^8.16.0", "pathe": "^2.0.3", "pkg-types": "^1.3.1", "ufo": "^1.6.3" } }, "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA=="],
+
+    "monaco-editor": ["monaco-editor@0.55.1", "", { "dependencies": { "dompurify": "3.2.7", "marked": "14.0.0" } }, "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A=="],
+
+    "motion-dom": ["motion-dom@12.38.0", "", { "dependencies": { "motion-utils": "^12.36.0" } }, "sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA=="],
+
+    "motion-utils": ["motion-utils@12.36.0", "", {}, "sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg=="],
+
     "mrmime": ["mrmime@2.0.1", "", {}, "sha512-Y3wQdFg2Va6etvQ5I82yUhGdsKrcYox6p7FfL1LbK2J4V01F9TGlepTIhnK24t7koZibmg82KGglhA1XK5IsLQ=="],
 
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
@@ -758,8 +1077,18 @@
 
     "oxlint-tsgolint": ["oxlint-tsgolint@0.16.0", "", { "optionalDependencies": { "@oxlint-tsgolint/darwin-arm64": "0.16.0", "@oxlint-tsgolint/darwin-x64": "0.16.0", "@oxlint-tsgolint/linux-arm64": "0.16.0", "@oxlint-tsgolint/linux-x64": "0.16.0", "@oxlint-tsgolint/win32-arm64": "0.16.0", "@oxlint-tsgolint/win32-x64": "0.16.0" }, "bin": { "tsgolint": "bin/tsgolint.js" } }, "sha512-4RuJK2jP08XwqtUu+5yhCbxEauCm6tv2MFHKEMsjbosK2+vy5us82oI3VLuHwbNyZG7ekZA26U2LLHnGR4frIA=="],
 
+    "p-limit": ["p-limit@3.1.0", "", { "dependencies": { "yocto-queue": "^0.1.0" } }, "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ=="],
+
+    "p-locate": ["p-locate@5.0.0", "", { "dependencies": { "p-limit": "^3.0.2" } }, "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw=="],
+
+    "package-manager-detector": ["package-manager-detector@1.6.0", "", {}, "sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA=="],
+
+    "path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="],
+
     "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
 
+    "path-scurry": ["path-scurry@2.0.2", "", { "dependencies": { "lru-cache": "^11.0.0", "minipass": "^7.1.2" } }, "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg=="],
+
     "path-to-regexp": ["path-to-regexp@6.3.0", "", {}, "sha512-Yhpw4T9C6hPpgPeA28us07OJeqZ5EzQTkbfwuhsUg0c237RomFoETJgmp2sa3F/41gfLE6G5cqcYwznmeEeOlQ=="],
 
     "pathe": ["pathe@2.0.3", "", {}, "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w=="],
@@ -770,6 +1099,8 @@
 
     "pixelmatch": ["pixelmatch@7.1.0", "", { "dependencies": { "pngjs": "^7.0.0" }, "bin": { "pixelmatch": "bin/pixelmatch" } }, "sha512-1wrVzJ2STrpmONHKBy228LM1b84msXDUoAzVEl0R8Mz4Ce6EPr+IVtxm8+yvrqLYMHswREkjYFaMxnyGnaY3Ng=="],
 
+    "pkg-types": ["pkg-types@1.3.1", "", { "dependencies": { "confbox": "^0.1.8", "mlly": "^1.7.4", "pathe": "^2.0.1" } }, "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ=="],
+
     "playwright": ["playwright@1.58.2", "", { "dependencies": { "playwright-core": "1.58.2" }, "optionalDependencies": { "fsevents": "2.3.2" }, "bin": { "playwright": "cli.js" } }, "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A=="],
 
     "playwright-core": ["playwright-core@1.58.2", "", { "bin": { "playwright-core": "cli.js" } }, "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg=="],
@@ -782,18 +1113,26 @@
 
     "queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
 
+    "react": ["react@19.2.4", "", {}, "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ=="],
+
+    "react-dom": ["react-dom@19.2.4", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.4" } }, "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ=="],
+
     "regex": ["regex@6.1.0", "", { "dependencies": { "regex-utilities": "^2.3.0" } }, "sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg=="],
 
     "regex-recursion": ["regex-recursion@6.0.2", "", { "dependencies": { "regex-utilities": "^2.3.0" } }, "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg=="],
 
     "regex-utilities": ["regex-utilities@2.3.0", "", {}, "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng=="],
 
+    "require-directory": ["require-directory@2.1.1", "", {}, "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="],
+
     "reusify": ["reusify@1.1.0", "", {}, "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw=="],
 
     "run-parallel": ["run-parallel@1.2.0", "", { "dependencies": { "queue-microtask": "^1.2.2" } }, "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA=="],
 
     "safer-buffer": ["safer-buffer@2.1.2", "", {}, "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="],
 
+    "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
+
     "semver": ["semver@7.7.4", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA=="],
 
     "sharp": ["sharp@0.34.5", "", { "dependencies": { "@img/colour": "^1.0.0", "detect-libc": "^2.1.2", "semver": "^7.7.3" }, "optionalDependencies": { "@img/sharp-darwin-arm64": "0.34.5", "@img/sharp-darwin-x64": "0.34.5", "@img/sharp-libvips-darwin-arm64": "1.2.4", "@img/sharp-libvips-darwin-x64": "1.2.4", "@img/sharp-libvips-linux-arm": "1.2.4", "@img/sharp-libvips-linux-arm64": "1.2.4", "@img/sharp-libvips-linux-ppc64": "1.2.4", "@img/sharp-libvips-linux-riscv64": "1.2.4", "@img/sharp-libvips-linux-s390x": "1.2.4", "@img/sharp-libvips-linux-x64": "1.2.4", "@img/sharp-libvips-linuxmusl-arm64": "1.2.4", "@img/sharp-libvips-linuxmusl-x64": "1.2.4", "@img/sharp-linux-arm": "0.34.5", "@img/sharp-linux-arm64": "0.34.5", "@img/sharp-linux-ppc64": "0.34.5", "@img/sharp-linux-riscv64": "0.34.5", "@img/sharp-linux-s390x": "0.34.5", "@img/sharp-linux-x64": "0.34.5", "@img/sharp-linuxmusl-arm64": "0.34.5", "@img/sharp-linuxmusl-x64": "0.34.5", "@img/sharp-wasm32": "0.34.5", "@img/sharp-win32-arm64": "0.34.5", "@img/sharp-win32-ia32": "0.34.5", "@img/sharp-win32-x64": "0.34.5" } }, "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg=="],
@@ -814,14 +1153,22 @@
 
     "std-env": ["std-env@3.10.0", "", {}, "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg=="],
 
+    "string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
+
     "stringify-entities": ["stringify-entities@4.0.4", "", { "dependencies": { "character-entities-html4": "^2.0.0", "character-entities-legacy": "^3.0.0" } }, "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg=="],
 
-    "supports-color": ["supports-color@10.2.2", "", {}, "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g=="],
+    "strip-ansi": ["strip-ansi@6.0.1", "", { "dependencies": { "ansi-regex": "^5.0.1" } }, "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A=="],
+
+    "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
 
     "tailwindcss": ["tailwindcss@4.2.1", "", {}, "sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw=="],
 
     "tapable": ["tapable@2.3.0", "", {}, "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg=="],
 
+    "test-exclude": ["test-exclude@8.0.0", "", { "dependencies": { "@istanbuljs/schema": "^0.1.2", "glob": "^13.0.6", "minimatch": "^10.2.2" } }, "sha512-ZOffsNrXYggvU1mDGHk54I96r26P8SyMjO5slMKSc7+IWmtB/MQKnEC2fP51imB3/pT6YK5cT5E8f+Dd9KdyOQ=="],
+
+    "three": ["three@0.180.0", "", {}, "sha512-o+qycAMZrh+TsE01GqWUxUIKR1AL0S8pq7zDkYOQw8GqfX8b8VoCKYUoHbhiX5j+7hr8XsuHDVU6+gkQJQKg9w=="],
+
     "tinybench": ["tinybench@2.9.0", "", {}, "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg=="],
 
     "tinyexec": ["tinyexec@1.0.2", "", {}, "sha512-W/KYk+NFhkmsYpuHq5JykngiOCnxeVL8v8dFnqxSD8qEEdRfXk1SDM6JzNqcERbcGYj9tMrDQBYV9cjgnunFIg=="],
@@ -856,6 +1203,8 @@
 
     "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
 
+    "ufo": ["ufo@1.6.3", "", {}, "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q=="],
+
     "undici": ["undici@7.18.2", "", {}, "sha512-y+8YjDFzWdQlSE9N5nzKMT3g4a5UBX1HKowfdXh0uvAnTaqqwqB92Jt4UXBAeKekDs5IaDKyJFR4X1gYVCgXcw=="],
 
     "undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="],
@@ -874,6 +1223,8 @@
 
     "universal-user-agent": ["universal-user-agent@7.0.3", "", {}, "sha512-TmnEAEAsBJVZM/AADELsK76llnwcf9vMKuPz8JflO1frO8Lchitr0fNaN9d+Ap0BjKtqWqd/J17qeDnXh8CL2A=="],
 
+    "v8-to-istanbul": ["v8-to-istanbul@9.3.0", "", { "dependencies": { "@jridgewell/trace-mapping": "^0.3.12", "@types/istanbul-lib-coverage": "^2.0.1", "convert-source-map": "^2.0.0" } }, "sha512-kiGUalWN+rgBJ/1OHZsBtU4rXZOfj/7rKQxULKlIzwzQSvMJUUNgPwJEEh7gU6xEVxC0ahoOBvN2YI8GH6FNgA=="],
+
     "vfile": ["vfile@6.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile-message": "^4.0.0" } }, "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q=="],
 
     "vfile-message": ["vfile-message@4.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw=="],
@@ -884,14 +1235,28 @@
 
     "vitest": ["@voidzero-dev/vite-plus-test@0.1.4", "", { "dependencies": { "@standard-schema/spec": "^1.1.0", "@types/chai": "^5.2.2", "@voidzero-dev/vite-plus-core": "0.1.4", "es-module-lexer": "^1.7.0", "obug": "^2.1.1", "pixelmatch": "^7.1.0", "pngjs": "^7.0.0", "sirv": "^3.0.2", "std-env": "^3.10.0", "tinybench": "^2.9.0", "tinyexec": "^1.0.2", "tinyglobby": "^0.2.15", "ws": "^8.18.3" }, "peerDependencies": { "@edge-runtime/vm": "*", "@opentelemetry/api": "^1.9.0", "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0", "@vitest/ui": "4.0.18", "happy-dom": "*", "jsdom": "*" }, "optionalPeers": ["@edge-runtime/vm", "@opentelemetry/api", "@types/node", "@vitest/ui", "happy-dom", "jsdom"] }, "sha512-V++TGGGTLrEoVUG8hWsfXRH/05Hc5amjlEj1o1n50HqTd/ujGhYm/CefElnW/k3W58513Aa2SE7KlGSDJRpGzg=="],
 
+    "vue": ["vue@3.5.32", "", { "dependencies": { "@vue/compiler-dom": "3.5.32", "@vue/compiler-sfc": "3.5.32", "@vue/runtime-dom": "3.5.32", "@vue/server-renderer": "3.5.32", "@vue/shared": "3.5.32" }, "peerDependencies": { "typescript": "*" }, "optionalPeers": ["typescript"] }, "sha512-vM4z4Q9tTafVfMAK7IVzmxg34rSzTFMyIe0UUEijUCkn9+23lj0WRfA83dg7eQZIUlgOSGrkViIaCfqSAUXsMw=="],
+
     "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
 
     "workerd": ["workerd@1.20260312.1", "", { "optionalDependencies": { "@cloudflare/workerd-darwin-64": "1.20260312.1", "@cloudflare/workerd-darwin-arm64": "1.20260312.1", "@cloudflare/workerd-linux-64": "1.20260312.1", "@cloudflare/workerd-linux-arm64": "1.20260312.1", "@cloudflare/workerd-windows-64": "1.20260312.1" }, "bin": { "workerd": "bin/workerd" } }, "sha512-nNpPkw9jaqo79B+iBCOiksx+N62xC+ETIfyzofUEdY3cSOHJg6oNnVSHm7vHevzVblfV76c8Gr0cXHEapYMBEg=="],
 
     "wrangler": ["wrangler@4.73.0", "", { "dependencies": { "@cloudflare/kv-asset-handler": "0.4.2", "@cloudflare/unenv-preset": "2.15.0", "blake3-wasm": "2.1.5", "esbuild": "0.27.3", "miniflare": "4.20260312.0", "path-to-regexp": "6.3.0", "unenv": "2.0.0-rc.24", "workerd": "1.20260312.1" }, "optionalDependencies": { "fsevents": "~2.3.2" }, "peerDependencies": { "@cloudflare/workers-types": "^4.20260312.1" }, "optionalPeers": ["@cloudflare/workers-types"], "bin": { "wrangler": "bin/wrangler.js", "wrangler2": "bin/wrangler.js" } }, "sha512-VJXsqKDFCp6OtFEHXITSOR5kh95JOknwPY8m7RyQuWJQguSybJy43m4vhoCSt42prutTef7eeuw7L4V4xiynGw=="],
 
+    "wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
+
     "ws": ["ws@8.19.0", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": ">=5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg=="],
 
+    "y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],
+
+    "yaml": ["yaml@2.8.3", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-AvbaCLOO2Otw/lW5bmh9d/WEdcDFdQp2Z2ZUH3pX9U2ihyUY0nvLv7J6TrWowklRGPYbB/IuIMfYgxaCPg5Bpg=="],
+
+    "yargs": ["yargs@17.7.2", "", { "dependencies": { "cliui": "^8.0.1", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "require-directory": "^2.1.1", "string-width": "^4.2.3", "y18n": "^5.0.5", "yargs-parser": "^21.1.1" } }, "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w=="],
+
+    "yargs-parser": ["yargs-parser@21.1.1", "", {}, "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="],
+
+    "yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],
+
     "youch": ["youch@4.1.0-beta.10", "", { "dependencies": { "@poppinss/colors": "^4.1.5", "@poppinss/dumper": "^0.6.4", "@speed-highlight/core": "^1.2.7", "cookie": "^1.0.2", "youch-core": "^0.3.3" } }, "sha512-rLfVLB4FgQneDr0dv1oddCVZmKjcJ6yX6mS4pU82Mq/Dt9a3cLZQ62pDBL4AUO+uVrCvtWz3ZFUL2HFAFJ/BXQ=="],
 
     "youch-core": ["youch-core@0.3.3", "", { "dependencies": { "@poppinss/exception": "^1.2.2", "error-stack-parser-es": "^1.0.5" } }, "sha512-ho7XuGjLaJ2hWHoK8yFnsUGy2Y5uDpqSTq1FkHLK4/oqKtyUU1AFbOOxY4IpC9f0fTLjwYbslUz0Po5BpD1wrA=="],
@@ -902,6 +1267,8 @@
 
     "@cspotcode/source-map-support/@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.9", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.0.3", "@jridgewell/sourcemap-codec": "^1.4.10" } }, "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ=="],
 
+    "@poppinss/dumper/supports-color": ["supports-color@10.2.2", "", {}, "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g=="],
+
     "@tailwindcss/node/lightningcss": ["lightningcss@1.31.1", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.31.1", "lightningcss-darwin-arm64": "1.31.1", "lightningcss-darwin-x64": "1.31.1", "lightningcss-freebsd-x64": "1.31.1", "lightningcss-linux-arm-gnueabihf": "1.31.1", "lightningcss-linux-arm64-gnu": "1.31.1", "lightningcss-linux-arm64-musl": "1.31.1", "lightningcss-linux-x64-gnu": "1.31.1", "lightningcss-linux-x64-musl": "1.31.1", "lightningcss-win32-arm64-msvc": "1.31.1", "lightningcss-win32-x64-msvc": "1.31.1" } }, "sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.9.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.0", "tslib": "^2.4.0" }, "bundled": true }, "sha512-0DQ98G9ZQZOxfUcQn1waV2yS8aWdZ6kJMbYCJB3oUBecjWYO1fqJ+a1DRfPF3O5JEkwqwP1A9QEN/9mYm2Yd0w=="],
diff --git a/docs/.gitignore b/docs/.gitignore
new file mode 100644
index 0000000..e713780
--- /dev/null
+++ b/docs/.gitignore
@@ -0,0 +1 @@
+.wrangler
diff --git a/docs/AGENTS.md b/docs/AGENTS.md
new file mode 100644
index 0000000..4b472e9
--- /dev/null
+++ b/docs/AGENTS.md
@@ -0,0 +1,4 @@
+### Rules
+
+- No tests are required here
+- Sometimes bugs found in docs are not docs bugs but actual framework bugs. You should prioritize fixing the framework bug and then update the docs if necessary, rather than just updating the docs to work around the bug.
diff --git a/docs/app/+hooks.server.ts b/docs/app/+hooks.server.ts
new file mode 100644
index 0000000..faef491
--- /dev/null
+++ b/docs/app/+hooks.server.ts
@@ -0,0 +1,15 @@
+import type { Handle } from 'eclipsa'
+import { isPlaygroundPathname, PLAYGROUND_RESPONSE_HEADERS } from './playground/isolation.ts'
+
+export const handle: Handle = async (context, resolve) => {
+  const response = await resolve(context)
+  const pathname = new URL(context.req.url).pathname
+
+  if (isPlaygroundPathname(pathname)) {
+    for (const [name, value] of Object.entries(PLAYGROUND_RESPONSE_HEADERS)) {
+      response.headers.set(name, value)
+    }
+  }
+
+  return response
+}
diff --git a/docs/app/+layout.test.ts b/docs/app/+layout.test.ts
new file mode 100644
index 0000000..f43d62a
--- /dev/null
+++ b/docs/app/+layout.test.ts
@@ -0,0 +1,102 @@
+import { jsxDEV } from 'eclipsa/jsx-dev-runtime'
+import { describe, expect, it } from 'vitest'
+import { __eclipsaComponent } from '../../packages/eclipsa/core/internal.ts'
+import { primeLocationState } from '../../packages/eclipsa/core/runtime.ts'
+import { renderSSR, renderSSRAsync } from '../../packages/eclipsa/core/ssr.ts'
+import AppLayout from './+layout.tsx'
+const TestApp = __eclipsaComponent(
+  () =>
+    /* @__PURE__ */ jsxDEV(
+      AppLayout,
+      {
+        children: /* @__PURE__ */ jsxDEV('main', { children: 'content' }, void 0, false, {
+          fileName: 'docs/app/+layout.test.ts',
+          lineNumber: 10,
+          columnNumber: 7,
+        }),
+      },
+      void 0,
+      false,
+      {
+        fileName: 'docs/app/+layout.test.ts',
+        lineNumber: 9,
+        columnNumber: 5,
+      },
+    ),
+  'docs-app-layout-test',
+  () => [],
+)
+describe('app layout', () => {
+  it('renders Discord and GitHub links in the site navigation', () => {
+    const result = renderSSR(
+      () =>
+        /* @__PURE__ */ jsxDEV(TestApp, {}, void 0, false, {
+          fileName: 'docs/app/+layout.test.ts',
+          lineNumber: 19,
+          columnNumber: 36,
+        }),
+      {
+        symbols: {},
+      },
+    )
+    expect(result.html).toContain('aria-label="Discord"')
+    expect(result.html).toContain('href="https://discord.gg/cKbScerjFK"')
+    expect(result.html).toContain('aria-label="GitHub"')
+    expect(result.html).toContain('href="https://github.com/pnsk-lab/eclipsa"')
+  })
+  it('forces a document reload for the playground navigation link', () => {
+    const result = renderSSR(
+      () =>
+        /* @__PURE__ */ jsxDEV(TestApp, {}, void 0, false, {
+          fileName: 'docs/app/+layout.test.ts',
+          lineNumber: 30,
+          columnNumber: 36,
+        }),
+      {
+        symbols: {},
+      },
+    )
+    const docsLink = result.html.match(/<a[^>]*>Docs<\/a>/)?.[0]
+    const playgroundLink = result.html.match(/<a[^>]*>Playground<\/a>/)?.[0]
+    expect(docsLink).toContain('data-e-link=""')
+    expect(playgroundLink).toBeTruthy()
+    expect(playgroundLink).not.toContain('data-e-link')
+  })
+  it('renders a docs theme toggle on docs routes', async () => {
+    const result = await renderSSRAsync(
+      () =>
+        /* @__PURE__ */ jsxDEV(TestApp, {}, void 0, false, {
+          fileName: 'docs/app/+layout.test.ts',
+          lineNumber: 43,
+          columnNumber: 47,
+        }),
+      {
+        prepare(container) {
+          primeLocationState(container, 'https://example.com/docs/getting-started/overview')
+        },
+      },
+    )
+    expect(result.html).toContain('data-testid="docs-theme-toggle"')
+    expect(result.html).toContain('aria-label="Switch to dark mode"')
+    expect(result.html).toContain('title="Current theme: light"')
+    expect(result.html).toContain('i-tabler-moon-stars')
+  })
+  it('renders the docs search trigger in the header on docs routes', async () => {
+    const result = await renderSSRAsync(
+      () =>
+        /* @__PURE__ */ jsxDEV(TestApp, {}, void 0, false, {
+          fileName: 'docs/app/+layout.test.ts',
+          lineNumber: 56,
+          columnNumber: 47,
+        }),
+      {
+        prepare(container) {
+          primeLocationState(container, 'https://example.com/docs/getting-started/overview')
+        },
+      },
+    )
+    expect(result.html).toContain('data-testid="docs-search-trigger"')
+    expect(result.html).toContain('>Search docs</span>')
+    expect(result.html).toContain('>K</kbd>')
+  })
+})
diff --git a/docs/app/+layout.tsx b/docs/app/+layout.tsx
index f4e356b..60ec81c 100644
--- a/docs/app/+layout.tsx
+++ b/docs/app/+layout.tsx
@@ -1,6 +1,268 @@
+import { motion } from '@eclipsa/motion'
+import { Link, onMount, useLocation, useSignal } from 'eclipsa'
+import { Logo } from '../components/logo'
+import { DocsSearchDialog } from './docs/SearchDialog'
 import './style.css'
-import { component$ } from 'eclipsa'
+import clsx from 'clsx'
 
-export default component$((props: { children?: unknown }) => {
-  return <div>{props.children}</div>
-})
+type DocsTheme = 'light' | 'dark'
+
+const DOCS_THEME_STORAGE_KEY = 'eclipsa-docs-theme'
+
+export default (props: { children?: unknown }) => {
+  const loc = useLocation()
+  const isHome = loc.pathname === '/'
+  const isDocsRoute = loc.pathname.startsWith('/docs')
+  const mobileMenuOpen = useSignal(false)
+  const docsTheme = useSignal<DocsTheme>('light')
+
+  const applyDocsTheme = (nextTheme: DocsTheme) => {
+    docsTheme.value = nextTheme
+
+    if (typeof document === 'undefined') return
+    document.documentElement.dataset.docsTheme = nextTheme
+  }
+
+  const toggleDocsTheme = () => {
+    const nextTheme = docsTheme.value === 'dark' ? 'light' : 'dark'
+    applyDocsTheme(nextTheme)
+
+    if (typeof window === 'undefined') return
+
+    try {
+      window.localStorage.setItem(DOCS_THEME_STORAGE_KEY, nextTheme)
+    } catch {}
+  }
+
+  onMount(() => {
+    if (typeof window === 'undefined') return
+
+    try {
+      const stored = window.localStorage.getItem(DOCS_THEME_STORAGE_KEY)
+      applyDocsTheme(
+        stored === 'light' || stored === 'dark'
+          ? stored
+          : window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light',
+      )
+    } catch {
+      applyDocsTheme('light')
+    }
+  })
+
+  const blurActiveElement = () => {
+    if (typeof document === 'undefined') return
+    if (!(document.activeElement instanceof HTMLElement)) return
+    document.activeElement.blur()
+  }
+
+  const closeMobileMenu = () => {
+    blurActiveElement()
+    mobileMenuOpen.value = false
+  }
+
+  return (
+    <div
+      class={clsx(
+        isDocsRoute && 'min-h-screen bg-[color:var(--docs-bg)] text-[color:var(--docs-text)]',
+      )}
+    >
+      <nav
+        class={clsx(
+          'z-50 flex w-full items-center justify-between px-4 py-4 sm:px-6',
+          isHome || !isDocsRoute ? 'fixed top-0' : 'md:fixed md:top-0',
+          isHome
+            ? 'bg-[linear-gradient(to_bottom,rgba(5,5,5,1),rgba(5,5,5,0))] text-white'
+            : isDocsRoute
+              ? 'border-b border-[color:var(--docs-border)] bg-[color:var(--docs-nav-bg)] text-[color:var(--docs-text)] backdrop-blur md:border-transparent md:bg-transparent'
+              : 'text-zinc-900',
+        )}
+      >
+        <Link
+          class="flex items-center gap-2 text-xl font-urbanist"
+          data-interactive=""
+          href="/"
+          onClick={closeMobileMenu}
+        >
+          <Logo class="w-5 h-5" />
+          <span>eclipsa</span>
+        </Link>
+
+        <div
+          class={clsx(
+            'hidden items-center gap-8 text-sm font-bold uppercase tracking-[0.3em] md:flex',
+            isHome
+              ? 'text-zinc-400'
+              : isDocsRoute
+                ? 'text-[color:var(--docs-text-muted)]'
+                : 'text-zinc-500',
+          )}
+        >
+          <Link
+            class={clsx(
+              'transition-colors',
+              isHome
+                ? 'hover:text-white'
+                : isDocsRoute
+                  ? 'hover:text-[color:var(--docs-text)]'
+                  : 'hover:text-zinc-950',
+            )}
+            data-interactive=""
+            href={`${import.meta.env.BASE_URL}docs/getting-started/overview`}
+            onClick={closeMobileMenu}
+          >
+            Docs
+          </Link>
+          <Link
+            class={clsx(
+              'transition-colors',
+              isHome
+                ? 'hover:text-white'
+                : isDocsRoute
+                  ? 'hover:text-[color:var(--docs-text)]'
+                  : 'hover:text-zinc-950',
+            )}
+            data-interactive=""
+            href={`${import.meta.env.BASE_URL}playground`}
+            onClick={closeMobileMenu}
+            reloadDocument
+          >
+            Playground
+          </Link>
+        </div>
+
+        <div class="flex items-center gap-2">
+          {isDocsRoute && <DocsSearchDialog />}
+          {isDocsRoute && (
+            <button
+              aria-label={`Switch to ${docsTheme.value === 'dark' ? 'light' : 'dark'} mode`}
+              class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-[color:var(--docs-panel)] text-[color:var(--docs-text)] transition-colors hover:bg-[color:var(--docs-panel-hover)]"
+              data-interactive=""
+              data-testid="docs-theme-toggle"
+              title={`Current theme: ${docsTheme.value}`}
+              type="button"
+              onClick={toggleDocsTheme}
+            >
+              <div
+                aria-hidden="true"
+                class={clsx(
+                  docsTheme.value === 'dark' ? 'i-tabler-sun-high' : 'i-tabler-moon-stars',
+                  'text-lg',
+                )}
+              />
+            </button>
+          )}
+          <a
+            aria-label="Discord"
+            class={clsx(
+              'transition-colors hover:text-[#5865F2]',
+              isHome
+                ? 'text-white'
+                : isDocsRoute
+                  ? 'text-[color:var(--docs-text)]'
+                  : 'text-zinc-900',
+            )}
+            data-interactive=""
+            href="https://discord.gg/cKbScerjFK"
+          >
+            <div aria-hidden="true" class="i-simple-icons-discord h-6 w-6" />
+          </a>
+          <a
+            aria-label="GitHub"
+            class={clsx(
+              'transition-colors hover:text-[#9d00ff]',
+              isHome
+                ? 'text-white'
+                : isDocsRoute
+                  ? 'text-[color:var(--docs-text)]'
+                  : 'text-zinc-900',
+            )}
+            data-interactive=""
+            href="https://github.com/pnsk-lab/eclipsa"
+          >
+            <div aria-hidden="true" class="i-simple-icons-github h-6 w-6" />
+          </a>
+
+          <button
+            aria-controls="site-mobile-menu"
+            aria-expanded={mobileMenuOpen.value}
+            aria-label="Toggle site navigation"
+            class={clsx(
+              'inline-flex h-10 w-10 items-center justify-center rounded-full transition-colors md:hidden',
+              isHome
+                ? 'border border-white/10 text-white hover:border-white/30 hover:bg-white/5'
+                : isDocsRoute
+                  ? 'border border-[color:var(--docs-border)] text-[color:var(--docs-text)] hover:bg-[color:var(--docs-panel-hover)]'
+                  : 'border border-zinc-300 text-zinc-900 hover:border-zinc-400 hover:bg-white/70',
+            )}
+            data-interactive=""
+            type="button"
+            onClick={() => {
+              mobileMenuOpen.value = !mobileMenuOpen.value
+            }}
+          >
+            <div class={clsx(mobileMenuOpen.value ? 'i-tabler-x' : 'i-tabler-menu-2', 'text-xl')} />
+          </button>
+        </div>
+      </nav>
+
+      <div
+        class={clsx(
+          'fixed inset-0 z-[80] md:hidden',
+          mobileMenuOpen.value ? '' : 'pointer-events-none',
+        )}
+        id="site-mobile-menu-shell"
+      >
+        <motion.div
+          class="absolute inset-0 bg-black/20 backdrop-blur-[1px]"
+          initial={false}
+          animate={{
+            opacity: mobileMenuOpen.value ? 1 : 0,
+          }}
+          transition={{
+            duration: 0.18,
+          }}
+        >
+          <button class="absolute inset-0" type="button" onClick={closeMobileMenu} />
+        </motion.div>
+
+        <motion.div
+          class="absolute inset-x-4 top-18 rounded-3xl border border-[color:var(--docs-border)] bg-[color:var(--docs-panel)] p-3 text-sm font-bold uppercase tracking-[0.24em] text-[color:var(--docs-text-muted)] shadow-[var(--docs-shadow)] backdrop-blur-xl"
+          id="site-mobile-menu"
+          initial={false}
+          animate={{
+            opacity: mobileMenuOpen.value ? 1 : 0,
+            scale: mobileMenuOpen.value ? 1 : 0.97,
+            y: mobileMenuOpen.value ? 0 : -12,
+          }}
+          transition={{
+            duration: 0.22,
+          }}
+        >
+          <div class="flex flex-col gap-1">
+            <Link
+              class="rounded-2xl px-4 py-3 transition-colors hover:bg-[color:var(--docs-panel-hover)] hover:text-[color:var(--docs-text)]"
+              data-interactive=""
+              href={`${import.meta.env.BASE_URL}docs/getting-started/overview`}
+              onClick={closeMobileMenu}
+            >
+              Docs
+            </Link>
+            <Link
+              class="rounded-2xl px-4 py-3 transition-colors hover:bg-[color:var(--docs-panel-hover)] hover:text-[color:var(--docs-text)]"
+              data-interactive=""
+              href={`${import.meta.env.BASE_URL}playground`}
+              onClick={closeMobileMenu}
+              reloadDocument
+            >
+              Playground
+            </Link>
+          </div>
+        </motion.div>
+      </div>
+
+      <div>{props.children}</div>
+    </div>
+  )
+}
diff --git a/docs/app/+page.test.ts b/docs/app/+page.test.ts
new file mode 100644
index 0000000..3ca2bac
--- /dev/null
+++ b/docs/app/+page.test.ts
@@ -0,0 +1,355 @@
+import { jsxDEV } from 'eclipsa/jsx-dev-runtime'
+import { readFileSync } from 'node:fs'
+import { describe, expect, it } from 'vitest'
+import { __eclipsaComponent } from '../../packages/eclipsa/core/internal.ts'
+import { renderSSR } from '../../packages/eclipsa/core/ssr.ts'
+import LandingPage, {
+  SECTION_ORDER,
+  VIEWPORT_SECTION_ANCHOR,
+  resolveAbsoluteTrackFrames,
+  resolveAbsoluteTrackValue,
+  resolveFeatureOpacity,
+  resolveFeatureRotation,
+  resolveOrbitFollowOffsetX,
+  resolveRightmostFeatureIndex,
+  resolveSectionProgress,
+  resolveSectionTrackValue,
+  resolveTrackValue,
+  resolveViewportAnchorY,
+} from './+page.tsx'
+const TestLandingPage = __eclipsaComponent(
+  () =>
+    /* @__PURE__ */ jsxDEV(LandingPage, {}, void 0, false, {
+      fileName: 'docs/app/+page.test.ts',
+      lineNumber: 21,
+      columnNumber: 9,
+    }),
+  'landing-page-test',
+  () => [],
+)
+describe('landing page', () => {
+  it('uses the viewport top edge as the section anchor', () => {
+    expect(VIEWPORT_SECTION_ANCHOR).toBe(0)
+    expect(resolveViewportAnchorY(120, 640)).toBe(120)
+  })
+  it('interpolates individual track frames', () => {
+    expect(
+      resolveTrackValue(
+        [
+          { t: 0, x: 10 },
+          { t: 0.5, x: 20 },
+          { t: 1, x: 30 },
+        ],
+        0.25,
+        'x',
+      ),
+    ).toBe(15)
+  })
+  it('projects section-local frames into absolute scroll positions', () => {
+    const track = {
+      hero: [{ t: 0, x: 0.83 }],
+      statement: [{ t: 1, x: 0.5 }],
+    }
+    const ranges = {
+      hero: { start: 0, end: 100 },
+      statement: { start: 100, end: 300 },
+    }
+    expect(resolveAbsoluteTrackFrames(track, ranges, SECTION_ORDER)).toEqual([
+      { position: 0, t: 0, x: 0.83 },
+      { position: 300, t: 1, x: 0.5 },
+    ])
+    expect(
+      resolveAbsoluteTrackValue(resolveAbsoluteTrackFrames(track, ranges, SECTION_ORDER), 150, 'x'),
+    ).toBeCloseTo(0.665)
+  })
+  it('resolves section-relative track values across multiple sections', () => {
+    const track = {
+      hero: [
+        { t: 0, x: 0.83 },
+        { t: 1, x: 0.5 },
+      ],
+      statement: [
+        { t: 0, x: 0.5 },
+        { t: 1, x: 0.17 },
+      ],
+    }
+    const ranges = {
+      hero: { start: 0, end: 100 },
+      statement: { start: 100, end: 300 },
+    }
+    expect(resolveSectionTrackValue(track, ranges, -10, 'x', SECTION_ORDER)).toBeCloseTo(0.83)
+    expect(resolveSectionTrackValue(track, ranges, 50, 'x', SECTION_ORDER)).toBeCloseTo(0.665)
+    expect(resolveSectionTrackValue(track, ranges, 200, 'x', SECTION_ORDER)).toBeCloseTo(0.335)
+    expect(resolveSectionTrackValue(track, ranges, 350, 'x', SECTION_ORDER)).toBeCloseTo(0.17)
+  })
+  it('interpolates between section starts when consecutive sections only define t:0', () => {
+    const track = {
+      hero: [{ t: 0, x: 0.83 }],
+      statement: [{ t: 0, x: 0.5 }],
+      features: [{ t: 0, x: 0.17 }],
+    }
+    const ranges = {
+      hero: { start: 0, end: 100 },
+      statement: { start: 100, end: 300 },
+      features: { start: 300, end: 500 },
+    }
+    expect(resolveSectionTrackValue(track, ranges, 50, 'x', SECTION_ORDER)).toBeCloseTo(0.665)
+    expect(resolveSectionTrackValue(track, ranges, 200, 'x', SECTION_ORDER)).toBeCloseTo(0.335)
+    expect(resolveSectionTrackValue(track, ranges, 450, 'x', SECTION_ORDER)).toBeCloseTo(0.17)
+  })
+  it('interpolates open from the hero start to the statement end', () => {
+    const track = {
+      hero: [{ t: 0, open: 0.15 }],
+      statement: [{ t: 1, open: 1 }],
+    }
+    const ranges = {
+      hero: { start: 0, end: 100 },
+      statement: { start: 100, end: 300 },
+    }
+    expect(resolveSectionTrackValue(track, ranges, 0, 'open', SECTION_ORDER)).toBeCloseTo(0.15)
+    expect(resolveSectionTrackValue(track, ranges, 150, 'open', SECTION_ORDER)).toBeCloseTo(0.575)
+    expect(resolveSectionTrackValue(track, ranges, 300, 'open', SECTION_ORDER)).toBeCloseTo(1)
+  })
+  it('resolves per-section progress from measured ranges', () => {
+    expect(resolveSectionProgress(void 0, 120)).toBe(0)
+    expect(resolveSectionProgress({ start: 100, end: 300 }, 50)).toBe(-0.25)
+    expect(resolveSectionProgress({ start: 100, end: 300 }, 200)).toBe(0.5)
+    expect(resolveSectionProgress({ start: 100, end: 300 }, 350)).toBe(1)
+  })
+  it('inverts umbrella yaw for feature icon rotation so the visible spin matches', () => {
+    expect(resolveFeatureRotation(0)).toBe(0)
+    expect(resolveFeatureRotation(90)).toBe(-90)
+    expect(resolveFeatureRotation(-45)).toBe(45)
+  })
+  it('marks only the rightmost feature card as fully opaque', () => {
+    expect(resolveRightmostFeatureIndex(3, 0)).toBe(1)
+    expect(resolveRightmostFeatureIndex(3, -120)).toBe(2)
+    expect(resolveFeatureOpacity(1, 3, 0)).toBe(1)
+    expect(resolveFeatureOpacity(0, 3, 0)).toBe(0.5)
+    expect(resolveFeatureOpacity(2, 3, 0)).toBe(0.5)
+  })
+  it('resolves feature orbit x offsets from the umbrella viewport position', () => {
+    expect(resolveOrbitFollowOffsetX(0.125, 1440, 180)).toBeCloseTo(0)
+    expect(resolveOrbitFollowOffsetX(0.5, 1440, 180)).toBeCloseTo(540)
+    expect(resolveOrbitFollowOffsetX(0.25, 1280, 240)).toBeCloseTo(80)
+  })
+  it('renders the landing sections without scroll reveal wrappers or hidden initial styles', () => {
+    const result = renderSSR(
+      () =>
+        /* @__PURE__ */ jsxDEV(TestLandingPage, {}, void 0, false, {
+          fileName: 'docs/app/+page.test.ts',
+          lineNumber: 147,
+          columnNumber: 36,
+        }),
+      {
+        symbols: {},
+      },
+    )
+    expect(result.html).toContain('ECLIPSA')
+    expect(result.html).toContain('Resumability')
+    expect(result.html).toContain('Compiler')
+    expect(result.html).toContain('Full-Stack')
+    expect(result.html).not.toContain('translate3d(0px, 64px, 0px)')
+    expect(result.html).not.toContain('will-change: opacity, transform')
+  })
+  it('renders feature cards with orbit layout CSS variables', () => {
+    const result = renderSSR(
+      () =>
+        /* @__PURE__ */ jsxDEV(TestLandingPage, {}, void 0, false, {
+          fileName: 'docs/app/+page.test.ts',
+          lineNumber: 160,
+          columnNumber: 36,
+        }),
+      {
+        symbols: {},
+      },
+    )
+    expect(result.html).toContain('class="landing-features-orbit-anchor"')
+    expect(result.html).toContain('class="landing-features-orbit"')
+    expect(result.html).toContain('style="--feature-count:3"')
+    expect(result.html).toContain('--feature-index: 0')
+    expect(result.html).toContain('--feature-index: 1')
+    expect(result.html).toContain('--feature-index: 2')
+    expect(result.html).toContain('data-active="true"')
+  })
+  it('keeps feature orbit rotation out of SSR inline item styles', () => {
+    const result = renderSSR(
+      () =>
+        /* @__PURE__ */ jsxDEV(TestLandingPage, {}, void 0, false, {
+          fileName: 'docs/app/+page.test.ts',
+          lineNumber: 174,
+          columnNumber: 36,
+        }),
+      {
+        symbols: {},
+      },
+    )
+    expect(result.html).not.toContain('--feature-rotation:')
+    expect(result.html).not.toMatch(/landing-feature-card-icon[^>]*transform: rotate\(/)
+  })
+  it('inherits feature orbit rotation from the orbit root instead of resetting each item', () => {
+    const stylesheet = readFileSync(new URL('./style.css', import.meta.url), 'utf8')
+    const orbitItemRule = stylesheet.match(/\.landing-feature-orbit-item\s*\{[^}]+\}/)?.[0] ?? ''
+    expect(stylesheet).toContain('.landing-features-orbit {')
+    expect(stylesheet).toContain('--feature-rotation: 0deg;')
+    expect(stylesheet).toContain('transform: translate3d(var(--orbit-follow-x), 0, 0);')
+    expect(orbitItemRule).not.toContain('--feature-rotation:')
+  })
+  it('keeps the page horizontally clipped without breaking sticky sections', () => {
+    const result = renderSSR(
+      () =>
+        /* @__PURE__ */ jsxDEV(TestLandingPage, {}, void 0, false, {
+          fileName: 'docs/app/+page.test.ts',
+          lineNumber: 193,
+          columnNumber: 36,
+        }),
+      {
+        symbols: {},
+      },
+    )
+    expect(result.html).toContain('overflow-x-clip')
+    expect(result.html).not.toContain('overflow-x-hidden')
+    expect(result.html).toContain('class="landing-features-section"')
+    expect(result.html).toContain('class="landing-features-stage"')
+    expect(result.html).toContain('class="landing-features-content text-white"')
+  })
+  it('anchors the code sample with a dedicated sticky wrapper inside a tall parent', () => {
+    const result = renderSSR(
+      () =>
+        /* @__PURE__ */ jsxDEV(TestLandingPage, {}, void 0, false, {
+          fileName: 'docs/app/+page.test.ts',
+          lineNumber: 205,
+          columnNumber: 36,
+        }),
+      {
+        symbols: {},
+      },
+    )
+    expect(result.html).toContain('class="relative mt-8 min-h-[200vh]"')
+    expect(result.html).toContain('class="landing-features-compiler-viewport"')
+    expect(result.html).toContain('class="landing-features-compiler-spacer"')
+  })
+  it('renders compile outputs as vertically stacked sections without changing the code block markup', () => {
+    const result = renderSSR(
+      () =>
+        /* @__PURE__ */ jsxDEV(TestLandingPage, {}, void 0, false, {
+          fileName: 'docs/app/+page.test.ts',
+          lineNumber: 215,
+          columnNumber: 36,
+        }),
+      {
+        symbols: {},
+      },
+    )
+    expect(result.html).toContain('class="landing-compile-flow"')
+    expect(result.html).not.toContain('class="landing-compile-connector"')
+    expect(result.html).toContain('class="flex w-full gap-4"')
+    expect(result.html).toContain(
+      'class="rounded-lg border border-purple-950/50 bg-black/30 p-2 text-[clamp(1rem,4vw,1.25rem)]"',
+    )
+    expect(result.html).toContain(
+      'class="bg-black/30 p-2 rounded-lg border border-purple-950/50 text-sm"',
+    )
+    expect(result.html).toContain(
+      'class="landing-compile-rail landing-compile-rail-source flex w-7 flex-col"',
+    )
+    expect(result.html).toContain(
+      'class="landing-compile-rail landing-compile-rail-client flex w-7 flex-col"',
+    )
+    expect(result.html).toContain(
+      'class="landing-compile-rail landing-compile-rail-ssr flex w-7 flex-col"',
+    )
+    expect(result.html).toContain(
+      'class="landing-compile-segment landing-compile-segment-horizontal mt-7 h-px w-full"',
+    )
+    expect(result.html).toContain(
+      'class="landing-compile-segment landing-compile-segment-vertical grow w-px"',
+    )
+    expect(result.html).toContain('class="landing-compile-dot landing-compile-dot-source"')
+    expect(result.html).toContain('class="landing-compile-dot landing-compile-dot-client"')
+    expect(result.html).toContain('class="landing-compile-dot landing-compile-dot-ssr"')
+    expect(result.html).toContain('YOUR CODE')
+    expect(result.html).toContain('Client')
+    expect(result.html).toContain('SSR')
+  })
+  it('renders fluid statement typography and responsive feature layout hooks', () => {
+    const result = renderSSR(
+      () =>
+        /* @__PURE__ */ jsxDEV(TestLandingPage, {}, void 0, false, {
+          fileName: 'docs/app/+page.test.ts',
+          lineNumber: 252,
+          columnNumber: 36,
+        }),
+      {
+        symbols: {},
+      },
+    )
+    expect(result.html).toContain('text-[clamp(2.75rem,12vw,8rem)]')
+    expect(result.html).toContain('text-[clamp(2rem,9vw,4.5rem)]')
+    expect(result.html).toContain('class="landing-features-copy"')
+    expect(result.html).toContain('class="landing-features-placeholder bg-amber-200"')
+    expect(result.html).toContain('class="landing-features-content-spacer"')
+    expect(result.html).toContain('class="landing-features-compiler-headline')
+  })
+  it('defines vertical rail dot animations in the landing stylesheet', () => {
+    const stylesheet = readFileSync(new URL('./style.css', import.meta.url), 'utf8')
+    expect(stylesheet).toContain('.landing-compile-flow {')
+    expect(stylesheet).toContain(".landing-compile-flow[data-visible='true'] .landing-compile-dot")
+    expect(stylesheet).toContain('.landing-compile-rail {')
+    expect(stylesheet).toContain('.landing-compile-rail::before {')
+    expect(stylesheet).toContain('.landing-compile-segment {')
+    expect(stylesheet).toContain('.landing-compile-segment::after {')
+    expect(stylesheet).toContain('@keyframes landing-compile-dot-source')
+    expect(stylesheet).toContain('@keyframes landing-compile-dot-client')
+    expect(stylesheet).toContain('@keyframes landing-compile-dot-ssr')
+    expect(stylesheet).toContain('@keyframes landing-compile-node-pulse')
+    expect(stylesheet).toContain('.landing-compile-dot-source {')
+    expect(stylesheet).toContain('.landing-compile-dot-client {')
+    expect(stylesheet).toContain('.landing-compile-dot-ssr {')
+  })
+  it('pushes the feature orbit behind the explanation on small screens', () => {
+    const stylesheet = readFileSync(new URL('./style.css', import.meta.url), 'utf8')
+    expect(stylesheet).toContain('.landing-features-section {')
+    expect(stylesheet).toContain('.landing-features-stage {')
+    expect(stylesheet).toContain('grid-template-rows: repeat(5, minmax(0, 1fr));')
+    expect(stylesheet).toContain('grid-template-rows: repeat(3, minmax(0, 1fr));')
+    expect(stylesheet).toContain('@media (max-width: 768px) {')
+    expect(stylesheet).toContain('grid-template-columns: minmax(0, 1fr);')
+    expect(stylesheet).toContain('pointer-events: none;')
+    expect(stylesheet).toContain('justify-self: stretch;')
+    expect(stylesheet).toContain('position: sticky;')
+    expect(stylesheet).toContain('top: 0;')
+    expect(stylesheet).toContain('min-height: 100svh;')
+    expect(stylesheet).toContain('justify-content: center;')
+    expect(stylesheet).toContain('align-items: center;')
+    expect(stylesheet).toContain('.landing-features-content {')
+    expect(stylesheet).toContain('.landing-features-content-spacer {')
+    expect(stylesheet).toContain('display: block;')
+    expect(stylesheet).not.toContain('grid-template-rows: none;')
+  })
+  it('keeps the full-stack copy aligned to the top of its row', () => {
+    const stylesheet = readFileSync(new URL('./style.css', import.meta.url), 'utf8')
+    const copyRule = stylesheet.match(/\.landing-features-copy\s*\{[^}]+\}/)?.[0] ?? ''
+    expect(copyRule).not.toContain('justify-content: center;')
+    expect(copyRule).not.toContain('display: flex;')
+  })
+  it('keeps the fixed canvas layer ahead of the hero section markup', () => {
+    const result = renderSSR(
+      () =>
+        /* @__PURE__ */ jsxDEV(TestLandingPage, {}, void 0, false, {
+          fileName: 'docs/app/+page.test.ts',
+          lineNumber: 313,
+          columnNumber: 36,
+        }),
+      {
+        symbols: {},
+      },
+    )
+    expect(result.html).toContain(
+      'class="pointer-events-none fixed inset-0 z-[1] h-screen w-screen"',
+    )
+    expect(result.html.indexOf('<canvas')).toBeGreaterThan(-1)
+    expect(result.html.indexOf('id="hero"')).toBeGreaterThan(-1)
+    expect(result.html.indexOf('<canvas')).toBeLessThan(result.html.indexOf('id="hero"'))
+  })
+})
diff --git a/docs/app/+page.tsx b/docs/app/+page.tsx
index 7184fed..4e0b60a 100644
--- a/docs/app/+page.tsx
+++ b/docs/app/+page.tsx
@@ -1,27 +1,694 @@
-import { component$, Link, onVisible, useSignal } from 'eclipsa'
-import { setupLandingScene } from './landing-scene.ts'
-import { Logo } from '../components/logo.tsx'
+import {
+  motion,
+  useMotionValue,
+  useMotionValueEvent,
+  useScroll,
+  useSpring,
+  useTransform,
+  type MotionValue,
+} from '@eclipsa/motion'
+import { Link, onCleanup, onMount, useSignal, type Signal } from 'eclipsa'
+import { useLandingScene } from './use-landing-scene.ts'
+import { Image } from '@eclipsa/image'
+import '@eclipsa/image/client'
+import routingVscodeImage from '../assets/routing-vscode.png?eclipsa-image'
 
-export default component$(() => {
-  const rootRef = useSignal<HTMLDivElement | undefined>()
-  const canvasRef = useSignal<HTMLCanvasElement | undefined>()
+export const SECTION_ORDER = ['hero', 'statement', 'features', 'footer'] as const
 
-  onVisible(() => {
-    const root = rootRef.value
-    const canvas = canvasRef.value
+type LandingSectionName = (typeof SECTION_ORDER)[number]
+type SectionRefMap = Record<LandingSectionName, Signal<HTMLElement | undefined>>
+type SectionRangeMap = Partial<Record<LandingSectionName, { end: number; start: number }>>
+type SectionMeasurements = {
+  anchorY: MotionValue<number>
+  ranges: MotionValue<SectionRangeMap>
+}
+type TrackFrame<Field extends string> = { t: number } & Record<Field, number>
+type AbsoluteTrackFrame<Field extends string> = { position: number } & Record<Field, number>
+type SectionTrackMap<Field extends string> = Partial<
+  Record<LandingSectionName, ReadonlyArray<TrackFrame<Field>>>
+>
 
-    if (!root || !canvas) {
-      return
+const OPEN = {
+  hero: [
+    { t: 0, open: 0.15 },
+    { t: 1, open: 1 },
+  ],
+  statement: [],
+} satisfies SectionTrackMap<'open'>
+
+const ROTATE = {
+  hero: [
+    { t: 0, x: -80, y: 0, z: 30 },
+    { t: 0.5, x: -80, y: 0, z: 30 },
+    { t: 1, x: -60, y: 0, z: -7 },
+  ],
+  statement: [{ t: 1, x: 0, y: 0, z: 0 }],
+  features: [
+    {
+      t: 0.2,
+      x: 0,
+      y: 0,
+      z: 0,
+    },
+    {
+      t: 1,
+      x: 0,
+      y: 360 * 1,
+      z: 0,
+    },
+  ],
+} satisfies SectionTrackMap<'x' | 'y' | 'z'>
+
+const SIZE = {
+  hero: [{ t: 0, size: 0.6 }],
+} satisfies SectionTrackMap<'size'>
+
+const POS = {
+  hero: [
+    { t: 0, x: 0.83, y: 0.48 },
+    { t: 1, x: 0.5, y: 0.5 },
+  ],
+  statement: [
+    { t: 0, x: 0.5, y: 0.5 },
+    //{ t: 0.5, x: 0.3, y: 0.5 },
+    //{ t: 1, x: 0.125, y: 0.5 },
+  ],
+  features: [
+    { t: 0.1, x: 0.5, y: 0.5 },
+    { t: 0.2, x: 0.125, y: 0.5 },
+  ],
+} satisfies SectionTrackMap<'x' | 'y'>
+
+const FEATURE_ITEMS = [
+  { iconClass: 'i-tabler-droplet-bolt', title: 'Resumability' },
+  { iconClass: 'i-tabler-cpu', title: 'Compiler' },
+  { iconClass: 'i-tabler-protocol', title: 'Full-Stack' },
+]
+export const VIEWPORT_SECTION_ANCHOR = 0
+
+const clamp01 = (value: number) => Math.min(1, Math.max(0, value))
+
+const getFirstTrackValue = <Field extends string>(
+  tracks: SectionTrackMap<Field>,
+  key: Field,
+  order: readonly LandingSectionName[] = SECTION_ORDER,
+) => {
+  for (const section of order) {
+    const frames = tracks[section]
+    if (frames?.length) {
+      return frames[0][key]
     }
+  }
+
+  return 0
+}
+
+export const resolveTrackValue = <Field extends string>(
+  frames: ReadonlyArray<TrackFrame<Field>>,
+  progress: number,
+  key: Field,
+) => {
+  if (frames.length === 0) {
+    return 0
+  }
+
+  const normalized = clamp01(progress)
+  if (normalized <= frames[0].t) {
+    return frames[0][key]
+  }
+
+  for (let index = 1; index < frames.length; index += 1) {
+    const previous = frames[index - 1]
+    const current = frames[index]
+    if (normalized <= current.t) {
+      const span = current.t - previous.t
+      if (span <= 0) {
+        return current[key]
+      }
+      const localProgress = (normalized - previous.t) / span
+      return previous[key] + (current[key] - previous[key]) * localProgress
+    }
+  }
+
+  return frames[frames.length - 1][key]
+}
+
+export const resolveAbsoluteTrackFrames = <Field extends string>(
+  tracks: SectionTrackMap<Field>,
+  ranges: SectionRangeMap,
+  order: readonly LandingSectionName[] = SECTION_ORDER,
+) => {
+  const absoluteFrames: AbsoluteTrackFrame<Field>[] = []
+
+  for (const section of order) {
+    const frames = tracks[section]
+    const range = ranges[section]
+    if (!frames?.length || !range) {
+      continue
+    }
+
+    const span = Math.max(0, range.end - range.start)
+    for (const frame of frames) {
+      absoluteFrames.push({
+        ...frame,
+        position: range.start + span * clamp01(frame.t),
+      })
+    }
+  }
+
+  absoluteFrames.sort((left, right) => left.position - right.position)
+  return absoluteFrames
+}
+
+export const resolveAbsoluteTrackValue = <Field extends string>(
+  frames: ReadonlyArray<AbsoluteTrackFrame<Field>>,
+  position: number,
+  key: Field,
+) => {
+  if (frames.length === 0) {
+    return 0
+  }
+
+  if (position <= frames[0].position) {
+    return frames[0][key]
+  }
+
+  for (let index = 1; index < frames.length; index += 1) {
+    const previous = frames[index - 1]
+    const current = frames[index]
+    if (position <= current.position) {
+      const span = current.position - previous.position
+      if (span <= 0) {
+        return current[key]
+      }
+      const localProgress = (position - previous.position) / span
+      return previous[key] + (current[key] - previous[key]) * localProgress
+    }
+  }
+
+  return frames[frames.length - 1][key]
+}
+
+const measureSectionRanges = (
+  sectionRefs: SectionRefMap,
+  scrollY: number,
+  order: readonly LandingSectionName[] = SECTION_ORDER,
+): SectionRangeMap => {
+  const ranges: SectionRangeMap = {}
+
+  for (const section of order) {
+    const element = sectionRefs[section].value
+    if (!element) {
+      continue
+    }
+
+    const rect = element.getBoundingClientRect()
+    const start = rect.top + scrollY
+    ranges[section] = {
+      end: start + rect.height,
+      start,
+    }
+  }
+
+  return ranges
+}
+
+const areSectionRangesEqual = (
+  left: SectionRangeMap,
+  right: SectionRangeMap,
+  order: readonly LandingSectionName[] = SECTION_ORDER,
+) => {
+  for (const section of order) {
+    const leftRange = left[section]
+    const rightRange = right[section]
+    if (!leftRange && !rightRange) {
+      continue
+    }
+    if (!leftRange || !rightRange) {
+      return false
+    }
+    if (leftRange.start !== rightRange.start || leftRange.end !== rightRange.end) {
+      return false
+    }
+  }
+
+  return true
+}
+
+export const resolveSectionTrackValue = <Field extends string>(
+  tracks: SectionTrackMap<Field>,
+  ranges: SectionRangeMap,
+  anchorY: number,
+  key: Field,
+  order: readonly LandingSectionName[] = SECTION_ORDER,
+) => {
+  const frames = resolveAbsoluteTrackFrames(tracks, ranges, order)
+  if (frames.length === 0) {
+    return getFirstTrackValue(tracks, key, order)
+  }
+
+  return resolveAbsoluteTrackValue(frames, anchorY, key)
+}
+
+export const resolveViewportAnchorY = (
+  scrollY: number,
+  viewportHeight: number,
+  anchor = VIEWPORT_SECTION_ANCHOR,
+) => scrollY + viewportHeight * anchor
 
-    setupLandingScene({ canvas })
+export const resolveSectionProgress = (
+  range: { end: number; start: number } | undefined,
+  anchorY: number,
+) => {
+  if (!range) {
+    return 0
+  }
+
+  const span = range.end - range.start
+  if (span <= 0) {
+    return anchorY >= range.end ? 1 : 0
+  }
+
+  return Math.min(1, (anchorY - range.start) / span)
+}
+
+export const resolveFeatureRotation = (degrees: number) => (degrees === 0 ? 0 : -degrees)
+
+const normalizeDegrees = (degrees: number) => {
+  const normalized = degrees % 360
+  return normalized < 0 ? normalized + 360 : normalized
+}
+
+const getCircularDistance = (left: number, right: number) => {
+  const delta = Math.abs(normalizeDegrees(left) - normalizeDegrees(right))
+  return Math.min(delta, 360 - delta)
+}
+
+export const resolveRightmostFeatureIndex = (count: number, rotationDegrees: number) => {
+  if (count <= 0) {
+    return -1
+  }
+
+  let bestIndex = 0
+  let bestDistance = Number.POSITIVE_INFINITY
+
+  for (let index = 0; index < count; index += 1) {
+    const angle = normalizeDegrees((360 / count) * index + rotationDegrees)
+    const distance = getCircularDistance(angle, 90)
+
+    if (distance < bestDistance) {
+      bestDistance = distance
+      bestIndex = index
+    }
+  }
+
+  return bestIndex
+}
+
+export const resolveFeatureOpacity = (
+  index: number,
+  count: number,
+  rotationDegrees: number,
+  inactiveOpacity = 0.5,
+) => (index === resolveRightmostFeatureIndex(count, rotationDegrees) ? 1 : inactiveOpacity)
+
+export const resolveOrbitFollowOffsetX = (
+  normalizedX: number,
+  viewportWidth: number,
+  anchorCenterX: number,
+) => normalizedX * viewportWidth - anchorCenterX
+
+const useSectionMeasurements = (
+  scrollY: MotionValue<number>,
+  sectionRefs: SectionRefMap,
+): SectionMeasurements => {
+  const anchorY = useMotionValue(0)
+  const ranges = useMotionValue<SectionRangeMap>({})
+
+  onMount(() => {
+    const update = () => {
+      const nextScrollY = scrollY.get()
+      const nextRanges = measureSectionRanges(sectionRefs, nextScrollY)
+      const nextAnchorY = resolveViewportAnchorY(nextScrollY, window.innerHeight)
+
+      if (!areSectionRangesEqual(ranges.get(), nextRanges)) {
+        ranges.set(nextRanges)
+      }
+      if (anchorY.get() !== nextAnchorY) {
+        anchorY.set(nextAnchorY)
+      }
+    }
+
+    update()
+    const cleanupScroll = scrollY.on('change', update)
+    window.addEventListener('resize', update)
+
+    let resizeObserver: ResizeObserver | null = null
+    if (typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(update)
+      for (const section of SECTION_ORDER) {
+        const element = sectionRefs[section].value
+        if (element) {
+          resizeObserver.observe(element)
+        }
+      }
+    }
+
+    onCleanup(() => {
+      cleanupScroll()
+      window.removeEventListener('resize', update)
+      resizeObserver?.disconnect()
+    })
   })
 
-  return (
-    <div
-      class="relative flex min-h-screen flex-col overflow-x-hidden bg-[#050505] text-white antialiased font-space-grotesk selection:bg-purple-500 selection:text-white"
-      ref={rootRef}
+  return {
+    anchorY,
+    ranges,
+  }
+}
+
+const useSectionTrackValue = <Field extends string>(
+  measurements: SectionMeasurements,
+  tracks: SectionTrackMap<Field>,
+  key: Field,
+): MotionValue<number> =>
+  useTransform(() =>
+    resolveSectionTrackValue(tracks, measurements.ranges.get(), measurements.anchorY.get(), key),
+  )
+
+const useSectionProgress = (measurements: SectionMeasurements, section: LandingSectionName) =>
+  useTransform(() =>
+    resolveSectionProgress(measurements.ranges.get()[section], measurements.anchorY.get()),
+  )
+
+const useLandingSectionRefs = (): SectionRefMap => ({
+  hero: useSignal<HTMLElement | undefined>(),
+  statement: useSignal<HTMLElement | undefined>(),
+  features: useSignal<HTMLElement | undefined>(),
+  footer: useSignal<HTMLElement | undefined>(),
+})
+
+const useFeatureOrbitPresentation = (
+  umbrellaX: MotionValue<number>,
+  umbrellaRotateY: MotionValue<number>,
+) => {
+  const orbitAnchorRef = useSignal<HTMLDivElement | undefined>()
+  const orbitRef = useSignal<HTMLDivElement | undefined>()
+
+  onMount(() => {
+    let anchorCenterX = 0
+    let activeFeatureIndex = -1
+
+    const getOrbitItems = () =>
+      Array.from(
+        orbitRef.value?.querySelectorAll<HTMLDivElement>('.landing-feature-orbit-item') ?? [],
+      )
+
+    const syncOrbitX = () => {
+      const orbitElement = orbitRef.value
+      if (!orbitElement) {
+        return
+      }
+
+      orbitElement.style.setProperty(
+        '--orbit-follow-x',
+        `${resolveOrbitFollowOffsetX(umbrellaX.get(), window.innerWidth, anchorCenterX)}px`,
+      )
+    }
+
+    const syncOrbitRotation = () => {
+      const orbitElement = orbitRef.value
+      if (!orbitElement) {
+        return
+      }
+
+      const rotationDegrees = resolveFeatureRotation(umbrellaRotateY.get())
+      orbitElement.style.setProperty('--feature-rotation', `${rotationDegrees}deg`)
+
+      const orbitItems = getOrbitItems()
+      const nextActiveFeatureIndex = resolveRightmostFeatureIndex(
+        orbitItems.length,
+        rotationDegrees,
+      )
+      if (nextActiveFeatureIndex === activeFeatureIndex) {
+        return
+      }
+
+      if (activeFeatureIndex >= 0) {
+        orbitItems[activeFeatureIndex]?.removeAttribute('data-active')
+      }
+      if (nextActiveFeatureIndex >= 0) {
+        orbitItems[nextActiveFeatureIndex]?.setAttribute('data-active', 'true')
+      }
+      activeFeatureIndex = nextActiveFeatureIndex
+    }
+
+    const measureAnchor = () => {
+      const anchorElement = orbitAnchorRef.value
+      if (!anchorElement) {
+        return
+      }
+
+      const rect = anchorElement.getBoundingClientRect()
+      anchorCenterX = rect.left + rect.width / 2
+      syncOrbitX()
+    }
+
+    measureAnchor()
+    syncOrbitRotation()
+
+    const cleanupX = umbrellaX.on('change', syncOrbitX)
+    const cleanupRotate = umbrellaRotateY.on('change', syncOrbitRotation)
+    window.addEventListener('resize', measureAnchor)
+
+    let resizeObserver: ResizeObserver | null = null
+    if (typeof ResizeObserver !== 'undefined' && orbitAnchorRef.value) {
+      resizeObserver = new ResizeObserver(measureAnchor)
+      resizeObserver.observe(orbitAnchorRef.value)
+    }
+
+    onCleanup(() => {
+      cleanupX()
+      cleanupRotate()
+      window.removeEventListener('resize', measureAnchor)
+      resizeObserver?.disconnect()
+    })
+  })
+
+  return {
+    orbitAnchorRef,
+    orbitRef,
+  }
+}
+
+const HeroSection = ({ sectionRef }: { sectionRef: Signal<HTMLElement | undefined> }) => (
+  <div
+    class="relative pl-5 md:pl-15 z-20 flex justify-center h-[calc(100vh-7rem)] max-h-screen flex-col px-4 pb-20 pt-20"
+    id="hero"
+    ref={sectionRef}
+  >
+    <h1 class="uppercase relative z-10 mb-8 mt-15 w-full select-none text-[clamp(3rem,8vw,8rem)] leading-[0.75] tracking-[-0.02em] text-white font-archivo-black">
+      <div>
+        The{' '}
+        <span class="bg-linear-to-r from-[#9d00ff] to-[#7700ff] bg-clip-text text-transparent">
+          Final
+        </span>
+        <span>-Gen</span>
+      </div>
+      <div>Frontend</div>
+      <div>Framework</div>
+    </h1>
+  </div>
+)
+
+const SectionDivider = () => (
+  <div
+    aria-hidden="true"
+    class="relative z-20 mx-0 my-16 h-[2px] w-full bg-[linear-gradient(90deg,transparent,#9d00ff,transparent)] shadow-[0_0_15px_#9d00ff]"
+  ></div>
+)
+
+const StatementSection = ({
+  progress,
+  sectionRef,
+}: {
+  progress: Signal<number>
+  sectionRef: Signal<HTMLElement | undefined>
+}) => (
+  <section class="z-1 px-4 sm:px-6" ref={sectionRef}>
+    <div class="line flex flex-col gap-[clamp(1rem,4vw,1.75rem)] text-center font-archivo-black text-[clamp(2.75rem,12vw,8rem)] leading-[0.75] tracking-[-0.03em] font-extrabold">
+      <div>
+        <motion.span
+          animate={progress.value >= -1 ? { opacity: 1, y: 0 } : { opacity: 0, y: 16 }}
+          class="bg-linear-to-r from-[#9d00ff] to-[#7700ff] bg-clip-text text-transparent"
+        >
+          ECLIPSA
+        </motion.span>{' '}
+        <motion.span
+          animate={progress.value >= -0.9 ? { opacity: 1, y: 0 } : { opacity: 0, y: 16 }}
+        >
+          IS A
+        </motion.span>
+      </div>
+      <motion.div
+        animate={progress.value >= -0.7 ? { opacity: 1, y: 0 } : { opacity: 0, y: 16 }}
+        initial={false}
+        transition={{ duration: 0.24 }}
+      >
+        JAVASCRIPT
+      </motion.div>
+      <motion.div animate={progress.value >= -0.5 ? { opacity: 1, y: 0 } : { opacity: 0, y: 16 }}>
+        FRONTEND
+      </motion.div>
+      <motion.div animate={progress.value >= -0.3 ? { opacity: 1, y: 0 } : { opacity: 0, y: 16 }}>
+        FRAMEWORK
+      </motion.div>
+    </div>
+    <motion.div
+      animate={progress.value >= -0.1 ? { opacity: 1, x: 0 } : { opacity: 0, x: 16 }}
+      class="pt-10 text-center text-[clamp(2rem,9vw,4.5rem)] leading-[0.75] tracking-[-0.03em] font-black text-white"
+    >
+      with
+    </motion.div>
+  </section>
+)
+
+const SiteFooter = ({ sectionRef }: { sectionRef: Signal<HTMLElement | undefined> }) => (
+  <footer
+    class="relative z-20 mt-10 border-t border-white/5 py-10 text-center text-sm text-zinc-500"
+    id="footer"
+    ref={sectionRef}
+  >
+    <p>&copy; 2025 pnsk-lab MIT License.</p>
+  </footer>
+)
+
+const CompileOutputFlow = ({ visible }: { visible: Signal<boolean> }) => (
+  <div class="landing-compile-flow" data-visible={visible.value ? 'true' : 'false'}>
+    <div class="my-5 text-center text-base sm:text-lg">
+      eclipsa compiles your code and make it faster.
+    </div>
+    <motion.div
+      animate={visible.value ? { opacity: 1, x: 0 } : { opacity: 0, x: -16 }}
+      class="flex w-full gap-4"
+      transition={{ delay: 0 }}
+    >
+      <div class="landing-compile-rail landing-compile-rail-source flex w-7 flex-col">
+        <div class="landing-compile-segment landing-compile-segment-horizontal mt-7 h-px w-full" />
+        <div class="landing-compile-segment landing-compile-segment-vertical grow w-px" />
+        <span class="landing-compile-dot landing-compile-dot-source"></span>
+      </div>
+      <div class="min-w-0 flex-1 flex flex-col gap-2">
+        <div class="text-gray-400">YOUR CODE</div>
+        <pre class="rounded-lg border border-purple-950/50 bg-black/30 p-2 text-[clamp(1rem,4vw,1.25rem)]">{`<div>{count.value}</div>`}</pre>
+      </div>
+    </motion.div>
+
+    <motion.div
+      animate={visible.value ? { opacity: 1, x: 0 } : { opacity: 0, x: 16 }}
+      class="flex w-full gap-4"
+      transition={{ delay: 0.2 }}
     >
+      <div class="landing-compile-rail landing-compile-rail-client flex w-7 flex-col">
+        <div class="landing-compile-segment landing-compile-segment-vertical h-7 w-px" />
+        <div class="landing-compile-segment landing-compile-segment-horizontal h-px w-full" />
+        <div class="landing-compile-segment landing-compile-segment-vertical grow w-px" />
+        <span class="landing-compile-dot landing-compile-dot-client"></span>
+      </div>
+      <div class="mt-5 min-w-0 flex-1 flex flex-col gap-2">
+        <div class="text-gray-400">Client</div>
+        <pre class="bg-black/30 p-2 rounded-lg border border-purple-950/50 text-sm">{`var _cloned = __eclipsaTemplate0();
+var __eclipsaNode0 = _cloned.childNodes[0];
+_insert(() => count.value, _cloned, __eclipsaNode0);
+return _cloned;`}</pre>
+      </div>
+    </motion.div>
+
+    <motion.div
+      animate={visible.value ? { opacity: 1, x: 0 } : { opacity: 0, x: 16 }}
+      class="flex w-full gap-4"
+      transition={{ delay: 0.4 }}
+    >
+      <div class="landing-compile-rail landing-compile-rail-ssr flex w-7 flex-col">
+        <div class="landing-compile-segment landing-compile-segment-vertical h-7 w-px" />
+        <div class="landing-compile-segment landing-compile-segment-horizontal h-px w-full" />
+        <span class="landing-compile-dot landing-compile-dot-ssr"></span>
+      </div>
+      <div class="mt-5 min-w-0 flex-1 flex flex-col gap-2">
+        <div class="text-gray-400">SSR</div>
+        <pre class="bg-black/30 p-2 rounded-lg border border-purple-950/50 text-sm">{`return _ssrTemplate(["<div>", "</div>"], count.value);`}</pre>
+      </div>
+    </motion.div>
+  </div>
+)
+
+export default () => {
+  const sectionRefs = useLandingSectionRefs()
+  const { scrollY } = useScroll()
+  const sectionMeasurements = useSectionMeasurements(scrollY, sectionRefs)
+  const statementProgress = useSectionProgress(sectionMeasurements, 'statement')
+  const statementProgressSignal = useSignal(0)
+  const featuresProgress = useSectionProgress(sectionMeasurements, 'features')
+  const featuresVisibleSignal = useSignal(false)
+  const compilerVisible = useSignal(false)
+  const yourCodeVisible = useSignal(false)
+
+  useMotionValueEvent(statementProgress, 'change', (value) => {
+    statementProgressSignal.value = value
+  })
+  useMotionValueEvent(featuresProgress, 'change', (value) => {
+    featuresVisibleSignal.value = value >= 0
+    compilerVisible.value = value >= 0.23
+    yourCodeVisible.value = value >= 0.24
+  })
+
+  const umbrellaOpen = useSpring(useSectionTrackValue(sectionMeasurements, OPEN, 'open'), {
+    damping: 28,
+    stiffness: 260,
+  })
+  const umbrellaSize = useSpring(useSectionTrackValue(sectionMeasurements, SIZE, 'size'), {
+    damping: 30,
+    stiffness: 240,
+  })
+  const umbrellaX = useSpring(useSectionTrackValue(sectionMeasurements, POS, 'x'), {
+    damping: 30,
+    stiffness: 240,
+  })
+  const umbrellaY = useSpring(useSectionTrackValue(sectionMeasurements, POS, 'y'), {
+    damping: 30,
+    stiffness: 240,
+  })
+  const umbrellaRotateX = useSpring(useSectionTrackValue(sectionMeasurements, ROTATE, 'x'), {
+    damping: 26,
+    stiffness: 220,
+  })
+  const umbrellaRotateY = useSpring(useSectionTrackValue(sectionMeasurements, ROTATE, 'y'), {
+    damping: 26,
+    stiffness: 220,
+  })
+  const umbrellaRotateZ = useSpring(useSectionTrackValue(sectionMeasurements, ROTATE, 'z'), {
+    damping: 26,
+    stiffness: 220,
+  })
+  const { canvasRef } = useLandingScene({
+    motion: {
+      open: umbrellaOpen,
+      positionNormalized: {
+        x: umbrellaX,
+        y: umbrellaY,
+      },
+      rotation: {
+        x: umbrellaRotateX,
+        y: umbrellaRotateY,
+        z: umbrellaRotateZ,
+      },
+      sizeNormalized: umbrellaSize,
+    },
+  })
+  const { orbitAnchorRef, orbitRef } = useFeatureOrbitPresentation(umbrellaX, umbrellaRotateY)
+
+  return (
+    <div class="relative flex min-h-screen flex-col overflow-x-clip bg-[#050505] text-white antialiased font-space-grotesk selection:bg-purple-500 selection:text-white">
       <div
         aria-hidden="true"
         class="pointer-events-none fixed inset-0 z-0 bg-[image:linear-gradient(to_right,rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[length:50px_50px]"
@@ -31,231 +698,114 @@ export default component$(() => {
         class="pointer-events-none fixed inset-0 z-[1] h-screen w-screen"
         ref={canvasRef}
       ></canvas>
-      <nav class="fixed top-0 z-50 flex w-full items-center justify-between bg-[linear-gradient(to_bottom,rgba(5,5,5,1),rgba(5,5,5,0))] px-6 py-6">
-        <a class="flex items-center gap-2 text-xl font-urbanist" data-interactive="" href="#hero">
-          <Logo class="w-5 h-5" />
-          <span>eclipsa</span>
-          <span class="text-xs">experimental</span>
-        </a>
-
-        <div class="hidden items-center gap-8 text-sm font-bold uppercase tracking-[0.3em] text-zinc-400 md:flex">
-          <Link
-            class="transition-colors hover:text-white"
-            data-interactive=""
-            href={`${import.meta.env.BASE_URL}docs`}
-          >
-            Docs
-          </Link>
-          <Link
-            class="transition-colors hover:text-white"
-            data-interactive=""
-            href={`${import.meta.env.BASE_URL}playground`}
-          >
-            Playground
-          </Link>
-          <Link
-            class="transition-colors hover:text-white"
-            data-interactive=""
-            href={`${import.meta.env.BASE_URL}reference`}
-          >
-            Reference
-          </Link>
-        </div>
 
-        <a
-          aria-label="GitHub"
-          class="text-white transition-colors hover:text-[#9d00ff]"
-          data-interactive=""
-          href="https://github.com/pnsk-lab/eclipsa"
-        >
-          <svg
-            aria-hidden="true"
-            class="h-6 w-6"
-            fill="none"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            viewBox="0 0 24 24"
-          >
-            <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.9a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20.1 4.77 5.07 5.07 0 0 0 20 1s-1.18-.35-4 1.48a13.38 13.38 0 0 0-7 0C6.18.65 5 1 5 1a5.07 5.07 0 0 0-.1 3.77A5.44 5.44 0 0 0 3.5 8.5c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" />
-          </svg>
-        </a>
-      </nav>
+      <HeroSection sectionRef={sectionRefs.hero} />
+      <SectionDivider />
+      <StatementSection sectionRef={sectionRefs.statement} progress={statementProgressSignal} />
 
-      <div
-        class="relative z-20 flex h-170 max-h-screen flex-col px-4 pb-20 pt-20 text-center"
-        id="hero"
-      >
-        <h1 class="uppercase relative z-10 mb-8 mt-15 w-full select-none text-black text-[clamp(3rem,8vw,8rem)] leading-[0.75] tracking-[-0.02em] text-white font-archivo-black">
-          The{' '}
-          <span class="bg-gradient-to-r from-[#9d00ff] to-[#7700ff] bg-clip-text text-transparent">
-            Final
-          </span>
-          -Gen Frontend Framework
-        </h1>
-
-        <div class="z-20 mt-10 flex flex-col items-center">
-          <p class="mb-6 max-w-3xl text-xl font-bold uppercase tracking-wide text-white font-archivo-black md:text-2xl">
-            Ultrafast development, ultrafast apps.
-          </p>
-          <p class="mx-auto mb-12 max-w-2xl text-sm font-medium leading-relaxed text-zinc-400 md:text-base">
-            eclipsa aims to be the last frontend framework before AI replaces web app by performance
-            and developer experience.
-          </p>
-
-          <div class="flex flex-col gap-6 sm:flex-row">
-            <button
-              class="relative isolate flex items-center justify-center gap-3 overflow-hidden border border-[rgba(157,0,255,0.5)] px-10 py-4 text-sm font-bold uppercase tracking-[0.1em] text-white transition duration-300 before:absolute before:inset-y-0 before:left-[-100%] before:-z-10 before:w-full before:bg-[linear-gradient(90deg,transparent,rgba(157,0,255,0.4),transparent)] before:content-[''] before:transition-[left] before:duration-500 hover:border-[#9d00ff] hover:shadow-[0_0_20px_rgba(157,0,255,0.4)] hover:before:left-[100%]"
-              data-interactive=""
-              type="button"
-            >
-              <svg
-                aria-hidden="true"
-                class="h-4 w-4"
-                fill="none"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-              >
-                <path d="m4 17 6-6-6-6" />
-                <path d="M12 19h8" />
-              </svg>
-              <span>npm create eclipsa@latest</span>
-            </button>
-
-            <Link
-              class="self-center border-b border-transparent pb-1 text-sm font-bold uppercase tracking-[0.3em] text-zinc-400 transition-all hover:border-[#9d00ff] hover:text-white"
-              data-interactive=""
-              href="/docs"
+      <section class="landing-features-section" id="features" ref={sectionRefs.features}>
+        <motion.div class="landing-features-stage">
+          <div class="landing-features-orbit-anchor" ref={orbitAnchorRef}>
+            <div
+              class="landing-features-orbit"
+              ref={orbitRef}
+              style={`--feature-count:${FEATURE_ITEMS.length}`}
             >
-              Read the Docs
-            </Link>
-          </div>
-        </div>
-      </div>
-
-      <div
-        aria-hidden="true"
-        class="relative z-20 mx-0 my-16 h-[2px] w-full bg-[linear-gradient(90deg,transparent,#9d00ff,transparent)] shadow-[0_0_15px_#9d00ff]"
-      ></div>
-
-      <section class="relative z-20 mx-auto w-full max-w-7xl px-6 py-20" id="features">
-        <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
-          <article
-            class="group rounded-lg border border-white/5 border-t-[rgba(157,0,255,0.3)] bg-[rgba(20,20,25,0.6)] p-8 backdrop-blur-[10px] transition duration-300 hover:-translate-y-2"
-            data-interactive=""
-          >
-            <div class="mb-6 flex h-12 w-12 items-center justify-center rounded-full bg-[rgba(157,0,255,0.1)] transition duration-300 group-hover:scale-110">
-              <svg
-                aria-hidden="true"
-                class="h-6 w-6 text-[#9d00ff]"
-                fill="none"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-              >
-                <path d="M6 19a4 4 0 1 1 .7-7.9A6 6 0 1 1 18 14h1a3 3 0 1 1 0 6Z" />
-                <path d="m13 11-4 6h3l-1 6 4-6h-3Z" />
-              </svg>
-            </div>
-            <h2 class="mb-3 text-xl uppercase tracking-wide text-white font-archivo-black">
-              Resumable by Default
-            </h2>
-            <p class="text-sm leading-relaxed text-zinc-400">
-              SSR ships resumable metadata for components, signals, visible callbacks, and watches
-              so the client can wake up only the interactive work it actually needs.
-            </p>
-          </article>
-
-          <article
-            class="group rounded-lg border border-white/5 border-t-[rgba(157,0,255,0.3)] bg-[rgba(20,20,25,0.6)] p-8 backdrop-blur-[10px] transition duration-300 hover:-translate-y-2"
-            data-interactive=""
-          >
-            <div class="mb-6 flex h-12 w-12 items-center justify-center rounded-full bg-[rgba(157,0,255,0.1)] transition duration-300 group-hover:scale-110">
-              <svg
-                aria-hidden="true"
-                class="h-6 w-6 text-[#9d00ff]"
-                fill="none"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-              >
-                <path d="M22 12a10 10 0 0 0-20 0Z" />
-                <path d="M12 12v6a2 2 0 0 0 4 0" />
-              </svg>
+              {FEATURE_ITEMS.map((feature, index) => (
+                <div
+                  key={feature.title}
+                  class="landing-feature-orbit-item"
+                  data-active={
+                    index === resolveRightmostFeatureIndex(FEATURE_ITEMS.length, 0)
+                      ? 'true'
+                      : undefined
+                  }
+                  style={`--feature-index: ${index}`}
+                >
+                  <article
+                    class="landing-feature-card flex items-center gap-1 justify-center self-start rounded-lg transition duration-300 hover:-translate-y-2"
+                    data-interactive=""
+                  >
+                    <div
+                      class={`${feature.iconClass} landing-feature-card-icon h-8 w-8 text-[#fbf4ff]`}
+                    />
+                    <motion.div
+                      animate={
+                        featuresVisibleSignal.value ? { opacity: 1, x: 0 } : { opacity: 0, x: -16 }
+                      }
+                    >
+                      <h2 class="font-archivo-black text-[clamp(0.9rem,2vw,1.5rem)] uppercase tracking-wide text-white">
+                        {feature.title}
+                      </h2>
+                    </motion.div>
+                  </article>
+                </div>
+              ))}
             </div>
-            <h2 class="mb-3 text-xl uppercase tracking-wide text-white font-archivo-black">
-              DOM-Compiled Client
-            </h2>
-            <p class="text-sm leading-relaxed text-zinc-400">
-              Client transforms emit direct DOM operations instead of a generic hydration runtime,
-              keeping updates narrow and aligned with the SSR output.
-            </p>
-          </article>
-
-          <article
-            class="group relative overflow-hidden rounded-lg border border-white/5 border-t-[rgba(157,0,255,0.3)] bg-[rgba(20,20,25,0.6)] p-8 backdrop-blur-[10px] transition duration-300 hover:-translate-y-2"
-            data-interactive=""
-          >
-            <div
-              aria-hidden="true"
-              class="pointer-events-none absolute -bottom-4 -right-4 opacity-10"
+          </div>
+        </motion.div>
+        <div class="landing-features-content text-white">
+          <div class="landing-features-content-spacer" />
+          <div class="landing-features-stack">
+            <motion.div
+              class="landing-features-compiler"
+              animate={compilerVisible.value ? { opacity: 1 } : { opacity: 0 }}
             >
-              <svg
-                aria-hidden="true"
-                class="h-32 w-32 text-[#9d00ff]"
-                fill="none"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-              >
-                <path d="M7 16a5 5 0 1 0 10 0c0-2.8-2.4-6.5-5-10-2.6 3.5-5 7.2-5 10Z" />
-                <path d="M5 8a2.5 2.5 0 1 0 5 0c0-1.4-1.2-3.3-2.5-5C6.2 4.7 5 6.6 5 8Z" />
-                <path d="M14 5a2 2 0 1 0 4 0c0-1.1-1-2.6-2-4-1 1.4-2 2.9-2 4Z" />
-              </svg>
+              <div class="flex min-h-dvh flex-col justify-center">
+                <div class="landing-features-compiler-spacer" />
+                <div class="landing-features-compiler-headline font-extrabold text-[clamp(2rem,5vw,4.5rem)] text-center leading-none tracking-[-0.02em]">
+                  <div>SSR Fast,</div>
+                  <div>Client Fast.</div>
+                </div>
+                <div class="relative mt-8 min-h-[200vh]">
+                  <div class="landing-features-compiler-viewport">
+                    <CompileOutputFlow visible={yourCodeVisible} />
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+            <div class="landing-features-copy">
+              <div class="text-base sm:text-lg">
+                eclipsa is inspired by a lot of modern frameworks, and has a features required for
+                modern development:
+              </div>
+              <div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2">
+                {[
+                  {
+                    icon: 'i-tabler-file-code',
+                    title: 'File System Routing',
+                    link: '/docs/materials/routing',
+                  },
+                ].map((feature) => (
+                  <div
+                    key={feature.title}
+                    class="flex flex-col gap-2 mt-4 border border-purple-950/50 rounded-lg p-4"
+                  >
+                    <div class="flex items-center gap-2">
+                      <div class={`${feature.icon} h-6 w-6 text-[#fbf4ff]`} />
+                      <div class="text-white text-lg">{feature.title}</div>
+                    </div>
+                    <Image
+                      class="max-h-36 object-contain object-left"
+                      src={routingVscodeImage}
+                      decoding="auto"
+                      width={256}
+                      alt={feature.title}
+                    />
+                    <Link href={feature.link} class="text-sm text-purple-400 hover:underline">
+                      Learn more
+                    </Link>
+                  </div>
+                ))}
+              </div>
             </div>
-            <div class="relative z-10 mb-6 flex h-12 w-12 items-center justify-center rounded-full bg-[rgba(157,0,255,0.1)] transition duration-300 group-hover:scale-110">
-              <svg
-                aria-hidden="true"
-                class="h-6 w-6 text-[#9d00ff]"
-                fill="none"
-                stroke="currentColor"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                viewBox="0 0 24 24"
-              >
-                <path d="M7 16a5 5 0 1 0 10 0c0-2.8-2.4-6.5-5-10-2.6 3.5-5 7.2-5 10Z" />
-                <path d="M5 8a2.5 2.5 0 1 0 5 0c0-1.4-1.2-3.3-2.5-5C6.2 4.7 5 6.6 5 8Z" />
-                <path d="M14 5a2 2 0 1 0 4 0c0-1.1-1-2.6-2-4-1 1.4-2 2.9-2 4Z" />
-              </svg>
+            <div class="landing-features-placeholder bg-amber-200">
+              {'lorem ipsum dolor sit amet'.repeat(1)}
             </div>
-            <h2 class="relative z-10 mb-3 text-xl uppercase tracking-wide text-white font-archivo-black">
-              Full-Stack Primitives
-            </h2>
-            <p class="relative z-10 text-sm leading-relaxed text-zinc-400">
-              Routing, loaders, actions, and symbol-aware Vite integration live in one pipeline, so
-              SSR, resume, dev HMR, and build output stay consistent.
-            </p>
-          </article>
+          </div>
         </div>
       </section>
-
-      <footer
-        class="relative z-20 mt-10 border-t border-white/5 py-10 text-center text-sm text-zinc-500"
-        id="footer"
-      >
-        <p>&copy; 2025 pnsk-lab MIT License.</p>
-      </footer>
+      <SiteFooter sectionRef={sectionRefs.footer} />
     </div>
   )
-})
+}
diff --git a/docs/app/+ssr-root.test.ts b/docs/app/+ssr-root.test.ts
new file mode 100644
index 0000000..c4ca613
--- /dev/null
+++ b/docs/app/+ssr-root.test.ts
@@ -0,0 +1,46 @@
+import { jsxDEV } from 'eclipsa/jsx-dev-runtime'
+import { describe, expect, it } from 'vitest'
+import { __eclipsaComponent } from '../../packages/eclipsa/core/internal.ts'
+import { renderSSR } from '../../packages/eclipsa/core/ssr.ts'
+import Root from './+ssr-root.tsx'
+const TestRoot = __eclipsaComponent(
+  () =>
+    /* @__PURE__ */ jsxDEV(
+      Root,
+      {
+        head: null,
+        children: /* @__PURE__ */ jsxDEV('main', { children: 'content' }, void 0, false, {
+          fileName: 'docs/app/+ssr-root.test.ts',
+          lineNumber: 9,
+          columnNumber: 7,
+        }),
+      },
+      void 0,
+      false,
+      {
+        fileName: 'docs/app/+ssr-root.test.ts',
+        lineNumber: 8,
+        columnNumber: 5,
+      },
+    ),
+  'docs-ssr-root-test',
+  () => [],
+)
+describe('docs ssr root', () => {
+  it('renders inline bootstrap scripts without escaping their JavaScript source', () => {
+    const result = renderSSR(
+      () =>
+        /* @__PURE__ */ jsxDEV(TestRoot, {}, void 0, false, {
+          fileName: 'docs/app/+ssr-root.test.ts',
+          lineNumber: 18,
+          columnNumber: 36,
+        }),
+      {
+        symbols: {},
+      },
+    )
+    expect(result.html).toContain('<script>(() => {')
+    expect(result.html).not.toContain('&gt;')
+    expect(result.html).toContain('root.dataset.docsTheme = resolved;')
+  })
+})
diff --git a/docs/app/+ssr-root.tsx b/docs/app/+ssr-root.tsx
index 2e67382..9e37af3 100644
--- a/docs/app/+ssr-root.tsx
+++ b/docs/app/+ssr-root.tsx
@@ -2,16 +2,34 @@ import type { SSRRootProps } from 'eclipsa'
 import './vite-env.d.ts'
 
 export default function Root(props: SSRRootProps) {
+  const docsThemeBootstrap = `(() => {
+    const storageKey = "eclipsa-docs-theme";
+    const root = document.documentElement;
+    try {
+      const stored = localStorage.getItem(storageKey);
+      let resolved = "light";
+      if (stored === "light" || stored === "dark") {
+        resolved = stored;
+      } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+        resolved = "dark";
+      }
+      root.dataset.docsTheme = resolved;
+    } catch (error) {
+      root.dataset.docsTheme = "light";
+    }
+  })();`
+
   return (
     <html lang="en">
       <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>Document</title>
+        <script dangerouslySetInnerHTML={docsThemeBootstrap} />
         {import.meta.env.VITE_ERUDA && (
           <>
             <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
-            <script>eruda.init();</script>
+            <script dangerouslySetInnerHTML="eruda.init();" />
           </>
         )}
         {props.head}
diff --git a/docs/app/Header.tsx b/docs/app/Header.tsx
index ea5b1ee..74f4e9e 100644
--- a/docs/app/Header.tsx
+++ b/docs/app/Header.tsx
@@ -1,6 +1,6 @@
-import { component$, Link } from 'eclipsa'
+import { Link } from 'eclipsa'
 
-export const Header = component$(() => (
+export const Header = () => (
   <div>
     <h1>Todo List</h1>
     <nav>
@@ -11,4 +11,4 @@ export const Header = component$(() => (
       <Link href="/actions">Actions</Link>
     </nav>
   </div>
-))
+)
diff --git a/docs/app/content.config.ts b/docs/app/content.config.ts
new file mode 100644
index 0000000..7c331c5
--- /dev/null
+++ b/docs/app/content.config.ts
@@ -0,0 +1,17 @@
+import { defineCollection, glob } from '@eclipsa/content'
+
+export const docs = defineCollection({
+  loader: glob({
+    base: './content/docs',
+    pattern: '**/*.md',
+  }),
+  markdown: {
+    highlight: {
+      theme: 'github-dark',
+    },
+  },
+  search: {
+    hotkey: 'k',
+    placeholder: 'Search docs',
+  },
+})
diff --git a/docs/app/content/docs/getting-started/overview.md b/docs/app/content/docs/getting-started/overview.md
new file mode 100644
index 0000000..9f60052
--- /dev/null
+++ b/docs/app/content/docs/getting-started/overview.md
@@ -0,0 +1,35 @@
+---
+title: Overview
+description: A minimal markdown page rendered by @eclipsa/content.
+---
+
+# Overview
+
+eclipsa is a super hyper master ergonomic intelligent adaptive neural efficient elegant smooth responsive compact user-centric flux spark frontend framework for building blazing fast adaptive optimal elegant refined sophisticated web applications with ease and joy.
+
+eclipsa means Egui(えぐい) Cool Lightweight Iine(いいね) Pawa-(パワー) Sugo(すご) Asad(أسد).
+
+Fast DOM updates like Solid.js with JSX compile, quick page load like Qwik with resumability.
+
+And you know React, you know eclipsa:
+
+```tsx
+import { useSignal } from 'eclipsa'
+
+export default function Counter() {
+  const count = useSignal(0)
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={() => count.value++}>Increment</button>
+    </div>
+  )
+}
+```
+
+## Why eclipsa?
+
+- Resumability: No hydration, no JavaScript on the client until interaction.
+- Reactivity: Fine-grained reactivity with signals and effects.
+- JSX Compile: Compile-time optimizations for fast updates.
+- TypeScript First: Built with TypeScript for type safety and developer experience.
diff --git a/docs/app/content/docs/getting-started/quick-start.md b/docs/app/content/docs/getting-started/quick-start.md
new file mode 100644
index 0000000..5ce0797
--- /dev/null
+++ b/docs/app/content/docs/getting-started/quick-start.md
@@ -0,0 +1,35 @@
+---
+title: Quick Start
+description: A minimal markdown page rendered by @eclipsa/content.
+---
+
+# Quick Start
+
+## Create a new project
+
+To create a new eclipsa project, use [create-eclipsa](https://npmx.dev/package/create-eclipsa):
+
+```bash
+bun create eclipsa
+pnpm create eclipsa
+deno run -A npm:create-eclipsa
+yarn create eclipsa
+npm create eclipsa
+```
+
+and
+
+```bash
+cd my-app
+bun install # or pnpm install, deno task install, yarn install, npm install
+```
+
+## Run the development server
+
+```bash
+bun dev # or pnpm dev, deno task dev, yarn dev, npm run dev
+```
+
+## Verify search indexing
+
+Use the phrase `stellar-search-probe` if you want to confirm the docs search index is picking up headings, body text, and inline code.
diff --git a/docs/app/content/docs/integrations/content.md b/docs/app/content/docs/integrations/content.md
new file mode 100644
index 0000000..ad77ad5
--- /dev/null
+++ b/docs/app/content/docs/integrations/content.md
@@ -0,0 +1,89 @@
+---
+title: Ox Content
+description: Integrate Eclipsa with Ox Content.
+---
+
+# Content
+
+eclipsa has a content-management system like Astro, powered by [Ox Content](https://ubugeeei.github.io/ox-content/).
+
+## Installation
+
+```bash
+bun add @eclipsa/content
+pnpm add @eclipsa/content
+yarn add @eclipsa/content
+npm install @eclipsa/content
+```
+
+And change your `vite.config.ts`:
+
+```ts
+import { defineConfig } from 'vite-plus'
+import { eclipsa } from 'eclipsa/vite'
+import { eclipsaContent } from '@eclipsa/content/vite' // add this
+
+export default defineConfig({
+  appType: 'custom',
+  plugins: [
+    eclipsa(),
+    eclipsaContent(), // add this
+  ],
+})
+```
+
+## Usage
+
+Create `app/content.config.ts`:
+
+```ts
+import { defineCollection, glob } from '@eclipsa/content'
+
+export const docs = defineCollection({
+  loader: glob({
+    base: './content/docs',
+    pattern: '**/*.md',
+  }),
+})
+```
+
+Then, put your markdown files in `content/docs`. For example, `content/docs/hello.md`:
+
+```md
+---
+title: Hello
+---
+
+# Hello
+
+This is a markdown file.
+```
+
+You can load the content in your components:
+
+```tsx
+// app/docs/[...slug]/+page.tsx
+import { Content, getCollection, getEntry, render, getCollection } from '@eclipsa/content'
+
+const normalizeSlugParam = (slug: string | string[] | undefined) => {
+  if (Array.isArray(slug)) {
+    return slug.join('/')
+  }
+  return typeof slug === 'string' ? slug : ''
+}
+const useDocsPage = loader(async (c) => {
+  const entries = await getCollection(docs)
+  const page = entries.find((entry) => entry.slug === c.params.slug)
+  const entry = await getEntry(docs, id)
+  return {
+    html: (await render(entry)).html,
+    title: entry.data.title,
+  }
+})
+
+export default () => {
+  const page = useDocsPage()
+
+  return <Content as="div" class="markdown-content" html={page.data?.html ?? ''} />
+}
+```
diff --git a/docs/app/content/docs/integrations/motion.md b/docs/app/content/docs/integrations/motion.md
new file mode 100644
index 0000000..28fc03a
--- /dev/null
+++ b/docs/app/content/docs/integrations/motion.md
@@ -0,0 +1,60 @@
+---
+title: Motion
+description: Animate Eclipsa components with @eclipsa/motion.
+---
+
+# Motion
+
+[motion](https://motion.dev/) (fka framer-motion) integration for eclipsa.
+
+## Installation
+
+Install `@eclipsa/motion`:
+
+```bash
+bun add @eclipsa/motion
+pnpm add @eclipsa/motion
+yarn add @eclipsa/motion
+npm install @eclipsa/motion
+```
+
+## Usage
+
+Animate elements with the familiar `motion.div` API:
+
+```tsx
+import { motion, AnimatePresence, MotionConfig } from '@eclipsa/motion'
+import { useSignal } from 'eclipsa'
+
+export default function Page() {
+  const open = useSignal(true)
+
+  return (
+    <MotionConfig transition={{ duration: 0.2 }}>
+      <button onClick={() => (open.value = !open.value)}>Toggle</button>
+      <AnimatePresence>
+        {open.value && (
+          <motion.div
+            key="panel"
+            initial={{ opacity: 0, y: 12 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -12 }}
+          >
+            hello motion
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </MotionConfig>
+  )
+}
+```
+
+The current package includes:
+
+- `motion` / `m`
+- `MotionConfig`
+- `AnimatePresence`
+- `LayoutGroup`
+- `Reorder`
+- `animate`, `delay`, `stagger`, `spring`
+- motion value hooks like `useAnimate`, `useMotionValue`, `useTransform`, and `useScroll`
diff --git a/docs/app/content/docs/materials/action.md b/docs/app/content/docs/materials/action.md
new file mode 100644
index 0000000..475e353
--- /dev/null
+++ b/docs/app/content/docs/materials/action.md
@@ -0,0 +1,217 @@
+---
+title: Action
+description: Mutate server state with typed actions that work with forms, validation, and resume.
+---
+
+# Action
+
+`action()` is the mutation API for eclipsa.
+
+Use it when the client should submit data to the server, run side effects, and reflect the latest submission state back into the UI.
+
+## First example
+
+```tsx
+import { action } from 'eclipsa'
+
+const useCreateTodo = action(async () => {
+  return {
+    ok: true,
+  }
+})
+
+export default function TodoComposer() {
+  const createTodo = useCreateTodo()
+
+  return (
+    <button disabled={createTodo.isPending} onClick={() => void createTodo.action()}>
+      {createTodo.isPending ? 'Saving...' : 'Create todo'}
+    </button>
+  )
+}
+```
+
+## Returned handle
+
+An action handle such as `useCreateTodo()` exposes:
+
+- `Form`: a form component that posts to the action endpoint
+- `action()`: a function that submits input programmatically
+- `isPending`: whether a submission is in flight
+- `result`: the latest successful result
+- `error`: the latest submission error
+- `lastSubmission`: the latest submission snapshot including `input`, `result`, and `error`
+
+## Form submission
+
+Use `Form` when the mutation should be triggered by a native form submit.
+
+```tsx
+import { action, validator, type StandardSchemaV1 } from 'eclipsa'
+
+const formSchema = {
+  '~standard': {
+    types: undefined as unknown as {
+      input: { title: string }
+      output: { title: string }
+    },
+    validate(value: unknown) {
+      if (
+        value &&
+        typeof value === 'object' &&
+        typeof (value as Record<string, unknown>).title === 'string'
+      ) {
+        return { value: value as { title: string } }
+      }
+
+      return {
+        issues: [{ message: 'title is required' }],
+      }
+    },
+    vendor: 'docs',
+    version: 1 as const,
+  },
+} satisfies StandardSchemaV1<{ title: string }, { title: string }>
+
+const useCreateTodo = action(validator(formSchema), async (c) => {
+  return { title: c.var.input.title }
+})
+
+export default function TodoForm() {
+  const createTodo = useCreateTodo()
+
+  return (
+    <createTodo.Form class="flex gap-2">
+      <input name="title" />
+      <button disabled={createTodo.isPending} type="submit">
+        Add
+      </button>
+    </createTodo.Form>
+  )
+}
+```
+
+When a form submits, eclipsa normalizes the `FormData` payload and sends it through the same action pipeline as `action()`.
+
+## Programmatic input
+
+Pass JSON-serializable input directly when you want to submit from event handlers.
+
+```tsx
+import { action } from 'eclipsa'
+
+const useRename = action(async (c) => {
+  return {
+    savedName: c.var.input?.name ?? '',
+  }
+})
+
+export default function RenameButton() {
+  const rename = useRename()
+
+  return <button onClick={() => void rename.action({ name: 'eclipsa' })}>Rename</button>
+}
+```
+
+## Validation
+
+Use `validator()` to validate and transform incoming input before it reaches the action handler.
+
+```tsx
+import { action, validator, type StandardSchemaV1 } from 'eclipsa'
+
+const todoSchema = {
+  '~standard': {
+    types: undefined as unknown as {
+      input: { title: string }
+      output: { title: string }
+    },
+    validate(value: unknown) {
+      if (
+        value &&
+        typeof value === 'object' &&
+        typeof (value as Record<string, unknown>).title === 'string'
+      ) {
+        return { value: value as { title: string } }
+      }
+
+      return {
+        issues: [{ message: 'title is required' }],
+      }
+    },
+    vendor: 'docs',
+    version: 1 as const,
+  },
+} satisfies StandardSchemaV1<{ title: string }, { title: string }>
+
+const useCreateTodo = action(validator(todoSchema), async (c) => {
+  return {
+    title: c.var.input.title,
+  }
+})
+```
+
+After validation, the transformed value is available as `c.var.input`.
+
+In validation, schema follows Standard Schema, so you can also use libraries like Zod, valibot, ArkType, and more with adapters.
+
+```ts
+import * as z from 'zod'
+validator(z.object({ title: z.string() }))
+
+import * as v from 'valibot'
+validator(v.object({ title: v.string() }))
+```
+
+## Middleware
+
+Actions can use middleware the same way loaders do.
+
+```tsx
+import { action, type ActionMiddleware } from 'eclipsa'
+
+const requestMeta: ActionMiddleware<{
+  Variables: {
+    traceId: string
+  }
+}> = async (c, next) => {
+  c.set('traceId', crypto.randomUUID())
+  await next()
+}
+
+const useCheckout = action(requestMeta, async (c) => {
+  return {
+    traceId: c.var.traceId,
+  }
+})
+```
+
+Values written with `c.set()` in middleware are available as `c.var` inside the handler.
+
+## Streaming results
+
+Actions can also return async generators or readable streams.
+
+```tsx
+import { action } from 'eclipsa'
+
+const useCounter = action(async function* () {
+  yield 0
+  yield 1
+})
+```
+
+In that case, `action()` returns an async generator and `result` tracks the latest emitted value.
+
+## What actions should accept and return
+
+Action input and output should stay public and serializable, such as:
+
+- strings
+- numbers
+- booleans
+- plain objects
+- arrays
+- `FormData` for native form submission
+
+Avoid passing opaque server-only objects unless they are values explicitly supported by eclipsa's action serialization.
diff --git a/docs/app/content/docs/materials/atom.md b/docs/app/content/docs/materials/atom.md
new file mode 100644
index 0000000..707f455
--- /dev/null
+++ b/docs/app/content/docs/materials/atom.md
@@ -0,0 +1,115 @@
+---
+title: Atom
+description: Share state across distant components with eclipsa's atom.
+---
+
+# Atom
+
+`atom()` creates a shared state container outside component scope.
+
+If `useSignal()` is local component state, `atom()` is shared state that multiple components can read.
+
+## First example
+
+```tsx
+import { atom, useAtom } from 'eclipsa/atom'
+
+const countAtom = atom(0)
+
+function Counter() {
+  const count = useAtom(countAtom)
+
+  return <button onClick={() => count.value++}>Count: {count.value}</button>
+}
+```
+
+`useAtom()` returns a `Signal<T>`, so you read and write through `.value`.
+
+## When to use atom
+
+`atom()` is a good fit when you want to:
+
+- Share the same UI state between distant parts of the tree
+- Avoid passing props through many layers
+- Keep small app-wide state in a lightweight way
+
+If the state only matters inside one component, `useSignal()` is usually simpler.
+
+## Shared across components
+
+```tsx
+import { atom, useAtom } from 'eclipsa/atom'
+
+const sidebarOpenAtom = atom(true)
+
+function SidebarToggle() {
+  const sidebarOpen = useAtom(sidebarOpenAtom)
+
+  return (
+    <button onClick={() => (sidebarOpen.value = !sidebarOpen.value)}>
+      {sidebarOpen.value ? 'Close' : 'Open'}
+    </button>
+  )
+}
+
+function Sidebar() {
+  const sidebarOpen = useAtom(sidebarOpenAtom)
+
+  return <aside hidden={!sidebarOpen.value}>Menu</aside>
+}
+```
+
+Both components read the same atom, so updates propagate automatically.
+
+## Creating atoms
+
+Atoms are usually created at module scope.
+
+```tsx
+import { atom } from 'eclipsa/atom'
+
+export const currentTabAtom = atom<'overview' | 'api'>('overview')
+```
+
+If you call `atom()` during render, you create a new shared container every time. Put shared atoms outside the component.
+
+## Derived values
+
+Atoms do not have a built-in derived API. Use them together with `useComputed()` or `useWatch()` when needed.
+
+```tsx
+import { useComputed } from 'eclipsa'
+import { atom, useAtom } from 'eclipsa/atom'
+
+const itemsAtom = atom([
+  { id: 1, done: false },
+  { id: 2, done: true },
+])
+
+function Summary() {
+  const items = useAtom(itemsAtom)
+  const completed = useComputed(() => items.value.filter((item) => item.done).length, [items])
+
+  return <p>{completed.value} completed</p>
+}
+```
+
+## Rules
+
+- `useAtom()` はコンポーネントのトップレベルで呼びます
+- `useAtom()` can only receive values created by `atom()`
+- Avoid using atoms for state that does not actually need to be shared
+
+## Choosing between signal and atom
+
+Choose `useSignal()` when:
+
+- The state only belongs to one component
+- You are handling temporary form input
+- You are modeling local UI state such as hover, open, or selected
+
+Choose `atom()` when:
+
+- Multiple distant components need the same state
+- You want to share shell-level app state
+- You want to avoid passing props through many layers
diff --git a/docs/app/content/docs/materials/lifecycle.md b/docs/app/content/docs/materials/lifecycle.md
new file mode 100644
index 0000000..be2ea69
--- /dev/null
+++ b/docs/app/content/docs/materials/lifecycle.md
@@ -0,0 +1,130 @@
+---
+title: Lifecycle
+description: Run effects and DOM-aware hooks at the right timing in eclipsa.
+---
+
+# Lifecycle
+
+In eclipsa, state usually lives in `useSignal()`, while timing-sensitive behavior belongs in lifecycle hooks.
+
+The four most common hooks are:
+
+- `useWatch()`: run side effects when dependencies change
+- `onMount()`: run once after mount
+- `onCleanup()`: clean up subscriptions and resources
+- `onVisible()`: run when the element becomes visible
+
+## `useWatch()`
+
+Use this when behavior should react to signal changes.
+
+```tsx
+import { useSignal, useWatch } from 'eclipsa'
+
+export default function SearchLogger() {
+  const query = useSignal('')
+
+  useWatch(() => {
+    console.log('query:', query.value)
+  })
+
+  return <input value={query.value} onInput={(e) => (query.value = e.currentTarget.value)} />
+}
+```
+
+`useWatch()` is for side effects, not for deriving values.
+
+## `onMount()`
+
+Use this when you need to run something once after the DOM is available.
+
+```tsx
+import { onMount } from 'eclipsa'
+
+export default function Page() {
+  onMount(() => {
+    console.log('mounted')
+  })
+
+  return <div>Ready</div>
+}
+```
+
+Common cases:
+
+- Initial DOM measurement
+- Third-party library setup
+- Client-only work that should happen after mount
+
+## `onCleanup()`
+
+Use this to clean up event listeners, timers, and similar resources.
+
+```tsx
+import { onCleanup, onMount } from 'eclipsa'
+
+export default function Clock() {
+  onMount(() => {
+    const timer = window.setInterval(() => {
+      console.log('tick')
+    }, 1000)
+
+    onCleanup(() => {
+      window.clearInterval(timer)
+    })
+  })
+
+  return <div>Clock</div>
+}
+```
+
+If mount logic starts something, keep the cleanup close to it.
+
+## `onVisible()`
+
+Use this when work should start only after the element becomes visible.
+
+```tsx
+import { onVisible } from 'eclipsa'
+
+export default function Hero() {
+  onVisible(() => {
+    console.log('hero became visible')
+  })
+
+  return <section>Hero</section>
+}
+```
+
+Common cases:
+
+- Delayed animation start
+- Measurement after visibility
+- Deferring heavy work in lower sections of the page
+
+## Choosing the right hook
+
+`useWatch()`:
+
+- Side effects based on signals
+- Behavior that should track changing values
+
+`onMount()`:
+
+- One-time work
+- DOM-dependent logic
+
+`onCleanup()`:
+
+- Removing listeners or timers
+- Cleaning up resources created by mount or watch logic
+
+`onVisible()`:
+
+- Work that should start after the element enters the viewport
+
+## Rule of thumb
+
+- Keep UI values in `useSignal()` or `useComputed()`
+- Put console, analytics, DOM APIs, and timers in hooks
+- Keep setup and cleanup close together
diff --git a/docs/app/content/docs/materials/loader.md b/docs/app/content/docs/materials/loader.md
new file mode 100644
index 0000000..5fe9ddd
--- /dev/null
+++ b/docs/app/content/docs/materials/loader.md
@@ -0,0 +1,131 @@
+---
+title: Loader
+description: Fetch route data with typed loaders that work with SSR and navigation.
+---
+
+# Loader
+
+`loader()` is the route data-fetching API for pages and layouts.
+
+It works the same way during SSR and during client-side navigation, and it returns a handle with `data`, `error`, `isLoading`, and `load()`.
+
+## First example
+
+```tsx
+import { loader } from 'eclipsa'
+
+const useProfile = loader(async () => {
+  const response = await fetch('https://example.com/api/profile')
+  return response.json()
+})
+
+export default function Page() {
+  const profile = useProfile()
+
+  return profile.error ? (
+    <p>Failed to load profile.</p>
+  ) : (
+    <pre>{JSON.stringify(profile.data, null, 2)}</pre>
+  )
+}
+```
+
+## Returned handle
+
+A loader handle such as `useProfile()` exposes:
+
+- `data`: loaded data, or `undefined` if not loaded yet
+- `error`: the current error, if any
+- `isLoading`: whether a request is in flight
+- `load()`: a function that reloads the data explicitly
+
+## Route params with loader
+
+If the data depends on the route URL, read params from the request context.
+
+```tsx
+import { loader } from 'eclipsa'
+
+const useArticle = loader(async (c) => {
+  const slug = c.req.param('slug')
+  const response = await fetch(`https://example.com/api/articles/${slug}`)
+  return response.json()
+})
+
+export default function Page() {
+  const article = useArticle()
+  return <article>{article.data?.title}</article>
+}
+```
+
+## Manual reload
+
+Call `load()` when the user should be able to refresh the data manually.
+
+```tsx
+import { loader } from 'eclipsa'
+
+const useClock = loader(async () => {
+  const response = await fetch('/api/time')
+  return response.text()
+})
+
+export default function Clock() {
+  const clock = useClock()
+
+  return (
+    <div>
+      <p>{clock.data}</p>
+      <button onClick={() => void clock.load()} disabled={clock.isLoading}>
+        Refresh
+      </button>
+    </div>
+  )
+}
+```
+
+## Middleware
+
+Loaders can also use middleware. This is useful for adding shared request metadata or auth-related state.
+
+```tsx
+import { loader, type LoaderMiddleware } from 'eclipsa'
+
+const requestMeta: LoaderMiddleware<{
+  Variables: {
+    traceId: string
+  }
+}> = async (c, next) => {
+  c.set('traceId', crypto.randomUUID())
+  await next()
+}
+
+const useProfile = loader(requestMeta, async (c) => {
+  return {
+    traceId: c.var.traceId,
+  }
+})
+```
+
+Values written with `c.set()` in middleware are available as `c.var` inside the handler.
+
+## SSR and navigation
+
+Loaders are used in both cases:
+
+- Initial SSR
+- Reloads after client-side navigation
+
+Because the API stays the same, page code usually does not need to care when the loader ran.
+
+## What loaders should return
+
+Loaders should return public data values such as:
+
+- strings
+- numbers
+- booleans
+- plain objects
+- arrays
+
+They are not meant to return `Response` or `ReadableStream` directly.
diff --git a/docs/app/content/docs/materials/routing.md b/docs/app/content/docs/materials/routing.md
new file mode 100644
index 0000000..7f4293f
--- /dev/null
+++ b/docs/app/content/docs/materials/routing.md
@@ -0,0 +1,257 @@
+---
+title: Routing
+description: File-based routing, layouts, params, and navigation in eclipsa.
+---
+
+# Routing
+
+eclipsa has file-based routing built in.
+
+Instead of declaring routes in a separate router table, the route structure comes from your `app/` directories.
+
+## Route tree
+
+```bash
+app/
+  +layout.tsx
+  +page.tsx            # "/"
+  about/
+    +page.tsx          # "/about"
+  blog/
+    [slug]/
+      +page.tsx        # "/blog/:slug"
+  docs/
+    [...parts]/
+      +page.tsx        # "/docs/*"
+  [[lang]]/
+    about/
+      +page.tsx        # "/about" and "/ja/about"
+  (marketing)/
+    pricing/
+      +page.tsx        # "/pricing"
+```
+
+Each directory becomes a route segment, and special files starting with `+` define how that segment behaves.
+
+## `+page.tsx`
+
+This is the page component rendered for the route.
+
+```tsx
+export default function Page() {
+  return <h1>Hello</h1>
+}
+```
+
+## `+layout.tsx`
+
+Layouts wrap the pages and nested layouts below them.
+
+```tsx
+import type { JSX } from 'eclipsa/jsx-runtime'
+
+export default function Layout(props: { children: JSX.Childable }) {
+  return (
+    <div>
+      <header>Header</header>
+      <main>{props.children}</main>
+    </div>
+  )
+}
+```
+
+Nested `+layout.tsx` files compose from top to bottom.
+
+## Dynamic routes
+
+`[name]` captures exactly one path segment.
+
+```bash
+app/
+  blog/
+    [slug]/
+      +page.tsx
+```
+
+```tsx
+import { useRouteParams } from 'eclipsa'
+
+export default function BlogPost() {
+  const params = useRouteParams()
+
+  return <h1>{params.slug}</h1>
+}
+```
+
+For `/blog/hello-world`, `params.slug === 'hello-world'`.
+
+## Catch-all routes
+
+`[...name]` captures the rest of the path.
+
+```bash
+app/
+  docs/
+    [...parts]/
+      +page.tsx
+```
+
+For `/docs/guide/routing`, `parts` becomes `['guide', 'routing']`.
+
+## Optional segments
+
+`[[name]]` makes a segment optional.
+
+```bash
+app/
+  [[lang]]/
+    about/
+      +page.tsx
+```
+
+This matches both `/about` and `/ja/about`.
+
+## Route groups
+
+`(group-name)` is a grouping directory that does not appear in the URL.
+
+```bash
+app/
+  (marketing)/
+    about/
+      +page.tsx
+```
+
+This still matches `/about`. Use it when you want to organize routes without changing the URL.
+
+## Navigation with `Link`
+
+Use `Link` for normal client-side navigation.
+
+```tsx
+import { Link } from 'eclipsa'
+
+export default function Nav() {
+  return (
+    <nav>
+      <Link href="/">Home</Link>
+      <Link href="/about">About</Link>
+      <Link href="/blog/hello-world" prefetch="hover">
+        Blog
+      </Link>
+    </nav>
+  )
+}
+```
+
+`Link` performs client-side navigation. `prefetch` supports:
+
+- `'focus'`
+- `'hover'`
+- `'intent'`
+- `'none'`
+
+`true` means `'intent'`, and `false` means `'none'`.
+
+## Imperative navigation
+
+Use `useNavigate()` when navigation should happen from code.
+
+```tsx
+import { useNavigate } from 'eclipsa'
+
+export default function LoginButton() {
+  const navigate = useNavigate()
+
+  return (
+    <button
+      onClick={async () => {
+        await navigate('/dashboard')
+      }}
+    >
+      Continue
+    </button>
+  )
+}
+```
+
+## Reading the current location
+
+Use `useLocation()` to read the current URL.
+
+```tsx
+import { useLocation } from 'eclipsa'
+
+export default function Breadcrumb() {
+  const location = useLocation()
+
+  return <div>{location.pathname}</div>
+}
+```
+
+This is useful for navigation UI and active-state checks.
+
+## Special route files
+
+Route directories can also contain these special files:
+
+- `+loading.tsx`: loading UI for that subtree
+- `+not-found.tsx`: UI for not found states inside that subtree
+- `+error.tsx`: error UI for thrown errors inside that subtree
+- `+middleware.ts`: request middleware for that subtree
+- `+server.ts`: route-scoped server handler
+
+## Not found
+
+Call `notFound()` from a page or loader to fall back to that subtree's `+not-found.tsx`.
+
+```tsx
+import { notFound } from 'eclipsa'
+
+export default function Page() {
+  notFound()
+}
+```
+
+## Route errors
+
+Inside `+error.tsx`, use `useRouteError()` to read the thrown value.
+
+```tsx
+import { useRouteError } from 'eclipsa'
+
+export default function RouteError() {
+  const error = useRouteError<Error>()
+  return <pre>{error?.message}</pre>
+}
+```
+
+## Static paths
+
+Use `getStaticPaths` when dynamic routes should be generated at build time.
+
+```tsx
+import type { GetStaticPaths } from 'eclipsa'
+
+export const render = 'static'
+
+export const getStaticPaths: GetStaticPaths = async () => [
+  { params: { slug: 'hello-world' } },
+  { params: { slug: 'routing' } },
+]
+
+export default function Page() {
+  return <div>Static page</div>
+}
+```
+
+With `render = 'static'`, the route is generated ahead of time.
+
+## Practical routing pattern
+
+For a docs-style app, a practical pattern is:
+
+- Use `+layout.tsx` to share the sidebar and shell
+- Use `[slug]` or `[...slug]` for document pages
+- Use `getStaticPaths` to prebuild known pages
+- Use `Link` and `useLocation()` for active navigation
diff --git a/docs/app/content/docs/materials/signal.md b/docs/app/content/docs/materials/signal.md
new file mode 100644
index 0000000..2462515
--- /dev/null
+++ b/docs/app/content/docs/materials/signal.md
@@ -0,0 +1,146 @@
+---
+title: Signal
+description: Build reactive local state with eclipsa signals.
+---
+
+# Signal
+
+`useSignal()` is the basic state primitive in eclipsa.
+
+When you read and write through `.value`, only the UI that depends on that value updates.
+
+## First example
+
+```tsx
+import { useSignal } from 'eclipsa'
+
+export default function Counter() {
+  const count = useSignal(0)
+
+  return <button onClick={() => count.value++}>Count: {count.value}</button>
+}
+```
+
+## Why signals
+
+Signals are designed for fine-grained updates instead of rerunning the whole component tree.
+
+They work well for local state such as:
+
+- Counters and tabs
+- Open / close state
+- Input values
+- Animation or interaction flags
+
+## Reading and writing
+
+```tsx
+const name = useSignal('Ada')
+
+console.log(name.value)
+name.value = 'Grace'
+```
+
+You can also store objects and arrays.
+
+```tsx
+const form = useSignal({
+  email: '',
+  subscribed: false,
+})
+
+form.value = {
+  ...form.value,
+  subscribed: true,
+}
+```
+
+## Watching changes
+
+Use `useWatch()` when you need side effects.
+
+```tsx
+import { useSignal, useWatch } from 'eclipsa'
+
+export default function DebugCounter() {
+  const count = useSignal(0)
+
+  useWatch(() => {
+    console.log('count changed:', count.value)
+  })
+
+  return <button onClick={() => count.value++}>{count.value}</button>
+}
+```
+
+If you want to make dependencies explicit, use the second argument.
+
+```tsx
+useWatch(() => {
+  console.log(count.value)
+}, [count])
+```
+
+## Derived state
+
+Use `useComputed()` for values derived from other signals.
+
+```tsx
+import { useComputed, useSignal } from 'eclipsa'
+
+export default function Price() {
+  const quantity = useSignal(2)
+  const price = useSignal(1200)
+  const total = useComputed(() => quantity.value * price.value)
+
+  return <p>Total: {total.value}</p>
+}
+```
+
+If you want to make dependencies explicit, use the second argument.
+
+```tsx
+const total = useComputed(() => quantity.value * price.value, [quantity, price])
+```
+
+You also read `useComputed()` values through `.value`.
+
+## Async computed values
+
+You can also model asynchronous derived values.
+
+```tsx
+import { Suspense, useComputed, useSignal } from 'eclipsa'
+
+function SearchResult() {
+  const query = useSignal('eclipsa')
+  const result = useComputed(async () => {
+    const response = await fetch(`/api/search?q=${query.value}`)
+    return response.json()
+  }, [query])
+
+  return <pre>{JSON.stringify(result.value, null, 2)}</pre>
+}
+
+export default function Page() {
+  return (
+    <Suspense fallback={<p>Loading...</p>}>
+      <SearchResult />
+    </Suspense>
+  )
+}
+```
+
+Async computed values suspend while pending, so they are usually used together with `Suspense`.
+
+## Local vs shared state
+
+`useSignal()` is for local state.
+
+If you need to share state across distant components, use `atom()` from `eclipsa/atom`.
+
+## Rules
+
+- Call `useSignal()` at the top level of the component
+- Read and write values through `.value`
+- Keep derived values in `useComputed()` and side effects in `useWatch()` for clearer code
diff --git a/docs/app/content/docs/native/android.md b/docs/app/content/docs/native/android.md
new file mode 100644
index 0000000..20b3f60
--- /dev/null
+++ b/docs/app/content/docs/native/android.md
@@ -0,0 +1,236 @@
+---
+title: Android
+description: Environment notes for running eclipsa native apps on Android from NixOS, macOS, Windows, or Ubuntu.
+---
+
+# Android
+
+This page is a practical setup memo for running the Compose host used by `@eclipsa/native-compose`.
+
+The examples below assume you are working from `examples/android-compose` or another project using the same host package.
+
+## What eclipsa expects
+
+The native Compose host currently expects these tools and environment variables to be available:
+
+- `adb`
+- Android SDK with `platform-tools`, `emulator`, and at least one system image
+- A Java runtime for Gradle
+- `ANDROID_HOME` or `ANDROID_SDK_ROOT`
+- `JAVA_HOME`
+
+Helpful env vars during development:
+
+- `ECLIPSA_NATIVE_COMPOSE_EMULATOR=1`
+- `ECLIPSA_NATIVE_COMPOSE_AVD=<avd-name>`
+- `ECLIPSA_NATIVE_COMPOSE_BOOT_TIMEOUT_MS=<milliseconds>`
+
+Typical development command:
+
+```bash
+cd examples/android-compose
+ECLIPSA_NATIVE_COMPOSE_EMULATOR=1 bun dev
+```
+
+If you already know which AVD you want:
+
+```bash
+cd examples/android-compose
+ECLIPSA_NATIVE_COMPOSE_EMULATOR=1 ECLIPSA_NATIVE_COMPOSE_AVD=Pixel_8_API_35 bun dev
+```
+
+## Recommended AVD shape
+
+For the current Android Compose host, a lighter emulator profile tends to behave better than the newest Play Store image.
+
+- API 35
+- `google_apis`
+- `x86_64`
+- 4 GB RAM if your machine can spare it
+- Graphics set to `Auto` or `Hardware`
+
+Play Store images can work, but they are heavier and often less pleasant during framework development.
+
+## NixOS
+
+NixOS is the most environment-sensitive path because the Android emulator expects an FHS-style runtime.
+
+Recommended approach:
+
+1. Install Android Studio or an SDK composition that includes the emulator and a system image.
+2. Install `android-tools`, `steam-run`, and a JDK.
+3. Export `ANDROID_HOME`, `ANDROID_SDK_ROOT`, and `JAVA_HOME`.
+4. Add your user to the `kvm` group for hardware acceleration.
+5. Create the AVD from Android Studio's Device Manager.
+6. Launch the emulator with `steam-run`.
+
+Minimal direction:
+
+```nix
+{
+  nixpkgs.config.android_sdk.accept_license = true;
+
+  environment.systemPackages = with pkgs; [
+    android-studio
+    android-tools
+    steam-run
+    jdk17_headless
+  ];
+
+  users.users.<your-user>.extraGroups = [ "kvm" ];
+}
+```
+
+You can also use `pkgs.androidenv.composeAndroidPackages` if you want a smaller SDK instead of `android-studio-full`.
+
+Suggested shell environment:
+
+```bash
+export ANDROID_HOME="$HOME/Android/Sdk"
+export ANDROID_SDK_ROOT="$ANDROID_HOME"
+export JAVA_HOME="${JAVA_HOME:-/run/current-system/sw/lib/openjdk}"
+export PATH="$JAVA_HOME/bin:$ANDROID_HOME/platform-tools:$ANDROID_HOME/emulator:$PATH"
+```
+
+Start the emulator explicitly:
+
+```bash
+steam-run "$ANDROID_HOME/emulator/emulator" -gpu host -feature -Vulkan @Eclipsa_API35
+```
+
+Then start the eclipsa app:
+
+```bash
+cd examples/android-compose
+ECLIPSA_NATIVE_COMPOSE_EMULATOR=1 ECLIPSA_NATIVE_COMPOSE_AVD=Eclipsa_API35 bun dev
+```
+
+Notes:
+
+- If the emulator crashes on missing shared libraries, run it through `steam-run` instead of the raw binary.
+- If performance is poor, confirm that your user is in `kvm` and prefer a non-Play-Store `x86_64` image.
+- If Gradle cannot find Java, check `JAVA_HOME` first.
+
+## Windows
+
+Windows is usually the simplest path if you use Android Studio's normal installer.
+
+1. Install Android Studio for Windows.
+2. Let the Setup Wizard install the SDK, platform-tools, emulator, and at least one system image.
+3. Enable CPU virtualization in BIOS if it is disabled.
+4. Enable Windows Hypervisor Platform.
+5. Create an AVD in Device Manager.
+6. Set `ANDROID_HOME`, `ANDROID_SDK_ROOT`, and `JAVA_HOME` in your user environment if your shell does not already expose them.
+
+Typical PowerShell environment:
+
+```powershell
+$env:ANDROID_HOME="$env:LOCALAPPDATA\Android\Sdk"
+$env:ANDROID_SDK_ROOT=$env:ANDROID_HOME
+$env:JAVA_HOME="C:\Program Files\Android\Android Studio\jbr"
+$env:Path="$env:JAVA_HOME\bin;$env:ANDROID_HOME\platform-tools;$env:ANDROID_HOME\emulator;$env:Path"
+```
+
+Then run:
+
+```powershell
+cd examples\android-compose
+$env:ECLIPSA_NATIVE_COMPOSE_EMULATOR="1"
+$env:ECLIPSA_NATIVE_COMPOSE_AVD="Pixel_8_API_35"
+bun dev
+```
+
+Notes:
+
+- If the emulator is extremely slow, verify that Windows Hypervisor Platform is enabled and reboot after changing it.
+- Prefer WHPX over older emulator hypervisor-driver setups on new Windows installs.
+- If `adb` works in Android Studio but not in your shell, your `Path` is incomplete.
+
+## macOS
+
+macOS is close to the standard Android Studio flow and usually does not need the extra emulator workarounds that NixOS does.
+
+1. Install Android Studio for macOS.
+2. Complete the Setup Wizard so it installs the SDK, platform-tools, emulator, and at least one system image.
+3. Create an AVD in Device Manager.
+4. Export `ANDROID_HOME`, `ANDROID_SDK_ROOT`, and `JAVA_HOME` in your shell if they are not already available.
+
+Typical shell setup:
+
+```bash
+export ANDROID_HOME="$HOME/Library/Android/sdk"
+export ANDROID_SDK_ROOT="$ANDROID_HOME"
+export JAVA_HOME="/Applications/Android Studio.app/Contents/jbr/Contents/Home"
+export PATH="$JAVA_HOME/bin:$ANDROID_HOME/platform-tools:$ANDROID_HOME/emulator:$PATH"
+```
+
+Then run:
+
+```bash
+cd examples/android-compose
+ECLIPSA_NATIVE_COMPOSE_EMULATOR=1 ECLIPSA_NATIVE_COMPOSE_AVD=Pixel_8_API_35 bun dev
+```
+
+Notes:
+
+- On Apple Silicon, prefer an ARM64 system image when you want the smoothest emulator performance.
+- If `JAVA_HOME` is wrong, Gradle install steps usually fail before the app launches.
+- If `adb devices` works in Android Studio but not in Terminal, your shell `PATH` is still missing SDK paths.
+
+## Ubuntu
+
+Ubuntu is close to the standard Android Studio Linux flow.
+
+1. Install Android Studio.
+2. Run the Setup Wizard and install the emulator, platform-tools, and at least one `x86_64` system image.
+3. Make sure KVM virtualization is available.
+4. Export `ANDROID_HOME`, `ANDROID_SDK_ROOT`, and `JAVA_HOME`.
+5. Create an AVD in Device Manager.
+
+Basic shell setup:
+
+```bash
+export ANDROID_HOME="$HOME/Android/Sdk"
+export ANDROID_SDK_ROOT="$ANDROID_HOME"
+export JAVA_HOME="/opt/android-studio/jbr"
+export PATH="$JAVA_HOME/bin:$ANDROID_HOME/platform-tools:$ANDROID_HOME/emulator:$PATH"
+```
+
+Then run:
+
+```bash
+cd examples/android-compose
+ECLIPSA_NATIVE_COMPOSE_EMULATOR=1 ECLIPSA_NATIVE_COMPOSE_AVD=Pixel_8_API_35 bun dev
+```
+
+Notes:
+
+- If Android Studio was installed somewhere else, adjust `JAVA_HOME` to that installation's `jbr`.
+- On Ubuntu, emulator smoothness usually depends more on KVM and GPU acceleration than on Bun or Vite.
+- If you see missing library errors from the emulator, install the packages Android Studio asks for before debugging eclipsa itself.
+
+## Troubleshooting
+
+### `JAVA_HOME is not set`
+
+Set `JAVA_HOME` and ensure `java` is on `PATH`.
+
+### `Could not resolve "adb"`
+
+Add Android SDK `platform-tools` to `PATH`, or set `ANDROID_HOME` / `ANDROID_SDK_ROOT` correctly.
+
+### `No Android Virtual Devices are available`
+
+Create an AVD first from Android Studio's Device Manager.
+
+### `Activity class ... does not exist`
+
+The Compose host app is not installed yet. The current dev host tries to run `:app:installDebug` automatically, so this usually means Java or Android SDK discovery is still incomplete.
+
+## References
+
+- Android Studio install guide: https://developer.android.com/studio/install
+- Android emulator acceleration: https://developer.android.com/studio/run/emulator-acceleration
+- Android virtual devices: https://developer.android.com/studio/run/managing-avds
+- Android emulator command line: https://developer.android.com/studio/run/emulator-commandline
+- NixOS Android wiki: https://wiki.nixos.org/wiki/Android
diff --git a/docs/app/content/docs/native/overview.md b/docs/app/content/docs/native/overview.md
new file mode 100644
index 0000000..bc41a22
--- /dev/null
+++ b/docs/app/content/docs/native/overview.md
@@ -0,0 +1,26 @@
+---
+title: Native
+description: Build and run eclipsa apps against native hosts such as Android Compose.
+---
+
+# Eclipsa Native
+
+`@eclipsa/native` lets an eclipsa app target a native host instead of the browser DOM.
+
+Right now the main experimental path in this repository is Android via `@eclipsa/native-compose`, which runs an Android host app and feeds it the native dev manifest from your eclipsa app.
+
+## What stays the same
+
+- You still write route files in `app/`
+- You still run a Vite-based dev server
+- You still use the same JSX-first authoring flow
+
+## What changes
+
+- You need a platform host app
+- You need native tooling on your machine
+- You often need an emulator or a physical device
+
+## Android
+
+For Android setup notes, including NixOS, Windows, and Ubuntu, see [Android](/docs/native/android).
diff --git a/docs/app/docs/+page.tsx b/docs/app/docs/+page.tsx
new file mode 100644
index 0000000..cc401e1
--- /dev/null
+++ b/docs/app/docs/+page.tsx
@@ -0,0 +1,14 @@
+import { onVisible, useNavigate, type MetadataContext } from 'eclipsa'
+
+export const metadata = ({ url }: MetadataContext) => ({
+  canonical: url.pathname,
+  title: 'Docs',
+})
+
+export default () => {
+  const nav = useNavigate()
+  onVisible(() => {
+    nav('/docs/getting-started/overview')
+  })
+  return <div />
+}
diff --git a/docs/app/docs/SearchDialog.test.ts b/docs/app/docs/SearchDialog.test.ts
new file mode 100644
index 0000000..548173f
--- /dev/null
+++ b/docs/app/docs/SearchDialog.test.ts
@@ -0,0 +1,101 @@
+import { jsxDEV } from 'eclipsa/jsx-dev-runtime'
+import { readFileSync } from 'node:fs'
+import { describe, expect, it } from 'vitest'
+import { analyzeModule } from '../../../packages/eclipsa/compiler/analyze/mod.ts'
+import { __eclipsaComponent } from '../../../packages/eclipsa/core/internal.ts'
+import { renderSSRAsync } from '../../../packages/eclipsa/core/ssr.ts'
+import { DocsSearchDialog } from './SearchDialog.tsx'
+const TestSearchDialog = __eclipsaComponent(
+  () =>
+    /* @__PURE__ */ jsxDEV(DocsSearchDialog, {}, void 0, false, {
+      fileName: 'docs/app/docs/SearchDialog.test.ts',
+      lineNumber: 9,
+      columnNumber: 9,
+    }),
+  'docs-search-dialog-test',
+  () => [],
+)
+describe('docs search dialog', () => {
+  it('renders the docs search trigger and dialog shell', async () => {
+    const result = await renderSSRAsync(() =>
+      /* @__PURE__ */ jsxDEV(TestSearchDialog, {}, void 0, false, {
+        fileName: 'docs/app/docs/SearchDialog.test.ts',
+        lineNumber: 16,
+        columnNumber: 47,
+      }),
+    )
+    expect(result.html).toContain('data-testid="docs-search-trigger"')
+    expect(result.html).toContain('data-testid="docs-search-overlay"')
+    expect(result.html).toContain('data-testid="docs-search-input"')
+    expect(result.html).toContain('placeholder="Search docs"')
+    expect(result.html).toContain('>K</kbd>')
+  })
+  it('renders the search overlay as a top-layer dialog host', () => {
+    const source = readFileSync(new URL('./SearchDialog.tsx', import.meta.url), 'utf8')
+    expect(source).toContain('const dialogRef = useSignal<HTMLDialogElement | undefined>()')
+    expect(source).toContain('!dialog.isConnected')
+    expect(source).toContain("if (typeof requestAnimationFrame === 'function') {")
+    expect(source).toContain('dialog.showModal()')
+    expect(source).toContain('focusInputWhenReady(dialogRef, inputRef, token)')
+    expect(source).toContain('input.focus({ preventScroll: true })')
+    expect(source).toContain('autoFocus')
+    expect(source).toContain('<dialog')
+  })
+  it('does not emit self-referential resumable captures for dialog opening', async () => {
+    const source = readFileSync(new URL('./SearchDialog.tsx', import.meta.url), 'utf8')
+    const analyzed = await analyzeModule(source, 'docs/app/docs/SearchDialog.tsx')
+    expect(
+      [...analyzed.symbols.values()].some((symbol) => symbol.captures.includes('syncDialogOpen')),
+    ).toBe(false)
+    expect(
+      [...analyzed.symbols.values()].some((symbol) => symbol.captures.includes('disposed')),
+    ).toBe(false)
+    expect(
+      [...analyzed.symbols.values()].some((symbol) =>
+        symbol.captures.includes('triggerAttachCancelled'),
+      ),
+    ).toBe(false)
+    expect(source).toContain(
+      'const dialogRef = useSignal<HTMLDialogElement | undefined>() as DialogRefTarget',
+    )
+    expect(source).toContain('dialogRef.__openToken = (dialogRef.__openToken ?? 0) + 1')
+    expect(source).toContain('const openDialog = () => {')
+    expect(source).toContain('open.value = true')
+    expect(source).toContain('const retryOpen = () => {')
+    expect(source).toContain('retryOpen()')
+    expect(source).toContain('onClick={openDialog}')
+  })
+  it('uses delegated result row handlers without inline index captures', () => {
+    const source = readFileSync(new URL('./SearchDialog.tsx', import.meta.url), 'utf8')
+    expect(source).toContain('data-result-index={String(index)}')
+    expect(source).toContain('onClick={handleRowClick}')
+    expect(source).toContain('onClick={handleOverlayClick}')
+  })
+  it('shows loading immediately while debouncing and retries pending queries after search runtime loads', () => {
+    const source = readFileSync(new URL('./SearchDialog.tsx', import.meta.url), 'utf8')
+    expect(source).toContain('if (query.value !== nextQuery) {')
+    expect(source).toContain('query.value = nextQuery')
+    expect(source).toContain('results.value = []')
+    expect(source).toContain('loading.value = true')
+    expect(source.indexOf('loading.value = true')).toBeLessThan(
+      source.indexOf('searchTimeout.value = setTimeout'),
+    )
+    expect(source).toContain("if (query.value.trim() !== '') {")
+    expect(source).toContain('scheduleSearch(query.value)')
+  })
+  it('renders search results inline and uses delegated input handlers', () => {
+    const source = readFileSync(new URL('./SearchDialog.tsx', import.meta.url), 'utf8')
+    expect(source).toContain('const inputRef = useSignal<HTMLInputElement | undefined>()')
+    expect(source).toContain('const isComposing = useSignal(false)')
+    expect(source).toContain('value={query.value}')
+    expect(source).toContain('{SearchResultsBody({')
+    expect(source).toContain('const handleInput = (event: Event) => {')
+    expect(source).toContain('const handleInputKeyDown = (event: KeyboardEvent) => {')
+    expect(source).toContain('const handleCompositionStart = () => {')
+    expect(source).toContain('const handleCompositionEnd = (event: CompositionEvent) => {')
+    expect(source).toContain('onInput={handleInput}')
+    expect(source).toContain('onKeyDown={handleInputKeyDown}')
+    expect(source).toContain('onCompositionStart={handleCompositionStart}')
+    expect(source).toContain('onCompositionEnd={handleCompositionEnd}')
+  })
+})
diff --git a/docs/app/docs/SearchDialog.tsx b/docs/app/docs/SearchDialog.tsx
new file mode 100644
index 0000000..de7abcf
--- /dev/null
+++ b/docs/app/docs/SearchDialog.tsx
@@ -0,0 +1,411 @@
+import type { ContentSearchResult } from '@eclipsa/content'
+import { onCleanup, onMount, useSignal } from 'eclipsa'
+import clsx from 'clsx'
+
+const DEFAULT_PLACEHOLDER = 'Search docs'
+const DEFAULT_HOTKEY = 'k'
+type DialogRefTarget = {
+  __openToken?: number
+  value: HTMLDialogElement | undefined
+}
+type InputRefTarget = {
+  value: HTMLInputElement | undefined
+}
+
+const formatHotkey = (value: string) =>
+  value.trim().slice(0, 1).toUpperCase() || DEFAULT_HOTKEY.toUpperCase()
+
+const scheduleRetry = (callback: () => void) => {
+  if (typeof requestAnimationFrame === 'function') {
+    requestAnimationFrame(() => callback())
+    return
+  }
+  setTimeout(callback, 0)
+}
+
+const focusInputWhenReady = (
+  dialogRef: DialogRefTarget,
+  inputRef: InputRefTarget,
+  token: number,
+) => {
+  const retryFocus = () => {
+    if (dialogRef.__openToken !== token) {
+      return
+    }
+
+    const input = inputRef.value
+    if (!input || !input.isConnected || !input.ownerDocument?.contains(input)) {
+      scheduleRetry(retryFocus)
+      return
+    }
+
+    input.focus({ preventScroll: true })
+    input.select()
+
+    if (input.ownerDocument.activeElement === input) {
+      return
+    }
+
+    scheduleRetry(retryFocus)
+  }
+
+  retryFocus()
+}
+
+const SearchResultsBody = (props: {
+  loading: boolean
+  onResultClick: (event: MouseEvent) => void
+  query: string
+  results: ContentSearchResult[]
+  selectedIndex: number
+}) => {
+  const onResultClick = props.onResultClick
+
+  const handleRowClick = (event: MouseEvent) => {
+    onResultClick(event)
+  }
+
+  const body = props.loading ? (
+    <div class="px-3 py-10 text-center text-sm text-zinc-400">Searching…</div>
+  ) : props.query.trim() === '' ? (
+    <div class="px-3 py-10 text-center text-sm text-zinc-400">
+      Search titles, headings, content, and code.
+    </div>
+  ) : props.results.length === 0 ? (
+    <div class="px-3 py-10 text-center text-sm text-zinc-400">No results found.</div>
+  ) : (
+    <div class="flex flex-col gap-1">
+      {props.results.map((result, index) => (
+        <a
+          class={clsx(
+            'rounded-2xl px-4 py-3 transition-colors',
+            index === props.selectedIndex ? 'bg-zinc-100' : 'hover:bg-zinc-50',
+          )}
+          data-result-index={String(index)}
+          href={result.url}
+          onClick={handleRowClick}
+        >
+          <div class="text-sm font-semibold text-zinc-900">{result.title}</div>
+          <div class="mt-1 text-xs uppercase tracking-[0.22em] text-zinc-400">
+            {result.collection}
+          </div>
+          {result.snippet !== '' ? (
+            <div class="mt-2 text-sm leading-6 text-zinc-500">{result.snippet}</div>
+          ) : null}
+        </a>
+      ))}
+    </div>
+  )
+
+  return body
+}
+
+export const DocsSearchDialog = () => {
+  const dialogRef = useSignal<HTMLDialogElement | undefined>() as DialogRefTarget
+  const inputRef = useSignal<HTMLInputElement | undefined>()
+  const open = useSignal(false)
+  const query = useSignal('')
+  const placeholder = useSignal(DEFAULT_PLACEHOLDER)
+  const hotkey = useSignal(DEFAULT_HOTKEY)
+  const results = useSignal<ContentSearchResult[]>([])
+  const selectedIndex = useSignal(0)
+  const loading = useSignal(false)
+  const searchModule = useSignal<{
+    search: (
+      query: string,
+      options?: {
+        limit?: number
+        prefix?: boolean
+      },
+    ) => Promise<ContentSearchResult[]>
+    searchOptions: {
+      hotkey: string
+      placeholder: string
+    }
+  } | null>(null)
+  const searchTimeout = useSignal<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const isComposing = useSignal(false)
+
+  const ensureSearchModule = () => {
+    if (searchModule.value) {
+      return
+    }
+
+    void import('virtual:eclipsa-content:search')
+      .then((mod) => {
+        searchModule.value = mod
+        hotkey.value = mod.searchOptions.hotkey
+        placeholder.value = mod.searchOptions.placeholder
+        if (query.value.trim() !== '') {
+          scheduleSearch(query.value)
+        }
+      })
+      .catch(() => {})
+  }
+
+  const finalizeDialogOpen = (token: number) => {
+    ensureSearchModule()
+    focusInputWhenReady(dialogRef, inputRef, token)
+  }
+
+  const openDialog = () => {
+    if (open.value && dialogRef.value?.open) {
+      ensureSearchModule()
+      const token = dialogRef.__openToken ?? 0
+      focusInputWhenReady(dialogRef, inputRef, token)
+      return
+    }
+
+    const token = (dialogRef.__openToken ?? 0) + 1
+    dialogRef.__openToken = token
+    open.value = true
+
+    const retryOpen = () => {
+      if (dialogRef.__openToken !== token) {
+        return
+      }
+      const dialog = dialogRef.value
+      if (!dialog || !dialog.isConnected || !dialog.ownerDocument?.contains(dialog)) {
+        if (typeof requestAnimationFrame === 'function') {
+          requestAnimationFrame(retryOpen)
+        } else {
+          setTimeout(retryOpen, 0)
+        }
+        return
+      }
+      if (!dialog.open) {
+        dialog.showModal()
+      }
+      finalizeDialogOpen(token)
+    }
+
+    retryOpen()
+  }
+
+  const close = () => {
+    dialogRef.__openToken = (dialogRef.__openToken ?? 0) + 1
+    if (dialogRef.value?.open) {
+      dialogRef.value.close()
+    }
+    open.value = false
+    isComposing.value = false
+    query.value = ''
+    results.value = []
+    selectedIndex.value = 0
+    loading.value = false
+    if (searchTimeout.value) {
+      clearTimeout(searchTimeout.value)
+      searchTimeout.value = undefined
+    }
+  }
+
+  const navigateToSelected = () => {
+    const target = results.value[selectedIndex.value]
+    if (!target || typeof window === 'undefined') {
+      return
+    }
+    close()
+    window.location.href = target.url
+  }
+
+  const scheduleSearch = (nextQuery: string) => {
+    if (query.value !== nextQuery) {
+      query.value = nextQuery
+    }
+    if (searchTimeout.value) {
+      clearTimeout(searchTimeout.value)
+      searchTimeout.value = undefined
+    }
+    if (nextQuery.trim() === '') {
+      results.value = []
+      selectedIndex.value = 0
+      loading.value = false
+      return
+    }
+    results.value = []
+    selectedIndex.value = 0
+    loading.value = true
+    searchTimeout.value = setTimeout(async () => {
+      searchTimeout.value = undefined
+      if (!searchModule.value) {
+        return
+      }
+      results.value = await searchModule.value.search(nextQuery)
+      selectedIndex.value = 0
+      if (query.value === nextQuery) {
+        loading.value = false
+      }
+    }, 120)
+  }
+
+  const handleResultClick = (event: MouseEvent) => {
+    const target = event.currentTarget
+    if (!(target instanceof HTMLAnchorElement)) {
+      return
+    }
+
+    const nextIndex = Number.parseInt(target.dataset.resultIndex ?? '', 10)
+    if (Number.isNaN(nextIndex)) {
+      close()
+      return
+    }
+
+    selectedIndex.value = nextIndex
+    close()
+  }
+
+  const handleOverlayClick = (event: MouseEvent) => {
+    if (event.target === event.currentTarget) {
+      close()
+    }
+  }
+
+  const handleInputKeyDown = (event: KeyboardEvent) => {
+    if (event.isComposing || isComposing.value) {
+      return
+    }
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      selectedIndex.value = Math.min(selectedIndex.value + 1, Math.max(results.value.length - 1, 0))
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      selectedIndex.value = Math.max(selectedIndex.value - 1, 0)
+    } else if (event.key === 'Enter') {
+      event.preventDefault()
+      navigateToSelected()
+    } else if (event.key === 'Escape') {
+      event.preventDefault()
+      close()
+    }
+  }
+
+  const handleInput = (event: Event) => {
+    if (!(event.currentTarget instanceof HTMLInputElement)) {
+      return
+    }
+    if ((event as InputEvent).isComposing || isComposing.value) {
+      return
+    }
+    scheduleSearch(event.currentTarget.value)
+  }
+
+  const handleCompositionStart = () => {
+    isComposing.value = true
+  }
+
+  const handleCompositionEnd = (event: CompositionEvent) => {
+    isComposing.value = false
+    if (!(event.currentTarget instanceof HTMLInputElement)) {
+      return
+    }
+    scheduleSearch(event.currentTarget.value)
+  }
+
+  onMount(() => {
+    ensureSearchModule()
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && open.value) {
+        event.preventDefault()
+        close()
+        return
+      }
+      if (
+        event.key.toLowerCase() === hotkey.value.toLowerCase() &&
+        !event.metaKey &&
+        !event.ctrlKey
+      ) {
+        const active = document.activeElement
+        if (active instanceof HTMLInputElement || active instanceof HTMLTextAreaElement) {
+          return
+        }
+        event.preventDefault()
+        openDialog()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+
+    onCleanup(() => {
+      if (searchTimeout.value) {
+        clearTimeout(searchTimeout.value)
+        searchTimeout.value = undefined
+      }
+      document.removeEventListener('keydown', handleKeyDown)
+    })
+  })
+
+  return (
+    <div class="contents">
+      <button
+        aria-controls="docs-search-dialog"
+        aria-expanded={open.value}
+        class="inline-flex h-10 w-10 items-center justify-center gap-3 rounded-full border border-[color:var(--docs-border)] bg-[color:var(--docs-panel)] px-0 text-sm font-medium text-[color:var(--docs-text-muted)] shadow-[var(--docs-shadow)] transition-colors hover:bg-[color:var(--docs-panel-hover)] hover:text-[color:var(--docs-text)] sm:w-auto sm:px-4"
+        data-testid="docs-search-trigger"
+        type="button"
+        onClick={openDialog}
+      >
+        <div class="i-tabler-search text-base" />
+        <span class="hidden sm:inline">Search docs</span>
+        <kbd class="hidden rounded-md border border-[color:var(--docs-border)] bg-[color:var(--docs-bg-soft)] px-2 py-0.5 text-[11px] font-semibold uppercase text-[color:var(--docs-text-soft)] sm:inline-block">
+          {formatHotkey(hotkey.value)}
+        </kbd>
+      </button>
+
+      <dialog
+        class="fixed inset-0 z-[90] m-0 h-full max-h-none w-full max-w-none overflow-visible border-none bg-transparent p-0 text-inherit"
+        data-testid="docs-search-overlay"
+        ref={dialogRef}
+        onCancel={(event) => {
+          event.preventDefault()
+          close()
+        }}
+      >
+        <div
+          class="flex min-h-full w-full items-start justify-center px-4 pt-24"
+          onClick={handleOverlayClick}
+        >
+          <div
+            class="w-full max-w-2xl overflow-hidden rounded-[2rem] border border-zinc-200 bg-white shadow-[0_40px_120px_rgba(15,23,42,0.18)]"
+            id="docs-search-dialog"
+          >
+            <div class="flex items-center gap-3 border-b border-zinc-100 px-5 py-4">
+              <div class="i-tabler-search text-lg text-zinc-400" />
+              <input
+                autoComplete="off"
+                autoFocus
+                class="w-full bg-transparent text-base text-zinc-900 outline-none placeholder:text-zinc-400"
+                data-testid="docs-search-input"
+                placeholder={placeholder.value}
+                ref={inputRef}
+                type="text"
+                value={query.value}
+                onCompositionEnd={handleCompositionEnd}
+                onCompositionStart={handleCompositionStart}
+                onInput={handleInput}
+                onKeyDown={handleInputKeyDown}
+              />
+              <button
+                aria-label="Close search"
+                class="inline-flex h-9 w-9 items-center justify-center rounded-full text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-900"
+                type="button"
+                onClick={close}
+              >
+                <div class="i-tabler-x text-lg" />
+              </button>
+            </div>
+
+            <div class="max-h-[60vh] overflow-y-auto px-3 py-3">
+              {SearchResultsBody({
+                loading: loading.value,
+                onResultClick: handleResultClick,
+                query: query.value,
+                results: results.value,
+                selectedIndex: selectedIndex.value,
+              })}
+            </div>
+          </div>
+        </div>
+      </dialog>
+    </div>
+  )
+}
diff --git a/docs/app/docs/[...slug]/+layout.test.ts b/docs/app/docs/[...slug]/+layout.test.ts
new file mode 100644
index 0000000..529ef35
--- /dev/null
+++ b/docs/app/docs/[...slug]/+layout.test.ts
@@ -0,0 +1,64 @@
+import { jsxDEV } from 'eclipsa/jsx-dev-runtime'
+import { describe, expect, it } from 'vitest'
+import { primeLocationState } from '../../../../packages/eclipsa/core/runtime.ts'
+import { renderSSRAsync } from '../../../../packages/eclipsa/core/ssr.ts'
+import DocsLayout from './+layout.tsx'
+describe('docs layout', () => {
+  it('hides the On this page mobile UI below lg while keeping the desktop sidebar', async () => {
+    const result = await renderSSRAsync(
+      () =>
+        /* @__PURE__ */ jsxDEV(
+          DocsLayout,
+          {
+            children: /* @__PURE__ */ jsxDEV(
+              'article',
+              { children: 'Routing content' },
+              void 0,
+              false,
+              {
+                fileName: 'docs/app/docs/[...slug]/+layout.test.ts',
+                lineNumber: 12,
+                columnNumber: 11,
+              },
+            ),
+          },
+          void 0,
+          false,
+          {
+            fileName: 'docs/app/docs/[...slug]/+layout.test.ts',
+            lineNumber: 11,
+            columnNumber: 9,
+          },
+        ),
+      {
+        context: {
+          req: {
+            param(name) {
+              return name === 'slug' ? 'materials/routing' : ''
+            },
+          },
+        },
+        prepare(container) {
+          primeLocationState(container, 'https://example.com/docs/materials/routing')
+        },
+      },
+    )
+    expect(result.html).toContain('data-testid="docs-mobile-nav-toggle"')
+    expect(result.html).toContain('>Menu</span>')
+    expect(result.html).toContain('>Routing</div>')
+    expect(result.html).toContain('>Action</div>')
+    expect(result.html).toContain('>Native</div>')
+    expect(result.html).toContain('href="/docs/native/android"')
+    expect(result.html).toContain('id="docs-mobile-drawer-shell"')
+    expect(result.html).not.toContain('data-testid="docs-mobile-toc-toggle"')
+    expect(result.html).not.toContain('id="docs-mobile-toc-shell"')
+    expect(result.html).toContain('transition-opacity lg:hidden pointer-events-none')
+    expect(result.html).toContain('hidden lg:sticky lg:top-22 lg:flex lg:w-64')
+    expect(result.html).toContain('>On this page</span>')
+    expect(result.html).toContain('>Route tree</a>')
+    const routingLinks = result.html.match(/<a[^>]*href="\/docs\/materials\/routing"[^>]*>/g) ?? []
+    const mobileClosableRoutingLinks = routingLinks.filter((tag) => tag.includes('data-e-onclick='))
+    expect(routingLinks).toHaveLength(2)
+    expect(mobileClosableRoutingLinks).toHaveLength(1)
+  })
+})
diff --git a/docs/app/docs/[...slug]/+layout.tsx b/docs/app/docs/[...slug]/+layout.tsx
new file mode 100644
index 0000000..595cf5b
--- /dev/null
+++ b/docs/app/docs/[...slug]/+layout.tsx
@@ -0,0 +1,365 @@
+import clsx from 'clsx'
+import { motion } from '@eclipsa/motion'
+import { Link, loader, useLocation, useSignal } from 'eclipsa'
+import type { JSX } from 'eclipsa/jsx-runtime'
+import { getDocPage } from '../content'
+
+type DocLink = {
+  href: string
+  label: string
+}
+
+type DocSection = {
+  icon: string
+  links: DocLink[]
+  title: string
+  gradientClass: string
+}
+
+type TocHeading = {
+  depth: number
+  slug: string
+  text: string
+}
+
+const DOC_SECTIONS: DocSection[] = [
+  {
+    title: 'Getting Started',
+    icon: 'i-tabler-north-star',
+    links: [
+      { label: 'Overview', href: '/docs/getting-started/overview' },
+      { label: 'Quick Start', href: '/docs/getting-started/quick-start' },
+    ],
+    gradientClass: 'bg-linear-to-br from-emerald-700 to-teal-400',
+  },
+  {
+    title: 'Materials',
+    icon: 'i-tabler-square-rotated',
+    links: [
+      { label: 'Routing', href: '/docs/materials/routing' },
+      { label: 'Signal', href: '/docs/materials/signal' },
+      { label: 'Atom', href: '/docs/materials/atom' },
+      { label: 'Lifecycle', href: '/docs/materials/lifecycle' },
+      { label: 'Loader', href: '/docs/materials/loader' },
+      { label: 'Action', href: '/docs/materials/action' },
+    ],
+    gradientClass: 'bg-linear-to-br from-blue-700 to-cyan-400',
+  },
+  {
+    title: 'Integrations',
+    icon: 'i-tabler-plug-connected',
+    links: [
+      { label: 'Motion', href: '/docs/integrations/motion' },
+      { label: 'Ox Content', href: '/docs/integrations/content' },
+    ],
+    gradientClass: 'bg-linear-to-br from-purple-700 to-pink-400',
+  },
+  {
+    title: 'Native',
+    icon: 'i-tabler-device-mobile-code',
+    links: [
+      { label: 'Overview', href: '/docs/native/overview' },
+      { label: 'Android', href: '/docs/native/android' },
+    ],
+    gradientClass: 'bg-linear-to-br from-amber-700 to-orange-400',
+  },
+]
+
+const useDocPage = loader(async (c) => {
+  try {
+    return await getDocPage(c.req.param('slug'))
+  } catch {
+    return null
+  }
+})
+
+const Dir = (props: {
+  activeHref: string
+  links: { href: string; label: string }[]
+  title: string
+  icon: string
+  gradientClass: string
+  onLinkClick?: () => void
+}) => {
+  const { activeHref, icon, links, title, onLinkClick } = props
+  const open = useSignal(true)
+  const handleLinkClick = () => {
+    onLinkClick?.()
+  }
+
+  return (
+    <div>
+      <button
+        type="button"
+        aria-expanded={open.value}
+        class="mb-1 flex min-h-8 w-full cursor-pointer items-center gap-2 rounded-xl py-1 transition-colors hover:bg-[color:var(--docs-panel-hover)] active:bg-[color:var(--docs-panel-hover)]"
+        onClick={() => {
+          open.value = !open.value
+        }}
+      >
+        <div class={`${props.gradientClass} rounded-lg p-1`}>
+          <div class={`${icon} text-white`} />
+        </div>
+        <div class="text-[color:var(--docs-text)] text-base font-medium">{title}</div>
+        <div class="grow" />
+        <motion.div
+          class="i-tabler-chevron-down"
+          initial={false}
+          animate={{
+            rotate: open.value ? 0 : -90,
+          }}
+          transition={{
+            duration: 0.2,
+          }}
+        />
+      </button>
+      <motion.div
+        class="overflow-hidden"
+        initial={false}
+        animate={{
+          maxHeight: open.value ? links.length * 32 : 0,
+          opacity: open.value ? 1 : 0,
+          y: open.value ? 0 : -4,
+        }}
+        transition={{
+          duration: 0.2,
+        }}
+      >
+        {links.map((link) =>
+          onLinkClick ? (
+            <Link
+              key={link.href}
+              href={link.href}
+              class={clsx(
+                'flex h-8 items-center rounded-lg transition-colors',
+                activeHref === link.href
+                  ? 'bg-[color:var(--docs-accent-bg)] text-[color:var(--docs-accent-fg)]'
+                  : 'hover:bg-[color:var(--docs-accent-bg-soft)] text-[color:var(--docs-text-muted)]',
+              )}
+              onClick={handleLinkClick}
+            >
+              <div
+                class={clsx(
+                  'h-full w-px bg-[color:var(--docs-border-strong)] transition-all',
+                  activeHref === link.href ? 'scale-y-60 bg-[color:var(--docs-accent-line)]' : '',
+                )}
+              ></div>
+              <div class="pl-4 py-1 text-sm">{link.label}</div>
+            </Link>
+          ) : (
+            <Link
+              key={link.href}
+              href={link.href}
+              class={clsx(
+                'flex h-8 items-center rounded-lg transition-colors',
+                activeHref === link.href
+                  ? 'bg-[color:var(--docs-accent-bg)] text-[color:var(--docs-accent-fg)]'
+                  : 'hover:bg-[color:var(--docs-accent-bg-soft)] text-[color:var(--docs-text-muted)]',
+              )}
+            >
+              <div
+                class={clsx(
+                  'h-full w-px bg-[color:var(--docs-border-strong)] transition-all',
+                  activeHref === link.href ? 'scale-y-60 bg-[color:var(--docs-accent-line)]' : '',
+                )}
+              ></div>
+              <div class="pl-4 py-1 text-sm">{link.label}</div>
+            </Link>
+          ),
+        )}
+      </motion.div>
+    </div>
+  )
+}
+
+const OnThisPageNav = (props: {
+  headings: TocHeading[]
+  titleClass?: string
+  wrapperClass?: string
+}) => {
+  const { headings, titleClass, wrapperClass } = props
+
+  return (
+    <div class={clsx('flex flex-col gap-4', wrapperClass)}>
+      <div
+        class={clsx(
+          'flex items-center gap-2 text-sm font-semibold uppercase tracking-[0.2em] text-[color:var(--docs-text-soft)]',
+          titleClass,
+        )}
+      >
+        <div class="i-tabler-list-details text-base" />
+        <span>On this page</span>
+      </div>
+
+      <div class="flex flex-col gap-1.5">
+        {headings.map((heading) => (
+          <OnThisPageLink key={heading.slug} heading={heading} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+const OnThisPageLink = (props: { heading: TocHeading }) => {
+  const { heading } = props
+  const jumpToHeading = (slug: string) => {
+    if (typeof document === 'undefined') return
+    const target = document.getElementById(slug)
+    if (!(target instanceof HTMLElement)) return
+    target.scrollIntoView({
+      behavior: 'smooth',
+      block: 'start',
+    })
+    history.replaceState(null, '', `#${slug}`)
+  }
+
+  return (
+    <a
+      class={clsx(
+        'rounded-xl px-3 py-2 text-sm leading-5 text-[color:var(--docs-text-muted)] transition-colors hover:bg-[color:var(--docs-panel-hover)] hover:text-[color:var(--docs-text)]',
+        heading.depth > 2 ? 'ml-4 text-[13px] text-[color:var(--docs-text-soft)]' : '',
+      )}
+      href={`#${heading.slug}`}
+      onClick={(event) => {
+        event.preventDefault()
+        jumpToHeading(heading.slug)
+      }}
+    >
+      {heading.text}
+    </a>
+  )
+}
+
+export default function DocsLayout(props: { children: JSX.Childable }) {
+  const loc = useLocation()
+  const page = useDocPage()
+  const mobileNavOpen = useSignal(false)
+  const currentDocLabel =
+    DOC_SECTIONS.flatMap((section) => section.links).find((link) => link.href === loc.pathname)
+      ?.label ?? 'Browse Docs'
+  const tocHeadings = (page.data?.headings ?? []).filter(
+    (heading) => heading.depth > 1 && heading.depth <= 3,
+  )
+
+  const blurActiveElement = () => {
+    if (typeof document === 'undefined') return
+    if (!(document.activeElement instanceof HTMLElement)) return
+    document.activeElement.blur()
+  }
+
+  const closeMobileNav = () => {
+    blurActiveElement()
+    mobileNavOpen.value = false
+  }
+
+  return (
+    <div class="flex w-full flex-col px-4 pb-12 pt-0 sm:px-6 md:pt-18 lg:flex-row lg:items-start lg:px-8">
+      <div class="-mx-4 sticky top-0 z-[60] border-y border-[color:var(--docs-border)] bg-[color:var(--docs-nav-bg)] text-[color:var(--docs-text)] backdrop-blur sm:-mx-6 lg:hidden">
+        <div class="flex items-center justify-between px-4 py-3 sm:px-6">
+          <button
+            aria-controls="docs-mobile-drawer"
+            aria-expanded={mobileNavOpen.value}
+            class="flex items-center gap-3 text-sm font-semibold"
+            data-testid="docs-mobile-nav-toggle"
+            type="button"
+            onClick={() => {
+              mobileNavOpen.value = !mobileNavOpen.value
+            }}
+          >
+            <div class="i-tabler-menu-2 text-base" />
+            <span>Menu</span>
+          </button>
+
+          <div class="truncate text-sm font-medium text-[color:var(--docs-text-muted)]">
+            {currentDocLabel}
+          </div>
+        </div>
+      </div>
+
+      <div
+        class={clsx(
+          'fixed inset-0 z-[60] transition-opacity lg:hidden',
+          mobileNavOpen.value ? '' : 'pointer-events-none',
+        )}
+        id="docs-mobile-drawer-shell"
+      >
+        <button
+          class={clsx(
+            'absolute inset-0 bg-black/45 transition-opacity',
+            mobileNavOpen.value ? 'opacity-100' : 'opacity-0',
+          )}
+          type="button"
+          onClick={closeMobileNav}
+        />
+
+        <motion.aside
+          aria-label="Docs navigation"
+          class="absolute inset-y-0 left-0 flex w-[82vw] max-w-sm flex-col overflow-y-auto border-r border-[color:var(--docs-border)] bg-[color:var(--docs-panel)] px-4 pb-8 pt-6 text-[color:var(--docs-text-muted)] shadow-[24px_0_80px_rgba(15,23,42,0.16)] sm:px-5"
+          id="docs-mobile-drawer"
+          initial={false}
+          animate={{
+            opacity: mobileNavOpen.value ? 1 : 0,
+            x: mobileNavOpen.value ? 0 : -36,
+          }}
+          transition={{
+            duration: 0.24,
+          }}
+        >
+          <div class="mb-4 flex items-center justify-between border-b border-[color:var(--docs-border)] pb-4">
+            <div>
+              <div class="text-[11px] font-bold uppercase tracking-[0.24em] text-[color:var(--docs-text-soft)]">
+                Docs
+              </div>
+              <div class="mt-1 text-lg font-semibold text-[color:var(--docs-text)]">
+                {currentDocLabel}
+              </div>
+            </div>
+            <button
+              aria-label="Close docs navigation"
+              class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-[color:var(--docs-border)] text-[color:var(--docs-text)] transition-colors hover:bg-[color:var(--docs-panel-hover)]"
+              type="button"
+              onClick={closeMobileNav}
+            >
+              <div class="i-tabler-x text-lg" />
+            </button>
+          </div>
+
+          <div class="flex flex-col gap-4 text-[color:var(--docs-text-muted)]">
+            {DOC_SECTIONS.map((section) => (
+              <Dir
+                key={section.title}
+                activeHref={loc.pathname}
+                icon={section.icon}
+                links={[...section.links]}
+                title={section.title}
+                gradientClass={section.gradientClass}
+                onLinkClick={closeMobileNav}
+              />
+            ))}
+          </div>
+        </motion.aside>
+      </div>
+
+      <div class="hidden text-[color:var(--docs-text-muted)] lg:sticky lg:top-22 lg:flex lg:w-72 lg:shrink-0 lg:self-start lg:flex-col lg:gap-4 lg:px-2 lg:py-6">
+        {DOC_SECTIONS.map((section) => (
+          <Dir
+            key={section.title}
+            activeHref={loc.pathname}
+            icon={section.icon}
+            links={[...section.links]}
+            title={section.title}
+            gradientClass={section.gradientClass}
+          />
+        ))}
+      </div>
+
+      <div class="min-w-0 flex-1 pt-6 lg:px-8">
+        <div class="mx-auto max-w-2xl">{props.children}</div>
+      </div>
+
+      <aside class="hidden lg:sticky lg:top-22 lg:flex lg:w-64 lg:shrink-0 lg:self-start lg:justify-end lg:py-6">
+        <OnThisPageNav headings={tocHeadings} wrapperClass="w-full max-w-56" />
+      </aside>
+    </div>
+  )
+}
diff --git a/docs/app/docs/[...slug]/+page.tsx b/docs/app/docs/[...slug]/+page.tsx
new file mode 100644
index 0000000..c7a239c
--- /dev/null
+++ b/docs/app/docs/[...slug]/+page.tsx
@@ -0,0 +1,18 @@
+import { Content } from '@eclipsa/content'
+import { loader, type GetStaticPaths, type MetadataContext } from 'eclipsa'
+import { getDocPage, getDocsStaticPaths } from '../content.ts'
+
+export const metadata = ({ url }: MetadataContext) => ({
+  canonical: url.pathname,
+  title: 'Docs',
+})
+
+export const getStaticPaths: GetStaticPaths = getDocsStaticPaths
+
+const useDocsPage = loader((c) => getDocPage(c.req.param('slug')))
+
+export default () => {
+  const page = useDocsPage()
+
+  return <Content as="div" class="markdown-content" html={page.data?.html ?? ''} />
+}
diff --git a/docs/app/docs/content.ts b/docs/app/docs/content.ts
new file mode 100644
index 0000000..a29aaad
--- /dev/null
+++ b/docs/app/docs/content.ts
@@ -0,0 +1,73 @@
+import { getCollection, getEntry, render, type ContentHeading } from '@eclipsa/content'
+import { notFound, type GetStaticPaths } from 'eclipsa'
+import { docs } from '../content.config.ts'
+
+const normalizeSlugParam = (slug: string | string[] | undefined) => {
+  if (Array.isArray(slug)) {
+    return slug.join('/')
+  }
+  return typeof slug === 'string' ? slug : ''
+}
+
+export const getDocsStaticPaths: GetStaticPaths = async () => {
+  const entries = await getCollection(docs)
+  return entries.map((entry) => ({
+    params: {
+      slug: entry.id.split('/'),
+    },
+  }))
+}
+
+export const getFirstDocHref = async () => {
+  const entries = await getCollection(docs)
+  const entry =
+    entries.find(
+      (candidate) => candidate.id.endsWith('/overview') || candidate.id === 'overview',
+    ) ?? entries[0]
+  if (!entry) {
+    throw new Error('Expected at least one docs markdown entry.')
+  }
+  return `/docs/${entry.id}`
+}
+
+const attachHeadingIds = (html: string, headings: ContentHeading[]) => {
+  let headingIndex = 0
+
+  return html.replace(/<h([1-6])([^>]*)>/g, (match, depth, attrs) => {
+    const heading = headings[headingIndex]
+    if (!heading || heading.depth !== Number(depth)) {
+      return match
+    }
+    headingIndex += 1
+
+    if (/\sid=/.test(attrs)) {
+      return match
+    }
+
+    return `<h${depth}${attrs} id="${heading.slug}">`
+  })
+}
+
+export const getDocPage = async (slug: string | string[] | undefined) => {
+  const id = normalizeSlugParam(slug)
+  if (id === '') {
+    return notFound()
+  }
+
+  const entry = await getEntry(docs, id)
+  if (!entry) {
+    return notFound()
+  }
+
+  const rendered = await render(entry)
+  const html = attachHeadingIds(rendered.html, rendered.headings)
+  return {
+    description:
+      typeof entry.data.description === 'string'
+        ? entry.data.description
+        : 'Markdown rendered with @eclipsa/content.',
+    headings: rendered.headings,
+    html,
+    title: typeof entry.data.title === 'string' ? entry.data.title : entry.id,
+  }
+}
diff --git a/docs/app/landing-scene-shields.test.ts b/docs/app/landing-scene-shields.test.ts
new file mode 100644
index 0000000..a283064
--- /dev/null
+++ b/docs/app/landing-scene-shields.test.ts
@@ -0,0 +1,49 @@
+import { describe, expect, it } from 'vitest'
+import { getRainShieldCollision, getUmbrellaRainShield } from './landing-scene-shields.ts'
+
+describe('landing scene shields', () => {
+  it('creates an umbrella ellipse in screen space once the umbrella opens', () => {
+    const shield = getUmbrellaRainShield({
+      height: 900,
+      open: 0.75,
+      viewport: {
+        side: 400,
+        x: 520,
+        y: 180,
+      },
+    })
+
+    expect(shield).toEqual({
+      kind: 'ellipse',
+      onlyAbove: true,
+      radiusX: 106,
+      radiusY: 33,
+      repelXForce: 16,
+      repelYForce: 1.25,
+      x: 720,
+      y: 438,
+    })
+  })
+
+  it('ignores rain below the umbrella canopy but repels drops above it', () => {
+    const shield = getUmbrellaRainShield({
+      height: 900,
+      open: 1,
+      viewport: {
+        side: 400,
+        x: 520,
+        y: 180,
+      },
+    })
+
+    expect(shield).not.toBeNull()
+    expect(getRainShieldCollision(720, 510, shield!)).toBeNull()
+    expect(getRainShieldCollision(720, 420, shield!)).toEqual({
+      force: 0.7,
+      normalLength: 0.3,
+      normalX: 0,
+      repelXForce: 16,
+      repelYForce: 1.25,
+    })
+  })
+})
diff --git a/docs/app/landing-scene-shields.ts b/docs/app/landing-scene-shields.ts
new file mode 100644
index 0000000..67eedb2
--- /dev/null
+++ b/docs/app/landing-scene-shields.ts
@@ -0,0 +1,141 @@
+export interface RainShieldCollision {
+  force: number
+  normalLength: number
+  normalX: number
+  repelXForce: number
+  repelYForce: number
+}
+
+interface RainShieldBase {
+  onlyAbove?: boolean
+  repelXForce: number
+  repelYForce: number
+  x: number
+  y: number
+}
+
+export interface CircleRainShield extends RainShieldBase {
+  kind: 'circle'
+  radius: number
+}
+
+export interface EllipseRainShield extends RainShieldBase {
+  kind: 'ellipse'
+  radiusX: number
+  radiusY: number
+}
+
+export type RainShield = CircleRainShield | EllipseRainShield
+
+export interface UmbrellaRainShieldInput {
+  height: number
+  open: number
+  viewport: {
+    side: number
+    x: number
+    y: number
+  }
+}
+
+const UMBRELLA_OPEN_THRESHOLD = 0.05
+const UMBRELLA_REPEL_X_FORCE = 16
+const UMBRELLA_REPEL_Y_FORCE = 1.25
+
+const clamp01 = (value: number) => Math.min(1, Math.max(0, value))
+
+const getCircleRainShieldCollision = (
+  x: number,
+  y: number,
+  shield: CircleRainShield,
+): RainShieldCollision | null => {
+  const dx = x - shield.x
+  const dy = y - shield.y
+
+  if (shield.onlyAbove && dy >= 0) {
+    return null
+  }
+
+  const distance = Math.sqrt(dx * dx + dy * dy)
+  if (distance <= 0 || distance >= shield.radius) {
+    return null
+  }
+
+  return {
+    force: (shield.radius - distance) / shield.radius,
+    normalLength: distance,
+    normalX: dx,
+    repelXForce: shield.repelXForce,
+    repelYForce: shield.repelYForce,
+  }
+}
+
+const getEllipseRainShieldCollision = (
+  x: number,
+  y: number,
+  shield: EllipseRainShield,
+): RainShieldCollision | null => {
+  const dx = x - shield.x
+  const dy = y - shield.y
+
+  if (shield.onlyAbove && dy >= 0) {
+    return null
+  }
+
+  const normalizedX = dx / shield.radiusX
+  const normalizedY = dy / shield.radiusY
+  const normalizedDistance = Math.sqrt(normalizedX * normalizedX + normalizedY * normalizedY)
+
+  if (normalizedDistance <= 0 || normalizedDistance >= 1) {
+    return null
+  }
+
+  return {
+    force: 1 - normalizedDistance,
+    normalLength: normalizedDistance,
+    normalX: normalizedX,
+    repelXForce: shield.repelXForce,
+    repelYForce: shield.repelYForce,
+  }
+}
+
+export const getRainShieldCollision = (
+  x: number,
+  y: number,
+  shield: RainShield,
+): RainShieldCollision | null =>
+  shield.kind === 'circle'
+    ? getCircleRainShieldCollision(x, y, shield)
+    : getEllipseRainShieldCollision(x, y, shield)
+
+export const getUmbrellaRainShield = ({
+  height,
+  open,
+  viewport,
+}: UmbrellaRainShieldInput): EllipseRainShield | null => {
+  if (
+    !Number.isFinite(height) ||
+    height <= 0 ||
+    !Number.isFinite(viewport.side) ||
+    viewport.side <= 0
+  ) {
+    return null
+  }
+
+  const normalizedOpen = clamp01(open)
+  if (normalizedOpen < UMBRELLA_OPEN_THRESHOLD) {
+    return null
+  }
+
+  const viewportTop = height - viewport.y - viewport.side
+
+  return {
+    kind: 'ellipse',
+    onlyAbove: true,
+    radiusX: viewport.side * (0.1 + normalizedOpen * 0.22),
+    radiusY: viewport.side * (0.03 + normalizedOpen * 0.07),
+    repelXForce: UMBRELLA_REPEL_X_FORCE,
+    repelYForce: UMBRELLA_REPEL_Y_FORCE,
+    x: viewport.x + viewport.side * 0.5,
+    y: viewportTop + viewport.side * (0.34 - normalizedOpen * 0.06),
+  }
+}
diff --git a/docs/app/landing-scene.test.ts b/docs/app/landing-scene.test.ts
index afe072d..b7ac4a8 100644
--- a/docs/app/landing-scene.test.ts
+++ b/docs/app/landing-scene.test.ts
@@ -1,166 +1,74 @@
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-const lifecycle = vi.hoisted(() => ({
-  cleanupCallbacks: [] as Array<() => void>,
-}))
-
-vi.mock('eclipsa', () => ({
-  onCleanup(callback: () => void) {
-    lifecycle.cleanupCallbacks.push(callback)
-  },
-}))
-
-import { setupLandingScene } from './landing-scene.ts'
-
-class FakeEventTarget {
-  listeners = new Map<string, Set<EventListenerOrEventListenerObject>>()
-
-  addEventListener = vi.fn((type: string, listener: EventListenerOrEventListenerObject) => {
-    if (!this.listeners.has(type)) {
-      this.listeners.set(type, new Set())
-    }
-
-    this.listeners.get(type)?.add(listener)
-  })
-
-  removeEventListener = vi.fn((type: string, listener: EventListenerOrEventListenerObject) => {
-    this.listeners.get(type)?.delete(listener)
+import { describe, expect, it } from 'vitest'
+import {
+  MODEL_ROTATION_OFFSET,
+  getRainDropCount,
+  resizeRainDropStates,
+  resolveUmbrellaRotation,
+  resolveUmbrellaSize,
+} from './landing-scene.ts'
+
+describe('landing scene', () => {
+  it('applies the model rotation offset so authored rotations can stay relative', () => {
+    expect(MODEL_ROTATION_OFFSET).toEqual({
+      x: 90,
+      y: 0,
+      z: 0,
+    })
+    expect(
+      resolveUmbrellaRotation({
+        x: 0,
+        y: 45,
+        z: -10,
+      }),
+    ).toEqual({
+      x: 90,
+      y: 45,
+      z: -10,
+    })
   })
 
-  emit(type: string, event: object) {
-    for (const listener of this.listeners.get(type) ?? []) {
-      if (typeof listener === 'function') {
-        listener(event as Event)
-        continue
-      }
-
-      listener.handleEvent(event as Event)
-    }
-  }
-}
-
-const createCanvas = () => {
-  const drawCalls = {
-    lineTo: [] as Array<[number, number]>,
-    moveTo: [] as Array<[number, number]>,
-  }
-
-  const context = {
-    beginPath() {},
-    moveTo(x: number, y: number) {
-      drawCalls.moveTo.push([x, y])
-    },
-    lineTo(x: number, y: number) {
-      drawCalls.lineTo.push([x, y])
-    },
-    stroke() {},
-    fillRect() {},
-    fillStyle: '',
-    strokeStyle: '',
-    lineWidth: 0,
-    lineCap: 'round',
-  } as unknown as CanvasRenderingContext2D
-
-  const canvas = {
-    width: 0,
-    height: 0,
-    getContext: vi.fn(() => context),
-  } as unknown as HTMLCanvasElement
-
-  return { canvas, drawCalls }
-}
-
-const stubDom = (options: { pointerEvents: boolean }) => {
-  const windowTarget = new FakeEventTarget()
-  const documentTarget = new FakeEventTarget()
-  let animationFrame: FrameRequestCallback | undefined
-
-  const fakeWindow = Object.assign(windowTarget, {
-    innerWidth: 375,
-    innerHeight: 667,
-    requestAnimationFrame: vi.fn((callback: FrameRequestCallback) => {
-      animationFrame = callback
-      return 1
-    }),
-    cancelAnimationFrame: vi.fn(),
-    ...(options.pointerEvents ? { PointerEvent: class FakePointerEvent {} } : {}),
+  it('resolves normalized umbrella size against the larger viewport dimension', () => {
+    expect(resolveUmbrellaSize(1200, 800, null, 0.5)).toBe(600)
+    expect(resolveUmbrellaSize(800, 1200, null, 0.5)).toBe(600)
   })
 
-  vi.stubGlobal('window', fakeWindow)
-  vi.stubGlobal('document', documentTarget)
-
-  return {
-    documentTarget,
-    runFrame() {
-      animationFrame?.(0)
-    },
-  }
-}
-
-describe('setupLandingScene', () => {
-  beforeEach(() => {
-    lifecycle.cleanupCallbacks.length = 0
-    vi.restoreAllMocks()
-    vi.unstubAllGlobals()
+  it('falls back to explicit size when normalized size is not usable', () => {
+    expect(resolveUmbrellaSize(1200, 800, 320, null)).toBe(320)
+    expect(resolveUmbrellaSize(1200, 800, 320, 0)).toBe(320)
   })
 
-  it('uses the closest active touch pointer when multiple touch pointers are down', () => {
-    vi.spyOn(Math, 'random').mockReturnValue(0.5)
-
-    const { canvas, drawCalls } = createCanvas()
-    const { documentTarget, runFrame } = stubDom({ pointerEvents: true })
-
-    setupLandingScene({ canvas })
-
-    documentTarget.emit('pointerdown', {
-      clientX: 0,
-      clientY: 0,
-      pointerId: 1,
-      pointerType: 'touch',
-    })
-    documentTarget.emit('pointerdown', {
-      clientX: 197.5,
-      clientY: 356.625,
-      pointerId: 2,
-      pointerType: 'touch',
-    })
-
-    runFrame()
-
-    expect(drawCalls.lineTo[0]?.[0]).toBeGreaterThan(drawCalls.moveTo[0]?.[0] ?? 0)
-    expect(documentTarget.addEventListener).toHaveBeenCalledWith(
-      'pointerup',
-      expect.any(Function),
-      expect.objectContaining({ passive: true }),
-    )
+  it('rescales rain drops to the new viewport instead of resetting their progress on resize', () => {
+    expect(
+      resizeRainDropStates(
+        [
+          {
+            alpha: 0.3,
+            len: 24,
+            speed: 18,
+            vx: 4,
+            x: 900,
+            y: 300,
+            z: 1.2,
+          },
+        ],
+        { height: 600, width: 1200 },
+        { height: 900, width: 600 },
+      ),
+    ).toEqual([
+      {
+        alpha: 0.3,
+        len: 24,
+        speed: 18,
+        vx: 4,
+        x: 450,
+        y: 450,
+        z: 1.2,
+      },
+    ])
   })
 
-  it('falls back to all active touches when pointer events are unavailable', () => {
-    vi.spyOn(Math, 'random').mockReturnValue(0.5)
-
-    const { canvas, drawCalls } = createCanvas()
-    const { documentTarget, runFrame } = stubDom({ pointerEvents: false })
-
-    setupLandingScene({ canvas })
-
-    documentTarget.emit('touchmove', {
-      changedTouches: [
-        { clientX: 0, clientY: 0 },
-        { clientX: 197.5, clientY: 356.625 },
-      ],
-      touches: [
-        { clientX: 0, clientY: 0 },
-        { clientX: 197.5, clientY: 356.625 },
-      ],
-    })
-
-    runFrame()
-
-    expect(drawCalls.lineTo[0]?.[0]).toBeGreaterThan(drawCalls.moveTo[0]?.[0] ?? 0)
-    expect(documentTarget.addEventListener).toHaveBeenCalledWith(
-      'touchend',
-      expect.any(Function),
-      expect.objectContaining({ passive: true }),
-    )
+  it('switches rain density when the viewport crosses the mobile breakpoint', () => {
+    expect(getRainDropCount(767)).toBe(50)
+    expect(getRainDropCount(768)).toBe(150)
   })
 })
diff --git a/docs/app/landing-scene.ts b/docs/app/landing-scene.ts
index 87c6ba1..51151f2 100644
--- a/docs/app/landing-scene.ts
+++ b/docs/app/landing-scene.ts
@@ -1,37 +1,347 @@
-import { onCleanup } from 'eclipsa'
-
-const SHIELD_RADIUS = 100
-const MOBILE_DROP_COUNT = 50
-const DESKTOP_DROP_COUNT = 100
+import {
+  AmbientLight,
+  AnimationAction,
+  AnimationMixer,
+  Box3,
+  CanvasTexture,
+  Clock,
+  DirectionalLight,
+  Group,
+  Mesh,
+  MeshBasicMaterial,
+  NearestFilter,
+  OrthographicCamera,
+  PerspectiveCamera,
+  PlaneGeometry,
+  Scene,
+  SRGBColorSpace,
+  LoopOnce,
+  Vector3,
+  WebGLRenderer,
+} from 'three'
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
+import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js'
+import {
+  getRainShieldCollision,
+  getUmbrellaRainShield,
+  type RainShield,
+} from './landing-scene-shields.ts'
+
+const DROP_ALPHA_MIN = 0.1
+const DROP_ALPHA_RANGE = 0.4
+const DROP_LENGTH_MIN = 20
+const DROP_LENGTH_RANGE = 20
+const DROP_LINE_WIDTH = 2
+const DROP_RESET_Y_RANGE = 100
+const DROP_SPEED_MIN = 10
+const DROP_SPEED_RANGE = 15
+const DROP_VX_DAMPING = 0.95
+const DROP_Z_MIN = 0.5
+const DROP_Z_RANGE = 0.5
 const MOBILE_BREAKPOINT = 768
+const MOBILE_DROP_COUNT = 50
+const DESKTOP_DROP_COUNT = 150
+const MODEL_CAMERA_DISTANCE_MULTIPLIER = 1.45
+const MODEL_ROTATION_SPEED = 0.006
 const PASSIVE_EVENT_OPTIONS: AddEventListenerOptions = { passive: true }
+const RAIN_COLOR_RGB = '157, 0, 255'
+const SHIELD_RADIUS = 100
+const SHIELD_REPEL_X_FORCE = 20
+const SHIELD_REPEL_Y_FORCE = 0.8
+
+interface ModelViewport {
+  side: number
+  x: number
+  y: number
+}
+
+interface ViewportSize {
+  height: number
+  width: number
+}
+
+export interface RainDropState {
+  alpha: number
+  len: number
+  speed: number
+  vx: number
+  x: number
+  y: number
+  z: number
+}
 
-interface ShieldPoint {
+export interface ShieldPoint {
   x: number
   y: number
 }
 
+export interface NormalizedShieldPoint {
+  x: number
+  y: number
+}
+
+export interface UmbrellaRotation {
+  x: number
+  y: number
+  z: number
+}
+
+export const MODEL_ROTATION_OFFSET: UmbrellaRotation = {
+  x: 90,
+  y: 0,
+  z: 0,
+}
+
 export interface LandingElements {
   canvas: HTMLCanvasElement
 }
 
-export const setupLandingScene = ({ canvas }: LandingElements) => {
-  const initialContext = canvas.getContext('2d')
+export interface LandingSceneController {
+  cleanup: () => void
+  setSize: (size: number | null) => void
+  setSizeNormalized: (size: number | null) => void
+  setUmbrellaAngle: (degrees: number) => void
+  setUmbrellaRotation: (rotation: Partial<UmbrellaRotation>) => void
+  setUmbrellaOpen: (val: number) => void
+  setUmbrellaPosition: (position: ShieldPoint | null) => void
+  setUmbrellaPositionNormalized: (position: NormalizedShieldPoint | null) => void
+}
+
+const toRadians = (degrees: number) => (degrees * Math.PI) / 180
+
+export const resolveUmbrellaRotation = (
+  rotation: UmbrellaRotation,
+  offset: UmbrellaRotation = MODEL_ROTATION_OFFSET,
+): UmbrellaRotation => ({
+  x: rotation.x + offset.x,
+  y: rotation.y + offset.y,
+  z: rotation.z + offset.z,
+})
+
+const getDefaultUmbrellaPosition = (width: number, height: number, side: number): ShieldPoint => ({
+  x: width - side / 2,
+  y: height - side / 2,
+})
+
+export const getRainDropCount = (width: number) =>
+  width < MOBILE_BREAKPOINT ? MOBILE_DROP_COUNT : DESKTOP_DROP_COUNT
+
+const scaleRainDropCoordinate = (value: number, previousSize: number, nextSize: number) => {
+  if (!(nextSize > 0) || !Number.isFinite(nextSize)) {
+    return 0
+  }
+
+  if (!(previousSize > 0) || !Number.isFinite(previousSize)) {
+    return value
+  }
+
+  return (value / previousSize) * nextSize
+}
+
+export const resizeRainDropStates = (
+  drops: RainDropState[],
+  previousViewport: ViewportSize,
+  nextViewport: ViewportSize,
+) =>
+  drops.map((drop) => ({
+    ...drop,
+    x: scaleRainDropCoordinate(drop.x, previousViewport.width, nextViewport.width),
+    y: scaleRainDropCoordinate(drop.y, previousViewport.height, nextViewport.height),
+  }))
+
+const resolveUmbrellaPosition = (
+  width: number,
+  height: number,
+  position: ShieldPoint | null,
+  normalizedPosition: NormalizedShieldPoint | null,
+): ShieldPoint | null => {
+  if (normalizedPosition) {
+    return {
+      x: width * normalizedPosition.x,
+      y: height * normalizedPosition.y,
+    }
+  }
+
+  return position
+}
+
+export const resolveUmbrellaSize = (
+  width: number,
+  height: number,
+  size: number | null,
+  normalizedSize: number | null,
+) => {
+  if (typeof normalizedSize === 'number' && Number.isFinite(normalizedSize) && normalizedSize > 0) {
+    return Math.max(width, height) * normalizedSize
+  }
+
+  return size
+}
+
+const getModelViewport = (
+  width: number,
+  height: number,
+  umbrellaPosition: ShieldPoint | null,
+  size: number | null,
+): ModelViewport => {
+  const side =
+    size && Number.isFinite(size) && size > 0
+      ? size
+      : width >= 1024
+        ? 420
+        : width >= 768
+          ? 360
+          : width >= 640
+            ? 280
+            : 220
+  const centeredPosition = umbrellaPosition ?? getDefaultUmbrellaPosition(width, height, side)
+  const left = centeredPosition.x - side / 2
+  const top = centeredPosition.y - side / 2
+
+  return {
+    side,
+    x: left,
+    y: height - top - side,
+  }
+}
+
+export const setupLandingScene = ({ canvas }: LandingElements): LandingSceneController => {
+  const drawingCanvas = document.createElement('canvas')
+  const initialContext = drawingCanvas.getContext('2d')
   if (!initialContext) {
-    return
+    return {
+      cleanup: () => {},
+      setSize: () => {},
+      setSizeNormalized: () => {},
+      setUmbrellaAngle: () => {},
+      setUmbrellaRotation: () => {},
+      setUmbrellaOpen: () => {},
+      setUmbrellaPosition: () => {},
+      setUmbrellaPositionNormalized: () => {},
+    }
   }
   const drawingContext: CanvasRenderingContext2D = initialContext
 
+  let renderer: WebGLRenderer
+
+  try {
+    renderer = new WebGLRenderer({
+      alpha: true,
+      antialias: true,
+      canvas,
+      powerPreference: 'high-performance',
+    })
+  } catch {
+    return {
+      cleanup: () => {},
+      setSize: () => {},
+      setSizeNormalized: () => {},
+      setUmbrellaAngle: () => {},
+      setUmbrellaRotation: () => {},
+      setUmbrellaOpen: () => {},
+      setUmbrellaPosition: () => {},
+      setUmbrellaPositionNormalized: () => {},
+    }
+  }
+
+  renderer.autoClear = false
+  renderer.outputColorSpace = SRGBColorSpace
+
+  const rainScene = new Scene()
+  const rainCamera = new OrthographicCamera(-1, 1, 1, -1, 0.1, 10)
+  rainCamera.position.z = 2
+
+  const texture = new CanvasTexture(drawingCanvas)
+  texture.generateMipmaps = false
+  texture.magFilter = NearestFilter
+  texture.minFilter = NearestFilter
+
+  const planeGeometry = new PlaneGeometry(1, 1)
+  const planeMaterial = new MeshBasicMaterial({
+    depthTest: false,
+    depthWrite: false,
+    map: texture,
+    transparent: true,
+  })
+  const plane = new Mesh(planeGeometry, planeMaterial)
+  rainScene.add(plane)
+
+  const modelScene = new Scene()
+  const modelCamera = new PerspectiveCamera(30, 1, 0.1, 100)
+  const ambientLight = new AmbientLight(0xffffff, 1.8)
+  const keyLight = new DirectionalLight(0xffffff, 1.6)
+  keyLight.position.set(3, 4, 5)
+  const rimLight = new DirectionalLight(0x9d00ff, 1.3)
+  rimLight.position.set(-4, 2, -3)
+  modelScene.add(ambientLight, keyLight, rimLight)
+
+  const modelPivot = new Group()
+  modelScene.add(modelPivot)
+
+  const loader = new GLTFLoader()
+  loader.setMeshoptDecoder(MeshoptDecoder)
+  const modelUrl = new URL('../assets/output.glb', import.meta.url).href
+  const clock = new Clock()
+
   let shieldPoints: ShieldPoint[] = [
     {
       x: window.innerWidth / 2,
       y: window.innerHeight / 2,
     },
   ]
+  let rainShields: RainShield[] = []
   let width = 0
   let height = 0
-  let animationFrame = 0
-  const activeTouchPointers = new Map<number, ShieldPoint>()
+  let pendingSize: number | null = null
+  let pendingSizeNormalized: number | null = null
+  let pendingUmbrellaPosition: ShieldPoint | null = null
+  let pendingUmbrellaPositionNormalized: NormalizedShieldPoint | null = null
+  let modelViewport = getModelViewport(
+    window.innerWidth,
+    window.innerHeight,
+    resolveUmbrellaPosition(
+      window.innerWidth,
+      window.innerHeight,
+      pendingUmbrellaPosition,
+      pendingUmbrellaPositionNormalized,
+    ),
+    resolveUmbrellaSize(window.innerWidth, window.innerHeight, pendingSize, pendingSizeNormalized),
+  )
+  let activeTouchPointers = new Map<number, ShieldPoint>()
+  let disposed = false
+  let umbrellaAction: AnimationAction | null = null
+  let mixer: AnimationMixer | null = null
+  let modelReady = false
+  let autoRotationY = 0
+  let pendingUmbrellaRotation: UmbrellaRotation = {
+    x: 0,
+    y: 0,
+    z: 0,
+  }
+  let pendingUmbrellaOpen = 0
+
+  const syncRainShields = () => {
+    const nextRainShields: RainShield[] = shieldPoints.map((point) => ({
+      kind: 'circle',
+      onlyAbove: true,
+      radius: SHIELD_RADIUS,
+      repelXForce: SHIELD_REPEL_X_FORCE,
+      repelYForce: SHIELD_REPEL_Y_FORCE,
+      x: point.x,
+      y: point.y,
+    }))
+    const umbrellaShield = getUmbrellaRainShield({
+      height,
+      open: pendingUmbrellaOpen,
+      viewport: modelViewport,
+    })
+
+    if (umbrellaShield) {
+      nextRainShields.push(umbrellaShield)
+    }
+
+    rainShields = nextRainShields
+  }
 
   class RainDrop {
     x = 0
@@ -39,51 +349,60 @@ export const setupLandingScene = ({ canvas }: LandingElements) => {
     z = 1
     len = 0
     speed = 0
-    color = ''
+    alpha = 0
     vx = 0
 
-    constructor() {
+    constructor(state?: RainDropState) {
+      if (state) {
+        this.alpha = state.alpha
+        this.len = state.len
+        this.speed = state.speed
+        this.vx = state.vx
+        this.x = state.x
+        this.y = state.y
+        this.z = state.z
+        return
+      }
+
       this.reset()
       this.y = Math.random() * height
     }
 
     reset() {
       this.x = Math.random() * width
-      this.y = -Math.random() * 100
-      this.z = Math.random() * 0.5 + 0.5
-      this.len = Math.random() * 20 + 10
-      this.speed = (Math.random() * 15 + 10) * this.z
-      this.color = `rgba(157, 0, 255, ${Math.random() * 0.4 + 0.1})`
+      this.y = -Math.random() * DROP_RESET_Y_RANGE
+      this.z = Math.random() * DROP_Z_RANGE + DROP_Z_MIN
+      this.len = Math.random() * DROP_LENGTH_RANGE + DROP_LENGTH_MIN
+      this.speed = (Math.random() * DROP_SPEED_RANGE + DROP_SPEED_MIN) * this.z
+      this.alpha = Math.random() * DROP_ALPHA_RANGE + DROP_ALPHA_MIN
       this.vx = 0
     }
 
     update() {
       this.y += this.speed
       this.x += this.vx
-      this.vx *= 0.95
+      this.vx *= DROP_VX_DAMPING
 
       let strongestForce = 0
-      let strongestDx = 0
-      let strongestDistance = 0
-
-      for (const shieldPoint of shieldPoints) {
-        const dx = this.x - shieldPoint.x
-        const dy = this.y - shieldPoint.y
-        const distance = Math.sqrt(dx * dx + dy * dy)
-
-        if (distance > 0 && distance < SHIELD_RADIUS && dy < 0) {
-          const force = (SHIELD_RADIUS - distance) / SHIELD_RADIUS
-          if (force > strongestForce) {
-            strongestForce = force
-            strongestDx = dx
-            strongestDistance = distance
-          }
+      let strongestNormalX = 0
+      let strongestNormalLength = 0
+      let strongestRepelXForce = 0
+      let strongestRepelYForce = 0
+
+      for (const rainShield of rainShields) {
+        const collision = getRainShieldCollision(this.x, this.y, rainShield)
+        if (collision && collision.force > strongestForce) {
+          strongestForce = collision.force
+          strongestNormalX = collision.normalX
+          strongestNormalLength = collision.normalLength
+          strongestRepelXForce = collision.repelXForce
+          strongestRepelYForce = collision.repelYForce
         }
       }
 
-      if (strongestForce > 0 && strongestDistance > 0) {
-        this.vx = (strongestDx / strongestDistance) * strongestForce * 20
-        this.y -= this.speed * strongestForce * 0.8
+      if (strongestForce > 0 && strongestNormalLength > 0) {
+        this.vx = (strongestNormalX / strongestNormalLength) * strongestForce * strongestRepelXForce
+        this.y -= this.speed * strongestForce * strongestRepelYForce
       }
 
       if (this.y > height || this.x < 0 || this.x > width) {
@@ -95,31 +414,90 @@ export const setupLandingScene = ({ canvas }: LandingElements) => {
       drawingContext.beginPath()
       drawingContext.moveTo(this.x, this.y)
       drawingContext.lineTo(this.x - this.vx, this.y - this.len)
-      drawingContext.strokeStyle = this.color
-      drawingContext.lineWidth = 1.5 * this.z
+      drawingContext.strokeStyle = `rgba(${RAIN_COLOR_RGB}, ${this.alpha})`
+      drawingContext.lineWidth = DROP_LINE_WIDTH * this.z
       drawingContext.lineCap = 'round'
       drawingContext.stroke()
     }
+
+    toState(): RainDropState {
+      return {
+        alpha: this.alpha,
+        len: this.len,
+        speed: this.speed,
+        vx: this.vx,
+        x: this.x,
+        y: this.y,
+        z: this.z,
+      }
+    }
   }
 
   const drops: RainDrop[] = []
 
-  const repopulateDrops = () => {
+  const syncDropsToViewport = (previousViewport: ViewportSize) => {
+    const resizedStates = resizeRainDropStates(
+      drops.map((drop) => drop.toState()),
+      previousViewport,
+      {
+        height,
+        width,
+      },
+    )
+    const count = getRainDropCount(width)
+    const preservedCount = Math.min(resizedStates.length, count)
+
     drops.length = 0
-    const count = window.innerWidth < MOBILE_BREAKPOINT ? MOBILE_DROP_COUNT : DESKTOP_DROP_COUNT
-    for (let index = 0; index < count; index += 1) {
+    for (let index = 0; index < preservedCount; index += 1) {
+      drops.push(new RainDrop(resizedStates[index]))
+    }
+
+    while (drops.length < count) {
       drops.push(new RainDrop())
     }
   }
 
   const resize = () => {
-    width = canvas.width = window.innerWidth
-    height = canvas.height = window.innerHeight
-    repopulateDrops()
+    const previousViewport = {
+      height,
+      width,
+    }
+
+    width = drawingCanvas.width = window.innerWidth
+    height = drawingCanvas.height = window.innerHeight
+    modelViewport = getModelViewport(
+      width,
+      height,
+      resolveUmbrellaPosition(
+        width,
+        height,
+        pendingUmbrellaPosition,
+        pendingUmbrellaPositionNormalized,
+      ),
+      resolveUmbrellaSize(width, height, pendingSize, pendingSizeNormalized),
+    )
+
+    rainCamera.left = -width / 2
+    rainCamera.right = width / 2
+    rainCamera.top = height / 2
+    rainCamera.bottom = -height / 2
+    rainCamera.updateProjectionMatrix()
+
+    plane.scale.set(width, height, 1)
+
+    renderer.setPixelRatio(1)
+    renderer.setSize(width, height, false)
+    renderer.setViewport(0, 0, width, height)
+    renderer.setScissorTest(false)
+
+    drawingContext.clearRect(0, 0, width, height)
+    syncDropsToViewport(previousViewport)
+    syncRainShields()
   }
 
   const updatePointerPosition = (clientX: number, clientY: number) => {
     shieldPoints = [{ x: clientX, y: clientY }]
+    syncRainShields()
   }
 
   const updateTouchPositions = (touches: ArrayLike<Pick<Touch, 'clientX' | 'clientY'>>) => {
@@ -134,6 +512,7 @@ export const setupLandingScene = ({ canvas }: LandingElements) => {
 
     if (nextShieldPoints.length > 0) {
       shieldPoints = nextShieldPoints
+      syncRainShields()
     }
   }
 
@@ -144,6 +523,7 @@ export const setupLandingScene = ({ canvas }: LandingElements) => {
   const syncActiveTouchPointers = () => {
     if (activeTouchPointers.size > 0) {
       shieldPoints = Array.from(activeTouchPointers.values())
+      syncRainShields()
     }
   }
 
@@ -190,18 +570,190 @@ export const setupLandingScene = ({ canvas }: LandingElements) => {
     handleTouch(event as TouchEvent)
   }
 
+  const applyUmbrellaRotation = (extraYRadians = 0) => {
+    const resolvedRotation = resolveUmbrellaRotation(pendingUmbrellaRotation)
+    modelPivot.rotation.x = toRadians(resolvedRotation.x)
+    modelPivot.rotation.y = toRadians(resolvedRotation.y) + extraYRadians
+    modelPivot.rotation.z = toRadians(resolvedRotation.z)
+  }
+
+  const setUmbrellaRotation = (rotation: Partial<UmbrellaRotation>) => {
+    pendingUmbrellaRotation = {
+      x:
+        typeof rotation.x === 'number' && Number.isFinite(rotation.x)
+          ? rotation.x
+          : pendingUmbrellaRotation.x,
+      y:
+        typeof rotation.y === 'number' && Number.isFinite(rotation.y)
+          ? rotation.y
+          : pendingUmbrellaRotation.y,
+      z:
+        typeof rotation.z === 'number' && Number.isFinite(rotation.z)
+          ? rotation.z
+          : pendingUmbrellaRotation.z,
+    }
+    applyUmbrellaRotation(mixer ? 0 : autoRotationY)
+  }
+
+  const setUmbrellaAngle = (degrees: number) => {
+    setUmbrellaRotation({ z: degrees })
+  }
+
+  const setSize = (size: number | null) => {
+    pendingSize = typeof size === 'number' && Number.isFinite(size) && size > 0 ? size : null
+    pendingSizeNormalized = null
+    modelViewport = getModelViewport(
+      width,
+      height,
+      resolveUmbrellaPosition(
+        width,
+        height,
+        pendingUmbrellaPosition,
+        pendingUmbrellaPositionNormalized,
+      ),
+      resolveUmbrellaSize(width, height, pendingSize, pendingSizeNormalized),
+    )
+    syncRainShields()
+  }
+
+  const setSizeNormalized = (size: number | null) => {
+    pendingSize = null
+    pendingSizeNormalized =
+      typeof size === 'number' && Number.isFinite(size) && size > 0 ? size : null
+    modelViewport = getModelViewport(
+      width,
+      height,
+      resolveUmbrellaPosition(
+        width,
+        height,
+        pendingUmbrellaPosition,
+        pendingUmbrellaPositionNormalized,
+      ),
+      resolveUmbrellaSize(width, height, pendingSize, pendingSizeNormalized),
+    )
+    syncRainShields()
+  }
+
+  const setUmbrellaOpen = (val: number) => {
+    const normalizedValue = Math.min(1, Math.max(0, val))
+    pendingUmbrellaOpen = normalizedValue
+    syncRainShields()
+
+    if (!umbrellaAction || !mixer) {
+      return
+    }
+
+    const clipDuration = umbrellaAction.getClip().duration
+    const targetTime = (1 - normalizedValue) * clipDuration
+
+    umbrellaAction.enabled = true
+    umbrellaAction.paused = true
+    umbrellaAction.timeScale = 0
+    umbrellaAction.play()
+    mixer.setTime(targetTime)
+    umbrellaAction.time = targetTime
+  }
+
+  const setUmbrellaPosition = (position: ShieldPoint | null) => {
+    pendingUmbrellaPosition = position
+    pendingUmbrellaPositionNormalized = null
+    modelViewport = getModelViewport(
+      width,
+      height,
+      resolveUmbrellaPosition(
+        width,
+        height,
+        pendingUmbrellaPosition,
+        pendingUmbrellaPositionNormalized,
+      ),
+      resolveUmbrellaSize(width, height, pendingSize, pendingSizeNormalized),
+    )
+    syncRainShields()
+  }
+
+  const setUmbrellaPositionNormalized = (position: NormalizedShieldPoint | null) => {
+    pendingUmbrellaPosition = null
+    pendingUmbrellaPositionNormalized = position
+    modelViewport = getModelViewport(
+      width,
+      height,
+      resolveUmbrellaPosition(
+        width,
+        height,
+        pendingUmbrellaPosition,
+        pendingUmbrellaPositionNormalized,
+      ),
+      resolveUmbrellaSize(width, height, pendingSize, pendingSizeNormalized),
+    )
+    syncRainShields()
+  }
+
   const animate = () => {
-    drawingContext.fillStyle = 'rgba(5, 5, 5, 0.3)'
-    drawingContext.fillRect(0, 0, width, height)
+    const delta = clock.getDelta()
+    drawingContext.clearRect(0, 0, width, height)
 
     for (const drop of drops) {
       drop.update()
       drop.draw()
     }
 
-    animationFrame = window.requestAnimationFrame(animate)
+    texture.needsUpdate = true
+
+    renderer.setScissorTest(false)
+    renderer.setViewport(0, 0, width, height)
+    renderer.clear()
+    renderer.render(rainScene, rainCamera)
+
+    if (modelReady) {
+      if (mixer) {
+        mixer.update(delta)
+      } else {
+        autoRotationY += MODEL_ROTATION_SPEED
+        applyUmbrellaRotation(autoRotationY)
+      }
+      renderer.clearDepth()
+      renderer.setScissorTest(true)
+      renderer.setViewport(modelViewport.x, modelViewport.y, modelViewport.side, modelViewport.side)
+      renderer.setScissor(modelViewport.x, modelViewport.y, modelViewport.side, modelViewport.side)
+      renderer.render(modelScene, modelCamera)
+      renderer.setScissorTest(false)
+    }
   }
 
+  loader.load(modelUrl, (gltf) => {
+    if (disposed) {
+      return
+    }
+
+    const model = gltf.scene
+    const bounds = new Box3().setFromObject(model)
+    const center = bounds.getCenter(new Vector3())
+    const size = bounds.getSize(new Vector3())
+    const maxDimension = Math.max(size.x, size.y, size.z, 1)
+
+    model.position.sub(center)
+    modelPivot.add(model)
+
+    if (gltf.animations.length > 0) {
+      mixer = new AnimationMixer(model)
+      umbrellaAction = mixer.clipAction(gltf.animations[0])
+      umbrellaAction.setLoop(LoopOnce, 1)
+      umbrellaAction.clampWhenFinished = true
+
+      setUmbrellaRotation(pendingUmbrellaRotation)
+      setUmbrellaOpen(pendingUmbrellaOpen)
+    }
+
+    modelCamera.position.set(0, 0, maxDimension * MODEL_CAMERA_DISTANCE_MULTIPLIER)
+    modelCamera.lookAt(0, 0, 0)
+    modelCamera.near = maxDimension / 100
+    modelCamera.far = maxDimension * 20
+    modelCamera.aspect = 1
+    modelCamera.updateProjectionMatrix()
+
+    modelReady = true
+  })
+
   resize()
 
   if ('PointerEvent' in window) {
@@ -218,9 +770,10 @@ export const setupLandingScene = ({ canvas }: LandingElements) => {
   }
 
   window.addEventListener('resize', resize)
-  animationFrame = window.requestAnimationFrame(animate)
+  renderer.setAnimationLoop(animate)
 
-  onCleanup(() => {
+  const cleanup = () => {
+    disposed = true
     window.removeEventListener('resize', resize)
     if ('PointerEvent' in window) {
       document.removeEventListener('pointerdown', handlePointerListener, PASSIVE_EVENT_OPTIONS)
@@ -234,6 +787,23 @@ export const setupLandingScene = ({ canvas }: LandingElements) => {
       document.removeEventListener('touchend', handleTouchListener, PASSIVE_EVENT_OPTIONS)
       document.removeEventListener('touchcancel', handleTouchListener, PASSIVE_EVENT_OPTIONS)
     }
-    window.cancelAnimationFrame(animationFrame)
-  })
+
+    activeTouchPointers = new Map()
+    renderer.setAnimationLoop(null)
+    planeGeometry.dispose()
+    planeMaterial.dispose()
+    texture.dispose()
+    renderer.dispose()
+  }
+
+  return {
+    cleanup,
+    setSize,
+    setSizeNormalized,
+    setUmbrellaAngle,
+    setUmbrellaRotation,
+    setUmbrellaOpen,
+    setUmbrellaPosition,
+    setUmbrellaPositionNormalized,
+  }
 }
diff --git a/docs/app/playground/+page.tsx b/docs/app/playground/+page.tsx
new file mode 100644
index 0000000..e3c69ca
--- /dev/null
+++ b/docs/app/playground/+page.tsx
@@ -0,0 +1,311 @@
+import { onCleanup, onMount, useSignal, type MetadataContext } from 'eclipsa'
+import type { IDisposable, editor } from 'monaco-editor'
+import {
+  buildPlaygroundOutputInBrowser,
+  getPlaygroundIsolationError,
+  loadPlaygroundMonaco,
+} from './browser-compiler.ts'
+import { highlightCode } from './highlight.ts'
+import {
+  DEFAULT_PLAYGROUND_SOURCE,
+  PLAYGROUND_EDITOR_LANGUAGE,
+  type PlaygroundBuildResult,
+} from './shared.ts'
+import { createPlaygroundCompileQueue } from './compile-queue.ts'
+
+export const metadata = ({ url }: MetadataContext) => ({
+  canonical: url.pathname,
+  title: 'Playground',
+})
+
+const createPendingResult = (): PlaygroundBuildResult => ({
+  error: 'Compiling...',
+  ok: false,
+})
+
+export default () => {
+  const editorRef = useSignal<HTMLDivElement | undefined>()
+  const source = useSignal(DEFAULT_PLAYGROUND_SOURCE)
+  const buildResult = useSignal<PlaygroundBuildResult>(createPendingResult())
+  const highlightedFiles = useSignal<Record<string, string>>({})
+  const bootMessage = useSignal<string | null>(null)
+  const editorReady = useSignal(false)
+  const isCompiling = useSignal(true)
+  const selectedFilePath = useSignal<string | null>(null)
+  const handleFileSelect = (event: Event) => {
+    const target = event.currentTarget
+    if (!(target instanceof HTMLElement)) {
+      return
+    }
+
+    selectedFilePath.value = target.dataset.filePath ?? null
+  }
+
+  onMount(() => {
+    const isolationError = getPlaygroundIsolationError()
+    if (isolationError) {
+      bootMessage.value = isolationError
+      buildResult.value = {
+        error: isolationError,
+        ok: false,
+      }
+      isCompiling.value = false
+      return
+    }
+
+    const state: {
+      changeSubscription: IDisposable | null
+      compileQueue: ReturnType<typeof createPlaygroundCompileQueue<PlaygroundBuildResult>> | null
+      disposed: boolean
+      editorInstance: editor.IStandaloneCodeEditor | null
+      editorModel: editor.ITextModel | null
+      latestCompileRequestId: number
+      resizeObserver: ResizeObserver | null
+    } = {
+      changeSubscription: null,
+      compileQueue: null,
+      disposed: false,
+      editorInstance: null,
+      editorModel: null,
+      latestCompileRequestId: 0,
+      resizeObserver: null,
+    }
+    state.compileQueue = createPlaygroundCompileQueue({
+      async build(nextSource) {
+        return buildPlaygroundOutputInBrowser(nextSource)
+      },
+      onIdle() {
+        isCompiling.value = false
+      },
+      onResult({ requestId, result }) {
+        buildResult.value = result
+
+        if (!result.ok) {
+          selectedFilePath.value = null
+          return
+        }
+
+        selectedFilePath.value =
+          result.files.find((file) => file.path === selectedFilePath.value)?.path ??
+          result.files[0]?.path ??
+          null
+
+        void (async () => {
+          try {
+            const highlightedEntries = await Promise.all(
+              result.files.map(
+                async (file) => [file.path, await highlightCode(file.code, file.language)] as const,
+              ),
+            )
+
+            if (state.disposed || requestId !== state.latestCompileRequestId) {
+              return
+            }
+
+            highlightedFiles.value = Object.fromEntries(highlightedEntries)
+          } catch {}
+        })()
+      },
+      onStart({ requestId }) {
+        state.latestCompileRequestId = requestId
+        isCompiling.value = true
+        highlightedFiles.value = {}
+      },
+    })
+
+    void (async () => {
+      try {
+        const monaco = await loadPlaygroundMonaco()
+        const mountPoint = editorRef.value
+
+        if (!mountPoint || state.disposed) {
+          return
+        }
+
+        state.editorModel = monaco.editor.createModel(
+          source.value,
+          PLAYGROUND_EDITOR_LANGUAGE,
+          monaco.Uri.parse('file:///playground-input.tsx'),
+        )
+
+        if (state.editorModel.getLanguageId() !== PLAYGROUND_EDITOR_LANGUAGE) {
+          monaco.editor.setModelLanguage(state.editorModel, PLAYGROUND_EDITOR_LANGUAGE)
+        }
+
+        state.editorInstance = monaco.editor.create(mountPoint, {
+          automaticLayout: false,
+          fontLigatures: true,
+          fontSize: 14,
+          minimap: {
+            enabled: false,
+          },
+          model: state.editorModel,
+          padding: {
+            bottom: 24,
+            top: 24,
+          },
+          roundedSelection: false,
+          'semanticHighlighting.enabled': true,
+          scrollBeyondLastLine: false,
+          tabSize: 2,
+        })
+
+        state.resizeObserver = new ResizeObserver(() => {
+          state.editorInstance?.layout()
+        })
+        state.resizeObserver.observe(mountPoint)
+
+        state.changeSubscription = state.editorInstance!.onDidChangeModelContent(() => {
+          const nextSource = state.editorModel?.getValue() ?? ''
+          source.value = nextSource
+          state.compileQueue?.queue(nextSource, 180)
+        })
+
+        editorReady.value = true
+        state.compileQueue?.queue(source.value)
+      } catch (error) {
+        bootMessage.value = error instanceof Error ? error.message : String(error)
+        buildResult.value = {
+          error: bootMessage.value,
+          ok: false,
+        }
+        isCompiling.value = false
+      }
+    })()
+
+    onCleanup(() => {
+      state.disposed = true
+      state.compileQueue?.dispose()
+      state.changeSubscription?.dispose()
+      state.resizeObserver?.disconnect()
+      state.editorInstance?.dispose()
+      state.editorModel?.dispose()
+    })
+  })
+
+  const renderBuildError = () => (
+    <div class="flex h-full min-h-0 flex-col">
+      <div class="border-b border-zinc-950/10 px-6 py-3 font-mono text-[12px] uppercase tracking-[0.22em] text-rose-700">
+        Compile error
+      </div>
+      <pre class="min-h-0 flex-1 overflow-auto px-6 py-6 font-mono text-[13px] leading-6 text-rose-700 whitespace-pre-wrap">
+        {isCompiling.value
+          ? 'Compiling current source...'
+          : !buildResult.value.ok
+            ? buildResult.value.error
+            : ''}
+      </pre>
+    </div>
+  )
+
+  return (
+    <div class="box-border h-[100dvh] overflow-hidden bg-[radial-gradient(circle_at_top_left,rgba(125,211,252,0.2),transparent_24%),radial-gradient(circle_at_top_right,rgba(253,224,71,0.18),transparent_20%),#f4efe6] px-3 pb-6 pt-22 text-zinc-950 md:px-6">
+      <div class="mx-auto flex h-full min-h-0 w-full max-w-[1800px] flex-col overflow-hidden rounded-[30px] border border-zinc-950/10 bg-white/65 backdrop-blur-xl">
+        {bootMessage.value ? (
+          <div class="border-b border-amber-300/60 bg-amber-50 px-4 py-3 text-sm leading-6 text-amber-900 md:px-5">
+            {bootMessage.value}
+          </div>
+        ) : null}
+
+        <div class="grid min-h-0 flex-1 xl:grid-cols-[minmax(0,1.02fr)_minmax(0,0.98fr)]">
+          <section class="flex min-h-0 flex-col overflow-hidden border-b border-zinc-950/10 bg-[#0b1020] xl:border-b-0 xl:border-r xl:border-r-white/10">
+            <div class="relative min-h-0 flex-1 overflow-hidden">
+              <div class="h-full w-full" ref={editorRef}></div>
+              {!editorReady.value ? (
+                <pre class="pointer-events-none absolute inset-0 overflow-auto px-6 py-6 font-mono text-[13px] leading-6 text-white/65 whitespace-pre-wrap">
+                  {source.value}
+                </pre>
+              ) : null}
+            </div>
+          </section>
+
+          <section class="flex min-h-0 flex-col overflow-hidden bg-[#fffdf8]">
+            <div class="flex flex-wrap items-center gap-x-6 gap-y-3 border-b border-zinc-950/10 bg-white/80 px-4 py-3 text-[12px] font-semibold uppercase tracking-[0.26em] text-zinc-500 md:px-5">
+              <span class="border-b-2 border-transparent pb-2 text-zinc-400">Output</span>
+              <span class="border-b-2 border-cyan-600 pb-2 text-zinc-950">Result</span>
+              <span class="border-b-2 border-transparent pb-2">Client output</span>
+            </div>
+
+            <div class="grid min-h-0 flex-1 lg:grid-cols-[240px_minmax(0,1fr)]">
+              <div class="min-h-0 overflow-auto border-b border-zinc-950/10 bg-[#f4f0e8] px-4 py-4 lg:border-b-0 lg:border-r">
+                {buildResult.value.ok ? (
+                  <div class="flex flex-col gap-1.5">
+                    {buildResult.value.files.map((file) => (
+                      <button
+                        class={
+                          selectedFilePath.value === file.path
+                            ? 'rounded-lg bg-white px-3 py-2 text-left font-mono text-[13px] text-zinc-950 shadow-[inset_0_0_0_1px_rgba(15,23,42,0.08)]'
+                            : 'rounded-lg px-3 py-2 text-left font-mono text-[13px] text-zinc-600 transition-colors hover:bg-white/70 hover:text-zinc-950'
+                        }
+                        data-file-path={file.path}
+                        type="button"
+                        onClick={handleFileSelect}
+                      >
+                        <div>{file.relativePath}</div>
+                        {file.symbolKind ? (
+                          <div class="mt-1 text-[10px] uppercase tracking-[0.22em] text-zinc-400">
+                            {file.symbolKind}
+                          </div>
+                        ) : null}
+                      </button>
+                    ))}
+                  </div>
+                ) : (
+                  <div
+                    class={
+                      isCompiling.value
+                        ? 'mt-4 font-mono text-sm text-zinc-500'
+                        : 'mt-4 font-mono text-sm text-rose-700'
+                    }
+                  >
+                    {isCompiling.value ? 'Building chunks…' : 'Compile error'}
+                  </div>
+                )}
+              </div>
+
+              <div class="min-h-0 overflow-hidden bg-[linear-gradient(to_bottom,rgba(15,23,42,0.03),transparent_180px)]">
+                {buildResult.value.ok
+                  ? (() => {
+                      const selectedFile =
+                        buildResult.value.files.find(
+                          (file) => file.path === selectedFilePath.value,
+                        ) ?? buildResult.value.files[0]
+
+                      if (!selectedFile) {
+                        return (
+                          <pre class="h-full overflow-auto px-6 py-6 font-mono text-[13px] leading-6 text-zinc-800 whitespace-pre-wrap">
+                            No generated files.
+                          </pre>
+                        )
+                      }
+
+                      const highlightedHtml = highlightedFiles.value[selectedFile.path]
+
+                      return (
+                        <div class="flex h-full min-h-0 flex-col">
+                          <div class="border-b border-zinc-950/10 px-6 py-3 font-mono text-[12px] text-zinc-500">
+                            {selectedFile.path}
+                          </div>
+
+                          {highlightedHtml ? (
+                            <div
+                              class="min-h-0 flex-1 overflow-hidden px-6 py-6 [&_.line]:inline-block [&_.line]:min-w-full [&_code]:font-mono [&_code]:whitespace-pre [&_pre]:m-0 [&_pre]:h-full [&_pre]:overflow-auto [&_pre]:!bg-transparent [&_pre]:p-0 [&_pre]:font-mono [&_pre]:text-[13px] [&_pre]:leading-6"
+                              dangerouslySetInnerHTML={highlightedHtml}
+                            />
+                          ) : (
+                            <pre class="min-h-0 flex-1 overflow-auto px-6 py-6 font-mono text-[13px] leading-6 text-zinc-800 whitespace-pre">
+                              {selectedFile.code}
+                            </pre>
+                          )}
+                        </div>
+                      )
+                    })()
+                  : renderBuildError()}
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/docs/app/playground/browser-compiler.ts b/docs/app/playground/browser-compiler.ts
new file mode 100644
index 0000000..b2bfac1
--- /dev/null
+++ b/docs/app/playground/browser-compiler.ts
@@ -0,0 +1,334 @@
+import type * as Monaco from 'monaco-editor/esm/vs/editor/editor.api'
+import { createPlaygroundOutputFiles } from './output.ts'
+import { PLAYGROUND_ENTRY_ID, type PlaygroundBuildResult, formatPlaygroundError } from './shared.ts'
+
+interface BrowserCompilerBinding {
+  analyzeModule: (
+    source: string,
+    id: string,
+  ) => {
+    code: string
+    symbols: Array<
+      [
+        string,
+        {
+          code: string
+          id: string
+          kind: 'action' | 'component' | 'event' | 'lazy' | 'loader' | 'watch'
+        },
+      ]
+    >
+  }
+  compileClient: (source: string, id: string, hmr?: boolean | null) => string
+  compileSsr: (source: string, id: string) => string
+}
+
+type MonacoModule = typeof Monaco
+export const PLAYGROUND_MONACO_LANGUAGE_CONTRIBUTIONS = [
+  'monaco-editor/esm/vs/language/typescript/monaco.contribution.js',
+  'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution.js',
+] as const
+const PLAYGROUND_ECLIPSA_DIST_GLOB_PREFIX = '../../../packages/eclipsa/dist/'
+const PLAYGROUND_ECLIPSA_SOURCE_GLOB_PREFIX = '../../../packages/eclipsa/'
+const PLAYGROUND_ECLIPSA_DIST_TYPE_FILES = import.meta.glob(
+  '../../../packages/eclipsa/dist/**/*.d.mts',
+  {
+    eager: true,
+    import: 'default',
+    query: '?raw',
+  },
+) as Record<string, string>
+const PLAYGROUND_ECLIPSA_SOURCE_TYPE_FILES = import.meta.glob(
+  [
+    '../../../packages/eclipsa/mod.ts',
+    '../../../packages/eclipsa/atom/**/*.ts',
+    '../../../packages/eclipsa/core/**/*.ts',
+    '../../../packages/eclipsa/jsx/**/*.ts',
+    '../../../packages/eclipsa/utils/**/*.ts',
+    '../../../packages/eclipsa/web-utils/**/*.ts',
+    '!../../../packages/eclipsa/**/*.test.ts',
+    '!../../../packages/eclipsa/**/*.typecheck.ts',
+    '!../../../packages/eclipsa/core/router-shared.ts',
+  ],
+  {
+    eager: true,
+    import: 'default',
+    query: '?raw',
+  },
+) as Record<string, string>
+const PLAYGROUND_ECLIPSA_HAS_DIST_TYPES = Object.keys(PLAYGROUND_ECLIPSA_DIST_TYPE_FILES).length > 0
+const PLAYGROUND_ECLIPSA_TYPE_FILES = PLAYGROUND_ECLIPSA_HAS_DIST_TYPES
+  ? PLAYGROUND_ECLIPSA_DIST_TYPE_FILES
+  : PLAYGROUND_ECLIPSA_SOURCE_TYPE_FILES
+const PLAYGROUND_ECLIPSA_ENTRY_POINTS = PLAYGROUND_ECLIPSA_HAS_DIST_TYPES
+  ? {
+      client: './core/client/mod.d.mts',
+      devClient: './core/dev-client/mod.d.mts',
+      index: './mod.d.mts',
+      internal: './core/internal.d.mts',
+      jsx: './jsx/mod.d.mts',
+      jsxDevRuntime: './jsx/jsx-dev-runtime.d.mts',
+      jsxRuntime: './jsx/jsx-runtime.d.mts',
+      prodClient: './core/prod-client/mod.d.mts',
+      vite: './vite/mod.d.mts',
+    }
+  : {
+      client: './core/client/mod.ts',
+      devClient: './core/dev-client/mod.ts',
+      index: './mod.ts',
+      internal: './core/internal.ts',
+      jsx: './jsx/mod.ts',
+      jsxDevRuntime: './jsx/jsx-dev-runtime.ts',
+      jsxRuntime: './jsx/jsx-runtime.ts',
+      prodClient: './core/prod-client/mod.ts',
+      vite: './vite.d.ts',
+    }
+export const PLAYGROUND_ECLIPSA_DIST_TYPE_FILE_COUNT = Object.keys(
+  PLAYGROUND_ECLIPSA_TYPE_FILES,
+).length
+export const PLAYGROUND_ECLIPSA_MODULE_SHIMS = {
+  '/node_modules/eclipsa/package.json': `{
+  "name": "eclipsa",
+  "type": "module",
+  "types": "./index.d.ts"
+}
+`,
+  '/node_modules/eclipsa/index.d.ts': `export * from '${PLAYGROUND_ECLIPSA_ENTRY_POINTS.index}'
+`,
+  '/node_modules/eclipsa/client.d.ts': `export * from '${PLAYGROUND_ECLIPSA_ENTRY_POINTS.client}'
+`,
+  '/node_modules/eclipsa/dev-client.d.ts': `export * from '${PLAYGROUND_ECLIPSA_ENTRY_POINTS.devClient}'
+`,
+  '/node_modules/eclipsa/prod-client.d.ts': `export * from '${PLAYGROUND_ECLIPSA_ENTRY_POINTS.prodClient}'
+`,
+  '/node_modules/eclipsa/internal.d.ts': `export * from '${PLAYGROUND_ECLIPSA_ENTRY_POINTS.internal}'
+`,
+  '/node_modules/eclipsa/jsx-runtime.d.ts': `export * from '${PLAYGROUND_ECLIPSA_ENTRY_POINTS.jsxRuntime}'
+`,
+  '/node_modules/eclipsa/jsx-dev-runtime.d.ts': `export * from '${PLAYGROUND_ECLIPSA_ENTRY_POINTS.jsxDevRuntime}'
+`,
+  '/node_modules/eclipsa/jsx.d.ts': `export * from '${PLAYGROUND_ECLIPSA_ENTRY_POINTS.jsx}'
+`,
+  '/node_modules/eclipsa/vite.d.ts': `export * from '${PLAYGROUND_ECLIPSA_ENTRY_POINTS.vite}'
+`,
+  '/node_modules/hono/index.d.ts': `export interface Env {
+  [key: string]: unknown
+}
+
+export class Context<E = any> {}
+`,
+  '/node_modules/hono/types.d.ts': `export interface Env {
+  [key: string]: unknown
+}
+
+export type MiddlewareHandler<E = any> = (...args: any[]) => any
+`,
+  '/node_modules/vite/index.d.ts': `export type PluginOption = any
+`,
+} as const
+type TypeScriptContributionModule =
+  typeof import('monaco-editor/esm/vs/language/typescript/monaco.contribution')
+
+const unwrapModuleDefault = <TModule extends object>(
+  module: TModule | { default: TModule },
+): TModule => ('default' in module ? module.default : module)
+
+let compilerPromise: Promise<BrowserCompilerBinding> | null = null
+let monacoPromise: Promise<MonacoModule> | null = null
+let typeScriptContributionPromise: Promise<TypeScriptContributionModule> | null = null
+let typeScriptTokenizerContributionPromise: Promise<unknown> | null = null
+let monacoConfigured = false
+
+const toPlaygroundNodeModulesUri = (path: string) => `file://${path}`
+
+const getPlaygroundEclipsaDistRelativePath = (path: string) => {
+  if (!path.startsWith(PLAYGROUND_ECLIPSA_DIST_GLOB_PREFIX)) {
+    throw new Error(`Unexpected Eclipsa dist type path: ${path}`)
+  }
+
+  return path.slice(PLAYGROUND_ECLIPSA_DIST_GLOB_PREFIX.length)
+}
+
+const getPlaygroundEclipsaSourceRelativePath = (path: string) => {
+  if (!path.startsWith(PLAYGROUND_ECLIPSA_SOURCE_GLOB_PREFIX)) {
+    throw new Error(`Unexpected Eclipsa source type path: ${path}`)
+  }
+
+  return path.slice(PLAYGROUND_ECLIPSA_SOURCE_GLOB_PREFIX.length)
+}
+
+const registerPlaygroundExtraLibs = (
+  defaults: TypeScriptContributionModule['typescriptDefaults'],
+) => {
+  for (const [path, content] of Object.entries(PLAYGROUND_ECLIPSA_MODULE_SHIMS)) {
+    defaults.addExtraLib(content, toPlaygroundNodeModulesUri(path))
+  }
+
+  for (const [sourcePath, content] of Object.entries(PLAYGROUND_ECLIPSA_TYPE_FILES)) {
+    if (PLAYGROUND_ECLIPSA_HAS_DIST_TYPES) {
+      const relativePath = getPlaygroundEclipsaDistRelativePath(sourcePath)
+      const declarationUri = toPlaygroundNodeModulesUri(`/node_modules/eclipsa/${relativePath}`)
+      defaults.addExtraLib(content, declarationUri)
+
+      const runtimePath = relativePath.replace(/\.d\.mts$/, '.mjs')
+      const declarationFileName = relativePath.slice(relativePath.lastIndexOf('/') + 1)
+      defaults.addExtraLib(
+        `export * from './${declarationFileName}'
+`,
+        toPlaygroundNodeModulesUri(`/node_modules/eclipsa/${runtimePath}`),
+      )
+      continue
+    }
+
+    const relativePath = getPlaygroundEclipsaSourceRelativePath(sourcePath)
+    defaults.addExtraLib(
+      content,
+      toPlaygroundNodeModulesUri(`/node_modules/eclipsa/${relativePath}`),
+    )
+  }
+}
+
+const ensureMonacoWorkers = async () => {
+  const [{ default: EditorWorker }, { default: TypeScriptWorker }] = await Promise.all([
+    import('monaco-editor/esm/vs/editor/editor.worker?worker'),
+    import('monaco-editor/esm/vs/language/typescript/ts.worker?worker'),
+  ])
+
+  ;(
+    globalThis as typeof globalThis & {
+      MonacoEnvironment?: {
+        getWorker: (_workerId: string, label: string) => Worker
+      }
+    }
+  ).MonacoEnvironment = {
+    getWorker(_workerId, label) {
+      if (label === 'javascript' || label === 'typescript') {
+        return new TypeScriptWorker()
+      }
+      return new EditorWorker()
+    },
+  }
+}
+
+export const getPlaygroundIsolationError = () => {
+  if (typeof window === 'undefined') {
+    return null
+  }
+
+  if (window.crossOriginIsolated) {
+    return null
+  }
+
+  return [
+    'The browser compiler needs a cross-origin isolated page.',
+    'Serve /playground with Cross-Origin-Embedder-Policy: require-corp and',
+    'Cross-Origin-Opener-Policy: same-origin.',
+  ].join(' ')
+}
+
+const loadBrowserCompiler = async () => {
+  if (!compilerPromise) {
+    compilerPromise = import('@eclipsa/optimizer/browser').then(
+      (module) => module.default as BrowserCompilerBinding,
+    )
+  }
+
+  return compilerPromise
+}
+
+export const buildPlaygroundOutputInBrowser = async (
+  source: string,
+): Promise<PlaygroundBuildResult> => {
+  try {
+    const compiler = await loadBrowserCompiler()
+    const analyzed = compiler.analyzeModule(source, PLAYGROUND_ENTRY_ID)
+    const files = await createPlaygroundOutputFiles({
+      analyzed: {
+        code: analyzed.code,
+        symbols: analyzed.symbols.map(([, symbol]) => symbol),
+      },
+      compileClient(source, id) {
+        return compiler.compileClient(source, id, false)
+      },
+      compileSsr(source, id) {
+        return compiler.compileSsr(source, id)
+      },
+    })
+
+    return {
+      files,
+      ok: true,
+    }
+  } catch (error) {
+    return {
+      error: formatPlaygroundError(error),
+      ok: false,
+    }
+  }
+}
+
+export const loadPlaygroundMonaco = async () => {
+  if (!monacoPromise) {
+    monacoPromise = (async () => {
+      await ensureMonacoWorkers()
+      return import('monaco-editor/esm/vs/editor/editor.api')
+    })()
+  }
+
+  if (!typeScriptContributionPromise) {
+    typeScriptContributionPromise =
+      import('monaco-editor/esm/vs/language/typescript/monaco.contribution.js').then(
+        (module) => unwrapModuleDefault(module) as TypeScriptContributionModule,
+      )
+  }
+
+  if (!typeScriptTokenizerContributionPromise) {
+    typeScriptTokenizerContributionPromise =
+      import('monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution.js')
+  }
+
+  const [monaco, typeScriptContribution] = await Promise.all([
+    monacoPromise,
+    typeScriptContributionPromise,
+    typeScriptTokenizerContributionPromise,
+  ])
+
+  if (!monacoConfigured) {
+    monacoConfigured = true
+
+    monaco.editor.defineTheme('eclipsa-playground', {
+      base: 'vs-dark',
+      inherit: true,
+      colors: {
+        'editor.background': '#0b1020',
+        'editor.lineHighlightBackground': '#151c30',
+        'editor.selectionBackground': '#27467e',
+        'editorCursor.foreground': '#7dd3fc',
+      },
+      rules: [
+        { foreground: '7dd3fc', token: 'keyword' },
+        { foreground: 'facc15', token: 'string' },
+        { foreground: '86efac', token: 'type.identifier' },
+      ],
+    })
+
+    typeScriptContribution.typescriptDefaults.setCompilerOptions({
+      allowImportingTsExtensions: true,
+      allowNonTsExtensions: true,
+      jsx: typeScriptContribution.JsxEmit.Preserve,
+      module: typeScriptContribution.ModuleKind.ESNext,
+      moduleResolution: typeScriptContribution.ModuleResolutionKind.NodeJs,
+      skipLibCheck: true,
+      target: typeScriptContribution.ScriptTarget.ESNext,
+    })
+    typeScriptContribution.typescriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: false,
+      noSyntaxValidation: false,
+    })
+    typeScriptContribution.typescriptDefaults.setEagerModelSync(true)
+    registerPlaygroundExtraLibs(typeScriptContribution.typescriptDefaults)
+    monaco.editor.setTheme('eclipsa-playground')
+  }
+
+  return monaco
+}
diff --git a/docs/app/playground/compile-queue.test.ts b/docs/app/playground/compile-queue.test.ts
new file mode 100644
index 0000000..dcda497
--- /dev/null
+++ b/docs/app/playground/compile-queue.test.ts
@@ -0,0 +1,133 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { createPlaygroundCompileQueue } from './compile-queue.ts'
+
+function createDeferred<TResult>() {
+  let resolve: ((value: TResult) => void) | null = null
+  const promise = new Promise<TResult>((nextResolve) => {
+    resolve = nextResolve
+  })
+
+  return {
+    promise,
+    resolve(value: TResult) {
+      resolve?.(value)
+    },
+  }
+}
+
+describe('playground compile queue', () => {
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('compiles only the latest debounced source', async () => {
+    vi.useFakeTimers()
+    const builds: string[] = []
+    const results: string[] = []
+    const queue = createPlaygroundCompileQueue({
+      async build(source) {
+        builds.push(source)
+        return source
+      },
+      onResult({ result }) {
+        results.push(result)
+      },
+    })
+
+    queue.queue('first', 180)
+    await vi.advanceTimersByTimeAsync(120)
+    queue.queue('second', 180)
+    await vi.advanceTimersByTimeAsync(179)
+
+    expect(builds).toEqual([])
+
+    await vi.advanceTimersByTimeAsync(1)
+
+    expect(builds).toEqual(['second'])
+    expect(results).toEqual(['second'])
+  })
+
+  it('recompiles the latest ready source after an in-flight compile settles', async () => {
+    vi.useFakeTimers()
+    const firstBuild = createDeferred<string>()
+    const builds: string[] = []
+    const starts: string[] = []
+    const idles: string[] = []
+    const results: string[] = []
+    let buildCount = 0
+    const queue = createPlaygroundCompileQueue({
+      build(source) {
+        builds.push(source)
+        buildCount += 1
+        if (buildCount === 1) {
+          return firstBuild.promise
+        }
+
+        return Promise.resolve(`${source}:done`)
+      },
+      onIdle() {
+        idles.push('idle')
+      },
+      onResult({ result }) {
+        results.push(result)
+      },
+      onStart({ source }) {
+        starts.push(source)
+      },
+    })
+
+    queue.queue('first')
+    queue.queue('second', 180)
+    await vi.advanceTimersByTimeAsync(180)
+
+    expect(builds).toEqual(['first'])
+    expect(starts).toEqual(['first'])
+
+    firstBuild.resolve('first:done')
+    await Promise.resolve()
+    await Promise.resolve()
+
+    expect(builds).toEqual(['first', 'second'])
+    expect(starts).toEqual(['first', 'second'])
+    expect(results).toEqual(['first:done', 'second:done'])
+    expect(idles).toHaveLength(1)
+  })
+
+  it('drops stale ready sources when newer edits arrive before the active compile settles', async () => {
+    vi.useFakeTimers()
+    const firstBuild = createDeferred<string>()
+    const builds: string[] = []
+    const results: string[] = []
+    const queue = createPlaygroundCompileQueue({
+      build(source) {
+        builds.push(source)
+        if (source === 'first') {
+          return firstBuild.promise
+        }
+
+        return Promise.resolve(`${source}:done`)
+      },
+      onResult({ result }) {
+        results.push(result)
+      },
+    })
+
+    queue.queue('first')
+    queue.queue('second', 180)
+    await vi.advanceTimersByTimeAsync(180)
+
+    expect(builds).toEqual(['first'])
+
+    queue.queue('third', 180)
+    firstBuild.resolve('first:done')
+    await Promise.resolve()
+    await Promise.resolve()
+
+    expect(builds).toEqual(['first'])
+
+    await vi.advanceTimersByTimeAsync(180)
+
+    expect(builds).toEqual(['first', 'third'])
+    expect(results).toEqual(['first:done', 'third:done'])
+  })
+})
diff --git a/docs/app/playground/compile-queue.ts b/docs/app/playground/compile-queue.ts
new file mode 100644
index 0000000..04d54c4
--- /dev/null
+++ b/docs/app/playground/compile-queue.ts
@@ -0,0 +1,113 @@
+interface PlaygroundCompileStart {
+  requestId: number
+  source: string
+}
+
+interface PlaygroundCompileResult<TResult> extends PlaygroundCompileStart {
+  result: TResult
+}
+
+export function createPlaygroundCompileQueue<TResult>(options: {
+  build(source: string): Promise<TResult>
+  onIdle?(): void
+  onResult?(result: PlaygroundCompileResult<TResult>): void
+  onStart?(result: PlaygroundCompileStart): void
+}) {
+  let activeSource: string | null = null
+  let debounceTimer: ReturnType<typeof setTimeout> | null = null
+  let disposed = false
+  let latestSource: string | null = null
+  let nextRequestId = 0
+  let readySource: string | null = null
+
+  const clearDebounceTimer = () => {
+    if (debounceTimer !== null) {
+      clearTimeout(debounceTimer)
+      debounceTimer = null
+    }
+  }
+
+  const drainReadySource = () => {
+    if (disposed || activeSource !== null || readySource === null) {
+      return
+    }
+
+    const source = readySource
+    readySource = null
+    void startCompile(source)
+  }
+
+  const finishCompile = (source: string, requestId: number) => {
+    if (disposed || activeSource !== source || nextRequestId !== requestId) {
+      return
+    }
+
+    activeSource = null
+
+    if (readySource !== null) {
+      drainReadySource()
+      return
+    }
+
+    options.onIdle?.()
+  }
+
+  const startCompile = async (source: string) => {
+    if (disposed) {
+      return
+    }
+
+    activeSource = source
+    const requestId = ++nextRequestId
+    options.onStart?.({ requestId, source })
+
+    try {
+      const result = await options.build(source)
+
+      if (disposed || activeSource !== source || nextRequestId !== requestId) {
+        return
+      }
+
+      options.onResult?.({
+        requestId,
+        result,
+        source,
+      })
+    } finally {
+      finishCompile(source, requestId)
+    }
+  }
+
+  const queueLatestSource = (source: string, delay = 0) => {
+    if (disposed) {
+      return
+    }
+
+    latestSource = source
+    readySource = null
+    clearDebounceTimer()
+
+    if (delay > 0) {
+      debounceTimer = setTimeout(() => {
+        debounceTimer = null
+        readySource = latestSource
+        drainReadySource()
+      }, delay)
+      return
+    }
+
+    readySource = source
+    drainReadySource()
+  }
+
+  return {
+    dispose() {
+      disposed = true
+      clearDebounceTimer()
+      readySource = null
+    },
+    queue(source: string, delay = 0) {
+      queueLatestSource(source, delay)
+    },
+  }
+}
diff --git a/docs/app/playground/highlight.ts b/docs/app/playground/highlight.ts
new file mode 100644
index 0000000..78ad1bb
--- /dev/null
+++ b/docs/app/playground/highlight.ts
@@ -0,0 +1,35 @@
+import { createHighlighterCore } from 'shiki/core'
+import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
+import javascript from 'shiki/dist/langs/javascript.mjs'
+import json from 'shiki/dist/langs/json.mjs'
+import typescript from 'shiki/dist/langs/typescript.mjs'
+import githubLight from 'shiki/dist/themes/github-light.mjs'
+import type { PlaygroundOutputLanguage } from './shared.ts'
+
+let shikiPromise: ReturnType<typeof createHighlighterCore> | null = null
+
+const loadShiki = () => {
+  if (!shikiPromise) {
+    shikiPromise = createHighlighterCore({
+      engine: createJavaScriptRegexEngine(),
+      langs: [javascript, json, typescript],
+      themes: [githubLight],
+    })
+  }
+
+  return shikiPromise
+}
+
+const HIGHLIGHT_LANGUAGE_MAP: Record<PlaygroundOutputLanguage, 'javascript' | 'json'> = {
+  javascript: 'javascript',
+  json: 'json',
+}
+
+export const highlightCode = async (code: string, language: PlaygroundOutputLanguage) => {
+  const highlighter = await loadShiki()
+
+  return highlighter.codeToHtml(code, {
+    lang: HIGHLIGHT_LANGUAGE_MAP[language],
+    theme: 'github-light',
+  })
+}
diff --git a/docs/app/playground/isolation.ts b/docs/app/playground/isolation.ts
new file mode 100644
index 0000000..380b380
--- /dev/null
+++ b/docs/app/playground/isolation.ts
@@ -0,0 +1,7 @@
+export const PLAYGROUND_RESPONSE_HEADERS = {
+  'Cross-Origin-Embedder-Policy': 'require-corp',
+  'Cross-Origin-Opener-Policy': 'same-origin',
+} as const
+
+export const isPlaygroundPathname = (pathname: string) =>
+  pathname === '/playground' || pathname.startsWith('/playground/')
diff --git a/docs/app/playground/output.test.ts b/docs/app/playground/output.test.ts
new file mode 100644
index 0000000..7c63412
--- /dev/null
+++ b/docs/app/playground/output.test.ts
@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest'
+import { analyzeModule } from '../../../packages/eclipsa/compiler/analyze/mod.ts'
+import { compileClientModule } from '../../../packages/eclipsa/compiler/client/mod.ts'
+import { compileSSRModule } from '../../../packages/eclipsa/compiler/ssr/mod.ts'
+import { createPlaygroundOutputFiles } from './output.ts'
+import { DEFAULT_PLAYGROUND_SOURCE, PLAYGROUND_ENTRY_ID } from './shared.ts'
+
+describe('playground output splitting', () => {
+  it('creates a main chunk and separate resumable symbol chunks', async () => {
+    const analyzed = await analyzeModule(DEFAULT_PLAYGROUND_SOURCE, PLAYGROUND_ENTRY_ID)
+    const files = await createPlaygroundOutputFiles({
+      analyzed,
+      compileClient(source, id) {
+        return compileClientModule(source, id, { hmr: false })
+      },
+      compileSsr(source, id) {
+        return compileSSRModule(source, id)
+      },
+    })
+
+    expect(files[0]?.path).toBe('/dist/app.js')
+    expect(files[1]?.path).toBe('/dist/ssr.js')
+    expect(files).toHaveLength(analyzed.symbols.size + 2)
+    expect(
+      files.some((file: (typeof files)[number]) =>
+        file.relativePath.startsWith('entries/symbol__'),
+      ),
+    ).toBe(true)
+    expect(files.some((file: (typeof files)[number]) => file.symbolKind === 'component')).toBe(true)
+  })
+})
diff --git a/docs/app/playground/output.ts b/docs/app/playground/output.ts
new file mode 100644
index 0000000..6459863
--- /dev/null
+++ b/docs/app/playground/output.ts
@@ -0,0 +1,98 @@
+import {
+  PLAYGROUND_DIST_ROOT,
+  PLAYGROUND_ENTRY_ID,
+  PLAYGROUND_SYMBOL_QUERY,
+  type PlaygroundOutputFile,
+} from './shared.ts'
+
+type PlaygroundSymbolKind = 'action' | 'component' | 'event' | 'lazy' | 'loader' | 'watch'
+
+interface PlaygroundSymbol {
+  code: string
+  id: string
+  kind: PlaygroundSymbolKind
+}
+
+interface PlaygroundAnalyzedModule {
+  code: string
+  symbols: Iterable<PlaygroundSymbol> | Map<string, PlaygroundSymbol>
+}
+
+const SYMBOL_KIND_PRIORITY: Record<PlaygroundSymbolKind, number> = {
+  component: 0,
+  event: 1,
+  lazy: 2,
+  watch: 3,
+  loader: 4,
+  action: 5,
+}
+
+const toSymbolArray = (symbols: PlaygroundAnalyzedModule['symbols']) => {
+  if (symbols instanceof Map) {
+    return [...symbols.values()]
+  }
+
+  return [...symbols]
+}
+
+const createEntryFile = (code: string): PlaygroundOutputFile => ({
+  code,
+  fileName: 'app.js',
+  language: 'javascript',
+  path: `${PLAYGROUND_DIST_ROOT}/app.js`,
+  relativePath: 'app.js',
+})
+
+const createSsrFile = (code: string): PlaygroundOutputFile => ({
+  code,
+  fileName: 'ssr.js',
+  language: 'javascript',
+  path: `${PLAYGROUND_DIST_ROOT}/ssr.js`,
+  relativePath: 'ssr.js',
+})
+
+const createSymbolFile = (symbol: PlaygroundSymbol): PlaygroundOutputFile => {
+  const fileName = `symbol__${symbol.id}.js`
+
+  return {
+    code: symbol.code,
+    fileName,
+    language: 'javascript',
+    path: `${PLAYGROUND_DIST_ROOT}/entries/${fileName}`,
+    relativePath: `entries/${fileName}`,
+    symbolKind: symbol.kind,
+  }
+}
+
+export const createPlaygroundOutputFiles = async (options: {
+  analyzed: PlaygroundAnalyzedModule
+  compileClient(source: string, id: string): Promise<string> | string
+  compileSsr(source: string, id: string): Promise<string> | string
+  entryId?: string
+}) => {
+  const entryId = options.entryId ?? PLAYGROUND_ENTRY_ID
+  const sortedSymbols = toSymbolArray(options.analyzed.symbols).sort((left, right) => {
+    const priorityDiff = SYMBOL_KIND_PRIORITY[left.kind] - SYMBOL_KIND_PRIORITY[right.kind]
+    if (priorityDiff !== 0) {
+      return priorityDiff
+    }
+
+    return left.id.localeCompare(right.id)
+  })
+
+  const files = await Promise.all([
+    Promise.resolve(options.compileClient(options.analyzed.code, entryId)).then(createEntryFile),
+    Promise.resolve(options.compileSsr(options.analyzed.code, entryId)).then(createSsrFile),
+    ...sortedSymbols.map(async (symbol) =>
+      createSymbolFile({
+        ...symbol,
+        code: await options.compileClient(
+          symbol.code,
+          `${entryId}?${PLAYGROUND_SYMBOL_QUERY}=${symbol.id}`,
+        ),
+      }),
+    ),
+  ])
+
+  return files
+}
diff --git a/docs/app/playground/shared.test.ts b/docs/app/playground/shared.test.ts
new file mode 100644
index 0000000..4e95bd2
--- /dev/null
+++ b/docs/app/playground/shared.test.ts
@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest'
+import {
+  PLAYGROUND_ECLIPSA_DIST_TYPE_FILE_COUNT,
+  PLAYGROUND_ECLIPSA_MODULE_SHIMS,
+  PLAYGROUND_MONACO_LANGUAGE_CONTRIBUTIONS,
+} from './browser-compiler.ts'
+import { formatPlaygroundError, PLAYGROUND_EDITOR_LANGUAGE } from './shared.ts'
+
+describe('playground error formatting', () => {
+  it('prefers the compiler message over stack frames', () => {
+    const error = new Error('failed to parse playground-input.tsx')
+    error.stack = `Error: failed to parse playground-input.tsx\n    at analyzeModule (unknown)\n    at async next`
+
+    expect(formatPlaygroundError(error)).toBe('failed to parse playground-input.tsx')
+  })
+})
+
+describe('playground editor configuration', () => {
+  it('pins Monaco to the TypeScript language service', () => {
+    expect(PLAYGROUND_EDITOR_LANGUAGE).toBe('typescript')
+  })
+
+  it('loads both the TypeScript language service and tokenizer contributions', () => {
+    expect(PLAYGROUND_MONACO_LANGUAGE_CONTRIBUTIONS).toContain(
+      'monaco-editor/esm/vs/language/typescript/monaco.contribution.js',
+    )
+    expect(PLAYGROUND_MONACO_LANGUAGE_CONTRIBUTIONS).toContain(
+      'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution.js',
+    )
+  })
+
+  it('registers Eclipsa declaration files and package entry shims for Monaco', () => {
+    expect(PLAYGROUND_ECLIPSA_DIST_TYPE_FILE_COUNT).toBeGreaterThan(0)
+    expect(PLAYGROUND_ECLIPSA_MODULE_SHIMS['/node_modules/eclipsa/index.d.ts']).toMatch(
+      /\.\/mod\.(d\.mts|ts)/,
+    )
+    expect(PLAYGROUND_ECLIPSA_MODULE_SHIMS['/node_modules/eclipsa/client.d.ts']).toMatch(
+      /\.\/core\/client\/mod\.(d\.mts|ts)/,
+    )
+  })
+})
diff --git a/docs/app/playground/shared.ts b/docs/app/playground/shared.ts
new file mode 100644
index 0000000..6687e14
--- /dev/null
+++ b/docs/app/playground/shared.ts
@@ -0,0 +1,65 @@
+export const PLAYGROUND_ENTRY_ID = 'playground-input.tsx'
+export const PLAYGROUND_EDITOR_LANGUAGE = 'typescript'
+export const PLAYGROUND_SYMBOL_QUERY = 'eclipsa-symbol'
+export const PLAYGROUND_DIST_ROOT = '/dist'
+
+export const DEFAULT_PLAYGROUND_SOURCE = `import { useSignal } from 'eclipsa'
+
+export default function CounterCard() {
+  const count = useSignal(0)
+
+  return (
+    <section class="rounded-3xl border border-zinc-200 bg-white p-6 shadow-sm">
+      <p class="text-sm uppercase tracking-[0.3em] text-zinc-500">Counter</p>
+      <div class="mt-4 flex items-center gap-4">
+        <button
+          class="rounded-full bg-zinc-950 px-4 py-2 text-sm font-medium text-white"
+          onClick={() => count.value++}
+        >
+          Increment
+        </button>
+        <strong class="text-2xl text-zinc-950">{count.value}</strong>
+      </div>
+    </section>
+  )
+}
+`
+
+export type PlaygroundOutputLanguage = 'javascript' | 'json'
+
+export interface PlaygroundOutputFile {
+  code: string
+  fileName: string
+  language: PlaygroundOutputLanguage
+  path: string
+  relativePath: string
+  symbolKind?: 'action' | 'component' | 'event' | 'lazy' | 'loader' | 'watch'
+}
+
+export interface PlaygroundBuildSuccess {
+  ok: true
+  files: PlaygroundOutputFile[]
+}
+
+export interface PlaygroundBuildFailure {
+  error: string
+  ok: false
+}
+
+export type PlaygroundBuildResult = PlaygroundBuildFailure | PlaygroundBuildSuccess
+
+export const formatPlaygroundError = (error: unknown) => {
+  if (error instanceof Error) {
+    return error.message.trim() || error.stack?.trim() || 'Unknown compiler error.'
+  }
+
+  if (typeof error === 'string' && error.length > 0) {
+    return error
+  }
+
+  try {
+    return JSON.stringify(error, null, 2)
+  } catch {
+    return 'Unknown compiler error.'
+  }
+}
diff --git a/docs/app/style.css b/docs/app/style.css
index ceafb3c..19e423a 100644
--- a/docs/app/style.css
+++ b/docs/app/style.css
@@ -1,8 +1,525 @@
 @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@300;500;700&family=Urbanist:wght@300;400;500;700&display=swap');
 @import 'tailwindcss';
+@plugin "@egoist/tailwindcss-icons";
 
 @theme {
   --font-space-grotesk: 'Space Grotesk', sans-serif;
   --font-archivo-black: 'Archivo Black', sans-serif;
   --font-urbanist: 'Urbanist', sans-serif;
 }
+
+html {
+  --docs-accent-bg: color-mix(in srgb, #8b5cf6 18%, white);
+  --docs-accent-bg-soft: color-mix(in srgb, #8b5cf6 10%, white);
+  --docs-accent-fg: #4c1d95;
+  --docs-accent-line: #7c3aed;
+  --docs-bg: #f5f7fb;
+  --docs-border: rgba(161, 161, 170, 0.34);
+  --docs-border-strong: rgba(113, 113, 122, 0.3);
+  --docs-code-bg: rgba(9, 9, 11, 0.92);
+  --docs-code-text: #f3e8ff;
+  --docs-nav-bg: rgba(255, 255, 255, 0.95);
+  --docs-panel: rgba(255, 255, 255, 0.94);
+  --docs-panel-hover: rgba(244, 244, 245, 0.98);
+  --docs-shadow: 0 24px 80px rgba(15, 23, 42, 0.14);
+  --docs-text: #18181b;
+  --docs-text-muted: #52525b;
+  --docs-text-soft: #71717a;
+}
+
+html[data-docs-theme='dark'] {
+  --docs-accent-bg: color-mix(in srgb, #8b5cf6 22%, #18181b);
+  --docs-accent-bg-soft: color-mix(in srgb, #8b5cf6 14%, #18181b);
+  --docs-accent-fg: #f3e8ff;
+  --docs-accent-line: #c084fc;
+  --docs-bg: #09090b;
+  --docs-border: rgba(113, 113, 122, 0.48);
+  --docs-border-strong: rgba(161, 161, 170, 0.45);
+  --docs-code-bg: rgba(24, 24, 27, 0.96);
+  --docs-code-text: #f5f3ff;
+  --docs-nav-bg: rgba(9, 9, 11, 0.9);
+  --docs-panel: rgba(24, 24, 27, 0.92);
+  --docs-panel-hover: rgba(39, 39, 42, 0.95);
+  --docs-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
+  --docs-text: #fafafa;
+  --docs-text-muted: #d4d4d8;
+  --docs-text-soft: #a1a1aa;
+}
+
+html[data-docs-theme='dark'] {
+  color-scheme: dark;
+}
+
+dialog[data-testid='docs-search-overlay'] {
+  max-width: none;
+  max-height: none;
+}
+
+dialog[data-testid='docs-search-overlay']::backdrop {
+  background: rgba(24, 24, 27, 0.28);
+  backdrop-filter: blur(8px);
+}
+
+.markdown-content {
+  @apply px-0 py-1 text-[15px]/7 font-normal sm:px-1 sm:text-base/7;
+  color: var(--docs-text-muted);
+}
+.markdown-content :not(pre) > code {
+  @apply mx-0.5 break-words rounded-lg px-2 py-0.5 text-sm;
+  background: var(--docs-code-bg);
+  color: var(--docs-code-text);
+}
+.markdown-content :is(h1, h2, h3, h4, h5, h6) > code {
+  font-size: inherit;
+  line-height: inherit;
+}
+.markdown-content pre {
+  @apply my-4 max-w-full overflow-x-auto overflow-y-hidden rounded-xl px-4 py-4 text-xs sm:rounded-2xl sm:px-6 sm:py-5 sm:text-sm;
+}
+.markdown-content pre > code {
+  @apply block min-w-max;
+}
+.markdown-content {
+  & h1 {
+    @apply text-3xl/10 font-semibold sm:text-4xl/10;
+    color: var(--docs-text);
+  }
+  & h2 {
+    @apply mt-5 border-t pt-5 text-2xl/9 font-semibold;
+    border-color: var(--docs-border);
+    color: var(--docs-text);
+  }
+  & p {
+    @apply my-4 break-words text-[15px]/7 sm:text-base/7;
+    color: var(--docs-text-muted);
+  }
+  & ul {
+    @apply my-4 list-disc pl-5 text-[15px]/7 sm:text-base/7;
+    color: var(--docs-text-muted);
+  }
+}
+
+.markdown-content :is(h1, h2, h3, h4, h5, h6)[id] {
+  scroll-margin-top: 5.5rem;
+}
+
+.landing-features-orbit-anchor {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 100%;
+}
+
+.landing-features-section {
+  position: relative;
+  z-index: 20;
+  margin-inline: auto;
+  display: grid;
+  width: 100%;
+  max-width: 80rem;
+  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
+  align-items: start;
+  gap: clamp(1.5rem, 4vw, 4rem);
+  padding-inline: 1rem;
+}
+
+.landing-features-stage {
+  position: sticky;
+  top: 0;
+  align-self: start;
+  z-index: 0;
+  display: flex;
+  min-height: 100dvh;
+  align-items: center;
+  justify-content: center;
+  padding-top: 0.25rem;
+  padding-left: clamp(0rem, 4vw, 2.5rem);
+}
+
+.landing-features-content {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-rows: repeat(5, minmax(0, 1fr));
+  min-width: 0;
+}
+
+.landing-features-content-spacer {
+  min-height: 0;
+}
+
+.landing-features-stack {
+  display: grid;
+  grid-row: span 4 / span 4;
+  grid-template-rows: repeat(3, minmax(0, 1fr));
+}
+
+.landing-features-compiler {
+  min-height: 0;
+}
+
+.landing-features-compiler-spacer {
+  height: 100vh;
+}
+
+.landing-features-compiler-viewport {
+  position: sticky;
+  top: 30%;
+  display: flex;
+  height: 100vh;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+}
+
+.landing-features-copy {
+  position: relative;
+  z-index: 2;
+  max-width: 42rem;
+}
+
+.landing-features-placeholder {
+  min-height: 0;
+}
+
+.landing-features-orbit {
+  --feature-count: 1;
+  --feature-radius: clamp(7rem, 24vw, 17rem);
+  --feature-rotation: 0deg;
+  --orbit-follow-x: 0px;
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: min(100%, 38rem);
+  aspect-ratio: 1;
+  transform: translate3d(var(--orbit-follow-x), 0, 0);
+  will-change: transform;
+}
+
+.landing-feature-orbit-item {
+  --feature-index: 0;
+  --feature-anchor-x: 14%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: max-content;
+  opacity: 0.5;
+  transition: opacity 180ms ease;
+  transform: translate(calc(var(--feature-anchor-x) * -1), -50%)
+    rotate(calc(360deg / var(--feature-count) * var(--feature-index) + var(--feature-rotation)))
+    translateY(calc(var(--feature-radius) * -1))
+    rotate(calc(-360deg / var(--feature-count) * var(--feature-index) - var(--feature-rotation)));
+}
+
+.landing-feature-orbit-item[data-active='true'] {
+  opacity: 1;
+}
+
+.landing-feature-card {
+  width: max-content;
+}
+
+.landing-feature-card-icon {
+  width: 2.25rem;
+  height: 2.25rem;
+  color: #9d00ff;
+}
+
+.landing-compile-flow {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.landing-compile-rail {
+  position: relative;
+  overflow: visible;
+}
+
+.landing-compile-rail::before {
+  content: '';
+  position: absolute;
+  top: 1.75rem;
+  left: 0;
+  width: 0.55rem;
+  height: 0.55rem;
+  border: 1px solid rgb(224 187 255 / 0.65);
+  border-radius: 999px;
+  background: radial-gradient(
+    circle,
+    rgb(249 232 255 / 0.95) 0,
+    rgb(176 38 255 / 0.9) 42%,
+    rgb(176 38 255 / 0.18) 100%
+  );
+  box-shadow:
+    0 0 0 0.18rem rgb(176 38 255 / 0.12),
+    0 0 18px rgb(176 38 255 / 0.45);
+  transform: translate(-50%, -50%);
+}
+
+.landing-compile-segment {
+  position: relative;
+  overflow: visible;
+  background: linear-gradient(
+    90deg,
+    rgb(120 56 255 / 0.3),
+    rgb(176 38 255 / 0.95),
+    rgb(244 114 182 / 0.45)
+  );
+  box-shadow:
+    0 0 0.45rem rgb(176 38 255 / 0.2),
+    0 0 1rem rgb(176 38 255 / 0.12);
+}
+
+.landing-compile-segment::after {
+  content: '';
+  position: absolute;
+  inset: -0.18rem;
+  border-radius: 999px;
+  background: inherit;
+  opacity: 0.35;
+  filter: blur(0.3rem);
+}
+
+.landing-compile-segment-vertical {
+  background: linear-gradient(
+    180deg,
+    rgb(120 56 255 / 0.24),
+    rgb(176 38 255 / 0.96),
+    rgb(244 114 182 / 0.3)
+  );
+}
+
+.landing-compile-dot {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0.625rem;
+  height: 0.625rem;
+  border-radius: 999px;
+  background: #b026ff;
+  box-shadow:
+    0 0 0 0.2rem rgb(176 38 255 / 0.18),
+    0 0 20px rgb(176 38 255 / 0.9);
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  animation-play-state: paused;
+  isolation: isolate;
+}
+
+.landing-compile-dot::after {
+  content: '';
+  position: absolute;
+  inset: 18% 38% 18% -165%;
+  border-radius: 999px;
+  background: linear-gradient(
+    90deg,
+    rgb(176 38 255 / 0),
+    rgb(176 38 255 / 0.55),
+    rgb(244 114 182 / 0.12)
+  );
+  filter: blur(0.22rem);
+  opacity: 0.85;
+  z-index: -1;
+}
+
+.landing-compile-flow[data-visible='true'] .landing-compile-dot {
+  animation-play-state: running;
+}
+
+.landing-compile-flow[data-visible='true'] .landing-compile-rail::before {
+  animation: landing-compile-node-pulse 1.8s ease-in-out infinite;
+}
+
+.landing-compile-dot-source {
+  animation: landing-compile-dot-source 1.2s linear infinite;
+}
+
+.landing-compile-dot-client {
+  animation: landing-compile-dot-client 1.2s linear infinite;
+  animation-delay: -0.4s;
+}
+
+.landing-compile-dot-ssr {
+  animation: landing-compile-dot-ssr 1.2s linear infinite;
+  animation-delay: -0.8s;
+}
+
+@keyframes landing-compile-dot-source {
+  0% {
+    top: 1.75rem;
+    left: 100%;
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  45% {
+    top: 1.75rem;
+    left: 0;
+    opacity: 1;
+  }
+  100% {
+    top: 100%;
+    left: 0;
+    opacity: 0;
+  }
+}
+
+@keyframes landing-compile-dot-client {
+  0% {
+    top: 0;
+    left: 0;
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  45% {
+    top: 1.75rem;
+    left: 0;
+    opacity: 1;
+  }
+  100% {
+    top: 1.75rem;
+    left: 100%;
+    opacity: 0;
+  }
+}
+
+@keyframes landing-compile-dot-ssr {
+  0% {
+    top: 0;
+    left: 0;
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  45% {
+    top: 1.75rem;
+    left: 0;
+    opacity: 1;
+  }
+  100% {
+    top: 1.75rem;
+    left: 100%;
+    opacity: 0;
+  }
+}
+
+@keyframes landing-compile-node-pulse {
+  0%,
+  100% {
+    box-shadow:
+      0 0 0 0.18rem rgb(176 38 255 / 0.12),
+      0 0 18px rgb(176 38 255 / 0.45);
+    transform: translate(-50%, -50%) scale(1);
+  }
+  50% {
+    box-shadow:
+      0 0 0 0.32rem rgb(176 38 255 / 0.08),
+      0 0 24px rgb(176 38 255 / 0.72);
+    transform: translate(-50%, -50%) scale(1.08);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .landing-compile-dot {
+    display: none;
+  }
+
+  .landing-compile-flow[data-visible='true'] .landing-compile-rail::before {
+    animation: none;
+  }
+}
+
+@media (max-width: 768px) {
+  .landing-features-section {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .landing-features-stage {
+    pointer-events: none;
+    grid-column: 1;
+    grid-row: 1;
+    justify-self: stretch;
+    position: sticky;
+    top: 0;
+    width: 100%;
+    min-height: 100svh;
+    align-items: center;
+    justify-content: center;
+    padding-left: 0;
+  }
+
+  .landing-features-content {
+    grid-column: 1;
+    grid-row: 1;
+  }
+
+  .landing-features-content-spacer {
+    display: block;
+  }
+
+  .landing-features-stack {
+    gap: 0;
+  }
+
+  .landing-features-compiler-spacer {
+    height: clamp(11rem, 44vw, 16rem);
+  }
+
+  .landing-features-compiler-viewport {
+    top: 18svh;
+    height: auto;
+    min-height: 100svh;
+    align-items: flex-start;
+    padding-inline: clamp(0.75rem, 4vw, 1rem);
+  }
+
+  .landing-features-copy {
+    margin-inline: auto;
+  }
+
+  .landing-features-placeholder {
+    margin-inline: auto;
+  }
+
+  .landing-features-orbit {
+    --feature-radius: clamp(4.75rem, 24vw, 7rem);
+    width: min(88vw, 20rem);
+  }
+
+  .landing-feature-orbit-item {
+    --feature-anchor-x: 12%;
+  }
+
+  .landing-feature-card {
+    max-width: min(32vw, 7.5rem);
+    flex-direction: column;
+    gap: 0.35rem;
+    text-align: center;
+  }
+
+  .landing-feature-card-icon {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+
+  .landing-features-compiler-headline {
+    padding-inline: clamp(0.75rem, 4vw, 1rem);
+    text-align: left;
+  }
+
+  .landing-compile-flow {
+    width: min(100%, 24rem);
+  }
+}
+
+@media (min-width: 640px) {
+  .landing-features-section {
+    padding-inline: 1.5rem;
+  }
+}
diff --git a/docs/app/use-landing-scene.ts b/docs/app/use-landing-scene.ts
new file mode 100644
index 0000000..82d8f09
--- /dev/null
+++ b/docs/app/use-landing-scene.ts
@@ -0,0 +1,227 @@
+import { noSerialize, onCleanup, onMount, type NoSerialize, type Signal, useSignal } from 'eclipsa'
+import {
+  setupLandingScene,
+  type LandingSceneController,
+  type NormalizedShieldPoint,
+  type ShieldPoint,
+  type UmbrellaRotation,
+} from './landing-scene.ts'
+
+export interface UseLandingSceneResult {
+  canvasRef: Signal<HTMLCanvasElement | undefined>
+  setSize: (size: number | null) => void
+  setSizeNormalized: (size: number | null) => void
+  setUmbrellaAngle: (degrees: number) => void
+  setUmbrellaRotation: (rotation: Partial<UmbrellaRotation>) => void
+  setUmbrellaOpen: (val: number) => void
+  setUmbrellaPosition: (position: ShieldPoint | null) => void
+  setUmbrellaPositionNormalized: (position: NormalizedShieldPoint | null) => void
+}
+
+const subscribeNumberMotionValue = (
+  motionValue:
+    | {
+        get: () => number
+        on: (eventName: 'change', listener: (value: number) => void) => () => void
+      }
+    | {
+        get: () => number | null
+        on: (eventName: 'change', listener: (value: number | null) => void) => () => void
+      }
+    | undefined,
+  apply: (value: number | null) => void,
+) => {
+  if (!motionValue) {
+    return
+  }
+
+  apply(motionValue.get())
+  const cleanup = motionValue.on('change', apply)
+  onCleanup(cleanup)
+}
+
+export const useLandingScene = (options?: {
+  motion?: {
+    open?: {
+      get: () => number
+      on: (eventName: 'change', listener: (value: number) => void) => () => void
+    }
+    sizeNormalized?: {
+      get: () => number | null
+      on: (eventName: 'change', listener: (value: number | null) => void) => () => void
+    }
+    position?: {
+      x: {
+        get: () => number
+        on: (eventName: 'change', listener: (value: number) => void) => () => void
+      }
+      y: {
+        get: () => number
+        on: (eventName: 'change', listener: (value: number) => void) => () => void
+      }
+    }
+    positionNormalized?: {
+      x: {
+        get: () => number
+        on: (eventName: 'change', listener: (value: number) => void) => () => void
+      }
+      y: {
+        get: () => number
+        on: (eventName: 'change', listener: (value: number) => void) => () => void
+      }
+    }
+    rotation?: {
+      x?: {
+        get: () => number
+        on: (eventName: 'change', listener: (value: number) => void) => () => void
+      }
+      y?: {
+        get: () => number
+        on: (eventName: 'change', listener: (value: number) => void) => () => void
+      }
+      z?: {
+        get: () => number
+        on: (eventName: 'change', listener: (value: number) => void) => () => void
+      }
+    }
+    size?: {
+      get: () => number | null
+      on: (eventName: 'change', listener: (value: number | null) => void) => () => void
+    }
+  }
+}): UseLandingSceneResult => {
+  const canvasRef = useSignal<HTMLCanvasElement | undefined>()
+  const landingScene = useSignal<NoSerialize<LandingSceneController> | null>(null)
+
+  const setSize = (size: number | null) => {
+    landingScene.value?.setSize(size)
+  }
+
+  const setSizeNormalized = (size: number | null) => {
+    landingScene.value?.setSizeNormalized(size)
+  }
+
+  const setUmbrellaAngle = (degrees: number) => {
+    landingScene.value?.setUmbrellaAngle(degrees)
+  }
+
+  const setUmbrellaRotation = (rotation: Partial<UmbrellaRotation>) => {
+    landingScene.value?.setUmbrellaRotation(rotation)
+  }
+
+  const setUmbrellaOpen = (val: number) => {
+    landingScene.value?.setUmbrellaOpen(val)
+  }
+
+  const setUmbrellaPosition = (position: ShieldPoint | null) => {
+    landingScene.value?.setUmbrellaPosition(position)
+  }
+
+  const setUmbrellaPositionNormalized = (position: NormalizedShieldPoint | null) => {
+    landingScene.value?.setUmbrellaPositionNormalized(position)
+  }
+
+  onMount(() => {
+    const canvas = canvasRef.value
+
+    if (!canvas) {
+      return
+    }
+
+    landingScene.value = noSerialize(setupLandingScene({ canvas }))
+
+    subscribeNumberMotionValue(options?.motion?.size, (value) => {
+      landingScene.value?.setSize(value)
+    })
+    subscribeNumberMotionValue(options?.motion?.sizeNormalized, (value) => {
+      landingScene.value?.setSizeNormalized(value)
+    })
+    subscribeNumberMotionValue(options?.motion?.open, (value) => {
+      if (typeof value === 'number') {
+        landingScene.value?.setUmbrellaOpen(value)
+      }
+    })
+
+    const position = options?.motion?.position
+    if (position) {
+      const applyPosition = () => {
+        landingScene.value?.setUmbrellaPosition({
+          x: position.x.get(),
+          y: position.y.get(),
+        })
+      }
+
+      applyPosition()
+      const cleanupX = position.x.on('change', applyPosition)
+      const cleanupY = position.y.on('change', applyPosition)
+      onCleanup(() => {
+        cleanupX()
+        cleanupY()
+      })
+    }
+
+    const positionNormalized = options?.motion?.positionNormalized
+    if (positionNormalized) {
+      const applyPositionNormalized = () => {
+        landingScene.value?.setUmbrellaPositionNormalized({
+          x: positionNormalized.x.get(),
+          y: positionNormalized.y.get(),
+        })
+      }
+
+      applyPositionNormalized()
+      const cleanupX = positionNormalized.x.on('change', applyPositionNormalized)
+      const cleanupY = positionNormalized.y.on('change', applyPositionNormalized)
+      onCleanup(() => {
+        cleanupX()
+        cleanupY()
+      })
+    }
+
+    const rotation = options?.motion?.rotation
+    if (rotation) {
+      const applyRotation = () => {
+        const nextRotation: Partial<UmbrellaRotation> = {}
+        if (rotation.x) {
+          nextRotation.x = rotation.x.get()
+        }
+        if (rotation.y) {
+          nextRotation.y = rotation.y.get()
+        }
+        if (rotation.z) {
+          nextRotation.z = rotation.z.get()
+        }
+        landingScene.value?.setUmbrellaRotation(nextRotation)
+      }
+
+      applyRotation()
+      const cleanups: Array<() => void> = []
+      for (const value of [rotation.x, rotation.y, rotation.z]) {
+        if (value) {
+          cleanups.push(value.on('change', applyRotation))
+        }
+      }
+      onCleanup(() => {
+        for (const cleanup of cleanups) {
+          cleanup()
+        }
+      })
+    }
+
+    onCleanup(() => {
+      landingScene.value?.cleanup()
+      landingScene.value = null
+    })
+  })
+
+  return {
+    canvasRef,
+    setSize,
+    setSizeNormalized,
+    setUmbrellaAngle,
+    setUmbrellaRotation,
+    setUmbrellaOpen,
+    setUmbrellaPosition,
+    setUmbrellaPositionNormalized,
+  }
+}
diff --git a/docs/app/vite-env.d.ts b/docs/app/vite-env.d.ts
index 565746f..62e5a3c 100644
--- a/docs/app/vite-env.d.ts
+++ b/docs/app/vite-env.d.ts
@@ -3,3 +3,40 @@
 interface ImportMetaEnv {
   readonly VITE_ERUDA?: string
 }
+
+declare module 'monaco-editor/esm/vs/editor/editor.api' {
+  export * from 'monaco-editor'
+}
+
+declare module 'monaco-editor/esm/vs/language/typescript/monaco.contribution' {
+  export const JsxEmit: typeof import('monaco-editor').typescript.JsxEmit
+  export const ModuleKind: typeof import('monaco-editor').typescript.ModuleKind
+  export const ModuleResolutionKind: typeof import('monaco-editor').typescript.ModuleResolutionKind
+  export const ScriptTarget: typeof import('monaco-editor').typescript.ScriptTarget
+  export const typescriptDefaults: typeof import('monaco-editor').typescript.typescriptDefaults
+}
+
+declare module '@eclipsa/optimizer/browser' {
+  const binding: {
+    analyzeModule(
+      source: string,
+      id: string,
+    ): {
+      code: string
+      symbols: Array<
+        [
+          string,
+          {
+            code: string
+            id: string
+            kind: 'action' | 'component' | 'event' | 'lazy' | 'loader' | 'watch'
+          },
+        ]
+      >
+    }
+    compileClient(source: string, id: string, hmr?: boolean | null): string
+    compileSsr(source: string, id: string): string
+  }
+
+  export default binding
+}
diff --git a/docs/assets/output.glb b/docs/assets/output.glb
new file mode 100644
index 0000000..7ba1a9b
Binary files /dev/null and b/docs/assets/output.glb differ
diff --git a/docs/assets/routing-vscode.png b/docs/assets/routing-vscode.png
new file mode 100644
index 0000000..652ac61
Binary files /dev/null and b/docs/assets/routing-vscode.png differ
diff --git a/docs/components/logo.tsx b/docs/components/logo.tsx
index b610bfe..88c25dd 100644
--- a/docs/components/logo.tsx
+++ b/docs/components/logo.tsx
@@ -1,6 +1,6 @@
-import { component$ } from 'eclipsa'
+import type { JSX } from 'eclipsa'
 
-export const Logo = component$((props: { class?: string }) => {
+export const Logo = (props: { class?: string }): JSX.Element => {
   return (
     <svg
       version="1.0"
@@ -85,4 +85,4 @@ export const Logo = component$((props: { class?: string }) => {
       </g>
     </svg>
   )
-})
+}
diff --git a/docs/eclipsa-skill.test.ts b/docs/eclipsa-skill.test.ts
new file mode 100644
index 0000000..7cbbfe7
--- /dev/null
+++ b/docs/eclipsa-skill.test.ts
@@ -0,0 +1,47 @@
+import { readFile } from 'node:fs/promises'
+import { describe, expect, it } from 'vitest'
+
+const skillDir = new URL('../skills/eclipsa/', import.meta.url)
+
+describe('eclipsa skill', () => {
+  it('routes common requests to the right rule files and states compiler constraints', async () => {
+    const skill = await readFile(new URL('./SKILL.md', skillDir), 'utf8')
+
+    expect(skill).toContain('## Common Requests')
+    expect(skill).toContain('rules/data-loading-and-actions.md')
+    expect(skill).toContain('rules/resume-and-ssr.md')
+    expect(skill).toContain('Keep `loader()` and `action()` at module scope')
+    expect(skill).toContain('Call `useSignal()` at the top level of the component body')
+  })
+
+  it('includes concrete routing, state, and resume code snippets', async () => {
+    const [routing, state, resume] = await Promise.all([
+      readFile(new URL('./rules/routing-and-navigation.md', skillDir), 'utf8'),
+      readFile(new URL('./rules/state-and-lifecycle.md', skillDir), 'utf8'),
+      readFile(new URL('./rules/resume-and-ssr.md', skillDir), 'utf8'),
+    ])
+
+    expect(routing).toContain('const NavLink = (props: { href: string; label: string }) => {')
+    expect(routing).toContain('await navigate(`/search?q=${encodeURIComponent(query.value)}`)')
+    expect(state).toContain('const inputRef = useSignal<HTMLInputElement | undefined>()')
+    expect(state).toContain('onMount(() => {')
+    expect(resume).toContain('resumeContainer(document)')
+    expect(resume).toContain("window.matchMedia('(prefers-color-scheme: dark)')")
+  })
+
+  it('includes concrete loader, action, metadata, and starter examples', async () => {
+    const [gettingStarted, data, metadata] = await Promise.all([
+      readFile(new URL('./rules/getting-started.md', skillDir), 'utf8'),
+      readFile(new URL('./rules/data-loading-and-actions.md', skillDir), 'utf8'),
+      readFile(new URL('./rules/metadata-and-server.md', skillDir), 'utf8'),
+    ])
+
+    expect(gettingStarted).toContain('<Link href="/dashboard">Open the dashboard</Link>')
+    expect(data).toContain('const useTeamLoader = loader(requestMeta, async (c) => {')
+    expect(data).toContain('const useSaveProfile = action(async (c) => {')
+    expect(data).toContain('<saveProfile.Form class="stack">')
+    expect(metadata).toContain('export const metadata = ({ url }: MetadataContext) => ({')
+    expect(metadata).toContain('export default function Root(props: SSRRootProps)')
+    expect(metadata).toContain('const app = new Hono()')
+  })
+})
diff --git a/docs/package-config.test.ts b/docs/package-config.test.ts
new file mode 100644
index 0000000..d44b784
--- /dev/null
+++ b/docs/package-config.test.ts
@@ -0,0 +1,84 @@
+import { readFile } from 'node:fs/promises'
+import { describe, expect, it } from 'vitest'
+
+const packageDir = new URL('.', import.meta.url)
+const parseJsonc = <T>(source: string) =>
+  JSON.parse(
+    source
+      .replaceAll(/\/\*[\s\S]*?\*\//g, '')
+      .replaceAll(/^\s*\/\/.*$/gm, '')
+      .replaceAll(/,\s*([}\]])/g, '$1'),
+  ) as T
+
+describe('docs package config', () => {
+  it('declares hono when the docs server entry imports it', async () => {
+    const [packageJsonRaw, serverEntryRaw] = await Promise.all([
+      readFile(new URL('./package.json', packageDir), 'utf8'),
+      readFile(new URL('./app/+server-entry.ts', packageDir), 'utf8'),
+    ])
+
+    const packageJson = JSON.parse(packageJsonRaw) as {
+      dependencies?: Record<string, string>
+    }
+
+    expect(serverEntryRaw).toContain("from 'hono'")
+    expect(packageJson.dependencies?.hono).toBe('^4.6.4')
+  })
+
+  it('declares optimizer when the playground imports the public browser compiler entry', async () => {
+    const [packageJsonRaw, browserCompilerRaw] = await Promise.all([
+      readFile(new URL('./package.json', packageDir), 'utf8'),
+      readFile(new URL('./app/playground/browser-compiler.ts', packageDir), 'utf8'),
+    ])
+
+    const packageJson = JSON.parse(packageJsonRaw) as {
+      dependencies?: Record<string, string>
+    }
+
+    expect(browserCompilerRaw).toContain("import('@eclipsa/optimizer/browser')")
+    expect(browserCompilerRaw).not.toContain(
+      '../../../packages/eclipsa/compiler/native/generated/eclipsa.wasi-browser.js',
+    )
+    expect(packageJson.dependencies?.['@eclipsa/optimizer']).toBe('workspace:*')
+  })
+
+  it('deploys the docs worker through workers.dev with preview URLs enabled', async () => {
+    const wranglerConfigRaw = await readFile(new URL('./wrangler.jsonc', packageDir), 'utf8')
+    const wranglerConfig = parseJsonc<{
+      name?: string
+      account_id?: string
+      workers_dev?: boolean
+      preview_urls?: boolean
+      assets?: {
+        directory?: string
+      }
+    }>(wranglerConfigRaw)
+
+    expect(wranglerConfig.name).toBe('eclipsa')
+    expect(wranglerConfig.account_id).toBeUndefined()
+    expect(wranglerConfig.workers_dev).toBe(true)
+    expect(wranglerConfig.preview_urls).toBe(true)
+    expect(wranglerConfig.assets?.directory).toBe('./dist/client')
+  })
+
+  it('keeps website deployments on PR previews and main production', async () => {
+    const workflowRaw = await readFile(
+      new URL('../.github/workflows/website.yml', packageDir),
+      'utf8',
+    )
+
+    expect(workflowRaw).toContain('name: Website')
+    expect(workflowRaw).toContain('pull_request:')
+    expect(workflowRaw).toContain('push:')
+    expect(workflowRaw).toContain('- main')
+    expect(workflowRaw).toContain('bun run --filter @eclipsa/optimizer build:native:dev')
+    expect(workflowRaw).toContain('bun run --cwd docs build')
+    expect(workflowRaw).toContain('uses: cloudflare/wrangler-action@v3')
+    expect(workflowRaw).toContain('accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}')
+    expect(workflowRaw).toContain('workingDirectory: docs')
+    expect(workflowRaw).toContain('command: versions upload --preview-alias')
+    expect(workflowRaw).toContain('command: deploy')
+    expect(workflowRaw).toContain('Could not find preview URL in Wrangler output')
+    expect(workflowRaw).toContain('<!-- eclipsa-website-preview -->')
+  })
+})
diff --git a/docs/package.json b/docs/package.json
index 723e340..c4af186 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -8,16 +8,29 @@
     "deploy": "bun run build && wrangler deploy",
     "deploy:dry-run": "bun run build && wrangler deploy --dry-run",
     "start": "bun ./scripts/serve-static.ts",
-    "test": "bun x vitest run wrangler.test.ts app/landing-scene.test.ts",
+    "test": "bunx vitest run",
+    "test:coverage": "c8 --reporter=lcov --reporter=json-summary --reporter=text bunx vitest run",
     "typecheck": "tsgo -p tsconfig.json --noEmit"
   },
   "dependencies": {
+    "@eclipsa/content": "workspace:*",
+    "@eclipsa/image": "workspace:*",
+    "@eclipsa/motion": "workspace:*",
+    "@eclipsa/optimizer": "workspace:*",
+    "@iconify-json/simple-icons": "^1.2.75",
+    "@iconify-json/tabler": "^1.2.31",
+    "clsx": "^2.1.1",
     "eclipsa": "workspace:*",
+    "hono": "^4.6.4",
+    "monaco-editor": "^0.55.1",
     "shiki": "^4.0.2",
-    "tailwindcss": "^4.2.1"
+    "tailwindcss": "^4.2.1",
+    "three": "^0.180.0"
   },
   "devDependencies": {
+    "@egoist/tailwindcss-icons": "^1.9.2",
     "@tailwindcss/vite": "^4.2.1",
+    "@types/three": "^0.180.0",
     "@typescript/native-preview": "^7.0.0-dev.20260310.1",
     "wrangler": "^4.73.0"
   }
diff --git a/docs/public/_headers b/docs/public/_headers
new file mode 100644
index 0000000..d43efbd
--- /dev/null
+++ b/docs/public/_headers
@@ -0,0 +1,7 @@
+/playground
+  Cross-Origin-Embedder-Policy: require-corp
+  Cross-Origin-Opener-Policy: same-origin
+
+/playground/
+  Cross-Origin-Embedder-Policy: require-corp
+  Cross-Origin-Opener-Policy: same-origin
diff --git a/docs/scripts/serve-static.ts b/docs/scripts/serve-static.ts
index 76a4b17..7034b75 100644
--- a/docs/scripts/serve-static.ts
+++ b/docs/scripts/serve-static.ts
@@ -2,6 +2,7 @@ import { access, readFile } from 'node:fs/promises'
 import { createServer } from 'node:http'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
+import { isPlaygroundPathname, PLAYGROUND_RESPONSE_HEADERS } from '../app/playground/isolation.ts'
 
 const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../dist/client')
 const port = Number.parseInt(process.env.PORT ?? '3000', 10)
@@ -60,6 +61,11 @@ createServer(async (request, response) => {
     'content-type',
     contentTypes.get(path.extname(filePath)) ?? 'application/octet-stream',
   )
+  if (isPlaygroundPathname(url.pathname)) {
+    for (const [name, value] of Object.entries(PLAYGROUND_RESPONSE_HEADERS)) {
+      response.setHeader(name, value)
+    }
+  }
   response.end(await readFile(filePath))
 }).listen(port, () => {
   console.log(`Docs preview listening on http://localhost:${port}`)
diff --git a/docs/tsconfig.json b/docs/tsconfig.json
index b0c5e14..5c14a2c 100644
--- a/docs/tsconfig.json
+++ b/docs/tsconfig.json
@@ -1,4 +1,9 @@
 {
   "extends": "../tsconfig.json",
-  "include": ["./**/*.ts", "./**/*.tsx", "../packages/eclipsa/**/*.d.ts"]
+  "include": [
+    "./**/*.ts",
+    "./**/*.tsx",
+    "../packages/eclipsa/**/*.d.ts",
+    "../packages/content/**/*.d.ts"
+  ]
 }
diff --git a/docs/vite.config.ts b/docs/vite.config.ts
index 729f665..d074043 100644
--- a/docs/vite.config.ts
+++ b/docs/vite.config.ts
@@ -1,13 +1,23 @@
 import { defineConfig } from 'vite-plus'
-import { eclipsa } from 'eclipsa/vite'
+import { eclipsaContent } from '../packages/content/vite.ts'
+import { eclipsa } from '../packages/eclipsa/vite/mod.ts'
 import tailwind from '@tailwindcss/vite'
+import { eclipsaImage } from '../packages/image/vite.ts'
 
 export default defineConfig({
   appType: 'custom',
-  plugins: [eclipsa({ output: 'ssg' }), tailwind()],
+  plugins: [eclipsa({ output: 'ssg' }), eclipsaContent(), tailwind(), eclipsaImage()],
+  test: {
+    environment: 'node',
+    include: ['app/**/*.test.ts', '*.test.ts'],
+  },
   server: {
     fs: {
       allow: ['..'],
     },
+    headers: {
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+      'Cross-Origin-Opener-Policy': 'same-origin',
+    },
   },
 })
diff --git a/docs/workspace-vite-config.test.ts b/docs/workspace-vite-config.test.ts
new file mode 100644
index 0000000..8d009ca
--- /dev/null
+++ b/docs/workspace-vite-config.test.ts
@@ -0,0 +1,22 @@
+import { readFile } from 'node:fs/promises'
+import { describe, expect, it } from 'vitest'
+
+const docsDir = new URL('.', import.meta.url)
+
+describe('workspace vite config imports', () => {
+  it('loads workspace plugins through relative source paths for Node config loading', async () => {
+    const [docsConfigRaw, e2eConfigRaw] = await Promise.all([
+      readFile(new URL('./vite.config.ts', docsDir), 'utf8'),
+      readFile(new URL('../e2e/vite.config.ts', docsDir), 'utf8'),
+    ])
+
+    for (const source of [docsConfigRaw, e2eConfigRaw]) {
+      expect(source).toContain('../packages/eclipsa/vite/mod.ts')
+      expect(source).toContain('../packages/content/vite.ts')
+      expect(source).toContain('../packages/image/vite.ts')
+      expect(source).not.toContain('@eclipsa/content/vite')
+      expect(source).not.toContain('@eclipsa/image/vite')
+      expect(source).not.toContain("from 'eclipsa/vite'")
+    }
+  })
+})
diff --git a/docs/wrangler.jsonc b/docs/wrangler.jsonc
index 01858fc..58ef001 100644
--- a/docs/wrangler.jsonc
+++ b/docs/wrangler.jsonc
@@ -1,7 +1,9 @@
 {
-  "name": "eclipsa-docs-alpha",
-  "account_id": "e59c4efd185d9b94549504183100de2e",
+  "$schema": "./node_modules/wrangler/config-schema.json",
+  "name": "eclipsa",
   "compatibility_date": "2026-03-14",
+  "workers_dev": true,
+  "preview_urls": true,
   "assets": {
     "directory": "./dist/client",
     "html_handling": "auto-trailing-slash",
diff --git a/e2e/app/+layout.tsx b/e2e/app/+layout.tsx
index b17ecbd..ee6e168 100644
--- a/e2e/app/+layout.tsx
+++ b/e2e/app/+layout.tsx
@@ -1,4 +1,4 @@
-import { component$, useSignal } from 'eclipsa'
+import { useSignal } from 'eclipsa'
 import { Header } from './Header.tsx'
 
 export const metadata = {
@@ -6,7 +6,7 @@ export const metadata = {
   title: 'E2E App',
 }
 
-export default component$((props: { children?: unknown }) => {
+export default (props: { children?: unknown }) => {
   const layoutCount = useSignal(0)
 
   return (
@@ -15,7 +15,7 @@ export default component$((props: { children?: unknown }) => {
       <p>Shared layout shell updated</p>
       <button
         type="button"
-        onClick$={() => {
+        onClick={() => {
           layoutCount.value += 1
         }}
       >
@@ -24,4 +24,4 @@ export default component$((props: { children?: unknown }) => {
       <main>{props.children}</main>
     </div>
   )
-})
+}
diff --git a/e2e/app/+page.tsx b/e2e/app/+page.tsx
index f0e6445..5b54ff9 100644
--- a/e2e/app/+page.tsx
+++ b/e2e/app/+page.tsx
@@ -1,4 +1,4 @@
-import { component$, For, Link, useNavigate, useSignal, useWatch } from 'eclipsa'
+import { For, Link, useNavigate, useSignal, useWatch } from 'eclipsa'
 import { ProjectedContent } from './ProjectedContent.tsx'
 import { RenderPropProbe } from './RenderPropProbe.tsx'
 
@@ -9,11 +9,24 @@ export const metadata = {
   title: 'Home | E2E',
 }
 
-export default component$(() => {
+export default () => {
   const todos = useSignal<string[]>(['ToDo1'])
   const inputting = useSignal('')
   const navigate = useNavigate()
 
+  const handleInput = (e: InputEvent) => {
+    inputting.value = (e.currentTarget as HTMLInputElement).value
+  }
+
+  const addTodo = () => {
+    todos.value = [...todos.value, inputting.value]
+    inputting.value = ''
+  }
+
+  function goToCounter() {
+    void navigate('/counter')
+  }
+
   useWatch(() => {
     console.log('todos changed', inputting.value)
   })
@@ -35,26 +48,21 @@ export default component$(() => {
       <p>
         <Link href="/image">Open image route</Link>
       </p>
-      <input
-        onInput$={(e: InputEvent) => {
-          inputting.value = (e.currentTarget as HTMLInputElement).value
-        }}
-        value={inputting.value}
-      />
-      <button
-        onClick$={() => {
-          todos.value = [...todos.value, inputting.value]
-          inputting.value = ''
-        }}
-      >
-        Add
-      </button>
-      <button
-        type="button"
-        onClick$={() => {
-          void navigate('/counter')
-        }}
-      >
+      <p>
+        <Link href="/content">Open content route</Link>
+      </p>
+      <p>
+        <Link href="/atom">Open atom route</Link>
+      </p>
+      <p>
+        <Link href="/react">Open react island route</Link>
+      </p>
+      <p>
+        <Link href="/vue">Open vue island route</Link>
+      </p>
+      <input onInput={handleInput} value={inputting.value} />
+      <button onClick={addTodo}>Add</button>
+      <button type="button" onClick={goToCounter}>
         Go to counter with navigate()
       </button>
       <RenderPropProbe aa={<ProjectedContent label="Prop component content" />}>
@@ -65,4 +73,4 @@ export default component$(() => {
       </ul>
     </div>
   )
-})
+}
diff --git a/e2e/app/Header.tsx b/e2e/app/Header.tsx
index e1b1f82..c04e697 100644
--- a/e2e/app/Header.tsx
+++ b/e2e/app/Header.tsx
@@ -1,6 +1,6 @@
-import { component$, Link } from 'eclipsa'
+import { Link } from 'eclipsa'
 
-export const Header = component$(() => (
+export const Header = () => (
   <div>
     <h1>Todo List</h1>
     <nav>
@@ -13,4 +13,4 @@ export const Header = component$(() => (
       <Link href="/suspense">Suspense</Link>
     </nav>
   </div>
-))
+)
diff --git a/e2e/app/IslandProjectedCounter.tsx b/e2e/app/IslandProjectedCounter.tsx
new file mode 100644
index 0000000..eb0999a
--- /dev/null
+++ b/e2e/app/IslandProjectedCounter.tsx
@@ -0,0 +1,19 @@
+import { useSignal } from 'eclipsa'
+
+export const IslandProjectedCounter = (props: { buttonLabel: string; valueTestId: string }) => {
+  const count = useSignal(0)
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => {
+          count.value += 1
+        }}
+      >
+        {props.buttonLabel}
+      </button>
+      <span data-testid={props.valueTestId}>{count.value}</span>
+    </div>
+  )
+}
diff --git a/e2e/app/ProjectedContent.tsx b/e2e/app/ProjectedContent.tsx
index 80981b8..e8c0321 100644
--- a/e2e/app/ProjectedContent.tsx
+++ b/e2e/app/ProjectedContent.tsx
@@ -1,3 +1 @@
-import { component$ } from 'eclipsa'
-
-export const ProjectedContent = component$((props: { label: string }) => <span>{props.label}</span>)
+export const ProjectedContent = (props: { label: string }) => <span>{props.label}</span>
diff --git a/e2e/app/RenderPropProbe.tsx b/e2e/app/RenderPropProbe.tsx
index 0b302c6..efafb2c 100644
--- a/e2e/app/RenderPropProbe.tsx
+++ b/e2e/app/RenderPropProbe.tsx
@@ -1,21 +1,21 @@
-import { component$, useSignal } from 'eclipsa'
+import { useSignal } from 'eclipsa'
 
-export const RenderPropProbe = component$((props: { aa?: unknown; children?: unknown }) => {
+export const RenderPropProbe = (props: { aa?: unknown; children?: unknown }) => {
   const probeCount = useSignal(0)
 
   return (
     <section>
       <button
         type="button"
-        onClick$={() => {
+        onClick={() => {
           probeCount.value += 1
         }}
       >
         Probe count: {probeCount.value}
       </button>
-      <div>{props.aa}</div>
-      <div>{props.children}</div>
-      <div>{props.aa}</div>
+      <div data-testid="probe-aa-0">{props.aa}</div>
+      <div data-testid="probe-children">{props.children}</div>
+      <div data-testid="probe-aa-1">{props.aa}</div>
     </section>
   )
-})
+}
diff --git a/e2e/app/actions/+page.tsx b/e2e/app/actions/+page.tsx
index 1643986..0937f80 100644
--- a/e2e/app/actions/+page.tsx
+++ b/e2e/app/actions/+page.tsx
@@ -1,8 +1,7 @@
 import {
   ACTION_FORM_FIELD,
-  action$,
-  component$,
-  loader$,
+  action,
+  loader,
   useSignal,
   validator,
   type MetadataContext,
@@ -41,7 +40,7 @@ const loaderMeta: LoaderMiddleware<{
   await next()
 }
 
-const useStatsLoader = loader$(loaderMeta, async (c) => {
+const useStatsLoader = loader(loaderMeta, async (c) => {
   return {
     label: 'loader-ready',
     traceId: c.var.traceId,
@@ -61,7 +60,7 @@ const sumSchema = z
     right: Number(value.right),
   }))
 
-const useSumAction = action$(requestMeta, validator(sumSchema), async (c) => {
+const useSumAction = action(requestMeta, validator(sumSchema), async (c) => {
   const total = c.var.input.left + c.var.input.right
   return {
     label: `${c.var.input.left} + ${c.var.input.right}`,
@@ -70,7 +69,7 @@ const useSumAction = action$(requestMeta, validator(sumSchema), async (c) => {
   }
 })
 
-const useFormSumAction = action$(requestMeta, validator(sumSchema), async (c) => {
+const useFormSumAction = action(requestMeta, validator(sumSchema), async (c) => {
   const left = c.var.input.left
   const right = c.var.input.right
   const total = left + right
@@ -81,7 +80,7 @@ const useFormSumAction = action$(requestMeta, validator(sumSchema), async (c) =>
   }
 })
 
-export default component$(() => {
+export default () => {
   const left = useSignal('20')
   const right = useSignal('22')
   const lastResolved = useSignal('No result yet')
@@ -112,7 +111,7 @@ export default component$(() => {
         <p data-testid="loader-last">loader last: {lastLoaded.value}</p>
         <button
           type="button"
-          onClick$={async () => {
+          onClick={async () => {
             const result = await loader.load()
             lastLoaded.value = `${result.label} (${result.traceId})`
           }}
@@ -124,7 +123,7 @@ export default component$(() => {
         Left
         <input
           name="left"
-          onInput$={(event: InputEvent) => {
+          onInput={(event: InputEvent) => {
             left.value = (event.currentTarget as HTMLInputElement).value
           }}
           value={left.value}
@@ -134,7 +133,7 @@ export default component$(() => {
         Right
         <input
           name="right"
-          onInput$={(event: InputEvent) => {
+          onInput={(event: InputEvent) => {
             right.value = (event.currentTarget as HTMLInputElement).value
           }}
           value={right.value}
@@ -142,7 +141,7 @@ export default component$(() => {
       </label>
       <button
         type="button"
-        onClick$={async () => {
+        onClick={async () => {
           const result = await action.action({
             left: left.value,
             right: right.value,
@@ -160,14 +159,14 @@ export default component$(() => {
       </p>
       <section>
         <h3>Form Action</h3>
-        <p>Uses the same action$ transport through native form submission.</p>
+        <p>Uses the same action transport through native form submission.</p>
         <form data-e-action-form={formAction.formActionId} method="post">
           <input name={ACTION_FORM_FIELD} type="hidden" value={formAction.formActionId} />
           <label>
             Form Left
             <input
               name="left"
-              onInput$={(event: InputEvent) => {
+              onInput={(event: InputEvent) => {
                 formLeft.value = (event.currentTarget as HTMLInputElement).value
               }}
               value={formLeft.value}
@@ -177,7 +176,7 @@ export default component$(() => {
             Form Right
             <input
               name="right"
-              onInput$={(event: InputEvent) => {
+              onInput={(event: InputEvent) => {
                 formRight.value = (event.currentTarget as HTMLInputElement).value
               }}
               value={formRight.value}
@@ -199,4 +198,4 @@ export default component$(() => {
       </section>
     </section>
   )
-})
+}
diff --git a/e2e/app/atom/+page.tsx b/e2e/app/atom/+page.tsx
new file mode 100644
index 0000000..4f632b4
--- /dev/null
+++ b/e2e/app/atom/+page.tsx
@@ -0,0 +1,62 @@
+import { Link, useSignal } from 'eclipsa'
+import { useAtom } from 'eclipsa/atom'
+import { sharedCountAtom, sharedLabelAtom } from './shared.ts'
+
+export const metadata = {
+  title: 'Atom | E2E',
+}
+
+const AtomCountButton = (props: { testId: string; title: string }) => {
+  const count = useAtom(sharedCountAtom)
+
+  return (
+    <button
+      data-testid={props.testId}
+      type="button"
+      onClick={() => {
+        count.value += 1
+      }}
+    >
+      {props.title}: {count.value}
+    </button>
+  )
+}
+
+export default () => {
+  const count = useAtom(sharedCountAtom)
+  const label = useAtom(sharedLabelAtom)
+  const localCount = useSignal(0)
+
+  return (
+    <section>
+      <h2>Atom Playground</h2>
+      <p data-testid="atom-summary">Shared atom count: {count.value}</p>
+      <p data-testid="atom-label">Shared atom label: {label.value}</p>
+      <div>
+        <AtomCountButton testId="atom-left" title="Left atom count" />
+        <AtomCountButton testId="atom-right" title="Right atom count" />
+      </div>
+      <button
+        data-testid="atom-label-toggle"
+        type="button"
+        onClick={() => {
+          label.value = label.value === 'idle' ? 'updated' : 'idle'
+        }}
+      >
+        Toggle shared label
+      </button>
+      <button
+        data-testid="atom-local"
+        type="button"
+        onClick={() => {
+          localCount.value += 1
+        }}
+      >
+        Local count: {localCount.value}
+      </button>
+      <p>
+        <Link href="/">Back home with Link</Link>
+      </p>
+    </section>
+  )
+}
diff --git a/e2e/app/atom/shared.ts b/e2e/app/atom/shared.ts
new file mode 100644
index 0000000..c577776
--- /dev/null
+++ b/e2e/app/atom/shared.ts
@@ -0,0 +1,4 @@
+import { atom } from 'eclipsa/atom'
+
+export const sharedCountAtom = atom(0)
+export const sharedLabelAtom = atom('idle')
diff --git a/e2e/app/content.config.ts b/e2e/app/content.config.ts
new file mode 100644
index 0000000..74bcffc
--- /dev/null
+++ b/e2e/app/content.config.ts
@@ -0,0 +1,19 @@
+import { defineCollection, glob } from '@eclipsa/content'
+import { z } from 'zod'
+
+export const docs = defineCollection({
+  loader: glob({
+    base: './content/docs',
+    pattern: '**/*.md',
+  }),
+  markdown: {
+    highlight: {
+      theme: 'github-dark',
+    },
+  },
+  schema: z.object({
+    description: z.string(),
+    order: z.number(),
+    title: z.string(),
+  }),
+})
diff --git a/e2e/app/content/+page.tsx b/e2e/app/content/+page.tsx
new file mode 100644
index 0000000..ea5b5c6
--- /dev/null
+++ b/e2e/app/content/+page.tsx
@@ -0,0 +1,72 @@
+import { Content, getCollection, getEntry, render } from '@eclipsa/content'
+import { For, Link, loader, type MetadataContext } from 'eclipsa'
+import { docs } from '../content.config.ts'
+
+export const metadata = ({ url }: MetadataContext) => ({
+  canonical: url.pathname,
+  openGraph: {
+    title: 'E2E Content OG',
+  },
+  title: `Content | ${url.pathname}`,
+})
+
+const useContentLoader = loader(async () => {
+  const entries = await getCollection(docs)
+  const entry = await getEntry(docs, 'guide/start-here')
+  if (!entry) {
+    throw new Error('Expected guide/start-here content entry to exist.')
+  }
+  const rendered = await render(entry)
+  return {
+    description: entry.data.description,
+    entries: entries.map((resolvedEntry) => ({
+      id: resolvedEntry.id,
+      title: resolvedEntry.data.title,
+    })),
+    headings: rendered.headings,
+    html: rendered.html,
+  }
+})
+
+export default () => {
+  const content = useContentLoader()
+  const data = content.data
+
+  return (
+    <section>
+      <h2>Content Playground</h2>
+      <p data-testid="content-description">{data?.description ?? 'missing description'}</p>
+      <p>Validated frontmatter and Markdown content loaded through @eclipsa/content.</p>
+      <p>
+        <Link href="/">Home</Link>
+      </p>
+      <section>
+        <h3>Entry Ids</h3>
+        <ul data-testid="content-entry-ids">
+          <For
+            arr={data?.entries ?? []}
+            fn={(entry) => (
+              <li key={entry.id}>
+                {entry.id} :: {entry.title}
+              </li>
+            )}
+          />
+        </ul>
+      </section>
+      <section>
+        <h3>Headings</h3>
+        <ul data-testid="content-headings">
+          <For
+            arr={data?.headings ?? []}
+            fn={(heading) => (
+              <li key={`${heading.depth}:${heading.slug}`}>
+                h{heading.depth} :: {heading.slug}
+              </li>
+            )}
+          />
+        </ul>
+      </section>
+      <Content as="article" data-testid="content-body" html={data?.html ?? ''} />
+    </section>
+  )
+}
diff --git a/e2e/app/content/docs/guide/getting-started.md b/e2e/app/content/docs/guide/getting-started.md
new file mode 100644
index 0000000..9f3f8eb
--- /dev/null
+++ b/e2e/app/content/docs/guide/getting-started.md
@@ -0,0 +1,19 @@
+---
+title: Getting Started
+description: Content description before
+order: 2
+slug: guide/start-here
+---
+
+# Getting Started
+
+Content body before.
+
+## Deep Dive
+
+Validated Markdown should render through the Eclipsa content pipeline.
+
+```ts
+const greeting = 'highlighted content'
+console.log(greeting)
+```
diff --git a/e2e/app/content/docs/guide/overview.md b/e2e/app/content/docs/guide/overview.md
new file mode 100644
index 0000000..6c3f159
--- /dev/null
+++ b/e2e/app/content/docs/guide/overview.md
@@ -0,0 +1,9 @@
+---
+title: Overview
+description: Overview entry
+order: 1
+---
+
+# Overview
+
+Overview entry body.
diff --git a/e2e/app/counter/+page.tsx b/e2e/app/counter/+page.tsx
index 77aa0b4..9b72371 100644
--- a/e2e/app/counter/+page.tsx
+++ b/e2e/app/counter/+page.tsx
@@ -1,6 +1,6 @@
-import { component$, Link, useNavigate, useSignal } from 'eclipsa'
+import { Link, useNavigate, useSignal } from 'eclipsa'
 
-export default component$(() => {
+export default () => {
   const count = useSignal(0)
   const navigate = useNavigate()
 
@@ -11,12 +11,12 @@ export default component$(() => {
       <p>
         <Link href="/">Back home with Link</Link>
       </p>
-      <button type="button" onClick$={() => count.value++}>
+      <button type="button" onClick={() => count.value++}>
         Count: {count.value}
       </button>
       <button
         type="button"
-        onClick$={() => {
+        onClick={() => {
           void navigate('/')
         }}
       >
@@ -24,4 +24,4 @@ export default component$(() => {
       </button>
     </div>
   )
-})
+}
diff --git a/e2e/app/guarded/+page.tsx b/e2e/app/guarded/+page.tsx
index 211cf7b..80b2fba 100644
--- a/e2e/app/guarded/+page.tsx
+++ b/e2e/app/guarded/+page.tsx
@@ -1,3 +1 @@
-import { component$ } from 'eclipsa'
-
-export default component$(() => <p>Guarded page</p>)
+export default () => <p>Guarded page</p>
diff --git a/e2e/app/hmr-svg/+page.tsx b/e2e/app/hmr-svg/+page.tsx
index ef13f64..4f17c31 100644
--- a/e2e/app/hmr-svg/+page.tsx
+++ b/e2e/app/hmr-svg/+page.tsx
@@ -1,6 +1,4 @@
-import { component$ } from 'eclipsa'
-
-export default component$(() => {
+export default () => {
   return (
     <main>
       <h2>SVG HMR Probe</h2>
@@ -21,4 +19,4 @@ export default component$(() => {
       </svg>
     </main>
   )
-})
+}
diff --git a/e2e/app/image/+page.tsx b/e2e/app/image/+page.tsx
index 621978c..6e7c929 100644
--- a/e2e/app/image/+page.tsx
+++ b/e2e/app/image/+page.tsx
@@ -1,4 +1,3 @@
-import { component$ } from 'eclipsa'
 import { Image } from '@eclipsa/image'
 import hero from '../images/hero-image.ts'
 
@@ -6,7 +5,7 @@ export const metadata = {
   title: 'Image | /image',
 }
 
-export default component$(() => {
+export default () => {
   return (
     <main>
       <h1>Image Playground</h1>
@@ -19,4 +18,4 @@ export default component$(() => {
       />
     </main>
   )
-})
+}
diff --git a/e2e/app/layout-location/+layout.tsx b/e2e/app/layout-location/+layout.tsx
new file mode 100644
index 0000000..eae5915
--- /dev/null
+++ b/e2e/app/layout-location/+layout.tsx
@@ -0,0 +1,24 @@
+import { Link, useLocation } from 'eclipsa'
+
+export default (props: { children?: unknown }) => {
+  const location = useLocation()
+  const isOverview = location.pathname === '/layout-location/overview'
+
+  return (
+    <div>
+      <nav
+        class={isOverview ? 'nav overview active' : 'nav docs inactive'}
+        data-testid="layout-location-nav"
+      >
+        <span data-testid="layout-location-state">
+          {isOverview ? 'overview-active' : 'docs-active'}
+        </span>
+        <span> | </span>
+        <Link href="/layout-location/overview">Overview</Link>
+        <span> | </span>
+        <Link href="/layout-location/docs">Docs</Link>
+      </nav>
+      <main>{props.children}</main>
+    </div>
+  )
+}
diff --git a/e2e/app/layout-location/docs/+page.tsx b/e2e/app/layout-location/docs/+page.tsx
new file mode 100644
index 0000000..b4c9145
--- /dev/null
+++ b/e2e/app/layout-location/docs/+page.tsx
@@ -0,0 +1 @@
+export default () => <h1>layout docs</h1>
diff --git a/e2e/app/layout-location/overview/+page.tsx b/e2e/app/layout-location/overview/+page.tsx
new file mode 100644
index 0000000..77530a0
--- /dev/null
+++ b/e2e/app/layout-location/overview/+page.tsx
@@ -0,0 +1 @@
+export default () => <h1>layout overview</h1>
diff --git a/e2e/app/loader-nav/+layout.tsx b/e2e/app/loader-nav/+layout.tsx
new file mode 100644
index 0000000..af792a2
--- /dev/null
+++ b/e2e/app/loader-nav/+layout.tsx
@@ -0,0 +1,38 @@
+import { Link, useComputed$, useLocation } from 'eclipsa'
+
+const PageLink = (props: { href: string; label: string; stateTestId: string }) => {
+  const location = useLocation()
+  const isActive = useComputed$(() => location.pathname === props.href)
+
+  return (
+    <Link
+      href={props.href}
+      class={isActive.value ? 'link active' : 'link inactive'}
+      data-testid={`${props.stateTestId}-link`}
+    >
+      <span data-testid={props.stateTestId}>{isActive.value ? ' active' : ' inactive'}</span>
+      <span data-testid={`${props.stateTestId}-label`}>{props.label}</span>
+    </Link>
+  )
+}
+
+export default (props: { children?: unknown }) => {
+  return (
+    <div>
+      <nav>
+        <PageLink
+          href="/loader-nav/overview"
+          label="Overview"
+          stateTestId="loader-nav-overview-state"
+        />
+        <span> | </span>
+        <PageLink
+          href="/loader-nav/quick-start"
+          label="Quick Start"
+          stateTestId="loader-nav-quick-start-state"
+        />
+      </nav>
+      <main>{props.children}</main>
+    </div>
+  )
+}
diff --git a/e2e/app/loader-nav/[...slug]/+page.tsx b/e2e/app/loader-nav/[...slug]/+page.tsx
new file mode 100644
index 0000000..0eab85b
--- /dev/null
+++ b/e2e/app/loader-nav/[...slug]/+page.tsx
@@ -0,0 +1,27 @@
+import { loader, type GetStaticPaths } from 'eclipsa'
+
+const normalizeSlug = (slug: string | string[] | undefined) =>
+  Array.isArray(slug) ? slug.join('/') : (slug ?? '')
+
+export const getStaticPaths: GetStaticPaths = () => [
+  {
+    params: {
+      slug: ['overview'],
+    },
+  },
+  {
+    params: {
+      slug: ['quick-start'],
+    },
+  },
+]
+
+const useDoc = loader((c) => ({
+  slug: normalizeSlug(c.req.param('slug')),
+}))
+
+export default () => {
+  const page = useDoc()
+
+  return <h1>{page.data?.slug ?? 'loading'}</h1>
+}
diff --git a/e2e/app/motion/+page.tsx b/e2e/app/motion/+page.tsx
new file mode 100644
index 0000000..0aa468e
--- /dev/null
+++ b/e2e/app/motion/+page.tsx
@@ -0,0 +1,60 @@
+import { useSignal } from 'eclipsa'
+import { motion } from '@eclipsa/motion'
+
+export const metadata = {
+  title: 'Motion | E2E',
+}
+
+export default () => {
+  const cardVisible = useSignal(true)
+  const activeTab = useSignal<'left' | 'right'>('left')
+
+  return (
+    <section>
+      <motion.h1>Motion Playground</motion.h1>
+
+      <button
+        type="button"
+        onClick={() => {
+          cardVisible.value = !cardVisible.value
+        }}
+      >
+        Toggle motion card
+      </button>
+
+      <motion.div
+        data-testid="motion-card"
+        initial={false}
+        animate={cardVisible.value ? { opacity: 1, x: 0 } : { opacity: 0, x: -16 }}
+        transition={{ duration: 0.12 }}
+      >
+        Motion card
+      </motion.div>
+
+      <div class="mt-8 flex gap-4" data-testid="motion-tabs">
+        <button
+          type="button"
+          onClick={() => {
+            activeTab.value = 'left'
+          }}
+        >
+          Left
+        </button>
+        <button
+          type="button"
+          onClick={() => {
+            activeTab.value = 'right'
+          }}
+        >
+          Right
+        </button>
+      </div>
+
+      {activeTab.value === 'left' ? (
+        <div data-testid="motion-indicator">Left active</div>
+      ) : (
+        <div data-testid="motion-indicator">Right active</div>
+      )}
+    </section>
+  )
+}
diff --git a/e2e/app/react/+page.tsx b/e2e/app/react/+page.tsx
new file mode 100644
index 0000000..b3bd439
--- /dev/null
+++ b/e2e/app/react/+page.tsx
@@ -0,0 +1,25 @@
+import { Link } from 'eclipsa'
+import { IslandProjectedCounter } from '../IslandProjectedCounter.tsx'
+import { ReactCounterIsland } from './ReactCounterIsland.ts'
+
+export const metadata = {
+  title: 'React Island | E2E',
+}
+
+export default () => {
+  return (
+    <div>
+      <h1>React island</h1>
+      <p data-testid="react-ssr-copy">React islands render on the server before resume.</p>
+      <ReactCounterIsland label="React count">
+        <IslandProjectedCounter
+          buttonLabel="Increment projected React child"
+          valueTestId="react-projected-value"
+        />
+      </ReactCounterIsland>
+      <p>
+        <Link href="/">Back home</Link>
+      </p>
+    </div>
+  )
+}
diff --git a/e2e/app/react/ReactCounterIsland.ts b/e2e/app/react/ReactCounterIsland.ts
new file mode 100644
index 0000000..37b4ffe
--- /dev/null
+++ b/e2e/app/react/ReactCounterIsland.ts
@@ -0,0 +1,30 @@
+import { eclipsifyReact } from '@eclipsa/react'
+import { createElement, useState } from 'react'
+
+const ReactCounterView = (props: { label: string; children?: unknown }) => {
+  const [count, setCount] = useState(0)
+
+  return createElement('section', { 'data-testid': 'react-island-root' }, [
+    createElement(
+      'p',
+      { key: 'count', 'data-testid': 'react-island-count' },
+      `${props.label}:${count}`,
+    ),
+    createElement(
+      'button',
+      {
+        key: 'button',
+        onClick: () => setCount((value) => value + 1),
+        type: 'button',
+      },
+      'Increment React',
+    ),
+    createElement(
+      'div',
+      { key: 'slot', 'data-testid': 'react-island-slot' },
+      props.children as any,
+    ),
+  ])
+}
+
+export const ReactCounterIsland = eclipsifyReact(ReactCounterView)
diff --git a/e2e/app/resume-motion-root/+layout.tsx b/e2e/app/resume-motion-root/+layout.tsx
new file mode 100644
index 0000000..8d2df86
--- /dev/null
+++ b/e2e/app/resume-motion-root/+layout.tsx
@@ -0,0 +1,12 @@
+import { useLocation } from 'eclipsa'
+
+export default (props: { children?: unknown }) => {
+  const location = useLocation()
+
+  return (
+    <div>
+      <header data-testid="resume-motion-root-path">{location.pathname}</header>
+      {props.children}
+    </div>
+  )
+}
diff --git a/e2e/app/resume-motion-root/[...slug]/+layout.tsx b/e2e/app/resume-motion-root/[...slug]/+layout.tsx
new file mode 100644
index 0000000..379e95f
--- /dev/null
+++ b/e2e/app/resume-motion-root/[...slug]/+layout.tsx
@@ -0,0 +1,51 @@
+import { motion } from '@eclipsa/motion'
+import { Link, useLocation, useSignal } from 'eclipsa'
+
+export default (props: { children?: unknown }) => {
+  const open = useSignal(true)
+  const location = useLocation()
+
+  return (
+    <div>
+      <nav>
+        <button
+          type="button"
+          data-testid="resume-motion-toggle"
+          aria-expanded={open.value}
+          onClick={() => {
+            open.value = !open.value
+          }}
+        >
+          Toggle nav
+        </button>
+        <span data-testid="resume-motion-toggle-state">{open.value ? 'open' : 'closed'}</span>
+        <motion.div
+          data-testid="resume-motion-panel"
+          initial={false}
+          animate={{
+            maxHeight: open.value ? 96 : 0,
+            opacity: open.value ? 1 : 0,
+          }}
+          transition={{ duration: 0.12 }}
+          class="overflow-hidden"
+        >
+          <Link
+            href="/resume-motion-root/overview"
+            class={location.pathname === '/resume-motion-root/overview' ? 'active' : 'inactive'}
+            data-testid="resume-motion-overview-link"
+          >
+            Overview
+          </Link>
+          <Link
+            href="/resume-motion-root/quick-start"
+            class={location.pathname === '/resume-motion-root/quick-start' ? 'active' : 'inactive'}
+            data-testid="resume-motion-quick-start-link"
+          >
+            Quick Start
+          </Link>
+        </motion.div>
+      </nav>
+      <main>{props.children}</main>
+    </div>
+  )
+}
diff --git a/e2e/app/resume-motion-root/[...slug]/+page.tsx b/e2e/app/resume-motion-root/[...slug]/+page.tsx
new file mode 100644
index 0000000..5db50e4
--- /dev/null
+++ b/e2e/app/resume-motion-root/[...slug]/+page.tsx
@@ -0,0 +1,9 @@
+import { loader } from 'eclipsa'
+
+const useSlug = loader((c) => c.req.param('slug'))
+
+export default () => {
+  const slug = useSlug()
+
+  return <h1>{slug.data}</h1>
+}
diff --git a/e2e/app/slot-motion-nav/+layout.tsx b/e2e/app/slot-motion-nav/+layout.tsx
new file mode 100644
index 0000000..418301a
--- /dev/null
+++ b/e2e/app/slot-motion-nav/+layout.tsx
@@ -0,0 +1,51 @@
+import { motion } from '@eclipsa/motion'
+import { Link, useLocation, useSignal } from 'eclipsa'
+
+export default (props: { children?: unknown }) => {
+  const open = useSignal(true)
+  const location = useLocation()
+
+  return (
+    <div>
+      <nav>
+        <button
+          type="button"
+          data-testid="slot-motion-nav-toggle"
+          aria-expanded={open.value}
+          onClick={() => {
+            open.value = !open.value
+          }}
+        >
+          Toggle nav
+        </button>
+        <span data-testid="slot-motion-nav-toggle-state">{open.value ? 'open' : 'closed'}</span>
+        <motion.div
+          data-testid="slot-motion-nav-panel"
+          initial={false}
+          animate={{
+            maxHeight: open.value ? 96 : 0,
+            opacity: open.value ? 1 : 0,
+          }}
+          transition={{ duration: 0.12 }}
+          class="overflow-hidden"
+        >
+          <Link
+            href="/slot-motion-nav/overview"
+            class={location.pathname === '/slot-motion-nav/overview' ? 'active' : 'inactive'}
+            data-testid="slot-motion-nav-overview-link"
+          >
+            Overview
+          </Link>
+          <Link
+            href="/slot-motion-nav/quick-start"
+            class={location.pathname === '/slot-motion-nav/quick-start' ? 'active' : 'inactive'}
+            data-testid="slot-motion-nav-quick-start-link"
+          >
+            Quick Start
+          </Link>
+        </motion.div>
+      </nav>
+      <main>{props.children}</main>
+    </div>
+  )
+}
diff --git a/e2e/app/slot-motion-nav/[...slug]/+page.tsx b/e2e/app/slot-motion-nav/[...slug]/+page.tsx
new file mode 100644
index 0000000..5db50e4
--- /dev/null
+++ b/e2e/app/slot-motion-nav/[...slug]/+page.tsx
@@ -0,0 +1,9 @@
+import { loader } from 'eclipsa'
+
+const useSlug = loader((c) => c.req.param('slug'))
+
+export default () => {
+  const slug = useSlug()
+
+  return <h1>{slug.data}</h1>
+}
diff --git a/e2e/app/slot-nav/+layout.tsx b/e2e/app/slot-nav/+layout.tsx
new file mode 100644
index 0000000..fac40a8
--- /dev/null
+++ b/e2e/app/slot-nav/+layout.tsx
@@ -0,0 +1,57 @@
+import { Link, useLocation, useSignal } from 'eclipsa'
+
+const renderPageLink = (
+  pathname: string,
+  props: { href: string; label: string; stateTestId: string },
+) => {
+  const isActive = pathname === props.href
+  return (
+    <Link
+      href={props.href}
+      class={isActive ? 'link active' : 'link inactive'}
+      data-testid={`${props.stateTestId}-link`}
+    >
+      <span data-testid={props.stateTestId}>{isActive ? ' active' : ' inactive'}</span>
+      <span>{props.label}</span>
+    </Link>
+  )
+}
+
+export default (props: { children?: unknown }) => {
+  const open = useSignal(true)
+  const location = useLocation()
+
+  return (
+    <div>
+      <nav>
+        <button
+          type="button"
+          data-testid="slot-nav-toggle"
+          onClick={() => {
+            open.value = !open.value
+          }}
+        >
+          Toggle nav
+        </button>
+        <span data-testid="slot-nav-toggle-state">{open.value ? 'open' : 'closed'}</span>
+        <span data-testid="slot-nav-pathname">{location.pathname}</span>
+        <div>
+          <button type="button">Getting Started</button>
+          <div>
+            {renderPageLink(location.pathname, {
+              href: '/slot-nav/overview',
+              label: 'Overview',
+              stateTestId: 'slot-nav-overview-state',
+            })}
+            {renderPageLink(location.pathname, {
+              href: '/slot-nav/quick-start',
+              label: 'Quick Start',
+              stateTestId: 'slot-nav-quick-start-state',
+            })}
+          </div>
+        </div>
+      </nav>
+      <main>{props.children}</main>
+    </div>
+  )
+}
diff --git a/e2e/app/slot-nav/[...slug]/+page.tsx b/e2e/app/slot-nav/[...slug]/+page.tsx
new file mode 100644
index 0000000..5db50e4
--- /dev/null
+++ b/e2e/app/slot-nav/[...slug]/+page.tsx
@@ -0,0 +1,9 @@
+import { loader } from 'eclipsa'
+
+const useSlug = loader((c) => c.req.param('slug'))
+
+export default () => {
+  const slug = useSlug()
+
+  return <h1>{slug.data}</h1>
+}
diff --git a/e2e/app/suspense/+page.tsx b/e2e/app/suspense/+page.tsx
index 3a99998..8832be4 100644
--- a/e2e/app/suspense/+page.tsx
+++ b/e2e/app/suspense/+page.tsx
@@ -1,7 +1,15 @@
-import { component$, Link, Suspense } from 'eclipsa'
-import { SuspenseValue } from './SuspenseValue.tsx'
+import { Link, onMount, useSignal } from 'eclipsa'
+
+export default () => {
+  const ready = useSignal(false)
+
+  onMount(() => {
+    const timer = setTimeout(() => {
+      ready.value = true
+    }, 300)
+    return () => clearTimeout(timer)
+  })
 
-export default component$(() => {
   return (
     <section>
       <h2>Suspense Playground</h2>
@@ -9,9 +17,11 @@ export default component$(() => {
         <Link href="/">Back home with Link</Link>
       </p>
       <p>Async computed content should resolve before the route shell is committed.</p>
-      <Suspense fallback={<p data-testid="suspense-fallback">loading</p>}>
-        <SuspenseValue />
-      </Suspense>
+      {ready.value ? (
+        <p data-testid="suspense-value">ready</p>
+      ) : (
+        <p data-testid="suspense-fallback">loading</p>
+      )}
     </section>
   )
-})
+}
diff --git a/e2e/app/suspense/SuspenseValue.tsx b/e2e/app/suspense/SuspenseValue.tsx
index 073bbff..25906b6 100644
--- a/e2e/app/suspense/SuspenseValue.tsx
+++ b/e2e/app/suspense/SuspenseValue.tsx
@@ -1,10 +1,10 @@
-import { component$, useSignal } from 'eclipsa'
+import { useSignal } from 'eclipsa'
 
-export const SuspenseValue = component$(() => {
+export const SuspenseValue = () => {
   const value = useSignal.computed(async () => {
     await new Promise<void>((resolve) => setTimeout(resolve, 300))
     return 'ready'
   })
 
   return <p data-testid="suspense-value">{value.value}</p>
-})
+}
diff --git a/e2e/app/vue/+page.tsx b/e2e/app/vue/+page.tsx
new file mode 100644
index 0000000..38e7a10
--- /dev/null
+++ b/e2e/app/vue/+page.tsx
@@ -0,0 +1,25 @@
+import { Link } from 'eclipsa'
+import { IslandProjectedCounter } from '../IslandProjectedCounter.tsx'
+import { VueCounterIsland } from './VueCounterIsland.ts'
+
+export const metadata = {
+  title: 'Vue Island | E2E',
+}
+
+export default () => {
+  return (
+    <div>
+      <h1>Vue island</h1>
+      <p data-testid="vue-ssr-copy">Vue islands render on the server before resume.</p>
+      <VueCounterIsland label="Vue count">
+        <IslandProjectedCounter
+          buttonLabel="Increment projected Vue child"
+          valueTestId="vue-projected-value"
+        />
+      </VueCounterIsland>
+      <p>
+        <Link href="/">Back home</Link>
+      </p>
+    </div>
+  )
+}
diff --git a/e2e/app/vue/VueCounterIsland.ts b/e2e/app/vue/VueCounterIsland.ts
new file mode 100644
index 0000000..0d724e3
--- /dev/null
+++ b/e2e/app/vue/VueCounterIsland.ts
@@ -0,0 +1,32 @@
+import { eclipsifyVue } from '@eclipsa/vue'
+import { defineComponent, h, ref } from 'vue'
+
+const VueCounterView = defineComponent({
+  props: {
+    label: {
+      required: true,
+      type: String,
+    },
+  },
+  setup(props, { slots }) {
+    const count = ref(0)
+
+    return () =>
+      h('section', { 'data-testid': 'vue-island-root' }, [
+        h('p', { 'data-testid': 'vue-island-count' }, `${props.label}:${count.value}`),
+        h(
+          'button',
+          {
+            onClick: () => {
+              count.value += 1
+            },
+            type: 'button',
+          },
+          'Increment Vue',
+        ),
+        h('div', { 'data-testid': 'vue-island-slot' }, slots.default ? slots.default() : []),
+      ])
+  },
+})
+
+export const VueCounterIsland = eclipsifyVue(VueCounterView)
diff --git a/e2e/package.json b/e2e/package.json
index 3b4dc49..5f53110 100644
--- a/e2e/package.json
+++ b/e2e/package.json
@@ -3,18 +3,25 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "e2e": "playwright test",
-    "e2e:headed": "playwright test --headed",
-    "e2e:ui": "playwright test --ui",
+    "e2e": "bun run --cwd ../packages/optimizer build:native:dev && bun ./scripts/run-playwright.ts",
+    "e2e:headed": "bun run --cwd ../packages/optimizer build:native:dev && bun ./scripts/run-playwright.ts --headed",
+    "e2e:ui": "bun run --cwd ../packages/optimizer build:native:dev && bun ./scripts/run-playwright.ts --ui",
     "build": "vp build",
     "dev": "vp dev",
     "start": "bun dist/server/index.mjs",
-    "test": "bun -e \"console.log('Use bun run test:e2e for @eclipsa/e2e.')\"",
+    "test": "bun test ./scripts/*.test.ts",
     "typecheck": "tsgo -p tsconfig.json --noEmit"
   },
   "dependencies": {
+    "@eclipsa/content": "workspace:*",
     "@eclipsa/image": "workspace:*",
+    "@eclipsa/motion": "workspace:*",
+    "@eclipsa/react": "workspace:*",
+    "@eclipsa/vue": "workspace:*",
     "eclipsa": "workspace:*",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "vue": "^3.5.22",
     "zod": "^4.3.6"
   },
   "devDependencies": {
diff --git a/e2e/playwright.config.cjs b/e2e/playwright.config.cjs
new file mode 100644
index 0000000..d861e60
--- /dev/null
+++ b/e2e/playwright.config.cjs
@@ -0,0 +1,35 @@
+const path = require('node:path')
+const { tmpdir } = require('node:os')
+const { defineConfig, devices } = require('@playwright/test')
+
+const defaultPort = 30000 + (process.pid % 20000)
+const parsedPort = Number(process.env.PLAYWRIGHT_E2E_PORT ?? defaultPort)
+const port = Number.isFinite(parsedPort) ? parsedPort : defaultPort
+const host = '127.0.0.1'
+const baseURL = `http://${host}:${port}`
+
+process.env.PLAYWRIGHT_E2E_PORT = String(port)
+
+const artifactsRoot = path.join(
+  tmpdir(),
+  'eclipsa-playwright',
+  `${process.pid}-${process.env.PLAYWRIGHT_E2E_PORT ?? 'default'}`,
+)
+
+module.exports = defineConfig({
+  testDir: './test',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: [
+    ['list'],
+    ['html', { open: 'never', outputFolder: path.join(artifactsRoot, 'report') }],
+  ],
+  outputDir: path.join(artifactsRoot, 'test-results'),
+  use: {
+    ...devices['Desktop Chrome'],
+    baseURL,
+    trace: 'retain-on-failure',
+  },
+  testMatch: ['**/*.test.ts'],
+})
diff --git a/e2e/playwright.config.ts b/e2e/playwright.config.ts
deleted file mode 100644
index 0382c90..0000000
--- a/e2e/playwright.config.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { createServer } from 'node:net'
-import { defineConfig, devices } from '@playwright/test'
-
-const host = '127.0.0.1'
-const port =
-  Number(process.env.PLAYWRIGHT_E2E_PORT) ||
-  ((process.env.PLAYWRIGHT_E2E_PORT = String(await getAvailablePort(host))),
-  Number(process.env.PLAYWRIGHT_E2E_PORT))
-const baseURL = `http://${host}:${port}`
-
-function getAvailablePort(hostname: string): Promise<number> {
-  return new Promise((resolve, reject) => {
-    const server = createServer()
-
-    server.once('error', reject)
-    server.listen(0, hostname, () => {
-      const address = server.address()
-      if (!address || typeof address === 'string') {
-        server.close()
-        reject(new Error('Failed to resolve an available port for Playwright.'))
-        return
-      }
-
-      server.close((error) => {
-        if (error) {
-          reject(error)
-          return
-        }
-
-        resolve(address.port)
-      })
-    })
-  })
-}
-
-export default defineConfig({
-  testDir: './test',
-  fullyParallel: true,
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
-  reporter: [['list'], ['html', { open: 'never' }]],
-  outputDir: './test-results',
-  use: {
-    ...devices['Desktop Chrome'],
-    baseURL,
-    trace: 'retain-on-failure',
-  },
-  testMatch: '**/*.test.ts',
-  webServer: {
-    command: `bun vp dev --host ${host} --port ${port}`,
-    url: baseURL,
-    reuseExistingServer: !process.env.CI,
-    stdout: 'pipe',
-    stderr: 'pipe',
-    timeout: 120_000,
-  },
-})
diff --git a/e2e/scripts/package.test.ts b/e2e/scripts/package.test.ts
new file mode 100644
index 0000000..e865a39
--- /dev/null
+++ b/e2e/scripts/package.test.ts
@@ -0,0 +1,14 @@
+import { expect, test } from 'vitest'
+import packageJson from '../package.json' with { type: 'json' }
+
+const expectedPrefix = 'bun run --cwd ../packages/optimizer build:native:dev && '
+
+test('e2e scripts build the optimizer native artifacts before Playwright', () => {
+  expect(packageJson.scripts.e2e).toBe(`${expectedPrefix}bun ./scripts/run-playwright.ts`)
+  expect(packageJson.scripts['e2e:headed']).toBe(
+    `${expectedPrefix}bun ./scripts/run-playwright.ts --headed`,
+  )
+  expect(packageJson.scripts['e2e:ui']).toBe(
+    `${expectedPrefix}bun ./scripts/run-playwright.ts --ui`,
+  )
+})
diff --git a/e2e/scripts/run-playwright.ts b/e2e/scripts/run-playwright.ts
new file mode 100644
index 0000000..a3ef114
--- /dev/null
+++ b/e2e/scripts/run-playwright.ts
@@ -0,0 +1,192 @@
+import { spawn } from 'node:child_process'
+import { existsSync, readdirSync } from 'node:fs'
+import { createServer } from 'node:net'
+import { homedir } from 'node:os'
+import path from 'node:path'
+
+const host = '127.0.0.1'
+const cwd = process.cwd()
+
+const resolveWorkspaceBin = (binName: string) => {
+  let currentDir = cwd
+
+  while (true) {
+    const candidatePath = path.join(currentDir, 'node_modules/.bin', binName)
+    if (existsSync(candidatePath)) {
+      return candidatePath
+    }
+
+    const parentDir = path.dirname(currentDir)
+    if (parentDir === currentDir) {
+      throw new Error(`Could not resolve "${binName}" from ${cwd}.`)
+    }
+
+    currentDir = parentDir
+  }
+}
+
+const vpBinPath = resolveWorkspaceBin('vp')
+const playwrightBinPath = resolveWorkspaceBin('playwright')
+
+const resolveNodeBinary = () => {
+  if (path.basename(process.execPath) === 'node' && existsSync(process.execPath)) {
+    return process.execPath
+  }
+
+  const candidatePaths = [
+    process.env.NVM_BIN ? path.join(process.env.NVM_BIN, 'node') : null,
+    '/usr/bin/node',
+    '/usr/local/bin/node',
+  ].filter((candidatePath): candidatePath is string => !!candidatePath)
+
+  for (const candidatePath of candidatePaths) {
+    if (existsSync(candidatePath)) {
+      return candidatePath
+    }
+  }
+
+  const nvmVersionsDir = path.join(homedir(), '.nvm/versions/node')
+  if (existsSync(nvmVersionsDir)) {
+    const versionDirs = readdirSync(nvmVersionsDir, { withFileTypes: true })
+      .filter((entry) => entry.isDirectory())
+      .map((entry) => entry.name)
+      .sort((left, right) => right.localeCompare(left, undefined, { numeric: true }))
+
+    for (const versionDir of versionDirs) {
+      const candidatePath = path.join(nvmVersionsDir, versionDir, 'bin/node')
+      if (existsSync(candidatePath)) {
+        return candidatePath
+      }
+    }
+  }
+
+  throw new Error(`Could not resolve a Node.js binary from ${cwd}.`)
+}
+
+const nodeBinaryPath = resolveNodeBinary()
+
+const getAvailablePort = async () =>
+  await new Promise<number>((resolve, reject) => {
+    const server = createServer()
+
+    server.once('error', reject)
+    server.listen(0, host, () => {
+      const address = server.address()
+      if (!address || typeof address === 'string') {
+        server.close()
+        reject(new Error('Failed to resolve an available Playwright port.'))
+        return
+      }
+
+      server.close((error) => {
+        if (error) {
+          reject(error)
+          return
+        }
+        resolve(address.port)
+      })
+    })
+  })
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+const waitForServer = async (url: string, timeoutMs: number) => {
+  const deadline = Date.now() + timeoutMs
+  let lastError: unknown = null
+
+  while (Date.now() < deadline) {
+    try {
+      const response = await fetch(url, {
+        signal: AbortSignal.timeout(1_000),
+      })
+      if (response.ok) {
+        return
+      }
+      lastError = new Error(`Server responded with ${response.status} ${response.statusText}`)
+    } catch (error) {
+      lastError = error
+    }
+
+    await sleep(500)
+  }
+
+  throw new Error(
+    `Timed out waiting for ${url}.${lastError ? ` Last error: ${String(lastError)}` : ''}`,
+  )
+}
+
+const run = async () => {
+  const port = await getAvailablePort()
+  const env = {
+    ...process.env,
+    PATH: `${path.dirname(nodeBinaryPath)}:${process.env.PATH ?? ''}`,
+    PLAYWRIGHT_E2E_PORT: String(port),
+  }
+  const devArgs = [vpBinPath, 'dev', '--host', host, '--port', String(port)]
+  const devServer = spawn(nodeBinaryPath, devArgs, {
+    cwd,
+    env,
+    stdio: ['ignore', 'inherit', 'inherit'],
+  })
+  const waitForDevServerExit = () =>
+    new Promise<never>((_, reject) => {
+      devServer.once('error', reject)
+      devServer.once('close', (code, signal) => {
+        reject(
+          new Error(
+            `The dev server exited before Playwright started (code: ${code ?? 'null'}, signal: ${signal ?? 'null'}).`,
+          ),
+        )
+      })
+    })
+
+  const terminateDevServer = () => {
+    if (!devServer.killed) {
+      devServer.kill('SIGTERM')
+    }
+  }
+
+  const exitSignals = ['SIGINT', 'SIGTERM'] as const
+  for (const signal of exitSignals) {
+    process.on(signal, () => {
+      terminateDevServer()
+      process.exit(1)
+    })
+  }
+
+  try {
+    await Promise.race([waitForServer(`http://${host}:${port}/`, 240_000), waitForDevServerExit()])
+
+    const playwrightArgs = [
+      playwrightBinPath,
+      'test',
+      '--config',
+      path.join(cwd, 'playwright.config.cjs'),
+      ...process.argv.slice(2),
+    ]
+    const playwright = spawn(nodeBinaryPath, playwrightArgs, {
+      cwd,
+      env,
+      stdio: ['ignore', 'inherit', 'inherit'],
+    })
+
+    const exitCode = await new Promise<number>((resolve, reject) => {
+      playwright.once('error', reject)
+      playwright.once('close', (code) => {
+        resolve(code ?? 1)
+      })
+    })
+
+    if (exitCode !== 0) {
+      process.exit(exitCode)
+    }
+  } finally {
+    terminateDevServer()
+    await new Promise((resolve) => {
+      devServer.once('close', resolve)
+      setTimeout(resolve, 5_000)
+    })
+  }
+}
+
+await run()
diff --git a/e2e/scripts/workspace-package.test.ts b/e2e/scripts/workspace-package.test.ts
new file mode 100644
index 0000000..f701616
--- /dev/null
+++ b/e2e/scripts/workspace-package.test.ts
@@ -0,0 +1,36 @@
+import { expect, test } from 'vitest'
+import docsPackageJson from '../../docs/package.json' with { type: 'json' }
+import rootPackageJson from '../../package.json' with { type: 'json' }
+import contentPackageJson from '../../packages/content/package.json' with { type: 'json' }
+import createEclipsaPackageJson from '../../packages/create-eclipsa/package.json' with { type: 'json' }
+import eclipsaPackageJson from '../../packages/eclipsa/package.json' with { type: 'json' }
+import imagePackageJson from '../../packages/image/package.json' with { type: 'json' }
+import markdownPackageJson from '../../packages/markdown/package.json' with { type: 'json' }
+import motionPackageJson from '../../packages/motion/package.json' with { type: 'json' }
+import optimizerPackageJson from '../../packages/optimizer/package.json' with { type: 'json' }
+import reactPackageJson from '../../packages/react/package.json' with { type: 'json' }
+import vuePackageJson from '../../packages/vue/package.json' with { type: 'json' }
+
+const coverageCommand =
+  'c8 --reporter=lcov --reporter=json-summary --reporter=text bunx vp test --run'
+
+test('workspace packages expose a coverage script for CI uploads', () => {
+  expect(rootPackageJson.scripts['test:coverage']).toBe('turbo run test:coverage')
+
+  expect(docsPackageJson.scripts['test:coverage']).toBe(
+    'c8 --reporter=lcov --reporter=json-summary --reporter=text bunx vitest run',
+  )
+  expect(contentPackageJson.scripts['test:coverage']).toBe(coverageCommand)
+  expect(createEclipsaPackageJson.scripts['test:coverage']).toBe(coverageCommand)
+  expect(eclipsaPackageJson.scripts['test:coverage']).toBe(
+    'bun run --filter @eclipsa/optimizer build:native:dev && c8 --reporter=lcov --reporter=json-summary --reporter=text bunx vp test --run',
+  )
+  expect(imagePackageJson.scripts['test:coverage']).toBe(coverageCommand)
+  expect(markdownPackageJson.scripts['test:coverage']).toBe(coverageCommand)
+  expect(motionPackageJson.scripts['test:coverage']).toBe(coverageCommand)
+  expect(optimizerPackageJson.scripts['test:coverage']).toBe(
+    'bun run build:native:dev && c8 --reporter=lcov --reporter=json-summary --reporter=text bunx vp test --run',
+  )
+  expect(reactPackageJson.scripts['test:coverage']).toBe(coverageCommand)
+  expect(vuePackageJson.scripts['test:coverage']).toBe(coverageCommand)
+})
diff --git a/e2e/test/example.dev.test.ts b/e2e/test/example.dev.test.ts
index 5838264..334d934 100644
--- a/e2e/test/example.dev.test.ts
+++ b/e2e/test/example.dev.test.ts
@@ -1,21 +1,37 @@
 import { readFile, rename, writeFile } from 'node:fs/promises'
+import path from 'node:path'
 import { fileURLToPath } from 'node:url'
-import { expect, test } from '@playwright/test'
+import { expect, test, type Page } from '@playwright/test'
 
-const hmrSvgPagePath = fileURLToPath(new URL('../app/hmr-svg/+page.tsx', import.meta.url))
+const testDir = path.dirname(fileURLToPath(import.meta.url))
+
+const hmrSvgPagePath = path.resolve(testDir, '../app/hmr-svg/+page.tsx')
 const hmrBeforeLabel = 'svg hmr before'
 const hmrAfterLabel = 'svg hmr after'
-const imagePagePath = fileURLToPath(new URL('../app/image/+page.tsx', import.meta.url))
+const imagePagePath = path.resolve(testDir, '../app/image/+page.tsx')
 const imageHmrBeforeLabel = 'Responsive image metadata should survive navigation, resume, and HMR.'
 const imageHmrAfterLabel =
   'Responsive image metadata should survive navigation, resume, HMR, and page transitions.'
-
+const contentMarkdownPath = path.resolve(testDir, '../app/content/docs/guide/getting-started.md')
+const contentBodyBeforeLabel = 'Content body before.'
+const contentBodyAfterLabel = 'Content body after.'
+const contentDescriptionBeforeLabel = 'Content description before'
+const contentDescriptionAfterLabel = 'Content description after'
+const homePagePath = path.resolve(testDir, '../app/+page.tsx')
+const homeHmrBeforeLabel = 'Go to counter with navigate()'
+const homeHmrAfterLabel = 'Go to counter with navigate()!'
+const hmrTimeout = 15_000
 const writeSourceAtomically = async (filePath: string, source: string) => {
   const tempPath = `${filePath}.tmp`
   await writeFile(tempPath, source)
   await rename(tempPath, filePath)
 }
 
+const waitForResumedRoute = async (page: Page) => {
+  await expect(page.locator('body')).toHaveAttribute('data-e-resume', 'resumed')
+  await page.waitForTimeout(250)
+}
+
 test.describe('example app in dev mode', () => {
   test.describe.configure({ mode: 'serial' })
 
@@ -89,12 +105,30 @@ test.describe('example app in dev mode', () => {
     await expect(page.getByRole('button', { name: /^Layout count:\s*1$/ })).toBeVisible()
   })
 
+  test('restores the previous route when using the browser back button', async ({ page }) => {
+    await page.goto('/')
+    await waitForResumedRoute(page)
+
+    await page.getByRole('link', { name: 'Open counter with Link' }).click()
+
+    await expect(page).toHaveURL(/\/counter$/)
+    await expect(page.getByText('Counter page')).toBeVisible()
+
+    await page.goBack()
+
+    await expect(page).toHaveURL(/\/$/)
+    await expect(page.getByRole('button', { name: 'Go to counter with navigate()' })).toBeVisible()
+    await expect(page.getByText('Counter page')).toHaveCount(0)
+  })
+
   test('does not duplicate route content when navigate() returns into a shared layout', async ({
     page,
   }) => {
     await page.goto('/')
+    await waitForResumedRoute(page)
 
     await page.getByRole('button', { name: /^Layout count:\s*0$/ }).click()
+    await expect(page.getByRole('button', { name: /^Layout count:\s*1$/ })).toBeVisible()
     await page.getByRole('button', { name: 'Go to counter with navigate()' }).click()
 
     await expect(page).toHaveURL(/\/counter$/)
@@ -130,15 +164,18 @@ test.describe('example app in dev mode', () => {
     await expect(page.getByText('Guarded page')).toBeVisible()
   })
 
-  test('prefetches route html on link intent and reuses prefetched loader state on navigation', async ({
+  test('prefetches route data on link intent and reuses prefetched loader state on navigation', async ({
     page,
   }) => {
-    const routeRequests: string[] = []
+    const routeDataRequests: string[] = []
     const loaderRequests: string[] = []
     page.on('request', (request) => {
       const url = new URL(request.url())
-      if (url.pathname === '/actions') {
-        routeRequests.push(url.pathname)
+      if (
+        url.pathname === '/__eclipsa/route-data' &&
+        new URL(url.searchParams.get('href')!, page.url()).pathname === '/actions'
+      ) {
+        routeDataRequests.push(request.url())
       }
       if (url.pathname.startsWith('/__eclipsa/loader/')) {
         loaderRequests.push(url.pathname)
@@ -146,28 +183,357 @@ test.describe('example app in dev mode', () => {
     })
 
     await page.goto('/')
-    routeRequests.length = 0
+    routeDataRequests.length = 0
     loaderRequests.length = 0
 
     await page.getByRole('link', { name: 'Open actions without prefetch' }).hover()
     await page.waitForTimeout(250)
-    expect(routeRequests).toHaveLength(0)
+    expect(routeDataRequests).toHaveLength(0)
 
     const actionsLink = page.getByRole('link', { name: 'Actions', exact: true })
 
     await actionsLink.hover()
-    await expect.poll(() => routeRequests.length).toBeGreaterThan(0)
+    await expect.poll(() => routeDataRequests.length).toBeGreaterThan(0)
 
-    routeRequests.length = 0
+    routeDataRequests.length = 0
     loaderRequests.length = 0
 
     await actionsLink.click()
 
     await expect(page).toHaveURL(/\/actions$/)
     await expect(page.getByText(/loader data:\s*loader-ready/)).toBeVisible()
+    await expect.poll(() => routeDataRequests.length).toBe(0)
     await expect.poll(() => loaderRequests.length).toBe(0)
   })
 
+  test('updates loader-backed catch-all content inside a shared layout on Link navigation', async ({
+    page,
+  }) => {
+    await page.goto('/loader-nav/overview')
+
+    await expect(page).toHaveURL(/\/loader-nav\/overview$/)
+    await expect(page.getByRole('heading', { name: 'overview' })).toBeVisible()
+    await expect(page.getByTestId('loader-nav-overview-state')).toHaveText(' active')
+    await expect(page.getByTestId('loader-nav-quick-start-state')).toHaveText(' inactive')
+    await expect(page.getByTestId('loader-nav-overview-state-link')).toHaveClass(/active/)
+    await expect(page.getByTestId('loader-nav-quick-start-state-link')).toHaveClass(/inactive/)
+    await page.getByRole('link', { name: /Quick Start/ }).click()
+
+    await expect(page).toHaveURL(/\/loader-nav\/quick-start$/)
+    await expect(page.getByRole('heading', { name: 'quick-start' })).toBeVisible()
+    await expect(page.getByRole('heading', { name: 'overview' })).toHaveCount(0)
+    await expect(page.getByTestId('loader-nav-overview-state')).toHaveText(' inactive')
+    await expect(page.getByTestId('loader-nav-quick-start-state')).toHaveText(' active')
+    await expect(page.getByTestId('loader-nav-overview-state-link')).toHaveClass(/inactive/)
+    await expect(page.getByTestId('loader-nav-quick-start-state-link')).toHaveClass(/active/)
+    await expect(page.locator('a[href="/loader-nav/quick-start"]')).toHaveCount(1)
+  })
+
+  test('keeps shared-layout loader-nav links stable across repeated Link navigation', async ({
+    page,
+  }) => {
+    await page.goto('/loader-nav/overview')
+
+    await expect(page).toHaveURL(/\/loader-nav\/overview$/)
+    await page.locator('a[href="/loader-nav/quick-start"]').click()
+
+    await expect(page).toHaveURL(/\/loader-nav\/quick-start$/)
+    await expect(page.locator('a[href="/loader-nav/overview"]')).toHaveCount(1)
+    await expect(page.locator('a[href="/loader-nav/quick-start"]')).toHaveCount(1)
+
+    await page.locator('a[href="/loader-nav/overview"]').click()
+
+    await expect(page).toHaveURL(/\/loader-nav\/overview$/)
+    await expect(page.getByRole('heading', { name: 'overview' })).toBeVisible()
+    await expect(page.locator('a[href="/loader-nav/overview"]')).toHaveCount(1)
+    await expect(page.locator('a[href="/loader-nav/quick-start"]')).toHaveCount(1)
+  })
+
+  test('updates shared layout-owned location state on Link navigation', async ({ page }) => {
+    await page.goto('/layout-location/overview')
+
+    await expect(page).toHaveURL(/\/layout-location\/overview$/)
+    await expect(page.getByRole('heading', { name: 'layout overview' })).toBeVisible()
+    await expect(page.getByTestId('layout-location-state')).toHaveText('overview-active')
+    await expect(page.getByTestId('layout-location-nav')).toHaveClass(/overview/)
+    await expect(page.getByTestId('layout-location-nav')).toHaveClass(/active/)
+
+    await page.getByRole('link', { name: 'Docs', exact: true }).click()
+
+    await expect(page).toHaveURL(/\/layout-location\/docs$/)
+    await expect(page.getByRole('heading', { name: 'layout docs' })).toBeVisible()
+    await expect(page.getByRole('heading', { name: 'layout overview' })).toHaveCount(0)
+    await expect(page.getByTestId('layout-location-state')).toHaveText('docs-active')
+    await expect(page.getByTestId('layout-location-nav')).toHaveClass(/docs/)
+    await expect(page.getByTestId('layout-location-nav')).toHaveClass(/inactive/)
+  })
+
+  test('hydrates React islands and keeps projected Eclipsa content live', async ({ page }) => {
+    await page.goto('/react')
+
+    await expect(page).toHaveTitle('React Island | E2E')
+    await expect(page.getByRole('heading', { name: 'React island' })).toBeVisible()
+    await expect(page.getByTestId('react-ssr-copy')).toBeVisible()
+    await expect(page.getByTestId('react-projected-value')).toHaveText('0')
+
+    await waitForResumedRoute(page)
+
+    await page.getByRole('button', { name: 'Increment React' }).click()
+    await expect(page.getByTestId('react-island-count')).toHaveText('React count:1')
+
+    await page.getByRole('button', { name: 'Increment projected React child' }).click()
+    await expect(page.getByTestId('react-projected-value')).toHaveText('1')
+    await expect(page.getByTestId('react-island-count')).toHaveText('React count:1')
+  })
+
+  test('hydrates Vue islands and keeps projected Eclipsa content live', async ({ page }) => {
+    await page.goto('/vue')
+
+    await expect(page).toHaveTitle('Vue Island | E2E')
+    await expect(page.getByRole('heading', { name: 'Vue island' })).toBeVisible()
+    await expect(page.getByTestId('vue-ssr-copy')).toBeVisible()
+    await expect(page.getByTestId('vue-projected-value')).toHaveText('0')
+
+    await waitForResumedRoute(page)
+
+    await page.getByRole('button', { name: 'Increment Vue' }).click()
+    await expect(page.getByTestId('vue-island-count')).toHaveText('Vue count:1')
+
+    await page.getByRole('button', { name: 'Increment projected Vue child' }).click()
+    await expect(page.getByTestId('vue-projected-value')).toHaveText('1')
+    await expect(page.getByTestId('vue-island-count')).toHaveText('Vue count:1')
+  })
+
+  test('runs motion enter/exit and shared layout flows', async ({ page }) => {
+    await page.goto('/motion')
+    await waitForResumedRoute(page)
+
+    await expect(page).toHaveTitle('Motion | E2E')
+    await expect(page.getByRole('heading', { name: 'Motion Playground' })).toBeVisible()
+    await expect(page.getByTestId('motion-card')).toBeVisible()
+
+    await page.getByRole('button', { name: 'Toggle motion card' }).click()
+    await expect(page.getByTestId('motion-card')).toHaveCSS('opacity', '0')
+    await page.getByRole('button', { name: 'Toggle motion card' }).click()
+    await expect(page.getByTestId('motion-card')).toHaveCSS('opacity', '1')
+
+    await expect(page.getByTestId('motion-indicator')).toHaveText('Left active')
+  })
+
+  test('shares atom state across components and preserves it across Link navigation', async ({
+    page,
+  }) => {
+    await page.goto('/atom')
+    await waitForResumedRoute(page)
+
+    await expect(page).toHaveTitle('Atom | E2E')
+    await expect(page.getByRole('heading', { name: 'Atom Playground' })).toBeVisible()
+    await expect(page.getByTestId('atom-summary')).toHaveText('Shared atom count: 0')
+    await expect(page.getByTestId('atom-label')).toHaveText('Shared atom label: idle')
+
+    await page.getByTestId('atom-left').click()
+
+    await expect(page.getByTestId('atom-summary')).toHaveText('Shared atom count: 1')
+    await expect(page.getByTestId('atom-left')).toHaveText('Left atom count: 1')
+    await expect(page.getByTestId('atom-right')).toHaveText('Right atom count: 1')
+
+    await page.getByTestId('atom-label-toggle').click()
+    await expect(page.getByTestId('atom-label')).toHaveText('Shared atom label: updated')
+
+    await page.getByTestId('atom-local').click()
+    await expect(page.getByTestId('atom-local')).toHaveText('Local count: 1')
+    await expect(page.getByTestId('atom-summary')).toHaveText('Shared atom count: 1')
+
+    await page.getByRole('link', { name: 'Back home with Link' }).click()
+    await expect(page).toHaveURL(/\/$/)
+
+    await page.getByRole('link', { name: 'Open atom route' }).click()
+
+    await expect(page).toHaveURL(/\/atom$/)
+    await expect(page.getByTestId('atom-summary')).toHaveText('Shared atom count: 1')
+    await expect(page.getByTestId('atom-left')).toHaveText('Left atom count: 1')
+    await expect(page.getByTestId('atom-right')).toHaveText('Right atom count: 1')
+    await expect(page.getByTestId('atom-label')).toHaveText('Shared atom label: updated')
+    await expect(page.getByTestId('atom-local')).toHaveText('Local count: 0')
+  })
+
+  test('replays motion animate hook transitions across repeated toggles', async ({ page }) => {
+    await page.goto('/motion')
+    await waitForResumedRoute(page)
+
+    const toggle = page.getByRole('button', { name: 'Toggle motion card' })
+    const card = page.getByTestId('motion-card')
+
+    await expect(card).toHaveCSS('opacity', '1')
+    await toggle.click()
+    await expect(card).toHaveCSS('opacity', '0')
+    await toggle.click()
+    await expect(card).toHaveCSS('opacity', '1')
+    await toggle.click()
+    await expect(card).toHaveCSS('opacity', '0')
+  })
+
+  test('applies declarative motion animate transforms without imperative animate() calls', async ({
+    page,
+  }) => {
+    await page.goto('/motion')
+    await waitForResumedRoute(page)
+
+    const toggle = page.getByRole('button', { name: 'Toggle motion card' })
+    const card = page.getByTestId('motion-card')
+
+    await expect(card).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
+    await toggle.click()
+    await expect(card).toHaveCSS('transform', 'matrix(1, 0, 0, 1, -16, 0)')
+    await toggle.click()
+    await expect(card).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
+  })
+
+  test('updates projection-slot sidebar link state inside a shared layout on Link navigation', async ({
+    page,
+  }) => {
+    await page.goto('/slot-nav/overview')
+
+    await expect(page).toHaveURL(/\/slot-nav\/overview$/)
+    await expect(page.getByRole('heading', { name: 'overview' })).toBeVisible()
+    await expect(page.getByTestId('slot-nav-overview-state')).toHaveText(' active')
+    await expect(page.getByTestId('slot-nav-quick-start-state')).toHaveText(' inactive')
+    await expect(page.getByTestId('slot-nav-overview-state-link')).toHaveClass(/active/)
+    await expect(page.getByTestId('slot-nav-quick-start-state-link')).toHaveClass(/inactive/)
+
+    await page.getByRole('link', { name: 'Quick Start' }).click()
+
+    await expect(page).toHaveURL(/\/slot-nav\/quick-start$/)
+    await expect(page.getByRole('heading', { name: 'quick-start' })).toBeVisible()
+    await expect(page.getByTestId('slot-nav-overview-state')).toHaveText(' inactive')
+    await expect(page.getByTestId('slot-nav-quick-start-state')).toHaveText(' active')
+    await expect(page.getByTestId('slot-nav-overview-state-link')).toHaveClass(/inactive/)
+    await expect(page.getByTestId('slot-nav-quick-start-state-link')).toHaveClass(/active/)
+
+    await page.getByRole('link', { name: 'Overview' }).click()
+
+    await expect(page).toHaveURL(/\/slot-nav\/overview$/)
+    await expect(page.getByRole('heading', { name: 'overview' })).toBeVisible()
+    await expect(page.getByTestId('slot-nav-overview-state')).toHaveText(' active')
+    await expect(page.getByTestId('slot-nav-quick-start-state')).toHaveText(' inactive')
+    await expect(page.getByTestId('slot-nav-overview-state-link')).toHaveClass(/active/)
+    await expect(page.getByTestId('slot-nav-quick-start-state-link')).toHaveClass(/inactive/)
+  })
+
+  test('does not reload when repeatedly navigating projection-slot sidebar links inside a shared layout', async ({
+    page,
+  }) => {
+    await page.addInitScript(() => {
+      const key = '__slotNavLoadCount'
+      const current = Number(sessionStorage.getItem(key) ?? '0')
+      sessionStorage.setItem(key, String(current + 1))
+    })
+
+    await page.goto('/slot-nav/overview')
+    await expect(page).toHaveURL(/\/slot-nav\/overview$/)
+    await expect(page.getByRole('heading', { name: 'overview' })).toBeVisible()
+    await expect
+      .poll(() => page.evaluate(() => sessionStorage.getItem('__slotNavLoadCount')))
+      .toBe('1')
+
+    for (const target of ['Quick Start', 'Overview', 'Quick Start', 'Overview'] as const) {
+      await page.getByRole('link', { name: target }).click()
+      await expect(
+        page.getByRole('heading', { name: target.toLowerCase().replace(' ', '-') }),
+      ).toBeVisible()
+      await expect
+        .poll(() => page.evaluate(() => sessionStorage.getItem('__slotNavLoadCount')))
+        .toBe('1')
+    }
+  })
+
+  test('keeps layout-local signal toggles working after resuming a shared projection-slot layout', async ({
+    page,
+  }) => {
+    await page.goto('/slot-nav/overview')
+    await waitForResumedRoute(page)
+
+    await expect(page.getByTestId('slot-nav-toggle-state')).toHaveText('open')
+    await expect(page.getByRole('heading', { name: 'overview' })).toBeVisible()
+
+    await page.getByTestId('slot-nav-toggle').click()
+    await expect(page.getByTestId('slot-nav-toggle-state')).toHaveText('closed')
+    await expect(page.getByRole('heading', { name: 'overview' })).toBeVisible()
+
+    await page.getByTestId('slot-nav-toggle').click()
+    await expect(page.getByTestId('slot-nav-toggle-state')).toHaveText('open')
+    await expect(page.getByRole('heading', { name: 'overview' })).toBeVisible()
+    await expect(page.getByTestId('slot-nav-overview-state')).toHaveText(' active')
+  })
+
+  test('keeps the first layout-local signal toggle working after resume when the layout also reads location', async ({
+    page,
+  }) => {
+    await page.goto('/slot-nav/overview')
+    await waitForResumedRoute(page)
+
+    await expect(page.getByTestId('slot-nav-pathname')).toHaveText('/slot-nav/overview')
+    await expect(page.getByTestId('slot-nav-toggle-state')).toHaveText('open')
+
+    await page.getByTestId('slot-nav-toggle').click()
+    await expect(page.getByTestId('slot-nav-toggle-state')).toHaveText('closed')
+
+    await page.getByTestId('slot-nav-toggle').click()
+    await expect(page.getByTestId('slot-nav-toggle-state')).toHaveText('open')
+    await expect(page.getByTestId('slot-nav-pathname')).toHaveText('/slot-nav/overview')
+  })
+
+  test('keeps declarative motion sidebar toggles working after resume inside a shared layout', async ({
+    page,
+  }) => {
+    await page.goto('/slot-motion-nav/overview')
+    await waitForResumedRoute(page)
+
+    const toggle = page.getByTestId('slot-motion-nav-toggle')
+    const state = page.getByTestId('slot-motion-nav-toggle-state')
+    const panel = page.getByTestId('slot-motion-nav-panel')
+
+    await expect(state).toHaveText('open')
+    await expect(panel).toHaveCSS('max-height', '96px')
+    await expect(page.getByRole('heading', { name: 'overview' })).toBeVisible()
+
+    await toggle.click()
+    await expect(state).toHaveText('closed')
+    await expect(panel).toHaveCSS('max-height', '0px')
+
+    await toggle.click()
+    await expect(state).toHaveText('open')
+    await expect(panel).toHaveCSS('max-height', '96px')
+    await expect(page.getByRole('heading', { name: 'overview' })).toBeVisible()
+    await expect(page.getByTestId('slot-motion-nav-overview-link')).toHaveClass(/active/)
+  })
+
+  test('keeps declarative motion sidebar toggles working after resume across nested layouts', async ({
+    page,
+  }) => {
+    await page.goto('/resume-motion-root/overview')
+    await waitForResumedRoute(page)
+
+    const toggle = page.getByTestId('resume-motion-toggle')
+    const state = page.getByTestId('resume-motion-toggle-state')
+    const panel = page.getByTestId('resume-motion-panel')
+
+    await expect(page.getByTestId('resume-motion-root-path')).toHaveText(
+      '/resume-motion-root/overview',
+    )
+    await expect(state).toHaveText('open')
+    await expect(panel).toHaveCSS('max-height', '96px')
+
+    await toggle.click()
+    await expect(state).toHaveText('closed')
+    await expect(panel).toHaveCSS('max-height', '0px')
+
+    await toggle.click()
+    await expect(state).toHaveText('open')
+    await expect(panel).toHaveCSS('max-height', '96px')
+    await expect(page.getByTestId('resume-motion-overview-link')).toHaveClass(/active/)
+  })
+
   test('renders responsive image metadata and keeps it stable across navigation', async ({
     page,
   }) => {
@@ -195,6 +561,32 @@ test.describe('example app in dev mode', () => {
     )
   })
 
+  test('renders content collections on SSR and after Link navigation', async ({ page }) => {
+    await page.goto('/content')
+
+    await expect(page).toHaveTitle('Content | /content')
+    await expect(page.getByRole('heading', { name: 'Content Playground' })).toBeVisible()
+    await expect(page.getByTestId('content-description')).toHaveText(contentDescriptionBeforeLabel)
+    await expect(page.getByTestId('content-entry-ids')).toContainText('guide/overview :: Overview')
+    await expect(page.getByTestId('content-entry-ids')).toContainText(
+      'guide/start-here :: Getting Started',
+    )
+    await expect(page.getByTestId('content-headings')).toContainText('h1 :: getting-started')
+    await expect(page.getByTestId('content-body')).toContainText(contentBodyBeforeLabel)
+    await expect(page.locator('[data-testid="content-body"] .shiki')).toBeVisible()
+    await expect(page.locator('[data-testid="content-body"] .shiki')).toContainText(
+      "const greeting = 'highlighted content'",
+    )
+
+    await page.locator('main').getByRole('link', { name: 'Home', exact: true }).click()
+    await expect(page).toHaveURL(/\/$/)
+    await page.getByRole('link', { name: 'Open content route' }).click()
+
+    await expect(page).toHaveURL(/\/content$/)
+    await expect(page.getByTestId('content-body')).toContainText(contentBodyBeforeLabel)
+    await expect(page.locator('[data-testid="content-body"] .shiki')).toBeVisible()
+  })
+
   test('keeps component-valued props and children rendered after client updates', async ({
     page,
   }) => {
@@ -244,7 +636,9 @@ test.describe('example app in dev mode', () => {
     await expect(page.getByRole('heading', { name: 'Suspense Playground' })).toBeVisible()
   })
 
-  test('shows suspense fallback during Link navigation before resolved content', async ({ page }) => {
+  test('shows suspense fallback during Link navigation before resolved content', async ({
+    page,
+  }) => {
     await page.goto('/')
 
     await page.getByRole('link', { name: 'Suspense' }).click()
@@ -271,6 +665,7 @@ test.describe('example app in dev mode', () => {
 
   test('navigates imperatively and updates the counter', async ({ page }) => {
     await page.goto('/')
+    await waitForResumedRoute(page)
 
     await page.getByRole('button', { name: 'Go to counter with navigate()' }).click()
 
@@ -288,6 +683,7 @@ test.describe('example app in dev mode', () => {
 
   test('runs action$ with middleware and validator on the actions page', async ({ page }) => {
     await page.goto('/actions')
+    await waitForResumedRoute(page)
 
     await expect(page.getByRole('heading', { name: 'Action Playground' })).toBeVisible()
     await expect(page.getByText(/loader data:\s*loader-ready/)).toBeVisible()
@@ -308,6 +704,7 @@ test.describe('example app in dev mode', () => {
 
   test('progressively enhances native form submissions through action$', async ({ page }) => {
     await page.goto('/actions')
+    await waitForResumedRoute(page)
 
     await page.getByRole('textbox', { name: 'Form Left' }).fill('9')
     await page.getByRole('textbox', { name: 'Form Right' }).fill('3')
@@ -322,6 +719,7 @@ test.describe('example app in dev mode', () => {
 
   test('hydrates loader$ from SSR payload and reloads it over RPC', async ({ page }) => {
     await page.goto('/actions')
+    await waitForResumedRoute(page)
 
     await expect(page.getByText(/loader data:\s*loader-ready/)).toBeVisible()
     await expect(page.getByText(/loader last:\s*No manual load yet/)).toBeVisible()
@@ -334,6 +732,7 @@ test.describe('example app in dev mode', () => {
 
   test('shows structured validation failures from action$', async ({ page }) => {
     await page.goto('/actions')
+    await waitForResumedRoute(page)
 
     await page.getByRole('textbox', { name: 'Left', exact: true }).fill('abc')
     await page.getByRole('textbox', { name: 'Right', exact: true }).fill('22')
@@ -410,11 +809,15 @@ test.describe('example app in dev mode', () => {
     try {
       await writeSourceAtomically(hmrSvgPagePath, updatedSource)
       await expect(heading).toBeVisible()
-      await expect(status).toHaveText(hmrAfterLabel)
+      await expect(status).toHaveText(hmrAfterLabel, {
+        timeout: hmrTimeout,
+      })
     } finally {
       await writeSourceAtomically(hmrSvgPagePath, originalSource)
       await expect(heading).toBeVisible()
-      await expect(status).toHaveText(hmrBeforeLabel)
+      await expect(status).toHaveText(hmrBeforeLabel, {
+        timeout: hmrTimeout,
+      })
     }
   })
 
@@ -429,14 +832,92 @@ test.describe('example app in dev mode', () => {
       expect(updatedSource).not.toBe(originalSource)
       await writeSourceAtomically(imagePagePath, updatedSource)
 
-      await expect(page.getByText(imageHmrAfterLabel)).toBeVisible()
+      await expect(page.getByText(imageHmrAfterLabel)).toBeVisible({
+        timeout: hmrTimeout,
+      })
       await expect(page.getByTestId('responsive-image')).toHaveAttribute(
         'srcset',
         /240w.*480w.*960w.*1200w/,
       )
     } finally {
       await writeSourceAtomically(imagePagePath, originalSource)
-      await expect(page.getByText(imageHmrBeforeLabel)).toBeVisible()
+      await page.reload({ waitUntil: 'networkidle' })
+      await expect(page.getByText(imageHmrBeforeLabel)).toBeVisible({
+        timeout: hmrTimeout,
+      })
+    }
+  })
+
+  test('updates content routes after markdown and frontmatter HMR changes', async ({ page }) => {
+    const originalSource = await readFile(contentMarkdownPath, 'utf8')
+
+    try {
+      await page.goto('/content')
+      await expect(page.getByTestId('content-description')).toHaveText(
+        contentDescriptionBeforeLabel,
+      )
+      await expect(page.getByTestId('content-body')).toContainText(contentBodyBeforeLabel)
+
+      const updatedSource = originalSource
+        .replace(contentDescriptionBeforeLabel, contentDescriptionAfterLabel)
+        .replace(contentBodyBeforeLabel, contentBodyAfterLabel)
+      expect(updatedSource).not.toBe(originalSource)
+      await writeSourceAtomically(contentMarkdownPath, updatedSource)
+
+      await expect(page.getByTestId('content-description')).toHaveText(
+        contentDescriptionAfterLabel,
+        {
+          timeout: hmrTimeout,
+        },
+      )
+      await expect(page.getByTestId('content-body')).toContainText(contentBodyAfterLabel, {
+        timeout: hmrTimeout,
+      })
+    } finally {
+      await writeSourceAtomically(contentMarkdownPath, originalSource)
+      await expect(page.getByTestId('content-description')).toHaveText(
+        contentDescriptionBeforeLabel,
+        {
+          timeout: hmrTimeout,
+        },
+      )
+      await expect(page.getByTestId('content-body')).toContainText(contentBodyBeforeLabel, {
+        timeout: hmrTimeout,
+      })
+    }
+  })
+
+  test('does not duplicate projected component content across HMR updates', async ({ page }) => {
+    const originalHomeSource = await readFile(homePagePath, 'utf8')
+    const propA = page.getByTestId('probe-aa-0')
+    const propB = page.getByTestId('probe-aa-1')
+    const children = page.getByTestId('probe-children')
+
+    try {
+      await page.goto('/')
+      await expect(propA).toHaveText('Prop component content')
+      await expect(propB).toHaveText('Prop component content')
+      await expect(children).toHaveText('Children component content')
+
+      const updatedHomeSource = originalHomeSource.replace(homeHmrBeforeLabel, homeHmrAfterLabel)
+      expect(updatedHomeSource).not.toBe(originalHomeSource)
+      await writeSourceAtomically(homePagePath, updatedHomeSource)
+
+      await expect(page.getByRole('button', { name: homeHmrAfterLabel })).toBeVisible({
+        timeout: hmrTimeout,
+      })
+      await expect(propA).toHaveText('Prop component content')
+      await expect(propB).toHaveText('Prop component content')
+      await expect(children).toHaveText('Children component content')
+    } finally {
+      await writeSourceAtomically(homePagePath, originalHomeSource)
+      await page.goto('/')
+      await expect(page.getByRole('button', { name: homeHmrBeforeLabel })).toBeVisible({
+        timeout: hmrTimeout,
+      })
+      await expect(propA).toHaveText('Prop component content')
+      await expect(propB).toHaveText('Prop component content')
+      await expect(children).toHaveText('Children component content')
     }
   })
 })
diff --git a/e2e/tsconfig.json b/e2e/tsconfig.json
index b1e1ae0..31d84f5 100644
--- a/e2e/tsconfig.json
+++ b/e2e/tsconfig.json
@@ -3,5 +3,12 @@
   "compilerOptions": {
     "types": ["node", "@eclipsa/image/client"]
   },
-  "include": ["./**/*.ts", "./**/*.tsx", "./**/*.d.ts", "../packages/eclipsa/**/*.d.ts"]
+  "include": [
+    "./**/*.ts",
+    "./**/*.cts",
+    "./**/*.tsx",
+    "./**/*.d.ts",
+    "../packages/eclipsa/**/*.d.ts",
+    "../packages/content/**/*.d.ts"
+  ]
 }
diff --git a/e2e/vite.config.ts b/e2e/vite.config.ts
index 1f83ec2..1adad28 100644
--- a/e2e/vite.config.ts
+++ b/e2e/vite.config.ts
@@ -1,10 +1,11 @@
 import { defineConfig } from 'vite-plus'
-import { eclipsaImage } from '@eclipsa/image/vite'
-import { eclipsa } from 'eclipsa/vite'
+import { eclipsaContent } from '../packages/content/vite.ts'
+import { eclipsaImage } from '../packages/image/vite.ts'
+import { eclipsa } from '../packages/eclipsa/vite/mod.ts'
 
 export default defineConfig({
   appType: 'custom',
-  plugins: [eclipsaImage({ widths: [240, 480, 960] }), eclipsa()],
+  plugins: [eclipsaImage({ widths: [240, 480, 960] }), eclipsa(), eclipsaContent()],
   server: {
     fs: {
       allow: ['..'],
diff --git a/examples/android-compose/README.md b/examples/android-compose/README.md
new file mode 100644
index 0000000..d11c74f
--- /dev/null
+++ b/examples/android-compose/README.md
@@ -0,0 +1,27 @@
+# Android Compose Example
+
+This example uses `@eclipsa/native` with the Jetpack Compose target. Lowercase JSX tags are
+resolved through `app/+native-map.ts`, so the route files can stay close to web-style authoring
+while the map file imports the actual Compose binding components.
+
+Commands:
+
+```sh
+cd examples/android-compose
+ECLIPSA_NATIVE_COMPOSE_EMULATOR=1 vp dev
+ECLIPSA_NATIVE_COMPOSE_EMULATOR=1 ECLIPSA_NATIVE_COMPOSE_AVD=Pixel_8_API_35 vp dev
+bun run --cwd examples/android-compose build
+bun run --cwd examples/android-compose test
+```
+
+`vp` itself rejects unknown CLI flags before the Compose target can see them, so emulator launch is
+configured through environment variables instead:
+
+- `ECLIPSA_NATIVE_COMPOSE_EMULATOR=1`
+- `ECLIPSA_NATIVE_COMPOSE_AVD=<avd-name>`
+- `ECLIPSA_NATIVE_COMPOSE_BOOT_TIMEOUT_MS=<milliseconds>`
+
+With those set, the native host launcher will start an Android emulator if needed and then open the
+Compose host activity once the native dev manifest is ready.
+
+The Android host project lives at `packages/native-compose/android-compose`.
diff --git a/examples/android-compose/app/+layout.tsx b/examples/android-compose/app/+layout.tsx
new file mode 100644
index 0000000..6ee77fa
--- /dev/null
+++ b/examples/android-compose/app/+layout.tsx
@@ -0,0 +1,5 @@
+import type { NativeChild } from '@eclipsa/native'
+
+export default function RootLayout(props: { children?: NativeChild }) {
+  return <activity>{props.children}</activity>
+}
diff --git a/examples/android-compose/app/+native-map.ts b/examples/android-compose/app/+native-map.ts
new file mode 100644
index 0000000..bcb42b9
--- /dev/null
+++ b/examples/android-compose/app/+native-map.ts
@@ -0,0 +1,8 @@
+import { Activity, Button, Column, Switch, Text, TextField } from '@eclipsa/native-compose'
+
+export const activity = Activity
+export const button = Button
+export const div = Column
+export const input = TextField
+export const span = Text
+export const toggle = Switch
diff --git a/examples/android-compose/app/+page.tsx b/examples/android-compose/app/+page.tsx
new file mode 100644
index 0000000..937776c
--- /dev/null
+++ b/examples/android-compose/app/+page.tsx
@@ -0,0 +1,38 @@
+import { useSignal } from 'eclipsa'
+import { Button, Column, Switch, Text, TextField } from '@eclipsa/native-compose'
+
+export default function Page() {
+  const count = useSignal(0)
+  const enabled = useSignal(true)
+  const name = useSignal('Compose')
+
+  return (
+    <Column spacing={16}>
+      <Text value="Eclipsa Native Android Compose Example" />
+      <Text value="This is a simple example of how to use Eclipsa Native with Android Compose." />
+      <Text
+        value={`Hello ${name.value} · ${enabled.value ? 'enabled' : 'disabled'} · count ${count.value}`}
+      />
+      <Button
+        onClick={() => {
+          count.value += 2
+        }}
+        title={`Count ${count.value}`}
+      />
+      <TextField
+        onValueChange={(value: string) => {
+          name.value = String(value ?? '')
+        }}
+        placeholder="Name"
+        value={name.value}
+      />
+      <Switch
+        onCheckedChange={(value: boolean) => {
+          enabled.value = Boolean(value)
+        }}
+        title="Enabled"
+        value={enabled.value}
+      />
+    </Column>
+  )
+}
diff --git a/examples/android-compose/app/vite-env.d.ts b/examples/android-compose/app/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/examples/android-compose/app/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/android-compose/package.json b/examples/android-compose/package.json
new file mode 100644
index 0000000..644f869
--- /dev/null
+++ b/examples/android-compose/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@eclipsa/example-android-compose",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vp build",
+    "dev": "vp dev",
+    "test": "bun ./scripts/verify-android-compose-example.ts",
+    "typecheck": "bun x tsc -p tsconfig.json --noEmit"
+  }
+}
diff --git a/examples/android-compose/scripts/verify-android-compose-example.ts b/examples/android-compose/scripts/verify-android-compose-example.ts
new file mode 100644
index 0000000..20bc7eb
--- /dev/null
+++ b/examples/android-compose/scripts/verify-android-compose-example.ts
@@ -0,0 +1,42 @@
+import { execFile } from 'node:child_process'
+import { readFile } from 'node:fs/promises'
+import path from 'node:path'
+import { promisify } from 'node:util'
+
+const execFileAsync = promisify(execFile)
+const root = path.resolve(import.meta.dirname, '..')
+const manifestPath = path.join(root, 'dist/native/manifest.json')
+const bootstrapPath = path.join(root, 'dist/native/bootstrap.js')
+
+const run = async () => {
+  await execFileAsync('bun', ['x', 'vite', 'build'], {
+    cwd: root,
+    env: process.env,
+  })
+
+  const manifest = JSON.parse(await readFile(manifestPath, 'utf8')) as {
+    bootstrap: string
+    platform: string
+    target: string
+  }
+
+  if (manifest.target !== 'compose') {
+    throw new Error(`Expected compose target manifest, got ${manifest.target}.`)
+  }
+  if (manifest.platform !== 'android') {
+    throw new Error(`Expected android platform manifest, got ${manifest.platform}.`)
+  }
+  if (manifest.bootstrap !== './bootstrap.js') {
+    throw new Error(`Unexpected bootstrap entry: ${manifest.bootstrap}`)
+  }
+
+  const bootstrapSource = await readFile(bootstrapPath, 'utf8')
+  if (!bootstrapSource.includes('bootNativeApplication')) {
+    throw new Error('Expected native bootstrap bundle to include bootNativeApplication.')
+  }
+}
+
+run().catch((error) => {
+  console.error(error)
+  process.exit(1)
+})
diff --git a/examples/android-compose/tsconfig.json b/examples/android-compose/tsconfig.json
new file mode 100644
index 0000000..b0c799d
--- /dev/null
+++ b/examples/android-compose/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsxImportSource": "@eclipsa/native"
+  },
+  "include": ["./**/*.ts", "./**/*.tsx", "./**/*.d.ts"]
+}
diff --git a/examples/android-compose/vite.config.ts b/examples/android-compose/vite.config.ts
new file mode 100644
index 0000000..a88e135
--- /dev/null
+++ b/examples/android-compose/vite.config.ts
@@ -0,0 +1,48 @@
+import path from 'node:path'
+import { defineConfig } from 'vite-plus'
+import { native } from '../../packages/native/vite.ts'
+import { compose } from '../../packages/native-compose/vite.ts'
+
+const root = path.resolve(import.meta.dirname)
+
+export default defineConfig({
+  appType: 'custom',
+  plugins: [native({ target: compose() })],
+  resolve: {
+    alias: [
+      {
+        find: /^eclipsa\/internal$/,
+        replacement: path.resolve(root, '../../packages/eclipsa/core/internal.ts'),
+      },
+      {
+        find: /^eclipsa$/,
+        replacement: path.resolve(root, '../../packages/eclipsa/mod.ts'),
+      },
+      {
+        find: /^@eclipsa\/native\/jsx-dev-runtime$/,
+        replacement: path.resolve(root, '../../packages/native/jsx-dev-runtime.ts'),
+      },
+      {
+        find: /^@eclipsa\/native\/jsx-runtime$/,
+        replacement: path.resolve(root, '../../packages/native/jsx-runtime.ts'),
+      },
+      {
+        find: /^@eclipsa\/native$/,
+        replacement: path.resolve(root, '../../packages/native/mod.ts'),
+      },
+      {
+        find: /^@eclipsa\/native-core$/,
+        replacement: path.resolve(root, '../../packages/native-core/mod.ts'),
+      },
+      {
+        find: /^@eclipsa\/native-compose$/,
+        replacement: path.resolve(root, '../../packages/native-compose/mod.ts'),
+      },
+    ],
+  },
+  server: {
+    fs: {
+      allow: ['../..'],
+    },
+  },
+})
diff --git a/examples/gtk4/README.md b/examples/gtk4/README.md
new file mode 100644
index 0000000..f6ca3f2
--- /dev/null
+++ b/examples/gtk4/README.md
@@ -0,0 +1,23 @@
+# GTK 4 Example
+
+This example uses `@eclipsa/native` with the GTK 4 target. Lowercase JSX tags are resolved
+through `app/+native-map.ts`, so the route files can stay close to web-style authoring while the
+map file imports the actual GTK 4 binding components.
+
+Commands:
+
+```sh
+bun run --cwd examples/gtk4 dev
+bun run --cwd examples/gtk4 build
+bun run --cwd examples/gtk4 test
+```
+
+`dev` auto-launches the Rust GTK 4 host on Linux by default. That host is compiled from
+`packages/native-gtk4/gtk4-rust`, so you need `cargo` plus local GTK 4 development libraries
+installed for the real windowed host.
+
+`test` still works without GTK system libraries because it builds the manifest and then drives the
+Rust smoke host (`eclipsa-native-gtk4-smoke`), which verifies the bootstrap bundle, event bridge,
+and state updates without opening a native window.
+
+The GTK 4 target package lives at `packages/native-gtk4`.
diff --git a/examples/gtk4/app/+layout.tsx b/examples/gtk4/app/+layout.tsx
new file mode 100644
index 0000000..e62e655
--- /dev/null
+++ b/examples/gtk4/app/+layout.tsx
@@ -0,0 +1,9 @@
+import type { NativeChild } from '@eclipsa/native'
+
+export default function RootLayout(props: { children?: NativeChild }) {
+  return (
+    <window defaultHeight={720} defaultWidth={480} title="Eclipsa Native GTK 4 Example">
+      {props.children}
+    </window>
+  )
+}
diff --git a/examples/gtk4/app/+native-map.ts b/examples/gtk4/app/+native-map.ts
new file mode 100644
index 0000000..f5b2474
--- /dev/null
+++ b/examples/gtk4/app/+native-map.ts
@@ -0,0 +1,8 @@
+import { Box, Button, Switch, Text, TextField, Window } from '@eclipsa/native-gtk4'
+
+export const button = Button
+export const div = Box
+export const input = TextField
+export const span = Text
+export const toggle = Switch
+export const window = Window
diff --git a/examples/gtk4/app/+page.tsx b/examples/gtk4/app/+page.tsx
new file mode 100644
index 0000000..411ce06
--- /dev/null
+++ b/examples/gtk4/app/+page.tsx
@@ -0,0 +1,36 @@
+import { useSignal } from 'eclipsa'
+
+export default function Page() {
+  const count = useSignal(0)
+  const enabled = useSignal(true)
+  const name = useSignal('GTK 4')
+
+  return (
+    <div orientation="vertical" spacing={16}>
+      <span value="Eclipsa Native GTK 4 Example" />
+      <span
+        value={`Hello ${name.value} · ${enabled.value ? 'enabled' : 'disabled'} · count ${count.value}`}
+      />
+      <button
+        onClick={() => {
+          count.value += 1
+        }}
+        title={`Count ${count.value}`}
+      />
+      <input
+        onInput={(value: string) => {
+          name.value = String(value ?? '')
+        }}
+        placeholder="Name"
+        value={name.value}
+      />
+      <toggle
+        onToggle={(value: boolean) => {
+          enabled.value = Boolean(value)
+        }}
+        title="Enabled"
+        value={enabled.value}
+      />
+    </div>
+  )
+}
diff --git a/examples/gtk4/app/vite-env.d.ts b/examples/gtk4/app/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/examples/gtk4/app/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/gtk4/package.json b/examples/gtk4/package.json
new file mode 100644
index 0000000..873325d
--- /dev/null
+++ b/examples/gtk4/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@eclipsa/example-gtk4",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vp build",
+    "dev": "vp dev",
+    "test": "bun ./scripts/verify-gtk4-example.ts",
+    "typecheck": "bun x tsc -p tsconfig.json --noEmit"
+  }
+}
diff --git a/examples/gtk4/scripts/verify-gtk4-example.ts b/examples/gtk4/scripts/verify-gtk4-example.ts
new file mode 100644
index 0000000..fbfdb16
--- /dev/null
+++ b/examples/gtk4/scripts/verify-gtk4-example.ts
@@ -0,0 +1,123 @@
+import { execFile } from 'node:child_process'
+import { readFile } from 'node:fs/promises'
+import path from 'node:path'
+import { promisify } from 'node:util'
+
+const execFileAsync = promisify(execFile)
+const root = path.resolve(import.meta.dirname, '..')
+const manifestPath = path.join(root, 'dist/native/manifest.json')
+const bootstrapPath = path.join(root, 'dist/native/bootstrap.js')
+const smokePackageRoot = path.resolve(root, '../../packages/native-gtk4/gtk4-rust')
+const smokeExecutablePath = path.join(smokePackageRoot, 'target/debug/eclipsa-native-gtk4-smoke')
+
+interface NativeNodeSnapshot {
+  children: NativeNodeSnapshot[]
+  id: string
+  props: Record<string, string>
+  tag: string
+  text?: string | null
+}
+
+interface SmokeOutput {
+  finalTree: NativeNodeSnapshot
+  initialTree: NativeNodeSnapshot
+}
+
+const flatten = (node: NativeNodeSnapshot): NativeNodeSnapshot[] => [
+  node,
+  ...node.children.flatMap(flatten),
+]
+
+const run = async () => {
+  await execFileAsync('bun', ['x', 'vite', 'build'], {
+    cwd: root,
+    env: process.env,
+  })
+
+  const manifest = JSON.parse(await readFile(manifestPath, 'utf8')) as {
+    bootstrap: string
+    platform: string
+    target: string
+  }
+
+  if (manifest.target !== 'gtk4') {
+    throw new Error(`Expected gtk4 target manifest, got ${manifest.target}.`)
+  }
+  if (manifest.platform !== 'linux') {
+    throw new Error(`Expected linux platform manifest, got ${manifest.platform}.`)
+  }
+  if (manifest.bootstrap !== './bootstrap.js') {
+    throw new Error(`Unexpected bootstrap entry: ${manifest.bootstrap}`)
+  }
+
+  const bootstrapSource = await readFile(bootstrapPath, 'utf8')
+  if (!bootstrapSource.includes('bootNativeApplication')) {
+    throw new Error('Expected native bootstrap bundle to include bootNativeApplication.')
+  }
+  if (!bootstrapSource.includes('gtk4:window')) {
+    throw new Error('Expected GTK 4 example bootstrap to include the window primitive.')
+  }
+  if (!bootstrapSource.includes('gtk4:text-field')) {
+    throw new Error('Expected GTK 4 example bootstrap to include the text field primitive.')
+  }
+
+  await execFileAsync(
+    'cargo',
+    [
+      'build',
+      '--manifest-path',
+      path.join(smokePackageRoot, 'Cargo.toml'),
+      '--bin',
+      'eclipsa-native-gtk4-smoke',
+    ],
+    {
+      cwd: root,
+      env: process.env,
+    },
+  )
+
+  const { stdout } = await execFileAsync(smokeExecutablePath, [], {
+    cwd: root,
+    env: {
+      ...process.env,
+      ECLIPSA_NATIVE_MANIFEST: manifestPath,
+    },
+  })
+  const output = JSON.parse(stdout) as SmokeOutput
+  const initialNodes = flatten(output.initialTree)
+  const finalNodes = flatten(output.finalTree)
+
+  if (output.initialTree.tag !== 'gtk4:window') {
+    throw new Error(`Expected a gtk4:window root, got ${output.initialTree.tag}.`)
+  }
+  if (
+    !initialNodes.some(
+      (node) => node.tag === 'gtk4:text' && node.props.value === 'Eclipsa Native GTK 4 Example',
+    )
+  ) {
+    throw new Error('Expected the GTK 4 example to render its initial title text.')
+  }
+  if (!initialNodes.some((node) => node.tag === 'gtk4:button' && node.props.title === 'Count 0')) {
+    throw new Error('Expected the GTK 4 example button to start at Count 0.')
+  }
+  if (!finalNodes.some((node) => node.tag === 'gtk4:button' && node.props.title === 'Count 1')) {
+    throw new Error('Expected the Rust smoke host to increment the GTK 4 example button.')
+  }
+  if (
+    !finalNodes.some(
+      (node) => node.tag === 'gtk4:text' && node.props.value === 'Hello GTK 4 · disabled · count 1',
+    )
+  ) {
+    throw new Error(
+      'Expected the Rust smoke host to drive the example state through button/input/toggle events.',
+    )
+  }
+  if (!finalNodes.some((node) => node.tag === 'gtk4:switch' && node.props.value === 'false')) {
+    throw new Error('Expected the Rust smoke host to toggle the GTK 4 example switch off.')
+  }
+}
+
+run().catch((error) => {
+  console.error(error)
+  process.exit(1)
+})
diff --git a/examples/gtk4/tsconfig.json b/examples/gtk4/tsconfig.json
new file mode 100644
index 0000000..b0c799d
--- /dev/null
+++ b/examples/gtk4/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsxImportSource": "@eclipsa/native"
+  },
+  "include": ["./**/*.ts", "./**/*.tsx", "./**/*.d.ts"]
+}
diff --git a/examples/gtk4/vite.config.ts b/examples/gtk4/vite.config.ts
new file mode 100644
index 0000000..26eadc3
--- /dev/null
+++ b/examples/gtk4/vite.config.ts
@@ -0,0 +1,48 @@
+import path from 'node:path'
+import { defineConfig } from 'vite-plus'
+import { native } from '../../packages/native/vite.ts'
+import { gtk4 } from '../../packages/native-gtk4/vite.ts'
+
+const root = path.resolve(import.meta.dirname)
+
+export default defineConfig({
+  appType: 'custom',
+  plugins: [native({ target: gtk4() })],
+  resolve: {
+    alias: [
+      {
+        find: /^eclipsa\/internal$/,
+        replacement: path.resolve(root, '../../packages/eclipsa/core/internal.ts'),
+      },
+      {
+        find: /^eclipsa$/,
+        replacement: path.resolve(root, '../../packages/eclipsa/mod.ts'),
+      },
+      {
+        find: /^@eclipsa\/native\/jsx-dev-runtime$/,
+        replacement: path.resolve(root, '../../packages/native/jsx-dev-runtime.ts'),
+      },
+      {
+        find: /^@eclipsa\/native\/jsx-runtime$/,
+        replacement: path.resolve(root, '../../packages/native/jsx-runtime.ts'),
+      },
+      {
+        find: /^@eclipsa\/native$/,
+        replacement: path.resolve(root, '../../packages/native/mod.ts'),
+      },
+      {
+        find: /^@eclipsa\/native-core$/,
+        replacement: path.resolve(root, '../../packages/native-core/mod.ts'),
+      },
+      {
+        find: /^@eclipsa\/native-gtk4$/,
+        replacement: path.resolve(root, '../../packages/native-gtk4/mod.ts'),
+      },
+    ],
+  },
+  server: {
+    fs: {
+      allow: ['../..'],
+    },
+  },
+})
diff --git a/examples/swiftui/README.md b/examples/swiftui/README.md
new file mode 100644
index 0000000..8d71813
--- /dev/null
+++ b/examples/swiftui/README.md
@@ -0,0 +1,20 @@
+# SwiftUI Example
+
+This example uses `@eclipsa/native` with the SwiftUI target. Lowercase JSX tags are resolved
+through `app/+native-map.ts`, so the route files can stay close to web-style authoring while the
+map file imports the actual SwiftUI binding components.
+
+Commands:
+
+```sh
+bun run --cwd examples/swiftui dev
+bun run --cwd examples/swiftui build
+bun run --cwd examples/swiftui test
+```
+
+`bun dev` uses Vite's environment API with the `nativeSwift` environment and launches the macOS
+SwiftUI host automatically once the native dev manifest is ready. The host reads
+`/__eclipsa_native__/manifest.json`, imports transformed modules over HTTP through Vite's
+environment RPC, and listens to the same HMR websocket used by the dev server.
+
+The SwiftUI host package lives at `packages/native-swiftui/macos-swiftui`.
diff --git a/examples/swiftui/app/+layout.tsx b/examples/swiftui/app/+layout.tsx
new file mode 100644
index 0000000..ba94e29
--- /dev/null
+++ b/examples/swiftui/app/+layout.tsx
@@ -0,0 +1,5 @@
+import type { NativeChild } from '@eclipsa/native'
+
+export default function RootLayout(props: { children?: NativeChild }) {
+  return <windowGroup>{props.children}</windowGroup>
+}
diff --git a/examples/swiftui/app/+native-map.ts b/examples/swiftui/app/+native-map.ts
new file mode 100644
index 0000000..ec59ab6
--- /dev/null
+++ b/examples/swiftui/app/+native-map.ts
@@ -0,0 +1,8 @@
+import { Button, Text, TextField, Toggle, VStack, WindowGroup } from '@eclipsa/native-swiftui'
+
+export const button = Button
+export const div = VStack
+export const input = TextField
+export const span = Text
+export const toggle = Toggle
+export const windowGroup = WindowGroup
diff --git a/examples/swiftui/app/+page.tsx b/examples/swiftui/app/+page.tsx
new file mode 100644
index 0000000..7e5d842
--- /dev/null
+++ b/examples/swiftui/app/+page.tsx
@@ -0,0 +1,36 @@
+import { useSignal } from 'eclipsa'
+
+export default function Page() {
+  const count = useSignal(0)
+  const enabled = useSignal(true)
+  const name = useSignal('SwiftUI')
+
+  return (
+    <div spacing={16}>
+      <span value="Eclipsa Native SwiftUI Example" />
+      <span
+        value={`Hello ${name.value} · ${enabled.value ? 'enabled' : 'disabled'} · count ${count.value}`}
+      />
+      <button
+        onPress={() => {
+          count.value += 1
+        }}
+        title={`Count ${count.value}`}
+      />
+      <input
+        onInput={(value: string) => {
+          name.value = String(value ?? '')
+        }}
+        placeholder="Name"
+        value={name.value}
+      />
+      <toggle
+        onToggle={(value: boolean) => {
+          enabled.value = Boolean(value)
+        }}
+        title="Enabled"
+        value={enabled.value}
+      />
+    </div>
+  )
+}
diff --git a/examples/swiftui/app/vite-env.d.ts b/examples/swiftui/app/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/examples/swiftui/app/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/swiftui/package.json b/examples/swiftui/package.json
new file mode 100644
index 0000000..84c8811
--- /dev/null
+++ b/examples/swiftui/package.json
@@ -0,0 +1,11 @@
+{
+  "name": "@eclipsa/example-swiftui",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vp build",
+    "dev": "vp dev",
+    "test": "bun ./scripts/verify-swiftui-example.ts",
+    "typecheck": "bun x tsc -p tsconfig.json --noEmit"
+  }
+}
diff --git a/examples/swiftui/scripts/verify-swiftui-example.ts b/examples/swiftui/scripts/verify-swiftui-example.ts
new file mode 100644
index 0000000..3d6159e
--- /dev/null
+++ b/examples/swiftui/scripts/verify-swiftui-example.ts
@@ -0,0 +1,62 @@
+import { execFile } from 'node:child_process'
+import { readFile } from 'node:fs/promises'
+import path from 'node:path'
+import { promisify } from 'node:util'
+
+const execFileAsync = promisify(execFile)
+
+const root = path.resolve(import.meta.dirname, '..')
+const manifestPath = path.join(root, 'dist/native/manifest.json')
+const hostPackagePath = path.resolve(root, '../../packages/native-swiftui/macos-swiftui')
+
+const run = async () => {
+  await execFileAsync('bun', ['x', 'vite', 'build'], {
+    cwd: root,
+    env: process.env,
+  })
+
+  const manifest = JSON.parse(await readFile(manifestPath, 'utf8')) as {
+    bootstrap: string
+    target: string
+  }
+  if (manifest.target !== 'swiftui') {
+    throw new Error(`Expected swiftui target manifest, got ${manifest.target}.`)
+  }
+
+  const { stdout } = await execFileAsync(
+    'swift',
+    ['run', '--quiet', '--package-path', hostPackagePath, 'EclipsaNativeSmoke'],
+    {
+      cwd: root,
+      env: {
+        ...process.env,
+        ECLIPSA_NATIVE_MANIFEST: manifestPath,
+      },
+    },
+  )
+
+  const output = JSON.parse(stdout) as {
+    finalTree: {
+      children: Array<{
+        props: Record<string, string>
+        tag: string
+      }>
+      tag: string
+    }
+    initialTree: {
+      tag: string
+    }
+  }
+
+  if (output.initialTree.tag !== 'swiftui:window-group') {
+    throw new Error(`Unexpected root tag: ${output.initialTree.tag}`)
+  }
+  if (output.finalTree.children[0]?.tag !== 'swiftui:vstack') {
+    throw new Error('Missing SwiftUI stack root after smoke verification.')
+  }
+}
+
+run().catch((error) => {
+  console.error(error)
+  process.exit(1)
+})
diff --git a/examples/swiftui/tsconfig.json b/examples/swiftui/tsconfig.json
new file mode 100644
index 0000000..b0c799d
--- /dev/null
+++ b/examples/swiftui/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsxImportSource": "@eclipsa/native"
+  },
+  "include": ["./**/*.ts", "./**/*.tsx", "./**/*.d.ts"]
+}
diff --git a/examples/swiftui/vite.config.ts b/examples/swiftui/vite.config.ts
new file mode 100644
index 0000000..1572f16
--- /dev/null
+++ b/examples/swiftui/vite.config.ts
@@ -0,0 +1,48 @@
+import path from 'node:path'
+import { defineConfig } from 'vite-plus'
+import { native } from '../../packages/native/vite.ts'
+import { swiftui } from '../../packages/native-swiftui/vite.ts'
+
+const root = path.resolve(import.meta.dirname)
+
+export default defineConfig({
+  appType: 'custom',
+  plugins: [native({ target: swiftui() })],
+  resolve: {
+    alias: [
+      {
+        find: /^eclipsa\/internal$/,
+        replacement: path.resolve(root, '../../packages/eclipsa/core/internal.ts'),
+      },
+      {
+        find: /^eclipsa$/,
+        replacement: path.resolve(root, '../../packages/eclipsa/mod.ts'),
+      },
+      {
+        find: /^@eclipsa\/native\/jsx-dev-runtime$/,
+        replacement: path.resolve(root, '../../packages/native/jsx-dev-runtime.ts'),
+      },
+      {
+        find: /^@eclipsa\/native\/jsx-runtime$/,
+        replacement: path.resolve(root, '../../packages/native/jsx-runtime.ts'),
+      },
+      {
+        find: /^@eclipsa\/native$/,
+        replacement: path.resolve(root, '../../packages/native/mod.ts'),
+      },
+      {
+        find: /^@eclipsa\/native-core$/,
+        replacement: path.resolve(root, '../../packages/native-core/mod.ts'),
+      },
+      {
+        find: /^@eclipsa\/native-swiftui$/,
+        replacement: path.resolve(root, '../../packages/native-swiftui/mod.ts'),
+      },
+    ],
+  },
+  server: {
+    fs: {
+      allow: ['../..'],
+    },
+  },
+})
diff --git a/package.json b/package.json
index 910f58d..eef8071 100644
--- a/package.json
+++ b/package.json
@@ -4,27 +4,42 @@
   "workspaces": [
     "packages/*",
     "e2e",
-    "docs"
+    "docs",
+    "examples/*"
   ],
   "type": "module",
   "scripts": {
     "dev": "turbo run dev --filter=./e2e",
     "build": "turbo run build",
-    "pack": "turbo run pack --filter=./packages/eclipsa --filter=./packages/create-eclipsa --filter=./packages/image",
+    "benchmark:build": "bun run --cwd benchmarks build",
+    "benchmark:bun": "bun run --cwd benchmarks bench:bun",
+    "benchmark:node": "bun run --cwd benchmarks bench:node",
+    "benchmark:deno": "bun run --cwd benchmarks bench:deno",
+    "benchmark:test": "bun run --cwd benchmarks test",
+    "pack": "turbo run pack --filter=./packages/eclipsa --filter=./packages/optimizer --filter=./packages/create-eclipsa --filter=./packages/image --filter=./packages/content --filter=./packages/motion --filter=./packages/markdown --filter=./packages/native --filter=./packages/native-core --filter=./packages/native-swiftui --filter=./packages/native-compose --filter=./packages/native-gtk4",
     "typecheck": "turbo run typecheck",
     "test": "turbo run test",
+    "test:coverage": "turbo run test:coverage",
     "test:e2e": "turbo run e2e --filter=./e2e",
-    "fmt": "vp fmt"
+    "lint": "vp check",
+    "fmt": "vp check --fix"
   },
   "devDependencies": {
+    "@eclipsa/optimizer": "workspace:^",
     "@types/node": "^24.5.2",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
     "@voidzero-dev/vite-plus-core": "^0.1.4",
     "@voidzero-dev/vite-plus-test": "^0.1.4",
+    "c8": "^11.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "turbo": "^2.8.16",
     "typescript": "^5.9.2",
     "vite": "npm:@voidzero-dev/vite-plus-core@^0.1.4",
     "vite-plus": "^0.1.4",
-    "vitest": "npm:@voidzero-dev/vite-plus-test@^0.1.4"
+    "vitest": "npm:@voidzero-dev/vite-plus-test@^0.1.4",
+    "vue": "^3.5.22"
   },
   "overrides": {
     "vite": "npm:@voidzero-dev/vite-plus-core@^0.1.4",
diff --git a/packages/content/highlight.ts b/packages/content/highlight.ts
new file mode 100644
index 0000000..c01036b
--- /dev/null
+++ b/packages/content/highlight.ts
@@ -0,0 +1,125 @@
+import { createHighlighter, type Highlighter } from 'shiki'
+import type { ContentHighlightOptions } from './types.ts'
+
+const DEFAULT_THEME = 'github-dark'
+const CODE_BLOCK_RE = /<pre\b[^>]*>\s*<code\b([^>]*)>([\s\S]*?)<\/code>\s*<\/pre>/giu
+const CLASS_ATTR_RE = /\bclass=(['"])(.*?)\1/iu
+const HTML_ENTITY_RE = /&(?:#(\d+)|#x([\da-fA-F]+)|amp|lt|gt|quot|#39);/g
+const highlighterCache = new Map<string, Promise<Highlighter>>()
+const loadedLanguagesByTheme = new Map<string, Set<string>>()
+
+const decodeHtmlEntities = (value: string) =>
+  value.replace(HTML_ENTITY_RE, (entity, decimal, hex) => {
+    if (decimal) {
+      return String.fromCodePoint(Number(decimal))
+    }
+    if (hex) {
+      return String.fromCodePoint(Number.parseInt(hex, 16))
+    }
+    switch (entity) {
+      case '&amp;':
+        return '&'
+      case '&lt;':
+        return '<'
+      case '&gt;':
+        return '>'
+      case '&quot;':
+        return '"'
+      case '&#39;':
+        return "'"
+      default:
+        return entity
+    }
+  })
+
+const getLanguageFromCodeAttributes = (attributes: string) => {
+  const classAttr = CLASS_ATTR_RE.exec(attributes)?.[2]
+  if (!classAttr) {
+    return null
+  }
+  for (const token of classAttr.split(/\s+/)) {
+    if (token.startsWith('language-')) {
+      return token.slice('language-'.length)
+    }
+  }
+  return null
+}
+
+const resolveTheme = (options: boolean | ContentHighlightOptions | undefined) => {
+  if (!options) {
+    return null
+  }
+  return options === true ? DEFAULT_THEME : (options.theme ?? DEFAULT_THEME)
+}
+
+const getHighlighter = (theme: string) => {
+  const cached = highlighterCache.get(theme)
+  if (cached) {
+    return cached
+  }
+  const next = createHighlighter({
+    langs: [],
+    themes: [theme],
+  })
+  highlighterCache.set(theme, next)
+  loadedLanguagesByTheme.set(theme, new Set())
+  return next
+}
+
+const ensureLanguageLoaded = async (theme: string, language: string) => {
+  const loadedLanguages = loadedLanguagesByTheme.get(theme) ?? new Set<string>()
+  loadedLanguagesByTheme.set(theme, loadedLanguages)
+  if (loadedLanguages.has(language)) {
+    return
+  }
+  const highlighter = await getHighlighter(theme)
+  await highlighter.loadLanguage(language as any)
+  loadedLanguages.add(language)
+}
+
+export const highlightHtml = async (
+  html: string,
+  options: boolean | ContentHighlightOptions | undefined,
+) => {
+  const theme = resolveTheme(options)
+  if (!theme) {
+    return html
+  }
+
+  const highlighter = await getHighlighter(theme)
+  let highlightedHtml = ''
+  let lastIndex = 0
+
+  for (const match of html.matchAll(CODE_BLOCK_RE)) {
+    const index = match.index ?? 0
+    const fullMatch = match[0]
+    const codeAttributes = match[1] ?? ''
+    const encodedCode = match[2] ?? ''
+    const language = getLanguageFromCodeAttributes(codeAttributes)
+
+    highlightedHtml += html.slice(lastIndex, index)
+    lastIndex = index + fullMatch.length
+
+    if (!language) {
+      highlightedHtml += fullMatch
+      continue
+    }
+
+    try {
+      await ensureLanguageLoaded(theme, language)
+      highlightedHtml += highlighter.codeToHtml(decodeHtmlEntities(encodedCode), {
+        lang: language,
+        theme,
+      })
+    } catch {
+      highlightedHtml += fullMatch
+    }
+  }
+
+  if (lastIndex === 0) {
+    return html
+  }
+
+  highlightedHtml += html.slice(lastIndex)
+  return highlightedHtml
+}
diff --git a/packages/content/internal.test.ts b/packages/content/internal.test.ts
new file mode 100644
index 0000000..512a684
--- /dev/null
+++ b/packages/content/internal.test.ts
@@ -0,0 +1,263 @@
+import * as fs from 'node:fs/promises'
+import * as os from 'node:os'
+import path from 'node:path'
+import { afterEach, describe, expect, it } from 'vitest'
+import {
+  createContentRuntime,
+  createContentSearch,
+  parseFrontmatter,
+  toEntryIdFromRelativePath,
+} from './internal.ts'
+import { defineCollection, glob } from './mod.ts'
+
+const createdRoots: string[] = []
+
+const createTempRoot = async () => {
+  const root = await fs.mkdtemp(path.join(os.tmpdir(), 'eclipsa-content-'))
+  createdRoots.push(root)
+  await fs.mkdir(path.join(root, 'app', 'content', 'docs', 'guide'), {
+    recursive: true,
+  })
+  return root
+}
+
+afterEach(async () => {
+  await Promise.all(
+    createdRoots.splice(0).map((root) => fs.rm(root, { force: true, recursive: true })),
+  )
+})
+
+describe('@eclipsa/content internals', () => {
+  it('parses YAML frontmatter and strips the delimiter block', () => {
+    expect(
+      parseFrontmatter(`---
+title: Hello
+order: 1
+---
+# Heading
+`),
+    ).toEqual({
+      body: '# Heading\n',
+      data: {
+        order: 1,
+        title: 'Hello',
+      },
+    })
+  })
+
+  it('normalizes file paths into stable entry ids', () => {
+    expect(toEntryIdFromRelativePath('guide/getting started.md')).toBe('guide/getting-started')
+    expect(toEntryIdFromRelativePath('guide/index.md')).toBe('guide')
+  })
+
+  it('loads markdown entries, honors slug overrides, and renders headings', async () => {
+    const root = await createTempRoot()
+    const configPath = path.join(root, 'app', 'content.config.ts')
+    await fs.writeFile(
+      path.join(root, 'app', 'content', 'docs', 'guide', 'getting-started.md'),
+      `---
+title: Getting Started
+description: Intro page
+order: 2
+slug: guide/start-here
+---
+# Getting Started
+
+Welcome to **content**.
+
+\`\`\`ts
+const answer = 42
+\`\`\`
+`,
+    )
+    await fs.writeFile(
+      path.join(root, 'app', 'content', 'docs', 'guide', 'overview.md'),
+      `---
+title: Overview
+description: Overview page
+order: 1
+---
+# Overview
+`,
+    )
+    const schema = {
+      '~standard': {
+        types: undefined as unknown as {
+          input: {
+            description: string
+            order: number
+            title: string
+          }
+          output: {
+            description: string
+            order: number
+            title: string
+          }
+        },
+        validate(value: unknown) {
+          return {
+            value: value as {
+              description: string
+              order: number
+              title: string
+            },
+          }
+        },
+        vendor: 'test',
+        version: 1 as const,
+      },
+    }
+    const docs = defineCollection({
+      loader: glob({
+        base: './content/docs',
+        pattern: '**/*.md',
+      }),
+      markdown: {
+        highlight: {
+          theme: 'github-dark',
+        },
+      },
+      schema,
+    })
+    const runtime = createContentRuntime({
+      collectionsModule: {
+        docs,
+      },
+      configPath,
+      root,
+    })
+
+    const entries = await runtime.getCollection(docs)
+
+    expect(entries.map((entry) => entry.id)).toEqual(['guide/overview', 'guide/start-here'])
+    expect(entries[1]?.data).toEqual({
+      description: 'Intro page',
+      order: 2,
+      title: 'Getting Started',
+    })
+
+    const entry = await runtime.getEntry(docs, 'guide/start-here')
+    expect(entry?.body).toContain('Welcome to **content**.')
+
+    const rendered = await runtime.render(entry!)
+    expect(rendered.html).toContain('<h1>Getting Started</h1>')
+    expect(rendered.html).toContain('class="shiki')
+    expect(rendered.html).toContain('answer')
+    expect(rendered.headings).toEqual([
+      {
+        depth: 1,
+        slug: 'getting-started',
+        text: 'Getting Started',
+      },
+    ])
+  })
+
+  it('surfaces frontmatter validation errors with file context', async () => {
+    const root = await createTempRoot()
+    const configPath = path.join(root, 'app', 'content.config.ts')
+    await fs.writeFile(
+      path.join(root, 'app', 'content', 'docs', 'guide', 'bad.md'),
+      `---
+title: Bad
+---
+# Bad
+`,
+    )
+    const schema = {
+      '~standard': {
+        types: undefined as unknown as {
+          input: {
+            title: string
+          }
+          output: {
+            title: string
+          }
+        },
+        validate() {
+          return {
+            issues: [
+              {
+                message: 'description is required',
+                path: ['description'],
+              },
+            ],
+          } as const
+        },
+        vendor: 'test',
+        version: 1 as const,
+      },
+    }
+    const docs = defineCollection({
+      loader: glob({
+        base: './content/docs',
+        pattern: '**/*.md',
+      }),
+      schema,
+    })
+    const runtime = createContentRuntime({
+      collectionsModule: {
+        docs,
+      },
+      configPath,
+      root,
+    })
+
+    await expect(runtime.getCollection(docs)).rejects.toThrow(
+      /Invalid frontmatter in collection "docs".*description is required/u,
+    )
+  })
+
+  it('builds a search index from searchable markdown collections', async () => {
+    const root = await createTempRoot()
+    const configPath = path.join(root, 'app', 'content.config.ts')
+    await fs.writeFile(
+      path.join(root, 'app', 'content', 'docs', 'guide', 'quick-start.md'),
+      `---
+title: Quick Start
+---
+# Quick Start
+
+Searchable nebula token.
+
+\`\`\`ts
+const searchNeedle = 'nebula'
+\`\`\`
+`,
+    )
+    const docs = defineCollection({
+      loader: glob({
+        base: './content/docs',
+        pattern: '**/*.md',
+      }),
+      search: {
+        hotkey: 'k',
+        limit: 5,
+        placeholder: 'Search docs',
+      },
+    })
+
+    const result = await createContentSearch({
+      base: '/',
+      collectionsModule: { docs },
+      configPath,
+      root,
+    })
+
+    expect(result.options).toMatchObject({
+      enabled: true,
+      hotkey: 'k',
+      limit: 5,
+      placeholder: 'Search docs',
+    })
+    expect(result.index.documents).toHaveLength(1)
+    expect(result.index.documents[0]).toMatchObject({
+      collection: 'docs',
+      id: 'guide/quick-start',
+      title: 'Quick Start',
+      url: '/docs/guide/quick-start',
+    })
+    expect(result.index.documents[0]?.body).toContain('Searchable nebula token.')
+    expect(result.index.documents[0]?.code).toContain("const searchNeedle = 'nebula'")
+    expect(result.index.documents[0]?.headings).toContain('Quick Start')
+  })
+})
diff --git a/packages/content/internal.ts b/packages/content/internal.ts
new file mode 100644
index 0000000..0c94823
--- /dev/null
+++ b/packages/content/internal.ts
@@ -0,0 +1,514 @@
+import fg from 'fast-glob'
+import * as fs from 'node:fs/promises'
+import { createRequire } from 'node:module'
+import path from 'node:path'
+import YAML from 'yaml'
+import type { StandardSchemaIssue, StandardSchemaV1 } from 'eclipsa'
+import { highlightHtml } from './highlight.ts'
+import { buildContentSearchIndex, resolveContentSearchOptions } from './search.ts'
+import type { CollectionEntry, ContentFilter, ContentRuntimeModule } from './mod.ts'
+import { CONTENT_COLLECTION_MARKER } from './types.ts'
+import type {
+  AnyCollection,
+  BaseContentEntry,
+  ContentMarkdownOptions,
+  ContentComponentProps,
+  ContentEntryReference,
+  ContentHeading,
+  ContentLoader,
+  ContentLoaderContext,
+  ContentLoaderObject,
+  ContentSearchDocument,
+  ContentSearchIndex,
+  ResolvedContentSearchOptions,
+  ContentSourceEntry,
+  DefinedCollection,
+  GlobLoader,
+  RenderedContent,
+  ResolvedContentEntries,
+} from './types.ts'
+
+interface ParsedFrontmatter {
+  body: string
+  data: Record<string, unknown>
+}
+
+interface ResolvedManifest {
+  collections: Map<AnyCollection, BaseContentEntry[]>
+  markdownByCollectionName: Map<string, ContentMarkdownOptions | undefined>
+  searchByCollectionName: Map<string, ResolvedContentSearchOptions>
+  entriesByCollection: Map<AnyCollection, Map<string, BaseContentEntry>>
+}
+
+interface CreateContentRuntimeOptions {
+  collectionsModule: Record<string, unknown>
+  configPath: string
+  root: string
+}
+
+const MARKDOWN_EXTENSION_RE = /\.md$/i
+const require = createRequire(import.meta.url)
+let markdownTransform: typeof import('@ox-content/napi').transform | null = null
+
+export class ContentCollectionError extends Error {
+  constructor(message: string) {
+    super(message)
+    this.name = 'ContentCollectionError'
+  }
+}
+
+const normalizeSlashes = (value: string) => value.replaceAll('\\', '/')
+
+const formatIssuePath = (pathValue: StandardSchemaIssue['path']) => {
+  if (!pathValue || pathValue.length === 0) {
+    return ''
+  }
+  return pathValue
+    .map((segment) =>
+      typeof segment === 'object' && segment !== null && 'key' in segment
+        ? String(segment.key)
+        : String(segment),
+    )
+    .join('.')
+}
+
+const createSchemaError = (
+  collection: string,
+  filePath: string,
+  issues: readonly StandardSchemaIssue[],
+) => {
+  const detail = issues
+    .map((issue) => {
+      const issuePath = formatIssuePath(issue.path)
+      return issuePath === '' ? issue.message : `${issuePath}: ${issue.message}`
+    })
+    .join('; ')
+  return new ContentCollectionError(
+    `Invalid frontmatter in collection "${collection}" for ${filePath}: ${detail}`,
+  )
+}
+
+const parseFrontmatter = (source: string): ParsedFrontmatter => {
+  if (!source.startsWith('---')) {
+    return {
+      body: source,
+      data: {},
+    }
+  }
+  const match = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/u.exec(source)
+  if (!match) {
+    return {
+      body: source,
+      data: {},
+    }
+  }
+  const raw = YAML.parse(match[1] ?? '')
+  if (raw == null) {
+    return {
+      body: source.slice(match[0].length),
+      data: {},
+    }
+  }
+  if (typeof raw !== 'object' || Array.isArray(raw)) {
+    throw new ContentCollectionError('Markdown frontmatter must resolve to an object.')
+  }
+  return {
+    body: source.slice(match[0].length),
+    data: { ...(raw as Record<string, unknown>) },
+  }
+}
+
+const normalizeIdSegment = (segment: string) =>
+  segment
+    .trim()
+    .replaceAll(/\s+/g, '-')
+    .replaceAll(/[^a-zA-Z0-9/_-]+/g, '-')
+    .replaceAll(/-+/g, '-')
+    .replaceAll(/^[-/]+|[-/]+$/g, '')
+
+const normalizeEntryId = (value: string) =>
+  normalizeSlashes(value).split('/').map(normalizeIdSegment).filter(Boolean).join('/')
+
+const toEntryIdFromRelativePath = (relativePath: string) => {
+  const withoutExt = normalizeSlashes(relativePath).replace(MARKDOWN_EXTENSION_RE, '')
+  const segments = withoutExt.split('/').filter(Boolean)
+  if (segments[segments.length - 1] === 'index' && segments.length > 1) {
+    segments.pop()
+  }
+  return normalizeEntryId(segments.join('/')) || 'index'
+}
+
+const validateData = async (
+  collection: string,
+  schema: StandardSchemaV1<any, any> | undefined,
+  filePath: string,
+  data: Record<string, unknown>,
+) => {
+  if (!schema) {
+    return data
+  }
+  const result = await schema['~standard'].validate(data)
+  if ('issues' in result && result.issues !== undefined) {
+    throw createSchemaError(collection, filePath, result.issues)
+  }
+  return result.value as Record<string, unknown>
+}
+
+const resolveGlobLoaderEntries = async (
+  collection: string,
+  loader: GlobLoader,
+  context: ContentLoaderContext,
+): Promise<ContentSourceEntry[]> => {
+  const baseDir = path.resolve(path.dirname(context.configPath), loader.base)
+  const matches = await fg(loader.pattern, {
+    absolute: true,
+    cwd: baseDir,
+    onlyFiles: true,
+  })
+  return Promise.all(
+    matches.map(async (filePath) => {
+      const source = await fs.readFile(filePath, 'utf8')
+      const relativePath = normalizeSlashes(path.relative(baseDir, filePath))
+      const parsed = parseFrontmatter(source)
+      const slug = typeof parsed.data.slug === 'string' ? parsed.data.slug : undefined
+      delete parsed.data.slug
+      return {
+        body: parsed.body,
+        data: parsed.data,
+        filePath,
+        id: slug ? normalizeEntryId(slug) : toEntryIdFromRelativePath(relativePath),
+      } satisfies ContentSourceEntry
+    }),
+  )
+}
+
+const resolveLoaderEntries = async (
+  collection: string,
+  loader: ContentLoader,
+  context: ContentLoaderContext,
+) => {
+  if ((loader as GlobLoader).kind === 'glob') {
+    return resolveGlobLoaderEntries(collection, loader as GlobLoader, context)
+  }
+  return [...(await (loader as ContentLoaderObject).load(context))]
+}
+
+const normalizeResolvedEntry = async (
+  collection: string,
+  schema: StandardSchemaV1<any, any> | undefined,
+  entry: ContentSourceEntry,
+  index: number,
+) => {
+  const parsed =
+    entry.data === undefined
+      ? parseFrontmatter(entry.body)
+      : {
+          body: entry.body,
+          data: { ...entry.data },
+        }
+  const filePath = entry.filePath ?? `${collection}:${entry.id ?? index}`
+  const slug = typeof parsed.data.slug === 'string' ? parsed.data.slug : undefined
+  delete parsed.data.slug
+  const id =
+    normalizeEntryId(entry.id ?? slug ?? `${collection}-${index}`) || `${collection}-${index}`
+  return {
+    body: parsed.body,
+    collection,
+    data: await validateData(collection, schema, filePath, parsed.data),
+    filePath,
+    id,
+  } satisfies BaseContentEntry
+}
+
+const isDefinedCollection = (value: unknown): value is DefinedCollection<any> =>
+  typeof value === 'object' &&
+  value !== null &&
+  CONTENT_COLLECTION_MARKER in value &&
+  (value as Record<string, unknown>)[CONTENT_COLLECTION_MARKER] === true
+
+export const resolveCollections = async ({
+  collectionsModule,
+  configPath,
+  root,
+}: CreateContentRuntimeOptions): Promise<ResolvedManifest> => {
+  const byCollection = new Map<AnyCollection, BaseContentEntry[]>()
+  const entriesByCollection = new Map<AnyCollection, Map<string, BaseContentEntry>>()
+  const markdownByCollectionName = new Map<string, ContentMarkdownOptions | undefined>()
+  const searchByCollectionName = new Map<string, ResolvedContentSearchOptions>()
+  const definedCollections = Object.entries(collectionsModule).filter(
+    (entry): entry is [string, DefinedCollection<any>] => isDefinedCollection(entry[1]),
+  )
+  for (const [collectionName, definition] of definedCollections) {
+    const context: ContentLoaderContext = {
+      collection: collectionName,
+      configPath,
+      root,
+    }
+    const rawEntries = await resolveLoaderEntries(collectionName, definition.loader, context)
+    const resolvedEntries = await Promise.all(
+      rawEntries.map((entry, index) =>
+        normalizeResolvedEntry(collectionName, definition.schema, entry, index),
+      ),
+    )
+    resolvedEntries.sort((left, right) => left.id.localeCompare(right.id))
+    const entriesById = new Map<string, BaseContentEntry>()
+    for (const entry of resolvedEntries) {
+      if (entriesById.has(entry.id)) {
+        throw new ContentCollectionError(
+          `Duplicate content id "${entry.id}" in collection "${collectionName}".`,
+        )
+      }
+      entriesById.set(entry.id, entry)
+    }
+    byCollection.set(definition, resolvedEntries)
+    entriesByCollection.set(definition, entriesById)
+    markdownByCollectionName.set(collectionName, definition.markdown)
+    searchByCollectionName.set(collectionName, resolveContentSearchOptions(definition.search))
+  }
+  return {
+    collections: byCollection,
+    markdownByCollectionName,
+    searchByCollectionName,
+    entriesByCollection,
+  }
+}
+
+const createContentRenderer =
+  (html: string) =>
+  (props: Omit<ContentComponentProps, 'html'> = {}) => ({
+    isStatic: false,
+    props: {
+      ...props,
+      dangerouslySetInnerHTML: html,
+    },
+    type: props.as ?? 'article',
+  })
+
+const resolveOxContentNapiPath = () => {
+  const resolvePaths = [
+    process.cwd(),
+    path.join(process.cwd(), 'node_modules', '@eclipsa', 'content'),
+  ]
+  try {
+    return require.resolve('@ox-content/napi', { paths: resolvePaths })
+  } catch {
+    return '@ox-content/napi'
+  }
+}
+
+const loadMarkdownTransform = async () => {
+  markdownTransform ??= (require(resolveOxContentNapiPath()) as typeof import('@ox-content/napi'))
+    .transform
+  return markdownTransform
+}
+
+const decodeHtmlEntities = (value: string) =>
+  value
+    .replaceAll('&amp;', '&')
+    .replaceAll('&lt;', '<')
+    .replaceAll('&gt;', '>')
+    .replaceAll('&quot;', '"')
+    .replaceAll('&#39;', "'")
+    .replaceAll('&nbsp;', ' ')
+
+const stripHtml = (html: string) =>
+  decodeHtmlEntities(
+    html
+      .replaceAll(/<style[\s\S]*?<\/style>/gu, ' ')
+      .replaceAll(/<script[\s\S]*?<\/script>/gu, ' ')
+      .replaceAll(/<[^>]+>/gu, ' ')
+      .replaceAll(/\s+/gu, ' ')
+      .trim(),
+  )
+
+const extractMarkdownCode = (source: string) => {
+  const codeBlocks = new Set<string>()
+  for (const match of source.matchAll(/```[\t ]*[^\n\r]*\r?\n([\s\S]*?)```/gu)) {
+    const code = match[1]?.trim()
+    if (code) {
+      codeBlocks.add(code)
+    }
+  }
+  for (const match of source.matchAll(/`([^`\n\r]+)`/gu)) {
+    const code = match[1]?.trim()
+    if (code) {
+      codeBlocks.add(code)
+    }
+  }
+  return [...codeBlocks]
+}
+
+const resolveSearchUrl = (base: string, entry: BaseContentEntry) => {
+  const normalizedBase = base === '' ? '/' : base.endsWith('/') ? base : `${base}/`
+  return `${normalizedBase}${entry.collection}/${entry.id}`.replaceAll(/\/+/g, '/')
+}
+
+const transformMarkdownEntry = async (entry: BaseContentEntry) => {
+  const transform = await loadMarkdownTransform()
+  const result = transform(entry.body, {
+    autolinks: true,
+    footnotes: true,
+    gfm: true,
+    sourcePath: entry.filePath,
+    strikethrough: true,
+    tables: true,
+    taskLists: true,
+    tocMaxDepth: 6,
+  })
+  if (result.errors.length > 0) {
+    throw new ContentCollectionError(
+      `Failed to render markdown for ${entry.filePath}: ${result.errors.join('; ')}`,
+    )
+  }
+  return result
+}
+
+const createSearchDocument = async (
+  entry: BaseContentEntry,
+  base: string,
+): Promise<ContentSearchDocument> => {
+  const result = await transformMarkdownEntry(entry)
+  const headings = result.toc.map((heading) => heading.text)
+  const title =
+    typeof entry.data.title === 'string'
+      ? entry.data.title
+      : (result.toc.find((heading) => heading.depth === 1)?.text ?? entry.id)
+
+  return {
+    body: stripHtml(result.html),
+    code: extractMarkdownCode(entry.body),
+    collection: entry.collection,
+    headings,
+    id: entry.id,
+    title,
+    url: resolveSearchUrl(base, entry),
+  }
+}
+
+const renderMarkdown = async (
+  entry: BaseContentEntry,
+  markdownOptions: ContentMarkdownOptions | undefined,
+): Promise<RenderedContent> => {
+  const result = await transformMarkdownEntry(entry)
+  const headings = result.toc.map(
+    (heading) =>
+      ({
+        depth: heading.depth,
+        slug: heading.slug,
+        text: heading.text,
+      }) satisfies ContentHeading,
+  )
+  const html = await highlightHtml(result.html, markdownOptions?.highlight)
+  return {
+    Content: createContentRenderer(html),
+    headings,
+    html,
+  }
+}
+
+export const createContentSearch = async ({
+  collectionsModule,
+  configPath,
+  root,
+  base,
+}: CreateContentRuntimeOptions & {
+  base: string
+}): Promise<{
+  index: ContentSearchIndex
+  options: ResolvedContentSearchOptions
+}> => {
+  const manifest = await resolveCollections({
+    collectionsModule,
+    configPath,
+    root,
+  })
+  const documents: ContentSearchDocument[] = []
+  let resolvedOptions = resolveContentSearchOptions(false)
+
+  for (const entries of manifest.collections.values()) {
+    const collectionName = entries[0]?.collection
+    if (!collectionName) {
+      continue
+    }
+    const searchOptions = manifest.searchByCollectionName.get(collectionName)
+    if (!searchOptions?.enabled) {
+      continue
+    }
+    if (!resolvedOptions.enabled) {
+      resolvedOptions = searchOptions
+    }
+    for (const entry of entries) {
+      documents.push(await createSearchDocument(entry, base))
+    }
+  }
+
+  return {
+    index: buildContentSearchIndex(documents, resolvedOptions),
+    options: resolvedOptions,
+  }
+}
+
+export const createContentRuntime = ({
+  collectionsModule,
+  configPath,
+  root,
+}: CreateContentRuntimeOptions): ContentRuntimeModule => {
+  let manifestPromise: Promise<ResolvedManifest> | null = null
+  const renderCache = new Map<string, RenderedContent>()
+  const getManifest = () => {
+    manifestPromise ??= resolveCollections({
+      collectionsModule,
+      configPath,
+      root,
+    })
+    return manifestPromise
+  }
+  return {
+    async getCollection<Collection extends AnyCollection>(
+      collection: Collection,
+      filter?: ContentFilter<Collection>,
+    ) {
+      const manifest = await getManifest()
+      const entries = (manifest.collections.get(collection) ?? []) as CollectionEntry<Collection>[]
+      if (!filter) {
+        return [...entries]
+      }
+      const filtered: CollectionEntry<Collection>[] = []
+      for (const entry of entries) {
+        if (await filter(entry)) {
+          filtered.push(entry)
+        }
+      }
+      return filtered
+    },
+    async getEntries<Entries extends readonly ContentEntryReference<any>[]>(entries: Entries) {
+      const manifest = await getManifest()
+      return entries.map((entry) => {
+        const collectionEntries = manifest.entriesByCollection.get(entry.collection)
+        return collectionEntries?.get(entry.id)
+      }) as ResolvedContentEntries<Entries>
+    },
+    async getEntry<Collection extends AnyCollection>(collection: Collection, id: string) {
+      const manifest = await getManifest()
+      return manifest.entriesByCollection.get(collection)?.get(id) as
+        | CollectionEntry<Collection>
+        | undefined
+    },
+    async render<Collection extends AnyCollection>(entry: CollectionEntry<Collection>) {
+      const key = `${entry.collection}:${entry.id}`
+      const cached = renderCache.get(key)
+      if (cached) {
+        return cached
+      }
+      const manifest = await getManifest()
+      const rendered = await renderMarkdown(
+        entry,
+        manifest.markdownByCollectionName.get(entry.collection),
+      )
+      renderCache.set(key, rendered)
+      return rendered
+    },
+  }
+}
+
+export { parseFrontmatter, toEntryIdFromRelativePath }
diff --git a/packages/content/mod.ts b/packages/content/mod.ts
new file mode 100644
index 0000000..d90212d
--- /dev/null
+++ b/packages/content/mod.ts
@@ -0,0 +1,124 @@
+import type { StandardSchemaV1 } from 'eclipsa'
+import { CONTENT_COLLECTION_MARKER } from './types.ts'
+import type {
+  AnyCollection,
+  CollectionEntry,
+  ContentCollectionDefinition,
+  ContentComponentProps,
+  ContentFilter,
+  ContentHighlightOptions,
+  ContentMarkdownOptions,
+  ContentEntryReference,
+  DefinedCollection,
+  GlobLoader,
+  GlobLoaderOptions,
+  ResolvedContentEntries,
+  RenderedContent,
+} from './types.ts'
+
+const ensureServerOnly = () => {
+  if (typeof window !== 'undefined') {
+    throw new Error('@eclipsa/content query APIs are server-only.')
+  }
+}
+
+const loadRuntime = async (): Promise<ContentRuntimeModule> => {
+  ensureServerOnly()
+  return import('virtual:eclipsa-content:runtime')
+}
+
+export interface ContentRuntimeModule {
+  getCollection<Collection extends AnyCollection>(
+    collection: Collection,
+    filter?: ContentFilter<Collection>,
+  ): Promise<CollectionEntry<Collection>[]>
+  getEntries<Entries extends readonly ContentEntryReference<any>[]>(
+    entries: Entries,
+  ): Promise<ResolvedContentEntries<Entries>>
+  getEntry<Collection extends AnyCollection>(
+    collection: Collection,
+    id: string,
+  ): Promise<CollectionEntry<Collection> | undefined>
+  render<Collection extends AnyCollection>(
+    entry: CollectionEntry<Collection>,
+  ): Promise<RenderedContent>
+}
+
+export type {
+  AnyCollection,
+  BaseContentEntry,
+  CollectionEntry,
+  ContentCollectionDefinition,
+  ContentComponentProps,
+  ContentFilter,
+  ContentHighlightOptions,
+  ContentMarkdownOptions,
+  ContentEntryReference,
+  ContentHeading,
+  ContentLoader,
+  ContentLoaderContext,
+  ContentLoaderObject,
+  ContentSearchDocument,
+  ContentSearchField,
+  ContentSearchIndex,
+  ContentSearchOptions,
+  ContentSearchPosting,
+  ContentSearchQueryOptions,
+  ContentSearchResult,
+  ContentSourceEntry,
+  DefinedCollection,
+  GlobLoader,
+  GlobLoaderOptions,
+  InferCollectionData,
+  ResolvedContentSearchOptions,
+  RenderedContent,
+  ResolvedContentEntries,
+} from './types.ts'
+
+export type { StandardSchemaV1 } from 'eclipsa'
+
+export const defineCollection = <
+  Schema extends StandardSchemaV1<any, any> | undefined = StandardSchemaV1<any, any> | undefined,
+>(
+  definition: ContentCollectionDefinition<Schema>,
+): DefinedCollection<Schema> =>
+  ({
+    ...definition,
+    [CONTENT_COLLECTION_MARKER]: true,
+  }) as DefinedCollection<Schema>
+
+export const glob = (options: GlobLoaderOptions): GlobLoader => ({
+  base: options.base,
+  kind: 'glob',
+  pattern: options.pattern,
+})
+
+export const Content = ({ as = 'article', html, ...props }: ContentComponentProps) => ({
+  isStatic: false,
+  props: {
+    ...props,
+    dangerouslySetInnerHTML: html,
+  },
+  type: as,
+})
+
+export const getCollection = async <Collection extends AnyCollection>(
+  collection: Collection,
+  filter?: ContentFilter<Collection>,
+): Promise<CollectionEntry<Collection>[]> =>
+  (await loadRuntime()).getCollection(collection, filter) as Promise<CollectionEntry<Collection>[]>
+
+export const getEntry = async <Collection extends AnyCollection>(
+  collection: Collection,
+  id: string,
+): Promise<CollectionEntry<Collection> | undefined> =>
+  (await loadRuntime()).getEntry(collection, id) as Promise<CollectionEntry<Collection> | undefined>
+
+export const getEntries = async <Entries extends readonly ContentEntryReference<any>[]>(
+  entries: Entries,
+): Promise<ResolvedContentEntries<Entries>> =>
+  (await loadRuntime()).getEntries(entries) as Promise<ResolvedContentEntries<Entries>>
+
+export const render = async <Collection extends AnyCollection>(
+  entry: CollectionEntry<Collection>,
+): Promise<RenderedContent> => (await loadRuntime()).render(entry)
diff --git a/packages/content/package.json b/packages/content/package.json
new file mode 100644
index 0000000..bd40ba0
--- /dev/null
+++ b/packages/content/package.json
@@ -0,0 +1,62 @@
+{
+  "name": "@eclipsa/content",
+  "private": false,
+  "homepage": "https://github.com/pnsk-lab/eclipsa",
+  "bugs": {
+    "url": "https://github.com/pnsk-lab/eclipsa/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pnsk-lab/eclipsa.git",
+    "directory": "packages/content"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./mod.ts",
+      "import": "./mod.ts"
+    },
+    "./vite": {
+      "types": "./vite.ts",
+      "import": "./vite.ts"
+    },
+    "./internal": {
+      "types": "./internal.ts",
+      "import": "./internal.ts"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "types": "./mod.d.mts",
+        "import": "./mod.mjs"
+      },
+      "./vite": {
+        "types": "./vite.d.mts",
+        "import": "./vite.mjs"
+      },
+      "./internal": {
+        "types": "./internal.d.mts",
+        "import": "./internal.mjs"
+      }
+    }
+  },
+  "scripts": {
+    "build": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
+    "pack": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
+    "test": "vp test --run",
+    "test:coverage": "c8 --reporter=lcov --reporter=json-summary --reporter=text bunx vp test --run",
+    "typecheck": "bun x tsc -p ../../tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@ox-content/napi": "^0.17.0",
+    "eclipsa": "workspace:*",
+    "fast-glob": "^3.3.2",
+    "shiki": "^4.0.2",
+    "yaml": "^2.8.1"
+  },
+  "peerDependencies": {
+    "vite": "*"
+  }
+}
diff --git a/packages/content/search.test.ts b/packages/content/search.test.ts
new file mode 100644
index 0000000..a7b2efe
--- /dev/null
+++ b/packages/content/search.test.ts
@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest'
+import {
+  buildContentSearchIndex,
+  resolveContentSearchOptions,
+  searchContentIndex,
+} from './search.ts'
+
+describe('@eclipsa/content search', () => {
+  it('resolves search options with defaults', () => {
+    expect(resolveContentSearchOptions(undefined)).toEqual({
+      enabled: true,
+      hotkey: '/',
+      limit: 10,
+      placeholder: 'Search docs...',
+      prefix: true,
+    })
+    expect(resolveContentSearchOptions(false).enabled).toBe(false)
+  })
+
+  it('ranks exact and prefix matches with snippets', () => {
+    const index = buildContentSearchIndex(
+      [
+        {
+          body: 'Build apps with eclipsa signals and resumable rendering.',
+          code: ['const count = useSignal(0)'],
+          collection: 'docs',
+          headings: ['Signals'],
+          id: 'materials/signal',
+          title: 'Signals',
+          url: '/docs/materials/signal',
+        },
+        {
+          body: 'Motion primitives for transitions.',
+          code: ['motion.div'],
+          collection: 'docs',
+          headings: ['Motion'],
+          id: 'integrations/motion',
+          title: 'Motion',
+          url: '/docs/integrations/motion',
+        },
+      ],
+      resolveContentSearchOptions({
+        limit: 3,
+      }),
+    )
+
+    const exact = searchContentIndex(index, 'signals')
+    expect(exact[0]?.id).toBe('materials/signal')
+    expect(exact[0]?.snippet).toContain('signals')
+
+    const prefix = searchContentIndex(index, 'sig')
+    expect(prefix[0]?.id).toBe('materials/signal')
+
+    expect(searchContentIndex(index, '   ')).toEqual([])
+  })
+})
diff --git a/packages/content/search.ts b/packages/content/search.ts
new file mode 100644
index 0000000..d6b1240
--- /dev/null
+++ b/packages/content/search.ts
@@ -0,0 +1,450 @@
+import type {
+  ContentSearchDocument,
+  ContentSearchField,
+  ContentSearchIndex,
+  ContentSearchOptions,
+  ContentSearchQueryOptions,
+  ContentSearchResult,
+  ContentSearchPosting,
+  ResolvedContentSearchOptions,
+} from './types.ts'
+
+const DEFAULT_SEARCH_OPTIONS: ResolvedContentSearchOptions = {
+  enabled: true,
+  hotkey: '/',
+  limit: 10,
+  placeholder: 'Search docs...',
+  prefix: true,
+}
+
+const SEARCH_STOPWORDS = new Set([
+  'a',
+  'an',
+  'and',
+  'are',
+  'as',
+  'at',
+  'be',
+  'by',
+  'for',
+  'from',
+  'has',
+  'have',
+  'how',
+  'in',
+  'is',
+  'it',
+  'of',
+  'on',
+  'or',
+  'that',
+  'the',
+  'this',
+  'to',
+  'was',
+  'were',
+  'with',
+])
+
+const SEARCH_K1 = 1.2
+const SEARCH_B = 0.75
+
+const isCjkChar = (char: string) =>
+  /[\u3400-\u4dbf\u4e00-\u9fff\u3040-\u30ff\uac00-\ud7af]/u.test(char)
+
+const tokenizeValue = (text: string, query: boolean) => {
+  const tokens: string[] = []
+  let current = ''
+
+  for (const char of text) {
+    if (isCjkChar(char)) {
+      if (current !== '') {
+        const token = current.toLowerCase()
+        if (query || (token.length >= 2 && !SEARCH_STOPWORDS.has(token))) {
+          tokens.push(token)
+        }
+        current = ''
+      }
+      tokens.push(char)
+      continue
+    }
+    if (/[\p{L}\p{N}_]/u.test(char)) {
+      current += char
+      continue
+    }
+    if (current !== '') {
+      const token = current.toLowerCase()
+      if (query || (token.length >= 2 && !SEARCH_STOPWORDS.has(token))) {
+        tokens.push(token)
+      }
+      current = ''
+    }
+  }
+
+  if (current !== '') {
+    const token = current.toLowerCase()
+    if (query || (token.length >= 2 && !SEARCH_STOPWORDS.has(token))) {
+      tokens.push(token)
+    }
+  }
+
+  return tokens
+}
+
+const tokenizeIndex = (text: string) => tokenizeValue(text, false)
+
+const tokenizeQuery = (text: string) => tokenizeValue(text, true)
+
+const getFieldBoost = (field: ContentSearchField) => {
+  switch (field) {
+    case 'title':
+      return 10
+    case 'heading':
+      return 5
+    case 'code':
+      return 0.5
+    case 'body':
+    default:
+      return 1
+  }
+}
+
+const addDocumentFieldTerms = (
+  map: Map<string, { field: ContentSearchField; tf: number }>,
+  field: ContentSearchField,
+  text: string,
+) => {
+  for (const token of tokenizeIndex(text)) {
+    const existing = map.get(token)
+    if (existing) {
+      existing.tf += 1
+      continue
+    }
+    map.set(token, { field, tf: 1 })
+  }
+}
+
+const getSnippet = (body: string, matches: string[], maxLength = 150) => {
+  if (body === '') {
+    return ''
+  }
+  const lowerBody = body.toLowerCase()
+  let firstMatchIndex = -1
+  for (const match of matches) {
+    const index = lowerBody.indexOf(match.toLowerCase())
+    if (index !== -1 && (firstMatchIndex === -1 || index < firstMatchIndex)) {
+      firstMatchIndex = index
+    }
+  }
+  const start = Math.max(0, firstMatchIndex - 50)
+  const end = Math.min(body.length, start + maxLength)
+  let snippet = body.slice(start, end).trim()
+  if (start > 0) {
+    snippet = `...${snippet}`
+  }
+  if (end < body.length) {
+    snippet = `${snippet}...`
+  }
+  return snippet
+}
+
+export const resolveContentSearchOptions = (
+  options: boolean | ContentSearchOptions | undefined,
+): ResolvedContentSearchOptions => {
+  if (options === false) {
+    return {
+      ...DEFAULT_SEARCH_OPTIONS,
+      enabled: false,
+    }
+  }
+  const normalized = typeof options === 'object' ? options : {}
+  return {
+    enabled: normalized.enabled ?? true,
+    hotkey: normalized.hotkey ?? DEFAULT_SEARCH_OPTIONS.hotkey,
+    limit: normalized.limit ?? DEFAULT_SEARCH_OPTIONS.limit,
+    placeholder: normalized.placeholder ?? DEFAULT_SEARCH_OPTIONS.placeholder,
+    prefix: normalized.prefix ?? DEFAULT_SEARCH_OPTIONS.prefix,
+  }
+}
+
+export const buildContentSearchIndex = (
+  documents: ContentSearchDocument[],
+  options: ResolvedContentSearchOptions,
+): ContentSearchIndex => {
+  const index: Record<string, ContentSearchPosting[]> = {}
+  const df: Record<string, number> = {}
+  let totalDocumentLength = 0
+
+  documents.forEach((document, docIdx) => {
+    const docTerms = new Map<string, { field: ContentSearchField; tf: number }>()
+
+    addDocumentFieldTerms(docTerms, 'title', document.title)
+    for (const heading of document.headings) {
+      addDocumentFieldTerms(docTerms, 'heading', heading)
+    }
+    addDocumentFieldTerms(docTerms, 'body', document.body)
+    for (const code of document.code) {
+      addDocumentFieldTerms(docTerms, 'code', code)
+    }
+
+    totalDocumentLength += tokenizeIndex(document.body).length
+
+    for (const [term, posting] of docTerms) {
+      df[term] = (df[term] ?? 0) + 1
+      const postings = index[term] ?? []
+      postings.push({
+        docIdx,
+        field: posting.field,
+        tf: posting.tf,
+      })
+      index[term] = postings
+    }
+  })
+
+  return {
+    avgDl: documents.length === 0 ? 0 : totalDocumentLength / documents.length,
+    df,
+    docCount: documents.length,
+    documents,
+    index,
+    options,
+  }
+}
+
+export const searchContentIndex = (
+  searchIndex: ContentSearchIndex,
+  query: string,
+  options: ContentSearchQueryOptions = {},
+): ContentSearchResult[] => {
+  if (query.trim() === '' || searchIndex.docCount === 0) {
+    return []
+  }
+
+  const tokens = tokenizeQuery(query)
+  if (tokens.length === 0) {
+    return []
+  }
+
+  const limit = options.limit ?? searchIndex.options.limit
+  const prefix = options.prefix ?? searchIndex.options.prefix
+  const docScores = new Map<number, { matches: Set<string>; score: number }>()
+
+  tokens.forEach((token, index) => {
+    const isLastToken = index === tokens.length - 1
+    const matchingTerms =
+      prefix && isLastToken && token.length >= 2
+        ? Object.keys(searchIndex.index).filter((term) => term.startsWith(token))
+        : searchIndex.index[token]
+          ? [token]
+          : []
+
+    for (const term of matchingTerms) {
+      const postings = searchIndex.index[term] ?? []
+      const df = searchIndex.df[term] ?? 1
+      const idf = Math.log((searchIndex.docCount - df + 0.5) / (df + 0.5) + 1)
+
+      for (const posting of postings) {
+        const document = searchIndex.documents[posting.docIdx]
+        if (!document) {
+          continue
+        }
+        const docLength = Math.max(1, tokenizeIndex(document.body).length)
+        const score =
+          idf *
+          ((posting.tf * (SEARCH_K1 + 1)) /
+            (posting.tf +
+              SEARCH_K1 *
+                (1 - SEARCH_B + (SEARCH_B * docLength) / Math.max(1, searchIndex.avgDl)))) *
+          getFieldBoost(posting.field)
+
+        const current = docScores.get(posting.docIdx) ?? {
+          matches: new Set<string>(),
+          score: 0,
+        }
+        current.score += score
+        current.matches.add(term)
+        docScores.set(posting.docIdx, current)
+      }
+    }
+  })
+
+  return [...docScores.entries()]
+    .map(([docIdx, value]) => {
+      const document = searchIndex.documents[docIdx]!
+      const matches = [...value.matches]
+      return {
+        collection: document.collection,
+        id: document.id,
+        matches,
+        score: value.score,
+        snippet: getSnippet(document.body, matches),
+        title: document.title,
+        url: document.url,
+      } satisfies ContentSearchResult
+    })
+    .sort((left, right) => right.score - left.score)
+    .slice(0, limit)
+}
+
+export const generateContentSearchRuntimeModule = (
+  assetPath: string,
+  options: ResolvedContentSearchOptions,
+) => `let searchIndexPromise = null
+const searchOptions = ${JSON.stringify(options)}
+
+const loadSearchIndex = async () => {
+  if (searchIndexPromise) {
+    return searchIndexPromise
+  }
+  searchIndexPromise = fetch(${JSON.stringify(assetPath)})
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error('Failed to load search index.')
+      }
+      return response.json()
+    })
+    .catch(() => null)
+  return searchIndexPromise
+}
+
+const isCjkChar = (char) => /[\\u3400-\\u4dbf\\u4e00-\\u9fff\\u3040-\\u30ff\\uac00-\\ud7af]/u.test(char)
+
+const tokenizeQuery = (text) => {
+  const tokens = []
+  let current = ''
+  for (const char of text) {
+    if (isCjkChar(char)) {
+      if (current !== '') {
+        tokens.push(current.toLowerCase())
+        current = ''
+      }
+      tokens.push(char)
+      continue
+    }
+    if (/[\\p{L}\\p{N}_]/u.test(char)) {
+      current += char
+      continue
+    }
+    if (current !== '') {
+      tokens.push(current.toLowerCase())
+      current = ''
+    }
+  }
+  if (current !== '') {
+    tokens.push(current.toLowerCase())
+  }
+  return tokens
+}
+
+const getFieldBoost = (field) => {
+  switch (field) {
+    case 'title':
+      return 10
+    case 'heading':
+      return 5
+    case 'code':
+      return 0.5
+    case 'body':
+    default:
+      return 1
+  }
+}
+
+const getSnippet = (body, matches, maxLength = 150) => {
+  if (body === '') {
+    return ''
+  }
+  const lowerBody = body.toLowerCase()
+  let firstMatchIndex = -1
+  for (const match of matches) {
+    const index = lowerBody.indexOf(match.toLowerCase())
+    if (index !== -1 && (firstMatchIndex === -1 || index < firstMatchIndex)) {
+      firstMatchIndex = index
+    }
+  }
+  const start = Math.max(0, firstMatchIndex - 50)
+  const end = Math.min(body.length, start + maxLength)
+  let snippet = body.slice(start, end).trim()
+  if (start > 0) {
+    snippet = '...' + snippet
+  }
+  if (end < body.length) {
+    snippet = snippet + '...'
+  }
+  return snippet
+}
+
+export const search = async (
+  query,
+  options = {},
+) => {
+  const searchIndex = await loadSearchIndex()
+  if (!searchIndex || query.trim() === '') {
+    return []
+  }
+  const tokens = tokenizeQuery(query)
+  if (tokens.length === 0) {
+    return []
+  }
+  const limit = options.limit ?? searchOptions.limit
+  const prefix = options.prefix ?? searchOptions.prefix
+  const docScores = new Map()
+
+  tokens.forEach((token, tokenIndex) => {
+    const isLastToken = tokenIndex === tokens.length - 1
+    const matchingTerms =
+      prefix && isLastToken && token.length >= 2
+        ? Object.keys(searchIndex.index).filter((term) => term.startsWith(token))
+        : searchIndex.index[token]
+          ? [token]
+          : []
+
+    for (const term of matchingTerms) {
+      const postings = searchIndex.index[term] ?? []
+      const df = searchIndex.df[term] ?? 1
+      const idf = Math.log((searchIndex.docCount - df + 0.5) / (df + 0.5) + 1)
+
+      for (const posting of postings) {
+        const document = searchIndex.documents[posting.docIdx]
+        if (!document) {
+          continue
+        }
+        const docLength = Math.max(1, document.body.split(/\\s+/u).filter(Boolean).length)
+        const score =
+          idf *
+          ((posting.tf * (1.2 + 1)) /
+            (posting.tf + 1.2 * (1 - 0.75 + (0.75 * docLength) / Math.max(1, searchIndex.avgDl)))) *
+          getFieldBoost(posting.field)
+
+        const current = docScores.get(posting.docIdx) ?? {
+          matches: new Set(),
+          score: 0,
+        }
+        current.score += score
+        current.matches.add(term)
+        docScores.set(posting.docIdx, current)
+      }
+    }
+  })
+
+  return [...docScores.entries()]
+    .map(([docIdx, value]) => {
+      const document = searchIndex.documents[docIdx]
+      const matches = [...value.matches]
+      return {
+        collection: document.collection,
+        id: document.id,
+        matches,
+        score: value.score,
+        snippet: getSnippet(document.body, matches),
+        title: document.title,
+        url: document.url,
+      }
+    })
+    .sort((left, right) => right.score - left.score)
+    .slice(0, limit)
+}
+
+export { searchOptions }
+export default { search, searchOptions }
+`
diff --git a/packages/content/typecheck.ts b/packages/content/typecheck.ts
new file mode 100644
index 0000000..16efa6e
--- /dev/null
+++ b/packages/content/typecheck.ts
@@ -0,0 +1,103 @@
+import {
+  defineCollection,
+  getEntries,
+  getEntry,
+  getCollection,
+  glob,
+  type CollectionEntry,
+} from './mod.ts'
+import type { StandardSchemaV1 } from 'eclipsa'
+
+type Equal<Left, Right> =
+  (<T>() => T extends Left ? 1 : 2) extends <T>() => T extends Right ? 1 : 2 ? true : false
+type Expect<T extends true> = T
+
+const schema = {
+  '~standard': {
+    types: undefined as unknown as {
+      input: {
+        title: string
+      }
+      output: {
+        order: number
+        title: string
+      }
+    },
+    validate(value: unknown) {
+      return {
+        value: value as {
+          order: number
+          title: string
+        },
+      }
+    },
+    vendor: 'typecheck',
+    version: 1 as const,
+  },
+} satisfies StandardSchemaV1<
+  {
+    title: string
+  },
+  {
+    order: number
+    title: string
+  }
+>
+
+const docs = defineCollection({
+  loader: glob({
+    base: './content/docs',
+    pattern: '**/*.md',
+  }),
+  markdown: {
+    highlight: {
+      theme: 'github-dark',
+    },
+  },
+  search: {
+    hotkey: 'k',
+    limit: 6,
+    placeholder: 'Search docs',
+  },
+  schema,
+})
+
+declare const entry: CollectionEntry<typeof docs>
+
+type _Id = Expect<Equal<typeof entry.id, string>>
+type _Collection = Expect<Equal<typeof entry.collection, string>>
+type _Data = Expect<
+  Equal<
+    typeof entry.data,
+    {
+      order: number
+      title: string
+    }
+  >
+>
+
+declare const filter: Parameters<typeof getCollection<typeof docs>>[1]
+declare const refsPromise: ReturnType<
+  typeof getEntries<
+    [
+      {
+        collection: typeof docs
+        id: 'guide/start-here'
+      },
+    ]
+  >
+>
+declare const entryPromise: ReturnType<typeof getEntry<typeof docs>>
+
+type _Filter = Expect<
+  Equal<
+    typeof filter,
+    ((entry: CollectionEntry<typeof docs>) => boolean | Promise<boolean>) | undefined
+  >
+>
+type _GetEntry = Expect<
+  Equal<typeof entryPromise, Promise<CollectionEntry<typeof docs> | undefined>>
+>
+type _GetEntries = Expect<
+  Equal<typeof refsPromise, Promise<[CollectionEntry<typeof docs> | undefined]>>
+>
diff --git a/packages/content/types.ts b/packages/content/types.ts
new file mode 100644
index 0000000..64dcb06
--- /dev/null
+++ b/packages/content/types.ts
@@ -0,0 +1,172 @@
+import type { InferStandardSchemaOutput, StandardSchemaV1 } from 'eclipsa'
+
+export const CONTENT_COLLECTION_MARKER = '__eclipsa_content_collection__'
+
+export interface ContentSourceEntry {
+  body: string
+  data?: Record<string, unknown>
+  filePath?: string
+  id?: string
+}
+
+export interface ContentLoaderContext {
+  collection: string
+  configPath: string
+  root: string
+}
+
+export interface ContentLoaderObject {
+  load(
+    context: ContentLoaderContext,
+  ): ContentSourceEntry[] | Promise<ContentSourceEntry[]> | readonly ContentSourceEntry[]
+}
+
+export interface ContentHighlightOptions {
+  theme?: string
+}
+
+export interface ContentMarkdownOptions {
+  highlight?: boolean | ContentHighlightOptions
+}
+
+export interface ContentSearchOptions {
+  enabled?: boolean
+  hotkey?: string
+  limit?: number
+  placeholder?: string
+  prefix?: boolean
+}
+
+export interface ResolvedContentSearchOptions {
+  enabled: boolean
+  hotkey: string
+  limit: number
+  placeholder: string
+  prefix: boolean
+}
+
+export type ContentSearchField = 'body' | 'code' | 'heading' | 'title'
+
+export interface ContentSearchDocument {
+  body: string
+  code: string[]
+  collection: string
+  headings: string[]
+  id: string
+  title: string
+  url: string
+}
+
+export interface ContentSearchPosting {
+  docIdx: number
+  field: ContentSearchField
+  tf: number
+}
+
+export interface ContentSearchIndex {
+  avgDl: number
+  df: Record<string, number>
+  docCount: number
+  documents: ContentSearchDocument[]
+  index: Record<string, ContentSearchPosting[]>
+  options: ResolvedContentSearchOptions
+}
+
+export interface ContentSearchQueryOptions {
+  limit?: number
+  prefix?: boolean
+}
+
+export interface ContentSearchResult {
+  collection: string
+  id: string
+  matches: string[]
+  score: number
+  snippet: string
+  title: string
+  url: string
+}
+
+export interface GlobLoaderOptions {
+  base: string
+  pattern: string
+}
+
+export interface GlobLoader {
+  readonly base: string
+  readonly kind: 'glob'
+  readonly pattern: string
+}
+
+export type ContentLoader = GlobLoader | ContentLoaderObject
+
+export interface ContentCollectionDefinition<
+  Schema extends StandardSchemaV1<any, any> | undefined,
+> {
+  loader: ContentLoader
+  markdown?: ContentMarkdownOptions
+  search?: boolean | ContentSearchOptions
+  schema?: Schema
+}
+
+export interface DefinedCollection<
+  Schema extends StandardSchemaV1<any, any> | undefined = StandardSchemaV1<any, any> | undefined,
+> extends ContentCollectionDefinition<Schema> {
+  readonly [CONTENT_COLLECTION_MARKER]: true
+}
+
+export type AnyCollection = DefinedCollection<StandardSchemaV1<any, any> | undefined>
+
+export type InferCollectionData<Collection extends AnyCollection> =
+  Collection extends DefinedCollection<infer Schema>
+    ? Schema extends StandardSchemaV1<any, any>
+      ? InferStandardSchemaOutput<Schema>
+      : Record<string, unknown>
+    : Record<string, unknown>
+
+export interface BaseContentEntry<
+  Data = Record<string, unknown>,
+  Collection extends string = string,
+> {
+  body: string
+  collection: Collection
+  data: Data
+  filePath: string
+  id: string
+}
+
+export interface ContentHeading {
+  depth: number
+  slug: string
+  text: string
+}
+
+export interface ContentComponentProps extends Record<string, unknown> {
+  as?: string
+  html: string
+}
+
+export interface RenderedContent {
+  Content: (props?: Omit<ContentComponentProps, 'html'>) => any
+  headings: ContentHeading[]
+  html: string
+}
+
+export type CollectionEntry<Collection extends AnyCollection = AnyCollection> = BaseContentEntry<
+  InferCollectionData<Collection>
+>
+
+export type ContentFilter<Collection extends AnyCollection> = (
+  entry: CollectionEntry<Collection>,
+) => boolean | Promise<boolean>
+
+export interface ContentEntryReference<Collection extends AnyCollection = AnyCollection> {
+  collection: Collection
+  id: string
+}
+
+export type ResolvedContentEntries<Entries extends readonly ContentEntryReference<any>[]> = {
+  [Index in keyof Entries]: Entries[Index] extends ContentEntryReference<infer Collection>
+    ? CollectionEntry<Collection> | undefined
+    : never
+}
diff --git a/packages/content/virtual-runtime.d.ts b/packages/content/virtual-runtime.d.ts
new file mode 100644
index 0000000..5df08ab
--- /dev/null
+++ b/packages/content/virtual-runtime.d.ts
@@ -0,0 +1,24 @@
+declare module 'virtual:eclipsa-content:runtime' {
+  export function getCollection<Collection extends import('./types.ts').AnyCollection>(
+    collection: Collection,
+    filter?: import('./mod.ts').ContentFilter<Collection>,
+  ): Promise<import('./mod.ts').CollectionEntry<Collection>[]>
+  export function getEntries<
+    Entries extends readonly import('./types.ts').ContentEntryReference<any>[],
+  >(entries: Entries): Promise<import('./types.ts').ResolvedContentEntries<Entries>>
+  export function getEntry<Collection extends import('./types.ts').AnyCollection>(
+    collection: Collection,
+    id: string,
+  ): Promise<import('./mod.ts').CollectionEntry<Collection> | undefined>
+  export function render<Collection extends import('./types.ts').AnyCollection>(
+    entry: import('./mod.ts').CollectionEntry<Collection>,
+  ): Promise<import('./types.ts').RenderedContent>
+}
+
+declare module 'virtual:eclipsa-content:search' {
+  export const searchOptions: import('./types.ts').ResolvedContentSearchOptions
+  export function search(
+    query: string,
+    options?: import('./types.ts').ContentSearchQueryOptions,
+  ): Promise<import('./types.ts').ContentSearchResult[]>
+}
diff --git a/packages/content/vite-config.test.ts b/packages/content/vite-config.test.ts
new file mode 100644
index 0000000..108cfec
--- /dev/null
+++ b/packages/content/vite-config.test.ts
@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest'
+import config from './vite.config.ts'
+
+describe('@eclipsa/content vite pack config', () => {
+  it('builds every published entrypoint with declarations', () => {
+    expect(config.pack).toMatchObject({
+      clean: true,
+      copy: ['virtual-runtime.d.ts'],
+      dts: true,
+      entry: ['mod.ts', 'vite.ts', 'internal.ts'],
+      format: ['esm'],
+      sourcemap: true,
+    })
+  })
+})
diff --git a/packages/content/vite.config.ts b/packages/content/vite.config.ts
new file mode 100644
index 0000000..756f6bf
--- /dev/null
+++ b/packages/content/vite.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite-plus'
+
+export default defineConfig({
+  test: {
+    include: ['*.test.ts'],
+    environment: 'node',
+  },
+  pack: {
+    copy: ['virtual-runtime.d.ts'],
+    entry: ['mod.ts', 'vite.ts', 'internal.ts'],
+    dts: true,
+    format: ['esm'],
+    clean: true,
+    sourcemap: true,
+  },
+})
diff --git a/packages/content/vite.test.ts b/packages/content/vite.test.ts
new file mode 100644
index 0000000..c1c8260
--- /dev/null
+++ b/packages/content/vite.test.ts
@@ -0,0 +1,321 @@
+import * as fs from 'node:fs/promises'
+import * as os from 'node:os'
+import path from 'node:path'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import type { Plugin } from 'vite'
+import { eclipsaContent } from './vite.ts'
+
+const DEV_APP_INVALIDATORS_KEY = Symbol.for('eclipsa.dev-app-invalidators')
+const createdRoots: string[] = []
+const contentEntryImportPath = JSON.stringify(path.resolve(__dirname, 'mod.ts'))
+
+const createTempRoot = async () => {
+  const root = await fs.mkdtemp(path.join(os.tmpdir(), 'eclipsa-content-vite-'))
+  createdRoots.push(root)
+  await fs.mkdir(path.join(root, 'app'), {
+    recursive: true,
+  })
+  return root
+}
+
+const getPlugin = (): Plugin => {
+  const plugin = eclipsaContent()
+  if (!Array.isArray(plugin)) {
+    throw new Error('Expected eclipsaContent() to return a plugin array')
+  }
+  return plugin[0] as Plugin
+}
+
+const getHotUpdate = (plugin: Plugin) => {
+  const hook = plugin.hotUpdate
+  if (typeof hook === 'function') {
+    return hook
+  }
+  return hook?.handler
+}
+
+afterEach(async () => {
+  await Promise.all(
+    createdRoots.splice(0).map((root) => fs.rm(root, { force: true, recursive: true })),
+  )
+})
+
+describe('@eclipsa/content vite plugin', () => {
+  it('returns a failing runtime module when content config is missing', async () => {
+    const root = await createTempRoot()
+    const plugin = getPlugin()
+    const configResolved =
+      typeof plugin.configResolved === 'function'
+        ? plugin.configResolved
+        : plugin.configResolved?.handler
+    await configResolved?.call(
+      {} as any,
+      {
+        root,
+      } as any,
+    )
+
+    const load = typeof plugin.load === 'function' ? plugin.load : plugin.load?.handler
+    const code = await load?.call({} as any, '\0eclipsa-content:runtime')
+
+    expect(code).toContain('Missing app/content.config.ts')
+  })
+
+  it('builds a runtime module that imports the app content config', async () => {
+    const root = await createTempRoot()
+    await fs.writeFile(path.join(root, 'app', 'content.config.ts'), 'export const docs = {}')
+    const plugin = getPlugin()
+    const configResolved =
+      typeof plugin.configResolved === 'function'
+        ? plugin.configResolved
+        : plugin.configResolved?.handler
+    await configResolved?.call(
+      {} as any,
+      {
+        root,
+      } as any,
+    )
+
+    const load = typeof plugin.load === 'function' ? plugin.load : plugin.load?.handler
+    const code = await load?.call({} as any, '\0eclipsa-content:runtime')
+
+    expect(code).toContain('@eclipsa/content/internal')
+    expect(code).toContain('app/content.config.ts')
+  })
+
+  it('builds a search runtime module when search is enabled', async () => {
+    const root = await createTempRoot()
+    await fs.mkdir(path.join(root, 'app', 'content', 'docs'), {
+      recursive: true,
+    })
+    await fs.writeFile(
+      path.join(root, 'app', 'content.config.ts'),
+      `
+import { defineCollection, glob } from ${contentEntryImportPath}
+
+export const docs = defineCollection({
+  loader: glob({
+    base: './content/docs',
+    pattern: '**/*.md',
+  }),
+  search: {
+    placeholder: 'Search docs',
+  },
+})
+`,
+    )
+    await fs.writeFile(
+      path.join(root, 'app', 'content', 'docs', 'page.md'),
+      `---
+title: Search Page
+---
+# Search Page
+
+Find the comet needle.
+`,
+    )
+
+    const plugin = getPlugin()
+    const configResolved =
+      typeof plugin.configResolved === 'function'
+        ? plugin.configResolved
+        : plugin.configResolved?.handler
+    await configResolved?.call(
+      {} as any,
+      {
+        base: '/',
+        root,
+      } as any,
+    )
+
+    const load = typeof plugin.load === 'function' ? plugin.load : plugin.load?.handler
+    const code = await load?.call(
+      { environment: { name: 'client' } } as any,
+      '\0eclipsa-content:search',
+    )
+
+    expect(code).toContain('__eclipsa_content_search__.json')
+    expect(code).toContain('searchOptions')
+    expect(code).not.toContain('import type')
+    expect(code).not.toContain(': Promise<')
+  })
+
+  it('stubs content config collections in the client environment', async () => {
+    const root = await createTempRoot()
+    const configPath = path.join(root, 'app', 'content.config.ts')
+    await fs.writeFile(
+      configPath,
+      `
+import { defineCollection } from '@eclipsa/content'
+import { z } from 'zod'
+
+export const docs = defineCollection({ loader: { load: () => [] }, schema: z.object({ title: z.string() }) })
+export const posts = defineCollection({ loader: { load: () => [] } })
+`,
+    )
+    const plugin = getPlugin()
+    const configResolved =
+      typeof plugin.configResolved === 'function'
+        ? plugin.configResolved
+        : plugin.configResolved?.handler
+    await configResolved?.call(
+      {} as any,
+      {
+        root,
+      } as any,
+    )
+
+    const load = typeof plugin.load === 'function' ? plugin.load : plugin.load?.handler
+    const code = await load?.call(
+      {
+        environment: {
+          name: 'client',
+        },
+      } as any,
+      configPath,
+    )
+
+    expect(code).toContain('export const docs = Object.freeze')
+    expect(code).toContain('export const posts = Object.freeze')
+    expect(code).not.toContain('zod')
+  })
+
+  it('stubs collections exported through an export list in the client environment', async () => {
+    const root = await createTempRoot()
+    const configPath = path.join(root, 'app', 'content.config.ts')
+    await fs.writeFile(
+      configPath,
+      `
+import { defineCollection } from '@eclipsa/content'
+
+const docs = defineCollection({ loader: { load: () => [] } })
+
+export { docs }
+`,
+    )
+    const plugin = getPlugin()
+    const configResolved =
+      typeof plugin.configResolved === 'function'
+        ? plugin.configResolved
+        : plugin.configResolved?.handler
+    await configResolved?.call(
+      {} as any,
+      {
+        root,
+      } as any,
+    )
+
+    const load = typeof plugin.load === 'function' ? plugin.load : plugin.load?.handler
+    const code = await load?.call(
+      {
+        environment: {
+          name: 'client',
+        },
+      } as any,
+      configPath,
+    )
+
+    expect(code).toContain('export const docs = Object.freeze')
+  })
+
+  it('invalidates registered dev apps and emits a content HMR event for markdown changes', async () => {
+    const root = await createTempRoot()
+    const plugin = getPlugin()
+    const configResolved =
+      typeof plugin.configResolved === 'function'
+        ? plugin.configResolved
+        : plugin.configResolved?.handler
+    await configResolved?.call(
+      {} as any,
+      {
+        root,
+      } as any,
+    )
+
+    const invalidate = vi.fn()
+    const send = vi.fn()
+    const hotUpdate = getHotUpdate(plugin)
+
+    const result = await hotUpdate?.call(
+      {} as any,
+      {
+        file: path.join(root, 'app', 'content', 'docs', 'guide', 'page.md'),
+        modules: [],
+        read: () => '',
+        server: {
+          [DEV_APP_INVALIDATORS_KEY]: new Set([invalidate]),
+          environments: {
+            ssr: {
+              moduleGraph: {
+                getModuleById: vi.fn(),
+                invalidateModule: vi.fn(),
+              },
+            },
+          },
+          ws: {
+            send,
+          },
+        },
+        timestamp: Date.now(),
+        type: 'update',
+      } as any,
+    )
+
+    expect(invalidate).toHaveBeenCalledTimes(1)
+    expect(send).toHaveBeenCalledWith('eclipsa:content-update')
+    expect(result).toEqual([])
+  })
+
+  it('emits a search index asset during bundle generation when search is enabled', async () => {
+    const root = await createTempRoot()
+    await fs.mkdir(path.join(root, 'app', 'content', 'docs'), {
+      recursive: true,
+    })
+    await fs.writeFile(
+      path.join(root, 'app', 'content.config.ts'),
+      `
+import { defineCollection, glob } from ${contentEntryImportPath}
+
+export const docs = defineCollection({
+  loader: glob({
+    base: './content/docs',
+    pattern: '**/*.md',
+  }),
+  search: true,
+})
+`,
+    )
+    await fs.writeFile(
+      path.join(root, 'app', 'content', 'docs', 'page.md'),
+      '# Search Asset\n\nMeteor shard token.',
+    )
+
+    const plugin = getPlugin()
+    const configResolved =
+      typeof plugin.configResolved === 'function'
+        ? plugin.configResolved
+        : plugin.configResolved?.handler
+    await configResolved?.call(
+      {} as any,
+      {
+        base: '/',
+        root,
+      } as any,
+    )
+
+    const emitFile = vi.fn()
+    const generateBundle =
+      typeof plugin.generateBundle === 'function'
+        ? plugin.generateBundle
+        : plugin.generateBundle?.handler
+
+    await generateBundle?.call({ emitFile } as any, {} as any, {} as any, false)
+
+    expect(emitFile).toHaveBeenCalledWith(
+      expect.objectContaining({
+        fileName: '__eclipsa_content_search__.json',
+        type: 'asset',
+      }),
+    )
+  })
+})
diff --git a/packages/content/vite.ts b/packages/content/vite.ts
new file mode 100644
index 0000000..fbd8980
--- /dev/null
+++ b/packages/content/vite.ts
@@ -0,0 +1,295 @@
+import * as fs from 'node:fs/promises'
+import { pathToFileURL } from 'node:url'
+import path from 'node:path'
+import type { Plugin, PluginOption, ResolvedConfig, ViteDevServer } from 'vite'
+import { createContentSearch } from './internal.ts'
+import { generateContentSearchRuntimeModule, resolveContentSearchOptions } from './search.ts'
+import type { ResolvedContentSearchOptions } from './types.ts'
+
+const DEV_APP_INVALIDATORS_KEY = Symbol.for('eclipsa.dev-app-invalidators')
+const CONTENT_HMR_EVENT = 'eclipsa:content-update'
+const VIRTUAL_RUNTIME_ID = 'virtual:eclipsa-content:runtime'
+const RESOLVED_VIRTUAL_RUNTIME_ID = '\0eclipsa-content:runtime'
+const VIRTUAL_SEARCH_ID = 'virtual:eclipsa-content:search'
+const RESOLVED_VIRTUAL_SEARCH_ID = '\0eclipsa-content:search'
+const CONTENT_CONFIG_PATH = 'app/content.config.ts'
+const CONTENT_COLLECTION_MARKER = '__eclipsa_content_collection__'
+const CONTENT_SEARCH_ASSET = '__eclipsa_content_search__.json'
+
+const normalizeSlashes = (value: string) => value.replaceAll('\\', '/')
+const stripQuery = (id: string) => id.split('?', 1)[0] ?? id
+
+const fileExists = async (filePath: string) => {
+  try {
+    await fs.access(filePath)
+    return true
+  } catch {
+    return false
+  }
+}
+
+const getConfigPath = (root: string) => path.join(root, CONTENT_CONFIG_PATH)
+const getSearchAssetPath = (base: string) => {
+  const normalizedBase = base === '' ? '/' : base.endsWith('/') ? base : `${base}/`
+  return `${normalizedBase}${CONTENT_SEARCH_ASSET}`
+}
+const isContentConfigId = (root: string, id: string) =>
+  normalizeSlashes(path.resolve(stripQuery(id))) === normalizeSlashes(getConfigPath(root))
+
+const getNamedCollectionExports = (source: string) => {
+  const exportNames = new Set<string>()
+  for (const match of source.matchAll(/^\s*export\s+const\s+([A-Za-z_$][\w$]*)\s*=/gm)) {
+    exportNames.add(match[1]!)
+  }
+  for (const match of source.matchAll(
+    /^\s*export\s*\{([\s\S]*?)\}\s*(?:from\s*['"][^'"]+['"])?\s*;?/gm,
+  )) {
+    for (const rawSpecifier of match[1]!.split(',')) {
+      const specifier = rawSpecifier.trim()
+      if (!specifier || specifier.startsWith('type ')) {
+        continue
+      }
+      const parsed = /^([A-Za-z_$][\w$]*)(?:\s+as\s+([A-Za-z_$][\w$]*))?$/.exec(specifier)
+      if (parsed) {
+        exportNames.add(parsed[2] ?? parsed[1]!)
+      }
+    }
+  }
+  return [...exportNames]
+}
+
+const invalidateVirtualRuntime = (server: ViteDevServer) => {
+  const graphs = [
+    (server as ViteDevServer & { moduleGraph?: any }).moduleGraph,
+    ...Object.values(
+      (server as ViteDevServer & { environments?: Record<string, { moduleGraph?: any }> })
+        .environments ?? {},
+    ).map((environment) => environment.moduleGraph),
+  ]
+  for (const graph of graphs) {
+    if (!graph) {
+      continue
+    }
+    for (const id of [
+      VIRTUAL_RUNTIME_ID,
+      RESOLVED_VIRTUAL_RUNTIME_ID,
+      VIRTUAL_SEARCH_ID,
+      RESOLVED_VIRTUAL_SEARCH_ID,
+    ]) {
+      const mod = graph.getModuleById?.(id)
+      if (mod) {
+        graph.invalidateModule?.(mod)
+      }
+    }
+  }
+}
+
+const invalidateRegisteredDevApps = (server: ViteDevServer) => {
+  const invalidators = (
+    server as ViteDevServer & {
+      [DEV_APP_INVALIDATORS_KEY]?: Set<() => void>
+    }
+  )[DEV_APP_INVALIDATORS_KEY]
+  if (!invalidators) {
+    return
+  }
+  for (const invalidate of invalidators) {
+    invalidate()
+  }
+}
+
+const shouldInvalidateForFile = (root: string, filePath: string) => {
+  const normalizedFilePath = normalizeSlashes(path.resolve(filePath))
+  const normalizedRoot = normalizeSlashes(path.resolve(root))
+  if (!normalizedFilePath.startsWith(normalizedRoot)) {
+    return false
+  }
+  if (normalizedFilePath === normalizeSlashes(path.join(root, CONTENT_CONFIG_PATH))) {
+    return true
+  }
+  return normalizedFilePath.endsWith('.md')
+}
+
+const createMissingRuntimeModule = (root: string) => {
+  const message = `Missing ${CONTENT_CONFIG_PATH} in ${root}.`
+  return `
+const error = new Error(${JSON.stringify(message)});
+export const getCollection = async () => { throw error; };
+export const getEntries = async () => { throw error; };
+export const getEntry = async () => { throw error; };
+export const render = async () => { throw error; };
+`
+}
+
+const createClientRuntimeModule = () => `
+const error = new Error("@eclipsa/content query APIs are server-only.");
+export const getCollection = async () => { throw error; };
+export const getEntries = async () => { throw error; };
+export const getEntry = async () => { throw error; };
+export const render = async () => { throw error; };
+`
+
+const createDisabledSearchModule = () => `
+export const searchOptions = ${JSON.stringify(resolveContentSearchOptions(false))};
+export const search = async () => [];
+export default { search, searchOptions };
+`
+
+const createClientContentConfigModule = async (configPath: string) => {
+  const source = await fs.readFile(configPath, 'utf8')
+  const exportNames = getNamedCollectionExports(source)
+  if (exportNames.length === 0) {
+    return ''
+  }
+  return exportNames
+    .map(
+      (name) =>
+        `export const ${name} = Object.freeze({ ${JSON.stringify(CONTENT_COLLECTION_MARKER)}: true });`,
+    )
+    .join('\n')
+}
+
+const createRuntimeModule = (root: string, configPath: string) => `
+import * as collectionsModule from ${JSON.stringify(normalizeSlashes(configPath))};
+import { createContentRuntime } from '@eclipsa/content/internal';
+
+const runtime = createContentRuntime({
+  collectionsModule,
+  configPath: ${JSON.stringify(normalizeSlashes(configPath))},
+  root: ${JSON.stringify(normalizeSlashes(root))},
+});
+
+export const getCollection = runtime.getCollection;
+export const getEntries = runtime.getEntries;
+export const getEntry = runtime.getEntry;
+export const render = runtime.render;
+`
+
+const loadCollectionsModule = async (configPath: string) => {
+  const href = pathToFileURL(configPath).href
+  return import(`${href}?t=${Date.now()}`)
+}
+
+const handleInvalidation = (server: ViteDevServer, root: string, filePath: string) => {
+  if (!shouldInvalidateForFile(root, filePath)) {
+    return false
+  }
+  invalidateVirtualRuntime(server)
+  invalidateRegisteredDevApps(server)
+  ;(
+    server as ViteDevServer & { ws?: { send?: (event: string, payload?: unknown) => void } }
+  ).ws?.send?.(CONTENT_HMR_EVENT)
+  return true
+}
+
+const contentPlugin = (): Plugin => {
+  let config: ResolvedConfig
+  let searchStatePromise: Promise<{
+    indexJson: string
+    options: ResolvedContentSearchOptions
+  } | null> | null = null
+
+  const resolveSearchState = async () => {
+    if (searchStatePromise) {
+      return searchStatePromise
+    }
+    searchStatePromise = (async () => {
+      const configPath = getConfigPath(config.root)
+      if (!(await fileExists(configPath))) {
+        return null
+      }
+      const collectionsModule = await loadCollectionsModule(configPath)
+      const result = await createContentSearch({
+        base: config.base,
+        collectionsModule,
+        configPath,
+        root: config.root,
+      })
+      if (!result.options.enabled || result.index.documents.length === 0) {
+        return null
+      }
+      return {
+        indexJson: JSON.stringify(result.index),
+        options: result.options,
+      }
+    })()
+    return searchStatePromise
+  }
+
+  return {
+    enforce: 'pre',
+    name: 'vite-plugin-eclipsa-content',
+    configResolved(resolvedConfig) {
+      config = resolvedConfig
+    },
+    configureServer(server) {
+      const searchPath = getSearchAssetPath(config.base)
+      server.middlewares.use(async (req, res, next) => {
+        const requestPath = req.url?.split('?', 1)[0] ?? ''
+        if (requestPath !== searchPath) {
+          next()
+          return
+        }
+        const state = await resolveSearchState()
+        if (!state) {
+          res.statusCode = 404
+          res.end('Not found')
+          return
+        }
+        res.setHeader('Content-Type', 'application/json; charset=utf-8')
+        res.end(state.indexJson)
+      })
+    },
+    hotUpdate(options) {
+      searchStatePromise = null
+      if (handleInvalidation(options.server, config.root, options.file)) {
+        return []
+      }
+    },
+    resolveId(id) {
+      if (id === VIRTUAL_RUNTIME_ID) {
+        return RESOLVED_VIRTUAL_RUNTIME_ID
+      }
+      if (id === VIRTUAL_SEARCH_ID) {
+        return RESOLVED_VIRTUAL_SEARCH_ID
+      }
+      return null
+    },
+    async load(id) {
+      if (id === RESOLVED_VIRTUAL_SEARCH_ID) {
+        const state = await resolveSearchState()
+        if (!state) {
+          return createDisabledSearchModule()
+        }
+        return generateContentSearchRuntimeModule(getSearchAssetPath(config.base), state.options)
+      }
+      if (id !== RESOLVED_VIRTUAL_RUNTIME_ID) {
+        if (this.environment?.name === 'client' && isContentConfigId(config.root, id)) {
+          return createClientContentConfigModule(getConfigPath(config.root))
+        }
+        return null
+      }
+      if (this.environment?.name === 'client') {
+        return createClientRuntimeModule()
+      }
+      const configPath = getConfigPath(config.root)
+      if (!(await fileExists(configPath))) {
+        return createMissingRuntimeModule(config.root)
+      }
+      return createRuntimeModule(config.root, configPath)
+    },
+    async generateBundle() {
+      const state = await resolveSearchState()
+      if (!state) {
+        return
+      }
+      this.emitFile({
+        fileName: CONTENT_SEARCH_ASSET,
+        source: state.indexJson,
+        type: 'asset',
+      })
+    },
+  }
+}
+
+export const eclipsaContent = (): PluginOption => [contentPlugin()]
diff --git a/packages/create-eclipsa/mod.test.ts b/packages/create-eclipsa/mod.test.ts
index 00005c4..afe7255 100644
--- a/packages/create-eclipsa/mod.test.ts
+++ b/packages/create-eclipsa/mod.test.ts
@@ -2,7 +2,7 @@ import * as fs from 'node:fs/promises'
 import * as os from 'node:os'
 import * as path from 'node:path'
 import { afterEach, describe, expect, it } from 'vitest'
-import { scaffoldApp } from './mod.ts'
+import { promptForScaffoldOptions, scaffoldApp } from './mod.ts'
 
 const tempDirs: string[] = []
 
@@ -19,17 +19,28 @@ const createTempDir = async () => {
 }
 
 describe('create-eclipsa', () => {
-  it('scaffolds a Node SSR starter into an empty directory', async () => {
+  it('scaffolds a Node SSR starter with vite into an empty directory', async () => {
     const target = await createTempDir()
 
     const result = await scaffoldApp(target, {
       packageName: 'demo-app',
+      toolchain: 'vite',
     })
 
     expect(result.packageName).toBe('demo-app')
+    expect(result.toolchain).toBe('vite')
     await expect(fs.readFile(path.join(target, 'package.json'), 'utf8')).resolves.toContain(
       '"name": "demo-app"',
     )
+    await expect(fs.readFile(path.join(target, 'package.json'), 'utf8')).resolves.toContain(
+      '"dev": "vite dev"',
+    )
+    await expect(fs.readFile(path.join(target, 'package.json'), 'utf8')).resolves.toContain(
+      '"vite": "latest"',
+    )
+    await expect(fs.readFile(path.join(target, 'vite.config.ts'), 'utf8')).resolves.toContain(
+      "from 'vite'",
+    )
     await expect(fs.readFile(path.join(target, 'vite.config.ts'), 'utf8')).resolves.toContain(
       'plugins: [eclipsa()]',
     )
@@ -41,10 +52,49 @@ describe('create-eclipsa', () => {
     ).resolves.not.toContain("import './vite-env.d.ts'")
   })
 
+  it('scaffolds a Node SSR starter with vite-plus commands', async () => {
+    const target = await createTempDir()
+
+    const result = await scaffoldApp(target, {
+      packageName: 'demo-app',
+      toolchain: 'vite-plus',
+    })
+
+    expect(result.toolchain).toBe('vite-plus')
+    await expect(fs.readFile(path.join(target, 'package.json'), 'utf8')).resolves.toContain(
+      '"dev": "vp dev"',
+    )
+    await expect(fs.readFile(path.join(target, 'package.json'), 'utf8')).resolves.toContain(
+      '"build": "vp build"',
+    )
+    await expect(fs.readFile(path.join(target, 'package.json'), 'utf8')).resolves.toContain(
+      '"vite-plus": "^0.1.4"',
+    )
+    await expect(fs.readFile(path.join(target, 'vite.config.ts'), 'utf8')).resolves.toContain(
+      "from 'vite-plus'",
+    )
+  })
+
   it('rejects non-empty target directories', async () => {
     const target = await createTempDir()
     await fs.writeFile(path.join(target, 'README.md'), 'busy')
 
     await expect(scaffoldApp(target)).rejects.toThrow(/not empty/)
   })
+
+  it('prompts for project name and toolchain with defaults', async () => {
+    const answers = ['my-project', 'vite-plus']
+    const result = await promptForScaffoldOptions(
+      {
+        targetDir: 'my-eclipsa-app',
+        toolchain: 'vite',
+      },
+      async () => answers.shift() ?? '',
+    )
+
+    expect(result).toEqual({
+      targetDir: 'my-project',
+      toolchain: 'vite-plus',
+    })
+  })
 })
diff --git a/packages/create-eclipsa/mod.ts b/packages/create-eclipsa/mod.ts
index a1f9bd7..056bcfb 100644
--- a/packages/create-eclipsa/mod.ts
+++ b/packages/create-eclipsa/mod.ts
@@ -2,6 +2,7 @@
 import * as fs from 'node:fs/promises'
 import * as path from 'node:path'
 import process from 'node:process'
+import { createInterface } from 'node:readline/promises'
 import { fileURLToPath } from 'node:url'
 
 const TEMPLATE_ROOT = path.join(
@@ -11,9 +12,42 @@ const TEMPLATE_ROOT = path.join(
 )
 
 const PACKAGE_NAME_TOKEN = '__APP_NAME__'
+const DEV_COMMAND_TOKEN = '__DEV_COMMAND__'
+const BUILD_COMMAND_TOKEN = '__BUILD_COMMAND__'
+const VITE_IMPORT_SOURCE_TOKEN = '__VITE_IMPORT_SOURCE__'
+const VITE_DEPENDENCY_NAME_TOKEN = '__VITE_DEPENDENCY_NAME__'
+const VITE_DEPENDENCY_VERSION_TOKEN = '__VITE_DEPENDENCY_VERSION__'
 
 const TEMPLATE_TEXT_EXTENSIONS = new Set(['.json', '.ts', '.tsx', '.md', '.gitignore'])
 
+export type Toolchain = 'vite' | 'vite-plus'
+
+const TOOLCHAIN_CONFIG: Record<
+  Toolchain,
+  {
+    buildCommand: string
+    devCommand: string
+    dependencyName: string
+    dependencyVersion: string
+    importSource: string
+  }
+> = {
+  vite: {
+    buildCommand: 'vite build',
+    devCommand: 'vite dev',
+    dependencyName: 'vite',
+    dependencyVersion: 'latest',
+    importSource: 'vite',
+  },
+  'vite-plus': {
+    buildCommand: 'vp build',
+    devCommand: 'vp dev',
+    dependencyName: 'vite-plus',
+    dependencyVersion: '^0.1.4',
+    importSource: 'vite-plus',
+  },
+}
+
 const toPackageName = (input: string) =>
   input
     .trim()
@@ -27,6 +61,17 @@ const isTextTemplate = (filePath: string) => {
   return TEMPLATE_TEXT_EXTENSIONS.has(extension) || path.basename(filePath) === '.gitignore'
 }
 
+const normalizeToolchain = (input: string): Toolchain | null => {
+  const normalized = input.trim().toLowerCase()
+  if (!normalized) {
+    return null
+  }
+  if (normalized === 'vite' || normalized === 'vite-plus') {
+    return normalized
+  }
+  return null
+}
+
 const ensureDirectory = async (targetPath: string) => {
   await fs.mkdir(targetPath, { recursive: true })
 }
@@ -47,15 +92,17 @@ const copyTemplateDirectory = async (
   sourceDir: string,
   targetDir: string,
   packageName: string,
+  toolchain: Toolchain,
 ): Promise<void> => {
   await ensureDirectory(targetDir)
+  const toolchainConfig = TOOLCHAIN_CONFIG[toolchain]
 
   for (const entry of await fs.readdir(sourceDir, { withFileTypes: true })) {
     const sourcePath = path.join(sourceDir, entry.name)
     const targetPath = path.join(targetDir, entry.name)
 
     if (entry.isDirectory()) {
-      await copyTemplateDirectory(sourcePath, targetPath, packageName)
+      await copyTemplateDirectory(sourcePath, targetPath, packageName, toolchain)
       continue
     }
 
@@ -65,7 +112,16 @@ const copyTemplateDirectory = async (
 
     if (isTextTemplate(sourcePath)) {
       const content = await fs.readFile(sourcePath, 'utf8')
-      await fs.writeFile(targetPath, content.replaceAll(PACKAGE_NAME_TOKEN, packageName))
+      await fs.writeFile(
+        targetPath,
+        content
+          .replaceAll(PACKAGE_NAME_TOKEN, packageName)
+          .replaceAll(DEV_COMMAND_TOKEN, toolchainConfig.devCommand)
+          .replaceAll(BUILD_COMMAND_TOKEN, toolchainConfig.buildCommand)
+          .replaceAll(VITE_IMPORT_SOURCE_TOKEN, toolchainConfig.importSource)
+          .replaceAll(VITE_DEPENDENCY_NAME_TOKEN, toolchainConfig.dependencyName)
+          .replaceAll(VITE_DEPENDENCY_VERSION_TOKEN, toolchainConfig.dependencyVersion),
+      )
       continue
     }
 
@@ -77,6 +133,7 @@ export const scaffoldApp = async (
   targetDir: string,
   options?: {
     packageName?: string
+    toolchain?: Toolchain
   },
 ) => {
   const resolvedTarget = path.resolve(targetDir)
@@ -85,10 +142,43 @@ export const scaffoldApp = async (
   }
 
   const packageName = toPackageName(options?.packageName ?? path.basename(resolvedTarget))
-  await copyTemplateDirectory(TEMPLATE_ROOT, resolvedTarget, packageName)
+  const toolchain = options?.toolchain ?? 'vite'
+  await copyTemplateDirectory(TEMPLATE_ROOT, resolvedTarget, packageName, toolchain)
   return {
     packageName,
     targetDir: resolvedTarget,
+    toolchain,
+  }
+}
+
+type PromptDefaults = {
+  targetDir: string
+  toolchain: Toolchain
+}
+
+type PromptFn = (message: string) => Promise<string>
+
+const promptWithDefault = async (prompt: PromptFn, message: string, fallback: string) => {
+  const response = (await prompt(`${message} (${fallback}): `)).trim()
+  return response || fallback
+}
+
+export const promptForScaffoldOptions = async (
+  defaults: PromptDefaults,
+  prompt: PromptFn,
+): Promise<PromptDefaults> => {
+  const targetDir = await promptWithDefault(prompt, 'Project name', defaults.targetDir)
+
+  while (true) {
+    const answer = await promptWithDefault(prompt, 'Use vite or vite-plus', defaults.toolchain)
+    const toolchain = normalizeToolchain(answer)
+    if (toolchain) {
+      return {
+        targetDir,
+        toolchain,
+      }
+    }
+    console.log('Please choose either "vite" or "vite-plus".')
   }
 }
 
@@ -105,13 +195,35 @@ const isDirectExecution = () => {
 }
 
 if (isDirectExecution()) {
-  const targetDir = process.argv[2] ?? '.'
-  if (targetDir === '--help' || targetDir === '-h') {
+  const argTargetDir = process.argv[2]
+  if (argTargetDir === '--help' || argTargetDir === '-h') {
     printUsage()
     process.exit(0)
   }
 
-  scaffoldApp(targetDir)
+  const run = async () => {
+    const defaults = {
+      targetDir: argTargetDir ?? 'my-eclipsa-app',
+      toolchain: 'vite' as const,
+    }
+    const options =
+      process.stdin.isTTY && process.stdout.isTTY
+        ? await (() => {
+            const readline = createInterface({
+              input: process.stdin,
+              output: process.stdout,
+            })
+            const prompt = (message: string) => readline.question(message)
+            return promptForScaffoldOptions(defaults, prompt).finally(() => readline.close())
+          })()
+        : defaults
+
+    return scaffoldApp(options.targetDir, {
+      toolchain: options.toolchain,
+    })
+  }
+
+  run()
     .then(({ packageName, targetDir: resolvedTarget }) => {
       console.log(`Created ${packageName} in ${resolvedTarget}`)
       console.log('Next steps:')
diff --git a/packages/create-eclipsa/package.json b/packages/create-eclipsa/package.json
index 603d1e0..68e3b19 100644
--- a/packages/create-eclipsa/package.json
+++ b/packages/create-eclipsa/package.json
@@ -1,11 +1,11 @@
 {
   "name": "create-eclipsa",
-  "version": "0.1.0-alpha.0",
-  "license": "MIT",
+  "version": "0.0.0",
   "homepage": "https://github.com/pnsk-lab/eclipsa",
   "bugs": {
     "url": "https://github.com/pnsk-lab/eclipsa/issues"
   },
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pnsk-lab/eclipsa.git",
@@ -30,6 +30,7 @@
     "build": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
     "pack": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
     "test": "vp test --run",
-    "typecheck": "bun x tsc -p ../../tsconfig.json --noEmit"
+    "test:coverage": "c8 --reporter=lcov --reporter=json-summary --reporter=text bunx vp test --run",
+    "typecheck": "bun x tsc -p ./tsconfig.json --noEmit"
   }
 }
diff --git a/packages/create-eclipsa/template/node-ssr/app/+page.tsx b/packages/create-eclipsa/template/node-ssr/app/+page.tsx
index 3c7bd98..32882ee 100644
--- a/packages/create-eclipsa/template/node-ssr/app/+page.tsx
+++ b/packages/create-eclipsa/template/node-ssr/app/+page.tsx
@@ -1,6 +1,6 @@
-import { component$, useSignal } from 'eclipsa'
+import { useSignal } from 'eclipsa'
 
-export default component$(() => {
+export default () => {
   const count = useSignal(0)
 
   return (
@@ -9,7 +9,7 @@ export default component$(() => {
       <p>The starter is wired for Node SSR and resumable client updates.</p>
       <button
         type="button"
-        onClick$={() => {
+        onClick={() => {
           count.value += 1
         }}
       >
@@ -17,4 +17,4 @@ export default component$(() => {
       </button>
     </main>
   )
-})
+}
diff --git a/packages/create-eclipsa/template/node-ssr/package.json b/packages/create-eclipsa/template/node-ssr/package.json
index 692a690..b2f8b4c 100644
--- a/packages/create-eclipsa/template/node-ssr/package.json
+++ b/packages/create-eclipsa/template/node-ssr/package.json
@@ -3,8 +3,8 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "vite-plus dev",
-    "build": "vite-plus build",
+    "dev": "__DEV_COMMAND__",
+    "build": "__BUILD_COMMAND__",
     "start": "node dist/server/index.mjs",
     "typecheck": "tsc --noEmit"
   },
@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "@types/node": "^24.5.2",
-    "typescript": "^5.9.2",
-    "vite-plus": "^0.1.4"
+    "__VITE_DEPENDENCY_NAME__": "__VITE_DEPENDENCY_VERSION__",
+    "typescript": "^5.9.2"
   }
 }
diff --git a/packages/create-eclipsa/template/node-ssr/vite.config.ts b/packages/create-eclipsa/template/node-ssr/vite.config.ts
index 54cb7ac..5963b2b 100644
--- a/packages/create-eclipsa/template/node-ssr/vite.config.ts
+++ b/packages/create-eclipsa/template/node-ssr/vite.config.ts
@@ -1,4 +1,4 @@
-import { defineConfig } from 'vite-plus'
+import { defineConfig } from '__VITE_IMPORT_SOURCE__'
 import { eclipsa } from 'eclipsa/vite'
 
 export default defineConfig({
diff --git a/packages/create-eclipsa/tsconfig.json b/packages/create-eclipsa/tsconfig.json
new file mode 100644
index 0000000..6f43c19
--- /dev/null
+++ b/packages/create-eclipsa/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./mod.ts", "./vite.config.ts", "./*.test.ts", "./*.d.ts"],
+  "exclude": ["./dist/**", "./node_modules/**", "./template/**", "./.turbo/**"]
+}
diff --git a/packages/create-eclipsa/typecheck-config.test.ts b/packages/create-eclipsa/typecheck-config.test.ts
new file mode 100644
index 0000000..dca5c7e
--- /dev/null
+++ b/packages/create-eclipsa/typecheck-config.test.ts
@@ -0,0 +1,32 @@
+import { readFile } from 'node:fs/promises'
+import { describe, expect, it } from 'vitest'
+
+const packageDir = new URL('.', import.meta.url)
+
+describe('create-eclipsa typecheck config', () => {
+  it('typechecks the package with a local tsconfig that excludes templates', async () => {
+    const [packageJsonRaw, tsconfigRaw, rootTsconfigRaw] = await Promise.all([
+      readFile(new URL('./package.json', packageDir), 'utf8'),
+      readFile(new URL('./tsconfig.json', packageDir), 'utf8'),
+      readFile(new URL('../../tsconfig.json', packageDir), 'utf8'),
+    ])
+
+    const packageJson = JSON.parse(packageJsonRaw) as {
+      scripts?: Record<string, string>
+    }
+    const tsconfig = JSON.parse(tsconfigRaw) as {
+      exclude?: string[]
+      include?: string[]
+    }
+    const rootTsconfig = JSON.parse(rootTsconfigRaw) as {
+      exclude?: string[]
+    }
+
+    expect(packageJson.scripts?.typecheck).toBe('bun x tsc -p ./tsconfig.json --noEmit')
+    expect(tsconfig.exclude).toContain('./template/**')
+    expect(tsconfig.include).toEqual(
+      expect.arrayContaining(['./mod.ts', './vite.config.ts', './*.test.ts']),
+    )
+    expect(rootTsconfig.exclude).toContain('packages/create-eclipsa/template/**')
+  })
+})
diff --git a/packages/eclipsa/AGENTS.md b/packages/eclipsa/AGENTS.md
index 31ea8e2..8ed4d8d 100644
--- a/packages/eclipsa/AGENTS.md
+++ b/packages/eclipsa/AGENTS.md
@@ -12,7 +12,7 @@ This file applies to `packages/eclipsa/` unless overridden.
 
 ## Important Invariants
 
-- `component$`, `$`, `useSignal`, `For`, `resumeContainer`, and `renderSSR` are the core public surface.
+- `$`, `useSignal`, `For`, `resumeContainer`, and `renderSSR` are the core public surface.
 - Client transforms and symbol transforms must stay consistent with runtime expectations.
 - Avoid falling back to full route hydration when making runtime changes.
 
diff --git a/packages/eclipsa/atom/atom.test.ts b/packages/eclipsa/atom/atom.test.ts
new file mode 100644
index 0000000..5fc8dc9
--- /dev/null
+++ b/packages/eclipsa/atom/atom.test.ts
@@ -0,0 +1,190 @@
+import { describe, expect, it } from 'vitest'
+import { jsxDEV } from '../jsx/jsx-dev-runtime.ts'
+import { __eclipsaComponent } from '../core/internal.ts'
+import { renderClientInsertable, withRuntimeContainer } from '../core/runtime.ts'
+import { renderSSRStream } from '../core/ssr.ts'
+import { atom, useAtom } from './mod.ts'
+class FakeNode {}
+class FakeText extends FakeNode {
+  constructor(data) {
+    super()
+    this.data = data
+  }
+}
+class FakeComment extends FakeNode {
+  constructor(data) {
+    super()
+    this.data = data
+  }
+}
+class FakeElement extends FakeNode {
+  constructor(tagName) {
+    super()
+    this.tagName = tagName
+  }
+  attributes = /* @__PURE__ */ new Map()
+  childNodes = []
+  appendChild(node) {
+    this.childNodes.push(node)
+    return node
+  }
+  setAttribute(name, value) {
+    this.attributes.set(name, value)
+  }
+}
+class FakeDocument {
+  createComment(data) {
+    return new FakeComment(data)
+  }
+  createElement(tagName) {
+    return new FakeElement(tagName)
+  }
+  createTextNode(data) {
+    return new FakeText(data)
+  }
+}
+const createContainer = () => ({
+  actionStates: /* @__PURE__ */ new Map(),
+  actions: /* @__PURE__ */ new Map(),
+  asyncSignalSnapshotCache: /* @__PURE__ */ new Map(),
+  asyncSignalStates: /* @__PURE__ */ new Map(),
+  atoms: /* @__PURE__ */ new WeakMap(),
+  components: /* @__PURE__ */ new Map(),
+  dirty: /* @__PURE__ */ new Set(),
+  doc: new FakeDocument(),
+  id: 'rt-atom-test',
+  imports: /* @__PURE__ */ new Map(),
+  loaderStates: /* @__PURE__ */ new Map(),
+  loaders: /* @__PURE__ */ new Map(),
+  nextAtomId: 0,
+  nextComponentId: 0,
+  nextElementId: 0,
+  nextScopeId: 0,
+  nextSignalId: 0,
+  pendingSuspensePromises: /* @__PURE__ */ new Set(),
+  rootChildCursor: 0,
+  rootElement: void 0,
+  router: null,
+  scopes: /* @__PURE__ */ new Map(),
+  signals: /* @__PURE__ */ new Map(),
+  symbols: /* @__PURE__ */ new Map(),
+  visibilityCheckQueued: false,
+  visibilityListenersCleanup: null,
+  visibles: /* @__PURE__ */ new Map(),
+  watches: /* @__PURE__ */ new Map(),
+})
+const withFakeNodeGlobal = (fn) => {
+  const OriginalNode = globalThis.Node
+  globalThis.Node = FakeNode
+  try {
+    const result = fn()
+    if (result instanceof Promise) {
+      return result.finally(() => {
+        globalThis.Node = OriginalNode
+      })
+    }
+    globalThis.Node = OriginalNode
+    return result
+  } catch (error) {
+    globalThis.Node = OriginalNode
+    throw error
+  }
+}
+describe('atom', () => {
+  it('shares atom state across components in the same container', () => {
+    withFakeNodeGlobal(() => {
+      const countAtom = atom(0)
+      let first
+      let second
+      const First = __eclipsaComponent(
+        () => {
+          first = useAtom(countAtom)
+          return 'first'
+        },
+        'component-atom-first',
+        () => [],
+      )
+      const Second = __eclipsaComponent(
+        () => {
+          second = useAtom(countAtom)
+          return 'second'
+        },
+        'component-atom-second',
+        () => [],
+      )
+      const container = createContainer()
+      withRuntimeContainer(container, () => {
+        renderClientInsertable(jsxDEV(First, {}, null, false, {}), container)
+        renderClientInsertable(jsxDEV(Second, {}, null, false, {}), container)
+      })
+      first.value = 1
+      expect(second.value).toBe(1)
+      expect(container.components.get('c0')?.signalIds).toEqual(['a0'])
+      expect(container.components.get('c1')?.signalIds).toEqual(['a0'])
+    })
+  })
+  it('isolates atom state between runtime containers', () => {
+    withFakeNodeGlobal(() => {
+      const countAtom = atom(0)
+      let first
+      let second
+      const First = __eclipsaComponent(
+        () => {
+          first = useAtom(countAtom)
+          return 'first'
+        },
+        'component-atom-first-isolated',
+        () => [],
+      )
+      const Second = __eclipsaComponent(
+        () => {
+          second = useAtom(countAtom)
+          return 'second'
+        },
+        'component-atom-second-isolated',
+        () => [],
+      )
+      const firstContainer = createContainer()
+      const secondContainer = createContainer()
+      withRuntimeContainer(firstContainer, () => {
+        renderClientInsertable(jsxDEV(First, {}, null, false, {}), firstContainer)
+      })
+      withRuntimeContainer(secondContainer, () => {
+        renderClientInsertable(jsxDEV(Second, {}, null, false, {}), secondContainer)
+      })
+      first.value = 1
+      expect(second.value).toBe(0)
+      expect(firstContainer.components.get('c0')?.signalIds).toEqual(['a0'])
+      expect(secondContainer.components.get('c0')?.signalIds).toEqual(['a0'])
+    })
+  })
+  it('throws when useAtom is called outside a component render', () => {
+    expect(() => useAtom(atom(0))).toThrowError(
+      'useAtom() can only be used while rendering a component.',
+    )
+  })
+  it('includes atom-backed signals in streaming SSR resume payloads', async () => {
+    const countAtom = atom(0)
+    const App = __eclipsaComponent(
+      () => {
+        const count = useAtom(countAtom)
+        return jsxDEV(
+          'div',
+          {
+            children: count.value,
+          },
+          null,
+          false,
+          {},
+        )
+      },
+      'component-atom-stream',
+      () => [],
+    )
+    const { payload } = await renderSSRStream(() => jsxDEV(App, {}, null, false, {}))
+    expect(payload.signals).toEqual({ a0: 0 })
+    expect(
+      Object.values(payload.components).some((component) => component.signalIds.includes('a0')),
+    ).toBe(true)
+  })
+})
diff --git a/packages/eclipsa/atom/atom.ts b/packages/eclipsa/atom/atom.ts
new file mode 100644
index 0000000..c3f57a2
--- /dev/null
+++ b/packages/eclipsa/atom/atom.ts
@@ -0,0 +1,36 @@
+import type { Signal } from '../core/signal.ts'
+import { useRuntimeAtom } from '../core/runtime.ts'
+
+const ATOM_META_KEY = Symbol.for('eclipsa.atom-meta')
+
+interface AtomMeta<T> {
+  initialValue: T
+}
+
+export interface Atom<T> {
+  readonly [ATOM_META_KEY]?: AtomMeta<T>
+}
+
+const getAtomMeta = <T>(value: Atom<T>): AtomMeta<T> | null =>
+  ((value as Record<PropertyKey, unknown>)[ATOM_META_KEY] as AtomMeta<T> | undefined) ?? null
+
+export const atom = <T>(initialValue: T): Atom<T> => {
+  const state = {} as Atom<T>
+  Object.defineProperty(state, ATOM_META_KEY, {
+    configurable: true,
+    enumerable: false,
+    value: {
+      initialValue,
+    } satisfies AtomMeta<T>,
+    writable: false,
+  })
+  return state
+}
+
+export const useAtom = <T>(state: Atom<T>): Signal<T> => {
+  const meta = getAtomMeta(state)
+  if (!meta) {
+    throw new TypeError('useAtom() expects an atom created by atom().')
+  }
+  return useRuntimeAtom(state as object, meta.initialValue)
+}
diff --git a/packages/eclipsa/atom/mod.ts b/packages/eclipsa/atom/mod.ts
new file mode 100644
index 0000000..f4b323a
--- /dev/null
+++ b/packages/eclipsa/atom/mod.ts
@@ -0,0 +1,2 @@
+export { atom, useAtom, type Atom } from './atom.ts'
+export type { Signal } from '../core/signal.ts'
diff --git a/packages/eclipsa/compiler/analyze/README.md b/packages/eclipsa/compiler/analyze/README.md
index dc57be3..3a4d6373 100644
--- a/packages/eclipsa/compiler/analyze/README.md
+++ b/packages/eclipsa/compiler/analyze/README.md
@@ -2,11 +2,15 @@
 
 The analyze stage extracts resumable symbols and rewrites modules for the rest of the compiler pipeline.
 
+Plain event handlers are supported when they are either inline functions, component-local function
+declarations, or component-local `const` function values. Other event handler expressions fail at
+compile time so resumability stays explicit.
+
 ```tsx
 // +page.tsx
-export default component$(() => {
+export default () => {
   const count = useSignal(0)
-  return <button onClick$={(evt) => count.value++}>Count: {count.value}</button>
+  return <button onClick={(evt) => count.value++}>Count: {count.value}</button>
 })
 ```
 
@@ -21,10 +25,10 @@ export default () => {
       return count
     },
   }
-  return <button onClick$={eurlFn('+page_default_onClick$.js', vars)}>Count: {count.value}</button>
+  return <button onClick={eurlFn('+page_default_onClick.js', vars)}>Count: {count.value}</button>
 }
 
-// +page_default_onClick$.js
+// +page_default_onClick.js
 export default (vars) => (evt) => vars.count.value++
 export const parentEurl = 'page_default.tsx'
 export const depEurls = []
diff --git a/packages/eclipsa/compiler/analyze/mod.test.ts b/packages/eclipsa/compiler/analyze/mod.test.ts
index 1751ffe..59b9fc7 100644
--- a/packages/eclipsa/compiler/analyze/mod.test.ts
+++ b/packages/eclipsa/compiler/analyze/mod.test.ts
@@ -33,11 +33,12 @@ describe('analyzeModule()', () => {
       }
 
       const snapshotPath = path.join(analyzeDir, 'snapshots', `${entry.name}.snap`)
-      await expect(`${sections.join('\n\n')}\n`).toMatchFileSnapshot(snapshotPath)
+      const snapshot = await fs.readFile(snapshotPath, 'utf8')
+      expect(`${sections.join('\n\n')}\n`).toBe(snapshot)
     }
-  })
+  }, 15_000)
 
-  it('rejects useSignal() outside component$()', async () => {
+  it('rejects useSignal() outside a component', async () => {
     await expect(
       analyzeModule(`
         import { useSignal } from "eclipsa";
@@ -45,20 +46,115 @@ describe('analyzeModule()', () => {
         export default count;
       `),
     ).rejects.toThrowError(
-      'useSignal() can only be used while rendering a component$ and must be called at the top level of the component$ body (not inside nested functions).',
+      'useSignal() can only be used while rendering a component and must be called at the top level of the component body (not inside nested functions).',
+    )
+  })
+
+  it('accepts useAtom() from the atom subpath inside a component', async () => {
+    const analyzed = await analyzeModule(`
+      import { atom, useAtom } from "eclipsa/atom";
+
+      const countAtom = atom(0);
+
+      export default () => {
+        const count = useAtom(countAtom);
+        return <button>{count.value}</button>;
+      };
+    `)
+
+    expect(analyzed?.code).toContain('__eclipsaComponent')
+  })
+
+  it('rejects useAtom() outside a component', async () => {
+    await expect(
+      analyzeModule(`
+        import { atom, useAtom } from "eclipsa/atom";
+        const countAtom = atom(0);
+        const count = useAtom(countAtom);
+        export default count;
+      `),
+    ).rejects.toThrowError(
+      'useAtom() can only be used while rendering a component and must be called at the top level of the component body (not inside nested functions).',
+    )
+  })
+
+  it('accepts useSignal() inside a top-level custom hook', async () => {
+    const analyzed = await analyzeModule(`
+      import { useSignal } from "eclipsa";
+
+      const useCounter = () => {
+        const count = useSignal(0);
+        return count;
+      };
+
+      export default () => {
+        const count = useCounter();
+        return <button>{count.value}</button>;
+      };
+    `)
+
+    expect(analyzed?.code).toContain('__eclipsaComponent')
+    expect(analyzed?.code).toContain('const useCounter = () => {')
+  })
+
+  it('rejects early-return components', async () => {
+    await expect(
+      analyzeModule(`
+        import { useSignal } from "eclipsa";
+
+        export const Counter = () => {
+          const count = useSignal(0);
+          if (count.value > 0) {
+            return <button>positive</button>;
+          }
+          return <button>zero</button>;
+        };
+      `),
+    ).rejects.toThrowError(
+      'must use a single final return statement. Early returns are not supported.',
     )
   })
 
+  it('marks compiled components as optimized roots', async () => {
+    const analyzed = await analyzeModule(`
+      export default () => <button>ready</button>;
+    `)
+
+    expect(analyzed.code).toContain('undefined, { optimizedRoot: true }')
+  })
+
+  it('marks compiled components as optimized roots without breaking trailing commas', async () => {
+    const analyzed = await analyzeModule(`
+      import { __eclipsaComponent } from "eclipsa/internal";
+
+      export const Probe = __eclipsaComponent(
+        () => <button>ready</button>,
+        "@@probe",
+        () => [],
+      );
+    `)
+
+    expect(analyzed.code).toContain('()=>[], undefined, { optimizedRoot: true }')
+    expect(analyzed.code).not.toContain('() => [],\n, { optimizedRoot: true }')
+  })
+
+  it('appends optimized root options after projection slot metadata', async () => {
+    const analyzed = await analyzeModule(`
+      export const Probe = (props) => <div>{props.children}</div>;
+    `)
+
+    expect(analyzed.code).toContain('{ children: 1 }, { optimizedRoot: true }')
+  })
+
   it('annotates direct projection slot props on component metadata', async () => {
     const analyzed = await analyzeModule(`
-      import { component$ } from "eclipsa";
-      export const Probe = component$((props) => (
+      export const Probe = (props) => (
         <section>
           <div>{props.aa}</div>
           <div>{props.children}</div>
           <span>{props.aa}</span>
         </section>
-      ));
+      );
     `)
 
     expect(analyzed?.code).toContain('__eclipsaComponent')
@@ -69,11 +165,10 @@ describe('analyzeModule()', () => {
   it('rejects non-direct uses of projection slot props', async () => {
     await expect(
       analyzeModule(`
-        import { component$ } from "eclipsa";
-        export default component$((props) => {
+        export default (props) => {
           const forwarded = props.children;
           return <div>{props.children}</div>;
-        });
+        };
       `),
     ).rejects.toThrowError(
       'Projection slot prop "children" must be rendered directly as {props.children} inside JSX.',
@@ -82,25 +177,24 @@ describe('analyzeModule()', () => {
 
   it('does not mark intrinsic attribute props as projection slots', async () => {
     const analyzed = await analyzeModule(`
-      import { component$ } from "eclipsa";
-      export const Logo = component$((props) => (
+      export const Logo = (props) => (
         <svg class={props.class}>
           <path />
         </svg>
-      ));
+      );
     `)
 
     expect(analyzed?.code).toContain('__eclipsaComponent')
     expect(analyzed?.code).not.toContain('{ class: 1 }')
   })
 
-  it('supports aliased eclipsa imports on the Rust analyze path', async () => {
+  it('auto-detects PascalCase component declarations on the Rust analyze path', async () => {
     const analyzed = await analyzeModule(`
-      import { component$ as view$, onVisible as visible } from "eclipsa";
-      export const Header = view$(() => {
+      import { onVisible as visible } from "eclipsa";
+      export const Header = () => {
         visible(() => console.log("ready"));
         return <h1>ready</h1>;
-      });
+      };
     `)
 
     expect(analyzed.code).toContain('__eclipsaComponent')
@@ -108,15 +202,89 @@ describe('analyzeModule()', () => {
     expect([...analyzed.hmrManifest.components.keys()]).toContain('component:Header')
   })
 
+  it('does not capture type-only component signature references', async () => {
+    const analyzed = await analyzeModule(`
+      type Props = {
+        href: string;
+      };
+
+      export const Link = (_props: Props) => <a href="/ready">ready</a>;
+    `)
+
+    expect(analyzed?.code).toContain('__eclipsaComponent')
+    expect(analyzed?.code).toContain('()=>[]')
+    expect(analyzed?.code).not.toContain('()=>[Props]')
+  })
+
+  it('analyzes the built-in Link component without capturing top-level helpers', async () => {
+    const analyzeDir = path.dirname(fileURLToPath(import.meta.url))
+    const routerPath = path.resolve(analyzeDir, '../../core/router.tsx')
+    const tsx = await fs.readFile(routerPath, 'utf8')
+
+    const analyzed = await analyzeModule(tsx)
+
+    expect(analyzed?.code).toContain('__eclipsaComponent')
+    expect(analyzed?.code).not.toContain('()=>[LinkProps]')
+    expect([...(analyzed?.hmrManifest.components.keys() ?? [])]).toContain('component:Link')
+  })
+
+  it('preserves async generator actions as resumable action symbols', async () => {
+    const analyzed = await analyzeModule(`
+      import { action } from "eclipsa";
+
+      export const useCounterStream = action(async function* () {
+        yield 0;
+        yield 1;
+      });
+    `)
+
+    expect(analyzed?.code).toContain('__eclipsaAction')
+    const actionSymbols = [...(analyzed?.symbols.values() ?? [])].filter(
+      (symbol) => symbol.kind === 'action',
+    )
+    expect(actionSymbols).toHaveLength(1)
+    expect(actionSymbols[0]?.code).toContain('async function*')
+  })
+
+  it('inlines same-file top-level component helpers into resumable symbols', async () => {
+    const analyzed = await analyzeModule(`
+      const title = "ready";
+      const Item = () => <span>{title}</span>;
+
+      export default () => <Item />;
+    `)
+
+    const component = [...analyzed.symbols.values()].find(
+      (symbol) => symbol.kind === 'component' && symbol.code.includes('return <Item />;'),
+    )
+
+    expect(component?.code).toContain('export default (__scope) => {')
+    expect(component?.code).toContain(
+      'const Item = __eclipsaComponent(() => <span>{__scope[0]}</span>',
+    )
+    expect(component?.code).toContain('return <Item />;')
+  })
+
+  it('analyzes the docs slug layout when it references a same-file helper component', async () => {
+    const analyzeDir = path.dirname(fileURLToPath(import.meta.url))
+    const layoutPath = path.resolve(analyzeDir, '../../../../docs/app/docs/[...slug]/+layout.tsx')
+    const tsx = await fs.readFile(layoutPath, 'utf8')
+
+    const analyzed = await analyzeModule(tsx, layoutPath)
+
+    expect(analyzed?.code).toContain('__eclipsaComponent')
+    expect([...(analyzed?.hmrManifest.components.keys() ?? [])]).toContain('component:default')
+  })
+
   it('emits symbol modules that accept __scope as the first runtime argument', async () => {
     const analyzed = await analyzeModule(`
-      import { $, component$, onVisible, useWatch } from "eclipsa";
+      import { onVisible, useWatch } from "eclipsa";
 
-      export default component$((props) => {
+      export default (props) => {
         const count = props.count;
-        const handler = $((event) => {
+        const handler = async (event) => {
           console.log(count, event.type);
-        });
+        };
 
         onVisible(() => {
           console.log(count);
@@ -126,8 +294,8 @@ describe('analyzeModule()', () => {
           console.log(count);
         });
 
-        return <button onClick$={(event) => handler(event)}>{count}</button>;
-      });
+        return <button onClick={(event) => handler(event)}>{count}</button>;
+      };
     `)
 
     const symbols = [...analyzed.symbols.values()]
@@ -138,34 +306,316 @@ describe('analyzeModule()', () => {
 
     expect(component?.code).toMatch(/export default \(__scope, props\) =>/)
     expect(event?.code).toMatch(/export default \(__scope, event\) =>/)
-    expect(lazySymbols.some((symbol) => /export default \(__scope, event\) =>/.test(symbol.code))).toBe(
-      true,
-    )
+    expect(
+      lazySymbols.some((symbol) =>
+        /export default(?: async)? \(__scope, event\) =>/.test(symbol.code),
+      ),
+    ).toBe(true)
     expect(lazySymbols.some((symbol) => /export default \(__scope\) =>/.test(symbol.code))).toBe(
       true,
     )
     expect(watch?.code).toMatch(/export default \(__scope\) =>/)
   })
 
+  it('auto-wraps local async handlers so plain event props can reference them directly', async () => {
+    const analyzed = await analyzeModule(`
+      export default () => {
+        const ready = "ready";
+        const handler = async () => {
+          console.log(ready);
+        };
+
+        return <button onClick={handler}>{ready}</button>;
+      };
+    `)
+
+    expect(analyzed.code).toContain('__eclipsaLazy')
+    expect(analyzed.code).toContain('const handler = __eclipsaLazy(')
+    expect(analyzed.code).toContain('return <button onClick={handler}>{ready}</button>;')
+    expect([...analyzed.symbols.values()].filter((symbol) => symbol.kind === 'lazy')).toHaveLength(
+      1,
+    )
+    expect([...analyzed.symbols.values()].filter((symbol) => symbol.kind === 'event')).toHaveLength(
+      0,
+    )
+  })
+
+  it('auto-wraps local sync handlers so plain event props can reference them directly', async () => {
+    const analyzed = await analyzeModule(`
+      export default () => {
+        const ready = "ready";
+        const handler = () => {
+          console.log(ready);
+        };
+
+        return <button onClick={handler}>{ready}</button>;
+      };
+    `)
+
+    expect(analyzed.code).toContain('__eclipsaLazy')
+    expect(analyzed.code).toContain('const handler = __eclipsaLazy(')
+    expect(analyzed.code).toContain('return <button onClick={handler}>{ready}</button>;')
+    expect([...analyzed.symbols.values()].filter((symbol) => symbol.kind === 'lazy')).toHaveLength(
+      1,
+    )
+    expect([...analyzed.symbols.values()].filter((symbol) => symbol.kind === 'event')).toHaveLength(
+      0,
+    )
+  })
+
+  it('auto-wraps local function declarations when plain event props reference them directly', async () => {
+    const analyzed = await analyzeModule(`
+      export default () => {
+        const ready = "ready";
+
+        function handler() {
+          console.log(ready);
+        }
+
+        return <button onClick={handler}>{ready}</button>;
+      };
+    `)
+
+    expect(analyzed.code).toContain('__eclipsaLazy')
+    expect(analyzed.code).toContain('return <button onClick={__eclipsaLazy(')
+    expect([...analyzed.symbols.values()].filter((symbol) => symbol.kind === 'lazy')).toHaveLength(
+      1,
+    )
+    expect([...analyzed.symbols.values()].filter((symbol) => symbol.kind === 'event')).toHaveLength(
+      0,
+    )
+  })
+
+  it('auto-wraps returned hook methods so resumable callers can capture the API object', async () => {
+    const analyzed = await analyzeModule(`
+      import { useSignal, useWatch } from "eclipsa";
+
+      const useCounterApi = () => {
+        const count = useSignal(0);
+        const increment = () => {
+          count.value += 1;
+        };
+
+        return {
+          increment,
+        };
+      };
+
+      export default () => {
+        const api = useCounterApi();
+
+        useWatch(() => {
+          api.increment();
+        });
+
+        return <button>{'ready'}</button>;
+      };
+    `)
+
+    expect(analyzed.code).toContain('return {\n          increment: __eclipsaLazy(')
+    expect([...analyzed.symbols.values()].filter((symbol) => symbol.kind === 'lazy')).toHaveLength(
+      1,
+    )
+    expect([...analyzed.symbols.values()].filter((symbol) => symbol.kind === 'watch')).toHaveLength(
+      1,
+    )
+  })
+
+  it('rejects plain event handlers that are not component-local functions', async () => {
+    await expect(
+      analyzeModule(`
+        const handler = () => {
+          console.log("ready");
+        };
+
+        export default () => <button onClick={handler}>ready</button>;
+      `),
+    ).rejects.toThrowError(
+      'Unsupported plain event handler "handler" for "onClick". Use an inline function, a component-local function declaration, or a component-local const function value.',
+    )
+  })
+
+  it('rejects unsupported plain event handler expressions', async () => {
+    await expect(
+      analyzeModule(`
+        export default (props) => <button onClick={props.onClick}>ready</button>;
+      `),
+    ).rejects.toThrowError(
+      'Unsupported plain event handler for "onClick". Use an inline function, a component-local function declaration, or a component-local const function value.',
+    )
+  })
+
+  it('explains how to fix mutable props captures in resumable callbacks', async () => {
+    await expect(
+      analyzeModule(`
+        import { useWatch } from "eclipsa";
+
+        export default (props) => {
+          useWatch(() => {
+            console.log(props.label);
+          });
+
+          return <div>{props.label}</div>;
+        };
+      `),
+    ).rejects.toThrowError(
+      'Unsupported resumable capture "props". Mutable locals are not resumable. Read the needed value into a const before the resumable callback (for example, `const value = props.foo`) or store runtime state in a signal/atom.',
+    )
+  })
+
+  it('rejects useWatch() when the first argument is not a function expression', async () => {
+    await expect(
+      analyzeModule(`
+        import { useWatch } from "eclipsa";
+
+        export default () => {
+          useWatch(1);
+          return <div>ok</div>;
+        };
+      `),
+    ).rejects.toThrowError('useWatch() expects a function expression as the first argument.')
+  })
+
+  it('keeps same-file helper functions that capture top-level constants inside the resumable scope', async () => {
+    const analyzed = await analyzeModule(`
+      import { useWatch } from "eclipsa";
+
+      const threshold = 0.5;
+      const pick = (value) => value > threshold ? 1 : 0;
+
+      export default () => {
+        useWatch(() => {
+          pick(1);
+        });
+
+        return <div>ok</div>;
+      };
+    `)
+
+    const watch = [...analyzed.symbols.values()].find((symbol) => symbol.kind === 'watch')
+    expect(watch?.code).toContain('const pick = (value) => value > __scope[0] ? 1 : 0;')
+    expect(watch?.code).toContain('export default (__scope) => {')
+    expect(watch?.code).toContain('pick(1);')
+  })
+
   it('keeps concrete local symbol ids in emitted component code while preserving HMR metadata', async () => {
     const analyzed = await analyzeModule(`
-      import { component$, onVisible } from "eclipsa";
+      import { onVisible } from "eclipsa";
 
-      export default component$(() => {
+      export default () => {
         onVisible(() => {
           console.log("ready");
         });
 
         return <div>ready</div>;
-      });
+      };
     `)
 
     const component = [...analyzed.symbols.values()].find((symbol) => symbol.kind === 'component')
     const lazy = [...analyzed.symbols.values()].find((symbol) => symbol.kind === 'lazy')
-    const hmrLazy = [...analyzed.hmrManifest.symbols.values()].find((symbol) => symbol.kind === 'lazy')
+    const hmrLazy = [...analyzed.hmrManifest.symbols.values()].find(
+      (symbol) => symbol.kind === 'lazy',
+    )
 
     expect(component?.code).toContain(`__eclipsaLazy("${lazy?.id}"`)
     expect(component?.code).not.toContain(hmrLazy?.hmrKey ?? 'component:default:lazy:slot')
     expect(hmrLazy?.hmrKey).toBe('component:default:lazy:slot')
   })
+
+  it('collects prewrapped component helpers with explicit symbol ids', async () => {
+    const analyzed = await analyzeModule(`
+      import { __eclipsaComponent } from "eclipsa/internal";
+      const theme = "ready";
+
+      export const MotionRenderer = __eclipsaComponent(
+        (props: { label: string }) => <div>{theme}{props.label}</div>,
+        "@pkg:motion",
+        () => [],
+      );
+    `)
+
+    expect(analyzed.symbols.has('@pkg:motion')).toBe(true)
+    expect(analyzed.symbols.get('@pkg:motion')?.kind).toBe('component')
+    expect(analyzed.symbols.get('@pkg:motion')?.captures).toEqual(['theme'])
+    expect(analyzed.code).toContain('()=>[theme]')
+  })
+
+  it('treats top-level eclipsifyReact() bindings as resumable components', async () => {
+    const analyzed = await analyzeModule(`
+      import { eclipsifyReact } from "@eclipsa/react";
+      import { createElement } from "react";
+
+      const ReactView = (props: { title: string; children?: unknown }) =>
+        createElement("section", null, [
+          createElement("h1", { key: "title" }, props.title),
+          props.children,
+        ]);
+
+      export const ReactIsland = eclipsifyReact(ReactView, { slots: ["children"] });
+    `)
+
+    expect(analyzed.code).toContain('__eclipsaComponent(eclipsifyReact(')
+    expect(analyzed.code).toContain('{ external: { kind: "react", slots: ["children"] } }')
+    expect([...analyzed.hmrManifest.components.keys()]).toContain('component:ReactIsland')
+
+    const component = [...analyzed.symbols.values()].find(
+      (symbol) => symbol.kind === 'component' && symbol.code.includes('const __e_component ='),
+    )
+    expect(component?.code).toContain('import { eclipsifyReact } from "@eclipsa/react";')
+    expect(component?.code).toContain('const __e_component = eclipsifyReact(ReactView')
+  })
+
+  it('treats top-level eclipsifyVue() bindings as resumable components', async () => {
+    const analyzed = await analyzeModule(`
+      import { eclipsifyVue } from "@eclipsa/vue";
+      import { defineComponent, h } from "vue";
+
+      const VueView = defineComponent({
+        props: {
+          title: String,
+        },
+        setup(props, { slots }) {
+          return () => h("section", null, [
+            h("h1", null, props.title),
+            slots.default?.(),
+          ]);
+        },
+      });
+
+      export const VueIsland = eclipsifyVue(VueView);
+    `)
+
+    expect(analyzed.code).toContain('__eclipsaComponent(eclipsifyVue(')
+    expect(analyzed.code).toContain('{ external: { kind: "vue", slots: ["children"] } }')
+    expect([...analyzed.hmrManifest.components.keys()]).toContain('component:VueIsland')
+  })
+
+  it('rejects unsupported eclipsify*() placements and dynamic targets', async () => {
+    await expect(
+      analyzeModule(`
+        import { eclipsifyReact } from "@eclipsa/react";
+        import { createElement } from "react";
+
+        export default () => {
+          const View = () => createElement("div", null, "ready");
+          const Island = eclipsifyReact(View);
+          return <Island />;
+        };
+      `),
+    ).rejects.toThrowError('eclipsifyReact() must be assigned to a top-level PascalCase binding.')
+
+    await expect(
+      analyzeModule(`
+        import { eclipsifyVue } from "@eclipsa/vue";
+
+        const registry = {
+          Primary: {},
+        };
+        const key = "Primary";
+        export const VueIsland = eclipsifyVue(registry[key]);
+      `),
+    ).rejects.toThrowError(
+      'eclipsify*() requires a static component reference as the first argument. Dynamic targets are not supported.',
+    )
+  })
 })
diff --git a/packages/eclipsa/compiler/analyze/mod.ts b/packages/eclipsa/compiler/analyze/mod.ts
index 9a70598..6f211c4 100644
--- a/packages/eclipsa/compiler/analyze/mod.ts
+++ b/packages/eclipsa/compiler/analyze/mod.ts
@@ -1,4 +1,5 @@
-import { runRustAnalyzeCompiler } from '../native/mod.ts'
+import ts from 'typescript'
+import { runRustAnalyzeCompiler } from '@eclipsa/optimizer'
 
 type SymbolKind = 'action' | 'component' | 'event' | 'lazy' | 'loader' | 'watch'
 
@@ -40,14 +41,192 @@ export interface AnalyzedModule {
   symbols: Map<string, ResumeSymbol>
 }
 
+const isPascalCase = (name: string) =>
+  name.includes('.') ||
+  (name.length > 0 && (!/[a-z]/.test(name[0]!) || name[0] !== name[0]!.toLowerCase()))
+
+const unwrapExpression = (expression: ts.Expression): ts.Expression => {
+  let current = expression
+  while (ts.isParenthesizedExpression(current) || ts.isAsExpression(current)) {
+    current = current.expression
+  }
+  return current
+}
+
+const getFunctionLikeComponent = (
+  node: ts.Node,
+): ts.ArrowFunction | ts.FunctionExpression | ts.FunctionDeclaration | null => {
+  if (ts.isArrowFunction(node) || ts.isFunctionExpression(node) || ts.isFunctionDeclaration(node)) {
+    return node
+  }
+  if (ts.isParenthesizedExpression(node) || ts.isAsExpression(node)) {
+    return getFunctionLikeComponent(node.expression)
+  }
+  return null
+}
+
+const containsEarlyReturn = (node: ts.Node) => {
+  let found = false
+
+  const visit = (current: ts.Node) => {
+    if (found) {
+      return
+    }
+    if (
+      current !== node &&
+      (ts.isArrowFunction(current) ||
+        ts.isFunctionDeclaration(current) ||
+        ts.isFunctionExpression(current) ||
+        ts.isGetAccessorDeclaration(current) ||
+        ts.isMethodDeclaration(current) ||
+        ts.isSetAccessorDeclaration(current))
+    ) {
+      return
+    }
+    if (ts.isReturnStatement(current)) {
+      found = true
+      return
+    }
+    ts.forEachChild(current, visit)
+  }
+
+  ts.forEachChild(node, visit)
+  return found
+}
+
+const validateSingleReturnComponent = (
+  fn: ts.ArrowFunction | ts.FunctionExpression | ts.FunctionDeclaration,
+  label: string,
+) => {
+  const body = fn.body
+  if (!body || !ts.isBlock(body)) {
+    return
+  }
+
+  const statements = body.statements
+  const lastStatement = statements.at(-1)
+  if (!lastStatement || !ts.isReturnStatement(lastStatement)) {
+    throw new Error(
+      `Component "${label}" must end with a single final return statement. Early returns are not supported.`,
+    )
+  }
+
+  for (const statement of statements.slice(0, -1)) {
+    if (containsEarlyReturn(statement)) {
+      throw new Error(
+        `Component "${label}" must use a single final return statement. Early returns are not supported.`,
+      )
+    }
+  }
+}
+
+const validateSingleReturnComponents = (source: string, id: string) => {
+  const sourceFile = ts.createSourceFile(
+    id,
+    source,
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TSX,
+  )
+
+  const validateComponentNode = (node: ts.Node, label: string) => {
+    const component = getFunctionLikeComponent(node)
+    if (component) {
+      validateSingleReturnComponent(component, label)
+    }
+  }
+
+  const visit = (node: ts.Node) => {
+    if (
+      ts.isVariableDeclaration(node) &&
+      ts.isIdentifier(node.name) &&
+      isPascalCase(node.name.text)
+    ) {
+      if (node.initializer) {
+        validateComponentNode(node.initializer, node.name.text)
+      }
+    }
+
+    if (ts.isFunctionDeclaration(node) && node.name && isPascalCase(node.name.text)) {
+      validateSingleReturnComponent(node, node.name.text)
+    }
+
+    if (ts.isBinaryExpression(node) && node.operatorToken.kind === ts.SyntaxKind.EqualsToken) {
+      const left = unwrapExpression(node.left)
+      if (ts.isIdentifier(left) && isPascalCase(left.text)) {
+        validateComponentNode(node.right, left.text)
+      }
+    }
+
+    if (ts.isExportAssignment(node)) {
+      validateComponentNode(node.expression, 'default')
+    }
+
+    ts.forEachChild(node, visit)
+  }
+
+  visit(sourceFile)
+}
+
+const annotateOptimizedRootComponents = (source: string, id: string) => {
+  const sourceFile = ts.createSourceFile(
+    id,
+    source,
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TSX,
+  )
+  const insertions: Array<{
+    code: string
+    index: number
+  }> = []
+
+  const visit = (node: ts.Node) => {
+    if (
+      ts.isCallExpression(node) &&
+      ts.isIdentifier(node.expression) &&
+      node.expression.text === '__eclipsaComponent'
+    ) {
+      if (node.arguments.length >= 5) {
+        return
+      }
+      const lastArgument = node.arguments.at(-1)
+      insertions.push({
+        code:
+          node.arguments.length >= 4
+            ? ', { optimizedRoot: true }'
+            : ', undefined, { optimizedRoot: true }',
+        index: lastArgument ? lastArgument.end : node.expression.end + 1,
+      })
+    }
+    ts.forEachChild(node, visit)
+  }
+
+  visit(sourceFile)
+
+  if (insertions.length === 0) {
+    return source
+  }
+
+  let nextSource = source
+  for (const insertion of [...insertions].sort((left, right) => right.index - left.index)) {
+    nextSource =
+      nextSource.slice(0, insertion.index) + insertion.code + nextSource.slice(insertion.index)
+  }
+
+  return nextSource
+}
+
 export const analyzeModule = async (
   source: string,
   id = 'analyze-input.tsx',
 ): Promise<AnalyzedModule> => {
+  validateSingleReturnComponents(source, id)
   const analyzed = await runRustAnalyzeCompiler(id, source)
+  const code = annotateOptimizedRootComponents(analyzed.code, id)
   return {
     actions: new Map(analyzed.actions),
-    code: analyzed.code,
+    code,
     hmrManifest: {
       components: new Map(analyzed.hmrManifest.components),
       symbols: new Map(analyzed.hmrManifest.symbols),
diff --git a/packages/eclipsa/compiler/analyze/snapshots/component_eurl.jsx.snap b/packages/eclipsa/compiler/analyze/snapshots/component_eurl.jsx.snap
index 075d9d4..567bdbe 100644
--- a/packages/eclipsa/compiler/analyze/snapshots/component_eurl.jsx.snap
+++ b/packages/eclipsa/compiler/analyze/snapshots/component_eurl.jsx.snap
@@ -1,44 +1,38 @@
 // ================= ENTRY (component_eurl.jsx) ==
-import { component$, useSignal, $ } from 'eclipsa'
-export default component$(() => {
+export default () => {
   const a = 0
-  const add = $(() => {
+  const add = async () => {
     console.log(a)
-  })
+  }
 
-  return <button onClick$={() => add()}>Add</button>
-})
+  return <button onClick={add}>Add</button>
+}
 
 
 // ================= analyzed ==
-import { __eclipsaComponent, __eclipsaEvent, __eclipsaLazy } from "eclipsa/internal";
-import { component$, useSignal, $ } from 'eclipsa'
-export default component$(__eclipsaComponent(() => {
+import { __eclipsaComponent, __eclipsaLazy } from "eclipsa/internal";
+export default __eclipsaComponent(() => {
   const a = 0
-  const add = __eclipsaLazy("1eilolu", () => {
+  const add = __eclipsaLazy("wrvk12", async () => {
     console.log(a)
   }, ()=>[a])
 
-  return <button onClick$={__eclipsaEvent("click", "1r40ykv", ()=>[add])}>Add</button>
-}, "7zrvvx", ()=>[]))
+  return <button onClick={add}>Add</button>
+}, "jqsdkp", ()=>[], undefined, { optimizedRoot: true })
 
 
-// ================= 1eilolu (lazy) ==
-export default (__scope) => {
+// ================= wrvk12 (lazy) ==
+export default async (__scope) => {
     console.log(__scope[0])
   };
 
-// ================= 1r40ykv (event) ==
-export default (__scope) => __scope[0]();
-
-// ================= 7zrvvx (component) ==
-import { component$, useSignal, $ } from 'eclipsa'
-import { __eclipsaEvent, __eclipsaLazy } from "eclipsa/internal";
+// ================= jqsdkp (component) ==
+import { __eclipsaLazy } from "eclipsa/internal";
 export default (__scope) => {
   const a = 0
-  const add = __eclipsaLazy("1eilolu", () => {
+  const add = __eclipsaLazy("wrvk12", async () => {
     console.log(a)
   }, ()=>[a])
 
-  return <button onClick$={__eclipsaEvent("click", "1r40ykv", ()=>[add])}>Add</button>
+  return <button onClick={add}>Add</button>
 };
diff --git a/packages/eclipsa/compiler/analyze/snapshots/on_cleanup_mount.jsx.snap b/packages/eclipsa/compiler/analyze/snapshots/on_cleanup_mount.jsx.snap
index ea19f75..4d69d87 100644
--- a/packages/eclipsa/compiler/analyze/snapshots/on_cleanup_mount.jsx.snap
+++ b/packages/eclipsa/compiler/analyze/snapshots/on_cleanup_mount.jsx.snap
@@ -1,7 +1,7 @@
 // ================= ENTRY (on_cleanup_mount.jsx) ==
-import { component$, onCleanup, onMount } from 'eclipsa'
+import { onCleanup, onMount } from 'eclipsa'
 
-export default component$(() => {
+export default () => {
   const value = 'mounted'
 
   onMount(() => {
@@ -12,14 +12,14 @@ export default component$(() => {
   })
 
   return <button>{value}</button>
-})
+}
 
 
 // ================= analyzed ==
 import { __eclipsaComponent } from "eclipsa/internal";
-import { component$, onCleanup, onMount } from 'eclipsa'
+import { onCleanup, onMount } from 'eclipsa'
 
-export default component$(__eclipsaComponent(() => {
+export default __eclipsaComponent(() => {
   const value = 'mounted'
 
   onMount(() => {
@@ -30,11 +30,11 @@ export default component$(__eclipsaComponent(() => {
   })
 
   return <button>{value}</button>
-}, "1tn7zho", ()=>[]))
+}, "1tn7zho", ()=>[], undefined, { optimizedRoot: true })
 
 
 // ================= 1tn7zho (component) ==
-import { component$, onCleanup, onMount } from 'eclipsa'
+import { onCleanup, onMount } from 'eclipsa'
 export default (__scope) => {
   const value = 'mounted'
 
diff --git a/packages/eclipsa/compiler/analyze/snapshots/on_cleanup_visible.jsx.snap b/packages/eclipsa/compiler/analyze/snapshots/on_cleanup_visible.jsx.snap
index 2ec7595..f56a851 100644
--- a/packages/eclipsa/compiler/analyze/snapshots/on_cleanup_visible.jsx.snap
+++ b/packages/eclipsa/compiler/analyze/snapshots/on_cleanup_visible.jsx.snap
@@ -1,7 +1,7 @@
 // ================= ENTRY (on_cleanup_visible.jsx) ==
-import { component$, onCleanup, onVisible } from 'eclipsa'
+import { onCleanup, onVisible } from 'eclipsa'
 
-export default component$(() => {
+export default () => {
   const value = 'visible'
 
   onVisible(() => {
@@ -12,14 +12,14 @@ export default component$(() => {
   })
 
   return <button>{value}</button>
-})
+}
 
 
 // ================= analyzed ==
 import { __eclipsaComponent, __eclipsaLazy } from "eclipsa/internal";
-import { component$, onCleanup, onVisible } from 'eclipsa'
+import { onCleanup, onVisible } from 'eclipsa'
 
-export default component$(__eclipsaComponent(() => {
+export default __eclipsaComponent(() => {
   const value = 'visible'
 
   onVisible(__eclipsaLazy("5ugvuh", () => {
@@ -30,11 +30,11 @@ export default component$(__eclipsaComponent(() => {
   }, ()=>[value]))
 
   return <button>{value}</button>
-}, "pxa3kp", ()=>[]))
+}, "pxa3kp", ()=>[], undefined, { optimizedRoot: true })
 
 
 // ================= 5ugvuh (lazy) ==
-import { component$, onCleanup, onVisible } from 'eclipsa'
+import { onCleanup, onVisible } from 'eclipsa'
 export default (__scope) => {
     console.log(__scope[0])
     onCleanup(() => {
@@ -43,7 +43,7 @@ export default (__scope) => {
   };
 
 // ================= pxa3kp (component) ==
-import { component$, onCleanup, onVisible } from 'eclipsa'
+import { onCleanup, onVisible } from 'eclipsa'
 import { __eclipsaLazy } from "eclipsa/internal";
 export default (__scope) => {
   const value = 'visible'
diff --git a/packages/eclipsa/compiler/analyze/snapshots/on_cleanup_watch.jsx.snap b/packages/eclipsa/compiler/analyze/snapshots/on_cleanup_watch.jsx.snap
index 71c5036..9b9604b 100644
--- a/packages/eclipsa/compiler/analyze/snapshots/on_cleanup_watch.jsx.snap
+++ b/packages/eclipsa/compiler/analyze/snapshots/on_cleanup_watch.jsx.snap
@@ -1,7 +1,7 @@
 // ================= ENTRY (on_cleanup_watch.jsx) ==
-import { component$, onCleanup, useSignal, useWatch } from 'eclipsa'
+import { onCleanup, useSignal, useWatch } from 'eclipsa'
 
-export default component$(() => {
+export default () => {
   const tracked = useSignal(0)
 
   useWatch(() => {
@@ -12,14 +12,14 @@ export default component$(() => {
   }, [tracked])
 
   return <button>{tracked.value}</button>
-})
+}
 
 
 // ================= analyzed ==
 import { __eclipsaComponent, __eclipsaWatch } from "eclipsa/internal";
-import { component$, onCleanup, useSignal, useWatch } from 'eclipsa'
+import { onCleanup, useSignal, useWatch } from 'eclipsa'
 
-export default component$(__eclipsaComponent(() => {
+export default __eclipsaComponent(() => {
   const tracked = useSignal(0)
 
   useWatch(__eclipsaWatch("n9bfqq", () => {
@@ -30,11 +30,11 @@ export default component$(__eclipsaComponent(() => {
   }, ()=>[tracked]), [tracked])
 
   return <button>{tracked.value}</button>
-}, "124yknm", ()=>[]))
+}, "124yknm", ()=>[], undefined, { optimizedRoot: true })
 
 
 // ================= n9bfqq (watch) ==
-import { component$, onCleanup, useSignal, useWatch } from 'eclipsa'
+import { onCleanup, useSignal, useWatch } from 'eclipsa'
 export default (__scope) => {
     console.log(__scope[0].value)
     onCleanup(() => {
@@ -43,7 +43,7 @@ export default (__scope) => {
   };
 
 // ================= 124yknm (component) ==
-import { component$, onCleanup, useSignal, useWatch } from 'eclipsa'
+import { onCleanup, useSignal, useWatch } from 'eclipsa'
 import { __eclipsaWatch } from "eclipsa/internal";
 export default (__scope) => {
   const tracked = useSignal(0)
diff --git a/packages/eclipsa/compiler/analyze/snapshots/on_mount.jsx.snap b/packages/eclipsa/compiler/analyze/snapshots/on_mount.jsx.snap
index bafa8ac..2a08e8f 100644
--- a/packages/eclipsa/compiler/analyze/snapshots/on_mount.jsx.snap
+++ b/packages/eclipsa/compiler/analyze/snapshots/on_mount.jsx.snap
@@ -1,7 +1,7 @@
 // ================= ENTRY (on_mount.jsx) ==
-import { component$, onMount } from 'eclipsa'
+import { onMount } from 'eclipsa'
 
-export default component$(() => {
+export default () => {
   const value = 'mounted'
 
   onMount(() => {
@@ -9,14 +9,14 @@ export default component$(() => {
   })
 
   return <button>{value}</button>
-})
+}
 
 
 // ================= analyzed ==
 import { __eclipsaComponent } from "eclipsa/internal";
-import { component$, onMount } from 'eclipsa'
+import { onMount } from 'eclipsa'
 
-export default component$(__eclipsaComponent(() => {
+export default __eclipsaComponent(() => {
   const value = 'mounted'
 
   onMount(() => {
@@ -24,11 +24,11 @@ export default component$(__eclipsaComponent(() => {
   })
 
   return <button>{value}</button>
-}, "12cvs17", ()=>[]))
+}, "12cvs17", ()=>[], undefined, { optimizedRoot: true })
 
 
 // ================= 12cvs17 (component) ==
-import { component$, onMount } from 'eclipsa'
+import { onMount } from 'eclipsa'
 export default (__scope) => {
   const value = 'mounted'
 
diff --git a/packages/eclipsa/compiler/analyze/snapshots/on_visible.jsx.snap b/packages/eclipsa/compiler/analyze/snapshots/on_visible.jsx.snap
index af899ff..bb0c66d 100644
--- a/packages/eclipsa/compiler/analyze/snapshots/on_visible.jsx.snap
+++ b/packages/eclipsa/compiler/analyze/snapshots/on_visible.jsx.snap
@@ -1,7 +1,7 @@
 // ================= ENTRY (on_visible.jsx) ==
-import { component$, onVisible } from 'eclipsa'
+import { onVisible } from 'eclipsa'
 
-export default component$(() => {
+export default () => {
   const value = 'visible'
 
   onVisible(() => {
@@ -9,14 +9,14 @@ export default component$(() => {
   })
 
   return <button>{value}</button>
-})
+}
 
 
 // ================= analyzed ==
 import { __eclipsaComponent, __eclipsaLazy } from "eclipsa/internal";
-import { component$, onVisible } from 'eclipsa'
+import { onVisible } from 'eclipsa'
 
-export default component$(__eclipsaComponent(() => {
+export default __eclipsaComponent(() => {
   const value = 'visible'
 
   onVisible(__eclipsaLazy("1s0b9ti", () => {
@@ -24,7 +24,7 @@ export default component$(__eclipsaComponent(() => {
   }, ()=>[value]))
 
   return <button>{value}</button>
-}, "11f179", ()=>[]))
+}, "11f179", ()=>[], undefined, { optimizedRoot: true })
 
 
 // ================= 1s0b9ti (lazy) ==
@@ -33,7 +33,7 @@ export default (__scope) => {
   };
 
 // ================= 11f179 (component) ==
-import { component$, onVisible } from 'eclipsa'
+import { onVisible } from 'eclipsa'
 import { __eclipsaLazy } from "eclipsa/internal";
 export default (__scope) => {
   const value = 'visible'
diff --git a/packages/eclipsa/compiler/analyze/snapshots/watch.jsx.snap b/packages/eclipsa/compiler/analyze/snapshots/watch.jsx.snap
index 5fba974..423ac47 100644
--- a/packages/eclipsa/compiler/analyze/snapshots/watch.jsx.snap
+++ b/packages/eclipsa/compiler/analyze/snapshots/watch.jsx.snap
@@ -1,7 +1,7 @@
 // ================= ENTRY (watch.jsx) ==
-import { component$, useSignal, useWatch } from 'eclipsa'
+import { useSignal, useWatch } from 'eclipsa'
 
-export default component$(() => {
+export default () => {
   const tracked = useSignal(0)
   const dynamic = useSignal('a')
   const explicit = useSignal('b')
@@ -15,14 +15,14 @@ export default component$(() => {
   }, [tracked, () => explicit.value])
 
   return <button>{tracked.value}</button>
-})
+}
 
 
 // ================= analyzed ==
 import { __eclipsaComponent, __eclipsaWatch } from "eclipsa/internal";
-import { component$, useSignal, useWatch } from 'eclipsa'
+import { useSignal, useWatch } from 'eclipsa'
 
-export default component$(__eclipsaComponent(() => {
+export default __eclipsaComponent(() => {
   const tracked = useSignal(0)
   const dynamic = useSignal('a')
   const explicit = useSignal('b')
@@ -36,7 +36,7 @@ export default component$(__eclipsaComponent(() => {
   }, ()=>[explicit]), [tracked, () => explicit.value])
 
   return <button>{tracked.value}</button>
-}, "pe0h1p", ()=>[]))
+}, "pe0h1p", ()=>[], undefined, { optimizedRoot: true })
 
 
 // ================= 159qphd (watch) ==
@@ -50,7 +50,7 @@ export default (__scope) => {
   };
 
 // ================= pe0h1p (component) ==
-import { component$, useSignal, useWatch } from 'eclipsa'
+import { useSignal, useWatch } from 'eclipsa'
 import { __eclipsaWatch } from "eclipsa/internal";
 export default (__scope) => {
   const tracked = useSignal(0)
diff --git a/packages/eclipsa/compiler/analyze/tests/component_eurl.jsx b/packages/eclipsa/compiler/analyze/tests/component_eurl.jsx
index 596baeb..2317a6a 100644
--- a/packages/eclipsa/compiler/analyze/tests/component_eurl.jsx
+++ b/packages/eclipsa/compiler/analyze/tests/component_eurl.jsx
@@ -1,9 +1,8 @@
-import { component$, useSignal, $ } from 'eclipsa'
-export default component$(() => {
+export default () => {
   const a = 0
-  const add = $(() => {
+  const add = async () => {
     console.log(a)
-  })
+  }
 
-  return <button onClick$={() => add()}>Add</button>
-})
+  return <button onClick={add}>Add</button>
+}
diff --git a/packages/eclipsa/compiler/analyze/tests/on_cleanup_mount.jsx b/packages/eclipsa/compiler/analyze/tests/on_cleanup_mount.jsx
index 0fdbb24..02c9405 100644
--- a/packages/eclipsa/compiler/analyze/tests/on_cleanup_mount.jsx
+++ b/packages/eclipsa/compiler/analyze/tests/on_cleanup_mount.jsx
@@ -1,6 +1,6 @@
-import { component$, onCleanup, onMount } from 'eclipsa'
+import { onCleanup, onMount } from 'eclipsa'
 
-export default component$(() => {
+export default () => {
   const value = 'mounted'
 
   onMount(() => {
@@ -11,4 +11,4 @@ export default component$(() => {
   })
 
   return <button>{value}</button>
-})
+}
diff --git a/packages/eclipsa/compiler/analyze/tests/on_cleanup_visible.jsx b/packages/eclipsa/compiler/analyze/tests/on_cleanup_visible.jsx
index 69d3bf5..3adcb44 100644
--- a/packages/eclipsa/compiler/analyze/tests/on_cleanup_visible.jsx
+++ b/packages/eclipsa/compiler/analyze/tests/on_cleanup_visible.jsx
@@ -1,6 +1,6 @@
-import { component$, onCleanup, onVisible } from 'eclipsa'
+import { onCleanup, onVisible } from 'eclipsa'
 
-export default component$(() => {
+export default () => {
   const value = 'visible'
 
   onVisible(() => {
@@ -11,4 +11,4 @@ export default component$(() => {
   })
 
   return <button>{value}</button>
-})
+}
diff --git a/packages/eclipsa/compiler/analyze/tests/on_cleanup_watch.jsx b/packages/eclipsa/compiler/analyze/tests/on_cleanup_watch.jsx
index f55205d..fa3a7b4 100644
--- a/packages/eclipsa/compiler/analyze/tests/on_cleanup_watch.jsx
+++ b/packages/eclipsa/compiler/analyze/tests/on_cleanup_watch.jsx
@@ -1,6 +1,6 @@
-import { component$, onCleanup, useSignal, useWatch } from 'eclipsa'
+import { onCleanup, useSignal, useWatch } from 'eclipsa'
 
-export default component$(() => {
+export default () => {
   const tracked = useSignal(0)
 
   useWatch(() => {
@@ -11,4 +11,4 @@ export default component$(() => {
   }, [tracked])
 
   return <button>{tracked.value}</button>
-})
+}
diff --git a/packages/eclipsa/compiler/analyze/tests/on_mount.jsx b/packages/eclipsa/compiler/analyze/tests/on_mount.jsx
index 7f7803b..5e09480 100644
--- a/packages/eclipsa/compiler/analyze/tests/on_mount.jsx
+++ b/packages/eclipsa/compiler/analyze/tests/on_mount.jsx
@@ -1,6 +1,6 @@
-import { component$, onMount } from 'eclipsa'
+import { onMount } from 'eclipsa'
 
-export default component$(() => {
+export default () => {
   const value = 'mounted'
 
   onMount(() => {
@@ -8,4 +8,4 @@ export default component$(() => {
   })
 
   return <button>{value}</button>
-})
+}
diff --git a/packages/eclipsa/compiler/analyze/tests/on_visible.jsx b/packages/eclipsa/compiler/analyze/tests/on_visible.jsx
index 1a829c9..b0def9e 100644
--- a/packages/eclipsa/compiler/analyze/tests/on_visible.jsx
+++ b/packages/eclipsa/compiler/analyze/tests/on_visible.jsx
@@ -1,6 +1,6 @@
-import { component$, onVisible } from 'eclipsa'
+import { onVisible } from 'eclipsa'
 
-export default component$(() => {
+export default () => {
   const value = 'visible'
 
   onVisible(() => {
@@ -8,4 +8,4 @@ export default component$(() => {
   })
 
   return <button>{value}</button>
-})
+}
diff --git a/packages/eclipsa/compiler/analyze/tests/watch.jsx b/packages/eclipsa/compiler/analyze/tests/watch.jsx
index 1d35471..89c37fd 100644
--- a/packages/eclipsa/compiler/analyze/tests/watch.jsx
+++ b/packages/eclipsa/compiler/analyze/tests/watch.jsx
@@ -1,6 +1,6 @@
-import { component$, useSignal, useWatch } from 'eclipsa'
+import { useSignal, useWatch } from 'eclipsa'
 
-export default component$(() => {
+export default () => {
   const tracked = useSignal(0)
   const dynamic = useSignal('a')
   const explicit = useSignal('b')
@@ -14,4 +14,4 @@ export default component$(() => {
   }, [tracked, () => explicit.value])
 
   return <button>{tracked.value}</button>
-})
+}
diff --git a/packages/eclipsa/compiler/client/mod.test.ts b/packages/eclipsa/compiler/client/mod.test.ts
index 711fe8f..92a727d 100644
--- a/packages/eclipsa/compiler/client/mod.test.ts
+++ b/packages/eclipsa/compiler/client/mod.test.ts
@@ -1,4 +1,8 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import * as fs from 'node:fs/promises'
 import { describe, expect, it } from 'vitest'
+import { analyzeModule } from '../analyze/mod.ts'
 import { compileClientModule } from './mod.ts'
 
 describe('compileClientModule', () => {
@@ -22,8 +26,7 @@ describe('compileClientModule', () => {
   it('injects HMR helpers only when enabled', async () => {
     const resultCode = await compileClientModule(
       `
-        import { component$ } from "eclipsa";
-        export default component$(() => <div />);
+                export default () => <div />;
       `,
       'mod.test.tsx',
       {
@@ -94,6 +97,26 @@ describe('compileClientModule', () => {
     expect(headerInsertIndex).toBeLessThan(childrenInsertIndex)
   })
 
+  it('caches sibling node lookups before earlier inserts can shift child indices', async () => {
+    const resultCode = await compileClientModule(
+      `<div><Header /><p>Shared layout shell updated</p><button>Layout count: {count.value}</button><main>{props.children}</main></div>`,
+      'mod.test.tsx',
+      {
+        hmr: false,
+      },
+    )
+
+    expect(resultCode).toMatch(/var __eclipsaNode\d+ = _cloned\.childNodes\[0\];/)
+    expect(resultCode).toMatch(/var __eclipsaNode\d+ = _cloned\.childNodes\[2\];/)
+    expect(resultCode).toMatch(/var __eclipsaNode\d+ = _cloned\.childNodes\[3\];/)
+    expect(resultCode).not.toContain(
+      '_insert(() => count.value, _cloned.childNodes[2], _cloned.childNodes[2].childNodes[1]);',
+    )
+    expect(resultCode).not.toContain(
+      '_insert(() => props.children, _cloned.childNodes[3], _cloned.childNodes[3].childNodes[0]);',
+    )
+  })
+
   it('normalizes multiline JSX text to match SSR output', async () => {
     const resultCode = await compileClientModule(
       `<label>
@@ -109,6 +132,37 @@ describe('compileClientModule', () => {
     expect(resultCode).toContain('<label>Right<input></input></label>')
   })
 
+  it('embeds static intrinsic attributes into the template html', async () => {
+    const resultCode = await compileClientModule(
+      `<div class="card" data-testid="probe" />`,
+      'mod.test.tsx',
+      {
+        hmr: false,
+      },
+    )
+
+    expect(resultCode).toContain('<div class=\\"card\\" data-testid=\\"probe\\"></div>')
+    expect(resultCode).not.toContain('_attr(_cloned, "class"')
+    expect(resultCode).not.toContain('_attr(_cloned, "data-testid"')
+  })
+
+  it('keeps dynamic and runtime-only attributes on the runtime attr path', async () => {
+    const resultCode = await compileClientModule(
+      `<div class="card" data-id={id} dangerouslySetInnerHTML="<span>raw</span>" />`,
+      'mod.test.tsx',
+      {
+        hmr: false,
+      },
+    )
+
+    expect(resultCode).toContain('<div class=\\"card\\"></div>')
+    expect(resultCode).not.toContain('_attr(_cloned, "class"')
+    expect(resultCode).toContain('_attr(_cloned, "data-id", () => id);')
+    expect(resultCode).toContain(
+      '_attr(_cloned, "dangerouslySetInnerHTML", () => "<span>raw</span>");',
+    )
+  })
+
   it('emits dangerouslySetInnerHTML through runtime attr application', async () => {
     const resultCode = await compileClientModule(
       `<div dangerouslySetInnerHTML="<span>raw</span>" />`,
@@ -132,8 +186,10 @@ describe('compileClientModule', () => {
       },
     )
 
-    expect(resultCode).toContain('<svg><sodipodi:namedview></sodipodi:namedview></svg>')
-    expect(resultCode).toContain('"xml:space"')
+    expect(resultCode).toContain(
+      '<svg><sodipodi:namedview xml:space=\\"preserve\\"></sodipodi:namedview></svg>',
+    )
+    expect(resultCode).not.toContain('_attr(')
   })
 
   it('accepts raw TSX without a JS-side preprocess step', async () => {
@@ -166,4 +222,140 @@ describe('compileClientModule', () => {
     expect(resultCode).toContain('_createComponent(For')
     expect(resultCode).toContain('<li><!-- 0 --></li>')
   })
+
+  it('lowers ternaries with JSX branches to Show components', async () => {
+    const resultCode = await compileClientModule(
+      `<div>{flag ? <span>on</span> : <span>off</span>}</div>`,
+      'mod.test.tsx',
+      {
+        hmr: false,
+      },
+    )
+
+    expect(resultCode).toContain('import { Show as __eclipsaShow } from "eclipsa";')
+    expect(resultCode).toContain('_createComponent(__eclipsaShow')
+    expect(resultCode).toContain('when: flag')
+    expect(resultCode).not.toContain('flag ? <span>')
+  })
+
+  it('lowers && expressions with JSX branches to Show components', async () => {
+    const resultCode = await compileClientModule(
+      `<div>{count && <span>{count}</span>}</div>`,
+      'mod.test.tsx',
+      {
+        hmr: false,
+      },
+    )
+
+    expect(resultCode).toContain('import { Show as __eclipsaShow } from "eclipsa";')
+    expect(resultCode).toContain('_createComponent(__eclipsaShow')
+    expect(resultCode).toContain('fallback: (__e_showValue) => __e_showValue')
+    expect(resultCode).toContain('<span><!-- 0 --></span>')
+  })
+
+  it('lowers || expressions with JSX branches to Show components', async () => {
+    const resultCode = await compileClientModule(
+      `<div>{label || <span>empty</span>}</div>`,
+      'mod.test.tsx',
+      {
+        hmr: false,
+      },
+    )
+
+    expect(resultCode).toContain('import { Show as __eclipsaShow } from "eclipsa";')
+    expect(resultCode).toContain('_createComponent(__eclipsaShow')
+    expect(resultCode).toContain('children: (__e_showValue) => __e_showValue')
+    expect(resultCode).toContain('fallback: (__e_showValue) => (() => {')
+  })
+
+  it('lowers direct JSX map expressions to For components', async () => {
+    const resultCode = await compileClientModule(
+      `<ul>{items.map((item, i) => <li key={i}>{item}</li>)}</ul>`,
+      'mod.test.tsx',
+      {
+        hmr: false,
+      },
+    )
+
+    expect(resultCode).toContain('import { For as __eclipsaFor } from "eclipsa";')
+    expect(resultCode).toContain('_createComponent(__eclipsaFor')
+    expect(resultCode).toContain('arr: items')
+    expect(resultCode).not.toContain('=> <li')
+  })
+
+  it('passes explicit map keys through lowered For components', async () => {
+    const resultCode = await compileClientModule(
+      `<ul>{items.map((item) => <li key={item.id}>{item.name}</li>)}</ul>`,
+      'mod.test.tsx',
+      {
+        hmr: false,
+      },
+    )
+
+    expect(resultCode).toContain('import { For as __eclipsaFor } from "eclipsa";')
+    expect(resultCode).toMatch(/key:\s*\(?item\)?\s*=>\s*item\.id/)
+  })
+
+  it('does not lower non-JSX map expressions to For components', async () => {
+    const resultCode = await compileClientModule(
+      `<div>{items.map((item) => item.toString())}</div>`,
+      'mod.test.tsx',
+      {
+        hmr: false,
+      },
+    )
+
+    expect(resultCode).not.toContain('import { For as __eclipsaFor } from "eclipsa";')
+    expect(resultCode).not.toContain('_createComponent(__eclipsaFor')
+    expect(resultCode).toContain('items.map((item) => item.toString())')
+  })
+
+  it('does not lower map expressions inside component children', async () => {
+    const resultCode = await compileClientModule(
+      `<Layout>{items.map((item, i) => <li key={i}>{item}</li>)}</Layout>`,
+      'mod.test.tsx',
+      {
+        hmr: false,
+      },
+    )
+
+    expect(resultCode).not.toContain('import { For as __eclipsaFor } from "eclipsa";')
+    expect(resultCode).not.toContain('_createComponent(__eclipsaFor')
+    expect(resultCode).toContain('items.map((item, i) => (() => {')
+  })
+
+  it('does not lower logical JSX expressions inside component children', async () => {
+    const resultCode = await compileClientModule(
+      `<Layout>{flag && <span>ready</span>}</Layout>`,
+      'mod.test.tsx',
+      {
+        hmr: false,
+      },
+    )
+
+    expect(resultCode).not.toContain('import { Show as __eclipsaShow } from "eclipsa";')
+    expect(resultCode).not.toContain('_createComponent(__eclipsaShow')
+    expect(resultCode).toContain('flag && (() => {')
+  })
+
+  it('does not emit free __scope references before the docs layout default symbol', async () => {
+    const clientDir = path.dirname(fileURLToPath(import.meta.url))
+    const layoutPath = path.resolve(clientDir, '../../../../docs/app/docs/[...slug]/+layout.tsx')
+    const tsx = await fs.readFile(layoutPath, 'utf8')
+    const analyzed = await analyzeModule(tsx, layoutPath)
+    const component = [...analyzed.symbols.values()].find(
+      (symbol) => symbol.kind === 'component' && symbol.code.includes('export default'),
+    )
+
+    expect(component).toBeDefined()
+
+    const resultCode = await compileClientModule(component!.code, 'docs-layout-symbol.tsx', {
+      hmr: false,
+    })
+    const defaultMatch = resultCode.match(/export default \(__scope(?:, props)?\)/)
+    const defaultIndex = defaultMatch?.index ?? -1
+
+    expect(defaultIndex).toBeGreaterThan(0)
+    expect(resultCode.slice(0, defaultIndex)).not.toContain('__scope')
+  })
 })
diff --git a/packages/eclipsa/compiler/client/mod.ts b/packages/eclipsa/compiler/client/mod.ts
index 572cac8..eee698e 100644
--- a/packages/eclipsa/compiler/client/mod.ts
+++ b/packages/eclipsa/compiler/client/mod.ts
@@ -1,4 +1,4 @@
-import { runRustCompiler } from '../native/mod.ts'
+import { runRustCompiler } from '@eclipsa/optimizer'
 
 export const compileClientModule = async (
   input: string,
diff --git a/packages/eclipsa/compiler/native/mod.test.ts b/packages/eclipsa/compiler/native/mod.test.ts
deleted file mode 100644
index cce2578..0000000
--- a/packages/eclipsa/compiler/native/mod.test.ts
+++ /dev/null
@@ -1,110 +0,0 @@
-import { execFile } from 'node:child_process'
-import { mkdtemp, mkdir, readFile, writeFile } from 'node:fs/promises'
-import os from 'node:os'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-import { promisify } from 'node:util'
-import { describe, expect, it } from 'vitest'
-import { resolveGeneratedArtifactPath } from './mod.ts'
-import {
-  buildPackageManifest,
-  PUBLISH_EXPORTS,
-  PUBLISH_FILES,
-} from '../../scripts/sync-package-manifest.ts'
-
-const execFileAsync = promisify(execFile)
-const packageRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..')
-const packageJsonPath = path.join(packageRoot, 'package.json')
-
-const writePlaceholder = async (root: string, relativePath: string, contents = 'export {}\n') => {
-  const filePath = path.join(root, relativePath)
-  await mkdir(path.dirname(filePath), { recursive: true })
-  await writeFile(filePath, contents)
-}
-
-describe('native compiler packaging', () => {
-  it('resolves the generated napi binding entry without legacy native copy paths', () => {
-    const wasmBindingPath = resolveGeneratedArtifactPath('eclipsa.wasi.cjs')
-
-    expect(wasmBindingPath).toBeTruthy()
-    expect(wasmBindingPath).toContain(
-      `${path.sep}compiler${path.sep}native${path.sep}generated${path.sep}`,
-    )
-    expect(wasmBindingPath).toMatch(/eclipsa\.wasi\.cjs$/)
-    expect(wasmBindingPath).not.toContain(`${path.sep}dist${path.sep}native${path.sep}`)
-  })
-
-  it('produces a publish manifest that points at built dist entries', async () => {
-    const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf8')) as Record<string, unknown>
-    const publishManifest = buildPackageManifest(packageJson, 'publish')
-
-    expect(publishManifest.exports).toEqual(PUBLISH_EXPORTS)
-    expect(publishManifest.files).toEqual(PUBLISH_FILES)
-    expect(publishManifest.main).toBe('./dist/mod.mjs')
-    expect(publishManifest.types).toBe('./dist/mod.d.mts')
-  })
-
-  it('packs only publish artifacts and excludes Rust/dev-only paths', async () => {
-    const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf8')) as Record<string, unknown>
-    const publishManifest = buildPackageManifest(packageJson, 'publish')
-    const tempRoot = await mkdtemp(path.join(os.tmpdir(), 'eclipsa-pack-'))
-
-    await writeFile(path.join(tempRoot, 'package.json'), `${JSON.stringify(publishManifest, null, 2)}\n`)
-
-    const exportEntries = new Set<string>(['./dist/mod.mjs', './dist/mod.d.mts'])
-    for (const target of Object.values(PUBLISH_EXPORTS)) {
-      if (typeof target !== 'object' || target === null) {
-        continue
-      }
-      const entry = target as { import?: string; types?: string }
-      if (entry.import) {
-        exportEntries.add(entry.import)
-      }
-      if (entry.types) {
-        exportEntries.add(entry.types)
-      }
-    }
-
-    for (const relativePath of exportEntries) {
-      await writePlaceholder(tempRoot, relativePath.slice(2))
-    }
-
-    await writePlaceholder(
-      tempRoot,
-      'compiler/native/generated/eclipsa.wasi.cjs',
-      'module.exports = {}\n',
-    )
-    await writePlaceholder(tempRoot, 'compiler/native/generated/browser.js')
-    await writePlaceholder(tempRoot, 'compiler/native/generated/wasi-worker.mjs')
-    await writePlaceholder(tempRoot, 'compiler/native/generated/index.d.ts')
-    await writeFile(
-      path.join(tempRoot, 'compiler/native/generated/eclipsa.linux-x64-gnu.node'),
-      new Uint8Array([0x00]),
-    )
-    await writeFile(
-      path.join(tempRoot, 'compiler/native/generated/eclipsa.wasm32-wasip1-threads.wasm'),
-      new Uint8Array([0x00, 0x61, 0x73, 0x6d]),
-    )
-
-    await writePlaceholder(tempRoot, 'compiler/rust/target/hidden.txt', 'should not pack\n')
-    await writePlaceholder(tempRoot, 'compiler/analyze/mod.test.ts', 'should not pack\n')
-    await mkdir(path.join(tempRoot, 'dist/native/linux-x64'), { recursive: true })
-    await writeFile(
-      path.join(tempRoot, 'dist/native/linux-x64/eclipsa_compiler.node'),
-      new Uint8Array([0x00]),
-    )
-
-    const { stdout } = await execFileAsync('bun', ['pm', 'pack', '--dry-run'], {
-      cwd: tempRoot,
-      encoding: 'utf8',
-    })
-
-    expect(stdout).toContain('compiler/native/generated/browser.js')
-    expect(stdout).toContain('compiler/native/generated/eclipsa.wasi.cjs')
-    expect(stdout).toContain('compiler/native/generated/eclipsa.wasm32-wasip1-threads.wasm')
-    expect(stdout).not.toContain('compiler/native/generated/eclipsa.linux-x64-gnu.node')
-    expect(stdout).not.toContain('compiler/rust/target/hidden.txt')
-    expect(stdout).not.toContain('compiler/analyze/mod.test.ts')
-    expect(stdout).not.toContain('dist/native/linux-x64/eclipsa_compiler.node')
-  })
-})
diff --git a/packages/eclipsa/compiler/rust/src/analyze.rs b/packages/eclipsa/compiler/rust/src/analyze.rs
index 2bdb2b7..fb73979 100644
--- a/packages/eclipsa/compiler/rust/src/analyze.rs
+++ b/packages/eclipsa/compiler/rust/src/analyze.rs
@@ -8,9 +8,11 @@ use oxc_allocator::Allocator;
 use oxc_ast::{
     AstKind,
     ast::{
-        Argument, AssignmentTarget, CallExpression, ExportDefaultDeclarationKind, Expression,
-        ImportDeclarationSpecifier, JSXAttributeName, JSXElementName, JSXExpression, Program,
-        Statement,
+        Argument, ArrayExpressionElement, ArrowFunctionExpression, AssignmentExpression, AssignmentTarget, CallExpression,
+        ExportDefaultDeclaration, ExportDefaultDeclarationKind, Expression, Function,
+        ImportDeclarationSpecifier, JSXAttributeName, JSXElementName, JSXExpression,
+        ObjectProperty, ObjectPropertyKind, Program, PropertyKind, ReturnStatement, Statement,
+        TSType, TSTypeAnnotation, VariableDeclarationKind, VariableDeclarator,
     },
 };
 use oxc_ast_visit::{Visit, walk};
@@ -23,7 +25,7 @@ use crate::{Replacement, apply_replacements, js_string, parse_program, source_ty
 
 const INTERNAL_IMPORT: &str = "eclipsa/internal";
 const EVENT_PROP_REGEX_PREFIX: &str = "on";
-const EVENT_PROP_REGEX_SUFFIX: &str = "$";
+const DEPRECATED_EVENT_PROP_REGEX_SUFFIX: &str = "$";
 
 const HELPER_ACTION: &str = "__eclipsaAction";
 const HELPER_COMPONENT: &str = "__eclipsaComponent";
@@ -131,10 +133,14 @@ pub struct AnalyzeResponse {
 #[derive(Debug)]
 struct ImportBindings {
     action_identifier: Option<String>,
-    component_identifier: Option<String>,
-    lazy_identifier: Option<String>,
+    atom_identifier: Option<String>,
+    deprecated_action_identifier: Option<String>,
+    deprecated_lazy_identifier: Option<String>,
+    deprecated_loader_identifier: Option<String>,
     loader_identifier: Option<String>,
+    react_island_identifier: Option<String>,
     signal_identifier: Option<String>,
+    vue_island_identifier: Option<String>,
     visible_identifier: Option<String>,
     watch_identifier: Option<String>,
 }
@@ -145,6 +151,21 @@ struct ComponentInfo {
     local_symbol_keys: Vec<String>,
 }
 
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+enum ExternalFactoryKind {
+    React,
+    Vue,
+}
+
+impl ExternalFactoryKind {
+    fn as_runtime_kind(self) -> &'static str {
+        match self {
+            ExternalFactoryKind::React => "react",
+            ExternalFactoryKind::Vue => "vue",
+        }
+    }
+}
+
 #[derive(Debug, Clone)]
 struct FunctionContext {
     span_key: SpanKey,
@@ -157,6 +178,19 @@ struct SymbolBuild {
     signature_code: String,
 }
 
+#[derive(Debug, Clone)]
+struct LocalDefinition {
+    kind: Option<VariableDeclarationKind>,
+    span: Span,
+}
+
+#[derive(Debug, Clone)]
+struct CollectedDependencies {
+    captures: Vec<String>,
+    import_spans: Vec<Span>,
+    local_definitions: Vec<LocalDefinition>,
+}
+
 #[derive(Debug, Clone, Copy)]
 enum NodeMarker {
     AssignmentExpression(Option<&'static str>),
@@ -169,6 +203,16 @@ fn source_text(source: &str, span: Span) -> &str {
     &source[span.start as usize..span.end as usize]
 }
 
+fn variable_declaration_kind_source(kind: VariableDeclarationKind) -> &'static str {
+    match kind {
+        VariableDeclarationKind::Var => "var",
+        VariableDeclarationKind::Let => "let",
+        VariableDeclarationKind::Const => "const",
+        VariableDeclarationKind::Using => "using",
+        VariableDeclarationKind::AwaitUsing => "await using",
+    }
+}
+
 fn create_symbol_id(file_path: &str, kind: &SymbolKind, code: &str) -> String {
     let kind_name = match kind {
         SymbolKind::Action => "action",
@@ -220,10 +264,12 @@ fn create_indexed_key(base: &str, count: usize) -> String {
 }
 
 fn to_event_name(prop_name: &str) -> Option<String> {
-    if !prop_name.starts_with(EVENT_PROP_REGEX_PREFIX) || !prop_name.ends_with(EVENT_PROP_REGEX_SUFFIX) {
+    if !prop_name.starts_with(EVENT_PROP_REGEX_PREFIX)
+        || prop_name.ends_with(DEPRECATED_EVENT_PROP_REGEX_SUFFIX)
+    {
         return None;
     }
-    let middle = &prop_name[EVENT_PROP_REGEX_PREFIX.len()..prop_name.len() - EVENT_PROP_REGEX_SUFFIX.len()];
+    let middle = &prop_name[EVENT_PROP_REGEX_PREFIX.len()..];
     let mut chars = middle.chars();
     let first = chars.next()?;
     if !first.is_ascii_uppercase() {
@@ -244,10 +290,14 @@ fn get_jsx_attribute_name(name: &JSXAttributeName<'_>) -> String {
 fn imports_from_eclipsa(program: &Program<'_>) -> ImportBindings {
     let mut bindings = ImportBindings {
         action_identifier: None,
-        component_identifier: None,
-        lazy_identifier: None,
+        atom_identifier: None,
+        deprecated_action_identifier: None,
+        deprecated_lazy_identifier: None,
+        deprecated_loader_identifier: None,
         loader_identifier: None,
+        react_island_identifier: None,
         signal_identifier: None,
+        vue_island_identifier: None,
         visible_identifier: None,
         watch_identifier: None,
     };
@@ -256,9 +306,7 @@ fn imports_from_eclipsa(program: &Program<'_>) -> ImportBindings {
         let oxc_ast::ast::Statement::ImportDeclaration(import_decl) = statement else {
             continue;
         };
-        if import_decl.source.value.as_str() != "eclipsa" {
-            continue;
-        }
+        let source = import_decl.source.value.as_str();
         let Some(specifiers) = &import_decl.specifiers else {
             continue;
         };
@@ -272,14 +320,30 @@ fn imports_from_eclipsa(program: &Program<'_>) -> ImportBindings {
                 oxc_ast::ast::ModuleExportName::StringLiteral(name) => name.value.as_str(),
             };
             let local = specifier.local.name.as_str().to_string();
-            match imported {
-                "action$" => bindings.action_identifier = Some(local),
-                "component$" => bindings.component_identifier = Some(local),
-                "$" => bindings.lazy_identifier = Some(local),
-                "loader$" => bindings.loader_identifier = Some(local),
-                "onVisible" => bindings.visible_identifier = Some(local),
-                "useSignal" => bindings.signal_identifier = Some(local),
-                "useWatch" => bindings.watch_identifier = Some(local),
+            match source {
+                "eclipsa" => match imported {
+                    "action" => bindings.action_identifier = Some(local),
+                    "action$" => bindings.deprecated_action_identifier = Some(local),
+                    "$" => bindings.deprecated_lazy_identifier = Some(local),
+                    "loader" => bindings.loader_identifier = Some(local),
+                    "loader$" => bindings.deprecated_loader_identifier = Some(local),
+                    "onVisible" => bindings.visible_identifier = Some(local),
+                    "useSignal" => bindings.signal_identifier = Some(local),
+                    "useWatch" => bindings.watch_identifier = Some(local),
+                    _ => {}
+                },
+                "eclipsa/atom" => match imported {
+                    "useAtom" => bindings.atom_identifier = Some(local),
+                    _ => {}
+                },
+                "@eclipsa/react" => match imported {
+                    "eclipsifyReact" => bindings.react_island_identifier = Some(local),
+                    _ => {}
+                },
+                "@eclipsa/vue" => match imported {
+                    "eclipsifyVue" => bindings.vue_island_identifier = Some(local),
+                    _ => {}
+                },
                 _ => {}
             }
         }
@@ -308,6 +372,43 @@ fn function_argument_scope(argument: &Argument<'_>) -> Option<ScopeId> {
     }
 }
 
+fn function_expression_span(expression: &Expression<'_>) -> Option<Span> {
+    match expression {
+        Expression::ArrowFunctionExpression(function) => Some(function.span),
+        Expression::FunctionExpression(function) => Some(function.span),
+        Expression::ParenthesizedExpression(expression) => {
+            function_expression_span(&expression.expression)
+        }
+        _ => None,
+    }
+}
+
+fn function_expression_scope(expression: &Expression<'_>) -> Option<ScopeId> {
+    match expression {
+        Expression::ArrowFunctionExpression(function) => Some(function.scope_id()),
+        Expression::FunctionExpression(function) => Some(function.scope_id()),
+        Expression::ParenthesizedExpression(expression) => {
+            function_expression_scope(&expression.expression)
+        }
+        _ => None,
+    }
+}
+
+fn is_component_name(name: &str) -> bool {
+    name.chars().next().is_some_and(|ch| {
+        ch.to_ascii_lowercase() != ch || !ch.is_ascii_alphabetic()
+    }) || name.contains('.')
+}
+
+fn is_hook_name(name: &str) -> bool {
+    let Some(suffix) = name.strip_prefix("use") else {
+        return false;
+    };
+    suffix.chars().next().is_some_and(|ch| {
+        ch.to_ascii_lowercase() != ch || !ch.is_ascii_alphabetic()
+    })
+}
+
 fn render_span_with_replacements(source: &str, span: Span, replacements: &[Replacement]) -> Result<String, String> {
     let mut nested = replacements
         .iter()
@@ -327,7 +428,7 @@ fn render_span_with_replacements(source: &str, span: Span, replacements: &[Repla
     apply_replacements(base, &mut nested)
 }
 
-fn inject_scope_parameter(function_source: &str) -> Result<String, String> {
+fn inject_scope_parameter(function_source: &str, local_prefix: Option<&str>) -> Result<String, String> {
     let allocator = Allocator::default();
     let module = format!("export default {function_source};");
     let program = parse_program(
@@ -343,10 +444,51 @@ fn inject_scope_parameter(function_source: &str) -> Result<String, String> {
         return Err("failed to build symbol module: expected export default statement".to_string());
     };
 
-    let params_span = match &declaration.declaration {
-        ExportDefaultDeclarationKind::ArrowFunctionExpression(function) => function.params.span,
-        ExportDefaultDeclarationKind::FunctionExpression(function) => function.params.span,
-        ExportDefaultDeclarationKind::FunctionDeclaration(function) => function.params.span,
+    let (params_span, body_replacement) = match &declaration.declaration {
+        ExportDefaultDeclarationKind::ArrowFunctionExpression(function) => {
+            let replacement = local_prefix.map(|prefix| {
+                if function.expression {
+                    let body_range = function.body.span.start as usize..function.body.span.end as usize;
+                    Replacement {
+                        start: body_range.start,
+                        end: body_range.end,
+                        code: format!("{{\n{prefix}\nreturn {};\n}}", &module[body_range]),
+                    }
+                } else {
+                    let insertion = if let Some(last_directive) = function.body.directives.last() {
+                        last_directive.span.end as usize
+                    } else {
+                        function.body.span.start as usize + 1
+                    };
+                    Replacement {
+                        start: insertion,
+                        end: insertion,
+                        code: format!("\n{prefix}\n"),
+                    }
+                }
+            });
+            (function.params.span, replacement)
+        }
+        ExportDefaultDeclarationKind::FunctionExpression(function)
+        | ExportDefaultDeclarationKind::FunctionDeclaration(function) => {
+            let body = function
+                .body
+                .as_ref()
+                .ok_or_else(|| "failed to build symbol module: exported symbol must have a body".to_string())?;
+            let replacement = local_prefix.map(|prefix| {
+                let insertion = if let Some(last_directive) = body.directives.last() {
+                    last_directive.span.end as usize
+                } else {
+                    body.span.start as usize + 1
+                };
+                Replacement {
+                    start: insertion,
+                    end: insertion,
+                    code: format!("\n{prefix}\n"),
+                }
+            });
+            (function.params.span, replacement)
+        }
         _ => {
             return Err(
                 "failed to build symbol module: exported symbol must be a function".to_string()
@@ -366,12 +508,16 @@ fn inject_scope_parameter(function_source: &str) -> Result<String, String> {
         format!("(__scope, {params_source})")
     };
 
-    Ok(format!(
-        "{}{}{}",
-        &module[..params_range.start],
-        replacement,
-        &module[params_range.end..]
-    ))
+    let mut replacements = vec![Replacement {
+        start: params_range.start,
+        end: params_range.end,
+        code: replacement,
+    }];
+    if let Some(body_replacement) = body_replacement {
+        replacements.push(body_replacement);
+    }
+
+    apply_replacements(&module, &mut replacements)
 }
 
 fn props_expression_property(expression: &Expression<'_>, props_name: &str) -> Option<String> {
@@ -417,13 +563,26 @@ struct ProjectionSlotCollector {
 }
 
 impl ProjectionSlotCollector {
-    fn collect(argument: &Argument<'_>) -> Result<Option<Vec<(String, usize)>>, String> {
-        let params = match argument {
-            Argument::ArrowFunctionExpression(function) => &function.params.items,
-            Argument::FunctionExpression(function) => &function.params.items,
-            _ => return Ok(None),
+    fn collect_arrow(function: &ArrowFunctionExpression<'_>) -> Result<Option<Vec<(String, usize)>>, String> {
+        let Some(first_param) = function.params.items.first() else {
+            return Ok(None);
+        };
+        let oxc_ast::ast::BindingPatternKind::BindingIdentifier(identifier) = &first_param.pattern.kind else {
+            return Ok(None);
+        };
+
+        let mut collector = Self {
+            direct_counts: HashMap::new(),
+            in_jsx_attribute: 0,
+            props_name: identifier.name.as_str().to_string(),
+            total_counts: HashMap::new(),
         };
-        let Some(first_param) = params.first() else {
+        collector.visit_arrow_function_expression(function);
+        collector.finalize()
+    }
+
+    fn collect_function(function: &Function<'_>) -> Result<Option<Vec<(String, usize)>>, String> {
+        let Some(first_param) = function.params.items.first() else {
             return Ok(None);
         };
         let oxc_ast::ast::BindingPatternKind::BindingIdentifier(identifier) = &first_param.pattern.kind else {
@@ -436,24 +595,27 @@ impl ProjectionSlotCollector {
             props_name: identifier.name.as_str().to_string(),
             total_counts: HashMap::new(),
         };
-        collector.visit_argument(argument);
+        collector.visit_function(function, ScopeFlags::empty());
+        collector.finalize()
+    }
 
-        if collector.direct_counts.is_empty() {
+    fn finalize(self) -> Result<Option<Vec<(String, usize)>>, String> {
+        if self.direct_counts.is_empty() {
             return Ok(None);
         }
 
-        for property in collector.direct_counts.keys() {
-            let direct = collector.direct_counts[property];
-            let total = collector.total_counts.get(property).copied().unwrap_or_default();
+        for property in self.direct_counts.keys() {
+            let direct = self.direct_counts[property];
+            let total = self.total_counts.get(property).copied().unwrap_or_default();
             if total > direct {
                 return Err(format!(
                     "Projection slot prop \"{}\" must be rendered directly as {{{}.{}}} inside JSX.",
-                    property, collector.props_name, property
+                    property, self.props_name, property
                 ));
             }
         }
 
-        let mut entries = collector.direct_counts.into_iter().collect::<Vec<_>>();
+        let mut entries = self.direct_counts.into_iter().collect::<Vec<_>>();
         entries.sort_by(|left, right| left.0.cmp(&right.0));
         Ok(Some(entries))
     }
@@ -487,15 +649,147 @@ impl<'a> Visit<'a> for ProjectionSlotCollector {
     }
 }
 
-fn collect_projection_slots_from_source(argument: &Argument<'_>, _source: &str) -> Result<Option<Vec<(String, usize)>>, String> {
-    ProjectionSlotCollector::collect(argument)
+fn collect_projection_slots_from_expression(expression: &Expression<'_>) -> Result<Option<Vec<(String, usize)>>, String> {
+    match expression {
+        Expression::ArrowFunctionExpression(function) => ProjectionSlotCollector::collect_arrow(function),
+        Expression::FunctionExpression(function) => ProjectionSlotCollector::collect_function(function),
+        Expression::ParenthesizedExpression(expression) => {
+            collect_projection_slots_from_expression(&expression.expression)
+        }
+        _ => Ok(None),
+    }
+}
+
+fn collect_projection_slots_from_export_default(
+    declaration: &ExportDefaultDeclarationKind<'_>,
+) -> Result<Option<Vec<(String, usize)>>, String> {
+    match declaration {
+        ExportDefaultDeclarationKind::ArrowFunctionExpression(function) => {
+            ProjectionSlotCollector::collect_arrow(function)
+        }
+        ExportDefaultDeclarationKind::FunctionExpression(function)
+        | ExportDefaultDeclarationKind::FunctionDeclaration(function) => {
+            ProjectionSlotCollector::collect_function(function)
+        }
+        ExportDefaultDeclarationKind::ParenthesizedExpression(expression) => {
+            collect_projection_slots_from_expression(&expression.expression)
+        }
+        _ => Ok(None),
+    }
+}
+
+fn collect_projection_slots_from_argument(argument: &Argument<'_>) -> Result<Option<Vec<(String, usize)>>, String> {
+    match argument {
+        Argument::ArrowFunctionExpression(function) => ProjectionSlotCollector::collect_arrow(function),
+        Argument::FunctionExpression(function) => ProjectionSlotCollector::collect_function(function),
+        _ => Ok(None),
+    }
+}
+
+fn is_supported_external_component_target_expression(expression: &Expression<'_>) -> bool {
+    match expression {
+        Expression::Identifier(_) | Expression::StaticMemberExpression(_) => true,
+        Expression::ParenthesizedExpression(expression) => {
+            is_supported_external_component_target_expression(&expression.expression)
+        }
+        Expression::TSAsExpression(expression) => {
+            is_supported_external_component_target_expression(&expression.expression)
+        }
+        Expression::TSSatisfiesExpression(expression) => {
+            is_supported_external_component_target_expression(&expression.expression)
+        }
+        Expression::TSNonNullExpression(expression) => {
+            is_supported_external_component_target_expression(&expression.expression)
+        }
+        _ => false,
+    }
+}
+
+fn is_supported_external_component_target(argument: &Argument<'_>) -> bool {
+    match argument {
+        Argument::Identifier(_) | Argument::StaticMemberExpression(_) => true,
+        Argument::ParenthesizedExpression(expression) => {
+            is_supported_external_component_target_expression(&expression.expression)
+        }
+        Argument::TSAsExpression(expression) => {
+            is_supported_external_component_target_expression(&expression.expression)
+        }
+        Argument::TSSatisfiesExpression(expression) => {
+            is_supported_external_component_target_expression(&expression.expression)
+        }
+        Argument::TSNonNullExpression(expression) => {
+            is_supported_external_component_target_expression(&expression.expression)
+        }
+        _ => false,
+    }
+}
+
+fn collect_external_projection_slots(
+    expression: &CallExpression<'_>,
+) -> Result<Vec<(String, usize)>, String> {
+    let Some(options) = expression.arguments.get(1) else {
+        return Ok(vec![("children".to_string(), 1)]);
+    };
+
+    let Argument::ObjectExpression(object) = options else {
+        return Err("eclipsify*() options must be a static object literal when provided.".to_string());
+    };
+
+    for property in &object.properties {
+        let ObjectPropertyKind::ObjectProperty(property) = property else {
+            return Err("eclipsify*() options must not use spreads.".to_string());
+        };
+        if property.kind != PropertyKind::Init || property.computed || property.method {
+            return Err("eclipsify*() options must use plain object properties.".to_string());
+        }
+        let Some(property_name) = property
+            .key
+            .static_name()
+            .map(|name| name.to_string()) else {
+            return Err("eclipsify*() options keys must be static.".to_string());
+        };
+        if property_name != "slots" {
+            return Err(format!("Unsupported eclipsify*() option \"{property_name}\"."));
+        }
+
+        let Expression::ArrayExpression(array) = &property.value else {
+            return Err("eclipsify*() slots must be a static string array.".to_string());
+        };
+
+        let mut entries = Vec::new();
+        for element in &array.elements {
+            match element {
+                ArrayExpressionElement::Elision(_) => {
+                    return Err("eclipsify*() slots arrays cannot be sparse.".to_string());
+                }
+                ArrayExpressionElement::SpreadElement(_) => {
+                    return Err("eclipsify*() slots must be string literals.".to_string());
+                }
+                ArrayExpressionElement::StringLiteral(literal) => {
+                    entries.push((literal.value.as_str().to_string(), 1));
+                }
+                _ => {
+                    return Err("eclipsify*() slots must be string literals.".to_string());
+                }
+            }
+        }
+        if entries.is_empty() {
+            return Ok(vec![]);
+        }
+        return Ok(entries);
+    }
+
+    Ok(vec![("children".to_string(), 1)])
 }
 
 struct CaptureCollector<'a, 's> {
     capture_indices: HashMap<String, usize>,
+    capture_outer_scope_bindings: bool,
     current_scope_stack: Vec<ScopeId>,
+    error: Option<String>,
     function_scope: ScopeId,
     import_spans: HashSet<SpanKey>,
+    local_definitions: HashMap<SpanKey, LocalDefinition>,
     program: &'a Program<'a>,
     semantic: &'s Semantic<'a>,
 }
@@ -507,25 +801,20 @@ impl<'a, 's> CaptureCollector<'a, 's> {
         _source: &'s str,
         root_scope: ScopeId,
         argument: &Argument<'a>,
-    ) -> Result<(Vec<String>, Vec<Span>), String> {
+    ) -> Result<CollectedDependencies, String> {
         let mut collector = Self {
             capture_indices: HashMap::new(),
+            capture_outer_scope_bindings: false,
             current_scope_stack: Vec::new(),
+            error: None,
             function_scope: root_scope,
             import_spans: HashSet::new(),
+            local_definitions: HashMap::new(),
             program,
             semantic,
         };
         collector.visit_argument(argument);
-        let mut captures = collector.capture_indices.into_iter().collect::<Vec<_>>();
-        captures.sort_by_key(|(_, index)| *index);
-        let mut import_spans = collector
-            .import_spans
-            .into_iter()
-            .map(|span| Span::new(span.start, span.end))
-            .collect::<Vec<_>>();
-        import_spans.sort_by_key(|span| span.start);
-        Ok((captures.into_iter().map(|(name, _)| name).collect(), import_spans))
+        collector.finish()
     }
 
     fn collect_jsx_expression(
@@ -534,38 +823,161 @@ impl<'a, 's> CaptureCollector<'a, 's> {
         _source: &'s str,
         root_scope: ScopeId,
         expression: &JSXExpression<'a>,
-    ) -> Result<(Vec<String>, Vec<Span>), String> {
+    ) -> Result<CollectedDependencies, String> {
         let mut collector = Self {
             capture_indices: HashMap::new(),
+            capture_outer_scope_bindings: false,
             current_scope_stack: Vec::new(),
+            error: None,
             function_scope: root_scope,
             import_spans: HashSet::new(),
+            local_definitions: HashMap::new(),
             program,
             semantic,
         };
         collector.visit_jsx_expression(expression);
-        let mut captures = collector.capture_indices.into_iter().collect::<Vec<_>>();
+        collector.finish()
+    }
+
+    fn collect_expression(
+        program: &'a Program<'a>,
+        semantic: &'s Semantic<'a>,
+        root_scope: ScopeId,
+        expression: &Expression<'a>,
+    ) -> Result<CollectedDependencies, String> {
+        let mut collector = Self {
+            capture_indices: HashMap::new(),
+            capture_outer_scope_bindings: false,
+            current_scope_stack: Vec::new(),
+            error: None,
+            function_scope: root_scope,
+            import_spans: HashSet::new(),
+            local_definitions: HashMap::new(),
+            program,
+            semantic,
+        };
+        collector.visit_expression(expression);
+        collector.finish()
+    }
+
+    fn collect_module_call_expression(
+        program: &'a Program<'a>,
+        semantic: &'s Semantic<'a>,
+        expression: &CallExpression<'a>,
+    ) -> Result<CollectedDependencies, String> {
+        let mut collector = Self {
+            capture_indices: HashMap::new(),
+            capture_outer_scope_bindings: true,
+            current_scope_stack: Vec::new(),
+            error: None,
+            function_scope: program.scope_id(),
+            import_spans: HashSet::new(),
+            local_definitions: HashMap::new(),
+            program,
+            semantic,
+        };
+        collector.visit_call_expression(expression);
+        collector.finish()
+    }
+
+    fn collect_arrow(
+        program: &'a Program<'a>,
+        semantic: &'s Semantic<'a>,
+        function: &ArrowFunctionExpression<'a>,
+    ) -> Result<CollectedDependencies, String> {
+        let mut collector = Self {
+            capture_indices: HashMap::new(),
+            capture_outer_scope_bindings: false,
+            current_scope_stack: Vec::new(),
+            error: None,
+            function_scope: function.scope_id(),
+            import_spans: HashSet::new(),
+            local_definitions: HashMap::new(),
+            program,
+            semantic,
+        };
+        collector.visit_arrow_function_expression(function);
+        collector.finish()
+    }
+
+    fn collect_function(
+        program: &'a Program<'a>,
+        semantic: &'s Semantic<'a>,
+        function: &Function<'a>,
+    ) -> Result<CollectedDependencies, String> {
+        let mut collector = Self {
+            capture_indices: HashMap::new(),
+            capture_outer_scope_bindings: false,
+            current_scope_stack: Vec::new(),
+            error: None,
+            function_scope: function.scope_id(),
+            import_spans: HashSet::new(),
+            local_definitions: HashMap::new(),
+            program,
+            semantic,
+        };
+        collector.visit_function(function, ScopeFlags::empty());
+        collector.finish()
+    }
+
+    fn current_scope(&self) -> ScopeId {
+        *self.current_scope_stack.last().unwrap_or(&self.program.scope_id())
+    }
+
+    fn finish(self) -> Result<CollectedDependencies, String> {
+        if let Some(error) = self.error {
+            return Err(error);
+        }
+
+        let mut captures = self.capture_indices.into_iter().collect::<Vec<_>>();
         captures.sort_by_key(|(_, index)| *index);
-        let mut import_spans = collector
+        let mut import_spans = self
             .import_spans
             .into_iter()
             .map(|span| Span::new(span.start, span.end))
             .collect::<Vec<_>>();
         import_spans.sort_by_key(|span| span.start);
-        Ok((captures.into_iter().map(|(name, _)| name).collect(), import_spans))
+        let mut local_definitions = self.local_definitions.into_iter().collect::<Vec<_>>();
+        local_definitions.sort_by_key(|(span, _)| (span.start, span.end));
+
+        Ok(CollectedDependencies {
+            captures: captures.into_iter().map(|(name, _)| name).collect(),
+            import_spans,
+            local_definitions: local_definitions
+                .into_iter()
+                .map(|(_, definition)| definition)
+                .collect(),
+        })
     }
 
-    fn current_scope(&self) -> ScopeId {
-        *self.current_scope_stack.last().unwrap_or(&self.program.scope_id())
+    fn fail(&mut self, message: impl Into<String>) {
+        if self.error.is_none() {
+            self.error = Some(message.into());
+        }
     }
 
     fn is_reachable_from_function_scope(&self, symbol_scope: ScopeId) -> bool {
+        if self.capture_outer_scope_bindings {
+            return false;
+        }
         self.semantic
             .scoping()
             .scope_ancestors(symbol_scope)
             .any(|scope_id| scope_id == self.function_scope)
     }
 
+    fn is_local_to_current_traversal(&self, symbol_scope: ScopeId) -> bool {
+        if symbol_scope == self.program.scope_id() {
+            return false;
+        }
+        self.current_scope_stack.iter().copied().any(|scope| {
+            self.semantic
+                .scoping()
+                .scope_ancestors(symbol_scope)
+                .any(|ancestor| ancestor == scope)
+        })
+    }
+
     fn add_capture(&mut self, name: &str) {
         if self.capture_indices.contains_key(name) {
             return;
@@ -585,6 +997,88 @@ impl<'a, 's> CaptureCollector<'a, 's> {
         }
     }
 
+    fn can_inline_symbol(&self, flags: SymbolFlags, symbol_id: SymbolId) -> bool {
+        if self.semantic.symbol_scope(symbol_id) != self.program.scope_id() {
+            return false;
+        }
+        if flags.is_function() || flags.is_class() {
+            return true;
+        }
+        if !flags.is_variable() || !flags.is_const_variable() {
+            return false;
+        }
+        let declaration = self.semantic.symbol_declaration(symbol_id);
+        let AstKind::VariableDeclarator(variable) = declaration.kind() else {
+            return false;
+        };
+        let Some(init) = &variable.init else {
+            return false;
+        };
+        matches!(
+            init,
+            Expression::ArrowFunctionExpression(_)
+                | Expression::FunctionExpression(_)
+                | Expression::ClassExpression(_)
+        )
+    }
+
+    fn can_inline_outer_scope_symbol(&self, flags: SymbolFlags, symbol_id: SymbolId) -> bool {
+        self.capture_outer_scope_bindings
+            && self.semantic.symbol_scope(symbol_id) == self.program.scope_id()
+            && (flags.is_function()
+                || flags.is_class()
+                || (flags.is_variable() && flags.is_const_variable()))
+    }
+
+    fn add_local_definition_from_symbol(&mut self, symbol_id: SymbolId) {
+        let declaration = self.semantic.symbol_declaration(symbol_id);
+        match declaration.kind() {
+            AstKind::VariableDeclarator(variable) => {
+                let key = SpanKey::from_span(variable.span);
+                if self.local_definitions.contains_key(&key) {
+                    return;
+                }
+                self.local_definitions.insert(
+                    key,
+                    LocalDefinition {
+                        kind: Some(variable.kind),
+                        span: variable.span,
+                    },
+                );
+                walk::walk_variable_declarator(self, variable);
+            }
+            AstKind::Function(function) => {
+                let key = SpanKey::from_span(function.span);
+                if self.local_definitions.contains_key(&key) {
+                    return;
+                }
+                self.local_definitions.insert(
+                    key,
+                    LocalDefinition {
+                        kind: None,
+                        span: function.span,
+                    },
+                );
+                self.visit_function(function, ScopeFlags::empty());
+            }
+            AstKind::Class(class) => {
+                let key = SpanKey::from_span(class.span);
+                if self.local_definitions.contains_key(&key) {
+                    return;
+                }
+                self.local_definitions.insert(
+                    key,
+                    LocalDefinition {
+                        kind: None,
+                        span: class.span,
+                    },
+                );
+                walk::walk_class(self, class);
+            }
+            _ => {}
+        }
+    }
+
     fn validate_capture(&self, name: &str, flags: SymbolFlags, symbol_id: SymbolId) -> Result<(), String> {
         if flags.is_import() {
             return Ok(());
@@ -596,7 +1090,7 @@ impl<'a, 's> CaptureCollector<'a, 's> {
         }
         if flags.is_variable() && !flags.is_const_variable() {
             return Err(format!(
-                "Unsupported resumable capture \"{name}\". Mutable locals are not resumable."
+                "Unsupported resumable capture \"{name}\". Mutable locals are not resumable. Read the needed value into a const before the resumable callback (for example, `const value = props.foo`) or store runtime state in a signal/atom."
             ));
         }
         let declaration = self.semantic.symbol_declaration(symbol_id);
@@ -608,6 +1102,18 @@ impl<'a, 's> CaptureCollector<'a, 's> {
                         | Expression::FunctionExpression(_)
                         | Expression::ClassExpression(_)
                 ) {
+                    let local_function = match init {
+                        Expression::ArrowFunctionExpression(_) => {
+                            self.semantic.symbol_scope(symbol_id) != self.program.scope_id()
+                        }
+                        Expression::FunctionExpression(_) => {
+                            self.semantic.symbol_scope(symbol_id) != self.program.scope_id()
+                        }
+                        _ => false,
+                    };
+                    if local_function {
+                        return Ok(());
+                    }
                     return Err(format!(
                         "Unsupported resumable capture \"{name}\". Functions and classes must not be captured directly."
                     ));
@@ -638,15 +1144,30 @@ impl<'a, 's> Visit<'a> for CaptureCollector<'a, 's> {
             return;
         }
         let symbol_scope = self.semantic.symbol_scope(symbol_id);
-        if self.is_reachable_from_function_scope(symbol_scope) {
+        if self.is_local_to_current_traversal(symbol_scope)
+            || self.is_reachable_from_function_scope(symbol_scope)
+        {
+            return;
+        }
+        if self.can_inline_outer_scope_symbol(flags, symbol_id) {
+            self.add_local_definition_from_symbol(symbol_id);
+            return;
+        }
+        if self.can_inline_symbol(flags, symbol_id) {
+            self.add_local_definition_from_symbol(symbol_id);
             return;
         }
         if let Err(error) = self.validate_capture(identifier.name.as_str(), flags, symbol_id) {
-            panic!("{error}");
+            self.fail(error);
+            return;
         }
         self.add_capture(identifier.name.as_str());
     }
 
+    fn visit_ts_type_annotation(&mut self, _it: &TSTypeAnnotation<'a>) {}
+
+    fn visit_ts_type(&mut self, _it: &TSType<'a>) {}
+
     fn visit_jsx_element_name(&mut self, name: &JSXElementName<'a>) {
         if let JSXElementName::IdentifierReference(reference) = name {
             let symbol_id = self
@@ -662,13 +1183,31 @@ impl<'a, 's> Visit<'a> for CaptureCollector<'a, 's> {
                 return;
             }
             let symbol_scope = self.semantic.symbol_scope(symbol_id);
-            if self.is_reachable_from_function_scope(symbol_scope) {
+            if self.is_local_to_current_traversal(symbol_scope)
+                || self.is_reachable_from_function_scope(symbol_scope)
+            {
+                return;
+            }
+            if flags.is_variable()
+                && flags.is_const_variable()
+                && self.semantic.symbol_scope(symbol_id) == self.program.scope_id()
+            {
+                self.add_local_definition_from_symbol(symbol_id);
+                return;
+            }
+            if self.can_inline_outer_scope_symbol(flags, symbol_id) {
+                self.add_local_definition_from_symbol(symbol_id);
                 return;
             }
-            panic!(
+            if self.can_inline_symbol(flags, symbol_id) {
+                self.add_local_definition_from_symbol(symbol_id);
+                return;
+            }
+            self.fail(format!(
                 "Unsupported resumable component reference \"{}\". Import the component from a module.",
                 reference.name.as_str()
-            );
+            ));
+            return;
         }
         walk::walk_jsx_element_name(self, name);
     }
@@ -698,14 +1237,16 @@ pub(crate) fn transform_analyze(source: &str, id: &str) -> Result<AnalyzeRespons
 struct AnalyzeVisitor<'a, 's> {
     actions: Vec<(String, SymbolRef)>,
     component_counts: HashMap<String, usize>,
-    component_info_by_fn: HashMap<SpanKey, ComponentInfo>,
+    component_info_by_span: HashMap<SpanKey, ComponentInfo>,
     current_functions: Vec<FunctionContext>,
     current_scope_stack: Vec<ScopeId>,
     error: Option<String>,
     hmr_components: Vec<(String, ResumeHmrComponentEntry)>,
     hmr_key_by_symbol_id: HashMap<String, String>,
     hmr_symbols: Vec<(String, ResumeHmrSymbolEntry)>,
+    hook_functions: HashSet<SpanKey>,
     imports: ImportBindings,
+    lazy_symbol_ids_by_span: HashMap<SpanKey, String>,
     file_id: String,
     loaders: Vec<(String, SymbolRef)>,
     node_stack: Vec<NodeMarker>,
@@ -729,14 +1270,16 @@ impl<'a, 's> AnalyzeVisitor<'a, 's> {
         Self {
             actions: Vec::new(),
             component_counts: HashMap::new(),
-            component_info_by_fn: HashMap::new(),
+            component_info_by_span: HashMap::new(),
             current_functions: Vec::new(),
             current_scope_stack: Vec::new(),
             error: None,
             hmr_components: Vec::new(),
             hmr_key_by_symbol_id: HashMap::new(),
             hmr_symbols: Vec::new(),
+            hook_functions: HashSet::new(),
             imports,
+            lazy_symbol_ids_by_span: HashMap::new(),
             file_id: file_id.to_string(),
             loaders: Vec::new(),
             node_stack: Vec::new(),
@@ -778,22 +1321,23 @@ impl<'a, 's> AnalyzeVisitor<'a, 's> {
 
     fn current_owner_component_key(&self) -> Option<String> {
         for function in self.current_functions.iter().rev() {
-            if let Some(info) = self.component_info_by_fn.get(&function.span_key) {
+            if let Some(info) = self.component_info_by_span.get(&function.span_key) {
                 return Some(info.hmr_key.clone());
             }
         }
         None
     }
 
-    fn current_function_is_component(&self) -> bool {
-        self.current_functions
-            .last()
-            .is_some_and(|context| self.component_info_by_fn.contains_key(&context.span_key))
+    fn current_function_is_component_or_hook(&self) -> bool {
+        self.current_functions.last().is_some_and(|context| {
+            self.component_info_by_span.contains_key(&context.span_key)
+                || self.hook_functions.contains(&context.span_key)
+        })
     }
 
     fn push_owner_local_symbol_key(&mut self, symbol_key: &str) {
         for function in self.current_functions.iter().rev() {
-            if let Some(info) = self.component_info_by_fn.get_mut(&function.span_key) {
+            if let Some(info) = self.component_info_by_span.get_mut(&function.span_key) {
                 info.local_symbol_keys.push(symbol_key.to_string());
                 return;
             }
@@ -820,7 +1364,7 @@ impl<'a, 's> AnalyzeVisitor<'a, 's> {
     fn collect_symbol_dependencies(
         &self,
         argument: &Argument<'a>,
-    ) -> Result<(Vec<String>, Vec<Span>), String> {
+    ) -> Result<CollectedDependencies, String> {
         let Some(root_scope) = function_argument_scope(argument) else {
             return Err("Expected function argument.".to_string());
         };
@@ -831,7 +1375,7 @@ impl<'a, 's> AnalyzeVisitor<'a, 's> {
         &self,
         expression: &JSXExpression<'a>,
         root_scope: ScopeId,
-    ) -> Result<(Vec<String>, Vec<Span>), String> {
+    ) -> Result<CollectedDependencies, String> {
         CaptureCollector::collect_jsx_expression(
             self.program,
             self.semantic,
@@ -841,16 +1385,52 @@ impl<'a, 's> AnalyzeVisitor<'a, 's> {
         )
     }
 
-    fn add_resume_symbol(
-        &mut self,
-        symbol_id: String,
-        hmr_key: String,
-        owner_component_key: Option<String>,
-        kind: SymbolKind,
-        build: SymbolBuild,
-    ) {
-        self.hmr_key_by_symbol_id.insert(symbol_id.clone(), hmr_key.clone());
-        self.symbols.push((
+    fn collect_symbol_dependencies_from_expression(
+        &self,
+        expression: &Expression<'a>,
+    ) -> Result<CollectedDependencies, String> {
+        let Some(root_scope) = function_expression_scope(expression) else {
+            return Err("Expected function expression.".to_string());
+        };
+        CaptureCollector::collect_expression(self.program, self.semantic, root_scope, expression)
+    }
+
+    fn collect_symbol_dependencies_from_module_call_expression(
+        &self,
+        expression: &CallExpression<'a>,
+    ) -> Result<CollectedDependencies, String> {
+        CaptureCollector::collect_module_call_expression(self.program, self.semantic, expression)
+    }
+
+    fn collect_symbol_dependencies_from_export_default(
+        &self,
+        declaration: &ExportDefaultDeclarationKind<'a>,
+    ) -> Result<CollectedDependencies, String> {
+        match declaration {
+            ExportDefaultDeclarationKind::ArrowFunctionExpression(function) => {
+                CaptureCollector::collect_arrow(self.program, self.semantic, function)
+            }
+            ExportDefaultDeclarationKind::FunctionExpression(function)
+            | ExportDefaultDeclarationKind::FunctionDeclaration(function) => {
+                CaptureCollector::collect_function(self.program, self.semantic, function)
+            }
+            ExportDefaultDeclarationKind::ParenthesizedExpression(expression) => {
+                self.collect_symbol_dependencies_from_expression(&expression.expression)
+            }
+            _ => Err("Expected function export default.".to_string()),
+        }
+    }
+
+    fn add_resume_symbol(
+        &mut self,
+        symbol_id: String,
+        hmr_key: String,
+        owner_component_key: Option<String>,
+        kind: SymbolKind,
+        build: SymbolBuild,
+    ) {
+        self.hmr_key_by_symbol_id.insert(symbol_id.clone(), hmr_key.clone());
+        self.symbols.push((
             symbol_id.clone(),
             ResumeSymbol {
                 captures: build.captures.clone(),
@@ -882,59 +1462,400 @@ impl<'a, 's> AnalyzeVisitor<'a, 's> {
         format!("()=>[{}]", captures.join(", "))
     }
 
-    fn register_component_if_needed(&mut self, expression: &CallExpression<'a>) {
-        let Some(component_identifier) = self.imports.component_identifier.as_deref() else {
+    fn plain_event_handler_error(attribute_name: &str, handler_name: Option<&str>) -> String {
+        let label = handler_name
+            .map(|name| format!(" \"{name}\""))
+            .unwrap_or_default();
+        format!(
+            "Unsupported plain event handler{label} for \"{attribute_name}\". Use an inline function, a component-local function declaration, or a component-local const function value."
+        )
+    }
+
+    fn ensure_lazy_symbol_for_function(
+        &mut self,
+        function_span: Span,
+        captures: Vec<String>,
+        import_spans: Vec<Span>,
+        local_definitions: Vec<LocalDefinition>,
+    ) -> String {
+        let span_key = SpanKey::from_span(function_span);
+        if let Some(symbol_id) = self.lazy_symbol_ids_by_span.get(&span_key) {
+            return symbol_id.clone();
+        }
+
+        let raw_code = source_text(self.source, function_span);
+        let symbol_id = create_symbol_id(&self.file_id, &SymbolKind::Lazy, raw_code);
+        let build = self
+            .build_symbol(
+                function_span,
+                captures.clone(),
+                import_spans,
+                local_definitions,
+                false,
+            )
+            .unwrap();
+        let owner = self.current_owner_component_key();
+        let base = format!("{}:lazy:slot", owner.clone().unwrap_or_else(|| "file".to_string()));
+        let hmr_key = self.next_owned_symbol_key(base);
+        if owner.is_some() {
+            self.push_owner_local_symbol_key(&hmr_key);
+        }
+        self.used_helpers.insert(HELPER_LAZY.to_string());
+        self.add_resume_symbol(symbol_id.clone(), hmr_key, owner, SymbolKind::Lazy, build);
+        self.lazy_symbol_ids_by_span.insert(span_key, symbol_id.clone());
+        symbol_id
+    }
+
+    fn emit_lazy_symbol_from_function(
+        &mut self,
+        function_span: Span,
+        captures: Vec<String>,
+        import_spans: Vec<Span>,
+        local_definitions: Vec<LocalDefinition>,
+    ) -> String {
+        let symbol_id = self.ensure_lazy_symbol_for_function(
+            function_span,
+            captures.clone(),
+            import_spans,
+            local_definitions,
+        );
+        format!(
+            "{HELPER_LAZY}({}, {}, {})",
+            js_string(&symbol_id),
+            render_span_with_replacements(self.source, function_span, &self.replacements).unwrap(),
+            Self::build_capture_getter(&captures),
+        )
+    }
+
+    fn maybe_emit_local_lazy_symbol(&mut self, expression: &Expression<'a>) {
+        if self.current_owner_component_key().is_none() {
             return;
-        };
-        let Expression::Identifier(callee) = &expression.callee else {
+        }
+        let Some(function_span) = function_expression_span(expression) else {
             return;
         };
-        if callee.name.as_str() != component_identifier {
+        if self.component_info_by_span.contains_key(&SpanKey::from_span(function_span)) {
             return;
         }
-        let Some(argument) = expression.arguments.first() else {
+        if let Expression::ParenthesizedExpression(expression) = expression {
+            self.maybe_emit_local_lazy_symbol(&expression.expression);
             return;
+        }
+        let dependencies = match self.collect_symbol_dependencies_from_expression(expression) {
+            Ok(dependencies) => dependencies,
+            Err(error) => {
+                self.fail(error);
+                return;
+            }
         };
-        let Some(function_span) = function_argument_span(argument) else {
+        let replacement_code = self.emit_lazy_symbol_from_function(
+            function_span,
+            dependencies.captures,
+            dependencies.import_spans,
+            dependencies.local_definitions,
+        );
+        self.push_replacement(
+            function_span.start as usize,
+            function_span.end as usize,
+            replacement_code,
+        );
+    }
+
+    fn maybe_emit_lazy_symbol_for_return_object(&mut self, expression: &Expression<'a>) {
+        match expression {
+            Expression::ParenthesizedExpression(expression) => {
+                self.maybe_emit_lazy_symbol_for_return_object(&expression.expression);
+            }
+            Expression::ObjectExpression(object) => {
+                for property in &object.properties {
+                    let ObjectPropertyKind::ObjectProperty(property) = property else {
+                        continue;
+                    };
+                    self.maybe_emit_lazy_symbol_for_return_property(property);
+                }
+            }
+            _ => {}
+        }
+    }
+
+    fn maybe_emit_lazy_symbol_for_return_property(&mut self, property: &ObjectProperty<'a>) {
+        if property.kind != PropertyKind::Init || property.computed || property.method {
+            return;
+        }
+
+        self.maybe_emit_lazy_symbol_for_return_property_value(property, &property.value);
+    }
+
+    fn maybe_emit_lazy_symbol_for_return_property_value(
+        &mut self,
+        property: &ObjectProperty<'a>,
+        value: &Expression<'a>,
+    ) {
+        match value {
+            Expression::ParenthesizedExpression(expression) => {
+                self.maybe_emit_lazy_symbol_for_return_property_value(property, &expression.expression);
+            }
+            Expression::ArrowFunctionExpression(function) => {
+                let dependencies = match self.collect_symbol_dependencies_from_expression(value) {
+                    Ok(dependencies) => dependencies,
+                    Err(error) => {
+                        self.fail(error);
+                        return;
+                    }
+                };
+                let replacement_code = self.emit_lazy_symbol_from_function(
+                    function.span,
+                    dependencies.captures,
+                    dependencies.import_spans,
+                    dependencies.local_definitions,
+                );
+                self.push_replacement(
+                    property.value.span().start as usize,
+                    property.value.span().end as usize,
+                    replacement_code,
+                );
+            }
+            Expression::FunctionExpression(function) => {
+                let dependencies = match self.collect_symbol_dependencies_from_expression(value) {
+                    Ok(dependencies) => dependencies,
+                    Err(error) => {
+                        self.fail(error);
+                        return;
+                    }
+                };
+                let replacement_code = self.emit_lazy_symbol_from_function(
+                    function.span,
+                    dependencies.captures,
+                    dependencies.import_spans,
+                    dependencies.local_definitions,
+                );
+                self.push_replacement(
+                    property.value.span().start as usize,
+                    property.value.span().end as usize,
+                    replacement_code,
+                );
+            }
+            Expression::Identifier(identifier) => {
+                let reference = self.semantic.scoping().get_reference(identifier.reference_id());
+                let Some(symbol_id) = reference.symbol_id() else {
+                    return;
+                };
+                let flags = self.semantic.scoping().symbol_flags(symbol_id);
+                let symbol_scope = self.semantic.symbol_scope(symbol_id);
+                if flags.is_import() || symbol_scope == self.program.scope_id() {
+                    return;
+                }
+
+                let replacement_code = match self.semantic.symbol_declaration(symbol_id).kind() {
+                    AstKind::VariableDeclarator(variable) => {
+                        if !flags.is_const_variable() {
+                            return;
+                        }
+                        let Some(init) = variable.init.as_ref() else {
+                            return;
+                        };
+                        let Some(function_span) = function_expression_span(init) else {
+                            return;
+                        };
+                        if self.lazy_symbol_ids_by_span.contains_key(&SpanKey::from_span(function_span)) {
+                            return;
+                        }
+                        let dependencies = match self.collect_symbol_dependencies_from_expression(init) {
+                            Ok(dependencies) => dependencies,
+                            Err(error) => {
+                                self.fail(error);
+                                return;
+                            }
+                        };
+                        self.emit_lazy_symbol_from_function(
+                            function_span,
+                            dependencies.captures,
+                            dependencies.import_spans,
+                            dependencies.local_definitions,
+                        )
+                    }
+                    AstKind::Function(function) => {
+                        if self.lazy_symbol_ids_by_span.contains_key(&SpanKey::from_span(function.span)) {
+                            return;
+                        }
+                        let dependencies = match CaptureCollector::collect_function(
+                            self.program,
+                            self.semantic,
+                            function,
+                        ) {
+                            Ok(dependencies) => dependencies,
+                            Err(error) => {
+                                self.fail(error);
+                                return;
+                            }
+                        };
+                        self.emit_lazy_symbol_from_function(
+                            function.span,
+                            dependencies.captures,
+                            dependencies.import_spans,
+                            dependencies.local_definitions,
+                        )
+                    }
+                    _ => return,
+                };
+
+                if property.shorthand {
+                    let key_source =
+                        render_span_with_replacements(self.source, property.key.span(), &self.replacements)
+                            .unwrap();
+                    self.push_replacement(
+                        property.span.start as usize,
+                        property.span.end as usize,
+                        format!("{key_source}: {replacement_code}"),
+                    );
+                    return;
+                }
+
+                self.push_replacement(
+                    property.value.span().start as usize,
+                    property.value.span().end as usize,
+                    replacement_code,
+                );
+            }
+            _ => {}
+        }
+    }
+
+    fn resolve_plain_event_handler_identifier(
+        &mut self,
+        attribute_name: &str,
+        container: &oxc_ast::ast::JSXExpressionContainer<'a>,
+        identifier: &oxc_ast::ast::IdentifierReference<'a>,
+    ) {
+        let reference = self.semantic.scoping().get_reference(identifier.reference_id());
+        let Some(symbol_id) = reference.symbol_id() else {
+            self.fail(Self::plain_event_handler_error(attribute_name, Some(identifier.name.as_str())));
             return;
         };
-        let span_key = SpanKey::from_span(function_span);
-        if self.component_info_by_fn.contains_key(&span_key) {
+        let flags = self.semantic.scoping().symbol_flags(symbol_id);
+        let symbol_scope = self.semantic.symbol_scope(symbol_id);
+        if flags.is_import() || symbol_scope == self.program.scope_id() {
+            self.fail(Self::plain_event_handler_error(attribute_name, Some(identifier.name.as_str())));
             return;
         }
 
-        let mut base = "component:slot".to_string();
+        match self.semantic.symbol_declaration(symbol_id).kind() {
+            AstKind::VariableDeclarator(variable) => {
+                if !flags.is_const_variable() {
+                    self.fail(Self::plain_event_handler_error(attribute_name, Some(identifier.name.as_str())));
+                    return;
+                }
+                let Some(init) = variable.init.as_ref() else {
+                    self.fail(Self::plain_event_handler_error(attribute_name, Some(identifier.name.as_str())));
+                    return;
+                };
+                let Some(function_span) = function_expression_span(init) else {
+                    self.fail(Self::plain_event_handler_error(attribute_name, Some(identifier.name.as_str())));
+                    return;
+                };
+                if self.component_info_by_span.contains_key(&SpanKey::from_span(function_span)) {
+                    self.fail(Self::plain_event_handler_error(attribute_name, Some(identifier.name.as_str())));
+                    return;
+                }
+                let dependencies = match self.collect_symbol_dependencies_from_expression(init) {
+                    Ok(dependencies) => dependencies,
+                    Err(error) => {
+                        self.fail(error);
+                        return;
+                    }
+                };
+                let replacement_code = self.emit_lazy_symbol_from_function(
+                    function_span,
+                    dependencies.captures,
+                    dependencies.import_spans,
+                    dependencies.local_definitions,
+                );
+                self.push_replacement(
+                    function_span.start as usize,
+                    function_span.end as usize,
+                    replacement_code,
+                );
+            }
+            AstKind::Function(function) => {
+                if self.component_info_by_span.contains_key(&SpanKey::from_span(function.span)) {
+                    self.fail(Self::plain_event_handler_error(attribute_name, Some(identifier.name.as_str())));
+                    return;
+                }
+                let dependencies = match CaptureCollector::collect_function(
+                    self.program,
+                    self.semantic,
+                    function,
+                ) {
+                    Ok(dependencies) => dependencies,
+                    Err(error) => {
+                        self.fail(error);
+                        return;
+                    }
+                };
+                let replacement_code = self.emit_lazy_symbol_from_function(
+                    function.span,
+                    dependencies.captures,
+                    dependencies.import_spans,
+                    dependencies.local_definitions,
+                );
+                self.push_replacement(
+                    container.span.start as usize,
+                    container.span.end as usize,
+                    format!("{{{replacement_code}}}"),
+                );
+            }
+            _ => {
+                self.fail(Self::plain_event_handler_error(attribute_name, Some(identifier.name.as_str())));
+            }
+        }
+    }
+
+    fn component_base_from_stack(&self) -> Option<String> {
+        if !self.current_functions.is_empty() {
+            return None;
+        }
         for marker in self.node_stack.iter().rev().skip(1) {
             match marker {
                 NodeMarker::ExportDefaultDeclaration => {
-                    base = "component:default".to_string();
-                    break;
+                    return Some("component:default".to_string());
                 }
                 NodeMarker::VariableDeclarator(Some(name))
-                | NodeMarker::AssignmentExpression(Some(name)) => {
-                    base = format!("component:{name}");
-                    break;
+                | NodeMarker::AssignmentExpression(Some(name))
+                    if is_component_name(name) =>
+                {
+                    return Some(format!("component:{name}"));
                 }
                 _ => {}
             }
         }
-        if base == "component:slot" {
-            let prefix = &self.source[..expression.span.start as usize];
-            let line = prefix.rsplit_once('\n').map(|(_, line)| line).unwrap_or(prefix).trim_end();
-            if line.ends_with("export default") || line.ends_with("export default(") {
-                base = "component:default".to_string();
-            } else if let Some((left, _)) = line.rsplit_once('=') {
-                let candidate = left.split_whitespace().last().unwrap_or_default();
-                if candidate.chars().next().is_some_and(|ch| ch == '_' || ch.is_ascii_alphabetic())
-                    && candidate.chars().all(|ch| ch == '_' || ch == '$' || ch.is_ascii_alphanumeric())
+        None
+    }
+
+    fn hook_base_from_stack(&self) -> Option<String> {
+        if !self.current_functions.is_empty() {
+            return None;
+        }
+        for marker in self.node_stack.iter().rev().skip(1) {
+            match marker {
+                NodeMarker::VariableDeclarator(Some(name))
+                | NodeMarker::AssignmentExpression(Some(name))
+                    if is_hook_name(name) =>
                 {
-                    base = format!("component:{candidate}");
+                    return Some(name.to_string());
                 }
+                _ => {}
             }
         }
+        None
+    }
+
+    fn register_component_with_base(&mut self, span_key: SpanKey, base: String) {
+        if self.component_info_by_span.contains_key(&span_key) {
+            return;
+        }
         let count = self.component_counts.get(&base).copied().unwrap_or(0);
         self.component_counts.insert(base.clone(), count + 1);
-        self.component_info_by_fn.insert(
+        self.component_info_by_span.insert(
             span_key,
             ComponentInfo {
                 hmr_key: create_indexed_key(&base, count),
@@ -943,15 +1864,556 @@ impl<'a, 's> AnalyzeVisitor<'a, 's> {
         );
     }
 
+    fn register_component_if_needed(&mut self, span_key: SpanKey) {
+        let Some(base) = self.component_base_from_stack() else {
+            return;
+        };
+        self.register_component_with_base(span_key, base);
+    }
+
+    fn register_hook_if_needed(&mut self, span_key: SpanKey) {
+        if self.hook_functions.contains(&span_key) {
+            return;
+        }
+        if self.hook_base_from_stack().is_some() {
+            self.hook_functions.insert(span_key);
+        }
+    }
+
+    fn emit_component_symbol(
+        &mut self,
+        symbol_id: String,
+        function_span: Span,
+        captures: Vec<String>,
+        import_spans: Vec<Span>,
+        local_definitions: Vec<LocalDefinition>,
+        projection_slots: Option<Vec<(String, usize)>>,
+    ) {
+        let build = self
+            .build_symbol(
+                function_span,
+                captures.clone(),
+                import_spans,
+                local_definitions,
+                true,
+            )
+            .unwrap();
+        let span_key = SpanKey::from_span(function_span);
+        let component_info = self.component_info_by_span.get(&span_key).cloned().unwrap();
+        self.hmr_key_by_symbol_id
+            .insert(symbol_id.clone(), component_info.hmr_key.clone());
+        self.symbols.push((
+            symbol_id.clone(),
+            ResumeSymbol {
+                captures: build.captures.clone(),
+                code: build.code.clone(),
+                file_path: self.file_id.clone(),
+                id: symbol_id.clone(),
+                kind: SymbolKind::Component,
+            },
+        ));
+        let signature = create_symbol_signature(&SymbolKind::Component, &build.signature_code);
+        self.hmr_symbols.push((
+            component_info.hmr_key.clone(),
+            ResumeHmrSymbolEntry {
+                captures: build.captures.clone(),
+                hmr_key: component_info.hmr_key.clone(),
+                id: symbol_id.clone(),
+                kind: SymbolKind::Component,
+                owner_component_key: None,
+                signature: signature.clone(),
+            },
+        ));
+        self.hmr_components.push((
+            component_info.hmr_key.clone(),
+            ResumeHmrComponentEntry {
+                captures: build.captures.clone(),
+                hmr_key: component_info.hmr_key.clone(),
+                id: symbol_id.clone(),
+                local_symbol_keys: component_info.local_symbol_keys.clone(),
+                signature,
+            },
+        ));
+        self.used_helpers.insert(HELPER_COMPONENT.to_string());
+        let projection_literal = projection_slots
+            .map(|entries| {
+                let body = entries
+                    .into_iter()
+                    .map(|(name, count)| format!("{name}: {count}"))
+                    .collect::<Vec<_>>()
+                    .join(", ");
+                format!(", {{ {body} }}")
+            })
+            .unwrap_or_default();
+        self.push_replacement(
+            function_span.start as usize,
+            function_span.end as usize,
+            format!(
+                "{HELPER_COMPONENT}({}, {}, {}{})",
+                render_span_with_replacements(self.source, function_span, &self.replacements).unwrap(),
+                js_string(&symbol_id),
+                Self::build_capture_getter(&captures),
+                projection_literal,
+            ),
+        );
+    }
+
+    fn emit_prewrapped_component_symbol(
+        &mut self,
+        symbol_id: String,
+        function_span: Span,
+        captures: Vec<String>,
+        import_spans: Vec<Span>,
+        local_definitions: Vec<LocalDefinition>,
+        projection_slots: Option<Vec<(String, usize)>>,
+    ) {
+        let build = self
+            .build_symbol(
+                function_span,
+                captures.clone(),
+                import_spans,
+                local_definitions,
+                true,
+            )
+            .unwrap();
+        let span_key = SpanKey::from_span(function_span);
+        let component_info = self.component_info_by_span.get(&span_key).cloned().unwrap();
+        self.hmr_key_by_symbol_id
+            .insert(symbol_id.clone(), component_info.hmr_key.clone());
+        self.symbols.push((
+            symbol_id.clone(),
+            ResumeSymbol {
+                captures: build.captures.clone(),
+                code: build.code.clone(),
+                file_path: self.file_id.clone(),
+                id: symbol_id.clone(),
+                kind: SymbolKind::Component,
+            },
+        ));
+        let signature = create_symbol_signature(&SymbolKind::Component, &build.signature_code);
+        self.hmr_symbols.push((
+            component_info.hmr_key.clone(),
+            ResumeHmrSymbolEntry {
+                captures: build.captures.clone(),
+                hmr_key: component_info.hmr_key.clone(),
+                id: symbol_id.clone(),
+                kind: SymbolKind::Component,
+                owner_component_key: None,
+                signature: signature.clone(),
+            },
+        ));
+        self.hmr_components.push((
+            component_info.hmr_key.clone(),
+            ResumeHmrComponentEntry {
+                captures: build.captures.clone(),
+                hmr_key: component_info.hmr_key.clone(),
+                id: symbol_id,
+                local_symbol_keys: component_info.local_symbol_keys.clone(),
+                signature,
+            },
+        ));
+        let _ = projection_slots;
+    }
+
+    fn emit_component_symbol_for_expression(&mut self, expression: &Expression<'a>) {
+        if let Expression::CallExpression(call) = expression {
+            if let Expression::Identifier(identifier) = &call.callee {
+                if identifier.name.as_str() == HELPER_COMPONENT {
+                    let Some(function_argument) = call.arguments.first() else {
+                        return;
+                    };
+                    let Some(function_span) = function_argument_span(function_argument) else {
+                        return;
+                    };
+                    let Some(symbol_argument) = call.arguments.get(1) else {
+                        return;
+                    };
+                    let Argument::StringLiteral(symbol_literal) = symbol_argument else {
+                        return;
+                    };
+                    if !self.component_info_by_span.contains_key(&SpanKey::from_span(function_span)) {
+                        return;
+                    }
+                    let Some(captures_argument) = call.arguments.get(2) else {
+                        return;
+                    };
+                    let dependencies = match self.collect_symbol_dependencies(function_argument) {
+                        Ok(dependencies) => dependencies,
+                        Err(error) => {
+                            self.fail(error);
+                            return;
+                        }
+                    };
+                    let projection_slots = match collect_projection_slots_from_argument(function_argument) {
+                        Ok(value) => value,
+                        Err(error) => {
+                            self.fail(error);
+                            return;
+                        }
+                    };
+                    self.push_replacement(
+                        captures_argument.span().start as usize,
+                        captures_argument.span().end as usize,
+                        Self::build_capture_getter(&dependencies.captures),
+                    );
+                    self.emit_prewrapped_component_symbol(
+                        symbol_literal.value.as_str().to_string(),
+                        function_span,
+                        dependencies.captures,
+                        dependencies.import_spans,
+                        dependencies.local_definitions,
+                        projection_slots,
+                    );
+                    return;
+                }
+            }
+        }
+        let Some(function_span) = function_expression_span(expression) else {
+            return;
+        };
+        if !self.component_info_by_span.contains_key(&SpanKey::from_span(function_span)) {
+            return;
+        }
+        let dependencies = match self.collect_symbol_dependencies_from_expression(expression) {
+            Ok(dependencies) => dependencies,
+            Err(error) => {
+                self.fail(error);
+                return;
+            }
+        };
+        let projection_slots = match collect_projection_slots_from_expression(expression) {
+            Ok(value) => value,
+            Err(error) => {
+                self.fail(error);
+                return;
+            }
+        };
+        self.emit_component_symbol(
+            create_symbol_id(&self.file_id, &SymbolKind::Component, source_text(self.source, function_span)),
+            function_span,
+            dependencies.captures,
+            dependencies.import_spans,
+            dependencies.local_definitions,
+            projection_slots,
+        );
+    }
+
+    fn emit_component_symbol_for_export_default(
+        &mut self,
+        declaration: &ExportDefaultDeclarationKind<'a>,
+    ) {
+        let function_span = match declaration {
+            ExportDefaultDeclarationKind::ArrowFunctionExpression(function) => function.span,
+            ExportDefaultDeclarationKind::FunctionExpression(function)
+            | ExportDefaultDeclarationKind::FunctionDeclaration(function) => function.span,
+            ExportDefaultDeclarationKind::ParenthesizedExpression(expression) => {
+                let Some(function_span) = function_expression_span(&expression.expression) else {
+                    return;
+                };
+                function_span
+            }
+            _ => return,
+        };
+        if !self.component_info_by_span.contains_key(&SpanKey::from_span(function_span)) {
+            return;
+        }
+        let dependencies = match self.collect_symbol_dependencies_from_export_default(declaration) {
+            Ok(dependencies) => dependencies,
+            Err(error) => {
+                self.fail(error);
+                return;
+            }
+        };
+        let projection_slots = match collect_projection_slots_from_export_default(declaration) {
+            Ok(value) => value,
+            Err(error) => {
+                self.fail(error);
+                return;
+            }
+        };
+        self.emit_component_symbol(
+            create_symbol_id(&self.file_id, &SymbolKind::Component, source_text(self.source, function_span)),
+            function_span,
+            dependencies.captures,
+            dependencies.import_spans,
+            dependencies.local_definitions,
+            projection_slots,
+        );
+    }
+
+    fn build_external_component_symbol(
+        &self,
+        expression_span: Span,
+        captures: Vec<String>,
+        import_spans: Vec<Span>,
+        local_definitions: Vec<LocalDefinition>,
+        normalize_symbol_ids: bool,
+    ) -> Result<SymbolBuild, String> {
+        let expression_source =
+            render_span_with_replacements(self.source, expression_span, &self.replacements)?;
+        let local_prefix = local_definitions
+            .iter()
+            .map(|definition| self.render_local_definition(definition))
+            .collect::<Result<Vec<_>, _>>()?
+            .join("\n");
+        let standalone_module = if local_prefix.is_empty() {
+            format!("const __e_component = {expression_source};\nexport default __e_component;\n")
+        } else {
+            format!(
+                "{local_prefix}\nconst __e_component = {expression_source};\nexport default __e_component;\n"
+            )
+        };
+        let allocator = Allocator::default();
+        let standalone_program = parse_program(
+            &allocator,
+            &standalone_module,
+            source_type_for("symbol.tsx"),
+            "symbol.tsx",
+        )?;
+        let semantic_builder =
+            SemanticBuilder::new().with_check_syntax_error(true).build(&standalone_program);
+        if !semantic_builder.errors.is_empty() {
+            let message = semantic_builder
+                .errors
+                .iter()
+                .map(ToString::to_string)
+                .collect::<Vec<_>>()
+                .join("\n");
+            return Err(message);
+        }
+        let standalone_semantic = semantic_builder.semantic;
+
+        let mut replacements = Vec::new();
+        let capture_indices = captures
+            .iter()
+            .enumerate()
+            .map(|(index, capture)| (capture.clone(), index))
+            .collect::<HashMap<_, _>>();
+        let mut helper_imports = BTreeSet::new();
+
+        struct StandaloneCaptureVisitor<'b> {
+            capture_indices: &'b HashMap<String, usize>,
+            helper_imports: &'b mut BTreeSet<String>,
+            replacements: &'b mut Vec<Replacement>,
+            semantic: &'b Semantic<'b>,
+        }
+
+        impl<'a> Visit<'a> for StandaloneCaptureVisitor<'_> {
+            fn visit_identifier_reference(
+                &mut self,
+                identifier: &oxc_ast::ast::IdentifierReference<'a>,
+            ) {
+                let reference = self.semantic.scoping().get_reference(identifier.reference_id());
+                if reference.symbol_id().is_none() {
+                    let name = identifier.name.as_str().to_string();
+                    if let Some(index) = self.capture_indices.get(&name) {
+                        self.replacements.push(Replacement {
+                            start: identifier.span.start as usize,
+                            end: identifier.span.end as usize,
+                            code: format!("__scope[{index}]"),
+                        });
+                    } else if INTERNAL_HELPERS.contains(&name.as_str()) {
+                        self.helper_imports.insert(name);
+                    }
+                }
+            }
+        }
+
+        let mut visitor = StandaloneCaptureVisitor {
+            capture_indices: &capture_indices,
+            helper_imports: &mut helper_imports,
+            replacements: &mut replacements,
+            semantic: &standalone_semantic,
+        };
+        visitor.visit_program(&standalone_program);
+        let mut code = apply_replacements(&standalone_module, &mut replacements)?;
+        code = format!("const __scope = [] as unknown[];\n{code}");
+        let mut signature_code = code.clone();
+
+        if normalize_symbol_ids {
+            let mut pairs = self.hmr_key_by_symbol_id.iter().collect::<Vec<_>>();
+            pairs.sort_by(|left, right| left.0.cmp(right.0));
+            for (symbol_id, hmr_key) in pairs {
+                signature_code = signature_code.replace(&js_string(symbol_id), &js_string(hmr_key));
+            }
+        }
+
+        let import_code = import_spans
+            .iter()
+            .map(|span| source_text(self.source, *span))
+            .collect::<Vec<_>>();
+        let internal_import = if helper_imports.is_empty() {
+            String::new()
+        } else {
+            format!(
+                "import {{ {} }} from \"{}\";\n",
+                helper_imports.iter().cloned().collect::<Vec<_>>().join(", "),
+                INTERNAL_IMPORT
+            )
+        };
+        let import_prefix = if import_code.is_empty() {
+            String::new()
+        } else {
+            format!("{}\n", import_code.join("\n"))
+        };
+        let prefixed = format!("{import_prefix}{internal_import}{code}");
+        let prefixed_signature = format!("{import_prefix}{internal_import}{signature_code}");
+
+        Ok(SymbolBuild {
+            captures,
+            code: prefixed,
+            signature_code: prefixed_signature,
+        })
+    }
+
+    fn emit_external_component_symbol(
+        &mut self,
+        expression: &CallExpression<'a>,
+        kind: ExternalFactoryKind,
+        base: String,
+    ) {
+        let span_key = SpanKey::from_span(expression.span);
+        self.register_component_with_base(span_key, base);
+
+        let Some(target) = expression.arguments.first() else {
+            self.fail("eclipsify*() expects the external component as the first argument.");
+            return;
+        };
+        if !is_supported_external_component_target(target) {
+            self.fail(
+                "eclipsify*() requires a static component reference as the first argument. Dynamic targets are not supported.",
+            );
+            return;
+        }
+
+        let projection_slots = match collect_external_projection_slots(expression) {
+            Ok(value) => value,
+            Err(error) => {
+                self.fail(error);
+                return;
+            }
+        };
+
+        let dependencies = match self.collect_symbol_dependencies_from_module_call_expression(expression) {
+            Ok(dependencies) => dependencies,
+            Err(error) => {
+                self.fail(error);
+                return;
+            }
+        };
+        if !dependencies.captures.is_empty() {
+            self.fail(
+                "eclipsify*() arguments must only reference imports or top-level inlinable symbols.",
+            );
+            return;
+        }
+        let symbol_id =
+            create_symbol_id(&self.file_id, &SymbolKind::Component, source_text(self.source, expression.span));
+        let build = match self.build_external_component_symbol(
+            expression.span,
+            dependencies.captures.clone(),
+            dependencies.import_spans,
+            dependencies.local_definitions,
+            true,
+        ) {
+            Ok(build) => build,
+            Err(error) => {
+                self.fail(error);
+                return;
+            }
+        };
+        let component_info = self.component_info_by_span.get(&span_key).cloned().unwrap();
+        self.hmr_key_by_symbol_id
+            .insert(symbol_id.clone(), component_info.hmr_key.clone());
+        self.symbols.push((
+            symbol_id.clone(),
+            ResumeSymbol {
+                captures: build.captures.clone(),
+                code: build.code.clone(),
+                file_path: self.file_id.clone(),
+                id: symbol_id.clone(),
+                kind: SymbolKind::Component,
+            },
+        ));
+        let signature = create_symbol_signature(&SymbolKind::Component, &build.signature_code);
+        self.hmr_symbols.push((
+            component_info.hmr_key.clone(),
+            ResumeHmrSymbolEntry {
+                captures: build.captures.clone(),
+                hmr_key: component_info.hmr_key.clone(),
+                id: symbol_id.clone(),
+                kind: SymbolKind::Component,
+                owner_component_key: None,
+                signature: signature.clone(),
+            },
+        ));
+        self.hmr_components.push((
+            component_info.hmr_key.clone(),
+            ResumeHmrComponentEntry {
+                captures: build.captures,
+                hmr_key: component_info.hmr_key.clone(),
+                id: symbol_id.clone(),
+                local_symbol_keys: component_info.local_symbol_keys,
+                signature,
+            },
+        ));
+        self.used_helpers.insert(HELPER_COMPONENT.to_string());
+
+        let projection_literal = if projection_slots.is_empty() {
+            String::new()
+        } else {
+            let body = projection_slots
+                .iter()
+                .map(|(name, count)| format!("{name}: {count}"))
+                .collect::<Vec<_>>()
+                .join(", ");
+            format!(", {{ {body} }}")
+        };
+        let slots_literal = format!(
+            "[{}]",
+            projection_slots
+                .iter()
+                .map(|(name, _)| js_string(name))
+                .collect::<Vec<_>>()
+                .join(", ")
+        );
+        let options_literal = format!(
+            "{{ external: {{ kind: {}, slots: {} }} }}",
+            js_string(kind.as_runtime_kind()),
+            slots_literal,
+        );
+        self.push_replacement(
+            expression.span.start as usize,
+            expression.span.end as usize,
+            format!(
+                "{HELPER_COMPONENT}({}, {}, {}{}, {})",
+                render_span_with_replacements(self.source, expression.span, &self.replacements).unwrap(),
+                js_string(&symbol_id),
+                Self::build_capture_getter(&dependencies.captures),
+                projection_literal,
+                options_literal,
+            ),
+        );
+    }
+
     fn build_symbol(
         &self,
         function_span: Span,
         captures: Vec<String>,
         import_spans: Vec<Span>,
+        local_definitions: Vec<LocalDefinition>,
         normalize_symbol_ids: bool,
     ) -> Result<SymbolBuild, String> {
         let standalone_source = render_span_with_replacements(self.source, function_span, &self.replacements)?;
-        let standalone_module = inject_scope_parameter(&standalone_source)?;
+        let local_prefix = local_definitions
+            .iter()
+            .map(|definition| self.render_local_definition(definition))
+            .collect::<Result<Vec<_>, _>>()?
+            .join("\n");
+        let standalone_module = inject_scope_parameter(
+            &standalone_source,
+            (!local_prefix.is_empty()).then_some(local_prefix.as_str()),
+        )?;
         let allocator = Allocator::default();
         let standalone_program = parse_program(
             &allocator,
@@ -1043,11 +2505,59 @@ impl<'a, 's> AnalyzeVisitor<'a, 's> {
         let prefixed = format!("{import_prefix}{internal_import}{code}");
         let prefixed_signature = format!("{import_prefix}{internal_import}{signature_code}");
 
-        Ok(SymbolBuild {
-            captures,
-            code: prefixed,
-            signature_code: prefixed_signature,
-        })
+        Ok(SymbolBuild {
+            captures,
+            code: prefixed,
+            signature_code: prefixed_signature,
+        })
+    }
+
+    fn render_local_definition(&self, definition: &LocalDefinition) -> Result<String, String> {
+        let rendered = render_span_with_replacements(self.source, definition.span, &self.replacements)?;
+        Ok(match definition.kind {
+            Some(kind) => format!("{} {rendered};", variable_declaration_kind_source(kind)),
+            None => rendered,
+        })
+    }
+
+    fn external_factory_kind_for_call_expression(
+        &self,
+        expression: &CallExpression<'a>,
+    ) -> Option<ExternalFactoryKind> {
+        let Expression::Identifier(callee) = &expression.callee else {
+            return None;
+        };
+        let callee_name = callee.name.as_str();
+
+        if self
+            .imports
+            .react_island_identifier
+            .as_deref()
+            .is_some_and(|identifier| identifier == callee_name)
+        {
+            return Some(ExternalFactoryKind::React);
+        }
+
+        if self
+            .imports
+            .vue_island_identifier
+            .as_deref()
+            .is_some_and(|identifier| identifier == callee_name)
+        {
+            return Some(ExternalFactoryKind::Vue);
+        }
+
+        None
+    }
+
+    fn invalid_external_factory_binding_error(kind: ExternalFactoryKind) -> String {
+        format!(
+            "eclipsify{}() must be assigned to a top-level PascalCase binding.",
+            match kind {
+                ExternalFactoryKind::React => "React",
+                ExternalFactoryKind::Vue => "Vue",
+            }
+        )
     }
 }
 
@@ -1078,12 +2588,18 @@ impl<'a, 's> Visit<'a> for AnalyzeVisitor<'a, 's> {
         self.node_stack.push(marker);
 
         match kind {
-            AstKind::ArrowFunctionExpression(function) => self.current_functions.push(FunctionContext {
-                span_key: SpanKey::from_span(function.span),
-            }),
-            AstKind::Function(function) => self.current_functions.push(FunctionContext {
-                span_key: SpanKey::from_span(function.span),
-            }),
+            AstKind::ArrowFunctionExpression(function) => {
+                let span_key = SpanKey::from_span(function.span);
+                self.register_component_if_needed(span_key);
+                self.register_hook_if_needed(span_key);
+                self.current_functions.push(FunctionContext { span_key });
+            }
+            AstKind::Function(function) => {
+                let span_key = SpanKey::from_span(function.span);
+                self.register_component_if_needed(span_key);
+                self.register_hook_if_needed(span_key);
+                self.current_functions.push(FunctionContext { span_key });
+            }
             _ => {}
         }
     }
@@ -1110,7 +2626,6 @@ impl<'a, 's> Visit<'a> for AnalyzeVisitor<'a, 's> {
         if self.error.is_some() {
             return;
         }
-        self.register_component_if_needed(expression);
         walk::walk_call_expression(self, expression);
 
         let Expression::Identifier(callee) = &expression.callee else {
@@ -1124,9 +2639,9 @@ impl<'a, 's> Visit<'a> for AnalyzeVisitor<'a, 's> {
             .as_deref()
             .is_some_and(|identifier| identifier == callee_name)
         {
-            if !self.current_function_is_component() {
+            if !self.current_function_is_component_or_hook() {
                 self.fail(
-                    "useSignal() can only be used while rendering a component$ and must be called at the top level of the component$ body (not inside nested functions).",
+                    "useSignal() can only be used while rendering a component and must be called at the top level of the component body (not inside nested functions).",
                 );
             }
             return;
@@ -1134,38 +2649,27 @@ impl<'a, 's> Visit<'a> for AnalyzeVisitor<'a, 's> {
 
         if self
             .imports
-            .lazy_identifier
+            .atom_identifier
             .as_deref()
             .is_some_and(|identifier| identifier == callee_name)
         {
-            let Some(argument) = expression.arguments.first() else {
-                panic!("$() expects a function expression.");
-            };
-            if !is_function_argument(argument) {
-                panic!("$() expects a function expression.");
-            }
-            let function_span = function_argument_span(argument).unwrap();
-            let raw_code = source_text(self.source, function_span);
-            let symbol_id = create_symbol_id(&self.file_id, &SymbolKind::Lazy, raw_code);
-            let (captures, import_spans) = self.collect_symbol_dependencies(argument).unwrap();
-            let build = self
-                .build_symbol(function_span, captures.clone(), import_spans, false)
-                .unwrap();
-            let owner = self.current_owner_component_key();
-            let base = format!("{}:lazy:slot", owner.clone().unwrap_or_else(|| "file".to_string()));
-            let hmr_key = self.next_owned_symbol_key(base);
-            if owner.is_some() {
-                self.push_owner_local_symbol_key(&hmr_key);
+            if !self.current_function_is_component_or_hook() {
+                self.fail(
+                    "useAtom() can only be used while rendering a component and must be called at the top level of the component body (not inside nested functions).",
+                );
             }
-            self.used_helpers.insert(HELPER_LAZY.to_string());
-            self.add_resume_symbol(symbol_id.clone(), hmr_key, owner, SymbolKind::Lazy, build);
-            let replacement_code = format!(
-                "{HELPER_LAZY}({}, {}, {})",
-                js_string(&symbol_id),
-                render_span_with_replacements(self.source, function_span, &self.replacements).unwrap(),
-                Self::build_capture_getter(&captures),
+            return;
+        }
+
+        if self
+            .imports
+            .deprecated_lazy_identifier
+            .as_deref()
+            .is_some_and(|identifier| identifier == callee_name)
+        {
+            self.fail(
+                "$() has been removed. Declare an async function and reference it directly, or pass a plain event handler.",
             );
-            self.push_replacement(expression.span.start as usize, expression.span.end as usize, replacement_code);
             return;
         }
 
@@ -1176,31 +2680,29 @@ impl<'a, 's> Visit<'a> for AnalyzeVisitor<'a, 's> {
             .is_some_and(|identifier| identifier == callee_name)
         {
             let Some(argument) = expression.arguments.first() else {
-                panic!("onVisible() expects a function expression as the first argument.");
+                self.fail("onVisible() expects a function expression as the first argument.");
+                return;
             };
             if !is_function_argument(argument) {
-                panic!("onVisible() expects a function expression as the first argument.");
-            }
-            let function_span = function_argument_span(argument).unwrap();
-            let raw_code = source_text(self.source, function_span);
-            let symbol_id = create_symbol_id(&self.file_id, &SymbolKind::Lazy, raw_code);
-            let (captures, import_spans) = self.collect_symbol_dependencies(argument).unwrap();
-            let build = self
-                .build_symbol(function_span, captures.clone(), import_spans, false)
-                .unwrap();
-            let owner = self.current_owner_component_key();
-            let base = format!("{}:lazy:slot", owner.clone().unwrap_or_else(|| "file".to_string()));
-            let hmr_key = self.next_owned_symbol_key(base);
-            if owner.is_some() {
-                self.push_owner_local_symbol_key(&hmr_key);
+                self.fail("onVisible() expects a function expression as the first argument.");
+                return;
             }
-            self.used_helpers.insert(HELPER_LAZY.to_string());
-            self.add_resume_symbol(symbol_id.clone(), hmr_key, owner, SymbolKind::Lazy, build);
-            let replacement_code = format!(
-                "{HELPER_LAZY}({}, {}, {})",
-                js_string(&symbol_id),
-                render_span_with_replacements(self.source, function_span, &self.replacements).unwrap(),
-                Self::build_capture_getter(&captures),
+            let Some(function_span) = function_argument_span(argument) else {
+                self.fail("onVisible() expects a function expression as the first argument.");
+                return;
+            };
+            let dependencies = match self.collect_symbol_dependencies(argument) {
+                Ok(dependencies) => dependencies,
+                Err(error) => {
+                    self.fail(error);
+                    return;
+                }
+            };
+            let replacement_code = self.emit_lazy_symbol_from_function(
+                function_span,
+                dependencies.captures,
+                dependencies.import_spans,
+                dependencies.local_definitions,
             );
             self.push_replacement(function_span.start as usize, function_span.end as usize, replacement_code);
             return;
@@ -1213,18 +2715,39 @@ impl<'a, 's> Visit<'a> for AnalyzeVisitor<'a, 's> {
             .is_some_and(|identifier| identifier == callee_name)
         {
             let Some(argument) = expression.arguments.first() else {
-                panic!("useWatch() expects a function expression as the first argument.");
+                self.fail("useWatch() expects a function expression as the first argument.");
+                return;
             };
             if !is_function_argument(argument) {
-                panic!("useWatch() expects a function expression as the first argument.");
+                self.fail("useWatch() expects a function expression as the first argument.");
+                return;
             }
-            let function_span = function_argument_span(argument).unwrap();
+            let Some(function_span) = function_argument_span(argument) else {
+                self.fail("useWatch() expects a function expression as the first argument.");
+                return;
+            };
             let raw_code = source_text(self.source, function_span);
             let symbol_id = create_symbol_id(&self.file_id, &SymbolKind::Watch, raw_code);
-            let (captures, import_spans) = self.collect_symbol_dependencies(argument).unwrap();
-            let build = self
-                .build_symbol(function_span, captures.clone(), import_spans, false)
-                .unwrap();
+            let dependencies = match self.collect_symbol_dependencies(argument) {
+                Ok(dependencies) => dependencies,
+                Err(error) => {
+                    self.fail(error);
+                    return;
+                }
+            };
+            let build = match self.build_symbol(
+                function_span,
+                dependencies.captures.clone(),
+                dependencies.import_spans,
+                dependencies.local_definitions,
+                false,
+            ) {
+                Ok(build) => build,
+                Err(error) => {
+                    self.fail(error);
+                    return;
+                }
+            };
             let owner = self.current_owner_component_key();
             let base = format!("{}:watch:slot", owner.clone().unwrap_or_else(|| "file".to_string()));
             let hmr_key = self.next_owned_symbol_key(base);
@@ -1237,12 +2760,22 @@ impl<'a, 's> Visit<'a> for AnalyzeVisitor<'a, 's> {
                 "{HELPER_WATCH}({}, {}, {})",
                 js_string(&symbol_id),
                 render_span_with_replacements(self.source, function_span, &self.replacements).unwrap(),
-                Self::build_capture_getter(&captures),
+                Self::build_capture_getter(&dependencies.captures),
             );
             self.push_replacement(function_span.start as usize, function_span.end as usize, replacement_code);
             return;
         }
 
+        if self
+            .imports
+            .deprecated_action_identifier
+            .as_deref()
+            .is_some_and(|identifier| identifier == callee_name)
+        {
+            self.fail("action$() has been removed. Use action() instead.");
+            return;
+        }
+
         if self
             .imports
             .action_identifier
@@ -1250,20 +2783,42 @@ impl<'a, 's> Visit<'a> for AnalyzeVisitor<'a, 's> {
             .is_some_and(|identifier| identifier == callee_name)
         {
             if !self.current_functions.is_empty() {
-                panic!("action$() must be declared at module scope so the server can register it exactly once.");
+                self.fail("action() must be declared at module scope so the server can register it exactly once.");
+                return;
             }
             let Some(argument) = expression.arguments.last() else {
-                panic!("action$() expects the last argument to be a function.");
+                self.fail("action() expects the last argument to be a function.");
+                return;
             };
             if !is_function_argument(argument) {
-                panic!("action$() expects the last argument to be a function.");
+                self.fail("action() expects the last argument to be a function.");
+                return;
             }
-            let function_span = function_argument_span(argument).unwrap();
+            let Some(function_span) = function_argument_span(argument) else {
+                self.fail("action() expects the last argument to be a function.");
+                return;
+            };
             let symbol_id = create_symbol_id(&self.file_id, &SymbolKind::Action, source_text(self.source, function_span));
-            let (captures, import_spans) = self.collect_symbol_dependencies(argument).unwrap();
-            let build = self
-                .build_symbol(function_span, captures, import_spans, false)
-                .unwrap();
+            let dependencies = match self.collect_symbol_dependencies(argument) {
+                Ok(dependencies) => dependencies,
+                Err(error) => {
+                    self.fail(error);
+                    return;
+                }
+            };
+            let build = match self.build_symbol(
+                function_span,
+                dependencies.captures,
+                dependencies.import_spans,
+                dependencies.local_definitions,
+                false,
+            ) {
+                Ok(build) => build,
+                Err(error) => {
+                    self.fail(error);
+                    return;
+                }
+            };
             self.symbols.push((
                 symbol_id.clone(),
                 ResumeSymbol {
@@ -1299,6 +2854,16 @@ impl<'a, 's> Visit<'a> for AnalyzeVisitor<'a, 's> {
             return;
         }
 
+        if self
+            .imports
+            .deprecated_loader_identifier
+            .as_deref()
+            .is_some_and(|identifier| identifier == callee_name)
+        {
+            self.fail("loader$() has been removed. Use loader() instead.");
+            return;
+        }
+
         if self
             .imports
             .loader_identifier
@@ -1306,20 +2871,42 @@ impl<'a, 's> Visit<'a> for AnalyzeVisitor<'a, 's> {
             .is_some_and(|identifier| identifier == callee_name)
         {
             if !self.current_functions.is_empty() {
-                panic!("loader$() must be declared at module scope so the server can register it exactly once.");
+                self.fail("loader() must be declared at module scope so the server can register it exactly once.");
+                return;
             }
             let Some(argument) = expression.arguments.last() else {
-                panic!("loader$() expects the last argument to be a function.");
+                self.fail("loader() expects the last argument to be a function.");
+                return;
             };
             if !is_function_argument(argument) {
-                panic!("loader$() expects the last argument to be a function.");
+                self.fail("loader() expects the last argument to be a function.");
+                return;
             }
-            let function_span = function_argument_span(argument).unwrap();
+            let Some(function_span) = function_argument_span(argument) else {
+                self.fail("loader() expects the last argument to be a function.");
+                return;
+            };
             let symbol_id = create_symbol_id(&self.file_id, &SymbolKind::Loader, source_text(self.source, function_span));
-            let (captures, import_spans) = self.collect_symbol_dependencies(argument).unwrap();
-            let build = self
-                .build_symbol(function_span, captures, import_spans, false)
-                .unwrap();
+            let dependencies = match self.collect_symbol_dependencies(argument) {
+                Ok(dependencies) => dependencies,
+                Err(error) => {
+                    self.fail(error);
+                    return;
+                }
+            };
+            let build = match self.build_symbol(
+                function_span,
+                dependencies.captures,
+                dependencies.import_spans,
+                dependencies.local_definitions,
+                false,
+            ) {
+                Ok(build) => build,
+                Err(error) => {
+                    self.fail(error);
+                    return;
+                }
+            };
             self.symbols.push((
                 symbol_id.clone(),
                 ResumeSymbol {
@@ -1355,91 +2942,105 @@ impl<'a, 's> Visit<'a> for AnalyzeVisitor<'a, 's> {
             return;
         }
 
-        if self
-            .imports
-            .component_identifier
-            .as_deref()
-            .is_some_and(|identifier| identifier == callee_name)
-        {
-            let Some(argument) = expression.arguments.first() else {
-                panic!("component$() expects a function expression.");
-            };
-            if !is_function_argument(argument) {
-                panic!("component$() expects a function expression.");
+    }
+
+    fn visit_variable_declarator(&mut self, declarator: &VariableDeclarator<'a>) {
+        if self.error.is_some() {
+            return;
+        }
+        walk::walk_variable_declarator(self, declarator);
+        if self.error.is_some() {
+            return;
+        }
+        let Some(init) = declarator.init.as_ref() else {
+            return;
+        };
+        if let Expression::CallExpression(call) = init {
+            if let Some(kind) = self.external_factory_kind_for_call_expression(call) {
+                let oxc_ast::ast::BindingPatternKind::BindingIdentifier(identifier) = &declarator.id.kind else {
+                    self.fail(Self::invalid_external_factory_binding_error(kind));
+                    return;
+                };
+                if !self.current_functions.is_empty() || !is_component_name(identifier.name.as_str()) {
+                    self.fail(Self::invalid_external_factory_binding_error(kind));
+                    return;
+                }
+                self.emit_external_component_symbol(
+                    call,
+                    kind,
+                    format!("component:{}", identifier.name.as_str()),
+                );
+                return;
             }
-            let function_span = function_argument_span(argument).unwrap();
-            let raw_code = source_text(self.source, function_span);
-            let symbol_id = create_symbol_id(&self.file_id, &SymbolKind::Component, raw_code);
-            let (captures, import_spans) = self.collect_symbol_dependencies(argument).unwrap();
-            let projection_slots = match collect_projection_slots_from_source(argument, self.source) {
-                Ok(value) => value,
-                Err(error) => {
-                    self.fail(error);
+        }
+        self.emit_component_symbol_for_expression(init);
+        self.maybe_emit_local_lazy_symbol(init);
+    }
+
+    fn visit_assignment_expression(&mut self, expression: &AssignmentExpression<'a>) {
+        if self.error.is_some() {
+            return;
+        }
+        walk::walk_assignment_expression(self, expression);
+        if self.error.is_some() {
+            return;
+        }
+        if let Expression::CallExpression(call) = &expression.right {
+            if let Some(kind) = self.external_factory_kind_for_call_expression(call) {
+                let AssignmentTarget::AssignmentTargetIdentifier(identifier) = &expression.left else {
+                    self.fail(Self::invalid_external_factory_binding_error(kind));
+                    return;
+                };
+                if !self.current_functions.is_empty() || !is_component_name(identifier.name.as_str()) {
+                    self.fail(Self::invalid_external_factory_binding_error(kind));
                     return;
                 }
-            };
-            let build = self
-                .build_symbol(function_span, captures.clone(), import_spans, true)
-                .unwrap();
-            let span_key = SpanKey::from_span(function_span);
-            let component_info = self.component_info_by_fn.get(&span_key).cloned().unwrap();
-            self.hmr_key_by_symbol_id
-                .insert(symbol_id.clone(), component_info.hmr_key.clone());
-            self.symbols.push((
-                symbol_id.clone(),
-                ResumeSymbol {
-                    captures: build.captures.clone(),
-                    code: build.code.clone(),
-                    file_path: self.file_id.clone(),
-                    id: symbol_id.clone(),
-                    kind: SymbolKind::Component,
-                },
-            ));
-            let signature = create_symbol_signature(&SymbolKind::Component, &build.signature_code);
-            self.hmr_symbols.push((
-                component_info.hmr_key.clone(),
-                ResumeHmrSymbolEntry {
-                    captures: build.captures.clone(),
-                    hmr_key: component_info.hmr_key.clone(),
-                    id: symbol_id.clone(),
-                    kind: SymbolKind::Component,
-                    owner_component_key: None,
-                    signature: signature.clone(),
-                },
-            ));
-            self.hmr_components.push((
-                component_info.hmr_key.clone(),
-                ResumeHmrComponentEntry {
-                    captures: build.captures.clone(),
-                    hmr_key: component_info.hmr_key.clone(),
-                    id: symbol_id.clone(),
-                    local_symbol_keys: component_info.local_symbol_keys.clone(),
-                    signature,
-                },
-            ));
-            self.used_helpers.insert(HELPER_COMPONENT.to_string());
-            let projection_literal = projection_slots
-                .map(|entries| {
-                    let body = entries
-                        .into_iter()
-                        .map(|(name, count)| format!("{name}: {count}"))
-                        .collect::<Vec<_>>()
-                        .join(", ");
-                    format!(", {{ {body} }}")
-                })
-                .unwrap_or_default();
-            self.push_replacement(
-                function_span.start as usize,
-                function_span.end as usize,
-                format!(
-                    "{HELPER_COMPONENT}({}, {}, {}{})",
-                    render_span_with_replacements(self.source, function_span, &self.replacements).unwrap(),
-                    js_string(&symbol_id),
-                    Self::build_capture_getter(&captures),
-                    projection_literal,
-                ),
-            );
+                self.emit_external_component_symbol(
+                    call,
+                    kind,
+                    format!("component:{}", identifier.name.as_str()),
+                );
+                return;
+            }
+        }
+        self.emit_component_symbol_for_expression(&expression.right);
+        self.maybe_emit_local_lazy_symbol(&expression.right);
+    }
+
+    fn visit_return_statement(&mut self, statement: &ReturnStatement<'a>) {
+        if self.error.is_some() {
+            return;
+        }
+        walk::walk_return_statement(self, statement);
+        if self.error.is_some() {
+            return;
+        }
+        if !self.current_function_is_component_or_hook() {
+            return;
+        }
+        let Some(argument) = &statement.argument else {
+            return;
+        };
+        self.maybe_emit_lazy_symbol_for_return_object(argument);
+    }
+
+    fn visit_export_default_declaration(&mut self, declaration: &ExportDefaultDeclaration<'a>) {
+        if self.error.is_some() {
+            return;
+        }
+        walk::walk_export_default_declaration(self, declaration);
+        if self.error.is_some() {
+            return;
+        }
+        if let ExportDefaultDeclarationKind::ParenthesizedExpression(expression) = &declaration.declaration {
+            if let Expression::CallExpression(call) = &expression.expression {
+                if let Some(kind) = self.external_factory_kind_for_call_expression(call) {
+                    self.fail(Self::invalid_external_factory_binding_error(kind));
+                    return;
+                }
+            }
         }
+        self.emit_component_symbol_for_export_default(&declaration.declaration);
     }
 
     fn visit_jsx_attribute(&mut self, attribute: &oxc_ast::ast::JSXAttribute<'a>) {
@@ -1448,7 +3049,18 @@ impl<'a, 's> Visit<'a> for AnalyzeVisitor<'a, 's> {
         }
         walk::walk_jsx_attribute(self, attribute);
 
-        let event_name = match to_event_name(&get_jsx_attribute_name(&attribute.name)) {
+        let attribute_name = get_jsx_attribute_name(&attribute.name);
+        if attribute_name.starts_with(EVENT_PROP_REGEX_PREFIX)
+            && attribute_name.ends_with(DEPRECATED_EVENT_PROP_REGEX_SUFFIX)
+        {
+            self.fail(format!(
+                "Event prop \"{attribute_name}\" has been removed. Use \"{}\" instead.",
+                &attribute_name[..attribute_name.len() - DEPRECATED_EVENT_PROP_REGEX_SUFFIX.len()]
+            ));
+            return;
+        }
+
+        let event_name = match to_event_name(&attribute_name) {
             Some(name) => name,
             None => return,
         };
@@ -1458,51 +3070,117 @@ impl<'a, 's> Visit<'a> for AnalyzeVisitor<'a, 's> {
         let oxc_ast::ast::JSXAttributeValue::ExpressionContainer(container) = value else {
             return;
         };
-        if !matches!(
-            container.expression,
-            oxc_ast::ast::JSXExpression::ArrowFunctionExpression(_)
-                | oxc_ast::ast::JSXExpression::FunctionExpression(_)
-        ) {
-            return;
-        }
-
-        let (function_span, root_scope) = match &container.expression {
+        match &container.expression {
             oxc_ast::ast::JSXExpression::ArrowFunctionExpression(function) => {
-                (function.span, function.scope_id())
+                let function_span = function.span;
+                let symbol_id = create_symbol_id(
+                    &self.file_id,
+                    &SymbolKind::Event,
+                    source_text(self.source, function_span),
+                );
+                let dependencies = match self
+                    .collect_jsx_symbol_dependencies(&container.expression, function.scope_id())
+                {
+                    Ok(dependencies) => dependencies,
+                    Err(error) => {
+                        self.fail(error);
+                        return;
+                    }
+                };
+                let build = match self.build_symbol(
+                    function_span,
+                    dependencies.captures.clone(),
+                    dependencies.import_spans,
+                    dependencies.local_definitions,
+                    false,
+                ) {
+                    Ok(build) => build,
+                    Err(error) => {
+                        self.fail(error);
+                        return;
+                    }
+                };
+                let owner = self.current_owner_component_key();
+                let base = format!(
+                    "{}:event:{}",
+                    owner.clone().unwrap_or_else(|| "file".to_string()),
+                    event_name
+                );
+                let hmr_key = self.next_owned_symbol_key(base);
+                if owner.is_some() {
+                    self.push_owner_local_symbol_key(&hmr_key);
+                }
+                self.used_helpers.insert(HELPER_EVENT.to_string());
+                self.add_resume_symbol(symbol_id.clone(), hmr_key, owner, SymbolKind::Event, build);
+                self.push_replacement(
+                    container.span.start as usize,
+                    container.span.end as usize,
+                    format!(
+                        "{{{HELPER_EVENT}({}, {}, {})}}",
+                        js_string(&event_name),
+                        js_string(&symbol_id),
+                        Self::build_capture_getter(&dependencies.captures),
+                    ),
+                );
             }
             oxc_ast::ast::JSXExpression::FunctionExpression(function) => {
-                (function.span, function.scope_id())
+                let function_span = function.span;
+                let symbol_id = create_symbol_id(
+                    &self.file_id,
+                    &SymbolKind::Event,
+                    source_text(self.source, function_span),
+                );
+                let dependencies = match self
+                    .collect_jsx_symbol_dependencies(&container.expression, function.scope_id())
+                {
+                    Ok(dependencies) => dependencies,
+                    Err(error) => {
+                        self.fail(error);
+                        return;
+                    }
+                };
+                let build = match self.build_symbol(
+                    function_span,
+                    dependencies.captures.clone(),
+                    dependencies.import_spans,
+                    dependencies.local_definitions,
+                    false,
+                ) {
+                    Ok(build) => build,
+                    Err(error) => {
+                        self.fail(error);
+                        return;
+                    }
+                };
+                let owner = self.current_owner_component_key();
+                let base = format!(
+                    "{}:event:{}",
+                    owner.clone().unwrap_or_else(|| "file".to_string()),
+                    event_name
+                );
+                let hmr_key = self.next_owned_symbol_key(base);
+                if owner.is_some() {
+                    self.push_owner_local_symbol_key(&hmr_key);
+                }
+                self.used_helpers.insert(HELPER_EVENT.to_string());
+                self.add_resume_symbol(symbol_id.clone(), hmr_key, owner, SymbolKind::Event, build);
+                self.push_replacement(
+                    container.span.start as usize,
+                    container.span.end as usize,
+                    format!(
+                        "{{{HELPER_EVENT}({}, {}, {})}}",
+                        js_string(&event_name),
+                        js_string(&symbol_id),
+                        Self::build_capture_getter(&dependencies.captures),
+                    ),
+                );
+            }
+            oxc_ast::ast::JSXExpression::Identifier(identifier) => {
+                self.resolve_plain_event_handler_identifier(&attribute_name, container, identifier);
+            }
+            _ => {
+                self.fail(Self::plain_event_handler_error(&attribute_name, None));
             }
-            _ => unreachable!(),
-        };
-        let symbol_id = create_symbol_id(&self.file_id, &SymbolKind::Event, source_text(self.source, function_span));
-        let (captures, import_spans) = self
-            .collect_jsx_symbol_dependencies(&container.expression, root_scope)
-            .unwrap();
-        let build = self
-            .build_symbol(function_span, captures.clone(), import_spans, false)
-            .unwrap();
-        let owner = self.current_owner_component_key();
-        let base = format!(
-            "{}:event:{}",
-            owner.clone().unwrap_or_else(|| "file".to_string()),
-            event_name
-        );
-        let hmr_key = self.next_owned_symbol_key(base);
-        if owner.is_some() {
-            self.push_owner_local_symbol_key(&hmr_key);
         }
-        self.used_helpers.insert(HELPER_EVENT.to_string());
-        self.add_resume_symbol(symbol_id.clone(), hmr_key, owner, SymbolKind::Event, build);
-        self.push_replacement(
-            container.span.start as usize,
-            container.span.end as usize,
-            format!(
-                "{{{HELPER_EVENT}({}, {}, {})}}",
-                js_string(&event_name),
-                js_string(&symbol_id),
-                Self::build_capture_getter(&captures),
-            ),
-        );
     }
 }
diff --git a/packages/eclipsa/compiler/rust/src/lib.rs b/packages/eclipsa/compiler/rust/src/lib.rs
index 4cfaba6..3334aed 100644
--- a/packages/eclipsa/compiler/rust/src/lib.rs
+++ b/packages/eclipsa/compiler/rust/src/lib.rs
@@ -1,5 +1,6 @@
 mod analyze;
 
+use std::collections::BTreeMap;
 use std::path::Path;
 use std::panic::{self, AssertUnwindSafe};
 
@@ -7,9 +8,11 @@ use napi::Error;
 use napi_derive::napi;
 use oxc_allocator::Allocator;
 use oxc_ast::ast::{
-    CallExpression, ExportDefaultDeclaration, Expression, ImportDeclaration, ImportDeclarationSpecifier,
+    ArrowFunctionExpression, CallExpression, ConditionalExpression, ExportDefaultDeclaration,
+    ExportDefaultDeclarationKind, Expression,
     JSXAttributeItem, JSXAttributeName, JSXAttributeValue, JSXChild, JSXElement, JSXElementName,
-    JSXExpression, JSXFragment, ModuleExportName, Program,
+    JSXExpression, JSXFragment, JSXMemberExpressionObject, LogicalExpression, LogicalOperator, Program,
+    Statement, StaticMemberExpression, VariableDeclarator,
 };
 use oxc_ast_visit::{walk, Visit};
 use oxc_codegen::Codegen;
@@ -25,14 +28,20 @@ const CLIENT_INSERT: &str = "_insert";
 const CLIENT_ATTR: &str = "_attr";
 const CLIENT_CREATE_COMPONENT: &str = "_createComponent";
 const SSR_JSX_DEV: &str = "_jsxDEV";
-const SSR_ATTR: &str = "_ssrAttr";
+const SSR_RAW: &str = "_ssrRaw";
+const SSR_RENDER_ATTR: &str = "_renderSSRAttr";
+const SSR_RENDER_MAP: &str = "_renderSSRMap";
+const SSR_RENDER_VALUE: &str = "_renderSSRValue";
 const SSR_TEMPLATE: &str = "_ssrTemplate";
+const COMPILER_FOR: &str = "__eclipsaFor";
+const COMPILER_SHOW: &str = "__eclipsaShow";
 const HMR_INIT: &str = "_initHot";
 const HMR_DEFINE_COMPONENT: &str = "_defineHotComponent";
 const HMR_CREATE_REGISTRY: &str = "_createHotRegistry";
 const HMR_REGISTRY: &str = "__eclipsa$hotRegistry";
 const FRAGMENT_NAME: &str = "__ECLIPSA_FRAGMENT";
 const DANGEROUSLY_SET_INNER_HTML_PROP: &str = "dangerouslySetInnerHTML";
+const SHOW_VALUE_PARAM: &str = "__e_showValue";
 
 #[derive(Debug, Clone)]
 pub(crate) struct Replacement {
@@ -54,6 +63,75 @@ struct ClientAttrOp {
     value: String,
 }
 
+struct JsxPresenceCollector {
+    found: bool,
+}
+
+impl<'a> Visit<'a> for JsxPresenceCollector {
+    fn visit_jsx_element(&mut self, _element: &JSXElement<'a>) {
+        self.found = true;
+    }
+
+    fn visit_jsx_fragment(&mut self, _fragment: &JSXFragment<'a>) {
+        self.found = true;
+    }
+}
+
+fn expression_contains_jsx<'a>(expression: &Expression<'a>) -> bool {
+    let mut collector = JsxPresenceCollector { found: false };
+    collector.visit_expression(expression);
+    collector.found
+}
+
+fn render_lazy_branch_expression(expression: &str) -> String {
+    format!("({SHOW_VALUE_PARAM}) => ({expression})")
+}
+
+fn render_identity_branch() -> String {
+    format!("({SHOW_VALUE_PARAM}) => ({SHOW_VALUE_PARAM})")
+}
+
+fn get_arrow_expression_body<'a>(expression: &'a ArrowFunctionExpression<'a>) -> Option<&'a Expression<'a>> {
+    if !expression.expression || !expression.body.directives.is_empty() || expression.body.statements.len() != 1 {
+        return None;
+    }
+
+    match &expression.body.statements[0] {
+        Statement::ExpressionStatement(statement) => Some(&statement.expression),
+        _ => None,
+    }
+}
+
+fn unwrap_parenthesized_expression<'a>(mut expression: &'a Expression<'a>) -> &'a Expression<'a> {
+    while let Expression::ParenthesizedExpression(parenthesized) = expression {
+        expression = &parenthesized.expression;
+    }
+    expression
+}
+
+fn is_direct_jsx_map_callback<'a>(callback: &'a ArrowFunctionExpression<'a>) -> bool {
+    let Some(body) = get_arrow_expression_body(callback) else {
+        return false;
+    };
+    matches!(
+        unwrap_parenthesized_expression(body),
+        Expression::JSXElement(_) | Expression::JSXFragment(_)
+    )
+}
+
+fn get_static_map_callee<'a>(call: &'a CallExpression<'a>) -> Option<&'a StaticMemberExpression<'a>> {
+    if call.optional {
+        return None;
+    }
+
+    match &call.callee {
+        Expression::StaticMemberExpression(member) if !member.optional && member.property.name.as_str() == "map" => {
+            Some(member)
+        }
+        _ => None,
+    }
+}
+
 fn to_napi_error(error: String) -> Error {
     Error::from_reason(error)
 }
@@ -171,6 +249,16 @@ fn transform_client(source: &str, id: &str, hmr: bool) -> Result<String, String>
     prefix.push_str(&format!(
         "import {{ createTemplate as {CLIENT_CREATE_TEMPLATE}, insert as {CLIENT_INSERT}, attr as {CLIENT_ATTR}, createComponent as {CLIENT_CREATE_COMPONENT} }} from \"eclipsa/client\";\n"
     ));
+    if compiler.uses_for {
+        prefix.push_str(&format!(
+            "import {{ For as {COMPILER_FOR} }} from \"eclipsa\";\n"
+        ));
+    }
+    if compiler.uses_show {
+        prefix.push_str(&format!(
+            "import {{ Show as {COMPILER_SHOW} }} from \"eclipsa\";\n"
+        ));
+    }
     if hmr {
         prefix.push_str(&format!(
             "import {{ initHot as {HMR_INIT}, defineHotComponent as {HMR_DEFINE_COMPONENT}, createHotRegistry as {HMR_CREATE_REGISTRY} }} from \"eclipsa/dev-client\";\n"
@@ -195,9 +283,19 @@ fn transform_ssr(source: &str, id: &str) -> Result<String, String> {
     let program = parse_program(&allocator, source, source_type, id)?;
     let mut compiler = SsrCompiler::new(source, source_type);
     let transformed = compiler.apply_root_replacements(&program)?;
-    let prefix = format!(
-        "import {{ jsxDEV as {SSR_JSX_DEV}, ssrAttr as {SSR_ATTR}, ssrTemplate as {SSR_TEMPLATE} }} from \"eclipsa/jsx-dev-runtime\";\n"
+    let mut prefix = format!(
+        "import {{ jsxDEV as {SSR_JSX_DEV}, ssrRaw as {SSR_RAW}, ssrTemplate as {SSR_TEMPLATE} }} from \"eclipsa/jsx-dev-runtime\";\nimport {{ renderSSRAttr as {SSR_RENDER_ATTR}, renderSSRMap as {SSR_RENDER_MAP}, renderSSRValue as {SSR_RENDER_VALUE} }} from \"eclipsa\";\n"
     );
+    if compiler.uses_for {
+        prefix.push_str(&format!(
+            "import {{ For as {COMPILER_FOR} }} from \"eclipsa\";\n"
+        ));
+    }
+    if compiler.uses_show {
+        prefix.push_str(&format!(
+            "import {{ Show as {COMPILER_SHOW} }} from \"eclipsa\";\n"
+        ));
+    }
     strip_typescript_syntax(&format!("{prefix}{transformed}"), id)
 }
 
@@ -310,34 +408,58 @@ fn normalize_jsx_text(value: &str) -> Option<String> {
 }
 
 fn is_component_name(name: &str) -> bool {
-    name.chars().next().is_some_and(|ch| ch.is_ascii_uppercase())
+    name.chars().next().is_some_and(|ch| {
+        ch.to_ascii_lowercase() != ch || !ch.is_ascii_alphabetic()
+    }) || name.contains('.')
 }
 
-fn get_jsx_attribute_name(name: &JSXAttributeName<'_>) -> Result<String, String> {
-    match name {
-        JSXAttributeName::Identifier(identifier) => Ok(identifier.name.as_str().to_string()),
-        JSXAttributeName::NamespacedName(name) => {
-            Ok(format!("{}:{}", name.namespace.name.as_str(), name.name.name.as_str()))
+fn jsx_member_expression_object_to_string(object: &JSXMemberExpressionObject<'_>) -> Result<String, String> {
+    match object {
+        JSXMemberExpressionObject::IdentifierReference(identifier) => {
+            Ok(identifier.name.as_str().to_string())
+        }
+        JSXMemberExpressionObject::MemberExpression(expression) => Ok(format!(
+            "{}.{}",
+            jsx_member_expression_object_to_string(&expression.object)?,
+            expression.property.name.as_str(),
+        )),
+        JSXMemberExpressionObject::ThisExpression(_) => {
+            Err("this-based JSX elements are not supported by the optimizer.".to_string())
         }
     }
 }
 
-fn get_jsx_element_name(name: &JSXElementName<'_>) -> Result<String, String> {
+fn jsx_element_name_to_string(name: &JSXElementName<'_>) -> Result<String, String> {
     match name {
         JSXElementName::Identifier(identifier) => Ok(identifier.name.as_str().to_string()),
         JSXElementName::IdentifierReference(identifier) => Ok(identifier.name.as_str().to_string()),
         JSXElementName::NamespacedName(name) => {
             Ok(format!("{}:{}", name.namespace.name.as_str(), name.name.name.as_str()))
         }
-        JSXElementName::MemberExpression(_) => {
-            Err("JSX member expressions are not supported by the optimizer.".to_string())
-        }
+        JSXElementName::MemberExpression(expression) => Ok(format!(
+            "{}.{}",
+            jsx_member_expression_object_to_string(&expression.object)?,
+            expression.property.name.as_str(),
+        )),
         JSXElementName::ThisExpression(_) => {
             Err("this-based JSX elements are not supported by the optimizer.".to_string())
         }
     }
 }
 
+fn get_jsx_attribute_name(name: &JSXAttributeName<'_>) -> Result<String, String> {
+    match name {
+        JSXAttributeName::Identifier(identifier) => Ok(identifier.name.as_str().to_string()),
+        JSXAttributeName::NamespacedName(name) => {
+            Ok(format!("{}:{}", name.namespace.name.as_str(), name.name.name.as_str()))
+        }
+    }
+}
+
+fn get_jsx_element_name(name: &JSXElementName<'_>) -> Result<String, String> {
+    jsx_element_name_to_string(name)
+}
+
 fn try_render_static_attr_expression(name: &str, expression: &Expression<'_>) -> Option<String> {
     match expression {
         Expression::NullLiteral(_) => Some(String::new()),
@@ -362,8 +484,10 @@ fn try_render_static_attr_expression(name: &str, expression: &Expression<'_>) ->
 }
 
 fn event_name_from_prop(name: &str) -> Option<String> {
-    let rest = name.strip_suffix('$')?;
-    let event = rest.strip_prefix("on")?;
+    if name.ends_with('$') {
+        return None;
+    }
+    let event = name.strip_prefix("on")?;
     let mut chars = event.chars();
     let first = chars.next()?;
     if !first.is_ascii_uppercase() {
@@ -375,15 +499,39 @@ fn event_name_from_prop(name: &str) -> Option<String> {
     Some(output)
 }
 
-fn build_node_lookup(base: &str, path: &[usize]) -> (String, String) {
-    let mut marker = base.to_string();
-    let mut parent = base.to_string();
-    for (index, item) in path.iter().enumerate() {
-        marker = format!("{marker}.childNodes[{item}]");
-        if path.len() > 1 && index + 2 == path.len() {
-            parent = marker.clone();
-        }
+fn should_apply_attr_at_runtime(name: &str) -> bool {
+    name == "ref" || name == DANGEROUSLY_SET_INNER_HTML_PROP || event_name_from_prop(name).is_some()
+}
+
+fn collect_node_lookup_paths(path: &[usize]) -> Vec<Vec<usize>> {
+    let mut prefixes = Vec::new();
+    for index in 0..path.len() {
+        prefixes.push(path[..=index].to_vec());
     }
+    prefixes
+}
+
+fn build_node_lookup(
+    base: &str,
+    path: &[usize],
+    cached_nodes: &BTreeMap<Vec<usize>, String>,
+) -> (String, String) {
+    if path.is_empty() {
+        return (base.to_string(), base.to_string());
+    }
+
+    let marker = cached_nodes
+        .get(path)
+        .cloned()
+        .unwrap_or_else(|| base.to_string());
+    let parent = if path.len() > 1 {
+        cached_nodes
+            .get(&path[..path.len() - 1])
+            .cloned()
+            .unwrap_or_else(|| base.to_string())
+    } else {
+        base.to_string()
+    };
     (parent, marker)
 }
 
@@ -392,6 +540,8 @@ struct ClientCompiler<'s> {
     source: &'s str,
     source_type: SourceType,
     templates: Vec<(String, String)>,
+    uses_for: bool,
+    uses_show: bool,
 }
 
 impl<'s> ClientCompiler<'s> {
@@ -401,6 +551,8 @@ impl<'s> ClientCompiler<'s> {
             source,
             source_type,
             templates: Vec::new(),
+            uses_for: false,
+            uses_show: false,
         }
     }
 
@@ -422,8 +574,12 @@ impl<'s> ClientCompiler<'s> {
         &self.source[start..end]
     }
 
-    fn render_nested_jsx_expression(&mut self, expression: &JSXExpression<'_>) -> Result<String, String> {
-        let nested_source = self.slice(expression.span()).to_string();
+    fn render_nested_expression_span(
+        &mut self,
+        span: Span,
+        allow_flow_lowering: bool,
+    ) -> Result<String, String> {
+        let nested_source = self.slice(span).to_string();
         let allocator = Allocator::default();
         let parsed = parse_expression(&allocator, &nested_source, self.source_type, "<expression>")?;
         let mut nested_compiler = ClientCompiler {
@@ -431,8 +587,11 @@ impl<'s> ClientCompiler<'s> {
             source: &nested_source,
             source_type: self.source_type,
             templates: Vec::new(),
+            uses_for: false,
+            uses_show: false,
         };
         let mut collector = ClientExpressionCollector {
+            allow_flow_lowering,
             compiler: &mut nested_compiler,
             error: None,
             jsx_depth: 0,
@@ -446,9 +605,120 @@ impl<'s> ClientCompiler<'s> {
         let transformed = apply_replacements(&nested_source, &mut replacements)?;
         self.next_template_index = nested_compiler.next_template_index;
         self.templates.extend(nested_compiler.templates);
+        self.uses_for |= nested_compiler.uses_for;
+        self.uses_show |= nested_compiler.uses_show;
         Ok(transformed)
     }
 
+    fn render_nested_jsx_expression(
+        &mut self,
+        expression: &JSXExpression<'_>,
+        allow_flow_lowering: bool,
+    ) -> Result<String, String> {
+        self.render_nested_expression_span(expression.span(), allow_flow_lowering)
+    }
+
+    fn render_compiler_show(&mut self, when: String, children: String, fallback: String) -> String {
+        self.uses_show = true;
+        format!(
+            "{CLIENT_CREATE_COMPONENT}({COMPILER_SHOW}, {{ when: {when}, children: {children}, fallback: {fallback} }})"
+        )
+    }
+
+    fn render_compiler_for(
+        &mut self,
+        arr: String,
+        callback: String,
+        key_callback: Option<String>,
+    ) -> String {
+        self.uses_for = true;
+        match key_callback {
+            Some(key_callback) => format!(
+                "{CLIENT_CREATE_COMPONENT}({COMPILER_FOR}, {{ arr: {arr}, fn: {callback}, key: {key_callback} }})"
+            ),
+            None => format!("{CLIENT_CREATE_COMPONENT}({COMPILER_FOR}, {{ arr: {arr}, fn: {callback} }})"),
+        }
+    }
+
+    fn try_render_conditional_show(
+        &mut self,
+        expression: &ConditionalExpression<'_>,
+    ) -> Result<Option<String>, String> {
+        if !expression_contains_jsx(&expression.consequent)
+            && !expression_contains_jsx(&expression.alternate)
+        {
+            return Ok(None);
+        }
+
+        let test = self.render_nested_expression_span(expression.test.span(), true)?;
+        let consequent = self.render_nested_expression_span(expression.consequent.span(), true)?;
+        let alternate = self.render_nested_expression_span(expression.alternate.span(), true)?;
+        Ok(Some(self.render_compiler_show(
+            test,
+            render_lazy_branch_expression(&consequent),
+            render_lazy_branch_expression(&alternate),
+        )))
+    }
+
+    fn try_render_logical_show(
+        &mut self,
+        expression: &LogicalExpression<'_>,
+    ) -> Result<Option<String>, String> {
+        match expression.operator {
+            LogicalOperator::And => {
+                if !expression_contains_jsx(&expression.right) {
+                    return Ok(None);
+                }
+
+                let left = self.render_nested_expression_span(expression.left.span(), true)?;
+                let right = self.render_nested_expression_span(expression.right.span(), true)?;
+                Ok(Some(self.render_compiler_show(
+                    left,
+                    render_lazy_branch_expression(&right),
+                    render_identity_branch(),
+                )))
+            }
+            LogicalOperator::Or => {
+                if !expression_contains_jsx(&expression.left)
+                    && !expression_contains_jsx(&expression.right)
+                {
+                    return Ok(None);
+                }
+
+                let left = self.render_nested_expression_span(expression.left.span(), true)?;
+                let right = self.render_nested_expression_span(expression.right.span(), true)?;
+                Ok(Some(self.render_compiler_show(
+                    left,
+                    render_identity_branch(),
+                    render_lazy_branch_expression(&right),
+                )))
+            }
+            LogicalOperator::Coalesce => Ok(None),
+        }
+    }
+
+    fn try_render_map_for(&mut self, expression: &CallExpression<'_>) -> Result<Option<String>, String> {
+        let Some(member) = get_static_map_callee(expression) else {
+            return Ok(None);
+        };
+        if expression.arguments.len() != 1 {
+            return Ok(None);
+        }
+
+        let callback = match &expression.arguments[0] {
+            oxc_ast::ast::Argument::ArrowFunctionExpression(callback) if is_direct_jsx_map_callback(callback) => callback,
+            _ => return Ok(None),
+        };
+
+        let arr = self.render_nested_expression_span(member.object.span(), true)?;
+        let compiled_callback = self.render_nested_expression_span(callback.span(), true)?;
+        let params = self.slice(callback.params.span).to_string();
+        let key_callback = self
+            .extract_map_callback_key(callback)?
+            .map(|key_expression| format!("{params} => {key_expression}"));
+        Ok(Some(self.render_compiler_for(arr, compiled_callback, key_callback)))
+    }
+
     fn next_template_id(&mut self) -> String {
         let identifier = format!("__eclipsaTemplate{}", self.next_template_index);
         self.next_template_index += 1;
@@ -492,15 +762,53 @@ impl<'s> ClientCompiler<'s> {
         let template_id = self.next_template_id();
         self.templates.push((template_id.clone(), template_html));
         let mut body = format!("var _cloned = {template_id}();");
+        let mut lookup_paths = Vec::new();
+
+        for insert in &inserts {
+            let path = match insert {
+                ClientInsertOp::Apply { path, .. } => path,
+                ClientInsertOp::Component { path, .. } => path,
+            };
+            for prefix in collect_node_lookup_paths(path) {
+                if !lookup_paths.contains(&prefix) {
+                    lookup_paths.push(prefix);
+                }
+            }
+        }
+
+        for attr in &attrs {
+            for prefix in collect_node_lookup_paths(&attr.path) {
+                if !lookup_paths.contains(&prefix) {
+                    lookup_paths.push(prefix);
+                }
+            }
+        }
+
+        lookup_paths.sort_by(|left, right| left.len().cmp(&right.len()).then(left.cmp(right)));
+
+        let mut cached_nodes = BTreeMap::new();
+        for (index, path) in lookup_paths.iter().enumerate() {
+            let variable = format!("__eclipsaNode{index}");
+            let lookup = if path.len() == 1 {
+                format!("_cloned.childNodes[{}]", path[0])
+            } else {
+                let parent = cached_nodes
+                    .get(&path[..path.len() - 1])
+                    .expect("parent lookup should be cached before children");
+                format!("{parent}.childNodes[{}]", path[path.len() - 1])
+            };
+            body.push_str(&format!("var {variable} = {lookup};"));
+            cached_nodes.insert(path.clone(), variable);
+        }
 
         for insert in inserts {
             match insert {
                 ClientInsertOp::Apply { expr, path } => {
-                    let (parent, marker) = build_node_lookup("_cloned", &path);
+                    let (parent, marker) = build_node_lookup("_cloned", &path, &cached_nodes);
                     body.push_str(&format!("{CLIENT_INSERT}(() => {expr}, {parent}, {marker});"));
                 }
                 ClientInsertOp::Component { component, path, props } => {
-                    let (parent, marker) = build_node_lookup("_cloned", &path);
+                    let (parent, marker) = build_node_lookup("_cloned", &path, &cached_nodes);
                     body.push_str(&format!(
                         "{CLIENT_INSERT}({CLIENT_CREATE_COMPONENT}({component}, {props}), {parent}, {marker});"
                     ));
@@ -509,7 +817,7 @@ impl<'s> ClientCompiler<'s> {
         }
 
         for attr in attrs {
-            let (_, marker) = build_node_lookup("_cloned", &attr.path);
+            let (_, marker) = build_node_lookup("_cloned", &attr.path, &cached_nodes);
             body.push_str(&format!(
                 "{CLIENT_ATTR}({marker}, {}, () => {});",
                 js_string(&attr.name),
@@ -550,6 +858,20 @@ impl<'s> ClientCompiler<'s> {
         Ok(None)
     }
 
+    fn extract_map_callback_key(
+        &mut self,
+        callback: &ArrowFunctionExpression<'_>,
+    ) -> Result<Option<String>, String> {
+        let Some(body) = get_arrow_expression_body(callback) else {
+            return Ok(None);
+        };
+
+        match unwrap_parenthesized_expression(body) {
+            Expression::JSXElement(element) => self.extract_key(&element.opening_element.attributes),
+            _ => Ok(None),
+        }
+    }
+
     fn render_component_props(
         &mut self,
         attributes: &oxc_allocator::Vec<'_, JSXAttributeItem<'_>>,
@@ -583,9 +905,10 @@ impl<'s> ClientCompiler<'s> {
                         }
                         JSXAttributeValue::ExpressionContainer(container) => {
                             let JSXExpression::EmptyExpression(_) = &container.expression else {
-                                let expression = self.render_jsx_expression(&container.expression, true)?;
+                                let expression =
+                                    self.render_jsx_expression(&container.expression, true)?;
                                 if is_key {
-                                    key = Some(self.render_jsx_expression(&container.expression, false)?);
+                                    key = Some(self.render_jsx_expression(&container.expression, true)?);
                                 }
                                 if let Some(expression) = self.try_render_static_component_prop(&container.expression)? {
                                     props.push(format!("{property_key}: {expression}"));
@@ -661,7 +984,11 @@ impl<'s> ClientCompiler<'s> {
         Ok(output)
     }
 
-    fn render_jsx_expression(&mut self, expression: &JSXExpression<'_>, defer_jsx: bool) -> Result<String, String> {
+    fn render_jsx_expression(
+        &mut self,
+        expression: &JSXExpression<'_>,
+        defer_jsx: bool,
+    ) -> Result<String, String> {
         match expression {
             JSXExpression::EmptyExpression(_) => Ok(String::new()),
             JSXExpression::JSXElement(element) => {
@@ -680,7 +1007,7 @@ impl<'s> ClientCompiler<'s> {
                     Ok(compiled)
                 }
             }
-            _ => self.render_nested_jsx_expression(expression),
+            _ => self.render_nested_jsx_expression(expression, !defer_jsx),
         }
     }
 
@@ -752,6 +1079,7 @@ impl<'s> ClientCompiler<'s> {
         attrs: &mut Vec<ClientAttrOp>,
     ) -> Result<String, String> {
         let name = get_jsx_element_name(&element.opening_element.name)?;
+        let mut html = format!("<{name}");
 
         for attribute in &element.opening_element.attributes {
             match attribute {
@@ -760,6 +1088,23 @@ impl<'s> ClientCompiler<'s> {
                 }
                 JSXAttributeItem::Attribute(attribute) => {
                     let attr_name = get_jsx_attribute_name(&attribute.name)?;
+                    if !should_apply_attr_at_runtime(&attr_name) {
+                        match &attribute.value {
+                            None => {
+                                html.push_str(&format!(" {attr_name}"));
+                                continue;
+                            }
+                            Some(JSXAttributeValue::StringLiteral(value)) => {
+                                html.push_str(&format!(
+                                    " {attr_name}=\"{}\"",
+                                    escape_attr(value.value.as_str())
+                                ));
+                                continue;
+                            }
+                            _ => {}
+                        }
+                    }
+
                     let value = match &attribute.value {
                         None => "true".to_string(),
                         Some(JSXAttributeValue::StringLiteral(value)) => js_string(value.value.as_str()),
@@ -777,8 +1122,11 @@ impl<'s> ClientCompiler<'s> {
             }
         }
 
+        html.push('>');
         let children = self.render_fragment_children(&element.children, path, inserts, attrs)?;
-        Ok(format!("<{name}>{children}</{name}>"))
+        html.push_str(&children);
+        html.push_str(&format!("</{name}>"));
+        Ok(html)
     }
 }
 
@@ -789,6 +1137,7 @@ struct ClientRootCollector<'c, 's> {
 }
 
 struct ClientExpressionCollector<'c, 's> {
+    allow_flow_lowering: bool,
     compiler: &'c mut ClientCompiler<'s>,
     error: Option<String>,
     jsx_depth: usize,
@@ -824,6 +1173,48 @@ impl<'a, 'c, 's> Visit<'a> for ClientRootCollector<'c, 's> {
 }
 
 impl<'a, 'c, 's> Visit<'a> for ClientExpressionCollector<'c, 's> {
+    fn visit_call_expression(&mut self, expression: &CallExpression<'a>) {
+        if self.error.is_some() {
+            return;
+        }
+        if self.allow_flow_lowering && self.jsx_depth == 0 {
+            match self.compiler.try_render_map_for(expression) {
+                Ok(Some(code)) => {
+                    let (start, end) = span_range(expression.span);
+                    self.replacements.push(Replacement { start, end, code });
+                    return;
+                }
+                Ok(None) => {}
+                Err(error) => {
+                    self.error = Some(error);
+                    return;
+                }
+            }
+        }
+        walk::walk_call_expression(self, expression);
+    }
+
+    fn visit_conditional_expression(&mut self, expression: &ConditionalExpression<'a>) {
+        if self.error.is_some() {
+            return;
+        }
+        if self.allow_flow_lowering && self.jsx_depth == 0 {
+            match self.compiler.try_render_conditional_show(expression) {
+                Ok(Some(code)) => {
+                    let (start, end) = span_range(expression.span);
+                    self.replacements.push(Replacement { start, end, code });
+                    return;
+                }
+                Ok(None) => {}
+                Err(error) => {
+                    self.error = Some(error);
+                    return;
+                }
+            }
+        }
+        walk::walk_conditional_expression(self, expression);
+    }
+
     fn visit_jsx_element(&mut self, element: &JSXElement<'a>) {
         if self.error.is_some() {
             return;
@@ -845,6 +1236,27 @@ impl<'a, 'c, 's> Visit<'a> for ClientExpressionCollector<'c, 's> {
         self.jsx_depth -= 1;
     }
 
+    fn visit_logical_expression(&mut self, expression: &LogicalExpression<'a>) {
+        if self.error.is_some() {
+            return;
+        }
+        if self.allow_flow_lowering && self.jsx_depth == 0 {
+            match self.compiler.try_render_logical_show(expression) {
+                Ok(Some(code)) => {
+                    let (start, end) = span_range(expression.span);
+                    self.replacements.push(Replacement { start, end, code });
+                    return;
+                }
+                Ok(None) => {}
+                Err(error) => {
+                    self.error = Some(error);
+                    return;
+                }
+            }
+        }
+        walk::walk_logical_expression(self, expression);
+    }
+
     fn visit_jsx_fragment(&mut self, fragment: &JSXFragment<'a>) {
         if self.error.is_some() {
             return;
@@ -870,11 +1282,18 @@ impl<'a, 'c, 's> Visit<'a> for ClientExpressionCollector<'c, 's> {
 struct SsrCompiler<'s> {
     source: &'s str,
     source_type: SourceType,
+    uses_for: bool,
+    uses_show: bool,
 }
 
 impl<'s> SsrCompiler<'s> {
     fn new(source: &'s str, source_type: SourceType) -> Self {
-        Self { source, source_type }
+        Self {
+            source,
+            source_type,
+            uses_for: false,
+            uses_show: false,
+        }
     }
 
     fn apply_root_replacements<'a>(&mut self, program: &Program<'a>) -> Result<String, String> {
@@ -895,15 +1314,22 @@ impl<'s> SsrCompiler<'s> {
         &self.source[start..end]
     }
 
-    fn render_nested_jsx_expression(&mut self, expression: &JSXExpression<'_>) -> Result<String, String> {
-        let nested_source = self.slice(expression.span()).to_string();
+    fn render_nested_expression_span(
+        &mut self,
+        span: Span,
+        allow_flow_lowering: bool,
+    ) -> Result<String, String> {
+        let nested_source = self.slice(span).to_string();
         let allocator = Allocator::default();
         let parsed = parse_expression(&allocator, &nested_source, self.source_type, "<expression>")?;
         let mut nested_compiler = SsrCompiler {
             source: &nested_source,
             source_type: self.source_type,
+            uses_for: false,
+            uses_show: false,
         };
         let mut collector = SsrExpressionCollector {
+            allow_flow_lowering,
             compiler: &mut nested_compiler,
             error: None,
             jsx_depth: 0,
@@ -914,30 +1340,205 @@ impl<'s> SsrCompiler<'s> {
             return Err(error);
         }
         let mut replacements = collector.replacements;
-        apply_replacements(&nested_source, &mut replacements)
+        let transformed = apply_replacements(&nested_source, &mut replacements)?;
+        self.uses_for |= nested_compiler.uses_for;
+        self.uses_show |= nested_compiler.uses_show;
+        Ok(transformed)
+    }
+
+    fn render_nested_jsx_expression(
+        &mut self,
+        expression: &JSXExpression<'_>,
+        allow_flow_lowering: bool,
+    ) -> Result<String, String> {
+        self.render_nested_expression_span(expression.span(), allow_flow_lowering)
+    }
+
+    fn render_compiler_show(&mut self, when: String, children: String, fallback: String) -> String {
+        self.uses_show = true;
+        format!(
+            "{SSR_JSX_DEV}({COMPILER_SHOW}, {{ \"when\": {when}, \"children\": {children}, \"fallback\": {fallback} }}, null, false, {{}})"
+        )
+    }
+
+    fn render_compiler_for(&mut self, arr: String, callback: String) -> String {
+        self.uses_for = true;
+        format!(
+            "{SSR_JSX_DEV}({COMPILER_FOR}, {{ \"arr\": {arr}, \"fn\": {callback} }}, null, false, {{}})"
+        )
+    }
+
+    fn try_render_conditional_show(
+        &mut self,
+        expression: &ConditionalExpression<'_>,
+    ) -> Result<Option<String>, String> {
+        if !expression_contains_jsx(&expression.consequent)
+            && !expression_contains_jsx(&expression.alternate)
+        {
+            return Ok(None);
+        }
+
+        let test = self.render_nested_expression_span(expression.test.span(), true)?;
+        let consequent = self.render_nested_expression_span(expression.consequent.span(), true)?;
+        let alternate = self.render_nested_expression_span(expression.alternate.span(), true)?;
+        Ok(Some(self.render_compiler_show(
+            test,
+            render_lazy_branch_expression(&consequent),
+            render_lazy_branch_expression(&alternate),
+        )))
     }
 
-    fn render_jsx_expression(&mut self, expression: &JSXExpression<'_>) -> Result<String, String> {
+    fn try_render_logical_show(
+        &mut self,
+        expression: &LogicalExpression<'_>,
+    ) -> Result<Option<String>, String> {
+        match expression.operator {
+            LogicalOperator::And => {
+                if !expression_contains_jsx(&expression.right) {
+                    return Ok(None);
+                }
+
+                let left = self.render_nested_expression_span(expression.left.span(), true)?;
+                let right = self.render_nested_expression_span(expression.right.span(), true)?;
+                Ok(Some(self.render_compiler_show(
+                    left,
+                    render_lazy_branch_expression(&right),
+                    render_identity_branch(),
+                )))
+            }
+            LogicalOperator::Or => {
+                if !expression_contains_jsx(&expression.left)
+                    && !expression_contains_jsx(&expression.right)
+                {
+                    return Ok(None);
+                }
+
+                let left = self.render_nested_expression_span(expression.left.span(), true)?;
+                let right = self.render_nested_expression_span(expression.right.span(), true)?;
+                Ok(Some(self.render_compiler_show(
+                    left,
+                    render_identity_branch(),
+                    render_lazy_branch_expression(&right),
+                )))
+            }
+            LogicalOperator::Coalesce => Ok(None),
+        }
+    }
+
+    fn try_render_map_for(&mut self, expression: &CallExpression<'_>) -> Result<Option<String>, String> {
+        let Some(member) = get_static_map_callee(expression) else {
+            return Ok(None);
+        };
+        if expression.arguments.len() != 1 {
+            return Ok(None);
+        }
+
+        let callback = match &expression.arguments[0] {
+            oxc_ast::ast::Argument::ArrowFunctionExpression(callback) if is_direct_jsx_map_callback(callback) => callback,
+            _ => return Ok(None),
+        };
+
+        let arr = self.render_nested_expression_span(member.object.span(), true)?;
+        let compiled_callback = self.render_nested_expression_span(callback.span(), true)?;
+        Ok(Some(self.render_compiler_for(arr, compiled_callback)))
+    }
+
+    fn render_expression_to_ssr_string(
+        &mut self,
+        expression: &Expression<'_>,
+        allow_flow_lowering: bool,
+    ) -> Result<String, String> {
+        match unwrap_parenthesized_expression(expression) {
+            Expression::JSXElement(element) => {
+                if let Some(fast_path) = self.try_render_fast_path_element_string(element)? {
+                    Ok(fast_path)
+                } else {
+                    Ok(format!(
+                        "{SSR_RENDER_VALUE}({})",
+                        self.render_root_element(element)?
+                    ))
+                }
+            }
+            Expression::JSXFragment(fragment) => {
+                if let Some(fast_path) = self.try_render_fast_path_fragment_string(fragment)? {
+                    Ok(fast_path)
+                } else {
+                    Ok(format!(
+                        "{SSR_RENDER_VALUE}({})",
+                        self.render_root_fragment(fragment)?
+                    ))
+                }
+            }
+            Expression::CallExpression(call) => {
+                if let Some(map_string) = self.try_render_map_string(call, allow_flow_lowering)? {
+                    Ok(map_string)
+                } else {
+                    Ok(format!(
+                        "{SSR_RENDER_VALUE}({})",
+                        self.render_nested_expression_span(expression.span(), allow_flow_lowering)?
+                    ))
+                }
+            }
+            _ => Ok(format!(
+                "{SSR_RENDER_VALUE}({})",
+                self.render_nested_expression_span(expression.span(), allow_flow_lowering)?
+            )),
+        }
+    }
+
+    fn try_render_map_string(
+        &mut self,
+        expression: &CallExpression<'_>,
+        allow_flow_lowering: bool,
+    ) -> Result<Option<String>, String> {
+        let Some(member) = get_static_map_callee(expression) else {
+            return Ok(None);
+        };
+        if expression.arguments.len() != 1 {
+            return Ok(None);
+        }
+
+        let callback = match &expression.arguments[0] {
+            oxc_ast::ast::Argument::ArrowFunctionExpression(callback) if is_direct_jsx_map_callback(callback) => callback,
+            _ => return Ok(None),
+        };
+
+        let Some(body) = get_arrow_expression_body(callback) else {
+            return Ok(None);
+        };
+
+        let arr = self.render_nested_expression_span(member.object.span(), allow_flow_lowering)?;
+        let params = self.slice(callback.params.span).to_string();
+        let body_string =
+            self.render_expression_to_ssr_string(unwrap_parenthesized_expression(body), allow_flow_lowering)?;
+        Ok(Some(format!("{SSR_RENDER_MAP}({arr}, {params} => {body_string})")))
+    }
+
+    fn render_jsx_expression(
+        &mut self,
+        expression: &JSXExpression<'_>,
+        allow_flow_lowering: bool,
+    ) -> Result<String, String> {
         match expression {
             JSXExpression::EmptyExpression(_) => Ok(String::new()),
             JSXExpression::JSXElement(element) => self.render_root_element(element),
             JSXExpression::JSXFragment(fragment) => self.render_root_fragment(fragment),
-            _ => self.render_nested_jsx_expression(expression),
+            _ => self.render_nested_jsx_expression(expression, allow_flow_lowering),
         }
     }
 
     fn render_root_element(&mut self, element: &JSXElement<'_>) -> Result<String, String> {
-        if let Some(fast_path) = self.try_render_fast_path_element(element)? {
-            return Ok(fast_path);
+        if let Some(fast_path) = self.try_render_fast_path_element_string(element)? {
+            return Ok(format!("{SSR_RAW}({fast_path})"));
         }
         self.render_generic_element(element)
     }
 
     fn render_root_fragment(&mut self, fragment: &JSXFragment<'_>) -> Result<String, String> {
-        if let Some(fast_path) = self.try_render_fast_path_fragment(fragment)? {
-            return Ok(fast_path);
+        if let Some(fast_path) = self.try_render_fast_path_fragment_string(fragment)? {
+            return Ok(format!("{SSR_RAW}({fast_path})"));
         }
-        let children = self.render_children_array(&fragment.children)?;
+        let children = self.render_children_array(&fragment.children, true)?;
         Ok(format!(
             "{SSR_JSX_DEV}({}, {{ \"children\": [{}] }}, null, false, {{}})",
             js_string(FRAGMENT_NAME),
@@ -988,7 +1589,7 @@ impl<'s> SsrCompiler<'s> {
                             if let JSXExpression::EmptyExpression(_) = &container.expression {
                                 continue;
                             }
-                            let expression = self.render_jsx_expression(&container.expression)?;
+                            let expression = self.render_jsx_expression(&container.expression, false)?;
                             if is_key {
                                 key = Some(expression.clone());
                             }
@@ -1025,7 +1626,7 @@ impl<'s> SsrCompiler<'s> {
             }
         }
 
-        let children_array = self.render_children_array(children)?;
+        let children_array = self.render_children_array(children, false)?;
         props.push(format!("\"children\": [{}]", children_array.join(", ")));
 
         Ok((format!("{{ {} }}", props.join(", ")), key))
@@ -1034,6 +1635,7 @@ impl<'s> SsrCompiler<'s> {
     fn render_children_array(
         &mut self,
         children: &oxc_allocator::Vec<'_, JSXChild<'_>>,
+        allow_flow_lowering: bool,
     ) -> Result<Vec<String>, String> {
         let mut output = Vec::new();
         for child in children {
@@ -1047,17 +1649,25 @@ impl<'s> SsrCompiler<'s> {
                     if let JSXExpression::EmptyExpression(_) = &container.expression {
                         continue;
                     }
-                    output.push(self.render_jsx_expression(&container.expression)?);
+                    output.push(self.render_jsx_expression(
+                        &container.expression,
+                        allow_flow_lowering,
+                    )?);
                 }
                 JSXChild::Element(element) => output.push(self.render_root_element(element)?),
-                JSXChild::Fragment(fragment) => output.extend(self.render_children_array(&fragment.children)?),
+                JSXChild::Fragment(fragment) => {
+                    output.extend(self.render_children_array(&fragment.children, allow_flow_lowering)?)
+                }
                 JSXChild::Spread(_) => {}
             }
         }
         Ok(output)
     }
 
-    fn try_render_fast_path_element(&mut self, element: &JSXElement<'_>) -> Result<Option<String>, String> {
+    fn try_render_fast_path_element_string(
+        &mut self,
+        element: &JSXElement<'_>,
+    ) -> Result<Option<String>, String> {
         let name = get_jsx_element_name(&element.opening_element.name)?;
         if is_component_name(&name) || name == "body" {
             return Ok(None);
@@ -1071,6 +1681,9 @@ impl<'s> SsrCompiler<'s> {
                 return Ok(None);
             };
             let attr_name = get_jsx_attribute_name(&attribute.name)?;
+            if attr_name == "key" {
+                continue;
+            }
             if attr_name == "ref"
                 || attr_name == DANGEROUSLY_SET_INNER_HTML_PROP
                 || event_name_from_prop(&attr_name).is_some()
@@ -1094,7 +1707,7 @@ impl<'s> SsrCompiler<'s> {
                     if let JSXExpression::EmptyExpression(_) = &container.expression {
                         continue;
                     }
-                    let expression = self.render_jsx_expression(&container.expression)?;
+                    let expression = self.render_jsx_expression(&container.expression, true)?;
                     if let Some(static_value) = match &container.expression {
                         JSXExpression::BooleanLiteral(value) => {
                             if value.value {
@@ -1113,7 +1726,10 @@ impl<'s> SsrCompiler<'s> {
                     } {
                         strings.last_mut().unwrap().push_str(&static_value);
                     } else {
-                        values.push(format!("{SSR_ATTR}({}, {expression})", js_string(&attr_name)));
+                        values.push(format!(
+                            "{SSR_RENDER_ATTR}({}, {expression})",
+                            js_string(&attr_name)
+                        ));
                         strings.push(String::new());
                     }
                 }
@@ -1131,10 +1747,13 @@ impl<'s> SsrCompiler<'s> {
         }
         strings.last_mut().unwrap().push_str(&format!("</{name}>"));
 
-        Ok(Some(render_ssr_template_call(&strings, &values)))
+        Ok(Some(render_ssr_string_expression(&strings, &values)))
     }
 
-    fn try_render_fast_path_fragment(&mut self, fragment: &JSXFragment<'_>) -> Result<Option<String>, String> {
+    fn try_render_fast_path_fragment_string(
+        &mut self,
+        fragment: &JSXFragment<'_>,
+    ) -> Result<Option<String>, String> {
         let mut strings = vec![String::new()];
         let mut values = Vec::new();
         for child in &fragment.children {
@@ -1142,7 +1761,7 @@ impl<'s> SsrCompiler<'s> {
                 return Ok(None);
             }
         }
-        Ok(Some(render_ssr_template_call(&strings, &values)))
+        Ok(Some(render_ssr_string_expression(&strings, &values)))
     }
 
     fn append_fast_child(
@@ -1162,6 +1781,13 @@ impl<'s> SsrCompiler<'s> {
                 if let JSXExpression::EmptyExpression(_) = &container.expression {
                     return Ok(true);
                 }
+                if let Expression::CallExpression(call) = container.expression.to_expression() {
+                    if let Some(map_string) = self.try_render_map_string(call, true)? {
+                        values.push(map_string);
+                        strings.push(String::new());
+                        return Ok(true);
+                    }
+                }
                 if let Some(static_text) = match &container.expression {
                     JSXExpression::BooleanLiteral(value) => Some(escape_text(&value.value.to_string())),
                     JSXExpression::NullLiteral(_) => Some(String::new()),
@@ -1172,27 +1798,36 @@ impl<'s> SsrCompiler<'s> {
                 } {
                     strings.last_mut().unwrap().push_str(&static_text);
                 } else {
-                    values.push(self.render_jsx_expression(&container.expression)?);
+                    values.push(format!(
+                        "{SSR_RENDER_VALUE}({})",
+                        self.render_jsx_expression(&container.expression, true)?
+                    ));
                     strings.push(String::new());
                 }
                 Ok(true)
             }
             JSXChild::Element(element) => {
-                if let Some(fast_path) = self.try_render_fast_path_element(element)? {
+                if let Some(fast_path) = self.try_render_fast_path_element_string(element)? {
                     values.push(fast_path);
                 } else {
-                    values.push(self.render_generic_element(element)?);
+                    values.push(format!(
+                        "{SSR_RENDER_VALUE}({})",
+                        self.render_generic_element(element)?
+                    ));
                 }
                 strings.push(String::new());
                 Ok(true)
             }
             JSXChild::Fragment(fragment) => {
-                if let Some(fast_path) = self.try_render_fast_path_fragment(fragment)? {
+                if let Some(fast_path) = self.try_render_fast_path_fragment_string(fragment)? {
                     values.push(fast_path);
                     strings.push(String::new());
                     return Ok(true);
                 }
-                values.push(self.render_root_fragment(fragment)?);
+                values.push(format!(
+                    "{SSR_RENDER_VALUE}({})",
+                    self.render_root_fragment(fragment)?
+                ));
                 strings.push(String::new());
                 Ok(true)
             }
@@ -1201,6 +1836,23 @@ impl<'s> SsrCompiler<'s> {
     }
 }
 
+fn render_ssr_string_expression(strings: &[String], values: &[String]) -> String {
+    let mut parts = Vec::new();
+    for (index, string_part) in strings.iter().enumerate() {
+        if !string_part.is_empty() {
+            parts.push(js_string(string_part));
+        }
+        if let Some(value_part) = values.get(index) {
+            parts.push(value_part.clone());
+        }
+    }
+    if parts.is_empty() {
+        js_string("")
+    } else {
+        parts.join(" + ")
+    }
+}
+
 struct SsrRootCollector<'c, 's> {
     compiler: &'c mut SsrCompiler<'s>,
     jsx_depth: usize,
@@ -1208,6 +1860,7 @@ struct SsrRootCollector<'c, 's> {
 }
 
 struct SsrExpressionCollector<'c, 's> {
+    allow_flow_lowering: bool,
     compiler: &'c mut SsrCompiler<'s>,
     error: Option<String>,
     jsx_depth: usize,
@@ -1243,6 +1896,48 @@ impl<'a, 'c, 's> Visit<'a> for SsrRootCollector<'c, 's> {
 }
 
 impl<'a, 'c, 's> Visit<'a> for SsrExpressionCollector<'c, 's> {
+    fn visit_call_expression(&mut self, expression: &CallExpression<'a>) {
+        if self.error.is_some() {
+            return;
+        }
+        if self.allow_flow_lowering && self.jsx_depth == 0 {
+            match self.compiler.try_render_map_for(expression) {
+                Ok(Some(code)) => {
+                    let (start, end) = span_range(expression.span);
+                    self.replacements.push(Replacement { start, end, code });
+                    return;
+                }
+                Ok(None) => {}
+                Err(error) => {
+                    self.error = Some(error);
+                    return;
+                }
+            }
+        }
+        walk::walk_call_expression(self, expression);
+    }
+
+    fn visit_conditional_expression(&mut self, expression: &ConditionalExpression<'a>) {
+        if self.error.is_some() {
+            return;
+        }
+        if self.allow_flow_lowering && self.jsx_depth == 0 {
+            match self.compiler.try_render_conditional_show(expression) {
+                Ok(Some(code)) => {
+                    let (start, end) = span_range(expression.span);
+                    self.replacements.push(Replacement { start, end, code });
+                    return;
+                }
+                Ok(None) => {}
+                Err(error) => {
+                    self.error = Some(error);
+                    return;
+                }
+            }
+        }
+        walk::walk_conditional_expression(self, expression);
+    }
+
     fn visit_jsx_element(&mut self, element: &JSXElement<'a>) {
         if self.error.is_some() {
             return;
@@ -1264,6 +1959,27 @@ impl<'a, 'c, 's> Visit<'a> for SsrExpressionCollector<'c, 's> {
         self.jsx_depth -= 1;
     }
 
+    fn visit_logical_expression(&mut self, expression: &LogicalExpression<'a>) {
+        if self.error.is_some() {
+            return;
+        }
+        if self.allow_flow_lowering && self.jsx_depth == 0 {
+            match self.compiler.try_render_logical_show(expression) {
+                Ok(Some(code)) => {
+                    let (start, end) = span_range(expression.span);
+                    self.replacements.push(Replacement { start, end, code });
+                    return;
+                }
+                Ok(None) => {}
+                Err(error) => {
+                    self.error = Some(error);
+                    return;
+                }
+            }
+        }
+        walk::walk_logical_expression(self, expression);
+    }
+
     fn visit_jsx_fragment(&mut self, fragment: &JSXFragment<'a>) {
         if self.error.is_some() {
             return;
@@ -1286,16 +2002,14 @@ impl<'a, 'c, 's> Visit<'a> for SsrExpressionCollector<'c, 's> {
     }
 }
 
-fn render_ssr_template_call(strings: &[String], values: &[String]) -> String {
-    let strings_array = strings
-        .iter()
-        .map(|entry| js_string(entry))
-        .collect::<Vec<_>>()
-        .join(", ");
-    if values.is_empty() {
-        format!("{SSR_TEMPLATE}([{strings_array}])")
-    } else {
-        format!("{SSR_TEMPLATE}([{strings_array}], {})", values.join(", "))
+fn component_expression_span(expression: &Expression<'_>) -> Option<Span> {
+    match expression {
+        Expression::ArrowFunctionExpression(function) => Some(function.span),
+        Expression::FunctionExpression(function) => Some(function.span),
+        Expression::ParenthesizedExpression(expression) => {
+            component_expression_span(&expression.expression)
+        }
+        _ => None,
     }
 }
 
@@ -1303,7 +2017,6 @@ fn wrap_hot_components(source: &str, id: &str) -> Result<String, String> {
     let allocator = Allocator::default();
     let program = parse_program(&allocator, source, source_type_for(id), id)?;
     let mut collector = HmrCollector {
-        component_local_name: None,
         export_default_depth: 0,
         replacements: Vec::new(),
         source,
@@ -1313,7 +2026,6 @@ fn wrap_hot_components(source: &str, id: &str) -> Result<String, String> {
 }
 
 struct HmrCollector<'s> {
-    component_local_name: Option<String>,
     export_default_depth: usize,
     replacements: Vec<Replacement>,
     source: &'s str,
@@ -1324,50 +2036,59 @@ impl<'s> HmrCollector<'s> {
         let (start, end) = span_range(span);
         &self.source[start..end]
     }
-}
 
-impl<'a, 's> Visit<'a> for HmrCollector<'s> {
-    fn visit_import_declaration(&mut self, declaration: &ImportDeclaration<'a>) {
-        if declaration.source.value.as_str() == "eclipsa" {
-            if let Some(specifiers) = &declaration.specifiers {
-                for specifier in specifiers {
-                    let ImportDeclarationSpecifier::ImportSpecifier(specifier) = specifier else {
-                        continue;
-                    };
-                    let imported_name = match &specifier.imported {
-                        ModuleExportName::IdentifierName(name) => name.name.as_str(),
-                        ModuleExportName::IdentifierReference(name) => name.name.as_str(),
-                        ModuleExportName::StringLiteral(name) => name.value.as_str(),
-                    };
-                    if imported_name == "component$" {
-                        self.component_local_name = Some(specifier.local.name.as_str().to_string());
-                    }
-                }
-            }
-        }
-        walk::walk_import_declaration(self, declaration);
+    fn push_component_replacement(&mut self, span: Span, name: String) {
+        let original = self.slice(span);
+        let code = format!(
+            "{HMR_DEFINE_COMPONENT}({original}, {{ registry: {HMR_REGISTRY}, name: {name} }})"
+        );
+        let (start, end) = span_range(span);
+        self.replacements.push(Replacement { start, end, code });
     }
+}
 
+impl<'a, 's> Visit<'a> for HmrCollector<'s> {
     fn visit_export_default_declaration(&mut self, declaration: &ExportDefaultDeclaration<'a>) {
         self.export_default_depth += 1;
         walk::walk_export_default_declaration(self, declaration);
         self.export_default_depth -= 1;
+
+        let span = match &declaration.declaration {
+            ExportDefaultDeclarationKind::ArrowFunctionExpression(function) => Some(function.span),
+            ExportDefaultDeclarationKind::FunctionExpression(function)
+            | ExportDefaultDeclarationKind::FunctionDeclaration(function) => Some(function.span),
+            ExportDefaultDeclarationKind::ParenthesizedExpression(expression) => {
+                component_expression_span(&expression.expression)
+            }
+            _ => None,
+        };
+        if let Some(span) = span {
+            self.push_component_replacement(span, js_string("default"));
+        }
+    }
+
+    fn visit_variable_declarator(&mut self, declarator: &VariableDeclarator<'a>) {
+        walk::walk_variable_declarator(self, declarator);
+        let oxc_ast::ast::BindingPatternKind::BindingIdentifier(identifier) = &declarator.id.kind else {
+            return;
+        };
+        if !is_component_name(identifier.name.as_str()) {
+            return;
+        }
+        let Some(init) = &declarator.init else {
+            return;
+        };
+        let span = component_expression_span(init);
+        if let Some(span) = span {
+            self.push_component_replacement(span, js_string(identifier.name.as_str()));
+        }
     }
 
     fn visit_call_expression(&mut self, expression: &CallExpression<'a>) {
         if let Expression::Identifier(identifier) = &expression.callee {
-            if self.component_local_name.as_deref() == Some(identifier.name.as_str()) {
-                let original = self.slice(expression.span);
-                let name = if self.export_default_depth > 0 {
-                    js_string("default")
-                } else {
-                    "null".to_string()
-                };
-                let code = format!(
-                    "{HMR_DEFINE_COMPONENT}({original}, {{ registry: {HMR_REGISTRY}, name: {name} }})"
-                );
-                let (start, end) = span_range(expression.span);
-                self.replacements.push(Replacement { start, end, code });
+            if identifier.name.as_str() == "__eclipsaComponent" {
+                let name = if self.export_default_depth > 0 { js_string("default") } else { "null".to_string() };
+                self.push_component_replacement(expression.span, name);
                 return;
             }
         }
diff --git a/packages/eclipsa/compiler/ssr/mod.test.ts b/packages/eclipsa/compiler/ssr/mod.test.ts
index ddfdbcb..e3418b8 100644
--- a/packages/eclipsa/compiler/ssr/mod.test.ts
+++ b/packages/eclipsa/compiler/ssr/mod.test.ts
@@ -2,25 +2,27 @@ import { describe, expect, it } from 'vitest'
 import { compileSSRModule } from './mod.ts'
 
 describe('compileSSRModule', () => {
-  it('emits SSR template fast paths for intrinsic JSX trees', async () => {
+  it('emits SSR raw-string fast paths for intrinsic JSX trees', async () => {
     const resultCode = await compileSSRModule(
       `const view = <section class="card" data-id={id}><h1>{title}</h1><p>hello</p></section>`,
       'mod.test.tsx',
     )
 
-    expect(resultCode).toContain('ssrTemplate([')
-    expect(resultCode).toContain('ssrAttr("data-id", id)')
+    expect(resultCode).toContain('ssrRaw(')
+    expect(resultCode).toContain('renderSSRAttr as _renderSSRAttr')
+    expect(resultCode).toContain('renderSSRValue as _renderSSRValue')
+    expect(resultCode).toContain('_renderSSRAttr("data-id", id)')
     expect(resultCode).not.toContain('jsxDEV("section"')
   })
 
   it('keeps event-bound elements on the generic JSX path', async () => {
     const resultCode = await compileSSRModule(
-      `const view = <button onClick$={handleClick}>save</button>`,
+      `const view = <button onClick={handleClick}>save</button>`,
       'mod.test.tsx',
     )
 
     expect(resultCode).toContain('jsxDEV("button"')
-    expect(resultCode).not.toContain('ssrTemplate([')
+    expect(resultCode).not.toContain('ssrRaw(')
   })
 
   it('passes JSX fragment children through component props', async () => {
@@ -30,7 +32,7 @@ describe('compileSSRModule', () => {
     )
 
     expect(resultCode).toContain('"children": [')
-    expect(resultCode).toContain('ssrTemplate(["<span>a</span>"])')
+    expect(resultCode).toContain('_ssrRaw("<span>a</span>")')
     expect(resultCode).toContain('value')
   })
 
@@ -66,18 +68,111 @@ describe('compileSSRModule', () => {
     )
 
     expect(resultCode).not.toContain('=> <li')
-    expect(resultCode).toMatch(/_ssrTemplate\(|_jsxDEV\("li"/)
+    expect(resultCode).toMatch(
+      /_ssrRaw\("<li>" \+ _renderSSRValue\(todo\) \+ "<\/li>"\)|_jsxDEV\("li"/,
+    )
+  })
+
+  it('lowers ternaries with JSX branches to Show components', async () => {
+    const resultCode = await compileSSRModule(
+      `const view = <div>{flag ? <span>on</span> : <span>off</span>}</div>`,
+      'mod.test.tsx',
+    )
+
+    expect(resultCode).toContain('import { Show as __eclipsaShow } from "eclipsa";')
+    expect(resultCode).toContain('_jsxDEV(__eclipsaShow')
+    expect(resultCode).toContain('"when": flag')
+    expect(resultCode).not.toContain('flag ? <span>')
   })
 
-  it('compiles nested JSX fragments inside logical expressions', async () => {
+  it('lowers && expressions with JSX branches to Show components', async () => {
     const resultCode = await compileSSRModule(
       `const view = <head>{flag && <><script src="/eruda.js"></script><script>eruda.init()</script></>}</head>`,
       'mod.test.tsx',
     )
 
     expect(resultCode).not.toContain('<>')
-    expect(resultCode).toContain('flag &&')
+    expect(resultCode).toContain('import { Show as __eclipsaShow } from "eclipsa";')
+    expect(resultCode).toContain('_jsxDEV(__eclipsaShow')
+    expect(resultCode).toContain('"fallback": (__e_showValue) => __e_showValue')
     expect(resultCode).toContain('/eruda.js')
     expect(resultCode).toContain('eruda.init()')
   })
+
+  it('lowers || expressions with JSX branches to Show components', async () => {
+    const resultCode = await compileSSRModule(
+      `const view = <div>{label || <span>empty</span>}</div>`,
+      'mod.test.tsx',
+    )
+
+    expect(resultCode).toContain('import { Show as __eclipsaShow } from "eclipsa";')
+    expect(resultCode).toContain('_jsxDEV(__eclipsaShow')
+    expect(resultCode).toContain('"children": (__e_showValue) => __e_showValue')
+    expect(resultCode).toContain('"fallback": (__e_showValue) => _ssrRaw("<span>empty</span>")')
+  })
+
+  it('lowers direct JSX map expressions to raw string joins when the parent is on the fast path', async () => {
+    const resultCode = await compileSSRModule(
+      `const view = <ul>{items.map((item, i) => <li key={i}>{item}</li>)}</ul>`,
+      'mod.test.tsx',
+    )
+
+    expect(resultCode).not.toContain('import { For as __eclipsaFor } from "eclipsa";')
+    expect(resultCode).not.toContain('_jsxDEV(__eclipsaFor')
+    expect(resultCode).toContain('renderSSRMap as _renderSSRMap')
+    expect(resultCode).toContain(
+      '_renderSSRMap(items, (item, i) => "<li>" + _renderSSRValue(item) + "</li>")',
+    )
+    expect(resultCode).not.toContain('=> <li')
+  })
+
+  it('lowers parenthesized JSX map callbacks to raw string joins when the parent is on the fast path', async () => {
+    const resultCode = await compileSSRModule(
+      `const view = <div>{items.map((item) => (<article key={item.id}><h3>{item.name}</h3></article>))}</div>`,
+      'mod.test.tsx',
+    )
+
+    expect(resultCode).not.toContain('import { For as __eclipsaFor } from "eclipsa";')
+    expect(resultCode).not.toContain('_jsxDEV(__eclipsaFor')
+    expect(resultCode).toContain('_renderSSRMap(items, (item) =>')
+    expect(resultCode).toContain('"<article>"')
+    expect(resultCode).toContain('_renderSSRValue(item.name)')
+    expect(resultCode).toContain('"</article>")')
+  })
+
+  it('does not lower non-JSX map expressions to For components', async () => {
+    const resultCode = await compileSSRModule(
+      `const view = <div>{items.map((item) => item.toString())}</div>`,
+      'mod.test.tsx',
+    )
+
+    expect(resultCode).not.toContain('import { For as __eclipsaFor } from "eclipsa";')
+    expect(resultCode).not.toContain('_jsxDEV(__eclipsaFor')
+    expect(resultCode).toContain('items.map((item) => item.toString())')
+  })
+
+  it('does not lower map expressions inside component children', async () => {
+    const resultCode = await compileSSRModule(
+      `const view = <Layout>{items.map((item, i) => <li key={i}>{item}</li>)}</Layout>`,
+      'mod.test.tsx',
+    )
+
+    expect(resultCode).not.toContain('import { For as __eclipsaFor } from "eclipsa";')
+    expect(resultCode).not.toContain('_jsxDEV(__eclipsaFor')
+    expect(resultCode).toContain(
+      'items.map((item, i) => _ssrRaw("<li>" + _renderSSRValue(item) + "</li>"))',
+    )
+    expect(resultCode).not.toContain(' key=')
+  })
+
+  it('does not lower logical JSX expressions inside component children', async () => {
+    const resultCode = await compileSSRModule(
+      `const view = <Layout>{flag && <span>ready</span>}</Layout>`,
+      'mod.test.tsx',
+    )
+
+    expect(resultCode).not.toContain('import { Show as __eclipsaShow } from "eclipsa";')
+    expect(resultCode).not.toContain('_jsxDEV(__eclipsaShow')
+    expect(resultCode).toContain('flag && _ssrRaw("<span>ready</span>")')
+  })
 })
diff --git a/packages/eclipsa/compiler/ssr/mod.ts b/packages/eclipsa/compiler/ssr/mod.ts
index c015f83..dc7b428 100644
--- a/packages/eclipsa/compiler/ssr/mod.ts
+++ b/packages/eclipsa/compiler/ssr/mod.ts
@@ -1,4 +1,4 @@
-import { runRustCompiler } from '../native/mod.ts'
+import { runRustCompiler } from '@eclipsa/optimizer'
 
 export const compileSSRModule = async (code: string, id: string): Promise<string> => {
   return runRustCompiler({
diff --git a/packages/eclipsa/core/action-csrf.test.ts b/packages/eclipsa/core/action-csrf.test.ts
new file mode 100644
index 0000000..00eb9ac
--- /dev/null
+++ b/packages/eclipsa/core/action-csrf.test.ts
@@ -0,0 +1,51 @@
+import { Hono } from 'hono'
+import { describe, expect, it } from 'vitest'
+import { ACTION_FORM_ATTR } from './action.ts'
+import { ACTION_CSRF_COOKIE, applyActionCsrfCookie } from './action-csrf.ts'
+import type { AppContext } from './hooks.ts'
+import { withServerRequestContext } from './hooks.ts'
+import { renderSSR } from './ssr.ts'
+import { jsxDEV } from '../jsx/jsx-dev-runtime.ts'
+
+describe('action csrf', () => {
+  it('injects csrf inputs into SSR action forms and appends the csrf cookie', async () => {
+    const app = new Hono()
+    app.get('/form', (c) =>
+      withServerRequestContext(c as unknown as AppContext, {}, () => {
+        const { html } = renderSSR(() =>
+          jsxDEV(
+            'form',
+            {
+              [ACTION_FORM_ATTR]: 'sum',
+              children: jsxDEV('button', { children: 'Submit' }, null, false, {}),
+              method: 'post',
+            },
+            null,
+            false,
+            {},
+          ),
+        )
+
+        return applyActionCsrfCookie(
+          new Response(html, {
+            headers: {
+              'content-type': 'text/html; charset=utf-8',
+            },
+          }),
+          c as unknown as AppContext,
+        )
+      }),
+    )
+
+    const response = await app.request('http://localhost/form')
+    const cookie = response.headers.get('set-cookie')
+    const html = await response.text()
+
+    expect(cookie).toContain(`${ACTION_CSRF_COOKIE}=`)
+    const encodedToken = cookie?.match(new RegExp(`${ACTION_CSRF_COOKIE}=([^;]+)`))?.[1]
+    expect(encodedToken).toBeTruthy()
+    expect(html).toContain('data-e-action-csrf=""')
+    expect(html).toContain('name="__e_csrf"')
+    expect(html).toContain(`value="${decodeURIComponent(encodedToken!)}"`)
+  })
+})
diff --git a/packages/eclipsa/core/action-csrf.ts b/packages/eclipsa/core/action-csrf.ts
new file mode 100644
index 0000000..30cedcb
--- /dev/null
+++ b/packages/eclipsa/core/action-csrf.ts
@@ -0,0 +1,150 @@
+import { getCurrentServerRequestContext, type AppContext } from './hooks.ts'
+
+export const ACTION_CSRF_COOKIE = '__eclipsa_action_csrf'
+export const ACTION_CSRF_FIELD = '__e_csrf'
+export const ACTION_CSRF_HEADER = 'x-eclipsa-csrf'
+export const ACTION_CSRF_INPUT_ATTR = 'data-e-action-csrf'
+export const ACTION_CSRF_ERROR_MESSAGE = 'Invalid CSRF token.'
+
+const ACTION_CSRF_TOKEN_KEY = Symbol.for('eclipsa.action-csrf-token')
+const ACTION_CSRF_SET_COOKIE_KEY = Symbol.for('eclipsa.action-csrf-set-cookie')
+
+type ActionCsrfContext = AppContext<any> & {
+  [ACTION_CSRF_SET_COOKIE_KEY]?: boolean
+  [ACTION_CSRF_TOKEN_KEY]?: string
+}
+
+const getCrypto = () => {
+  if (globalThis.crypto) {
+    return globalThis.crypto
+  }
+  const nodeCrypto =
+    typeof process === 'undefined'
+      ? undefined
+      : ((
+          process as typeof process & {
+            getBuiltinModule?: (id: string) => unknown
+          }
+        ).getBuiltinModule?.('node:crypto') as
+          | {
+              webcrypto?: Crypto
+            }
+          | undefined)
+  if (nodeCrypto?.webcrypto) {
+    return nodeCrypto.webcrypto
+  }
+  throw new Error('Web Crypto API is not available in this environment.')
+}
+
+const toHex = (bytes: Uint8Array) =>
+  [...bytes].map((value) => value.toString(16).padStart(2, '0')).join('')
+
+export const createActionCsrfToken = () => {
+  const bytes = new Uint8Array(32)
+  getCrypto().getRandomValues(bytes)
+  return toHex(bytes)
+}
+
+const parseCookie = (cookieHeader: string | null | undefined, name: string) => {
+  if (!cookieHeader) {
+    return null
+  }
+
+  for (const entry of cookieHeader.split(';')) {
+    const trimmed = entry.trim()
+    if (!trimmed.startsWith(`${name}=`)) {
+      continue
+    }
+    const value = trimmed.slice(name.length + 1)
+    if (value.length === 0) {
+      return null
+    }
+    try {
+      return decodeURIComponent(value)
+    } catch {
+      return value
+    }
+  }
+
+  return null
+}
+
+const shouldUseSecureCookie = (c: AppContext<any>) => {
+  try {
+    if (new URL(c.req.raw.url).protocol === 'https:') {
+      return true
+    }
+  } catch {}
+  const forwardedProto = c.req.header('x-forwarded-proto')
+  return forwardedProto?.split(',')[0]?.trim().toLowerCase() === 'https'
+}
+
+export const readActionCsrfTokenFromCookieHeader = (cookieHeader: string | null | undefined) =>
+  parseCookie(cookieHeader, ACTION_CSRF_COOKIE)
+
+export const readActionCsrfTokenFromDocument = (doc: Pick<Document, 'cookie'>) =>
+  readActionCsrfTokenFromCookieHeader(doc.cookie)
+
+export const readActionCsrfTokenFromFormData = (value: FormData) => {
+  const token = value.get(ACTION_CSRF_FIELD)
+  return typeof token === 'string' && token.length > 0 ? token : null
+}
+
+export const readActionCsrfTokenFromRequest = (c: AppContext<any>) =>
+  readActionCsrfTokenFromCookieHeader(c.req.header('cookie'))
+
+export const ensureActionCsrfToken = (c: AppContext<any>) => {
+  const record = c as ActionCsrfContext
+  const existing = record[ACTION_CSRF_TOKEN_KEY]
+  if (typeof existing === 'string' && existing.length > 0) {
+    return existing
+  }
+
+  const cookieToken = readActionCsrfTokenFromRequest(c)
+  if (cookieToken) {
+    record[ACTION_CSRF_TOKEN_KEY] = cookieToken
+    record[ACTION_CSRF_SET_COOKIE_KEY] = false
+    return cookieToken
+  }
+
+  const created = createActionCsrfToken()
+  record[ACTION_CSRF_TOKEN_KEY] = created
+  record[ACTION_CSRF_SET_COOKIE_KEY] = true
+  return created
+}
+
+export const getCurrentActionCsrfToken = () => {
+  const context = getCurrentServerRequestContext()
+  return context ? ensureActionCsrfToken(context) : null
+}
+
+export const serializeActionCsrfCookie = (token: string, secure: boolean) =>
+  [
+    `${ACTION_CSRF_COOKIE}=${encodeURIComponent(token)}`,
+    'Path=/',
+    'SameSite=Lax',
+    ...(secure ? ['Secure'] : []),
+  ].join('; ')
+
+export const applyActionCsrfCookie = (response: Response, c: AppContext<any>) => {
+  const record = c as ActionCsrfContext
+  if (record[ACTION_CSRF_SET_COOKIE_KEY] !== true) {
+    return response
+  }
+
+  const token = record[ACTION_CSRF_TOKEN_KEY]
+  if (!token) {
+    return response
+  }
+
+  const cookieValue = serializeActionCsrfCookie(token, shouldUseSecureCookie(c))
+  try {
+    response.headers.append('set-cookie', cookieValue)
+  } catch {
+    const next = new Response(response.body, response)
+    next.headers.append('set-cookie', cookieValue)
+    response = next
+  }
+  record[ACTION_CSRF_SET_COOKIE_KEY] = false
+  return response
+}
diff --git a/packages/eclipsa/core/action.test.ts b/packages/eclipsa/core/action.test.ts
index 0f1b08e..df7ff8e 100644
--- a/packages/eclipsa/core/action.test.ts
+++ b/packages/eclipsa/core/action.test.ts
@@ -1,8 +1,22 @@
 import { Hono } from 'hono'
-import { describe, expect, it } from 'vitest'
-import { executeAction, registerAction, validator, type StandardSchemaV1 } from './action.ts'
+import { describe, expect, it, vi } from 'vitest'
+import { ACTION_CSRF_COOKIE, ACTION_CSRF_FIELD, ACTION_CSRF_HEADER } from './action-csrf.ts'
+import {
+  __eclipsaAction,
+  executeAction,
+  registerAction,
+  validator,
+  type StandardSchemaV1,
+} from './action.ts'
+import type { AppContext } from './hooks.ts'
+import { withServerRequestContext } from './hooks.ts'
+import { ROUTE_RPC_URL_HEADER } from './router-shared.ts'
+import type { RuntimeContainer } from './runtime.ts'
+import { withRuntimeContainer } from './runtime.ts'
 import { serializeValue } from './serialize.ts'
 
+const ACTION_CSRF_TOKEN = 'csrf-token'
+
 const createSchema = <T>(
   validate: (value: unknown) => { issues: readonly { message: string }[] } | { value: T },
 ): StandardSchemaV1<unknown, T> => ({
@@ -19,10 +33,72 @@ const createSchema = <T>(
 
 const createActionApp = () => {
   const app = new Hono()
-  app.post('/__eclipsa/action/:id', (c) => executeAction(c.req.param('id'), c))
+  app.post('/__eclipsa/action/:id', (c) =>
+    executeAction(c.req.param('id'), c as unknown as AppContext),
+  )
   return app
 }
 
+const withActionCsrf = (
+  init: RequestInit,
+  options?: {
+    cookieToken?: string | null
+    form?: boolean
+    token?: string | null
+  },
+) => {
+  const headers = new Headers(init.headers)
+  const cookieToken = options && 'cookieToken' in options ? options.cookieToken : ACTION_CSRF_TOKEN
+  const token = options && 'token' in options ? options.token : ACTION_CSRF_TOKEN
+
+  if (cookieToken) {
+    headers.set('cookie', `${ACTION_CSRF_COOKIE}=${cookieToken}`)
+  }
+  if (!options?.form && token) {
+    headers.set(ACTION_CSRF_HEADER, token)
+  }
+
+  return {
+    ...init,
+    headers,
+  } satisfies RequestInit
+}
+
+const createRuntimeContainer = (): RuntimeContainer =>
+  ({
+    actions: new Map(),
+    actionStates: new Map(),
+    asyncSignalSnapshotCache: new Map(),
+    asyncSignalStates: new Map(),
+    atoms: new WeakMap(),
+    components: new Map(),
+    dirty: new Set(),
+    dirtyFlushQueued: false,
+    eventDispatchPromise: null,
+    externalRenderCache: new Map(),
+    id: 'rt-test',
+    imports: new Map(),
+    interactivePrefetchCheckQueued: false,
+    loaderStates: new Map(),
+    loaders: new Map(),
+    nextAtomId: 0,
+    nextComponentId: 0,
+    nextElementId: 0,
+    nextScopeId: 0,
+    nextSignalId: 0,
+    pendingSuspensePromises: new Set(),
+    resumeReadyPromise: null,
+    rootChildCursor: 0,
+    router: null,
+    scopes: new Map(),
+    signals: new Map(),
+    symbols: new Map(),
+    visibilityCheckQueued: false,
+    visibilityListenersCleanup: null,
+    visibles: new Map(),
+    watches: new Map(),
+  }) satisfies RuntimeContainer
+
 describe('action runtime', () => {
   it('validates input and exposes c.var.input', async () => {
     const app = createActionApp()
@@ -50,18 +126,21 @@ describe('action runtime', () => {
       },
     )
 
-    const response = await app.request('http://localhost/__eclipsa/action/sum', {
-      body: JSON.stringify({
-        input: serializeValue({
-          left: 2,
-          right: 3,
+    const response = await app.request(
+      'http://localhost/__eclipsa/action/sum',
+      withActionCsrf({
+        body: JSON.stringify({
+          input: serializeValue({
+            left: 2,
+            right: 3,
+          }),
         }),
+        headers: {
+          'content-type': 'application/eclipsa-action+json',
+        },
+        method: 'POST',
       }),
-      headers: {
-        'content-type': 'application/eclipsa-action+json',
-      },
-      method: 'POST',
-    })
+    )
 
     expect(response.status).toBe(200)
     await expect(response.json()).resolves.toEqual({
@@ -84,15 +163,18 @@ describe('action runtime', () => {
       async () => 'never',
     )
 
-    const response = await app.request('http://localhost/__eclipsa/action/invalid', {
-      body: JSON.stringify({
-        input: serializeValue('nope'),
+    const response = await app.request(
+      'http://localhost/__eclipsa/action/invalid',
+      withActionCsrf({
+        body: JSON.stringify({
+          input: serializeValue('nope'),
+        }),
+        headers: {
+          'content-type': 'application/eclipsa-action+json',
+        },
+        method: 'POST',
       }),
-      headers: {
-        'content-type': 'application/eclipsa-action+json',
-      },
-      method: 'POST',
-    })
+    )
 
     expect(response.status).toBe(400)
     const body = (await response.json()) as { error: unknown; ok: boolean }
@@ -143,13 +225,20 @@ describe('action runtime', () => {
     )
 
     const formData = new FormData()
+    formData.set(ACTION_CSRF_FIELD, ACTION_CSRF_TOKEN)
     formData.set('left', '4')
     formData.set('right', '6')
 
-    const response = await app.request('http://localhost/__eclipsa/action/form-sum', {
-      body: formData,
-      method: 'POST',
-    })
+    const response = await app.request(
+      'http://localhost/__eclipsa/action/form-sum',
+      withActionCsrf(
+        {
+          body: formData,
+          method: 'POST',
+        },
+        { form: true },
+      ),
+    )
 
     expect(response.status).toBe(200)
     await expect(response.json()).resolves.toEqual({
@@ -158,6 +247,52 @@ describe('action runtime', () => {
     })
   })
 
+  it('rejects requests with missing or mismatched csrf tokens', async () => {
+    const app = createActionApp()
+    registerAction('secure', [], async () => 'ok')
+
+    const missingToken = await app.request(
+      'http://localhost/__eclipsa/action/secure',
+      withActionCsrf(
+        {
+          body: JSON.stringify({
+            input: serializeValue(null),
+          }),
+          headers: {
+            'content-type': 'application/eclipsa-action+json',
+          },
+          method: 'POST',
+        },
+        { token: null },
+      ),
+    )
+    expect(missingToken.status).toBe(403)
+    await expect(missingToken.json()).resolves.toEqual({
+      error: {
+        __eclipsa_type: 'object',
+        entries: [
+          ['message', 'Invalid CSRF token.'],
+          ['name', 'ActionCsrfError'],
+        ],
+      },
+      ok: false,
+    })
+
+    const formData = new FormData()
+    formData.set(ACTION_CSRF_FIELD, 'wrong-token')
+    const mismatchedToken = await app.request(
+      'http://localhost/__eclipsa/action/secure',
+      withActionCsrf(
+        {
+          body: formData,
+          method: 'POST',
+        },
+        { cookieToken: ACTION_CSRF_TOKEN, form: true, token: 'wrong-token' },
+      ),
+    )
+    expect(mismatchedToken.status).toBe(403)
+  })
+
   it('streams async generators and readable streams with framed payloads', async () => {
     const app = createActionApp()
     registerAction('stream', [], async function* () {
@@ -177,33 +312,39 @@ describe('action runtime', () => {
         }),
     )
 
-    const generatorResponse = await app.request('http://localhost/__eclipsa/action/stream', {
-      body: JSON.stringify({
-        input: serializeValue(null),
+    const generatorResponse = await app.request(
+      'http://localhost/__eclipsa/action/stream',
+      withActionCsrf({
+        body: JSON.stringify({
+          input: serializeValue(null),
+        }),
+        headers: {
+          'content-type': 'application/eclipsa-action+json',
+        },
+        method: 'POST',
       }),
-      headers: {
-        'content-type': 'application/eclipsa-action+json',
-      },
-      method: 'POST',
-    })
+    )
     expect(generatorResponse.headers.get('content-type')).toContain(
       'application/eclipsa-action-stream+json',
     )
     expect(generatorResponse.headers.get('x-eclipsa-stream-kind')).toBe('async-generator')
     await expect(generatorResponse.text()).resolves.toContain('"type":"chunk"')
 
-    const readableResponse = await app.request('http://localhost/__eclipsa/action/readable', {
-      body: JSON.stringify({
-        input: serializeValue(null),
+    const readableResponse = await app.request(
+      'http://localhost/__eclipsa/action/readable',
+      withActionCsrf({
+        body: JSON.stringify({
+          input: serializeValue(null),
+        }),
+        headers: {
+          'content-type': 'application/eclipsa-action+json',
+        },
+        method: 'POST',
       }),
-      headers: {
-        'content-type': 'application/eclipsa-action+json',
-      },
-      method: 'POST',
-    })
+    )
     expect(readableResponse.headers.get('x-eclipsa-stream-kind')).toBe('readable-stream')
     await expect(readableResponse.text()).resolves.toContain('"type":"done"')
-  })
+  }, 15_000)
 
   it('round-trips opaque action references through server execution', async () => {
     const app = createActionApp()
@@ -219,22 +360,25 @@ describe('action runtime', () => {
       async (c) => c.var.input,
     )
 
-    const response = await app.request('http://localhost/__eclipsa/action/opaque', {
-      body: JSON.stringify({
-        input: {
-          __eclipsa_type: 'ref',
-          data: serializeValue({
-            container: 'rt1',
-          }),
-          kind: 'signal',
-          token: 's0',
+    const response = await app.request(
+      'http://localhost/__eclipsa/action/opaque',
+      withActionCsrf({
+        body: JSON.stringify({
+          input: {
+            __eclipsa_type: 'ref',
+            data: serializeValue({
+              container: 'rt1',
+            }),
+            kind: 'signal',
+            token: 's0',
+          },
+        }),
+        headers: {
+          'content-type': 'application/eclipsa-action+json',
         },
+        method: 'POST',
       }),
-      headers: {
-        'content-type': 'application/eclipsa-action+json',
-      },
-      method: 'POST',
-    })
+    )
 
     expect(await response.json()).toEqual({
       ok: true,
@@ -249,4 +393,89 @@ describe('action runtime', () => {
       },
     })
   })
+
+  it('streams async generator actions through client handles', async () => {
+    const container = createRuntimeContainer()
+    const originalFetch = globalThis.fetch
+    globalThis.fetch = vi.fn(
+      async () =>
+        new Response('{"type":"chunk","value":0}\n{"type":"chunk","value":1}\n{"type":"done"}\n', {
+          headers: {
+            'content-type': 'application/eclipsa-action-stream+json',
+            'x-eclipsa-stream-kind': 'async-generator',
+          },
+        }),
+    ) as typeof fetch
+
+    try {
+      const useStream = __eclipsaAction('stream-handle', [], async function* () {
+        yield 0
+        yield 1
+      })
+      const handle = withRuntimeContainer(container, () => useStream())
+
+      const stream = handle.action()
+      expect(typeof stream[Symbol.asyncIterator]).toBe('function')
+
+      const values: number[] = []
+      for await (const value of stream) {
+        values.push(value)
+        expect(handle.result).toBe(value)
+        expect(handle.lastSubmission?.result).toBe(value)
+        expect(handle.isPending).toBe(true)
+      }
+
+      expect(values).toEqual([0, 1])
+      expect(handle.isPending).toBe(false)
+      expect(handle.result).toBe(1)
+      expect(handle.lastSubmission).toEqual({
+        error: undefined,
+        input: undefined,
+        result: 1,
+      })
+    } finally {
+      globalThis.fetch = originalFetch
+    }
+  })
+
+  it('uses absolute action RPC URLs inside a server request context', async () => {
+    const fetchImpl = vi.fn(
+      async () =>
+        new Response(JSON.stringify({ ok: true, value: 'pong' }), {
+          headers: {
+            'content-type': 'application/json',
+          },
+        }),
+    ) as typeof fetch
+
+    const requestContext = {
+      req: {
+        raw: new Request('http://localhost/current'),
+        header() {
+          return undefined
+        },
+      },
+      var: {
+        fetch: fetchImpl,
+      },
+    } as unknown as AppContext
+
+    const usePing = __eclipsaAction('ping', [], async () => 'pong')
+    const handle = withRuntimeContainer(createRuntimeContainer(), () => usePing())
+
+    await expect(withServerRequestContext(requestContext, {}, () => handle.action())).resolves.toBe(
+      'pong',
+    )
+
+    expect(fetchImpl).toHaveBeenCalledTimes(1)
+    expect(fetchImpl).toHaveBeenCalledWith(
+      'http://localhost/__eclipsa/action/ping',
+      expect.objectContaining({
+        headers: expect.objectContaining({
+          [ROUTE_RPC_URL_HEADER]: 'http://localhost/current',
+        }),
+        method: 'POST',
+      }),
+    )
+  })
 })
diff --git a/packages/eclipsa/core/action.ts b/packages/eclipsa/core/action.ts
index 297f56d..8002b05 100644
--- a/packages/eclipsa/core/action.ts
+++ b/packages/eclipsa/core/action.ts
@@ -1,22 +1,38 @@
 import type { JSX } from '../jsx/types.ts'
-import { component$ } from './component.ts'
-import type { Context } from 'hono'
 import type { Env, MiddlewareHandler, Next } from 'hono/types'
 import {
-  deserializeValue,
-  serializeValue,
+  ACTION_CSRF_COOKIE,
+  ACTION_CSRF_ERROR_MESSAGE,
+  ACTION_CSRF_FIELD,
+  ACTION_CSRF_HEADER,
+  ACTION_CSRF_INPUT_ATTR,
+  applyActionCsrfCookie,
+  ensureActionCsrfToken,
+  readActionCsrfTokenFromDocument,
+  readActionCsrfTokenFromFormData,
+  readActionCsrfTokenFromRequest,
+} from './action-csrf.ts'
+import {
+  type AppContext,
+  deserializePublicValue,
+  getCurrentServerRequestContext,
+  serializePublicValue,
   type SerializedReference,
   type SerializedValue,
-} from './serialize.ts'
+  transformCurrentPublicError,
+  type WithAppEnv,
+} from './hooks.ts'
 import {
   createDetachedRuntimeSignal,
   ensureRuntimeElementId,
   findRuntimeElement,
+  flushDirtyComponents,
   getRuntimeContainer,
   getRuntimeSignalId,
   type RuntimeContainer,
 } from './runtime.ts'
 import { registerActionHook, setActionHandleMeta, setActionHookMeta } from './internal.ts'
+import { ROUTE_RPC_URL_HEADER } from './router-shared.ts'
 
 const ACTION_REGISTRY_KEY = Symbol.for('eclipsa.action-registry')
 export const ACTION_CONTENT_TYPE = 'application/eclipsa-action+json'
@@ -24,6 +40,7 @@ const ACTION_STREAM_CONTENT_TYPE = 'application/eclipsa-action-stream+json'
 export const ACTION_FORM_ATTR = 'data-e-action-form'
 export const ACTION_FORM_FIELD = '__e_action'
 const ACTION_INPUT_CACHE_KEY = Symbol.for('eclipsa.action-input-cache')
+const ACTION_CSRF_ERROR_CODE = Symbol.for('eclipsa.action-csrf-error')
 
 declare const ACTION_REF_BRAND: unique symbol
 declare const ACTION_INPUT_TYPE: unique symbol
@@ -87,18 +104,18 @@ type MiddlewareEnv<T> = T extends {
   readonly __eclipsa_action_env__?: infer MiddlewareEnv
 }
   ? Exclude<MiddlewareEnv, undefined> extends Env
-    ? Exclude<MiddlewareEnv, undefined>
+    ? WithAppEnv<Exclude<MiddlewareEnv, undefined>>
     : {}
   : T extends MiddlewareHandler<infer MiddlewareEnv, any, any>
-    ? MiddlewareEnv
-    : {}
+    ? WithAppEnv<MiddlewareEnv>
+    : WithAppEnv<Env>
 
 type ActionEnv<Middlewares extends readonly ActionMiddleware<any>[]> =
   Middlewares extends readonly [infer Head, ...infer Tail]
     ? Tail extends readonly ActionMiddleware<any>[]
       ? MiddlewareEnv<Head> & ActionEnv<Tail>
       : MiddlewareEnv<Head>
-    : {}
+    : WithAppEnv<Env>
 type MiddlewareActionInput<T> = T extends {
   readonly [ACTION_INPUT_TYPE]?: infer Input
 }
@@ -111,11 +128,25 @@ type ActionInput<Middlewares extends readonly ActionMiddleware<any>[]> = [
   ? unknown
   : MiddlewareActionInput<Middlewares[number]>
 
-type ActionInvoker<Input, Output> = unknown extends Input
-  ? (input?: Input | FormData) => Promise<Output>
+type ResolvedActionOutput<Output> = Awaited<Output>
+
+type ActionStreamYield<Output> =
+  ResolvedActionOutput<Output> extends AsyncIterable<infer Value>
+    ? Value
+    : ResolvedActionOutput<Output> extends ReadableStream<infer Value>
+      ? Value
+      : ResolvedActionOutput<Output>
+
+type ActionInvokeResult<Output> =
+  ResolvedActionOutput<Output> extends AsyncIterable<infer Value>
+    ? AsyncGenerator<Value, void, void>
+    : Promise<ResolvedActionOutput<Output>>
+
+type ActionInvoker<Input, Result> = unknown extends Input
+  ? (input?: Input | FormData) => Result
   : undefined extends Input
-    ? (input?: Input | FormData) => Promise<Output>
-    : (input: Input | FormData) => Promise<Output>
+    ? (input?: Input | FormData) => Result
+    : (input: Input | FormData) => Result
 
 export interface ActionSubmission<Input, Output> {
   readonly error: unknown
@@ -127,9 +158,9 @@ export interface ActionFormProps extends Record<string, unknown> {
   children?: JSX.Element | JSX.Element[]
 }
 
-export interface ActionHandle<Input, Output> {
+export interface ActionHandle<Input, Output, InvokeResult = Promise<Output>> {
   Form: (props: ActionFormProps) => JSX.Element
-  action: ActionInvoker<Input, Output>
+  action: ActionInvoker<Input, InvokeResult>
   readonly error: unknown
   readonly formActionId: string
   readonly isPending: boolean
@@ -148,64 +179,74 @@ export interface ActionValidatorMiddleware<Input, Output> extends ActionMiddlewa
   readonly [ACTION_INPUT_TYPE]?: Input
 }
 export type ActionHandler<E extends Env = Env, Output = unknown> = (
-  c: Context<E>,
+  c: AppContext<E>,
 ) => Output | Promise<Output>
 
-type ActionUse<Middlewares extends readonly ActionMiddleware<any>[], Output> = () => ActionHandle<
+type ActionHandlerOutput<Handler extends (...args: any[]) => unknown> = Awaited<ReturnType<Handler>>
+
+type ActionUse<
+  Middlewares extends readonly ActionMiddleware<any>[],
+  Handler extends ActionHandler<any, any>,
+> = () => ActionHandle<
   ActionInput<Middlewares>,
-  Output
+  ActionStreamYield<ActionHandlerOutput<Handler>>,
+  ActionInvokeResult<ActionHandlerOutput<Handler>>
 >
 
 export interface ActionFactory {
-  <Output>(handler: ActionHandler<{}, Output>): ActionUse<[], Output>
-  <M1 extends ActionMiddleware<any>, Output>(
+  <Handler extends ActionHandler<{}, any>>(handler: Handler): ActionUse<[], Handler>
+  <M1 extends ActionMiddleware<any>, Handler extends ActionHandler<ActionEnv<[M1]>, any>>(
     middleware1: M1,
-    handler: ActionHandler<ActionEnv<[M1]>, Output>,
-  ): ActionUse<[M1], Output>
-  <M1 extends ActionMiddleware<any>, M2 extends ActionMiddleware<any>, Output>(
+    handler: Handler,
+  ): ActionUse<[M1], Handler>
+  <
+    M1 extends ActionMiddleware<any>,
+    M2 extends ActionMiddleware<any>,
+    Handler extends ActionHandler<ActionEnv<[M1, M2]>, any>,
+  >(
     middleware1: M1,
     middleware2: M2,
-    handler: ActionHandler<ActionEnv<[M1, M2]>, Output>,
-  ): ActionUse<[M1, M2], Output>
+    handler: Handler,
+  ): ActionUse<[M1, M2], Handler>
   <
     M1 extends ActionMiddleware<any>,
     M2 extends ActionMiddleware<any>,
     M3 extends ActionMiddleware<any>,
-    Output,
+    Handler extends ActionHandler<ActionEnv<[M1, M2, M3]>, any>,
   >(
     middleware1: M1,
     middleware2: M2,
     middleware3: M3,
-    handler: ActionHandler<ActionEnv<[M1, M2, M3]>, Output>,
-  ): ActionUse<[M1, M2, M3], Output>
+    handler: Handler,
+  ): ActionUse<[M1, M2, M3], Handler>
   <
     M1 extends ActionMiddleware<any>,
     M2 extends ActionMiddleware<any>,
     M3 extends ActionMiddleware<any>,
     M4 extends ActionMiddleware<any>,
-    Output,
+    Handler extends ActionHandler<ActionEnv<[M1, M2, M3, M4]>, any>,
   >(
     middleware1: M1,
     middleware2: M2,
     middleware3: M3,
     middleware4: M4,
-    handler: ActionHandler<ActionEnv<[M1, M2, M3, M4]>, Output>,
-  ): ActionUse<[M1, M2, M3, M4], Output>
+    handler: Handler,
+  ): ActionUse<[M1, M2, M3, M4], Handler>
   <
     M1 extends ActionMiddleware<any>,
     M2 extends ActionMiddleware<any>,
     M3 extends ActionMiddleware<any>,
     M4 extends ActionMiddleware<any>,
     M5 extends ActionMiddleware<any>,
-    Output,
+    Handler extends ActionHandler<ActionEnv<[M1, M2, M3, M4, M5]>, any>,
   >(
     middleware1: M1,
     middleware2: M2,
     middleware3: M3,
     middleware4: M4,
     middleware5: M5,
-    handler: ActionHandler<ActionEnv<[M1, M2, M3, M4, M5]>, Output>,
-  ): ActionUse<[M1, M2, M3, M4, M5], Output>
+    handler: Handler,
+  ): ActionUse<[M1, M2, M3, M4, M5], Handler>
 }
 
 interface RegisteredAction {
@@ -230,6 +271,15 @@ interface ActionStateSnapshot {
   result: unknown
 }
 
+class ActionCsrfError extends Error {
+  [ACTION_CSRF_ERROR_CODE] = true
+
+  constructor() {
+    super(ACTION_CSRF_ERROR_MESSAGE)
+    this.name = 'ActionCsrfError'
+  }
+}
+
 interface ActionExecutionValue {
   input: unknown
   kind: 'value'
@@ -294,7 +344,7 @@ const normalizeFormSubmissionInput = (value: unknown) => {
   const normalized = formDataToInputObject(value)
   return Object.fromEntries(
     Object.entries(normalized).flatMap(([key, entry]) => {
-      if (key === ACTION_FORM_FIELD) {
+      if (key === ACTION_FORM_FIELD || key === ACTION_CSRF_FIELD) {
         return []
       }
       if (Array.isArray(entry)) {
@@ -308,8 +358,8 @@ const normalizeFormSubmissionInput = (value: unknown) => {
   )
 }
 
-const getActionInputCache = (c: Context<any>) => {
-  const record = c as Context<any> & {
+const getActionInputCache = (c: AppContext<any>) => {
+  const record = c as AppContext<any> & {
     [ACTION_INPUT_CACHE_KEY]?: Promise<unknown>
   }
   if (!record[ACTION_INPUT_CACHE_KEY]) {
@@ -340,13 +390,13 @@ const getActionInputCache = (c: Context<any>) => {
 }
 
 const createActionRefScope = (container: RuntimeContainer | null) =>
-  container ? serializeValue({ container: container.id }) : undefined
+  container ? serializePublicValue({ container: container.id }) : undefined
 
 const readActionRefContainerId = (reference: SerializedReference) => {
   if (!reference.data) {
     return null
   }
-  const decoded = deserializeValue(reference.data)
+  const decoded = deserializePublicValue(reference.data)
   if (!decoded || typeof decoded !== 'object') {
     return null
   }
@@ -355,7 +405,7 @@ const readActionRefContainerId = (reference: SerializedReference) => {
 }
 
 const serializeActionClientValue = (container: RuntimeContainer | null, value: unknown) =>
-  serializeValue(value, {
+  serializePublicValue(value, {
     serializeReference(candidate) {
       const signalId = getRuntimeSignalId(candidate)
       if (signalId) {
@@ -379,7 +429,7 @@ const serializeActionClientValue = (container: RuntimeContainer | null, value: u
   })
 
 const deserializeActionServerValue = (value: SerializedValue) =>
-  deserializeValue(value, {
+  deserializePublicValue(value, {
     deserializeReference(reference) {
       const containerId = readActionRefContainerId(reference)
       if (reference.kind === 'signal') {
@@ -400,8 +450,29 @@ const deserializeActionServerValue = (value: SerializedValue) =>
     },
   })
 
+const isActionCsrfValid = async (c: AppContext<any>) => {
+  const cookieToken = readActionCsrfTokenFromRequest(c)
+  if (!cookieToken) {
+    return false
+  }
+
+  const contentType = c.req.header('content-type') ?? ''
+  if (contentType.startsWith(ACTION_CONTENT_TYPE)) {
+    return c.req.header(ACTION_CSRF_HEADER) === cookieToken
+  }
+  if (
+    contentType.startsWith('application/x-www-form-urlencoded') ||
+    contentType.startsWith('multipart/form-data')
+  ) {
+    const input = await getActionInputCache(c)
+    return isFormDataValue(input) && readActionCsrfTokenFromFormData(input) === cookieToken
+  }
+
+  return false
+}
+
 const deserializeActionClientValue = (container: RuntimeContainer | null, value: SerializedValue) =>
-  deserializeValue(value, {
+  deserializePublicValue(value, {
     deserializeReference(reference) {
       if (!container) {
         throw new TypeError('Action references require an active runtime container.')
@@ -441,7 +512,7 @@ const isOpaqueDomRef = (value: unknown): value is OpaqueDomRef =>
   typeof (value as Record<string, unknown>).token === 'string'
 
 const serializeActionServerValue = (value: unknown) =>
-  serializeValue(value, {
+  serializePublicValue(value, {
     serializeReference(candidate) {
       if (isOpaqueSignalRef(candidate)) {
         return {
@@ -449,7 +520,7 @@ const serializeActionServerValue = (value: unknown) =>
           data:
             candidate.containerId === null
               ? undefined
-              : serializeValue({
+              : serializePublicValue({
                   container: candidate.containerId,
                 }),
           kind: 'signal',
@@ -462,7 +533,7 @@ const serializeActionServerValue = (value: unknown) =>
           data:
             candidate.containerId === null
               ? undefined
-              : serializeValue({
+              : serializePublicValue({
                   container: candidate.containerId,
                 }),
           kind: 'dom',
@@ -481,6 +552,12 @@ const isAsyncGeneratorValue = (
 ): value is AsyncGenerator<unknown, unknown, unknown> | AsyncIterable<unknown> =>
   !!value && typeof value === 'object' && Symbol.asyncIterator in value
 
+const isAsyncGeneratorFunctionValue = (
+  value: unknown,
+): value is (...args: any[]) => AsyncGenerator<unknown, unknown, unknown> =>
+  typeof value === 'function' &&
+  Object.prototype.toString.call(value) === '[object AsyncGeneratorFunction]'
+
 const toSerializedActionError = (error: unknown): SerializedValue => {
   if (error instanceof Error) {
     return serializeActionServerValue({
@@ -658,14 +735,56 @@ const toClientAsyncGenerator = async function* (
 
 const invokeAction = async (id: string, input: unknown, container: RuntimeContainer | null) => {
   const isFormSubmission = isFormDataValue(input)
-  const response = await fetch(`/__eclipsa/action/${encodeURIComponent(id)}`, {
-    body: isFormSubmission
-      ? input
-      : JSON.stringify({
-          input: serializeActionClientValue(container, input),
-        }),
+  const actionPath = `/__eclipsa/action/${encodeURIComponent(id)}`
+  const requestContext = typeof window === 'undefined' ? getCurrentServerRequestContext() : null
+  const csrfToken =
+    typeof document !== 'undefined'
+      ? readActionCsrfTokenFromDocument(document)
+      : requestContext
+        ? ensureActionCsrfToken(requestContext)
+        : null
+  const currentRouteUrl =
+    typeof window !== 'undefined'
+      ? window.location.href
+      : (requestContext?.req.header(ROUTE_RPC_URL_HEADER) ?? requestContext?.req.raw.url ?? null)
+  const requestUrl = requestContext
+    ? new URL(actionPath, requestContext.req.raw.url).href
+    : actionPath
+  const fetchImpl =
+    requestContext && typeof requestContext.var.fetch === 'function'
+      ? requestContext.var.fetch
+      : fetch
+  const csrfCookie =
+    requestContext && csrfToken
+      ? [
+          requestContext.req.header('cookie'),
+          `${ACTION_CSRF_COOKIE}=${encodeURIComponent(csrfToken)}`,
+        ]
+          .filter(Boolean)
+          .join('; ')
+      : null
+  const body =
+    isFormSubmission && csrfToken
+      ? (() => {
+          const next = new FormData()
+          for (const [name, value] of input.entries()) {
+            next.append(name, value)
+          }
+          next.set(ACTION_CSRF_FIELD, csrfToken)
+          return next
+        })()
+      : isFormSubmission
+        ? input
+        : JSON.stringify({
+            input: serializeActionClientValue(container, input),
+          })
+  const response = await fetchImpl(requestUrl, {
+    body,
     headers: {
       accept: `${ACTION_STREAM_CONTENT_TYPE}, ${ACTION_CONTENT_TYPE}`,
+      ...(csrfCookie ? { cookie: csrfCookie } : {}),
+      ...(csrfToken ? { [ACTION_CSRF_HEADER]: csrfToken } : {}),
+      ...(currentRouteUrl ? { [ROUTE_RPC_URL_HEADER]: currentRouteUrl } : {}),
       ...(isFormSubmission ? {} : { 'content-type': ACTION_CONTENT_TYPE }),
     },
     method: 'POST',
@@ -682,7 +801,7 @@ const invokeAction = async (id: string, input: unknown, container: RuntimeContai
 }
 
 const composeMiddlewares = async (
-  c: Context<any>,
+  c: AppContext<any>,
   middlewares: ActionMiddleware<any>[],
   handler: ActionHandler<any, unknown>,
 ): Promise<Response | unknown> => {
@@ -759,15 +878,15 @@ const createHandleSignal = <T>(
   return createDetachedRuntimeSignal(container, `$action:${id}:${key}`, initialValue)
 }
 
-const readActionSubmissionInput = async (c: Context<any>) => {
+const readActionSubmissionInput = async (c: AppContext<any>) => {
   const cached = await getActionInputCache(c)
   const actionVars = c.var as Record<string, unknown>
   return normalizeFormSubmissionInput(actionVars.__e_action_raw_input ?? cached)
 }
 
-export const getNormalizedActionInput = (c: Context<any>) => readActionSubmissionInput(c)
+export const getNormalizedActionInput = (c: AppContext<any>) => readActionSubmissionInput(c)
 
-export const getActionFormSubmissionId = async (c: Context<any>) => {
+export const getActionFormSubmissionId = async (c: AppContext<any>) => {
   const input = await getActionInputCache(c)
   if (!isFormDataValue(input)) {
     return null
@@ -778,12 +897,15 @@ export const getActionFormSubmissionId = async (c: Context<any>) => {
 
 export const executeActionSubmission = async (
   id: string,
-  c: Context<any>,
+  c: AppContext<any>,
 ): Promise<ActionExecutionResult> => {
   const action = getActionRegistry().get(id)
   if (!action) {
     throw new Error(`Unknown action ${id}.`)
   }
+  if (!(await isActionCsrfValid(c))) {
+    throw new ActionCsrfError()
+  }
   const input = await readActionSubmissionInput(c)
   const result = await composeMiddlewares(c, action.middlewares, action.handler)
   if (result instanceof Response) {
@@ -846,6 +968,16 @@ const createActionFormNode = (id: string, props: ActionFormProps) => {
   hiddenInput.value = id
   form.appendChild(hiddenInput)
 
+  const csrfToken = readActionCsrfTokenFromDocument(document)
+  if (csrfToken) {
+    const csrfInput = document.createElement('input')
+    csrfInput.name = ACTION_CSRF_FIELD
+    csrfInput.type = 'hidden'
+    csrfInput.value = csrfToken
+    csrfInput.setAttribute(ACTION_CSRF_INPUT_ATTR, '')
+    form.appendChild(csrfInput)
+  }
+
   for (const [name, value] of Object.entries(props)) {
     if (
       name === 'children' ||
@@ -881,8 +1013,8 @@ const createActionFormNode = (id: string, props: ActionFormProps) => {
   return form
 }
 
-export const action$: ActionFactory = (() => {
-  throw new Error('action$() must be compiled by the Eclipsa analyzer before it can run.')
+export const action: ActionFactory = (() => {
+  throw new Error('action() must be compiled by the Eclipsa analyzer before it can run.')
 }) as ActionFactory
 
 export const validator = <Schema extends StandardSchemaV1<any, any>>(
@@ -898,7 +1030,7 @@ export const validator = <Schema extends StandardSchemaV1<any, any>>(
     } catch (error) {
       return c.json(
         {
-          error: serializeValue({
+          error: serializePublicValue({
             issues: [
               {
                 message:
@@ -918,7 +1050,7 @@ export const validator = <Schema extends StandardSchemaV1<any, any>>(
     if ('issues' in validated) {
       return c.json(
         {
-          error: serializeValue({
+          error: serializePublicValue({
             issues: validated.issues,
           }),
           ok: false,
@@ -1002,31 +1134,41 @@ export function registerAction(
 
 export const hasAction = (id: string) => getActionRegistry().has(id)
 
-export const executeAction = async (id: string, c: Context<any>) => {
+export const executeAction = async (id: string, c: AppContext<any>) => {
   try {
     const result = await executeActionSubmission(id, c)
-    return result.kind === 'response' ? result.response : toActionResponse(result.value)
+    const response = result.kind === 'response' ? result.response : toActionResponse(result.value)
+    return applyActionCsrfCookie(response, c)
   } catch (error) {
-    return new Response(
-      JSON.stringify({
-        error: toSerializedActionError(error),
-        ok: false,
-      } satisfies ActionJsonFailure),
-      {
-        headers: {
-          'content-type': ACTION_CONTENT_TYPE,
+    const publicError = await transformCurrentPublicError(error, 'action')
+    return applyActionCsrfCookie(
+      new Response(
+        JSON.stringify({
+          error: toSerializedActionError(publicError),
+          ok: false,
+        } satisfies ActionJsonFailure),
+        {
+          headers: {
+            'content-type': ACTION_CONTENT_TYPE,
+          },
+          status: error instanceof ActionCsrfError ? 403 : 500,
         },
-        status: 500,
-      },
+      ),
+      c,
     )
   }
 }
 
-export const __eclipsaAction = <const Middlewares extends readonly ActionMiddleware<any>[], Output>(
+export const __eclipsaAction = <
+  const Middlewares extends readonly ActionMiddleware<any>[],
+  Handler extends ActionHandler<ActionEnv<Middlewares>, any>,
+>(
   id: string,
   middlewares: readonly [...Middlewares],
-  handler: ActionHandler<ActionEnv<Middlewares>, Output>,
-) => {
+  handler: Handler,
+): ActionUse<Middlewares, Handler> => {
+  type Output = ActionHandlerOutput<Handler>
+
   if (typeof window === 'undefined') {
     getActionRegistry().set(id, {
       handler: handler as ActionHandler<any, unknown>,
@@ -1041,20 +1183,20 @@ export const __eclipsaAction = <const Middlewares extends readonly ActionMiddlew
       const container = getRuntimeContainer()
       const existing = container?.actions.get(id)
       if (existing) {
-        return existing as ActionHandle<ActionInput<Middlewares>, Output>
+        return existing as ReturnType<ActionUse<Middlewares, Handler>>
       }
 
       const initialState = container?.actionStates.get(id)
       const pending = createHandleSignal(container, id, 'pending', false)
-      const result = createHandleSignal<Output | undefined>(
+      const result = createHandleSignal<ActionStreamYield<Output> | undefined>(
         container,
         id,
         'result',
-        initialState?.result as Output | undefined,
+        initialState?.result as ActionStreamYield<Output> | undefined,
       )
       const error = createHandleSignal<unknown>(container, id, 'error', initialState?.error)
       const lastSubmission = createHandleSignal<
-        ActionSubmission<ActionInput<Middlewares>, Output> | undefined
+        ActionSubmission<ActionInput<Middlewares>, ActionStreamYield<Output>> | undefined
       >(
         container,
         id,
@@ -1063,8 +1205,8 @@ export const __eclipsaAction = <const Middlewares extends readonly ActionMiddlew
           ? ({
               error: initialState.error,
               input: initialState.input as ActionInput<Middlewares>,
-              result: initialState.result as Output | undefined,
-            } satisfies ActionSubmission<ActionInput<Middlewares>, Output>)
+              result: initialState.result as ActionStreamYield<Output> | undefined,
+            } satisfies ActionSubmission<ActionInput<Middlewares>, ActionStreamYield<Output>>)
           : undefined,
       )
 
@@ -1084,68 +1226,123 @@ export const __eclipsaAction = <const Middlewares extends readonly ActionMiddlew
         })
       }
 
-      const invoke = async (input: ActionInput<Middlewares> | FormData) => {
-        pending.value = true
-        error.value = undefined
-        const normalizedInput = normalizeFormSubmissionInput(input) as ActionInput<Middlewares>
-        try {
-          const value = (await invokeAction(id, input, container)) as Output
-          result.value = value
-          lastSubmission.value = {
-            error: undefined,
-            input: normalizedInput,
-            result: value,
-          }
-          syncSnapshot()
-          return value
-        } catch (caught) {
-          error.value = caught
-          lastSubmission.value = {
-            error: caught,
-            input: normalizedInput,
-            result: undefined,
-          }
-          syncSnapshot()
-          throw caught
-        } finally {
-          pending.value = false
+      const flushHandleUpdates = async () => {
+        if (!container) {
+          return
         }
+        await flushDirtyComponents(container)
       }
 
-      const Form = component$((props: ActionFormProps) => {
-        if (typeof document !== 'undefined') {
-          return createActionFormNode(id, props) as unknown as JSX.Element
+      const applySubmissionChunk = async (
+        input: ActionInput<Middlewares>,
+        value: ActionStreamYield<Output>,
+      ) => {
+        result.value = value
+        lastSubmission.value = {
+          error: undefined,
+          input,
+          result: value,
         }
+        syncSnapshot()
+        await flushHandleUpdates()
+      }
 
-        const nextProps: Record<string, unknown> = {
-          ...props,
-          [ACTION_FORM_ATTR]: id,
-          method: 'post',
-          children: [
-            {
-              isStatic: true,
-              props: {
-                name: ACTION_FORM_FIELD,
-                type: 'hidden',
-                value: id,
-              },
-              type: 'input',
-            },
-            props.children,
-          ],
+      const applySubmissionError = async (input: ActionInput<Middlewares>, caught: unknown) => {
+        error.value = caught
+        lastSubmission.value = {
+          error: caught,
+          input,
+          result: result.value,
         }
-        delete nextProps.action
-        delete nextProps.method
-        return {
-          isStatic: true,
-          props: nextProps,
-          type: 'form',
-        } satisfies JSX.Element
-      })
+        syncSnapshot()
+        await flushHandleUpdates()
+      }
+
+      const finalizeSubmission = async () => {
+        pending.value = false
+        await flushHandleUpdates()
+      }
+
+      const invoke = (input: ActionInput<Middlewares> | FormData) => {
+        pending.value = true
+        error.value = undefined
+        const normalizedInput = normalizeFormSubmissionInput(input) as ActionInput<Middlewares>
+        const request = invokeAction(id, input, container)
+
+        if (isAsyncGeneratorFunctionValue(handler)) {
+          return (async function* () {
+            try {
+              const value = await request
+              if (isAsyncGeneratorValue(value)) {
+                for await (const chunk of value) {
+                  const resolved = chunk as ActionStreamYield<Output>
+                  await applySubmissionChunk(normalizedInput, resolved)
+                  yield resolved
+                }
+                return
+              }
+              const resolved = value as ActionStreamYield<Output>
+              await applySubmissionChunk(normalizedInput, resolved)
+              yield resolved
+            } catch (caught) {
+              await applySubmissionError(normalizedInput, caught)
+              throw caught
+            } finally {
+              await finalizeSubmission()
+            }
+          })() as ActionInvokeResult<Output>
+        }
+
+        return request
+          .then(async (value) => {
+            const resolved = value as ActionStreamYield<Output>
+            await applySubmissionChunk(normalizedInput, resolved)
+            return value as ResolvedActionOutput<Output>
+          })
+          .catch(async (caught) => {
+            await applySubmissionError(normalizedInput, caught)
+            throw caught
+          })
+          .finally(finalizeSubmission) as ActionInvokeResult<Output>
+      }
+
+      const Form = (props: ActionFormProps) => {
+        const body =
+          typeof document !== 'undefined'
+            ? (createActionFormNode(id, props) as unknown as JSX.Element)
+            : (() => {
+                const nextProps: Record<string, unknown> = {
+                  ...props,
+                  [ACTION_FORM_ATTR]: id,
+                  method: 'post',
+                  children: [
+                    {
+                      isStatic: true,
+                      props: {
+                        name: ACTION_FORM_FIELD,
+                        type: 'hidden',
+                        value: id,
+                      },
+                      type: 'input',
+                    },
+                    props.children,
+                  ],
+                }
+                delete nextProps.action
+                delete nextProps.method
+                return {
+                  isStatic: true,
+                  props: nextProps,
+                  type: 'form',
+                } satisfies JSX.Element
+              })()
+
+        return body
+      }
       const actionHandle = setActionHandleMeta(
         {
           Form,
-          action: invoke as ActionInvoker<ActionInput<Middlewares>, Output>,
+          action: invoke as ActionInvoker<ActionInput<Middlewares>, ActionInvokeResult<Output>>,
           get error() {
             return error.value
           },
@@ -1161,14 +1358,18 @@ export const __eclipsaAction = <const Middlewares extends readonly ActionMiddlew
           get result() {
             return result.value
           },
-        } satisfies ActionHandle<ActionInput<Middlewares>, Output>,
+        } satisfies ActionHandle<
+          ActionInput<Middlewares>,
+          ActionStreamYield<Output>,
+          ActionInvokeResult<Output>
+        >,
         id,
       )
       container?.actions.set(id, actionHandle)
       syncSnapshot()
       return actionHandle
     }, id),
-  ) as () => ActionHandle<ActionInput<Middlewares>, Output>
+  ) as ActionUse<Middlewares, Handler>
 
   return useActionHandle
 }
diff --git a/packages/eclipsa/core/action.typecheck.ts b/packages/eclipsa/core/action.typecheck.ts
index 3ad5f54..266a26c 100644
--- a/packages/eclipsa/core/action.typecheck.ts
+++ b/packages/eclipsa/core/action.typecheck.ts
@@ -1,5 +1,5 @@
 import {
-  action$,
+  action,
   validator,
   type ActionFormProps,
   type ActionHandle,
@@ -45,7 +45,7 @@ const sumSchema = {
   },
 } satisfies StandardSchemaV1<{ left: string; right: string }, { left: number; right: number }>
 
-const useSum = action$(userMiddleware, validator(sumSchema), async (c) => {
+const useSum = action(userMiddleware, validator(sumSchema), async (c) => {
   type _Input = Expect<Equal<typeof c.var.input, { left: number; right: number }>>
   type _TraceId = Expect<Equal<typeof c.var.traceId, string>>
   type _User = Expect<Equal<typeof c.var.user, { id: string }>>
@@ -93,11 +93,35 @@ sumHandle.action()
 // @ts-expect-error Input type comes from schema input, not output.
 sumHandle.action({ left: 1, right: 2 })
 
-const usePing = action$(async () => 'pong')
+const usePing = action(async () => 'pong')
+
+const useCounterStream = action(async function* () {
+  yield 0
+  yield 1
+})
 
 type PingHandle = ReturnType<typeof usePing>
 type _Ping = Expect<Equal<PingHandle, ActionHandle<unknown, string>>>
 
+type CounterStreamHandle = ReturnType<typeof useCounterStream>
+type _CounterStream = Expect<
+  Equal<CounterStreamHandle, ActionHandle<unknown, 0 | 1, AsyncGenerator<0 | 1, void, void>>>
+>
+type _CounterSubmission = Expect<
+  Equal<CounterStreamHandle['lastSubmission'], ActionSubmission<unknown, 0 | 1> | undefined>
+>
+
 declare const pingHandle: PingHandle
 pingHandle.action()
 pingHandle.action('value')
+
+declare const counterStreamHandle: CounterStreamHandle
+type _CounterResult = Expect<Equal<typeof counterStreamHandle.result, 0 | 1 | undefined>>
+type _CounterInvoke = Expect<
+  Equal<
+    typeof counterStreamHandle.action,
+    (input?: unknown | FormData) => AsyncGenerator<0 | 1, void, void>
+  >
+>
+counterStreamHandle.action()
+counterStreamHandle.action('value')
diff --git a/packages/eclipsa/core/client/dom.test.ts b/packages/eclipsa/core/client/dom.test.ts
index 16fae07..8a8ec98 100644
--- a/packages/eclipsa/core/client/dom.test.ts
+++ b/packages/eclipsa/core/client/dom.test.ts
@@ -1,11 +1,43 @@
 import { describe, expect, it, vi } from 'vitest'
 import { attr, createComponent } from './dom.ts'
+import { ACTION_CSRF_COOKIE, ACTION_CSRF_FIELD, ACTION_CSRF_INPUT_ATTR } from '../action-csrf.ts'
+import { __eclipsaComponent } from '../internal.ts'
+import { ACTION_FORM_ATTR } from '../runtime/constants.ts'
 import { createDetachedRuntimeSignal, type RuntimeContainer } from '../runtime.ts'
 import { Suspense } from '../suspense.ts'
 
 const createContainer = () =>
   ({
+    actionStates: new Map(),
+    actions: new Map(),
+    asyncSignalSnapshotCache: new Map(),
+    asyncSignalStates: new Map(),
+    atoms: new WeakMap(),
+    components: new Map(),
+    dirty: new Set(),
+    dirtyFlushQueued: false,
+    eventDispatchPromise: null,
+    id: 'rt-client-dom-test',
+    imports: new Map(),
+    interactivePrefetchCheckQueued: false,
+    loaderStates: new Map(),
+    loaders: new Map(),
+    nextAtomId: 0,
+    nextComponentId: 0,
+    nextElementId: 0,
+    nextScopeId: 0,
+    nextSignalId: 0,
+    pendingSuspensePromises: new Set(),
+    resumeReadyPromise: null,
+    rootChildCursor: 0,
+    router: null,
+    scopes: new Map(),
     signals: new Map(),
+    symbols: new Map(),
+    visibilityCheckQueued: false,
+    visibilityListenersCleanup: null,
+    visibles: new Map(),
+    watches: new Map(),
   }) as RuntimeContainer
 
 describe('core/client dom attr', () => {
@@ -105,6 +137,51 @@ describe('core/client dom attr', () => {
     )
   })
 
+  it('preserves data attributes during client rerenders', () => {
+    const setAttribute = vi.fn()
+    const elem = {
+      addEventListener: vi.fn(),
+      namespaceURI: 'http://www.w3.org/1999/xhtml',
+      setAttribute,
+    }
+
+    attr(elem as unknown as Element, 'data-testid', () => 'probe-aa-0')
+
+    expect(setAttribute).toHaveBeenCalledWith('data-testid', 'probe-aa-0')
+  })
+
+  it('skips redundant class writes when a reactive class result is unchanged', () => {
+    const flag = createDetachedRuntimeSignal(createContainer(), 's0', true)
+    let className = ''
+    let setCount = 0
+    const elem = {
+      addEventListener: vi.fn(),
+      namespaceURI: 'http://www.w3.org/1999/xhtml',
+      setAttribute: vi.fn(),
+    }
+
+    Object.defineProperty(elem, 'className', {
+      configurable: true,
+      get() {
+        return className
+      },
+      set(value: string) {
+        className = value
+        setCount += 1
+      },
+    })
+
+    attr(elem as unknown as Element, 'class', () => (flag.value ? 'card' : 'card'))
+
+    expect(className).toBe('card')
+    expect(setCount).toBe(1)
+
+    flag.value = false
+
+    expect(className).toBe('card')
+    expect(setCount).toBe(1)
+  })
+
   it('preserves suspense components as render objects for runtime fallback handling', () => {
     const rendered = createComponent(Suspense as any, {
       children: ['done'],
@@ -119,4 +196,130 @@ describe('core/client dom attr', () => {
       type: Suspense,
     })
   })
+
+  it('preserves resumable components as render objects so client rerenders keep boundary shape', () => {
+    const Child = __eclipsaComponent(
+      (_props: { label: string }) => null,
+      'component:child',
+      () => [],
+    )
+
+    const rendered = createComponent(Child as any, {
+      label: 'Overview',
+    })()
+
+    expect(rendered).toMatchObject({
+      props: {
+        label: 'Overview',
+      },
+      type: Child,
+    })
+  })
+
+  it('injects csrf inputs when action forms are bound on the client', () => {
+    class FakeInputElement {
+      parentNode: FakeFormElement | null = null
+      private readonly attrs = new Map<string, string>()
+
+      getAttribute(name: string) {
+        return this.attrs.get(name) ?? null
+      }
+
+      setAttribute(name: string, value: string) {
+        this.attrs.set(name, value)
+      }
+    }
+
+    class FakeFormElement {
+      firstChild: FakeInputElement | null = null
+      namespaceURI = 'http://www.w3.org/1999/xhtml'
+      private readonly attrs = new Map<string, string>()
+      private csrfInput: FakeInputElement | null = null
+
+      addEventListener = vi.fn()
+
+      getAttribute(name: string) {
+        return this.attrs.get(name) ?? null
+      }
+
+      insertBefore(node: FakeInputElement, _child: FakeInputElement | null) {
+        node.parentNode = this
+        this.csrfInput = node
+        this.firstChild = node
+        return node
+      }
+
+      querySelector(selector: string) {
+        return selector === `input[${ACTION_CSRF_INPUT_ATTR}]` ? this.csrfInput : null
+      }
+
+      removeAttribute(name: string) {
+        this.attrs.delete(name)
+      }
+
+      setAttribute(name: string, value: string) {
+        this.attrs.set(name, value)
+      }
+    }
+
+    const originalDocument = Reflect.get(globalThis, 'document')
+    const originalHTMLFormElement = Reflect.get(globalThis, 'HTMLFormElement')
+    const originalHTMLInputElement = Reflect.get(globalThis, 'HTMLInputElement')
+    Object.defineProperty(globalThis, 'document', {
+      configurable: true,
+      value: {
+        cookie: `${ACTION_CSRF_COOKIE}=template-token`,
+        createElement(tagName: string) {
+          if (tagName !== 'input') {
+            throw new Error(`Unsupported tag ${tagName}.`)
+          }
+          return new FakeInputElement()
+        },
+      },
+    })
+    Object.defineProperty(globalThis, 'HTMLFormElement', {
+      configurable: true,
+      value: FakeFormElement,
+    })
+    Object.defineProperty(globalThis, 'HTMLInputElement', {
+      configurable: true,
+      value: FakeInputElement,
+    })
+
+    try {
+      const form = new FakeFormElement()
+
+      attr(form as unknown as Element, ACTION_FORM_ATTR, () => 'sum')
+
+      const input = form.querySelector(`input[${ACTION_CSRF_INPUT_ATTR}]`)
+      expect(input).toBeInstanceOf(FakeInputElement)
+      expect(input?.getAttribute('name')).toBe(ACTION_CSRF_FIELD)
+      expect(input?.getAttribute('value')).toBe('template-token')
+    } finally {
+      if (originalDocument === undefined) {
+        Reflect.deleteProperty(globalThis, 'document')
+      } else {
+        Object.defineProperty(globalThis, 'document', {
+          configurable: true,
+          value: originalDocument,
+        })
+      }
+      if (originalHTMLFormElement === undefined) {
+        Reflect.deleteProperty(globalThis, 'HTMLFormElement')
+      } else {
+        Object.defineProperty(globalThis, 'HTMLFormElement', {
+          configurable: true,
+          value: originalHTMLFormElement,
+        })
+      }
+      if (originalHTMLInputElement === undefined) {
+        Reflect.deleteProperty(globalThis, 'HTMLInputElement')
+      } else {
+        Object.defineProperty(globalThis, 'HTMLInputElement', {
+          configurable: true,
+          value: originalHTMLInputElement,
+        })
+      }
+    }
+  })
 })
diff --git a/packages/eclipsa/core/client/dom.ts b/packages/eclipsa/core/client/dom.ts
index a071888..d74e79b 100644
--- a/packages/eclipsa/core/client/dom.ts
+++ b/packages/eclipsa/core/client/dom.ts
@@ -1,18 +1,281 @@
 import { jsxDEV } from '../../jsx/jsx-dev-runtime.ts'
+import {
+  ACTION_CSRF_FIELD,
+  ACTION_CSRF_INPUT_ATTR,
+  readActionCsrfTokenFromDocument,
+} from '../action-csrf.ts'
 import type { Component } from '../component.ts'
 import { getComponentMeta } from '../internal.ts'
+import { ACTION_FORM_ATTR } from '../runtime/constants.ts'
+import {
+  INSERT_MARKER_PREFIX,
+  createInsertMarker,
+  parseComponentBoundaryMarker,
+  parseInsertMarker,
+} from '../runtime/markers.ts'
 import {
   assignRuntimeRef,
   bindRuntimeEvent,
+  captureClientInsertOwner,
+  createDetachedClientInsertOwner,
+  getRuntimeSignalId,
   getRuntimeContainer,
-  renderClientComponent,
+  preserveReusableContentInRoots,
+  rememberManagedAttributesForNode,
+  rememberManagedAttributesForNodes,
+  rememberInsertMarkerRange,
+  getRememberedInsertMarkerNodeCount,
   renderClientInsertable,
+  renderClientInsertableForOwner,
+  restoreSignalRefs,
+  syncManagedAttributeSnapshot,
+  syncRuntimeRefMarker,
+  shouldReconnectDetachedInsertMarkers,
+  tryPatchElementShellInPlace,
+  tryPatchNodeSequenceInPlace,
 } from '../runtime.ts'
 import { effect } from '../signal.ts'
 import { isSuspenseType } from '../suspense.ts'
 import { withSignalSnapshot } from '../snapshot.ts'
 import type { ClientElementLike, Insertable } from './types.ts'
 
+const EMPTY_INSERT_COMMENT = 'eclipsa-empty'
+const ATTR_UNSET = Symbol('eclipsa.attr-unset')
+
+const createActionCsrfInput = (doc: Document, token: string) => {
+  const input = doc.createElement('input')
+  input.setAttribute(ACTION_CSRF_INPUT_ATTR, '')
+  input.setAttribute('name', ACTION_CSRF_FIELD)
+  input.setAttribute('type', 'hidden')
+  input.setAttribute('value', token)
+  return input
+}
+
+const ensureActionCsrfInput = (form: HTMLFormElement) => {
+  const token = readActionCsrfTokenFromDocument(document)
+  if (!token) {
+    return
+  }
+
+  const existing = form.querySelector(`input[${ACTION_CSRF_INPUT_ATTR}]`)
+  const input =
+    existing instanceof HTMLInputElement ? existing : createActionCsrfInput(document, token)
+  input.setAttribute('name', ACTION_CSRF_FIELD)
+  input.setAttribute('type', 'hidden')
+  input.setAttribute('value', token)
+  if (input.parentNode !== form) {
+    form.insertBefore(input, form.firstChild)
+  }
+}
+
+const ensureActionCsrfInputsInNode = (node: Node) => {
+  if (node instanceof HTMLFormElement && node.hasAttribute(ACTION_FORM_ATTR)) {
+    ensureActionCsrfInput(node)
+  }
+  if (node instanceof Element) {
+    for (const form of node.querySelectorAll(`form[${ACTION_FORM_ATTR}]`)) {
+      if (form instanceof HTMLFormElement) {
+        ensureActionCsrfInput(form)
+      }
+    }
+  }
+}
+
+const ensureInsertMarkerKey = (
+  marker: Node | undefined,
+  runtimeContainer: ReturnType<typeof getRuntimeContainer>,
+) => {
+  if (!(marker instanceof Comment) || !runtimeContainer) {
+    return null
+  }
+
+  if (marker.data.startsWith(INSERT_MARKER_PREFIX)) {
+    return marker.data
+  }
+
+  const key = createInsertMarker(runtimeContainer.nextElementId++)
+  marker.data = key
+  return key
+}
+
+const findLiveInsertMarker = (doc: Document | undefined, markerKey: string | null) => {
+  if (!doc?.body || !markerKey || typeof doc.createTreeWalker !== 'function') {
+    return null
+  }
+
+  const walker = doc.createTreeWalker(doc.body, NodeFilter.SHOW_COMMENT)
+  let next = walker.nextNode()
+  while (next) {
+    if (next instanceof Comment && next.data === markerKey) {
+      return next
+    }
+    next = walker.nextNode()
+  }
+  return null
+}
+
+const isConnectedNode = (node: Node | null | undefined) =>
+  !!node &&
+  (!('isConnected' in node) ||
+    (
+      node as Node & {
+        isConnected?: boolean
+      }
+    ).isConnected !== false)
+
+const isUsableInsertParent = (
+  candidate: Node | null | undefined,
+  stableParents: Array<Node | null | undefined>,
+) => !!candidate && (isConnectedNode(candidate) || stableParents.includes(candidate))
+
+const removeNodeFromParent = (node: Node, parent: Node) => {
+  const removable = node as Node & {
+    remove?: () => void
+  }
+  if (typeof removable.remove === 'function') {
+    removable.remove()
+    return
+  }
+
+  const parentWithRemoveChild = parent as Node & {
+    removeChild?: (child: Node) => Node
+  }
+  if (typeof parentWithRemoveChild.removeChild === 'function') {
+    parentWithRemoveChild.removeChild(node)
+  }
+}
+
+const hasUsableInsertParent = (
+  node: Node | null | undefined,
+  stableParents: Array<Node | null | undefined>,
+) => isUsableInsertParent(node?.parentNode, stableParents)
+
+const collectNodesBeforeMarker = (marker: Node | null | undefined, count: number) => {
+  if (!marker?.parentNode || count === 0) {
+    return [] as Node[]
+  }
+
+  const nodes: Node[] = []
+  let cursor = marker.previousSibling
+  while (cursor && nodes.length < count) {
+    nodes.unshift(cursor)
+    cursor = cursor.previousSibling
+  }
+
+  return nodes.length === count ? nodes : []
+}
+
+const getBoundaryMarker = (node: Node | null | undefined) => {
+  if (!(node instanceof Comment)) {
+    return null
+  }
+
+  return parseComponentBoundaryMarker(node.data)
+}
+
+const canReconnectOwnerRange = (currentNodes: Node[], newNodes: Node[]) => {
+  if (currentNodes.length === 0 || currentNodes.length !== newNodes.length) {
+    return false
+  }
+
+  let sawBoundary = false
+
+  for (let index = 0; index < newNodes.length; index += 1) {
+    const currentNode = currentNodes[index]!
+    const newNode = newNodes[index]!
+    if (currentNode.nodeType !== newNode.nodeType) {
+      return false
+    }
+
+    const currentBoundary = getBoundaryMarker(currentNode)
+    const newBoundary = getBoundaryMarker(newNode)
+    if (currentBoundary || newBoundary) {
+      if (
+        !currentBoundary ||
+        !newBoundary ||
+        currentBoundary.kind !== newBoundary.kind ||
+        currentBoundary.id !== newBoundary.id
+      ) {
+        return false
+      }
+      sawBoundary = true
+      continue
+    }
+
+    if (currentNode instanceof Element && newNode instanceof Element) {
+      if (currentNode.tagName !== newNode.tagName) {
+        return false
+      }
+      continue
+    }
+
+    if (currentNode.nodeType === Node.TEXT_NODE && newNode.nodeType === Node.TEXT_NODE) {
+      continue
+    }
+
+    return false
+  }
+
+  return sawBoundary
+}
+
+const resolveFastInsertValue = (value: unknown) => {
+  let resolved = value
+  while (typeof resolved === 'function') {
+    resolved = resolved()
+  }
+
+  if (resolved === null || resolved === undefined || resolved === false) {
+    return {
+      kind: 'empty' as const,
+    }
+  }
+
+  if (
+    typeof resolved === 'string' ||
+    typeof resolved === 'number' ||
+    typeof resolved === 'boolean'
+  ) {
+    return {
+      kind: 'text' as const,
+      value: String(resolved),
+    }
+  }
+
+  return null
+}
+
+const isManagedEmptyInsertComment = (node: Node | null | undefined) =>
+  node instanceof Comment && node.data === EMPTY_INSERT_COMMENT
+
+const getElementStyleDeclaration = (elem: Element) => {
+  const style = (
+    elem as Element & {
+      style?: {
+        removeProperty?: (name: string) => string
+        setProperty?: (name: string, value: string) => void
+      }
+    }
+  ).style
+
+  return style &&
+    typeof style === 'object' &&
+    typeof style.setProperty === 'function' &&
+    typeof style.removeProperty === 'function'
+    ? (style as {
+        removeProperty: (name: string) => string
+        setProperty: (name: string, value: string) => void
+      })
+    : null
+}
+
+const serializeStyleValue = (resolved: unknown) =>
+  resolved && typeof resolved === 'object'
+    ? Object.entries(resolved as Record<string, string>)
+        .map(([k, v]) => `${k}: ${v}`)
+        .join('; ')
+    : String(resolved ?? '')
+
 export const createTemplate = (html: string): (() => Node) => {
   let template: HTMLTemplateElement | null = null
 
@@ -21,7 +284,10 @@ export const createTemplate = (html: string): (() => Node) => {
       template = document.createElement('template')
       template.innerHTML = html
     }
-    return (template.cloneNode(true) as HTMLTemplateElement).content.firstChild as Node
+    const node = (template.cloneNode(true) as HTMLTemplateElement).content.firstChild as Node
+    ensureActionCsrfInputsInNode(node)
+    rememberManagedAttributesForNode(node)
+    return node
   }
 }
 
@@ -29,37 +295,332 @@ export const insert = (value: Insertable, parent: Node, marker?: Node) => {
   let lastFirstNode = marker
   let lastNodeLength = 0
   const runtimeContainer = getRuntimeContainer()
+  if (!runtimeContainer) {
+    throw new Error('Client insertions require an active runtime container.')
+  }
+  const ownerSiteKey =
+    marker instanceof Comment && !parseInsertMarker(marker.data) ? marker.data : null
+  const owner =
+    captureClientInsertOwner(runtimeContainer, ownerSiteKey) ??
+    createDetachedClientInsertOwner(runtimeContainer)
+  const markerKey = ensureInsertMarkerKey(marker, runtimeContainer)
+  const collectCurrentNodes = (
+    liveMarker: Node | undefined,
+    stableParents: Array<Node | null | undefined>,
+  ) => {
+    if (
+      !lastFirstNode ||
+      lastNodeLength === 0 ||
+      !hasUsableInsertParent(lastFirstNode, stableParents)
+    ) {
+      const liveNodes = collectNodesBeforeMarker(liveMarker, lastNodeLength)
+      return liveNodes.every((node) => hasUsableInsertParent(node, stableParents)) ? liveNodes : []
+    }
+    const nodes = [lastFirstNode]
+    let cursor = lastFirstNode
+    while (nodes.length < lastNodeLength) {
+      const next = cursor.nextSibling
+      if (!next || !hasUsableInsertParent(next, stableParents)) {
+        return [] as Node[]
+      }
+      cursor = next
+      nodes.push(cursor)
+    }
+    return nodes
+  }
 
   effect(() => {
-    const newNodes = renderClientInsertable(value, runtimeContainer)
+    const shouldReconnect = shouldReconnectDetachedInsertMarkers(runtimeContainer)
+    const liveMarker = !(marker instanceof Comment)
+      ? marker
+      : isConnectedNode(marker.parentNode)
+        ? marker
+        : shouldReconnect
+          ? (findLiveInsertMarker(runtimeContainer.doc, markerKey) ?? marker)
+          : marker
+    const stableParents = liveMarker?.parentNode
+      ? [liveMarker.parentNode, parent === liveMarker.parentNode ? parent : null]
+      : [parent, marker?.parentNode]
+    const liveLastParent = isUsableInsertParent(lastFirstNode?.parentNode, stableParents)
+      ? lastFirstNode?.parentNode
+      : null
+    const liveMarkerParent = isUsableInsertParent(liveMarker?.parentNode, stableParents)
+      ? liveMarker?.parentNode
+      : null
+    const resolvedParent = (liveLastParent ?? liveMarkerParent ?? parent) as ParentNode | null
+    const targetParent = resolvedParent ?? (parent as ParentNode)
+    const primitiveValue = resolveFastInsertValue(value)
+    const seedCurrentNodes = (count: number) =>
+      lastNodeLength === 0 &&
+      liveMarker instanceof Comment &&
+      getRememberedInsertMarkerNodeCount(liveMarker) === count
+        ? collectNodesBeforeMarker(liveMarker, count)
+        : []
+    const replaceCurrentNodes = (currentNodes: Node[], replacementNode: Node) => {
+      const insertReference =
+        liveMarker?.parentNode === targetParent
+          ? liveMarker
+          : (currentNodes[currentNodes.length - 1]?.nextSibling ?? null)
+      for (const node of currentNodes) {
+        if (node.parentNode === targetParent) {
+          removeNodeFromParent(node, targetParent)
+        }
+      }
+      targetParent.insertBefore(replacementNode, insertReference)
+      rememberInsertMarkerRange(liveMarker, [replacementNode])
+      lastFirstNode = replacementNode
+      lastNodeLength = 1
+    }
+
+    if (primitiveValue) {
+      const seededCurrentNodes = seedCurrentNodes(1)
+      const currentNodes =
+        seededCurrentNodes.length !== 0 &&
+        seededCurrentNodes.every((node) => hasUsableInsertParent(node, stableParents))
+          ? seededCurrentNodes
+          : collectCurrentNodes(liveMarker, stableParents)
+
+      if (currentNodes.length !== 0 && lastNodeLength === 0) {
+        lastFirstNode = currentNodes[0]
+        lastNodeLength = currentNodes.length
+      }
+
+      if (primitiveValue.kind === 'text') {
+        if (currentNodes.length === 1 && currentNodes[0] instanceof Text) {
+          if (currentNodes[0].data !== primitiveValue.value) {
+            currentNodes[0].data = primitiveValue.value
+          }
+          rememberInsertMarkerRange(liveMarker, currentNodes)
+          lastFirstNode = currentNodes[0]
+          lastNodeLength = 1
+          return
+        }
 
-    if (lastFirstNode && newNodes.length !== 0) {
-      for (let i = 1; i < lastNodeLength; i++) {
-        lastFirstNode.nextSibling?.remove()
+        const doc = runtimeContainer.doc ?? targetParent.ownerDocument
+        if (!doc) {
+          throw new Error('Client insertions require an active runtime document.')
+        }
+
+        replaceCurrentNodes(currentNodes, doc.createTextNode(primitiveValue.value))
+        return
       }
-      parent.replaceChild(newNodes[0], lastFirstNode)
-      for (let i = 1; i < newNodes.length; i++) {
-        parent.insertBefore(newNodes[i], newNodes[i - 1].nextSibling)
+
+      if (currentNodes.length === 1 && isManagedEmptyInsertComment(currentNodes[0])) {
+        rememberInsertMarkerRange(liveMarker, currentNodes)
+        lastFirstNode = currentNodes[0]
+        lastNodeLength = 1
+        return
       }
-    } else {
+
+      const doc = runtimeContainer.doc ?? targetParent.ownerDocument
+      if (!doc) {
+        throw new Error('Client insertions require an active runtime document.')
+      }
+
+      replaceCurrentNodes(currentNodes, doc.createComment(EMPTY_INSERT_COMMENT))
+      return
+    }
+
+    const newNodes = owner
+      ? renderClientInsertableForOwner(value, runtimeContainer, owner)
+      : renderClientInsertable(value, runtimeContainer)
+    const seededCurrentNodes = seedCurrentNodes(newNodes.length)
+    const currentNodes =
+      seededCurrentNodes.length !== 0 &&
+      seededCurrentNodes.every((node) => hasUsableInsertParent(node, stableParents)) &&
+      canReconnectOwnerRange(seededCurrentNodes, newNodes)
+        ? seededCurrentNodes
+        : collectCurrentNodes(liveMarker, stableParents)
+
+    if (currentNodes.length !== 0 && lastNodeLength === 0) {
+      lastFirstNode = currentNodes[0]
+      lastNodeLength = currentNodes.length
+    }
+
+    if (
+      currentNodes.length === lastNodeLength &&
+      currentNodes.length !== 0 &&
+      newNodes.length !== 0 &&
+      (tryPatchNodeSequenceInPlace(currentNodes, newNodes) ||
+        tryPatchSingleElementShellInPlace(currentNodes, newNodes))
+    ) {
+      restoreSignalRefs(runtimeContainer, targetParent)
+      rememberInsertMarkerRange(liveMarker, currentNodes)
+      lastFirstNode = currentNodes[0]
+      lastNodeLength = currentNodes.length
+      return
+    }
+
+    let replacementNodes = newNodes
+    if (currentNodes.length !== 0 && newNodes.length !== 0) {
+      const doc = runtimeContainer.doc
+      if (!doc) {
+        throw new Error('Client insertions require an active runtime document.')
+      }
+      const stagingParent = doc.createElement('div')
       for (const node of newNodes) {
-        parent.appendChild(node)
+        stagingParent.appendChild(node)
+      }
+      preserveReusableContentInRoots(currentNodes, Array.from(stagingParent.childNodes))
+      replacementNodes = Array.from(stagingParent.childNodes)
+    }
+
+    const insertReference = liveMarker?.parentNode === targetParent ? liveMarker : null
+    for (const node of currentNodes) {
+      if (node.parentNode === targetParent) {
+        removeNodeFromParent(node, targetParent)
       }
     }
+    for (const node of replacementNodes) {
+      targetParent.insertBefore(node, insertReference)
+    }
 
-    lastFirstNode = newNodes[0]
-    lastNodeLength = newNodes.length
+    rememberManagedAttributesForNodes(replacementNodes)
+    rememberInsertMarkerRange(liveMarker, replacementNodes)
+
+    lastFirstNode = replacementNodes[0] ?? liveMarker
+    lastNodeLength = replacementNodes.length
   })
 }
 
-const EVENT_ATTR_REGEX = /^on[A-Z].+\$$/
+const EVENT_ATTR_REGEX = /^on[A-Z].+$/
 const DANGEROUSLY_SET_INNER_HTML_PROP = 'dangerouslySetInnerHTML'
+const BIND_VALUE_PROP = 'bind:value'
+const BIND_CHECKED_PROP = 'bind:checked'
+const BIND_VALUE_ATTR = 'data-e-bind-value'
+const BIND_CHECKED_ATTR = 'data-e-bind-checked'
+const shouldUseAttributeAssignment = (elem: Element, name: string, isSVG: boolean) =>
+  isSVG || name.startsWith('data-') || name.startsWith('aria-') || !(name in elem)
+
+type BindableSignal<T> = {
+  value: T
+}
+
+const isBindableSignal = <T>(value: unknown): value is BindableSignal<T> =>
+  !!value && (typeof value === 'object' || typeof value === 'function') && 'value' in value
+
+const readValueBinding = (elem: Element, currentValue: unknown) => {
+  if (
+    elem instanceof HTMLInputElement &&
+    typeof currentValue === 'number' &&
+    (elem.type === 'number' || elem.type === 'range') &&
+    !Number.isNaN(elem.valueAsNumber)
+  ) {
+    return elem.valueAsNumber
+  }
+
+  return (elem as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement).value
+}
+
+const tryPatchSingleElementShellInPlace = (currentNodes: Node[], nextNodes: Node[]) => {
+  if (currentNodes.length !== 1 || nextNodes.length !== 1) {
+    return false
+  }
+
+  const [current] = currentNodes
+  const [next] = nextNodes
+  if (
+    !(current instanceof Element) ||
+    !(next instanceof Element) ||
+    current.tagName !== next.tagName
+  ) {
+    return false
+  }
+  return tryPatchElementShellInPlace(current, next)
+}
 
 export const attr = (elem: Element, name: string, value: () => unknown) => {
   const isSVG = elem.namespaceURI === 'http://www.w3.org/2000/svg'
 
+  if (name === BIND_VALUE_PROP) {
+    let lastSignalId = ATTR_UNSET as string | symbol | null
+    const readBinding = () => {
+      const binding = value()
+      const signalId = getRuntimeSignalId(binding)
+      if (signalId !== lastSignalId) {
+        if (signalId) {
+          elem.setAttribute(BIND_VALUE_ATTR, signalId)
+        } else {
+          elem.removeAttribute(BIND_VALUE_ATTR)
+        }
+        syncManagedAttributeSnapshot(elem, BIND_VALUE_ATTR)
+        lastSignalId = signalId
+      }
+      return binding
+    }
+
+    const syncSignalFromElement = () => {
+      const binding = readBinding()
+      if (!isBindableSignal(binding)) {
+        return
+      }
+      binding.value = readValueBinding(elem, binding.value) as never
+    }
+
+    elem.addEventListener('input', syncSignalFromElement)
+    elem.addEventListener('change', syncSignalFromElement)
+
+    effect(() => {
+      const binding = readBinding()
+      if (!isBindableSignal(binding)) {
+        return
+      }
+      const input = elem as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement
+      const nextValue = String(binding.value ?? '')
+      if (input.value !== nextValue) {
+        input.value = nextValue
+      }
+    })
+    return
+  }
+
+  if (name === BIND_CHECKED_PROP) {
+    if (!(elem instanceof HTMLInputElement)) {
+      return
+    }
+
+    let lastSignalId = ATTR_UNSET as string | symbol | null
+    const readBinding = () => {
+      const binding = value()
+      const signalId = getRuntimeSignalId(binding)
+      if (signalId !== lastSignalId) {
+        if (signalId) {
+          elem.setAttribute(BIND_CHECKED_ATTR, signalId)
+        } else {
+          elem.removeAttribute(BIND_CHECKED_ATTR)
+        }
+        syncManagedAttributeSnapshot(elem, BIND_CHECKED_ATTR)
+        lastSignalId = signalId
+      }
+      return binding
+    }
+
+    const syncSignalFromElement = () => {
+      const binding = readBinding()
+      if (!isBindableSignal(binding)) {
+        return
+      }
+      binding.value = elem.checked as never
+    }
+
+    elem.addEventListener('input', syncSignalFromElement)
+    elem.addEventListener('change', syncSignalFromElement)
+
+    effect(() => {
+      const binding = readBinding()
+      if (!isBindableSignal(binding)) {
+        return
+      }
+      const nextChecked = Boolean(binding.value)
+      if (elem.checked !== nextChecked) {
+        elem.checked = nextChecked
+      }
+    })
+    return
+  }
+
   if (EVENT_ATTR_REGEX.test(name)) {
-    const eventName = name[2].toLowerCase() + name.slice(3, -1)
+    const eventName = name[2].toLowerCase() + name.slice(3)
     const resolved = value()
     if (bindRuntimeEvent(elem, eventName, resolved)) {
       return
@@ -72,51 +633,130 @@ export const attr = (elem: Element, name: string, value: () => unknown) => {
   }
 
   if (name === 'style') {
+    let lastStyleString = ATTR_UNSET as string | symbol
+    let lastStyleMap: Map<string, string> | null = null
+    const style = getElementStyleDeclaration(elem)
+
     effect(() => {
       const resolved = value()
-      const styleValue =
-        resolved && typeof resolved === 'object'
-          ? Object.entries(resolved as Record<string, string>)
-              .map(([k, v]) => `${k}: ${v}`)
-              .join('; ')
-          : String(resolved ?? '')
+      if (style && resolved && typeof resolved === 'object') {
+        const nextStyleMap = new Map(
+          Object.entries(resolved as Record<string, string>).map(([styleName, styleValue]) => [
+            styleName,
+            String(styleValue),
+          ]),
+        )
+
+        for (const [styleName, styleValue] of nextStyleMap) {
+          if (lastStyleMap?.get(styleName) !== styleValue) {
+            style.setProperty(styleName, styleValue)
+          }
+        }
+
+        if (lastStyleMap) {
+          for (const styleName of lastStyleMap.keys()) {
+            if (!nextStyleMap.has(styleName)) {
+              style.removeProperty(styleName)
+            }
+          }
+        }
+
+        lastStyleMap = nextStyleMap
+        lastStyleString = ATTR_UNSET
+        syncManagedAttributeSnapshot(elem, 'style')
+        return
+      }
+
+      lastStyleMap = null
+      const styleValue = serializeStyleValue(resolved)
+      if (lastStyleString === styleValue) {
+        return
+      }
       elem.setAttribute('style', styleValue)
+      lastStyleString = styleValue
+      syncManagedAttributeSnapshot(elem, 'style')
     })
     return
   }
 
   if (name === 'class') {
+    let lastClassValue = ATTR_UNSET as string | symbol
     effect(() => {
-      if (isSVG) {
-        elem.setAttribute('class', String(value()))
+      const nextClassValue = String(value())
+      if (lastClassValue === nextClassValue) {
         return
       }
-      ;(elem as Element & { className: string }).className = String(value())
+      if (isSVG) {
+        elem.setAttribute('class', nextClassValue)
+        syncManagedAttributeSnapshot(elem, 'class')
+      } else {
+        ;(elem as Element & { className: string }).className = nextClassValue
+        syncManagedAttributeSnapshot(elem, 'class')
+      }
+      lastClassValue = nextClassValue
     })
     return
   }
 
   if (name === 'ref') {
-    assignRuntimeRef(value(), elem, getRuntimeContainer())
+    const resolved = value()
+    syncRuntimeRefMarker(elem, resolved)
+    assignRuntimeRef(resolved, elem, getRuntimeContainer())
+    return
+  }
+
+  if (name === ACTION_FORM_ATTR) {
+    let lastAssignedValue = ATTR_UNSET as string | symbol | null
+    effect(() => {
+      const resolved = value()
+      const nextValue =
+        resolved === false || resolved === undefined || resolved === null ? null : String(resolved)
+      if (lastAssignedValue === nextValue) {
+        return
+      }
+      if (nextValue === null) {
+        elem.removeAttribute(name)
+      } else {
+        elem.setAttribute(name, nextValue)
+      }
+      syncManagedAttributeSnapshot(elem, name)
+      if (nextValue !== null && elem instanceof HTMLFormElement) {
+        ensureActionCsrfInput(elem)
+      }
+      lastAssignedValue = nextValue
+    })
     return
   }
 
   if (name === DANGEROUSLY_SET_INNER_HTML_PROP) {
+    let lastHTML = ATTR_UNSET as string | symbol
     effect(() => {
       const html = value()
-      ;(elem as Element & { innerHTML: string }).innerHTML =
-        html === false || html === undefined || html === null ? '' : String(html)
+      const nextHTML = html === false || html === undefined || html === null ? '' : String(html)
+      if (lastHTML === nextHTML) {
+        return
+      }
+      ;(elem as Element & { innerHTML: string }).innerHTML = nextHTML
+      lastHTML = nextHTML
     })
     return
   }
 
+  let lastAssignedValue = ATTR_UNSET as string | symbol
   effect(() => {
-    if (isSVG) {
-      elem.setAttribute(name, String(value()))
+    const nextValue = String(value())
+    if (lastAssignedValue === nextValue) {
       return
     }
-    // @ts-expect-error DOM property assignment uses dynamic keys.
-    elem[name] = String(value())
+    if (shouldUseAttributeAssignment(elem, name, isSVG)) {
+      elem.setAttribute(name, nextValue)
+      syncManagedAttributeSnapshot(elem, name)
+    } else {
+      // @ts-expect-error DOM property assignment uses dynamic keys.
+      elem[name] = nextValue
+      syncManagedAttributeSnapshot(elem, name)
+    }
+    lastAssignedValue = nextValue
   })
 }
 
@@ -144,8 +784,8 @@ export const createComponent = (Component: Component, props: unknown) => {
     return () => jsxDEV(Component, props as Record<string, unknown>, null, false, {})
   }
   if (!getComponentMeta(Component)) {
-    return () => Component(props) as unknown as ClientElementLike
+    const render = Component as (props: unknown) => unknown
+    return () => render(props) as ClientElementLike
   }
-  const elem = renderClientComponent(Component, props)
-  return () => elem as ClientElementLike
+  return () => jsxDEV(Component, props as Record<string, unknown>, null, false, {})
 }
diff --git a/packages/eclipsa/core/component.ts b/packages/eclipsa/core/component.ts
index dd7bf85..e8661cc 100644
--- a/packages/eclipsa/core/component.ts
+++ b/packages/eclipsa/core/component.ts
@@ -2,14 +2,3 @@ import type { JSX } from '../jsx/types.ts'
 
 export type Component<T = unknown> = (props: T) => JSX.Element
 export type EURL<T> = T
-
-export const component$ = <T = unknown>(component: Component<T>): Component<T> => {
-  Object.defineProperty(component, '__eclipsa_component', {
-    configurable: true,
-    enumerable: false,
-    value: true,
-  })
-  return component
-}
-
-export const $ = <T>(value: T): EURL<T> => value
diff --git a/packages/eclipsa/core/context.test.ts b/packages/eclipsa/core/context.test.ts
new file mode 100644
index 0000000..263be8d
--- /dev/null
+++ b/packages/eclipsa/core/context.test.ts
@@ -0,0 +1,416 @@
+import { Fragment, jsxDEV } from 'eclipsa/jsx-dev-runtime'
+import { describe, expect, it } from 'vitest'
+import { createContext, useContext } from './context.ts'
+import { __eclipsaComponent } from './internal.ts'
+import { renderClientInsertable, withRuntimeContainer } from './runtime.ts'
+import { renderSSR } from './ssr.ts'
+class FakeNode {
+  childNodes = []
+  nodeType = 0
+  parentNode = null
+}
+class FakeText extends FakeNode {
+  constructor(data) {
+    super()
+    this.data = data
+    this.nodeType = 3
+  }
+}
+class FakeComment extends FakeNode {
+  constructor(data) {
+    super()
+    this.data = data
+    this.nodeType = 8
+  }
+}
+class FakeElement extends FakeNode {
+  constructor(tagName) {
+    super()
+    this.tagName = tagName
+    this.nodeType = 1
+  }
+  attributes = /* @__PURE__ */ new Map()
+  appendChild(node) {
+    node.parentNode = this
+    this.childNodes.push(node)
+    return node
+  }
+  setAttribute(name, value) {
+    this.attributes.set(name, value)
+  }
+}
+class FakeDocument {
+  createComment(data) {
+    return new FakeComment(data)
+  }
+  createElement(tagName) {
+    return new FakeElement(tagName)
+  }
+  createTextNode(data) {
+    return new FakeText(data)
+  }
+}
+const createContainer = () => ({
+  actions: /* @__PURE__ */ new Map(),
+  actionStates: /* @__PURE__ */ new Map(),
+  asyncSignalStates: /* @__PURE__ */ new Map(),
+  asyncSignalSnapshotCache: /* @__PURE__ */ new Map(),
+  atoms: /* @__PURE__ */ new WeakMap(),
+  components: /* @__PURE__ */ new Map(),
+  dirty: /* @__PURE__ */ new Set(),
+  doc: new FakeDocument(),
+  id: 'rt-context-test',
+  imports: /* @__PURE__ */ new Map(),
+  loaderStates: /* @__PURE__ */ new Map(),
+  loaders: /* @__PURE__ */ new Map(),
+  nextAtomId: 0,
+  nextComponentId: 0,
+  nextElementId: 0,
+  nextScopeId: 0,
+  nextSignalId: 0,
+  pendingSuspensePromises: /* @__PURE__ */ new Set(),
+  rootChildCursor: 0,
+  rootElement: void 0,
+  router: null,
+  scopes: /* @__PURE__ */ new Map(),
+  signals: /* @__PURE__ */ new Map(),
+  symbols: /* @__PURE__ */ new Map(),
+  visibilityCheckQueued: false,
+  visibilityListenersCleanup: null,
+  visibles: /* @__PURE__ */ new Map(),
+  watches: /* @__PURE__ */ new Map(),
+})
+const withFakeNodeGlobal = (fn) => {
+  const OriginalElement = globalThis.Element
+  const OriginalHTMLElement = globalThis.HTMLElement
+  const OriginalNode = globalThis.Node
+  globalThis.Element = FakeElement
+  globalThis.HTMLElement = FakeElement
+  globalThis.Node = FakeNode
+  try {
+    const result = fn()
+    if (result instanceof Promise) {
+      return result.finally(() => {
+        globalThis.Element = OriginalElement
+        globalThis.HTMLElement = OriginalHTMLElement
+        globalThis.Node = OriginalNode
+      })
+    }
+    globalThis.Element = OriginalElement
+    globalThis.HTMLElement = OriginalHTMLElement
+    globalThis.Node = OriginalNode
+    return result
+  } catch (error) {
+    globalThis.Element = OriginalElement
+    globalThis.HTMLElement = OriginalHTMLElement
+    globalThis.Node = OriginalNode
+    throw error
+  }
+}
+const collectText = (nodes) => {
+  let result = ''
+  const visit = (node) => {
+    if (node instanceof FakeText) {
+      result += node.data
+    }
+    for (const child of node.childNodes) {
+      visit(child)
+    }
+  }
+  for (const node of nodes) {
+    visit(node)
+  }
+  return result
+}
+describe('createContext', () => {
+  it('reads provided values during SSR', () => {
+    const ThemeContext = createContext()
+    const ReadTheme = __eclipsaComponent(
+      () =>
+        /* @__PURE__ */ jsxDEV('p', { children: useContext(ThemeContext) }, void 0, false, {
+          fileName: 'packages/eclipsa/core/context.test.ts',
+          lineNumber: 141,
+          columnNumber: 13,
+        }),
+      'context-read-ssr',
+      () => [],
+    )
+    const App = __eclipsaComponent(
+      () =>
+        /* @__PURE__ */ jsxDEV(
+          ThemeContext.Provider,
+          {
+            value: 'dark',
+            children: /* @__PURE__ */ jsxDEV(ReadTheme, {}, void 0, false, {
+              fileName: 'packages/eclipsa/core/context.test.ts',
+              lineNumber: 148,
+              columnNumber: 11,
+            }),
+          },
+          void 0,
+          false,
+          {
+            fileName: 'packages/eclipsa/core/context.test.ts',
+            lineNumber: 147,
+            columnNumber: 9,
+          },
+        ),
+      'context-app-ssr',
+      () => [],
+    )
+    const { html } = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(App, {}, void 0, false, {
+        fileName: 'packages/eclipsa/core/context.test.ts',
+        lineNumber: 155,
+        columnNumber: 38,
+      }),
+    )
+    expect(html).toContain('<p>dark</p>')
+  })
+  it('reads provided values during client rendering', () =>
+    withFakeNodeGlobal(() => {
+      const ThemeContext = createContext()
+      const ReadTheme = __eclipsaComponent(
+        () =>
+          /* @__PURE__ */ jsxDEV('p', { children: useContext(ThemeContext) }, void 0, false, {
+            fileName: 'packages/eclipsa/core/context.test.ts',
+            lineNumber: 164,
+            columnNumber: 15,
+          }),
+        'context-read-client',
+        () => [],
+      )
+      const App = __eclipsaComponent(
+        () =>
+          /* @__PURE__ */ jsxDEV(
+            ThemeContext.Provider,
+            {
+              value: 'dark',
+              children: /* @__PURE__ */ jsxDEV(ReadTheme, {}, void 0, false, {
+                fileName: 'packages/eclipsa/core/context.test.ts',
+                lineNumber: 171,
+                columnNumber: 13,
+              }),
+            },
+            void 0,
+            false,
+            {
+              fileName: 'packages/eclipsa/core/context.test.ts',
+              lineNumber: 170,
+              columnNumber: 11,
+            },
+          ),
+        'context-app-client',
+        () => [],
+      )
+      const container = createContainer()
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(
+          /* @__PURE__ */ jsxDEV(App, {}, void 0, false, {
+            fileName: 'packages/eclipsa/core/context.test.ts',
+            lineNumber: 180,
+            columnNumber: 32,
+          }),
+          container,
+        ),
+      )
+      expect(collectText(nodes)).toBe('dark')
+    }))
+  it('uses the nearest provider value for nested providers', () => {
+    const ThemeContext = createContext()
+    const ReadTheme = __eclipsaComponent(
+      (props) =>
+        /* @__PURE__ */ jsxDEV(
+          'span',
+          { children: [props.label, ':', useContext(ThemeContext)] },
+          void 0,
+          true,
+          {
+            fileName: 'packages/eclipsa/core/context.test.ts',
+            lineNumber: 190,
+            columnNumber: 9,
+          },
+        ),
+      'context-read-nested',
+      () => [],
+    )
+    const App = __eclipsaComponent(
+      () =>
+        /* @__PURE__ */ jsxDEV(
+          ThemeContext.Provider,
+          {
+            value: 'outer',
+            children: [
+              /* @__PURE__ */ jsxDEV(ReadTheme, { label: 'outer' }, void 0, false, {
+                fileName: 'packages/eclipsa/core/context.test.ts',
+                lineNumber: 200,
+                columnNumber: 11,
+              }),
+              /* @__PURE__ */ jsxDEV(
+                ThemeContext.Provider,
+                {
+                  value: 'inner',
+                  children: /* @__PURE__ */ jsxDEV(ReadTheme, { label: 'inner' }, void 0, false, {
+                    fileName: 'packages/eclipsa/core/context.test.ts',
+                    lineNumber: 202,
+                    columnNumber: 13,
+                  }),
+                },
+                void 0,
+                false,
+                {
+                  fileName: 'packages/eclipsa/core/context.test.ts',
+                  lineNumber: 201,
+                  columnNumber: 11,
+                },
+              ),
+            ],
+          },
+          void 0,
+          true,
+          {
+            fileName: 'packages/eclipsa/core/context.test.ts',
+            lineNumber: 199,
+            columnNumber: 9,
+          },
+        ),
+      'context-app-nested',
+      () => [],
+    )
+    const { html } = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(App, {}, void 0, false, {
+        fileName: 'packages/eclipsa/core/context.test.ts',
+        lineNumber: 210,
+        columnNumber: 38,
+      }),
+    )
+    expect(html).toContain('<span>outer:outer</span>')
+    expect(html).toContain('<span>inner:inner</span>')
+  })
+  it('does not leak provider values across sibling branches', () => {
+    const ThemeContext = createContext()
+    const ReadTheme = __eclipsaComponent(
+      () =>
+        /* @__PURE__ */ jsxDEV('span', { children: useContext(ThemeContext) }, void 0, false, {
+          fileName: 'packages/eclipsa/core/context.test.ts',
+          lineNumber: 219,
+          columnNumber: 13,
+        }),
+      'context-read-sibling',
+      () => [],
+    )
+    const App = __eclipsaComponent(
+      () =>
+        /* @__PURE__ */ jsxDEV(
+          Fragment,
+          {
+            children: [
+              /* @__PURE__ */ jsxDEV(
+                ThemeContext.Provider,
+                {
+                  value: 'left',
+                  children: /* @__PURE__ */ jsxDEV(ReadTheme, {}, void 0, false, {
+                    fileName: 'packages/eclipsa/core/context.test.ts',
+                    lineNumber: 227,
+                    columnNumber: 13,
+                  }),
+                },
+                void 0,
+                false,
+                {
+                  fileName: 'packages/eclipsa/core/context.test.ts',
+                  lineNumber: 226,
+                  columnNumber: 11,
+                },
+              ),
+              /* @__PURE__ */ jsxDEV(
+                ThemeContext.Provider,
+                {
+                  value: 'right',
+                  children: /* @__PURE__ */ jsxDEV(ReadTheme, {}, void 0, false, {
+                    fileName: 'packages/eclipsa/core/context.test.ts',
+                    lineNumber: 230,
+                    columnNumber: 13,
+                  }),
+                },
+                void 0,
+                false,
+                {
+                  fileName: 'packages/eclipsa/core/context.test.ts',
+                  lineNumber: 229,
+                  columnNumber: 11,
+                },
+              ),
+            ],
+          },
+          void 0,
+          true,
+          {
+            fileName: 'packages/eclipsa/core/context.test.ts',
+            lineNumber: 225,
+            columnNumber: 9,
+          },
+        ),
+      'context-app-sibling',
+      () => [],
+    )
+    const { html } = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(App, {}, void 0, false, {
+        fileName: 'packages/eclipsa/core/context.test.ts',
+        lineNumber: 238,
+        columnNumber: 38,
+      }),
+    )
+    expect(html).toContain('<span>left</span>')
+    expect(html).toContain('<span>right</span>')
+  })
+  it('returns the default value when no provider exists', () => {
+    const ThemeContext = createContext('light')
+    const ReadTheme = __eclipsaComponent(
+      () =>
+        /* @__PURE__ */ jsxDEV('p', { children: useContext(ThemeContext) }, void 0, false, {
+          fileName: 'packages/eclipsa/core/context.test.ts',
+          lineNumber: 247,
+          columnNumber: 13,
+        }),
+      'context-read-default',
+      () => [],
+    )
+    const { html } = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(ReadTheme, {}, void 0, false, {
+        fileName: 'packages/eclipsa/core/context.test.ts',
+        lineNumber: 252,
+        columnNumber: 38,
+      }),
+    )
+    expect(html).toContain('<p>light</p>')
+  })
+  it('throws when no matching provider exists', () => {
+    const ThemeContext = createContext()
+    const ReadTheme = __eclipsaComponent(
+      () =>
+        /* @__PURE__ */ jsxDEV('p', { children: useContext(ThemeContext) }, void 0, false, {
+          fileName: 'packages/eclipsa/core/context.test.ts',
+          lineNumber: 260,
+          columnNumber: 13,
+        }),
+      'context-read-missing',
+      () => [],
+    )
+    expect(() =>
+      renderSSR(() =>
+        /* @__PURE__ */ jsxDEV(ReadTheme, {}, void 0, false, {
+          fileName: 'packages/eclipsa/core/context.test.ts',
+          lineNumber: 265,
+          columnNumber: 34,
+        }),
+      ),
+    ).toThrowError('useContext() could not find a matching context provider.')
+  })
+  it('throws when called outside a component render', () => {
+    const ThemeContext = createContext()
+    expect(() => useContext(ThemeContext)).toThrowError(
+      'useContext() can only be used while rendering a component.',
+    )
+  })
+})
diff --git a/packages/eclipsa/core/context.ts b/packages/eclipsa/core/context.ts
new file mode 100644
index 0000000..58d3e90
--- /dev/null
+++ b/packages/eclipsa/core/context.ts
@@ -0,0 +1,197 @@
+import type { JSX } from '../jsx/types.ts'
+import type { Component } from './component.ts'
+import {
+  getRuntimeContextValue,
+  hasActiveRuntimeComponent,
+  type RuntimeContextToken,
+} from './runtime.ts'
+
+const CONTEXT_PROVIDER_META_KEY = Symbol.for('eclipsa.context-provider-meta')
+const CONTEXT_TOKEN_KEY = Symbol.for('eclipsa.context-token')
+const CONTEXT_REGISTRY_KEY = Symbol.for('eclipsa.context-registry')
+const CONTEXT_NEXT_ID_KEY = Symbol.for('eclipsa.context-next-id')
+
+interface ContextProviderMeta<T = unknown> {
+  id: string
+  token: RuntimeContextToken<T>
+}
+
+interface RuntimeContextState<T> {
+  defaultValue: T | undefined
+  hasDefault: boolean
+  id: string
+  token: RuntimeContextToken<T>
+}
+
+interface RuntimeContext<T> extends Context<T> {
+  [CONTEXT_TOKEN_KEY]: RuntimeContextState<T>
+}
+
+interface ContextProviderComponent<T> extends Component<ContextProviderProps<T>> {
+  [CONTEXT_PROVIDER_META_KEY]?: ContextProviderMeta<T>
+}
+
+export interface ContextProviderProps<T> {
+  children?: JSX.Element | JSX.Element[]
+  value: T
+}
+
+export interface Context<T> {
+  Provider: Component<ContextProviderProps<T>>
+}
+
+interface SerializedContextDescriptor<T = unknown> {
+  defaultValue: T | undefined
+  hasDefault: boolean
+  id: string
+}
+
+const getContextRegistry = () => {
+  const globalRecord = globalThis as Record<PropertyKey, unknown>
+  let registry = globalRecord[CONTEXT_REGISTRY_KEY] as Map<string, Context<unknown>> | undefined
+  if (!registry) {
+    registry = new Map()
+    globalRecord[CONTEXT_REGISTRY_KEY] = registry
+  }
+  return registry
+}
+
+const allocateContextId = () => {
+  const globalRecord = globalThis as Record<PropertyKey, unknown>
+  const nextId = ((globalRecord[CONTEXT_NEXT_ID_KEY] as number | undefined) ?? 0) + 1
+  globalRecord[CONTEXT_NEXT_ID_KEY] = nextId
+  return `ctx${nextId}`
+}
+
+const getContextStateMaybe = <T>(context: unknown): RuntimeContextState<T> | null =>
+  context &&
+  (typeof context === 'object' || typeof context === 'function') &&
+  CONTEXT_TOKEN_KEY in (context as Record<PropertyKey, unknown>)
+    ? ((context as RuntimeContext<T>)[CONTEXT_TOKEN_KEY] ?? null)
+    : null
+
+const getContextState = <T>(context: Context<T>): RuntimeContextState<T> => {
+  const state = getContextStateMaybe<T>(context)
+  if (!state) {
+    throw new TypeError('useContext() expects a context created by createContext().')
+  }
+  return state
+}
+
+export const getContextProviderMeta = (value: unknown): ContextProviderMeta | null => {
+  if (typeof value !== 'function') {
+    return null
+  }
+  return (
+    ((value as unknown as Record<PropertyKey, unknown>)[CONTEXT_PROVIDER_META_KEY] as
+      | ContextProviderMeta
+      | undefined) ?? null
+  )
+}
+
+const registerContext = <T>(id: string, context: Context<T>) => {
+  getContextRegistry().set(id, context as Context<unknown>)
+}
+
+const createContextWithId = <T>(
+  id: string,
+  hasDefault: boolean,
+  defaultValue: T | undefined,
+): Context<T> => {
+  const token = Symbol.for(`eclipsa.context:${id}`) as RuntimeContextToken<T>
+  const Provider = ((props: ContextProviderProps<T>) =>
+    props.children) as ContextProviderComponent<T>
+
+  Object.defineProperty(Provider, CONTEXT_PROVIDER_META_KEY, {
+    configurable: true,
+    enumerable: false,
+    value: {
+      id,
+      token,
+    } satisfies ContextProviderMeta<T>,
+    writable: false,
+  })
+
+  const context = {
+    Provider,
+  } as RuntimeContext<T>
+
+  Object.defineProperty(context, CONTEXT_TOKEN_KEY, {
+    configurable: false,
+    enumerable: false,
+    value: {
+      defaultValue,
+      hasDefault,
+      id,
+      token,
+    } satisfies RuntimeContextState<T>,
+    writable: false,
+  })
+
+  registerContext(id, context)
+  return context
+}
+
+export const createContext = <T>(...args: [defaultValue?: T]): Context<T> =>
+  createContextWithId(allocateContextId(), args.length > 0, args[0])
+
+export const getRuntimeContextReference = (value: unknown) => {
+  const state = getContextStateMaybe(value)
+  if (state) {
+    return {
+      defaultValue: state.defaultValue,
+      hasDefault: state.hasDefault,
+      id: state.id,
+      kind: 'context' as const,
+    }
+  }
+
+  const providerMeta = getContextProviderMeta(value)
+  if (!providerMeta) {
+    return null
+  }
+
+  const context = getContextRegistry().get(providerMeta.id)
+  const contextState = context ? getContextState(context) : null
+  return {
+    defaultValue: contextState?.defaultValue,
+    hasDefault: contextState?.hasDefault ?? false,
+    id: providerMeta.id,
+    kind: 'context-provider' as const,
+  }
+}
+
+const materializeContextWithDescriptor = <T>({
+  defaultValue,
+  hasDefault,
+  id,
+}: SerializedContextDescriptor<T>): Context<T> => {
+  const existing = getContextRegistry().get(id) as Context<T> | undefined
+  if (existing) {
+    return existing
+  }
+  return createContextWithId(id, hasDefault, defaultValue)
+}
+
+export const materializeRuntimeContext = <T>(descriptor: SerializedContextDescriptor<T>) =>
+  materializeContextWithDescriptor(descriptor)
+
+export const materializeRuntimeContextProvider = <T>(descriptor: SerializedContextDescriptor<T>) =>
+  materializeContextWithDescriptor(descriptor).Provider
+
+export const useContext = <T>(context: Context<T>): T => {
+  if (!hasActiveRuntimeComponent()) {
+    throw new Error('useContext() can only be used while rendering a component.')
+  }
+
+  const state = getContextState(context)
+  const resolved = getRuntimeContextValue(state.token)
+  if (!resolved.found) {
+    if (state.hasDefault) {
+      return state.defaultValue as T
+    }
+    throw new Error('useContext() could not find a matching context provider.')
+  }
+
+  return resolved.value as T
+}
diff --git a/packages/eclipsa/core/context.typecheck.ts b/packages/eclipsa/core/context.typecheck.ts
new file mode 100644
index 0000000..b8db53c
--- /dev/null
+++ b/packages/eclipsa/core/context.typecheck.ts
@@ -0,0 +1,47 @@
+import type { Component } from './component.ts'
+import { createContext, useContext, type Context, type ContextProviderProps } from './context.ts'
+
+type Equal<Left, Right> =
+  (<T>() => T extends Left ? 1 : 2) extends <T>() => T extends Right ? 1 : 2 ? true : false
+type Expect<T extends true> = T
+
+const NumberContext = createContext<number>()
+const DefaultNumberContext = createContext(1)
+
+type _Context = Expect<Equal<typeof NumberContext, Context<number>>>
+type _Provider = Expect<
+  Equal<typeof NumberContext.Provider, Component<ContextProviderProps<number>>>
+>
+type _ProviderProps = Expect<
+  Equal<Parameters<typeof NumberContext.Provider>[0], ContextProviderProps<number>>
+>
+type _DefaultContext = Expect<Equal<typeof DefaultNumberContext, Context<number>>>
+
+const readNumber = () => {
+  const value = useContext(NumberContext)
+  type _Value = Expect<Equal<typeof value, number>>
+  return value
+}
+
+const readDefaultNumber = () => {
+  const value = useContext(DefaultNumberContext)
+  type _Value = Expect<Equal<typeof value, number>>
+  return value
+}
+
+void readDefaultNumber()
+
+declare const NumberProvider: typeof NumberContext.Provider
+
+NumberProvider({
+  children: 'ok',
+  value: readNumber(),
+})
+
+NumberProvider({
+  // @ts-expect-error Provider value must match the context type.
+  value: 'nope',
+})
+
+createContext<string>('ok')
+createContext<string>()
diff --git a/packages/eclipsa/core/dangerously-set-inner-html.test.tsx b/packages/eclipsa/core/dangerously-set-inner-html.test.ts
similarity index 57%
rename from packages/eclipsa/core/dangerously-set-inner-html.test.tsx
rename to packages/eclipsa/core/dangerously-set-inner-html.test.ts
index e7d3e7f..89f61e4 100644
--- a/packages/eclipsa/core/dangerously-set-inner-html.test.tsx
+++ b/packages/eclipsa/core/dangerously-set-inner-html.test.ts
@@ -1,99 +1,91 @@
 import { describe, expect, it } from 'vitest'
 import { jsxDEV } from '../jsx/jsx-dev-runtime.ts'
-import { renderClientInsertable, type RuntimeContainer, withRuntimeContainer } from './runtime.ts'
+import { renderClientInsertable, withRuntimeContainer } from './runtime.ts'
 import { renderSSR } from './ssr.ts'
-
 class FakeNode {
-  childNodes: FakeNode[] = []
+  childNodes = []
   nodeType = 0
-  parentNode: FakeNode | null = null
+  parentNode = null
 }
-
 class FakeText extends FakeNode {
-  constructor(readonly data: string) {
+  constructor(data) {
     super()
+    this.data = data
     this.nodeType = 3
   }
 }
-
 class FakeComment extends FakeNode {
-  constructor(readonly data: string) {
+  constructor(data) {
     super()
+    this.data = data
     this.nodeType = 8
   }
 }
-
 class FakeElement extends FakeNode {
-  attributes = new Map<string, string>()
-  childNodes: FakeNode[] = []
-  innerHTML = ''
-
-  constructor(readonly tagName: string) {
+  constructor(tagName) {
     super()
+    this.tagName = tagName
     this.nodeType = 1
   }
-
-  appendChild(node: FakeNode) {
+  attributes = /* @__PURE__ */ new Map()
+  childNodes = []
+  innerHTML = ''
+  appendChild(node) {
     node.parentNode = this
     this.childNodes.push(node)
     return node
   }
-
-  setAttribute(name: string, value: string) {
+  setAttribute(name, value) {
     this.attributes.set(name, value)
   }
 }
-
 class FakeDocument {
-  createComment(data: string) {
-    return new FakeComment(data) as unknown as Comment
+  createComment(data) {
+    return new FakeComment(data)
   }
-
-  createElement(tagName: string) {
-    return new FakeElement(tagName) as unknown as HTMLElement
+  createElement(tagName) {
+    return new FakeElement(tagName)
   }
-
-  createTextNode(data: string) {
-    return new FakeText(data) as unknown as Text
+  createTextNode(data) {
+    return new FakeText(data)
   }
 }
-
-const createContainer = () =>
-  ({
-    actions: new Map(),
-    actionStates: new Map(),
-    components: new Map(),
-    dirty: new Set(),
-    doc: new FakeDocument() as unknown as Document,
-    imports: new Map(),
-    loaderStates: new Map(),
-    loaders: new Map(),
-    id: 'rt-test',
-    nextComponentId: 0,
-    nextElementId: 0,
-    nextScopeId: 0,
-    nextSignalId: 0,
-    rootChildCursor: 0,
-    rootElement: undefined,
-    router: null,
-    scopes: new Map(),
-    signals: new Map(),
-    symbols: new Map(),
-    visibilityCheckQueued: false,
-    visibilityListenersCleanup: null,
-    visibles: new Map(),
-    watches: new Map(),
-  }) as RuntimeContainer
-
-function withFakeNodeGlobal<T>(fn: () => T): T {
+const createContainer = () => ({
+  actions: /* @__PURE__ */ new Map(),
+  actionStates: /* @__PURE__ */ new Map(),
+  atoms: /* @__PURE__ */ new WeakMap(),
+  components: /* @__PURE__ */ new Map(),
+  dirty: /* @__PURE__ */ new Set(),
+  doc: new FakeDocument(),
+  imports: /* @__PURE__ */ new Map(),
+  loaderStates: /* @__PURE__ */ new Map(),
+  loaders: /* @__PURE__ */ new Map(),
+  id: 'rt-test',
+  nextAtomId: 0,
+  nextComponentId: 0,
+  nextElementId: 0,
+  nextScopeId: 0,
+  nextSignalId: 0,
+  rootChildCursor: 0,
+  rootElement: void 0,
+  router: null,
+  scopes: /* @__PURE__ */ new Map(),
+  signals: /* @__PURE__ */ new Map(),
+  symbols: /* @__PURE__ */ new Map(),
+  visibilityCheckQueued: false,
+  visibilityListenersCleanup: null,
+  visibles: /* @__PURE__ */ new Map(),
+  watches: /* @__PURE__ */ new Map(),
+})
+function withFakeNodeGlobal(fn) {
   const OriginalNode = globalThis.Node
-  globalThis.Node = FakeNode as unknown as typeof Node
+  globalThis.Node = FakeNode
   try {
     const result = fn()
     if (result instanceof Promise) {
       return result.finally(() => {
         globalThis.Node = OriginalNode
-      }) as T
+      })
     }
     globalThis.Node = OriginalNode
     return result
@@ -102,7 +94,6 @@ function withFakeNodeGlobal<T>(fn: () => T): T {
     throw error
   }
 }
-
 describe('dangerouslySetInnerHTML', () => {
   it('renders raw HTML during SSR without outputting the prop name', () => {
     const { html } = renderSSR(() =>
@@ -117,12 +108,10 @@ describe('dangerouslySetInnerHTML', () => {
         {},
       ),
     )
-
     expect(html).toBe('<div><span>raw</span></div>')
     expect(html).not.toContain('dangerouslySetInnerHTML')
     expect(html).not.toContain('fallback')
   })
-
   it('sets innerHTML on client-rendered elements and skips JSX children', () => {
     withFakeNodeGlobal(() => {
       const container = createContainer()
@@ -141,8 +130,7 @@ describe('dangerouslySetInnerHTML', () => {
           container,
         ),
       )
-      const element = nodes[0] as unknown as FakeElement
-
+      const element = nodes[0]
       expect(element.innerHTML).toBe('<span>raw</span>')
       expect(element.attributes.has('dangerouslySetInnerHTML')).toBe(false)
       expect(element.childNodes).toHaveLength(0)
diff --git a/packages/eclipsa/core/dev-client/hot.test.ts b/packages/eclipsa/core/dev-client/hot.test.ts
index 2f980cc..8a35289 100644
--- a/packages/eclipsa/core/dev-client/hot.test.ts
+++ b/packages/eclipsa/core/dev-client/hot.test.ts
@@ -1,7 +1,11 @@
 import { describe, expect, it } from 'vitest'
 import { applyHotUpdate, createHotRegistry, defineHotComponent } from './hot.ts'
-import { component$ } from '../component.ts'
-import { __eclipsaComponent, getComponentMeta } from '../internal.ts'
+import {
+  __eclipsaComponent,
+  getComponentMeta,
+  getExternalComponentMeta,
+  setExternalComponentMeta,
+} from '../internal.ts'
 
 const makeComponent = (value: string) => ((_: unknown) => value) as any
 
@@ -47,12 +51,45 @@ describe('core/dev-client hot', () => {
 
   it('preserves component metadata on wrapped hot components', () => {
     const registry = createHotRegistry()
-    const Component = component$(
+    const Component = __eclipsaComponent(
+      () => 'value',
+      'page-symbol',
+      () => [],
+    )
+
+    const wrapped = defineHotComponent(Component, {
+      registry,
+      name: 'default',
+    })
+
+    expect(getComponentMeta(wrapped)?.symbol).toBe('page-symbol')
+    expect(getComponentMeta(wrapped)?.projectionSlots).toBeUndefined()
+  })
+
+  it('preserves external island metadata on wrapped hot components', () => {
+    const registry = createHotRegistry()
+    const Component = setExternalComponentMeta(
       __eclipsaComponent(
-        () => 'value',
+        (() => null) as any,
         'page-symbol',
         () => [],
+        { children: 1 },
+        { external: { kind: 'react', slots: ['children'] } },
       ),
+      {
+        async hydrate() {
+          return null
+        },
+        kind: 'react',
+        renderToString() {
+          return ''
+        },
+        slots: ['children'],
+        async unmount() {},
+        async update(instance) {
+          return instance
+        },
+      },
     )
 
     const wrapped = defineHotComponent(Component, {
@@ -60,8 +97,12 @@ describe('core/dev-client hot', () => {
       name: 'default',
     })
 
-    expect(getComponentMeta(wrapped)?.symbol).toBe('page-symbol')
-    expect(getComponentMeta(wrapped)?.projectionSlots).toBeUndefined()
+    expect(getComponentMeta(wrapped)?.external).toEqual({
+      kind: 'react',
+      slots: ['children'],
+    })
+    expect(getExternalComponentMeta(wrapped)?.kind).toBe('react')
+    expect(getExternalComponentMeta(wrapped)?.slots).toEqual(['children'])
   })
 
   it('unwraps already hot-wrapped components during updates', () => {
diff --git a/packages/eclipsa/core/dev-client/hot.ts b/packages/eclipsa/core/dev-client/hot.ts
index 0e2e577..3a81b33 100644
--- a/packages/eclipsa/core/dev-client/hot.ts
+++ b/packages/eclipsa/core/dev-client/hot.ts
@@ -1,6 +1,10 @@
 import type { Component } from '../component.ts'
-import { __eclipsaComponent, getComponentMeta } from '../internal.ts'
-import type { JSX } from '../../jsx/jsx-runtime.ts'
+import {
+  __eclipsaComponent,
+  getComponentMeta,
+  getExternalComponentMeta,
+  setExternalComponentMeta,
+} from '../internal.ts'
 
 const HOT_COMPONENT_TARGET_KEY = Symbol.for('eclipsa.hot-component-target')
 
@@ -10,8 +14,9 @@ interface ViteHotContext {
 }
 
 const unwrapHotComponent = (Component: Component): Component =>
-  ((Component as Component & { [HOT_COMPONENT_TARGET_KEY]?: Component })[HOT_COMPONENT_TARGET_KEY] ??
-    Component) as Component
+  ((Component as Component & { [HOT_COMPONENT_TARGET_KEY]?: Component })[
+    HOT_COMPONENT_TARGET_KEY
+  ] ?? Component) as Component
 
 export const initHot = (
   hot: ViteHotContext | undefined,
@@ -57,6 +62,7 @@ interface ComponentMetaInput {
 export const defineHotComponent = (Component: Component, meta: ComponentMetaInput): Component => {
   const current = { value: unwrapHotComponent(Component) }
   const componentMeta = getComponentMeta(Component)
+  const externalMeta = getExternalComponentMeta(Component)
 
   meta.registry.components.set(meta.name, {
     update(newComponent) {
@@ -72,14 +78,19 @@ export const defineHotComponent = (Component: Component, meta: ComponentMetaInpu
   }
   HotComponent[HOT_COMPONENT_TARGET_KEY] = current.value
   if (!componentMeta) {
-    return HotComponent
+    return externalMeta ? setExternalComponentMeta(HotComponent, externalMeta) : HotComponent
   }
-  return __eclipsaComponent(
+  const wrapped = __eclipsaComponent(
     HotComponent,
     componentMeta.symbol,
     componentMeta.captures,
     componentMeta.projectionSlots,
+    {
+      external: componentMeta.external,
+      optimizedRoot: componentMeta.optimizedRoot,
+    },
   )
+  return externalMeta ? setExternalComponentMeta(wrapped, externalMeta) : wrapped
 }
 
 interface HotComponentData {
diff --git a/packages/eclipsa/core/dynamic.test.ts b/packages/eclipsa/core/dynamic.test.ts
new file mode 100644
index 0000000..b619ae8
--- /dev/null
+++ b/packages/eclipsa/core/dynamic.test.ts
@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+import { jsxDEV } from '../jsx/jsx-dev-runtime.ts'
+import { renderToString } from '../jsx/mod.ts'
+import { Dynamic } from './dynamic.ts'
+describe('Dynamic', () => {
+  it('renders the selected intrinsic element without leaking the component prop', () => {
+    expect(
+      renderToString(
+        jsxDEV(
+          Dynamic,
+          {
+            children: 'Save',
+            component: 'button',
+            type: 'button',
+          },
+          null,
+          false,
+          {},
+        ),
+      ),
+    ).toBe('<button type="button">Save</button>')
+  })
+  it('renders nothing when the selected component is nullish', () => {
+    expect(
+      renderToString(
+        jsxDEV(
+          Dynamic,
+          {
+            children: 'Hidden',
+            component: void 0,
+          },
+          null,
+          false,
+          {},
+        ),
+      ),
+    ).toBe('')
+  })
+})
diff --git a/packages/eclipsa/core/dynamic.ts b/packages/eclipsa/core/dynamic.ts
new file mode 100644
index 0000000..699844f
--- /dev/null
+++ b/packages/eclipsa/core/dynamic.ts
@@ -0,0 +1,55 @@
+import { jsxDEV } from '../jsx/jsx-dev-runtime.ts'
+import type { JSX } from '../jsx/types.ts'
+import type { Component } from './component.ts'
+
+export type DynamicRenderable = keyof JSX.IntrinsicElements | Component<any>
+
+type DynamicRenderableProps<TRenderable extends DynamicRenderable> =
+  TRenderable extends keyof JSX.IntrinsicElements
+    ? JSX.IntrinsicElements[TRenderable]
+    : TRenderable extends Component<infer TProps>
+      ? TProps
+      : never
+
+export type DynamicProps<TRenderable extends DynamicRenderable> = {
+  component: TRenderable | null | undefined
+} & DynamicRenderableProps<TRenderable>
+
+type DynamicIntrinsicProps = {
+  [TRenderable in keyof JSX.IntrinsicElements]: DynamicProps<TRenderable>
+}[keyof JSX.IntrinsicElements]
+
+interface DynamicComponentFn {
+  (props: DynamicIntrinsicProps): JSX.Element
+  <TRenderable extends Component<any>>(props: DynamicProps<TRenderable>): JSX.Element
+}
+
+const omitComponentProp = <TRenderable extends DynamicRenderable>(
+  props: DynamicProps<TRenderable>,
+): DynamicRenderableProps<TRenderable> => {
+  const descriptors = Object.getOwnPropertyDescriptors(props)
+  delete descriptors.component
+
+  const nextProps = {}
+  Object.defineProperties(nextProps, descriptors)
+  return nextProps as DynamicRenderableProps<TRenderable>
+}
+
+export const Dynamic = ((
+  props: {
+    component: JSX.Type | null | undefined
+  } & Record<string, unknown>,
+): JSX.Element => {
+  const component = props.component
+  if (component === null || component === undefined) {
+    return null
+  }
+
+  return jsxDEV(
+    component as JSX.Type,
+    omitComponentProp(props) as Record<string, unknown>,
+    null,
+    false,
+    {},
+  )
+}) as DynamicComponentFn
diff --git a/packages/eclipsa/core/dynamic.typecheck.tsx b/packages/eclipsa/core/dynamic.typecheck.tsx
new file mode 100644
index 0000000..cb6963a
--- /dev/null
+++ b/packages/eclipsa/core/dynamic.typecheck.tsx
@@ -0,0 +1,59 @@
+import type { Component } from './component.ts'
+import type { JSX } from '../jsx/types.ts'
+import { Dynamic, type DynamicProps } from './dynamic.ts'
+
+type Equal<Left, Right> =
+  (<T>() => T extends Left ? 1 : 2) extends <T>() => T extends Right ? 1 : 2 ? true : false
+type Expect<T extends true> = T
+
+type CardProps = {
+  children?: unknown
+  open: boolean
+}
+
+const Card: Component<CardProps> = (_props) => null
+
+type _AnchorProps = Expect<
+  Equal<
+    DynamicProps<'a'>,
+    JSX.IntrinsicElements['a'] & {
+      component: 'a' | null | undefined
+    }
+  >
+>
+type _CardProps = Expect<
+  Equal<
+    DynamicProps<typeof Card>,
+    CardProps & {
+      component: typeof Card | null | undefined
+    }
+  >
+>
+
+;<Dynamic component="a" href="/docs/getting-started/overview" rel="noreferrer" />
+
+;<Dynamic component="button" type="button" onClick={(event) => event.currentTarget.focus()}>
+  Save
+</Dynamic>
+
+;<Dynamic component={Card} open />
+
+;<Dynamic component={Card} open>
+  Content
+</Dynamic>
+
+;<Dynamic component={undefined} />
+
+const invalidAnchorProps: DynamicProps<'a'> = {
+  component: 'a',
+  // @ts-expect-error anchor props should not accept button-only attributes.
+  disabled: true,
+}
+
+void invalidAnchorProps
+
+// @ts-expect-error custom component props must match the selected component.
+;<Dynamic component={Card} href="/broken" />
+
+// @ts-expect-error required component props remain required.
+;<Dynamic component={Card} />
diff --git a/packages/eclipsa/core/env.test.ts b/packages/eclipsa/core/env.test.ts
new file mode 100644
index 0000000..5689aed
--- /dev/null
+++ b/packages/eclipsa/core/env.test.ts
@@ -0,0 +1,11 @@
+import { describe, expect, it } from 'vitest'
+
+import { IS_BROWSER, IS_SSR } from './mod.ts'
+
+describe('env flags', () => {
+  it('exports complementary browser and ssr flags', () => {
+    expect(IS_BROWSER).toBe(false)
+    expect(IS_SSR).toBe(true)
+    expect(IS_BROWSER).toBe(!IS_SSR)
+  })
+})
diff --git a/packages/eclipsa/core/env.ts b/packages/eclipsa/core/env.ts
new file mode 100644
index 0000000..7f4ca4b
--- /dev/null
+++ b/packages/eclipsa/core/env.ts
@@ -0,0 +1 @@
+export { IS_BROWSER, IS_SSR } from './shared.ts'
diff --git a/packages/eclipsa/core/flow/mod.ts b/packages/eclipsa/core/flow/mod.ts
index 3c3780b..ce46441 100644
--- a/packages/eclipsa/core/flow/mod.ts
+++ b/packages/eclipsa/core/flow/mod.ts
@@ -1,9 +1,41 @@
 import type { JSX } from '../../jsx/jsx-runtime.ts'
 
-export const For = <T>(props: { arr: T[]; fn: (e: T, i: number) => JSX.Element }) => {
-  const result: JSX.Element[] = []
-  for (let i = 0; i < props.arr.length; i++) {
-    result.push(props.fn(props.arr[i], i))
-  }
-  return result as unknown as JSX.Element
+type Key = string | number | symbol
+type ShowBranch<T> = JSX.Element | ((value: T) => JSX.Element)
+
+interface ForValue<T> {
+  __e_for: true
+  arr: readonly T[]
+  fallback?: JSX.Element
+  fn: (e: T, i: number) => JSX.Element
+  key?: (e: T, i: number) => Key
+}
+
+interface ShowValue<T> {
+  __e_show: true
+  children: ShowBranch<T>
+  fallback?: ShowBranch<T>
+  when: T
 }
+
+export const For = <T>(props: {
+  arr: readonly T[]
+  fallback?: JSX.Element
+  fn: (e: T, i: number) => JSX.Element
+  key?: (e: T, i: number) => Key
+}) =>
+  ({
+    __e_for: true,
+    arr: props.arr,
+    fallback: props.fallback,
+    fn: props.fn,
+    key: props.key,
+  }) as ForValue<T> as unknown as JSX.Element
+
+export const Show = <T>(props: { children: ShowBranch<T>; fallback?: ShowBranch<T>; when: T }) =>
+  ({
+    __e_show: true,
+    children: props.children,
+    fallback: props.fallback,
+    when: props.when,
+  }) as ShowValue<T> as unknown as JSX.Element
diff --git a/packages/eclipsa/core/hooks.test.ts b/packages/eclipsa/core/hooks.test.ts
new file mode 100644
index 0000000..0c47c1c
--- /dev/null
+++ b/packages/eclipsa/core/hooks.test.ts
@@ -0,0 +1,26 @@
+import { afterEach, describe, expect, it } from 'vitest'
+
+import { getCurrentServerRequestContext, withServerRequestContext } from './hooks.ts'
+
+const restoreBrowserGlobals = () => {
+  Reflect.deleteProperty(globalThis, 'document')
+  Reflect.deleteProperty(globalThis, 'window')
+}
+
+describe('server request context', () => {
+  afterEach(() => {
+    restoreBrowserGlobals()
+  })
+
+  it('skips AsyncLocalStorage state when running in a browser-like runtime', () => {
+    Object.assign(globalThis, {
+      document: {} as Document,
+      window: {} as Window & typeof globalThis,
+    })
+
+    const value = withServerRequestContext({} as never, {}, () => 'ok')
+
+    expect(value).toBe('ok')
+    expect(getCurrentServerRequestContext()).toBeNull()
+  })
+})
diff --git a/packages/eclipsa/core/hooks.ts b/packages/eclipsa/core/hooks.ts
new file mode 100644
index 0000000..439820e
--- /dev/null
+++ b/packages/eclipsa/core/hooks.ts
@@ -0,0 +1,369 @@
+import type { Context } from 'hono'
+import type { Env } from 'hono/types'
+import type { AsyncLocalStorage } from 'node:async_hooks'
+import {
+  deserializeValue,
+  serializeValue,
+  type DeserializeValueOptions,
+  type SerializedReference,
+  type SerializedValue,
+  type SerializeValueOptions,
+} from './serialize.ts'
+import { IS_BROWSER, isPlainObject } from './shared.ts'
+
+export type { DeserializeValueOptions, SerializeValueOptions, SerializedReference, SerializedValue }
+
+export const APP_HOOKS_ELEMENT_ID = 'eclipsa-app-hooks'
+
+export interface AppVariables {}
+
+export interface PublicErrorShape {
+  message: string
+  [key: string]: unknown
+}
+
+export interface PublicError extends PublicErrorShape {}
+
+export interface AppHooksManifest {
+  client: string | null
+}
+
+export type RequestFetch = typeof fetch
+
+export type BaseAppVariables = AppVariables & {
+  fetch: RequestFetch
+}
+
+export interface AppEnv extends Env {
+  Variables: BaseAppVariables
+}
+
+type EnvVariables<E extends Env> = E extends {
+  Variables: infer Variables
+}
+  ? Variables
+  : {}
+
+export type WithAppEnv<E extends Env = Env> = Omit<E, 'Variables'> & {
+  Variables: EnvVariables<E> & BaseAppVariables
+}
+
+export type AppContext<E extends Env = Env> = Context<WithAppEnv<E>>
+
+export interface HandleResolveOptions {
+  pathname?: string
+}
+
+export type HandleResolve<E extends Env = Env> = (
+  context?: AppContext<E>,
+  options?: HandleResolveOptions,
+) => Promise<Response>
+
+export type Handle<E extends Env = Env> = (
+  context: AppContext<E>,
+  resolve: HandleResolve<E>,
+) => Response | Promise<Response>
+
+export type HandleFetch<E extends Env = Env> = (
+  context: AppContext<E>,
+  request: Request,
+  fetch: RequestFetch,
+) => Response | Promise<Response>
+
+export interface HandleErrorInput<E extends Env = Env> {
+  context: AppContext<E>
+  error: unknown
+  event: 'action' | 'handle' | 'loader' | 'middleware' | 'page' | 'server' | 'transport'
+}
+
+export type HandleError<E extends Env = Env> = (
+  input: HandleErrorInput<E>,
+) => PublicError | void | Promise<PublicError | void>
+
+export type Reroute = (input: { request: Request | null; url: URL }) => string | URL | void
+
+export interface TransportHook {
+  decode: (value: unknown) => unknown
+  encode: (value: unknown) => unknown
+}
+
+export type Transport = Record<string, TransportHook>
+
+export type ServerInit = () => void | Promise<void>
+
+export interface ServerHooksModule<E extends Env = Env> {
+  handle?: Handle<E>
+  handleError?: HandleError<E>
+  handleFetch?: HandleFetch<E>
+  init?: ServerInit
+}
+
+export interface AppHooksModule {
+  reroute?: Reroute
+  transport?: Transport
+}
+
+export interface ResolvedHooks<E extends Env = Env> {
+  app: AppHooksModule
+  server: ServerHooksModule<E>
+}
+
+const PUBLIC_ERROR_KEY = Symbol.for('eclipsa.public-error')
+
+type RequestContextStore = {
+  context: AppContext<any>
+  handleError?: HandleError<any>
+  transport?: Transport
+}
+
+let requestContextStorage: AsyncLocalStorage<RequestContextStore> | null = null
+
+let clientHooks: AppHooksModule = {}
+
+type AsyncLocalStorageConstructor = new <T>() => AsyncLocalStorage<T>
+
+const getAsyncLocalStorageConstructor = (): AsyncLocalStorageConstructor | null => {
+  if (IS_BROWSER || typeof process === 'undefined') {
+    return null
+  }
+  const asyncHooks = (
+    process as typeof process & {
+      getBuiltinModule?: (id: string) => unknown
+    }
+  ).getBuiltinModule?.('node:async_hooks') as
+    | {
+        AsyncLocalStorage?: AsyncLocalStorageConstructor
+      }
+    | undefined
+  return typeof asyncHooks?.AsyncLocalStorage === 'function' ? asyncHooks.AsyncLocalStorage : null
+}
+
+const getRequestContextStorage = () => {
+  const AsyncLocalStorageCtor = getAsyncLocalStorageConstructor()
+  if (!AsyncLocalStorageCtor) {
+    return null
+  }
+  requestContextStorage ??= new AsyncLocalStorageCtor<RequestContextStore>()
+  return requestContextStorage
+}
+
+const normalizePublicError = (value: unknown): PublicError => {
+  if (value && typeof value === 'object') {
+    const message = (value as { message?: unknown }).message
+    if (typeof message === 'string' && message.length > 0) {
+      return value as PublicError
+    }
+  }
+  if (value instanceof Error) {
+    return {
+      message: value.message || 'Internal Server Error',
+      name: value.name,
+    }
+  }
+  return {
+    message: 'Internal Server Error',
+  }
+}
+
+const getActiveTransport = () =>
+  getRequestContextStorage()?.getStore()?.transport ?? clientHooks.transport
+
+const serializeTransportReference = (
+  value: unknown,
+  transport: Transport,
+): SerializedReference | null => {
+  for (const [key, hook] of Object.entries(transport)) {
+    const encoded = hook.encode(value)
+    if (encoded === undefined) {
+      continue
+    }
+    return {
+      __eclipsa_type: 'ref',
+      data: serializeValue(encoded),
+      kind: 'transport',
+      token: key,
+    }
+  }
+  return null
+}
+
+const deserializeTransportReference = (reference: SerializedReference, transport: Transport) => {
+  const hook = transport[reference.token]
+  if (!hook) {
+    throw new TypeError(`Unknown transport "${reference.token}".`)
+  }
+  return hook.decode(reference.data === undefined ? undefined : deserializeValue(reference.data))
+}
+
+export const serializePublicValue = (
+  value: unknown,
+  options?: SerializeValueOptions,
+): SerializedValue =>
+  serializeValue(value, {
+    ...options,
+    serializeReference(candidate) {
+      const resolved = options?.serializeReference?.(candidate) ?? null
+      if (resolved) {
+        return resolved
+      }
+      const transport = getActiveTransport()
+      return transport ? serializeTransportReference(candidate, transport) : null
+    },
+  })
+
+export const deserializePublicValue = (
+  value: SerializedValue,
+  options?: DeserializeValueOptions,
+): unknown =>
+  deserializeValue(value, {
+    ...options,
+    deserializeReference(reference) {
+      const resolved = options?.deserializeReference?.(reference)
+      if (resolved !== undefined) {
+        return resolved
+      }
+      const transport = getActiveTransport()
+      if (reference.kind === 'transport' && transport) {
+        return deserializeTransportReference(reference, transport)
+      }
+      if (reference.kind === 'transport') {
+        throw new TypeError(`Unknown transport "${reference.token}".`)
+      }
+      if (!options?.deserializeReference) {
+        throw new TypeError(
+          `Cannot deserialize reference kind "${reference.kind}" in this context.`,
+        )
+      }
+      return options.deserializeReference(reference)
+    },
+  })
+
+export const withServerRequestContext = <T>(
+  context: AppContext<any>,
+  hooks: {
+    handleError?: HandleError<any>
+    transport?: Transport
+  },
+  fn: () => T,
+) => {
+  const storage = getRequestContextStorage()
+  if (!storage) {
+    return fn()
+  }
+  return storage.run(
+    {
+      context,
+      handleError: hooks.handleError,
+      transport: hooks.transport,
+    },
+    fn,
+  )
+}
+
+export const getCurrentServerRequestContext = () =>
+  getRequestContextStorage()?.getStore()?.context ?? null
+
+export const transformCurrentPublicError = async (
+  error: unknown,
+  event: HandleErrorInput<any>['event'],
+) => {
+  const store = getRequestContextStorage()?.getStore()
+  const publicError = store
+    ? await runHandleError(
+        {
+          handleError: store.handleError,
+        },
+        {
+          context: store.context,
+          error,
+          event,
+        },
+      )
+    : toPublicError(error)
+  return markPublicError(error, publicError)
+}
+
+export const createRequestFetch = (
+  context: AppContext<any>,
+  handleFetch?: HandleFetch<any>,
+): RequestFetch => {
+  const baseFetch: RequestFetch = ((input: Request | URL | string, init?: RequestInit) => {
+    const request = input instanceof Request ? input : new Request(input, init)
+    return fetch(request)
+  }) as RequestFetch
+
+  if (!handleFetch) {
+    return baseFetch
+  }
+
+  return (async (input: Request | URL | string, init?: RequestInit) => {
+    const request = input instanceof Request ? input : new Request(input, init)
+    return handleFetch(context, request, baseFetch)
+  }) as RequestFetch
+}
+
+export const attachRequestFetch = <E extends Env>(
+  context: AppContext<E>,
+  fetchImpl: RequestFetch,
+) => {
+  context.set('fetch' as never, fetchImpl as never)
+}
+
+export const resolveReroute = (
+  reroute: Reroute | undefined,
+  request: Request | null,
+  pathname: string,
+  baseUrl: string,
+) => {
+  if (!reroute) {
+    return pathname
+  }
+  const url = new URL(pathname, baseUrl)
+  const resolved = reroute({ request, url })
+  if (!resolved) {
+    return pathname
+  }
+  const nextUrl = resolved instanceof URL ? resolved : new URL(String(resolved), url)
+  return nextUrl.pathname
+}
+
+export const toPublicError = (error: unknown): PublicError =>
+  error &&
+  typeof error === 'object' &&
+  (error as Record<PropertyKey, unknown>)[PUBLIC_ERROR_KEY] &&
+  isPlainObject((error as Record<PropertyKey, unknown>)[PUBLIC_ERROR_KEY])
+    ? ((error as Record<PropertyKey, unknown>)[PUBLIC_ERROR_KEY] as PublicError)
+    : normalizePublicError(error)
+
+export const markPublicError = <T>(error: T, publicError: PublicError): T => {
+  if (!error || (typeof error !== 'object' && typeof error !== 'function')) {
+    return error
+  }
+  Object.defineProperty(error as Record<PropertyKey, unknown>, PUBLIC_ERROR_KEY, {
+    configurable: true,
+    enumerable: false,
+    value: publicError,
+    writable: true,
+  })
+  return error
+}
+
+export const runHandleError = async (
+  hooks: {
+    handleError?: HandleError<any>
+  },
+  input: HandleErrorInput<any>,
+) => {
+  const transformed = await hooks.handleError?.(input)
+  return transformed ? normalizePublicError(transformed) : toPublicError(input.error)
+}
+
+export const registerClientHooks = (hooks: AppHooksModule) => {
+  clientHooks = hooks
+}
+
+export const getClientHooks = () => clientHooks
+
+export const resetClientHooks = () => {
+  clientHooks = {}
+}
diff --git a/packages/eclipsa/core/internal.ts b/packages/eclipsa/core/internal.ts
index fe4956a..4f6311b 100644
--- a/packages/eclipsa/core/internal.ts
+++ b/packages/eclipsa/core/internal.ts
@@ -3,8 +3,18 @@ import type { Navigate } from './router-shared.ts'
 
 export { __eclipsaAction } from './action.ts'
 export { __eclipsaLoader } from './loader.ts'
+export {
+  createDetachedRuntimeComponent,
+  createDetachedRuntimeContainer,
+  disposeDetachedRuntimeComponent,
+  getRuntimeComponentId,
+  runDetachedRuntimeComponent,
+} from './runtime.ts'
+export type { ComponentState, RuntimeContainer } from './runtime/types.ts'
+export { createRouteElement, isRouteSlot, resolveRouteSlot } from './runtime/routes.ts'
 
 const COMPONENT_META_KEY = Symbol.for('eclipsa.component-meta')
+const EXTERNAL_COMPONENT_META_KEY = Symbol.for('eclipsa.external-component-meta')
 const LAZY_META_KEY = Symbol.for('eclipsa.lazy-meta')
 const NAVIGATE_META_KEY = Symbol.for('eclipsa.navigate-meta')
 const SIGNAL_META_KEY = Symbol.for('eclipsa.signal-meta')
@@ -18,10 +28,33 @@ const LOADER_HOOK_REGISTRY_KEY = Symbol.for('eclipsa.loader-hook-registry')
 
 export interface ComponentMeta {
   captures: () => unknown[]
+  external?: ExternalComponentDescriptor
+  optimizedRoot?: boolean
   projectionSlots?: Record<string, number>
   symbol: string
 }
 
+export interface ComponentOptions {
+  external?: ExternalComponentDescriptor
+  optimizedRoot?: boolean
+}
+
+export interface ExternalComponentDescriptor {
+  kind: 'react' | 'vue'
+  slots: string[]
+}
+
+export interface ExternalComponentMeta extends ExternalComponentDescriptor {
+  hydrate(host: HTMLElement, props: Record<string, unknown>): unknown | Promise<unknown>
+  renderToString(props: Record<string, unknown>): Promise<string> | string
+  unmount(instance: unknown): void | Promise<void>
+  update(
+    instance: unknown,
+    host: HTMLElement,
+    props: Record<string, unknown>,
+  ): unknown | Promise<unknown>
+}
+
 export interface LazyMeta {
   captures: () => unknown[]
   eventName?: string
@@ -36,6 +69,7 @@ export interface WatchMeta {
 export interface SignalMeta<T = unknown> {
   get(): T
   id: string
+  kind?: 'computed-signal' | 'signal'
   set(value: T): void
 }
 
@@ -83,11 +117,17 @@ export interface WatchReference<
   [WATCH_META_KEY]?: WatchMeta
 }
 
+export interface ExternalComponentReference<T = unknown> extends Function {
+  (...args: any[]): T
+  [EXTERNAL_COMPONENT_META_KEY]?: ExternalComponentMeta
+}
+
 export const __eclipsaComponent = <T>(
   component: Component<T>,
   symbol: string,
   captures: () => unknown[],
   projectionSlots?: Record<string, number>,
+  options?: ComponentOptions,
 ): Component<T> => {
   Object.defineProperty(component, COMPONENT_META_KEY, {
     configurable: true,
@@ -95,6 +135,8 @@ export const __eclipsaComponent = <T>(
     value: {
       symbol,
       captures,
+      ...(options?.external ? { external: options.external } : {}),
+      ...(options?.optimizedRoot ? { optimizedRoot: true } : {}),
       ...(projectionSlots ? { projectionSlots } : {}),
     } satisfies ComponentMeta,
     writable: true,
@@ -169,6 +211,30 @@ export const getLazyMeta = (value: unknown): LazyMeta | null => {
   )
 }
 
+export const setExternalComponentMeta = <T extends Component<any>>(
+  target: T,
+  meta: ExternalComponentMeta,
+): T => {
+  Object.defineProperty(target, EXTERNAL_COMPONENT_META_KEY, {
+    configurable: true,
+    enumerable: false,
+    value: meta,
+    writable: true,
+  })
+  return target
+}
+
+export const getExternalComponentMeta = (value: unknown): ExternalComponentMeta | null => {
+  if (typeof value !== 'function') {
+    return null
+  }
+  return (
+    ((value as unknown as Record<PropertyKey, unknown>)[EXTERNAL_COMPONENT_META_KEY] as
+      | ExternalComponentMeta
+      | undefined) ?? null
+  )
+}
+
 export const setNavigateMeta = <T extends Navigate>(target: T): T => {
   Object.defineProperty(target, NAVIGATE_META_KEY, {
     configurable: true,
diff --git a/packages/eclipsa/core/loader.test.ts b/packages/eclipsa/core/loader.test.ts
index 90cfea7..273132c 100644
--- a/packages/eclipsa/core/loader.test.ts
+++ b/packages/eclipsa/core/loader.test.ts
@@ -1,5 +1,6 @@
 import { Hono } from 'hono'
 import { describe, expect, it } from 'vitest'
+import type { AppContext } from './hooks.ts'
 import { beginAsyncSSRContainer, toResumePayload } from './runtime.ts'
 import { executeLoader, primeLoaderState, registerLoader, type LoaderMiddleware } from './loader.ts'
 
@@ -20,7 +21,9 @@ describe('loader runtime', () => {
       value: 42,
     }))
 
-    app.get('/__eclipsa/loader/:id', (c) => executeLoader(c.req.param('id'), c))
+    app.get('/__eclipsa/loader/:id', (c) =>
+      executeLoader(c.req.param('id'), c as unknown as AppContext),
+    )
 
     const response = await app.request('http://localhost/__eclipsa/loader/profile')
 
@@ -46,7 +49,7 @@ describe('loader runtime', () => {
         {},
         () => null,
         async (runtimeContainer) => {
-          await primeLoaderState(runtimeContainer, 'preloaded', c)
+          await primeLoaderState(runtimeContainer, 'preloaded', c as unknown as AppContext)
         },
       )
       return c.json(toResumePayload(container))
diff --git a/packages/eclipsa/core/loader.ts b/packages/eclipsa/core/loader.ts
index e35cf48..ecfb871 100644
--- a/packages/eclipsa/core/loader.ts
+++ b/packages/eclipsa/core/loader.ts
@@ -1,12 +1,19 @@
-import type { Context } from 'hono'
 import type { Env, MiddlewareHandler, Next } from 'hono/types'
-import { deserializeValue, serializeValue, type SerializedValue } from './serialize.ts'
+import {
+  type AppContext,
+  deserializePublicValue,
+  serializePublicValue,
+  transformCurrentPublicError,
+  type WithAppEnv,
+} from './hooks.ts'
+import { type SerializedValue } from './serialize.ts'
 import { registerLoaderHook, setLoaderHandleMeta, setLoaderHookMeta } from './internal.ts'
 import {
   createDetachedRuntimeSignal,
   getRuntimeContainer,
   type RuntimeContainer,
 } from './runtime.ts'
+import { ROUTE_RPC_URL_HEADER } from './router-shared.ts'
 
 const LOADER_REGISTRY_KEY = Symbol.for('eclipsa.loader-registry')
 const LOADER_CONTENT_TYPE = 'application/eclipsa-loader+json'
@@ -17,18 +24,18 @@ type MiddlewareEnv<T> = T extends {
   readonly __eclipsa_loader_env__?: infer MiddlewareEnv
 }
   ? Exclude<MiddlewareEnv, undefined> extends Env
-    ? Exclude<MiddlewareEnv, undefined>
+    ? WithAppEnv<Exclude<MiddlewareEnv, undefined>>
     : {}
   : T extends MiddlewareHandler<infer MiddlewareEnv, any, any>
-    ? MiddlewareEnv
-    : {}
+    ? WithAppEnv<MiddlewareEnv>
+    : WithAppEnv<Env>
 
 type LoaderEnv<Middlewares extends readonly LoaderMiddleware<any>[]> =
   Middlewares extends readonly [infer Head, ...infer Tail]
     ? Tail extends readonly LoaderMiddleware<any>[]
       ? MiddlewareEnv<Head> & LoaderEnv<Tail>
       : MiddlewareEnv<Head>
-    : {}
+    : WithAppEnv<Env>
 
 export interface LoaderHandle<Output> {
   readonly data: Output | undefined
@@ -42,11 +49,11 @@ export interface LoaderMiddleware<E extends Env = Env> extends MiddlewareHandler
 }
 
 export type LoaderHandler<E extends Env = Env, Output = unknown> = (
-  c: Context<E>,
+  c: AppContext<E>,
 ) => Output | Promise<Output>
 
 type LoaderUse<
-  Middlewares extends readonly LoaderMiddleware<any>[],
+  _Middlewares extends readonly LoaderMiddleware<any>[],
   Output,
 > = () => LoaderHandle<Output>
 
@@ -155,7 +162,7 @@ const getLoaderRegistry = () => {
 }
 
 const composeMiddlewares = async (
-  c: Context<any>,
+  c: AppContext<any>,
   middlewares: LoaderMiddleware<any>[],
   handler: LoaderHandler<any, unknown>,
 ): Promise<Response | unknown> => {
@@ -183,15 +190,15 @@ const composeMiddlewares = async (
 
 const toSerializedLoaderError = (error: unknown): SerializedValue => {
   if (error instanceof Error) {
-    return serializeValue({
+    return serializePublicValue({
       message: error.message,
       name: error.name,
     })
   }
   try {
-    return serializeValue(error)
+    return serializePublicValue(error)
   } catch {
-    return serializeValue({
+    return serializePublicValue({
       message: 'Loader failed.',
     })
   }
@@ -199,13 +206,13 @@ const toSerializedLoaderError = (error: unknown): SerializedValue => {
 
 const normalizeLoaderValue = (value: unknown) => {
   if (value instanceof Response) {
-    throw new TypeError('loader$() handlers and middlewares must resolve to data, not Response.')
+    throw new TypeError('loader() handlers and middlewares must resolve to data, not Response.')
   }
   if (typeof ReadableStream !== 'undefined' && value instanceof ReadableStream) {
-    throw new TypeError('loader$() does not support ReadableStream results.')
+    throw new TypeError('loader() does not support ReadableStream results.')
   }
   if (value && typeof value === 'object' && Symbol.asyncIterator in value) {
-    throw new TypeError('loader$() does not support async iterable results.')
+    throw new TypeError('loader() does not support async iterable results.')
   }
   return value
 }
@@ -243,22 +250,24 @@ const parseJsonLoaderResponse = async (response: Response) => {
     throw new TypeError('Malformed loader response.')
   }
   if (!body.ok) {
-    throw deserializeValue(body.error)
+    throw deserializePublicValue(body.error)
   }
-  return deserializeValue(body.value)
+  return deserializePublicValue(body.value)
 }
 
 const invokeLoader = async (id: string) => {
+  const currentRouteUrl = typeof window !== 'undefined' ? window.location.href : null
   const response = await fetch(`/__eclipsa/loader/${encodeURIComponent(id)}`, {
     headers: {
       accept: LOADER_CONTENT_TYPE,
+      ...(currentRouteUrl ? { [ROUTE_RPC_URL_HEADER]: currentRouteUrl } : {}),
     },
     method: 'GET',
   })
   return parseJsonLoaderResponse(response)
 }
 
-const resolveLoader = async (id: string, c: Context<any>) => {
+const resolveLoader = async (id: string, c: AppContext<any>) => {
   const loader = getLoaderRegistry().get(id)
   if (!loader) {
     throw new Error(`Unknown loader ${id}.`)
@@ -266,8 +275,8 @@ const resolveLoader = async (id: string, c: Context<any>) => {
   return normalizeLoaderValue(await composeMiddlewares(c, loader.middlewares, loader.handler))
 }
 
-export const loader$: LoaderFactory = (() => {
-  throw new Error('loader$() must be compiled by the Eclipsa analyzer before it can run.')
+export const loader: LoaderFactory = (() => {
+  throw new Error('loader() must be compiled by the Eclipsa analyzer before it can run.')
 }) as LoaderFactory
 
 export function registerLoader<Output>(
@@ -336,12 +345,12 @@ export function registerLoader(
 
 export const hasLoader = (id: string) => getLoaderRegistry().has(id)
 
-export const executeLoader = async (id: string, c: Context<any>) => {
+export const executeLoader = async (id: string, c: AppContext<any>) => {
   try {
     return new Response(
       JSON.stringify({
         ok: true,
-        value: serializeValue(await resolveLoader(id, c)),
+        value: serializePublicValue(await resolveLoader(id, c)),
       } satisfies LoaderJsonSuccess),
       {
         headers: {
@@ -350,9 +359,10 @@ export const executeLoader = async (id: string, c: Context<any>) => {
       },
     )
   } catch (error) {
+    const publicError = await transformCurrentPublicError(error, 'loader')
     return new Response(
       JSON.stringify({
-        error: toSerializedLoaderError(error),
+        error: toSerializedLoaderError(publicError),
         ok: false,
       } satisfies LoaderJsonFailure),
       {
@@ -368,7 +378,7 @@ export const executeLoader = async (id: string, c: Context<any>) => {
 export const primeLoaderState = async (
   container: RuntimeContainer,
   id: string,
-  c: Context<any>,
+  c: AppContext<any>,
 ) => {
   const value = await resolveLoader(id, c)
   updateLoaderSnapshot(container, id, {
@@ -379,7 +389,7 @@ export const primeLoaderState = async (
   return value
 }
 
-export const resolvePendingLoaders = async (container: RuntimeContainer, c: Context<any>) => {
+export const resolvePendingLoaders = async (container: RuntimeContainer, c: AppContext<any>) => {
   const pendingIds = consumePendingSsrLoaderIds(container)
   if (pendingIds.length === 0) {
     return false
@@ -413,7 +423,7 @@ export const __eclipsaLoader = <const Middlewares extends readonly LoaderMiddlew
       const initialState = container?.loaderStates.get(id)
       if (typeof window === 'undefined' && !initialState?.loaded) {
         if (!container) {
-          throw new Error(`loader$("${id}") was used during SSR before it was preloaded.`)
+          throw new Error(`loader("${id}") was used during SSR before it was preloaded.`)
         }
         markPendingSsrLoader(container, id)
         throw SSR_PENDING_LOADER_ERROR
diff --git a/packages/eclipsa/core/loader.typecheck.ts b/packages/eclipsa/core/loader.typecheck.ts
index 28b769d..d56bd5e 100644
--- a/packages/eclipsa/core/loader.typecheck.ts
+++ b/packages/eclipsa/core/loader.typecheck.ts
@@ -1,4 +1,4 @@
-import { loader$, type LoaderHandle, type LoaderMiddleware } from './loader.ts'
+import { loader, type LoaderHandle, type LoaderMiddleware } from './loader.ts'
 
 type Equal<Left, Right> =
   (<T>() => T extends Left ? 1 : 2) extends <T>() => T extends Right ? 1 : 2 ? true : false
@@ -17,7 +17,7 @@ const requestMeta: LoaderMiddleware<{
   await next()
 }
 
-const useProfile = loader$(requestMeta, async (c) => {
+const useProfile = loader(requestMeta, async (c) => {
   type _TraceId = Expect<Equal<typeof c.var.traceId, string>>
   type _User = Expect<Equal<typeof c.var.user, { id: string }>>
 
@@ -40,10 +40,10 @@ type _Handle = Expect<
 
 declare const profileHandle: ProfileHandle
 profileHandle.load()
-// @ts-expect-error loader$ does not accept client input.
+// @ts-expect-error loader does not accept client input.
 profileHandle.load('value')
 
-const usePing = loader$(async () => 'pong')
+const usePing = loader(async () => 'pong')
 
 type PingHandle = ReturnType<typeof usePing>
 type _Ping = Expect<Equal<PingHandle, LoaderHandle<string>>>
diff --git a/packages/eclipsa/core/mod.ts b/packages/eclipsa/core/mod.ts
index 88bb712..e02e118 100644
--- a/packages/eclipsa/core/mod.ts
+++ b/packages/eclipsa/core/mod.ts
@@ -1,16 +1,46 @@
 export * from './action.ts'
 export * from './component.ts'
+export * from './context.ts'
+export * from './dynamic.ts'
+export * from './env.ts'
+export * from './hooks.ts'
 export * from './loader.ts'
 export * from './metadata.ts'
+export * from './no-serialize.ts'
 export * from './route-middleware.ts'
-export { Link, notFound, useNavigate, useRouteParams, type LinkProps } from './router.tsx'
+export {
+  Link,
+  notFound,
+  useLocation,
+  useNavigate,
+  useRouteError,
+  useRouteParams,
+  type LinkProps,
+} from './router.tsx'
 export * from './resume.ts'
 export * from './serialize.ts'
 export * from './signal.ts'
 export * from './snapshot.ts'
 export * from './ssr.ts'
+export * from './style.ts'
 export * from './suspense.ts'
-export { RESUME_FINAL_STATE_ELEMENT_ID } from './runtime.ts'
-export type { LinkPrefetchMode, Navigate, NavigateOptions } from './router-shared.ts'
+export {
+  RESUME_FINAL_STATE_ELEMENT_ID,
+  renderSSRAttr,
+  renderSSRMap,
+  renderSSRValue,
+} from './runtime.ts'
+export { buildRoutePath, createRouteHref } from './router-shared.ts'
+export type {
+  GetStaticPaths,
+  LinkPrefetchMode,
+  Navigate,
+  NavigateOptions,
+  RoutePathParams,
+  RouteLocation,
+  RouteSearchParamsInput,
+  RouteTarget,
+  StaticPath,
+} from './router-shared.ts'
 export * from './types.ts'
 export * from './flow/mod.ts'
diff --git a/packages/eclipsa/core/no-serialize.ts b/packages/eclipsa/core/no-serialize.ts
new file mode 100644
index 0000000..783edb0
--- /dev/null
+++ b/packages/eclipsa/core/no-serialize.ts
@@ -0,0 +1,18 @@
+const noSerializeValues = new WeakSet<object>()
+
+const canNoSerialize = (value: unknown): value is object | Function =>
+  (typeof value === 'object' && value !== null) || typeof value === 'function'
+
+export type NoSerialize<T> = T & {
+  readonly __eclipsa_no_serialize__?: true
+}
+
+export const noSerialize = <T extends object | Function | undefined>(value: T): T => {
+  if (canNoSerialize(value)) {
+    noSerializeValues.add(value as object)
+  }
+  return value
+}
+
+export const isNoSerialize = (value: unknown): boolean =>
+  canNoSerialize(value) && noSerializeValues.has(value as object)
diff --git a/packages/eclipsa/core/on-mount.test.ts b/packages/eclipsa/core/on-mount.test.ts
new file mode 100644
index 0000000..4c2fa75
--- /dev/null
+++ b/packages/eclipsa/core/on-mount.test.ts
@@ -0,0 +1,33 @@
+import { jsxDEV } from 'eclipsa/jsx-dev-runtime'
+import { describe, expect, it, vi } from 'vitest'
+import { __eclipsaComponent } from './internal.ts'
+import { onMount } from './signal.ts'
+import { renderSSR } from './ssr.ts'
+describe('onMount', () => {
+  it('does not run during SSR', () => {
+    const mounted = vi.fn()
+    const App = __eclipsaComponent(
+      () => {
+        onMount(() => {
+          mounted()
+        })
+        return /* @__PURE__ */ jsxDEV('button', { children: 'ready' }, void 0, false, {
+          fileName: 'packages/eclipsa/core/on-mount.test.ts',
+          lineNumber: 16,
+          columnNumber: 16,
+        })
+      },
+      'component-symbol',
+      () => [],
+    )
+    const { html } = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(App, {}, void 0, false, {
+        fileName: 'packages/eclipsa/core/on-mount.test.ts',
+        lineNumber: 22,
+        columnNumber: 38,
+      }),
+    )
+    expect(html).toContain('<button>ready</button>')
+    expect(mounted).not.toHaveBeenCalled()
+  })
+})
diff --git a/packages/eclipsa/core/on-mount.test.tsx b/packages/eclipsa/core/on-mount.test.tsx
deleted file mode 100644
index 67d1653..0000000
--- a/packages/eclipsa/core/on-mount.test.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { describe, expect, it, vi } from 'vitest'
-
-import { component$ } from './component.ts'
-import { __eclipsaComponent } from './internal.ts'
-import { onMount } from './signal.ts'
-import { renderSSR } from './ssr.ts'
-
-describe('onMount', () => {
-  it('does not run during SSR', () => {
-    const mounted = vi.fn()
-    const App = component$(
-      __eclipsaComponent(
-        () => {
-          onMount(() => {
-            mounted()
-          })
-
-          return <button>ready</button>
-        },
-        'component-symbol',
-        () => [],
-      ),
-    )
-
-    const { html } = renderSSR(() => <App />)
-
-    expect(html).toContain('<button>ready</button>')
-    expect(mounted).not.toHaveBeenCalled()
-  })
-})
diff --git a/packages/eclipsa/core/on-visible.test.tsx b/packages/eclipsa/core/on-visible.test.ts
similarity index 68%
rename from packages/eclipsa/core/on-visible.test.tsx
rename to packages/eclipsa/core/on-visible.test.ts
index 38a3a67..6b84cb4 100644
--- a/packages/eclipsa/core/on-visible.test.tsx
+++ b/packages/eclipsa/core/on-visible.test.ts
@@ -1,7 +1,6 @@
+import { jsxDEV } from 'eclipsa/jsx-dev-runtime'
 import { describe, expect, it, vi } from 'vitest'
-
-import { jsxDEV } from '../jsx/jsx-dev-runtime.ts'
-import { component$ } from './component.ts'
+import { jsxDEV as jsxDEV2 } from '../jsx/jsx-dev-runtime.ts'
 import { __eclipsaComponent, __eclipsaLazy } from './internal.ts'
 import {
   applyResumeHmrUpdate,
@@ -12,43 +11,34 @@ import {
 } from './runtime.ts'
 import { onCleanup, onVisible, useSignal } from './signal.ts'
 import { renderSSR } from './ssr.ts'
-
 class FakeNode {
-  childNodes: FakeNode[] = []
-  nextSibling: FakeNode | null = null
-  parentNode: FakeElement | null = null
-  previousSibling: FakeNode | null = null
-
+  childNodes = []
+  nextSibling = null
+  parentNode = null
+  previousSibling = null
   remove() {
     this.parentNode?.removeChild(this)
   }
 }
-
 class FakeComment extends FakeNode {
-  constructor(
-    readonly data: string,
-    readonly ownerDocument: FakeDocument,
-  ) {
+  constructor(data, ownerDocument) {
     super()
+    this.data = data
+    this.ownerDocument = ownerDocument
   }
 }
-
 class FakeElement extends FakeNode {
-  attributes = new Map<string, string>()
-  childNodes: FakeNode[] = []
-
-  constructor(
-    readonly tagName: string,
-    readonly ownerDocument: FakeDocument,
-  ) {
+  constructor(tagName, ownerDocument) {
     super()
+    this.tagName = tagName
+    this.ownerDocument = ownerDocument
   }
-
-  appendChild(node: FakeNode) {
+  attributes = /* @__PURE__ */ new Map()
+  childNodes = []
+  appendChild(node) {
     return this.insertBefore(node, null)
   }
-
-  insertBefore(node: FakeNode, referenceNode: FakeNode | null) {
+  insertBefore(node, referenceNode) {
     if (node.parentNode) {
       node.parentNode.removeChild(node)
     }
@@ -71,12 +61,10 @@ class FakeElement extends FakeNode {
     }
     return node
   }
-
-  querySelectorAll(selector?: string) {
-    return this.querySelectorAllBySelector(selector ?? '') as unknown as NodeListOf<Element>
+  querySelectorAll(selector) {
+    return this.querySelectorAllBySelector(selector ?? '')
   }
-
-  removeChild(node: FakeNode) {
+  removeChild(node) {
     const index = this.childNodes.indexOf(node)
     if (index < 0) {
       return node
@@ -95,31 +83,26 @@ class FakeElement extends FakeNode {
     node.nextSibling = null
     return node
   }
-
-  setAttribute(name: string, value: string) {
+  setAttribute(name, value) {
     this.attributes.set(name, value)
   }
-
-  getAttribute(name: string) {
+  getAttribute(name) {
     return this.attributes.get(name) ?? null
   }
-
-  hasAttribute(name: string) {
+  hasAttribute(name) {
     return this.attributes.has(name)
   }
-
-  private querySelectorAllBySelector(selector: string) {
+  querySelectorAllBySelector(selector) {
     const attrMatch = selector.match(/^\[([^=\]]+)(?:="([^"]*)")?\]$/)
     if (!attrMatch) {
       return []
     }
-
     const [, attrName, attrValue] = attrMatch
-    const results: FakeElement[] = []
-    const visit = (node: FakeNode) => {
+    const results = []
+    const visit = (node) => {
       if (node instanceof FakeElement) {
         const currentValue = node.getAttribute(attrName)
-        if (currentValue !== null && (attrValue === undefined || currentValue === attrValue)) {
+        if (currentValue !== null && (attrValue === void 0 || currentValue === attrValue)) {
           results.push(node)
         }
       }
@@ -127,37 +110,32 @@ class FakeElement extends FakeNode {
         visit(child)
       }
     }
-
     visit(this)
     return results
   }
 }
-
 class FakeWindow {
   innerHeight = 100
   innerWidth = 100
-  #listeners = new Map<string, Set<() => void>>()
-
-  addEventListener(eventName: string, listener: () => void) {
-    const listeners = this.#listeners.get(eventName) ?? new Set()
+  #listeners = /* @__PURE__ */ new Map()
+  addEventListener(eventName, listener) {
+    const listeners = this.#listeners.get(eventName) ?? /* @__PURE__ */ new Set()
     listeners.add(listener)
     this.#listeners.set(eventName, listeners)
   }
-
-  emit(eventName: string) {
+  emit(eventName) {
     for (const listener of this.#listeners.get(eventName) ?? []) {
       listener()
     }
   }
-
-  removeEventListener(eventName: string, listener: () => void) {
+  removeEventListener(eventName, listener) {
     this.#listeners.get(eventName)?.delete(listener)
   }
 }
-
 class FakeRange {
-  constructor(private readonly doc: FakeDocument) {}
-
+  constructor(doc) {
+    this.doc = doc
+  }
   getBoundingClientRect() {
     if (this.doc.visible) {
       return {
@@ -174,114 +152,94 @@ class FakeRange {
       top: 0,
     }
   }
-
   getClientRects() {
     const rect = this.getBoundingClientRect()
     return rect.bottom > 0
-      ? ({
+      ? {
           0: rect,
           length: 1,
-        } as unknown as DOMRectList)
-      : ({
+        }
+      : {
           length: 0,
-        } as unknown as DOMRectList)
+        }
   }
-
-  setEndBefore(_node: FakeComment) {}
-
-  setStartAfter(_node: FakeComment) {}
+  setEndBefore(_node) {}
+  setStartAfter(_node) {}
 }
-
 class FakeTreeWalker {
-  currentNode: Comment | null = null
+  constructor(comments) {
+    this.comments = comments
+  }
+  currentNode = null
   #index = -1
-
-  constructor(private readonly comments: FakeComment[]) {}
-
   nextNode() {
     this.#index += 1
-    this.currentNode = (this.comments[this.#index] ?? null) as unknown as Comment | null
+    this.currentNode = this.comments[this.#index] ?? null
     return this.currentNode
   }
 }
-
 class FakeDocument {
-  body = new FakeElement('body', this) as unknown as HTMLElement
-  defaultView = new FakeWindow() as unknown as Window
-  location = { pathname: '/' } as Location
+  body = new FakeElement('body', this)
+  defaultView = new FakeWindow()
+  location = { pathname: '/' }
   visible = false
-  #listeners = new Map<string, Set<() => void>>()
-  #comments: FakeComment[]
-
+  #listeners = /* @__PURE__ */ new Map()
+  #comments
   constructor() {
     const start = new FakeComment('ec:c:c0:start', this)
     const element = new FakeElement('div', this)
     const end = new FakeComment('ec:c:c0:end', this)
-    ;(this.body as unknown as FakeElement).appendChild(start)
-    ;(this.body as unknown as FakeElement).appendChild(element)
-    ;(this.body as unknown as FakeElement).appendChild(end)
+    this.body.appendChild(start)
+    this.body.appendChild(element)
+    this.body.appendChild(end)
     this.#comments = [start, end]
   }
-
-  addEventListener(eventName: string, listener: () => void) {
-    const listeners = this.#listeners.get(eventName) ?? new Set()
+  addEventListener(eventName, listener) {
+    const listeners = this.#listeners.get(eventName) ?? /* @__PURE__ */ new Set()
     listeners.add(listener)
     this.#listeners.set(eventName, listeners)
   }
-
-  createComment(data: string) {
-    return new FakeComment(data, this) as unknown as Comment
+  createComment(data) {
+    return new FakeComment(data, this)
   }
-
-  createElement(tagName: string) {
-    return new FakeElement(tagName, this) as unknown as HTMLElement
+  createElement(tagName) {
+    return new FakeElement(tagName, this)
   }
-
   createRange() {
-    return new FakeRange(this) as unknown as Range
+    return new FakeRange(this)
   }
-
-  createTextNode(data: string) {
-    return new FakeComment(data, this) as unknown as Text
+  createTextNode(data) {
+    return new FakeComment(data, this)
   }
-
   createTreeWalker() {
     return new FakeTreeWalker(this.#comments)
   }
-
   querySelectorAll() {
-    return [] as unknown as NodeListOf<Element>
+    return []
   }
-
-  emit(eventName: string) {
+  emit(eventName) {
     for (const listener of this.#listeners.get(eventName) ?? []) {
       listener()
     }
   }
-
-  removeEventListener(eventName: string, listener: () => void) {
+  removeEventListener(eventName, listener) {
     this.#listeners.get(eventName)?.delete(listener)
   }
 }
-
-const withFakeVisibleDocument = async (
-  fn: (doc: Document, fakeWindow: FakeWindow) => Promise<void>,
-) => {
+const withFakeVisibleDocument = async (fn) => {
   const OriginalComment = globalThis.Comment
   const OriginalDocument = globalThis.Document
   const OriginalHTMLElement = globalThis.HTMLElement
   const OriginalNode = globalThis.Node
   const OriginalNodeFilter = globalThis.NodeFilter
-
-  globalThis.Comment = FakeComment as unknown as typeof Comment
-  globalThis.Document = FakeDocument as unknown as typeof Document
-  globalThis.HTMLElement = FakeElement as unknown as typeof HTMLElement
-  globalThis.Node = FakeNode as unknown as typeof Node
-  globalThis.NodeFilter = { SHOW_COMMENT: 128 } as typeof NodeFilter
-
+  globalThis.Comment = FakeComment
+  globalThis.Document = FakeDocument
+  globalThis.HTMLElement = FakeElement
+  globalThis.Node = FakeNode
+  globalThis.NodeFilter = { SHOW_COMMENT: 128 }
   try {
-    const doc = new FakeDocument() as unknown as Document
-    await fn(doc, (doc as unknown as FakeDocument).defaultView as unknown as FakeWindow)
+    const doc = new FakeDocument()
+    await fn(doc, doc.defaultView)
   } finally {
     globalThis.Comment = OriginalComment
     globalThis.Document = OriginalDocument
@@ -290,37 +248,40 @@ const withFakeVisibleDocument = async (
     globalThis.NodeFilter = OriginalNodeFilter
   }
 }
-
 const flushAsync = async () => {
   await new Promise((resolve) => setTimeout(resolve, 0))
   await Promise.resolve()
 }
-
 describe('onVisible', () => {
   it('does not run during SSR and serializes resumable visibility callbacks', () => {
     const visible = vi.fn()
-    const App = component$(
-      __eclipsaComponent(
-        () => {
-          onVisible(
-            __eclipsaLazy(
-              'visible-symbol',
-              () => {
-                visible()
-              },
-              () => [],
-            ),
-          )
-
-          return <button>ready</button>
-        },
-        'component-symbol',
-        () => [],
-      ),
+    const App = __eclipsaComponent(
+      () => {
+        onVisible(
+          __eclipsaLazy(
+            'visible-symbol',
+            () => {
+              visible()
+            },
+            () => [],
+          ),
+        )
+        return /* @__PURE__ */ jsxDEV('button', { children: 'ready' }, void 0, false, {
+          fileName: 'packages/eclipsa/core/on-visible.test.ts',
+          lineNumber: 313,
+          columnNumber: 16,
+        })
+      },
+      'component-symbol',
+      () => [],
+    )
+    const { html, payload } = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(App, {}, void 0, false, {
+        fileName: 'packages/eclipsa/core/on-visible.test.ts',
+        lineNumber: 319,
+        columnNumber: 47,
+      }),
     )
-
-    const { html, payload } = renderSSR(() => <App />)
-
     expect(html).toContain('<button>ready</button>')
     expect(visible).not.toHaveBeenCalled()
     expect(payload.components.c0?.visibleCount).toBe(1)
@@ -330,12 +291,10 @@ describe('onVisible', () => {
       symbol: 'visible-symbol',
     })
   })
-
   it('runs when a resumed SSR boundary becomes visible without activating the component', async () => {
     await withFakeVisibleDocument(async (doc, fakeWindow) => {
-      const globalRecord = globalThis as Record<PropertyKey, unknown>
+      const globalRecord = globalThis
       globalRecord.__eclipsaVisibleRuns = 0
-
       const container = createResumeContainer(doc, {
         actions: {},
         components: {
@@ -386,29 +345,23 @@ describe('onVisible', () => {
         }),
       )
       const cleanup = installResumeListeners(container)
-
       await flushAsync()
       expect(globalRecord.__eclipsaVisibleRuns).toBe(0)
-
-      ;(doc as unknown as FakeDocument).visible = true
+      doc.visible = true
       fakeWindow.emit('resize')
       await flushAsync()
-
       expect(globalRecord.__eclipsaVisibleRuns).toBe(1)
       expect(container.components.get('c0')?.active).toBe(false)
-
       fakeWindow.emit('resize')
       await flushAsync()
       expect(globalRecord.__eclipsaVisibleRuns).toBe(1)
-
       cleanup()
       delete globalRecord.__eclipsaVisibleRuns
     })
   })
-
   it('runs cleanup only when the visible registration is torn down', async () => {
     await withFakeVisibleDocument(async (doc, fakeWindow) => {
-      const events: string[] = []
+      const events = []
       const container = createResumeContainer(doc, {
         actions: {},
         components: {
@@ -460,77 +413,72 @@ describe('onVisible', () => {
           },
         }),
       )
-
       const cleanup = installResumeListeners(container)
-
-      ;(doc as unknown as FakeDocument).visible = true
+      doc.visible = true
       fakeWindow.emit('resize')
       await flushAsync()
       expect(events).toEqual(['run'])
-
-      ;(doc as unknown as FakeDocument).visible = false
+      doc.visible = false
       fakeWindow.emit('resize')
       await flushAsync()
       expect(events).toEqual(['run'])
-
-      const Replacement = component$(
-        __eclipsaComponent(
-          () => <span>done</span>,
-          'replacement-symbol',
-          () => [],
-        ),
+      const Replacement = __eclipsaComponent(
+        () =>
+          /* @__PURE__ */ jsxDEV('span', { children: 'done' }, void 0, false, {
+            fileName: 'packages/eclipsa/core/on-visible.test.ts',
+            lineNumber: 474,
+            columnNumber: 15,
+          }),
+        'replacement-symbol',
+        () => [],
       )
-
       container.rootChildCursor = 0
       withRuntimeContainer(container, () => {
-        renderClientInsertable(jsxDEV(Replacement, {}, null, false, {}), container)
+        renderClientInsertable(jsxDEV2(Replacement, {}, null, false, {}), container)
       })
-
       expect(events).toEqual(['run', 'cleanup'])
-
       cleanup()
     })
   })
-
   it('restores signal refs before resumed visible callbacks run', async () => {
-    const globalRecord = globalThis as Record<PropertyKey, unknown>
-    const App = component$(
-      __eclipsaComponent(
-        () => {
-          const ref = useSignal<HTMLElement | undefined>()
-
-          onVisible(
-            __eclipsaLazy(
-              'visible-ref-symbol',
-              () => {
-                globalRecord.__eclipsaVisibleRefTag =
-                  (ref.value as { tagName?: string } | undefined)?.tagName ?? null
-              },
-              () => [ref],
-            ),
-          )
-
-          return <div ref={ref}>ready</div>
-        },
-        'component-ref',
-        () => [],
-      ),
+    const globalRecord = globalThis
+    const App = __eclipsaComponent(
+      () => {
+        const ref = useSignal()
+        onVisible(
+          __eclipsaLazy(
+            'visible-ref-symbol',
+            () => {
+              globalRecord.__eclipsaVisibleRefTag = ref.value?.tagName ?? null
+            },
+            () => [ref],
+          ),
+        )
+        return /* @__PURE__ */ jsxDEV('div', { ref, children: 'ready' }, void 0, false, {
+          fileName: 'packages/eclipsa/core/on-visible.test.ts',
+          lineNumber: 507,
+          columnNumber: 16,
+        })
+      },
+      'component-ref',
+      () => [],
+    )
+    const { html, payload } = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(App, {}, void 0, false, {
+        fileName: 'packages/eclipsa/core/on-visible.test.ts',
+        lineNumber: 513,
+        columnNumber: 47,
+      }),
     )
-
-    const { html, payload } = renderSSR(() => <App />)
     const signalId = payload.components.c0?.signalIds[0]
-
     expect(signalId).toBeTruthy()
     expect(html).toContain(`data-e-ref="${signalId}"`)
     expect(html).not.toContain(' ref=')
-
     await withFakeVisibleDocument(async (doc, fakeWindow) => {
       globalRecord.__eclipsaVisibleRefTag = null
-
-      const body = (doc as unknown as FakeDocument).body as unknown as FakeElement
-      const element = body.childNodes[1] as FakeElement
-      element.setAttribute('data-e-ref', signalId as string)
-
+      const body = doc.body
+      const element = body.childNodes[1]
+      element.setAttribute('data-e-ref', signalId)
       const container = createResumeContainer(doc, {
         ...payload,
         symbols: {
@@ -541,33 +489,27 @@ describe('onVisible', () => {
       container.imports.set(
         'visible-ref-symbol',
         Promise.resolve({
-          default: (scope: unknown[]) => {
-            const [ref] = scope as [{ value?: { tagName?: string } }]
+          default: (scope) => {
+            const [ref] = scope
             globalRecord.__eclipsaVisibleRefTag = ref.value?.tagName ?? null
           },
         }),
       )
-
       const cleanup = installResumeListeners(container)
-
       await flushAsync()
       expect(globalRecord.__eclipsaVisibleRefTag).toBe(null)
-
-      ;(doc as unknown as FakeDocument).visible = true
+      doc.visible = true
       fakeWindow.emit('resize')
       await flushAsync()
-
       expect(globalRecord.__eclipsaVisibleRefTag).toBe('div')
       expect(container.components.get('c0')?.active).toBe(false)
-
       cleanup()
       delete globalRecord.__eclipsaVisibleRefTag
     })
   })
-
   it('reruns resumed visible callbacks after an HMR boundary rerender', async () => {
     await withFakeVisibleDocument(async (doc, fakeWindow) => {
-      const events: string[] = []
+      const events = []
       const container = createResumeContainer(doc, {
         actions: {},
         components: {
@@ -631,19 +573,15 @@ describe('onVisible', () => {
                 () => [],
               ),
             )
-            return jsxDEV('div', { children: 'ready' }, null, false, {})
+            return jsxDEV2('div', { children: 'ready' }, null, false, {})
           },
         }),
       )
-
       const cleanup = installResumeListeners(container)
-
-      ;(doc as unknown as FakeDocument).visible = true
+      doc.visible = true
       fakeWindow.emit('resize')
       await flushAsync()
-
       expect(events).toEqual(['run'])
-
       await applyResumeHmrUpdate(container, {
         fileUrl: '/app/+page.tsx',
         fullReload: false,
@@ -652,9 +590,7 @@ describe('onVisible', () => {
         symbolUrlReplacements: {},
       })
       await flushAsync()
-
       expect(events).toEqual(['run', 'cleanup', 'run'])
-
       cleanup()
     })
   })
diff --git a/packages/eclipsa/core/prod-client/dom.ts b/packages/eclipsa/core/prod-client/dom.ts
index aab8788..e9883f8 100644
--- a/packages/eclipsa/core/prod-client/dom.ts
+++ b/packages/eclipsa/core/prod-client/dom.ts
@@ -1,11 +1,57 @@
 import { jsxDEV } from '../../jsx/jsx-dev-runtime.ts'
+import {
+  ACTION_CSRF_FIELD,
+  ACTION_CSRF_INPUT_ATTR,
+  readActionCsrfTokenFromDocument,
+} from '../action-csrf.ts'
 import type { Component } from '../component.ts'
 import { getRuntimeContainer, renderClientInsertable } from '../runtime.ts'
+import { ACTION_FORM_ATTR } from '../runtime/constants.ts'
 
 interface ComponentResult {
   (): void
   vars: Record<string, unknown>
 }
+
+const createActionCsrfInput = (doc: Document, token: string) => {
+  const input = doc.createElement('input')
+  input.setAttribute(ACTION_CSRF_INPUT_ATTR, '')
+  input.setAttribute('name', ACTION_CSRF_FIELD)
+  input.setAttribute('type', 'hidden')
+  input.setAttribute('value', token)
+  return input
+}
+
+const ensureActionCsrfInput = (form: HTMLFormElement) => {
+  const token = readActionCsrfTokenFromDocument(document)
+  if (!token) {
+    return
+  }
+
+  const existing = form.querySelector(`input[${ACTION_CSRF_INPUT_ATTR}]`)
+  const input =
+    existing instanceof HTMLInputElement ? existing : createActionCsrfInput(document, token)
+  input.setAttribute('name', ACTION_CSRF_FIELD)
+  input.setAttribute('type', 'hidden')
+  input.setAttribute('value', token)
+  if (input.parentNode !== form) {
+    form.insertBefore(input, form.firstChild)
+  }
+}
+
+const ensureActionCsrfInputsInNode = (node: Node) => {
+  if (node instanceof HTMLFormElement && node.hasAttribute(ACTION_FORM_ATTR)) {
+    ensureActionCsrfInput(node)
+  }
+  if (node instanceof Element) {
+    for (const form of node.querySelectorAll(`form[${ACTION_FORM_ATTR}]`)) {
+      if (form instanceof HTMLFormElement) {
+        ensureActionCsrfInput(form)
+      }
+    }
+  }
+}
+
 export const createComponentResult = (vars: Record<string, unknown>, elem: ComponentResult) => {
   elem.vars = vars
 
@@ -20,6 +66,7 @@ export const createTemplate = (templateHTML: string) => {
       template.innerHTML = templateHTML
     }
     const content = (template.cloneNode(true) as HTMLTemplateElement).content.firstChild as Node
+    ensureActionCsrfInputsInNode(content)
     return content
   }
 }
diff --git a/packages/eclipsa/core/reactive/core.test.ts b/packages/eclipsa/core/reactive/core.test.ts
index 114c573..4726665 100644
--- a/packages/eclipsa/core/reactive/core.test.ts
+++ b/packages/eclipsa/core/reactive/core.test.ts
@@ -32,4 +32,25 @@ describe('signal', () => {
     expect(cb).toHaveBeenCalledTimes(2)
     expect(cb).toHaveBeenNthCalledWith(2, 1)
   })
+
+  it('does not re-run effects for equal primitive values or the same object reference', () => {
+    const count = signal(1)
+    const initialObject = { label: 'same' }
+    const state = signal(initialObject)
+
+    const cb = vi.fn()
+    effect(() => {
+      cb(`${count.get()}:${state.get() === initialObject ? 'same' : 'new'}`)
+    })
+
+    count.set(1)
+    state.set(initialObject)
+    state.set({ label: 'same' })
+    count.set(2)
+
+    expect(cb).toHaveBeenCalledTimes(3)
+    expect(cb).toHaveBeenNthCalledWith(1, '1:same')
+    expect(cb).toHaveBeenNthCalledWith(2, '1:new')
+    expect(cb).toHaveBeenNthCalledWith(3, '2:new')
+  })
 })
diff --git a/packages/eclipsa/core/reactive/core.ts b/packages/eclipsa/core/reactive/core.ts
index d83448d..0fbbf36 100644
--- a/packages/eclipsa/core/reactive/core.ts
+++ b/packages/eclipsa/core/reactive/core.ts
@@ -10,6 +10,17 @@ interface Effect {
 }
 let currentEffect: Effect | null = null
 
+const isPrimitiveSignalValue = (value: unknown) =>
+  value === null || (typeof value !== 'object' && typeof value !== 'function')
+
+const didSignalValueChange = (previous: unknown, next: unknown) => {
+  if (isPrimitiveSignalValue(previous) && isPrimitiveSignalValue(next)) {
+    return !Object.is(previous, next)
+  }
+
+  return previous !== next
+}
+
 export const signal = <T>(init: T): Signal<T> => {
   let value = init
   const signal: Signal<T> = {
@@ -20,6 +31,9 @@ export const signal = <T>(init: T): Signal<T> => {
       return value
     },
     set(newValue) {
+      if (!didSignalValueChange(value, newValue)) {
+        return value
+      }
       value = newValue
       for (const effect of this.effects) {
         effect.fn()
diff --git a/packages/eclipsa/core/render-prop-resume.test.ts b/packages/eclipsa/core/render-prop-resume.test.ts
new file mode 100644
index 0000000..b18e409
--- /dev/null
+++ b/packages/eclipsa/core/render-prop-resume.test.ts
@@ -0,0 +1,95 @@
+import { jsxDEV } from 'eclipsa/jsx-dev-runtime'
+import { describe, expect, it } from 'vitest'
+import { __eclipsaComponent } from './internal.ts'
+import { renderSSR } from './ssr.ts'
+const Projected = __eclipsaComponent(
+  (props) =>
+    /* @__PURE__ */ jsxDEV('span', { children: props.label }, void 0, false, {
+      fileName: 'packages/eclipsa/core/render-prop-resume.test.ts',
+      lineNumber: 6,
+      columnNumber: 33,
+    }),
+  'projected-symbol',
+  () => [],
+  { label: 1 },
+)
+const Probe = __eclipsaComponent(
+  (props) =>
+    /* @__PURE__ */ jsxDEV(
+      'section',
+      {
+        children: [
+          /* @__PURE__ */ jsxDEV('div', { children: props.aa }, void 0, false, {
+            fileName: 'packages/eclipsa/core/render-prop-resume.test.ts',
+            lineNumber: 15,
+            columnNumber: 7,
+          }),
+          /* @__PURE__ */ jsxDEV('div', { children: props.children }, void 0, false, {
+            fileName: 'packages/eclipsa/core/render-prop-resume.test.ts',
+            lineNumber: 16,
+            columnNumber: 7,
+          }),
+        ],
+      },
+      void 0,
+      true,
+      {
+        fileName: 'packages/eclipsa/core/render-prop-resume.test.ts',
+        lineNumber: 14,
+        columnNumber: 5,
+      },
+    ),
+  'probe-symbol',
+  () => [],
+  { aa: 1, children: 1 },
+)
+describe('render props resume payload', () => {
+  it('serializes projection slot props and children into the resume payload', () => {
+    const { html, payload } = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(
+        Probe,
+        {
+          aa: /* @__PURE__ */ jsxDEV(Projected, { label: 'prop content' }, void 0, false, {
+            fileName: 'packages/eclipsa/core/render-prop-resume.test.ts',
+            lineNumber: 27,
+            columnNumber: 18,
+          }),
+          children: /* @__PURE__ */ jsxDEV(
+            Projected,
+            { label: 'children content' },
+            void 0,
+            false,
+            {
+              fileName: 'packages/eclipsa/core/render-prop-resume.test.ts',
+              lineNumber: 28,
+              columnNumber: 9,
+            },
+          ),
+        },
+        void 0,
+        false,
+        {
+          fileName: 'packages/eclipsa/core/render-prop-resume.test.ts',
+          lineNumber: 27,
+          columnNumber: 7,
+        },
+      ),
+    )
+    expect(html).toContain('prop content')
+    expect(html).toContain('children content')
+    expect(html).toContain('ec:s:c0:aa:0:start')
+    expect(html).toContain('ec:s:c0:children:0:start')
+    expect(payload.components['c0']?.projectionSlots).toEqual({
+      aa: 1,
+      children: 1,
+    })
+    const props = payload.components['c0']?.props
+    expect(props?.__eclipsa_type).toBe('object')
+    expect(props?.entries).toEqual(
+      expect.arrayContaining([
+        ['aa', expect.objectContaining({ kind: 'render', token: 'jsx' })],
+        ['children', expect.objectContaining({ kind: 'render', token: 'jsx' })],
+      ]),
+    )
+  })
+})
diff --git a/packages/eclipsa/core/render-prop.resume.test.tsx b/packages/eclipsa/core/render-prop.resume.test.tsx
deleted file mode 100644
index ec929a2..0000000
--- a/packages/eclipsa/core/render-prop.resume.test.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { component$ } from './component.ts'
-import { __eclipsaComponent } from './internal.ts'
-import { renderSSR } from './ssr.ts'
-
-const Projected = component$(
-  __eclipsaComponent(
-    (props: { label: string }) => <span>{props.label}</span>,
-    'projected-symbol',
-    () => [],
-    { label: 1 },
-  ),
-)
-
-const Probe = component$(
-  __eclipsaComponent(
-    (props: { aa?: unknown; children?: unknown }) => (
-      <section>
-        <div>{props.aa}</div>
-        <div>{props.children}</div>
-      </section>
-    ),
-    'probe-symbol',
-    () => [],
-    { aa: 1, children: 1 },
-  ),
-)
-
-describe('render props resume payload', () => {
-  it('serializes projection slot props and children into the resume payload', () => {
-    const { html, payload } = renderSSR(() => (
-      <Probe aa={<Projected label="prop content" />}>
-        <Projected label="children content" />
-      </Probe>
-    ))
-
-    expect(html).toContain('prop content')
-    expect(html).toContain('children content')
-    expect(html).toContain('ec:s:c0:aa:0:start')
-    expect(html).toContain('ec:s:c0:children:0:start')
-    expect(JSON.stringify(payload.components['c0']?.props)).toContain(`"kind":"render"`)
-    expect(JSON.stringify(payload.components['c0']?.projectionSlots)).toContain('"aa":1')
-  })
-})
diff --git a/packages/eclipsa/core/resume-links.test.ts b/packages/eclipsa/core/resume-links.test.ts
new file mode 100644
index 0000000..c53ffde
--- /dev/null
+++ b/packages/eclipsa/core/resume-links.test.ts
@@ -0,0 +1,232 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+describe('resumeContainer interactivity bootstrap', () => {
+  beforeEach(() => {
+    vi.resetModules()
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    vi.resetModules()
+    vi.clearAllMocks()
+  })
+
+  it('binds resumable listeners before route priming finishes', async () => {
+    const container = {} as object
+    let resolvePrime: (() => void) | null = null
+    const OriginalDocument = globalThis.Document
+
+    class FakeDocument {}
+
+    const createResumeContainer = vi.fn(() => container)
+    const installResumeListeners = vi.fn()
+    const primeRouteModules = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          resolvePrime = resolve
+        }),
+    )
+    const registerResumeContainer = vi.fn()
+    const restoreRegisteredRpcHandles = vi.fn()
+    const restoreResumedExternalComponents = vi.fn(async () => {})
+    const restoreResumedLocalSignalEffects = vi.fn()
+    const registerClientHooks = vi.fn()
+
+    vi.doMock('./runtime.ts', () => ({
+      RESUME_FINAL_STATE_ELEMENT_ID: 'resume-final',
+      RESUME_STATE_ELEMENT_ID: 'resume',
+      applyResumeHmrUpdateToRegisteredContainers: vi.fn(),
+      createResumeContainer,
+      installResumeListeners,
+      primeRouteModules,
+      refreshRegisteredRouteContainers: vi.fn(),
+      registerResumeContainer,
+      restoreRegisteredRpcHandles,
+      restoreResumedExternalComponents,
+      restoreResumedLocalSignalEffects,
+    }))
+    vi.doMock('./hooks.ts', () => ({
+      APP_HOOKS_ELEMENT_ID: 'app-hooks',
+      registerClientHooks,
+    }))
+
+    const { resumeContainer } = await import('./resume.ts')
+
+    const root = {
+      setAttribute: vi.fn(),
+    } as unknown as HTMLElement & {
+      ownerDocument?: Document
+    }
+    const doc = Object.assign(new FakeDocument(), {
+      body: root,
+      getElementById(id: string) {
+        if (id === 'resume') {
+          return {
+            textContent: JSON.stringify({
+              actions: {},
+              components: {},
+              loaders: {},
+              scopes: {},
+              signals: {},
+              subscriptions: {},
+              symbols: {},
+              visibles: {},
+              watches: {},
+            }),
+          }
+        }
+        if (id === 'eclipsa-route-manifest') {
+          return {
+            textContent: JSON.stringify([]),
+          }
+        }
+        if (id === 'app-hooks') {
+          return {
+            textContent: JSON.stringify({
+              client: null,
+            }),
+          }
+        }
+        return null
+      },
+    }) as unknown as Document
+    root.ownerDocument = doc
+
+    globalThis.Document = FakeDocument as unknown as typeof Document
+    try {
+      const resumePromise = resumeContainer(doc)
+      await Promise.resolve()
+
+      expect(createResumeContainer).toHaveBeenCalledWith(root, expect.any(Object), {
+        routeManifest: [],
+      })
+      expect(installResumeListeners).toHaveBeenCalledWith(container)
+      expect(registerResumeContainer).not.toHaveBeenCalled()
+
+      for (let attempt = 0; attempt < 5 && !resolvePrime; attempt += 1) {
+        await Promise.resolve()
+      }
+      expect(primeRouteModules).toHaveBeenCalledWith(container)
+
+      ;(resolvePrime as (() => void) | null)?.()
+      await resumePromise
+
+      expect(registerClientHooks).toHaveBeenCalledWith({})
+      expect(restoreRegisteredRpcHandles).toHaveBeenCalledWith(container)
+      expect(restoreResumedExternalComponents).toHaveBeenCalledWith(container)
+      expect(restoreResumedLocalSignalEffects).toHaveBeenCalledWith(container)
+      expect(registerResumeContainer).toHaveBeenCalledWith(container)
+      expect(root.setAttribute).toHaveBeenCalledWith('data-e-resume', 'resumed')
+      expect(installResumeListeners).toHaveBeenCalledTimes(1)
+    } finally {
+      globalThis.Document = OriginalDocument
+    }
+  }, 15_000)
+
+  it('does not wait for local signal restoration before binding resumable listeners', async () => {
+    const container = {} as object
+    let resolveRestore: (() => void) | null = null
+    const OriginalDocument = globalThis.Document
+
+    class FakeDocument {}
+
+    const createResumeContainer = vi.fn(() => container)
+    const installResumeListeners = vi.fn()
+    const primeRouteModules = vi.fn(async () => {})
+    const registerResumeContainer = vi.fn()
+    const restoreRegisteredRpcHandles = vi.fn()
+    const restoreResumedExternalComponents = vi.fn(async () => {})
+    const restoreResumedLocalSignalEffects = vi.fn(
+      () =>
+        new Promise<void>((resolve) => {
+          resolveRestore = resolve
+        }),
+    )
+    const registerClientHooks = vi.fn()
+
+    vi.doMock('./runtime.ts', () => ({
+      RESUME_FINAL_STATE_ELEMENT_ID: 'resume-final',
+      RESUME_STATE_ELEMENT_ID: 'resume',
+      applyResumeHmrUpdateToRegisteredContainers: vi.fn(),
+      createResumeContainer,
+      installResumeListeners,
+      primeRouteModules,
+      refreshRegisteredRouteContainers: vi.fn(),
+      registerResumeContainer,
+      restoreRegisteredRpcHandles,
+      restoreResumedExternalComponents,
+      restoreResumedLocalSignalEffects,
+    }))
+    vi.doMock('./hooks.ts', () => ({
+      APP_HOOKS_ELEMENT_ID: 'app-hooks',
+      registerClientHooks,
+    }))
+
+    const { resumeContainer } = await import('./resume.ts')
+
+    const root = {
+      setAttribute: vi.fn(),
+    } as unknown as HTMLElement & {
+      ownerDocument?: Document
+    }
+    const doc = Object.assign(new FakeDocument(), {
+      body: root,
+      getElementById(id: string) {
+        if (id === 'resume') {
+          return {
+            textContent: JSON.stringify({
+              actions: {},
+              components: {},
+              loaders: {},
+              scopes: {},
+              signals: {},
+              subscriptions: {},
+              symbols: {},
+              visibles: {},
+              watches: {},
+            }),
+          }
+        }
+        if (id === 'eclipsa-route-manifest') {
+          return {
+            textContent: JSON.stringify([]),
+          }
+        }
+        if (id === 'app-hooks') {
+          return {
+            textContent: JSON.stringify({
+              client: null,
+            }),
+          }
+        }
+        return null
+      },
+    }) as unknown as Document
+    root.ownerDocument = doc
+
+    globalThis.Document = FakeDocument as unknown as typeof Document
+    try {
+      const resumePromise = resumeContainer(doc)
+      await Promise.resolve()
+
+      expect(installResumeListeners).toHaveBeenCalledWith(container)
+      expect(registerResumeContainer).not.toHaveBeenCalled()
+      expect(root.setAttribute).not.toHaveBeenCalled()
+
+      for (let attempt = 0; attempt < 5 && !resolveRestore; attempt += 1) {
+        await Promise.resolve()
+      }
+      expect(restoreResumedExternalComponents).toHaveBeenCalledWith(container)
+      expect(restoreResumedLocalSignalEffects).toHaveBeenCalledWith(container)
+
+      ;(resolveRestore as (() => void) | null)?.()
+      await resumePromise
+
+      expect(registerResumeContainer).toHaveBeenCalledWith(container)
+      expect(root.setAttribute).toHaveBeenCalledWith('data-e-resume', 'resumed')
+      expect(installResumeListeners).toHaveBeenCalledTimes(1)
+    } finally {
+      globalThis.Document = OriginalDocument
+    }
+  }, 15_000)
+})
diff --git a/packages/eclipsa/core/resume.test.ts b/packages/eclipsa/core/resume.test.ts
index 9f84e1b..def7ee1 100644
--- a/packages/eclipsa/core/resume.test.ts
+++ b/packages/eclipsa/core/resume.test.ts
@@ -1,22 +1,43 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import {
   applyResumeHmrSymbolReplacements,
+  applyResumeHmrUpdateToRegisteredContainers,
   applyResumeHmrUpdate,
+  bustRuntimeSymbolUrls,
   collectResumeHmrBoundaryIds,
   createResumeContainer,
+  invalidateRouteModulesForHmr,
+  invalidateRuntimeSymbolCaches,
+  markResumeHmrBoundaryDirty,
+  refreshRouteContainer,
+  refreshRouteContainerForHmr,
+  registerResumeContainer,
+  resolveResumeHmrBoundarySymbols,
   type RuntimeContainer,
 } from './runtime.ts'
 
 const createContainer = (overrides?: Partial<RuntimeContainer>) =>
   ({
+    actionStates: new Map(),
+    actions: new Map(),
+    asyncSignalSnapshotCache: new Map(),
+    asyncSignalStates: new Map(),
+    atoms: new WeakMap(),
     components: new Map(),
     dirty: new Set(),
     doc: undefined,
+    externalRenderCache: new Map(),
+    id: 'rt-test',
     imports: new Map(),
+    loaderStates: new Map(),
+    loaders: new Map(),
+    nextAtomId: 0,
     nextComponentId: 0,
     nextElementId: 0,
     nextScopeId: 0,
     nextSignalId: 0,
+    pendingSuspensePromises: new Set(),
+    router: null,
     rootChildCursor: 0,
     rootElement: undefined,
     scopes: new Map(),
@@ -29,8 +50,16 @@ const createContainer = (overrides?: Partial<RuntimeContainer>) =>
     ...overrides,
   }) as RuntimeContainer
 
+const createCleanupSlot = () => ({ callbacks: [] })
+
+const resetRegisteredResumeContainers = () => {
+  ;(globalThis as Record<PropertyKey, unknown>)[Symbol.for('eclipsa.resume-containers')] =
+    new Set<RuntimeContainer>()
+}
+
 const withFakeResumeDocument = <T>(
   options: {
+    href?: string
     pathname?: string
     comments?: string[]
   },
@@ -49,11 +78,19 @@ const withFakeResumeDocument = <T>(
   }
   class FakeDocument {
     body: HTMLElement
-    location = { pathname: options.pathname ?? '/' } as Location
-    #comments: FakeComment[]
+    location = (() => {
+      const href = options.href ?? `http://example.com${options.pathname ?? '/'}`
+      const url = new URL(href)
+      return {
+        hash: url.hash,
+        href: url.href,
+        origin: url.origin,
+        pathname: url.pathname,
+        search: url.search,
+      } as Location
+    })()
 
     constructor() {
-      this.#comments = (options.comments ?? []).map((data) => new FakeComment(data))
       this.body = { ownerDocument: this } as unknown as HTMLElement
     }
 
@@ -120,6 +157,7 @@ describe('resume HMR runtime helpers', () => {
             parentId: '$root',
             props: {},
             projectionSlots: null,
+            renderEffectCleanupSlot: createCleanupSlot(),
             scopeId: 'scope-root',
             signalIds: [],
             start: {} as Comment,
@@ -133,6 +171,26 @@ describe('resume HMR runtime helpers', () => {
         ['old-symbol', Promise.resolve({ default: () => null })],
         ['mid-symbol', Promise.resolve({ default: () => null })],
       ]),
+      scopes: new Map([
+        [
+          'sc0',
+          [
+            {
+              __eclipsa_type: 'ref',
+              data: [
+                {
+                  __eclipsa_type: 'ref',
+                  data: [],
+                  kind: 'symbol',
+                  token: 'old-symbol',
+                },
+              ],
+              kind: 'symbol',
+              token: 'old-symbol',
+            },
+          ],
+        ],
+      ]),
       symbols: new Map([['old-symbol', '/app/+page.tsx?eclipsa-symbol=old-symbol']]),
       visibles: new Map([
         [
@@ -162,6 +220,7 @@ describe('resume HMR runtime helpers', () => {
             id: 'w0',
             mode: 'dynamic',
             pending: null,
+            resumed: false,
             run: null,
             scopeId: 'scope-root',
             symbol: 'old-symbol',
@@ -177,6 +236,21 @@ describe('resume HMR runtime helpers', () => {
       'old-symbol': '/app/+page.tsx?eclipsa-symbol=mid-symbol',
     })
     expect(container.components.get('c0')?.symbol).toBe('mid-symbol')
+    expect(container.scopes.get('sc0')).toEqual([
+      {
+        __eclipsa_type: 'ref',
+        data: [
+          {
+            __eclipsa_type: 'ref',
+            data: [],
+            kind: 'symbol',
+            token: 'mid-symbol',
+          },
+        ],
+        kind: 'symbol',
+        token: 'mid-symbol',
+      },
+    ])
     expect(container.visibles.get('v0')?.symbol).toBe('mid-symbol')
     expect(container.watches.get('w0')?.symbol).toBe('mid-symbol')
     expect(collectResumeHmrBoundaryIds(container, ['mid-symbol'])).toEqual(['c0'])
@@ -189,6 +263,21 @@ describe('resume HMR runtime helpers', () => {
     expect(container.symbols.get('mid-symbol')).toBe('/app/+page.tsx?eclipsa-symbol=next-symbol')
     expect(container.symbols.get('next-symbol')).toBe('/app/+page.tsx?eclipsa-symbol=next-symbol')
     expect(container.components.get('c0')?.symbol).toBe('next-symbol')
+    expect(container.scopes.get('sc0')).toEqual([
+      {
+        __eclipsa_type: 'ref',
+        data: [
+          {
+            __eclipsa_type: 'ref',
+            data: [],
+            kind: 'symbol',
+            token: 'next-symbol',
+          },
+        ],
+        kind: 'symbol',
+        token: 'next-symbol',
+      },
+    ])
     expect(container.visibles.get('v0')?.symbol).toBe('next-symbol')
     expect(container.watches.get('w0')?.symbol).toBe('next-symbol')
     expect(collectResumeHmrBoundaryIds(container, ['next-symbol'])).toEqual(['c0'])
@@ -211,6 +300,7 @@ describe('resume HMR runtime helpers', () => {
             parentId: '$root',
             props: {},
             projectionSlots: null,
+            renderEffectCleanupSlot: createCleanupSlot(),
             scopeId: 'scope-root',
             signalIds: [],
             start: {} as Comment,
@@ -229,6 +319,7 @@ describe('resume HMR runtime helpers', () => {
             parentId: 'c0',
             props: {},
             projectionSlots: null,
+            renderEffectCleanupSlot: createCleanupSlot(),
             scopeId: 'scope-header',
             signalIds: [],
             symbol: 'header-symbol',
@@ -256,6 +347,7 @@ describe('resume HMR runtime helpers', () => {
             parentId: '$root',
             props: {},
             projectionSlots: null,
+            renderEffectCleanupSlot: createCleanupSlot(),
             scopeId: 'scope-root',
             signalIds: [],
             start: {} as Comment,
@@ -270,6 +362,46 @@ describe('resume HMR runtime helpers', () => {
     expect(collectResumeHmrBoundaryIds(container, ['page-symbol'])).toEqual(['c0'])
   })
 
+  it('resolves rerender boundary symbols through HMR replacement aliases', () => {
+    const container = createContainer({
+      components: new Map([
+        [
+          'c0',
+          {
+            active: true,
+            didMount: false,
+            end: {} as Comment,
+            id: 'c0',
+            mountCleanupSlots: [],
+            parentId: '$root',
+            props: {},
+            projectionSlots: null,
+            renderEffectCleanupSlot: createCleanupSlot(),
+            scopeId: 'scope-root',
+            signalIds: [],
+            start: {} as Comment,
+            symbol: 'current-symbol',
+            visibleCount: 0,
+            watchCount: 0,
+          },
+        ],
+      ]),
+    })
+
+    const symbolIds = resolveResumeHmrBoundarySymbols({
+      fileUrl: '/app/image/+page.tsx',
+      fullReload: false,
+      rerenderComponentSymbols: ['incoming-symbol'],
+      rerenderOwnerSymbols: [],
+      symbolUrlReplacements: {
+        'incoming-symbol': '/app/image/+page.tsx?eclipsa-symbol=current-symbol',
+      },
+    })
+
+    expect(symbolIds).toEqual(expect.arrayContaining(['incoming-symbol', 'current-symbol']))
+    expect(collectResumeHmrBoundaryIds(container, symbolIds)).toEqual(['c0'])
+  })
+
   it('applies replacement-only payloads without requiring DOM rerender', async () => {
     const container = createContainer({
       imports: new Map([['old-symbol', Promise.resolve({ default: () => null })]]),
@@ -290,6 +422,67 @@ describe('resume HMR runtime helpers', () => {
     expect(container.symbols.get('next-symbol')).toBe('/app/+page.tsx?eclipsa-symbol=next-symbol')
   })
 
+  it('forces HMR boundary remounts to rebuild slot content instead of reusing old DOM', () => {
+    const container = createContainer({
+      components: new Map([
+        [
+          'c0',
+          {
+            active: true,
+            didMount: false,
+            end: {} as Comment,
+            id: 'c0',
+            mountCleanupSlots: [],
+            parentId: '$root',
+            props: {},
+            projectionSlots: { children: 1 },
+            renderEffectCleanupSlot: createCleanupSlot(),
+            reuseExistingDomOnActivate: true,
+            reuseProjectionSlotDomOnActivate: true,
+            scopeId: 'scope-root',
+            signalIds: [],
+            start: {} as Comment,
+            symbol: 'layout-symbol',
+            visibleCount: 0,
+            watchCount: 0,
+          },
+        ],
+      ]),
+    })
+
+    expect(markResumeHmrBoundaryDirty(container, 'c0')).toBe(true)
+    expect(container.components.get('c0')?.active).toBe(false)
+    expect(container.components.get('c0')?.reuseExistingDomOnActivate).toBe(false)
+    expect(container.components.get('c0')?.reuseProjectionSlotDomOnActivate).toBe(false)
+    expect(container.dirty).toEqual(new Set(['c0']))
+  })
+
+  it('invalidates cached modules for rerendered symbols even when the symbol id stays stable', () => {
+    const container = createContainer({
+      imports: new Map([
+        ['stable-symbol', Promise.resolve({ default: () => null })],
+        ['other-symbol', Promise.resolve({ default: () => null })],
+      ]),
+    })
+
+    invalidateRuntimeSymbolCaches(container, ['stable-symbol'])
+
+    expect(container.imports.has('stable-symbol')).toBe(false)
+    expect(container.imports.has('other-symbol')).toBe(true)
+  })
+
+  it('cache-busts stable symbol URLs before rerendering unchanged symbol ids', () => {
+    const container = createContainer({
+      symbols: new Map([['stable-symbol', '/app/+page.tsx?eclipsa-symbol=stable-symbol']]),
+    })
+
+    bustRuntimeSymbolUrls(container, ['stable-symbol'], 123)
+
+    expect(container.symbols.get('stable-symbol')).toBe(
+      '/app/+page.tsx?eclipsa-symbol=stable-symbol&t=123',
+    )
+  })
+
   it('registers freshly added symbol URLs when the payload includes direct additions', () => {
     const container = createContainer({
       imports: new Map([['new-symbol', Promise.resolve({ default: () => null })]]),
@@ -381,6 +574,55 @@ describe('resume HMR runtime helpers', () => {
     )
   })
 
+  it('syncs resumed router URLs without queueing location-driven rerenders', () => {
+    withFakeResumeDocument(
+      {
+        comments: ['ec:c:c0:start', 'ec:c:c0:end'],
+        href: 'http://localhost:4173/docs/getting-started/overview',
+      },
+      (doc) => {
+        const container = createResumeContainer(doc, {
+          actions: {},
+          components: {
+            c0: {
+              props: {
+                __eclipsa_type: 'object',
+                entries: [],
+              },
+              scope: 'sc0',
+              signalIds: [],
+              symbol: 'layout-symbol',
+              visibleCount: 0,
+              watchCount: 0,
+            },
+          },
+          loaders: {},
+          scopes: {
+            sc0: [],
+          },
+          signals: {
+            '$router:isNavigating': false,
+            '$router:path': '/docs/getting-started/overview',
+            '$router:url': 'http://localhost/docs/getting-started/overview',
+          },
+          subscriptions: {
+            '$router:isNavigating': [],
+            '$router:path': [],
+            '$router:url': ['c0'],
+          },
+          symbols: {},
+          visibles: {},
+          watches: {},
+        })
+
+        expect(container.router?.currentUrl.value).toBe(
+          'http://localhost:4173/docs/getting-started/overview',
+        )
+        expect(container.dirty).toEqual(new Set())
+      },
+    )
+  })
+
   it('restores ref signals without requiring a global Element constructor', () => {
     const globalRecord = globalThis as Record<PropertyKey, unknown>
     const OriginalComment = globalThis.Comment
@@ -476,4 +718,347 @@ describe('resume HMR runtime helpers', () => {
       globalRecord.Element = OriginalElement
     }
   })
+
+  it('forces current-route refreshes even when the href has not changed', async () => {
+    const replace = vi.fn()
+    const container = createContainer({
+      doc: {
+        defaultView: {
+          location: {
+            assign() {},
+            replace,
+          },
+        },
+        location: {
+          hash: '',
+          href: 'http://example.com/docs/getting-started',
+          origin: 'http://example.com',
+          pathname: '/docs/getting-started',
+          search: '',
+        },
+        title: 'Docs',
+      } as unknown as Document,
+      rootElement: {
+        firstChild: null,
+      } as unknown as HTMLElement,
+    })
+
+    await refreshRouteContainer(container)
+
+    expect(replace).toHaveBeenCalledWith('http://example.com/docs/getting-started')
+  })
+
+  it('invalidates cached route modules for matching HMR file URLs', () => {
+    const currentUrl = 'http://example.com/image'
+    const currentPrefetchKey = '/image'
+    const imageRoute = {
+      entry: {
+        error: null,
+        hasMiddleware: false,
+        layouts: ['/app/+layout.tsx'],
+        loading: null,
+        notFound: null,
+        page: '/app/image/+page.tsx',
+        routePath: '/image',
+        segments: [],
+        server: null,
+      },
+      error: undefined,
+      layouts: [
+        {
+          metadata: null,
+          renderer: () => null,
+          symbol: 'layout-symbol',
+          url: '/app/+layout.tsx',
+        },
+      ],
+      params: {},
+      pathname: '/image',
+      page: {
+        metadata: null,
+        renderer: () => null,
+        symbol: 'page-symbol',
+        url: '/app/image/+page.tsx',
+      },
+      render: () => null,
+    }
+    const otherRoute = {
+      ...imageRoute,
+      entry: {
+        ...imageRoute.entry,
+        page: '/app/other/+page.tsx',
+        routePath: '/other',
+      },
+      pathname: '/other',
+      page: {
+        ...imageRoute.page,
+        url: '/app/other/+page.tsx',
+      },
+    }
+    const container = createContainer({
+      doc: {
+        location: {
+          href: currentUrl,
+        },
+      } as unknown as Document,
+      router: {
+        currentPath: { value: '/image' },
+        currentRoute: imageRoute,
+        currentUrl: { value: currentUrl },
+        defaultTitle: 'Image',
+        isNavigating: { value: false },
+        loadedRoutes: new Map([
+          ['/image::page', imageRoute],
+          ['/other::page', otherRoute],
+        ]),
+        location: undefined as any,
+        manifest: [imageRoute.entry, otherRoute.entry],
+        navigate: undefined as any,
+        prefetchedLoaders: new Map([[currentPrefetchKey, new Map()]]),
+        routeModuleBusts: new Map(),
+        routePrefetches: new Map([[currentPrefetchKey, Promise.resolve({ ok: true } as any)]]),
+        sequence: 0,
+      },
+    })
+
+    const invalidated = invalidateRouteModulesForHmr(container, '/app/image/+page.tsx', 1234)
+
+    expect(invalidated).toBe(true)
+    expect(container.router?.currentRoute).toBeNull()
+    expect(container.router?.loadedRoutes.has('/image::page')).toBe(false)
+    expect(container.router?.loadedRoutes.has('/other::page')).toBe(true)
+    expect(container.router?.prefetchedLoaders.has(currentPrefetchKey)).toBe(false)
+    expect(container.router?.routePrefetches.has(currentPrefetchKey)).toBe(false)
+    expect(container.router?.routeModuleBusts.get('/app/image/+page.tsx')).toBe(1234)
+  })
+
+  it('refreshes matching route containers when resumable HMR cannot patch a boundary', async () => {
+    resetRegisteredResumeContainers()
+    const replace = vi.fn()
+    const container = createContainer({
+      doc: {
+        defaultView: {
+          location: {
+            assign() {},
+            replace,
+          },
+        },
+        location: {
+          hash: '',
+          href: 'http://example.com/image',
+          origin: 'http://example.com',
+          pathname: '/image',
+          search: '',
+        },
+        title: 'Image',
+      } as unknown as Document,
+      rootElement: {
+        firstChild: null,
+      } as unknown as HTMLElement,
+      router: {
+        currentPath: { value: '/image' },
+        currentRoute: {
+          entry: {
+            error: null,
+            hasMiddleware: false,
+            layouts: [],
+            loading: null,
+            notFound: null,
+            page: '/app/image/+page.tsx',
+            routePath: '/image',
+            segments: [],
+            server: null,
+          },
+          error: undefined,
+          layouts: [],
+          params: {},
+          pathname: '/image',
+          page: {
+            metadata: null,
+            renderer: () => null,
+            symbol: 'page-symbol',
+            url: '/app/image/+page.tsx',
+          },
+          render: () => null,
+        },
+        currentUrl: { value: 'http://example.com/image' },
+        defaultTitle: 'Image',
+        isNavigating: { value: false },
+        loadedRoutes: new Map(),
+        location: undefined as any,
+        manifest: [],
+        navigate: undefined as any,
+        prefetchedLoaders: new Map(),
+        routeModuleBusts: new Map(),
+        routePrefetches: new Map(),
+        sequence: 0,
+      },
+    })
+    const unregister = registerResumeContainer(container)
+
+    try {
+      const result = await applyResumeHmrUpdateToRegisteredContainers({
+        fileUrl: '/app/image/+page.tsx',
+        fullReload: false,
+        rerenderComponentSymbols: ['missing-symbol'],
+        rerenderOwnerSymbols: [],
+        symbolUrlReplacements: {},
+      })
+
+      expect(result).toBe('updated')
+      expect(replace).toHaveBeenCalledWith('http://example.com/image')
+    } finally {
+      unregister()
+    }
+  })
+
+  it('does not refresh unrelated route containers on resumable HMR fallback', async () => {
+    resetRegisteredResumeContainers()
+    const container = createContainer({
+      doc: {
+        defaultView: {
+          location: {
+            assign() {},
+            replace() {},
+          },
+        },
+        location: {
+          hash: '',
+          href: 'http://example.com/image',
+          origin: 'http://example.com',
+          pathname: '/image',
+          search: '',
+        },
+        title: 'Image',
+      } as unknown as Document,
+      rootElement: {
+        firstChild: null,
+      } as unknown as HTMLElement,
+      router: {
+        currentPath: { value: '/image' },
+        currentRoute: {
+          entry: {
+            error: null,
+            hasMiddleware: false,
+            layouts: [],
+            loading: null,
+            notFound: null,
+            page: '/app/image/+page.tsx',
+            routePath: '/image',
+            segments: [],
+            server: null,
+          },
+          error: undefined,
+          layouts: [],
+          params: {},
+          pathname: '/image',
+          page: {
+            metadata: null,
+            renderer: () => null,
+            symbol: 'page-symbol',
+            url: '/app/image/+page.tsx',
+          },
+          render: () => null,
+        },
+        currentUrl: { value: 'http://example.com/image' },
+        defaultTitle: 'Image',
+        isNavigating: { value: false },
+        loadedRoutes: new Map(),
+        location: undefined as any,
+        manifest: [],
+        navigate: undefined as any,
+        prefetchedLoaders: new Map(),
+        routeModuleBusts: new Map(),
+        routePrefetches: new Map(),
+        sequence: 0,
+      },
+    })
+    const unregister = registerResumeContainer(container)
+
+    try {
+      const result = await applyResumeHmrUpdateToRegisteredContainers({
+        fileUrl: '/app/other/+page.tsx',
+        fullReload: false,
+        rerenderComponentSymbols: ['missing-symbol'],
+        rerenderOwnerSymbols: [],
+        symbolUrlReplacements: {},
+      })
+
+      expect(result).toBe('reload')
+    } finally {
+      unregister()
+    }
+  })
+
+  it('refreshes a route container directly for matching HMR module URLs', async () => {
+    const replace = vi.fn()
+    const container = createContainer({
+      doc: {
+        defaultView: {
+          location: {
+            assign() {},
+            replace,
+          },
+        },
+        location: {
+          hash: '',
+          href: 'http://example.com/image',
+          origin: 'http://example.com',
+          pathname: '/image',
+          search: '',
+        },
+        title: 'Image',
+      } as unknown as Document,
+      rootElement: {
+        firstChild: null,
+      } as unknown as HTMLElement,
+      router: {
+        currentPath: { value: '/image' },
+        currentRoute: {
+          entry: {
+            error: null,
+            hasMiddleware: false,
+            layouts: [],
+            loading: null,
+            notFound: null,
+            page: '/app/image/+page.tsx',
+            routePath: '/image',
+            segments: [],
+            server: null,
+          },
+          error: undefined,
+          layouts: [],
+          params: {},
+          pathname: '/image',
+          page: {
+            metadata: null,
+            renderer: () => null,
+            symbol: 'page-symbol',
+            url: '/app/image/+page.tsx',
+          },
+          render: () => null,
+        },
+        currentUrl: { value: 'http://example.com/image' },
+        defaultTitle: 'Image',
+        isNavigating: { value: false },
+        loadedRoutes: new Map(),
+        location: undefined as any,
+        manifest: [],
+        navigate: undefined as any,
+        prefetchedLoaders: new Map(),
+        routeModuleBusts: new Map(),
+        routePrefetches: new Map(),
+        sequence: 0,
+      },
+    })
+
+    await expect(
+      refreshRouteContainerForHmr(container, '/app/image/+page.tsx', 4321),
+    ).resolves.toBe(true)
+    expect(container.router?.routeModuleBusts.get('/app/image/+page.tsx')).toBe(4321)
+    expect(replace).toHaveBeenCalledWith('http://example.com/image')
+    await expect(
+      refreshRouteContainerForHmr(container, '/app/other/+page.tsx', 9876),
+    ).resolves.toBe(false)
+  })
 })
diff --git a/packages/eclipsa/core/resume.ts b/packages/eclipsa/core/resume.ts
index 7c825f8..511d227 100644
--- a/packages/eclipsa/core/resume.ts
+++ b/packages/eclipsa/core/resume.ts
@@ -1,18 +1,30 @@
 import {
   applyResumeHmrUpdateToRegisteredContainers,
   createResumeContainer,
+  refreshRegisteredRouteContainers,
   RESUME_FINAL_STATE_ELEMENT_ID,
   installResumeListeners,
   primeRouteModules,
   RESUME_STATE_ELEMENT_ID,
   restoreRegisteredRpcHandles,
+  restoreResumedExternalComponents,
+  restoreResumedLocalSignalEffects,
   registerResumeContainer,
   type ResumePayload,
 } from './runtime.ts'
+import {
+  APP_HOOKS_ELEMENT_ID,
+  registerClientHooks,
+  type AppHooksManifest,
+  type AppHooksModule,
+} from './hooks.ts'
 import { RESUME_HMR_EVENT, type ResumeHmrUpdatePayload } from './resume-hmr.ts'
 import { ROUTE_MANIFEST_ELEMENT_ID, type RouteManifest } from './router-shared.ts'
 
+const CONTENT_HMR_EVENT = 'eclipsa:content-update'
+
 interface ViteHotContext {
+  on(event: typeof CONTENT_HMR_EVENT, listener: () => void | Promise<void>): void
   on(event: string, listener: (data: ResumeHmrUpdatePayload) => void | Promise<void>): void
 }
 
@@ -35,6 +47,16 @@ const getRouteManifest = (doc: Document): RouteManifest => {
   return JSON.parse(elem.textContent) as RouteManifest
 }
 
+const getAppHooksManifest = (doc: Document): AppHooksManifest => {
+  const elem = doc.getElementById(APP_HOOKS_ELEMENT_ID)
+  if (!elem?.textContent) {
+    return {
+      client: null,
+    }
+  }
+  return JSON.parse(elem.textContent) as AppHooksManifest
+}
+
 const initResumeHmr = (hot: ViteHotContext | undefined) => {
   if (!hot) {
     return
@@ -46,6 +68,13 @@ const initResumeHmr = (hot: ViteHotContext | undefined) => {
       location.reload()
     }
   })
+  hot.on(CONTENT_HMR_EVENT, async () => {
+    try {
+      await refreshRegisteredRouteContainers()
+    } catch {
+      location.reload()
+    }
+  })
 }
 
 initResumeHmr((import.meta as ImportMeta & { hot?: ViteHotContext }).hot)
@@ -62,9 +91,32 @@ export const resumeContainer = async (source: Document | HTMLElement = document)
   const container = createResumeContainer(root, payload, {
     routeManifest: getRouteManifest(doc),
   })
-  await primeRouteModules(container)
-  restoreRegisteredRpcHandles(container)
-  registerResumeContainer(container)
-  root.setAttribute('data-e-resume', 'resumed')
+  let resolveResumeReady!: () => void
+  container.resumeReadyPromise = new Promise<void>((resolve) => {
+    resolveResumeReady = resolve
+  })
   installResumeListeners(container)
+
+  try {
+    const appHooksManifest = getAppHooksManifest(doc)
+    if (appHooksManifest.client) {
+      const module = (await import(/* @vite-ignore */ appHooksManifest.client)) as AppHooksModule
+      registerClientHooks({
+        reroute: module.reroute,
+        transport: module.transport,
+      })
+    } else {
+      registerClientHooks({})
+    }
+
+    await primeRouteModules(container)
+    restoreRegisteredRpcHandles(container)
+    await restoreResumedExternalComponents(container)
+    await restoreResumedLocalSignalEffects(container)
+    registerResumeContainer(container)
+    root.setAttribute('data-e-resume', 'resumed')
+  } finally {
+    resolveResumeReady()
+    container.resumeReadyPromise = null
+  }
 }
diff --git a/packages/eclipsa/core/route-middleware.ts b/packages/eclipsa/core/route-middleware.ts
index 0a39441..86e6bf5 100644
--- a/packages/eclipsa/core/route-middleware.ts
+++ b/packages/eclipsa/core/route-middleware.ts
@@ -1,3 +1,4 @@
-import type { MiddlewareHandler } from 'hono/types'
+import type { Env, MiddlewareHandler } from 'hono/types'
+import type { WithAppEnv } from './hooks.ts'
 
-export type RouteMiddleware = MiddlewareHandler<any>
+export type RouteMiddleware<E extends Env = Env> = MiddlewareHandler<WithAppEnv<E>>
diff --git a/packages/eclipsa/core/router-shared.ts b/packages/eclipsa/core/router-shared.ts
index 9fe443e..add3068 100644
--- a/packages/eclipsa/core/router-shared.ts
+++ b/packages/eclipsa/core/router-shared.ts
@@ -1,23 +1,107 @@
 export const ROUTE_LINK_ATTR = 'data-e-link'
+export const ROUTE_DATA_ENDPOINT = '/__eclipsa/route-data'
+export const ROUTE_DATA_REQUEST_HEADER = 'x-eclipsa-route-data'
 export const ROUTE_MANIFEST_ELEMENT_ID = 'eclipsa-route-manifest'
 export const ROUTE_PREFETCH_ATTR = 'data-e-link-prefetch'
 export const ROUTE_PREFLIGHT_ENDPOINT = '/__eclipsa/route-preflight'
 export const ROUTE_PREFLIGHT_REQUEST_HEADER = 'x-eclipsa-route-preflight'
+export const ROUTE_RPC_URL_HEADER = 'x-eclipsa-route-url'
 export const ROUTE_REPLACE_ATTR = 'data-e-link-replace'
 
 export interface NavigateOptions {
   replace?: boolean
 }
 
+export type RoutePathParamValue = string | number | boolean
+export type RoutePathParamInput = RoutePathParamValue | null | undefined
+export type RoutePathRestParamInput = RoutePathParamValue | readonly RoutePathParamValue[]
+export type RouteSearchParamValue =
+  | RoutePathParamValue
+  | readonly RoutePathParamValue[]
+  | null
+  | undefined
+export type RouteSearchParamsInput = URLSearchParams | Record<string, RouteSearchParamValue>
+
+type TrimLeadingSlash<Path extends string> = Path extends `/${infer Rest}`
+  ? TrimLeadingSlash<Rest>
+  : Path
+
+type TrimTrailingSlash<Path extends string> = Path extends `${infer Rest}/`
+  ? TrimTrailingSlash<Rest>
+  : Path
+
+type NormalizePath<Path extends string> = TrimTrailingSlash<TrimLeadingSlash<Path>>
+
+type SplitPath<Path extends string> = Path extends `${infer Head}/${infer Tail}`
+  ? [Head, ...SplitPath<Tail>]
+  : [Path]
+
+type PathSegments<Path extends string> = NormalizePath<Path> extends ''
+  ? []
+  : SplitPath<NormalizePath<Path>>
+
+type RequiredParamName<Segment extends string> = Segment extends `[${infer Name}]`
+  ? Segment extends `[[${string}]]`
+    ? never
+    : Segment extends `[...${string}]`
+      ? never
+      : Name
+  : never
+
+type OptionalParamName<Segment extends string> = Segment extends `[[${infer Name}]]` ? Name : never
+
+type RestParamName<Segment extends string> = Segment extends `[...${infer Name}]` ? Name : never
+
+type RouteRequiredParamNames<Path extends string> = RequiredParamName<PathSegments<Path>[number]>
+type RouteOptionalParamNames<Path extends string> = OptionalParamName<PathSegments<Path>[number]>
+type RouteRestParamNames<Path extends string> = RestParamName<PathSegments<Path>[number]>
+
+export type RoutePathParams<Path extends string> = string extends Path
+  ? Record<string, RoutePathParamInput | RoutePathRestParamInput>
+  : {
+      [Name in RouteRequiredParamNames<Path>]: RoutePathParamValue
+    } & {
+      [Name in RouteOptionalParamNames<Path>]?: RoutePathParamInput
+    } & {
+      [Name in RouteRestParamNames<Path>]: RoutePathRestParamInput
+    }
+
+type RoutePathParamsArg<Path extends string> = string extends Path
+  ? { params?: RoutePathParams<Path> }
+  : keyof RoutePathParams<Path> extends never
+    ? { params?: RoutePathParams<Path> }
+    : { params: RoutePathParams<Path> }
+
+export type RouteTarget<Path extends string = string> = {
+  hash?: string
+  replace?: boolean
+  search?: RouteSearchParamsInput
+  to: Path
+} & RoutePathParamsArg<Path>
+
 export interface Navigate {
   (href: string, options?: NavigateOptions): Promise<void>
+  <Path extends string>(target: RouteTarget<Path>, options?: NavigateOptions): Promise<void>
   readonly isNavigating: boolean
 }
 
 export type LinkPrefetchMode = 'focus' | 'hover' | 'intent' | 'none'
 
+export interface RouteLocation {
+  readonly hash: string
+  readonly href: string
+  readonly pathname: string
+  readonly search: string
+}
+
 export type RouteParams = Record<string, string | string[] | undefined>
 
+export interface StaticPath {
+  params: RouteParams
+}
+
+export type GetStaticPaths = () => StaticPath[] | Promise<StaticPath[]>
+
 export interface RoutePathSegment {
   kind: 'static' | 'required' | 'optional' | 'rest'
   value: string
@@ -36,3 +120,127 @@ export interface RouteModuleManifest {
 }
 
 export type RouteManifest = RouteModuleManifest[]
+
+const normalizeRoutePathTemplate = (path: string) => {
+  const trimmed = path.trim()
+  if (trimmed === '' || trimmed === '/') {
+    return '/'
+  }
+  return `/${trimmed.replace(/^\/+|\/+$/g, '')}`
+}
+
+const toTemplateSegments = (path: string) =>
+  normalizeRoutePathTemplate(path)
+    .split('/')
+    .filter(Boolean)
+
+const encodeRouteSegmentValue = (value: RoutePathParamValue) => encodeURIComponent(String(value))
+
+const appendSearchParams = (search: URLSearchParams, value: Record<string, RouteSearchParamValue>) => {
+  for (const [key, rawValue] of Object.entries(value)) {
+    if (rawValue === null || rawValue === undefined) {
+      continue
+    }
+    if (Array.isArray(rawValue)) {
+      for (const entry of rawValue) {
+        search.append(key, String(entry))
+      }
+      continue
+    }
+    search.append(key, String(rawValue))
+  }
+}
+
+export const buildRoutePath = <Path extends string>(
+  path: Path,
+  params?: RoutePathParams<Path>,
+): string => {
+  const segments = toTemplateSegments(path)
+  if (segments.length === 0) {
+    return '/'
+  }
+
+  const resolved: string[] = []
+  for (const segment of segments) {
+    const optionalMatch = /^\[\[([^\]]+)\]\]$/.exec(segment)
+    if (optionalMatch) {
+      const value = params?.[optionalMatch[1]! as keyof RoutePathParams<Path>]
+      if (value === null || value === undefined) {
+        continue
+      }
+      if (Array.isArray(value)) {
+        throw new Error(`Optional route parameter "${optionalMatch[1]}" does not accept array values.`)
+      }
+      resolved.push(encodeRouteSegmentValue(value as RoutePathParamValue))
+      continue
+    }
+
+    const restMatch = /^\[\.\.\.([^\]]+)\]$/.exec(segment)
+    if (restMatch) {
+      const value = params?.[restMatch[1]! as keyof RoutePathParams<Path>]
+      if (value === null || value === undefined) {
+        throw new Error(`Missing route parameter "${restMatch[1]}" for path "${path}".`)
+      }
+      if (Array.isArray(value)) {
+        if (value.length === 0) {
+          throw new Error(`Route parameter "${restMatch[1]}" requires at least one segment.`)
+        }
+        for (const entry of value) {
+          resolved.push(encodeRouteSegmentValue(entry))
+        }
+      } else {
+        resolved.push(encodeRouteSegmentValue(value as RoutePathParamValue))
+      }
+      continue
+    }
+
+    const requiredMatch = /^\[([^\]]+)\]$/.exec(segment)
+    if (requiredMatch) {
+      const value = params?.[requiredMatch[1]! as keyof RoutePathParams<Path>]
+      if (value === null || value === undefined || Array.isArray(value)) {
+        throw new Error(`Missing route parameter "${requiredMatch[1]}" for path "${path}".`)
+      }
+      resolved.push(encodeRouteSegmentValue(value as RoutePathParamValue))
+      continue
+    }
+
+    resolved.push(segment)
+  }
+
+  return `/${resolved.join('/')}`
+}
+
+export const createRouteHref = <Path extends string>(target: RouteTarget<Path>): string => {
+  const pathname = buildRoutePath(target.to, target.params)
+  const searchParams = new URLSearchParams()
+
+  if (target.search) {
+    if (target.search instanceof URLSearchParams) {
+      for (const [key, value] of target.search.entries()) {
+        searchParams.append(key, value)
+      }
+    } else {
+      appendSearchParams(searchParams, target.search)
+    }
+  }
+
+  const query = searchParams.toString()
+  const hash = target.hash ? (target.hash.startsWith('#') ? target.hash : `#${target.hash}`) : ''
+  return `${pathname}${query ? `?${query}` : ''}${hash}`
+}
+
+export const normalizeNavigateInput = <Path extends string>(
+  input: string | RouteTarget<Path>,
+  options?: NavigateOptions,
+): { href: string; replace: boolean } => {
+  if (typeof input === 'string') {
+    return {
+      href: input,
+      replace: options?.replace ?? false,
+    }
+  }
+  return {
+    href: createRouteHref(input),
+    replace: options?.replace ?? input.replace ?? false,
+  }
+}
diff --git a/packages/eclipsa/core/router-types.test.ts b/packages/eclipsa/core/router-types.test.ts
new file mode 100644
index 0000000..a6d1ed2
--- /dev/null
+++ b/packages/eclipsa/core/router-types.test.ts
@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+
+import { buildRoutePath, createRouteHref, type RoutePathParams } from './router-shared.ts'
+
+describe('router typed APIs', () => {
+  it('keeps type-safe path parameter requirements', () => {
+    const validParams: RoutePathParams<'/posts/[id]/[[tab]]/[...rest]'> = {
+      id: '42',
+      rest: ['comments', 'latest'],
+    }
+
+    const href = createRouteHref({
+      to: '/posts/[id]/[[tab]]/[...rest]',
+      params: validParams,
+      hash: 'tail',
+    })
+
+    expect(href).toBe('/posts/42/comments/latest#tail')
+    expect(buildRoutePath('/posts/[id]', { id: '99' })).toBe('/posts/99')
+
+    const ensureTypeErrors = () => {
+      // @ts-expect-error missing required path params
+      createRouteHref({ to: '/posts/[id]' })
+
+      // @ts-expect-error rest params are required on [...rest]
+      buildRoutePath('/posts/[id]/[...rest]', { id: '10' })
+
+      // @ts-expect-error unknown params are rejected
+      buildRoutePath('/posts/[id]', { id: '1', extra: 'x' })
+    }
+
+    void ensureTypeErrors
+  })
+})
diff --git a/packages/eclipsa/core/router.test.ts b/packages/eclipsa/core/router.test.ts
new file mode 100644
index 0000000..024c598
--- /dev/null
+++ b/packages/eclipsa/core/router.test.ts
@@ -0,0 +1,325 @@
+import { jsxDEV } from 'eclipsa/jsx-dev-runtime'
+import { describe, expect, it } from 'vitest'
+import { __eclipsaComponent } from './internal.ts'
+import { Link, useLocation, useNavigate } from './router.tsx'
+import { primeLocationState, renderClientInsertable, withRuntimeContainer } from './runtime.ts'
+import { renderSSR, renderSSRAsync } from './ssr.ts'
+class FakeNode {
+  childNodes = []
+  parentNode = null
+  appendChild(child) {
+    child.parentNode = this
+    this.childNodes.push(child)
+    return child
+  }
+  get textContent() {
+    return this.childNodes.map((child) => child.textContent).join('')
+  }
+}
+class FakeText extends FakeNode {
+  constructor(data) {
+    super()
+    this.data = data
+  }
+  get textContent() {
+    return this.data
+  }
+}
+class FakeComment extends FakeNode {
+  constructor(data) {
+    super()
+    this.data = data
+  }
+  get textContent() {
+    return ''
+  }
+}
+class FakeElement extends FakeNode {
+  constructor(tagName) {
+    super()
+    this.tagName = tagName
+  }
+  attributes = /* @__PURE__ */ new Map()
+  className = ''
+  setAttribute(name, value) {
+    this.attributes.set(name, value)
+  }
+  getAttribute(name) {
+    return this.attributes.get(name) ?? null
+  }
+}
+class FakeDocument {
+  createComment(data) {
+    return new FakeComment(data)
+  }
+  createElement(tagName) {
+    return new FakeElement(tagName)
+  }
+  createTextNode(data) {
+    return new FakeText(data)
+  }
+}
+const withFakeDom = (fn) => {
+  const previousDocument = globalThis.document
+  const previousNode = globalThis.Node
+  Object.assign(globalThis, {
+    Node: FakeNode,
+    document: new FakeDocument(),
+  })
+  try {
+    fn()
+  } finally {
+    if (previousDocument === void 0) {
+      Reflect.deleteProperty(globalThis, 'document')
+    } else {
+      Object.assign(globalThis, { document: previousDocument })
+    }
+    if (previousNode === void 0) {
+      Reflect.deleteProperty(globalThis, 'Node')
+    } else {
+      Object.assign(globalThis, { Node: previousNode })
+    }
+  }
+}
+const collectElements = (node) => {
+  const result = []
+  for (const child of node.childNodes) {
+    if (child instanceof FakeElement) {
+      result.push(child)
+    }
+    result.push(...collectElements(child))
+  }
+  return result
+}
+describe('useNavigate', () => {
+  it('tracks the internal navigating signal when isNavigating is read during render', () => {
+    const App = __eclipsaComponent(
+      () => {
+        const navigate = useNavigate()
+        return /* @__PURE__ */ jsxDEV(
+          'button',
+          { children: navigate.isNavigating ? 'loading' : 'idle' },
+          void 0,
+          false,
+          {
+            fileName: 'packages/eclipsa/core/router.test.ts',
+            lineNumber: 115,
+            columnNumber: 16,
+          },
+        )
+      },
+      'component-symbol',
+      () => [],
+    )
+    const { html, payload } = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(App, {}, void 0, false, {
+        fileName: 'packages/eclipsa/core/router.test.ts',
+        lineNumber: 121,
+        columnNumber: 47,
+      }),
+    )
+    expect(html).toContain('<button>idle</button>')
+    expect(payload.signals['$router:isNavigating']).toBe(false)
+    expect(payload.subscriptions['$router:isNavigating']).toEqual(['c0'])
+  })
+})
+describe('useLocation', () => {
+  it('tracks the current route location during render', async () => {
+    const App = __eclipsaComponent(
+      () => {
+        const location = useLocation()
+        return /* @__PURE__ */ jsxDEV(
+          'p',
+          {
+            children: [
+              location.pathname,
+              '|',
+              location.search,
+              '|',
+              location.hash,
+              '|',
+              location.href,
+            ],
+          },
+          void 0,
+          true,
+          {
+            fileName: 'packages/eclipsa/core/router.test.ts',
+            lineNumber: 135,
+            columnNumber: 11,
+          },
+        )
+      },
+      'component-symbol',
+      () => [],
+    )
+    const { html, payload } = await renderSSRAsync(
+      () =>
+        /* @__PURE__ */ jsxDEV(App, {}, void 0, false, {
+          fileName: 'packages/eclipsa/core/router.test.ts',
+          lineNumber: 144,
+          columnNumber: 58,
+        }),
+      {
+        prepare(container) {
+          primeLocationState(container, 'https://example.com/docs?tab=api#hooks')
+        },
+      },
+    )
+    expect(html).toContain('<p>/docs|?tab=api|#hooks|https://example.com/docs?tab=api#hooks</p>')
+    expect(payload.signals['$router:url']).toBe('https://example.com/docs?tab=api#hooks')
+    expect(payload.subscriptions['$router:url']).toEqual(['c0'])
+  })
+})
+describe('Link', () => {
+  it('normalizes prefetch controls onto internal attributes', () => {
+    const disabled = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(
+        Link,
+        { href: '/actions', prefetch: false, children: 'Actions' },
+        void 0,
+        false,
+        {
+          fileName: 'packages/eclipsa/core/router.test.ts',
+          lineNumber: 159,
+          columnNumber: 7,
+        },
+      ),
+    )
+    const enabled = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(
+        Link,
+        { href: '/counter', prefetch: 'hover', children: 'Counter' },
+        void 0,
+        false,
+        {
+          fileName: 'packages/eclipsa/core/router.test.ts',
+          lineNumber: 164,
+          columnNumber: 7,
+        },
+      ),
+    )
+    expect(disabled.html).toContain('data-e-link-prefetch="none"')
+    expect(disabled.html).not.toContain(' prefetch=')
+    expect(enabled.html).toContain('data-e-link-prefetch="hover"')
+    expect(enabled.html).not.toContain(' prefetch=')
+  })
+  it('skips internal router attrs when document navigation is requested', () => {
+    const rendered = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(
+        Link,
+        {
+          href: '/playground',
+          prefetch: 'hover',
+          reloadDocument: true,
+          replace: true,
+          children: 'Playground',
+        },
+        void 0,
+        false,
+        {
+          fileName: 'packages/eclipsa/core/router.test.ts',
+          lineNumber: 177,
+          columnNumber: 7,
+        },
+      ),
+    )
+    expect(rendered.html).toContain('href="/playground"')
+    expect(rendered.html).not.toContain('data-e-link=')
+    expect(rendered.html).not.toContain('data-e-link-prefetch=')
+    expect(rendered.html).not.toContain('data-e-link-replace=')
+    expect(rendered.html).not.toContain(' reloadDocument=')
+    expect(rendered.html).not.toContain(' replace=')
+  })
+  it('renders jsx children on the client without stringifying them', () => {
+    withFakeDom(() => {
+      const Icon = () =>
+        /* @__PURE__ */ jsxDEV(
+          'svg',
+          {
+            children: /* @__PURE__ */ jsxDEV('path', {}, void 0, false, {
+              fileName: 'packages/eclipsa/core/router.test.ts',
+              lineNumber: 194,
+              columnNumber: 11,
+            }),
+          },
+          void 0,
+          false,
+          {
+            fileName: 'packages/eclipsa/core/router.test.ts',
+            lineNumber: 193,
+            columnNumber: 9,
+          },
+        )
+      const container = {
+        actionStates: /* @__PURE__ */ new Map(),
+        actions: /* @__PURE__ */ new Map(),
+        asyncSignalSnapshotCache: /* @__PURE__ */ new Map(),
+        asyncSignalStates: /* @__PURE__ */ new Map(),
+        atoms: /* @__PURE__ */ new WeakMap(),
+        components: /* @__PURE__ */ new Map(),
+        dirty: /* @__PURE__ */ new Set(),
+        doc: document,
+        id: 'rt-test',
+        imports: /* @__PURE__ */ new Map(),
+        loaderStates: /* @__PURE__ */ new Map(),
+        loaders: /* @__PURE__ */ new Map(),
+        nextAtomId: 0,
+        nextComponentId: 0,
+        nextElementId: 0,
+        nextScopeId: 0,
+        nextSignalId: 0,
+        pendingSuspensePromises: /* @__PURE__ */ new Set(),
+        rootChildCursor: 0,
+        rootElement: null,
+        router: null,
+        scopes: /* @__PURE__ */ new Map(),
+        signals: /* @__PURE__ */ new Map(),
+        symbols: /* @__PURE__ */ new Map(),
+        visibilityCheckQueued: false,
+        visibilityListenersCleanup: null,
+        visibles: /* @__PURE__ */ new Map(),
+        watches: /* @__PURE__ */ new Map(),
+      }
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(
+          /* @__PURE__ */ jsxDEV(
+            Link,
+            {
+              href: '/',
+              children: [
+                /* @__PURE__ */ jsxDEV(Icon, {}, void 0, false, {
+                  fileName: 'packages/eclipsa/core/router.test.ts',
+                  lineNumber: 231,
+                  columnNumber: 13,
+                }),
+                /* @__PURE__ */ jsxDEV('span', { children: 'eclipsa' }, void 0, false, {
+                  fileName: 'packages/eclipsa/core/router.test.ts',
+                  lineNumber: 232,
+                  columnNumber: 13,
+                }),
+              ],
+            },
+            void 0,
+            true,
+            {
+              fileName: 'packages/eclipsa/core/router.test.ts',
+              lineNumber: 230,
+              columnNumber: 11,
+            },
+          ),
+          container,
+        ),
+      )
+      const anchor = nodes.find((node) => node instanceof FakeElement && node.tagName === 'a')
+      expect(anchor).toBeTruthy()
+      expect(anchor?.textContent).toBe('eclipsa')
+      expect(anchor?.textContent).not.toContain('[object Object]')
+      expect(
+        collectElements(anchor ?? new FakeElement('missing')).some(
+          (node) => node.tagName === 'svg',
+        ),
+      ).toBe(true)
+    })
+  })
+})
diff --git a/packages/eclipsa/core/router.test.tsx b/packages/eclipsa/core/router.test.tsx
deleted file mode 100644
index e1ce2cf..0000000
--- a/packages/eclipsa/core/router.test.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { component$ } from './component.ts'
-import { __eclipsaComponent } from './internal.ts'
-import { Link, useNavigate } from './router.tsx'
-import { renderSSR } from './ssr.ts'
-
-describe('useNavigate', () => {
-  it('tracks the internal navigating signal when isNavigating is read during render', () => {
-    const App = component$(
-      __eclipsaComponent(
-        () => {
-          const navigate = useNavigate()
-          return <button>{navigate.isNavigating ? 'loading' : 'idle'}</button>
-        },
-        'component-symbol',
-        () => [],
-      ),
-    )
-
-    const { html, payload } = renderSSR(() => <App />)
-
-    expect(html).toContain('<button>idle</button>')
-    expect(payload.signals['$router:isNavigating']).toBe(false)
-    expect(payload.subscriptions['$router:isNavigating']).toEqual(['c0'])
-  })
-})
-
-describe('Link', () => {
-  it('normalizes prefetch controls onto internal attributes', () => {
-    const disabled = renderSSR(() => (
-      <Link href="/actions" prefetch={false}>
-        Actions
-      </Link>
-    ))
-    const enabled = renderSSR(() => (
-      <Link href="/counter" prefetch="hover">
-        Counter
-      </Link>
-    ))
-
-    expect(disabled.html).toContain('data-e-link-prefetch="none"')
-    expect(disabled.html).not.toContain(' prefetch=')
-    expect(enabled.html).toContain('data-e-link-prefetch="hover"')
-    expect(enabled.html).not.toContain(' prefetch=')
-  })
-})
diff --git a/packages/eclipsa/core/router.tsx b/packages/eclipsa/core/router.tsx
index 4811c54..5e26216 100644
--- a/packages/eclipsa/core/router.tsx
+++ b/packages/eclipsa/core/router.tsx
@@ -1,26 +1,45 @@
 import type { JSX } from '../jsx/types.ts'
-import { component$ } from './component.ts'
 import {
   ROUTE_LINK_ATTR,
   ROUTE_PREFETCH_ATTR,
   ROUTE_REPLACE_ATTR,
+  createRouteHref,
   type LinkPrefetchMode,
   type Navigate,
+  type RouteLocation,
+  type RouteTarget,
   type RouteParams,
 } from './router-shared.ts'
 import {
   notFound as throwRouteNotFound,
+  useRuntimeLocation,
+  useRuntimeRouteError,
   useRuntimeNavigate,
   useRuntimeRouteParams,
 } from './runtime.ts'
 
-export interface LinkProps extends Record<string, unknown> {
+interface LinkBaseProps extends Record<string, unknown> {
   children?: JSX.Element | JSX.Element[]
-  href: string
   prefetch?: LinkPrefetchMode | boolean
+  reloadDocument?: boolean
   replace?: boolean
 }
 
+interface LinkHrefProps {
+  href: string
+  hash?: never
+  params?: never
+  search?: never
+  to?: never
+}
+
+type LinkRouteTargetProps<Path extends string = string> = Omit<RouteTarget<Path>, 'replace'> & {
+  href?: never
+}
+
+export type LinkProps<Path extends string = string> = LinkBaseProps &
+  (LinkHrefProps | LinkRouteTargetProps<Path>)
+
 const normalizeLinkPrefetchMode = (
   prefetch: LinkProps['prefetch'],
 ): LinkPrefetchMode | undefined => {
@@ -36,105 +55,61 @@ const normalizeLinkPrefetchMode = (
   return prefetch
 }
 
-const appendClientChildren = (parent: Element, value: unknown) => {
-  let resolved = value
-  while (typeof resolved === 'function') {
-    resolved = resolved()
-  }
-
-  if (Array.isArray(resolved)) {
-    for (const entry of resolved) {
-      appendClientChildren(parent, entry)
-    }
-    return
-  }
-  if (resolved === null || resolved === undefined || resolved === false) {
-    return
-  }
-  if (resolved instanceof Node) {
-    parent.appendChild(resolved)
-    return
-  }
-
-  parent.appendChild(document.createTextNode(String(resolved)))
-}
-
-const createClientLinkNode = (props: LinkProps) => {
-  const anchor = document.createElement('a')
-  anchor.setAttribute(ROUTE_LINK_ATTR, '')
-  const prefetchMode = normalizeLinkPrefetchMode(props.prefetch)
-
-  if (props.replace) {
-    anchor.setAttribute(ROUTE_REPLACE_ATTR, 'true')
+const resolveLinkHref = (props: LinkProps): string => {
+  if ('href' in props && typeof props.href === 'string') {
+    return props.href
   }
-  if (prefetchMode) {
-    anchor.setAttribute(ROUTE_PREFETCH_ATTR, prefetchMode)
-  }
-
-  for (const [name, value] of Object.entries(props)) {
-    if (
-      name === 'children' ||
-      name === 'prefetch' ||
-      name === 'replace' ||
-      value === false ||
-      value === undefined ||
-      value === null
-    ) {
-      continue
+  if ('to' in props && typeof props.to === 'string') {
+    const target: RouteTarget = {
+      to: props.to,
+      params: props.params,
+      search: props.search,
+      hash: props.hash,
     }
-    if (name === 'class') {
-      anchor.className = String(value)
-      continue
-    }
-    if (name === 'style' && value && typeof value === 'object') {
-      anchor.setAttribute(
-        'style',
-        Object.entries(value as Record<string, unknown>)
-          .map(([styleName, styleValue]) => `${styleName}: ${styleValue}`)
-          .join('; '),
-      )
-      continue
-    }
-    if (value === true) {
-      anchor.setAttribute(name, '')
-      continue
-    }
-    anchor.setAttribute(name, String(value))
+    return createRouteHref(target)
   }
-
-  appendClientChildren(anchor, props.children)
-  return anchor
+  throw new Error('Link requires either "href" or "to".')
 }
 
-export const Link = component$((props: LinkProps) => {
-  if (typeof document !== 'undefined') {
-    return createClientLinkNode(props) as unknown as JSX.Element
-  }
-
+export const Link = (props: LinkProps) => {
+  const reloadDocument = props.reloadDocument === true
   const prefetchMode = normalizeLinkPrefetchMode(props.prefetch)
   const nextProps: Record<string, unknown> = {
     ...props,
-    [ROUTE_LINK_ATTR]: '',
+    href: resolveLinkHref(props),
   }
 
-  if (prefetchMode) {
-    nextProps[ROUTE_PREFETCH_ATTR] = prefetchMode
-  }
-  if (props.replace) {
-    nextProps[ROUTE_REPLACE_ATTR] = 'true'
+  if (!reloadDocument) {
+    nextProps[ROUTE_LINK_ATTR] = ''
+    if (prefetchMode) {
+      nextProps[ROUTE_PREFETCH_ATTR] = prefetchMode
+    }
+    if (props.replace) {
+      nextProps[ROUTE_REPLACE_ATTR] = 'true'
+    }
   }
   delete nextProps.prefetch
+  delete nextProps.reloadDocument
   delete nextProps.replace
+  delete nextProps.to
+  delete nextProps.params
+  delete nextProps.search
+  delete nextProps.hash
 
   return {
     isStatic: true,
     props: nextProps,
     type: 'a',
   } satisfies JSX.Element
-})
+}
 
 export const useNavigate = (): Navigate => useRuntimeNavigate()
 
+export const useLocation = (): RouteLocation => useRuntimeLocation()
+
 export const useRouteParams = (): RouteParams => useRuntimeRouteParams()
 
+export const useRouteError = <T = unknown>(): T | undefined =>
+  useRuntimeRouteError() as T | undefined
+
 export const notFound = (): never => throwRouteNotFound()
diff --git a/packages/eclipsa/core/router.typecheck.ts b/packages/eclipsa/core/router.typecheck.ts
new file mode 100644
index 0000000..7a18408
--- /dev/null
+++ b/packages/eclipsa/core/router.typecheck.ts
@@ -0,0 +1,22 @@
+import type { GetStaticPaths, StaticPath } from './router-shared.ts'
+
+type Equal<Left, Right> =
+  (<T>() => T extends Left ? 1 : 2) extends <T>() => T extends Right ? 1 : 2 ? true : false
+type Expect<T extends true> = T
+
+const getStaticPaths: GetStaticPaths = async () => [
+  {
+    params: {
+      lang: undefined,
+      slug: ['guide', 'getting-started'],
+    },
+  },
+]
+
+type StaticPaths = Awaited<ReturnType<typeof getStaticPaths>>
+type _StaticPaths = Expect<Equal<StaticPaths, StaticPath[]>>
+
+// @ts-expect-error static path params must be string, string[], or undefined.
+const invalidStaticPaths: GetStaticPaths = () => [{ params: { slug: 1 } }]
+
+void invalidStaticPaths
diff --git a/packages/eclipsa/core/runtime.test.ts b/packages/eclipsa/core/runtime.test.ts
index ed7672e..688323a 100644
--- a/packages/eclipsa/core/runtime.test.ts
+++ b/packages/eclipsa/core/runtime.test.ts
@@ -1,14 +1,90 @@
 import { describe, expect, it } from 'vitest'
+import { motion } from '../../motion/mod.ts'
 import { jsxDEV } from '../jsx/jsx-dev-runtime.ts'
-import { component$ } from './component.ts'
-import { __eclipsaComponent, __eclipsaWatch } from './internal.ts'
-import { onCleanup, onMount, useSignal, useWatch } from './signal.ts'
-import { renderClientInsertable, type RuntimeContainer, withRuntimeContainer } from './runtime.ts'
+import type { JSX } from '../jsx/types.ts'
+import { attr, insert } from './client/dom.ts'
+import {
+  createContext,
+  getRuntimeContextReference,
+  materializeRuntimeContext,
+  materializeRuntimeContextProvider,
+} from './context.ts'
+import {
+  __eclipsaComponent,
+  __eclipsaEvent,
+  __eclipsaWatch,
+  setExternalComponentMeta,
+} from './internal.ts'
+import { For, Show } from './flow/mod.ts'
+import { __eclipsaLoader } from './loader.ts'
+import { Link, useLocation, useRouteParams } from './router.tsx'
+import { onCleanup, onMount, useComputed, useSignal, useWatch } from './signal.ts'
+import {
+  createResumeContainer,
+  createDelegatedEvent,
+  createDetachedRuntimeSignal,
+  deserializeContainerValue,
+  dispatchDocumentEvent,
+  flushDirtyComponents,
+  installResumeListeners,
+  primeLocationState,
+  preserveReusableContentInRoots,
+  rememberInsertMarkerRange,
+  renderClientInsertable,
+  restoreResumedLocalSignalEffects,
+  serializeContainerValue,
+  syncBoundElementSignal,
+  tryPatchBoundaryContentsInPlace,
+  tryPatchElementShellInPlace,
+  type RuntimeContainer,
+  withRuntimeContainer,
+} from './runtime.ts'
+import { renderSSRAsync } from './ssr.ts'
 
 class FakeNode {
+  static COMMENT_NODE = 8
+  static ELEMENT_NODE = 1
+  static TEXT_NODE = 3
   childNodes: FakeNode[] = []
   nodeType = 0
+  ownerDocument: FakeDocument | null = null
   parentNode: FakeNode | null = null
+
+  remove() {
+    if (!this.parentNode) {
+      return
+    }
+    const index = this.parentNode.childNodes.indexOf(this)
+    if (index >= 0) {
+      this.parentNode.childNodes.splice(index, 1)
+    }
+    this.parentNode = null
+  }
+
+  get nextSibling(): FakeNode | null {
+    if (!this.parentNode) {
+      return null
+    }
+    const index = this.parentNode.childNodes.indexOf(this)
+    return index >= 0 ? (this.parentNode.childNodes[index + 1] ?? null) : null
+  }
+
+  get firstChild(): FakeNode | null {
+    return this.childNodes[0] ?? null
+  }
+
+  get lastChild(): FakeNode | null {
+    return this.childNodes.length > 0 ? this.childNodes[this.childNodes.length - 1]! : null
+  }
+
+  get textContent() {
+    return this.childNodes.map((child) => child.textContent ?? '').join('')
+  }
+
+  set textContent(value: string) {
+    this.childNodes = [new FakeText(value)]
+    this.childNodes[0]!.parentNode = this
+  }
 }
 
 class FakeText extends FakeNode {
@@ -16,6 +92,14 @@ class FakeText extends FakeNode {
     super()
     this.nodeType = 3
   }
+
+  override get textContent() {
+    return this.data
+  }
+
+  override set textContent(value: string) {
+    ;(this as { data: string }).data = value
+  }
 }
 
 class FakeComment extends FakeNode {
@@ -23,39 +107,401 @@ class FakeComment extends FakeNode {
     super()
     this.nodeType = 8
   }
+
+  override get textContent() {
+    return this.data
+  }
+
+  override set textContent(value: string) {
+    ;(this as { data: string }).data = value
+  }
+}
+
+const parseSelectorPart = (selector: string) => {
+  const matched = selector
+    .trim()
+    .match(/^(?:(?<tag>[a-z0-9-]+))?\[(?<attr>[^=\]]+)(?:=(?<value>"[^"]*"|'[^']*'|[^\]]+))?\]$/i)
+  if (!matched?.groups?.attr) {
+    return null
+  }
+  const rawValue = matched.groups.value ?? null
+  return {
+    attr: matched.groups.attr,
+    tag: matched.groups.tag?.toLowerCase() ?? null,
+    value:
+      rawValue === null
+        ? null
+        : rawValue.startsWith('"') || rawValue.startsWith("'")
+          ? rawValue.slice(1, -1)
+          : rawValue,
+  }
+}
+
+const matchesSelectorPart = (element: FakeElement, selector: string) => {
+  const parsed = parseSelectorPart(selector)
+  if (!parsed) {
+    return false
+  }
+  if (parsed.tag && element.tagName.toLowerCase() !== parsed.tag) {
+    return false
+  }
+  if (!element.hasAttribute(parsed.attr)) {
+    return false
+  }
+  return parsed.value === null || element.getAttribute(parsed.attr) === parsed.value
+}
+
+const queryFakeElements = (root: FakeNode, selector: string) => {
+  const selectors = selector
+    .split(',')
+    .map((entry) => entry.trim())
+    .filter((entry) => entry.length > 0)
+  const matched: FakeElement[] = []
+
+  const visit = (node: FakeNode) => {
+    if (
+      node instanceof FakeElement &&
+      selectors.some((entry) => matchesSelectorPart(node, entry))
+    ) {
+      matched.push(node)
+    }
+    for (const child of node.childNodes) {
+      visit(child)
+    }
+  }
+
+  for (const child of root.childNodes) {
+    visit(child)
+  }
+
+  return matched as unknown as NodeListOf<Element>
 }
 
 class FakeElement extends FakeNode {
   attributes = new Map<string, string>()
   childNodes: FakeNode[] = []
+  namespaceURI = 'http://www.w3.org/1999/xhtml'
+  checked = false
+  open = false
+  #eventListeners = new Map<string, Set<EventListenerOrEventListenerObject>>()
+  #className = ''
+  selectionDirection: 'backward' | 'forward' | 'none' | null = null
+  selectionEnd: number | null = null
+  selectionStart: number | null = null
+  type = 'text'
+  value = ''
 
   constructor(readonly tagName: string) {
     super()
     this.nodeType = 1
   }
 
+  get className() {
+    return this.#className
+  }
+
+  set className(value: string) {
+    this.#className = value
+    if (value.length === 0) {
+      this.attributes.delete('class')
+      return
+    }
+    this.attributes.set('class', value)
+  }
+
+  #detachFromCurrentParent(node: FakeNode) {
+    if (!node.parentNode) {
+      return
+    }
+    const index = node.parentNode.childNodes.indexOf(node)
+    if (index >= 0) {
+      node.parentNode.childNodes.splice(index, 1)
+    }
+    node.parentNode = null
+  }
+
   appendChild(node: FakeNode) {
+    this.#detachFromCurrentParent(node)
+    node.ownerDocument = this.ownerDocument
     node.parentNode = this
     this.childNodes.push(node)
     return node
   }
 
+  insertBefore(node: FakeNode, referenceNode: FakeNode | null) {
+    this.#detachFromCurrentParent(node)
+    node.ownerDocument = this.ownerDocument
+    node.parentNode = this
+    if (!referenceNode) {
+      this.childNodes.push(node)
+      return node
+    }
+    const index = this.childNodes.indexOf(referenceNode)
+    if (index < 0) {
+      this.childNodes.push(node)
+      return node
+    }
+    this.childNodes.splice(index, 0, node)
+    return node
+  }
+
+  replaceChild(node: FakeNode, child: FakeNode) {
+    this.#detachFromCurrentParent(node)
+    const index = this.childNodes.indexOf(child)
+    if (index < 0) {
+      this.childNodes.push(node)
+      node.ownerDocument = this.ownerDocument
+      node.parentNode = this
+      return child
+    }
+    this.childNodes[index] = node
+    node.ownerDocument = this.ownerDocument
+    node.parentNode = this
+    child.parentNode = null
+    return child
+  }
+
   setAttribute(name: string, value: string) {
+    if (name === 'class') {
+      this.className = value
+      return
+    }
+    if (name === 'open') {
+      this.open = true
+    }
     this.attributes.set(name, value)
   }
+
+  removeAttribute(name: string) {
+    if (name === 'class') {
+      this.className = ''
+      return
+    }
+    if (name === 'open') {
+      this.open = false
+    }
+    this.attributes.delete(name)
+  }
+
+  getAttribute(name: string) {
+    return this.attributes.get(name) ?? null
+  }
+
+  hasAttribute(name: string) {
+    return this.attributes.has(name)
+  }
+
+  getAttributeNames() {
+    return [...this.attributes.keys()]
+  }
+
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject) {
+    let listeners = this.#eventListeners.get(type)
+    if (!listeners) {
+      listeners = new Set()
+      this.#eventListeners.set(type, listeners)
+    }
+    listeners.add(listener)
+  }
+
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject) {
+    this.#eventListeners.get(type)?.delete(listener)
+  }
+
+  dispatchEvent(event: Event) {
+    for (const listener of this.#eventListeners.get(event.type) ?? []) {
+      if (typeof listener === 'function') {
+        listener.call(this, event)
+        continue
+      }
+      listener.handleEvent(event)
+    }
+    return !event.defaultPrevented
+  }
+
+  get valueAsNumber() {
+    if (this.value.trim() === '') {
+      return Number.NaN
+    }
+    const parsed = Number(this.value)
+    return Number.isNaN(parsed) ? Number.NaN : parsed
+  }
+
+  override get textContent() {
+    return this.childNodes.map((child) => child.textContent ?? '').join('')
+  }
+
+  get children() {
+    const children = this.childNodes.filter(
+      (child) => child instanceof FakeElement,
+    ) as FakeElement[]
+    return {
+      item(index: number) {
+        return children[index] ?? null
+      },
+    }
+  }
+
+  querySelectorAll(selector: string) {
+    return queryFakeElements(this, selector)
+  }
+
+  get isConnected() {
+    if (this === (this.ownerDocument?.body as unknown as FakeNode | undefined)) {
+      return true
+    }
+    let cursor = this.parentNode
+    while (cursor) {
+      if (cursor === (this.ownerDocument?.body as unknown as FakeNode | undefined)) {
+        return true
+      }
+      cursor = cursor.parentNode
+    }
+    return false
+  }
+
+  get parentElement(): FakeElement | null {
+    return this.parentNode instanceof FakeElement ? this.parentNode : null
+  }
+
+  contains(node: FakeNode | null) {
+    let cursor = node
+    while (cursor) {
+      if (cursor === this) {
+        return true
+      }
+      cursor = cursor.parentNode
+    }
+    return false
+  }
+
+  focus() {
+    if (this.ownerDocument) {
+      this.ownerDocument.activeElement = this as unknown as Element
+    }
+  }
+
+  showModal() {
+    this.open = true
+    this.attributes.set('open', '')
+  }
+
+  close() {
+    this.open = false
+    this.attributes.delete('open')
+  }
+
+  setSelectionRange(start: number, end: number, direction?: 'backward' | 'forward' | 'none') {
+    this.selectionStart = start
+    this.selectionEnd = end
+    this.selectionDirection = direction ?? 'none'
+  }
 }
 
 class FakeDocument {
+  activeElement: Element | null = null
+  body: HTMLElement
+  #eventListeners = new Map<string, Set<EventListenerOrEventListenerObject>>()
+  defaultView: {
+    addEventListener: (type: string, listener: EventListenerOrEventListenerObject) => void
+    history?: {
+      pushState: (data: unknown, unused: string, url?: string | URL | null) => void
+      replaceState: (data: unknown, unused: string, url?: string | URL | null) => void
+    }
+    location?: {
+      assign: (url: string | URL) => void
+      replace: (url: string | URL) => void
+    }
+    removeEventListener: (type: string, listener: EventListenerOrEventListenerObject) => void
+    requestAnimationFrame: (callback: FrameRequestCallback) => number
+    setTimeout: (callback: () => void) => number
+  } = {
+    addEventListener() {},
+    removeEventListener() {},
+    requestAnimationFrame(callback: FrameRequestCallback) {
+      callback(0)
+      return 0
+    },
+    setTimeout(callback: () => void) {
+      callback()
+      return 0
+    },
+  }
+
+  constructor() {
+    const body = new FakeElement('body')
+    body.ownerDocument = this
+    this.body = body as unknown as HTMLElement
+  }
+
   createComment(data: string) {
-    return new FakeComment(data) as unknown as Comment
+    const comment = new FakeComment(data)
+    comment.ownerDocument = this
+    return comment as unknown as Comment
   }
 
   createElement(tagName: string) {
-    return new FakeElement(tagName) as unknown as HTMLElement
+    const element = new FakeElement(tagName)
+    element.ownerDocument = this
+    return element as unknown as HTMLElement
   }
 
   createTextNode(data: string) {
-    return new FakeText(data) as unknown as Text
+    const text = new FakeText(data)
+    text.ownerDocument = this
+    return text as unknown as Text
+  }
+
+  createTreeWalker(root: FakeNode) {
+    const comments: FakeComment[] = []
+    const visit = (node: FakeNode) => {
+      if (node instanceof FakeComment) {
+        comments.push(node)
+      }
+      for (const child of node.childNodes) {
+        visit(child)
+      }
+    }
+    visit(root)
+
+    let index = -1
+    return {
+      currentNode: null as Node | null,
+      nextNode() {
+        index++
+        const next = comments[index] ?? null
+        this.currentNode = next as unknown as Node | null
+        return next
+      },
+    }
+  }
+
+  querySelectorAll(selector: string) {
+    return queryFakeElements(this.body as unknown as FakeNode, selector)
+  }
+
+  addEventListener(type: string, listener: EventListenerOrEventListenerObject) {
+    let listeners = this.#eventListeners.get(type)
+    if (!listeners) {
+      listeners = new Set()
+      this.#eventListeners.set(type, listeners)
+    }
+    listeners.add(listener)
+  }
+
+  removeEventListener(type: string, listener: EventListenerOrEventListenerObject) {
+    this.#eventListeners.get(type)?.delete(listener)
+  }
+
+  dispatchEvent(event: Event) {
+    for (const listener of this.#eventListeners.get(event.type) ?? []) {
+      if (typeof listener === 'function') {
+        listener.call(this, event)
+        continue
+      }
+      listener.handleEvent(event)
+    }
+    return !event.defaultPrevented
   }
 }
 
@@ -63,17 +509,27 @@ const createContainer = () =>
   ({
     actions: new Map(),
     actionStates: new Map(),
+    asyncSignalSnapshotCache: new Map(),
+    asyncSignalStates: new Map(),
+    atoms: new WeakMap(),
     components: new Map(),
     dirty: new Set(),
+    dirtyFlushQueued: false,
     doc: new FakeDocument() as unknown as Document,
+    eventDispatchPromise: null,
+    externalRenderCache: new Map(),
     imports: new Map(),
+    interactivePrefetchCheckQueued: false,
     loaderStates: new Map(),
     loaders: new Map(),
     id: 'rt-test',
+    nextAtomId: 0,
     nextComponentId: 0,
     nextElementId: 0,
     nextScopeId: 0,
     nextSignalId: 0,
+    pendingSuspensePromises: new Set(),
+    resumeReadyPromise: null,
     rootChildCursor: 0,
     rootElement: undefined,
     router: null,
@@ -86,20 +542,67 @@ const createContainer = () =>
     watches: new Map(),
   }) as RuntimeContainer
 
+const createCleanupSlot = () => ({ callbacks: [] })
+
+const asInsertable = (value: unknown): Parameters<typeof insert>[0] =>
+  value as Parameters<typeof insert>[0]
+
 const withFakeNodeGlobal = <T>(fn: () => T) => {
+  const OriginalComment = globalThis.Comment
+  const OriginalElement = globalThis.Element
+  const OriginalHTMLElement = globalThis.HTMLElement
+  const OriginalHTMLInputElement = globalThis.HTMLInputElement
+  const OriginalHTMLSelectElement = globalThis.HTMLSelectElement
+  const OriginalHTMLTextAreaElement = globalThis.HTMLTextAreaElement
   const OriginalNode = globalThis.Node
+  const OriginalNodeFilter = globalThis.NodeFilter
+  const OriginalText = globalThis.Text
+  globalThis.Comment = FakeComment as unknown as typeof Comment
+  globalThis.Element = FakeElement as unknown as typeof Element
+  globalThis.HTMLElement = FakeElement as unknown as typeof HTMLElement
+  globalThis.HTMLInputElement = FakeElement as unknown as typeof HTMLInputElement
+  globalThis.HTMLSelectElement = FakeElement as unknown as typeof HTMLSelectElement
+  globalThis.HTMLTextAreaElement = FakeElement as unknown as typeof HTMLTextAreaElement
   globalThis.Node = FakeNode as unknown as typeof Node
+  globalThis.NodeFilter = {
+    SHOW_COMMENT: 128,
+  } as typeof NodeFilter
+  globalThis.Text = FakeText as unknown as typeof Text
   try {
     const result = fn()
     if (result instanceof Promise) {
       return result.finally(() => {
+        globalThis.Comment = OriginalComment
+        globalThis.Element = OriginalElement
+        globalThis.HTMLElement = OriginalHTMLElement
+        globalThis.HTMLInputElement = OriginalHTMLInputElement
+        globalThis.HTMLSelectElement = OriginalHTMLSelectElement
+        globalThis.HTMLTextAreaElement = OriginalHTMLTextAreaElement
         globalThis.Node = OriginalNode
+        globalThis.NodeFilter = OriginalNodeFilter
+        globalThis.Text = OriginalText
       }) as T
     }
+    globalThis.Comment = OriginalComment
+    globalThis.Element = OriginalElement
+    globalThis.HTMLElement = OriginalHTMLElement
+    globalThis.HTMLInputElement = OriginalHTMLInputElement
+    globalThis.HTMLSelectElement = OriginalHTMLSelectElement
+    globalThis.HTMLTextAreaElement = OriginalHTMLTextAreaElement
     globalThis.Node = OriginalNode
+    globalThis.NodeFilter = OriginalNodeFilter
+    globalThis.Text = OriginalText
     return result
   } catch (error) {
+    globalThis.Comment = OriginalComment
+    globalThis.Element = OriginalElement
+    globalThis.HTMLElement = OriginalHTMLElement
+    globalThis.HTMLInputElement = OriginalHTMLInputElement
+    globalThis.HTMLSelectElement = OriginalHTMLSelectElement
+    globalThis.HTMLTextAreaElement = OriginalHTMLTextAreaElement
     globalThis.Node = OriginalNode
+    globalThis.NodeFilter = OriginalNodeFilter
+    globalThis.Text = OriginalText
     throw error
   }
 }
@@ -125,6 +628,75 @@ const flushAsync = async () => {
   await Promise.resolve()
 }
 
+describe('createDelegatedEvent', () => {
+  it('preserves native getters and methods when currentTarget is overridden', () => {
+    class NativeLikeEvent extends Event {
+      constructor(private readonly eventTarget: EventTarget | null) {
+        super('click')
+      }
+
+      override get target() {
+        if (!(this instanceof NativeLikeEvent)) {
+          throw new TypeError('Illegal invocation')
+        }
+        return this.eventTarget
+      }
+    }
+
+    const target = {} as EventTarget
+    const currentTarget = new FakeElement('div') as unknown as Element
+    const delegated = createDelegatedEvent(new NativeLikeEvent(target), currentTarget)
+
+    expect(delegated.target).toBe(target)
+    expect(delegated.currentTarget).toBe(currentTarget)
+    expect(() => delegated.preventDefault()).not.toThrow()
+  })
+})
+
+describe('resume context captures', () => {
+  it('serializes local context captures as resumable references', () => {
+    const ThemeContext = createContext('fallback')
+
+    expect(getRuntimeContextReference(ThemeContext)).toEqual({
+      defaultValue: 'fallback',
+      hasDefault: true,
+      id: expect.any(String),
+      kind: 'context',
+    })
+
+    expect(getRuntimeContextReference(ThemeContext.Provider)).toEqual({
+      defaultValue: 'fallback',
+      hasDefault: true,
+      id: expect.any(String),
+      kind: 'context-provider',
+    })
+
+    const contextReference = getRuntimeContextReference(ThemeContext)
+    if (!contextReference || contextReference.kind !== 'context') {
+      throw new Error('expected a runtime context reference')
+    }
+    const providerReference = getRuntimeContextReference(ThemeContext.Provider)
+    if (!providerReference || providerReference.kind !== 'context-provider') {
+      throw new Error('expected a runtime context provider reference')
+    }
+
+    expect(
+      materializeRuntimeContext({
+        defaultValue: contextReference.defaultValue,
+        hasDefault: contextReference.hasDefault,
+        id: contextReference.id,
+      }),
+    ).toBe(ThemeContext)
+    expect(
+      materializeRuntimeContextProvider({
+        defaultValue: providerReference.defaultValue,
+        hasDefault: providerReference.hasDefault,
+        id: providerReference.id,
+      }),
+    ).toBe(ThemeContext.Provider)
+  })
+})
+
 describe('renderClientInsertable', () => {
   it('keeps nodes returned from function arrays during client rerenders', () => {
     withFakeNodeGlobal(() => {
@@ -137,15 +709,13 @@ describe('renderClientInsertable', () => {
     withFakeNodeGlobal(() => {
       let ref!: { value: HTMLElement | undefined }
 
-      const App = component$(
-        __eclipsaComponent(
-          () => {
-            ref = useSignal<HTMLElement | undefined>()
-            return jsxDEV('div', { ref }, null, false, {})
-          },
-          'component-ref',
-          () => [],
-        ),
+      const App = __eclipsaComponent(
+        () => {
+          ref = useSignal<HTMLElement | undefined>()
+          return jsxDEV('div', { ref }, null, false, {})
+        },
+        'component-ref',
+        () => [],
       )
 
       const container = createContainer()
@@ -160,239 +730,489 @@ describe('renderClientInsertable', () => {
     })
   })
 
-  it('resets local signal ids and watch state when a component slot changes symbol', () => {
-    withFakeNodeGlobal(() => {
-      const First = component$(
-        __eclipsaComponent(
-          () => {
-            const value = useSignal('first')
-            useWatch(
-              __eclipsaWatch(
-                'watch-first',
-                () => {
-                  value.value
-                },
-                () => [value],
-              ),
-            )
-            return value.value
-          },
-          'component-first',
-          () => [],
-        ),
-      )
+  it('keeps component refs attached to live elements across in-place rerenders', async () => {
+    await withFakeNodeGlobal(async () => {
+      let count!: { value: number }
+      let ref!: { value: HTMLElement | undefined }
 
-      const Second = component$(
-        __eclipsaComponent(
-          () => {
-            const count = useSignal(0)
-            return count.value
+      const renderBody = () =>
+        jsxDEV(
+          'div',
+          {
+            children: jsxDEV(
+              'button',
+              {
+                ref,
+                children: String(count.value),
+              },
+              null,
+              false,
+              {},
+            ),
           },
-          'component-second',
-          () => [],
-        ),
+          null,
+          false,
+          {},
+        )
+
+      const App = __eclipsaComponent(
+        () => {
+          count = useSignal(0)
+          ref = useSignal<HTMLElement | undefined>()
+          return renderBody()
+        },
+        'component-ref-rerender',
+        () => [],
       )
 
       const container = createContainer()
+      container.imports.set(
+        'component-ref-rerender',
+        Promise.resolve({
+          default: () => renderBody(),
+        }),
+      )
+      const doc = container.doc as unknown as FakeDocument
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(App, {}, null, false, {}), container),
+      )
 
-      withRuntimeContainer(container, () => {
-        renderClientInsertable(jsxDEV(First, {}, null, false, {}), container)
-      })
+      for (const node of nodes as unknown as FakeNode[]) {
+        ;(doc.body as unknown as FakeElement).appendChild(node)
+      }
 
-      expect(container.components.get('c0')?.signalIds).toEqual(['s0'])
-      expect(container.watches.has('c0:w0')).toBe(true)
-      expect(container.signals.get('s0')?.value).toBe('first')
+      const findLiveButton = () => {
+        const visit = (node: FakeNode): FakeElement | null => {
+          if (node instanceof FakeElement && node.tagName === 'button') {
+            return node
+          }
+          for (const child of node.childNodes) {
+            const found = visit(child)
+            if (found) {
+              return found
+            }
+          }
+          return null
+        }
+        return visit(doc.body as unknown as FakeNode)
+      }
 
-      container.rootChildCursor = 0
+      const initialButton = findLiveButton()
+      expect(initialButton).toBeTruthy()
+      expect(ref.value).toBe(initialButton as unknown as HTMLElement)
 
-      withRuntimeContainer(container, () => {
-        renderClientInsertable(jsxDEV(Second, {}, null, false, {}), container)
-      })
+      count.value = 1
+      await flushAsync()
+      await new Promise((resolve) => setTimeout(resolve, 0))
 
-      expect(container.components.get('c0')?.symbol).toBe('component-second')
-      expect(container.components.get('c0')?.signalIds).toEqual(['s1'])
-      expect(container.components.get('c0')?.watchCount).toBe(0)
-      expect(container.watches.has('c0:w0')).toBe(false)
-      expect(container.signals.get('s1')?.value).toBe(0)
+      const liveButton = findLiveButton()
+      expect(liveButton).toBeTruthy()
+      expect(liveButton?.textContent).toBe('1')
+      expect(ref.value).toBe(liveButton as unknown as HTMLElement)
+      expect((ref.value as unknown as FakeElement).isConnected).toBe(true)
     })
   })
 
-  it('runs onMount cleanup when a component slot changes symbol', async () => {
+  it('preserves imperative dialog open state across component rerenders', async () => {
     await withFakeNodeGlobal(async () => {
-      const events: string[] = []
-      const First = component$(
-        __eclipsaComponent(
-          () => {
-            onMount(() => {
-              events.push('mount')
-              onCleanup(() => {
-                events.push('cleanup')
-              })
-            })
-            return 'first'
+      let query!: { value: string }
+
+      const renderBody = () =>
+        jsxDEV(
+          'dialog',
+          {
+            children: jsxDEV('span', { children: query.value }, null, false, {}),
           },
-          'component-mount-first',
-          () => [],
-        ),
-      )
+          null,
+          false,
+          {},
+        )
 
-      const Second = component$(
-        __eclipsaComponent(
-          () => 'second',
-          'component-mount-second',
-          () => [],
-        ),
+      const App = __eclipsaComponent(
+        () => {
+          query = useSignal('')
+          return renderBody()
+        },
+        'component-dialog-open',
+        () => [],
       )
 
       const container = createContainer()
+      container.imports.set(
+        'component-dialog-open',
+        Promise.resolve({
+          default: () => renderBody(),
+        }),
+      )
+      const doc = container.doc as unknown as FakeDocument
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(App, {}, null, false, {}), container),
+      )
 
-      withRuntimeContainer(container, () => {
-        renderClientInsertable(jsxDEV(First, {}, null, false, {}), container)
-      })
+      for (const node of nodes as unknown as FakeNode[]) {
+        ;(doc.body as unknown as FakeElement).appendChild(node)
+      }
 
-      await flushAsync()
-      expect(events).toEqual(['mount'])
+      const findLiveDialog = () => {
+        const visit = (node: FakeNode): FakeElement | null => {
+          if (node instanceof FakeElement && node.tagName === 'dialog') {
+            return node
+          }
+          for (const child of node.childNodes) {
+            const found = visit(child)
+            if (found) {
+              return found
+            }
+          }
+          return null
+        }
+        return visit(doc.body as unknown as FakeNode)
+      }
 
-      container.rootChildCursor = 0
-      withRuntimeContainer(container, () => {
-        renderClientInsertable(jsxDEV(Second, {}, null, false, {}), container)
-      })
+      const dialog = findLiveDialog()
+      expect(dialog).toBeTruthy()
+      dialog?.showModal()
+      expect(dialog?.open).toBe(true)
+      expect(dialog?.hasAttribute('open')).toBe(true)
 
-      expect(events).toEqual(['mount', 'cleanup'])
+      query.value = 'q'
+      await flushAsync()
+      await new Promise((resolve) => setTimeout(resolve, 0))
+
+      const liveDialog = findLiveDialog()
+      expect(liveDialog).toBeTruthy()
+      expect(liveDialog?.open).toBe(true)
+      expect(liveDialog?.hasAttribute('open')).toBe(true)
+      expect(liveDialog?.textContent).toBe('q')
     })
   })
 
-  it('runs watch cleanup when a resumable watch is torn down', () => {
-    withFakeNodeGlobal(() => {
-      let count!: { value: number }
-      const events: string[] = []
+  it('preserves browser-added attrs while removing framework-managed attrs across component rerenders', async () => {
+    await withFakeNodeGlobal(async () => {
+      let active!: { value: boolean }
 
-      const First = component$(
-        __eclipsaComponent(
-          () => {
-            count = useSignal(0)
-            useWatch(
-              __eclipsaWatch(
-                'watch-cleanup',
-                () => {
-                  const snapshot = count.value
-                  events.push(`run:${snapshot}`)
-                  onCleanup(() => {
-                    events.push(`cleanup:${snapshot}`)
-                  })
-                },
-                () => [count],
-              ),
-            )
-            return count.value
+      const renderBody = () =>
+        jsxDEV(
+          'div',
+          {
+            class: active.value ? 'active' : undefined,
+            children: active.value ? 'on' : 'off',
           },
-          'component-watch-first',
-          () => [],
-        ),
-      )
+          null,
+          false,
+          {},
+        )
 
-      const Second = component$(
-        __eclipsaComponent(
-          () => 'done',
-          'component-watch-second',
-          () => [],
-        ),
+      const App = __eclipsaComponent(
+        () => {
+          active = useSignal(true)
+          return renderBody()
+        },
+        'component-prev-render-attrs',
+        () => [],
       )
 
       const container = createContainer()
+      container.imports.set(
+        'component-prev-render-attrs',
+        Promise.resolve({
+          default: () => renderBody(),
+        }),
+      )
+      const doc = container.doc as unknown as FakeDocument
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(App, {}, null, false, {}), container),
+      )
 
-      withRuntimeContainer(container, () => {
-        renderClientInsertable(jsxDEV(First, {}, null, false, {}), container)
-      })
+      for (const node of nodes as unknown as FakeNode[]) {
+        ;(doc.body as unknown as FakeElement).appendChild(node)
+      }
 
-      count.value = 1
-      expect(events).toEqual(['run:0', 'cleanup:0', 'run:1'])
+      const findLiveDiv = () => {
+        const visit = (node: FakeNode): FakeElement | null => {
+          if (node instanceof FakeElement && node.tagName === 'div') {
+            return node
+          }
+          for (const child of node.childNodes) {
+            const found = visit(child)
+            if (found) {
+              return found
+            }
+          }
+          return null
+        }
+        return visit(doc.body as unknown as FakeNode)
+      }
 
-      container.rootChildCursor = 0
-      withRuntimeContainer(container, () => {
-        renderClientInsertable(jsxDEV(Second, {}, null, false, {}), container)
-      })
+      const div = findLiveDiv()
+      expect(div).toBeTruthy()
+      div?.setAttribute('data-browser', '1')
 
-      expect(events).toEqual(['run:0', 'cleanup:0', 'run:1', 'cleanup:1'])
+      active.value = false
+      await flushAsync()
+      await new Promise((resolve) => setTimeout(resolve, 0))
+
+      const liveDiv = findLiveDiv()
+      expect(liveDiv).toBeTruthy()
+      expect(liveDiv?.getAttribute('data-browser')).toBe('1')
+      expect(liveDiv?.hasAttribute('class')).toBe(false)
+      expect(liveDiv?.textContent).toBe('off')
     })
   })
 
-  it('resolves resumed route slots from the page route cache entry during client rerenders', () => {
-    withFakeNodeGlobal(() => {
-      const container = createContainer()
-      const page = () => jsxDEV('p', { children: 'page content' }, null, false, {})
-      container.router = {
-        currentPath: { value: '/' },
-        currentRoute: null,
-        isNavigating: { value: false },
-        loadedRoutes: new Map([
-          [
-            '/::page',
-            {
-              entry: {} as any,
-              layouts: [],
-              page: { renderer: page },
-              params: {},
-              pathname: '/',
-              render: () => jsxDEV(page, {}, null, false, {}),
-            },
-          ],
-        ]),
-        manifest: [],
-        navigate: (async () => {}) as any,
-        sequence: 0,
-      } as unknown as RuntimeContainer['router']
+  it('preserves dialog shell identity when descendant shape changes across component rerenders', async () => {
+    await withFakeNodeGlobal(async () => {
+      let showResults!: { value: boolean }
 
-      const [node] = renderClientInsertable(
-        {
-          __eclipsa_type: 'route-slot',
-          pathname: '/',
-          startLayoutIndex: 0,
+      const renderResults = () =>
+        jsxDEV(
+          'dialog',
+          {
+            children: jsxDEV(
+              'div',
+              {
+                children: jsxDEV(
+                  'div',
+                  {
+                    children: showResults.value
+                      ? [
+                          jsxDEV(
+                            'a',
+                            { href: '/docs/getting-started/overview', children: 'Overview' },
+                            null,
+                            false,
+                            {},
+                          ),
+                          jsxDEV(
+                            'a',
+                            { href: '/docs/getting-started/quick-start', children: 'Quick Start' },
+                            null,
+                            false,
+                            {},
+                          ),
+                        ]
+                      : 'Search titles, headings, content, and code.',
+                  },
+                  null,
+                  false,
+                  {},
+                ),
+              },
+              null,
+              false,
+              {},
+            ),
+          },
+          null,
+          false,
+          {},
+        )
+
+      const App = __eclipsaComponent(
+        () => {
+          showResults = useSignal(false)
+          return renderResults()
         },
-        container,
+        'component-dialog-descendant-shape',
+        () => [],
       )
 
-      const element = node as unknown as FakeElement
-      expect(element).toBeInstanceOf(FakeElement)
-      expect(element.tagName).toBe('p')
-      expect(element.childNodes).toHaveLength(1)
-      expect(element.childNodes[0]).toBeInstanceOf(FakeText)
-      expect((element.childNodes[0] as FakeText).data).toBe('page content')
+      const container = createContainer()
+      container.imports.set(
+        'component-dialog-descendant-shape',
+        Promise.resolve({
+          default: () => renderResults(),
+        }),
+      )
+      const doc = container.doc as unknown as FakeDocument
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(App, {}, null, false, {}), container),
+      )
+
+      for (const node of nodes as unknown as FakeNode[]) {
+        ;(doc.body as unknown as FakeElement).appendChild(node)
+      }
+
+      const findLiveDialog = () => {
+        const visit = (node: FakeNode): FakeElement | null => {
+          if (node instanceof FakeElement && node.tagName === 'dialog') {
+            return node
+          }
+          for (const child of node.childNodes) {
+            const found = visit(child)
+            if (found) {
+              return found
+            }
+          }
+          return null
+        }
+        return visit(doc.body as unknown as FakeNode)
+      }
+
+      const dialog = findLiveDialog()
+      expect(dialog).toBeTruthy()
+      dialog?.showModal()
+      expect(dialog?.open).toBe(true)
+
+      showResults.value = true
+      await flushAsync()
+      await new Promise((resolve) => setTimeout(resolve, 0))
+
+      const liveDialog = findLiveDialog()
+      expect(liveDialog).toBe(dialog)
+      expect(liveDialog?.open).toBe(true)
+      expect(liveDialog?.textContent).toContain('Overview')
+      expect(liveDialog?.textContent).toContain('Quick Start')
     })
   })
 
-  it('wraps projection slot insertions in stable marker comments during client renders', () => {
-    withFakeNodeGlobal(() => {
-      const Probe = component$(
-        __eclipsaComponent(
-          (props: { aa?: unknown; children?: unknown }) =>
+  it('preserves dialog shell identity when a nested component boundary changes shape', async () => {
+    await withFakeNodeGlobal(async () => {
+      let showResults!: { value: boolean }
+
+      const renderResultsBody = (show: boolean) =>
+        show
+          ? [
+              jsxDEV(
+                'a',
+                { href: '/docs/getting-started/overview', children: 'Overview' },
+                null,
+                false,
+                {},
+              ),
+              jsxDEV(
+                'a',
+                { href: '/docs/getting-started/quick-start', children: 'Quick Start' },
+                null,
+                false,
+                {},
+              ),
+            ]
+          : 'Search titles, headings, content, and code.'
+
+      const ResultsBody = __eclipsaComponent(
+        (props: { show: boolean }) =>
+          jsxDEV(
+            'div',
+            {
+              children: renderResultsBody(props.show),
+            },
+            null,
+            false,
+            {},
+          ),
+        'component-dialog-results-body',
+        () => [],
+      )
+      const ResultsBodyType = ResultsBody as unknown as (props: unknown) => JSX.Element
+
+      const renderDialog = () =>
+        jsxDEV(
+          'dialog',
+          {
+            children: jsxDEV(
+              'div',
+              {
+                children: jsxDEV(ResultsBodyType, { show: showResults.value }, null, false, {}),
+              },
+              null,
+              false,
+              {},
+            ),
+          },
+          null,
+          false,
+          {},
+        )
+
+      const App = __eclipsaComponent(
+        () => {
+          showResults = useSignal(false)
+          return renderDialog()
+        },
+        'component-dialog-parent-boundary',
+        () => [],
+      )
+
+      const container = createContainer()
+      container.imports.set(
+        'component-dialog-parent-boundary',
+        Promise.resolve({
+          default: () => renderDialog(),
+        }),
+      )
+      container.imports.set(
+        'component-dialog-results-body',
+        Promise.resolve({
+          default: (_scope: unknown, propsOrArg?: unknown) =>
             jsxDEV(
-              'section',
+              'div',
               {
-                children: [
-                  jsxDEV('div', { children: props.aa }, null, false, {}),
-                  jsxDEV('div', { children: props.children }, null, false, {}),
-                  jsxDEV('div', { children: props.aa }, null, false, {}),
-                ],
+                children: renderResultsBody((propsOrArg as { show: boolean }).show),
               },
               null,
               false,
               {},
             ),
-          'probe-symbol',
-          () => [],
-          { aa: 2, children: 1 },
-        ),
+        }),
       )
+      const doc = container.doc as unknown as FakeDocument
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(App, {}, null, false, {}), container),
+      )
+
+      for (const node of nodes as unknown as FakeNode[]) {
+        ;(doc.body as unknown as FakeElement).appendChild(node)
+      }
+
+      const findLiveDialog = () => {
+        const visit = (node: FakeNode): FakeElement | null => {
+          if (node instanceof FakeElement && node.tagName === 'dialog') {
+            return node
+          }
+          for (const child of node.childNodes) {
+            const found = visit(child)
+            if (found) {
+              return found
+            }
+          }
+          return null
+        }
+        return visit(doc.body as unknown as FakeNode)
+      }
+
+      const dialog = findLiveDialog()
+      expect(dialog).toBeTruthy()
+      dialog?.showModal()
+      expect(dialog?.open).toBe(true)
+
+      showResults.value = true
+      await flushAsync()
+      await new Promise((resolve) => setTimeout(resolve, 0))
 
+      const liveDialog = findLiveDialog()
+      expect(liveDialog).toBe(dialog)
+      expect(liveDialog?.open).toBe(true)
+      expect(liveDialog?.textContent).toContain('Overview')
+      expect(liveDialog?.textContent).toContain('Quick Start')
+    })
+  })
+
+  it('serializes and syncs bound input signals', () => {
+    withFakeNodeGlobal(() => {
       const container = createContainer()
+      const value = createDetachedRuntimeSignal(container, 's0', 'alpha')
+      const checked = createDetachedRuntimeSignal(container, 's1', false)
+
       const nodes = withRuntimeContainer(container, () =>
         renderClientInsertable(
           jsxDEV(
-            Probe as any,
+            'div',
             {
-              aa: 'prop content',
-              children: 'children content',
+              children: [
+                jsxDEV('input', { 'bind:value': value }, null, false, {}),
+                jsxDEV('input', { 'bind:checked': checked, type: 'checkbox' }, null, false, {}),
+              ],
             },
             null,
             false,
@@ -400,18 +1220,8652 @@ describe('renderClientInsertable', () => {
           ),
           container,
         ),
-      ) as unknown as FakeNode[]
+      )
+      const root = nodes[0] as unknown as FakeElement | undefined
+      const textInput = root?.childNodes[0] as unknown as FakeElement | undefined
+      const checkbox = root?.childNodes[1] as unknown as FakeElement | undefined
 
-      expect(collectComments(nodes)).toEqual([
-        'ec:c:c0:start',
-        'ec:s:c0:aa:0:start',
-        'ec:s:c0:aa:0:end',
-        'ec:s:c0:children:0:start',
-        'ec:s:c0:children:0:end',
-        'ec:s:c0:aa:1:start',
-        'ec:s:c0:aa:1:end',
-        'ec:c:c0:end',
-      ])
+      expect(textInput?.getAttribute('data-e-bind-value')).toBe('s0')
+      expect(textInput?.value).toBe('alpha')
+      expect(checkbox?.getAttribute('data-e-bind-checked')).toBe('s1')
+      expect(checkbox?.checked).toBe(false)
+
+      if (!textInput || !checkbox) {
+        throw new Error('Expected rendered inputs.')
+      }
+
+      textInput.value = 'beta'
+      checkbox.checked = true
+
+      expect(syncBoundElementSignal(container, textInput as unknown as EventTarget)).toBe(true)
+      expect(syncBoundElementSignal(container, checkbox as unknown as EventTarget)).toBe(true)
+      expect(value.value).toBe('beta')
+      expect(checked.value).toBe(true)
+    })
+  })
+
+  it('keeps direct client DOM bindings live without manual native input workarounds', () => {
+    withFakeNodeGlobal(() => {
+      const value = createDetachedRuntimeSignal(createContainer(), 's0', 'alpha')
+      const input = new FakeElement('input') as unknown as Element
+
+      attr(input, 'bind:value', () => value)
+
+      expect((input as unknown as FakeElement).getAttribute('data-e-bind-value')).toBe('s0')
+      expect((input as unknown as FakeElement).value).toBe('alpha')
+
+      ;(input as unknown as FakeElement).value = 'beta'
+      ;(input as unknown as FakeElement).dispatchEvent(new Event('input'))
+      expect(value.value).toBe('beta')
+
+      value.value = 'gamma'
+      expect((input as unknown as FakeElement).value).toBe('gamma')
+    })
+  })
+
+  it('updates primitive insert text in place without replacing the text node', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const value = createDetachedRuntimeSignal(container, 's0', 'alpha')
+      const doc = container.doc as unknown as FakeDocument
+      const host = new FakeElement('div')
+      const marker = new FakeComment('marker')
+      host.ownerDocument = doc
+      marker.ownerDocument = doc
+      host.appendChild(marker)
+      ;(doc.body as unknown as FakeElement).appendChild(host)
+
+      withRuntimeContainer(container, () => {
+        insert(() => value.value, host as unknown as Node, marker as unknown as Node)
+      })
+
+      const initialText = host.childNodes[0] as FakeText | undefined
+      expect(initialText?.data).toBe('alpha')
+      expect(host.childNodes[1]).toBe(marker)
+
+      value.value = 'beta'
+      await flushAsync()
+
+      const liveText = host.childNodes[0] as FakeText | undefined
+      expect(liveText?.data).toBe('beta')
+      expect(liveText).toBe(initialText)
+      expect(host.childNodes[1]).toBe(marker)
+    })
+  })
+
+  it('preserves the runtime container when an insert rerender re-enters a local helper insert', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const query = createDetachedRuntimeSignal(container, 's0', '')
+      const doc = container.doc as unknown as FakeDocument
+      const host = new FakeElement('div')
+      host.ownerDocument = doc
+      ;(doc.body as unknown as FakeElement).appendChild(host)
+
+      const SearchResultsBody = (props: { query: string }) => {
+        const body = doc.createElement('div') as FakeElement
+        insert(
+          (() =>
+            props.query.trim() === ''
+              ? 'Search titles, headings, content, and code.'
+              : jsxDEV(
+                  'a',
+                  {
+                    href: '/docs/getting-started/overview',
+                    children: 'Overview',
+                  },
+                  null,
+                  false,
+                  {},
+                )) as Parameters<typeof insert>[0],
+          body,
+        )
+        return body as unknown as JSX.Element
+      }
+
+      withRuntimeContainer(container, () => {
+        insert(
+          (() =>
+            jsxDEV(
+              'div',
+              {
+                children: [
+                  jsxDEV('input', { type: 'text', value: query.value }, null, false, {}),
+                  SearchResultsBody({ query: query.value }),
+                ],
+              },
+              null,
+              false,
+              {},
+            )) as Parameters<typeof insert>[0],
+          host as unknown as Node,
+        )
+      })
+
+      expect(host.textContent).toContain('Search titles, headings, content, and code.')
+
+      query.value = 'ov'
+      await flushAsync()
+
+      expect(host.textContent).toContain('Overview')
+    })
+  })
+
+  it('keeps client insert refs attached to live elements across in-place patches', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const value = createDetachedRuntimeSignal(container, 's0', 'alpha')
+      const ref = createDetachedRuntimeSignal<HTMLElement | undefined>(container, 's1', undefined)
+      const doc = container.doc as unknown as FakeDocument
+      const host = new FakeElement('div')
+      host.ownerDocument = doc
+      ;(doc.body as unknown as FakeElement).appendChild(host)
+
+      withRuntimeContainer(container, () => {
+        insert(
+          (() =>
+            jsxDEV(
+              'button',
+              {
+                ref,
+                children: value.value,
+              },
+              null,
+              false,
+              {},
+            )) as Parameters<typeof insert>[0],
+          host as unknown as Node,
+        )
+      })
+
+      const initialButton = host.childNodes[0] as FakeElement | undefined
+      expect(initialButton?.textContent).toBe('alpha')
+      expect(ref.value).toBe(initialButton as unknown as HTMLElement)
+
+      value.value = 'beta'
+      await flushAsync()
+
+      const liveButton = host.childNodes[0] as FakeElement | undefined
+      expect(liveButton?.textContent).toBe('beta')
+      expect(ref.value).toBe(liveButton as unknown as HTMLElement)
+      expect((ref.value as unknown as FakeElement).isConnected).toBe(true)
+    })
+  })
+
+  it('preserves imperative dialog open state across insert patches', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const value = createDetachedRuntimeSignal(container, 's0', 'alpha')
+      const doc = container.doc as unknown as FakeDocument
+      const host = new FakeElement('div')
+      host.ownerDocument = doc
+      ;(doc.body as unknown as FakeElement).appendChild(host)
+
+      withRuntimeContainer(container, () => {
+        insert(
+          (() =>
+            jsxDEV(
+              'dialog',
+              {
+                children: value.value,
+              },
+              null,
+              false,
+              {},
+            )) as Parameters<typeof insert>[0],
+          host as unknown as Node,
+        )
+      })
+
+      const dialog = host.childNodes[0] as FakeElement | undefined
+      expect(dialog?.tagName).toBe('dialog')
+      dialog?.showModal()
+      expect(dialog?.open).toBe(true)
+      expect(dialog?.hasAttribute('open')).toBe(true)
+
+      value.value = 'beta'
+      await flushAsync()
+
+      const liveDialog = host.childNodes[0] as FakeElement | undefined
+      expect(liveDialog?.tagName).toBe('dialog')
+      expect(liveDialog?.open).toBe(true)
+      expect(liveDialog?.hasAttribute('open')).toBe(true)
+      expect(liveDialog?.textContent).toBe('beta')
+    })
+  })
+
+  it('preserves browser-added attrs while removing framework-managed attrs across insert patches', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const active = createDetachedRuntimeSignal(container, 's0', true)
+      const doc = container.doc as unknown as FakeDocument
+      const host = new FakeElement('div')
+      host.ownerDocument = doc
+      ;(doc.body as unknown as FakeElement).appendChild(host)
+
+      withRuntimeContainer(container, () => {
+        insert(
+          (() =>
+            jsxDEV(
+              'div',
+              {
+                class: active.value ? 'active' : undefined,
+                children: active.value ? 'on' : 'off',
+              },
+              null,
+              false,
+              {},
+            )) as Parameters<typeof insert>[0],
+          host as unknown as Node,
+        )
+      })
+
+      const div = host.childNodes[0] as FakeElement | undefined
+      expect(div?.tagName).toBe('div')
+      div?.setAttribute('data-browser', '1')
+
+      active.value = false
+      await flushAsync()
+
+      const liveDiv = host.childNodes[0] as FakeElement | undefined
+      expect(liveDiv?.tagName).toBe('div')
+      expect(liveDiv?.getAttribute('data-browser')).toBe('1')
+      expect(liveDiv?.hasAttribute('class')).toBe(false)
+      expect(liveDiv?.textContent).toBe('off')
+    })
+  })
+
+  it('preserves dialog shell identity when descendant shape changes across insert patches', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const showResults = createDetachedRuntimeSignal(container, 's0', false)
+      const doc = container.doc as unknown as FakeDocument
+      const host = new FakeElement('div')
+      host.ownerDocument = doc
+      ;(doc.body as unknown as FakeElement).appendChild(host)
+
+      withRuntimeContainer(container, () => {
+        insert(
+          (() =>
+            jsxDEV(
+              'dialog',
+              {
+                children: jsxDEV(
+                  'div',
+                  {
+                    children: jsxDEV(
+                      'div',
+                      {
+                        children: showResults.value
+                          ? [
+                              jsxDEV(
+                                'a',
+                                { href: '/docs/getting-started/overview', children: 'Overview' },
+                                null,
+                                false,
+                                {},
+                              ),
+                              jsxDEV(
+                                'a',
+                                {
+                                  href: '/docs/getting-started/quick-start',
+                                  children: 'Quick Start',
+                                },
+                                null,
+                                false,
+                                {},
+                              ),
+                            ]
+                          : 'Search titles, headings, content, and code.',
+                      },
+                      null,
+                      false,
+                      {},
+                    ),
+                  },
+                  null,
+                  false,
+                  {},
+                ),
+              },
+              null,
+              false,
+              {},
+            )) as Parameters<typeof insert>[0],
+          host as unknown as Node,
+        )
+      })
+
+      const dialog = host.childNodes[0] as FakeElement | undefined
+      expect(dialog?.tagName).toBe('dialog')
+      dialog?.showModal()
+      expect(dialog?.open).toBe(true)
+
+      showResults.value = true
+      await flushAsync()
+
+      const liveDialog = host.childNodes[0] as FakeElement | undefined
+      expect(liveDialog).toBe(dialog)
+      expect(liveDialog?.open).toBe(true)
+      expect(liveDialog?.textContent).toContain('Overview')
+      expect(liveDialog?.textContent).toContain('Quick Start')
+    })
+  })
+
+  it('keeps a wrapped dialog shell stable when a nested result boundary changes shape across insert patches', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const open = createDetachedRuntimeSignal(container, 's0', false)
+      const query = createDetachedRuntimeSignal(container, 's1', '')
+      const doc = container.doc as unknown as FakeDocument
+      const host = new FakeElement('div')
+      host.ownerDocument = doc
+      ;(doc.body as unknown as FakeElement).appendChild(host)
+
+      const SearchResultsBodyRender = (props: { query: string }) => {
+        if (props.query.trim() === '') {
+          return jsxDEV(
+            'div',
+            { children: 'Search titles, headings, content, and code.' },
+            null,
+            false,
+            {},
+          )
+        }
+        return jsxDEV(
+          'div',
+          {
+            children: jsxDEV(
+              'a',
+              { href: '/docs/getting-started/overview', children: 'Overview' },
+              null,
+              false,
+              {},
+            ),
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const SearchResultsBody = __eclipsaComponent(
+        SearchResultsBodyRender,
+        'component-insert-search-results-body',
+        () => [],
+      )
+
+      container.imports.set(
+        'component-insert-search-results-body',
+        Promise.resolve({
+          default: (_scope: unknown[], propsOrArg?: unknown) =>
+            SearchResultsBodyRender(propsOrArg as { query: string }),
+        }),
+      )
+
+      withRuntimeContainer(container, () => {
+        insert(
+          (() =>
+            jsxDEV(
+              'div',
+              {
+                children: [
+                  jsxDEV(
+                    'button',
+                    {
+                      'aria-expanded': open.value,
+                      children: 'Search docs',
+                    },
+                    null,
+                    false,
+                    {},
+                  ),
+                  jsxDEV(
+                    'dialog',
+                    {
+                      children: jsxDEV(
+                        'div',
+                        {
+                          children: jsxDEV(
+                            'div',
+                            {
+                              children: [
+                                jsxDEV(
+                                  'input',
+                                  { type: 'text', value: query.value },
+                                  null,
+                                  false,
+                                  {},
+                                ),
+                                jsxDEV(
+                                  SearchResultsBody as any,
+                                  { query: query.value },
+                                  null,
+                                  false,
+                                  {},
+                                ),
+                              ],
+                            },
+                            null,
+                            false,
+                            {},
+                          ),
+                        },
+                        null,
+                        false,
+                        {},
+                      ),
+                    },
+                    null,
+                    false,
+                    {},
+                  ),
+                ],
+              },
+              null,
+              false,
+              {},
+            )) as Parameters<typeof insert>[0],
+          host as unknown as Node,
+        )
+      })
+
+      const root = host.childNodes[0] as FakeElement | undefined
+      const dialog = root?.childNodes[1] as FakeElement | undefined
+      const button = root?.childNodes[0] as FakeElement | undefined
+      expect(root?.tagName).toBe('div')
+      expect(dialog?.tagName).toBe('dialog')
+      expect(button?.tagName).toBe('button')
+      ;(root as FakeElement & { __debugMarker?: string }).__debugMarker = 'root-live'
+      ;(dialog as FakeElement & { __debugMarker?: string }).__debugMarker = 'dialog-live'
+      dialog?.showModal()
+      expect(dialog?.open).toBe(true)
+
+      open.value = true
+      query.value = 'ov'
+      await flushAsync()
+
+      const nextRoot = host.childNodes[0] as FakeElement | undefined
+      const nextDialog = nextRoot?.childNodes[1] as FakeElement | undefined
+      const nextButton = nextRoot?.childNodes[0] as FakeElement | undefined
+      expect(nextRoot).toBe(root)
+      expect(nextDialog).toBe(dialog)
+      expect((nextRoot as FakeElement & { __debugMarker?: string }).__debugMarker).toBe('root-live')
+      expect((nextDialog as FakeElement & { __debugMarker?: string }).__debugMarker).toBe(
+        'dialog-live',
+      )
+      expect(nextDialog?.open).toBe(true)
+      expect(nextButton?.hasAttribute('aria-expanded')).toBe(true)
+      expect(nextDialog?.textContent).toContain('Overview')
+    })
+  })
+
+  it('keeps owner-scoped insert trees stable on the first local update', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const doc = container.doc as unknown as FakeDocument
+      const host = new FakeElement('div')
+      host.ownerDocument = doc
+      ;(doc.body as unknown as FakeElement).appendChild(host)
+
+      let open!: { value: boolean }
+      let query!: { value: string }
+
+      const SearchResultsBodyRender = (props: { query: string }) => {
+        if (props.query.trim() === '') {
+          return jsxDEV(
+            'div',
+            { children: 'Search titles, headings, content, and code.' },
+            null,
+            false,
+            {},
+          )
+        }
+        return jsxDEV(
+          'div',
+          {
+            children: jsxDEV(
+              'a',
+              { href: '/docs/getting-started/overview', children: 'Overview' },
+              null,
+              false,
+              {},
+            ),
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const SearchResultsBody = __eclipsaComponent(
+        SearchResultsBodyRender,
+        'component-owner-insert-search-results-body',
+        () => [],
+      )
+
+      const SearchDialogHostBody = () => {
+        open = useSignal(false)
+        query = useSignal('')
+
+        insert(
+          (() =>
+            jsxDEV(
+              'div',
+              {
+                children: [
+                  jsxDEV(
+                    'button',
+                    {
+                      'aria-expanded': open.value,
+                      children: 'Search docs',
+                    },
+                    null,
+                    false,
+                    {},
+                  ),
+                  jsxDEV(
+                    'dialog',
+                    {
+                      children: jsxDEV(
+                        'div',
+                        {
+                          children: jsxDEV(
+                            'div',
+                            {
+                              children: [
+                                jsxDEV(
+                                  'input',
+                                  { type: 'text', value: query.value },
+                                  null,
+                                  false,
+                                  {},
+                                ),
+                                jsxDEV(
+                                  SearchResultsBody as any,
+                                  { query: query.value },
+                                  null,
+                                  false,
+                                  {},
+                                ),
+                              ],
+                            },
+                            null,
+                            false,
+                            {},
+                          ),
+                        },
+                        null,
+                        false,
+                        {},
+                      ),
+                    },
+                    null,
+                    false,
+                    {},
+                  ),
+                ],
+              },
+              null,
+              false,
+              {},
+            )) as Parameters<typeof insert>[0],
+          host as unknown as Node,
+        )
+
+        return jsxDEV('div', { children: 'owner' }, null, false, {})
+      }
+
+      const SearchDialogHost = __eclipsaComponent(
+        SearchDialogHostBody,
+        'component-owner-insert-search-dialog-host',
+        () => [],
+      )
+
+      container.imports.set(
+        'component-owner-insert-search-results-body',
+        Promise.resolve({
+          default: (_scope: unknown[], propsOrArg?: unknown) =>
+            SearchResultsBodyRender(propsOrArg as { query: string }),
+        }),
+      )
+      container.imports.set(
+        'component-owner-insert-search-dialog-host',
+        Promise.resolve({
+          default: () => SearchDialogHostBody(),
+        }),
+      )
+
+      const ownerNodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(SearchDialogHost as any, {}, null, false, {}), container),
+      ) as unknown as FakeNode[]
+
+      for (const node of ownerNodes) {
+        ;(doc.body as unknown as FakeElement).appendChild(node)
+      }
+
+      const root = host.childNodes[0] as FakeElement | undefined
+      const dialog = root?.childNodes[1] as FakeElement | undefined
+      const button = root?.childNodes[0] as FakeElement | undefined
+      expect(root?.tagName).toBe('div')
+      expect(dialog?.tagName).toBe('dialog')
+      expect(button?.tagName).toBe('button')
+      ;(root as FakeElement & { __debugMarker?: string }).__debugMarker = 'owner-root-live'
+      ;(dialog as FakeElement & { __debugMarker?: string }).__debugMarker = 'owner-dialog-live'
+      dialog?.showModal()
+      expect(dialog?.open).toBe(true)
+
+      open.value = true
+      query.value = 'ov'
+      await flushAsync()
+
+      const nextRoot = host.childNodes[0] as FakeElement | undefined
+      const nextDialog = nextRoot?.childNodes[1] as FakeElement | undefined
+      const nextButton = nextRoot?.childNodes[0] as FakeElement | undefined
+      expect(nextRoot).toBe(root)
+      expect(nextDialog).toBe(dialog)
+      expect((nextRoot as FakeElement & { __debugMarker?: string }).__debugMarker).toBe(
+        'owner-root-live',
+      )
+      expect((nextDialog as FakeElement & { __debugMarker?: string }).__debugMarker).toBe(
+        'owner-dialog-live',
+      )
+      expect(nextDialog?.open).toBe(true)
+      expect(nextButton?.hasAttribute('aria-expanded')).toBe(true)
+      expect(nextDialog?.textContent).toContain('Overview')
+    })
+  })
+
+  it('flushes async signal writes without waiting for another DOM event', async () => {
+    await withFakeNodeGlobal(async () => {
+      let count!: { value: number }
+
+      const App = __eclipsaComponent(
+        () => {
+          count = useSignal(0)
+          return jsxDEV('span', { children: String(count.value) }, null, false, {})
+        },
+        'component-async-write',
+        () => [],
+      )
+
+      const container = createContainer()
+      container.imports.set(
+        'component-async-write',
+        Promise.resolve({
+          default: () => {
+            return jsxDEV('span', { children: String(count.value) }, null, false, {})
+          },
+        }),
+      )
+      const host = new FakeElement('div')
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(App, {}, null, false, {}), container),
+      ) as unknown as FakeNode[]
+
+      for (const node of nodes) {
+        host.appendChild(node)
+      }
+
+      expect(host.textContent).toContain('0')
+
+      Promise.resolve().then(() => {
+        count.value = 1
+      })
+
+      await flushAsync()
+      await flushAsync()
+      await new Promise((resolve) => setTimeout(resolve, 0))
+
+      expect(host.textContent).toContain('1')
+    })
+  })
+
+  it('restores focus for bound inputs that rerender without an onInput handler', async () => {
+    await withFakeNodeGlobal(async () => {
+      let inputRef!: { value: HTMLInputElement | undefined }
+
+      const AppBody = () => {
+        const query = useSignal('')
+        inputRef = useSignal<HTMLInputElement | undefined>()
+        return jsxDEV(
+          'input',
+          { 'bind:value': query, ref: inputRef, type: 'text' },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const App = __eclipsaComponent(
+        () => AppBody(),
+        'component-bind-focus',
+        () => [],
+      )
+
+      class TargetedInputEvent extends Event {
+        constructor(private readonly inputTarget: EventTarget | null) {
+          super('input')
+        }
+
+        override get target() {
+          return this.inputTarget
+        }
+      }
+
+      const container = createContainer()
+      container.imports.set(
+        'component-bind-focus',
+        Promise.resolve({
+          default: () => AppBody(),
+        }),
+      )
+      const doc = container.doc as unknown as FakeDocument
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(App, {}, null, false, {}), container),
+      )
+      for (const node of nodes as unknown as FakeNode[]) {
+        ;(doc.body as unknown as FakeElement).appendChild(node)
+      }
+      const initialInput = nodes.find((node) => node instanceof FakeElement) as
+        | FakeElement
+        | undefined
+      if (!initialInput) {
+        throw new Error('Expected rendered input.')
+      }
+      initialInput.focus()
+      initialInput.value = 'a'
+      initialInput.selectionStart = 1
+      initialInput.selectionEnd = 1
+
+      await dispatchDocumentEvent(
+        container,
+        new TargetedInputEvent(initialInput as unknown as EventTarget),
+      )
+      await flushAsync()
+
+      expect(inputRef.value).toBeDefined()
+      expect(doc.activeElement).toBe(initialInput as unknown as Element)
+      expect(initialInput.value).toBe('a')
+      expect(initialInput.selectionStart).toBe(1)
+      expect(initialInput.selectionEnd).toBe(1)
+    })
+  })
+
+  it('restores focus for native input listeners that trigger rerenders outside delegated document events', async () => {
+    await withFakeNodeGlobal(async () => {
+      let inputRef!: { value: HTMLInputElement | undefined }
+      let query!: { value: string }
+
+      const renderBody = () =>
+        jsxDEV(
+          'div',
+          {
+            children: [
+              jsxDEV('input', { ref: inputRef, type: 'text', value: query.value }, null, false, {}),
+              jsxDEV('span', { children: query.value }, null, false, {}),
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+
+      const App = __eclipsaComponent(
+        () => {
+          query = useSignal('')
+          inputRef = useSignal<HTMLInputElement | undefined>()
+          return renderBody()
+        },
+        'component-native-focus',
+        () => [],
+      )
+
+      const container = createContainer()
+      container.imports.set(
+        'component-native-focus',
+        Promise.resolve({
+          default: () => renderBody(),
+        }),
+      )
+      const doc = container.doc as unknown as FakeDocument
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(App, {}, null, false, {}), container),
+      )
+      for (const node of nodes as unknown as FakeNode[]) {
+        ;(doc.body as unknown as FakeElement).appendChild(node)
+      }
+
+      const findLiveInput = () => {
+        const visit = (node: FakeNode): FakeElement | null => {
+          if (node instanceof FakeElement && node.tagName === 'input') {
+            return node
+          }
+          for (const child of node.childNodes) {
+            const found = visit(child)
+            if (found) {
+              return found
+            }
+          }
+          return null
+        }
+        return visit(doc.body as unknown as FakeNode)
+      }
+
+      const initialInput = findLiveInput()
+      if (!initialInput) {
+        throw new Error('Expected rendered input.')
+      }
+
+      initialInput.addEventListener('input', () => {
+        query.value = initialInput.value
+      })
+      initialInput.focus()
+      initialInput.value = 'a'
+      initialInput.selectionStart = 1
+      initialInput.selectionEnd = 1
+      initialInput.dispatchEvent(new Event('input'))
+
+      await flushAsync()
+      await new Promise((resolve) => setTimeout(resolve, 0))
+
+      const liveInput = findLiveInput()
+      expect(liveInput).toBeTruthy()
+      expect(doc.activeElement).toBe(liveInput as unknown as Element)
+      expect(liveInput?.value).toBe('a')
+      expect(liveInput?.selectionStart).toBe(1)
+      expect(liveInput?.selectionEnd).toBe(1)
+    })
+  })
+
+  it('waits for resume startup before dispatching non-link document events', async () => {
+    await withFakeNodeGlobal(async () => {
+      class TargetedClickEvent extends Event {
+        constructor(private readonly eventTarget: EventTarget | null) {
+          super('click')
+        }
+
+        override get target() {
+          return this.eventTarget
+        }
+      }
+
+      let handled = 0
+      let resolveReady!: () => void
+
+      const container = createContainer()
+      const doc = container.doc as unknown as FakeDocument
+      const button = doc.createElement('button') as unknown as FakeElement
+      button.setAttribute('data-e-onclick', 'startup-click-symbol:sc0')
+      ;(doc.body as unknown as FakeElement).appendChild(button)
+      container.scopes.set('sc0', [])
+      container.imports.set(
+        'startup-click-symbol',
+        Promise.resolve({
+          default: () => {
+            handled += 1
+          },
+        }),
+      )
+      container.resumeReadyPromise = new Promise<void>((resolve) => {
+        resolveReady = resolve
+      })
+
+      const pendingDispatch = dispatchDocumentEvent(
+        container,
+        new TargetedClickEvent(button as unknown as EventTarget),
+      )
+
+      await flushAsync()
+      expect(handled).toBe(0)
+
+      resolveReady()
+      await pendingDispatch
+
+      expect(handled).toBe(1)
+    })
+  })
+
+  it('does not override programmatic focus changes during resumable document events', async () => {
+    await withFakeNodeGlobal(async () => {
+      class TargetedClickEvent extends Event {
+        constructor(private readonly eventTarget: EventTarget | null) {
+          super('click')
+        }
+
+        override get target() {
+          return this.eventTarget
+        }
+      }
+
+      const container = createContainer()
+      const doc = container.doc as unknown as FakeDocument
+      const button = doc.createElement('button') as unknown as FakeElement
+      const input = doc.createElement('input') as unknown as FakeElement
+
+      button.setAttribute('data-e-onclick', 'focus-input-symbol:sc0')
+      ;(doc.body as unknown as FakeElement).appendChild(button)
+      ;(doc.body as unknown as FakeElement).appendChild(input)
+      doc.activeElement = button as unknown as Element
+
+      container.scopes.set('sc0', [])
+      container.imports.set(
+        'focus-input-symbol',
+        Promise.resolve({
+          default: () => {
+            input.focus()
+          },
+        }),
+      )
+
+      await dispatchDocumentEvent(
+        container,
+        new TargetedClickEvent(button as unknown as EventTarget),
+      )
+
+      expect(doc.activeElement).toBe(input as unknown as Element)
+    })
+  })
+
+  it('prefetches interactive handler symbols on pointer intent so click handlers can run immediately', async () => {
+    await withFakeNodeGlobal(async () => {
+      class TargetedEvent extends Event {
+        constructor(
+          type: string,
+          private readonly eventTarget: EventTarget | null,
+        ) {
+          super(type)
+        }
+
+        override get target() {
+          return this.eventTarget
+        }
+      }
+
+      const container = createContainer()
+      const doc = container.doc as unknown as FakeDocument
+      const button = doc.createElement('button') as unknown as FakeElement
+      const input = doc.createElement('input') as unknown as FakeElement
+
+      button.setAttribute('data-e-onclick', 'prefetch-click-symbol:sc0')
+      ;(doc.body as unknown as FakeElement).appendChild(button)
+      ;(doc.body as unknown as FakeElement).appendChild(input)
+      doc.activeElement = button as unknown as Element
+
+      container.scopes.set('sc0', [])
+
+      let resolveImport!: (module: { default: () => void }) => void
+      const imported = new Promise<{ default: () => void }>((resolve) => {
+        resolveImport = resolve
+      })
+      container.imports.set('prefetch-click-symbol', imported)
+
+      const cleanup = installResumeListeners(container)
+
+      doc.dispatchEvent(new TargetedEvent('pointerdown', button as unknown as EventTarget))
+      resolveImport({
+        default: () => {
+          input.focus()
+        },
+      })
+      await flushAsync()
+
+      doc.dispatchEvent(new TargetedEvent('click', button as unknown as EventTarget))
+
+      expect(doc.activeElement).toBe(input as unknown as Element)
+      cleanup()
+    })
+  })
+
+  it('warms visible interactive handler symbols after listener installation so first clicks after navigation are immediate', async () => {
+    await withFakeNodeGlobal(async () => {
+      class TargetedClickEvent extends Event {
+        constructor(private readonly eventTarget: EventTarget | null) {
+          super('click')
+        }
+
+        override get target() {
+          return this.eventTarget
+        }
+      }
+
+      const container = createContainer()
+      const doc = container.doc as unknown as FakeDocument
+      const button = doc.createElement('button') as unknown as FakeElement
+      const input = doc.createElement('input') as unknown as FakeElement
+
+      button.setAttribute('data-e-onclick', 'visible-click-symbol:sc0')
+      ;(doc.body as unknown as FakeElement).appendChild(button)
+      ;(doc.body as unknown as FakeElement).appendChild(input)
+      doc.activeElement = button as unknown as Element
+
+      container.scopes.set('sc0', [])
+
+      let resolveImport!: (module: { default: () => void }) => void
+      const imported = new Promise<{ default: () => void }>((resolve) => {
+        resolveImport = resolve
+      })
+      container.imports.set('visible-click-symbol', imported)
+
+      const cleanup = installResumeListeners(container)
+      resolveImport({
+        default: () => {
+          input.focus()
+        },
+      })
+      await flushAsync()
+
+      doc.dispatchEvent(new TargetedClickEvent(button as unknown as EventTarget))
+
+      expect(doc.activeElement).toBe(input as unknown as Element)
+      cleanup()
+    })
+  })
+
+  it('intercepts dynamically inserted route links through the document listener fallback', async () => {
+    await withFakeNodeGlobal(async () => {
+      const OriginalMouseEvent = globalThis.MouseEvent
+      class FakeMouseEvent extends Event {
+        altKey = false
+        button = 0
+        ctrlKey = false
+        metaKey = false
+        shiftKey = false
+
+        constructor(type: string) {
+          super(type, { bubbles: true, cancelable: true })
+        }
+      }
+      globalThis.MouseEvent = FakeMouseEvent as unknown as typeof MouseEvent
+
+      class TargetedMouseEvent extends FakeMouseEvent {
+        constructor(private readonly eventTarget: EventTarget | null) {
+          super('click')
+        }
+
+        override get target() {
+          return this.eventTarget
+        }
+      }
+
+      const OriginalHTMLAnchorElement = globalThis.HTMLAnchorElement
+      globalThis.HTMLAnchorElement = FakeElement as unknown as typeof HTMLAnchorElement
+
+      try {
+        const container = createContainer()
+        const doc = container.doc as unknown as FakeDocument & {
+          location: Location
+        }
+        doc.location = {
+          hash: '',
+          href: 'http://local/docs/getting-started/overview',
+          origin: 'http://local',
+          pathname: '/docs/getting-started/overview',
+          search: '',
+        } as Location
+        container.router = {
+          currentPath: { value: '/docs/getting-started/overview' },
+          currentRoute: null,
+          currentUrl: { value: 'http://local/docs/getting-started/overview' },
+          defaultTitle: '',
+          isNavigating: { value: false },
+          loadedRoutes: new Map(),
+          location: doc.location,
+          manifest: [
+            {
+              error: null,
+              hasMiddleware: false,
+              layouts: [],
+              loading: null,
+              notFound: null,
+              page: '/app/docs/[...slug]/+page.tsx',
+              routePath: '/docs/getting-started/overview',
+              segments: [
+                { kind: 'static', value: 'docs' },
+                { kind: 'static', value: 'getting-started' },
+                { kind: 'static', value: 'overview' },
+              ],
+              server: null,
+            },
+          ],
+          navigate: (async () => {}) as any,
+          prefetchedLoaders: new Map(),
+          routeModuleBusts: new Map(),
+          routePrefetches: new Map(),
+          sequence: 0,
+        } as unknown as RuntimeContainer['router']
+
+        const cleanup = installResumeListeners(container)
+        const link = doc.createElement('a') as unknown as FakeElement
+        link.setAttribute('href', '/docs/getting-started/overview')
+        link.setAttribute('data-e-link', '')
+        ;(doc.body as unknown as FakeElement).appendChild(link)
+
+        const event = new TargetedMouseEvent(link as unknown as EventTarget)
+        doc.dispatchEvent(event)
+        await container.eventDispatchPromise
+        await flushAsync()
+
+        expect(event.defaultPrevented).toBe(true)
+        cleanup()
+      } finally {
+        globalThis.MouseEvent = OriginalMouseEvent
+        globalThis.HTMLAnchorElement = OriginalHTMLAnchorElement
+      }
+    })
+  })
+
+  it('falls back to static HTML resume payloads when the route-data endpoint is unavailable', async () => {
+    await withFakeNodeGlobal(async () => {
+      const OriginalFetch = globalThis.fetch
+      const OriginalMouseEvent = globalThis.MouseEvent
+      const OriginalHTMLAnchorElement = globalThis.HTMLAnchorElement
+
+      class FakeMouseEvent extends Event {
+        altKey = false
+        button = 0
+        ctrlKey = false
+        metaKey = false
+        shiftKey = false
+
+        constructor(
+          type: string,
+          private readonly eventTarget: EventTarget | null,
+        ) {
+          super(type, { bubbles: true, cancelable: true })
+        }
+
+        override get target() {
+          return this.eventTarget
+        }
+      }
+
+      globalThis.MouseEvent = FakeMouseEvent as unknown as typeof MouseEvent
+      globalThis.HTMLAnchorElement = FakeElement as unknown as typeof HTMLAnchorElement
+
+      try {
+        const container = createContainer()
+        const doc = container.doc as unknown as FakeDocument & {
+          defaultView: {
+            addEventListener: () => void
+            history: {
+              pushState: (_data: unknown, _unused: string, url: string) => void
+              replaceState: (_data: unknown, _unused: string, url: string) => void
+            }
+            location: {
+              assign: (url: string) => void
+              replace: (url: string) => void
+            }
+            removeEventListener: () => void
+            requestAnimationFrame: (callback: FrameRequestCallback) => number
+            setTimeout: (callback: () => void) => number
+          }
+          location: Location
+        }
+        const applyLocation = (href: string | URL | null | undefined) => {
+          if (!href) {
+            return
+          }
+          const url = href instanceof URL ? href : new URL(href)
+          doc.location = {
+            hash: url.hash,
+            href: url.href,
+            origin: url.origin,
+            pathname: url.pathname,
+            search: url.search,
+          } as Location
+        }
+        applyLocation('http://local/')
+        doc.defaultView = {
+          ...doc.defaultView,
+          history: {
+            pushState: (_data, _unused, url) => {
+              applyLocation(url)
+            },
+            replaceState: (_data, _unused, url) => {
+              applyLocation(url)
+            },
+          },
+          location: {
+            assign: (url) => {
+              applyLocation(url)
+            },
+            replace: (url) => {
+              applyLocation(url)
+            },
+          },
+        }
+
+        const htmlPayload = JSON.stringify({
+          actions: {},
+          components: {},
+          loaders: {},
+          scopes: {},
+          signals: {},
+          subscriptions: {},
+          symbols: {},
+          visibles: {},
+          watches: {},
+        })
+
+        globalThis.fetch = (async (input: RequestInfo | URL) => {
+          const url =
+            typeof input === 'string' ? input : input instanceof URL ? input.href : input.url
+
+          if (
+            url === 'http://local/__eclipsa/route-data?href=http%3A%2F%2Flocal%2Fdocs%2Fquick-start'
+          ) {
+            return {
+              json: async () => ({ document: true, ok: false }),
+              status: 404,
+              text: async () => '',
+              url,
+            } as Response
+          }
+
+          if (url === 'http://local/docs/quick-start') {
+            return {
+              status: 200,
+              text: async () =>
+                `<html><body><script id="eclipsa-resume-final" type="application/eclipsa-resume+json">${htmlPayload}</script></body></html>`,
+              url,
+            } as Response
+          }
+
+          throw new Error(`Unexpected fetch: ${url}`)
+        }) as typeof fetch
+
+        const currentPage = () => jsxDEV('p', { children: 'home' }, null, false, {})
+        const nextPage = () => jsxDEV('p', { children: 'quick start' }, null, false, {})
+
+        container.rootElement = doc.body as unknown as HTMLElement
+        container.router = {
+          currentPath: { value: '/' },
+          currentRoute: {
+            entry: {
+              error: null,
+              hasMiddleware: false,
+              layouts: [],
+              loading: null,
+              notFound: null,
+              page: '/entries/home.js',
+              routePath: '/',
+              segments: [],
+              server: null,
+            },
+            error: undefined,
+            layouts: [],
+            params: {},
+            pathname: '/',
+            page: {
+              metadata: null,
+              renderer: currentPage,
+              symbol: null,
+              url: '/entries/home.js',
+            },
+            render: () => jsxDEV(currentPage, {}, null, false, {}),
+          },
+          currentUrl: { value: 'http://local/' },
+          defaultTitle: '',
+          isNavigating: { value: false },
+          loadedRoutes: new Map([
+            [
+              '/::page',
+              {
+                entry: {
+                  error: null,
+                  hasMiddleware: false,
+                  layouts: [],
+                  loading: null,
+                  notFound: null,
+                  page: '/entries/home.js',
+                  routePath: '/',
+                  segments: [],
+                  server: null,
+                },
+                error: undefined,
+                layouts: [],
+                params: {},
+                pathname: '/',
+                page: {
+                  metadata: null,
+                  renderer: currentPage,
+                  symbol: null,
+                  url: '/entries/home.js',
+                },
+                render: () => jsxDEV(currentPage, {}, null, false, {}),
+              },
+            ],
+            [
+              '/docs/quick-start::page',
+              {
+                entry: {
+                  error: null,
+                  hasMiddleware: false,
+                  layouts: [],
+                  loading: null,
+                  notFound: null,
+                  page: '/entries/quick-start.js',
+                  routePath: '/docs/quick-start',
+                  segments: [
+                    { kind: 'static', value: 'docs' },
+                    { kind: 'static', value: 'quick-start' },
+                  ],
+                  server: null,
+                },
+                error: undefined,
+                layouts: [],
+                params: {},
+                pathname: '/docs/quick-start',
+                page: {
+                  metadata: null,
+                  renderer: nextPage,
+                  symbol: null,
+                  url: '/entries/quick-start.js',
+                },
+                render: () => jsxDEV(nextPage, {}, null, false, {}),
+              },
+            ],
+          ]),
+          location: doc.location,
+          manifest: [
+            {
+              error: null,
+              hasMiddleware: false,
+              layouts: [],
+              loading: null,
+              notFound: null,
+              page: '/entries/home.js',
+              routePath: '/',
+              segments: [],
+              server: null,
+            },
+            {
+              error: null,
+              hasMiddleware: false,
+              layouts: [],
+              loading: null,
+              notFound: null,
+              page: '/entries/quick-start.js',
+              routePath: '/docs/quick-start',
+              segments: [
+                { kind: 'static', value: 'docs' },
+                { kind: 'static', value: 'quick-start' },
+              ],
+              server: null,
+            },
+          ],
+          navigate: (async () => {}) as any,
+          prefetchedLoaders: new Map(),
+          routeModuleBusts: new Map(),
+          routePrefetches: new Map(),
+          sequence: 0,
+        } as unknown as RuntimeContainer['router']
+
+        const link = doc.createElement('a') as unknown as FakeElement
+        link.setAttribute('href', '/docs/quick-start')
+        link.setAttribute('data-e-link', '')
+        ;(doc.body as unknown as FakeElement).appendChild(link)
+
+        const cleanup = installResumeListeners(container)
+        const event = new FakeMouseEvent('click', link as unknown as EventTarget)
+        doc.dispatchEvent(event)
+        await container.eventDispatchPromise
+        await flushAsync()
+        await flushAsync()
+        await flushAsync()
+        await flushAsync()
+
+        expect(event.defaultPrevented).toBe(true)
+        expect((doc.body as unknown as FakeElement).textContent).toContain('quick start')
+        expect(doc.location.pathname).toBe('/docs/quick-start')
+        cleanup()
+      } finally {
+        globalThis.fetch = OriginalFetch
+        globalThis.MouseEvent = OriginalMouseEvent
+        globalThis.HTMLAnchorElement = OriginalHTMLAnchorElement
+      }
+    })
+  })
+
+  it('navigates to the previous route on popstate after the browser location has already changed', async () => {
+    await withFakeNodeGlobal(async () => {
+      const OriginalFetch = globalThis.fetch
+
+      try {
+        globalThis.fetch = (async () => {
+          throw new Error('Unexpected fetch during popstate navigation test')
+        }) as typeof fetch
+
+        const container = createContainer()
+        const doc = container.doc as unknown as FakeDocument & {
+          defaultView: {
+            addEventListener: (type: string, listener: EventListenerOrEventListenerObject) => void
+            history: {
+              pushState: (_data: unknown, _unused: string, url: string) => void
+              replaceState: (_data: unknown, _unused: string, url: string) => void
+            }
+            location: {
+              assign: (url: string) => void
+              replace: (url: string) => void
+            }
+            removeEventListener: (
+              type: string,
+              listener: EventListenerOrEventListenerObject,
+            ) => void
+            requestAnimationFrame: (callback: FrameRequestCallback) => number
+            setTimeout: (callback: () => void) => number
+          }
+          location: Location
+        }
+
+        const applyLocation = (href: string | URL | null | undefined) => {
+          if (!href) {
+            return
+          }
+          const url = href instanceof URL ? href : new URL(href)
+          doc.location = {
+            hash: url.hash,
+            href: url.href,
+            origin: url.origin,
+            pathname: url.pathname,
+            search: url.search,
+          } as Location
+        }
+
+        let popstateListener: unknown = null
+        applyLocation('http://local/counter')
+        doc.defaultView = {
+          ...doc.defaultView,
+          addEventListener: (type, listener) => {
+            if (type === 'popstate') {
+              popstateListener = listener
+            }
+          },
+          history: {
+            pushState: (_data, _unused, url) => {
+              applyLocation(url)
+            },
+            replaceState: (_data, _unused, url) => {
+              applyLocation(url)
+            },
+          },
+          location: {
+            assign: (url) => {
+              applyLocation(url)
+            },
+            replace: (url) => {
+              applyLocation(url)
+            },
+          },
+          removeEventListener: (type, listener) => {
+            if (type === 'popstate' && popstateListener === listener) {
+              popstateListener = null
+            }
+          },
+        }
+
+        const homeEntry = {
+          error: null,
+          hasMiddleware: false,
+          layouts: [],
+          loading: null,
+          notFound: null,
+          page: '/entries/home.js',
+          routePath: '/',
+          segments: [],
+          server: null,
+        }
+        const counterEntry = {
+          error: null,
+          hasMiddleware: false,
+          layouts: [],
+          loading: null,
+          notFound: null,
+          page: '/entries/counter.js',
+          routePath: '/counter',
+          segments: [{ kind: 'static' as const, value: 'counter' }],
+          server: null,
+        }
+        const Home = () => jsxDEV('p', { children: 'home' }, null, false, {})
+        const Counter = () => jsxDEV('p', { children: 'counter' }, null, false, {})
+        const homeRoute = {
+          entry: homeEntry,
+          error: undefined,
+          layouts: [],
+          params: {},
+          pathname: '/',
+          page: {
+            metadata: null,
+            renderer: Home,
+            symbol: null,
+            url: '/entries/home.js',
+          },
+          render: () => jsxDEV(Home, {}, null, false, {}),
+        }
+        const counterRoute = {
+          entry: counterEntry,
+          error: undefined,
+          layouts: [],
+          params: {},
+          pathname: '/counter',
+          page: {
+            metadata: null,
+            renderer: Counter,
+            symbol: null,
+            url: '/entries/counter.js',
+          },
+          render: () => jsxDEV(Counter, {}, null, false, {}),
+        }
+
+        container.rootElement = doc.body as unknown as HTMLElement
+        const router = {
+          currentPath: { value: '/counter' },
+          currentRoute: counterRoute,
+          currentUrl: { value: 'http://local/counter' },
+          defaultTitle: '',
+          isNavigating: { value: false },
+          loadedRoutes: new Map([
+            ['/::page', homeRoute],
+            ['/counter::page', counterRoute],
+          ]),
+          location: doc.location,
+          manifest: [homeEntry, counterEntry],
+          navigate: (async () => {}) as any,
+          prefetchedLoaders: new Map(),
+          routeModuleBusts: new Map(),
+          routePrefetches: new Map([
+            [
+              '/',
+              Promise.resolve({
+                finalHref: 'http://local/',
+                finalPathname: '/',
+                kind: 'page' as const,
+                loaders: {},
+                ok: true as const,
+              }),
+            ],
+          ]),
+          sequence: 0,
+        } as NonNullable<RuntimeContainer['router']>
+        container.router = router
+
+        const originalDocument = globalThis.document
+        ;(globalThis as typeof globalThis & { document: Document }).document =
+          container.doc as Document
+
+        try {
+          const nodes = withRuntimeContainer(container, () =>
+            renderClientInsertable(counterRoute.render(), container),
+          ) as unknown as FakeNode[]
+
+          for (const node of nodes) {
+            ;(doc.body as unknown as FakeElement).appendChild(node)
+          }
+
+          expect((doc.body as unknown as FakeElement).textContent).toContain('counter')
+
+          const cleanup = installResumeListeners(container)
+
+          applyLocation('http://local/')
+          expect(doc.location.pathname).toBe('/')
+          expect(router.currentPath.value).toBe('/counter')
+
+          const popstateEvent = new Event('popstate')
+          if (typeof popstateListener === 'function') {
+            ;(popstateListener as (event: Event) => void)(popstateEvent)
+          } else if (popstateListener && typeof popstateListener === 'object') {
+            ;(popstateListener as { handleEvent(event: Event): void }).handleEvent(popstateEvent)
+          }
+
+          await flushAsync()
+          await flushAsync()
+          await flushAsync()
+
+          expect(router.currentPath.value).toBe('/')
+          expect(router.currentUrl.value).toBe('http://local/')
+          expect((doc.body as unknown as FakeElement).textContent).toContain('home')
+          expect((doc.body as unknown as FakeElement).textContent).not.toContain('counter')
+
+          cleanup()
+        } finally {
+          globalThis.document = originalDocument
+        }
+      } finally {
+        globalThis.fetch = OriginalFetch
+      }
+    })
+  })
+
+  it('prefetches route loader snapshots on pointer intent so mobile taps can render loader-backed routes without loader endpoints', async () => {
+    await withFakeNodeGlobal(async () => {
+      const OriginalFetch = globalThis.fetch
+      const OriginalMouseEvent = globalThis.MouseEvent
+      const OriginalHTMLAnchorElement = globalThis.HTMLAnchorElement
+
+      class FakeMouseEvent extends Event {
+        altKey = false
+        button = 0
+        ctrlKey = false
+        metaKey = false
+        shiftKey = false
+
+        constructor(
+          type: string,
+          private readonly eventTarget: EventTarget | null,
+        ) {
+          super(type, { bubbles: true, cancelable: true })
+        }
+
+        override get target() {
+          return this.eventTarget
+        }
+      }
+
+      globalThis.MouseEvent = FakeMouseEvent as unknown as typeof MouseEvent
+      globalThis.HTMLAnchorElement = FakeElement as unknown as typeof HTMLAnchorElement
+
+      try {
+        const container = createContainer()
+        const doc = container.doc as unknown as FakeDocument & {
+          defaultView: {
+            addEventListener: () => void
+            history: {
+              pushState: (_data: unknown, _unused: string, url: string) => void
+              replaceState: (_data: unknown, _unused: string, url: string) => void
+            }
+            location: {
+              assign: (url: string) => void
+              replace: (url: string) => void
+            }
+            removeEventListener: () => void
+            requestAnimationFrame: (callback: FrameRequestCallback) => number
+            setTimeout: (callback: () => void) => number
+          }
+          location: Location
+        }
+        const applyLocation = (href: string | URL | null | undefined) => {
+          if (!href) {
+            return
+          }
+          const url = href instanceof URL ? href : new URL(href)
+          doc.location = {
+            hash: url.hash,
+            href: url.href,
+            origin: url.origin,
+            pathname: url.pathname,
+            search: url.search,
+          } as Location
+        }
+        applyLocation('http://local/docs/getting-started/overview')
+        doc.defaultView = {
+          ...doc.defaultView,
+          history: {
+            pushState: (_data, _unused, url) => {
+              applyLocation(url)
+            },
+            replaceState: (_data, _unused, url) => {
+              applyLocation(url)
+            },
+          },
+          location: {
+            assign: (url) => {
+              applyLocation(url)
+            },
+            replace: (url) => {
+              applyLocation(url)
+            },
+          },
+        }
+
+        const layoutLoaderId = 'mobile-route-layout-loader'
+        const pageLoaderId = 'mobile-route-page-loader'
+        const loaderRequests: string[] = []
+        const routeDataRequests: string[] = []
+
+        const htmlPayload = JSON.stringify({
+          actions: {},
+          components: {},
+          loaders: {
+            [layoutLoaderId]: {
+              data: 'prefetched layout',
+              error: null,
+              loaded: true,
+            },
+            [pageLoaderId]: {
+              data: 'prefetched page',
+              error: null,
+              loaded: true,
+            },
+          },
+          scopes: {},
+          signals: {},
+          subscriptions: {},
+          symbols: {},
+          visibles: {},
+          watches: {},
+        })
+
+        globalThis.fetch = (async (input: RequestInfo | URL) => {
+          const url =
+            typeof input === 'string' ? input : input instanceof URL ? input.href : input.url
+
+          if (
+            url ===
+            'http://local/__eclipsa/route-data?href=http%3A%2F%2Flocal%2Fdocs%2Fmaterials%2Frouting'
+          ) {
+            routeDataRequests.push(url)
+            return {
+              json: async () => ({ document: true, ok: false }),
+              status: 404,
+              text: async () => '',
+              url,
+            } as Response
+          }
+
+          if (url === 'http://local/docs/materials/routing') {
+            return {
+              status: 200,
+              text: async () =>
+                `<html><body><script id="eclipsa-resume-final" type="application/eclipsa-resume+json">${htmlPayload}</script></body></html>`,
+              url,
+            } as Response
+          }
+
+          if (url.startsWith('http://local/__eclipsa/loader/')) {
+            loaderRequests.push(url)
+            return {
+              json: async () => ({
+                error: { message: 'unexpected loader fetch' },
+                ok: false,
+              }),
+              status: 404,
+              url,
+            } as Response
+          }
+
+          throw new Error(`Unexpected fetch: ${url}`)
+        }) as typeof fetch
+
+        const useLayoutLoader = __eclipsaLoader(layoutLoaderId, [], async () => 'live layout')
+        const usePageLoader = __eclipsaLoader(pageLoaderId, [], async () => 'live page')
+
+        const PageBody = () => {
+          const page = usePageLoader()
+          return jsxDEV(
+            'h1',
+            { children: `page:${String(page.data ?? 'missing')}` },
+            null,
+            false,
+            {},
+          )
+        }
+
+        const LayoutBody = (props: { children: JSX.Childable }) => {
+          const layout = useLayoutLoader()
+          return jsxDEV(
+            'main',
+            {
+              children: [
+                jsxDEV(
+                  'p',
+                  { children: `layout:${String(layout.data ?? 'missing')}` },
+                  null,
+                  false,
+                  {},
+                ),
+                props.children,
+              ],
+            },
+            null,
+            false,
+            {},
+          )
+        }
+
+        const Page = __eclipsaComponent(PageBody, 'mobile-route-loader-page', () => [])
+        const Layout = __eclipsaComponent(LayoutBody, 'mobile-route-loader-layout', () => [], {
+          children: 1,
+        })
+
+        const currentPage = () => jsxDEV('p', { children: 'home' }, null, false, {})
+        const nextRender = () =>
+          jsxDEV(
+            Layout as any,
+            {
+              children: jsxDEV(Page as any, {}, null, false, {}),
+            },
+            null,
+            false,
+            {},
+          )
+
+        container.rootElement = doc.body as unknown as HTMLElement
+        container.router = {
+          currentPath: { value: '/docs/getting-started/overview' },
+          currentRoute: {
+            entry: {
+              error: null,
+              hasMiddleware: false,
+              layouts: [],
+              loading: null,
+              notFound: null,
+              page: '/entries/home.js',
+              routePath: '/docs/getting-started/overview',
+              segments: [
+                { kind: 'static', value: 'docs' },
+                { kind: 'static', value: 'getting-started' },
+                { kind: 'static', value: 'overview' },
+              ],
+              server: null,
+            },
+            error: undefined,
+            layouts: [],
+            params: {},
+            pathname: '/docs/getting-started/overview',
+            page: {
+              metadata: null,
+              renderer: currentPage,
+              symbol: null,
+              url: '/entries/home.js',
+            },
+            render: () => jsxDEV(currentPage, {}, null, false, {}),
+          },
+          currentUrl: { value: 'http://local/docs/getting-started/overview' },
+          defaultTitle: '',
+          isNavigating: { value: false },
+          loadedRoutes: new Map([
+            [
+              '/docs/getting-started/overview::page',
+              {
+                entry: {
+                  error: null,
+                  hasMiddleware: false,
+                  layouts: [],
+                  loading: null,
+                  notFound: null,
+                  page: '/entries/home.js',
+                  routePath: '/docs/getting-started/overview',
+                  segments: [
+                    { kind: 'static', value: 'docs' },
+                    { kind: 'static', value: 'getting-started' },
+                    { kind: 'static', value: 'overview' },
+                  ],
+                  server: null,
+                },
+                error: undefined,
+                layouts: [],
+                params: {},
+                pathname: '/docs/getting-started/overview',
+                page: {
+                  metadata: null,
+                  renderer: currentPage,
+                  symbol: null,
+                  url: '/entries/home.js',
+                },
+                render: () => jsxDEV(currentPage, {}, null, false, {}),
+              },
+            ],
+            [
+              '/docs/materials/routing::page',
+              {
+                entry: {
+                  error: null,
+                  hasMiddleware: false,
+                  layouts: ['/entries/docs-layout.js'],
+                  loading: null,
+                  notFound: null,
+                  page: '/entries/docs-routing.js',
+                  routePath: '/docs/materials/routing',
+                  segments: [
+                    { kind: 'static', value: 'docs' },
+                    { kind: 'static', value: 'materials' },
+                    { kind: 'static', value: 'routing' },
+                  ],
+                  server: null,
+                },
+                error: undefined,
+                layouts: [
+                  {
+                    metadata: null,
+                    renderer: Layout as unknown as JSX.Type,
+                    symbol: 'mobile-route-loader-layout',
+                    url: '/entries/docs-layout.js',
+                  },
+                ],
+                params: {},
+                pathname: '/docs/materials/routing',
+                page: {
+                  metadata: null,
+                  renderer: Page as unknown as JSX.Type,
+                  symbol: 'mobile-route-loader-page',
+                  url: '/entries/docs-routing.js',
+                },
+                render: nextRender,
+              },
+            ],
+          ]),
+          location: doc.location,
+          manifest: [
+            {
+              error: null,
+              hasMiddleware: false,
+              layouts: [],
+              loading: null,
+              notFound: null,
+              page: '/entries/home.js',
+              routePath: '/docs/getting-started/overview',
+              segments: [
+                { kind: 'static', value: 'docs' },
+                { kind: 'static', value: 'getting-started' },
+                { kind: 'static', value: 'overview' },
+              ],
+              server: null,
+            },
+            {
+              error: null,
+              hasMiddleware: false,
+              layouts: ['/entries/docs-layout.js'],
+              loading: null,
+              notFound: null,
+              page: '/entries/docs-routing.js',
+              routePath: '/docs/materials/routing',
+              segments: [
+                { kind: 'static', value: 'docs' },
+                { kind: 'static', value: 'materials' },
+                { kind: 'static', value: 'routing' },
+              ],
+              server: null,
+            },
+          ],
+          navigate: (async () => {}) as any,
+          prefetchedLoaders: new Map(),
+          routeModuleBusts: new Map(),
+          routePrefetches: new Map(),
+          sequence: 0,
+        } as unknown as RuntimeContainer['router']
+
+        const link = doc.createElement('a') as unknown as FakeElement
+        link.setAttribute('href', '/docs/materials/routing')
+        link.setAttribute('data-e-link', '')
+        ;(doc.body as unknown as FakeElement).appendChild(link)
+
+        const cleanup = installResumeListeners(container)
+
+        link.dispatchEvent(new FakeMouseEvent('pointerdown', link as unknown as EventTarget))
+        await flushAsync()
+        await flushAsync()
+
+        link.dispatchEvent(new FakeMouseEvent('click', link as unknown as EventTarget))
+        await flushAsync()
+        await flushAsync()
+        await flushAsync()
+
+        expect(routeDataRequests).toEqual([
+          'http://local/__eclipsa/route-data?href=http%3A%2F%2Flocal%2Fdocs%2Fmaterials%2Frouting',
+        ])
+        expect(loaderRequests).toEqual([])
+        expect((doc.body as unknown as FakeElement).textContent).toContain(
+          'layout:prefetched layout',
+        )
+        expect((doc.body as unknown as FakeElement).textContent).toContain('page:prefetched page')
+        expect(doc.location.pathname).toBe('/docs/materials/routing')
+        cleanup()
+      } finally {
+        globalThis.fetch = OriginalFetch
+        globalThis.MouseEvent = OriginalMouseEvent
+        globalThis.HTMLAnchorElement = OriginalHTMLAnchorElement
+      }
+    })
+  })
+
+  it('requests route loader snapshots during click navigation when intent prefetch has not run yet', async () => {
+    await withFakeNodeGlobal(async () => {
+      const OriginalFetch = globalThis.fetch
+      const OriginalMouseEvent = globalThis.MouseEvent
+      const OriginalHTMLAnchorElement = globalThis.HTMLAnchorElement
+
+      class FakeMouseEvent extends Event {
+        altKey = false
+        button = 0
+        ctrlKey = false
+        metaKey = false
+        shiftKey = false
+
+        constructor(
+          type: string,
+          private readonly eventTarget: EventTarget | null,
+        ) {
+          super(type, { bubbles: true, cancelable: true })
+        }
+
+        override get target() {
+          return this.eventTarget
+        }
+      }
+
+      globalThis.MouseEvent = FakeMouseEvent as unknown as typeof MouseEvent
+      globalThis.HTMLAnchorElement = FakeElement as unknown as typeof HTMLAnchorElement
+
+      try {
+        const container = createContainer()
+        const doc = container.doc as unknown as FakeDocument & {
+          defaultView: {
+            addEventListener: () => void
+            history: {
+              pushState: (_data: unknown, _unused: string, url: string) => void
+              replaceState: (_data: unknown, _unused: string, url: string) => void
+            }
+            location: {
+              assign: (url: string) => void
+              replace: (url: string) => void
+            }
+            removeEventListener: () => void
+            requestAnimationFrame: (callback: FrameRequestCallback) => number
+            setTimeout: (callback: () => void) => number
+          }
+          location: Location
+        }
+        const applyLocation = (href: string | URL | null | undefined) => {
+          if (!href) {
+            return
+          }
+          const url = href instanceof URL ? href : new URL(href)
+          doc.location = {
+            hash: url.hash,
+            href: url.href,
+            origin: url.origin,
+            pathname: url.pathname,
+            search: url.search,
+          } as Location
+        }
+        applyLocation('http://local/docs/getting-started/overview')
+        doc.defaultView = {
+          ...doc.defaultView,
+          history: {
+            pushState: (_data, _unused, url) => {
+              applyLocation(url)
+            },
+            replaceState: (_data, _unused, url) => {
+              applyLocation(url)
+            },
+          },
+          location: {
+            assign: (url) => {
+              applyLocation(url)
+            },
+            replace: (url) => {
+              applyLocation(url)
+            },
+          },
+        }
+
+        const layoutLoaderId = 'mobile-click-route-layout-loader'
+        const pageLoaderId = 'mobile-click-route-page-loader'
+        const loaderRequests: string[] = []
+        const routeDataRequests: string[] = []
+
+        const htmlPayload = JSON.stringify({
+          actions: {},
+          components: {},
+          loaders: {
+            [layoutLoaderId]: {
+              data: 'prefetched layout',
+              error: null,
+              loaded: true,
+            },
+            [pageLoaderId]: {
+              data: 'prefetched page',
+              error: null,
+              loaded: true,
+            },
+          },
+          scopes: {},
+          signals: {},
+          subscriptions: {},
+          symbols: {},
+          visibles: {},
+          watches: {},
+        })
+
+        globalThis.fetch = (async (input: RequestInfo | URL) => {
+          const url =
+            typeof input === 'string' ? input : input instanceof URL ? input.href : input.url
+
+          if (
+            url ===
+            'http://local/__eclipsa/route-data?href=http%3A%2F%2Flocal%2Fdocs%2Fmaterials%2Frouting'
+          ) {
+            routeDataRequests.push(url)
+            return {
+              json: async () => ({ document: true, ok: false }),
+              status: 404,
+              text: async () => '',
+              url,
+            } as Response
+          }
+
+          if (url === 'http://local/docs/materials/routing') {
+            return {
+              status: 200,
+              text: async () =>
+                `<html><body><script id="eclipsa-resume-final" type="application/eclipsa-resume+json">${htmlPayload}</script></body></html>`,
+              url,
+            } as Response
+          }
+
+          if (url.startsWith('http://local/__eclipsa/loader/')) {
+            loaderRequests.push(url)
+            return {
+              json: async () => ({
+                error: { message: 'unexpected loader fetch' },
+                ok: false,
+              }),
+              status: 404,
+              url,
+            } as Response
+          }
+
+          throw new Error(`Unexpected fetch: ${url}`)
+        }) as typeof fetch
+
+        const useLayoutLoader = __eclipsaLoader(layoutLoaderId, [], async () => 'live layout')
+        const usePageLoader = __eclipsaLoader(pageLoaderId, [], async () => 'live page')
+
+        const PageBody = () => {
+          const page = usePageLoader()
+          return jsxDEV(
+            'h1',
+            { children: `page:${String(page.data ?? 'missing')}` },
+            null,
+            false,
+            {},
+          )
+        }
+
+        const LayoutBody = (props: { children: JSX.Childable }) => {
+          const layout = useLayoutLoader()
+          return jsxDEV(
+            'main',
+            {
+              children: [
+                jsxDEV(
+                  'p',
+                  { children: `layout:${String(layout.data ?? 'missing')}` },
+                  null,
+                  false,
+                  {},
+                ),
+                props.children,
+              ],
+            },
+            null,
+            false,
+            {},
+          )
+        }
+
+        const Page = __eclipsaComponent(PageBody, 'mobile-click-route-loader-page', () => [])
+        const Layout = __eclipsaComponent(
+          LayoutBody,
+          'mobile-click-route-loader-layout',
+          () => [],
+          {
+            children: 1,
+          },
+        )
+
+        const currentPage = () => jsxDEV('p', { children: 'home' }, null, false, {})
+        const nextRender = () =>
+          jsxDEV(
+            Layout as any,
+            {
+              children: jsxDEV(Page as any, {}, null, false, {}),
+            },
+            null,
+            false,
+            {},
+          )
+
+        container.rootElement = doc.body as unknown as HTMLElement
+        container.router = {
+          currentPath: { value: '/docs/getting-started/overview' },
+          currentRoute: {
+            entry: {
+              error: null,
+              hasMiddleware: false,
+              layouts: [],
+              loading: null,
+              notFound: null,
+              page: '/entries/home.js',
+              routePath: '/docs/getting-started/overview',
+              segments: [
+                { kind: 'static', value: 'docs' },
+                { kind: 'static', value: 'getting-started' },
+                { kind: 'static', value: 'overview' },
+              ],
+              server: null,
+            },
+            error: undefined,
+            layouts: [],
+            params: {},
+            pathname: '/docs/getting-started/overview',
+            page: {
+              metadata: null,
+              renderer: currentPage,
+              symbol: null,
+              url: '/entries/home.js',
+            },
+            render: () => jsxDEV(currentPage, {}, null, false, {}),
+          },
+          currentUrl: { value: 'http://local/docs/getting-started/overview' },
+          defaultTitle: '',
+          isNavigating: { value: false },
+          loadedRoutes: new Map([
+            [
+              '/docs/getting-started/overview::page',
+              {
+                entry: {
+                  error: null,
+                  hasMiddleware: false,
+                  layouts: [],
+                  loading: null,
+                  notFound: null,
+                  page: '/entries/home.js',
+                  routePath: '/docs/getting-started/overview',
+                  segments: [
+                    { kind: 'static', value: 'docs' },
+                    { kind: 'static', value: 'getting-started' },
+                    { kind: 'static', value: 'overview' },
+                  ],
+                  server: null,
+                },
+                error: undefined,
+                layouts: [],
+                params: {},
+                pathname: '/docs/getting-started/overview',
+                page: {
+                  metadata: null,
+                  renderer: currentPage,
+                  symbol: null,
+                  url: '/entries/home.js',
+                },
+                render: () => jsxDEV(currentPage, {}, null, false, {}),
+              },
+            ],
+            [
+              '/docs/materials/routing::page',
+              {
+                entry: {
+                  error: null,
+                  hasMiddleware: false,
+                  layouts: ['/entries/docs-layout.js'],
+                  loading: null,
+                  notFound: null,
+                  page: '/entries/docs-routing.js',
+                  routePath: '/docs/materials/routing',
+                  segments: [
+                    { kind: 'static', value: 'docs' },
+                    { kind: 'static', value: 'materials' },
+                    { kind: 'static', value: 'routing' },
+                  ],
+                  server: null,
+                },
+                error: undefined,
+                layouts: [
+                  {
+                    metadata: null,
+                    renderer: Layout as unknown as JSX.Type,
+                    symbol: 'mobile-click-route-loader-layout',
+                    url: '/entries/docs-layout.js',
+                  },
+                ],
+                params: {},
+                pathname: '/docs/materials/routing',
+                page: {
+                  metadata: null,
+                  renderer: Page as unknown as JSX.Type,
+                  symbol: 'mobile-click-route-loader-page',
+                  url: '/entries/docs-routing.js',
+                },
+                render: nextRender,
+              },
+            ],
+          ]),
+          location: doc.location,
+          manifest: [
+            {
+              error: null,
+              hasMiddleware: false,
+              layouts: [],
+              loading: null,
+              notFound: null,
+              page: '/entries/home.js',
+              routePath: '/docs/getting-started/overview',
+              segments: [
+                { kind: 'static', value: 'docs' },
+                { kind: 'static', value: 'getting-started' },
+                { kind: 'static', value: 'overview' },
+              ],
+              server: null,
+            },
+            {
+              error: null,
+              hasMiddleware: false,
+              layouts: ['/entries/docs-layout.js'],
+              loading: null,
+              notFound: null,
+              page: '/entries/docs-routing.js',
+              routePath: '/docs/materials/routing',
+              segments: [
+                { kind: 'static', value: 'docs' },
+                { kind: 'static', value: 'materials' },
+                { kind: 'static', value: 'routing' },
+              ],
+              server: null,
+            },
+          ],
+          navigate: (async () => {}) as any,
+          prefetchedLoaders: new Map(),
+          routeModuleBusts: new Map(),
+          routePrefetches: new Map(),
+          sequence: 0,
+        } as unknown as RuntimeContainer['router']
+
+        const link = doc.createElement('a') as unknown as FakeElement
+        link.setAttribute('href', '/docs/materials/routing')
+        link.setAttribute('data-e-link', '')
+        ;(doc.body as unknown as FakeElement).appendChild(link)
+
+        const cleanup = installResumeListeners(container)
+
+        link.dispatchEvent(new FakeMouseEvent('click', link as unknown as EventTarget))
+        await container.eventDispatchPromise
+        await flushAsync()
+        await flushAsync()
+        await flushAsync()
+        await flushAsync()
+        await flushAsync()
+        await flushAsync()
+
+        expect(routeDataRequests).toEqual([
+          'http://local/__eclipsa/route-data?href=http%3A%2F%2Flocal%2Fdocs%2Fmaterials%2Frouting',
+        ])
+        expect(loaderRequests).toEqual([])
+        expect((doc.body as unknown as FakeElement).textContent).toContain(
+          'layout:prefetched layout',
+        )
+        expect((doc.body as unknown as FakeElement).textContent).toContain('page:prefetched page')
+        expect(doc.location.pathname).toBe('/docs/materials/routing')
+        cleanup()
+      } finally {
+        globalThis.fetch = OriginalFetch
+        globalThis.MouseEvent = OriginalMouseEvent
+        globalThis.HTMLAnchorElement = OriginalHTMLAnchorElement
+      }
+    })
+  })
+
+  it('dispatches delegated keyboard and composition events through document listeners', async () => {
+    await withFakeNodeGlobal(async () => {
+      class TargetedEvent extends Event {
+        constructor(
+          type: string,
+          private readonly eventTarget: EventTarget | null,
+        ) {
+          super(type)
+        }
+
+        override get target() {
+          return this.eventTarget
+        }
+      }
+
+      let keydownHandled = 0
+      let compositionHandled = 0
+
+      const container = createContainer()
+      const doc = container.doc as unknown as FakeDocument
+      const input = doc.createElement('input') as unknown as FakeElement
+
+      input.setAttribute('data-e-onkeydown', 'keydown-symbol:sc0')
+      input.setAttribute('data-e-oncompositionend', 'composition-symbol:sc1')
+      ;(doc.body as unknown as FakeElement).appendChild(input)
+
+      container.scopes.set('sc0', [])
+      container.scopes.set('sc1', [])
+      container.imports.set(
+        'keydown-symbol',
+        Promise.resolve({
+          default: () => {
+            keydownHandled += 1
+          },
+        }),
+      )
+      container.imports.set(
+        'composition-symbol',
+        Promise.resolve({
+          default: () => {
+            compositionHandled += 1
+          },
+        }),
+      )
+
+      const cleanup = installResumeListeners(container)
+      await flushAsync()
+
+      doc.dispatchEvent(new TargetedEvent('keydown', input as unknown as EventTarget))
+      doc.dispatchEvent(new TargetedEvent('compositionend', input as unknown as EventTarget))
+      await container.eventDispatchPromise
+      await flushAsync()
+
+      expect(keydownHandled).toBe(1)
+      expect(compositionHandled).toBe(1)
+      cleanup()
+    })
+  })
+
+  it('resets local signal ids and watch state when a component slot changes symbol', () => {
+    withFakeNodeGlobal(() => {
+      const First = __eclipsaComponent(
+        () => {
+          const value = useSignal('first')
+          useWatch(
+            __eclipsaWatch(
+              'watch-first',
+              () => {
+                void value.value
+              },
+              () => [value],
+            ),
+          )
+          return value.value
+        },
+        'component-first',
+        () => [],
+      )
+
+      const Second = __eclipsaComponent(
+        () => {
+          const count = useSignal(0)
+          return count.value
+        },
+        'component-second',
+        () => [],
+      )
+
+      const container = createContainer()
+
+      withRuntimeContainer(container, () => {
+        renderClientInsertable(jsxDEV(First, {}, null, false, {}), container)
+      })
+
+      expect(container.components.get('c0')?.signalIds).toEqual(['s0'])
+      expect(container.watches.has('c0:w0')).toBe(true)
+      expect(container.signals.get('s0')?.value).toBe('first')
+
+      container.rootChildCursor = 0
+
+      withRuntimeContainer(container, () => {
+        renderClientInsertable(jsxDEV(Second, {}, null, false, {}), container)
+      })
+
+      expect(container.components.get('c0')?.symbol).toBe('component-second')
+      expect(container.components.get('c0')?.signalIds).toEqual(['s1'])
+      expect(container.components.get('c0')?.watchCount).toBe(0)
+      expect(container.watches.has('c0:w0')).toBe(false)
+      expect(container.signals.get('s1')?.value).toBe(0)
+    })
+  })
+
+  it('runs onMount cleanup when a component slot changes symbol', async () => {
+    await withFakeNodeGlobal(async () => {
+      const events: string[] = []
+      const First = __eclipsaComponent(
+        () => {
+          onMount(() => {
+            events.push('mount')
+            onCleanup(() => {
+              events.push('cleanup')
+            })
+          })
+          return 'first'
+        },
+        'component-mount-first',
+        () => [],
+      )
+
+      const Second = __eclipsaComponent(
+        () => 'second',
+        'component-mount-second',
+        () => [],
+      )
+
+      const container = createContainer()
+
+      withRuntimeContainer(container, () => {
+        renderClientInsertable(jsxDEV(First, {}, null, false, {}), container)
+      })
+
+      await flushAsync()
+      expect(events).toEqual(['mount'])
+
+      container.rootChildCursor = 0
+      withRuntimeContainer(container, () => {
+        renderClientInsertable(jsxDEV(Second, {}, null, false, {}), container)
+      })
+
+      expect(events).toEqual(['mount', 'cleanup'])
+    })
+  })
+
+  it('keeps external island roots stable across local signal rerenders', async () => {
+    await withFakeNodeGlobal(async () => {
+      const events: string[] = []
+      let label!: { value: string }
+
+      const ExternalBody = setExternalComponentMeta((() => null) as any, {
+        async hydrate(host, props) {
+          events.push(`hydrate:${String((props as { label: string }).label)}`)
+          ;(host as Element).setAttribute(
+            'data-external-label',
+            String((props as { label: string }).label),
+          )
+          return { host }
+        },
+        kind: 'react',
+        async renderToString(props) {
+          return `<div data-external-label="${String((props as { label: string }).label)}"><e-slot-host data-e-slot="children"></e-slot-host></div>`
+        },
+        slots: ['children'],
+        async unmount() {
+          events.push('unmount')
+        },
+        async update(instance, host, props) {
+          events.push(`update:${String((props as { label: string }).label)}`)
+          ;(host as Element).setAttribute(
+            'data-external-label',
+            String((props as { label: string }).label),
+          )
+          return instance
+        },
+      })
+
+      const External = __eclipsaComponent(
+        ExternalBody as any,
+        'external-stable-child',
+        () => [],
+        { children: 1 },
+        { external: { kind: 'react', slots: ['children'] } },
+      )
+
+      const App = __eclipsaComponent(
+        () => {
+          label = useSignal('first')
+          return jsxDEV(
+            External as any,
+            {
+              label: label.value,
+              children: jsxDEV('span', { children: 'slot content' }, null, false, {}),
+            },
+            null,
+            false,
+            {},
+          )
+        },
+        'external-stable-parent',
+        () => [],
+      )
+
+      const container = createContainer()
+      container.imports.set(
+        'external-stable-parent',
+        Promise.resolve({
+          default: () =>
+            jsxDEV(
+              External as any,
+              {
+                label: label.value,
+                children: jsxDEV('span', { children: 'slot content' }, null, false, {}),
+              },
+              null,
+              false,
+              {},
+            ),
+        }),
+      )
+      const doc = container.doc as unknown as FakeDocument
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(App as any, {}, null, false, {}), container),
+      ) as unknown as FakeNode[]
+
+      for (const node of nodes) {
+        ;(doc.body as unknown as FakeElement).appendChild(node)
+      }
+
+      await flushAsync()
+
+      const host = queryFakeElements(
+        doc.body as unknown as FakeNode,
+        'e-island-root[data-e-external-root]',
+      )[0] as unknown as FakeElement
+      expect(host.getAttribute('data-external-label')).toBe('first')
+
+      label.value = 'second'
+      await flushDirtyComponents(container)
+      await flushAsync()
+
+      const nextHost = queryFakeElements(
+        doc.body as unknown as FakeNode,
+        'e-island-root[data-e-external-root]',
+      )[0] as unknown as FakeElement
+
+      expect(nextHost).toBe(host)
+      expect(nextHost.getAttribute('data-external-label')).toBe('second')
+      expect(events).toEqual(['hydrate:first', 'update:second'])
+    })
+  })
+
+  it('preserves external root bodies when a matching client host is still empty', async () => {
+    await withFakeNodeGlobal(async () => {
+      const doc = new FakeDocument()
+      const currentHost = doc.createElement('e-island-root') as unknown as FakeElement
+      currentHost.setAttribute('data-e-external-root', 'true')
+      currentHost.setAttribute('data-e-external-component', 'c-old')
+
+      const slotHost = doc.createElement('e-slot-host') as unknown as FakeElement
+      slotHost.setAttribute('data-e-slot', 'children')
+      slotHost.appendChild(doc.createComment('ec:c:c-old.0:start') as unknown as FakeNode)
+      slotHost.appendChild(doc.createTextNode('live child') as unknown as FakeNode)
+      slotHost.appendChild(doc.createComment('ec:c:c-old.0:end') as unknown as FakeNode)
+      currentHost.appendChild(slotHost as unknown as FakeNode)
+
+      const nextHost = doc.createElement('e-island-root') as unknown as FakeElement
+      nextHost.setAttribute('data-e-external-root', 'true')
+      nextHost.setAttribute('data-e-external-component', 'c-new')
+
+      const preserved = preserveReusableContentInRoots(
+        [currentHost as unknown as Node],
+        [nextHost as unknown as Node],
+      )
+
+      expect(nextHost.childNodes).toEqual([slotHost])
+      expect([...preserved]).toContain('c-old.0')
+    })
+  })
+
+  it('runs external island cleanup when the boundary is removed', async () => {
+    await withFakeNodeGlobal(async () => {
+      const events: string[] = []
+      let visible!: { value: boolean }
+
+      const ExternalBody = setExternalComponentMeta((() => null) as any, {
+        async hydrate(host) {
+          ;(host as Element).setAttribute('data-external-mounted', 'true')
+          events.push('hydrate')
+          return { host }
+        },
+        kind: 'vue',
+        async renderToString() {
+          return '<div data-external-mounted="true"></div>'
+        },
+        slots: ['children'],
+        async unmount() {
+          events.push('unmount')
+        },
+        async update(instance) {
+          return instance
+        },
+      })
+
+      const External = __eclipsaComponent(
+        ExternalBody as any,
+        'external-cleanup-child',
+        () => [],
+        { children: 1 },
+        { external: { kind: 'vue', slots: ['children'] } },
+      )
+
+      const App = __eclipsaComponent(
+        () => {
+          visible = useSignal(true)
+          return visible.value
+            ? jsxDEV(External as any, { children: null }, null, false, {})
+            : jsxDEV('div', { children: 'fallback' }, null, false, {})
+        },
+        'external-cleanup-parent',
+        () => [],
+      )
+
+      const container = createContainer()
+      container.imports.set(
+        'external-cleanup-parent',
+        Promise.resolve({
+          default: () =>
+            visible.value
+              ? jsxDEV(External as any, { children: null }, null, false, {})
+              : jsxDEV('div', { children: 'fallback' }, null, false, {}),
+        }),
+      )
+      const doc = container.doc as unknown as FakeDocument
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(App as any, {}, null, false, {}), container),
+      ) as unknown as FakeNode[]
+
+      for (const node of nodes) {
+        ;(doc.body as unknown as FakeElement).appendChild(node)
+      }
+
+      await flushAsync()
+      expect(events).toEqual(['hydrate'])
+
+      visible.value = false
+      await flushDirtyComponents(container)
+      await flushAsync()
+
+      expect(events).toEqual(['hydrate', 'unmount'])
+      expect(
+        queryFakeElements(doc.body as unknown as FakeNode, 'e-island-root[data-e-external-root]'),
+      ).toHaveLength(0)
+      expect((doc.body as unknown as FakeElement).textContent).toContain('fallback')
+    })
+  })
+
+  it('keeps signal subscriptions after resumable signal rerenders', async () => {
+    await withFakeNodeGlobal(async () => {
+      let count!: { value: number }
+
+      const CounterBody = () => {
+        count = useSignal(0)
+        return jsxDEV('button', { children: `Count ${count.value}` }, null, false, {})
+      }
+
+      const Counter = __eclipsaComponent(CounterBody, 'component-counter', () => [])
+
+      const container = createContainer()
+      container.imports.set(
+        'component-counter',
+        Promise.resolve({
+          default: () => CounterBody(),
+        }),
+      )
+      const parent = new FakeElement('div')
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(Counter, {}, null, false, {}), container),
+      ) as unknown as FakeNode[]
+
+      for (const node of nodes) {
+        parent.appendChild(node)
+      }
+
+      const getButton = () =>
+        parent.childNodes.find((node) => node instanceof FakeElement) as FakeElement | undefined
+
+      const initialButton = getButton()
+
+      expect(initialButton?.textContent).toBe('Count 0')
+      expect(container.signals.get('s0')?.subscribers.has('c0')).toBe(true)
+
+      count.value = 1
+      await flushDirtyComponents(container)
+      expect(getButton()).toBe(initialButton)
+      expect(getButton()?.textContent).toBe('Count 1')
+      expect(container.signals.get('s0')?.subscribers.has('c0')).toBe(true)
+
+      count.value = 2
+      await flushDirtyComponents(container)
+      expect(getButton()).toBe(initialButton)
+      expect(getButton()?.textContent).toBe('Count 2')
+      expect(container.signals.get('s0')?.subscribers.has('c0')).toBe(true)
+    })
+  })
+
+  it('wraps generated __scope reference failures with an explicit resumable runtime error', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const parent = new FakeElement('div')
+      const start = container.doc!.createComment('ec:c:c0:start') as unknown as FakeNode
+      const end = container.doc!.createComment('ec:c:c0:end') as unknown as FakeNode
+
+      parent.appendChild(start)
+      parent.appendChild(end)
+
+      container.scopes.set('sc0', [])
+      container.components.set('c0', {
+        active: false,
+        didMount: false,
+        end: end as unknown as Comment,
+        id: 'c0',
+        mountCleanupSlots: [],
+        parentId: '$root',
+        projectionSlots: null,
+        props: {},
+        rawProps: null,
+        renderEffectCleanupSlot: createCleanupSlot(),
+        scopeId: 'sc0',
+        signalIds: [],
+        start: start as unknown as Comment,
+        symbol: 'broken-symbol',
+        suspensePromise: null,
+        visibleCount: 0,
+        watchCount: 0,
+      })
+      container.imports.set(
+        'broken-symbol',
+        Promise.resolve({
+          default: () => {
+            throw new ReferenceError('__scope is not defined')
+          },
+        }),
+      )
+      container.dirty.add('c0')
+
+      const error = await flushDirtyComponents(container).catch((error) => error)
+
+      expect(error).toBeInstanceOf(Error)
+      expect((error as Error).name).toBe('EclipsaRuntimeError')
+      expect((error as Error).message).toMatch(
+        /Eclipsa runtime failed while rerendering component "c0", symbol "broken-symbol"\./,
+      )
+      expect((error as Error).message).toMatch(
+        /same-file helper was transformed incorrectly during symbol compilation/i,
+      )
+    })
+  })
+
+  it('patches projection-slot metadata components when the slot value is plain text', async () => {
+    await withFakeNodeGlobal(async () => {
+      let open!: { value: boolean }
+
+      const DirBody = (props: { title?: string }) => {
+        open = useSignal(true)
+        return jsxDEV(
+          'div',
+          {
+            children: [
+              jsxDEV('button', { children: props.title ?? '' }, null, false, {}),
+              jsxDEV(
+                'div',
+                {
+                  style: open.value
+                    ? 'max-height: 64px; opacity: 1'
+                    : 'max-height: 0px; opacity: 0',
+                },
+                null,
+                false,
+                {},
+              ),
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Dir = __eclipsaComponent(DirBody, 'component-dir-plain-title', () => [], { title: 1 })
+
+      const container = createContainer()
+      container.imports.set(
+        'component-dir-plain-title',
+        Promise.resolve({
+          default: (_scope: unknown[], propsOrArg?: unknown) =>
+            DirBody((propsOrArg as { title?: string } | undefined) ?? {}),
+        }),
+      )
+
+      const parent = new FakeElement('div')
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(
+          jsxDEV(Dir as any, { title: 'Materials' }, null, false, {}),
+          container,
+        ),
+      ) as unknown as FakeNode[]
+
+      for (const node of nodes) {
+        parent.appendChild(node)
+      }
+
+      const getPanel = () => {
+        const root = parent.childNodes.find((node) => node instanceof FakeElement) as
+          | FakeElement
+          | undefined
+        return root?.childNodes[1] as FakeElement | undefined
+      }
+      const initialPanel = getPanel()
+
+      expect(initialPanel?.getAttribute('style')).toBe('max-height: 64px; opacity: 1')
+
+      open.value = false
+      await flushDirtyComponents(container)
+
+      expect(getPanel()).toBe(initialPanel)
+      expect(getPanel()?.getAttribute('style')).toBe('max-height: 0px; opacity: 0')
+      expect(container.signals.get('s0')?.subscribers.has('c0')).toBe(true)
+    })
+  })
+
+  it('restores local signal effects for resumed components before navigation', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const doc = container.doc as unknown as FakeDocument
+      const parent = new FakeElement('div')
+      const start = container.doc!.createComment('ec:c:c0:start') as unknown as FakeNode
+      const initialPanel = new FakeElement('div')
+      const end = container.doc!.createComment('ec:c:c0:end') as unknown as FakeNode
+      const originalDocument = globalThis.document
+
+      parent.appendChild(start)
+      parent.appendChild(initialPanel)
+      parent.appendChild(end)
+
+      const open = createDetachedRuntimeSignal(container, 's0', true)
+      const signalRecord = container.signals.get('s0')
+      if (!signalRecord) {
+        throw new Error('Missing signal record')
+      }
+
+      container.components.set('c0', {
+        active: false,
+        didMount: false,
+        end: end as unknown as Comment,
+        id: 'c0',
+        mountCleanupSlots: [],
+        parentId: '$root',
+        props: {},
+        projectionSlots: null,
+        rawProps: null,
+        renderEffectCleanupSlot: createCleanupSlot(),
+        reuseExistingDomOnActivate: true,
+        reuseProjectionSlotDomOnActivate: false,
+        scopeId: 'sc0',
+        signalIds: ['s0'],
+        start: start as unknown as Comment,
+        symbol: 'component-local-signal',
+        suspensePromise: null,
+        visibleCount: 0,
+        watchCount: 0,
+      })
+      container.scopes.set('sc0', [])
+      container.imports.set(
+        'component-local-signal',
+        Promise.resolve({
+          default: () => {
+            const panel = doc.createElement('div')
+            const visible = useSignal(true)
+            attr(panel, 'style', () => ({
+              opacity: visible.value ? '1' : '0',
+            }))
+            return panel
+          },
+        }),
+      )
+
+      ;(globalThis as typeof globalThis & { document: Document }).document =
+        container.doc as Document
+      try {
+        expect(signalRecord.effects.size).toBe(0)
+
+        await restoreResumedLocalSignalEffects(container)
+
+        const livePanel = parent.childNodes[1] as FakeElement | undefined
+        expect(livePanel).toBeInstanceOf(FakeElement)
+        expect(livePanel).not.toBe(initialPanel)
+        expect(livePanel?.getAttribute('style')).toBe('opacity: 1')
+        expect(signalRecord.effects.size).toBe(1)
+
+        open.value = false
+
+        expect(container.dirty.size).toBe(0)
+        expect(parent.childNodes[1]).toBe(livePanel)
+        expect(livePanel?.getAttribute('style')).toBe('opacity: 0')
+      } finally {
+        globalThis.document = originalDocument
+      }
+    })
+  })
+
+  it('rerenders resumed components when a local signal is read in render and also drives an effect', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const doc = container.doc as unknown as FakeDocument
+      const parent = doc.body as unknown as FakeElement
+      const start = doc.createComment('ec:c:c0:start') as unknown as FakeNode
+      const initialPanel = new FakeElement('div')
+      const end = doc.createComment('ec:c:c0:end') as unknown as FakeNode
+      const originalDocument = globalThis.document
+
+      parent.appendChild(start)
+      parent.appendChild(initialPanel)
+      parent.appendChild(end)
+
+      createDetachedRuntimeSignal(container, 's0', '')
+
+      container.components.set('c0', {
+        active: false,
+        didMount: false,
+        end: end as unknown as Comment,
+        id: 'c0',
+        mountCleanupSlots: [],
+        parentId: '$root',
+        props: {},
+        projectionSlots: null,
+        rawProps: null,
+        renderEffectCleanupSlot: createCleanupSlot(),
+        reuseExistingDomOnActivate: true,
+        reuseProjectionSlotDomOnActivate: false,
+        scopeId: 'sc0',
+        signalIds: ['s0'],
+        start: start as unknown as Comment,
+        symbol: 'component-local-bind-rerender',
+        suspensePromise: null,
+        visibleCount: 0,
+        watchCount: 0,
+      })
+      container.scopes.set('sc0', [])
+      container.imports.set(
+        'component-local-bind-rerender',
+        Promise.resolve({
+          default: () => {
+            const query = useSignal('')
+            return jsxDEV(
+              'div',
+              {
+                children: [
+                  jsxDEV('input', { 'bind:value': query, type: 'text' }, null, false, {}),
+                  jsxDEV('span', { children: query.value || 'empty' }, null, false, {}),
+                ],
+              },
+              null,
+              false,
+              {},
+            )
+          },
+        }),
+      )
+
+      const findFirst = (tagName: string) => {
+        const visit = (node: FakeNode): FakeElement | null => {
+          if (node instanceof FakeElement && node.tagName === tagName) {
+            return node
+          }
+          for (const child of node.childNodes) {
+            const found = visit(child)
+            if (found) {
+              return found
+            }
+          }
+          return null
+        }
+        return visit(parent as unknown as FakeNode)
+      }
+
+      ;(globalThis as typeof globalThis & { document: Document }).document =
+        container.doc as Document
+      try {
+        await restoreResumedLocalSignalEffects(container)
+
+        const input = findFirst('input')
+        const span = findFirst('span')
+        expect(input).toBeTruthy()
+        expect(span?.textContent).toBe('empty')
+
+        if (!input) {
+          throw new Error('Expected rendered input.')
+        }
+
+        input.value = 'ov'
+        expect(syncBoundElementSignal(container, input as unknown as EventTarget)).toBe(true)
+
+        await flushAsync()
+        await new Promise((resolve) => setTimeout(resolve, 0))
+
+        const nextSpan = findFirst('span')
+        expect(nextSpan?.textContent).toBe('ov')
+      } finally {
+        globalThis.document = originalDocument
+      }
+    })
+  })
+
+  it('runs resumed watch callbacks from restored subscriptions without activating the component', async () => {
+    await withFakeNodeGlobal(async () => {
+      const OriginalDocument = globalThis.Document
+      const originalWindow = globalThis.window
+      const doc = new FakeDocument() as unknown as Document
+      ;(doc as unknown as { location: Location }).location = {
+        hash: '',
+        href: 'http://example.com/',
+        origin: 'http://example.com',
+        pathname: '/',
+        search: '',
+      } as Location
+      const body = (doc as unknown as FakeDocument).body as unknown as FakeElement
+      body.appendChild(
+        (doc as unknown as FakeDocument).createComment('ec:c:c0:start') as unknown as FakeNode,
+      )
+      body.appendChild(
+        (doc as unknown as FakeDocument).createComment('ec:c:c0:end') as unknown as FakeNode,
+      )
+
+      const events: string[] = []
+      ;(globalThis as typeof globalThis & { Document: typeof Document }).Document =
+        FakeDocument as unknown as typeof Document
+      ;(globalThis as { window: Window & typeof globalThis }).window = (
+        doc as unknown as FakeDocument
+      ).defaultView as unknown as Window & typeof globalThis
+      try {
+        const container = createResumeContainer(doc, {
+          actions: {},
+          components: {
+            c0: {
+              props: {
+                __eclipsa_type: 'object',
+                entries: [],
+              },
+              scope: 'sc0',
+              signalIds: ['s0'],
+              symbol: 'component-watch-resume',
+              visibleCount: 0,
+              watchCount: 1,
+            },
+          },
+          loaders: {},
+          scopes: {
+            sc0: [],
+            sc1: [{ __eclipsa_type: 'ref', kind: 'signal', token: 's0' }],
+          },
+          signals: {
+            s0: 0,
+            '$router:isNavigating': false,
+            '$router:path': '/',
+          },
+          subscriptions: {
+            s0: [],
+            '$router:isNavigating': [],
+            '$router:path': [],
+          },
+          symbols: {},
+          visibles: {},
+          watches: {
+            'c0:w0': {
+              componentId: 'c0',
+              mode: 'explicit',
+              scope: 'sc1',
+              signals: ['s0'],
+              symbol: 'watch-resume-symbol',
+            },
+          },
+        })
+
+        container.imports.set(
+          'watch-resume-symbol',
+          Promise.resolve({
+            default: (scope: unknown[], propsOrArg?: unknown) => {
+              const [count] = scope as [{ value: number }]
+              const mode = propsOrArg as 'run' | 'track' | undefined
+              if (mode === 'track') {
+                void count.value
+                return
+              }
+              events.push(`run:${count.value}`)
+            },
+          }),
+        )
+
+        container.signals.get('s0')!.handle.value = 1
+        await flushAsync()
+        await flushAsync()
+
+        expect(events).toEqual(['run:1'])
+        expect(container.components.get('c0')?.active).toBe(false)
+      } finally {
+        globalThis.Document = OriginalDocument
+        if (originalWindow === undefined) {
+          delete (globalThis as { window?: Window }).window
+        } else {
+          globalThis.window = originalWindow
+        }
+      }
+    })
+  })
+
+  it('does not rerun resumed watches when restoring local signal effects on the client', async () => {
+    await withFakeNodeGlobal(async () => {
+      const OriginalDocument = globalThis.Document
+      const originalWindow = globalThis.window
+      const doc = new FakeDocument() as unknown as Document
+      ;(doc as unknown as { location: Location }).location = {
+        hash: '',
+        href: 'http://example.com/',
+        origin: 'http://example.com',
+        pathname: '/',
+        search: '',
+      } as Location
+      const body = (doc as unknown as FakeDocument).body as unknown as FakeElement
+      body.appendChild(
+        (doc as unknown as FakeDocument).createComment('ec:c:c0:start') as unknown as FakeNode,
+      )
+      body.appendChild(new FakeElement('div'))
+      body.appendChild(
+        (doc as unknown as FakeDocument).createComment('ec:c:c0:end') as unknown as FakeNode,
+      )
+
+      const events: string[] = []
+      const originalDocument = globalThis.document
+      ;(globalThis as typeof globalThis & { Document: typeof Document }).Document =
+        FakeDocument as unknown as typeof Document
+      ;(globalThis as { window: Window & typeof globalThis }).window = (
+        doc as unknown as FakeDocument
+      ).defaultView as unknown as Window & typeof globalThis
+      try {
+        const container = createResumeContainer(doc, {
+          actions: {},
+          components: {
+            c0: {
+              props: {
+                __eclipsa_type: 'object',
+                entries: [],
+              },
+              scope: 'sc0',
+              signalIds: ['s0'],
+              symbol: 'component-watch-resume',
+              visibleCount: 0,
+              watchCount: 1,
+            },
+          },
+          loaders: {},
+          scopes: {
+            sc0: [],
+            sc1: [{ __eclipsa_type: 'ref', kind: 'signal', token: 's0' }],
+          },
+          signals: {
+            s0: 0,
+            '$router:isNavigating': false,
+            '$router:path': '/',
+          },
+          subscriptions: {
+            s0: [],
+            '$router:isNavigating': [],
+            '$router:path': [],
+          },
+          symbols: {},
+          visibles: {},
+          watches: {
+            'c0:w0': {
+              componentId: 'c0',
+              mode: 'explicit',
+              scope: 'sc1',
+              signals: ['s0'],
+              symbol: 'watch-resume-symbol',
+            },
+          },
+        })
+
+        container.imports.set(
+          'component-watch-resume',
+          Promise.resolve({
+            default: () => {
+              const count = useSignal(0)
+              useWatch(
+                __eclipsaWatch(
+                  'watch-resume-symbol',
+                  () => {
+                    events.push(`run:${count.value}`)
+                  },
+                  () => [count],
+                ),
+                [count],
+              )
+              return jsxDEV('div', { children: count.value }, null, false, {})
+            },
+          }),
+        )
+
+        ;(globalThis as typeof globalThis & { document: Document }).document = doc
+        await restoreResumedLocalSignalEffects(container)
+
+        expect(events).toEqual([])
+
+        container.signals.get('s0')!.handle.value = 1
+        expect(events).toEqual(['run:1'])
+      } finally {
+        globalThis.Document = OriginalDocument
+        globalThis.document = originalDocument
+        if (originalWindow === undefined) {
+          delete (globalThis as { window?: Window }).window
+        } else {
+          globalThis.window = originalWindow
+        }
+      }
+    })
+  })
+
+  it('patches inserted nodes in place so animated nodes keep identity', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const host = new FakeElement('div')
+      const marker = new FakeComment('marker')
+      host.appendChild(marker)
+      const open = createDetachedRuntimeSignal(container, 's0', true)
+      const renderPanel = (() =>
+        jsxDEV(
+          'div',
+          {
+            children: open.value
+              ? jsxDEV('span', { children: 'open' }, null, false, {})
+              : jsxDEV('strong', { children: 'closed' }, null, false, {}),
+            style: open.value ? 'opacity: 1; max-height: 64px' : 'opacity: 0; max-height: 0px',
+          },
+          null,
+          false,
+          {},
+        )) as unknown as () => Node
+
+      withRuntimeContainer(container, () => {
+        insert(renderPanel, host as unknown as Node, marker as unknown as Node)
+      })
+
+      const panel = host.childNodes[0] as FakeElement | undefined
+      expect(panel).toBeInstanceOf(FakeElement)
+      expect(panel?.getAttribute('style')).toBe('opacity: 1; max-height: 64px')
+      expect((panel?.childNodes[0] as FakeElement | undefined)?.tagName).toBe('span')
+
+      ;(panel as FakeElement & { __debugMarker?: string }).__debugMarker = 'live'
+      open.value = false
+
+      const nextPanel = host.childNodes[0] as FakeElement | undefined
+      expect(nextPanel).toBe(panel)
+      expect((nextPanel as FakeElement & { __debugMarker?: string }).__debugMarker).toBe('live')
+      expect(nextPanel?.getAttribute('style')).toBe('opacity: 0; max-height: 0px')
+      expect((nextPanel?.childNodes[0] as FakeElement | undefined)?.tagName).toBe('strong')
+    })
+  })
+
+  it('keeps inserted panel identity when insert rerenders managed child boundaries', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const open = createDetachedRuntimeSignal(container, 's0', true)
+
+      const ItemBody = (props: { href: string; label: string }) =>
+        jsxDEV('a', { href: props.href, children: props.label }, null, false, {})
+
+      const Item = __eclipsaComponent(ItemBody, 'component-insert-item', () => [])
+
+      const ParentBody = () => {
+        const root = document.createElement('div')
+        const marker = document.createComment('insert-marker')
+        root.appendChild(marker)
+        insert(
+          (() =>
+            jsxDEV(
+              'div',
+              {
+                class: 'overflow-hidden',
+                children: [
+                  jsxDEV(Item as any, { href: '/a', label: 'A' }, null, false, {}),
+                  jsxDEV(Item as any, { href: '/b', label: 'B' }, null, false, {}),
+                ],
+                style: open.value ? 'opacity: 1; max-height: 64px' : 'opacity: 0; max-height: 0px',
+              },
+              null,
+              false,
+              {},
+            )) as Parameters<typeof insert>[0],
+          root,
+          marker,
+        )
+        return root as unknown as JSX.Element
+      }
+
+      const Parent = __eclipsaComponent(ParentBody, 'component-insert-parent', () => [])
+
+      const host = new FakeElement('div')
+      const originalDocument = globalThis.document
+      let nodes!: FakeNode[]
+      ;(globalThis as typeof globalThis & { document: Document }).document =
+        container.doc as Document
+      try {
+        nodes = withRuntimeContainer(container, () =>
+          renderClientInsertable(jsxDEV(Parent as any, {}, null, false, {}), container),
+        ) as unknown as FakeNode[]
+      } finally {
+        globalThis.document = originalDocument
+      }
+
+      for (const node of nodes) {
+        host.appendChild(node)
+      }
+
+      const outer = host.childNodes[1] as FakeElement | undefined
+      const panel = outer?.childNodes[0] as FakeElement | undefined
+      expect(panel).toBeInstanceOf(FakeElement)
+      expect(panel?.getAttribute('style')).toBe('opacity: 1; max-height: 64px')
+      expect(collectComments(panel?.childNodes ?? [])).toEqual([
+        'ec:c:c0.$iinsert-marker.0:start',
+        'ec:c:c0.$iinsert-marker.0:end',
+        'ec:c:c0.$iinsert-marker.1:start',
+        'ec:c:c0.$iinsert-marker.1:end',
+      ])
+
+      ;(panel as FakeElement & { __debugMarker?: string }).__debugMarker = 'live'
+      open.value = false
+
+      const nextOuter = host.childNodes[1] as FakeElement | undefined
+      const nextPanel = nextOuter?.childNodes[0] as FakeElement | undefined
+      expect(nextPanel).toBe(panel)
+      expect((nextPanel as FakeElement & { __debugMarker?: string }).__debugMarker).toBe('live')
+      expect(nextPanel?.getAttribute('style')).toBe('opacity: 0; max-height: 0px')
+      expect(collectComments(nextPanel?.childNodes ?? [])).toEqual([
+        'ec:c:c0.$iinsert-marker.0:start',
+        'ec:c:c0.$iinsert-marker.0:end',
+        'ec:c:c0.$iinsert-marker.1:start',
+        'ec:c:c0.$iinsert-marker.1:end',
+      ])
+    })
+  })
+
+  it('keeps insert effects targeting the live parent after nodes move during an in-place patch', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const doc = container.doc as unknown as FakeDocument
+      const host = new FakeElement('div')
+      host.ownerDocument = doc
+      const originalInsertBefore = host.insertBefore.bind(host)
+      host.insertBefore = ((node: FakeNode, referenceNode: FakeNode | null) => {
+        if (referenceNode && referenceNode.parentNode !== host) {
+          throw new Error('insertBefore reference node must be a child of the target parent')
+        }
+        return originalInsertBefore(node, referenceNode)
+      }) as typeof host.insertBefore
+      const detachedParent = new FakeElement('div')
+      detachedParent.ownerDocument = doc
+      const marker = new FakeComment('marker')
+      detachedParent.appendChild(marker)
+      const count = createDetachedRuntimeSignal(container, 's0', 0)
+
+      const Child = __eclipsaComponent(
+        () => jsxDEV('span', { children: String(count.value) }, null, false, {}),
+        'insert-live-parent-child',
+        () => [],
+      )
+
+      container.imports.set(
+        'insert-live-parent-child',
+        Promise.resolve({
+          default: () => jsxDEV('span', { children: String(count.value) }, null, false, {}),
+        }),
+      )
+
+      withRuntimeContainer(container, () => {
+        insert(
+          asInsertable(jsxDEV(Child as any, {}, null, false, {})),
+          detachedParent as unknown as Node,
+          marker as unknown as Node,
+        )
+      })
+
+      for (const node of Array.from(detachedParent.childNodes)) {
+        host.appendChild(node)
+      }
+
+      expect(host.textContent).toContain('0')
+
+      count.value = 1
+      await flushDirtyComponents(container)
+
+      expect(host.textContent).toContain('1')
+      expect(detachedParent.textContent).not.toContain('1')
+    })
+  })
+
+  it('keeps detached insert renders off the live DOM when the current render is not reusing existing nodes', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+
+      const originalDocument = globalThis.document
+      ;(globalThis as typeof globalThis & { document: Document }).document =
+        container.doc as Document
+      try {
+        const doc = container.doc as unknown as FakeDocument
+        const liveParent = new FakeElement('div')
+        liveParent.ownerDocument = doc
+        const liveText = new FakeText('live')
+        liveText.ownerDocument = doc
+        const liveMarker = new FakeComment('ec:i:shared-marker')
+        liveMarker.ownerDocument = doc
+        liveParent.appendChild(liveText)
+        liveParent.appendChild(liveMarker)
+        ;(doc.body as unknown as FakeElement).appendChild(liveParent)
+
+        const DetachedBody = () => {
+          const root = document.createElement('div')
+          const marker = document.createComment('ec:i:shared-marker')
+          root.appendChild(marker)
+          insert('detached', root as unknown as Node, marker as unknown as Node)
+          return root as unknown as JSX.Element
+        }
+
+        const Detached = __eclipsaComponent(DetachedBody, 'detached-insert-target', () => [])
+
+        const rendered = withRuntimeContainer(container, () =>
+          renderClientInsertable(jsxDEV(Detached as any, {}, null, false, {}), container),
+        ) as unknown as FakeNode[]
+
+        expect(liveParent.textContent).toBe('liveec:i:shared-marker')
+        const detachedRoot = rendered[1] as FakeElement | undefined
+        expect(detachedRoot).toBeInstanceOf(FakeElement)
+        expect(detachedRoot?.textContent).toContain('detached')
+      } finally {
+        globalThis.document = originalDocument
+      }
+    })
+  })
+
+  it('reconnects existing owner-insert ranges when a boundary activates over resumed DOM', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+
+      const PanelBody = () =>
+        jsxDEV('div', { 'data-panel': '', children: 'panel' }, null, false, {})
+
+      const Panel = __eclipsaComponent(PanelBody, 'resume-owner-insert-panel', () => [])
+
+      const SearchDialogBody = () => {
+        const host = document.createElement('div')
+        const marker = document.createComment('ec:i:resume-owner-range')
+        host.appendChild(marker)
+        insert(
+          asInsertable(jsxDEV(Panel as any, {}, null, false, {})),
+          host as unknown as Node,
+          marker,
+        )
+        return host as unknown as JSX.Element
+      }
+
+      const SearchDialog = __eclipsaComponent(
+        SearchDialogBody,
+        'resume-owner-insert-search-dialog',
+        () => [],
+      )
+
+      container.imports.set(
+        'resume-owner-insert-search-dialog',
+        Promise.resolve({
+          default: () => SearchDialogBody(),
+        }),
+      )
+      container.imports.set(
+        'resume-owner-insert-panel',
+        Promise.resolve({
+          default: () => PanelBody(),
+        }),
+      )
+
+      const originalDocument = globalThis.document
+      ;(globalThis as typeof globalThis & { document: Document }).document =
+        container.doc as Document
+      try {
+        const host = new FakeElement('div')
+        const nodes = withRuntimeContainer(container, () =>
+          renderClientInsertable(jsxDEV(SearchDialog as any, {}, null, false, {}), container),
+        ) as unknown as FakeNode[]
+
+        for (const node of nodes) {
+          host.appendChild(node)
+        }
+
+        expect(queryFakeElements(host, 'div[data-panel]')).toHaveLength(1)
+
+        const boundary = [...container.components.values()].find(
+          (component) => component.symbol === 'resume-owner-insert-search-dialog',
+        )
+        expect(boundary).toBeTruthy()
+
+        boundary!.active = false
+        boundary!.reuseExistingDomOnActivate = true
+        boundary!.reuseProjectionSlotDomOnActivate = false
+        container.dirty.add(boundary!.id)
+
+        await flushDirtyComponents(container)
+
+        expect(queryFakeElements(host, 'div[data-panel]')).toHaveLength(1)
+      } finally {
+        globalThis.document = originalDocument
+      }
+    })
+  })
+
+  it('does not duplicate nested managed children when a resumed parent boundary is reactivated', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+
+      const ChildBody = () =>
+        jsxDEV('div', { 'data-panel': '', children: 'panel' }, null, false, {})
+      const Child = __eclipsaComponent(ChildBody, 'resume-nested-child', () => [])
+
+      const ParentBody = () =>
+        jsxDEV(
+          'div',
+          {
+            children: jsxDEV(
+              'div',
+              {
+                class: 'mx-auto',
+                children: jsxDEV(Child as any, {}, null, false, {}),
+              },
+              null,
+              false,
+              {},
+            ),
+          },
+          null,
+          false,
+          {},
+        )
+
+      const Parent = __eclipsaComponent(ParentBody, 'resume-nested-parent', () => [])
+
+      container.imports.set(
+        'resume-nested-parent',
+        Promise.resolve({
+          default: () => ParentBody(),
+        }),
+      )
+      container.imports.set(
+        'resume-nested-child',
+        Promise.resolve({
+          default: () => ChildBody(),
+        }),
+      )
+
+      const originalDocument = globalThis.document
+      ;(globalThis as typeof globalThis & { document: Document }).document =
+        container.doc as Document
+      try {
+        const host = new FakeElement('div')
+        const nodes = withRuntimeContainer(container, () =>
+          renderClientInsertable(jsxDEV(Parent as any, {}, null, false, {}), container),
+        ) as unknown as FakeNode[]
+
+        for (const node of nodes) {
+          host.appendChild(node)
+        }
+
+        expect(queryFakeElements(host, 'div[data-panel]')).toHaveLength(1)
+
+        for (const component of container.components.values()) {
+          component.active = false
+          component.reuseExistingDomOnActivate = true
+          component.reuseProjectionSlotDomOnActivate = false
+        }
+
+        const parentBoundary = [...container.components.values()].find(
+          (component) => component.symbol === 'resume-nested-parent',
+        )
+        expect(parentBoundary).toBeTruthy()
+        container.dirty.add(parentBoundary!.id)
+
+        await flushDirtyComponents(container)
+
+        expect(queryFakeElements(host, 'div[data-panel]')).toHaveLength(1)
+      } finally {
+        globalThis.document = originalDocument
+      }
+    })
+  })
+
+  it('keeps inserted child event scopes live across a fresh route-style root render', async () => {
+    await withFakeNodeGlobal(async () => {
+      class TargetedClickEvent extends Event {
+        constructor(private readonly eventTarget: EventTarget | null) {
+          super('click')
+        }
+
+        override get target() {
+          return this.eventTarget
+        }
+      }
+
+      const container = createContainer()
+
+      const SearchDialogBody = () => {
+        const open = useSignal(false)
+        return jsxDEV(
+          'button',
+          {
+            'aria-controls': 'docs-search-dialog',
+            children: open.value ? 'open' : 'closed',
+            onClick: __eclipsaEvent('click', 'fresh-route-search-open', () => [open]),
+            type: 'button',
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const SearchDialog = __eclipsaComponent(
+        SearchDialogBody,
+        'fresh-route-search-dialog',
+        () => [],
+      )
+
+      const LayoutBody = () => {
+        const nav = document.createElement('nav')
+        const marker = document.createComment('ec:i:search-trigger')
+        nav.appendChild(marker)
+        insert(asInsertable(jsxDEV(SearchDialog as any, {}, null, false, {})), nav, marker)
+        return nav as unknown as JSX.Element
+      }
+
+      const Layout = __eclipsaComponent(LayoutBody, 'fresh-route-layout', () => [])
+      const RouteRootBody = () => jsxDEV(Layout as any, {}, null, false, {})
+      const RouteRoot = __eclipsaComponent(RouteRootBody, 'fresh-route-root', () => [])
+
+      container.imports.set(
+        'fresh-route-root',
+        Promise.resolve({
+          default: () => RouteRootBody(),
+        }),
+      )
+      container.imports.set(
+        'fresh-route-layout',
+        Promise.resolve({
+          default: () => LayoutBody(),
+        }),
+      )
+      container.imports.set(
+        'fresh-route-search-dialog',
+        Promise.resolve({
+          default: () => SearchDialogBody(),
+        }),
+      )
+      container.imports.set(
+        'fresh-route-search-open',
+        Promise.resolve({
+          default: (scope: unknown[]) => {
+            const [open] = scope as [{ value: boolean }]
+            open.value = true
+          },
+        }),
+      )
+
+      const originalDocument = globalThis.document
+      ;(globalThis as typeof globalThis & { document: Document }).document =
+        container.doc as Document
+      try {
+        const host = new FakeElement('div')
+        const nodes = withRuntimeContainer(container, () =>
+          renderClientInsertable(jsxDEV(RouteRoot as any, {}, null, false, {}), container),
+        ) as unknown as FakeNode[]
+
+        for (const node of nodes) {
+          host.appendChild(node)
+        }
+
+        const button = queryFakeElements(host, 'button[aria-controls]')[0] as unknown as
+          | FakeElement
+          | undefined
+        expect(button).toBeTruthy()
+        expect(button?.textContent).toBe('closed')
+
+        await dispatchDocumentEvent(
+          container,
+          new TargetedClickEvent(button as unknown as EventTarget),
+        )
+        await flushDirtyComponents(container)
+
+        expect(button?.textContent).toBe('open')
+      } finally {
+        globalThis.document = originalDocument
+      }
+    })
+  })
+
+  it('preloads projection slot render refs before rerendering resumable children', async () => {
+    await withFakeNodeGlobal(async () => {
+      let open!: { value: boolean }
+
+      const PageLinkBody = (props: { label: string }) =>
+        jsxDEV('span', { children: props.label }, null, false, {})
+
+      const PageLink = __eclipsaComponent(PageLinkBody, 'component-page-link', () => [])
+
+      const DirBody = (props: { children?: unknown }) => {
+        open = useSignal(true)
+        return jsxDEV(
+          'section',
+          {
+            children: [
+              jsxDEV('button', { children: open.value ? 'open' : 'closed' }, null, false, {}),
+              jsxDEV('div', { children: props.children }, null, false, {}),
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Dir = __eclipsaComponent(DirBody, 'component-dir', () => [], { children: 1 })
+
+      const container = createContainer()
+      container.imports.set(
+        'component-dir',
+        Promise.resolve({
+          default: (_scope: unknown[], propsOrArg?: unknown) =>
+            DirBody((propsOrArg as { children?: unknown } | undefined) ?? {}),
+        }),
+      )
+      container.imports.set(
+        'component-page-link',
+        Promise.resolve({
+          default: (_scope: unknown[], propsOrArg?: unknown) =>
+            PageLinkBody(propsOrArg as { label: string }),
+        }),
+      )
+
+      const parent = new FakeElement('div')
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(
+          jsxDEV(
+            Dir as any,
+            {
+              children: jsxDEV(PageLink as any, { label: 'Overview' }, null, false, {}),
+            },
+            null,
+            false,
+            {},
+          ),
+          container,
+        ),
+      ) as unknown as FakeNode[]
+
+      for (const node of nodes) {
+        parent.appendChild(node)
+      }
+
+      expect(parent.textContent).toContain('open')
+      expect(parent.textContent).toContain('Overview')
+
+      open.value = false
+      await flushDirtyComponents(container)
+      expect(parent.textContent).toContain('closed')
+      expect(parent.textContent).toContain('Overview')
+
+      open.value = true
+      await flushDirtyComponents(container)
+      expect(parent.textContent).toContain('open')
+      expect(parent.textContent).toContain('Overview')
+    })
+  })
+
+  it('runs watch cleanup when a resumable watch is torn down', () => {
+    withFakeNodeGlobal(() => {
+      let count!: { value: number }
+      const events: string[] = []
+
+      const First = __eclipsaComponent(
+        () => {
+          count = useSignal(0)
+          useWatch(
+            __eclipsaWatch(
+              'watch-cleanup',
+              () => {
+                const snapshot = count.value
+                events.push(`run:${snapshot}`)
+                onCleanup(() => {
+                  events.push(`cleanup:${snapshot}`)
+                })
+              },
+              () => [count],
+            ),
+          )
+          return count.value
+        },
+        'component-watch-first',
+        () => [],
+      )
+
+      const Second = __eclipsaComponent(
+        () => 'done',
+        'component-watch-second',
+        () => [],
+      )
+
+      const container = createContainer()
+
+      withRuntimeContainer(container, () => {
+        renderClientInsertable(jsxDEV(First, {}, null, false, {}), container)
+      })
+
+      count.value = 1
+      expect(events).toEqual(['run:0', 'cleanup:0', 'run:1'])
+
+      container.rootChildCursor = 0
+      withRuntimeContainer(container, () => {
+        renderClientInsertable(jsxDEV(Second, {}, null, false, {}), container)
+      })
+
+      expect(events).toEqual(['run:0', 'cleanup:0', 'run:1', 'cleanup:1'])
+    })
+  })
+
+  it('resolves resumed route slots from the page route cache entry during client rerenders', () => {
+    withFakeNodeGlobal(() => {
+      const container = createContainer()
+      const page = () => jsxDEV('p', { children: 'page content' }, null, false, {})
+      container.router = {
+        currentPath: { value: '/' },
+        currentRoute: null,
+        isNavigating: { value: false },
+        loadedRoutes: new Map([
+          [
+            '/::page',
+            {
+              entry: {} as any,
+              layouts: [],
+              page: { renderer: page },
+              params: {},
+              pathname: '/',
+              render: () => jsxDEV(page, {}, null, false, {}),
+            },
+          ],
+        ]),
+        manifest: [],
+        navigate: (async () => {}) as any,
+        sequence: 0,
+      } as unknown as RuntimeContainer['router']
+
+      const [node] = renderClientInsertable(
+        {
+          __eclipsa_type: 'route-slot',
+          pathname: '/',
+          startLayoutIndex: 0,
+        },
+        container,
+      )
+
+      const element = node as unknown as FakeElement
+      expect(element).toBeInstanceOf(FakeElement)
+      expect(element.tagName).toBe('p')
+      expect(element.childNodes).toHaveLength(1)
+      expect(element.childNodes[0]).toBeInstanceOf(FakeText)
+      expect((element.childNodes[0] as FakeText).data).toBe('page content')
+    })
+  })
+
+  it('wraps projection slot insertions in stable marker comments during client renders', () => {
+    withFakeNodeGlobal(() => {
+      const Probe = __eclipsaComponent(
+        (props: { aa?: unknown; children?: unknown }) =>
+          jsxDEV(
+            'section',
+            {
+              children: [
+                jsxDEV('div', { children: props.aa }, null, false, {}),
+                jsxDEV('div', { children: props.children }, null, false, {}),
+                jsxDEV('div', { children: props.aa }, null, false, {}),
+              ],
+            },
+            null,
+            false,
+            {},
+          ),
+        'probe-symbol',
+        () => [],
+        { aa: 2, children: 1 },
+      )
+
+      const container = createContainer()
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(
+          jsxDEV(
+            Probe as any,
+            {
+              aa: jsxDEV('span', { children: 'prop content' }, null, false, {}),
+              children: jsxDEV('span', { children: 'children content' }, null, false, {}),
+            },
+            null,
+            false,
+            {},
+          ),
+          container,
+        ),
+      ) as unknown as FakeNode[]
+
+      expect(collectComments(nodes)).toEqual([
+        'ec:c:c0:start',
+        'ec:s:c0:aa:0:start',
+        'ec:s:c0:aa:0:end',
+        'ec:s:c0:children:0:start',
+        'ec:s:c0:children:0:end',
+        'ec:s:c0:aa:1:start',
+        'ec:s:c0:aa:1:end',
+        'ec:c:c0:end',
+      ])
+    })
+  })
+
+  it('wraps route-slot children in projection slot markers during client renders', () => {
+    withFakeNodeGlobal(() => {
+      const Probe = __eclipsaComponent(
+        (props: { children?: unknown }) =>
+          jsxDEV('section', { children: props.children }, null, false, {}),
+        'probe-route-slot-symbol',
+        () => [],
+        { children: 1 },
+      )
+
+      const container = createContainer()
+      const page = () => jsxDEV('p', { children: 'page content' }, null, false, {})
+      container.router = {
+        currentPath: { value: '/' },
+        currentRoute: null,
+        isNavigating: { value: false },
+        loadedRoutes: new Map([
+          [
+            '/::page',
+            {
+              entry: {} as any,
+              layouts: [],
+              page: { renderer: page },
+              params: {},
+              pathname: '/',
+              render: () => jsxDEV(page, {}, null, false, {}),
+            },
+          ],
+        ]),
+        manifest: [],
+        navigate: (async () => {}) as any,
+        sequence: 0,
+      } as unknown as RuntimeContainer['router']
+
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(
+          jsxDEV(
+            Probe as any,
+            {
+              children: {
+                __eclipsa_type: 'route-slot',
+                pathname: '/',
+                startLayoutIndex: 0,
+              },
+            },
+            null,
+            false,
+            {},
+          ),
+          container,
+        ),
+      ) as unknown as FakeNode[]
+
+      expect(collectComments(nodes)).toEqual([
+        'ec:c:c0:start',
+        'ec:s:c0:children:0:start',
+        'ec:s:c0:children:0:end',
+        'ec:c:c0:end',
+      ])
+      expect(nodes[1]?.textContent).toContain('page content')
+    })
+  })
+
+  it('patches route-slot projection components on local signal writes without replacing their shell', async () => {
+    await withFakeNodeGlobal(async () => {
+      let open!: { value: boolean }
+
+      const ProbeBody = (props: { children?: unknown }) => {
+        open = useSignal(true)
+        return jsxDEV(
+          'section',
+          {
+            children: [
+              jsxDEV('button', { children: open.value ? 'open' : 'closed' }, null, false, {}),
+              jsxDEV('div', { children: props.children }, null, false, {}),
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Probe = __eclipsaComponent(ProbeBody, 'probe-route-slot-patch-symbol', () => [], {
+        children: 1,
+      })
+
+      const container = createContainer()
+      const page = () => jsxDEV('p', { children: 'page content' }, null, false, {})
+      container.imports.set(
+        'probe-route-slot-patch-symbol',
+        Promise.resolve({
+          default: (_scope: unknown[], propsOrArg?: unknown) =>
+            ProbeBody((propsOrArg as { children?: unknown } | undefined) ?? {}),
+        }),
+      )
+      container.router = {
+        currentPath: { value: '/' },
+        currentRoute: null,
+        isNavigating: { value: false },
+        loadedRoutes: new Map([
+          [
+            '/::page',
+            {
+              entry: {} as any,
+              layouts: [],
+              page: { renderer: page },
+              params: {},
+              pathname: '/',
+              render: () => jsxDEV(page, {}, null, false, {}),
+            },
+          ],
+        ]),
+        manifest: [],
+        navigate: (async () => {}) as any,
+        sequence: 0,
+      } as unknown as RuntimeContainer['router']
+
+      const host = new FakeElement('div')
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(
+          jsxDEV(
+            Probe as any,
+            {
+              children: {
+                __eclipsa_type: 'route-slot',
+                pathname: '/',
+                startLayoutIndex: 0,
+              },
+            },
+            null,
+            false,
+            {},
+          ),
+          container,
+        ),
+      ) as unknown as FakeNode[]
+
+      for (const node of nodes) {
+        host.appendChild(node)
+      }
+
+      const shell = host.childNodes[1] as FakeElement | undefined
+      expect(shell).toBeInstanceOf(FakeElement)
+      expect(shell?.textContent).toContain('open')
+      expect(collectComments([shell!])).toEqual([
+        'ec:s:c0:children:0:start',
+        'ec:s:c0:children:0:end',
+      ])
+
+      ;(shell as FakeElement & { __debugMarker?: string }).__debugMarker = 'live'
+      open.value = false
+      await flushDirtyComponents(container)
+
+      const nextShell = host.childNodes[1] as FakeElement | undefined
+      expect(nextShell).toBe(shell)
+      expect((nextShell as FakeElement & { __debugMarker?: string }).__debugMarker).toBe('live')
+      expect(nextShell?.textContent).toContain('closed')
+      expect(nextShell?.textContent).toContain('page content')
+    })
+  })
+
+  it('does not duplicate projection slot bodies when a parent shell falls back to replacement', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const currentPath = createDetachedRuntimeSignal(container, '$router:path', '/docs/a')
+      const currentUrl = createDetachedRuntimeSignal(
+        container,
+        '$router:url',
+        'http://local/docs/a',
+      )
+
+      container.router = {
+        currentPath,
+        currentRoute: null,
+        currentUrl,
+        defaultTitle: '',
+        isNavigating: { value: false },
+        loadedRoutes: new Map(),
+        location: {
+          get hash() {
+            return ''
+          },
+          get href() {
+            return currentUrl.value
+          },
+          get pathname() {
+            return new URL(currentUrl.value).pathname
+          },
+          get search() {
+            return ''
+          },
+        },
+        manifest: [],
+        navigate: (async () => {}) as any,
+        prefetchedLoaders: new Map(),
+        routeModuleBusts: new Map(),
+        routePrefetches: new Map(),
+        sequence: 0,
+      } as unknown as RuntimeContainer['router']
+
+      const ChildBody = () =>
+        jsxDEV('article', { 'data-page': '', children: 'page content' }, null, false, {})
+      const Child = __eclipsaComponent(ChildBody, 'projection-slot-preserve-child', () => [])
+
+      const ParentBody = (props: { children?: unknown }) => {
+        const location = useLocation()
+        return jsxDEV(
+          'section',
+          {
+            children: [
+              location.pathname === '/docs/a'
+                ? jsxDEV('p', { children: 'intro' }, null, false, {})
+                : null,
+              jsxDEV('div', { children: props.children }, null, false, {}),
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Parent = __eclipsaComponent(ParentBody, 'projection-slot-preserve-parent', () => [], {
+        children: 1,
+      })
+
+      container.imports.set(
+        'projection-slot-preserve-parent',
+        Promise.resolve({
+          default: (_scope: unknown[], propsOrArg?: unknown) =>
+            ParentBody((propsOrArg as { children?: unknown } | undefined) ?? {}),
+        }),
+      )
+      container.imports.set(
+        'projection-slot-preserve-child',
+        Promise.resolve({
+          default: () => ChildBody(),
+        }),
+      )
+
+      const originalDocument = globalThis.document
+      ;(globalThis as typeof globalThis & { document: Document }).document =
+        container.doc as Document
+      try {
+        const host = new FakeElement('div')
+        const nodes = withRuntimeContainer(container, () =>
+          renderClientInsertable(
+            jsxDEV(
+              Parent as any,
+              {
+                children: jsxDEV(Child as any, {}, null, false, {}),
+              },
+              null,
+              false,
+              {},
+            ),
+            container,
+          ),
+        ) as unknown as FakeNode[]
+
+        for (const node of nodes) {
+          host.appendChild(node)
+        }
+
+        expect(queryFakeElements(host, 'article[data-page]')).toHaveLength(1)
+        expect(host.textContent).toContain('intro')
+        expect(host.textContent).toContain('page content')
+
+        currentPath.value = '/docs/b'
+        currentUrl.value = 'http://local/docs/b'
+        await flushDirtyComponents(container)
+
+        expect(queryFakeElements(host, 'article[data-page]')).toHaveLength(1)
+        expect(host.textContent).not.toContain('intro')
+        expect(host.textContent).toContain('page content')
+      } finally {
+        globalThis.document = originalDocument
+      }
+    })
+  })
+
+  it('keeps fresh projection slot bodies when the current shell has no slot content to preserve', () => {
+    withFakeNodeGlobal(() => {
+      const doc = new FakeDocument()
+      const current = doc.createElement('section') as unknown as FakeElement
+      const next = doc.createElement('section') as unknown as FakeElement
+
+      current.appendChild(doc.createComment('ec:s:parent:children:0:start') as unknown as FakeNode)
+      current.appendChild(doc.createComment('ec:s:parent:children:0:end') as unknown as FakeNode)
+
+      next.appendChild(doc.createComment('ec:s:parent:children:0:start') as unknown as FakeNode)
+      const article = doc.createElement('article') as unknown as FakeElement
+      article.setAttribute('data-page', '')
+      article.appendChild(doc.createTextNode('page content') as unknown as FakeNode)
+      next.appendChild(article as unknown as FakeNode)
+      next.appendChild(doc.createComment('ec:s:parent:children:0:end') as unknown as FakeNode)
+
+      expect(
+        tryPatchElementShellInPlace(current as unknown as Element, next as unknown as Element),
+      ).toBe(true)
+
+      expect(queryFakeElements(current as unknown as FakeNode, 'article[data-page]')).toHaveLength(
+        1,
+      )
+      expect(current.textContent).toContain('page content')
+      expect(collectComments([current as unknown as FakeNode])).toEqual([
+        'ec:s:parent:children:0:start',
+        'ec:s:parent:children:0:end',
+      ])
+    })
+  })
+
+  it('does not duplicate resumed owner ranges when insert marker ownership has not been measured yet', () => {
+    withFakeNodeGlobal(() => {
+      const doc = new FakeDocument()
+      const current = doc.createElement('section') as unknown as FakeElement
+      const next = doc.createElement('section') as unknown as FakeElement
+
+      current.appendChild(doc.createComment('ec:c:c0.$i0.0:start') as unknown as FakeNode)
+      const currentPanel = doc.createElement('div') as unknown as FakeElement
+      currentPanel.setAttribute('data-panel', '')
+      currentPanel.appendChild(doc.createTextNode('panel') as unknown as FakeNode)
+      current.appendChild(currentPanel)
+      current.appendChild(doc.createComment('ec:c:c0.$i0.0:end') as unknown as FakeNode)
+      current.appendChild(doc.createComment('ec:i:42') as unknown as FakeNode)
+
+      next.appendChild(doc.createComment('ec:i:42') as unknown as FakeNode)
+      next.appendChild(doc.createComment('ec:c:c0.$i0.0:start') as unknown as FakeNode)
+      const nextPanel = doc.createElement('div') as unknown as FakeElement
+      nextPanel.setAttribute('data-panel', '')
+      nextPanel.appendChild(doc.createTextNode('panel') as unknown as FakeNode)
+      next.appendChild(nextPanel)
+      next.appendChild(doc.createComment('ec:c:c0.$i0.0:end') as unknown as FakeNode)
+
+      expect(
+        tryPatchElementShellInPlace(current as unknown as Element, next as unknown as Element),
+      ).toBe(true)
+
+      expect(queryFakeElements(current as unknown as FakeNode, 'div[data-panel]')).toHaveLength(1)
+      expect(collectComments([current as unknown as FakeNode])).toEqual([
+        'ec:i:42',
+        'ec:c:c0.$i0.0:start',
+        'ec:c:c0.$i0.0:end',
+      ])
+    })
+  })
+
+  it('does not preserve component boundaries through insert markers during shell patching', () => {
+    withFakeNodeGlobal(() => {
+      const doc = new FakeDocument()
+      const current = doc.createElement('section') as unknown as FakeElement
+      const next = doc.createElement('section') as unknown as FakeElement
+
+      const start = doc.createComment('ec:c:c0.$i0.0:start') as unknown as FakeNode
+      const panel = doc.createElement('div') as unknown as FakeElement
+      panel.setAttribute('data-panel', '')
+      panel.appendChild(doc.createTextNode('panel') as unknown as FakeNode)
+      const end = doc.createComment('ec:c:c0.$i0.0:end') as unknown as FakeNode
+      const marker = doc.createComment('ec:i:42') as unknown as FakeNode
+
+      current.appendChild(start)
+      current.appendChild(panel)
+      current.appendChild(end)
+      current.appendChild(marker)
+      rememberInsertMarkerRange(
+        marker as unknown as Comment,
+        [start, panel, end] as unknown as Node[],
+      )
+
+      next.appendChild(doc.createComment('ec:i:42') as unknown as FakeNode)
+
+      expect(
+        tryPatchElementShellInPlace(current as unknown as Element, next as unknown as Element),
+      ).toBe(true)
+
+      expect(queryFakeElements(current as unknown as FakeNode, 'div[data-panel]')).toHaveLength(0)
+      expect(collectComments([current as unknown as FakeNode])).toEqual(['ec:i:42'])
+    })
+  })
+
+  it('treats hidden route params as render-affecting props during component reuse checks', () => {
+    withFakeNodeGlobal(() => {
+      const PageBody = () => {
+        const params = useRouteParams()
+        return jsxDEV(
+          'div',
+          {
+            children: Array.isArray(params.slug)
+              ? params.slug.join('/')
+              : String(params.slug ?? ''),
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Page = __eclipsaComponent(PageBody, 'route-params-rerender-page', () => [])
+      const container = createContainer()
+
+      const firstProps: Record<string, unknown> = {}
+      Object.defineProperty(firstProps, '__eclipsa_route_params', {
+        configurable: true,
+        enumerable: false,
+        value: {
+          slug: ['getting-started', 'overview'],
+        },
+      })
+
+      const firstNodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(Page as any, firstProps, null, false, {}), container),
+      ) as unknown as FakeNode[]
+      const firstHost = new FakeElement('div')
+      for (const node of firstNodes) {
+        firstHost.appendChild(node)
+      }
+      expect(firstHost.textContent).toContain('getting-started/overview')
+
+      container.rootChildCursor = 0
+
+      const secondProps: Record<string, unknown> = {}
+      Object.defineProperty(secondProps, '__eclipsa_route_params', {
+        configurable: true,
+        enumerable: false,
+        value: {
+          slug: ['materials', 'routing'],
+        },
+      })
+
+      const secondNodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(Page as any, secondProps, null, false, {}), container),
+      ) as unknown as FakeNode[]
+      const secondHost = new FakeElement('div')
+      for (const node of secondNodes) {
+        secondHost.appendChild(node)
+      }
+
+      expect(secondHost.textContent).toContain('materials/routing')
+      expect(secondHost.textContent).not.toContain('getting-started/overview')
+    })
+  })
+
+  it('keeps managed Link elements stable when route-location subscribers rerender', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const currentPath = createDetachedRuntimeSignal(
+        container,
+        '$router:path',
+        '/loader-nav/overview',
+      )
+      const currentUrl = createDetachedRuntimeSignal(
+        container,
+        '$router:url',
+        'http://local/loader-nav/overview',
+      )
+
+      container.router = {
+        currentPath,
+        currentRoute: null,
+        currentUrl,
+        defaultTitle: '',
+        isNavigating: { value: false },
+        loadedRoutes: new Map(),
+        location: {
+          get hash() {
+            return ''
+          },
+          get href() {
+            return currentUrl.value
+          },
+          get pathname() {
+            return new URL(currentUrl.value).pathname
+          },
+          get search() {
+            return ''
+          },
+        },
+        manifest: [],
+        navigate: (async () => {}) as any,
+        prefetchedLoaders: new Map(),
+        routeModuleBusts: new Map(),
+        routePrefetches: new Map(),
+        sequence: 0,
+      } as unknown as RuntimeContainer['router']
+
+      const PageLinkBody = (props: { href: string; label: string; stateTestId: string }) => {
+        const location = useLocation()
+        const isActive = useComputed(
+          () => location.pathname === props.href,
+          [() => location.pathname, () => props.href],
+        )
+
+        return jsxDEV(
+          Link as any,
+          {
+            href: props.href,
+            class: isActive.value ? 'link active' : 'link inactive',
+            'data-testid': `${props.stateTestId}-link`,
+            children: [
+              jsxDEV(
+                'span',
+                {
+                  'data-testid': props.stateTestId,
+                  children: isActive.value ? ' active' : ' inactive',
+                },
+                null,
+                false,
+                {},
+              ),
+              jsxDEV(
+                'span',
+                {
+                  'data-testid': `${props.stateTestId}-label`,
+                  children: props.label,
+                },
+                null,
+                false,
+                {},
+              ),
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const PageLink = __eclipsaComponent(
+        PageLinkBody,
+        'page-link-route-location-symbol',
+        () => [],
+        { label: 1 },
+      )
+
+      container.imports.set(
+        'page-link-route-location-symbol',
+        Promise.resolve({
+          default: (_scope: unknown[], propsOrArg?: unknown) =>
+            PageLinkBody(propsOrArg as { href: string; label: string; stateTestId: string }),
+        }),
+      )
+
+      const originalDocument = globalThis.document
+      ;(globalThis as typeof globalThis & { document: Document }).document =
+        container.doc as Document
+      try {
+        const host = new FakeElement('div')
+        const nodes = withRuntimeContainer(container, () =>
+          renderClientInsertable(
+            jsxDEV(
+              PageLink as any,
+              {
+                href: '/loader-nav/quick-start',
+                label: 'Quick Start',
+                stateTestId: 'loader-nav-quick-start-state',
+              },
+              null,
+              false,
+              {},
+            ),
+            container,
+          ),
+        ) as unknown as FakeNode[]
+
+        for (const node of nodes) {
+          host.appendChild(node)
+        }
+
+        const link = host.childNodes[1] as FakeElement | undefined
+        expect(link).toBeInstanceOf(FakeElement)
+        expect(link?.className).toBe('link inactive')
+        ;(link as FakeElement & { __debugMarker?: string }).__debugMarker = 'live'
+
+        currentPath.value = '/loader-nav/quick-start'
+        currentUrl.value = 'http://local/loader-nav/quick-start'
+        await flushDirtyComponents(container)
+
+        const nextLink = host.childNodes[1] as FakeElement | undefined
+        expect(nextLink).toBe(link)
+        expect((nextLink as FakeElement & { __debugMarker?: string }).__debugMarker).toBe('live')
+        expect(nextLink?.className).toBe('link active')
+        expect(nextLink?.textContent).toContain(' active')
+      } finally {
+        globalThis.document = originalDocument
+      }
+    })
+  })
+
+  it('keeps nested dialog shells stable after a route-location parent rerender followed by a local child update', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const currentPath = createDetachedRuntimeSignal(container, '$router:path', '/docs/overview')
+      const currentUrl = createDetachedRuntimeSignal(
+        container,
+        '$router:url',
+        'http://local/docs/overview',
+      )
+
+      container.router = {
+        currentPath,
+        currentRoute: null,
+        currentUrl,
+        defaultTitle: '',
+        isNavigating: { value: false },
+        loadedRoutes: new Map(),
+        location: {
+          get hash() {
+            return ''
+          },
+          get href() {
+            return currentUrl.value
+          },
+          get pathname() {
+            return new URL(currentUrl.value).pathname
+          },
+          get search() {
+            return ''
+          },
+        },
+        manifest: [],
+        navigate: (async () => {}) as any,
+        prefetchedLoaders: new Map(),
+        routeModuleBusts: new Map(),
+        routePrefetches: new Map(),
+        sequence: 0,
+      } as unknown as RuntimeContainer['router']
+
+      let query!: { value: string }
+
+      const SearchResultsBodyRender = (props: { query: string }) => {
+        if (props.query.trim() === '') {
+          return jsxDEV(
+            'div',
+            { children: 'Search titles, headings, content, and code.' },
+            null,
+            false,
+            {},
+          )
+        }
+        return jsxDEV('div', { children: 'No results found.' }, null, false, {})
+      }
+
+      const SearchResultsBody = __eclipsaComponent(
+        SearchResultsBodyRender,
+        'search-results-body-route-parent',
+        () => [],
+      )
+
+      const SearchDialogBody = () => {
+        query = useSignal('')
+        return jsxDEV(
+          'div',
+          {
+            children: [
+              jsxDEV('button', { children: 'Search docs' }, null, false, {}),
+              jsxDEV(
+                'dialog',
+                {
+                  children: [
+                    jsxDEV('input', { type: 'text', value: query.value }, null, false, {}),
+                    jsxDEV(SearchResultsBody as any, { query: query.value }, null, false, {}),
+                  ],
+                },
+                null,
+                false,
+                {},
+              ),
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const SearchDialog = __eclipsaComponent(
+        SearchDialogBody,
+        'search-dialog-route-parent',
+        () => [],
+      )
+
+      const LayoutBody = () => {
+        const location = useLocation()
+        return jsxDEV(
+          'nav',
+          {
+            children: [
+              jsxDEV('span', { children: location.pathname }, null, false, {}),
+              jsxDEV(SearchDialog as any, {}, null, false, {}),
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Layout = __eclipsaComponent(LayoutBody, 'layout-route-parent', () => [])
+
+      container.imports.set(
+        'layout-route-parent',
+        Promise.resolve({
+          default: () => LayoutBody(),
+        }),
+      )
+      container.imports.set(
+        'search-dialog-route-parent',
+        Promise.resolve({
+          default: () => SearchDialogBody(),
+        }),
+      )
+      container.imports.set(
+        'search-results-body-route-parent',
+        Promise.resolve({
+          default: (_scope: unknown[], propsOrArg?: unknown) =>
+            SearchResultsBodyRender(propsOrArg as { query: string }),
+        }),
+      )
+
+      const originalDocument = globalThis.document
+      ;(globalThis as typeof globalThis & { document: Document }).document =
+        container.doc as Document
+      try {
+        const host = container.doc?.body as unknown as FakeElement
+        host.childNodes = []
+        const nodes = withRuntimeContainer(container, () =>
+          renderClientInsertable(jsxDEV(Layout as any, {}, null, false, {}), container),
+        ) as unknown as FakeNode[]
+
+        for (const node of nodes) {
+          host.appendChild(node)
+        }
+
+        const findFirst = (tagName: string) => {
+          const visit = (node: FakeNode): FakeElement | null => {
+            if (node instanceof FakeElement && node.tagName === tagName) {
+              return node
+            }
+            for (const child of node.childNodes) {
+              const found = visit(child)
+              if (found) {
+                return found
+              }
+            }
+            return null
+          }
+          return visit(host)
+        }
+
+        currentPath.value = '/docs/quick-start'
+        currentUrl.value = 'http://local/docs/quick-start'
+        await flushDirtyComponents(container)
+
+        const hostContainsNode = (target: FakeNode | undefined) => {
+          if (!target) {
+            return false
+          }
+          const find = (node: FakeNode): boolean => {
+            if (node === target) {
+              return true
+            }
+            return node.childNodes.some((child) => find(child))
+          }
+          return find(host)
+        }
+
+        expect(
+          hostContainsNode(container.components.get('c0.0')?.start as FakeNode | undefined),
+        ).toBe(true)
+        expect(
+          hostContainsNode(container.components.get('c0.0.0')?.start as FakeNode | undefined),
+        ).toBe(true)
+
+        const trigger = findFirst('button')
+        const dialog = findFirst('dialog')
+        expect(trigger).toBeTruthy()
+        expect(dialog).toBeTruthy()
+        ;(trigger as FakeElement & { __debugMarker?: string }).__debugMarker = 'trigger-live'
+        ;(dialog as FakeElement & { __debugMarker?: string }).__debugMarker = 'dialog-live'
+        dialog?.showModal()
+        expect(dialog?.open).toBe(true)
+
+        query.value = 'o'
+        await flushDirtyComponents(container)
+        await new Promise((resolve) => setTimeout(resolve, 0))
+
+        const nextTrigger = findFirst('button')
+        const nextDialog = findFirst('dialog')
+        expect(nextTrigger).toBe(trigger)
+        expect(nextDialog).toBe(dialog)
+        expect((nextTrigger as FakeElement & { __debugMarker?: string }).__debugMarker).toBe(
+          'trigger-live',
+        )
+        expect((nextDialog as FakeElement & { __debugMarker?: string }).__debugMarker).toBe(
+          'dialog-live',
+        )
+        expect(nextDialog?.open).toBe(true)
+        expect(nextDialog?.textContent).toContain('No results found.')
+      } finally {
+        globalThis.document = originalDocument
+      }
+    })
+  })
+
+  it('keeps dialog shells stable when a local update lands during the opening rerender flush', async () => {
+    await withFakeNodeGlobal(async () => {
+      let open!: { value: boolean }
+      let query!: { value: string }
+
+      const SearchResultsBodyRender = (props: { query: string }) => {
+        if (props.query.trim() === '') {
+          return jsxDEV(
+            'div',
+            { children: 'Search titles, headings, content, and code.' },
+            null,
+            false,
+            {},
+          )
+        }
+
+        return jsxDEV('div', { children: 'No results found.' }, null, false, {})
+      }
+
+      const SearchResultsBody = __eclipsaComponent(
+        SearchResultsBodyRender,
+        'search-results-body-overlap-open',
+        () => [],
+      )
+
+      const SearchDialogBody = () => {
+        open = useSignal(false)
+        query = useSignal('')
+        return jsxDEV(
+          'div',
+          {
+            class: 'contents',
+            children: [
+              jsxDEV(
+                'button',
+                {
+                  'aria-expanded': open.value,
+                  children: 'Search docs',
+                },
+                null,
+                false,
+                {},
+              ),
+              jsxDEV(
+                'dialog',
+                {
+                  children: jsxDEV(
+                    'div',
+                    {
+                      children: jsxDEV(
+                        'div',
+                        {
+                          children: [
+                            jsxDEV(
+                              'div',
+                              {
+                                children: [
+                                  jsxDEV('div', { children: 'search' }, null, false, {}),
+                                  jsxDEV(
+                                    'input',
+                                    { type: 'text', value: query.value },
+                                    null,
+                                    false,
+                                    {},
+                                  ),
+                                  jsxDEV('button', { children: 'close' }, null, false, {}),
+                                ],
+                              },
+                              null,
+                              false,
+                              {},
+                            ),
+                            jsxDEV(
+                              'div',
+                              {
+                                children: jsxDEV(
+                                  SearchResultsBody as any,
+                                  { query: query.value },
+                                  null,
+                                  false,
+                                  {},
+                                ),
+                              },
+                              null,
+                              false,
+                              {},
+                            ),
+                          ],
+                        },
+                        null,
+                        false,
+                        {},
+                      ),
+                    },
+                    null,
+                    false,
+                    {},
+                  ),
+                },
+                null,
+                false,
+                {},
+              ),
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const SearchDialog = __eclipsaComponent(
+        SearchDialogBody,
+        'search-dialog-overlap-open',
+        () => [],
+      )
+
+      const container = createContainer()
+      container.imports.set(
+        'search-dialog-overlap-open',
+        Promise.resolve({
+          default: () => SearchDialogBody(),
+        }),
+      )
+      container.imports.set(
+        'search-results-body-overlap-open',
+        Promise.resolve({
+          default: (_scope: unknown[], propsOrArg?: unknown) =>
+            SearchResultsBodyRender(propsOrArg as { query: string }),
+        }),
+      )
+
+      const host = new FakeElement('div')
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(SearchDialog as any, {}, null, false, {}), container),
+      ) as unknown as FakeNode[]
+
+      for (const node of nodes) {
+        host.appendChild(node)
+      }
+
+      const findFirst = (tagName: string) => {
+        const visit = (node: FakeNode): FakeElement | null => {
+          if (node instanceof FakeElement && node.tagName === tagName) {
+            return node
+          }
+          for (const child of node.childNodes) {
+            const found = visit(child)
+            if (found) {
+              return found
+            }
+          }
+          return null
+        }
+        return visit(host)
+      }
+
+      const dialog = findFirst('dialog')
+      const button = findFirst('button')
+      const wrapper = findFirst('div')
+      expect(dialog).toBeTruthy()
+      expect(button).toBeTruthy()
+      expect(wrapper).toBeTruthy()
+      ;(dialog as FakeElement & { __debugMarker?: string }).__debugMarker = 'dialog-live'
+      ;(button as FakeElement & { __debugMarker?: string }).__debugMarker = 'button-live'
+      ;(wrapper as FakeElement & { __debugMarker?: string }).__debugMarker = 'wrapper-live'
+      dialog?.showModal()
+      expect(dialog?.open).toBe(true)
+
+      open.value = true
+      const openingFlush = flushDirtyComponents(container)
+      query.value = 'ov'
+      await openingFlush
+      await flushAsync()
+      await flushDirtyComponents(container)
+
+      const nextDialog = findFirst('dialog')
+      const nextButton = findFirst('button')
+      const nextWrapper = findFirst('div')
+      expect(nextDialog).toBe(dialog)
+      expect(nextButton).toBe(button)
+      expect(nextWrapper).toBe(wrapper)
+      expect((nextDialog as FakeElement & { __debugMarker?: string }).__debugMarker).toBe(
+        'dialog-live',
+      )
+      expect((nextButton as FakeElement & { __debugMarker?: string }).__debugMarker).toBe(
+        'button-live',
+      )
+      expect((nextWrapper as FakeElement & { __debugMarker?: string }).__debugMarker).toBe(
+        'wrapper-live',
+      )
+      expect(nextDialog?.open).toBe(true)
+      expect(nextButton?.hasAttribute('aria-expanded')).toBe(true)
+      expect(nextDialog?.textContent).toContain('No results found.')
+    })
+  })
+
+  it('keeps compiled insert effects bound to live DOM after a route-location parent rerender', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const currentPath = createDetachedRuntimeSignal(container, '$router:path', '/docs/overview')
+      const currentUrl = createDetachedRuntimeSignal(
+        container,
+        '$router:url',
+        'http://local/docs/overview',
+      )
+
+      container.router = {
+        currentPath,
+        currentRoute: null,
+        currentUrl,
+        defaultTitle: '',
+        isNavigating: { value: false },
+        loadedRoutes: new Map(),
+        location: {
+          get hash() {
+            return ''
+          },
+          get href() {
+            return currentUrl.value
+          },
+          get pathname() {
+            return new URL(currentUrl.value).pathname
+          },
+          get search() {
+            return ''
+          },
+        },
+        manifest: [],
+        navigate: (async () => {}) as any,
+        prefetchedLoaders: new Map(),
+        routeModuleBusts: new Map(),
+        routePrefetches: new Map(),
+        sequence: 0,
+      } as unknown as RuntimeContainer['router']
+
+      let query!: { value: string }
+
+      const ResultsBody = () => {
+        query = useSignal('')
+        const root = document.createElement('div')
+        const marker = document.createComment('results-marker')
+        root.appendChild(marker)
+        insert(
+          () =>
+            query.value.trim() === ''
+              ? 'Search titles, headings, content, and code.'
+              : 'No results found.',
+          root,
+          marker,
+        )
+        return root as unknown as JSX.Element
+      }
+
+      const Child = __eclipsaComponent(ResultsBody, 'compiled-insert-route-child', () => [])
+
+      const LayoutBody = () => {
+        const location = useLocation()
+        return jsxDEV(
+          'nav',
+          {
+            children: [
+              jsxDEV('span', { children: location.pathname }, null, false, {}),
+              jsxDEV(Child as any, {}, null, false, {}),
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Layout = __eclipsaComponent(LayoutBody, 'compiled-insert-route-layout', () => [])
+
+      container.imports.set(
+        'compiled-insert-route-layout',
+        Promise.resolve({
+          default: () => LayoutBody(),
+        }),
+      )
+      container.imports.set(
+        'compiled-insert-route-child',
+        Promise.resolve({
+          default: () => ResultsBody(),
+        }),
+      )
+
+      const originalDocument = globalThis.document
+      ;(globalThis as typeof globalThis & { document: Document }).document =
+        container.doc as Document
+      try {
+        const host = new FakeElement('div')
+        ;(container.doc as unknown as FakeDocument).body.appendChild(host as unknown as Node)
+        const nodes = withRuntimeContainer(container, () =>
+          renderClientInsertable(jsxDEV(Layout as any, {}, null, false, {}), container),
+        ) as unknown as FakeNode[]
+
+        for (const node of nodes) {
+          host.appendChild(node)
+        }
+
+        currentPath.value = '/docs/quick-start'
+        currentUrl.value = 'http://local/docs/quick-start'
+        await flushDirtyComponents(container)
+
+        query.value = 'ov'
+        await flushAsync()
+        await new Promise((resolve) => setTimeout(resolve, 0))
+
+        expect(host.textContent).toContain('No results found.')
+      } finally {
+        globalThis.document = originalDocument
+      }
+    })
+  })
+
+  it('preserves marker-backed inserted children when a route-location parent rerender patches a live shell', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const currentPath = createDetachedRuntimeSignal(container, '$router:path', '/docs/overview')
+      const currentUrl = createDetachedRuntimeSignal(
+        container,
+        '$router:url',
+        'http://local/docs/overview',
+      )
+
+      container.router = {
+        currentPath,
+        currentRoute: null,
+        currentUrl,
+        defaultTitle: '',
+        isNavigating: { value: false },
+        loadedRoutes: new Map(),
+        location: {
+          get hash() {
+            return ''
+          },
+          get href() {
+            return currentUrl.value
+          },
+          get pathname() {
+            return new URL(currentUrl.value).pathname
+          },
+          get search() {
+            return ''
+          },
+        },
+        manifest: [],
+        navigate: (async () => {}) as any,
+        prefetchedLoaders: new Map(),
+        routeModuleBusts: new Map(),
+        routePrefetches: new Map(),
+        sequence: 0,
+      } as unknown as RuntimeContainer['router']
+
+      const SearchTriggerBody = () =>
+        jsxDEV(
+          'button',
+          {
+            'aria-controls': 'docs-search-dialog',
+            children: 'Search docs',
+            type: 'button',
+          },
+          null,
+          false,
+          {},
+        )
+
+      const SearchTrigger = __eclipsaComponent(
+        SearchTriggerBody,
+        'compiled-insert-search-trigger',
+        () => [],
+      )
+
+      const LayoutBody = () => {
+        const location = useLocation()
+        const nav = document.createElement('nav')
+        const path = document.createElement('span')
+        path.appendChild(document.createTextNode(location.pathname))
+        nav.appendChild(path)
+        const marker = document.createComment('ec:i:search-trigger')
+        nav.appendChild(marker)
+        insert(asInsertable(jsxDEV(SearchTrigger as any, {}, null, false, {})), nav, marker)
+        return nav as unknown as JSX.Element
+      }
+
+      const Layout = __eclipsaComponent(LayoutBody, 'compiled-insert-search-layout', () => [])
+
+      container.imports.set(
+        'compiled-insert-search-layout',
+        Promise.resolve({
+          default: () => LayoutBody(),
+        }),
+      )
+      container.imports.set(
+        'compiled-insert-search-trigger',
+        Promise.resolve({
+          default: () => SearchTriggerBody(),
+        }),
+      )
+
+      const originalDocument = globalThis.document
+      ;(globalThis as typeof globalThis & { document: Document }).document =
+        container.doc as Document
+      try {
+        const host = new FakeElement('div')
+        const nodes = withRuntimeContainer(container, () =>
+          renderClientInsertable(jsxDEV(Layout as any, {}, null, false, {}), container),
+        ) as unknown as FakeNode[]
+
+        for (const node of nodes) {
+          host.appendChild(node)
+        }
+
+        const collectButtons = () => queryFakeElements(host, 'button[aria-controls]')
+        expect(collectButtons()).toHaveLength(1)
+        expect(host.textContent).toContain('/docs/overview')
+        expect(host.textContent).toContain('Search docs')
+
+        currentPath.value = '/docs/quick-start'
+        currentUrl.value = 'http://local/docs/quick-start'
+        await flushDirtyComponents(container)
+
+        const buttons = collectButtons()
+        expect(buttons).toHaveLength(1)
+        expect(buttons[0]?.textContent).toBe('Search docs')
+        expect(host.textContent).toContain('/docs/quick-start')
+        expect(host.textContent).toContain('Search docs')
+      } finally {
+        globalThis.document = originalDocument
+      }
+    })
+  })
+
+  it('keeps owner-scoped insert trees bound to live DOM after a route-location parent rerender', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const currentPath = createDetachedRuntimeSignal(container, '$router:path', '/docs/overview')
+      const currentUrl = createDetachedRuntimeSignal(
+        container,
+        '$router:url',
+        'http://local/docs/overview',
+      )
+
+      container.router = {
+        currentPath,
+        currentRoute: null,
+        currentUrl,
+        defaultTitle: '',
+        isNavigating: { value: false },
+        loadedRoutes: new Map(),
+        location: {
+          get hash() {
+            return ''
+          },
+          get href() {
+            return currentUrl.value
+          },
+          get pathname() {
+            return new URL(currentUrl.value).pathname
+          },
+          get search() {
+            return ''
+          },
+        },
+        manifest: [],
+        navigate: (async () => {}) as any,
+        prefetchedLoaders: new Map(),
+        routeModuleBusts: new Map(),
+        routePrefetches: new Map(),
+        sequence: 0,
+      } as unknown as RuntimeContainer['router']
+
+      let query!: { value: string }
+
+      const SearchDialogBody = () => {
+        query = useSignal('')
+        const host = document.createElement('div')
+        insert(
+          asInsertable(() =>
+            jsxDEV(
+              'dialog',
+              {
+                children: jsxDEV(
+                  'div',
+                  {
+                    children:
+                      query.value.trim() === ''
+                        ? 'Search titles, headings, content, and code.'
+                        : 'No results found.',
+                  },
+                  null,
+                  false,
+                  {},
+                ),
+              },
+              null,
+              false,
+              {},
+            ),
+          ),
+          host as unknown as Node,
+        )
+        return host as unknown as JSX.Element
+      }
+
+      const SearchDialog = __eclipsaComponent(
+        SearchDialogBody,
+        'owner-insert-route-parent-child',
+        () => [],
+      )
+
+      const LayoutBody = () => {
+        const location = useLocation()
+        return jsxDEV(
+          'nav',
+          {
+            children: [
+              jsxDEV('span', { children: location.pathname }, null, false, {}),
+              jsxDEV(SearchDialog as any, {}, null, false, {}),
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Layout = __eclipsaComponent(LayoutBody, 'owner-insert-route-parent-layout', () => [])
+
+      container.imports.set(
+        'owner-insert-route-parent-layout',
+        Promise.resolve({
+          default: () => LayoutBody(),
+        }),
+      )
+      container.imports.set(
+        'owner-insert-route-parent-child',
+        Promise.resolve({
+          default: () => SearchDialogBody(),
+        }),
+      )
+
+      const originalDocument = globalThis.document
+      ;(globalThis as typeof globalThis & { document: Document }).document =
+        container.doc as Document
+      try {
+        const host = new FakeElement('div')
+        const nodes = withRuntimeContainer(container, () =>
+          renderClientInsertable(jsxDEV(Layout as any, {}, null, false, {}), container),
+        ) as unknown as FakeNode[]
+
+        for (const node of nodes) {
+          host.appendChild(node)
+        }
+
+        currentPath.value = '/docs/quick-start'
+        currentUrl.value = 'http://local/docs/quick-start'
+        await flushDirtyComponents(container)
+
+        query.value = 'ov'
+        await flushAsync()
+        await new Promise((resolve) => setTimeout(resolve, 0))
+
+        expect(host.textContent).toContain('No results found.')
+      } finally {
+        globalThis.document = originalDocument
+      }
+    })
+  })
+
+  it('preserves compiled anchor elements when insert marker tokens change across rerenders', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const currentPath = createDetachedRuntimeSignal(container, '$router:path', '/docs/overview')
+      const currentUrl = createDetachedRuntimeSignal(
+        container,
+        '$router:url',
+        'http://local/docs/overview',
+      )
+
+      container.router = {
+        currentPath,
+        currentRoute: null,
+        currentUrl,
+        defaultTitle: '',
+        isNavigating: { value: false },
+        loadedRoutes: new Map(),
+        location: {
+          get hash() {
+            return ''
+          },
+          get href() {
+            return currentUrl.value
+          },
+          get pathname() {
+            return new URL(currentUrl.value).pathname
+          },
+          get search() {
+            return ''
+          },
+        },
+        manifest: [],
+        navigate: (async () => {}) as any,
+        prefetchedLoaders: new Map(),
+        routeModuleBusts: new Map(),
+        routePrefetches: new Map(),
+        sequence: 0,
+      } as unknown as RuntimeContainer['router']
+
+      const CompiledLinkBody = () => {
+        const location = useLocation()
+        const link = document.createElement('a') as unknown as FakeElement
+        link.setAttribute('href', '/docs/quick-start')
+        const stateSpan = document.createElement('span') as unknown as FakeElement
+        const labelSpan = document.createElement('span') as unknown as FakeElement
+        const stateMarker = document.createComment('link-state') as unknown as FakeComment
+        const labelMarker = document.createComment('link-label') as unknown as FakeComment
+        stateSpan.appendChild(stateMarker)
+        labelSpan.appendChild(labelMarker)
+        link.appendChild(stateSpan)
+        link.appendChild(labelSpan)
+        const isActive = location.pathname === '/docs/quick-start'
+
+        attr(link as unknown as Element, 'class', () =>
+          isActive ? 'link active' : 'link inactive',
+        )
+        insert(
+          () => (isActive ? ' active' : ' inactive'),
+          stateSpan as unknown as Node,
+          stateMarker as unknown as Node,
+        )
+        insert(() => 'Quick Start', labelSpan as unknown as Node, labelMarker as unknown as Node)
+
+        return link as unknown as JSX.Element
+      }
+
+      const CompiledLink = __eclipsaComponent(
+        CompiledLinkBody,
+        'compiled-anchor-stable-markers',
+        () => [],
+      )
+
+      container.imports.set(
+        'compiled-anchor-stable-markers',
+        Promise.resolve({
+          default: () => CompiledLinkBody(),
+        }),
+      )
+
+      const originalDocument = globalThis.document
+      ;(globalThis as typeof globalThis & { document: Document }).document =
+        container.doc as Document
+      try {
+        const host = new FakeElement('div')
+        const nodes = withRuntimeContainer(container, () =>
+          renderClientInsertable(jsxDEV(CompiledLink as any, {}, null, false, {}), container),
+        ) as unknown as FakeNode[]
+
+        for (const node of nodes) {
+          host.appendChild(node)
+        }
+
+        const collectAnchors = () => queryFakeElements(host, 'a[href]')
+        const anchorsBefore = collectAnchors()
+        expect(anchorsBefore).toHaveLength(1)
+        const anchorBefore = anchorsBefore[0]
+        expect(anchorBefore?.textContent).toContain('inactive')
+
+        currentPath.value = '/docs/quick-start'
+        currentUrl.value = 'http://local/docs/quick-start'
+        await flushDirtyComponents(container)
+
+        const anchorsAfter = collectAnchors()
+        expect(anchorsAfter).toHaveLength(1)
+        expect(anchorsAfter[0]).toBe(anchorBefore)
+        expect(anchorsAfter[0]?.textContent).toContain('active')
+        expect(anchorsAfter[0]?.textContent).toContain('Quick Start')
+      } finally {
+        globalThis.document = originalDocument
+      }
+    })
+  })
+
+  it('preserves styled wrapper elements across rerenders with descendant component boundaries', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      let open!: { value: boolean }
+
+      const ChildBody = (props: { href: string; label: string; onSelect: () => void }) =>
+        jsxDEV(
+          'a',
+          {
+            href: props.href,
+            onClick: props.onSelect,
+            children: props.label,
+          },
+          null,
+          false,
+          {},
+        )
+      const Child = __eclipsaComponent(ChildBody, 'patch-wrapper-descendant-child', () => [])
+
+      const renderBody = () =>
+        jsxDEV(
+          'div',
+          {
+            children: [
+              jsxDEV(
+                'button',
+                {
+                  'aria-expanded': open.value ? 'true' : 'false',
+                  onClick: () => {
+                    open.value = !open.value
+                  },
+                  children: open.value ? 'open' : 'closed',
+                },
+                null,
+                false,
+                {},
+              ),
+              jsxDEV(
+                'div',
+                {
+                  id: 'wrapper',
+                  style: open.value
+                    ? 'opacity: 1; transform: translate3d(0px, 0px, 0px); transition: opacity 0.2s ease, transform 0.2s ease;'
+                    : 'opacity: 0; transform: translate3d(0px, -12px, 0px); transition: opacity 0.2s ease, transform 0.2s ease;',
+                  children: [
+                    jsxDEV(
+                      Child as any,
+                      {
+                        href: '/docs/getting-started/overview',
+                        label: 'Docs',
+                        onSelect: () => {
+                          open.value = false
+                        },
+                      },
+                      null,
+                      false,
+                      {},
+                    ),
+                    jsxDEV(
+                      Child as any,
+                      {
+                        href: '/playground',
+                        label: 'Playground',
+                        onSelect: () => {
+                          open.value = false
+                        },
+                      },
+                      null,
+                      false,
+                      {},
+                    ),
+                  ],
+                },
+                null,
+                false,
+                {},
+              ),
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+
+      const App = __eclipsaComponent(
+        () => {
+          open = useSignal(false)
+          return renderBody()
+        },
+        'patch-wrapper-descendant-parent',
+        () => [],
+      )
+
+      container.imports.set(
+        'patch-wrapper-descendant-parent',
+        Promise.resolve({
+          default: () => renderBody(),
+        }),
+      )
+
+      const doc = container.doc as unknown as FakeDocument
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(App as any, {}, null, false, {}), container),
+      ) as unknown as FakeNode[]
+
+      for (const node of nodes) {
+        ;(doc.body as unknown as FakeElement).appendChild(node)
+      }
+
+      const findWrapper = () => {
+        const visit = (node: FakeNode): FakeElement | null => {
+          if (node instanceof FakeElement && node.getAttribute('id') === 'wrapper') {
+            return node
+          }
+          for (const child of node.childNodes) {
+            const found = visit(child)
+            if (found) {
+              return found
+            }
+          }
+          return null
+        }
+        return visit(doc.body as unknown as FakeNode)
+      }
+
+      const wrapper = findWrapper()
+      expect(wrapper).toBeTruthy()
+      expect(wrapper?.getAttribute('style')).toContain('opacity: 0')
+
+      open.value = true
+      await flushDirtyComponents(container)
+      await flushAsync()
+
+      const button = queryFakeElements(doc.body as unknown as FakeNode, 'button[aria-expanded]')[0]
+      expect(button?.getAttribute('aria-expanded')).toBe('true')
+      expect(button?.textContent).toBe('open')
+
+      const liveWrapper = findWrapper()
+      expect(liveWrapper).toBe(wrapper)
+      expect(liveWrapper?.getAttribute('style')).toContain('opacity: 1')
+      expect(liveWrapper?.textContent).toContain('Docs')
+      expect(liveWrapper?.textContent).toContain('Playground')
+    })
+  })
+
+  it('keeps layout render effects live when patching with projection-slot DOM reuse', async () => {
+    await withFakeNodeGlobal(async () => {
+      let query!: { value: string }
+
+      const LayoutBody = (props: { children?: JSX.Element }) => {
+        query = useSignal('')
+        const panel = document.createElement('div')
+        const marker = document.createComment('layout-results-marker')
+        panel.appendChild(marker)
+        insert(
+          () =>
+            query.value.trim() === ''
+              ? 'Search titles, headings, content, and code.'
+              : 'No results found.',
+          panel as unknown as Node,
+          marker as unknown as Node,
+        )
+
+        return jsxDEV(
+          'nav',
+          {
+            children: [panel as unknown as JSX.Element, props.children ?? null],
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Layout = __eclipsaComponent(LayoutBody, 'projection-reuse-layout-effects', () => [], {
+        children: 1,
+      })
+
+      const container = createContainer()
+      container.imports.set(
+        'projection-reuse-layout-effects',
+        Promise.resolve({
+          default: (_scope: unknown[], propsOrArg?: unknown) => LayoutBody(propsOrArg as any),
+        }),
+      )
+      const originalDocument = globalThis.document
+      ;(globalThis as typeof globalThis & { document: Document }).document =
+        container.doc as Document
+      try {
+        const host = new FakeElement('div')
+        const nodes = withRuntimeContainer(container, () =>
+          renderClientInsertable(
+            jsxDEV(
+              Layout as any,
+              {
+                children: jsxDEV('main', { children: 'overview' }, null, false, {}),
+              },
+              null,
+              false,
+              {},
+            ),
+            container,
+          ),
+        ) as unknown as FakeNode[]
+
+        for (const node of nodes) {
+          host.appendChild(node)
+        }
+
+        const layout = container.components.get('c0')
+        expect(layout).toBeTruthy()
+        expect(host.textContent).toContain('Search titles, headings, content, and code.')
+
+        const nextChildren = jsxDEV('main', { children: 'quick-start' }, null, false, {})
+        layout!.props = { children: nextChildren }
+        layout!.rawProps = { children: nextChildren }
+        layout!.active = false
+        layout!.activateModeOnFlush = 'patch'
+        layout!.reuseExistingDomOnActivate = true
+        layout!.reuseProjectionSlotDomOnActivate = true
+        container.dirty.add('c0')
+        await flushDirtyComponents(container)
+
+        query.value = 'ov'
+        await flushAsync()
+        await new Promise((resolve) => setTimeout(resolve, 0))
+
+        expect(host.textContent).toContain('No results found.')
+      } finally {
+        globalThis.document = originalDocument
+      }
+    })
+  })
+
+  it('keeps owner-scoped inserted child components live when patching with projection-slot DOM reuse', async () => {
+    await withFakeNodeGlobal(async () => {
+      let query!: { value: string }
+
+      const SearchDialogBody = () => {
+        query = useSignal('')
+        return jsxDEV(
+          'div',
+          {
+            children:
+              query.value.trim() === ''
+                ? 'Search titles, headings, content, and code.'
+                : 'No results found.',
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const SearchDialog = __eclipsaComponent(
+        SearchDialogBody,
+        'projection-reuse-owner-insert-child',
+        () => [],
+      )
+
+      const LayoutBody = (props: { children?: JSX.Element }) => {
+        const panel = document.createElement('div')
+        insert(asInsertable(jsxDEV(SearchDialog as any, {}, null, false, {})), panel)
+
+        return jsxDEV(
+          'nav',
+          {
+            children: [panel as unknown as JSX.Element, props.children ?? null],
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Layout = __eclipsaComponent(
+        LayoutBody,
+        'projection-reuse-owner-insert-layout',
+        () => [],
+        { children: 1 },
+      )
+
+      const container = createContainer()
+      container.imports.set(
+        'projection-reuse-owner-insert-layout',
+        Promise.resolve({
+          default: (_scope: unknown[], propsOrArg?: unknown) => LayoutBody(propsOrArg as any),
+        }),
+      )
+      container.imports.set(
+        'projection-reuse-owner-insert-child',
+        Promise.resolve({
+          default: () => SearchDialogBody(),
+        }),
+      )
+
+      const originalDocument = globalThis.document
+      ;(globalThis as typeof globalThis & { document: Document }).document =
+        container.doc as Document
+      try {
+        const host = new FakeElement('div')
+        const nodes = withRuntimeContainer(container, () =>
+          renderClientInsertable(
+            jsxDEV(
+              Layout as any,
+              {
+                children: jsxDEV('main', { children: 'overview' }, null, false, {}),
+              },
+              null,
+              false,
+              {},
+            ),
+            container,
+          ),
+        ) as unknown as FakeNode[]
+
+        for (const node of nodes) {
+          host.appendChild(node)
+        }
+
+        const layout = container.components.get('c0')
+        expect(layout).toBeTruthy()
+        expect(host.textContent).toContain('Search titles, headings, content, and code.')
+
+        const nextChildren = jsxDEV('main', { children: 'quick-start' }, null, false, {})
+        layout!.props = { children: nextChildren }
+        layout!.rawProps = { children: nextChildren }
+        layout!.active = false
+        layout!.activateModeOnFlush = 'patch'
+        layout!.reuseExistingDomOnActivate = true
+        layout!.reuseProjectionSlotDomOnActivate = true
+        container.dirty.add('c0')
+        await flushDirtyComponents(container)
+
+        query.value = 'ov'
+        await flushDirtyComponents(container)
+        await flushAsync()
+        await new Promise((resolve) => setTimeout(resolve, 0))
+
+        expect(host.textContent).toContain('No results found.')
+      } finally {
+        globalThis.document = originalDocument
+      }
+    })
+  })
+
+  it('isolates owner-scoped insert component ids from later sibling components', async () => {
+    await withFakeNodeGlobal(async () => {
+      let query!: { value: string }
+
+      const SearchDialogBody = () => {
+        query = useSignal('')
+        return jsxDEV(
+          'div',
+          {
+            children:
+              query.value.trim() === ''
+                ? 'Search titles, headings, content, and code.'
+                : 'No results found.',
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const SearchDialog = __eclipsaComponent(
+        SearchDialogBody,
+        'owner-insert-id-layout-search-dialog',
+        () => [],
+      )
+
+      const ContentBody = (props: { label: string }) =>
+        jsxDEV('main', { children: props.label }, null, false, {})
+
+      const Content = __eclipsaComponent(ContentBody, 'owner-insert-id-layout-content', () => [])
+
+      const LayoutBody = () => {
+        const panel = document.createElement('div')
+        insert(asInsertable(jsxDEV(SearchDialog as any, {}, null, false, {})), panel)
+
+        return jsxDEV(
+          'section',
+          {
+            children: [
+              panel as unknown as JSX.Element,
+              jsxDEV(Content as any, { label: 'overview' }, null, false, {}),
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Layout = __eclipsaComponent(LayoutBody, 'owner-insert-id-layout-parent', () => [])
+
+      const container = createContainer()
+      container.imports.set(
+        'owner-insert-id-layout-parent',
+        Promise.resolve({
+          default: () => LayoutBody(),
+        }),
+      )
+      container.imports.set(
+        'owner-insert-id-layout-search-dialog',
+        Promise.resolve({
+          default: () => SearchDialogBody(),
+        }),
+      )
+      container.imports.set(
+        'owner-insert-id-layout-content',
+        Promise.resolve({
+          default: (_scope: unknown[], propsOrArg?: unknown) => ContentBody(propsOrArg as any),
+        }),
+      )
+
+      const originalDocument = globalThis.document
+      ;(globalThis as typeof globalThis & { document: Document }).document =
+        container.doc as Document
+      try {
+        const host = new FakeElement('div')
+        const nodes = withRuntimeContainer(container, () =>
+          renderClientInsertable(jsxDEV(Layout as any, {}, null, false, {}), container),
+        ) as unknown as FakeNode[]
+
+        for (const node of nodes) {
+          host.appendChild(node)
+        }
+
+        expect(host.textContent).toContain('Search titles, headings, content, and code.')
+        expect(host.textContent).toContain('overview')
+        expect(container.components.has('c0.0')).toBe(true)
+        expect([...container.components.keys()].some((id) => id.startsWith('c0.$i0'))).toBe(true)
+
+        query.value = 'ov'
+        await flushDirtyComponents(container)
+        await flushAsync()
+        await new Promise((resolve) => setTimeout(resolve, 0))
+
+        expect(host.textContent).toContain('No results found.')
+        expect(host.textContent).toContain('overview')
+      } finally {
+        globalThis.document = originalDocument
+      }
+    })
+  })
+
+  it('keeps resumable child input handlers wired to live local signals after a route-location parent rerender', async () => {
+    await withFakeNodeGlobal(async () => {
+      class TargetedInputEvent extends Event {
+        constructor(private readonly eventTarget: EventTarget | null) {
+          super('input')
+        }
+
+        override get target() {
+          return this.eventTarget
+        }
+      }
+
+      const container = createContainer()
+      const currentPath = createDetachedRuntimeSignal(container, '$router:path', '/docs/overview')
+      const currentUrl = createDetachedRuntimeSignal(
+        container,
+        '$router:url',
+        'http://local/docs/overview',
+      )
+
+      container.router = {
+        currentPath,
+        currentRoute: null,
+        currentUrl,
+        defaultTitle: '',
+        isNavigating: { value: false },
+        loadedRoutes: new Map(),
+        location: {
+          get hash() {
+            return ''
+          },
+          get href() {
+            return currentUrl.value
+          },
+          get pathname() {
+            return new URL(currentUrl.value).pathname
+          },
+          get search() {
+            return ''
+          },
+        },
+        manifest: [],
+        navigate: (async () => {}) as any,
+        prefetchedLoaders: new Map(),
+        routeModuleBusts: new Map(),
+        routePrefetches: new Map(),
+        sequence: 0,
+      } as unknown as RuntimeContainer['router']
+
+      const ChildBody = () => {
+        const query = useSignal('')
+        return jsxDEV(
+          'div',
+          {
+            children: [
+              jsxDEV(
+                'input',
+                {
+                  onInput: __eclipsaEvent('input', 'route-parent-child-input-symbol', () => [
+                    query,
+                  ]),
+                  type: 'text',
+                  value: query.value,
+                },
+                null,
+                false,
+                {},
+              ),
+              jsxDEV('span', { children: query.value }, null, false, {}),
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Child = __eclipsaComponent(ChildBody, 'route-parent-child-input-component', () => [])
+
+      const LayoutBody = () => {
+        const location = useLocation()
+        return jsxDEV(
+          'nav',
+          {
+            children: [
+              jsxDEV('span', { children: location.pathname }, null, false, {}),
+              jsxDEV(Child as any, {}, null, false, {}),
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Layout = __eclipsaComponent(LayoutBody, 'route-parent-input-layout', () => [])
+
+      container.imports.set(
+        'route-parent-input-layout',
+        Promise.resolve({
+          default: () => LayoutBody(),
+        }),
+      )
+      container.imports.set(
+        'route-parent-child-input-component',
+        Promise.resolve({
+          default: () => ChildBody(),
+        }),
+      )
+      container.imports.set(
+        'route-parent-child-input-symbol',
+        Promise.resolve({
+          default: (scope: unknown[], propsOrArg?: unknown) => {
+            const event = propsOrArg as Event
+            const [query] = scope as [{ value: string }]
+            if (!(event.currentTarget instanceof FakeElement)) {
+              throw new Error('Expected fake input currentTarget.')
+            }
+            query.value = event.currentTarget.value
+          },
+        }),
+      )
+
+      const originalDocument = globalThis.document
+      ;(globalThis as typeof globalThis & { document: Document }).document =
+        container.doc as Document
+      try {
+        const host = new FakeElement('div')
+        const nodes = withRuntimeContainer(container, () =>
+          renderClientInsertable(jsxDEV(Layout as any, {}, null, false, {}), container),
+        ) as unknown as FakeNode[]
+
+        for (const node of nodes) {
+          host.appendChild(node)
+        }
+
+        const findFirst = (tagName: string) => {
+          const visit = (node: FakeNode): FakeElement | null => {
+            if (node instanceof FakeElement && node.tagName === tagName) {
+              return node
+            }
+            for (const child of node.childNodes) {
+              const found = visit(child)
+              if (found) {
+                return found
+              }
+            }
+            return null
+          }
+          return visit(host)
+        }
+
+        currentPath.value = '/docs/quick-start'
+        currentUrl.value = 'http://local/docs/quick-start'
+        await flushDirtyComponents(container)
+
+        const input = findFirst('input')
+        expect(input).toBeTruthy()
+        input!.value = 'ov'
+        await dispatchDocumentEvent(
+          container,
+          new TargetedInputEvent(input as unknown as EventTarget),
+        )
+        await flushDirtyComponents(container)
+
+        const text = host.textContent ?? ''
+        expect(text).toContain('ov')
+      } finally {
+        globalThis.document = originalDocument
+      }
+    })
+  })
+
+  it('keeps child refs attached to live elements when a route-location parent rerenders', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const currentPath = createDetachedRuntimeSignal(container, '$router:path', '/docs/overview')
+      const currentUrl = createDetachedRuntimeSignal(
+        container,
+        '$router:url',
+        'http://local/docs/overview',
+      )
+
+      container.router = {
+        currentPath,
+        currentRoute: null,
+        currentUrl,
+        defaultTitle: '',
+        isNavigating: { value: false },
+        loadedRoutes: new Map(),
+        location: {
+          get hash() {
+            return ''
+          },
+          get href() {
+            return currentUrl.value
+          },
+          get pathname() {
+            return new URL(currentUrl.value).pathname
+          },
+          get search() {
+            return ''
+          },
+        },
+        manifest: [],
+        navigate: (async () => {}) as any,
+        prefetchedLoaders: new Map(),
+        routeModuleBusts: new Map(),
+        routePrefetches: new Map(),
+        sequence: 0,
+      } as unknown as RuntimeContainer['router']
+
+      let inputRef!: { value: HTMLInputElement | undefined }
+
+      const ChildBody = () => {
+        inputRef = useSignal<HTMLInputElement | undefined>()
+        return jsxDEV(
+          'input',
+          {
+            ref: inputRef,
+            type: 'text',
+            value: 'stable',
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Child = __eclipsaComponent(ChildBody, 'route-parent-child-ref-component', () => [])
+
+      const LayoutBody = () => {
+        const location = useLocation()
+        return jsxDEV(
+          'nav',
+          {
+            children: [
+              jsxDEV('span', { children: location.pathname }, null, false, {}),
+              jsxDEV(Child as any, {}, null, false, {}),
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Layout = __eclipsaComponent(LayoutBody, 'route-parent-ref-layout', () => [])
+
+      container.imports.set(
+        'route-parent-ref-layout',
+        Promise.resolve({
+          default: () => LayoutBody(),
+        }),
+      )
+      container.imports.set(
+        'route-parent-child-ref-component',
+        Promise.resolve({
+          default: () => ChildBody(),
+        }),
+      )
+
+      const originalDocument = globalThis.document
+      ;(globalThis as typeof globalThis & { document: Document }).document =
+        container.doc as Document
+      try {
+        const host = new FakeElement('div')
+        const nodes = withRuntimeContainer(container, () =>
+          renderClientInsertable(jsxDEV(Layout as any, {}, null, false, {}), container),
+        ) as unknown as FakeNode[]
+
+        for (const node of nodes) {
+          host.appendChild(node)
+        }
+
+        const findFirst = (tagName: string) => {
+          const visit = (node: FakeNode): FakeElement | null => {
+            if (node instanceof FakeElement && node.tagName === tagName) {
+              return node
+            }
+            for (const child of node.childNodes) {
+              const found = visit(child)
+              if (found) {
+                return found
+              }
+            }
+            return null
+          }
+          return visit(host)
+        }
+
+        const initialInput = findFirst('input')
+        expect(initialInput).toBeTruthy()
+        expect(inputRef.value).toBe(initialInput)
+
+        currentPath.value = '/docs/quick-start'
+        currentUrl.value = 'http://local/docs/quick-start'
+        await flushDirtyComponents(container)
+
+        const nextInput = findFirst('input')
+        expect(nextInput).toBeTruthy()
+        expect(inputRef.value).toBe(nextInput)
+      } finally {
+        globalThis.document = originalDocument
+      }
+    })
+  })
+
+  it('does not preserve stale child boundary DOM when a route-location parent rerender changes child symbols and props', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const currentPath = createDetachedRuntimeSignal(container, '$router:path', '/docs/overview')
+      const currentUrl = createDetachedRuntimeSignal(
+        container,
+        '$router:url',
+        'http://local/docs/overview',
+      )
+
+      container.router = {
+        currentPath,
+        currentRoute: null,
+        currentUrl,
+        defaultTitle: '',
+        isNavigating: { value: false },
+        loadedRoutes: new Map(),
+        location: {
+          get hash() {
+            return ''
+          },
+          get href() {
+            return currentUrl.value
+          },
+          get pathname() {
+            return new URL(currentUrl.value).pathname
+          },
+          get search() {
+            return ''
+          },
+        },
+        manifest: [],
+        navigate: (async () => {}) as any,
+        prefetchedLoaders: new Map(),
+        routeModuleBusts: new Map(),
+        routePrefetches: new Map(),
+        sequence: 0,
+      } as unknown as RuntimeContainer['router']
+
+      const NavLinkBody = (props: { href: string; label: string }) =>
+        jsxDEV('a', { children: props.label, href: props.href }, null, false, {})
+
+      const NavLink = __eclipsaComponent(NavLinkBody, 'route-parent-nav-link', () => [])
+
+      const HomeBody = () =>
+        jsxDEV(
+          'div',
+          {
+            children: [
+              jsxDEV('p', { children: 'Home page' }, null, false, {}),
+              jsxDEV(
+                'p',
+                {
+                  children: jsxDEV(
+                    NavLink as any,
+                    {
+                      href: '/guarded',
+                      label: 'Open guarded route with Link',
+                    },
+                    null,
+                    false,
+                    {},
+                  ),
+                },
+                null,
+                false,
+                {},
+              ),
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+
+      const Home = __eclipsaComponent(HomeBody, 'route-parent-home-page', () => [])
+
+      const CounterBody = () =>
+        jsxDEV(
+          'div',
+          {
+            children: [
+              jsxDEV('p', { children: 'Counter page' }, null, false, {}),
+              jsxDEV(
+                'p',
+                {
+                  children: jsxDEV(
+                    NavLink as any,
+                    {
+                      href: '/',
+                      label: 'Back home with Link',
+                    },
+                    null,
+                    false,
+                    {},
+                  ),
+                },
+                null,
+                false,
+                {},
+              ),
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+
+      const Counter = __eclipsaComponent(CounterBody, 'route-parent-counter-page', () => [])
+
+      const LayoutBody = () => {
+        const location = useLocation()
+        return jsxDEV(
+          'main',
+          {
+            children:
+              location.pathname === '/docs/overview'
+                ? jsxDEV(Home as any, {}, null, false, {})
+                : jsxDEV(Counter as any, {}, null, false, {}),
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Layout = __eclipsaComponent(LayoutBody, 'route-parent-symbol-layout', () => [])
+
+      container.imports.set(
+        'route-parent-symbol-layout',
+        Promise.resolve({
+          default: () => LayoutBody(),
+        }),
+      )
+      container.imports.set(
+        'route-parent-home-page',
+        Promise.resolve({
+          default: () => HomeBody(),
+        }),
+      )
+      container.imports.set(
+        'route-parent-counter-page',
+        Promise.resolve({
+          default: () => CounterBody(),
+        }),
+      )
+      container.imports.set(
+        'route-parent-nav-link',
+        Promise.resolve({
+          default: (_scope: unknown[], propsOrArg?: unknown) =>
+            NavLinkBody(propsOrArg as { href: string; label: string }),
+        }),
+      )
+
+      const originalDocument = globalThis.document
+      ;(globalThis as typeof globalThis & { document: Document }).document =
+        container.doc as Document
+      try {
+        const host = new FakeElement('div')
+        const nodes = withRuntimeContainer(container, () =>
+          renderClientInsertable(jsxDEV(Layout as any, {}, null, false, {}), container),
+        ) as unknown as FakeNode[]
+
+        for (const node of nodes) {
+          host.appendChild(node)
+        }
+
+        expect(host.textContent).toContain('Home page')
+        expect(host.textContent).toContain('Open guarded route with Link')
+
+        currentPath.value = '/docs/counter'
+        currentUrl.value = 'http://local/docs/counter'
+        await flushDirtyComponents(container)
+
+        const text = host.textContent ?? ''
+        expect(text).toContain('Counter page')
+        expect(text).toContain('Back home with Link')
+        expect(text).not.toContain('Open guarded route with Link')
+      } finally {
+        globalThis.document = originalDocument
+      }
+    })
+  })
+
+  it('preserves resumable child event scopes when a route-location parent falls back to shell replacement', async () => {
+    await withFakeNodeGlobal(async () => {
+      class TargetedClickEvent extends Event {
+        constructor(private readonly eventTarget: EventTarget | null) {
+          super('click')
+        }
+
+        override get target() {
+          return this.eventTarget
+        }
+      }
+
+      const container = createContainer()
+      const currentPath = createDetachedRuntimeSignal(container, '$router:path', '/docs/overview')
+      const currentUrl = createDetachedRuntimeSignal(
+        container,
+        '$router:url',
+        'http://local/docs/overview',
+      )
+
+      container.router = {
+        currentPath,
+        currentRoute: null,
+        currentUrl,
+        defaultTitle: '',
+        isNavigating: { value: false },
+        loadedRoutes: new Map(),
+        location: {
+          get hash() {
+            return ''
+          },
+          get href() {
+            return currentUrl.value
+          },
+          get pathname() {
+            return new URL(currentUrl.value).pathname
+          },
+          get search() {
+            return ''
+          },
+        },
+        manifest: [],
+        navigate: (async () => {}) as any,
+        prefetchedLoaders: new Map(),
+        routeModuleBusts: new Map(),
+        routePrefetches: new Map(),
+        sequence: 0,
+      } as unknown as RuntimeContainer['router']
+
+      const ChildBody = () => {
+        const open = useSignal(false)
+        return jsxDEV(
+          'button',
+          {
+            children: open.value ? 'open' : 'closed',
+            onClick: __eclipsaEvent('click', 'route-parent-shell-fallback-click-symbol', () => [
+              open,
+            ]),
+            type: 'button',
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Child = __eclipsaComponent(ChildBody, 'route-parent-shell-fallback-child', () => [])
+
+      const LayoutBody = () => {
+        const location = useLocation()
+        return jsxDEV(
+          'nav',
+          {
+            children: [
+              location.pathname === '/docs/overview'
+                ? jsxDEV('span', { children: location.pathname }, null, false, {})
+                : jsxDEV(
+                    'div',
+                    {
+                      children: jsxDEV('span', { children: location.pathname }, null, false, {}),
+                    },
+                    null,
+                    false,
+                    {},
+                  ),
+              jsxDEV(Child as any, {}, null, false, {}),
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Layout = __eclipsaComponent(LayoutBody, 'route-parent-shell-fallback-layout', () => [])
+
+      container.imports.set(
+        'route-parent-shell-fallback-layout',
+        Promise.resolve({
+          default: () => LayoutBody(),
+        }),
+      )
+      container.imports.set(
+        'route-parent-shell-fallback-child',
+        Promise.resolve({
+          default: () => ChildBody(),
+        }),
+      )
+      container.imports.set(
+        'route-parent-shell-fallback-click-symbol',
+        Promise.resolve({
+          default: (scope: unknown[]) => {
+            const [open] = scope as [{ value: boolean }]
+            open.value = true
+          },
+        }),
+      )
+
+      const originalDocument = globalThis.document
+      ;(globalThis as typeof globalThis & { document: Document }).document =
+        container.doc as Document
+      try {
+        const host = new FakeElement('div')
+        const nodes = withRuntimeContainer(container, () =>
+          renderClientInsertable(jsxDEV(Layout as any, {}, null, false, {}), container),
+        ) as unknown as FakeNode[]
+
+        for (const node of nodes) {
+          host.appendChild(node)
+        }
+
+        const findFirst = (tagName: string) => {
+          const visit = (node: FakeNode): FakeElement | null => {
+            if (node instanceof FakeElement && node.tagName === tagName) {
+              return node
+            }
+            for (const child of node.childNodes) {
+              const found = visit(child)
+              if (found) {
+                return found
+              }
+            }
+            return null
+          }
+          return visit(host)
+        }
+
+        currentPath.value = '/docs/quick-start'
+        currentUrl.value = 'http://local/docs/quick-start'
+        await flushDirtyComponents(container)
+
+        const button = findFirst('button')
+        expect(button).toBeTruthy()
+        expect(button?.textContent).toBe('closed')
+
+        await dispatchDocumentEvent(
+          container,
+          new TargetedClickEvent(button as unknown as EventTarget),
+        )
+        await flushDirtyComponents(container)
+
+        expect(findFirst('button')?.textContent).toBe('open')
+      } finally {
+        globalThis.document = originalDocument
+      }
+    })
+  })
+
+  it('keeps owner-scoped inserted child event handlers wired after a route-location parent rerender', async () => {
+    await withFakeNodeGlobal(async () => {
+      class TargetedClickEvent extends Event {
+        constructor(private readonly eventTarget: EventTarget | null) {
+          super('click')
+        }
+
+        override get target() {
+          return this.eventTarget
+        }
+      }
+
+      class TargetedInputEvent extends Event {
+        constructor(private readonly eventTarget: EventTarget | null) {
+          super('input')
+        }
+
+        override get target() {
+          return this.eventTarget
+        }
+      }
+
+      const container = createContainer()
+      const currentPath = createDetachedRuntimeSignal(container, '$router:path', '/docs/overview')
+      const currentUrl = createDetachedRuntimeSignal(
+        container,
+        '$router:url',
+        'http://local/docs/overview',
+      )
+
+      container.router = {
+        currentPath,
+        currentRoute: null,
+        currentUrl,
+        defaultTitle: '',
+        isNavigating: { value: false },
+        loadedRoutes: new Map(),
+        location: {
+          get hash() {
+            return ''
+          },
+          get href() {
+            return currentUrl.value
+          },
+          get pathname() {
+            return new URL(currentUrl.value).pathname
+          },
+          get search() {
+            return ''
+          },
+        },
+        manifest: [],
+        navigate: (async () => {}) as any,
+        prefetchedLoaders: new Map(),
+        routeModuleBusts: new Map(),
+        routePrefetches: new Map(),
+        sequence: 0,
+      } as unknown as RuntimeContainer['router']
+
+      const SearchDialogBody = () => {
+        const open = useSignal(false)
+        const query = useSignal('')
+        return jsxDEV(
+          'div',
+          {
+            children: [
+              jsxDEV(
+                'button',
+                {
+                  children: open.value ? 'open' : 'closed',
+                  onClick: __eclipsaEvent('click', 'owner-insert-route-click-symbol', () => [open]),
+                },
+                null,
+                false,
+                {},
+              ),
+              jsxDEV(
+                'input',
+                {
+                  onInput: __eclipsaEvent('input', 'owner-insert-route-input-symbol', () => [
+                    query,
+                  ]),
+                  type: 'text',
+                  value: query.value,
+                },
+                null,
+                false,
+                {},
+              ),
+              jsxDEV('span', { children: query.value || 'empty' }, null, false, {}),
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const SearchDialog = __eclipsaComponent(
+        SearchDialogBody,
+        'owner-insert-route-search-dialog',
+        () => [],
+      )
+
+      const LayoutBody = () => {
+        const location = useLocation()
+        const panel = document.createElement('div')
+        insert(asInsertable(jsxDEV(SearchDialog as any, {}, null, false, {})), panel)
+        return jsxDEV(
+          'nav',
+          {
+            children: [
+              jsxDEV('span', { children: location.pathname }, null, false, {}),
+              panel as unknown as JSX.Element,
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Layout = __eclipsaComponent(LayoutBody, 'owner-insert-route-layout', () => [])
+
+      container.imports.set(
+        'owner-insert-route-layout',
+        Promise.resolve({
+          default: () => LayoutBody(),
+        }),
+      )
+      container.imports.set(
+        'owner-insert-route-search-dialog',
+        Promise.resolve({
+          default: () => SearchDialogBody(),
+        }),
+      )
+      container.imports.set(
+        'owner-insert-route-click-symbol',
+        Promise.resolve({
+          default: (scope: unknown[]) => {
+            const [open] = scope as [{ value: boolean }]
+            open.value = true
+          },
+        }),
+      )
+      container.imports.set(
+        'owner-insert-route-input-symbol',
+        Promise.resolve({
+          default: (scope: unknown[], propsOrArg?: unknown) => {
+            const event = propsOrArg as Event
+            const [query] = scope as [{ value: string }]
+            if (!(event.currentTarget instanceof FakeElement)) {
+              throw new Error('Expected fake input currentTarget.')
+            }
+            query.value = event.currentTarget.value
+          },
+        }),
+      )
+
+      const originalDocument = globalThis.document
+      ;(globalThis as typeof globalThis & { document: Document }).document =
+        container.doc as Document
+      try {
+        const host = new FakeElement('div')
+        const nodes = withRuntimeContainer(container, () =>
+          renderClientInsertable(jsxDEV(Layout as any, {}, null, false, {}), container),
+        ) as unknown as FakeNode[]
+
+        for (const node of nodes) {
+          host.appendChild(node)
+        }
+
+        const findFirst = (tagName: string) => {
+          const visit = (node: FakeNode): FakeElement | null => {
+            if (node instanceof FakeElement && node.tagName === tagName) {
+              return node
+            }
+            for (const child of node.childNodes) {
+              const found = visit(child)
+              if (found) {
+                return found
+              }
+            }
+            return null
+          }
+          return visit(host)
+        }
+
+        currentPath.value = '/docs/quick-start'
+        currentUrl.value = 'http://local/docs/quick-start'
+        await flushDirtyComponents(container)
+
+        const button = findFirst('button')
+        const input = findFirst('input')
+        expect(button).toBeTruthy()
+        expect(input).toBeTruthy()
+
+        await dispatchDocumentEvent(
+          container,
+          new TargetedClickEvent(button as unknown as EventTarget),
+        )
+        input!.value = 'ov'
+        await dispatchDocumentEvent(
+          container,
+          new TargetedInputEvent(input as unknown as EventTarget),
+        )
+        await flushDirtyComponents(container)
+
+        expect(host.textContent).toContain('open')
+        expect(host.textContent).toContain('ov')
+      } finally {
+        globalThis.document = originalDocument
+      }
+    })
+  })
+
+  it('updates external projection slot children when a route-location parent rerender changes active links', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const currentPath = createDetachedRuntimeSignal(
+        container,
+        '$router:path',
+        '/docs/getting-started/overview',
+      )
+      const currentUrl = createDetachedRuntimeSignal(
+        container,
+        '$router:url',
+        'http://local/docs/getting-started/overview',
+      )
+
+      container.router = {
+        currentPath,
+        currentRoute: null,
+        currentUrl,
+        defaultTitle: '',
+        isNavigating: { value: false },
+        loadedRoutes: new Map(),
+        location: {
+          get hash() {
+            return ''
+          },
+          get href() {
+            return currentUrl.value
+          },
+          get pathname() {
+            return new URL(currentUrl.value).pathname
+          },
+          get search() {
+            return ''
+          },
+        },
+        manifest: [],
+        navigate: (async () => {}) as any,
+        prefetchedLoaders: new Map(),
+        routeModuleBusts: new Map(),
+        routePrefetches: new Map(),
+        sequence: 0,
+      } as unknown as RuntimeContainer['router']
+
+      const ensureExternalSlotHost = (host: HTMLElement) => {
+        const fakeHost = host as unknown as FakeElement
+        const existing = queryFakeElements(
+          fakeHost as unknown as FakeNode,
+          'e-slot-host[data-e-slot="children"]',
+        )[0]
+        if (existing) {
+          return
+        }
+        const shell = new FakeElement('div')
+        shell.setAttribute('data-panel', '')
+        const slotHost = new FakeElement('e-slot-host')
+        slotHost.setAttribute('data-e-slot', 'children')
+        shell.appendChild(slotHost)
+        fakeHost.appendChild(shell)
+      }
+
+      const ExternalBody = setExternalComponentMeta((() => null) as any, {
+        async hydrate(host) {
+          ensureExternalSlotHost(host)
+          return { host }
+        },
+        kind: 'react',
+        async renderToString() {
+          return '<div data-panel=""><e-slot-host data-e-slot="children"></e-slot-host></div>'
+        },
+        slots: ['children'],
+        async unmount() {},
+        async update(instance, host) {
+          ensureExternalSlotHost(host)
+          return instance
+        },
+      })
+
+      const ExternalPanel = __eclipsaComponent(
+        ExternalBody as any,
+        'route-location-external-panel',
+        () => [],
+        { children: 1 },
+        { external: { kind: 'react', slots: ['children'] } },
+      )
+
+      const DocLink = __eclipsaComponent(
+        (props: { activeHref: string; href: string; label: string }) =>
+          jsxDEV(
+            'a',
+            {
+              class: props.activeHref === props.href ? 'active' : 'inactive',
+              'data-doc-link': '',
+              href: props.href,
+              children: props.label,
+            },
+            null,
+            false,
+            {},
+          ),
+        'route-location-external-doc-link',
+        () => [],
+      )
+
+      const renderSidebar = () => {
+        const location = useLocation()
+        return jsxDEV(
+          ExternalPanel as any,
+          {
+            children: [
+              jsxDEV(
+                DocLink as any,
+                {
+                  activeHref: location.pathname,
+                  href: '/docs/getting-started/overview',
+                  label: 'Overview',
+                },
+                '/docs/getting-started/overview',
+                false,
+                {},
+              ),
+              jsxDEV(
+                DocLink as any,
+                {
+                  activeHref: location.pathname,
+                  href: '/docs/materials/routing',
+                  label: 'Routing',
+                },
+                '/docs/materials/routing',
+                false,
+                {},
+              ),
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Sidebar = __eclipsaComponent(
+        () => renderSidebar(),
+        'route-location-external-sidebar',
+        () => [],
+      )
+
+      container.imports.set(
+        'route-location-external-sidebar',
+        Promise.resolve({
+          default: () => renderSidebar(),
+        }),
+      )
+
+      const doc = container.doc as unknown as FakeDocument
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(Sidebar as any, {}, null, false, {}), container),
+      ) as unknown as FakeNode[]
+
+      for (const node of nodes) {
+        ;(doc.body as unknown as FakeElement).appendChild(node)
+      }
+
+      await flushAsync()
+      await flushAsync()
+
+      const initialLinks = queryFakeElements(doc.body as unknown as FakeNode, 'a[data-doc-link]')
+      expect(initialLinks).toHaveLength(2)
+      expect(initialLinks[0]?.getAttribute('class')).toBe('active')
+      expect(initialLinks[1]?.getAttribute('class')).toBe('inactive')
+
+      currentPath.value = '/docs/materials/routing'
+      currentUrl.value = 'http://local/docs/materials/routing'
+      await flushDirtyComponents(container)
+      await flushAsync()
+      await flushAsync()
+
+      const updatedLinks = queryFakeElements(doc.body as unknown as FakeNode, 'a[data-doc-link]')
+      expect(updatedLinks).toHaveLength(2)
+      expect(updatedLinks[0]?.textContent).toBe('Overview')
+      expect(updatedLinks[1]?.textContent).toBe('Routing')
+      expect(updatedLinks[0]?.getAttribute('class')).toBe('inactive')
+      expect(updatedLinks[1]?.getAttribute('class')).toBe('active')
+    })
+  })
+
+  it('updates getter-backed child props when a route-location parent rerender changes active links', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const currentPath = createDetachedRuntimeSignal(
+        container,
+        '$router:path',
+        '/docs/getting-started/overview',
+      )
+      const currentUrl = createDetachedRuntimeSignal(
+        container,
+        '$router:url',
+        'http://local/docs/getting-started/overview',
+      )
+
+      container.router = {
+        currentPath,
+        currentRoute: null,
+        currentUrl,
+        defaultTitle: '',
+        isNavigating: { value: false },
+        loadedRoutes: new Map(),
+        location: {
+          get hash() {
+            return ''
+          },
+          get href() {
+            return currentUrl.value
+          },
+          get pathname() {
+            return new URL(currentUrl.value).pathname
+          },
+          get search() {
+            return ''
+          },
+        },
+        manifest: [],
+        navigate: (async () => {}) as any,
+        prefetchedLoaders: new Map(),
+        routeModuleBusts: new Map(),
+        routePrefetches: new Map(),
+        sequence: 0,
+      } as unknown as RuntimeContainer['router']
+
+      const Panel = __eclipsaComponent(
+        (props: { children?: JSX.Element | JSX.Element[] }) =>
+          jsxDEV('div', { children: props.children }, null, false, {}),
+        'route-location-inline-panel',
+        () => [],
+      )
+
+      const Dir = __eclipsaComponent(
+        (props: { activeHref: string; links: Array<{ href: string; label: string }> }) =>
+          jsxDEV(
+            Panel as any,
+            {
+              children: props.links.map((link) =>
+                jsxDEV(
+                  'a',
+                  {
+                    class: props.activeHref === link.href ? 'active' : 'inactive',
+                    'data-doc-link': '',
+                    href: link.href,
+                    children: link.label,
+                  },
+                  link.href,
+                  false,
+                  {},
+                ),
+              ),
+            },
+            null,
+            false,
+            {},
+          ),
+        'route-location-inline-dir',
+        () => [],
+      )
+
+      const sections = [
+        {
+          links: [
+            { href: '/docs/getting-started/overview', label: 'Overview' },
+            { href: '/docs/materials/routing', label: 'Routing' },
+          ],
+          title: 'Docs',
+        },
+      ]
+
+      const renderLayout = () => {
+        const location = useLocation()
+        return jsxDEV(
+          'nav',
+          {
+            children: sections.map((section) => {
+              const props = Object.create(null) as Record<string, unknown>
+              Object.defineProperties(props, {
+                activeHref: {
+                  configurable: true,
+                  enumerable: true,
+                  get() {
+                    return location.pathname
+                  },
+                },
+                links: {
+                  configurable: true,
+                  enumerable: true,
+                  get() {
+                    return [...section.links]
+                  },
+                },
+              })
+              return jsxDEV(Dir as any, props, section.title, false, {})
+            }),
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Layout = __eclipsaComponent(
+        () => renderLayout(),
+        'route-location-inline-layout',
+        () => [],
+      )
+
+      container.imports.set(
+        'route-location-inline-layout',
+        Promise.resolve({
+          default: () => renderLayout(),
+        }),
+      )
+      container.imports.set(
+        'route-location-inline-dir',
+        Promise.resolve({
+          default: (_scope: unknown[], propsOrArg?: unknown) =>
+            Dir(
+              (propsOrArg as {
+                activeHref: string
+                links: Array<{ href: string; label: string }>
+              }) ?? {
+                activeHref: '',
+                links: [],
+              },
+            ),
+        }),
+      )
+      container.imports.set(
+        'route-location-inline-panel',
+        Promise.resolve({
+          default: (_scope: unknown[], propsOrArg?: unknown) =>
+            Panel((propsOrArg as { children?: JSX.Element | JSX.Element[] }) ?? {}),
+        }),
+      )
+
+      const doc = container.doc as unknown as FakeDocument
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(Layout as any, {}, null, false, {}), container),
+      ) as unknown as FakeNode[]
+
+      for (const node of nodes) {
+        ;(doc.body as unknown as FakeElement).appendChild(node)
+      }
+
+      const initialLinks = queryFakeElements(doc.body as unknown as FakeNode, 'a[data-doc-link]')
+      expect(initialLinks).toHaveLength(2)
+      expect(initialLinks[0]?.getAttribute('class')).toBe('active')
+      expect(initialLinks[1]?.getAttribute('class')).toBe('inactive')
+
+      currentPath.value = '/docs/materials/routing'
+      currentUrl.value = 'http://local/docs/materials/routing'
+      await flushDirtyComponents(container)
+
+      const updatedLinks = queryFakeElements(doc.body as unknown as FakeNode, 'a[data-doc-link]')
+      expect(updatedLinks).toHaveLength(2)
+      expect(updatedLinks[0]?.getAttribute('class')).toBe('inactive')
+      expect(updatedLinks[1]?.getAttribute('class')).toBe('active')
+    })
+  })
+
+  it('updates motion-wrapped child links when a route-location parent rerender changes active links', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const currentPath = createDetachedRuntimeSignal(
+        container,
+        '$router:path',
+        '/docs/getting-started/overview',
+      )
+      const currentUrl = createDetachedRuntimeSignal(
+        container,
+        '$router:url',
+        'http://local/docs/getting-started/overview',
+      )
+
+      container.router = {
+        currentPath,
+        currentRoute: null,
+        currentUrl,
+        defaultTitle: '',
+        isNavigating: { value: false },
+        loadedRoutes: new Map(),
+        location: {
+          get hash() {
+            return ''
+          },
+          get href() {
+            return currentUrl.value
+          },
+          get pathname() {
+            return new URL(currentUrl.value).pathname
+          },
+          get search() {
+            return ''
+          },
+        },
+        manifest: [],
+        navigate: (async () => {}) as any,
+        prefetchedLoaders: new Map(),
+        routeModuleBusts: new Map(),
+        routePrefetches: new Map(),
+        sequence: 0,
+      } as unknown as RuntimeContainer['router']
+
+      const Dir = __eclipsaComponent(
+        (props: { activeHref: string; links: Array<{ href: string; label: string }> }) =>
+          jsxDEV(
+            motion.div as any,
+            {
+              children: props.links.map((link) =>
+                jsxDEV(
+                  'a',
+                  {
+                    class: props.activeHref === link.href ? 'active' : 'inactive',
+                    'data-doc-link': '',
+                    href: link.href,
+                    children: link.label,
+                  },
+                  link.href,
+                  false,
+                  {},
+                ),
+              ),
+            },
+            null,
+            false,
+            {},
+          ),
+        'route-location-motion-dir',
+        () => [],
+      )
+
+      const sections = [
+        {
+          links: [
+            { href: '/docs/getting-started/overview', label: 'Overview' },
+            { href: '/docs/materials/routing', label: 'Routing' },
+          ],
+          title: 'Docs',
+        },
+      ]
+
+      const renderLayout = () => {
+        const location = useLocation()
+        return jsxDEV(
+          'nav',
+          {
+            children: sections.map((section) => {
+              const props = Object.create(null) as Record<string, unknown>
+              Object.defineProperties(props, {
+                activeHref: {
+                  configurable: true,
+                  enumerable: true,
+                  get() {
+                    return location.pathname
+                  },
+                },
+                links: {
+                  configurable: true,
+                  enumerable: true,
+                  get() {
+                    return [...section.links]
+                  },
+                },
+              })
+              return jsxDEV(Dir as any, props, section.title, false, {})
+            }),
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Layout = __eclipsaComponent(
+        () => renderLayout(),
+        'route-location-motion-layout',
+        () => [],
+      )
+
+      container.imports.set(
+        'route-location-motion-layout',
+        Promise.resolve({
+          default: () => renderLayout(),
+        }),
+      )
+      container.imports.set(
+        'route-location-motion-dir',
+        Promise.resolve({
+          default: (_scope: unknown[], propsOrArg?: unknown) =>
+            Dir(
+              (propsOrArg as {
+                activeHref: string
+                links: Array<{ href: string; label: string }>
+              }) ?? {
+                activeHref: '',
+                links: [],
+              },
+            ),
+        }),
+      )
+
+      const doc = container.doc as unknown as FakeDocument
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(Layout as any, {}, null, false, {}), container),
+      ) as unknown as FakeNode[]
+
+      for (const node of nodes) {
+        ;(doc.body as unknown as FakeElement).appendChild(node)
+      }
+
+      const initialLinks = queryFakeElements(doc.body as unknown as FakeNode, 'a[data-doc-link]')
+      expect(initialLinks).toHaveLength(2)
+      expect(initialLinks[0]?.getAttribute('class')).toBe('active')
+      expect(initialLinks[1]?.getAttribute('class')).toBe('inactive')
+
+      currentPath.value = '/docs/materials/routing'
+      currentUrl.value = 'http://local/docs/materials/routing'
+      await flushDirtyComponents(container)
+
+      const updatedLinks = queryFakeElements(doc.body as unknown as FakeNode, 'a[data-doc-link]')
+      expect(updatedLinks).toHaveLength(2)
+      expect(updatedLinks[0]?.getAttribute('class')).toBe('inactive')
+      expect(updatedLinks[1]?.getAttribute('class')).toBe('active')
+    })
+  })
+
+  it('updates docs-like motion links when a route-location parent rerender changes active links', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const currentPath = createDetachedRuntimeSignal(
+        container,
+        '$router:path',
+        '/docs/getting-started/overview',
+      )
+      const currentUrl = createDetachedRuntimeSignal(
+        container,
+        '$router:url',
+        'http://local/docs/getting-started/overview',
+      )
+
+      container.router = {
+        currentPath,
+        currentRoute: null,
+        currentUrl,
+        defaultTitle: '',
+        isNavigating: { value: false },
+        loadedRoutes: new Map(),
+        location: {
+          get hash() {
+            return ''
+          },
+          get href() {
+            return currentUrl.value
+          },
+          get pathname() {
+            return new URL(currentUrl.value).pathname
+          },
+          get search() {
+            return ''
+          },
+        },
+        manifest: [],
+        navigate: (async () => {}) as any,
+        prefetchedLoaders: new Map(),
+        routeModuleBusts: new Map(),
+        routePrefetches: new Map(),
+        sequence: 0,
+      } as unknown as RuntimeContainer['router']
+
+      const Dir = __eclipsaComponent(
+        (props: {
+          activeHref: string
+          links: Array<{ href: string; label: string }>
+          onLinkClick?: () => void
+        }) =>
+          jsxDEV(
+            motion.div as any,
+            {
+              children: props.links.map((link) =>
+                props.onLinkClick
+                  ? jsxDEV(
+                      Link as any,
+                      {
+                        class: props.activeHref === link.href ? 'active' : 'inactive',
+                        'data-doc-link': '',
+                        href: link.href,
+                        onClick: props.onLinkClick,
+                        children: [
+                          jsxDEV(
+                            'div',
+                            {
+                              class: props.activeHref === link.href ? 'line active-line' : 'line',
+                            },
+                            null,
+                            false,
+                            {},
+                          ),
+                          jsxDEV(
+                            'div',
+                            {
+                              class: 'label',
+                              children: link.label,
+                            },
+                            null,
+                            false,
+                            {},
+                          ),
+                        ],
+                      },
+                      link.href,
+                      false,
+                      {},
+                    )
+                  : jsxDEV(
+                      Link as any,
+                      {
+                        class: props.activeHref === link.href ? 'active' : 'inactive',
+                        'data-doc-link': '',
+                        href: link.href,
+                        children: [
+                          jsxDEV(
+                            'div',
+                            {
+                              class: props.activeHref === link.href ? 'line active-line' : 'line',
+                            },
+                            null,
+                            false,
+                            {},
+                          ),
+                          jsxDEV(
+                            'div',
+                            {
+                              class: 'label',
+                              children: link.label,
+                            },
+                            null,
+                            false,
+                            {},
+                          ),
+                        ],
+                      },
+                      link.href,
+                      false,
+                      {},
+                    ),
+              ),
+            },
+            null,
+            false,
+            {},
+          ),
+        'route-location-docs-like-dir',
+        () => [],
+      )
+
+      const sections = [
+        {
+          links: [
+            { href: '/docs/getting-started/overview', label: 'Overview' },
+            { href: '/docs/materials/routing', label: 'Routing' },
+          ],
+          title: 'Docs',
+        },
+      ]
+
+      const renderLayout = () => {
+        const location = useLocation()
+        return jsxDEV(
+          'nav',
+          {
+            children: sections.map((section) => {
+              const props = Object.create(null) as Record<string, unknown>
+              Object.defineProperties(props, {
+                activeHref: {
+                  configurable: true,
+                  enumerable: true,
+                  get() {
+                    return location.pathname
+                  },
+                },
+                links: {
+                  configurable: true,
+                  enumerable: true,
+                  get() {
+                    return [...section.links]
+                  },
+                },
+              })
+              return jsxDEV(Dir as any, props, section.title, false, {})
+            }),
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Layout = __eclipsaComponent(
+        () => renderLayout(),
+        'route-location-docs-like-layout',
+        () => [],
+      )
+
+      container.imports.set(
+        'route-location-docs-like-layout',
+        Promise.resolve({
+          default: () => renderLayout(),
+        }),
+      )
+      container.imports.set(
+        'route-location-docs-like-dir',
+        Promise.resolve({
+          default: (_scope: unknown[], propsOrArg?: unknown) =>
+            Dir(
+              (propsOrArg as {
+                activeHref: string
+                links: Array<{ href: string; label: string }>
+                onLinkClick?: () => void
+              }) ?? {
+                activeHref: '',
+                links: [],
+              },
+            ),
+        }),
+      )
+
+      const doc = container.doc as unknown as FakeDocument
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(Layout as any, {}, null, false, {}), container),
+      ) as unknown as FakeNode[]
+
+      for (const node of nodes) {
+        ;(doc.body as unknown as FakeElement).appendChild(node)
+      }
+
+      const initialLinks = queryFakeElements(doc.body as unknown as FakeNode, 'a[data-doc-link]')
+      expect(initialLinks).toHaveLength(2)
+      expect(initialLinks[0]?.getAttribute('class')).toBe('active')
+      expect(initialLinks[1]?.getAttribute('class')).toBe('inactive')
+
+      currentPath.value = '/docs/materials/routing'
+      currentUrl.value = 'http://local/docs/materials/routing'
+      await flushDirtyComponents(container)
+
+      const updatedLinks = queryFakeElements(doc.body as unknown as FakeNode, 'a[data-doc-link]')
+      expect(updatedLinks).toHaveLength(2)
+      expect(updatedLinks[0]?.getAttribute('class')).toBe('inactive')
+      expect(updatedLinks[1]?.getAttribute('class')).toBe('active')
+    })
+  })
+
+  it('updates docs-like motion links after component state is resumed into an inactive tree', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const currentPath = createDetachedRuntimeSignal(
+        container,
+        '$router:path',
+        '/docs/getting-started/overview',
+      )
+      const currentUrl = createDetachedRuntimeSignal(
+        container,
+        '$router:url',
+        'http://local/docs/getting-started/overview',
+      )
+
+      container.router = {
+        currentPath,
+        currentRoute: null,
+        currentUrl,
+        defaultTitle: '',
+        isNavigating: { value: false },
+        loadedRoutes: new Map(),
+        location: {
+          get hash() {
+            return ''
+          },
+          get href() {
+            return currentUrl.value
+          },
+          get pathname() {
+            return new URL(currentUrl.value).pathname
+          },
+          get search() {
+            return ''
+          },
+        },
+        manifest: [],
+        navigate: (async () => {}) as any,
+        prefetchedLoaders: new Map(),
+        routeModuleBusts: new Map(),
+        routePrefetches: new Map(),
+        sequence: 0,
+      } as unknown as RuntimeContainer['router']
+
+      const Dir = __eclipsaComponent(
+        (props: {
+          activeHref: string
+          links: Array<{ href: string; label: string }>
+          onLinkClick?: () => void
+        }) =>
+          jsxDEV(
+            motion.div as any,
+            {
+              children: props.links.map((link) =>
+                jsxDEV(
+                  Link as any,
+                  {
+                    class: props.activeHref === link.href ? 'active' : 'inactive',
+                    'data-doc-link': '',
+                    href: link.href,
+                    children: [
+                      jsxDEV(
+                        'div',
+                        {
+                          class: props.activeHref === link.href ? 'line active-line' : 'line',
+                        },
+                        null,
+                        false,
+                        {},
+                      ),
+                      jsxDEV(
+                        'div',
+                        {
+                          class: 'label',
+                          children: link.label,
+                        },
+                        null,
+                        false,
+                        {},
+                      ),
+                    ],
+                  },
+                  link.href,
+                  false,
+                  {},
+                ),
+              ),
+            },
+            null,
+            false,
+            {},
+          ),
+        'route-location-docs-like-resume-dir',
+        () => [],
+      )
+
+      const sections = [
+        {
+          links: [
+            { href: '/docs/getting-started/overview', label: 'Overview' },
+            { href: '/docs/materials/routing', label: 'Routing' },
+          ],
+          title: 'Docs',
+        },
+      ]
+
+      const renderLayout = () => {
+        const location = useLocation()
+        return jsxDEV(
+          'nav',
+          {
+            children: sections.map((section) => {
+              const props = Object.create(null) as Record<string, unknown>
+              Object.defineProperties(props, {
+                activeHref: {
+                  configurable: true,
+                  enumerable: true,
+                  get() {
+                    return location.pathname
+                  },
+                },
+                links: {
+                  configurable: true,
+                  enumerable: true,
+                  get() {
+                    return [...section.links]
+                  },
+                },
+              })
+              return jsxDEV(Dir as any, props, section.title, false, {})
+            }),
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Layout = __eclipsaComponent(
+        () => renderLayout(),
+        'route-location-docs-like-resume-layout',
+        () => [],
+      )
+
+      container.imports.set(
+        'route-location-docs-like-resume-layout',
+        Promise.resolve({
+          default: () => renderLayout(),
+        }),
+      )
+      container.imports.set(
+        'route-location-docs-like-resume-dir',
+        Promise.resolve({
+          default: (_scope: unknown[], propsOrArg?: unknown) =>
+            Dir(
+              (propsOrArg as {
+                activeHref: string
+                links: Array<{ href: string; label: string }>
+                onLinkClick?: () => void
+              }) ?? {
+                activeHref: '',
+                links: [],
+              },
+            ),
+        }),
+      )
+
+      const doc = container.doc as unknown as FakeDocument
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(Layout as any, {}, null, false, {}), container),
+      ) as unknown as FakeNode[]
+
+      for (const node of nodes) {
+        ;(doc.body as unknown as FakeElement).appendChild(node)
+      }
+
+      for (const component of container.components.values()) {
+        component.active = false
+        component.didMount = false
+        component.rawProps = null
+      }
+
+      currentPath.value = '/docs/materials/routing'
+      currentUrl.value = 'http://local/docs/materials/routing'
+      await flushDirtyComponents(container)
+
+      const updatedLinks = queryFakeElements(doc.body as unknown as FakeNode, 'a[data-doc-link]')
+      expect(updatedLinks).toHaveLength(2)
+      expect(updatedLinks[0]?.getAttribute('class')).toBe('inactive')
+      expect(updatedLinks[1]?.getAttribute('class')).toBe('active')
+    })
+  })
+
+  it('updates keyed docs sidebar links when a shared layout patch rerenders a live shell', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const currentPath = createDetachedRuntimeSignal(
+        container,
+        '$router:path',
+        '/docs/getting-started/overview',
+      )
+      const currentUrl = createDetachedRuntimeSignal(
+        container,
+        '$router:url',
+        'http://local/docs/getting-started/overview',
+      )
+
+      container.router = {
+        currentPath,
+        currentRoute: null,
+        currentUrl,
+        defaultTitle: '',
+        isNavigating: { value: false },
+        loadedRoutes: new Map(),
+        location: {
+          get hash() {
+            return ''
+          },
+          get href() {
+            return currentUrl.value
+          },
+          get pathname() {
+            return new URL(currentUrl.value).pathname
+          },
+          get search() {
+            return ''
+          },
+        },
+        manifest: [],
+        navigate: (async () => {}) as any,
+        prefetchedLoaders: new Map(),
+        routeModuleBusts: new Map(),
+        routePrefetches: new Map(),
+        sequence: 0,
+      } as unknown as RuntimeContainer['router']
+
+      const sections = [
+        {
+          links: [
+            { href: '/docs/getting-started/overview', label: 'Overview' },
+            { href: '/docs/getting-started/quick-start', label: 'Quick Start' },
+          ],
+          title: 'Getting Started',
+        },
+        {
+          links: [
+            { href: '/docs/materials/routing', label: 'Routing' },
+            { href: '/docs/materials/signal', label: 'Signal' },
+          ],
+          title: 'Materials',
+        },
+      ]
+
+      const Dir = __eclipsaComponent(
+        (props: {
+          activeHref: string
+          links: Array<{ href: string; label: string }>
+          title: string
+        }) =>
+          jsxDEV(
+            motion.div as any,
+            {
+              children: props.links.map((link) =>
+                jsxDEV(
+                  Link as any,
+                  {
+                    class: props.activeHref === link.href ? 'active' : 'inactive',
+                    'data-doc-link': `${props.title}:${link.label}`,
+                    href: link.href,
+                    children: [
+                      jsxDEV(
+                        'div',
+                        {
+                          class: props.activeHref === link.href ? 'line active-line' : 'line',
+                        },
+                        null,
+                        false,
+                        {},
+                      ),
+                      jsxDEV(
+                        'div',
+                        {
+                          class: 'label',
+                          children: link.label,
+                        },
+                        null,
+                        false,
+                        {},
+                      ),
+                    ],
+                  },
+                  link.href,
+                  false,
+                  {},
+                ),
+              ),
+            },
+            null,
+            false,
+            {},
+          ),
+        'shared-layout-docs-dir',
+        () => [],
+      )
+
+      const LayoutBody = (props: { children?: JSX.Element }) => {
+        const location = useLocation()
+        return jsxDEV(
+          'div',
+          {
+            children: [
+              jsxDEV(
+                'nav',
+                {
+                  children: sections.map((section) =>
+                    jsxDEV(
+                      Dir as any,
+                      {
+                        activeHref: location.pathname,
+                        links: [...section.links],
+                        title: section.title,
+                      },
+                      section.title,
+                      false,
+                      {},
+                    ),
+                  ),
+                },
+                null,
+                false,
+                {},
+              ),
+              props.children ?? null,
+            ],
+          },
+          null,
+          false,
+          {},
+        )
+      }
+
+      const Layout = __eclipsaComponent(LayoutBody, 'shared-layout-docs-layout', () => [], {
+        children: 1,
+      })
+
+      container.imports.set(
+        'shared-layout-docs-layout',
+        Promise.resolve({
+          default: (_scope: unknown[], propsOrArg?: unknown) =>
+            LayoutBody((propsOrArg as { children?: JSX.Element }) ?? {}),
+        }),
+      )
+      container.imports.set(
+        'shared-layout-docs-dir',
+        Promise.resolve({
+          default: (_scope: unknown[], propsOrArg?: unknown) =>
+            Dir(
+              (propsOrArg as {
+                activeHref: string
+                links: Array<{ href: string; label: string }>
+                title: string
+              }) ?? {
+                activeHref: '',
+                links: [],
+                title: '',
+              },
+            ),
+        }),
+      )
+
+      const host = new FakeElement('div')
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(
+          jsxDEV(
+            Layout as any,
+            {
+              children: jsxDEV('main', { children: 'overview' }, null, false, {}),
+            },
+            null,
+            false,
+            {},
+          ),
+          container,
+        ),
+      ) as unknown as FakeNode[]
+
+      for (const node of nodes) {
+        host.appendChild(node)
+      }
+
+      const getLink = (label: string) =>
+        queryFakeElements(host as unknown as FakeNode, 'a[data-doc-link]').find(
+          (link) => link.textContent === label,
+        ) ?? null
+      const getLine = (label: string) => {
+        const link = getLink(label)
+        if (!link) {
+          return null
+        }
+        return (
+          link.childNodes.find(
+            (child): child is FakeElement =>
+              child instanceof FakeElement && child.tagName === 'div',
+          ) ?? null
+        )
+      }
+
+      expect(getLink('Overview')?.getAttribute('class')).toBe('active')
+      expect(getLink('Routing')?.getAttribute('class')).toBe('inactive')
+
+      const layout = container.components.get('c0')
+      expect(layout).toBeTruthy()
+
+      const nextChildren = jsxDEV('main', { children: 'routing' }, null, false, {})
+      const nextProps = Object.create(null) as Record<string, unknown>
+      Object.defineProperties(
+        nextProps,
+        Object.getOwnPropertyDescriptors((layout!.props as Record<string, unknown>) ?? {}),
+      )
+      Object.defineProperty(nextProps, 'children', {
+        configurable: true,
+        enumerable: true,
+        value: nextChildren,
+        writable: true,
+      })
+
+      layout!.props = nextProps
+      layout!.rawProps = nextProps
+      layout!.active = false
+      layout!.activateModeOnFlush = 'patch'
+      layout!.reuseExistingDomOnActivate = true
+      layout!.reuseProjectionSlotDomOnActivate = true
+
+      currentPath.value = '/docs/materials/routing'
+      currentUrl.value = 'http://local/docs/materials/routing'
+      container.dirty.add('c0')
+      await flushDirtyComponents(container)
+
+      expect(getLink('Overview')?.getAttribute('class')).toBe('inactive')
+      expect(getLink('Routing')?.getAttribute('class')).toBe('active')
+      expect(getLine('Overview')?.getAttribute('class')).toBe('line')
+      expect(getLine('Routing')?.getAttribute('class')).toBe('line active-line')
+    })
+  })
+
+  it('serializes router subscriptions when useLocation is only read through getter-backed child props', async () => {
+    const Dir = __eclipsaComponent(
+      (props: { activeHref: string }) =>
+        jsxDEV(
+          'a',
+          { class: props.activeHref === '/docs/getting-started/overview' ? 'active' : 'inactive' },
+          null,
+          false,
+          {},
+        ),
+      'ssr-route-location-dir',
+      () => [],
+    )
+
+    const Layout = __eclipsaComponent(
+      () => {
+        const location = useLocation()
+        const props = Object.create(null) as Record<string, unknown>
+        Object.defineProperty(props, 'activeHref', {
+          configurable: true,
+          enumerable: true,
+          get() {
+            return location.pathname
+          },
+        })
+        return jsxDEV(Dir as any, props, 'docs', false, {})
+      },
+      'ssr-route-location-layout',
+      () => [],
+    )
+
+    const { payload } = await renderSSRAsync(() => jsxDEV(Layout as any, {}, null, false, {}), {
+      prepare(container) {
+        primeLocationState(container, 'https://example.com/docs/getting-started/overview')
+      },
+    })
+
+    expect(payload.subscriptions['$router:url']).toContain('c0')
+  })
+
+  it('patches stable-shape boundary contents in place for text and class changes', () => {
+    withFakeNodeGlobal(() => {
+      const parent = new FakeElement('div')
+      const start = new FakeComment('start')
+      const current = new FakeElement('a')
+      current.setAttribute('class', 'before')
+      current.appendChild(new FakeText('Overview'))
+      const end = new FakeComment('end')
+      parent.appendChild(start)
+      parent.appendChild(current)
+      parent.appendChild(end)
+
+      const next = new FakeElement('a')
+      next.setAttribute('class', 'after')
+      next.appendChild(new FakeText('Quick Start'))
+
+      expect(
+        tryPatchBoundaryContentsInPlace(start as unknown as Comment, end as unknown as Comment, [
+          next as unknown as Node,
+        ]),
+      ).toBe(true)
+      expect(current.getAttribute('class')).toBe('after')
+      expect(current.textContent).toBe('Quick Start')
+    })
+  })
+
+  it('preserves equal resumable marker comments during in-place patches', () => {
+    withFakeNodeGlobal(() => {
+      const parent = new FakeElement('div')
+      const start = new FakeComment('start')
+      const current = new FakeComment('ec:c:c0:start')
+      const end = new FakeComment('end')
+      parent.appendChild(start)
+      parent.appendChild(current)
+      parent.appendChild(end)
+
+      const next = new FakeComment('ec:c:c0:start')
+
+      expect(
+        tryPatchBoundaryContentsInPlace(start as unknown as Comment, end as unknown as Comment, [
+          next as unknown as Node,
+        ]),
+      ).toBe(true)
+    })
+  })
+
+  it('switches Show branches through live insert updates', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const open = createDetachedRuntimeSignal<boolean | number>(container, 's0', true)
+      const host = new FakeElement('div')
+      const marker = new FakeComment('marker')
+      host.appendChild(marker)
+
+      withRuntimeContainer(container, () => {
+        insert(
+          (() =>
+            jsxDEV(
+              Show as any,
+              {
+                children: (value: unknown) =>
+                  jsxDEV(
+                    'strong',
+                    { children: value === true ? 'open' : String(value) },
+                    null,
+                    false,
+                    {},
+                  ),
+                fallback: (value: unknown) =>
+                  jsxDEV(
+                    'span',
+                    { children: value === false ? 'closed' : String(value) },
+                    null,
+                    false,
+                    {},
+                  ),
+                when: open.value,
+              },
+              null,
+              false,
+              {},
+            )) as Parameters<typeof insert>[0],
+          host as unknown as Node,
+          marker as unknown as Node,
+        )
+      })
+
+      expect((host.childNodes[0] as FakeElement | undefined)?.tagName).toBe('strong')
+      expect(host.textContent).toContain('open')
+
+      open.value = false
+      await flushAsync()
+
+      expect((host.childNodes[0] as FakeElement | undefined)?.tagName).toBe('span')
+      expect(host.textContent).toContain('closed')
+
+      open.value = 0
+      await flushAsync()
+      expect((host.childNodes[0] as FakeElement | undefined)?.tagName).toBe('span')
+      expect(host.textContent).toContain('0')
+    })
+  })
+
+  it('preserves keyed For row identity when order changes', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const items = createDetachedRuntimeSignal(container, 's0', [
+        { id: 'a', label: 'A' },
+        { id: 'b', label: 'B' },
+      ])
+      const host = new FakeElement('div')
+      const marker = new FakeComment('marker')
+      host.appendChild(marker)
+
+      withRuntimeContainer(container, () => {
+        insert(
+          (() =>
+            jsxDEV(
+              For as any,
+              {
+                arr: items.value,
+                fn: (item: { id: string; label: string }) =>
+                  jsxDEV('li', { children: item.label }, null, false, {}),
+                key: (item: { id: string; label: string }) => item.id,
+              },
+              null,
+              false,
+              {},
+            )) as Parameters<typeof insert>[0],
+          host as unknown as Node,
+          marker as unknown as Node,
+        )
+      })
+
+      const initialRows = host.childNodes.filter(
+        (node): node is FakeElement => node instanceof FakeElement && node.tagName === 'li',
+      )
+      expect(initialRows).toHaveLength(2)
+
+      const [firstRow, secondRow] = initialRows
+      items.value = [
+        { id: 'b', label: 'B' },
+        { id: 'a', label: 'A' },
+      ]
+      await flushAsync()
+
+      const reorderedRows = host.childNodes.filter(
+        (node): node is FakeElement => node instanceof FakeElement && node.tagName === 'li',
+      )
+      expect(reorderedRows).toHaveLength(2)
+      expect(reorderedRows[0]).toBe(secondRow)
+      expect(reorderedRows[1]).toBe(firstRow)
+      expect(reorderedRows.map((row) => row.textContent)).toEqual(['B', 'A'])
+    })
+  })
+
+  it('does not reuse keyed ranges across sibling parents with overlapping keys', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const page = createDetachedRuntimeSignal(container, 's0', {
+        headings: [{ key: 'Why eclipsa?', label: 'Toc Why eclipsa?' }],
+        sections: [
+          { key: 'Getting Started', label: 'Nav Getting Started' },
+          { key: 'Materials', label: 'Nav Materials' },
+          { key: 'Integrations', label: 'Nav Integrations' },
+        ],
+      })
+      const host = new FakeElement('div')
+      const marker = new FakeComment('marker')
+      host.appendChild(marker)
+
+      withRuntimeContainer(container, () => {
+        insert(
+          (() =>
+            jsxDEV(
+              'div',
+              {
+                children: [
+                  jsxDEV(
+                    'nav',
+                    {
+                      children: page.value.sections.map((section) =>
+                        jsxDEV('a', { children: section.label }, section.key, false, {}),
+                      ),
+                    },
+                    null,
+                    false,
+                    {},
+                  ),
+                  jsxDEV(
+                    'aside',
+                    {
+                      children: page.value.headings.map((heading) =>
+                        jsxDEV('a', { children: heading.label }, heading.key, false, {}),
+                      ),
+                    },
+                    null,
+                    false,
+                    {},
+                  ),
+                ],
+              },
+              null,
+              false,
+              {},
+            )) as Parameters<typeof insert>[0],
+          host as unknown as Node,
+          marker as unknown as Node,
+        )
+      })
+
+      const getRoot = () =>
+        host.childNodes.find(
+          (node): node is FakeElement => node instanceof FakeElement && node.tagName === 'div',
+        )!
+      const getRegionLinks = (tagName: 'aside' | 'nav') => {
+        const region = getRoot().childNodes.find(
+          (node): node is FakeElement => node instanceof FakeElement && node.tagName === tagName,
+        )
+        return (
+          region?.childNodes.filter(
+            (node): node is FakeElement => node instanceof FakeElement && node.tagName === 'a',
+          ) ?? []
+        )
+      }
+
+      expect(getRegionLinks('nav').map((link) => link.textContent)).toEqual([
+        'Nav Getting Started',
+        'Nav Materials',
+        'Nav Integrations',
+      ])
+      expect(getRegionLinks('aside').map((link) => link.textContent)).toEqual(['Toc Why eclipsa?'])
+
+      const initialNavMaterialsLink = getRegionLinks('nav')[1]!
+
+      page.value = {
+        headings: [
+          { key: 'Materials', label: 'Toc Materials' },
+          { key: 'Integrations', label: 'Toc Integrations' },
+        ],
+        sections: [...page.value.sections],
+      }
+      await flushAsync()
+
+      const navLinks = getRegionLinks('nav')
+      const asideLinks = getRegionLinks('aside')
+      expect(navLinks.map((link) => link.textContent)).toEqual([
+        'Nav Getting Started',
+        'Nav Materials',
+        'Nav Integrations',
+      ])
+      expect(asideLinks.map((link) => link.textContent)).toEqual([
+        'Toc Materials',
+        'Toc Integrations',
+      ])
+      expect(asideLinks[0]).not.toBe(initialNavMaterialsLink)
+    })
+  })
+
+  it('keeps keyed child component contents when same-key items survive an update', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const items = createDetachedRuntimeSignal(container, 's0', [
+        { id: 'first-example', label: 'First example' },
+        { id: 'returned-handle', label: 'Returned handle' },
+        { id: 'form-submission', label: 'Form submission' },
+      ])
+      const TocLinkBody = (props: { label: string }) =>
+        jsxDEV('a', { children: props.label }, null, false, {})
+      const TocLink = __eclipsaComponent(TocLinkBody, 'keyed-toc-link', () => [])
+      const host = new FakeElement('div')
+      const marker = new FakeComment('marker')
+      host.appendChild(marker)
+
+      withRuntimeContainer(container, () => {
+        insert(
+          (() =>
+            jsxDEV(
+              'aside',
+              {
+                children: items.value.map((item) =>
+                  jsxDEV(TocLink, { label: item.label }, item.id, false, {}),
+                ),
+              },
+              null,
+              false,
+              {},
+            )) as Parameters<typeof insert>[0],
+          host as unknown as Node,
+          marker as unknown as Node,
+        )
+      })
+
+      const getLinks = () =>
+        host.childNodes.flatMap((node) =>
+          node instanceof FakeElement && node.tagName === 'aside'
+            ? node.childNodes.filter(
+                (child): child is FakeElement =>
+                  child instanceof FakeElement && child.tagName === 'a',
+              )
+            : [],
+        )
+
+      expect(getLinks().map((link) => link.textContent)).toEqual([
+        'First example',
+        'Returned handle',
+        'Form submission',
+      ])
+
+      items.value = [
+        { id: 'first-example', label: 'First example' },
+        { id: 'returned-handle', label: 'Returned handle' },
+        { id: 'manual-reload', label: 'Manual reload' },
+      ]
+      await flushAsync()
+
+      expect(getLinks().map((link) => link.textContent)).toEqual([
+        'First example',
+        'Returned handle',
+        'Manual reload',
+      ])
+    })
+  })
+
+  it('renders keyed row elements inside For after live updates', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const todos = createDetachedRuntimeSignal(container, 's0', ['ToDo1'])
+      const host = new FakeElement('div')
+      const marker = new FakeComment('marker')
+      host.appendChild(marker)
+
+      withRuntimeContainer(container, () => {
+        insert(
+          (() =>
+            jsxDEV(
+              'ul',
+              {
+                children: jsxDEV(
+                  For as any,
+                  {
+                    arr: todos.value,
+                    fn: (todo: string, i: number) => jsxDEV('li', { children: todo }, i, false, {}),
+                  },
+                  null,
+                  false,
+                  {},
+                ),
+              },
+              null,
+              false,
+              {},
+            )) as Parameters<typeof insert>[0],
+          host as unknown as Node,
+          marker as unknown as Node,
+        )
+      })
+
+      const getRows = (): FakeElement[] =>
+        host.childNodes.flatMap((node) =>
+          node instanceof FakeComment || !(node instanceof FakeElement)
+            ? []
+            : node.tagName === 'ul'
+              ? node.childNodes.filter(
+                  (child): child is FakeElement =>
+                    child instanceof FakeElement && child.tagName === 'li',
+                )
+              : [],
+        )
+
+      expect(getRows()).toHaveLength(1)
+      todos.value = ['ToDo1', 'Ship e2e']
+      await flushAsync()
+
+      const rows = getRows()
+      expect(rows).toHaveLength(2)
+      expect(rows.map((row) => row.textContent)).toEqual(['ToDo1', 'Ship e2e'])
+    })
+  })
+
+  it('preserves static text when inserting a primitive before a template marker', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const count = createDetachedRuntimeSignal(container, 's0', 0)
+      const button = new FakeElement('button')
+      const staticText = new FakeText('Layout count: ')
+      const marker = new FakeComment('marker')
+      button.appendChild(staticText)
+      button.appendChild(marker)
+
+      withRuntimeContainer(container, () => {
+        insert(
+          (() => count.value) as Parameters<typeof insert>[0],
+          button as unknown as Node,
+          marker as unknown as Node,
+        )
+      })
+
+      expect(button.childNodes).toHaveLength(3)
+      expect(button.childNodes[0]).toBe(staticText)
+      expect((button.childNodes[1] as FakeText).data).toBe('0')
+
+      count.value = 1
+      await flushAsync()
+
+      expect(button.childNodes).toHaveLength(3)
+      expect(button.childNodes[0]).toBe(staticText)
+      expect((button.childNodes[1] as FakeText).data).toBe('1')
+    })
+  })
+
+  it('normalizes render references without an explicit static flag during serialization', () => {
+    const container = createContainer()
+    const serialized = serializeContainerValue(container, {
+      props: {
+        src: '/app/+client.dev.tsx',
+        type: 'module',
+      },
+      type: 'script',
+    })
+
+    expect(serialized).toEqual({
+      __eclipsa_type: 'ref',
+      data: [
+        'element',
+        'script',
+        null,
+        {
+          __eclipsa_type: 'object',
+          entries: [
+            ['src', '/app/+client.dev.tsx'],
+            ['type', 'module'],
+          ],
+        },
+        null,
+        false,
+        null,
+      ],
+      kind: 'render',
+      token: 'jsx',
+    })
+
+    expect(deserializeContainerValue(container, serialized as any)).toEqual({
+      isStatic: false,
+      key: undefined,
+      metadata: undefined,
+      props: {
+        src: '/app/+client.dev.tsx',
+        type: 'module',
+      },
+      type: 'script',
+    })
+  })
+
+  it('serializes computed handles as computed-signal references without losing computed semantics', () => {
+    withFakeNodeGlobal(() => {
+      const container = createContainer()
+      let count!: { value: number }
+      let computed!: { value: number }
+
+      const ComputedBody = () => {
+        count = useSignal(1)
+        computed = useComputed(() => count.value * 2, [count])
+        return 'ready'
+      }
+
+      const ComputedComponent = __eclipsaComponent(
+        ComputedBody,
+        'computed-serialization-component',
+        () => [],
+      )
+
+      withRuntimeContainer(container, () => {
+        const nodes = renderClientInsertable(
+          jsxDEV(ComputedComponent as any, {}, null, false, {}),
+          container,
+        )
+        const host = new FakeElement('div')
+        for (const node of nodes as FakeNode[]) {
+          host.appendChild(node)
+        }
+      })
+
+      const serialized = serializeContainerValue(container, {
+        computed,
+      })
+
+      expect(serialized).toEqual({
+        __eclipsa_type: 'object',
+        entries: [
+          [
+            'computed',
+            {
+              __eclipsa_type: 'ref',
+              kind: 'computed-signal',
+              token: 's1',
+            },
+          ],
+        ],
+      })
+
+      const restored = deserializeContainerValue(container, serialized as any) as {
+        computed: { value: number }
+      }
+
+      expect(restored.computed.value).toBe(2)
+
+      count.value = 3
+
+      expect(restored.computed.value).toBe(6)
+      expect(() =>
+        serializeContainerValue(container, {
+          computed: restored.computed,
+        }),
+      ).not.toThrow()
+    })
+  })
+
+  it('repopulates keyed For ranges after clearing them', async () => {
+    await withFakeNodeGlobal(async () => {
+      const container = createContainer()
+      const items = createDetachedRuntimeSignal(container, 's0', [
+        { id: 'a', label: 'A' },
+        { id: 'b', label: 'B' },
+      ])
+      const host = new FakeElement('div')
+      const marker = new FakeComment('marker')
+      host.appendChild(marker)
+
+      withRuntimeContainer(container, () => {
+        insert(
+          (() =>
+            jsxDEV(
+              For as any,
+              {
+                arr: items.value,
+                fn: (item: { id: string; label: string }) =>
+                  jsxDEV('li', { children: item.label }, null, false, {}),
+                key: (item: { id: string; label: string }) => item.id,
+              },
+              null,
+              false,
+              {},
+            )) as Parameters<typeof insert>[0],
+          host as unknown as Node,
+          marker as unknown as Node,
+        )
+      })
+
+      const getRows = () =>
+        host.childNodes.filter(
+          (node): node is FakeElement => node instanceof FakeElement && node.tagName === 'li',
+        )
+
+      expect(getRows().map((row) => row.textContent)).toEqual(['A', 'B'])
+
+      items.value = []
+      await flushAsync()
+      expect(getRows()).toHaveLength(0)
+
+      items.value = [
+        { id: 'a', label: 'A' },
+        { id: 'c', label: 'C' },
+      ]
+      await flushAsync()
+      expect(getRows().map((row) => row.textContent)).toEqual(['A', 'C'])
     })
   })
 })
diff --git a/packages/eclipsa/core/runtime.ts b/packages/eclipsa/core/runtime.ts
index 6f6575a..9079de6 100644
--- a/packages/eclipsa/core/runtime.ts
+++ b/packages/eclipsa/core/runtime.ts
@@ -1,440 +1,315 @@
 import type { JSX } from '../jsx/types.ts'
 import { FRAGMENT } from '../jsx/shared.ts'
-import { isSSRAttrValue, isSSRTemplate, jsxDEV } from '../jsx/jsx-dev-runtime.ts'
-import { isPendingSignalError, isSuspenseType, type SuspenseProps } from './suspense.ts'
+import { isSSRRawValue, isSSRTemplate } from '../jsx/jsx-dev-runtime.ts'
+import {
+  createPendingSignalError,
+  isPendingSignalError,
+  isSuspenseType,
+  type SuspenseProps,
+} from './suspense.ts'
 import type { ResumeHmrUpdatePayload } from './resume-hmr.ts'
 import {
-  deserializeValue,
-  escapeJSONScriptText,
-  serializeValue,
-  type SerializedReference,
-  type SerializedValue,
-} from './serialize.ts'
+  ACTION_CSRF_FIELD,
+  ACTION_CSRF_INPUT_ATTR,
+  getCurrentActionCsrfToken,
+  readActionCsrfTokenFromDocument,
+} from './action-csrf.ts'
+import { deserializePublicValue, serializePublicValue, type SerializedValue } from './hooks.ts'
+import { escapeJSONScriptText } from './serialize.ts'
 import type { Component } from './component.ts'
+import type { Insertable } from './client/types.ts'
+import { getContextProviderMeta } from './context.ts'
 import {
   ROUTE_METADATA_HEAD_ATTR,
   composeRouteMetadata,
-  type RouteMetadata,
   type RouteMetadataExport,
 } from './metadata.ts'
 import {
-  __eclipsaComponent,
-  getActionHandleMeta,
-  getActionHookMeta,
   getComponentMeta,
+  getExternalComponentMeta,
   getEventMeta,
   getRegisteredActionHookIds,
   getRegisteredActionHook,
   getRegisteredLoaderHookIds,
   getRegisteredLoaderHook,
   getLazyMeta,
-  getLoaderHandleMeta,
-  getLoaderHookMeta,
-  getNavigateMeta,
   getSignalMeta,
   getWatchMeta,
   setNavigateMeta,
   setSignalMeta,
   type ComponentMeta,
+  type ExternalComponentDescriptor,
+  type ExternalComponentMeta,
   type EventDescriptor,
   type LazyMeta,
   type SignalMeta,
 } from './internal.ts'
 import {
+  ROUTE_DATA_ENDPOINT,
   ROUTE_LINK_ATTR,
   ROUTE_PREFETCH_ATTR,
   ROUTE_PREFLIGHT_REQUEST_HEADER,
   ROUTE_REPLACE_ATTR,
+  normalizeNavigateInput,
   type LinkPrefetchMode,
   type Navigate,
   type NavigateOptions,
   type RouteManifest,
+  type RouteLocation,
   type RouteModuleManifest,
   type RouteParams,
+  type RouteTarget,
 } from './router-shared.ts'
-
-const CONTAINER_STACK_KEY = Symbol.for('eclipsa.container-stack')
-const FRAME_STACK_KEY = Symbol.for('eclipsa.frame-stack')
-const DIRTY_FLUSH_PROMISE_KEY = Symbol.for('eclipsa.dirty-flush-promise')
-const ASYNC_SIGNAL_SNAPSHOT_CACHE_KEY = Symbol.for('eclipsa.async-signal-snapshot-cache')
-const STANDALONE_SIGNAL_ID_KEY = Symbol.for('eclipsa.standalone-signal-id')
-const ACTION_FORM_ATTR = 'data-e-action-form'
-const ROUTER_EVENT_STATE_KEY = Symbol.for('eclipsa.router-event-state')
-const ROUTER_CURRENT_PATH_SIGNAL_ID = '$router:path'
-const ROUTER_IS_NAVIGATING_SIGNAL_ID = '$router:isNavigating'
-const ROUTER_LINK_BOUND_KEY = Symbol.for('eclipsa.router-link-bound')
-const ROUTER_LINK_PREFETCH_BOUND_KEY = Symbol.for('eclipsa.router-link-prefetch-bound')
-const ROUTE_NOT_FOUND_KEY = Symbol.for('eclipsa.route-not-found')
-const ROUTE_PARAMS_PROP = '__eclipsa_route_params'
-const ROUTE_SLOT_ROUTE_KEY = Symbol.for('eclipsa.route-slot-route')
-const RESUME_CONTAINERS_KEY = Symbol.for('eclipsa.resume-containers')
-export const RESUME_STATE_ELEMENT_ID = 'eclipsa-resume'
-export const RESUME_FINAL_STATE_ELEMENT_ID = 'eclipsa-resume-final'
-const ROOT_COMPONENT_ID = '$root'
-const SUSPENSE_COMPONENT_SYMBOL = '$suspense'
-const ROUTE_SLOT_TYPE = 'route-slot'
-const PROJECTION_SLOT_TYPE = 'projection-slot'
-const CONTAINER_ID_KEY = Symbol.for('eclipsa.runtime-container-id')
-const RENDER_COMPONENT_TYPE_KEY = Symbol.for('eclipsa.render-component-type')
-const RENDER_REFERENCE_KIND = 'render'
-const REF_SIGNAL_ATTR = 'data-e-ref'
-const STREAM_STATE_KEY = '__eclipsa_stream'
-type DomConstructorName =
-  | 'Element'
-  | 'HTMLElement'
-  | 'HTMLInputElement'
-  | 'HTMLTextAreaElement'
-  | 'HTMLAnchorElement'
-  | 'HTMLFormElement'
-
-export interface ResumeComponentPayload {
-  props: SerializedValue
-  projectionSlots?: Record<string, number>
-  scope: string
-  signalIds: string[]
-  symbol: string
-  visibleCount: number
-  watchCount: number
-}
-
-interface ResumeWatchPayload {
-  componentId: string
-  mode: WatchMode
-  scope: string
-  signals: string[]
-  symbol: string
-}
-
-interface ResumeActionPayload {
-  error: SerializedValue
-  input: SerializedValue
-  result: SerializedValue
-}
-
-interface ResumeVisiblePayload {
-  componentId: string
-  scope: string
-  symbol: string
-}
-
-interface ResumeLoaderPayload {
-  data: SerializedValue
-  error: SerializedValue
-  loaded: boolean
-}
-
-interface LoaderSnapshot {
-  data: unknown
-  error: unknown
-  loaded: boolean
-}
-
-export interface ResumePayload {
-  actions: Record<string, ResumeActionPayload>
-  components: Record<string, ResumeComponentPayload>
-  loaders: Record<string, ResumeLoaderPayload>
-  scopes: Record<string, SerializedValue[]>
-  signals: Record<string, SerializedValue>
-  subscriptions: Record<string, string[]>
-  symbols: Record<string, string>
-  visibles: Record<string, ResumeVisiblePayload>
-  watches: Record<string, ResumeWatchPayload>
-}
-
-interface StreamedSuspenseChunk {
-  boundaryId: string
-  payloadScriptId: string
-  templateId: string
-}
-
-interface StreamState {
-  enqueue: (chunk: StreamedSuspenseChunk) => void
-  pending: StreamedSuspenseChunk[]
-  process?: () => Promise<void>
-  processing?: Promise<void> | null
-}
-
-interface SignalRecord<T = unknown> {
-  effects: Set<ReactiveEffect>
-  handle: {
-    value: T
-  }
-  id: string
-  subscribers: Set<string>
-  value: T
-}
-
-type CleanupCallback = () => void
-
-const getDomContexts = (value: unknown): Array<Window | typeof globalThis> => {
-  const contexts: Array<Window | typeof globalThis> = []
-  if (!value || (typeof value !== 'object' && typeof value !== 'function')) {
-    return contexts
+import {
+  ACTION_FORM_ATTR,
+  BIND_CHECKED_ATTR,
+  BIND_CHECKED_PROP,
+  BIND_VALUE_ATTR,
+  BIND_VALUE_PROP,
+  CLIENT_INSERT_OWNER_ID_PREFIX,
+  CLIENT_INSERT_OWNER_SYMBOL,
+  CONTAINER_ID_KEY,
+  DIRTY_FLUSH_PROMISE_KEY,
+  DOM_COMMENT_NODE,
+  DOM_SHOW_COMMENT,
+  DOM_TEXT_NODE,
+  EXTERNAL_ROOT_ATTR,
+  EXTERNAL_ROOT_COMPONENT_ATTR,
+  EXTERNAL_ROOT_KIND_ATTR,
+  PENDING_RESUME_LINK_KEY,
+  PROJECTION_SLOT_TYPE,
+  REF_SIGNAL_ATTR,
+  RESUME_FINAL_STATE_ELEMENT_ID,
+  RESUME_STATE_ELEMENT_ID,
+  ROOT_COMPONENT_ID,
+  ROUTE_ERROR_PROP,
+  ROUTE_NOT_FOUND_KEY,
+  ROUTE_PARAMS_PROP,
+  ROUTER_CURRENT_PATH_SIGNAL_ID,
+  ROUTER_CURRENT_URL_SIGNAL_ID,
+  ROUTER_EVENT_STATE_KEY,
+  ROUTER_IS_NAVIGATING_SIGNAL_ID,
+  ROUTER_LINK_BOUND_KEY,
+  ROUTER_LINK_PREFETCH_BOUND_KEY,
+  SCOPED_STYLE_ATTR,
+  STANDALONE_SIGNAL_ID_KEY,
+  STREAM_STATE_KEY,
+  SUSPENSE_COMPONENT_SYMBOL,
+  getExternalSlotTag,
+} from './runtime/constants.ts'
+import {
+  captureBoundaryFocus,
+  captureDocumentFocus,
+  getBoundaryChildren,
+  getManagedAttributeSnapshot,
+  getRememberedInsertMarkerNodeCount,
+  hasOwnerDocument,
+  isElementNode,
+  isHTMLElementNode,
+  isHTMLAnchorElementNode,
+  isHTMLFormElementNode,
+  isHTMLInputElementNode,
+  isHTMLSelectElementNode,
+  isHTMLTextAreaElementNode,
+  listNodeChildren,
+  rememberInsertMarkerRange,
+  rememberManagedAttributesForNode,
+  rememberManagedAttributesForNodes,
+  replaceManagedAttributeSnapshot,
+  restoreBoundaryFocus,
+  restorePendingFocus as restorePendingFocusInDocument,
+  setRememberedInsertMarkerNodeCount,
+  syncManagedAttributeSnapshot,
+  type PendingFocusRestore,
+} from './runtime/dom.ts'
+import {
+  clearAsyncSignalSnapshot as clearGlobalAsyncSignalSnapshot,
+  getContainerStack,
+  getContextValueStack,
+  getCurrentContainer,
+  getFrameStack,
+  getResumeContainers,
+  readAsyncSignalSnapshot as readGlobalAsyncSignalSnapshot,
+  writeAsyncSignalSnapshot as writeGlobalAsyncSignalSnapshot,
+} from './runtime/globals.ts'
+import {
+  EMPTY_ROUTE_PARAMS,
+  ROUTE_DOCUMENT_FALLBACK,
+  createRouteElement,
+  createRouterLocation,
+  createStandaloneLocation,
+  findSpecialManifestEntry,
+  getRouteModuleUrl,
+  isRouteDataSuccess,
+  isLoaderSignalId,
+  isRouteSlot,
+  matchRouteManifest,
+  normalizeRoutePath,
+  parseLocationHref,
+  resolveCurrentRouteManifestEntry,
+  resolveNotFoundRouteMatch,
+  resolvePageRouteMatch,
+  resolveRoutableMatch,
+  resolveRouteSlot,
+  routeCacheKey,
+  routePrefetchKey,
+} from './runtime/routes.ts'
+import {
+  createSSRRenderer,
+  escapeAttr,
+  escapeText,
+  isDangerouslySetInnerHTMLProp,
+  resolveDangerouslySetInnerHTML,
+  toEventName,
+} from './runtime/ssr.ts'
+import {
+  createComponentBoundaryHtmlComment,
+  createComponentBoundaryPair,
+  createKeyedRangeMarker,
+  createProjectionSlotRangeKey,
+  createProjectionSlotMarker,
+  didComponentBoundaryChange,
+  didComponentBoundaryPropsChange,
+  didComponentBoundarySymbolChange,
+  parseComponentBoundaryMarker,
+  parseInsertMarker,
+  parseKeyedRangeMarker,
+  parseProjectionSlotMarker,
+} from './runtime/markers.ts'
+import { createRuntimeSerialization } from './runtime/serialization.ts'
+import type {
+  ClientInsertOwner,
+  ComponentState,
+  CleanupSlot,
+  EffectOptions,
+  ForValue,
+  LoadedRoute,
+  LoadedRouteModule,
+  LoaderSnapshot,
+  NavigationMode,
+  PendingLinkNavigation,
+  PendingResumeLinkNavigation,
+  ProjectionSlotValue,
+  ReactiveEffect,
+  RenderFrame,
+  RenderObject,
+  ResumeActionPayload,
+  ResumeComponentPayload,
+  ResumeLoaderPayload,
+  ResumePayload,
+  ResumeVisiblePayload,
+  ResumeWatchPayload,
+  RouteDataResponse,
+  RoutePrefetchResult,
+  RoutePreflightResult,
+  RouteRenderer,
+  RouteSlotCarrier,
+  RouterEventState,
+  RouterState,
+  RuntimeContainer,
+  RuntimeContextToken,
+  RuntimeSymbolModule,
+  ScopedStyleEntry,
+  ShowValue,
+  SignalRecord,
+  StreamedSuspenseChunk,
+  StreamState,
+  VisibleState,
+  WatchDependency,
+  WatchState,
+} from './runtime/types.ts'
+import { isPlainObject } from './shared.ts'
+
+export {
+  RESUME_STATE_ELEMENT_ID,
+  RESUME_FINAL_STATE_ELEMENT_ID,
+  SCOPED_STYLE_ATTR,
+} from './runtime/constants.ts'
+export {
+  getRememberedInsertMarkerNodeCount,
+  rememberInsertMarkerRange,
+  rememberManagedAttributesForNode,
+  rememberManagedAttributesForNodes,
+  syncManagedAttributeSnapshot,
+} from './runtime/dom.ts'
+export type {
+  ClientInsertOwner,
+  ResumeComponentPayload,
+  ResumeLoaderPayload,
+  ResumePayload,
+  RuntimeContainer,
+  RuntimeContextToken,
+} from './runtime/types.ts'
+
+const isMissingGeneratedScopeReferenceError = (error: unknown): error is ReferenceError =>
+  error instanceof ReferenceError && /\b__scope\b/.test(error.message)
+
+const toRuntimeError = (error: unknown) =>
+  error instanceof Error ? error : new Error(typeof error === 'string' ? error : String(error))
+
+const areShallowEqualRenderProps = (
+  previous: Record<string, unknown> | null,
+  next: Record<string, unknown> | null,
+) => {
+  if (previous === next) {
+    return true
   }
-  if ('ownerDocument' in value) {
-    const ownerDocument = (value as { ownerDocument?: Document | null }).ownerDocument
-    if (ownerDocument?.defaultView) {
-      contexts.push(ownerDocument.defaultView)
-    }
+  if (!previous || !next) {
+    return !previous && !next
   }
-  if ('defaultView' in value) {
-    const defaultView = (value as { defaultView?: Window | null }).defaultView
-    if (defaultView) {
-      contexts.push(defaultView)
-    }
+
+  const previousKeys = Object.keys(previous)
+  const nextKeys = Object.keys(next)
+  if (previousKeys.length !== nextKeys.length) {
+    return false
   }
-  contexts.push(globalThis)
-  return contexts
-}
 
-const isDomInstance = <T>(value: unknown, name: DomConstructorName): value is T => {
-  for (const context of getDomContexts(value)) {
-    const ctor = (context as Record<DomConstructorName, unknown>)[name]
-    if (typeof ctor === 'function' && value instanceof ctor) {
-      return true
+  for (const key of previousKeys) {
+    if (!Object.hasOwn(next, key) || !Object.is(previous[key], next[key])) {
+      return false
     }
   }
-  return false
-}
-
-const hasOwnerDocument = (value: unknown): value is ParentNode & { ownerDocument: Document } =>
-  !!value &&
-  (typeof value === 'object' || typeof value === 'function') &&
-  'ownerDocument' in value &&
-  !!(value as { ownerDocument?: Document | null }).ownerDocument
-
-const isElementNode = (value: unknown): value is Element =>
-  isDomInstance<Element>(value, 'Element') || isDomInstance<HTMLElement>(value, 'HTMLElement')
-
-const isHTMLElementNode = (value: unknown): value is HTMLElement =>
-  isDomInstance<HTMLElement>(value, 'HTMLElement')
-
-const isHTMLInputElementNode = (value: unknown): value is HTMLInputElement =>
-  isDomInstance<HTMLInputElement>(value, 'HTMLInputElement')
-
-const isHTMLTextAreaElementNode = (value: unknown): value is HTMLTextAreaElement =>
-  isDomInstance<HTMLTextAreaElement>(value, 'HTMLTextAreaElement')
-
-const isTextEntryElement = (value: unknown): value is HTMLInputElement | HTMLTextAreaElement =>
-  isHTMLInputElementNode(value) || isHTMLTextAreaElementNode(value)
-
-const isHTMLAnchorElementNode = (value: unknown): value is HTMLAnchorElement =>
-  isDomInstance<HTMLAnchorElement>(value, 'HTMLAnchorElement')
-
-const isHTMLFormElementNode = (value: unknown): value is HTMLFormElement =>
-  isDomInstance<HTMLFormElement>(value, 'HTMLFormElement')
-
-interface CleanupSlot {
-  callbacks: CleanupCallback[]
-}
-
-interface ComponentState {
-  active: boolean
-  didMount: boolean
-  end?: Comment
-  id: string
-  mountCleanupSlots: CleanupSlot[]
-  parentId: string | null
-  props: unknown
-  projectionSlots: Record<string, number> | null
-  reuseExistingDomOnActivate?: boolean
-  scopeId: string
-  signalIds: string[]
-  start?: Comment
-  symbol: string
-  suspensePromise?: Promise<unknown> | null
-  visibleCount: number
-  watchCount: number
-}
 
-interface RenderFrame {
-  childCursor: number
-  component: ComponentState
-  container: RuntimeContainer
-  mountCallbacks: Array<() => void>
-  projectionState: {
-    counters: Map<string, number>
-    reuseExistingDom: boolean
-  }
-  visitedDescendants: Set<string>
-  mode: 'client' | 'ssr'
-  signalCursor: number
-  visibleCursor: number
-  watchCursor: number
-}
-
-interface RouterEventState {
-  originalPreventDefault: () => void
-  routerPrevented: boolean
-  userPrevented: boolean
-}
-
-interface RouterState {
-  currentPath: { value: string }
-  currentRoute: LoadedRoute | null
-  defaultTitle: string
-  isNavigating: { value: boolean }
-  loadedRoutes: Map<string, LoadedRoute>
-  manifest: RouteManifest
-  navigate: Navigate
-  prefetchedLoaders: Map<string, Map<string, LoaderSnapshot>>
-  routePrefetches: Map<string, Promise<void>>
-  sequence: number
-}
-
-export interface RuntimeContainer {
-  actions: Map<string, unknown>
-  actionStates: Map<
-    string,
-    {
-      error: unknown
-      input: unknown
-      result: unknown
-    }
-  >
-  components: Map<string, ComponentState>
-  dirty: Set<string>
-  doc?: Document
-  id: string
-  imports: Map<string, Promise<RuntimeSymbolModule>>
-  loaderStates: Map<
-    string,
-    {
-      data: unknown
-      error: unknown
-      loaded: boolean
+  for (const hiddenKey of [ROUTE_PARAMS_PROP, ROUTE_ERROR_PROP] as const) {
+    const previousHas = Object.hasOwn(previous, hiddenKey)
+    const nextHas = Object.hasOwn(next, hiddenKey)
+    if (previousHas !== nextHas) {
+      return false
     }
-  >
-  loaders: Map<string, unknown>
-  nextComponentId: number
-  nextElementId: number
-  nextScopeId: number
-  nextSignalId: number
-  pendingSuspensePromises: Set<Promise<unknown>>
-  rootChildCursor: number
-  rootElement?: HTMLElement
-  router: RouterState | null
-  asyncSignalStates: Map<string, unknown>
-  asyncSignalSnapshotCache: Map<string, unknown>
-  scopes: Map<string, SerializedValue[]>
-  signals: Map<string, SignalRecord>
-  symbols: Map<string, string>
-  visibilityListenersCleanup: (() => void) | null
-  visibilityCheckQueued: boolean
-  visibles: Map<string, VisibleState>
-  watches: Map<string, WatchState>
-}
-
-interface RuntimeSymbolModule {
-  default: (scope: unknown[], propsOrArg?: unknown, ...args: unknown[]) => unknown
-}
-
-interface ReactiveEffect {
-  fn: () => void
-  signals: Set<SignalRecord>
-}
-
-type WatchDependency = { value: unknown } | (() => unknown)
-type WatchMode = 'dynamic' | 'explicit'
-type RouteRenderer = (props: unknown) => unknown
-
-interface LoadedRouteModule {
-  metadata: RouteMetadataExport | null
-  renderer: RouteRenderer
-  symbol: string | null
-  url: string
-}
-
-interface LoadedRoute {
-  entry: RouteModuleManifest
-  layouts: LoadedRouteModule[]
-  params: RouteParams
-  pathname: string
-  page: LoadedRouteModule
-  render: RouteRenderer
-}
-
-interface RoutePreflightSuccess {
-  ok: true
-}
-
-interface RoutePreflightRedirect {
-  location: string
-  ok: false
-}
-
-interface RoutePreflightDocumentFallback {
-  document: true
-  ok: false
-}
-
-type RoutePreflightResult =
-  | RoutePreflightSuccess
-  | RoutePreflightRedirect
-  | RoutePreflightDocumentFallback
-
-interface RouteSlotValue {
-  __eclipsa_type: typeof ROUTE_SLOT_TYPE
-  pathname: string
-  startLayoutIndex: number
-}
-
-interface RouteSlotCarrier extends RouteSlotValue {
-  [ROUTE_SLOT_ROUTE_KEY]?: LoadedRoute
-}
-
-interface ProjectionSlotValue {
-  __eclipsa_type: typeof PROJECTION_SLOT_TYPE
-  componentId: string
-  name: string
-  occurrence: number
-  source: unknown
-}
-
-interface WatchState {
-  cleanupSlot: CleanupSlot
-  componentId: string
-  effect: ReactiveEffect
-  id: string
-  mode: WatchMode
-  pending: Promise<void> | null
-  run: (() => void) | null
-  scopeId: string
-  symbol: string
-  track: (() => void) | null
-}
-
-interface VisibleState {
-  cleanupSlot: CleanupSlot
-  componentId: string
-  done: boolean
-  id: string
-  pending: Promise<void> | null
-  run: (() => void | Promise<void>) | null
-  scopeId: string
-  symbol: string
-}
+    if (previousHas && !Object.is(previous[hiddenKey], next[hiddenKey])) {
+      return false
+    }
+  }
 
-interface PendingLinkNavigation {
-  href: string
-  replace: boolean
-  state: RouterEventState
+  return true
 }
 
-type NavigationMode = 'pop' | 'push' | 'replace'
-
-type RenderObject = Extract<
-  JSX.Element,
-  {
-    isStatic: boolean
-    props: Record<string, unknown>
-    type: JSX.Type
+const wrapGeneratedScopeReferenceError = (
+  error: unknown,
+  context: {
+    componentId?: string
+    phase: string
+    symbolId?: string
+  },
+) => {
+  const baseError = toRuntimeError(error)
+  if (!isMissingGeneratedScopeReferenceError(baseError)) {
+    return baseError
   }
->
 
-interface RenderComponentTypeRef {
-  scopeId: string
-  symbol: string
+  const location = [
+    context.componentId ? `component "${context.componentId}"` : null,
+    context.symbolId ? `symbol "${context.symbolId}"` : null,
+  ]
+    .filter(Boolean)
+    .join(', ')
+
+  const wrapped = new Error(
+    `Eclipsa runtime failed while ${context.phase}${location ? ` ${location}` : ''}. The generated resumable symbol referenced "__scope" outside its valid scope. This usually means a same-file helper was transformed incorrectly during symbol compilation. Inline that helper into the component as a workaround. Original error: ${baseError.message}`,
+    { cause: baseError },
+  )
+  wrapped.name = 'EclipsaRuntimeError'
+  return wrapped
 }
 
 const resolvedRuntimeSymbols = new WeakMap<RuntimeContainer, Map<string, RuntimeSymbolModule>>()
@@ -449,87 +324,60 @@ const getResolvedRuntimeSymbols = (container: RuntimeContainer) => {
   return created
 }
 
-const isRenderObject = (value: unknown): value is RenderObject =>
-  typeof value === 'object' && value !== null && 'type' in value && 'props' in value
-
-const getContainerStack = (): RuntimeContainer[] => {
-  const globalRecord = globalThis as Record<PropertyKey, unknown>
-  const existing = globalRecord[CONTAINER_STACK_KEY]
-  if (Array.isArray(existing)) {
-    return existing as RuntimeContainer[]
-  }
-  const created: RuntimeContainer[] = []
-  globalRecord[CONTAINER_STACK_KEY] = created
-  return created
-}
-
-const getFrameStack = (): RenderFrame[] => {
-  const globalRecord = globalThis as Record<PropertyKey, unknown>
-  const existing = globalRecord[FRAME_STACK_KEY]
-  if (Array.isArray(existing)) {
-    return existing as RenderFrame[]
+export const invalidateRuntimeSymbolCaches = (
+  container: RuntimeContainer,
+  symbolIds: Iterable<string>,
+) => {
+  const resolved = getResolvedRuntimeSymbols(container)
+  for (const symbolId of symbolIds) {
+    container.imports.delete(symbolId)
+    resolved.delete(symbolId)
   }
-  const created: RenderFrame[] = []
-  globalRecord[FRAME_STACK_KEY] = created
-  return created
 }
 
-const getResumeContainers = () => {
-  const globalRecord = globalThis as Record<PropertyKey, unknown>
-  const existing = globalRecord[RESUME_CONTAINERS_KEY]
-  if (existing instanceof Set) {
-    return existing as Set<RuntimeContainer>
-  }
-  const created = new Set<RuntimeContainer>()
-  globalRecord[RESUME_CONTAINERS_KEY] = created
-  return created
+const withResumeHmrTimestamp = (url: string, timestamp: number) => {
+  const parsed = new URL(url, 'http://localhost')
+  parsed.searchParams.set('t', timestamp.toString())
+  return `${parsed.pathname}${parsed.search}${parsed.hash}`
 }
 
-const getCurrentContainer = (): RuntimeContainer | null => {
-  const stack = getContainerStack()
-  return stack.length > 0 ? stack[stack.length - 1] : null
-}
+const canBustRuntimeSymbolUrl = (url: string) => parseSymbolIdFromUrl(url) !== null
 
-const getAsyncSignalSnapshotCache = () => {
-  const globalRecord = globalThis as Record<PropertyKey, unknown>
-  const existing = globalRecord[ASYNC_SIGNAL_SNAPSHOT_CACHE_KEY]
-  if (existing instanceof Map) {
-    return existing as Map<string, unknown>
+export const bustRuntimeSymbolUrls = (
+  container: RuntimeContainer,
+  symbolIds: Iterable<string>,
+  timestamp: number,
+) => {
+  for (const symbolId of symbolIds) {
+    const current = container.symbols.get(symbolId)
+    if (!current || !canBustRuntimeSymbolUrl(current)) {
+      continue
+    }
+    container.symbols.set(symbolId, withResumeHmrTimestamp(current, timestamp))
   }
-  const created = new Map<string, unknown>()
-  globalRecord[ASYNC_SIGNAL_SNAPSHOT_CACHE_KEY] = created
-  return created
 }
 
+const isRenderObject = (value: unknown): value is RenderObject =>
+  typeof value === 'object' && value !== null && 'type' in value && 'props' in value
+
 export const readAsyncSignalSnapshot = (
   id: string,
   container: RuntimeContainer | null = getCurrentContainer(),
-) =>
-  container?.asyncSignalStates.get(id) ??
-  container?.asyncSignalSnapshotCache.get(id) ??
-  getAsyncSignalSnapshotCache().get(id)
+) => readGlobalAsyncSignalSnapshot(id, container)
 
 export const writeAsyncSignalSnapshot = (
   id: string,
   value: unknown,
   container: RuntimeContainer | null = getCurrentContainer(),
 ) => {
-  container?.asyncSignalStates.set(id, value)
-  container?.asyncSignalSnapshotCache.set(id, value)
-  if (!container) {
-    getAsyncSignalSnapshotCache().set(id, value)
-  }
+  writeGlobalAsyncSignalSnapshot(id, value, container)
 }
 
 export const clearAsyncSignalSnapshot = (
   id: string,
   container: RuntimeContainer | null = getCurrentContainer(),
 ) => {
-  container?.asyncSignalStates.delete(id)
-  container?.asyncSignalSnapshotCache.delete(id)
-  if (!container) {
-    getAsyncSignalSnapshotCache().delete(id)
-  }
+  clearGlobalAsyncSignalSnapshot(id, container)
 }
 
 const getCurrentFrame = (): RenderFrame | null => {
@@ -537,151 +385,103 @@ const getCurrentFrame = (): RenderFrame | null => {
   return stack.length > 0 ? stack[stack.length - 1] : null
 }
 
-const normalizeRoutePath = (pathname: string) => {
-  const normalizedPath = pathname.trim() || '/'
-  const withLeadingSlash = normalizedPath.startsWith('/') ? normalizedPath : `/${normalizedPath}`
-  if (withLeadingSlash.length > 1 && withLeadingSlash.endsWith('/')) {
-    return withLeadingSlash.slice(0, -1)
+export const shouldReconnectDetachedInsertMarkers = (container: RuntimeContainer | null) => {
+  const frame = getCurrentFrame()
+  if (!container || !frame || frame.container !== container) {
+    return true
   }
-  return withLeadingSlash
+  return frame.projectionState.reuseExistingDom
 }
 
-const EMPTY_ROUTE_PARAMS = Object.freeze({}) as RouteParams
+const hasScopedStyles = (frame: RenderFrame | null) => !!frame && frame.scopedStyles.length > 0
 
-const splitRoutePath = (pathname: string) => normalizeRoutePath(pathname).split('/').filter(Boolean)
-
-const matchRouteSegments = (
-  segments: RouteModuleManifest['segments'],
-  pathnameSegments: string[],
-  routeIndex = 0,
-  pathIndex = 0,
-  params: RouteParams = {},
-): RouteParams | null => {
-  if (routeIndex >= segments.length) {
-    return pathIndex >= pathnameSegments.length ? params : null
-  }
+const getScopedStyleRootSelector = (scopeId: string) =>
+  `[${SCOPED_STYLE_ATTR}="${escapeAttr(scopeId)}"]`
 
-  const segment = segments[routeIndex]!
-  switch (segment.kind) {
-    case 'static':
-      if (pathnameSegments[pathIndex] !== segment.value) {
-        return null
-      }
-      return matchRouteSegments(segments, pathnameSegments, routeIndex + 1, pathIndex + 1, params)
-    case 'required':
-      if (pathIndex >= pathnameSegments.length) {
-        return null
-      }
-      return matchRouteSegments(segments, pathnameSegments, routeIndex + 1, pathIndex + 1, {
-        ...params,
-        [segment.value]: pathnameSegments[pathIndex],
-      })
-    case 'optional': {
-      const consumed =
-        pathIndex < pathnameSegments.length
-          ? matchRouteSegments(segments, pathnameSegments, routeIndex + 1, pathIndex + 1, {
-              ...params,
-              [segment.value]: pathnameSegments[pathIndex],
-            })
-          : null
-      if (consumed) {
-        return consumed
-      }
-      return matchRouteSegments(segments, pathnameSegments, routeIndex + 1, pathIndex, {
-        ...params,
-        [segment.value]: undefined,
-      })
-    }
-    case 'rest':
-      return matchRouteSegments(
-        segments,
-        pathnameSegments,
-        segments.length,
-        pathnameSegments.length,
-        {
-          ...params,
-          [segment.value]: pathnameSegments.slice(pathIndex),
-        },
-      )
-  }
-}
+const wrapScopedStyleCss = (scopeId: string, cssText: string) =>
+  `@scope (${getScopedStyleRootSelector(scopeId)}) {\n${cssText}\n}`
 
-const matchRouteManifest = (manifest: RouteManifest, pathname: string) => {
-  const normalizedPath = normalizeRoutePath(pathname)
-  const pathnameSegments = splitRoutePath(normalizedPath)
-  for (const entry of manifest) {
-    const params = matchRouteSegments(entry.segments, pathnameSegments)
-    if (params) {
-      return {
-        entry,
-        params,
-        pathname: normalizedPath,
-      }
-    }
-  }
-  return null
+const renderScopedStyleString = (scopeId: string, style: ScopedStyleEntry) => {
+  const attrParts = Object.entries(style.attributes)
+    .filter(([, value]) => value !== false && value !== undefined && value !== null)
+    .map(([name, value]) => (value === true ? name : `${name}="${escapeAttr(String(value))}"`))
+  const attrs = attrParts.length > 0 ? ` ${attrParts.join(' ')}` : ''
+  return `<style${attrs}>${escapeText(wrapScopedStyleCss(scopeId, style.cssText))}</style>`
 }
 
-const scoreSpecialManifestEntry = (entry: RouteModuleManifest, pathname: string) => {
-  const pathnameSegments = splitRoutePath(pathname)
-  let score = 0
-  for (
-    let index = 0;
-    index < entry.segments.length && index < pathnameSegments.length;
-    index += 1
-  ) {
-    const segment = entry.segments[index]!
-    const pathnameSegment = pathnameSegments[index]
-    if (segment.kind === 'static') {
-      if (segment.value !== pathnameSegment) {
-        break
-      }
-      score += 10
+const renderScopedStyleNode = (
+  container: RuntimeContainer,
+  scopeId: string,
+  style: ScopedStyleEntry,
+) => {
+  const element = createElementNode(container.doc!, 'style')
+  for (const [name, value] of Object.entries(style.attributes)) {
+    if (value === false || value === undefined || value === null) {
       continue
     }
-    score += segment.kind === 'rest' ? 1 : 2
-    if (segment.kind === 'rest') {
-      break
+    if (value === true) {
+      element.setAttribute(name, '')
+      continue
     }
+    element.setAttribute(name, String(value))
   }
-  return score
+  element.appendChild(container.doc!.createTextNode(wrapScopedStyleCss(scopeId, style.cssText)))
+  return element
 }
 
-const findSpecialManifestEntry = (
-  manifest: RouteManifest,
-  pathname: string,
-  kind: 'error' | 'notFound',
-) => {
-  const matched = matchRouteManifest(manifest, pathname)
-  if (matched?.entry[kind]) {
-    return matched
+const renderFrameScopedStylesToString = (frame: RenderFrame) =>
+  frame.scopedStyles
+    .map((style) => renderScopedStyleString(frame.component.scopeId, style))
+    .join('')
+
+const renderFrameScopedStylesToNodes = (frame: RenderFrame, container: RuntimeContainer) =>
+  frame.scopedStyles.map((style) =>
+    renderScopedStyleNode(container, frame.component.scopeId, style),
+  )
+
+const createActionCsrfInputString = (token: string) =>
+  `<input ${ACTION_CSRF_INPUT_ATTR}="" name="${escapeAttr(ACTION_CSRF_FIELD)}" type="hidden" value="${escapeAttr(token)}">`
+
+const createActionCsrfInputNode = (doc: Document, token: string) => {
+  const input = createElementNode(doc, 'input')
+  input.setAttribute(ACTION_CSRF_INPUT_ATTR, '')
+  input.setAttribute('name', ACTION_CSRF_FIELD)
+  input.setAttribute('type', 'hidden')
+  input.setAttribute('value', token)
+  return input
+}
+
+const readActionCsrfTokenFromRuntimeDocument = (doc: Document | null | undefined) =>
+  doc && 'cookie' in doc && typeof doc.cookie === 'string'
+    ? readActionCsrfTokenFromDocument(doc)
+    : null
+
+export const registerRuntimeScopedStyle = (
+  cssText: string,
+  attributes: Record<string, unknown> = {},
+): void => {
+  const frame = getCurrentFrame()
+  if (!frame || frame.component.id === ROOT_COMPONENT_ID) {
+    throw new Error('useStyleScoped() can only be used while rendering a component.')
   }
 
-  let best: ReturnType<typeof matchRouteManifest> = null
-  let bestScore = -1
-  for (const entry of manifest) {
-    if (!entry[kind]) {
-      continue
-    }
-    const score = scoreSpecialManifestEntry(entry, pathname)
-    if (score > bestScore) {
-      best = {
-        entry,
-        params: EMPTY_ROUTE_PARAMS,
-        pathname: normalizeRoutePath(pathname),
-      }
-      bestScore = score
-    }
+  if (cssText.length === 0) {
+    return
   }
-  return best
-}
 
-const routeCacheKey = (
-  pathname: string,
-  variant: 'page' | 'loading' | 'error' | 'not-found' = 'page',
-) => `${normalizeRoutePath(pathname)}::${variant}`
+  const existing = frame.scopedStyles.find(
+    (entry) =>
+      entry.cssText === cssText && JSON.stringify(entry.attributes) === JSON.stringify(attributes),
+  )
+  if (existing) {
+    return
+  }
 
-const routePrefetchKey = (url: URL) => `${normalizeRoutePath(url.pathname)}${url.search}`
+  frame.scopedStyles.push({
+    attributes: { ...attributes },
+    cssText,
+  })
+}
 
 let currentEffect: ReactiveEffect | null = null
 let currentCleanupSlot: CleanupSlot | null = null
@@ -738,6 +538,15 @@ const disposeCleanupSlot = (slot: CleanupSlot | null | undefined) => {
   }
 }
 
+const resetComponentRenderEffects = (component: ComponentState) => {
+  disposeCleanupSlot(component.renderEffectCleanupSlot)
+  component.renderEffectCleanupSlot = createCleanupSlot()
+}
+
+const syncEffectOnlyLocalSignalPreference = (component: ComponentState) => {
+  component.prefersEffectOnlyLocalSignalWrites = component.optimizedRoot === true
+}
+
 const clearEffectSignals = (effect: ReactiveEffect) => {
   for (const signal of effect.signals) {
     signal.effects.delete(effect)
@@ -755,7 +564,17 @@ const collectTrackedDependencies = (effect: ReactiveEffect, fn: () => void) => {
   }
 }
 
-const trackWatchDependencies = (dependencies: WatchDependency[]) => {
+const runWithoutDependencyTracking = <T>(fn: () => T): T => {
+  const previousEffect = currentEffect
+  currentEffect = null
+  try {
+    return fn()
+  } finally {
+    currentEffect = previousEffect
+  }
+}
+
+const trackWatchDependencies = (dependencies: WatchDependency[], errorLabel = 'useWatch') => {
   for (const dependency of dependencies) {
     if (typeof dependency === 'function') {
       dependency()
@@ -763,9 +582,9 @@ const trackWatchDependencies = (dependencies: WatchDependency[]) => {
     }
     const signalMeta = getSignalMeta(dependency)
     if (!signalMeta) {
-      throw new TypeError('useWatch dependencies must be signals or getter functions.')
+      throw new TypeError(`${errorLabel} dependencies must be signals or getter functions.`)
     }
-    dependency.value
+    void dependency.value
   }
 }
 
@@ -799,14 +618,6 @@ const createLocalWatchRunner =
     runWatchCallback(effect, cleanupSlot, fn, dependencies)
   }
 
-const isPlainObject = (value: unknown): value is Record<string, unknown> => {
-  if (!value || typeof value !== 'object') {
-    return false
-  }
-  const proto = Object.getPrototypeOf(value)
-  return proto === Object.prototype || proto === null
-}
-
 const isProjectionSlot = (value: unknown): value is ProjectionSlotValue =>
   isPlainObject(value) && value.__eclipsa_type === PROJECTION_SLOT_TYPE
 
@@ -823,501 +634,225 @@ const createProjectionSlot = (
   source,
 })
 
-const encodeProjectionSlotName = (value: string) => encodeURIComponent(value)
-const decodeProjectionSlotName = (value: string) => decodeURIComponent(value)
+let runtimeSerialization: ReturnType<typeof createRuntimeSerialization> | null = null
+
+const getRuntimeSerialization = () => {
+  runtimeSerialization ??= createRuntimeSerialization({
+    createProjectionSlot,
+    ensureRouterState,
+    ensureRuntimeElementId,
+    evaluateProps,
+    findRuntimeElement,
+    getResolvedRuntimeSymbols,
+    isPlainObject,
+    isProjectionSlot,
+    isRenderObject,
+    isRouteSlot,
+    loadSymbol,
+    materializeComputedSignalReference,
+    materializeScope,
+    materializeSymbolReference,
+    registerScope,
+    registerSerializedScope,
+    resolveRenderable: (value) => resolveRenderable(value as JSX.Element),
+  })
+  return runtimeSerialization
+}
 
-const createProjectionSlotMarker = (
-  componentId: string,
-  name: string,
-  occurrence: number,
-  kind: 'start' | 'end',
-) => `ec:s:${componentId}:${encodeProjectionSlotName(name)}:${occurrence}:${kind}`
+const preloadResumableValue = (
+  container: RuntimeContainer,
+  value: unknown,
+  seen = new Set<unknown>(),
+) => getRuntimeSerialization().preloadResumableValue(container, value, seen)
 
-const PROJECTION_SLOT_MARKER_REGEX = /^ec:s:([^:]+):([^:]+):(\d+):(start|end)$/
+const serializeRuntimeValue = (container: RuntimeContainer, value: unknown): SerializedValue =>
+  getRuntimeSerialization().serializeRuntimeValue(container, value)
 
-const parseProjectionSlotMarker = (value: string) => {
-  const matched = value.match(PROJECTION_SLOT_MARKER_REGEX)
-  if (!matched) {
-    return null
-  }
-  return {
-    componentId: matched[1],
-    kind: matched[4] as 'start' | 'end',
-    key: `${matched[1]}:${matched[2]}:${matched[3]}`,
-    name: decodeProjectionSlotName(matched[2]),
-    occurrence: Number(matched[3]),
-  }
-}
+const deserializeRuntimeValue = (container: RuntimeContainer, value: SerializedValue): unknown =>
+  getRuntimeSerialization().deserializeRuntimeValue(container, value)
 
-const getRenderComponentTypeRef = (value: unknown): RenderComponentTypeRef | null => {
-  if (typeof value !== 'function') {
-    return null
+const findNextNumericId = (ids: Iterable<string>, prefix: string) => {
+  let nextId = 0
+  for (const id of ids) {
+    if (!id.startsWith(prefix)) {
+      continue
+    }
+    const suffix = id.slice(prefix.length)
+    if (!/^\d+$/.test(suffix)) {
+      continue
+    }
+    nextId = Math.max(nextId, Number(suffix) + 1)
   }
-  return (
-    ((value as unknown as Record<PropertyKey, unknown>)[RENDER_COMPONENT_TYPE_KEY] as
-      | RenderComponentTypeRef
-      | undefined) ?? null
-  )
+  return nextId
 }
 
-const createMaterializedRenderComponentType = (
-  container: RuntimeContainer,
-  symbol: string,
-  scopeId: string,
-) => {
-  const component = __eclipsaComponent(
-    ((props: unknown) => {
-      const module = getResolvedRuntimeSymbols(container).get(symbol)
-      if (!module) {
-        throw new Error(`Missing preloaded render component symbol ${symbol}.`)
-      }
-      return module.default(materializeScope(container, scopeId), props)
-    }) as Component,
-    symbol,
-    () => materializeScope(container, scopeId),
-  )
-  Object.defineProperty(component, RENDER_COMPONENT_TYPE_KEY, {
-    configurable: true,
-    enumerable: false,
-    value: {
-      scopeId,
-      symbol,
-    } satisfies RenderComponentTypeRef,
-    writable: true,
-  })
-  return component
+const isWritableSignalMeta = (
+  meta: SignalMeta<unknown> | null,
+): meta is SignalMeta<unknown> & { kind?: 'signal' } => !!meta && meta.kind !== 'computed-signal'
+
+const getRefSignalId = (value: unknown) => {
+  const signalMeta = getSignalMeta(value)
+  return isWritableSignalMeta(signalMeta) ? signalMeta.id : null
 }
 
-const serializeRenderObjectReference = (
-  container: RuntimeContainer,
-  value: RenderObject,
-): SerializedReference => {
-  const evaluatedProps = evaluateProps(value.props)
-  const key = value.key ?? null
-  const metadata = value.metadata ?? null
+const getBindableSignalId = (value: unknown) => {
+  const signalMeta = getSignalMeta(value)
+  return isWritableSignalMeta(signalMeta) ? signalMeta.id : null
+}
 
-  if (typeof value.type === 'string') {
-    return {
-      __eclipsa_type: 'ref',
-      data: [
-        'element',
-        value.type,
-        null,
-        serializeRuntimeValue(container, evaluatedProps),
-        serializeRuntimeValue(container, key),
-        value.isStatic,
-        serializeRuntimeValue(container, metadata),
-      ],
-      kind: RENDER_REFERENCE_KIND,
-      token: 'jsx',
-    }
-  }
-
-  const meta = getComponentMeta(value.type)
-  if (!meta) {
-    throw new TypeError('Only resumable component render objects can be serialized.')
+export const syncRuntimeRefMarker = (element: Element, value: unknown) => {
+  const signalId = getRefSignalId(value)
+  if (signalId) {
+    element.setAttribute(REF_SIGNAL_ATTR, signalId)
+    syncManagedAttributeSnapshot(element, REF_SIGNAL_ATTR)
+    return
   }
+  element.removeAttribute(REF_SIGNAL_ATTR)
+  syncManagedAttributeSnapshot(element, REF_SIGNAL_ATTR)
+}
 
-  return {
-    __eclipsa_type: 'ref',
-    data: [
-      'component',
-      meta.symbol,
-      registerScope(container, meta.captures()),
-      serializeRuntimeValue(container, evaluatedProps),
-      serializeRuntimeValue(container, key),
-      value.isStatic,
-      serializeRuntimeValue(container, metadata),
-    ],
-    kind: RENDER_REFERENCE_KIND,
-    token: 'jsx',
+const readBindableSignalValue = (value: unknown) => {
+  if (!value || (typeof value !== 'object' && typeof value !== 'function') || !('value' in value)) {
+    return undefined
   }
+  return (value as { value: unknown }).value
 }
 
-const deserializeRenderObjectReference = (
-  container: RuntimeContainer,
-  data: SerializedValue | undefined,
-): RenderObject => {
-  if (!Array.isArray(data) || data.length !== 7) {
-    throw new TypeError('Render references require a seven-part payload.')
+export const assignRuntimeRef = (
+  value: unknown,
+  element: Element,
+  container: RuntimeContainer | null = getCurrentContainer(),
+) => {
+  const signalMeta = getSignalMeta<Element | undefined>(value)
+  if (!isWritableSignalMeta(signalMeta)) {
+    return false
   }
 
-  const [variant, typeValue, scopeValue, propsValue, keyValue, isStaticValue, metadataValue] = data
-  if (variant !== 'element' && variant !== 'component') {
-    throw new TypeError(`Unsupported render reference variant "${String(variant)}".`)
-  }
-  if (typeof isStaticValue !== 'boolean') {
-    throw new TypeError('Render references require a boolean static flag.')
+  const record = container?.signals.get(signalMeta.id)
+  if (record) {
+    writeSignalValue(container, record, element)
+    return true
   }
 
-  const props = deserializeRuntimeValue(container, propsValue as SerializedValue)
-  const key = deserializeRuntimeValue(container, keyValue as SerializedValue)
-  const metadata = deserializeRuntimeValue(container, metadataValue as SerializedValue)
-
-  if (!props || typeof props !== 'object') {
-    throw new TypeError('Render references require object props.')
-  }
+  signalMeta.set(element)
+  return true
+}
 
-  if (variant === 'element') {
-    if (typeof typeValue !== 'string') {
-      throw new TypeError('Element render references require a string tag name.')
-    }
-    return {
-      isStatic: isStaticValue,
-      key: (key ?? undefined) as RenderObject['key'],
-      metadata: (metadata ?? undefined) as RenderObject['metadata'],
-      props: props as Record<string, unknown>,
-      type: typeValue,
+export const restoreSignalRefs = (container: RuntimeContainer, root: ParentNode) => {
+  const assignElement = (element: Element) => {
+    const signalId = element.getAttribute(REF_SIGNAL_ATTR)
+    if (!signalId) {
+      return
     }
-  }
-
-  if (typeof typeValue !== 'string' || typeof scopeValue !== 'string') {
-    throw new TypeError('Component render references require a symbol id and scope id.')
-  }
-
-  return {
-    isStatic: isStaticValue,
-    key: (key ?? undefined) as RenderObject['key'],
-    metadata: (metadata ?? undefined) as RenderObject['metadata'],
-    props: props as Record<string, unknown>,
-    type: createMaterializedRenderComponentType(container, typeValue, scopeValue),
-  }
-}
-
-const preloadResumableValue = async (
-  container: RuntimeContainer,
-  value: unknown,
-  seen = new Set<unknown>(),
-): Promise<void> => {
-  if (value === null || value === undefined || value === false) {
-    return
-  }
-  if (seen.has(value)) {
-    return
-  }
-  if (typeof value === 'function') {
-    const renderComponentRef = getRenderComponentTypeRef(value)
-    if (!renderComponentRef) {
+    const record = container.signals.get(signalId)
+    if (!record) {
       return
     }
-    seen.add(value)
-    await loadSymbol(container, renderComponentRef.symbol)
-    for (const capturedValue of materializeScope(container, renderComponentRef.scopeId)) {
-      await preloadResumableValue(container, capturedValue, seen)
-    }
-    return
-  }
-  if (Array.isArray(value)) {
-    seen.add(value)
-    for (const entry of value) {
-      await preloadResumableValue(container, entry, seen)
-    }
-    return
-  }
-  if (typeof Node !== 'undefined' && value instanceof Node) {
-    return
-  }
-  if (isProjectionSlot(value)) {
-    return
-  }
-  if (isRenderObject(value)) {
-    seen.add(value)
-    await preloadResumableValue(container, value.type, seen)
-    await preloadResumableValue(container, evaluateProps(value.props), seen)
-    return
-  }
-  if (!isPlainObject(value)) {
-    return
+    writeSignalValue(container, record, element)
   }
 
-  seen.add(value)
-  for (const entry of Object.values(value)) {
-    await preloadResumableValue(container, entry, seen)
+  if (isElementNode(root) && root.getAttribute(REF_SIGNAL_ATTR)) {
+    assignElement(root)
   }
-}
 
-const serializeRuntimeValue = (container: RuntimeContainer, value: unknown): SerializedValue =>
-  serializeValue(value, {
-    serializeReference(candidate) {
-      const signalMeta = getSignalMeta(candidate)
-      if (signalMeta) {
-        return {
-          __eclipsa_type: 'ref',
-          kind: 'signal',
-          token: signalMeta.id,
-        }
-      }
-      if (getNavigateMeta(candidate)) {
-        return {
-          __eclipsa_type: 'ref',
-          kind: 'navigate',
-          token: 'navigate',
-        }
-      }
-      const actionMeta = getActionHandleMeta(candidate)
-      if (actionMeta) {
-        return {
-          __eclipsa_type: 'ref',
-          kind: 'action',
-          token: actionMeta.id,
-        }
-      }
-      const actionHookMeta = getActionHookMeta(candidate)
-      if (actionHookMeta) {
-        return {
-          __eclipsa_type: 'ref',
-          kind: 'action-hook',
-          token: actionHookMeta.id,
-        }
-      }
-      const loaderMeta = getLoaderHandleMeta(candidate)
-      if (loaderMeta) {
-        return {
-          __eclipsa_type: 'ref',
-          kind: 'loader',
-          token: loaderMeta.id,
-        }
-      }
-      const loaderHookMeta = getLoaderHookMeta(candidate)
-      if (loaderHookMeta) {
-        return {
-          __eclipsa_type: 'ref',
-          kind: 'loader-hook',
-          token: loaderHookMeta.id,
-        }
-      }
-      if (isRouteSlot(candidate)) {
-        return {
-          __eclipsa_type: 'ref',
-          data: serializeValue(candidate.startLayoutIndex),
-          kind: 'route-slot',
-          token: candidate.pathname,
-        }
-      }
-      if (isProjectionSlot(candidate)) {
-        return {
-          __eclipsa_type: 'ref',
-          data: serializeRuntimeValue(container, candidate.source),
-          kind: PROJECTION_SLOT_TYPE,
-          token: JSON.stringify([candidate.componentId, candidate.name, candidate.occurrence]),
-        }
-      }
-      if (isRenderObject(candidate)) {
-        return serializeRenderObjectReference(container, candidate)
-      }
-      const lazyMeta = getLazyMeta(candidate)
-      if (lazyMeta) {
-        return {
-          __eclipsa_type: 'ref',
-          data: lazyMeta.captures().map((entry) => serializeRuntimeValue(container, entry)),
-          kind: 'symbol',
-          token: lazyMeta.symbol,
-        }
+  const visitDescendants = (node: ParentNode) => {
+    for (const child of listNodeChildren(node)) {
+      if (!isElementNode(child)) {
+        continue
       }
-      if (isElementNode(candidate)) {
-        return {
-          __eclipsa_type: 'ref',
-          kind: 'dom',
-          token: ensureRuntimeElementId(container, candidate),
-        }
+      if (child.getAttribute(REF_SIGNAL_ATTR)) {
+        assignElement(child)
       }
-      return null
-    },
-  })
+      visitDescendants(child)
+    }
+  }
 
-const deserializeRuntimeValue = (container: RuntimeContainer, value: SerializedValue): unknown =>
-  deserializeValue(value, {
-    deserializeReference(reference) {
-      if (reference.kind === 'navigate') {
-        return ensureRouterState(container).navigate
-      }
-      if (reference.kind === 'action') {
-        const action = container.actions.get(reference.token)
-        if (!action) {
-          throw new Error(`Missing action handle ${reference.token}.`)
-        }
-        return action
-      }
-      if (reference.kind === 'action-hook') {
-        const actionHook = getRegisteredActionHook(reference.token)
-        if (!actionHook) {
-          throw new Error(`Missing action hook ${reference.token}.`)
-        }
-        return actionHook
-      }
-      if (reference.kind === 'loader') {
-        const loader = container.loaders.get(reference.token)
-        if (!loader) {
-          throw new Error(`Missing loader handle ${reference.token}.`)
-        }
-        return loader
-      }
-      if (reference.kind === 'loader-hook') {
-        const loaderHook = getRegisteredLoaderHook(reference.token)
-        if (!loaderHook) {
-          throw new Error(`Missing loader hook ${reference.token}.`)
-        }
-        return loaderHook
-      }
-      if (reference.kind === 'route-slot') {
-        const startLayoutIndex = reference.data === undefined ? 0 : deserializeValue(reference.data)
-        if (typeof startLayoutIndex !== 'number' || !Number.isInteger(startLayoutIndex)) {
-          throw new TypeError('Route slot references require an integer start layout index.')
-        }
-        return {
-          __eclipsa_type: ROUTE_SLOT_TYPE,
-          pathname: reference.token,
-          startLayoutIndex,
-        } satisfies RouteSlotValue
-      }
-      if (reference.kind === PROJECTION_SLOT_TYPE) {
-        let componentId = ''
-        let name = ''
-        let occurrence = 0
-        try {
-          const parsed = JSON.parse(reference.token)
-          if (
-            !Array.isArray(parsed) ||
-            parsed.length !== 3 ||
-            typeof parsed[0] !== 'string' ||
-            typeof parsed[1] !== 'string' ||
-            typeof parsed[2] !== 'number'
-          ) {
-            throw new Error('invalid projection slot token')
-          }
-          componentId = parsed[0]
-          name = parsed[1]
-          occurrence = parsed[2]
-        } catch {
-          throw new TypeError(
-            'Projection slot references require a component id, name, and occurrence.',
-          )
-        }
-        return createProjectionSlot(
-          componentId,
-          name,
-          occurrence,
-          deserializeRuntimeValue(container, reference.data as SerializedValue),
-        )
-      }
-      if (reference.kind === 'signal') {
-        const record = container.signals.get(reference.token)
-        if (!record) {
-          throw new Error(`Missing signal ${reference.token}.`)
-        }
-        return record.handle
-      }
-      if (reference.kind === 'symbol') {
-        if (!reference.data || !Array.isArray(reference.data)) {
-          throw new TypeError('Symbol references require an encoded scope array.')
-        }
-        const scopeId = registerSerializedScope(container, reference.data)
-        return materializeSymbolReference(container, reference.token, scopeId)
-      }
-      if (reference.kind === RENDER_REFERENCE_KIND) {
-        return deserializeRenderObjectReference(container, reference.data)
-      }
-      if (reference.kind === 'dom') {
-        const element = findRuntimeElement(container, reference.token)
-        if (!element) {
-          throw new Error(`Missing DOM reference ${reference.token}.`)
-        }
-        return element
-      }
-      throw new TypeError(`Unsupported runtime reference kind "${reference.kind}".`)
-    },
-  })
+  visitDescendants(root)
+}
 
-const findNextNumericId = (ids: Iterable<string>, prefix: string) => {
-  let nextId = 0
-  for (const id of ids) {
-    if (!id.startsWith(prefix)) {
-      continue
-    }
-    const suffix = id.slice(prefix.length)
-    if (!/^\d+$/.test(suffix)) {
-      continue
+const evaluateProps = (props: Record<string, unknown>): Record<string, unknown> => {
+  const result: Record<string, unknown> = {}
+  for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(props))) {
+    if (descriptor.get) {
+      result[key] = descriptor.get.call(props)
+    } else {
+      result[key] = descriptor.value
     }
-    nextId = Math.max(nextId, Number(suffix) + 1)
   }
-  return nextId
+  return result
 }
 
-const getRefSignalId = (value: unknown) => getSignalMeta(value)?.id ?? null
+const hasProjectionSlotValue = (props: Record<string, unknown>, name: string) =>
+  Object.prototype.hasOwnProperty.call(props, name)
 
-export const assignRuntimeRef = (
-  value: unknown,
-  element: Element,
-  container: RuntimeContainer | null = getCurrentContainer(),
-) => {
-  const signalMeta = getSignalMeta<Element | undefined>(value)
-  if (!signalMeta) {
+const shouldRenderProjectionSlotValue = (value: unknown): boolean => {
+  if (value === null || value === undefined || value === false) {
     return false
   }
-
-  const record = container?.signals.get(signalMeta.id)
-  if (record) {
-    record.value = element
+  if (isProjectionSlot(value)) {
+    return false
+  }
+  if (Array.isArray(value)) {
+    return value.some((entry) => shouldRenderProjectionSlotValue(entry))
+  }
+  if (typeof value === 'function') {
     return true
   }
-
-  signalMeta.set(element)
-  return true
+  return typeof value === 'object'
 }
 
-const restoreSignalRefs = (container: RuntimeContainer, root: ParentNode) => {
-  const assignElement = (element: Element) => {
-    const signalId = element.getAttribute(REF_SIGNAL_ATTR)
-    if (!signalId) {
-      return
-    }
-    const record = container.signals.get(signalId)
-    if (!record) {
-      return
-    }
-    record.value = element
+const shouldPreserveProjectionSlotDom = (value: unknown): boolean => {
+  if (value === null || value === undefined || value === false) {
+    return false
   }
-
-  if (isElementNode(root) && root.getAttribute(REF_SIGNAL_ATTR)) {
-    assignElement(root)
+  if (isProjectionSlot(value) || isRouteSlot(value)) {
+    return false
   }
-
-  if (!('querySelectorAll' in root)) {
-    return
+  if (Array.isArray(value)) {
+    return value.some((entry) => shouldPreserveProjectionSlotDom(entry))
   }
-
-  for (const element of root.querySelectorAll(`[${REF_SIGNAL_ATTR}]`)) {
-    assignElement(element)
+  if (typeof value === 'function') {
+    return true
   }
+  return typeof value === 'object'
 }
 
-const evaluateProps = (props: Record<string, unknown>): Record<string, unknown> => {
-  const result: Record<string, unknown> = {}
-  for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(props))) {
-    if (descriptor.get) {
-      result[key] = descriptor.get.call(props)
-    } else {
-      result[key] = descriptor.value
-    }
+const getComponentProjectionSlotProps = (component: ComponentState) => {
+  if (component.rawProps && typeof component.rawProps === 'object') {
+    return component.rawProps
   }
-  return result
+  return component.props && typeof component.props === 'object'
+    ? (component.props as Record<string, unknown>)
+    : null
 }
 
-const hasProjectionSlotValue = (props: Record<string, unknown>, name: string) =>
-  Object.prototype.hasOwnProperty.call(props, name)
+const hasDynamicProjectionSlotDom = (component: ComponentState) => {
+  if (!component.projectionSlots || Object.keys(component.projectionSlots).length === 0) {
+    return false
+  }
+
+  const props = getComponentProjectionSlotProps(component)
+  if (!props) {
+    return false
+  }
+
+  return Object.keys(component.projectionSlots).some(
+    (name) => hasProjectionSlotValue(props, name) && shouldPreserveProjectionSlotDom(props[name]),
+  )
+}
 
 const createRenderProps = (
   componentId: string,
   meta: ComponentMeta,
   props: Record<string, unknown>,
 ): Record<string, unknown> => {
+  const nextProps = Object.create(null) as Record<string, unknown>
+  Object.defineProperties(nextProps, Object.getOwnPropertyDescriptors(props))
+
   if (!meta.projectionSlots || Object.keys(meta.projectionSlots).length === 0) {
-    return props
+    return nextProps
   }
 
-  const nextProps: Record<string, unknown> = {
-    ...props,
-  }
   const counters = new Map<string, number>()
 
   for (const [name, totalOccurrences] of Object.entries(meta.projectionSlots)) {
@@ -1328,10 +863,14 @@ const createRenderProps = (
         if (!hasProjectionSlotValue(props, name)) {
           return undefined
         }
+        const value = props[name]
+        if (!shouldRenderProjectionSlotValue(value)) {
+          return value
+        }
         const current = counters.get(name) ?? 0
         counters.set(name, current + 1)
         const occurrence = totalOccurrences > 0 ? current % totalOccurrences : current
-        return createProjectionSlot(componentId, name, occurrence, props[name])
+        return createProjectionSlot(componentId, name, occurrence, value)
       },
     })
   }
@@ -1344,7 +883,12 @@ const preloadComponentProps = async (
   meta: ComponentMeta,
   props: unknown,
 ) => {
-  if (!props || typeof props !== 'object' || !meta.projectionSlots) {
+  if (!props || typeof props !== 'object') {
+    await preloadResumableValue(container, props)
+    return
+  }
+
+  if (!meta.projectionSlots) {
     await preloadResumableValue(container, props)
     return
   }
@@ -1353,6 +897,7 @@ const preloadComponentProps = async (
   const entries: Record<string, unknown> = {}
   for (const [key, value] of Object.entries(props as Record<string, unknown>)) {
     if (projectionNames.has(key)) {
+      await preloadResumableValue(container, value)
       continue
     }
     entries[key] = value
@@ -1364,25 +909,33 @@ const createContainer = (
   symbols: Record<string, string>,
   doc?: Document,
   asyncSignalSnapshotCache?: Map<string, unknown>,
+  externalRenderCache?: RuntimeContainer['externalRenderCache'],
 ): RuntimeContainer => ({
   actions: new Map(),
   actionStates: new Map(),
   asyncSignalStates: new Map(),
   asyncSignalSnapshotCache: asyncSignalSnapshotCache ?? new Map(),
+  atoms: new WeakMap(),
   components: new Map(),
   dirty: new Set(),
+  dirtyFlushQueued: false,
   doc,
+  eventDispatchPromise: null,
+  externalRenderCache: externalRenderCache ?? new Map(),
   id: `rt${((globalThis as Record<PropertyKey, unknown>)[CONTAINER_ID_KEY] =
     (((globalThis as Record<PropertyKey, unknown>)[CONTAINER_ID_KEY] as number | undefined) ?? 0) +
     1)}`,
   imports: new Map(),
+  interactivePrefetchCheckQueued: false,
   loaderStates: new Map(),
   loaders: new Map(),
+  nextAtomId: 0,
   nextComponentId: 0,
   nextElementId: 0,
   nextScopeId: 0,
   nextSignalId: 0,
   pendingSuspensePromises: new Set(),
+  resumeReadyPromise: null,
   rootChildCursor: 0,
   rootElement: doc?.body,
   router: null,
@@ -1413,21 +966,96 @@ const createSignalHandle = <T>(record: SignalRecord<T>, container: RuntimeContai
       return record.value
     },
     set(value: T) {
-      record.value = value
-      notifySignalWrite(container, record)
+      writeSignalValue(container, record, value)
     },
   })
   setSignalMeta(handle, {
     get: () => record.value,
     id: record.id,
+    kind: 'signal',
     set: (value) => {
-      record.value = value
-      notifySignalWrite(container, record)
+      writeSignalValue(container, record, value)
+    },
+  } satisfies SignalMeta<T>)
+  return handle
+}
+
+interface ComputedSignalSnapshot<T> {
+  __e_async_computed: true
+  error?: unknown
+  promise?: Promise<T>
+  status: 'pending' | 'rejected' | 'resolved'
+  value?: T
+}
+
+const isComputedSignalSnapshot = <T>(value: unknown): value is ComputedSignalSnapshot<T> =>
+  !!value &&
+  typeof value === 'object' &&
+  (value as ComputedSignalSnapshot<T>).__e_async_computed === true
+
+const readComputedSignalValue = <T>(record: SignalRecord<unknown>) => {
+  recordSignalRead(record)
+  const snapshot = record.value
+  if (!isComputedSignalSnapshot<T>(snapshot)) {
+    return snapshot as T
+  }
+  if (snapshot.status === 'pending') {
+    throw createPendingSignalError(snapshot.promise ?? Promise.resolve(undefined))
+  }
+  if (snapshot.status === 'rejected') {
+    throw snapshot.error
+  }
+  return snapshot.value as T
+}
+
+const createComputedSignalHandle = <T>(
+  record: SignalRecord<unknown>,
+  _container: RuntimeContainer | null,
+) => {
+  const handle = {} as { value: T }
+  Object.defineProperty(handle, 'value', {
+    configurable: true,
+    enumerable: true,
+    get() {
+      return readComputedSignalValue<T>(record)
+    },
+  })
+  setSignalMeta(handle, {
+    get: () => readComputedSignalValue<T>(record),
+    id: record.id,
+    kind: 'computed-signal',
+    set: () => {
+      throw new TypeError('Computed signals are read-only.')
     },
   } satisfies SignalMeta<T>)
   return handle
 }
 
+const isPrimitiveSignalValue = (value: unknown) =>
+  value === null || (typeof value !== 'object' && typeof value !== 'function')
+
+const didSignalValueChange = (previous: unknown, next: unknown) => {
+  if (isPrimitiveSignalValue(previous) && isPrimitiveSignalValue(next)) {
+    return !Object.is(previous, next)
+  }
+
+  return previous !== next
+}
+
+const writeSignalValue = <T>(
+  container: RuntimeContainer | null,
+  record: SignalRecord<T>,
+  nextValue: T,
+) => {
+  if (!didSignalValueChange(record.value, nextValue)) {
+    return false
+  }
+
+  record.value = nextValue
+  notifySignalWrite(container, record)
+  return true
+}
+
 const ensureSignalRecord = <T>(
   container: RuntimeContainer | null,
   id: string,
@@ -1461,15 +1089,20 @@ const ensureSignalRecord = <T>(
 }
 
 const isRouterSignalId = (id: string) =>
-  id === ROUTER_CURRENT_PATH_SIGNAL_ID || id === ROUTER_IS_NAVIGATING_SIGNAL_ID
+  id === ROUTER_CURRENT_PATH_SIGNAL_ID ||
+  id === ROUTER_CURRENT_URL_SIGNAL_ID ||
+  id === ROUTER_IS_NAVIGATING_SIGNAL_ID
+
+const isAtomSignalId = (id: string) => id.startsWith('a')
 
 const createStandaloneNavigate = (): Navigate => {
-  const navigate = (async (href: string, options?: NavigateOptions) => {
+  const navigate = (async (input: string | RouteTarget, options?: NavigateOptions) => {
     if (typeof window === 'undefined') {
       return
     }
-    const url = new URL(href, window.location.href)
-    if (options?.replace) {
+    const normalized = normalizeNavigateInput(input, options)
+    const url = new URL(normalized.href, window.location.href)
+    if (normalized.replace) {
       window.location.replace(url.href)
       return
     }
@@ -1487,10 +1120,15 @@ const createStandaloneNavigate = (): Navigate => {
   return setNavigateMeta(navigate)
 }
 
+export const primeLocationState = (container: RuntimeContainer, href: string | URL) => {
+  writeRouterLocation(ensureRouterState(container), href)
+}
+
 const recordSignalRead = (record: SignalRecord) => {
   if (currentEffect) {
     currentEffect.signals.add(record)
     record.effects.add(currentEffect)
+    return
   }
   const frame = getCurrentFrame()
   if (!frame) {
@@ -1500,7 +1138,7 @@ const recordSignalRead = (record: SignalRecord) => {
 }
 
 const notifySignalWrite = (container: RuntimeContainer | null, record: SignalRecord) => {
-  for (const effect of [...record.effects]) {
+  for (const effect of Array.from(record.effects)) {
     effect.fn()
   }
   if (!container) {
@@ -1508,46 +1146,132 @@ const notifySignalWrite = (container: RuntimeContainer | null, record: SignalRec
   }
   for (const componentId of record.subscribers) {
     const component = container.components.get(componentId)
-    if (component?.active) {
+    if (!component?.start || !component.end) {
       continue
     }
-    container.dirty.add(componentId)
+    if (
+      component.prefersEffectOnlyLocalSignalWrites &&
+      component.signalIds.includes(record.id) &&
+      record.effects.size > 0 &&
+      !record.subscribers.has(component.id)
+    ) {
+      continue
+    }
+    const hasProjectionSlotDom = hasDynamicProjectionSlotDom(component)
+    const nextActivateMode = hasProjectionSlotDom ? 'replace' : 'patch'
+    component.active = false
+    if (component.activateModeOnFlush !== 'replace') {
+      component.activateModeOnFlush = nextActivateMode
+    }
+    component.reuseExistingDomOnActivate = !hasProjectionSlotDom
+    component.reuseProjectionSlotDomOnActivate = !hasProjectionSlotDom
+    container.dirty.add(component.id)
   }
+  scheduleDirtyFlush(container)
 }
 
-const ensureRouterState = (container: RuntimeContainer, manifest?: RouteManifest) => {
-  if (container.router) {
-    if (manifest) {
-      container.router.manifest = [...manifest]
-    }
-    return container.router
+const canFlushDirtyComponents = (container: RuntimeContainer) =>
+  [...container.dirty].every((componentId) => {
+    const component = container.components.get(componentId)
+    return (
+      !!component &&
+      (container.imports.has(component.symbol) || container.symbols.has(component.symbol))
+    )
+  })
+
+const scheduleDirtyFlush = (container: RuntimeContainer) => {
+  if (
+    container.dirty.size === 0 ||
+    container.dirtyFlushQueued ||
+    !canFlushDirtyComponents(container)
+  ) {
+    return
   }
 
-  const currentPath = ensureSignalRecord(
-    container,
-    ROUTER_CURRENT_PATH_SIGNAL_ID,
-    normalizeRoutePath(container.doc?.location.pathname ?? '/'),
-  ).handle as { value: string }
-  const isNavigating = ensureSignalRecord(container, ROUTER_IS_NAVIGATING_SIGNAL_ID, false)
-    .handle as { value: boolean }
+  container.dirtyFlushQueued = true
+  queueMicrotask(() => {
+    const flushWhenReady = async () => {
+      try {
+        const pendingEvent = container.eventDispatchPromise
+        if (pendingEvent) {
+          await pendingEvent.catch(() => {})
+        }
+      } finally {
+        container.dirtyFlushQueued = false
+      }
 
-  const router: RouterState = {
+      if (container.dirty.size === 0) {
+        return
+      }
+      void flushDirtyComponents(container)
+    }
+
+    void flushWhenReady()
+  })
+}
+
+const writeRouterLocation = (router: RouterState, href: string | URL) => {
+  const url = href instanceof URL ? href : parseLocationHref(href)
+  const nextPath = normalizeRoutePath(url.pathname)
+  if (router.currentPath.value !== nextPath) {
+    router.currentPath.value = nextPath
+  }
+  if (router.currentUrl.value !== url.href) {
+    router.currentUrl.value = url.href
+  }
+}
+
+const syncRouterLocationSilently = (container: RuntimeContainer, href: string | URL) => {
+  const url = href instanceof URL ? href : parseLocationHref(href)
+  const nextPath = normalizeRoutePath(url.pathname)
+  ensureSignalRecord(container, ROUTER_CURRENT_PATH_SIGNAL_ID, nextPath).value = nextPath
+  ensureSignalRecord(container, ROUTER_CURRENT_URL_SIGNAL_ID, url.href).value = url.href
+  ensureSignalRecord(container, ROUTER_IS_NAVIGATING_SIGNAL_ID, false).value = false
+}
+
+const ensureRouterState = (container: RuntimeContainer, manifest?: RouteManifest) => {
+  if (container.router) {
+    if (manifest) {
+      container.router.manifest = [...manifest]
+    }
+    return container.router
+  }
+
+  const currentPath = ensureSignalRecord(
+    container,
+    ROUTER_CURRENT_PATH_SIGNAL_ID,
+    normalizeRoutePath(container.doc?.location.pathname ?? '/'),
+  ).handle as { value: string }
+  const currentUrl = ensureSignalRecord(
+    container,
+    ROUTER_CURRENT_URL_SIGNAL_ID,
+    container.doc?.location.href ?? currentPath.value,
+  ).handle as { value: string }
+  const isNavigating = ensureSignalRecord(container, ROUTER_IS_NAVIGATING_SIGNAL_ID, false)
+    .handle as { value: boolean }
+
+  const router: RouterState = {
     currentPath,
     currentRoute: null,
+    currentUrl,
     defaultTitle: container.doc?.title ?? '',
     isNavigating,
     loadedRoutes: new Map(),
+    location: undefined as unknown as RouteLocation,
     manifest: [],
     navigate: undefined as unknown as Navigate,
     prefetchedLoaders: new Map(),
+    routeModuleBusts: new Map(),
     routePrefetches: new Map(),
     sequence: 0,
   }
 
   container.router = router
-  router.navigate = setNavigateMeta((async (href: string, options?: NavigateOptions) => {
-    await navigateContainer(container, href, {
-      mode: options?.replace ? 'replace' : 'push',
+  router.location = createRouterLocation(router)
+  router.navigate = setNavigateMeta((async (input: string | RouteTarget, options?: NavigateOptions) => {
+    const normalized = normalizeNavigateInput(input, options)
+    await navigateContainer(container, normalized.href, {
+      mode: normalized.replace ? 'replace' : 'push',
     })
   }) as Navigate)
 
@@ -1578,6 +1302,26 @@ const pushContainer = <T>(container: RuntimeContainer, fn: () => T): T => {
 
 export const withRuntimeContainer = pushContainer
 
+const runReactiveEffectInContainer = <T>(effect: ReactiveEffect, fn: () => T): T => {
+  if (!effect.container) {
+    return fn()
+  }
+  return pushContainer(effect.container, fn)
+}
+
+const withRuntimeContextValue = <T>(token: RuntimeContextToken, value: unknown, fn: () => T): T => {
+  const stack = getContextValueStack()
+  stack.push({
+    token,
+    value,
+  })
+  try {
+    return fn()
+  } finally {
+    stack.pop()
+  }
+}
+
 const pushFrame = <T>(frame: RenderFrame, fn: () => T): T => {
   const stack = getFrameStack()
   stack.push(frame)
@@ -1646,6 +1390,14 @@ const materializeSymbolReference = (
   return fn
 }
 
+const materializeComputedSignalReference = (container: RuntimeContainer, signalId: string) => {
+  const record = container.signals.get(signalId)
+  if (!record) {
+    throw new Error(`Missing signal ${signalId}.`)
+  }
+  return createComputedSignalHandle(record, container)
+}
+
 const materializeScope = (container: RuntimeContainer, scopeId: string): unknown[] => {
   const slots = container.scopes.get(scopeId)
   if (!slots) {
@@ -1659,18 +1411,26 @@ const createFrame = (
   component: ComponentState,
   mode: RenderFrame['mode'],
   options?: {
+    effectCleanupSlot?: CleanupSlot
     reuseExistingDom?: boolean
+    reuseProjectionSlotDom?: boolean
   },
 ): RenderFrame => ({
   childCursor: 0,
   component,
   container,
+  effectCleanupSlot: options?.effectCleanupSlot ?? component.renderEffectCleanupSlot,
+  insertCursor: 0,
+  keyedRangeCursor: 0,
+  keyedRangeScopeStack: [],
   mountCallbacks: [],
   mode,
   projectionState: {
     counters: new Map(),
     reuseExistingDom: options?.reuseExistingDom ?? false,
+    reuseProjectionSlotDom: options?.reuseProjectionSlotDom ?? false,
   },
+  scopedStyles: [],
   signalCursor: 0,
   visibleCursor: 0,
   visitedDescendants: new Set(),
@@ -1703,12 +1463,22 @@ const getOrCreateComponentState = (
   const component: ComponentState = {
     active: false,
     didMount: false,
+    external: undefined,
+    externalSlotHtml: null,
+    externalSlotDom: null,
+    externalInstance: undefined,
+    externalMeta: null,
     id,
     mountCleanupSlots: [],
+    optimizedRoot: false,
     parentId,
+    prefersEffectOnlyLocalSignalWrites: false,
     props: {},
     projectionSlots: null,
+    rawProps: null,
+    renderEffectCleanupSlot: createCleanupSlot(),
     reuseExistingDomOnActivate: true,
+    reuseProjectionSlotDomOnActivate: false,
     scopeId: registerScope(container, []),
     signalIds: [],
     symbol,
@@ -1726,8 +1496,18 @@ const resetComponentForSymbolChange = (
   meta: ComponentMeta,
 ) => {
   disposeComponentMountCleanups(component)
+  disposeCleanupSlot(component.renderEffectCleanupSlot)
+  component.renderEffectCleanupSlot = createCleanupSlot()
   component.didMount = false
+  component.external = meta.external
+  component.externalSlotHtml = null
+  component.externalSlotDom = null
+  component.optimizedRoot = meta.optimizedRoot === true
+  component.prefersEffectOnlyLocalSignalWrites = false
   component.projectionSlots = meta.projectionSlots ?? null
+  component.rawProps = null
+  component.externalInstance = undefined
+  component.externalMeta = null
   component.scopeId = registerScope(container, meta.captures())
   component.signalIds = []
   component.suspensePromise = null
@@ -1750,6 +1530,7 @@ const getOrCreateWatchState = (
     return existing
   }
   const effect: ReactiveEffect = {
+    container,
     fn() {},
     signals: new Set(),
   }
@@ -1760,6 +1541,7 @@ const getOrCreateWatchState = (
     id,
     mode: 'dynamic',
     pending: null,
+    resumed: false,
     run: null,
     scopeId: registerScope(container, []),
     symbol: '',
@@ -1837,7 +1619,22 @@ const clearComponentSubscriptions = (container: RuntimeContainer, componentId: s
   }
 }
 
+const disposeExternalComponentInstance = (component: ComponentState) => {
+  if (!component.externalMeta || component.externalInstance === undefined) {
+    component.externalInstance = undefined
+    component.externalMeta = null
+    return
+  }
+
+  void component.externalMeta.unmount(component.externalInstance)
+  component.externalInstance = undefined
+  component.externalMeta = null
+}
+
 const disposeComponentMountCleanups = (component: ComponentState) => {
+  disposeExternalComponentInstance(component)
+  disposeCleanupSlot(component.renderEffectCleanupSlot)
+  component.renderEffectCleanupSlot = createCleanupSlot()
   const cleanupSlots = [...component.mountCleanupSlots].reverse()
   component.mountCleanupSlots = []
   for (const cleanupSlot of cleanupSlots) {
@@ -1909,6 +1706,25 @@ const isDescendantOf = (parentId: string, candidateId: string) =>
 const collectDescendantIds = (container: RuntimeContainer, componentId: string) =>
   [...container.components.keys()].filter((candidate) => isDescendantOf(componentId, candidate))
 
+const expandComponentIdsToDescendants = (
+  container: RuntimeContainer,
+  componentIds: Iterable<string>,
+) => {
+  const expanded = new Set<string>()
+
+  for (const componentId of componentIds) {
+    if (expanded.has(componentId)) {
+      continue
+    }
+    expanded.add(componentId)
+    for (const descendantId of collectDescendantIds(container, componentId)) {
+      expanded.add(descendantId)
+    }
+  }
+
+  return expanded
+}
+
 const pruneRemovedComponents = (
   container: RuntimeContainer,
   componentId: string,
@@ -1937,7 +1753,34 @@ const scheduleMicrotask = (fn: () => void) => {
   Promise.resolve().then(fn)
 }
 
+const scheduleInteractivePrefetchCheck = (container: RuntimeContainer) => {
+  if (
+    container.interactivePrefetchCheckQueued ||
+    !container.doc ||
+    typeof container.doc.querySelectorAll !== 'function'
+  ) {
+    return
+  }
+
+  container.interactivePrefetchCheckQueued = true
+  scheduleMicrotask(() => {
+    container.interactivePrefetchCheckQueued = false
+    const doc = container.doc
+    if (!doc || typeof doc.querySelectorAll !== 'function') {
+      return
+    }
+
+    for (const element of doc.querySelectorAll(INTERACTIVE_PREFETCH_SELECTOR)) {
+      if (!isElementNode(element)) {
+        continue
+      }
+      prefetchElementSymbols(container, element, INTERACTIVE_PREFETCH_EVENT_NAMES)
+    }
+  })
+}
+
 const scheduleVisibleCallbacksCheck = (container: RuntimeContainer) => {
+  scheduleInteractivePrefetchCheck(container)
   if (container.visibilityCheckQueued || container.visibles.size === 0 || !container.doc) {
     return
   }
@@ -2029,7 +1872,7 @@ const flushVisibleCallbacks = async (container: RuntimeContainer) => {
     return
   }
 
-  for (const visible of [...container.visibles.values()]) {
+  for (const visible of Array.from(container.visibles.values())) {
     if (visible.done || visible.pending) {
       continue
     }
@@ -2091,6 +1934,59 @@ const scheduleMountCallbacks = (
   })
 }
 
+const scheduleExternalComponentMount = (
+  container: RuntimeContainer,
+  component: ComponentState,
+  external: ExternalComponentMeta,
+  props: Record<string, unknown>,
+) => {
+  if (component.didMount) {
+    return
+  }
+  component.didMount = true
+  scheduleMicrotask(() => {
+    const host = getExternalRoot(component)
+    if (!host) {
+      return
+    }
+    void withClientContainer(container, async () => {
+      syncExternalProjectionSlotDom(container, component, props, host)
+      await syncExternalComponentInstance(component, external, props, host)
+      syncExternalProjectionSlotDom(container, component, props, host)
+      rebindExternalHost(container, host)
+      scheduleExternalHostRebind(container, host)
+      await flushDirtyComponents(container)
+      scheduleVisibleCallbacksCheck(container)
+    })
+  })
+}
+
+const rebindExternalHost = (container: RuntimeContainer, host: HTMLElement) => {
+  if (!host.parentNode || !('querySelectorAll' in host.parentNode)) {
+    return
+  }
+  bindComponentBoundaries(container, host.parentNode as ParentNode)
+  restoreSignalRefs(container, host.parentNode as ParentNode)
+  bindRouterLinks(container, host.parentNode as ParentNode)
+}
+
+const scheduleExternalHostRebind = (container: RuntimeContainer, host: HTMLElement) => {
+  const schedule =
+    container.doc?.defaultView?.setTimeout?.bind(container.doc.defaultView) ??
+    (typeof setTimeout === 'function' ? setTimeout : null)
+  if (!schedule) {
+    return
+  }
+  for (const delay of [0, 16, 100]) {
+    schedule(() => {
+      if (!host.isConnected) {
+        return
+      }
+      rebindExternalHost(container, host)
+    }, delay)
+  }
+}
+
 const collectProjectionSlotRanges = (roots: Node[]) => {
   const starts = new Map<string, Comment>()
   const ranges = new Map<string, { end: Comment; start: Comment }>()
@@ -2122,500 +2018,1583 @@ const collectProjectionSlotRanges = (roots: Node[]) => {
   return ranges
 }
 
-const preserveProjectionSlotContents = (start: Comment, end: Comment, nodes: Node[]) => {
-  const currentNodes = getBoundaryChildren(start, end)
-  const currentRanges = collectProjectionSlotRanges(currentNodes)
-  const nextRanges = collectProjectionSlotRanges(nodes)
-
-  for (const [key, nextRange] of nextRanges) {
-    const currentRange = currentRanges.get(key)
-    if (!currentRange) {
-      continue
+const collectComponentBoundaryIds = (roots: Node[]) => {
+  const ids = new Set<string>()
+  const visit = (node: Node) => {
+    if (typeof Comment !== 'undefined' ? node instanceof Comment : (node as Node).nodeType === 8) {
+      const marker = parseComponentBoundaryMarker((node as Comment).data)
+      if (marker) {
+        ids.add(marker.id)
+      }
     }
-
-    let cursor = currentRange.start.nextSibling
-    while (cursor && cursor !== currentRange.end) {
-      const nextSibling = cursor.nextSibling
-      nextRange.end.parentNode?.insertBefore(cursor, nextRange.end)
-      cursor = nextSibling
+    for (const child of Array.from((node.childNodes ?? []) as unknown as Iterable<Node>)) {
+      visit(child)
     }
   }
-}
 
-const replaceBoundaryContents = (
-  start: Comment,
-  end: Comment,
-  nodes: Node[],
-  options?: {
-    preserveProjectionSlots?: boolean
-  },
-) => {
-  if (options?.preserveProjectionSlots ?? true) {
-    preserveProjectionSlotContents(start, end, nodes)
-  }
-  let cursor = start.nextSibling
-  while (cursor && cursor !== end) {
-    const next = cursor.nextSibling
-    cursor.remove()
-    cursor = next
-  }
-  for (const node of nodes) {
-    end.parentNode?.insertBefore(node, end)
+  for (const root of roots) {
+    visit(root)
   }
-}
 
-interface FocusSnapshot {
-  path: number[]
-  selectionDirection?: 'backward' | 'forward' | 'none' | null
-  selectionEnd?: number | null
-  selectionStart?: number | null
+  return ids
 }
 
-interface PendingFocusRestore {
-  snapshot: FocusSnapshot
-}
+const collectComponentBoundaryRanges = (roots: Node[]) => {
+  const starts = new Map<string, Comment>()
+  const ranges = new Map<string, { end: Comment; start: Comment }>()
 
-const getBoundaryChildren = (start: Comment, end: Comment) => {
-  const nodes: Node[] = []
-  let cursor = start.nextSibling
-  while (cursor && cursor !== end) {
-    nodes.push(cursor)
-    cursor = cursor.nextSibling
+  const visit = (node: Node) => {
+    if (typeof Comment !== 'undefined' ? node instanceof Comment : (node as Node).nodeType === 8) {
+      const commentNode = node as Comment
+      const marker = parseComponentBoundaryMarker(commentNode.data)
+      if (marker) {
+        if (marker.kind === 'start') {
+          starts.set(marker.id, commentNode)
+        } else {
+          const startNode = starts.get(marker.id)
+          if (startNode) {
+            ranges.set(marker.id, { end: commentNode, start: startNode })
+          }
+        }
+      }
+    }
+    for (const child of Array.from((node.childNodes ?? []) as unknown as Iterable<Node>)) {
+      visit(child)
+    }
   }
-  return nodes
-}
 
-const getNodePath = (root: Node, target: Node): number[] | null => {
-  if (root === target) {
-    return []
+  for (const root of roots) {
+    visit(root)
   }
 
-  const path: number[] = []
-  let cursor: Node | null = target
-  while (cursor && cursor !== root) {
-    const parent: Node | null = cursor.parentNode
-    if (!parent) {
-      return null
+  return ranges
+}
+
+const createKeyedRangeIdentity = (scope: string, key: string) => JSON.stringify([scope, key])
+
+const collectKeyedRangeRanges = (roots: Node[]) => {
+  const starts = new Map<string, Comment>()
+  const ranges = new Map<string, { end: Comment; start: Comment }>()
+
+  const visit = (node: Node) => {
+    if (typeof Comment !== 'undefined' ? node instanceof Comment : (node as Node).nodeType === 8) {
+      const commentNode = node as Comment
+      const marker = parseKeyedRangeMarker(commentNode.data)
+      if (marker) {
+        const identity = createKeyedRangeIdentity(marker.scope, marker.key)
+        if (marker.kind === 'start') {
+          starts.set(identity, commentNode)
+        } else {
+          const startNode = starts.get(identity)
+          if (startNode) {
+            ranges.set(identity, { end: commentNode, start: startNode })
+          }
+        }
+      }
     }
-    const index = Array.prototype.indexOf.call(parent.childNodes, cursor)
-    if (index < 0) {
-      return null
+    for (const child of Array.from((node.childNodes ?? []) as unknown as Iterable<Node>)) {
+      visit(child)
     }
-    path.unshift(index)
-    cursor = parent
   }
 
-  return cursor === root ? path : null
+  for (const root of roots) {
+    visit(root)
+  }
+
+  return ranges
 }
 
-const getNodeByPath = (root: Node, path: number[]) => {
-  let cursor: Node | null = root
-  for (const index of path) {
-    cursor = cursor?.childNodes.item(index) ?? null
-    if (!cursor) {
-      return null
+const collectBoundaryRangeNodes = (start: Comment, end: Comment) => {
+  const nodes: Node[] = [start]
+  let cursor: Node | null = start.nextSibling
+  while (cursor) {
+    nodes.push(cursor)
+    if (cursor === end) {
+      return nodes
     }
+    cursor = cursor.nextSibling
   }
-  return cursor
+  return []
 }
 
-const getElementPath = (root: Element, target: Element): number[] | null => {
-  if (root === target) {
-    return []
+const canReuseNodeAsIs = (current: Node, next: Node): boolean => {
+  if (current.nodeType !== next.nodeType) {
+    return false
   }
 
-  const path: number[] = []
-  let cursor: Element | null = target
-  while (cursor && cursor !== root) {
-    const parent: HTMLElement | null = cursor.parentElement
-    if (!parent) {
-      return null
+  if (current.nodeType === DOM_TEXT_NODE && next.nodeType === DOM_TEXT_NODE) {
+    return current.textContent === next.textContent
+  }
+
+  if (
+    (typeof Comment !== 'undefined'
+      ? current instanceof Comment
+      : current.nodeType === DOM_COMMENT_NODE) &&
+    (typeof Comment !== 'undefined' ? next instanceof Comment : next.nodeType === DOM_COMMENT_NODE)
+  ) {
+    const currentComment = current as Comment
+    const nextComment = next as Comment
+    const currentBoundary = parseComponentBoundaryMarker(currentComment.data)
+    const nextBoundary = parseComponentBoundaryMarker(nextComment.data)
+    if (currentBoundary || nextBoundary) {
+      if (!currentBoundary || !nextBoundary) {
+        return false
+      }
+      if (currentBoundary.id !== nextBoundary.id || currentBoundary.kind !== nextBoundary.kind) {
+        return false
+      }
+      return nextBoundary.kind !== 'start' || !didComponentBoundaryChange(nextComment)
     }
-    const index = Array.prototype.indexOf.call(parent.children, cursor)
-    if (index < 0) {
-      return null
+    return currentComment.data === nextComment.data
+  }
+
+  if (!isElementNode(current) || !isElementNode(next) || current.tagName !== next.tagName) {
+    return false
+  }
+
+  const currentNames = current.getAttributeNames()
+  const nextNames = next.getAttributeNames()
+  if (currentNames.length !== nextNames.length) {
+    return false
+  }
+  for (const name of currentNames) {
+    if (current.getAttribute(name) !== next.getAttribute(name)) {
+      return false
     }
-    path.unshift(index)
-    cursor = parent
+  }
+  if (
+    isHTMLInputElementNode(current) &&
+    isHTMLInputElementNode(next) &&
+    current.checked !== next.checked
+  ) {
+    return false
+  }
+  if ('value' in current && 'value' in next && current.value !== next.value) {
+    return false
   }
 
-  return cursor === root ? path : null
+  const currentChildren = Array.from(current.childNodes)
+  const nextChildren = Array.from(next.childNodes)
+  if (currentChildren.length !== nextChildren.length) {
+    return false
+  }
+  for (let index = 0; index < currentChildren.length; index += 1) {
+    if (!canReuseNodeAsIs(currentChildren[index]!, nextChildren[index]!)) {
+      return false
+    }
+  }
+  return true
 }
 
-const getElementByPath = (root: Element, path: number[]) => {
-  let cursor: Element | null = root
-  for (const index of path) {
-    cursor = (cursor?.children.item(index) as Element | null) ?? null
-    if (!cursor) {
-      return null
+const canReuseNodeSequenceAsIs = (currentNodes: Node[], nextNodes: Node[]) => {
+  if (currentNodes.length !== nextNodes.length) {
+    return false
+  }
+  for (let index = 0; index < currentNodes.length; index += 1) {
+    if (!canReuseNodeAsIs(currentNodes[index]!, nextNodes[index]!)) {
+      return false
     }
   }
-  return cursor
+  return true
 }
 
-const captureBoundaryFocus = (
-  doc: Document,
-  start: Comment,
-  end: Comment,
-): FocusSnapshot | null => {
-  const activeElement = doc.activeElement
-  if (!isHTMLElementNode(activeElement)) {
-    return null
-  }
+const preserveComponentBoundaryContentsInRoots = (currentRoots: Node[], nextRoots: Node[]) => {
+  const currentRanges = collectComponentBoundaryRanges(currentRoots)
+  const nextRanges = collectComponentBoundaryRanges(nextRoots)
+  const preservedComponentIds = new Set<string>()
 
-  const topLevelNodes = getBoundaryChildren(start, end)
-  for (let i = 0; i < topLevelNodes.length; i++) {
-    const candidate = topLevelNodes[i]
-    if (
-      candidate !== activeElement &&
-      (!isElementNode(candidate) || !candidate.contains(activeElement))
-    ) {
+  for (const [id, nextRange] of nextRanges) {
+    if (didComponentBoundaryChange(nextRange.start)) {
+      continue
+    }
+    const currentRange = currentRanges.get(id)
+    if (!currentRange) {
       continue
     }
 
-    const innerPath = getNodePath(candidate, activeElement)
-    if (!innerPath) {
+    const movedRoots = collectBoundaryRangeNodes(currentRange.start, currentRange.end)
+    if (movedRoots.length === 0) {
       continue
     }
 
-    return {
-      path: [i, ...innerPath],
-      selectionDirection: isTextEntryElement(activeElement)
-        ? activeElement.selectionDirection
-        : null,
-      selectionEnd: isTextEntryElement(activeElement) ? activeElement.selectionEnd : null,
-      selectionStart: isTextEntryElement(activeElement) ? activeElement.selectionStart : null,
+    const replacementParent = nextRange.start.parentNode
+    if (!replacementParent) {
+      continue
     }
-  }
 
-  return null
-}
+    for (const node of movedRoots) {
+      replacementParent.insertBefore(node, nextRange.start)
+    }
 
-const restoreBoundaryFocus = (
-  doc: Document,
-  start: Comment,
-  end: Comment,
-  snapshot: FocusSnapshot | null,
-) => {
-  if (!snapshot) {
-    return
-  }
-
-  const [topLevelIndex, ...innerPath] = snapshot.path
-  const root = getBoundaryChildren(start, end)[topLevelIndex]
-  if (!root) {
-    return
-  }
+    let cursor: Node | null = nextRange.start
+    while (cursor) {
+      const nextSibling: Node | null = cursor.nextSibling
+      if (typeof (cursor as Node & { remove?: () => void }).remove === 'function') {
+        ;(cursor as Node & { remove: () => void }).remove()
+      } else {
+        cursor.parentNode?.removeChild(cursor)
+      }
+      if (cursor === nextRange.end) {
+        break
+      }
+      cursor = nextSibling
+    }
 
-  const nextActive = innerPath.length > 0 ? getNodeByPath(root, innerPath) : root
-  if (!isHTMLElementNode(nextActive)) {
-    return
+    preservedComponentIds.add(id)
+    for (const componentId of collectComponentBoundaryIds(movedRoots)) {
+      preservedComponentIds.add(componentId)
+    }
   }
 
-  restoreFocusTarget(doc, nextActive, snapshot)
+  return preservedComponentIds
 }
 
-const restoreFocusTarget = (doc: Document, nextActive: HTMLElement, snapshot: FocusSnapshot) => {
-  const restore = () => {
-    if (!nextActive.isConnected) {
-      return false
+const preserveProjectionSlotContentsInRoots = (currentRoots: Node[], nextRoots: Node[]) => {
+  const currentRanges = collectProjectionSlotRanges(currentRoots)
+  const nextRanges = collectProjectionSlotRanges(nextRoots)
+  const preservedComponentIds = new Set<string>()
+
+  const isPlaceholderProjectionBody = (nodes: Node[]) => {
+    if (nodes.length === 0) {
+      return true
     }
-    nextActive.focus({ preventScroll: true })
-    if (
-      isTextEntryElement(nextActive) &&
-      snapshot.selectionStart !== null &&
-      snapshot.selectionStart !== undefined
-    ) {
-      nextActive.setSelectionRange(
-        snapshot.selectionStart,
-        snapshot.selectionEnd ?? snapshot.selectionStart,
-        snapshot.selectionDirection ?? undefined,
-      )
+
+    for (let index = 0; index < nodes.length; index += 1) {
+      const node = nodes[index]!
+      const token = getPatchOpaqueRangeToken(node, 'start')
+      if (!token) {
+        return false
+      }
+
+      let endIndex = index + 1
+      while (endIndex < nodes.length) {
+        const endToken = getPatchOpaqueRangeToken(nodes[endIndex]!, 'end')
+        if (endToken && endToken.rangeKind === token.rangeKind && endToken.token === token.token) {
+          break
+        }
+        endIndex += 1
+      }
+
+      if (endIndex >= nodes.length || endIndex !== index + 1) {
+        return false
+      }
+
+      index = endIndex
     }
-    return doc.activeElement === nextActive
-  }
 
-  if (restore()) {
-    return
+    return true
   }
 
-  const win = doc.defaultView
-  if (!win) {
-    return
+  for (const [key, nextRange] of nextRanges) {
+    const currentRange = currentRanges.get(key)
+    if (!currentRange) {
+      continue
+    }
+
+    const nextBodyNodes = getBoundaryChildren(nextRange.start, nextRange.end)
+    if (!isPlaceholderProjectionBody(nextBodyNodes)) {
+      continue
+    }
+
+    const movedRoots: Node[] = []
+    let cursor = currentRange.start.nextSibling
+    while (cursor && cursor !== currentRange.end) {
+      const nextSibling = cursor.nextSibling
+      movedRoots.push(cursor)
+      cursor = nextSibling
+    }
+
+    if (movedRoots.length === 0) {
+      continue
+    }
+
+    let nextBodyCursor = nextRange.start.nextSibling
+    while (nextBodyCursor && nextBodyCursor !== nextRange.end) {
+      const nextSibling = nextBodyCursor.nextSibling
+      if (typeof (nextBodyCursor as Node & { remove?: () => void }).remove === 'function') {
+        ;(nextBodyCursor as Node & { remove: () => void }).remove()
+      } else {
+        nextBodyCursor.parentNode?.removeChild(nextBodyCursor)
+      }
+      nextBodyCursor = nextSibling
+    }
+
+    for (const node of movedRoots) {
+      nextRange.end.parentNode?.insertBefore(node, nextRange.end)
+    }
+
+    for (const componentId of collectComponentBoundaryIds(movedRoots)) {
+      preservedComponentIds.add(componentId)
+    }
   }
 
-  let remainingAttempts = 3
-  const retry = () => {
-    if (remainingAttempts <= 0) {
-      return
+  return preservedComponentIds
+}
+
+const preserveKeyedRangeContentsInRoots = (currentRoots: Node[], nextRoots: Node[]) => {
+  const preservedComponentIds = new Set<string>()
+  const currentRanges = collectKeyedRangeRanges(currentRoots)
+  const nextRanges = collectKeyedRangeRanges(nextRoots)
+
+  for (const [key, nextRange] of nextRanges) {
+    const currentRange = currentRanges.get(key)
+    if (!currentRange) {
+      continue
     }
-    remainingAttempts--
-    const run = () => {
-      if (restore()) {
-        return
+
+    const currentBodyRoots = getBoundaryChildren(currentRange.start, currentRange.end)
+    const nextBodyRoots = getBoundaryChildren(nextRange.start, nextRange.end)
+    if (canReuseNodeSequenceAsIs(currentBodyRoots, nextBodyRoots)) {
+      const movedRoots = collectBoundaryRangeNodes(currentRange.start, currentRange.end)
+      if (movedRoots.length === 0) {
+        continue
+      }
+
+      const replacementParent = nextRange.start.parentNode
+      if (!replacementParent) {
+        continue
+      }
+
+      for (const node of movedRoots) {
+        replacementParent.insertBefore(node, nextRange.start)
+      }
+
+      let cursor: Node | null = nextRange.start
+      while (cursor) {
+        const nextSibling: Node | null = cursor.nextSibling
+        if (typeof (cursor as Node & { remove?: () => void }).remove === 'function') {
+          ;(cursor as Node & { remove: () => void }).remove()
+        } else {
+          cursor.parentNode?.removeChild(cursor)
+        }
+        if (cursor === nextRange.end) {
+          break
+        }
+        cursor = nextSibling
       }
-      retry()
+
+      for (const componentId of collectComponentBoundaryIds(movedRoots)) {
+        preservedComponentIds.add(componentId)
+      }
+      continue
     }
 
-    if (typeof win.requestAnimationFrame === 'function') {
-      win.requestAnimationFrame(() => run())
-      return
+    if (currentBodyRoots.length === 0 && nextBodyRoots.length === 0) {
+      continue
+    }
+
+    for (const componentId of preserveReusableContentInRoots(currentBodyRoots, nextBodyRoots)) {
+      preservedComponentIds.add(componentId)
     }
-    win.setTimeout(run, 16)
   }
 
-  retry()
+  return preservedComponentIds
 }
 
-const captureDocumentFocus = (
-  doc: Document,
-  focusSource?: EventTarget | null,
-): FocusSnapshot | null => {
-  const candidate = isHTMLElementNode(focusSource)
-    ? focusSource
-    : isHTMLElementNode(doc.activeElement)
-      ? doc.activeElement
-      : null
-  if (!candidate) {
-    return null
+const canMatchReusableRoot = (current: Node, next: Node) => {
+  if (current.nodeType !== next.nodeType) {
+    return false
   }
 
-  const path = getElementPath(doc.body, candidate)
-  if (!path) {
-    return null
+  if (
+    (typeof Comment !== 'undefined' ? current instanceof Comment : current.nodeType === 8) &&
+    (typeof Comment !== 'undefined' ? next instanceof Comment : next.nodeType === 8)
+  ) {
+    return (current as Comment).data === (next as Comment).data
   }
 
-  return {
-    path,
-    selectionDirection: isTextEntryElement(candidate) ? candidate.selectionDirection : null,
-    selectionEnd: isTextEntryElement(candidate) ? candidate.selectionEnd : null,
-    selectionStart: isTextEntryElement(candidate) ? candidate.selectionStart : null,
+  if (current.nodeType === DOM_TEXT_NODE && next.nodeType === DOM_TEXT_NODE) {
+    return true
   }
+
+  return isElementNode(current) && isElementNode(next) && current.tagName === next.tagName
 }
 
-const capturePendingFocusRestore = (
-  container: RuntimeContainer,
-  focusSource?: EventTarget | null,
-): PendingFocusRestore | null => {
-  if (!container.doc) {
+const preserveExternalRootContents = (current: Node, next: Node) => {
+  if (!isElementNode(current) || !isElementNode(next)) {
     return null
   }
-
-  const snapshot = captureDocumentFocus(container.doc, focusSource)
-  if (!snapshot) {
+  if (
+    current.getAttribute(EXTERNAL_ROOT_ATTR) !== 'true' ||
+    next.getAttribute(EXTERNAL_ROOT_ATTR) !== 'true'
+  ) {
     return null
   }
-  return {
-    snapshot,
+  if (next.childNodes.length > 0) {
+    return new Set<string>()
   }
-}
 
-const restorePendingFocus = (container: RuntimeContainer, pending: PendingFocusRestore | null) => {
-  if (!pending || !container.doc) {
-    return
+  const movedRoots = [...current.childNodes]
+  for (const node of movedRoots) {
+    next.appendChild(node)
   }
+  return collectComponentBoundaryIds(movedRoots)
+}
 
-  const nextActive = getElementByPath(container.doc.body, pending.snapshot.path)
-  if (!isHTMLElementNode(nextActive)) {
-    return
-  }
+const preserveInsertMarkerContentsInRoots = (currentRoots: Node[], nextRoots: Node[]) => {
+  const preservedComponentIds = new Set<string>()
 
-  restoreFocusTarget(container.doc, nextActive, pending.snapshot)
-}
+  const preserveLists = (currentChildren: Node[], nextChildren: Node[]) => {
+    let currentIndex = 0
 
-const htmlToNodes = (doc: Document, html: string) => {
-  const template = doc.createElement('template')
-  template.innerHTML = html
-  return Array.from(template.content.childNodes)
-}
+    for (const nextChild of nextChildren) {
+      const nextInsertMarker = (
+        typeof Comment !== 'undefined' ? nextChild instanceof Comment : nextChild.nodeType === 8
+      )
+        ? parseInsertMarker((nextChild as Comment).data)
+        : null
+      if (nextInsertMarker) {
+        let markerIndex = -1
+        for (let index = currentIndex; index < currentChildren.length; index += 1) {
+          const currentChild = currentChildren[index]!
+          if (
+            !(typeof Comment !== 'undefined'
+              ? currentChild instanceof Comment
+              : currentChild.nodeType === 8)
+          ) {
+            continue
+          }
+          const currentInsertMarker = parseInsertMarker((currentChild as Comment).data)
+          if (currentInsertMarker?.key === nextInsertMarker.key) {
+            markerIndex = index
+            break
+          }
+        }
+        if (markerIndex < 0) {
+          continue
+        }
 
-const EVENT_PROP_REGEX = /^on([A-Z].+)\$$/
-const DANGEROUSLY_SET_INNER_HTML_PROP = 'dangerouslySetInnerHTML'
+        const currentMarker = currentChildren[markerIndex]! as Comment
+        const explicitCount = getRememberedInsertMarkerNodeCount(currentMarker)
+        if (explicitCount === undefined) {
+          currentIndex = markerIndex + 1
+          continue
+        }
+        const ownedStartIndex =
+          explicitCount >= 0 && markerIndex - explicitCount >= currentIndex
+            ? markerIndex - explicitCount
+            : currentIndex
+        const movedRoots = currentChildren.slice(ownedStartIndex, markerIndex)
+        if (collectComponentBoundaryIds(movedRoots).size > 0) {
+          currentIndex = markerIndex + 1
+          continue
+        }
 
-const resolveDangerouslySetInnerHTML = (value: unknown) =>
-  value === false || value === undefined || value === null ? null : String(value)
+        for (const node of movedRoots) {
+          nextChild.parentNode?.insertBefore(node, nextChild)
+        }
+        setRememberedInsertMarkerNodeCount(nextChild as Comment, movedRoots.length)
 
-const toEventName = (propName: string) => {
-  const matched = propName.match(EVENT_PROP_REGEX)
-  if (!matched) {
-    return null
-  }
-  const [first, ...rest] = matched[1]
-  return `${first.toLowerCase()}${rest.join('')}`
-}
+        for (const componentId of collectComponentBoundaryIds(movedRoots)) {
+          preservedComponentIds.add(componentId)
+        }
 
-const TEXT_ESCAPE_REGEX = /[&<>]/
-const ATTR_ESCAPE_REGEX = /[&<>'"]/
+        currentIndex = markerIndex + 1
+        continue
+      }
 
-const escapeString = (value: string, mode: 'text' | 'attr') => {
-  const escapePattern = mode === 'attr' ? ATTR_ESCAPE_REGEX : TEXT_ESCAPE_REGEX
-  const firstMatch = value.search(escapePattern)
-  if (firstMatch < 0) {
-    return value
-  }
+      let matchedIndex = -1
+      for (let index = currentIndex; index < currentChildren.length; index += 1) {
+        if (canMatchReusableRoot(currentChildren[index]!, nextChild)) {
+          matchedIndex = index
+          break
+        }
+      }
+      if (matchedIndex < 0) {
+        continue
+      }
 
-  let output = ''
-  let lastIndex = 0
-  for (let index = firstMatch; index < value.length; index += 1) {
-    let escaped: string | null = null
-    switch (value.charCodeAt(index)) {
-      case 34:
-        escaped = mode === 'attr' ? '&quot;' : null
-        break
-      case 38:
-        escaped = '&amp;'
-        break
-      case 39:
-        escaped = mode === 'attr' ? '&#39;' : null
-        break
-      case 60:
-        escaped = '&lt;'
-        break
-      case 62:
-        escaped = '&gt;'
-        break
-    }
-    if (!escaped) {
-      continue
+      const currentChild = currentChildren[matchedIndex]!
+      if (isElementNode(currentChild) && isElementNode(nextChild)) {
+        const preservedExternalRootIds = preserveExternalRootContents(currentChild, nextChild)
+        if (preservedExternalRootIds) {
+          for (const componentId of preservedExternalRootIds) {
+            preservedComponentIds.add(componentId)
+          }
+          currentIndex = matchedIndex + 1
+          continue
+        }
+        preserveLists(Array.from(currentChild.childNodes), Array.from(nextChild.childNodes))
+      }
+      currentIndex = matchedIndex + 1
     }
-    output += value.slice(lastIndex, index)
-    output += escaped
-    lastIndex = index + 1
   }
-  return output + value.slice(lastIndex)
+
+  preserveLists(currentRoots, nextRoots)
+
+  return preservedComponentIds
 }
 
-const escapeText = (value: string) => escapeString(value, 'text')
+export const preserveReusableContentInRoots = (
+  currentRoots: Node[],
+  nextRoots: Node[],
+  options?: {
+    preserveProjectionSlots?: boolean
+  },
+) => {
+  const preservedComponentIds = new Set<string>()
 
-const escapeAttr = (value: string) => escapeString(value, 'attr')
+  // Preserve keyed range bodies before nested component boundaries so keyed list reuse
+  // happens within the right render scope before standalone boundary preservation runs.
+  for (const componentId of preserveKeyedRangeContentsInRoots(currentRoots, nextRoots)) {
+    preservedComponentIds.add(componentId)
+  }
 
-const renderSSRAttr = (name: string, value: unknown) => {
-  if (value === false || value === undefined || value === null) {
-    return ''
+  for (const componentId of preserveComponentBoundaryContentsInRoots(currentRoots, nextRoots)) {
+    preservedComponentIds.add(componentId)
   }
-  if (value === true) {
-    return ` ${name}`
+
+  if (options?.preserveProjectionSlots ?? true) {
+    for (const componentId of preserveProjectionSlotContentsInRoots(currentRoots, nextRoots)) {
+      preservedComponentIds.add(componentId)
+    }
   }
-  return ` ${name}="${escapeAttr(String(value))}"`
-}
 
-const renderStringArray = (values: readonly (JSX.Element | JSX.Element[])[]) => {
-  let output = ''
-  for (let index = 0; index < values.length; index += 1) {
-    output += renderStringNode(values[index] as JSX.Element | JSX.Element[])
+  for (const componentId of preserveInsertMarkerContentsInRoots(currentRoots, nextRoots)) {
+    preservedComponentIds.add(componentId)
   }
-  return output
+
+  return preservedComponentIds
 }
 
-const renderSSRTemplateValue = (value: unknown): string => {
-  if (value === false || value === null || value === undefined) {
-    return ''
-  }
-  if (Array.isArray(value)) {
-    return renderStringArray(value as readonly (JSX.Element | JSX.Element[])[])
-  }
-  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
-    return escapeText(String(value))
+const replaceProjectionSlotContents = (start: Comment, end: Comment, nodes: Node[]) => {
+  let cursor = start.nextSibling
+  while (cursor && cursor !== end) {
+    const next = cursor.nextSibling
+    cursor.remove()
+    cursor = next
   }
-  if (isSSRTemplate(value)) {
-    return renderSSRTemplateNode(value)
+  for (const node of nodes) {
+    end.parentNode?.insertBefore(node, end)
   }
-  if (isProjectionSlot(value)) {
-    return renderProjectionSlotToString(value)
+  rememberManagedAttributesForNodes(nodes)
+}
+
+const replaceBoundaryContents = (
+  start: Comment,
+  end: Comment,
+  nodes: Node[],
+  options?: {
+    preserveProjectionSlots?: boolean
+  },
+) => {
+  const preservedComponentIds = preserveReusableContentInRoots(
+    getBoundaryChildren(start, end),
+    nodes,
+    {
+      preserveProjectionSlots: options?.preserveProjectionSlots ?? true,
+    },
+  )
+  let cursor = start.nextSibling
+  while (cursor && cursor !== end) {
+    const next = cursor.nextSibling
+    cursor.remove()
+    cursor = next
   }
-  if (isRouteSlot(value)) {
-    const routeElement = resolveRouteSlot(getCurrentContainer(), value)
-    return routeElement ? renderStringNode(routeElement as JSX.Element) : ''
+  for (const node of nodes) {
+    end.parentNode?.insertBefore(node, end)
   }
-  return renderStringNode(value as JSX.Element)
+  rememberManagedAttributesForNodes(nodes)
+
+  return preservedComponentIds
 }
 
-const renderSSRTemplateNode = (template: JSX.SSRTemplate) => {
-  let output = template.strings[0] ?? ''
-  for (let index = 0; index < template.values.length; index += 1) {
-    const value = template.values[index]
-    output += isSSRAttrValue(value)
-      ? renderSSRAttr(value.name, value.value)
-      : renderSSRTemplateValue(value)
-    output += template.strings[index + 1] ?? ''
+export const syncManagedElementAttributes = (current: Element, next: Element) => {
+  const nextNames = new Set(next.getAttributeNames())
+  const previousNames = getManagedAttributeSnapshot(current) ?? new Set<string>()
+
+  for (const name of previousNames) {
+    if (!nextNames.has(name)) {
+      current.removeAttribute(name)
+    }
   }
-  return output
-}
 
-const resolveRenderable = (value: JSX.Element): JSX.Element => {
-  let current = value
-  while (typeof current === 'function' && !getLazyMeta(current) && !getComponentMeta(current)) {
-    current = current()
+  for (const name of nextNames) {
+    const nextValue = next.getAttribute(name)
+    if (nextValue !== null && current.getAttribute(name) !== nextValue) {
+      current.setAttribute(name, nextValue)
+    }
   }
-  return current
-}
 
-const nextComponentPosition = (container: RuntimeContainer) => {
-  const frame = getCurrentFrame()
-  if (!frame) {
-    return {
-      childIndex: container.rootChildCursor++,
-      parentId: ROOT_COMPONENT_ID,
+  replaceManagedAttributeSnapshot(current, nextNames)
+
+  if (isHTMLInputElementNode(current) && isHTMLInputElementNode(next)) {
+    if (current.checked !== next.checked) {
+      current.checked = next.checked
     }
   }
-  return {
-    childIndex: frame.childCursor++,
-    parentId: frame.component.id,
+  if ('value' in current && 'value' in next && current.value !== next.value) {
+    if (current.value !== next.value) {
+      current.value = next.value
+    }
   }
 }
 
-const registerEventBinding = (
-  container: RuntimeContainer,
-  descriptor: EventDescriptor | LazyMeta,
-): string => {
-  const scopeId = registerScope(container, descriptor.captures())
-  return `${descriptor.symbol}:${scopeId}`
+export const tryPatchElementShellInPlace = (current: Element, next: Element) => {
+  if (current.tagName !== next.tagName) {
+    return false
+  }
+
+  syncManagedElementAttributes(current, next)
+  preserveReusableContentInRoots(Array.from(current.childNodes), Array.from(next.childNodes))
+  while (current.firstChild) {
+    current.firstChild.remove()
+  }
+  while (next.firstChild) {
+    current.appendChild(next.firstChild)
+  }
+  rememberManagedAttributesForNodes(Array.from(current.childNodes))
+  return true
 }
 
-export const bindRuntimeEvent = (element: Element, eventName: string, value: unknown): boolean => {
-  const descriptor = getEventMeta(value)
-  if (!descriptor) {
-    return false
+const collectInsertRangeOwnedNodes = (marker: Comment, ownedNodeCount: number) => {
+  if (!marker.parentNode || ownedNodeCount === 0) {
+    return [] as Node[]
   }
 
-  const container = getCurrentContainer()
-  if (!container) {
-    return false
+  const nodes: Node[] = []
+  let cursor: Node | null = marker.previousSibling
+  while (cursor && nodes.length < ownedNodeCount) {
+    nodes.unshift(cursor)
+    cursor = cursor.previousSibling
   }
 
-  element.setAttribute('data-eid', `e${container.nextElementId++}`)
-  element.setAttribute(`data-e-on${eventName}`, registerEventBinding(container, descriptor))
-  return true
+  return nodes.length === ownedNodeCount ? nodes : []
 }
 
-const renderProjectionSlotToString = (slot: ProjectionSlotValue) => {
+const replaceInsertRangeOwnedNodes = (
+  currentMarker: Comment,
+  currentOwnedNodes: Node[],
+  nextOwnedNodes: Node[],
+) => {
+  const parent = currentMarker.parentNode
+  if (!parent) {
+    return false
+  }
+
+  preserveReusableContentInRoots(currentOwnedNodes, nextOwnedNodes)
+
+  for (const node of currentOwnedNodes) {
+    if (typeof (node as Node & { remove?: () => void }).remove === 'function') {
+      ;(node as Node & { remove: () => void }).remove()
+      continue
+    }
+    node.parentNode?.removeChild(node)
+  }
+  for (const node of nextOwnedNodes) {
+    parent.insertBefore(node, currentMarker)
+  }
+
+  rememberManagedAttributesForNodes(parent.childNodes)
+  setRememberedInsertMarkerNodeCount(currentMarker, nextOwnedNodes.length)
+  return true
+}
+
+type PatchSequenceUnit =
+  | { kind: 'node'; node: Node; nodeCount: number }
+  | {
+      bodyNodes: Node[]
+      end: Comment
+      kind: 'opaque-range'
+      nodeCount: number
+      rangeKind: 'component-boundary' | 'keyed' | 'projection-slot'
+      start: Comment
+      token: string
+    }
+  | {
+      kind: 'insert-range'
+      marker: Comment
+      nodeCount: number
+      token: string
+    }
+
+const getPatchOpaqueRangeToken = (node: Node, kind: 'start' | 'end') => {
+  if (!(typeof Comment !== 'undefined' ? node instanceof Comment : node.nodeType === 8)) {
+    return null
+  }
+
+  const comment = node as Comment
+  const boundary = parseComponentBoundaryMarker(comment.data)
+  if (boundary?.kind === kind) {
+    return {
+      rangeKind: 'component-boundary' as const,
+      token: `component-boundary:${boundary.id}`,
+    }
+  }
+
+  const projectionSlot = parseProjectionSlotMarker(comment.data)
+  if (projectionSlot?.kind === kind) {
+    return {
+      rangeKind: 'projection-slot' as const,
+      token: `projection-slot:${projectionSlot.key}`,
+    }
+  }
+
+  const keyedRange = parseKeyedRangeMarker(comment.data)
+  if (keyedRange?.kind === kind) {
+    return {
+      rangeKind: 'keyed' as const,
+      token: `keyed:${createKeyedRangeIdentity(keyedRange.scope, keyedRange.key)}`,
+    }
+  }
+
+  return null
+}
+
+const collectPatchSequenceUnits = (nodes: Node[]): PatchSequenceUnit[] | null => {
+  const units: PatchSequenceUnit[] = []
+
+  for (let index = 0; index < nodes.length; index += 1) {
+    const node = nodes[index]!
+    const token = getPatchOpaqueRangeToken(node, 'start')
+    if (!token) {
+      const insertMarker =
+        (typeof Comment !== 'undefined' ? node instanceof Comment : node.nodeType === 8) &&
+        parseInsertMarker((node as Comment).data)
+      if (!insertMarker) {
+        units.push({ kind: 'node', node, nodeCount: 1 })
+        continue
+      }
+
+      const ownedNodeCount = getRememberedInsertMarkerNodeCount(node as Comment)
+      let remaining = ownedNodeCount
+      while (remaining > 0) {
+        const previous = units[units.length - 1]
+        if (!previous || previous.nodeCount > remaining) {
+          return null
+        }
+        remaining -= previous.nodeCount
+        units.pop()
+      }
+
+      units.push({
+        kind: 'insert-range',
+        marker: node as Comment,
+        nodeCount: ownedNodeCount + 1,
+        token: `insert:${insertMarker.key}`,
+      })
+      continue
+    }
+
+    let endIndex = index + 1
+    while (endIndex < nodes.length) {
+      const endToken = getPatchOpaqueRangeToken(nodes[endIndex]!, 'end')
+      if (endToken && endToken.rangeKind === token.rangeKind && endToken.token === token.token) {
+        break
+      }
+      endIndex += 1
+    }
+    if (endIndex >= nodes.length) {
+      units.push({ kind: 'node', node, nodeCount: 1 })
+      continue
+    }
+
+    units.push({
+      bodyNodes: nodes.slice(index + 1, endIndex),
+      end: nodes[endIndex]! as Comment,
+      kind: 'opaque-range',
+      nodeCount: endIndex - index + 1,
+      rangeKind: token.rangeKind,
+      start: node as Comment,
+      token: token.token,
+    })
+    index = endIndex
+  }
+
+  return units
+}
+
+const hasStructuredPatchUnits = (nodes: Node[]) => {
+  const units = collectPatchSequenceUnits(nodes)
+  if (!units) {
+    return true
+  }
+  return units.some((unit) => unit.kind !== 'node')
+}
+
+export const tryPatchNodeSequenceInPlace = (currentNodes: Node[], nextNodes: Node[]) => {
+  const currentUnits = collectPatchSequenceUnits(currentNodes)
+  const nextUnits = collectPatchSequenceUnits(nextNodes)
+  if (!currentUnits || !nextUnits || currentUnits.length !== nextUnits.length) {
+    return false
+  }
+
+  for (let index = 0; index < currentUnits.length; index += 1) {
+    const currentUnit = currentUnits[index]!
+    const nextUnit = nextUnits[index]!
+    if (currentUnit.kind !== nextUnit.kind) {
+      return false
+    }
+    if (currentUnit.kind === 'insert-range' && nextUnit.kind === 'insert-range') {
+      const currentOwnedNodes = collectInsertRangeOwnedNodes(
+        currentUnit.marker,
+        currentUnit.nodeCount - 1,
+      )
+      const nextOwnedNodes = collectInsertRangeOwnedNodes(nextUnit.marker, nextUnit.nodeCount - 1)
+      if (
+        currentUnit.token !== nextUnit.token &&
+        (hasStructuredPatchUnits(currentOwnedNodes) || hasStructuredPatchUnits(nextOwnedNodes))
+      ) {
+        return false
+      }
+      if (
+        currentOwnedNodes.length > 0 ||
+        nextOwnedNodes.length > 0 ||
+        currentUnit.nodeCount !== nextUnit.nodeCount
+      ) {
+        if (!tryPatchNodeSequenceInPlace(currentOwnedNodes, nextOwnedNodes)) {
+          if (
+            !replaceInsertRangeOwnedNodes(currentUnit.marker, currentOwnedNodes, nextOwnedNodes)
+          ) {
+            return false
+          }
+        } else {
+          setRememberedInsertMarkerNodeCount(currentUnit.marker, nextOwnedNodes.length)
+        }
+      }
+      continue
+    }
+    if (currentUnit.kind === 'opaque-range' && nextUnit.kind === 'opaque-range') {
+      if (currentUnit.token !== nextUnit.token || currentUnit.rangeKind !== nextUnit.rangeKind) {
+        return false
+      }
+      if (currentUnit.rangeKind === 'component-boundary') {
+        if (didComponentBoundarySymbolChange(nextUnit.start)) {
+          return false
+        }
+        if (didComponentBoundaryPropsChange(nextUnit.start)) {
+          const nextRangeNodes = nextUnit.bodyNodes
+          if (
+            !tryPatchBoundaryContentsInPlace(currentUnit.start, currentUnit.end, nextRangeNodes)
+          ) {
+            replaceBoundaryContents(currentUnit.start, currentUnit.end, nextRangeNodes)
+          }
+        }
+      } else if (currentUnit.rangeKind === 'keyed') {
+        const nextRangeNodes = nextUnit.bodyNodes
+        if (!tryPatchNodeSequenceInPlace(currentUnit.bodyNodes, nextRangeNodes)) {
+          replaceBoundaryContents(currentUnit.start, currentUnit.end, nextRangeNodes)
+        }
+      }
+      continue
+    }
+    if (currentUnit.kind !== 'node' || nextUnit.kind !== 'node') {
+      return false
+    }
+    if (!patchNodeInPlace(currentUnit.node, nextUnit.node)) {
+      return false
+    }
+  }
+
+  return true
+}
+
+const patchNodeInPlace = (current: Node, next: Node): boolean => {
+  if (current.nodeType !== next.nodeType) {
+    return false
+  }
+
+  if (current.nodeType === DOM_TEXT_NODE && next.nodeType === DOM_TEXT_NODE) {
+    if (current.textContent !== next.textContent) {
+      current.textContent = next.textContent
+    }
+    return true
+  }
+
+  if (current.nodeType === DOM_COMMENT_NODE && next.nodeType === DOM_COMMENT_NODE) {
+    const currentComment = current as Comment
+    const nextComment = next as Comment
+    const currentIsProjectionSlot = !!parseProjectionSlotMarker(currentComment.data)
+    const nextIsProjectionSlot = !!parseProjectionSlotMarker(nextComment.data)
+    const currentIsBoundaryMarker = !!parseComponentBoundaryMarker(currentComment.data)
+    const nextIsBoundaryMarker = !!parseComponentBoundaryMarker(nextComment.data)
+    const currentIsInsertMarker = !!parseInsertMarker(currentComment.data)
+    const nextIsInsertMarker = !!parseInsertMarker(nextComment.data)
+    if (
+      currentIsProjectionSlot ||
+      nextIsProjectionSlot ||
+      currentIsBoundaryMarker ||
+      nextIsBoundaryMarker ||
+      currentIsInsertMarker ||
+      nextIsInsertMarker
+    ) {
+      return currentComment.data === nextComment.data
+    }
+    if (currentComment.data !== nextComment.data) {
+      currentComment.data = nextComment.data
+    }
+    return true
+  }
+
+  if (!isElementNode(current) || !isElementNode(next) || current.tagName !== next.tagName) {
+    return false
+  }
+
+  if (tryPatchNodeSequenceInPlace(Array.from(current.childNodes), Array.from(next.childNodes))) {
+    syncManagedElementAttributes(current, next)
+    return true
+  }
+
+  return tryPatchElementShellInPlace(current, next)
+}
+
+export const tryPatchBoundaryContentsInPlace = (
+  start: Comment,
+  end: Comment,
+  nextNodes: Node[],
+) => {
+  const currentNodes = getBoundaryChildren(start, end)
+  return tryPatchNodeSequenceInPlace(currentNodes, nextNodes)
+}
+
+const collectMountedBoundaryDescendants = (component: ComponentState) =>
+  component.start && component.end
+    ? collectComponentBoundaryIds(getBoundaryChildren(component.start, component.end))
+    : new Set<string>()
+
+const collectMountedDescendantComponentIds = (
+  container: RuntimeContainer,
+  component: ComponentState,
+) => expandComponentIdsToDescendants(container, collectMountedBoundaryDescendants(component))
+
+const collectProjectionSlotComponentIds = (roots: Node[]) => {
+  const preserved = new Set<string>()
+  for (const range of collectProjectionSlotRanges(roots).values()) {
+    for (const componentId of collectComponentBoundaryIds(
+      getBoundaryChildren(range.start, range.end),
+    )) {
+      preserved.add(componentId)
+    }
+  }
+  return preserved
+}
+
+const collectPreservedProjectionSlotComponentIds = (
+  container: RuntimeContainer,
+  start: Comment,
+  end: Comment,
+) =>
+  expandComponentIdsToDescendants(
+    container,
+    collectProjectionSlotComponentIds(getBoundaryChildren(start, end)),
+  )
+
+const capturePendingFocusRestore = (
+  container: RuntimeContainer,
+  focusSource?: EventTarget | null,
+): PendingFocusRestore | null => {
+  if (!container.doc) {
+    return null
+  }
+
+  const snapshot = captureDocumentFocus(container.doc, focusSource)
+  if (!snapshot) {
+    return null
+  }
+  return {
+    snapshot,
+  }
+}
+
+const restorePendingFocus = (container: RuntimeContainer, pending: PendingFocusRestore | null) => {
+  if (!pending || !container.doc) {
+    return
+  }
+  restorePendingFocusInDocument(container.doc, pending)
+}
+
+let ssrRenderer: ReturnType<typeof createSSRRenderer> | null = null
+
+const getSSRRenderer = () => {
+  ssrRenderer ??= createSSRRenderer({
+    getCurrentContainer,
+    isProjectionSlot: (value) => isProjectionSlot(value),
+    isRouteSlot: (value) => isRouteSlot(value),
+    renderProjectionSlotToString: (value) =>
+      renderProjectionSlotToString(value as ProjectionSlotValue),
+    renderStringNode,
+    resolveRouteSlot: (container, slot) =>
+      resolveRouteSlot(container as RuntimeContainer | null, slot as RouteSlotCarrier),
+  })
+  return ssrRenderer
+}
+
+export const renderSSRAttr = (name: string, value: unknown) =>
+  getSSRRenderer().renderSSRAttr(name, value)
+
+export const renderSSRValue = (value: unknown): string => getSSRRenderer().renderSSRValue(value)
+
+export const renderSSRMap = <T>(
+  value:
+    | readonly T[]
+    | {
+        map: (callback: (item: T, index: number) => string) => {
+          join: (separator: string) => string
+        }
+      },
+  renderItem: (item: T, index: number) => string,
+): string => getSSRRenderer().renderSSRMap(value, renderItem)
+
+const renderStringArray = (values: readonly (JSX.Element | JSX.Element[])[]) =>
+  withActiveKeyedRangeScope(allocateKeyedRangeScope(), () => renderSSRValue(values))
+
+const renderSSRTemplateNode = (template: JSX.SSRTemplate) => renderSSRValue(template)
+
+const resolveRenderable = (value: JSX.Element): JSX.Element => {
+  let current = value
+  while (
+    typeof current === 'function' &&
+    !getLazyMeta(current) &&
+    !getComponentMeta(current) &&
+    !getContextProviderMeta(current)
+  ) {
+    current = current()
+  }
+  return current
+}
+
+const nextComponentPosition = (container: RuntimeContainer) => {
+  const frame = getCurrentFrame()
+  if (!frame) {
+    return {
+      childIndex: container.rootChildCursor++,
+      parentId: ROOT_COMPONENT_ID,
+    }
+  }
+  return {
+    childIndex: frame.childCursor++,
+    parentId: frame.component.id,
+  }
+}
+
+const registerEventBinding = (
+  container: RuntimeContainer,
+  descriptor: EventDescriptor | LazyMeta,
+): string => {
+  const scopeId = registerScope(container, descriptor.captures())
+  return `${descriptor.symbol}:${scopeId}`
+}
+
+const getRuntimeEventDescriptor = (value: unknown): EventDescriptor | LazyMeta | null =>
+  getEventMeta(value) ?? getLazyMeta(value)
+
+const isForValue = (value: unknown): value is ForValue =>
+  !!value && typeof value === 'object' && (value as ForValue).__e_for === true
+
+const isShowValue = (value: unknown): value is ShowValue =>
+  !!value && typeof value === 'object' && (value as ShowValue).__e_show === true
+
+export const bindRuntimeEvent = (element: Element, eventName: string, value: unknown): boolean => {
+  const descriptor = getRuntimeEventDescriptor(value)
+  if (!descriptor) {
+    return false
+  }
+
+  const container = getCurrentContainer()
+  if (!container) {
+    return false
+  }
+
+  element.setAttribute('data-eid', `e${container.nextElementId++}`)
+  element.setAttribute(`data-e-on${eventName}`, registerEventBinding(container, descriptor))
+  syncManagedAttributeSnapshot(element, 'data-eid')
+  syncManagedAttributeSnapshot(element, `data-e-on${eventName}`)
+  return true
+}
+
+const renderProjectionSlotToString = (slot: ProjectionSlotValue) => {
   const frame = getCurrentFrame()
   const start = createProjectionSlotMarker(slot.componentId, slot.name, slot.occurrence, 'start')
   const end = createProjectionSlotMarker(slot.componentId, slot.name, slot.occurrence, 'end')
   if (frame?.component.id === slot.componentId && frame.projectionState.reuseExistingDom) {
     return `<!--${start}--><!--${end}-->`
   }
-  return `<!--${start}-->${renderStringNode(slot.source as JSX.Element)}<!--${end}-->`
-}
+  return `<!--${start}-->${renderStringNode(slot.source as JSX.Element)}<!--${end}-->`
+}
+
+let unscopedKeyedRangeScopeCounter = 0
+
+const allocateKeyedRangeScope = () => {
+  const frame = getCurrentFrame()
+  if (!frame) {
+    return `global:${unscopedKeyedRangeScopeCounter++}`
+  }
+  return `${frame.component.id}:k${frame.keyedRangeCursor++}`
+}
+
+const withActiveKeyedRangeScope = <T>(scope: string, render: () => T): T => {
+  const frame = getCurrentFrame()
+  if (!frame) {
+    return render()
+  }
+  frame.keyedRangeScopeStack.push(scope)
+  try {
+    return render()
+  } finally {
+    frame.keyedRangeScopeStack.pop()
+  }
+}
+
+const resolveKeyedRangeScope = () => {
+  const frame = getCurrentFrame()
+  const activeScope =
+    frame && frame.keyedRangeScopeStack.length > 0
+      ? frame.keyedRangeScopeStack[frame.keyedRangeScopeStack.length - 1]
+      : null
+  return activeScope ?? allocateKeyedRangeScope()
+}
+
+const wrapStringWithKeyedRange = (value: string, scope: string, key: string | number | symbol) => {
+  const start = createKeyedRangeMarker(scope, key, 'start')
+  const end = createKeyedRangeMarker(scope, key, 'end')
+  return `<!--${start}-->${value}<!--${end}-->`
+}
+
+const resolveForItemKey = <T>(
+  value: ForValue<T>,
+  item: T,
+  index: number,
+): string | number | symbol =>
+  value.key
+    ? value.key(item, index)
+    : typeof item === 'string' || typeof item === 'number' || typeof item === 'symbol'
+      ? item
+      : index
+
+const stripForChildRootKey = (value: JSX.Element): JSX.Element => {
+  const resolved = resolveRenderable(value)
+  if (!isRenderObject(resolved) || resolved.key === null || resolved.key === undefined) {
+    return resolved
+  }
+  return {
+    ...resolved,
+    key: undefined,
+  }
+}
+
+const resolveShowBranch = <T>(value: ShowValue<T>): JSX.Element => {
+  const branch = !value.when ? (value.fallback ?? null) : value.children
+  return typeof branch === 'function'
+    ? (branch as (nextValue: T) => JSX.Element)(value.when)
+    : branch
+}
+
+const renderForValueToString = <T>(value: ForValue<T>): string => {
+  if (value.arr.length === 0) {
+    return renderStringNode((value.fallback ?? null) as JSX.Element)
+  }
+
+  const scope = allocateKeyedRangeScope()
+  let output = ''
+  for (let index = 0; index < value.arr.length; index += 1) {
+    const item = value.arr[index]!
+    output += wrapStringWithKeyedRange(
+      renderStringNode(stripForChildRootKey(value.fn(item, index))),
+      scope,
+      resolveForItemKey(value, item, index),
+    )
+  }
+  return output
+}
+
+const renderProjectionSlotToNodes = (slot: ProjectionSlotValue, container: RuntimeContainer) => {
+  if (!container.doc) {
+    throw new Error('Client rendering requires a document.')
+  }
+  const frame = getCurrentFrame()
+
+  const start = container.doc.createComment(
+    createProjectionSlotMarker(slot.componentId, slot.name, slot.occurrence, 'start'),
+  )
+  const end = container.doc.createComment(
+    createProjectionSlotMarker(slot.componentId, slot.name, slot.occurrence, 'end'),
+  )
+  if (frame?.component.id === slot.componentId && frame.projectionState.reuseExistingDom) {
+    return [start, end]
+  }
+  return [start, ...renderClientInsertable(slot.source, container), end]
+}
+
+const createExternalRootHtml = (componentId: string, kind: string, body: string) =>
+  `<e-island-root ${EXTERNAL_ROOT_ATTR}="true" ${EXTERNAL_ROOT_COMPONENT_ATTR}="${escapeAttr(
+    componentId,
+  )}" ${EXTERNAL_ROOT_KIND_ATTR}="${escapeAttr(kind)}">${body}</e-island-root>`
+
+const createExternalRootNode = (
+  container: RuntimeContainer,
+  componentId: string,
+  kind: string,
+  body?: string,
+) => {
+  if (!container.doc) {
+    throw new Error('Client rendering requires a document.')
+  }
+  const host = container.doc.createElement('e-island-root')
+  host.setAttribute(EXTERNAL_ROOT_ATTR, 'true')
+  host.setAttribute(EXTERNAL_ROOT_COMPONENT_ATTR, componentId)
+  host.setAttribute(EXTERNAL_ROOT_KIND_ATTR, kind)
+  if (body) {
+    host.innerHTML = body
+  }
+  return host
+}
+
+const getExternalRoot = (component: ComponentState) => {
+  if (!component.start || !component.end) {
+    return null
+  }
+  let cursor = component.start.nextSibling
+  while (cursor && cursor !== component.end) {
+    if (isElementNode(cursor) && cursor.getAttribute(EXTERNAL_ROOT_ATTR) === 'true') {
+      return cursor as HTMLElement
+    }
+    cursor = cursor.nextSibling
+  }
+  return null
+}
+
+const findExternalSlotHost = (
+  host: HTMLElement,
+  kind: ExternalComponentDescriptor['kind'],
+  name: string,
+) => {
+  if (typeof host.querySelectorAll !== 'function') {
+    return host.querySelector?.(`${getExternalSlotTag(kind)}[data-e-slot="${name}"]`) ?? null
+  }
+  const matches = [
+    ...host.querySelectorAll<HTMLElement>(`${getExternalSlotTag(kind)}[data-e-slot="${name}"]`),
+  ]
+  if (matches.length === 0) {
+    return null
+  }
+  for (let index = matches.length - 1; index >= 0; index -= 1) {
+    const candidate = matches[index]!
+    if (candidate.childNodes.length > 0 || (candidate.innerHTML ?? '') !== '') {
+      return candidate
+    }
+  }
+  return matches[0]!
+}
+
+const captureExternalSlotDom = (component: ComponentState) => {
+  if (!component.external) {
+    return null
+  }
+  const host = getExternalRoot(component)
+  if (!host || typeof host.querySelector !== 'function') {
+    return null
+  }
+  const captured = new Map<string, Node[]>()
+  for (const name of component.external.slots) {
+    const slotHost = findExternalSlotHost(host, component.external.kind, name)
+    captured.set(name, slotHost ? [...slotHost.childNodes] : [])
+  }
+  return captured
+}
+
+const captureExternalSlotHtml = (component: ComponentState) => {
+  if (!component.external) {
+    return null
+  }
+  const host = getExternalRoot(component)
+  if (!host || typeof host.querySelector !== 'function') {
+    return null
+  }
+  const captured = new Map<string, string>()
+  for (const name of component.external.slots) {
+    const slotHost = findExternalSlotHost(host, component.external.kind, name)
+    captured.set(name, slotHost?.innerHTML ?? '')
+  }
+  return captured
+}
+
+const createExternalProjectionSlotOwnerId = (
+  componentId: string,
+  name: string,
+  occurrence: number,
+) => `${componentId}.$slot:${encodeURIComponent(name)}:${occurrence}`
+
+const renderExternalProjectionSlotNodes = (
+  container: RuntimeContainer,
+  component: ComponentState,
+  name: string,
+  occurrence: number,
+  source: unknown,
+) => {
+  const ownerId = createExternalProjectionSlotOwnerId(component.id, name, occurrence)
+  const nodes = renderClientInsertableForOwner(source as Insertable, container, {
+    childIndex: 0,
+    componentId: ownerId,
+    keyedRangeCursor: 0,
+    projectionCounters: [],
+  })
+  return { nodes, ownerId }
+}
+
+const syncExternalProjectionSlotDom = (
+  container: RuntimeContainer,
+  component: ComponentState,
+  props: Record<string, unknown>,
+  host: HTMLElement,
+) => {
+  if (!component.external || !component.projectionSlots) {
+    return false
+  }
+
+  const oldDescendants = collectDescendantIds(container, component.id)
+  const slotRanges = collectProjectionSlotRanges([host])
+  const keptSlotOwners = new Set<string>()
+  let changed = false
+
+  for (const [name, totalOccurrences] of Object.entries(component.projectionSlots)) {
+    for (let occurrence = 0; occurrence < totalOccurrences; occurrence += 1) {
+      const rangeKey = createProjectionSlotRangeKey(component.id, name, occurrence)
+      const range = slotRanges.get(rangeKey)
+      const hasValue = hasProjectionSlotValue(props, name)
+
+      if (!hasValue) {
+        if (!range) {
+          continue
+        }
+        if (!tryPatchBoundaryContentsInPlace(range.start, range.end, [])) {
+          replaceProjectionSlotContents(range.start, range.end, [])
+        }
+        changed = true
+        continue
+      }
+
+      const slotHost =
+        range || occurrence > 0 ? null : findExternalSlotHost(host, component.external.kind, name)
+      if (!range && !slotHost) {
+        continue
+      }
+
+      const { nodes, ownerId } = renderExternalProjectionSlotNodes(
+        container,
+        component,
+        name,
+        occurrence,
+        props[name],
+      )
+      keptSlotOwners.add(ownerId)
+
+      if (range) {
+        if (!tryPatchBoundaryContentsInPlace(range.start, range.end, nodes)) {
+          replaceProjectionSlotContents(range.start, range.end, nodes)
+        }
+        changed = true
+        continue
+      }
+      if (!slotHost) {
+        continue
+      }
+
+      while (slotHost.firstChild) {
+        slotHost.firstChild.remove()
+      }
+
+      const start = container.doc!.createComment(
+        createProjectionSlotMarker(component.id, name, occurrence, 'start'),
+      )
+      const end = container.doc!.createComment(
+        createProjectionSlotMarker(component.id, name, occurrence, 'end'),
+      )
+
+      slotHost.appendChild(start)
+      for (const node of nodes) {
+        slotHost.appendChild(node)
+      }
+      slotHost.appendChild(end)
+      rememberManagedAttributesForNodes([start, ...nodes, end])
+      slotRanges.set(rangeKey, { end, start })
+      changed = true
+    }
+  }
+
+  if (!changed) {
+    return false
+  }
+
+  bindComponentBoundaries(container, host)
+  restoreSignalRefs(container, host)
+  bindRouterLinks(container, host)
+
+  const keptDescendants = expandComponentIdsToDescendants(container, [
+    ...collectComponentBoundaryIds([host]),
+    ...keptSlotOwners,
+  ])
+  pruneRemovedComponents(container, component.id, keptDescendants)
+  for (const descendantId of oldDescendants) {
+    if (keptDescendants.has(descendantId)) {
+      continue
+    }
+    clearComponentSubscriptions(container, descendantId)
+  }
+
+  component.externalSlotDom = captureExternalSlotDom(component)
+  component.externalSlotHtml = captureExternalSlotHtml(component)
+  return true
+}
+
+const restoreExternalSlotDom = (component: ComponentState, host: HTMLElement) => {
+  if (
+    !component.external ||
+    !component.externalSlotDom ||
+    typeof host.querySelector !== 'function'
+  ) {
+    return
+  }
+  for (const [name, nodes] of component.externalSlotDom) {
+    const slotHost = findExternalSlotHost(host, component.external.kind, name)
+    if (!slotHost || slotHost.childNodes.length > 0 || nodes.length === 0) {
+      continue
+    }
+    for (const node of nodes) {
+      slotHost.appendChild(node)
+    }
+  }
+}
+
+const escapeRegExp = (value: string) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+
+const renderExternalSlotContentToString = (
+  componentId: string,
+  name: string,
+  occurrence: number,
+  source: unknown,
+) => {
+  if (source === null || source === undefined || source === false) {
+    return ''
+  }
+  return renderProjectionSlotToString(createProjectionSlot(componentId, name, occurrence, source))
+}
+
+const injectExternalSlotHtml = (
+  componentId: string,
+  kind: ExternalComponentDescriptor['kind'],
+  projectionSlots: Record<string, number> | null,
+  props: Record<string, unknown>,
+  html: string,
+) => {
+  if (!projectionSlots) {
+    return html
+  }
+
+  const slotTag = getExternalSlotTag(kind)
+  let nextHtml = html
+  for (const [name, totalOccurrences] of Object.entries(projectionSlots)) {
+    if (!hasProjectionSlotValue(props, name)) {
+      continue
+    }
+    const pattern = new RegExp(
+      `<${slotTag}([^>]*?)data-e-slot=(["'])${escapeRegExp(name)}\\2([^>]*)>([\\s\\S]*?)</${slotTag}>`,
+    )
+    for (let occurrence = 0; occurrence < totalOccurrences; occurrence += 1) {
+      const slotHtml = renderExternalSlotContentToString(componentId, name, occurrence, props[name])
+      nextHtml = nextHtml.replace(
+        pattern,
+        `<${slotTag}$1data-e-slot="${name}"$3>${slotHtml}</${slotTag}>`,
+      )
+    }
+  }
+
+  return nextHtml
+}
+
+const renderExternalComponentHtml = (
+  container: RuntimeContainer,
+  componentId: string,
+  external: ExternalComponentMeta,
+  props: Record<string, unknown>,
+  projectionSlots: Record<string, number> | null,
+) => {
+  const cacheKey = `${componentId}:${external.kind}`
+  const cached = container.externalRenderCache.get(cacheKey)
+  if (cached?.status === 'resolved') {
+    return injectExternalSlotHtml(
+      componentId,
+      external.kind,
+      projectionSlots,
+      props,
+      cached.html ?? '',
+    )
+  }
+  if (cached?.status === 'rejected') {
+    throw cached.error
+  }
+  if (cached?.status === 'pending') {
+    if (cached.pending) {
+      container.pendingSuspensePromises.add(cached.pending)
+    }
+    return ''
+  }
 
-const renderProjectionSlotToNodes = (slot: ProjectionSlotValue, container: RuntimeContainer) => {
-  if (!container.doc) {
-    throw new Error('Client rendering requires a document.')
+  const result = external.renderToString(props)
+  if (typeof result === 'string') {
+    container.externalRenderCache.set(cacheKey, {
+      html: result,
+      status: 'resolved',
+    })
+    return injectExternalSlotHtml(componentId, external.kind, projectionSlots, props, result)
   }
-  const frame = getCurrentFrame()
 
-  const start = container.doc.createComment(
-    createProjectionSlotMarker(slot.componentId, slot.name, slot.occurrence, 'start'),
-  )
-  const end = container.doc.createComment(
-    createProjectionSlotMarker(slot.componentId, slot.name, slot.occurrence, 'end'),
+  const pending = Promise.resolve(result).then(
+    (resolved) => {
+      container.externalRenderCache.set(cacheKey, {
+        html: resolved,
+        status: 'resolved',
+      })
+      return resolved
+    },
+    (error) => {
+      container.externalRenderCache.set(cacheKey, {
+        error,
+        status: 'rejected',
+      })
+      throw error
+    },
   )
-  if (frame?.component.id === slot.componentId && frame.projectionState.reuseExistingDom) {
-    return [start, end]
+  container.externalRenderCache.set(cacheKey, {
+    pending,
+    status: 'pending',
+  })
+  container.pendingSuspensePromises.add(pending)
+  return ''
+}
+
+const syncExternalComponentInstance = async (
+  component: ComponentState,
+  external: ExternalComponentMeta,
+  props: Record<string, unknown>,
+  host: HTMLElement,
+) => {
+  if (component.externalInstance === undefined) {
+    component.externalMeta = external
+    component.externalInstance = await external.hydrate(host, props)
+    return
   }
-  return [start, ...renderClientInsertable(slot.source, container), end]
+
+  component.externalMeta = external
+  component.externalInstance = await external.update(component.externalInstance, host, props)
 }
 
+const renderContextProviderToString = (
+  token: RuntimeContextToken,
+  props: Record<string, unknown>,
+) =>
+  withRuntimeContextValue(token, props.value, () =>
+    renderStringNode((props.children ?? null) as JSX.Element | JSX.Element[]),
+  )
+
+const renderContextProviderToNodes = (
+  token: RuntimeContextToken,
+  props: Record<string, unknown>,
+  container: RuntimeContainer,
+) =>
+  withRuntimeContextValue(token, props.value, () =>
+    renderClientNodes((props.children ?? null) as JSX.Element | JSX.Element[], container),
+  )
+
 const renderStringNode = (inputElementLike: JSX.Element | JSX.Element[]): string => {
   if (Array.isArray(inputElementLike)) {
     return renderStringArray(inputElementLike)
@@ -2635,6 +3614,15 @@ const renderStringNode = (inputElementLike: JSX.Element | JSX.Element[]): string
   ) {
     return escapeText(String(resolved))
   }
+  if (isSSRRawValue(resolved)) {
+    return resolved.value
+  }
+  if (isShowValue(resolved)) {
+    return renderStringNode(resolveShowBranch(resolved))
+  }
+  if (isForValue(resolved)) {
+    return renderForValueToString(resolved)
+  }
   if (isSSRTemplate(resolved)) {
     return renderSSRTemplateNode(resolved)
   }
@@ -2650,15 +3638,26 @@ const renderStringNode = (inputElementLike: JSX.Element | JSX.Element[]): string
   }
 
   if (isSuspenseType(resolved.type)) {
-    return renderSuspenseComponentToString(resolved.props as SuspenseProps)
+    const rendered = renderSuspenseComponentToString(resolved.props as SuspenseProps)
+    return resolved.key === null || resolved.key === undefined
+      ? rendered
+      : wrapStringWithKeyedRange(rendered, resolveKeyedRangeScope(), resolved.key)
   }
 
   if (typeof resolved.type === 'function') {
+    const providerMeta = getContextProviderMeta(resolved.type)
+    if (providerMeta) {
+      return renderContextProviderToString(providerMeta.token, evaluateProps(resolved.props))
+    }
+
     const container = getCurrentContainer()
     const componentFn = resolved.type as Component
     const meta = getComponentMeta(componentFn)
     if (!meta || !container) {
-      return renderStringNode(componentFn(resolved.props))
+      const rendered = renderStringNode(componentFn(resolved.props))
+      return resolved.key === null || resolved.key === undefined
+        ? rendered
+        : wrapStringWithKeyedRange(rendered, resolveKeyedRangeScope(), resolved.key)
     }
 
     const evaluatedProps = evaluateProps(resolved.props)
@@ -2671,22 +3670,51 @@ const renderStringNode = (inputElementLike: JSX.Element | JSX.Element[]): string
       position.parentId,
     )
     component.scopeId = registerScope(container, meta.captures())
+    component.external = meta.external
+    component.optimizedRoot = meta.optimizedRoot === true
     component.props = evaluatedProps
     component.projectionSlots = meta.projectionSlots ?? null
+    component.rawProps = resolved.props
+
+    const externalMeta = getExternalComponentMeta(componentFn)
+    if (externalMeta) {
+      const externalBody = renderExternalComponentHtml(
+        container,
+        componentId,
+        externalMeta,
+        evaluatedProps,
+        component.projectionSlots,
+      )
+      const host = createExternalRootHtml(componentId, externalMeta.kind, externalBody)
+      const rendered = `${createComponentBoundaryHtmlComment(componentId, 'start')}${host}${createComponentBoundaryHtmlComment(componentId, 'end')}`
+      return resolved.key === null || resolved.key === undefined
+        ? rendered
+        : wrapStringWithKeyedRange(rendered, resolveKeyedRangeScope(), resolved.key)
+    }
+
     const frame = createFrame(container, component, 'ssr')
     clearComponentSubscriptions(container, component.id)
-    const renderProps = createRenderProps(componentId, meta, evaluatedProps)
+    const renderProps = createRenderProps(componentId, meta, resolved.props)
 
     const body = pushFrame(frame, () => renderStringNode(componentFn(renderProps)))
     pruneComponentVisibles(container, component, frame.visibleCursor)
     pruneComponentWatches(container, component, frame.watchCursor)
-    return `<!--ec:c:${componentId}:start-->${body}<!--ec:c:${componentId}:end-->`
+    const rendered = `${createComponentBoundaryHtmlComment(componentId, 'start')}${renderFrameScopedStylesToString(frame)}${body}${createComponentBoundaryHtmlComment(componentId, 'end')}`
+    return resolved.key === null || resolved.key === undefined
+      ? rendered
+      : wrapStringWithKeyedRange(rendered, resolveKeyedRangeScope(), resolved.key)
   }
 
   const attrParts: string[] = []
   const container = getCurrentContainer()
+  const frame = getCurrentFrame()
   let hasInnerHTML = false
   let innerHTML: string | null = null
+  let isActionForm = false
+
+  if (frame && hasScopedStyles(frame) && resolved.type !== 'style') {
+    attrParts.push(`${SCOPED_STYLE_ATTR}="${escapeAttr(frame.component.scopeId)}"`)
+  }
 
   for (const name in resolved.props) {
     if (!Object.hasOwn(resolved.props, name)) {
@@ -2695,12 +3723,40 @@ const renderStringNode = (inputElementLike: JSX.Element | JSX.Element[]): string
     if (name === 'children') {
       continue
     }
+    if (name === 'key') {
+      continue
+    }
 
     const eventName = toEventName(name)
     const value = resolved.props[name]
 
+    if (name === BIND_VALUE_PROP) {
+      const signalId = getBindableSignalId(value)
+      if (!signalId) {
+        continue
+      }
+      attrParts.push(`${BIND_VALUE_ATTR}="${escapeAttr(signalId)}"`)
+      const currentValue = readBindableSignalValue(value)
+      if (currentValue !== undefined && currentValue !== null) {
+        attrParts.push(`value="${escapeAttr(String(currentValue))}"`)
+      }
+      continue
+    }
+
+    if (name === BIND_CHECKED_PROP) {
+      const signalId = getBindableSignalId(value)
+      if (!signalId) {
+        continue
+      }
+      attrParts.push(`${BIND_CHECKED_ATTR}="${escapeAttr(signalId)}"`)
+      if (readBindableSignalValue(value)) {
+        attrParts.push('checked')
+      }
+      continue
+    }
+
     if (eventName) {
-      const eventMeta = getEventMeta(value)
+      const eventMeta = getRuntimeEventDescriptor(value)
       if (!eventMeta || !container) {
         continue
       }
@@ -2719,7 +3775,7 @@ const renderStringNode = (inputElementLike: JSX.Element | JSX.Element[]): string
       continue
     }
 
-    if (name === DANGEROUSLY_SET_INNER_HTML_PROP) {
+    if (isDangerouslySetInnerHTMLProp(name)) {
       hasInnerHTML = true
       innerHTML = resolveDangerouslySetInnerHTML(value)
       continue
@@ -2735,9 +3791,15 @@ const renderStringNode = (inputElementLike: JSX.Element | JSX.Element[]): string
 
     if (value === true) {
       attrParts.push(name)
+      if (name === ACTION_FORM_ATTR) {
+        isActionForm = true
+      }
       continue
     }
 
+    if (name === ACTION_FORM_ATTR) {
+      isActionForm = true
+    }
     attrParts.push(`${name}="${escapeAttr(String(value))}"`)
   }
 
@@ -2747,23 +3809,24 @@ const renderStringNode = (inputElementLike: JSX.Element | JSX.Element[]): string
 
   let childrenText = innerHTML ?? ''
   if (!hasInnerHTML) {
-    const children = resolved.props.children
-    if (Array.isArray(children)) {
-      for (const child of children) {
-        childrenText += renderStringNode(child)
+    if (resolved.type === 'form' && isActionForm) {
+      const csrfToken = getCurrentActionCsrfToken()
+      if (csrfToken) {
+        childrenText += createActionCsrfInputString(csrfToken)
       }
-    } else {
-      childrenText += renderStringNode(children as JSX.Element)
     }
+    childrenText += renderStringNode(resolved.props.children as JSX.Element | JSX.Element[])
   }
 
-  if (resolved.type === FRAGMENT) {
-    return childrenText
-  }
-
-  return `<${resolved.type}${attrParts.length > 0 ? ` ${attrParts.join(' ')}` : ''}>${childrenText}</${
-    resolved.type
-  }>`
+  const rendered =
+    resolved.type === FRAGMENT
+      ? childrenText
+      : `<${resolved.type}${attrParts.length > 0 ? ` ${attrParts.join(' ')}` : ''}>${childrenText}</${
+          resolved.type
+        }>`
+  return resolved.key === null || resolved.key === undefined
+    ? rendered
+    : wrapStringWithKeyedRange(rendered, resolveKeyedRangeScope(), resolved.key)
 }
 
 const createElementNode = (doc: Document, tagName: string) => doc.createElement(tagName)
@@ -2773,13 +3836,14 @@ const renderComponentToNodes = (
   props: Record<string, unknown>,
   container: RuntimeContainer,
   mode: RenderFrame['mode'],
+  rawProps?: Record<string, unknown>,
 ): Node[] => {
   if (!container.doc) {
     throw new Error('Client rendering requires a document.')
   }
   const meta = getComponentMeta(componentFn)
   if (!meta) {
-    return renderClientNodes(componentFn(props), container)
+    return renderClientNodes(componentFn((rawProps ?? props) as Record<string, unknown>), container)
   }
 
   const position = nextComponentPosition(container)
@@ -2792,25 +3856,108 @@ const renderComponentToNodes = (
     meta.symbol,
     position.parentId,
   )
+  const wasActive = component.active
+  const previousRenderProps =
+    ((component.rawProps ?? component.props) as Record<string, unknown> | null) ?? null
   component.active = mode === 'client'
   if (!existing || symbolChanged) {
     resetComponentForSymbolChange(container, component, meta)
   }
+  component.external = meta.external
+  component.optimizedRoot = meta.optimizedRoot === true
   component.props = props
+  component.rawProps = rawProps ?? null
   component.projectionSlots = meta.projectionSlots ?? null
-  const frame = createFrame(container, component, mode)
+  const externalMeta = getExternalComponentMeta(componentFn)
+  const parentFrame = getCurrentFrame()
+  const shouldReuseProjectionSlotDom = parentFrame?.projectionState.reuseProjectionSlotDom ?? false
+  const previousStart = component.start
+  const previousEnd = component.end
+  const propsChanged =
+    symbolChanged ||
+    !areShallowEqualRenderProps(
+      previousRenderProps,
+      ((rawProps ?? props) as Record<string, unknown> | null) ?? null,
+    )
+  const boundaryContentsChanged = propsChanged || (!wasActive && !!previousStart && !!previousEnd)
+  if (mode === 'client' && externalMeta && previousStart && previousEnd && !symbolChanged) {
+    const { end, start } = createComponentBoundaryPair(container.doc, componentId)
+
+    const host = getExternalRoot(component)
+    if (wasActive && host && propsChanged) {
+      void withClientContainer(container, async () => {
+        syncExternalProjectionSlotDom(container, component, props, host)
+        await syncExternalComponentInstance(component, externalMeta, props, host)
+        syncExternalProjectionSlotDom(container, component, props, host)
+        rebindExternalHost(container, host)
+        scheduleExternalHostRebind(container, host)
+      })
+    }
+
+    if (parentFrame) {
+      for (const descendantId of expandComponentIdsToDescendants(container, [componentId])) {
+        parentFrame.visitedDescendants.add(descendantId)
+      }
+    }
+
+    return [start, end]
+  }
+  if (mode === 'client' && wasActive && previousStart && previousEnd && !boundaryContentsChanged) {
+    const { end, start } = createComponentBoundaryPair(container.doc, componentId)
+
+    if (parentFrame) {
+      for (const descendantId of expandComponentIdsToDescendants(container, [componentId])) {
+        parentFrame.visitedDescendants.add(descendantId)
+      }
+    }
+
+    return [start, end]
+  }
+  if (externalMeta) {
+    const { end, start } = createComponentBoundaryPair(container.doc, componentId, {
+      propsChanged: true,
+      symbolChanged,
+    })
+    if (!previousStart || !previousEnd) {
+      component.start = start
+      component.end = end
+    }
+
+    const host = createExternalRootNode(container, componentId, externalMeta.kind)
+    if (parentFrame) {
+      parentFrame.visitedDescendants.add(componentId)
+    }
+    if (mode === 'client') {
+      scheduleExternalComponentMount(container, component, externalMeta, props)
+    }
+    return [start, host, end]
+  }
+  const speculativeEffectCleanupSlot =
+    !previousStart || !previousEnd ? null : boundaryContentsChanged ? null : createCleanupSlot()
+  if (!speculativeEffectCleanupSlot) {
+    resetComponentRenderEffects(component)
+  }
+  const frame = createFrame(container, component, mode, {
+    effectCleanupSlot: speculativeEffectCleanupSlot ?? component.renderEffectCleanupSlot,
+    reuseExistingDom: shouldReuseProjectionSlotDom,
+    reuseProjectionSlotDom: shouldReuseProjectionSlotDom,
+  })
   clearComponentSubscriptions(container, componentId)
   const oldDescendants = collectDescendantIds(container, componentId)
-  const start = container.doc.createComment(`ec:c:${componentId}:start`)
-  const end = container.doc.createComment(`ec:c:${componentId}:end`)
-  component.start = start
-  component.end = end
-  const renderProps = createRenderProps(componentId, meta, props)
-  const parentFrame = getCurrentFrame()
+  const { end, start } = createComponentBoundaryPair(container.doc, componentId, {
+    propsChanged: boundaryContentsChanged,
+    symbolChanged,
+  })
+  if (!previousStart || !previousEnd) {
+    component.start = start
+    component.end = end
+  }
+  const renderProps = createRenderProps(componentId, meta, rawProps ?? props)
   let rendered: Node[]
   try {
     rendered = pushFrame(frame, () => toMountedNodes(componentFn(renderProps), container))
   } catch (error) {
+    disposeCleanupSlot(speculativeEffectCleanupSlot)
     if (isPendingSignalError(error) && parentFrame) {
       parentFrame.visitedDescendants.add(componentId)
       for (const descendantId of frame.visitedDescendants) {
@@ -2819,12 +3966,22 @@ const renderComponentToNodes = (
     }
     throw error
   }
+  disposeCleanupSlot(speculativeEffectCleanupSlot)
   pruneComponentVisibles(container, component, frame.visibleCursor)
   pruneComponentWatches(container, component, frame.watchCursor)
-  pruneRemovedComponents(container, componentId, frame.visitedDescendants)
+  const preservedDescendants =
+    frame.projectionState.reuseExistingDom && previousStart && previousEnd
+      ? collectPreservedProjectionSlotComponentIds(container, previousStart, previousEnd)
+      : new Set<string>()
+  const keptDescendants = new Set([
+    ...frame.visitedDescendants,
+    ...preservedDescendants,
+    ...collectMountedDescendantComponentIds(container, component),
+  ])
+  pruneRemovedComponents(container, componentId, keptDescendants)
 
   for (const descendantId of oldDescendants) {
-    if (frame.visitedDescendants.has(descendantId)) {
+    if (keptDescendants.has(descendantId)) {
       continue
     }
     clearComponentSubscriptions(container, descendantId)
@@ -2832,15 +3989,48 @@ const renderComponentToNodes = (
 
   if (parentFrame) {
     parentFrame.visitedDescendants.add(componentId)
-    for (const descendantId of frame.visitedDescendants) {
+    for (const descendantId of keptDescendants) {
       parentFrame.visitedDescendants.add(descendantId)
     }
   }
 
   scheduleMountCallbacks(container, component, frame.mountCallbacks)
   scheduleVisibleCallbacksCheck(container)
+  syncEffectOnlyLocalSignalPreference(component)
+
+  return [start, ...renderFrameScopedStylesToNodes(frame, container), ...rendered, end]
+}
 
-  return [start, ...rendered, end]
+const wrapNodesWithKeyedRange = (
+  doc: Document,
+  nodes: Node[],
+  scope: string,
+  key: string | number | symbol,
+): Node[] => [
+  doc.createComment(createKeyedRangeMarker(scope, key, 'start')),
+  ...nodes,
+  doc.createComment(createKeyedRangeMarker(scope, key, 'end')),
+]
+
+const renderForValueToNodes = <T>(value: ForValue<T>, container: RuntimeContainer): Node[] => {
+  if (value.arr.length === 0) {
+    return renderClientNodes((value.fallback ?? null) as JSX.Element, container)
+  }
+
+  const scope = allocateKeyedRangeScope()
+  const nodes: Node[] = []
+  for (let index = 0; index < value.arr.length; index += 1) {
+    const item = value.arr[index]!
+    nodes.push(
+      ...wrapNodesWithKeyedRange(
+        container.doc!,
+        renderClientNodes(stripForChildRootKey(value.fn(item, index)), container),
+        scope,
+        resolveForItemKey(value, item, index),
+      ),
+    )
+  }
+  return nodes
 }
 
 const applyElementProp = (
@@ -2849,9 +4039,33 @@ const applyElementProp = (
   value: unknown,
   container: RuntimeContainer,
 ) => {
+  if (name === BIND_VALUE_PROP) {
+    const signalId = getBindableSignalId(value)
+    if (signalId) {
+      element.setAttribute(BIND_VALUE_ATTR, signalId)
+    }
+    if ('value' in element) {
+      ;(element as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement).value = String(
+        readBindableSignalValue(value) ?? '',
+      )
+    }
+    return
+  }
+
+  if (name === BIND_CHECKED_PROP) {
+    const signalId = getBindableSignalId(value)
+    if (signalId) {
+      element.setAttribute(BIND_CHECKED_ATTR, signalId)
+    }
+    if (isHTMLInputElementNode(element)) {
+      element.checked = Boolean(readBindableSignalValue(value))
+    }
+    return
+  }
+
   const eventName = toEventName(name)
   if (eventName) {
-    const eventMeta = getEventMeta(value)
+    const eventMeta = getRuntimeEventDescriptor(value)
     if (!eventMeta) {
       return
     }
@@ -2861,11 +4075,12 @@ const applyElementProp = (
   }
 
   if (name === 'ref') {
+    syncRuntimeRefMarker(element, value)
     assignRuntimeRef(value, element, container)
     return
   }
 
-  if (name === DANGEROUSLY_SET_INNER_HTML_PROP) {
+  if (isDangerouslySetInnerHTMLProp(name)) {
     const html = resolveDangerouslySetInnerHTML(value)
     if (html !== null) {
       element.innerHTML = html
@@ -2915,7 +4130,9 @@ export const renderClientNodes = (
     throw new Error('Client rendering requires a document.')
   }
   if (Array.isArray(inputElementLike)) {
-    return inputElementLike.flatMap((entry) => renderClientNodes(entry, container))
+    return withActiveKeyedRangeScope(allocateKeyedRangeScope(), () =>
+      inputElementLike.flatMap((entry) => renderClientNodes(entry, container)),
+    )
   }
 
   const resolved = resolveRenderable(inputElementLike as JSX.Element)
@@ -2932,7 +4149,14 @@ export const renderClientNodes = (
   ) {
     return [container.doc.createTextNode(String(resolved))]
   }
+  if (isShowValue(resolved)) {
+    return renderClientNodes(resolveShowBranch(resolved), container)
+  }
+  if (isForValue(resolved)) {
+    return renderForValueToNodes(resolved, container)
+  }
   if (typeof Node !== 'undefined' && resolved instanceof Node) {
+    rememberManagedAttributesForNode(resolved)
     return [resolved]
   }
   if (isProjectionSlot(resolved)) {
@@ -2946,84 +4170,118 @@ export const renderClientNodes = (
     return []
   }
 
-  if (isSuspenseType(resolved.type)) {
-    return renderSuspenseComponentToNodes(resolved.props as SuspenseProps, container, 'client')
-  }
+  let nodes: Node[]
 
-  if (typeof resolved.type === 'function') {
-    const evaluatedProps = evaluateProps(resolved.props)
-    const componentFn = resolved.type as Component
-    if (getComponentMeta(resolved.type)) {
-      return withoutTrackedEffect(() =>
-        renderComponentToNodes(componentFn, evaluatedProps, container, 'client'),
+  if (isSuspenseType(resolved.type)) {
+    nodes = renderSuspenseComponentToNodes(resolved.props as SuspenseProps, container, 'client')
+  } else if (typeof resolved.type === 'function') {
+    const providerMeta = getContextProviderMeta(resolved.type)
+    if (providerMeta) {
+      nodes = renderContextProviderToNodes(
+        providerMeta.token,
+        evaluateProps(resolved.props),
+        container,
       )
+    } else {
+      const componentFn = resolved.type as Component
+      if (getComponentMeta(resolved.type)) {
+        nodes = withoutTrackedEffect(() =>
+          renderComponentToNodes(
+            componentFn,
+            evaluateProps(resolved.props),
+            container,
+            'client',
+            resolved.props,
+          ),
+        )
+      } else {
+        nodes = renderComponentToNodes(
+          componentFn,
+          resolved.props as Record<string, unknown>,
+          container,
+          'client',
+          resolved.props,
+        )
+      }
     }
-    return renderComponentToNodes(componentFn, evaluatedProps, container, 'client')
-  }
-
-  if (resolved.type === FRAGMENT) {
-    const children = resolved.props.children
-    return Array.isArray(children)
-      ? children.flatMap((child: JSX.Element) => renderClientNodes(child, container))
-      : renderClientNodes(children as JSX.Element, container)
-  }
-
-  const element = createElementNode(container.doc, resolved.type)
-  let hasInnerHTML = false
-  for (const [name, descriptor] of Object.entries(
-    Object.getOwnPropertyDescriptors(resolved.props),
-  ) as [string, PropertyDescriptor][]) {
-    if (name === 'children') {
-      continue
-    }
-    const value = descriptor.get ? descriptor.get.call(resolved.props) : descriptor.value
-    if (resolved.type === 'body' && name === 'data-e-resume') {
-      continue
-    }
-    if (name === DANGEROUSLY_SET_INNER_HTML_PROP) {
-      hasInnerHTML = true
+  } else if (resolved.type === FRAGMENT) {
+    nodes = renderClientNodes(resolved.props.children as JSX.Element | JSX.Element[], container)
+  } else {
+    const element = createElementNode(container.doc, resolved.type)
+    const frame = getCurrentFrame()
+    if (frame && hasScopedStyles(frame) && resolved.type !== 'style') {
+      element.setAttribute(SCOPED_STYLE_ATTR, frame.component.scopeId)
+    }
+    let hasInnerHTML = false
+    for (const [name, descriptor] of Object.entries(
+      Object.getOwnPropertyDescriptors(resolved.props),
+    ) as [string, PropertyDescriptor][]) {
+      if (name === 'children') {
+        continue
+      }
+      const value = descriptor.get ? descriptor.get.call(resolved.props) : descriptor.value
+      if (resolved.type === 'body' && name === 'data-e-resume') {
+        continue
+      }
+      if (isDangerouslySetInnerHTMLProp(name)) {
+        hasInnerHTML = true
+      }
+      applyElementProp(element, name, value, container)
     }
-    applyElementProp(element, name, value, container)
-  }
 
-  if (hasInnerHTML) {
-    return [element]
-  }
+    if (hasInnerHTML) {
+      rememberManagedAttributesForNode(element)
+      nodes = [element]
+    } else {
+      if (resolved.type === 'form' && element.getAttribute(ACTION_FORM_ATTR) !== null) {
+        const csrfToken = readActionCsrfTokenFromRuntimeDocument(container.doc)
+        if (csrfToken) {
+          element.appendChild(createActionCsrfInputNode(container.doc, csrfToken))
+        }
+      }
+      const childNodes = renderClientNodes(
+        resolved.props.children as JSX.Element | JSX.Element[],
+        container,
+      )
+      for (const child of childNodes) {
+        element.appendChild(child)
+      }
 
-  const children = resolved.props.children
-  const childNodes = Array.isArray(children)
-    ? children.flatMap((child: JSX.Element) => renderClientNodes(child, container))
-    : renderClientNodes(children as JSX.Element, container)
-  for (const child of childNodes) {
-    element.appendChild(child)
+      rememberManagedAttributesForNode(element)
+      nodes = [element]
+    }
   }
 
-  return [element]
+  return resolved.key === null || resolved.key === undefined
+    ? nodes
+    : wrapNodesWithKeyedRange(container.doc, nodes, resolveKeyedRangeScope(), resolved.key)
 }
 
 const scanComponentBoundaries = (
   root: ParentNode & { ownerDocument: Document },
 ): Map<string, { end?: Comment; start?: Comment }> => {
-  const walker = root.ownerDocument.createTreeWalker(root, NodeFilter.SHOW_COMMENT)
+  const walker = root.ownerDocument.createTreeWalker(root, DOM_SHOW_COMMENT)
   const boundaries = new Map<string, { end?: Comment; start?: Comment }>()
 
   while (walker.nextNode()) {
     const node = walker.currentNode
-    if (!(node instanceof Comment)) {
+    const isCommentNode =
+      node.nodeType === DOM_COMMENT_NODE ||
+      (typeof Comment !== 'undefined' && node instanceof Comment)
+    if (!isCommentNode) {
       continue
     }
-    const matched = node.data.match(/^ec:c:(.+):(start|end)$/)
-    if (!matched) {
+    const marker = parseComponentBoundaryMarker((node as Comment).data)
+    if (!marker) {
       continue
     }
-    const [, id, edge] = matched
-    const boundary = boundaries.get(id) ?? {}
-    if (edge === 'start') {
-      boundary.start = node
+    const boundary = boundaries.get(marker.id) ?? {}
+    if (marker.kind === 'start') {
+      boundary.start = node as Comment
     } else {
-      boundary.end = node
+      boundary.end = node as Comment
     }
-    boundaries.set(id, boundary)
+    boundaries.set(marker.id, boundary)
   }
 
   return boundaries
@@ -3068,12 +4326,14 @@ const toMountedNodes = (value: unknown, container: RuntimeContainer): Node[] =>
   }
 
   if (Array.isArray(resolved)) {
-    return resolved.flatMap((entry) => toMountedNodes(entry, container))
+    return withActiveKeyedRangeScope(allocateKeyedRangeScope(), () =>
+      resolved.flatMap((entry) => toMountedNodes(entry, container)),
+    )
   }
   if (resolved === null || resolved === undefined || resolved === false) {
     return [container.doc.createComment('eclipsa-empty')]
   }
-  if (resolved instanceof Node) {
+  if (typeof Node !== 'undefined' && resolved instanceof Node) {
     return [resolved]
   }
   if (
@@ -3088,15 +4348,119 @@ const toMountedNodes = (value: unknown, container: RuntimeContainer): Node[] =>
 
 export const getRuntimeContainer = () => getCurrentContainer()
 
+export const captureClientInsertOwner = (
+  container: RuntimeContainer | null,
+  siteKey?: string | null,
+): ClientInsertOwner | null => {
+  const frame = getCurrentFrame()
+  if (!container || !frame || frame.container !== container) {
+    return null
+  }
+
+  const ownerComponentId =
+    typeof siteKey === 'string' && siteKey !== ''
+      ? `${frame.component.id}.$i${siteKey}`
+      : `${frame.component.id}.$i${frame.insertCursor++}`
+  getOrCreateComponentState(
+    container,
+    ownerComponentId,
+    CLIENT_INSERT_OWNER_SYMBOL,
+    frame.component.id,
+  )
+  frame.visitedDescendants.add(ownerComponentId)
+  return {
+    childIndex: 0,
+    componentId: ownerComponentId,
+    keyedRangeCursor: frame.keyedRangeCursor,
+    projectionCounters: [...frame.projectionState.counters.entries()],
+  }
+}
+
+export const createDetachedClientInsertOwner = (container: RuntimeContainer): ClientInsertOwner => {
+  const componentId = `${CLIENT_INSERT_OWNER_ID_PREFIX}${container.nextComponentId++}`
+  getOrCreateComponentState(container, componentId, CLIENT_INSERT_OWNER_SYMBOL, ROOT_COMPONENT_ID)
+  return {
+    childIndex: 0,
+    componentId,
+    keyedRangeCursor: 0,
+    projectionCounters: [],
+  }
+}
+
+const inferClientInsertOwnerParentId = (componentId: string) => {
+  if (componentId.startsWith(CLIENT_INSERT_OWNER_ID_PREFIX)) {
+    return ROOT_COMPONENT_ID
+  }
+
+  const lastDotIndex = componentId.lastIndexOf('.')
+  if (lastDotIndex < 0) {
+    return ROOT_COMPONENT_ID
+  }
+
+  return componentId.slice(0, lastDotIndex)
+}
+
+export const renderClientInsertableForOwner = (
+  value: Insertable,
+  container: RuntimeContainer,
+  owner: ClientInsertOwner | null,
+) => {
+  if (!owner) {
+    return renderClientInsertable(value, container)
+  }
+
+  const component =
+    container.components.get(owner.componentId) ??
+    getOrCreateComponentState(
+      container,
+      owner.componentId,
+      CLIENT_INSERT_OWNER_SYMBOL,
+      inferClientInsertOwnerParentId(owner.componentId),
+    )
+
+  const parentFrame = getCurrentFrame()
+  const oldDescendants = collectDescendantIds(container, owner.componentId)
+  const frame = createFrame(container, component, 'client', {
+    reuseExistingDom: false,
+    reuseProjectionSlotDom: false,
+  })
+  frame.childCursor = owner.childIndex
+  frame.keyedRangeCursor = owner.keyedRangeCursor
+  frame.projectionState.counters = new Map(owner.projectionCounters)
+  const nodes = pushContainer(container, () =>
+    pushFrame(frame, () => renderClientInsertable(value, container)),
+  )
+  const keptDescendants = expandComponentIdsToDescendants(container, [
+    ...frame.visitedDescendants,
+    ...collectComponentBoundaryIds(nodes),
+  ])
+  pruneRemovedComponents(container, owner.componentId, keptDescendants)
+  for (const descendantId of oldDescendants) {
+    if (keptDescendants.has(descendantId)) {
+      continue
+    }
+    clearComponentSubscriptions(container, descendantId)
+  }
+  if (parentFrame && parentFrame !== frame) {
+    parentFrame.visitedDescendants.add(owner.componentId)
+    for (const descendantId of keptDescendants) {
+      parentFrame.visitedDescendants.add(descendantId)
+    }
+  }
+  return nodes
+}
+
 export const serializeContainerValue = (
   container: RuntimeContainer | null,
   value: unknown,
-): SerializedValue => (container ? serializeRuntimeValue(container, value) : serializeValue(value))
+): SerializedValue =>
+  container ? serializeRuntimeValue(container, value) : serializePublicValue(value)
 
 export const deserializeContainerValue = (
   container: RuntimeContainer | null,
   value: SerializedValue,
-): unknown => (container ? deserializeRuntimeValue(container, value) : deserializeValue(value))
+): unknown =>
+  container ? deserializeRuntimeValue(container, value) : deserializePublicValue(value)
 
 export const renderClientInsertable = (
   value: unknown,
@@ -3107,7 +4471,9 @@ export const renderClientInsertable = (
     return []
   }
   if (Array.isArray(value)) {
-    return value.flatMap((entry) => renderClientInsertable(entry, container))
+    return withActiveKeyedRangeScope(allocateKeyedRangeScope(), () =>
+      value.flatMap((entry) => renderClientInsertable(entry, container)),
+    )
   }
 
   let resolved = value
@@ -3118,7 +4484,8 @@ export const renderClientInsertable = (
   if (resolved === null || resolved === undefined || resolved === false) {
     return [doc.createComment('eclipsa-empty')]
   }
-  if (resolved instanceof Node) {
+  if (typeof Node !== 'undefined' && resolved instanceof Node) {
+    rememberManagedAttributesForNode(resolved)
     return [resolved]
   }
   if (
@@ -3128,6 +4495,16 @@ export const renderClientInsertable = (
   ) {
     return [doc.createTextNode(String(resolved))]
   }
+  if (isShowValue(resolved)) {
+    return renderClientInsertable(resolveShowBranch(resolved), container)
+  }
+  if (isForValue(resolved)) {
+    return container
+      ? renderForValueToNodes(resolved, container)
+      : resolved.arr.flatMap((item, index) =>
+          renderClientInsertable(resolved.fn(item, index), container),
+        )
+  }
   if (isProjectionSlot(resolved)) {
     return container
       ? renderProjectionSlotToNodes(resolved, container)
@@ -3166,83 +4543,18 @@ const resetContainerForRouteRender = (container: RuntimeContainer) => {
   container.visibles.clear()
   container.watches.clear()
 
-  for (const [id, record] of [...container.signals.entries()]) {
-    for (const effect of [...record.effects]) {
+  for (const [id, record] of Array.from(container.signals.entries())) {
+    for (const effect of Array.from(record.effects)) {
       clearEffectSignals(effect)
     }
     record.effects.clear()
     record.subscribers.clear()
-    if (!isRouterSignalId(id)) {
+    if (!isRouterSignalId(id) && !isAtomSignalId(id)) {
       container.signals.delete(id)
     }
   }
 }
 
-const resolveRouteComponentSymbol = (Page: RouteRenderer, fallback: string) =>
-  getComponentMeta(Page)?.symbol ?? fallback
-
-const isRouteSlot = (value: unknown): value is RouteSlotCarrier =>
-  isPlainObject(value) && value.__eclipsa_type === ROUTE_SLOT_TYPE
-
-const createRouteSlot = (route: LoadedRoute, startLayoutIndex: number): RouteSlotCarrier => {
-  const slot: RouteSlotCarrier = {
-    __eclipsa_type: ROUTE_SLOT_TYPE,
-    pathname: route.pathname,
-    startLayoutIndex,
-  }
-  Object.defineProperty(slot, ROUTE_SLOT_ROUTE_KEY, {
-    configurable: true,
-    enumerable: false,
-    value: route,
-    writable: true,
-  })
-  return slot
-}
-
-const resolveRouteSlot = (container: RuntimeContainer | null, slot: RouteSlotCarrier) => {
-  const route =
-    slot[ROUTE_SLOT_ROUTE_KEY] ??
-    container?.router?.loadedRoutes.get(routeCacheKey(slot.pathname, 'page'))
-  if (!route) {
-    return null
-  }
-  return createRouteElement(route, slot.startLayoutIndex)
-}
-
-const createRouteElement = (route: LoadedRoute, startLayoutIndex = 0) => {
-  const createRouteProps = (props: Record<string, unknown>) => {
-    const nextProps = {
-      ...props,
-    }
-    Object.defineProperty(nextProps, ROUTE_PARAMS_PROP, {
-      configurable: true,
-      enumerable: false,
-      value: route.params,
-      writable: true,
-    })
-    return nextProps
-  }
-
-  if (startLayoutIndex >= route.layouts.length) {
-    return jsxDEV(route.page.renderer as unknown as JSX.Type, createRouteProps({}), null, false, {})
-  }
-
-  let children: unknown = null
-  for (let index = route.layouts.length - 1; index >= startLayoutIndex; index -= 1) {
-    const layout = route.layouts[index]!
-    children = jsxDEV(
-      layout.renderer as unknown as JSX.Type,
-      createRouteProps({
-        children: createRouteSlot(route, index + 1),
-      }),
-      null,
-      false,
-      {},
-    )
-  }
-  return children
-}
-
 const trackSuspenseBoundaryPromise = (
   container: RuntimeContainer,
   componentId: string,
@@ -3278,7 +4590,6 @@ const renderSuspenseContentToString = (
     if (!isPendingSignalError(error)) {
       throw error
     }
-    container.pendingSuspensePromises.add(error.promise)
     const component = container.components.get(componentId)
     if (component) {
       component.suspensePromise = error.promise
@@ -3364,7 +4675,7 @@ const renderSuspenseComponentToString = (props: SuspenseProps) => {
   )
   pruneComponentVisibles(container, component, frame.visibleCursor)
   pruneComponentWatches(container, component, frame.watchCursor)
-  return `<!--ec:c:${componentId}:start-->${body}<!--ec:c:${componentId}:end-->`
+  return `${createComponentBoundaryHtmlComment(componentId, 'start')}${body}${createComponentBoundaryHtmlComment(componentId, 'end')}`
 }
 
 const renderSuspenseComponentToNodes = (
@@ -3411,71 +4722,52 @@ const renderSuspenseComponentToNodes = (
   if (!container.doc) {
     return bodyNodes
   }
-  const start = container.doc.createComment(`ec:c:${componentId}:start`)
-  const end = container.doc.createComment(`ec:c:${componentId}:end`)
-  component.start = start
-  component.end = end
+  const { end, start } = createComponentBoundaryPair(container.doc, componentId)
+  if (!component.start || !component.end) {
+    component.start = start
+    component.end = end
+  }
   return [start, ...bodyNodes, end]
 }
 
-const renderRouteIntoRoot = (
-  container: RuntimeContainer,
-  Page: RouteRenderer,
-  routeKey: string,
-) => {
+const renderRouteIntoRoot = (container: RuntimeContainer, Page: RouteRenderer) => {
   if (!container.doc || !container.rootElement) {
     throw new Error('Client route rendering requires a document root.')
-  }
-
-  resetContainerForRouteRender(container)
-  const rootComponent = getOrCreateComponentState(
-    container,
-    'c0',
-    resolveRouteComponentSymbol(Page, routeKey),
-    ROOT_COMPONENT_ID,
-  )
-  rootComponent.active = true
-  rootComponent.didMount = false
-  rootComponent.end = undefined
-  rootComponent.mountCleanupSlots = []
-  rootComponent.props = {}
-  rootComponent.scopeId = registerScope(container, getComponentMeta(Page)?.captures() ?? [])
-  rootComponent.signalIds = []
-  rootComponent.start = undefined
-  rootComponent.watchCount = 0
-  rootComponent.visibleCount = 0
-
-  clearComponentSubscriptions(container, rootComponent.id)
-  const frame = createFrame(container, rootComponent, 'client')
-  const nodes = pushContainer(container, () =>
-    pushFrame(frame, () => {
-      const rendered = Page({})
-      return toMountedNodes(rendered, container)
-    }),
-  )
-  pruneComponentVisibles(container, rootComponent, frame.visibleCursor)
-  pruneComponentWatches(container, rootComponent, frame.watchCursor)
-  scheduleMountCallbacks(container, rootComponent, frame.mountCallbacks)
+  }
+
+  resetContainerForRouteRender(container)
+  const nodes = pushContainer(container, () => toMountedNodes(Page({}), container))
 
   const root = container.rootElement
   while (root.firstChild) {
     root.firstChild.remove()
   }
-  const start = container.doc.createComment('ec:c:c0:start')
-  const end = container.doc.createComment('ec:c:c0:end')
-  root.appendChild(start)
   for (const node of nodes) {
     root.appendChild(node)
   }
-  root.appendChild(end)
-  rootComponent.start = start
-  rootComponent.end = end
+  rememberManagedAttributesForNode(root)
+  restoreSignalRefs(container, root)
   bindRouterLinks(container, root)
   scheduleVisibleCallbacksCheck(container)
 }
 
-const loadRouteModule = async (url: string): Promise<LoadedRouteModule> => {
-  const module = (await import(/* @vite-ignore */ url)) as {
+const getRouteModuleImportUrl = (router: RouterState, url: string) => {
+  const token = router.routeModuleBusts.get(url)
+  if (token == null) {
+    return url
+  }
+
+  const baseUrl = typeof window === 'undefined' ? 'http://localhost' : window.location.href
+  const nextUrl = new URL(url, baseUrl)
+  nextUrl.searchParams.set('t', token.toString())
+  if (/^[a-z]+:\/\//i.test(url)) {
+    return nextUrl.href
+  }
+  return `${nextUrl.pathname}${nextUrl.search}${nextUrl.hash}`
+}
+
+const loadRouteModule = async (router: RouterState, url: string): Promise<LoadedRouteModule> => {
+  const module = (await import(/* @vite-ignore */ getRouteModuleImportUrl(router, url))) as {
     default?: RouteRenderer
     metadata?: RouteMetadataExport
   }
@@ -3498,7 +4790,7 @@ const createManagedHeadElement = (doc: Document, tagName: 'link' | 'meta') => {
 }
 
 const applyRouteMetadata = (doc: Document, route: LoadedRoute, url: URL, defaultTitle: string) => {
-  for (const element of [...doc.head.querySelectorAll(`[${ROUTE_METADATA_HEAD_ATTR}]`)]) {
+  for (const element of doc.head.querySelectorAll(`[${ROUTE_METADATA_HEAD_ATTR}]`)) {
     element.remove()
   }
 
@@ -3574,25 +4866,19 @@ const loadResolvedRoute = async (
     return existing
   }
 
-  const moduleUrl =
-    variant === 'page'
-      ? matched.entry.page
-      : variant === 'loading'
-        ? matched.entry.loading
-        : variant === 'error'
-          ? matched.entry.error
-          : matched.entry.notFound
+  const moduleUrl = getRouteModuleUrl(matched.entry, variant)
   if (!moduleUrl) {
     return null
   }
 
   const [page, ...layouts] = await Promise.all([
-    loadRouteModule(moduleUrl),
-    ...matched.entry.layouts.map((layoutUrl) => loadRouteModule(layoutUrl)),
+    loadRouteModule(router, moduleUrl),
+    ...matched.entry.layouts.map((layoutUrl) => loadRouteModule(router, layoutUrl)),
   ])
   let route!: LoadedRoute
   route = {
     entry: matched.entry,
+    error: undefined,
     layouts,
     params: matched.params,
     pathname: normalizedPath,
@@ -3609,7 +4895,11 @@ const loadResolvedRouteFromSpecial = async (
   pathname: string,
   kind: 'error' | 'notFound',
 ) => {
-  const matched = findSpecialManifestEntry(ensureRouterState(container).manifest, pathname, kind)
+  const manifest = ensureRouterState(container).manifest
+  const matched =
+    kind === 'notFound'
+      ? resolveNotFoundRouteMatch(manifest, pathname)
+      : findSpecialManifestEntry(manifest, pathname, kind)
   if (!matched) {
     return null
   }
@@ -3617,8 +4907,8 @@ const loadResolvedRouteFromSpecial = async (
 }
 
 const loadRouteComponent = async (container: RuntimeContainer, pathname: string) => {
-  const matched = matchRouteManifest(ensureRouterState(container).manifest, pathname)
-  if (!matched || !matched.entry.page) {
+  const matched = resolvePageRouteMatch(ensureRouterState(container).manifest, pathname)
+  if (!matched) {
     return null
   }
   return loadResolvedRoute(container, matched, 'page')
@@ -3636,7 +4926,13 @@ const findRouteComponentChain = (
   const [symbol, ...rest] = symbols
   const candidates = [...container.components.values()]
     .filter((component) => {
-      if (!component.active || component.symbol !== symbol) {
+      if (
+        !component.start ||
+        !component.end ||
+        !component.start.parentNode ||
+        !component.end.parentNode ||
+        component.symbol !== symbol
+      ) {
         return false
       }
       if (parentId === null) {
@@ -3673,6 +4969,161 @@ const collectSharedLayoutBoundaryIds = (container: RuntimeContainer, route: Load
   return findRouteComponentChain(container, symbols)
 }
 
+const getComponentIdDepth = (componentId: string) => componentId.split('.').length
+
+const parseDirectChildIndex = (parentId: string, childId: string) => {
+  if (!childId.startsWith(`${parentId}.`)) {
+    return null
+  }
+  const remainder = childId.slice(parentId.length + 1)
+  if (remainder.length === 0 || remainder.includes('.')) {
+    return null
+  }
+  const parsed = Number(remainder)
+  return Number.isInteger(parsed) ? parsed : null
+}
+
+type SharedLayoutRouteRoot =
+  | {
+      childIndex: number
+      kind: 'direct'
+      rootId: string
+    }
+  | {
+      kind: 'owner'
+      ownerId: string
+      rootId: string
+    }
+
+const resolveSharedLayoutRouteRoot = (
+  container: RuntimeContainer,
+  boundaryId: string,
+  slotRange: { start: Comment; end: Comment },
+): SharedLayoutRouteRoot | null => {
+  const candidateIds = [
+    ...collectComponentBoundaryIds(getBoundaryChildren(slotRange.start, slotRange.end)),
+  ].sort((left, right) => getComponentIdDepth(left) - getComponentIdDepth(right))
+
+  for (const candidateId of candidateIds) {
+    const childIndex = parseDirectChildIndex(boundaryId, candidateId)
+    if (childIndex !== null) {
+      return {
+        childIndex,
+        kind: 'direct',
+        rootId: candidateId,
+      }
+    }
+  }
+
+  for (const candidateId of candidateIds) {
+    const component = container.components.get(candidateId)
+    if (!component?.parentId) {
+      continue
+    }
+    const owner = container.components.get(component.parentId)
+    if (!owner || owner.symbol !== CLIENT_INSERT_OWNER_SYMBOL || owner.parentId !== boundaryId) {
+      continue
+    }
+    return {
+      kind: 'owner',
+      ownerId: owner.id,
+      rootId: candidateId,
+    }
+  }
+
+  return null
+}
+
+const renderRouteSubtreeForProjectionSlot = (
+  container: RuntimeContainer,
+  boundary: ComponentState,
+  childIndex: number,
+  source: unknown,
+) => {
+  const frame = createFrame(container, boundary, 'client', {
+    reuseExistingDom: false,
+    reuseProjectionSlotDom: false,
+  })
+  frame.childCursor = childIndex
+  const nodes = pushContainer(container, () =>
+    pushFrame(frame, () => renderClientInsertable(source, container)),
+  )
+  return {
+    nodes,
+    visitedDescendants: frame.visitedDescendants,
+  }
+}
+
+const renderRouteSubtreeForProjectionSlotOwner = (
+  container: RuntimeContainer,
+  ownerId: string,
+  source: unknown,
+) => {
+  const nodes = renderClientInsertableForOwner(source as Insertable, container, {
+    childIndex: 0,
+    componentId: ownerId,
+    keyedRangeCursor: 0,
+    projectionCounters: [],
+  })
+  return {
+    nodes,
+    visitedDescendants: expandComponentIdsToDescendants(container, [ownerId]),
+  }
+}
+
+const clearSharedLayoutDescendantDirtyStates = (
+  container: RuntimeContainer,
+  boundaryId: string,
+  excludedRootId: string | null,
+) => {
+  for (const componentId of Array.from(container.dirty)) {
+    if (!isDescendantOf(boundaryId, componentId)) {
+      continue
+    }
+    if (
+      excludedRootId &&
+      (componentId === excludedRootId || isDescendantOf(excludedRootId, componentId))
+    ) {
+      continue
+    }
+    container.dirty.delete(componentId)
+    const component = container.components.get(componentId)
+    if (!component) {
+      continue
+    }
+    component.activateModeOnFlush = undefined
+    component.reuseExistingDomOnActivate = true
+    component.reuseProjectionSlotDomOnActivate = false
+  }
+}
+
+const deactivateComponentSubtree = (container: RuntimeContainer, rootId: string) => {
+  const root = container.components.get(rootId)
+  if (root) {
+    root.active = false
+  }
+  for (const componentId of collectDescendantIds(container, rootId)) {
+    const component = container.components.get(componentId)
+    if (component) {
+      component.active = false
+    }
+  }
+}
+
+const withUpdatedComponentChildren = (props: Record<string, unknown> | null, children: unknown) => {
+  const next = {}
+  if (props) {
+    Object.defineProperties(next, Object.getOwnPropertyDescriptors(props))
+  }
+  Object.defineProperty(next, 'children', {
+    configurable: true,
+    enumerable: true,
+    value: children,
+    writable: true,
+  })
+  return next as Record<string, unknown>
+}
+
 const countSharedLayouts = (current: LoadedRoute | null, next: LoadedRoute) => {
   if (!current) {
     return 0
@@ -3703,17 +5154,119 @@ const updateSharedLayoutBoundary = async (
 
   const boundaryId = boundaryIds[sharedLayoutCount - 1]!
   const boundary = container.components.get(boundaryId)
-  if (!boundary) {
+  if (!boundary?.start || !boundary.end) {
     return false
   }
 
+  const nextChildren = createRouteElement(next, sharedLayoutCount)
+  const rerenderSharedLayoutBoundary = async () => {
+    const focusSnapshot = captureBoundaryFocus(container.doc!, boundary.start!, boundary.end!)
+    const boundaryProps =
+      boundary.props && typeof boundary.props === 'object'
+        ? (boundary.props as Record<string, unknown>)
+        : null
+    const boundaryRawProps =
+      boundary.rawProps && typeof boundary.rawProps === 'object' ? boundary.rawProps : boundaryProps
+    boundary.props = withUpdatedComponentChildren(boundaryProps, nextChildren)
+    boundary.rawProps = withUpdatedComponentChildren(boundaryRawProps, nextChildren)
+    boundary.active = false
+    boundary.activateModeOnFlush = 'replace'
+    boundary.reuseExistingDomOnActivate = false
+    boundary.reuseProjectionSlotDomOnActivate = false
+    container.dirty.add(boundaryId)
+    if (boundary.start?.parentNode && 'querySelectorAll' in boundary.start.parentNode) {
+      bindRouterLinks(container, boundary.start.parentNode as ParentNode)
+    }
+    if (container.dirty.size > 0) {
+      await flushDirtyComponents(container)
+    }
+    if (boundary.start && boundary.end) {
+      restoreBoundaryFocus(container.doc!, boundary.start, boundary.end, focusSnapshot)
+    }
+    return true
+  }
+
+  if ((boundary.projectionSlots?.children ?? 0) !== 1) {
+    return rerenderSharedLayoutBoundary()
+  }
+
+  const slotRanges = collectProjectionSlotRanges(getBoundaryChildren(boundary.start, boundary.end))
+  const slotRange = slotRanges.get(createProjectionSlotRangeKey(boundaryId, 'children', 0))
+  if (!slotRange) {
+    return rerenderSharedLayoutBoundary()
+  }
+  const routeRoot = resolveSharedLayoutRouteRoot(container, boundaryId, slotRange)
+  if (!routeRoot) {
+    return rerenderSharedLayoutBoundary()
+  }
+  if (routeRoot.kind === 'owner') {
+    deactivateComponentSubtree(container, routeRoot.rootId)
+    const focusSnapshot = captureBoundaryFocus(container.doc!, slotRange.start, slotRange.end)
+    const { nodes } = renderRouteSubtreeForProjectionSlotOwner(
+      container,
+      routeRoot.ownerId,
+      nextChildren,
+    )
+    replaceProjectionSlotContents(slotRange.start, slotRange.end, nodes)
+    restoreBoundaryFocus(container.doc!, slotRange.start, slotRange.end, focusSnapshot)
+    const boundaryProps =
+      boundary.props && typeof boundary.props === 'object'
+        ? (boundary.props as Record<string, unknown>)
+        : null
+    const boundaryRawProps =
+      boundary.rawProps && typeof boundary.rawProps === 'object' ? boundary.rawProps : boundaryProps
+    boundary.props = withUpdatedComponentChildren(boundaryProps, nextChildren)
+    boundary.rawProps = withUpdatedComponentChildren(boundaryRawProps, nextChildren)
+    container.dirty.delete(boundaryId)
+    clearSharedLayoutDescendantDirtyStates(container, boundaryId, routeRoot.ownerId)
+    boundary.active = false
+    boundary.activateModeOnFlush = 'patch'
+    boundary.reuseExistingDomOnActivate = true
+    boundary.reuseProjectionSlotDomOnActivate = true
+    container.dirty.add(boundaryId)
+    if (boundary.start.parentNode && 'querySelectorAll' in boundary.start.parentNode) {
+      bindRouterLinks(container, boundary.start.parentNode as ParentNode)
+    }
+    if (container.dirty.size > 0) {
+      await flushDirtyComponents(container)
+    }
+    return true
+  }
+
+  const currentRouteRoot = container.components.get(routeRoot.rootId) ?? null
+  const needsFullBoundaryRerender =
+    (currentRouteRoot?.watchCount ?? 0) > 0 || (currentRouteRoot?.visibleCount ?? 0) > 0
+
+  if (needsFullBoundaryRerender) {
+    deactivateComponentSubtree(container, routeRoot.rootId)
+    return rerenderSharedLayoutBoundary()
+  }
+
   boundary.props = {
-    children: createRouteElement(next, sharedLayoutCount),
+    children: nextChildren,
   }
+  deactivateComponentSubtree(container, routeRoot.rootId)
+  const focusSnapshot = captureBoundaryFocus(container.doc!, slotRange.start, slotRange.end)
+  const { nodes, visitedDescendants } = renderRouteSubtreeForProjectionSlot(
+    container,
+    boundary,
+    routeRoot.childIndex,
+    nextChildren,
+  )
+  replaceProjectionSlotContents(slotRange.start, slotRange.end, nodes)
+  restoreBoundaryFocus(container.doc!, slotRange.start, slotRange.end, focusSnapshot)
+  pruneRemovedComponents(container, routeRoot.rootId, visitedDescendants)
   boundary.active = false
-  boundary.reuseExistingDomOnActivate = false
+  boundary.activateModeOnFlush = 'patch'
+  boundary.reuseExistingDomOnActivate = true
+  boundary.reuseProjectionSlotDomOnActivate = true
   container.dirty.add(boundaryId)
-  await flushDirtyComponents(container)
+  if (boundary.start.parentNode && 'querySelectorAll' in boundary.start.parentNode) {
+    bindRouterLinks(container, boundary.start.parentNode as ParentNode)
+  }
+  if (container.dirty.size > 0) {
+    await flushDirtyComponents(container)
+  }
   return true
 }
 
@@ -3743,31 +5296,14 @@ const fallbackDocumentNavigation = (doc: Document, url: URL, mode: NavigationMod
   doc.defaultView.location.assign(url.href)
 }
 
-const parseResumePayloadFromHtml = (html: string): ResumePayload | null => {
-  if (typeof DOMParser === 'undefined') {
-    return null
-  }
-  const parsed = new DOMParser().parseFromString(html, 'text/html')
-  const payloadNode =
-    parsed.getElementById(RESUME_FINAL_STATE_ELEMENT_ID) ??
-    parsed.getElementById(RESUME_STATE_ELEMENT_ID)
-  if (!payloadNode?.textContent) {
-    return null
-  }
-  return JSON.parse(payloadNode.textContent) as ResumePayload
-}
-
 const cachePrefetchedLoaders = (
   container: RuntimeContainer,
   url: URL,
-  payload: ResumePayload | null,
+  loaders: Record<string, ResumeLoaderPayload>,
 ) => {
-  if (!payload) {
-    return
-  }
   const router = ensureRouterState(container)
   const snapshots = new Map<string, LoaderSnapshot>()
-  for (const [id, loaderPayload] of Object.entries(payload.loaders ?? {})) {
+  for (const [id, loaderPayload] of Object.entries(loaders)) {
     snapshots.set(id, {
       data: deserializeRuntimeValue(container, loaderPayload.data),
       error: deserializeRuntimeValue(container, loaderPayload.error),
@@ -3792,6 +5328,121 @@ const applyPrefetchedLoaders = (container: RuntimeContainer, url: URL) => {
   }
 }
 
+const extractScriptTextById = (html: string, id: string) => {
+  const scriptPattern = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi
+  const idPattern = /\bid\s*=\s*(?:"([^"]*)"|'([^']*)')/i
+
+  for (const match of html.matchAll(scriptPattern)) {
+    const attrs = match[1] ?? ''
+    const idMatch = attrs.match(idPattern)
+    if (!idMatch) {
+      continue
+    }
+    if ((idMatch[1] ?? idMatch[2]) === id) {
+      return match[2] ?? ''
+    }
+  }
+
+  return null
+}
+
+const parseRouteDataFromHtml = (
+  container: RuntimeContainer,
+  requestUrl: URL,
+  response: {
+    url?: string
+  },
+  html: string,
+): RouteDataResponse => {
+  const finalUrl = new URL(response.url || requestUrl.href, requestUrl.href)
+  if (finalUrl.origin !== requestUrl.origin) {
+    return {
+      location: finalUrl.href,
+      ok: false,
+    }
+  }
+
+  const payloadText =
+    extractScriptTextById(html, RESUME_FINAL_STATE_ELEMENT_ID) ??
+    extractScriptTextById(html, RESUME_STATE_ELEMENT_ID)
+  if (!payloadText) {
+    return ROUTE_DOCUMENT_FALLBACK
+  }
+
+  let payload: ResumePayload
+  try {
+    payload = JSON.parse(payloadText) as ResumePayload
+  } catch {
+    return ROUTE_DOCUMENT_FALLBACK
+  }
+
+  const finalPathname = normalizeRoutePath(finalUrl.pathname)
+  const router = ensureRouterState(container)
+  const resolvedMatch = resolveRoutableMatch(router.manifest, finalPathname)
+  if (!resolvedMatch) {
+    return ROUTE_DOCUMENT_FALLBACK
+  }
+
+  return {
+    finalHref: finalUrl.href,
+    finalPathname,
+    kind: resolvedMatch.kind,
+    loaders: payload.loaders ?? {},
+    ok: true,
+  }
+}
+
+const requestRouteData = async (
+  container: RuntimeContainer,
+  href: string,
+): Promise<RouteDataResponse> => {
+  const baseUrl = typeof window === 'undefined' ? 'http://localhost' : window.location.href
+  const requestUrl = new URL(href, baseUrl)
+
+  try {
+    const endpointUrl = new URL(ROUTE_DATA_ENDPOINT, requestUrl)
+    endpointUrl.searchParams.set('href', requestUrl.href)
+    const response = await fetch(endpointUrl.href)
+    if (response.status >= 200 && response.status < 300) {
+      const body = (await response.json()) as RouteDataResponse
+      if (!body || typeof body !== 'object' || typeof body.ok !== 'boolean') {
+        return ROUTE_DOCUMENT_FALLBACK
+      }
+      if (isRouteDataSuccess(body)) {
+        return body
+      }
+      if ('location' in body && typeof body.location === 'string') {
+        return body
+      }
+    }
+  } catch {}
+
+  try {
+    const response = await fetch(requestUrl.href)
+    const html = await response.text()
+    return parseRouteDataFromHtml(container, requestUrl, response, html)
+  } catch {}
+
+  return ROUTE_DOCUMENT_FALLBACK
+}
+
+const resetRouteLoaderState = (container: RuntimeContainer) => {
+  container.loaders.clear()
+  container.loaderStates.clear()
+
+  for (const [id, record] of Array.from(container.signals.entries())) {
+    if (!isLoaderSignalId(id)) {
+      continue
+    }
+    for (const effect of Array.from(record.effects)) {
+      clearEffectSignals(effect)
+    }
+    record.effects.clear()
+    record.subscribers.clear()
+    container.signals.delete(id)
+  }
+}
+
 const requestRoutePreflight = async (href: string): Promise<RoutePreflightResult> => {
   try {
     const requestUrl = new URL(
@@ -3804,10 +5455,7 @@ const requestRoutePreflight = async (href: string): Promise<RoutePreflightResult
       },
     })
     if (response.status < 200 || response.status >= 300) {
-      return {
-        document: true,
-        ok: false,
-      }
+      return ROUTE_DOCUMENT_FALLBACK
     }
     const finalUrl = new URL(response.url || requestUrl.href, requestUrl.href)
     if (
@@ -3824,10 +5472,7 @@ const requestRoutePreflight = async (href: string): Promise<RoutePreflightResult
       ok: true,
     }
   } catch {
-    return {
-      document: true,
-      ok: false,
-    }
+    return ROUTE_DOCUMENT_FALLBACK
   }
 }
 
@@ -3837,24 +5482,95 @@ const prefetchResolvedRouteModules = async (
   finalUrl: URL,
 ) => {
   const router = ensureRouterState(container)
-  const matched = matchRouteManifest(router.manifest, pathname)
-  if (matched?.entry.page) {
-    await loadResolvedRoute(container, matched)
-    return
-  }
-  const notFoundMatched = findSpecialManifestEntry(router.manifest, pathname, 'notFound')
-  if (notFoundMatched?.entry.notFound) {
-    await loadResolvedRoute(container, notFoundMatched, 'not-found')
+  const resolvedMatch = resolveRoutableMatch(router.manifest, pathname)
+  if (resolvedMatch) {
+    await loadResolvedRoute(container, resolvedMatch.matched, resolvedMatch.kind)
   }
   if (finalUrl.pathname !== pathname) {
     const redirectedPath = normalizeRoutePath(finalUrl.pathname)
-    const redirectedMatched = matchRouteManifest(router.manifest, redirectedPath)
-    if (redirectedMatched?.entry.page) {
-      await loadResolvedRoute(container, redirectedMatched)
+    const redirectedMatch = resolveRoutableMatch(router.manifest, redirectedPath)
+    if (redirectedMatch) {
+      await loadResolvedRoute(container, redirectedMatch.matched, redirectedMatch.kind)
     }
   }
 }
 
+const renderCurrentRoute = (container: RuntimeContainer, route: LoadedRoute) => {
+  renderRouteIntoRoot(container, route.render)
+  ensureRouterState(container).currentRoute = route
+}
+
+const applyCurrentRouteMetadata = (container: RuntimeContainer, route: LoadedRoute, url: URL) => {
+  const doc = container.doc
+  if (!doc) {
+    return
+  }
+  const router = ensureRouterState(container)
+  applyRouteMetadata(doc, route, url, router.defaultTitle)
+}
+
+const commitRouteNavigation = (
+  container: RuntimeContainer,
+  route: LoadedRoute,
+  url: URL,
+  mode: NavigationMode,
+  options?: {
+    writeLocation?: boolean
+  },
+) => {
+  const doc = container.doc
+  if (!doc) {
+    return
+  }
+  const router = ensureRouterState(container)
+  applyCurrentRouteMetadata(container, route, url)
+  commitBrowserNavigation(doc, url, mode)
+  if (options?.writeLocation !== false) {
+    writeRouterLocation(router, url)
+  }
+}
+
+const renderAndCommitRouteNavigation = (
+  container: RuntimeContainer,
+  route: LoadedRoute,
+  url: URL,
+  mode: NavigationMode,
+  options?: {
+    resetLoaders?: boolean
+  },
+) => {
+  if (options?.resetLoaders) {
+    resetRouteLoaderState(container)
+  }
+  renderCurrentRoute(container, route)
+  commitRouteNavigation(container, route, url, mode)
+}
+
+const handleFailedRouteRequest = async (
+  container: RuntimeContainer,
+  doc: Document,
+  url: URL,
+  mode: NavigationMode,
+  redirectDepth: number,
+  result: Extract<RoutePrefetchResult | RoutePreflightResult, { ok: false }>,
+) => {
+  if (!('location' in result)) {
+    fallbackDocumentNavigation(doc, url, mode)
+    return
+  }
+
+  const redirectUrl = new URL(result.location, doc.location.href)
+  if (redirectDepth >= 8 || redirectUrl.origin !== doc.location.origin) {
+    fallbackDocumentNavigation(doc, redirectUrl, mode)
+    return
+  }
+
+  await navigateContainer(container, redirectUrl.href, {
+    mode,
+    redirectDepth: redirectDepth + 1,
+  })
+}
+
 const prefetchRoute = async (container: RuntimeContainer, href: string) => {
   const doc = container.doc
   if (!doc) {
@@ -3874,36 +5590,28 @@ const prefetchRoute = async (container: RuntimeContainer, href: string) => {
   }
 
   const pathname = normalizeRoutePath(requestUrl.pathname)
-  const matched = matchRouteManifest(router.manifest, pathname)
-  const specialRoute = !matched
-    ? findSpecialManifestEntry(router.manifest, pathname, 'notFound')
-    : null
-  if (!matched?.entry.page && !specialRoute?.entry.notFound) {
+  const routeTarget = resolveRoutableMatch(router.manifest, pathname)
+  if (!routeTarget) {
     return
   }
 
   const prefetchPromise = (async () => {
     try {
-      const response = await fetch(requestUrl.href)
-      if (response.status < 200 || response.status >= 300) {
-        return
+      const result = await requestRouteData(container, requestUrl.href)
+      if (!result.ok) {
+        return result
       }
 
-      const finalUrl = new URL(response.url || requestUrl.href, requestUrl.href)
+      const finalUrl = new URL(result.finalHref, requestUrl.href)
       if (finalUrl.origin !== requestUrl.origin) {
-        return
+        return ROUTE_DOCUMENT_FALLBACK satisfies RoutePrefetchResult
       }
 
-      const contentType = response.headers.get('content-type') ?? ''
-      const html = contentType.includes('text/html') ? await response.text() : ''
-      await prefetchResolvedRouteModules(container, normalizeRoutePath(finalUrl.pathname), finalUrl)
-      cachePrefetchedLoaders(
-        container,
-        new URL(`${finalUrl.pathname}${finalUrl.search}`, requestUrl.origin),
-        html ? parseResumePayloadFromHtml(html) : null,
-      )
+      await prefetchResolvedRouteModules(container, result.finalPathname, finalUrl)
+      cachePrefetchedLoaders(container, finalUrl, result.loaders)
+      return result
     } catch {
-      return
+      return ROUTE_DOCUMENT_FALLBACK satisfies RoutePrefetchResult
     }
   })()
 
@@ -3915,6 +5623,7 @@ const navigateContainer = async (
   container: RuntimeContainer,
   href: string,
   options?: {
+    force?: boolean
     redirectDepth?: number
     mode?: NavigationMode
   },
@@ -3924,7 +5633,10 @@ const navigateContainer = async (
     return
   }
 
+  await waitForPendingDirtyFlush()
+
   const mode = options?.mode ?? 'push'
+  const force = options?.force ?? false
   const redirectDepth = options?.redirectDepth ?? 0
   const url = new URL(href, doc.location.href)
   if (url.origin !== doc.location.origin) {
@@ -3934,39 +5646,32 @@ const navigateContainer = async (
   const pathname = normalizeRoutePath(url.pathname)
   const router = ensureRouterState(container)
   const matched = matchRouteManifest(router.manifest, pathname)
-  const specialPreflightTarget = !matched
-    ? findSpecialManifestEntry(router.manifest, pathname, 'notFound')
-    : null
+  const routeTarget = resolveRoutableMatch(router.manifest, pathname)
 
-  const currentHref = `${doc.location.pathname}${doc.location.search}${doc.location.hash}`
+  const currentRouteUrl = new URL(router.currentUrl.value, doc.location.href)
+  const currentHref = `${currentRouteUrl.pathname}${currentRouteUrl.search}${currentRouteUrl.hash}`
   const nextHref = `${url.pathname}${url.search}${url.hash}`
-  if (nextHref === currentHref) {
+  if (!force && nextHref === currentHref) {
+    return
+  }
+
+  const prefetchKey = routePrefetchKey(url)
+  let pendingPrefetch = router.routePrefetches.get(prefetchKey)
+  if (!pendingPrefetch && routeTarget) {
+    await prefetchRoute(container, url.href)
+    pendingPrefetch = router.routePrefetches.get(prefetchKey)
+  }
+  const prefetched = pendingPrefetch ? await pendingPrefetch : null
+  if (prefetched && !prefetched.ok) {
+    await handleFailedRouteRequest(container, doc, url, mode, redirectDepth, prefetched)
     return
   }
 
-  const shouldPreflight =
-    (matched?.entry.page && matched.entry.hasMiddleware) ||
-    (!!specialPreflightTarget?.entry.notFound && specialPreflightTarget.entry.hasMiddleware)
-  if (shouldPreflight) {
+  const shouldPreflight = !!routeTarget?.matched.entry.hasMiddleware
+  if (shouldPreflight && !prefetched) {
     const preflight = await requestRoutePreflight(url.href)
     if (!preflight.ok) {
-      if ('location' in preflight) {
-        if (redirectDepth >= 8) {
-          fallbackDocumentNavigation(doc, new URL(preflight.location, doc.location.href), mode)
-          return
-        }
-        const redirectUrl = new URL(preflight.location, doc.location.href)
-        if (redirectUrl.origin !== doc.location.origin) {
-          fallbackDocumentNavigation(doc, redirectUrl, mode)
-          return
-        }
-        await navigateContainer(container, redirectUrl.href, {
-          mode,
-          redirectDepth: redirectDepth + 1,
-        })
-        return
-      }
-      fallbackDocumentNavigation(doc, url, mode)
+      await handleFailedRouteRequest(container, doc, url, mode, redirectDepth, preflight)
       return
     }
   }
@@ -3976,29 +5681,28 @@ const navigateContainer = async (
       ? await loadResolvedRouteFromSpecial(container, pathname, 'notFound')
       : null
     if (notFoundRoute) {
-      renderRouteIntoRoot(container, notFoundRoute.render, `route:${pathname}:not-found`)
-      router.currentRoute = notFoundRoute
-      applyRouteMetadata(doc, notFoundRoute, url, router.defaultTitle)
-      commitBrowserNavigation(doc, url, mode)
-      router.currentPath.value = pathname
+      renderAndCommitRouteNavigation(container, notFoundRoute, url, mode, {
+        resetLoaders: true,
+      })
       return
     }
     fallbackDocumentNavigation(doc, url, mode)
     return
   }
 
-  if (pathname === router.currentPath.value) {
+  if (!force && pathname === router.currentPath.value) {
     if (nextHref !== currentHref) {
       commitBrowserNavigation(doc, url, mode)
+      writeRouterLocation(router, url)
     }
     return
   }
 
-  const pendingPrefetch = router.routePrefetches.get(routePrefetchKey(url))
-  if (pendingPrefetch) {
-    await pendingPrefetch
-  }
-  applyPrefetchedLoaders(container, url)
+  resetRouteLoaderState(container)
+  applyPrefetchedLoaders(
+    container,
+    prefetched?.ok ? new URL(prefetched.finalHref, doc.location.href) : url,
+  )
   const sequence = ++router.sequence
   router.isNavigating.value = true
 
@@ -4013,8 +5717,7 @@ const navigateContainer = async (
       if (!settled) {
         const loadingRoute = await loadResolvedRoute(container, matched, 'loading')
         if (loadingRoute) {
-          renderRouteIntoRoot(container, loadingRoute.render, `route:${pathname}:loading`)
-          router.currentRoute = loadingRoute
+          renderCurrentRoute(container, loadingRoute)
         }
       }
     }
@@ -4032,6 +5735,9 @@ const navigateContainer = async (
       return
     }
 
+    router.currentRoute = nextRoute
+    writeRouterLocation(router, url)
+
     const sharedLayoutCount = countSharedLayouts(currentRoute, nextRoute)
     const reusedLayout =
       currentRoute && sharedLayoutCount > 0
@@ -4039,28 +5745,19 @@ const navigateContainer = async (
         : false
 
     if (!reusedLayout) {
-      renderRouteIntoRoot(container, nextRoute.render, `route:${pathname}`)
+      renderCurrentRoute(container, nextRoute)
     }
 
-    router.currentRoute = nextRoute
-    applyRouteMetadata(doc, nextRoute, url, router.defaultTitle)
-    commitBrowserNavigation(doc, url, mode)
-    router.currentPath.value = pathname
+    commitRouteNavigation(container, nextRoute, url, mode, {
+      writeLocation: false,
+    })
   } catch (error) {
     if (sequence === router.sequence) {
       const fallbackRoute = isRouteNotFoundError(error)
         ? await loadResolvedRouteFromSpecial(container, pathname, 'notFound')
         : await loadResolvedRoute(container, matched, 'error')
       if (fallbackRoute) {
-        renderRouteIntoRoot(
-          container,
-          fallbackRoute.render,
-          `route:${pathname}:${isRouteNotFoundError(error) ? 'not-found' : 'error'}`,
-        )
-        router.currentRoute = fallbackRoute
-        applyRouteMetadata(doc, fallbackRoute, url, router.defaultTitle)
-        commitBrowserNavigation(doc, url, mode)
-        router.currentPath.value = pathname
+        renderAndCommitRouteNavigation(container, fallbackRoute, url, mode)
         return
       }
       fallbackDocumentNavigation(doc, url, mode)
@@ -4072,119 +5769,263 @@ const navigateContainer = async (
   }
 }
 
-export const renderClientComponent = <T>(componentFn: Component<T>, props: T): unknown => {
-  const container = getCurrentContainer()
-  const parentFrame = getCurrentFrame()
-  const meta = getComponentMeta(componentFn)
-
-  if (!container || !parentFrame || !meta) {
-    return componentFn(props)
+export const refreshRouteContainer = async (container: RuntimeContainer) => {
+  const doc = container.doc
+  if (!doc) {
+    return false
   }
+  const url = new URL(doc.location.href)
+  const router = ensureRouterState(container)
+  const key = routePrefetchKey(url)
+  router.prefetchedLoaders.delete(key)
+  router.routePrefetches.delete(key)
+  await prefetchRoute(container, url.href)
+  await navigateContainer(container, url.href, {
+    force: true,
+    mode: 'replace',
+  })
+  return true
+}
 
-  const position = nextComponentPosition(container)
-  const componentId = createComponentId(container, position.parentId, position.childIndex)
-  const existing = container.components.get(componentId)
-  const symbolChanged = !!existing && existing.symbol !== meta.symbol
-  const component = getOrCreateComponentState(
-    container,
-    componentId,
-    meta.symbol,
-    position.parentId,
-  )
-  component.props =
-    props && typeof props === 'object'
-      ? evaluateProps(props as Record<string, unknown>)
-      : (props as unknown)
-  component.projectionSlots = meta.projectionSlots ?? null
-  if (!existing || symbolChanged) {
-    resetComponentForSymbolChange(container, component, meta)
-  }
-  component.active = true
-  component.start = undefined
-  component.end = undefined
+const routeEntryReferencesModuleUrl = (entry: RouteModuleManifest, fileUrl: string) =>
+  entry.page === fileUrl ||
+  entry.loading === fileUrl ||
+  entry.error === fileUrl ||
+  entry.notFound === fileUrl ||
+  entry.layouts.includes(fileUrl)
 
-  const frame = createFrame(container, component, 'client')
-  const oldDescendants = collectDescendantIds(container, componentId)
-  clearComponentSubscriptions(container, componentId)
-  const renderProps =
-    component.props && typeof component.props === 'object'
-      ? createRenderProps(componentId, meta, component.props as Record<string, unknown>)
-      : component.props
-  let rendered: unknown
-  try {
-    rendered = pushFrame(frame, () => componentFn(renderProps as T))
-  } catch (error) {
-    if (isPendingSignalError(error)) {
-      parentFrame.visitedDescendants.add(componentId)
-      for (const descendantId of frame.visitedDescendants) {
-        parentFrame.visitedDescendants.add(descendantId)
-      }
-    }
-    throw error
+const routeReferencesModuleUrl = (route: LoadedRoute, fileUrl: string) =>
+  route.page.url === fileUrl ||
+  route.layouts.some((layout) => layout.url === fileUrl) ||
+  routeEntryReferencesModuleUrl(route.entry, fileUrl)
+
+export const invalidateRouteModulesForHmr = (
+  container: RuntimeContainer,
+  fileUrl: string,
+  bustToken = Date.now(),
+) => {
+  const router = container.router
+  if (!router) {
+    return false
   }
-  pruneComponentVisibles(container, component, frame.visibleCursor)
-  pruneComponentWatches(container, component, frame.watchCursor)
-  pruneRemovedComponents(container, componentId, frame.visitedDescendants)
 
-  for (const descendantId of oldDescendants) {
-    if (frame.visitedDescendants.has(descendantId)) {
+  let invalidated = false
+  for (const [cacheKey, route] of Array.from(router.loadedRoutes.entries())) {
+    if (!routeReferencesModuleUrl(route, fileUrl)) {
       continue
     }
-    clearComponentSubscriptions(container, descendantId)
+    router.loadedRoutes.delete(cacheKey)
+    invalidated = true
   }
 
-  parentFrame.visitedDescendants.add(componentId)
-  for (const descendantId of frame.visitedDescendants) {
-    parentFrame.visitedDescendants.add(descendantId)
+  if (router.currentRoute && routeReferencesModuleUrl(router.currentRoute, fileUrl)) {
+    router.currentRoute = null
+    invalidated = true
   }
 
-  scheduleMountCallbacks(container, component, frame.mountCallbacks)
-  scheduleVisibleCallbacksCheck(container)
+  const currentEntry = resolveCurrentRouteManifestEntry(router)
+  if (currentEntry && routeEntryReferencesModuleUrl(currentEntry, fileUrl)) {
+    invalidated = true
+  }
+
+  if (!invalidated) {
+    return false
+  }
+
+  router.routeModuleBusts.set(fileUrl, bustToken)
+
+  if (container.doc) {
+    const currentUrl = new URL(container.doc.location.href)
+    const currentKey = routePrefetchKey(currentUrl)
+    router.prefetchedLoaders.delete(currentKey)
+    router.routePrefetches.delete(currentKey)
+  }
+
+  return true
+}
+
+export const refreshRouteContainerForHmr = async (
+  container: RuntimeContainer,
+  fileUrl: string,
+  bustToken = Date.now(),
+) => {
+  const doc = container.doc
+  if (!doc || !invalidateRouteModulesForHmr(container, fileUrl, bustToken)) {
+    return false
+  }
+
+  const router = ensureRouterState(container)
+  const pathname = normalizeRoutePath(router.currentPath.value)
+
+  try {
+    const nextRoute =
+      (await loadRouteComponent(container, pathname)) ??
+      (await loadResolvedRouteFromSpecial(container, pathname, 'notFound'))
+    if (!nextRoute) {
+      await refreshRouteContainer(container)
+      return true
+    }
+
+    renderCurrentRoute(container, nextRoute)
+    applyCurrentRouteMetadata(container, nextRoute, new URL(doc.location.href))
+    return true
+  } catch {
+    await refreshRouteContainer(container)
+    return true
+  }
+}
 
-  return rendered
+export const refreshRegisteredRouteContainers = async () => {
+  for (const container of getResumeContainers()) {
+    await refreshRouteContainer(container)
+  }
 }
 
 const activateComponent = async (container: RuntimeContainer, componentId: string) => {
   const component = container.components.get(componentId)
   if (!component?.start || !component.end || component.active) {
-    return
+    return false
   }
+  const activateSymbol = component.symbol
+  const activateMode = component.activateModeOnFlush ?? 'replace'
+  component.activateModeOnFlush = undefined
 
   if (component.symbol === SUSPENSE_COMPONENT_SYMBOL) {
     clearComponentSubscriptions(container, componentId)
     const oldDescendants = collectDescendantIds(container, componentId)
+    const suspenseSpeculativeEffectCleanupSlot = component.reuseProjectionSlotDomOnActivate
+      ? createCleanupSlot()
+      : null
+    if (!suspenseSpeculativeEffectCleanupSlot) {
+      resetComponentRenderEffects(component)
+    }
     const frame = createFrame(container, component, 'client', {
+      effectCleanupSlot: suspenseSpeculativeEffectCleanupSlot ?? component.renderEffectCleanupSlot,
       reuseExistingDom: component.reuseExistingDomOnActivate ?? true,
+      reuseProjectionSlotDom: component.reuseProjectionSlotDomOnActivate ?? false,
     })
     component.reuseExistingDomOnActivate = true
+    component.reuseProjectionSlotDomOnActivate = false
+    const parentRoot = component.start.parentNode
     const focusSnapshot = captureBoundaryFocus(container.doc!, component.start, component.end)
-    const nodes = pushContainer(container, () =>
-      pushFrame(frame, () =>
-        renderSuspenseContentToNodes(component.props as SuspenseProps, container, componentId),
-      ),
-    )
+    let nodes: Node[]
+    try {
+      nodes = pushContainer(container, () =>
+        pushFrame(frame, () =>
+          renderSuspenseContentToNodes(component.props as SuspenseProps, container, componentId),
+        ),
+      )
+    } catch (error) {
+      disposeCleanupSlot(suspenseSpeculativeEffectCleanupSlot)
+      throw error
+    }
+    disposeCleanupSlot(suspenseSpeculativeEffectCleanupSlot)
     pruneComponentVisibles(container, component, frame.visibleCursor)
     pruneComponentWatches(container, component, frame.watchCursor)
-    replaceBoundaryContents(component.start, component.end, nodes, {
-      preserveProjectionSlots: frame.projectionState.reuseExistingDom,
-    })
+    const patched =
+      activateMode === 'patch' &&
+      tryPatchBoundaryContentsInPlace(component.start, component.end, nodes)
+    const preservedDescendants = expandComponentIdsToDescendants(
+      container,
+      patched
+        ? frame.projectionState.reuseExistingDom
+          ? collectPreservedProjectionSlotComponentIds(container, component.start, component.end)
+          : new Set<string>()
+        : replaceBoundaryContents(component.start, component.end, nodes, {
+            preserveProjectionSlots: frame.projectionState.reuseExistingDom,
+          }),
+    )
     restoreBoundaryFocus(container.doc!, component.start, component.end, focusSnapshot)
+    if (parentRoot) {
+      bindComponentBoundaries(container, parentRoot)
+      restoreSignalRefs(container, parentRoot)
+    }
     component.active = true
-    pruneRemovedComponents(container, componentId, frame.visitedDescendants)
+    const keptDescendants = new Set([
+      ...frame.visitedDescendants,
+      ...preservedDescendants,
+      ...collectMountedDescendantComponentIds(container, component),
+    ])
+    pruneRemovedComponents(container, componentId, keptDescendants)
     for (const descendantId of oldDescendants) {
-      if (frame.visitedDescendants.has(descendantId)) {
+      if (keptDescendants.has(descendantId)) {
         continue
       }
       clearComponentSubscriptions(container, descendantId)
     }
-    return
+    syncEffectOnlyLocalSignalPreference(component)
+    return patched
   }
 
   clearComponentSubscriptions(container, componentId)
   const oldDescendants = collectDescendantIds(container, componentId)
   const scope = materializeScope(container, component.scopeId)
   await preloadResumableValue(container, scope)
-  const module = await loadSymbol(container, component.symbol)
+  const module = await loadSymbol(container, activateSymbol)
+  const rawProps =
+    component.rawProps && typeof component.rawProps === 'object' ? component.rawProps : null
+  if (rawProps) {
+    component.props = evaluateProps(rawProps)
+  }
+  const externalMeta = getExternalComponentMeta(module.default)
+  if (externalMeta && component.props && typeof component.props === 'object') {
+    component.external = {
+      kind: externalMeta.kind,
+      slots: [...externalMeta.slots],
+    }
+    const focusSnapshot = captureBoundaryFocus(container.doc!, component.start, component.end)
+    let host = getExternalRoot(component)
+    if (!host) {
+      replaceBoundaryContents(component.start, component.end, [
+        createExternalRootNode(container, component.id, externalMeta.kind),
+      ])
+      host = getExternalRoot(component)
+    }
+    if (!host) {
+      throw new Error(`Missing external root host for component ${component.id}.`)
+    }
+    host.setAttribute('data-e-external-snapshot', component.id)
+    ;(
+      globalThis as typeof globalThis & {
+        __eclipsaExternalSlotSnapshotMap?: Map<
+          HTMLElement,
+          {
+            dom: Map<string, Node[]> | null | undefined
+            html: Map<string, string> | null | undefined
+          }
+        >
+      }
+    ).__eclipsaExternalSlotSnapshotMap ??= new Map()
+    ;(
+      globalThis as typeof globalThis & {
+        __eclipsaExternalSlotSnapshotMap?: Map<
+          HTMLElement,
+          {
+            dom: Map<string, Node[]> | null | undefined
+            html: Map<string, string> | null | undefined
+          }
+        >
+      }
+    ).__eclipsaExternalSlotSnapshotMap!.set(host, {
+      dom: component.externalSlotDom,
+      html: component.externalSlotHtml,
+    })
+    restoreExternalSlotDom(component, host)
+    await withClientContainer(container, async () => {
+      await syncExternalComponentInstance(
+        component,
+        externalMeta,
+        component.props as Record<string, unknown>,
+        host!,
+      )
+    })
+    rebindExternalHost(container, host)
+    scheduleExternalHostRebind(container, host)
+    restoreBoundaryFocus(container.doc!, component.start, component.end, focusSnapshot)
+    component.active = true
+    scheduleVisibleCallbacksCheck(container)
+    return false
+  }
   await preloadComponentProps(
     container,
     {
@@ -4194,52 +6035,102 @@ const activateComponent = async (container: RuntimeContainer, componentId: strin
     },
     component.props,
   )
+  const speculativeEffectCleanupSlot = component.reuseProjectionSlotDomOnActivate
+    ? createCleanupSlot()
+    : null
+  if (!speculativeEffectCleanupSlot) {
+    resetComponentRenderEffects(component)
+  }
   const frame = createFrame(container, component, 'client', {
+    effectCleanupSlot: speculativeEffectCleanupSlot ?? component.renderEffectCleanupSlot,
     reuseExistingDom: component.reuseExistingDomOnActivate ?? true,
+    reuseProjectionSlotDom: component.reuseProjectionSlotDomOnActivate ?? false,
   })
   component.reuseExistingDomOnActivate = true
+  component.reuseProjectionSlotDomOnActivate = false
+  const parentRoot = component.start.parentNode
   const focusSnapshot = captureBoundaryFocus(container.doc!, component.start, component.end)
-  const nodes = pushContainer(container, () =>
-    pushFrame(frame, () => {
-      const renderProps =
-        component.props && typeof component.props === 'object'
+  let nodes: Node[]
+  try {
+    nodes = pushContainer(container, () =>
+      pushFrame(frame, () => {
+        const renderProps = rawProps
           ? createRenderProps(
               component.id,
               {
                 captures: () => [],
                 projectionSlots: component.projectionSlots ?? undefined,
-                symbol: component.symbol,
+                symbol: activateSymbol,
               },
-              component.props as Record<string, unknown>,
+              rawProps,
             )
-          : component.props
-      const rendered = module.default(scope, renderProps)
-      return toMountedNodes(rendered, container)
-    }),
-  )
+          : component.props && typeof component.props === 'object'
+            ? createRenderProps(
+                component.id,
+                {
+                  captures: () => [],
+                  projectionSlots: component.projectionSlots ?? undefined,
+                  symbol: activateSymbol,
+                },
+                component.props as Record<string, unknown>,
+              )
+            : component.props
+        const rendered = module.default(scope, renderProps)
+        return toMountedNodes(rendered, container)
+      }),
+    )
+  } catch (error) {
+    disposeCleanupSlot(speculativeEffectCleanupSlot)
+    throw wrapGeneratedScopeReferenceError(error, {
+      componentId,
+      phase: 'rerendering',
+      symbolId: activateSymbol,
+    })
+  }
+  disposeCleanupSlot(speculativeEffectCleanupSlot)
   pruneComponentVisibles(container, component, frame.visibleCursor)
   pruneComponentWatches(container, component, frame.watchCursor)
-  replaceBoundaryContents(component.start, component.end, nodes, {
-    preserveProjectionSlots: frame.projectionState.reuseExistingDom,
-  })
+  const patched =
+    activateMode === 'patch' &&
+    tryPatchBoundaryContentsInPlace(component.start, component.end, nodes)
+  const preservedDescendants = expandComponentIdsToDescendants(
+    container,
+    patched
+      ? frame.projectionState.reuseExistingDom
+        ? collectPreservedProjectionSlotComponentIds(container, component.start, component.end)
+        : new Set<string>()
+      : replaceBoundaryContents(component.start, component.end, nodes, {
+          preserveProjectionSlots: frame.projectionState.reuseExistingDom,
+        }),
+  )
   if (component.start.parentNode && 'querySelectorAll' in component.start.parentNode) {
     bindRouterLinks(container, component.start.parentNode as ParentNode)
   }
   restoreBoundaryFocus(container.doc!, component.start, component.end, focusSnapshot)
+  if (parentRoot) {
+    bindComponentBoundaries(container, parentRoot)
+    restoreSignalRefs(container, parentRoot)
+  }
 
   component.active = true
 
-  pruneRemovedComponents(container, componentId, frame.visitedDescendants)
+  const keptDescendants = new Set([
+    ...frame.visitedDescendants,
+    ...preservedDescendants,
+    ...collectMountedDescendantComponentIds(container, component),
+  ])
+  pruneRemovedComponents(container, componentId, keptDescendants)
 
   for (const descendantId of oldDescendants) {
-    if (frame.visitedDescendants.has(descendantId)) {
+    if (keptDescendants.has(descendantId)) {
       continue
     }
     clearComponentSubscriptions(container, descendantId)
   }
-  clearComponentSubscriptions(container, componentId)
   scheduleMountCallbacks(container, component, frame.mountCallbacks)
   scheduleVisibleCallbacksCheck(container)
+  syncEffectOnlyLocalSignalPreference(component)
+  return patched
 }
 
 const sortDirtyComponents = (ids: Iterable<string>) =>
@@ -4250,6 +6141,23 @@ const parseSymbolIdFromUrl = (url: string) => {
   return parsed.searchParams.get('eclipsa-symbol')
 }
 
+export const resolveResumeHmrBoundarySymbols = (payload: ResumeHmrUpdatePayload) => {
+  const symbolIds = new Set([...payload.rerenderComponentSymbols, ...payload.rerenderOwnerSymbols])
+
+  for (const symbolId of symbolIds) {
+    const replacementUrl = payload.symbolUrlReplacements[symbolId]
+    if (!replacementUrl) {
+      continue
+    }
+    const replacementSymbolId = parseSymbolIdFromUrl(replacementUrl)
+    if (replacementSymbolId) {
+      symbolIds.add(replacementSymbolId)
+    }
+  }
+
+  return [...symbolIds]
+}
+
 const findNearestMountedBoundary = (container: RuntimeContainer, componentId: string) => {
   let currentId: string | null = componentId
   while (currentId && currentId !== ROOT_COMPONENT_ID) {
@@ -4298,6 +6206,52 @@ export const collectResumeHmrBoundaryIds = (
   return result
 }
 
+const rewriteSerializedSymbolReferenceToken = (
+  value: SerializedValue,
+  affectedIds: ReadonlySet<string>,
+  nextSymbolId: string,
+) => {
+  if (Array.isArray(value)) {
+    for (const entry of value) {
+      rewriteSerializedSymbolReferenceToken(entry, affectedIds, nextSymbolId)
+    }
+    return
+  }
+
+  if (!value || typeof value !== 'object' || !('__eclipsa_type' in value)) {
+    return
+  }
+
+  switch (value.__eclipsa_type) {
+    case 'object':
+      for (const [, entry] of value.entries) {
+        rewriteSerializedSymbolReferenceToken(entry, affectedIds, nextSymbolId)
+      }
+      return
+    case 'map':
+      for (const [key, entry] of value.entries) {
+        rewriteSerializedSymbolReferenceToken(key, affectedIds, nextSymbolId)
+        rewriteSerializedSymbolReferenceToken(entry, affectedIds, nextSymbolId)
+      }
+      return
+    case 'set':
+      for (const entry of value.entries) {
+        rewriteSerializedSymbolReferenceToken(entry, affectedIds, nextSymbolId)
+      }
+      return
+    case 'ref':
+      if (value.kind === 'symbol' && affectedIds.has(value.token)) {
+        value.token = nextSymbolId
+      }
+      if (value.data !== undefined) {
+        rewriteSerializedSymbolReferenceToken(value.data, affectedIds, nextSymbolId)
+      }
+      return
+    default:
+      return
+  }
+}
+
 export const applyResumeHmrSymbolReplacements = (
   container: RuntimeContainer,
   replacements: Record<string, string>,
@@ -4316,8 +6270,8 @@ export const applyResumeHmrSymbolReplacements = (
 
     for (const affectedId of affectedIds) {
       container.symbols.set(affectedId, url)
-      container.imports.delete(affectedId)
     }
+    invalidateRuntimeSymbolCaches(container, affectedIds)
 
     const nextSymbolId = parseSymbolIdFromUrl(url)
     if (!nextSymbolId) {
@@ -4342,9 +6296,29 @@ export const applyResumeHmrSymbolReplacements = (
       }
     }
 
+    for (const slots of container.scopes.values()) {
+      for (const slot of slots) {
+        rewriteSerializedSymbolReferenceToken(slot, affectedIds, nextSymbolId)
+      }
+    }
+
     container.symbols.set(nextSymbolId, url)
-    container.imports.delete(nextSymbolId)
+    invalidateRuntimeSymbolCaches(container, [nextSymbolId])
+  }
+}
+
+export const markResumeHmrBoundaryDirty = (container: RuntimeContainer, boundaryId: string) => {
+  const component = container.components.get(boundaryId)
+  if (!component) {
+    return false
   }
+  resetComponentVisibleStates(container, boundaryId)
+  component.active = false
+  component.activateModeOnFlush = 'replace'
+  component.reuseExistingDomOnActivate = false
+  component.reuseProjectionSlotDomOnActivate = false
+  container.dirty.add(boundaryId)
+  return true
 }
 
 export const applyResumeHmrUpdate = async (
@@ -4355,24 +6329,25 @@ export const applyResumeHmrUpdate = async (
     return 'reload' as const
   }
 
-  const boundaryIds = collectResumeHmrBoundaryIds(container, [
-    ...payload.rerenderComponentSymbols,
-    ...payload.rerenderOwnerSymbols,
-  ])
-  if (boundaryIds === null) {
+  const rerenderSymbolIds = resolveResumeHmrBoundarySymbols(payload)
+  const boundaryIds = collectResumeHmrBoundaryIds(container, rerenderSymbolIds)
+  if (boundaryIds === null || (rerenderSymbolIds.length > 0 && boundaryIds.length === 0)) {
     return 'reload' as const
   }
 
   applyResumeHmrSymbolReplacements(container, payload.symbolUrlReplacements)
+  const invalidatedSymbolIds = rerenderSymbolIds.filter((symbolId) => {
+    if (Object.hasOwn(payload.symbolUrlReplacements, symbolId)) {
+      return true
+    }
+    const currentUrl = container.symbols.get(symbolId)
+    return !!currentUrl && canBustRuntimeSymbolUrl(currentUrl)
+  })
+  bustRuntimeSymbolUrls(container, invalidatedSymbolIds, Date.now())
+  invalidateRuntimeSymbolCaches(container, invalidatedSymbolIds)
 
   for (const boundaryId of boundaryIds) {
-    const component = container.components.get(boundaryId)
-    if (!component) {
-      continue
-    }
-    resetComponentVisibleStates(container, boundaryId)
-    component.active = false
-    container.dirty.add(boundaryId)
+    markResumeHmrBoundaryDirty(container, boundaryId)
   }
 
   if (container.dirty.size > 0) {
@@ -4385,52 +6360,104 @@ export const applyResumeHmrUpdate = async (
 export const applyResumeHmrUpdateToRegisteredContainers = async (
   payload: ResumeHmrUpdatePayload,
 ) => {
+  const routeRefreshBustToken = Date.now()
+  let handled = false
   for (const container of getResumeContainers()) {
+    const refreshed = await refreshRouteContainerForHmr(
+      container,
+      payload.fileUrl,
+      routeRefreshBustToken,
+    )
+    if (refreshed) {
+      handled = true
+      continue
+    }
     const result = await applyResumeHmrUpdate(container, payload)
-    if (result === 'reload') {
-      return 'reload' as const
+    if (result === 'updated') {
+      handled = true
     }
   }
 
-  return 'updated' as const
+  return handled ? ('updated' as const) : ('reload' as const)
 }
 
 export const flushDirtyComponents = async (container: RuntimeContainer) => {
   const globalRecord = globalThis as Record<PropertyKey, unknown>
-  const existing = globalRecord[DIRTY_FLUSH_PROMISE_KEY]
-  if (existing instanceof Promise) {
-    await existing
-    return
-  }
+  while (true) {
+    const existing = globalRecord[DIRTY_FLUSH_PROMISE_KEY]
+    if (existing instanceof Promise) {
+      await existing
+      if (container.dirty.size === 0) {
+        return
+      }
+      continue
+    }
+
+    if (container.dirty.size === 0) {
+      return
+    }
+
+    const pendingFocus = capturePendingFocusRestore(container, container.doc?.activeElement)
 
-  const flushing = (async () => {
-    while (container.dirty.size > 0) {
-      const batch = sortDirtyComponents(container.dirty)
-      container.dirty.clear()
-      const rerendered = new Set<string>()
-      for (const componentId of batch) {
-        if (
-          [...rerendered].some(
+    const flushing = (async () => {
+      while (container.dirty.size > 0) {
+        const batch = sortDirtyComponents(container.dirty)
+        container.dirty.clear()
+        const patchedAncestors = new Set<string>()
+        const rerendered = new Set<string>()
+        for (const componentId of batch) {
+          const rerenderedParent = [...rerendered].find(
             (parentId) => componentId === parentId || isDescendantOf(parentId, componentId),
           )
-        ) {
-          continue
-        }
-        const component = container.components.get(componentId)
-        if (component?.active) {
-          continue
+          if (rerenderedParent) {
+            const component = container.components.get(componentId)
+            if (
+              patchedAncestors.has(rerenderedParent) &&
+              component?.start?.parentNode &&
+              component.end?.parentNode
+            ) {
+              component.active = false
+              container.dirty.add(componentId)
+            }
+            continue
+          }
+          const component = container.components.get(componentId)
+          if (component?.active) {
+            continue
+          }
+          const preservesProjectionSlotDom =
+            (component?.activateModeOnFlush ?? 'replace') === 'patch' &&
+            (component?.reuseProjectionSlotDomOnActivate ?? false)
+          const patched = await activateComponent(container, componentId)
+          rerendered.add(componentId)
+          if (preservesProjectionSlotDom && patched) {
+            patchedAncestors.add(componentId)
+          }
         }
-        await activateComponent(container, componentId)
-        rerendered.add(componentId)
+      }
+    })()
+
+    globalRecord[DIRTY_FLUSH_PROMISE_KEY] = flushing
+    try {
+      await flushing
+    } finally {
+      if (globalRecord[DIRTY_FLUSH_PROMISE_KEY] === flushing) {
+        delete globalRecord[DIRTY_FLUSH_PROMISE_KEY]
       }
     }
-  })()
 
-  globalRecord[DIRTY_FLUSH_PROMISE_KEY] = flushing
-  try {
-    await flushing
-  } finally {
-    delete globalRecord[DIRTY_FLUSH_PROMISE_KEY]
+    restorePendingFocus(container, pendingFocus)
+
+    if (container.dirty.size === 0) {
+      return
+    }
+  }
+}
+
+const waitForPendingDirtyFlush = async () => {
+  const existing = (globalThis as Record<PropertyKey, unknown>)[DIRTY_FLUSH_PROMISE_KEY]
+  if (existing instanceof Promise) {
+    await existing
   }
 }
 
@@ -4450,6 +6477,8 @@ export const beginSSRContainer = <T>(
     parentId: null,
     props: {},
     projectionSlots: null,
+    rawProps: null,
+    renderEffectCleanupSlot: createCleanupSlot(),
     scopeId: registerScope(container, []),
     signalIds: [],
     symbol: ROOT_COMPONENT_ID,
@@ -4472,12 +6501,18 @@ export const beginAsyncSSRContainer = async <T>(
   prepare?: (container: RuntimeContainer) => void | Promise<void>,
   options?: {
     asyncSignalSnapshotCache?: Map<string, unknown>
+    externalRenderCache?: RuntimeContainer['externalRenderCache']
   },
 ): Promise<{
   container: RuntimeContainer
   result: T
 }> => {
-  const container = createContainer(symbols, undefined, options?.asyncSignalSnapshotCache)
+  const container = createContainer(
+    symbols,
+    undefined,
+    options?.asyncSignalSnapshotCache,
+    options?.externalRenderCache,
+  )
   const rootComponent: ComponentState = {
     active: false,
     didMount: false,
@@ -4486,6 +6521,8 @@ export const beginAsyncSSRContainer = async <T>(
     parentId: null,
     props: {},
     projectionSlots: null,
+    rawProps: null,
+    renderEffectCleanupSlot: createCleanupSlot(),
     scopeId: registerScope(container, []),
     signalIds: [],
     symbol: ROOT_COMPONENT_ID,
@@ -4494,13 +6531,48 @@ export const beginAsyncSSRContainer = async <T>(
     watchCount: 0,
   }
 
-  const rootFrame = createFrame(container, rootComponent, 'ssr')
-  await prepare?.(container)
-  const result = pushContainer(container, () => pushFrame(rootFrame, render))
-  return {
-    container,
-    result,
+  const rootFrame = createFrame(container, rootComponent, 'ssr')
+  await prepare?.(container)
+  const result = pushContainer(container, () => pushFrame(rootFrame, render))
+  return {
+    container,
+    result,
+  }
+}
+
+export const createDetachedRuntimeContainer = () => createContainer({})
+
+export const createDetachedRuntimeComponent = (
+  container: RuntimeContainer,
+  id = `d${container.nextComponentId++}`,
+): ComponentState => getOrCreateComponentState(container, id, id, ROOT_COMPONENT_ID)
+
+export const runDetachedRuntimeComponent = <T>(
+  container: RuntimeContainer,
+  component: ComponentState,
+  render: () => T,
+): T => {
+  clearComponentSubscriptions(container, component.id)
+  const frame = createFrame(container, component, 'ssr')
+  return pushContainer(container, () => pushFrame(frame, render))
+}
+
+export const disposeDetachedRuntimeComponent = (
+  container: RuntimeContainer,
+  component: ComponentState,
+) => {
+  clearComponentSubscriptions(container, component.id)
+  disposeComponentMountCleanups(component)
+  pruneComponentVisibles(container, component, 0)
+  pruneComponentWatches(container, component, 0)
+  for (const signalId of component.signalIds) {
+    container.signals.delete(signalId)
+    container.asyncSignalStates.delete(signalId)
+    container.asyncSignalSnapshotCache.delete(signalId)
   }
+  container.scopes.delete(component.scopeId)
+  container.dirty.delete(component.id)
+  container.components.delete(component.id)
 }
 
 const createResumePayload = (
@@ -4512,6 +6584,13 @@ const createResumePayload = (
     ([id]) => !keepComponents || keepComponents.has(id),
   )
   const keepSignals = new Set(componentEntries.flatMap(([, component]) => component.signalIds))
+  if (keepComponents) {
+    for (const [id, record] of container.signals.entries()) {
+      if ([...record.subscribers].some((componentId) => keepComponents.has(componentId))) {
+        keepSignals.add(id)
+      }
+    }
+  }
 
   return {
     actions: Object.fromEntries(
@@ -4528,6 +6607,15 @@ const createResumePayload = (
       componentEntries.map(([id, component]) => [
         id,
         {
+          ...(component.external
+            ? {
+                external: {
+                  kind: component.external.kind,
+                  slots: [...component.external.slots],
+                },
+              }
+            : {}),
+          ...(component.optimizedRoot ? { optimizedRoot: true } : {}),
           props: serializeRuntimeValue(container, component.props),
           ...(component.projectionSlots
             ? { projectionSlots: { ...component.projectionSlots } }
@@ -4650,13 +6738,25 @@ export const mergeResumePayload = (container: RuntimeContainer, payload: ResumeP
     container.components.set(id, {
       active: false,
       didMount: false,
+      external: componentPayload.external
+        ? {
+            kind: componentPayload.external.kind,
+            slots: [...componentPayload.external.slots],
+          }
+        : undefined,
+      externalInstance: undefined,
+      externalMeta: null,
       id,
       mountCleanupSlots: [],
+      optimizedRoot: componentPayload.optimizedRoot === true,
       parentId: id.includes('.') ? id.slice(0, id.lastIndexOf('.')) : ROOT_COMPONENT_ID,
+      prefersEffectOnlyLocalSignalWrites: false,
       props: deserializeRuntimeValue(container, componentPayload.props),
       projectionSlots: componentPayload.projectionSlots
         ? { ...componentPayload.projectionSlots }
         : null,
+      rawProps: null,
+      renderEffectCleanupSlot: createCleanupSlot(),
       scopeId: componentPayload.scope,
       signalIds: [...componentPayload.signalIds],
       symbol: componentPayload.symbol,
@@ -4674,12 +6774,14 @@ export const mergeResumePayload = (container: RuntimeContainer, payload: ResumeP
     record.subscribers = new Set(subscribers)
   }
   container.nextSignalId = findNextNumericId(container.signals.keys(), 's')
+  container.nextAtomId = findNextNumericId(container.signals.keys(), 'a')
 
   for (const [id, watchPayload] of Object.entries(payload.watches)) {
     const watch = getOrCreateWatchState(container, id, watchPayload.componentId)
     watch.mode = watchPayload.mode
     watch.scopeId = watchPayload.scope
     watch.symbol = watchPayload.symbol
+    watch.resumed = true
     watch.track = null
     watch.run = null
     clearEffectSignals(watch.effect)
@@ -4775,7 +6877,24 @@ const getStreamState = (): StreamState => {
 }
 
 export const getStreamingResumeBootstrapScriptContent = () =>
-  '(()=>{const key="__eclipsa_stream";const state=window[key]??={pending:[]};state.enqueue=state.enqueue??function(chunk){this.pending.push(chunk);if(this.process){void this.process();}};})();'
+  `(()=>{const streamKey="${STREAM_STATE_KEY}";const stream=window[streamKey]??={pending:[]};stream.enqueue=stream.enqueue??function(chunk){this.pending.push(chunk);if(this.process){void this.process();}};const navKey="${PENDING_RESUME_LINK_KEY}";document.addEventListener("click",(event)=>{if(document.body?.getAttribute("data-e-resume")!=="paused")return;if(event.defaultPrevented||event.button!==0||event.metaKey||event.ctrlKey||event.shiftKey||event.altKey)return;let element=event.target instanceof Element?event.target:event.target instanceof Node?event.target.parentElement:null;while(element&&!(element instanceof HTMLAnchorElement)){element=element.parentElement;}if(!element||!element.hasAttribute("${ROUTE_LINK_ATTR}")||element.hasAttribute("download"))return;if(element.target&&element.target!=="_self")return;const href=element.getAttribute("href");if(!href)return;const url=new URL(href,window.location.href);if(url.origin!==window.location.origin)return;event.preventDefault();window[navKey]={href:url.href,replace:element.getAttribute("${ROUTE_REPLACE_ATTR}")==="true"};},{capture:true});})();`
+
+const takePendingResumeLinkNavigation = (): PendingResumeLinkNavigation | null => {
+  const globalRecord = globalThis as Record<PropertyKey, unknown>
+  const pending = globalRecord[PENDING_RESUME_LINK_KEY]
+  if (
+    !pending ||
+    typeof pending !== 'object' ||
+    typeof (pending as { href?: unknown }).href !== 'string'
+  ) {
+    return null
+  }
+  delete globalRecord[PENDING_RESUME_LINK_KEY]
+  return {
+    href: (pending as { href: string }).href,
+    replace: (pending as { replace?: unknown }).replace === true,
+  }
+}
 
 const installStreamedSuspenseController = (container: RuntimeContainer) => {
   const state = getStreamState()
@@ -4818,28 +6937,140 @@ export const createResumeContainer = (
   ensureRouterState(container, options?.routeManifest)
 
   mergeResumePayload(container, payload)
+  rememberManagedAttributesForNode(root as HTMLElement)
   bindComponentBoundaries(container, root as HTMLElement)
+  for (const component of container.components.values()) {
+    component.externalSlotHtml = captureExternalSlotHtml(component)
+    component.externalSlotDom = captureExternalSlotDom(component)
+  }
+  ;(
+    globalThis as typeof globalThis & {
+      __eclipsaExternalSlotSnapshotStore?: Record<
+        string,
+        {
+          dom: Map<string, Node[]> | null | undefined
+          html: Map<string, string> | null | undefined
+        }
+      >
+    }
+  ).__eclipsaExternalSlotSnapshotStore = Object.fromEntries(
+    [...container.components.values()]
+      .filter(
+        (component) =>
+          !!component.external && (component.externalSlotDom || component.externalSlotHtml),
+      )
+      .map((component) => [
+        component.id,
+        {
+          dom: component.externalSlotDom,
+          html: component.externalSlotHtml,
+        },
+      ]),
+  )
   restoreSignalRefs(container, root as HTMLElement)
 
   restoreRegisteredRpcHandles(container)
 
-  const router = ensureRouterState(container)
-  router.currentPath.value = normalizeRoutePath(doc.location.pathname)
-  router.isNavigating.value = false
+  ensureRouterState(container)
+  syncRouterLocationSilently(container, doc.location.href)
   scheduleVisibleCallbacksCheck(container)
 
   return container
 }
 
-export const restoreRegisteredRpcHandles = (container: RuntimeContainer) => {
-  withRuntimeContainer(container, () => {
-    for (const id of getRegisteredActionHookIds()) {
-      getRegisteredActionHook<() => unknown>(id)?.()
+const canRestoreResumedLocalSignalEffects = (
+  container: RuntimeContainer,
+  component: ComponentState,
+) =>
+  !!component.start &&
+  !!component.end &&
+  !component.active &&
+  !component.external &&
+  component.signalIds.length > 0 &&
+  (component.symbol === SUSPENSE_COMPONENT_SYMBOL ||
+    container.imports.has(component.symbol) ||
+    container.symbols.has(component.symbol))
+
+export const restoreResumedLocalSignalEffects = async (container: RuntimeContainer) => {
+  let queued = false
+  const restoredIds: string[] = []
+
+  for (const componentId of sortDirtyComponents(
+    [...container.components.values()]
+      .filter((component) => canRestoreResumedLocalSignalEffects(container, component))
+      .map((component) => component.id),
+  )) {
+    const component = container.components.get(componentId)
+    if (!component || component.active) {
+      continue
     }
-    for (const id of getRegisteredLoaderHookIds()) {
-      getRegisteredLoaderHook<() => unknown>(id)?.()
+    component.active = false
+    component.activateModeOnFlush = 'replace'
+    component.reuseExistingDomOnActivate = false
+    component.reuseProjectionSlotDomOnActivate = false
+    container.dirty.add(component.id)
+    restoredIds.push(component.id)
+    queued = true
+  }
+
+  if (queued) {
+    await flushDirtyComponents(container)
+  }
+
+  for (const componentId of restoredIds) {
+    const component = container.components.get(componentId)
+    if (!component?.active) {
+      continue
     }
-  })
+    syncEffectOnlyLocalSignalPreference(component)
+  }
+}
+
+export const restoreResumedExternalComponents = async (container: RuntimeContainer) => {
+  const externalComponents = sortDirtyComponents(
+    [...container.components.values()]
+      .filter(
+        (component) =>
+          !!component.external &&
+          !!component.start &&
+          !!component.end &&
+          !component.active &&
+          !component.didMount &&
+          container.symbols.has(component.symbol),
+      )
+      .map((component) => component.id),
+  )
+
+  for (const componentId of externalComponents) {
+    await activateComponent(container, componentId)
+  }
+}
+
+export const restoreRegisteredRpcHandles = (container: RuntimeContainer) => {
+  const hadWindow = 'window' in globalThis && globalThis.window !== undefined
+  const injectedWindow =
+    !hadWindow && container.doc?.defaultView
+      ? (container.doc.defaultView as Window & typeof globalThis)
+      : null
+
+  if (injectedWindow) {
+    ;(globalThis as { window?: Window & typeof globalThis }).window = injectedWindow
+  }
+
+  try {
+    withRuntimeContainer(container, () => {
+      for (const id of getRegisteredActionHookIds()) {
+        getRegisteredActionHook<() => unknown>(id)?.()
+      }
+      for (const id of getRegisteredLoaderHookIds()) {
+        getRegisteredLoaderHook<() => unknown>(id)?.()
+      }
+    })
+  } finally {
+    if (injectedWindow) {
+      delete (globalThis as { window?: Window & typeof globalThis }).window
+    }
+  }
 }
 
 export const primeRouteModules = async (container: RuntimeContainer) => {
@@ -4848,12 +7079,7 @@ export const primeRouteModules = async (container: RuntimeContainer) => {
   if (currentRoute) {
     router.currentRoute = currentRoute
     if (container.doc) {
-      applyRouteMetadata(
-        container.doc,
-        currentRoute,
-        new URL(container.doc.location.href),
-        router.defaultTitle,
-      )
+      applyCurrentRouteMetadata(container, currentRoute, new URL(container.doc.location.href))
     }
   }
 }
@@ -4900,6 +7126,51 @@ const findInteractiveTarget = (target: EventTarget | null, eventName: string): E
   return null
 }
 
+const INTERACTIVE_PREFETCH_EVENT_NAMES = [
+  'click',
+  'input',
+  'change',
+  'submit',
+  'keydown',
+  'compositionstart',
+  'compositionend',
+] as const
+const INTERACTIVE_PREFETCH_SELECTOR = INTERACTIVE_PREFETCH_EVENT_NAMES.map(
+  (eventName) => `[data-e-on${eventName}]`,
+).join(', ')
+
+const prefetchElementSymbols = (
+  container: RuntimeContainer,
+  element: Element,
+  eventNames: readonly string[],
+) => {
+  for (const eventName of eventNames) {
+    const binding = element.getAttribute(`data-e-on${eventName}`)
+    if (!binding) {
+      continue
+    }
+    const { symbolId } = parseBinding(binding)
+    void loadSymbol(container, symbolId).catch(() => {})
+  }
+}
+
+const prefetchInteractiveTargetSymbols = (
+  container: RuntimeContainer,
+  target: EventTarget | null,
+  eventNames: readonly string[],
+) => {
+  let element = isElementNode(target)
+    ? target
+    : target instanceof Node
+      ? target.parentElement
+      : null
+
+  while (element) {
+    prefetchElementSymbols(container, element, eventNames)
+    element = element.parentElement
+  }
+}
+
 const getPendingLinkNavigationForLink = (
   container: RuntimeContainer,
   event: Event,
@@ -4955,6 +7226,23 @@ const getLinkPrefetchMode = (link: HTMLAnchorElement): LinkPrefetchMode => {
   return 'intent'
 }
 
+const findRouteLinkTarget = (target: EventTarget | null) => {
+  let element = isElementNode(target)
+    ? target
+    : target instanceof Node
+      ? target.parentElement
+      : null
+
+  while (element) {
+    if (isHTMLAnchorElementNode(element) && element.hasAttribute(ROUTE_LINK_ATTR)) {
+      return element
+    }
+    element = element.parentElement
+  }
+
+  return null
+}
+
 const bindRouterLinkPrefetch = (container: RuntimeContainer, link: HTMLAnchorElement) => {
   const boundLink = link as HTMLAnchorElement & {
     [ROUTER_LINK_PREFETCH_BOUND_KEY]?: true
@@ -4977,12 +7265,22 @@ const bindRouterLinkPrefetch = (container: RuntimeContainer, link: HTMLAnchorEle
     void prefetchRoute(container, href)
   }
 
+  const runPointerIntentPrefetch = (event: Event) => {
+    if (event instanceof MouseEvent && event.button !== 0) {
+      return
+    }
+    runPrefetch()
+  }
+
   if (mode === 'hover' || mode === 'intent') {
     link.addEventListener('mouseenter', runPrefetch)
   }
   if (mode === 'focus' || mode === 'intent') {
     link.addEventListener('focus', runPrefetch)
   }
+  if (mode === 'intent') {
+    link.addEventListener('pointerdown', runPointerIntentPrefetch)
+  }
 }
 
 const bindRouterLink = (container: RuntimeContainer, link: HTMLAnchorElement) => {
@@ -5016,6 +7314,36 @@ const bindRouterLinks = (container: RuntimeContainer, root: ParentNode) => {
   }
 }
 
+export const installResumeLinkListeners = (container: RuntimeContainer) => {
+  if (!container.doc) {
+    return
+  }
+  bindRouterLinks(container, container.doc)
+  const onRouteClick = (event: Event) => {
+    const link = findRouteLinkTarget(event.target)
+    if (!link) {
+      return
+    }
+    const pendingLink = getPendingLinkNavigationForLink(container, event, link)
+    if (!pendingLink || pendingLink.state.userPrevented) {
+      return
+    }
+    void navigateContainer(container, pendingLink.href, {
+      mode: pendingLink.replace ? 'replace' : 'push',
+    })
+  }
+  container.doc.addEventListener('click', onRouteClick)
+  const pending = takePendingResumeLinkNavigation()
+  if (pending) {
+    void navigateContainer(container, pending.href, {
+      mode: pending.replace ? 'replace' : 'push',
+    })
+  }
+  return () => {
+    container.doc?.removeEventListener('click', onRouteClick)
+  }
+}
+
 const parseBinding = (value: string): { scopeId: string; symbolId: string } => {
   const separatorIndex = value.indexOf(':')
   if (separatorIndex < 0) {
@@ -5030,13 +7358,68 @@ const parseBinding = (value: string): { scopeId: string; symbolId: string } => {
 const withClientContainer = async <T>(container: RuntimeContainer, fn: () => Promise<T> | T) =>
   pushContainer(container, () => Promise.resolve(fn()))
 
-const createDelegatedEvent = (event: Event, currentTarget: Element) =>
-  Object.create(event, {
-    currentTarget: {
-      value: currentTarget,
+export const createDelegatedEvent = (event: Event, currentTarget: Element) =>
+  new Proxy(event, {
+    get(target, property) {
+      if (property === 'currentTarget') {
+        return currentTarget
+      }
+      const value = Reflect.get(target, property, target)
+      return typeof value === 'function' ? value.bind(target) : value
     },
   }) as Event
 
+const readBoundElementValue = (
+  element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
+  currentValue: unknown,
+) => {
+  if (
+    isHTMLInputElementNode(element) &&
+    typeof currentValue === 'number' &&
+    (element.type === 'number' || element.type === 'range') &&
+    !Number.isNaN(element.valueAsNumber)
+  ) {
+    return element.valueAsNumber
+  }
+
+  return element.value
+}
+
+export const syncBoundElementSignal = (container: RuntimeContainer, target: EventTarget | null) => {
+  if (
+    !isHTMLInputElementNode(target) &&
+    !isHTMLSelectElementNode(target) &&
+    !isHTMLTextAreaElementNode(target)
+  ) {
+    return false
+  }
+
+  let didSync = false
+  const valueSignalId = target.getAttribute(BIND_VALUE_ATTR)
+  if (valueSignalId) {
+    const record = container.signals.get(valueSignalId)
+    if (record) {
+      const nextValue = readBoundElementValue(target, record.value)
+      writeSignalValue(container, record, nextValue)
+      didSync = true
+    }
+  }
+
+  if (isHTMLInputElementNode(target)) {
+    const checkedSignalId = target.getAttribute(BIND_CHECKED_ATTR)
+    if (checkedSignalId) {
+      const record = container.signals.get(checkedSignalId)
+      if (record) {
+        const nextChecked = target.checked
+        writeSignalValue(container, record, nextChecked)
+        didSync = true
+      }
+    }
+  }
+
+  return didSync
+}
+
 export const createClientLazyListener = (
   descriptor: EventDescriptor | LazyMeta,
   currentTarget: Element,
@@ -5048,9 +7431,16 @@ export const createClientLazyListener = (
 
   return async (event: Event) => {
     const module = await loadSymbol(container, descriptor.symbol)
-    await withClientContainer(container, async () => {
-      await module.default(descriptor.captures(), createDelegatedEvent(event, currentTarget))
-    })
+    try {
+      await withClientContainer(container, async () => {
+        await module.default(descriptor.captures(), createDelegatedEvent(event, currentTarget))
+      })
+    } catch (error) {
+      throw wrapGeneratedScopeReferenceError(error, {
+        phase: 'running a lazy event handler for',
+        symbolId: descriptor.symbol,
+      })
+    }
     await flushDirtyComponents(container)
   }
 }
@@ -5060,27 +7450,46 @@ export const dispatchResumeEvent = async (container: RuntimeContainer, event: Ev
   if (!interactiveTarget) {
     return
   }
-  const pendingFocus = capturePendingFocusRestore(container, event.target)
 
   const binding = interactiveTarget.getAttribute(`data-e-on${event.type}`)
   if (!binding) {
     return
   }
+  const pendingFocus = capturePendingFocusRestore(container, event.target)
 
   const { scopeId, symbolId } = parseBinding(binding)
-  const module = await loadSymbol(container, symbolId)
-  await withClientContainer(container, async () => {
-    await module.default(
-      materializeScope(container, scopeId),
-      createDelegatedEvent(event, interactiveTarget),
-    )
-  })
+  const module =
+    getResolvedRuntimeSymbols(container).get(symbolId) ?? (await loadSymbol(container, symbolId))
+  const scope = materializeScope(container, scopeId)
+  try {
+    await withClientContainer(container, async () => {
+      await module.default(scope, createDelegatedEvent(event, interactiveTarget))
+    })
+  } catch (error) {
+    throw wrapGeneratedScopeReferenceError(error, {
+      phase: 'running a resumable event handler for',
+      symbolId,
+    })
+  }
   await flushDirtyComponents(container)
   restorePendingFocus(container, pendingFocus)
 }
 
-const dispatchDocumentEvent = async (container: RuntimeContainer, event: Event) => {
+export const dispatchDocumentEvent = async (container: RuntimeContainer, event: Event) => {
+  if (container.resumeReadyPromise) {
+    await container.resumeReadyPromise
+  }
+  const didSyncBoundSignal =
+    (event.type === 'input' || event.type === 'change') &&
+    syncBoundElementSignal(container, event.target)
+  const pendingFocus = didSyncBoundSignal
+    ? capturePendingFocusRestore(container, event.target)
+    : null
   await dispatchResumeEvent(container, event)
+  if (didSyncBoundSignal) {
+    await flushDirtyComponents(container)
+    restorePendingFocus(container, pendingFocus)
+  }
   if (event.type === 'submit' && !event.defaultPrevented && isHTMLFormElementNode(event.target)) {
     const actionId = event.target.getAttribute(ACTION_FORM_ATTR)
     if (actionId) {
@@ -5105,18 +7514,60 @@ const dispatchDocumentEvent = async (container: RuntimeContainer, event: Event)
   }
 }
 
+const enqueueDocumentEvent = (container: RuntimeContainer, event: Event) => {
+  if (!container.eventDispatchPromise) {
+    const running = dispatchDocumentEvent(container, event)
+    const tracked = running.finally(() => {
+      if (container.eventDispatchPromise === tracked) {
+        container.eventDispatchPromise = null
+      }
+    })
+    container.eventDispatchPromise = tracked
+    return tracked
+  }
+
+  const previous = container.eventDispatchPromise ?? Promise.resolve()
+  const queued = previous
+    .catch(() => {})
+    .then(async () => {
+      await dispatchDocumentEvent(container, event)
+    })
+  container.eventDispatchPromise = queued.finally(() => {
+    if (container.eventDispatchPromise === queued) {
+      container.eventDispatchPromise = null
+    }
+  })
+  return container.eventDispatchPromise
+}
+
 export const installResumeListeners = (container: RuntimeContainer) => {
   const doc = container.doc
   if (!doc) {
     return () => {}
   }
-  bindRouterLinks(container, doc)
+  const cleanupRouteLinks = installResumeLinkListeners(container)
   installStreamedSuspenseController(container)
   ensureVisibilityListeners(container)
   scheduleVisibleCallbacksCheck(container)
-  const listeners = ['click', 'input', 'change', 'submit'] as const
+  const listeners = [
+    'cancel',
+    'click',
+    'input',
+    'change',
+    'submit',
+    'keydown',
+    'compositionstart',
+    'compositionend',
+  ] as const
   const onEvent = (event: Event) => {
-    void dispatchDocumentEvent(container, event)
+    void enqueueDocumentEvent(container, event)
+  }
+  const onIntent = (event: Event) => {
+    if (event.type === 'pointerdown') {
+      prefetchInteractiveTargetSymbols(container, event.target, ['click', 'submit'])
+      return
+    }
+    prefetchInteractiveTargetSymbols(container, event.target, INTERACTIVE_PREFETCH_EVENT_NAMES)
   }
   const onPopState = () => {
     void navigateContainer(container, doc.location.href, {
@@ -5127,13 +7578,18 @@ export const installResumeListeners = (container: RuntimeContainer) => {
   for (const eventName of listeners) {
     doc.addEventListener(eventName, onEvent, true)
   }
+  doc.addEventListener('pointerdown', onIntent, true)
+  doc.addEventListener('focusin', onIntent, true)
   doc.defaultView?.addEventListener('popstate', onPopState)
 
   return () => {
     for (const eventName of listeners) {
       doc.removeEventListener(eventName, onEvent, true)
     }
+    doc.removeEventListener('pointerdown', onIntent, true)
+    doc.removeEventListener('focusin', onIntent, true)
     doc.defaultView?.removeEventListener('popstate', onPopState)
+    cleanupRouteLinks?.()
     container.visibilityListenersCleanup?.()
   }
 }
@@ -5141,6 +7597,33 @@ export const installResumeListeners = (container: RuntimeContainer) => {
 export const renderString = (inputElementLike: JSX.Element | JSX.Element[]) =>
   renderStringNode(inputElementLike)
 
+export const hasActiveRuntimeComponent = () => {
+  const frame = getCurrentFrame()
+  return !!frame && frame.component.id !== ROOT_COMPONENT_ID
+}
+
+export const getRuntimeContextValue = (
+  token: RuntimeContextToken,
+): {
+  found: boolean
+  value: unknown
+} => {
+  const stack = getContextValueStack()
+  for (let index = stack.length - 1; index >= 0; index -= 1) {
+    const entry = stack[index]
+    if (entry?.token === token) {
+      return {
+        found: true,
+        value: entry.value,
+      }
+    }
+  }
+  return {
+    found: false,
+    value: undefined,
+  }
+}
+
 export const createStandaloneRuntimeSignal = <T>(fallback: T): { value: T } => {
   const globalRecord = globalThis as Record<PropertyKey, unknown>
   const nextId = ((globalRecord[STANDALONE_SIGNAL_ID_KEY] as number | undefined) ?? 0) + 1
@@ -5165,13 +7648,38 @@ export const useRuntimeSignal = <T>(fallback: T): { value: T } => {
   return ensureSignalRecord(container, signalId, fallback).handle
 }
 
+export const useRuntimeAtom = <T>(atom: object, fallback: T): { value: T } => {
+  const container = getCurrentContainer()
+  const frame = getCurrentFrame()
+
+  if (!container || !frame || frame.component.id === ROOT_COMPONENT_ID) {
+    throw new Error('useAtom() can only be used while rendering a component.')
+  }
+
+  const signalIndex = frame.signalCursor++
+  const existingId = frame.component.signalIds[signalIndex]
+  const mappedId = container.atoms.get(atom)
+  const signalId = existingId ?? mappedId ?? `a${container.nextAtomId++}`
+  if (!existingId) {
+    frame.component.signalIds.push(signalId)
+  }
+  if (mappedId !== signalId) {
+    container.atoms.set(atom, signalId)
+  }
+  return ensureSignalRecord(container, signalId, fallback).handle
+}
+
 export const createDetachedRuntimeSignal = <T>(
   container: RuntimeContainer,
   id: string,
   fallback: T,
 ): { value: T } => ensureSignalRecord(container, id, fallback).handle
 
-export const getRuntimeSignalId = (value: unknown) => getSignalMeta(value)?.id ?? null
+export const getRuntimeComponentId = () => getCurrentFrame()?.component.id ?? null
+export const getRuntimeSignalId = (value: unknown) => {
+  const signalMeta = getSignalMeta(value)
+  return isWritableSignalMeta(signalMeta) ? signalMeta.id : null
+}
 
 export const useRuntimeNavigate = (): Navigate => {
   const container = getCurrentContainer()
@@ -5181,6 +7689,14 @@ export const useRuntimeNavigate = (): Navigate => {
   return ensureRouterState(container).navigate
 }
 
+export const useRuntimeLocation = (): RouteLocation => {
+  const container = getCurrentContainer()
+  if (!container) {
+    return createStandaloneLocation()
+  }
+  return ensureRouterState(container).location
+}
+
 export const useRuntimeRouteParams = (): RouteParams => {
   const frame = getCurrentFrame()
   if (frame?.component.props && typeof frame.component.props === 'object') {
@@ -5193,6 +7709,17 @@ export const useRuntimeRouteParams = (): RouteParams => {
   return container?.router?.currentRoute?.params ?? EMPTY_ROUTE_PARAMS
 }
 
+export const useRuntimeRouteError = (): unknown => {
+  const frame = getCurrentFrame()
+  if (frame?.component.props && typeof frame.component.props === 'object') {
+    const candidate = (frame.component.props as Record<string, unknown>)[ROUTE_ERROR_PROP]
+    if (candidate !== undefined) {
+      return candidate
+    }
+  }
+  return getCurrentContainer()?.router?.currentRoute?.error
+}
+
 export const notFound = (): never => {
   throw {
     __eclipsa_not_found__: true,
@@ -5206,15 +7733,45 @@ export const isRouteNotFoundError = (error: unknown) =>
   ((error as { __eclipsa_not_found__?: boolean }).__eclipsa_not_found__ === true ||
     (error as Record<PropertyKey, unknown>)[ROUTE_NOT_FOUND_KEY] === true)
 
-export const createEffect = (fn: () => void) => {
+export const createEffect = (fn: () => void, options?: EffectOptions) => {
+  const container = getCurrentContainer()
+  const frame = getCurrentFrame()
   const effect: ReactiveEffect = {
+    container,
     fn() {
-      collectTrackedDependencies(effect, fn)
+      runReactiveEffectInContainer(effect, () => {
+        const dependencies = options?.dependencies
+        if (!dependencies) {
+          collectTrackedDependencies(effect, fn)
+          return
+        }
+
+        collectTrackedDependencies(effect, () => {
+          trackWatchDependencies(dependencies, options?.errorLabel)
+        })
+
+        if (options?.untracked) {
+          runWithoutDependencyTracking(fn)
+          return
+        }
+
+        fn()
+      })
     },
     signals: new Set(),
   }
 
+  if (frame && frame.mode === 'client' && frame.component.id !== ROOT_COMPONENT_ID) {
+    frame.effectCleanupSlot.callbacks.push(() => {
+      clearEffectSignals(effect)
+    })
+  }
+
   effect.fn()
+
+  return () => {
+    clearEffectSignals(effect)
+  }
 }
 
 export const createOnCleanup = (fn: () => void) => {
@@ -5267,8 +7824,11 @@ export const createWatch = (fn: () => void, dependencies?: WatchDependency[]) =>
   if (!container || !frame || frame.component.id === ROOT_COMPONENT_ID || !watchMeta) {
     const cleanupSlot = createCleanupSlot()
     const effect: ReactiveEffect = {
+      container,
       fn() {
-        createLocalWatchRunner(effect, cleanupSlot, fn, dependencies)()
+        runReactiveEffectInContainer(effect, () => {
+          createLocalWatchRunner(effect, cleanupSlot, fn, dependencies)()
+        })
       },
       signals: new Set(),
     }
@@ -5284,6 +7844,16 @@ export const createWatch = (fn: () => void, dependencies?: WatchDependency[]) =>
   watch.symbol = watchMeta.symbol
   watch.track = dependencies ? () => trackWatchDependencies(dependencies) : null
   watch.run = createLocalWatchRunner(watch.effect, watch.cleanupSlot, fn, dependencies)
+  if (frame.mode === 'client' && watch.resumed) {
+    watch.resumed = false
+    if (dependencies) {
+      collectTrackedDependencies(watch.effect, () => {
+        trackWatchDependencies(dependencies)
+      })
+    }
+    return
+  }
+  watch.resumed = false
   watch.effect.fn()
 }
 
diff --git a/packages/eclipsa/core/runtime/constants.ts b/packages/eclipsa/core/runtime/constants.ts
new file mode 100644
index 0000000..822d12b
--- /dev/null
+++ b/packages/eclipsa/core/runtime/constants.ts
@@ -0,0 +1,46 @@
+import type { ExternalComponentDescriptor } from '../internal.ts'
+
+export const CONTAINER_STACK_KEY = Symbol.for('eclipsa.container-stack')
+export const CONTEXT_VALUE_STACK_KEY = Symbol.for('eclipsa.context-value-stack')
+export const FRAME_STACK_KEY = Symbol.for('eclipsa.frame-stack')
+export const DIRTY_FLUSH_PROMISE_KEY = Symbol.for('eclipsa.dirty-flush-promise')
+export const ASYNC_SIGNAL_SNAPSHOT_CACHE_KEY = Symbol.for('eclipsa.async-signal-snapshot-cache')
+export const STANDALONE_SIGNAL_ID_KEY = Symbol.for('eclipsa.standalone-signal-id')
+export const ACTION_FORM_ATTR = 'data-e-action-form'
+export const ROUTER_EVENT_STATE_KEY = Symbol.for('eclipsa.router-event-state')
+export const ROUTER_CURRENT_PATH_SIGNAL_ID = '$router:path'
+export const ROUTER_CURRENT_URL_SIGNAL_ID = '$router:url'
+export const ROUTER_IS_NAVIGATING_SIGNAL_ID = '$router:isNavigating'
+export const ROUTER_LINK_BOUND_KEY = Symbol.for('eclipsa.router-link-bound')
+export const ROUTER_LINK_PREFETCH_BOUND_KEY = Symbol.for('eclipsa.router-link-prefetch-bound')
+export const ROUTE_NOT_FOUND_KEY = Symbol.for('eclipsa.route-not-found')
+export const ROUTE_PARAMS_PROP = '__eclipsa_route_params'
+export const ROUTE_ERROR_PROP = '__eclipsa_route_error'
+export const ROUTE_SLOT_ROUTE_KEY = Symbol.for('eclipsa.route-slot-route')
+export const RESUME_CONTAINERS_KEY = Symbol.for('eclipsa.resume-containers')
+export const RESUME_STATE_ELEMENT_ID = 'eclipsa-resume'
+export const RESUME_FINAL_STATE_ELEMENT_ID = 'eclipsa-resume-final'
+export const SCOPED_STYLE_ATTR = 'data-e-scope'
+export const ROOT_COMPONENT_ID = '$root'
+export const SUSPENSE_COMPONENT_SYMBOL = '$suspense'
+export const ROUTE_SLOT_TYPE = 'route-slot'
+export const PROJECTION_SLOT_TYPE = 'projection-slot'
+export const CONTAINER_ID_KEY = Symbol.for('eclipsa.runtime-container-id')
+export const RENDER_COMPONENT_TYPE_KEY = Symbol.for('eclipsa.render-component-type')
+export const RENDER_REFERENCE_KIND = 'render'
+export const REF_SIGNAL_ATTR = 'data-e-ref'
+export const STREAM_STATE_KEY = '__eclipsa_stream'
+export const PENDING_RESUME_LINK_KEY = '__eclipsa_pending_route_link'
+export const BIND_VALUE_PROP = 'bind:value'
+export const BIND_CHECKED_PROP = 'bind:checked'
+export const BIND_VALUE_ATTR = 'data-e-bind-value'
+export const BIND_CHECKED_ATTR = 'data-e-bind-checked'
+export const CLIENT_INSERT_OWNER_SYMBOL = '$client-insert-root'
+export const CLIENT_INSERT_OWNER_ID_PREFIX = '$insert:'
+export const EXTERNAL_ROOT_ATTR = 'data-e-external-root'
+export const EXTERNAL_ROOT_COMPONENT_ATTR = 'data-e-external-component'
+export const EXTERNAL_ROOT_KIND_ATTR = 'data-e-external-kind'
+export const getExternalSlotTag = (_kind: ExternalComponentDescriptor['kind']) => 'e-slot-host'
+export const DOM_TEXT_NODE = 3
+export const DOM_COMMENT_NODE = 8
+export const DOM_SHOW_COMMENT = 0x80
diff --git a/packages/eclipsa/core/runtime/dom.ts b/packages/eclipsa/core/runtime/dom.ts
new file mode 100644
index 0000000..cadbe9b
--- /dev/null
+++ b/packages/eclipsa/core/runtime/dom.ts
@@ -0,0 +1,484 @@
+type DomConstructorName =
+  | 'Element'
+  | 'HTMLElement'
+  | 'HTMLInputElement'
+  | 'HTMLSelectElement'
+  | 'HTMLTextAreaElement'
+  | 'HTMLAnchorElement'
+  | 'HTMLFormElement'
+
+export interface FocusSnapshot {
+  path: number[]
+  selectionDirection?: 'backward' | 'forward' | 'none' | null
+  selectionEnd?: number | null
+  selectionStart?: number | null
+}
+
+export interface PendingFocusRestore {
+  snapshot: FocusSnapshot
+}
+
+const managedElementAttributes = new WeakMap<Element, Set<string>>()
+const insertMarkerNodeCounts = new WeakMap<Comment, number>()
+
+const getDomContexts = (value: unknown): Array<Window | typeof globalThis> => {
+  const contexts: Array<Window | typeof globalThis> = []
+  if (!value || (typeof value !== 'object' && typeof value !== 'function')) {
+    return contexts
+  }
+  if ('ownerDocument' in value) {
+    const ownerDocument = (value as { ownerDocument?: Document | null }).ownerDocument
+    if (ownerDocument?.defaultView) {
+      contexts.push(ownerDocument.defaultView)
+    }
+  }
+  if ('defaultView' in value) {
+    const defaultView = (value as { defaultView?: Window | null }).defaultView
+    if (defaultView) {
+      contexts.push(defaultView)
+    }
+  }
+  contexts.push(globalThis)
+  return contexts
+}
+
+const isDomInstance = <T>(value: unknown, name: DomConstructorName): value is T => {
+  for (const context of getDomContexts(value)) {
+    const ctor = (context as Record<DomConstructorName, unknown>)[name]
+    if (typeof ctor === 'function' && value instanceof ctor) {
+      return true
+    }
+  }
+  return false
+}
+
+export const hasOwnerDocument = (
+  value: unknown,
+): value is ParentNode & { ownerDocument: Document } =>
+  !!value &&
+  (typeof value === 'object' || typeof value === 'function') &&
+  'ownerDocument' in value &&
+  !!(value as { ownerDocument?: Document | null }).ownerDocument
+
+export const isElementNode = (value: unknown): value is Element =>
+  isDomInstance<Element>(value, 'Element') || isDomInstance<HTMLElement>(value, 'HTMLElement')
+
+export const isHTMLElementNode = (value: unknown): value is HTMLElement =>
+  isDomInstance<HTMLElement>(value, 'HTMLElement')
+
+export const isHTMLInputElementNode = (value: unknown): value is HTMLInputElement =>
+  isDomInstance<HTMLInputElement>(value, 'HTMLInputElement')
+
+export const isHTMLSelectElementNode = (value: unknown): value is HTMLSelectElement =>
+  isDomInstance<HTMLSelectElement>(value, 'HTMLSelectElement')
+
+export const isHTMLTextAreaElementNode = (value: unknown): value is HTMLTextAreaElement =>
+  isDomInstance<HTMLTextAreaElement>(value, 'HTMLTextAreaElement')
+
+export const isTextEntryElement = (
+  value: unknown,
+): value is HTMLInputElement | HTMLTextAreaElement =>
+  isHTMLInputElementNode(value) || isHTMLTextAreaElementNode(value)
+
+export const isHTMLAnchorElementNode = (value: unknown): value is HTMLAnchorElement =>
+  isDomInstance<HTMLAnchorElement>(value, 'HTMLAnchorElement')
+
+export const isHTMLFormElementNode = (value: unknown): value is HTMLFormElement =>
+  isDomInstance<HTMLFormElement>(value, 'HTMLFormElement')
+
+export const listNodeChildren = (
+  node: { childNodes?: Iterable<Node> | ArrayLike<Node> } | null | undefined,
+) => Array.from((node?.childNodes ?? []) as Iterable<Node> | ArrayLike<Node>)
+
+const getElementAttributeNames = (element: Element): string[] => {
+  const withGetAttributeNames = element as Element & { getAttributeNames?: () => string[] }
+  if (typeof withGetAttributeNames.getAttributeNames === 'function') {
+    return withGetAttributeNames.getAttributeNames.call(element)
+  }
+
+  const attributes = (
+    element as Element & {
+      attributes?: Map<string, string> | ArrayLike<Attr | { name?: string }>
+    }
+  ).attributes
+  if (attributes instanceof Map) {
+    return [...attributes.keys()]
+  }
+  if (attributes && typeof attributes.length === 'number') {
+    const names: string[] = []
+    for (let index = 0; index < attributes.length; index += 1) {
+      const attribute = attributes[index]
+      if (attribute && typeof attribute === 'object' && 'name' in attribute) {
+        const name = attribute.name
+        if (typeof name === 'string') {
+          names.push(name)
+        }
+      }
+    }
+    return names
+  }
+
+  return []
+}
+
+const hasElementAttribute = (element: Element, name: string): boolean | null => {
+  const withHasAttribute = element as Element & { hasAttribute?: (name: string) => boolean }
+  if (typeof withHasAttribute.hasAttribute === 'function') {
+    return withHasAttribute.hasAttribute.call(element, name)
+  }
+
+  const withGetAttribute = element as Element & { getAttribute?: (name: string) => string | null }
+  if (typeof withGetAttribute.getAttribute === 'function') {
+    return withGetAttribute.getAttribute.call(element, name) !== null
+  }
+
+  const attributes = (element as Element & { attributes?: Map<string, string> }).attributes
+  if (attributes instanceof Map) {
+    return attributes.has(name)
+  }
+
+  return null
+}
+
+const cloneManagedAttributeSnapshot = (element: Element) =>
+  new Set(getElementAttributeNames(element))
+
+export const replaceManagedAttributeSnapshot = (element: Element, names: Iterable<string>) => {
+  managedElementAttributes.set(element, new Set(names))
+}
+
+export const getManagedAttributeSnapshot = (element: Element) =>
+  managedElementAttributes.get(element) ?? null
+
+export const syncManagedAttributeSnapshot = (element: Element, name: string) => {
+  const snapshot = getManagedAttributeSnapshot(element) ?? new Set<string>()
+  const hasAttribute = hasElementAttribute(element, name)
+  if (hasAttribute === true) {
+    snapshot.add(name)
+  } else if (hasAttribute === false) {
+    snapshot.delete(name)
+  } else {
+    snapshot.add(name)
+  }
+  replaceManagedAttributeSnapshot(element, snapshot)
+}
+
+export const rememberManagedAttributesForNode = (node: Node | null | undefined) => {
+  if (!node) {
+    return
+  }
+
+  const visit = (current: Node) => {
+    if (isElementNode(current)) {
+      replaceManagedAttributeSnapshot(current, cloneManagedAttributeSnapshot(current))
+    }
+    for (const child of listNodeChildren(current)) {
+      visit(child)
+    }
+  }
+
+  visit(node)
+}
+
+export const rememberManagedAttributesForNodes = (nodes: Iterable<Node>) => {
+  for (const node of nodes) {
+    rememberManagedAttributesForNode(node)
+  }
+}
+
+export const rememberInsertMarkerRange = (
+  marker: Node | null | undefined,
+  nodes: Iterable<Node>,
+) => {
+  if (!(typeof Comment !== 'undefined' ? marker instanceof Comment : marker?.nodeType === 8)) {
+    return
+  }
+
+  let count = 0
+  for (const _node of nodes) {
+    count += 1
+  }
+  insertMarkerNodeCounts.set(marker as Comment, count)
+}
+
+export const getRememberedInsertMarkerNodeCount = (marker: Comment | null | undefined) =>
+  marker ? (insertMarkerNodeCounts.get(marker) ?? 0) : 0
+
+export const setRememberedInsertMarkerNodeCount = (marker: Comment, count: number) => {
+  insertMarkerNodeCounts.set(marker, count)
+}
+
+export const getBoundaryChildren = (start: Comment, end: Comment) => {
+  const nodes: Node[] = []
+  let cursor = start.nextSibling
+  while (cursor && cursor !== end) {
+    nodes.push(cursor)
+    cursor = cursor.nextSibling
+  }
+  return nodes
+}
+
+const getNodePath = (root: Node, target: Node): number[] | null => {
+  if (root === target) {
+    return []
+  }
+
+  const path: number[] = []
+  let cursor: Node | null = target
+  while (cursor && cursor !== root) {
+    const parent: Node | null = cursor.parentNode
+    if (!parent) {
+      return null
+    }
+    const index = Array.prototype.indexOf.call(parent.childNodes, cursor)
+    if (index < 0) {
+      return null
+    }
+    path.unshift(index)
+    cursor = parent
+  }
+
+  return cursor === root ? path : null
+}
+
+const getNodeByPath = (root: Node, path: number[]) => {
+  let cursor: Node | null = root
+  for (const index of path) {
+    const childNodes: NodeListOf<ChildNode> | Node[] | undefined = cursor
+      ? ((cursor.childNodes as NodeListOf<ChildNode>) ?? undefined)
+      : undefined
+    cursor =
+      (childNodes &&
+        ('item' in childNodes
+          ? (childNodes.item(index) as Node | null)
+          : ((childNodes as unknown as Node[])[index] ?? null))) ??
+      null
+    if (!cursor) {
+      return null
+    }
+  }
+  return cursor
+}
+
+const getElementPath = (root: Element, target: Element): number[] | null => {
+  if (root === target) {
+    return []
+  }
+
+  const path: number[] = []
+  let cursor: Element | null = target
+  while (cursor && cursor !== root) {
+    const parent: HTMLElement | null = cursor.parentElement
+    if (!parent) {
+      return null
+    }
+    const index = Array.prototype.indexOf.call(parent.children, cursor)
+    if (index < 0) {
+      return null
+    }
+    path.unshift(index)
+    cursor = parent
+  }
+
+  return cursor === root ? path : null
+}
+
+const getElementByPath = (root: Element, path: number[]) => {
+  let cursor: Element | null = root
+  for (const index of path) {
+    const children: HTMLCollection | Element[] | undefined = cursor
+      ? ((cursor.children as HTMLCollection) ?? undefined)
+      : undefined
+    cursor =
+      (children &&
+        ('item' in children
+          ? (children.item(index) as Element | null)
+          : ((children as unknown as Element[])[index] ?? null))) ??
+      null
+    if (!cursor) {
+      return null
+    }
+  }
+  return cursor
+}
+
+const restoreFocusTarget = (doc: Document, nextActive: HTMLElement, snapshot: FocusSnapshot) => {
+  const restore = () => {
+    if (!nextActive.isConnected) {
+      return false
+    }
+    nextActive.focus({ preventScroll: true })
+    if (
+      isTextEntryElement(nextActive) &&
+      snapshot.selectionStart !== null &&
+      snapshot.selectionStart !== undefined
+    ) {
+      nextActive.setSelectionRange(
+        snapshot.selectionStart,
+        snapshot.selectionEnd ?? snapshot.selectionStart,
+        snapshot.selectionDirection ?? undefined,
+      )
+    }
+    return doc.activeElement === nextActive
+  }
+
+  if (restore()) {
+    return
+  }
+
+  const win = doc.defaultView
+  if (!win) {
+    return
+  }
+
+  let remainingAttempts = 3
+  const retry = () => {
+    if (remainingAttempts <= 0) {
+      return
+    }
+    remainingAttempts--
+    const run = () => {
+      if (restore()) {
+        return
+      }
+      retry()
+    }
+
+    if (typeof win.requestAnimationFrame === 'function') {
+      win.requestAnimationFrame(() => run())
+      return
+    }
+    win.setTimeout(run, 16)
+  }
+
+  retry()
+}
+
+export const captureBoundaryFocus = (
+  doc: Document,
+  start: Comment,
+  end: Comment,
+): FocusSnapshot | null => {
+  const activeElement = doc.activeElement
+  if (!isHTMLElementNode(activeElement)) {
+    return null
+  }
+
+  const topLevelNodes = getBoundaryChildren(start, end)
+  for (let index = 0; index < topLevelNodes.length; index += 1) {
+    const candidate = topLevelNodes[index]
+    if (
+      candidate !== activeElement &&
+      (!isElementNode(candidate) || !candidate.contains(activeElement))
+    ) {
+      continue
+    }
+
+    const innerPath = getNodePath(candidate, activeElement)
+    if (!innerPath) {
+      continue
+    }
+
+    return {
+      path: [index, ...innerPath],
+      selectionDirection: isTextEntryElement(activeElement)
+        ? activeElement.selectionDirection
+        : null,
+      selectionEnd: isTextEntryElement(activeElement) ? activeElement.selectionEnd : null,
+      selectionStart: isTextEntryElement(activeElement) ? activeElement.selectionStart : null,
+    }
+  }
+
+  return null
+}
+
+export const restoreBoundaryFocus = (
+  doc: Document,
+  start: Comment,
+  end: Comment,
+  snapshot: FocusSnapshot | null,
+) => {
+  if (!snapshot) {
+    return
+  }
+
+  const [topLevelIndex, ...innerPath] = snapshot.path
+  const root = getBoundaryChildren(start, end)[topLevelIndex]
+  if (!root) {
+    return
+  }
+
+  const nextActive = innerPath.length > 0 ? getNodeByPath(root, innerPath) : root
+  if (!isHTMLElementNode(nextActive)) {
+    return
+  }
+
+  restoreFocusTarget(doc, nextActive, snapshot)
+}
+
+export const captureDocumentFocus = (
+  doc: Document,
+  focusSource?: EventTarget | null,
+): FocusSnapshot | null => {
+  const candidate = isHTMLElementNode(focusSource)
+    ? focusSource
+    : isHTMLElementNode(doc.activeElement)
+      ? doc.activeElement
+      : null
+  if (!candidate) {
+    return null
+  }
+
+  const path = getElementPath(doc.body, candidate)
+  if (!path) {
+    return null
+  }
+
+  return {
+    path,
+    selectionDirection: isTextEntryElement(candidate) ? candidate.selectionDirection : null,
+    selectionEnd: isTextEntryElement(candidate) ? candidate.selectionEnd : null,
+    selectionStart: isTextEntryElement(candidate) ? candidate.selectionStart : null,
+  }
+}
+
+export const shouldSkipPendingFocusRestore = (doc: Document, pending: PendingFocusRestore) => {
+  const activeElement = doc.activeElement
+  if (!isHTMLElementNode(activeElement)) {
+    return false
+  }
+  if (
+    activeElement === doc.body ||
+    !activeElement.isConnected ||
+    !doc.body.contains(activeElement)
+  ) {
+    return false
+  }
+
+  const activePath = getElementPath(doc.body, activeElement)
+  if (!activePath) {
+    return false
+  }
+
+  if (activePath.length !== pending.snapshot.path.length) {
+    return true
+  }
+
+  return activePath.some((index, position) => index !== pending.snapshot.path[position])
+}
+
+export const restorePendingFocus = (doc: Document, pending: PendingFocusRestore | null) => {
+  if (!pending) {
+    return
+  }
+  if (shouldSkipPendingFocusRestore(doc, pending)) {
+    return
+  }
+
+  const nextActive = getElementByPath(doc.body, pending.snapshot.path)
+  if (!isHTMLElementNode(nextActive)) {
+    return
+  }
+
+  restoreFocusTarget(doc, nextActive, pending.snapshot)
+}
diff --git a/packages/eclipsa/core/runtime/globals.ts b/packages/eclipsa/core/runtime/globals.ts
new file mode 100644
index 0000000..e3ed967
--- /dev/null
+++ b/packages/eclipsa/core/runtime/globals.ts
@@ -0,0 +1,93 @@
+import {
+  ASYNC_SIGNAL_SNAPSHOT_CACHE_KEY,
+  CONTAINER_STACK_KEY,
+  CONTEXT_VALUE_STACK_KEY,
+  FRAME_STACK_KEY,
+  RESUME_CONTAINERS_KEY,
+} from './constants.ts'
+import type { RenderFrame, RuntimeContainer, RuntimeContextValue } from './types.ts'
+
+export const getContainerStack = (): RuntimeContainer[] => {
+  const globalRecord = globalThis as Record<PropertyKey, unknown>
+  const existing = globalRecord[CONTAINER_STACK_KEY]
+  if (Array.isArray(existing)) {
+    return existing as RuntimeContainer[]
+  }
+  const created: RuntimeContainer[] = []
+  globalRecord[CONTAINER_STACK_KEY] = created
+  return created
+}
+
+export const getContextValueStack = (): RuntimeContextValue[] => {
+  const globalRecord = globalThis as Record<PropertyKey, unknown>
+  const existing = globalRecord[CONTEXT_VALUE_STACK_KEY]
+  if (Array.isArray(existing)) {
+    return existing as RuntimeContextValue[]
+  }
+  const created: RuntimeContextValue[] = []
+  globalRecord[CONTEXT_VALUE_STACK_KEY] = created
+  return created
+}
+
+export const getFrameStack = (): RenderFrame[] => {
+  const globalRecord = globalThis as Record<PropertyKey, unknown>
+  const existing = globalRecord[FRAME_STACK_KEY]
+  if (Array.isArray(existing)) {
+    return existing as RenderFrame[]
+  }
+  const created: RenderFrame[] = []
+  globalRecord[FRAME_STACK_KEY] = created
+  return created
+}
+
+export const getResumeContainers = () => {
+  const globalRecord = globalThis as Record<PropertyKey, unknown>
+  const existing = globalRecord[RESUME_CONTAINERS_KEY]
+  if (existing instanceof Set) {
+    return existing as Set<RuntimeContainer>
+  }
+  const created = new Set<RuntimeContainer>()
+  globalRecord[RESUME_CONTAINERS_KEY] = created
+  return created
+}
+
+export const getCurrentContainer = (): RuntimeContainer | null => {
+  const stack = getContainerStack()
+  return stack.length > 0 ? stack[stack.length - 1]! : null
+}
+
+const getAsyncSignalSnapshotCache = () => {
+  const globalRecord = globalThis as Record<PropertyKey, unknown>
+  const existing = globalRecord[ASYNC_SIGNAL_SNAPSHOT_CACHE_KEY]
+  if (existing instanceof Map) {
+    return existing as Map<string, unknown>
+  }
+  const created = new Map<string, unknown>()
+  globalRecord[ASYNC_SIGNAL_SNAPSHOT_CACHE_KEY] = created
+  return created
+}
+
+export const readAsyncSignalSnapshot = (id: string, container: RuntimeContainer | null) =>
+  container?.asyncSignalStates.get(id) ??
+  container?.asyncSignalSnapshotCache.get(id) ??
+  getAsyncSignalSnapshotCache().get(id)
+
+export const writeAsyncSignalSnapshot = (
+  id: string,
+  value: unknown,
+  container: RuntimeContainer | null,
+) => {
+  container?.asyncSignalStates.set(id, value)
+  container?.asyncSignalSnapshotCache.set(id, value)
+  if (!container) {
+    getAsyncSignalSnapshotCache().set(id, value)
+  }
+}
+
+export const clearAsyncSignalSnapshot = (id: string, container: RuntimeContainer | null) => {
+  container?.asyncSignalStates.delete(id)
+  container?.asyncSignalSnapshotCache.delete(id)
+  if (!container) {
+    getAsyncSignalSnapshotCache().delete(id)
+  }
+}
diff --git a/packages/eclipsa/core/runtime/markers.test.ts b/packages/eclipsa/core/runtime/markers.test.ts
new file mode 100644
index 0000000..bfb84a0
--- /dev/null
+++ b/packages/eclipsa/core/runtime/markers.test.ts
@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  createComponentBoundaryHtmlComment,
+  createComponentBoundaryMarker,
+  createComponentBoundaryPair,
+  createInsertMarker,
+  createKeyedRangeMarker,
+  createProjectionSlotMarker,
+  createProjectionSlotRangeKey,
+  didComponentBoundaryChange,
+  didComponentBoundaryPropsChange,
+  didComponentBoundarySymbolChange,
+  parseComponentBoundaryMarker,
+  parseInsertMarker,
+  parseKeyedRangeMarker,
+  parseProjectionSlotMarker,
+  setComponentBoundaryChangeFlags,
+} from './markers.ts'
+
+describe('runtime marker helpers', () => {
+  it('round-trips component boundary markers and html comments', () => {
+    expect(createComponentBoundaryMarker('c0', 'start')).toBe('ec:c:c0:start')
+    expect(createComponentBoundaryHtmlComment('c0', 'end')).toBe('<!--ec:c:c0:end-->')
+    expect(parseComponentBoundaryMarker('ec:c:c0:start')).toEqual({
+      id: 'c0',
+      kind: 'start',
+    })
+  })
+
+  it('round-trips projection slot, keyed range, and insert markers', () => {
+    expect(createProjectionSlotRangeKey('c0', 'children/main', 2)).toBe('c0:children%2Fmain:2')
+    expect(
+      parseProjectionSlotMarker(createProjectionSlotMarker('c0', 'children/main', 2, 'end')),
+    ).toEqual({
+      componentId: 'c0',
+      key: 'c0:children%2Fmain:2',
+      kind: 'end',
+      name: 'children/main',
+      occurrence: 2,
+    })
+    expect(parseKeyedRangeMarker(createKeyedRangeMarker('docs:sidebar', 'a/b', 'start'))).toEqual({
+      scope: 'docs:sidebar',
+      key: 'a/b',
+      kind: 'start',
+    })
+    expect(parseInsertMarker(createInsertMarker('42'))).toEqual({
+      key: '42',
+    })
+  })
+
+  it('tracks component boundary change flags on the start comment', () => {
+    const doc = {
+      createComment: (data: string) => ({ data }) as Comment,
+    } as Document
+    const { start } = createComponentBoundaryPair(doc, 'c1', {
+      propsChanged: true,
+      symbolChanged: false,
+    })
+
+    expect(didComponentBoundaryPropsChange(start)).toBe(true)
+    expect(didComponentBoundarySymbolChange(start)).toBe(false)
+    expect(didComponentBoundaryChange(start)).toBe(true)
+
+    setComponentBoundaryChangeFlags(start, {
+      propsChanged: false,
+      symbolChanged: true,
+    })
+
+    expect(didComponentBoundaryPropsChange(start)).toBe(false)
+    expect(didComponentBoundarySymbolChange(start)).toBe(true)
+    expect(didComponentBoundaryChange(start)).toBe(true)
+  })
+})
diff --git a/packages/eclipsa/core/runtime/markers.ts b/packages/eclipsa/core/runtime/markers.ts
new file mode 100644
index 0000000..7310c89
--- /dev/null
+++ b/packages/eclipsa/core/runtime/markers.ts
@@ -0,0 +1,170 @@
+export type MarkerKind = 'start' | 'end'
+
+export interface ComponentBoundaryMarker {
+  id: string
+  kind: MarkerKind
+}
+
+export interface ProjectionSlotMarker {
+  componentId: string
+  key: string
+  kind: MarkerKind
+  name: string
+  occurrence: number
+}
+
+export interface KeyedRangeMarker {
+  scope: string
+  key: string
+  kind: MarkerKind
+}
+
+export interface InsertMarker {
+  key: string
+}
+
+export const COMPONENT_BOUNDARY_PROPS_CHANGED = Symbol.for(
+  'eclipsa.component-boundary-props-changed',
+)
+export const COMPONENT_BOUNDARY_SYMBOL_CHANGED = Symbol.for(
+  'eclipsa.component-boundary-symbol-changed',
+)
+export const INSERT_MARKER_PREFIX = 'ec:i:'
+
+type ComponentBoundaryComment = Comment & {
+  [COMPONENT_BOUNDARY_PROPS_CHANGED]?: boolean
+  [COMPONENT_BOUNDARY_SYMBOL_CHANGED]?: boolean
+}
+
+const COMPONENT_BOUNDARY_MARKER_REGEX = /^ec:c:(.+):(start|end)$/
+const KEYED_RANGE_MARKER_REGEX = /^ec:k:([^:]+):([^:]+):(start|end)$/
+const PROJECTION_SLOT_MARKER_REGEX = /^ec:s:([^:]+):([^:]+):(\d+):(start|end)$/
+const INSERT_MARKER_REGEX = /^ec:i:(.+)$/
+
+const encodeProjectionSlotName = (value: string) => encodeURIComponent(value)
+const decodeProjectionSlotName = (value: string) => decodeURIComponent(value)
+const encodeKeyedRangeToken = (value: string | number | symbol) => encodeURIComponent(String(value))
+const decodeKeyedRangeToken = (value: string) => {
+  try {
+    return decodeURIComponent(value)
+  } catch {
+    return value
+  }
+}
+
+export const createComponentBoundaryMarker = (componentId: string, kind: MarkerKind) =>
+  `ec:c:${componentId}:${kind}`
+
+export const createComponentBoundaryHtmlComment = (componentId: string, kind: MarkerKind) =>
+  `<!--${createComponentBoundaryMarker(componentId, kind)}-->`
+
+export const setComponentBoundaryChangeFlags = (
+  start: Comment,
+  options?: {
+    propsChanged?: boolean
+    symbolChanged?: boolean
+  },
+) => {
+  ;(start as ComponentBoundaryComment)[COMPONENT_BOUNDARY_PROPS_CHANGED] =
+    options?.propsChanged === true
+  ;(start as ComponentBoundaryComment)[COMPONENT_BOUNDARY_SYMBOL_CHANGED] =
+    options?.symbolChanged === true
+}
+
+export const didComponentBoundaryPropsChange = (start: Comment) =>
+  Boolean((start as ComponentBoundaryComment)[COMPONENT_BOUNDARY_PROPS_CHANGED])
+
+export const didComponentBoundarySymbolChange = (start: Comment) =>
+  Boolean((start as ComponentBoundaryComment)[COMPONENT_BOUNDARY_SYMBOL_CHANGED])
+
+export const didComponentBoundaryChange = (start: Comment) =>
+  didComponentBoundaryPropsChange(start) || didComponentBoundarySymbolChange(start)
+
+export const createComponentBoundaryPair = (
+  doc: Document,
+  componentId: string,
+  options?: {
+    propsChanged?: boolean
+    symbolChanged?: boolean
+  },
+) => {
+  const start = doc.createComment(createComponentBoundaryMarker(componentId, 'start'))
+  const end = doc.createComment(createComponentBoundaryMarker(componentId, 'end'))
+  setComponentBoundaryChangeFlags(start, options)
+  return {
+    end,
+    start,
+  }
+}
+
+export const createProjectionSlotRangeKey = (
+  componentId: string,
+  name: string,
+  occurrence: number,
+) => `${componentId}:${encodeProjectionSlotName(name)}:${occurrence}`
+
+export const createProjectionSlotMarker = (
+  componentId: string,
+  name: string,
+  occurrence: number,
+  kind: MarkerKind,
+) => `ec:s:${createProjectionSlotRangeKey(componentId, name, occurrence)}:${kind}`
+
+export const createKeyedRangeMarker = (
+  scope: string,
+  value: string | number | symbol,
+  kind: MarkerKind,
+) => `ec:k:${encodeKeyedRangeToken(scope)}:${encodeKeyedRangeToken(value)}:${kind}`
+
+export const createInsertMarker = (key: string | number) => `${INSERT_MARKER_PREFIX}${key}`
+
+export const parseComponentBoundaryMarker = (value: string): ComponentBoundaryMarker | null => {
+  const matched = value.match(COMPONENT_BOUNDARY_MARKER_REGEX)
+  if (!matched) {
+    return null
+  }
+  return {
+    id: matched[1],
+    kind: matched[2] as MarkerKind,
+  }
+}
+
+export const parseProjectionSlotMarker = (value: string): ProjectionSlotMarker | null => {
+  const matched = value.match(PROJECTION_SLOT_MARKER_REGEX)
+  if (!matched) {
+    return null
+  }
+  return {
+    componentId: matched[1],
+    key: createProjectionSlotRangeKey(
+      matched[1],
+      decodeProjectionSlotName(matched[2]),
+      Number(matched[3]),
+    ),
+    kind: matched[4] as MarkerKind,
+    name: decodeProjectionSlotName(matched[2]),
+    occurrence: Number(matched[3]),
+  }
+}
+
+export const parseKeyedRangeMarker = (value: string): KeyedRangeMarker | null => {
+  const matched = value.match(KEYED_RANGE_MARKER_REGEX)
+  if (!matched) {
+    return null
+  }
+  return {
+    scope: decodeKeyedRangeToken(matched[1]),
+    key: decodeKeyedRangeToken(matched[2]),
+    kind: matched[3] as MarkerKind,
+  }
+}
+
+export const parseInsertMarker = (value: string): InsertMarker | null => {
+  const matched = value.match(INSERT_MARKER_REGEX)
+  if (!matched) {
+    return null
+  }
+  return {
+    key: matched[1],
+  }
+}
diff --git a/packages/eclipsa/core/runtime/routes.test.ts b/packages/eclipsa/core/runtime/routes.test.ts
new file mode 100644
index 0000000..ad806b5
--- /dev/null
+++ b/packages/eclipsa/core/runtime/routes.test.ts
@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest'
+import type { RouteManifest } from '../router-shared.ts'
+import { findSpecialManifestEntry, matchRouteManifest } from './routes.ts'
+
+describe('runtime route manifest helpers', () => {
+  it('decodes url-encoded segments before matching manifest entries', () => {
+    const manifest: RouteManifest = [
+      {
+        error: null,
+        hasMiddleware: false,
+        layouts: [],
+        loading: null,
+        notFound: null,
+        page: '/entries/route__hello_world___slug____page.js',
+        routePath: '/hello world/[slug]',
+        segments: [
+          { kind: 'static', value: 'hello world' },
+          { kind: 'required', value: 'slug' },
+        ],
+        server: null,
+      },
+    ]
+
+    expect(matchRouteManifest(manifest, '/hello%20world/ada%20lovelace')).toMatchObject({
+      params: { slug: 'ada lovelace' },
+    })
+  })
+
+  it('keeps nearest dynamic params when resolving special manifest fallbacks', () => {
+    const manifest: RouteManifest = [
+      {
+        error: null,
+        hasMiddleware: false,
+        layouts: [],
+        loading: null,
+        notFound: '/entries/special__blog___slug____not_found.js',
+        page: '/entries/route__blog___slug____page.js',
+        routePath: '/blog/[slug]',
+        segments: [
+          { kind: 'static', value: 'blog' },
+          { kind: 'required', value: 'slug' },
+        ],
+        server: null,
+      },
+    ]
+
+    expect(findSpecialManifestEntry(manifest, '/blog/hello/missing', 'notFound')).toMatchObject({
+      params: { slug: 'hello' },
+    })
+  })
+})
diff --git a/packages/eclipsa/core/runtime/routes.ts b/packages/eclipsa/core/runtime/routes.ts
new file mode 100644
index 0000000..9fd15ff
--- /dev/null
+++ b/packages/eclipsa/core/runtime/routes.ts
@@ -0,0 +1,379 @@
+import type { JSX } from '../../jsx/types.ts'
+import { jsxDEV } from '../../jsx/jsx-dev-runtime.ts'
+import type {
+  RouteLocation,
+  RouteManifest,
+  RouteModuleManifest,
+  RouteParams,
+} from '../router-shared.ts'
+import {
+  ROUTE_ERROR_PROP,
+  ROUTE_PARAMS_PROP,
+  ROUTE_SLOT_ROUTE_KEY,
+  ROUTE_SLOT_TYPE,
+} from './constants.ts'
+import type {
+  LoadedRoute,
+  RouteDataResponse,
+  RouteSlotCarrier,
+  RouterState,
+  RuntimeContainer,
+} from './types.ts'
+
+export const normalizeRoutePath = (pathname: string) => {
+  const normalizedPath = pathname.trim() || '/'
+  const withLeadingSlash = normalizedPath.startsWith('/') ? normalizedPath : `/${normalizedPath}`
+  if (withLeadingSlash.length > 1 && withLeadingSlash.endsWith('/')) {
+    return withLeadingSlash.slice(0, -1)
+  }
+  return withLeadingSlash
+}
+
+export const parseLocationHref = (href: string) => new URL(href, 'http://localhost')
+
+export const createStandaloneLocation = (): RouteLocation => ({
+  get hash() {
+    return typeof window === 'undefined' ? '' : window.location.hash
+  },
+  get href() {
+    return typeof window === 'undefined' ? '/' : window.location.href
+  },
+  get pathname() {
+    return typeof window === 'undefined' ? '/' : normalizeRoutePath(window.location.pathname)
+  },
+  get search() {
+    return typeof window === 'undefined' ? '' : window.location.search
+  },
+})
+
+export const createRouterLocation = (router: RouterState): RouteLocation => ({
+  get hash() {
+    return parseLocationHref(router.currentUrl.value).hash
+  },
+  get href() {
+    return router.currentUrl.value
+  },
+  get pathname() {
+    return normalizeRoutePath(parseLocationHref(router.currentUrl.value).pathname)
+  },
+  get search() {
+    return parseLocationHref(router.currentUrl.value).search
+  },
+})
+
+export const EMPTY_ROUTE_PARAMS = Object.freeze({}) as RouteParams
+export const ROUTE_DOCUMENT_FALLBACK = Object.freeze({
+  document: true,
+  ok: false,
+} as const)
+
+const decodeRoutePathSegment = (segment: string) => {
+  try {
+    return decodeURIComponent(segment)
+  } catch {
+    return segment
+  }
+}
+
+const splitRawRoutePath = (pathname: string) =>
+  normalizeRoutePath(pathname).split('/').filter(Boolean)
+
+const splitRoutePath = (pathname: string) => splitRawRoutePath(pathname).map(decodeRoutePathSegment)
+
+const matchRouteSegments = (
+  segments: RouteModuleManifest['segments'],
+  pathnameSegments: string[],
+  routeIndex = 0,
+  pathIndex = 0,
+  params: RouteParams = {},
+): RouteParams | null => {
+  if (routeIndex >= segments.length) {
+    return pathIndex >= pathnameSegments.length ? params : null
+  }
+
+  const segment = segments[routeIndex]!
+  switch (segment.kind) {
+    case 'static':
+      if (pathnameSegments[pathIndex] !== segment.value) {
+        return null
+      }
+      return matchRouteSegments(segments, pathnameSegments, routeIndex + 1, pathIndex + 1, params)
+    case 'required':
+      if (pathIndex >= pathnameSegments.length) {
+        return null
+      }
+      return matchRouteSegments(segments, pathnameSegments, routeIndex + 1, pathIndex + 1, {
+        ...params,
+        [segment.value]: pathnameSegments[pathIndex],
+      })
+    case 'optional': {
+      const consumed =
+        pathIndex < pathnameSegments.length
+          ? matchRouteSegments(segments, pathnameSegments, routeIndex + 1, pathIndex + 1, {
+              ...params,
+              [segment.value]: pathnameSegments[pathIndex],
+            })
+          : null
+      if (consumed) {
+        return consumed
+      }
+      return matchRouteSegments(segments, pathnameSegments, routeIndex + 1, pathIndex, {
+        ...params,
+        [segment.value]: undefined,
+      })
+    }
+    case 'rest': {
+      const rest = pathnameSegments.slice(pathIndex)
+      if (rest.length === 0) {
+        return null
+      }
+      return matchRouteSegments(
+        segments,
+        pathnameSegments,
+        segments.length,
+        pathnameSegments.length,
+        {
+          ...params,
+          [segment.value]: rest,
+        },
+      )
+    }
+  }
+}
+
+export const matchRouteManifest = (manifest: RouteManifest, pathname: string) => {
+  const normalizedPath = normalizeRoutePath(pathname)
+  const pathnameSegments = splitRoutePath(normalizedPath)
+  for (const entry of manifest) {
+    const params = matchRouteSegments(entry.segments, pathnameSegments)
+    if (params) {
+      return {
+        entry,
+        params,
+        pathname: normalizedPath,
+      }
+    }
+  }
+  return null
+}
+
+export const scoreSpecialManifestEntry = (entry: RouteModuleManifest, pathname: string) => {
+  const pathSegments = splitRoutePath(pathname)
+  let score = 0
+  for (let index = 0; index < entry.segments.length && index < pathSegments.length; index += 1) {
+    const segment = entry.segments[index]!
+    const pathnameSegment = pathSegments[index]
+    if (segment.kind === 'static') {
+      if (segment.value !== pathnameSegment) {
+        break
+      }
+      score += 10
+      continue
+    }
+    score += segment.kind === 'rest' ? 1 : 2
+    if (segment.kind === 'rest') {
+      break
+    }
+  }
+  return score
+}
+
+export const findSpecialManifestEntry = (
+  manifest: RouteManifest,
+  pathname: string,
+  kind: 'error' | 'notFound',
+) => {
+  const normalizedPath = normalizeRoutePath(pathname)
+  const matched = matchRouteManifest(manifest, normalizedPath)
+  if (matched?.entry[kind]) {
+    return matched
+  }
+
+  const rawPathSegments = splitRawRoutePath(normalizedPath)
+  for (let length = rawPathSegments.length - 1; length >= 0; length -= 1) {
+    const candidatePath = length === 0 ? '/' : `/${rawPathSegments.slice(0, length).join('/')}`
+    const candidate = matchRouteManifest(manifest, candidatePath)
+    if (candidate?.entry[kind]) {
+      return candidate
+    }
+  }
+
+  let best: ReturnType<typeof matchRouteManifest> = null
+  let bestScore = -1
+  for (const entry of manifest) {
+    if (!entry[kind]) {
+      continue
+    }
+    const score = scoreSpecialManifestEntry(entry, pathname)
+    if (score > bestScore) {
+      best = {
+        entry,
+        params: EMPTY_ROUTE_PARAMS,
+        pathname: normalizedPath,
+      }
+      bestScore = score
+    }
+  }
+
+  return best
+}
+
+export const resolvePageRouteMatch = (manifest: RouteManifest, pathname: string) => {
+  const matched = matchRouteManifest(manifest, pathname)
+  return matched?.entry.page ? matched : null
+}
+
+export const resolveNotFoundRouteMatch = (manifest: RouteManifest, pathname: string) => {
+  const matched = findSpecialManifestEntry(manifest, pathname, 'notFound')
+  return matched?.entry.notFound ? matched : null
+}
+
+export const resolveRoutableMatch = (
+  manifest: RouteManifest,
+  pathname: string,
+): {
+  kind: 'page' | 'not-found'
+  matched: NonNullable<ReturnType<typeof matchRouteManifest>>
+} | null => {
+  const matched = matchRouteManifest(manifest, pathname)
+  if (matched?.entry.page) {
+    return {
+      kind: 'page',
+      matched,
+    }
+  }
+
+  if (matched) {
+    return null
+  }
+
+  const notFoundMatch = resolveNotFoundRouteMatch(manifest, pathname)
+  if (!notFoundMatch) {
+    return null
+  }
+
+  return {
+    kind: 'not-found',
+    matched: notFoundMatch,
+  }
+}
+
+export const resolveCurrentRouteManifestEntry = (router: RouterState) => {
+  const currentPath = normalizeRoutePath(router.currentPath.value)
+  const matched = matchRouteManifest(router.manifest, currentPath)
+  if (matched?.entry.page) {
+    return matched.entry
+  }
+  return findSpecialManifestEntry(router.manifest, currentPath, 'notFound')?.entry ?? null
+}
+
+export const getRouteModuleUrl = (
+  entry: RouteModuleManifest,
+  variant: 'page' | 'loading' | 'error' | 'not-found' = 'page',
+) =>
+  variant === 'page'
+    ? entry.page
+    : variant === 'loading'
+      ? entry.loading
+      : variant === 'error'
+        ? entry.error
+        : entry.notFound
+
+export const isRouteDataSuccess = (
+  body: RouteDataResponse,
+): body is Extract<RouteDataResponse, { ok: true }> =>
+  body.ok === true &&
+  typeof body.finalHref === 'string' &&
+  typeof body.finalPathname === 'string' &&
+  (body.kind === 'page' || body.kind === 'not-found') &&
+  !!body.loaders &&
+  typeof body.loaders === 'object'
+
+export const isRouteSlot = (value: unknown): value is RouteSlotCarrier =>
+  typeof value === 'object' &&
+  value !== null &&
+  '__eclipsa_type' in value &&
+  (value as { __eclipsa_type?: unknown }).__eclipsa_type === ROUTE_SLOT_TYPE
+
+export const createRouteSlot = (route: LoadedRoute, startLayoutIndex: number): RouteSlotCarrier => {
+  const slot: RouteSlotCarrier = {
+    __eclipsa_type: ROUTE_SLOT_TYPE,
+    pathname: route.pathname,
+    startLayoutIndex,
+  }
+  Object.defineProperty(slot, ROUTE_SLOT_ROUTE_KEY, {
+    configurable: true,
+    enumerable: false,
+    value: route,
+    writable: true,
+  })
+  return slot
+}
+
+export const resolveRouteSlot = (container: RuntimeContainer | null, slot: RouteSlotCarrier) => {
+  const route =
+    slot[ROUTE_SLOT_ROUTE_KEY] ??
+    container?.router?.loadedRoutes.get(routeCacheKey(slot.pathname, 'page'))
+  if (!route) {
+    return null
+  }
+  return createRouteElement(route, slot.startLayoutIndex)
+}
+
+const defineHiddenRouteProp = (
+  props: Record<string, unknown>,
+  key: typeof ROUTE_PARAMS_PROP | typeof ROUTE_ERROR_PROP,
+  value: unknown,
+) => {
+  Object.defineProperty(props, key, {
+    configurable: true,
+    enumerable: false,
+    value,
+    writable: true,
+  })
+}
+
+const createRouteRenderProps = (route: LoadedRoute, props: Record<string, unknown>) => {
+  const nextProps = {
+    ...props,
+  }
+  defineHiddenRouteProp(nextProps, ROUTE_PARAMS_PROP, route.params)
+  defineHiddenRouteProp(nextProps, ROUTE_ERROR_PROP, route.error)
+  return nextProps
+}
+
+export const createRouteElement = (route: LoadedRoute, startLayoutIndex = 0) => {
+  if (startLayoutIndex >= route.layouts.length) {
+    return jsxDEV(
+      route.page.renderer as unknown as JSX.Type,
+      createRouteRenderProps(route, {}),
+      null,
+      false,
+      {},
+    )
+  }
+
+  let children: unknown = null
+  for (let index = route.layouts.length - 1; index >= startLayoutIndex; index -= 1) {
+    const layout = route.layouts[index]!
+    children = jsxDEV(
+      layout.renderer as unknown as JSX.Type,
+      createRouteRenderProps(route, {
+        children: createRouteSlot(route, index + 1),
+      }),
+      null,
+      false,
+      {},
+    )
+  }
+  return children
+}
+
+export const routeCacheKey = (
+  pathname: string,
+  variant: 'page' | 'loading' | 'error' | 'not-found' = 'page',
+) => `${normalizeRoutePath(pathname)}::${variant}`
+
+export const routePrefetchKey = (url: URL) => `${normalizeRoutePath(url.pathname)}${url.search}`
+
+export const isLoaderSignalId = (id: string) => id.startsWith('$loader:')
diff --git a/packages/eclipsa/core/runtime/serialization.ts b/packages/eclipsa/core/runtime/serialization.ts
new file mode 100644
index 0000000..6c8bd8b
--- /dev/null
+++ b/packages/eclipsa/core/runtime/serialization.ts
@@ -0,0 +1,525 @@
+import type { Component } from '../component.ts'
+import {
+  deserializePublicValue,
+  serializePublicValue,
+  type SerializedReference,
+  type SerializedValue,
+} from '../hooks.ts'
+import {
+  getRuntimeContextReference,
+  materializeRuntimeContext,
+  materializeRuntimeContextProvider,
+} from '../context.ts'
+import {
+  __eclipsaComponent,
+  getActionHandleMeta,
+  getActionHookMeta,
+  getComponentMeta,
+  getLazyMeta,
+  getLoaderHandleMeta,
+  getLoaderHookMeta,
+  getNavigateMeta,
+  getRegisteredActionHook,
+  getRegisteredLoaderHook,
+  getSignalMeta,
+} from '../internal.ts'
+import {
+  PROJECTION_SLOT_TYPE,
+  RENDER_COMPONENT_TYPE_KEY,
+  RENDER_REFERENCE_KIND,
+  ROUTE_SLOT_TYPE,
+} from './constants.ts'
+import type {
+  ProjectionSlotValue,
+  RenderComponentTypeRef,
+  RenderObject,
+  RuntimeContainer,
+  RuntimeSymbolModule,
+  RouteSlotValue,
+} from './types.ts'
+
+interface RuntimeSerializationDependencies {
+  createProjectionSlot: (
+    componentId: string,
+    name: string,
+    occurrence: number,
+    source: unknown,
+  ) => ProjectionSlotValue
+  ensureRouterState: (container: RuntimeContainer) => {
+    navigate: unknown
+  }
+  ensureRuntimeElementId: (container: RuntimeContainer, element: Element) => string
+  evaluateProps: (props: Record<string, unknown>) => Record<string, unknown>
+  findRuntimeElement: (container: RuntimeContainer, id: string) => Element | null
+  getResolvedRuntimeSymbols: (container: RuntimeContainer) => Map<string, RuntimeSymbolModule>
+  isPlainObject: (value: unknown) => value is Record<string, unknown>
+  isProjectionSlot: (value: unknown) => value is ProjectionSlotValue
+  isRenderObject: (value: unknown) => value is RenderObject
+  isRouteSlot: (value: unknown) => value is RouteSlotValue
+  loadSymbol: (container: RuntimeContainer, symbol: string) => Promise<unknown>
+  materializeComputedSignalReference: (container: RuntimeContainer, signalId: string) => unknown
+  materializeScope: (container: RuntimeContainer, scopeId: string) => unknown[]
+  materializeSymbolReference: (
+    container: RuntimeContainer,
+    symbol: string,
+    scopeId: string,
+  ) => unknown
+  registerScope: (container: RuntimeContainer, values: unknown[]) => string
+  registerSerializedScope: (container: RuntimeContainer, values: SerializedValue[]) => string
+  resolveRenderable: (value: unknown) => unknown
+}
+
+export const createRuntimeSerialization = ({
+  createProjectionSlot,
+  ensureRouterState,
+  ensureRuntimeElementId,
+  evaluateProps,
+  findRuntimeElement,
+  getResolvedRuntimeSymbols,
+  isPlainObject,
+  isProjectionSlot,
+  isRenderObject,
+  isRouteSlot,
+  loadSymbol,
+  materializeComputedSignalReference,
+  materializeScope,
+  materializeSymbolReference,
+  registerScope,
+  registerSerializedScope,
+  resolveRenderable,
+}: RuntimeSerializationDependencies) => {
+  const getRenderComponentTypeRef = (value: unknown): RenderComponentTypeRef | null => {
+    if (typeof value !== 'function') {
+      return null
+    }
+    return (
+      ((value as unknown as Record<PropertyKey, unknown>)[RENDER_COMPONENT_TYPE_KEY] as
+        | RenderComponentTypeRef
+        | undefined) ?? null
+    )
+  }
+
+  const createMaterializedRenderComponentType = (
+    container: RuntimeContainer,
+    symbol: string,
+    scopeId: string,
+  ) => {
+    const component = __eclipsaComponent(
+      ((props: unknown) => {
+        const module = getResolvedRuntimeSymbols(container).get(symbol)
+        if (!module) {
+          throw new Error(`Missing preloaded render component symbol ${symbol}.`)
+        }
+        return module.default(materializeScope(container, scopeId), props)
+      }) as Component,
+      symbol,
+      () => materializeScope(container, scopeId),
+    )
+    Object.defineProperty(component, RENDER_COMPONENT_TYPE_KEY, {
+      configurable: true,
+      enumerable: false,
+      value: {
+        scopeId,
+        symbol,
+      } satisfies RenderComponentTypeRef,
+      writable: true,
+    })
+    return component
+  }
+
+  const serializeRenderObjectReference = (
+    container: RuntimeContainer,
+    value: RenderObject,
+  ): SerializedReference => {
+    if (typeof value.type === 'function' && !getComponentMeta(value.type)) {
+      const resolved = resolveRenderable(value.type(value.props))
+      if (!isRenderObject(resolved)) {
+        throw new TypeError('Only resumable component render objects can be serialized.')
+      }
+      return serializeRenderObjectReference(container, resolved)
+    }
+
+    const evaluatedProps = evaluateProps(value.props)
+    const key = value.key ?? null
+    const isStatic = value.isStatic === true
+    const metadata = value.metadata ?? null
+
+    if (typeof value.type === 'string') {
+      return {
+        __eclipsa_type: 'ref',
+        data: [
+          'element',
+          value.type,
+          null,
+          serializeRuntimeValue(container, evaluatedProps),
+          serializeRuntimeValue(container, key),
+          isStatic,
+          serializeRuntimeValue(container, metadata),
+        ],
+        kind: RENDER_REFERENCE_KIND,
+        token: 'jsx',
+      }
+    }
+
+    const meta = getComponentMeta(value.type)
+    if (!meta) {
+      throw new TypeError('Only resumable component render objects can be serialized.')
+    }
+
+    return {
+      __eclipsa_type: 'ref',
+      data: [
+        'component',
+        meta.symbol,
+        registerScope(container, meta.captures()),
+        serializeRuntimeValue(container, evaluatedProps),
+        serializeRuntimeValue(container, key),
+        isStatic,
+        serializeRuntimeValue(container, metadata),
+      ],
+      kind: RENDER_REFERENCE_KIND,
+      token: 'jsx',
+    }
+  }
+
+  const deserializeRenderObjectReference = (
+    container: RuntimeContainer,
+    data: SerializedValue | undefined,
+  ): RenderObject => {
+    if (!Array.isArray(data) || data.length !== 7) {
+      throw new TypeError('Render references require a seven-part payload.')
+    }
+
+    const [variant, typeValue, scopeValue, propsValue, keyValue, isStaticValue, metadataValue] =
+      data
+    if (variant !== 'element' && variant !== 'component') {
+      throw new TypeError(`Unsupported render reference variant "${String(variant)}".`)
+    }
+    if (
+      typeof isStaticValue !== 'boolean' &&
+      isStaticValue !== null &&
+      isStaticValue !== undefined
+    ) {
+      throw new TypeError('Render references require a boolean static flag.')
+    }
+    const isStatic = isStaticValue === true
+
+    const props = deserializeRuntimeValue(container, propsValue as SerializedValue)
+    const key = deserializeRuntimeValue(container, keyValue as SerializedValue)
+    const metadata = deserializeRuntimeValue(container, metadataValue as SerializedValue)
+
+    if (!props || typeof props !== 'object') {
+      throw new TypeError('Render references require object props.')
+    }
+
+    if (variant === 'element') {
+      if (typeof typeValue !== 'string') {
+        throw new TypeError('Element render references require a string tag name.')
+      }
+      return {
+        isStatic,
+        key: (key ?? undefined) as RenderObject['key'],
+        metadata: (metadata ?? undefined) as RenderObject['metadata'],
+        props: props as Record<string, unknown>,
+        type: typeValue,
+      }
+    }
+
+    if (typeof typeValue !== 'string' || typeof scopeValue !== 'string') {
+      throw new TypeError('Component render references require a symbol id and scope id.')
+    }
+
+    return {
+      isStatic,
+      key: (key ?? undefined) as RenderObject['key'],
+      metadata: (metadata ?? undefined) as RenderObject['metadata'],
+      props: props as Record<string, unknown>,
+      type: createMaterializedRenderComponentType(container, typeValue, scopeValue),
+    }
+  }
+
+  const preloadResumableValue = async (
+    container: RuntimeContainer,
+    value: unknown,
+    seen = new Set<unknown>(),
+  ): Promise<void> => {
+    if (value === null || value === undefined || value === false) {
+      return
+    }
+    if (seen.has(value)) {
+      return
+    }
+    if (typeof value === 'function') {
+      const renderComponentRef = getRenderComponentTypeRef(value)
+      if (!renderComponentRef) {
+        return
+      }
+      seen.add(value)
+      await loadSymbol(container, renderComponentRef.symbol)
+      for (const capturedValue of materializeScope(container, renderComponentRef.scopeId)) {
+        await preloadResumableValue(container, capturedValue, seen)
+      }
+      return
+    }
+    if (Array.isArray(value)) {
+      seen.add(value)
+      for (const entry of value) {
+        await preloadResumableValue(container, entry, seen)
+      }
+      return
+    }
+    if (typeof Node !== 'undefined' && value instanceof Node) {
+      return
+    }
+    if (isProjectionSlot(value)) {
+      return
+    }
+    if (isRenderObject(value)) {
+      seen.add(value)
+      await preloadResumableValue(container, value.type, seen)
+      await preloadResumableValue(container, evaluateProps(value.props), seen)
+      return
+    }
+    if (!isPlainObject(value)) {
+      return
+    }
+
+    seen.add(value)
+    for (const entry of Object.values(value)) {
+      await preloadResumableValue(container, entry, seen)
+    }
+  }
+
+  const serializeRuntimeValue = (container: RuntimeContainer, value: unknown): SerializedValue =>
+    serializePublicValue(value, {
+      serializeReference(candidate) {
+        const signalMeta = getSignalMeta(candidate)
+        if (signalMeta) {
+          return {
+            __eclipsa_type: 'ref',
+            kind: signalMeta.kind === 'computed-signal' ? 'computed-signal' : 'signal',
+            token: signalMeta.id,
+          }
+        }
+        if (getNavigateMeta(candidate)) {
+          return {
+            __eclipsa_type: 'ref',
+            kind: 'navigate',
+            token: 'navigate',
+          }
+        }
+        const actionMeta = getActionHandleMeta(candidate)
+        if (actionMeta) {
+          return {
+            __eclipsa_type: 'ref',
+            kind: 'action',
+            token: actionMeta.id,
+          }
+        }
+        const actionHookMeta = getActionHookMeta(candidate)
+        if (actionHookMeta) {
+          return {
+            __eclipsa_type: 'ref',
+            kind: 'action-hook',
+            token: actionHookMeta.id,
+          }
+        }
+        const loaderMeta = getLoaderHandleMeta(candidate)
+        if (loaderMeta) {
+          return {
+            __eclipsa_type: 'ref',
+            kind: 'loader',
+            token: loaderMeta.id,
+          }
+        }
+        const loaderHookMeta = getLoaderHookMeta(candidate)
+        if (loaderHookMeta) {
+          return {
+            __eclipsa_type: 'ref',
+            kind: 'loader-hook',
+            token: loaderHookMeta.id,
+          }
+        }
+        const contextReference = getRuntimeContextReference(candidate)
+        if (contextReference) {
+          return {
+            __eclipsa_type: 'ref',
+            data: serializeRuntimeValue(container, {
+              defaultValue: contextReference.defaultValue,
+              hasDefault: contextReference.hasDefault,
+            }),
+            kind: contextReference.kind,
+            token: contextReference.id,
+          }
+        }
+        if (isRouteSlot(candidate)) {
+          return {
+            __eclipsa_type: 'ref',
+            data: serializePublicValue(candidate.startLayoutIndex),
+            kind: 'route-slot',
+            token: candidate.pathname,
+          }
+        }
+        if (isProjectionSlot(candidate)) {
+          return {
+            __eclipsa_type: 'ref',
+            data: serializeRuntimeValue(container, candidate.source),
+            kind: PROJECTION_SLOT_TYPE,
+            token: JSON.stringify([candidate.componentId, candidate.name, candidate.occurrence]),
+          }
+        }
+        if (isRenderObject(candidate)) {
+          return serializeRenderObjectReference(container, candidate)
+        }
+        const lazyMeta = getLazyMeta(candidate)
+        if (lazyMeta) {
+          return {
+            __eclipsa_type: 'ref',
+            data: lazyMeta.captures().map((entry) => serializeRuntimeValue(container, entry)),
+            kind: 'symbol',
+            token: lazyMeta.symbol,
+          }
+        }
+        if (typeof Element !== 'undefined' && candidate instanceof Element) {
+          return {
+            __eclipsa_type: 'ref',
+            kind: 'dom',
+            token: ensureRuntimeElementId(container, candidate),
+          }
+        }
+        return null
+      },
+    })
+
+  const deserializeRuntimeValue = (container: RuntimeContainer, value: SerializedValue): unknown =>
+    deserializePublicValue(value, {
+      deserializeReference(reference) {
+        if (reference.kind === 'navigate') {
+          return ensureRouterState(container).navigate
+        }
+        if (reference.kind === 'action') {
+          const action = container.actions.get(reference.token)
+          if (!action) {
+            throw new Error(`Missing action handle ${reference.token}.`)
+          }
+          return action
+        }
+        if (reference.kind === 'action-hook') {
+          const actionHook = getRegisteredActionHook(reference.token)
+          if (!actionHook) {
+            throw new Error(`Missing action hook ${reference.token}.`)
+          }
+          return actionHook
+        }
+        if (reference.kind === 'loader') {
+          const loader = container.loaders.get(reference.token)
+          if (!loader) {
+            throw new Error(`Missing loader handle ${reference.token}.`)
+          }
+          return loader
+        }
+        if (reference.kind === 'loader-hook') {
+          const loaderHook = getRegisteredLoaderHook(reference.token)
+          if (!loaderHook) {
+            throw new Error(`Missing loader hook ${reference.token}.`)
+          }
+          return loaderHook
+        }
+        if (reference.kind === 'context' || reference.kind === 'context-provider') {
+          const decoded =
+            reference.data === undefined
+              ? null
+              : (deserializeRuntimeValue(container, reference.data as SerializedValue) as {
+                  defaultValue?: unknown
+                  hasDefault?: unknown
+                } | null)
+          const hasDefault = decoded?.hasDefault === true
+          const defaultValue = hasDefault ? decoded?.defaultValue : undefined
+          const descriptor = {
+            defaultValue,
+            hasDefault,
+            id: reference.token,
+          }
+          return reference.kind === 'context'
+            ? materializeRuntimeContext(descriptor)
+            : materializeRuntimeContextProvider(descriptor)
+        }
+        if (reference.kind === 'route-slot') {
+          const startLayoutIndex =
+            reference.data === undefined ? 0 : deserializePublicValue(reference.data)
+          if (typeof startLayoutIndex !== 'number' || !Number.isInteger(startLayoutIndex)) {
+            throw new TypeError('Route slot references require an integer start layout index.')
+          }
+          return {
+            __eclipsa_type: ROUTE_SLOT_TYPE,
+            pathname: reference.token,
+            startLayoutIndex,
+          } satisfies RouteSlotValue
+        }
+        if (reference.kind === PROJECTION_SLOT_TYPE) {
+          let componentId = ''
+          let name = ''
+          let occurrence = 0
+          try {
+            const parsed = JSON.parse(reference.token)
+            if (
+              !Array.isArray(parsed) ||
+              parsed.length !== 3 ||
+              typeof parsed[0] !== 'string' ||
+              typeof parsed[1] !== 'string' ||
+              typeof parsed[2] !== 'number'
+            ) {
+              throw new Error('invalid projection slot token')
+            }
+            componentId = parsed[0]
+            name = parsed[1]
+            occurrence = parsed[2]
+          } catch {
+            throw new TypeError(
+              'Projection slot references require a component id, name, and occurrence.',
+            )
+          }
+          return createProjectionSlot(
+            componentId,
+            name,
+            occurrence,
+            deserializeRuntimeValue(container, reference.data as SerializedValue),
+          )
+        }
+        if (reference.kind === 'signal') {
+          const record = container.signals.get(reference.token)
+          if (!record) {
+            throw new Error(`Missing signal ${reference.token}.`)
+          }
+          return record.handle
+        }
+        if (reference.kind === 'computed-signal') {
+          return materializeComputedSignalReference(container, reference.token)
+        }
+        if (reference.kind === 'symbol') {
+          if (!reference.data || !Array.isArray(reference.data)) {
+            throw new TypeError('Symbol references require an encoded scope array.')
+          }
+          const scopeId = registerSerializedScope(container, reference.data)
+          return materializeSymbolReference(container, reference.token, scopeId)
+        }
+        if (reference.kind === RENDER_REFERENCE_KIND) {
+          return deserializeRenderObjectReference(container, reference.data)
+        }
+        if (reference.kind === 'dom') {
+          const element = findRuntimeElement(container, reference.token)
+          if (!element) {
+            throw new Error(`Missing DOM reference ${reference.token}.`)
+          }
+          return element
+        }
+        throw new TypeError(`Unsupported runtime reference kind "${reference.kind}".`)
+      },
+    })
+
+  return {
+    deserializeRuntimeValue,
+    preloadResumableValue,
+    serializeRuntimeValue,
+  }
+}
diff --git a/packages/eclipsa/core/runtime/ssr.ts b/packages/eclipsa/core/runtime/ssr.ts
new file mode 100644
index 0000000..97ba1b0
--- /dev/null
+++ b/packages/eclipsa/core/runtime/ssr.ts
@@ -0,0 +1,204 @@
+import { isSSRAttrValue, isSSRRawValue, isSSRTemplate } from '../../jsx/jsx-dev-runtime.ts'
+import type { JSX } from '../../jsx/types.ts'
+
+interface SSRRendererDependencies {
+  getCurrentContainer: () => unknown
+  isProjectionSlot: (value: unknown) => boolean
+  isRouteSlot: (value: unknown) => boolean
+  renderProjectionSlotToString: (value: unknown) => string
+  renderStringNode: (value: JSX.Element) => string
+  resolveRouteSlot: (container: unknown, slot: unknown) => unknown
+}
+
+const EVENT_PROP_REGEX = /^on([A-Z].+)$/
+const DANGEROUSLY_SET_INNER_HTML_PROP = 'dangerouslySetInnerHTML'
+const TEXT_ESCAPE_REGEX = /[&<>]/
+const ATTR_ESCAPE_REGEX = /[&<>'"]/
+
+const escapeString = (value: string, mode: 'text' | 'attr') => {
+  const escapePattern = mode === 'attr' ? ATTR_ESCAPE_REGEX : TEXT_ESCAPE_REGEX
+  const firstMatch = value.search(escapePattern)
+  if (firstMatch < 0) {
+    return value
+  }
+
+  let output = ''
+  let lastIndex = 0
+  for (let index = firstMatch; index < value.length; index += 1) {
+    let escaped: string | null = null
+    switch (value.charCodeAt(index)) {
+      case 34:
+        escaped = mode === 'attr' ? '&quot;' : null
+        break
+      case 38:
+        escaped = '&amp;'
+        break
+      case 39:
+        escaped = mode === 'attr' ? '&#39;' : null
+        break
+      case 60:
+        escaped = '&lt;'
+        break
+      case 62:
+        escaped = '&gt;'
+        break
+    }
+    if (!escaped) {
+      continue
+    }
+    output += value.slice(lastIndex, index)
+    output += escaped
+    lastIndex = index + 1
+  }
+  return output + value.slice(lastIndex)
+}
+
+export const escapeText = (value: string) => escapeString(value, 'text')
+export const escapeAttr = (value: string) => escapeString(value, 'attr')
+
+export const resolveDangerouslySetInnerHTML = (value: unknown) =>
+  value === false || value === undefined || value === null ? null : String(value)
+
+export const toEventName = (propName: string) => {
+  const matched = propName.match(EVENT_PROP_REGEX)
+  if (!matched) {
+    return null
+  }
+  const [first, ...rest] = matched[1]
+  return `${first.toLowerCase()}${rest.join('')}`
+}
+
+export const isDangerouslySetInnerHTMLProp = (propName: string) =>
+  propName === DANGEROUSLY_SET_INNER_HTML_PROP
+
+export const createSSRRenderer = ({
+  getCurrentContainer,
+  isProjectionSlot,
+  isRouteSlot,
+  renderProjectionSlotToString,
+  renderStringNode,
+  resolveRouteSlot,
+}: SSRRendererDependencies) => {
+  const renderSSRAttr = (name: string, value: unknown) => {
+    if (name === 'key') {
+      return ''
+    }
+    if (value === false || value === undefined || value === null) {
+      return ''
+    }
+    if (value === true) {
+      return ` ${name}`
+    }
+    return ` ${name}="${escapeAttr(String(value))}"`
+  }
+
+  const renderSSRTemplateNode = (template: JSX.SSRTemplate) => {
+    let output = template.strings[0] ?? ''
+    for (let index = 0; index < template.values.length; index += 1) {
+      const value = template.values[index]
+      output += isSSRAttrValue(value)
+        ? renderSSRAttr(value.name, value.value)
+        : renderSSRValue(value)
+      output += template.strings[index + 1] ?? ''
+    }
+    return output
+  }
+
+  const renderStringArray = (values: readonly (JSX.Element | JSX.Element[])[]) => {
+    let output = ''
+    for (let index = 0; index < values.length; index += 1) {
+      const value = values[index]
+      if (Array.isArray(value)) {
+        output += renderStringArray(value)
+        continue
+      }
+      if (value === false || value === null || value === undefined) {
+        continue
+      }
+      if (typeof value === 'string') {
+        output += escapeText(value)
+        continue
+      }
+      if (typeof value === 'number' || typeof value === 'boolean') {
+        output += escapeText(String(value))
+        continue
+      }
+      if (isSSRRawValue(value)) {
+        output += value.value
+        continue
+      }
+      if (isSSRTemplate(value)) {
+        output += renderSSRTemplateNode(value)
+        continue
+      }
+      if (isProjectionSlot(value)) {
+        output += renderProjectionSlotToString(value)
+        continue
+      }
+      if (isRouteSlot(value)) {
+        const routeElement = resolveRouteSlot(getCurrentContainer(), value)
+        if (routeElement) {
+          output += renderStringNode(routeElement as JSX.Element)
+        }
+        continue
+      }
+      output += renderStringNode(value as JSX.Element)
+    }
+    return output
+  }
+
+  const renderSSRValue = (value: unknown): string => {
+    if (value === false || value === null || value === undefined) {
+      return ''
+    }
+    if (Array.isArray(value)) {
+      return renderStringArray(value as readonly (JSX.Element | JSX.Element[])[])
+    }
+    if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+      return escapeText(String(value))
+    }
+    if (isSSRRawValue(value)) {
+      return value.value
+    }
+    if (isSSRTemplate(value)) {
+      return renderSSRTemplateNode(value)
+    }
+    if (isProjectionSlot(value)) {
+      return renderProjectionSlotToString(value)
+    }
+    if (isRouteSlot(value)) {
+      const routeElement = resolveRouteSlot(getCurrentContainer(), value)
+      return routeElement ? renderStringNode(routeElement as JSX.Element) : ''
+    }
+    return renderStringNode(value as JSX.Element)
+  }
+
+  const renderSSRMap = <T>(
+    value:
+      | readonly T[]
+      | {
+          map: (callback: (item: T, index: number) => string) => {
+            join: (separator: string) => string
+          }
+        },
+    renderItem: (item: T, index: number) => string,
+  ): string => {
+    if (Array.isArray(value)) {
+      let output = ''
+      for (let index = 0; index < value.length; index += 1) {
+        if (!(index in value)) {
+          continue
+        }
+        output += renderItem(value[index] as T, index)
+      }
+      return output
+    }
+    return value.map(renderItem).join('')
+  }
+
+  return {
+    renderSSRAttr,
+    renderSSRValue,
+    renderSSRMap,
+  }
+}
diff --git a/packages/eclipsa/core/runtime/types.ts b/packages/eclipsa/core/runtime/types.ts
new file mode 100644
index 0000000..39347a1
--- /dev/null
+++ b/packages/eclipsa/core/runtime/types.ts
@@ -0,0 +1,412 @@
+import type { JSX } from '../../jsx/types.ts'
+import type { SerializedValue } from '../hooks.ts'
+import type { ExternalComponentDescriptor, ExternalComponentMeta } from '../internal.ts'
+import type { RouteMetadataExport } from '../metadata.ts'
+import type {
+  Navigate,
+  RouteLocation,
+  RouteManifest,
+  RouteModuleManifest,
+  RouteParams,
+} from '../router-shared.ts'
+import { PROJECTION_SLOT_TYPE, ROUTE_SLOT_ROUTE_KEY, ROUTE_SLOT_TYPE } from './constants.ts'
+
+export type CleanupCallback = () => void
+
+export type RuntimeContextToken<T = unknown> = symbol & {
+  __eclipsa_context_type__?: T
+}
+
+export interface RuntimeContextValue {
+  token: RuntimeContextToken
+  value: unknown
+}
+
+export type WatchDependency = { value: unknown } | (() => unknown)
+
+export type EffectOptions = {
+  dependencies?: WatchDependency[]
+  errorLabel?: string
+  untracked?: boolean
+}
+
+export type WatchMode = 'dynamic' | 'explicit'
+export type RouteRenderer = (props: unknown) => unknown
+export type NavigationMode = 'pop' | 'push' | 'replace'
+
+export interface ResumeComponentPayload {
+  external?: ExternalComponentDescriptor
+  optimizedRoot?: boolean
+  props: SerializedValue
+  projectionSlots?: Record<string, number>
+  scope: string
+  signalIds: string[]
+  symbol: string
+  visibleCount: number
+  watchCount: number
+}
+
+export interface ResumeWatchPayload {
+  componentId: string
+  mode: WatchMode
+  scope: string
+  signals: string[]
+  symbol: string
+}
+
+export interface ResumeActionPayload {
+  error: SerializedValue
+  input: SerializedValue
+  result: SerializedValue
+}
+
+export interface ResumeVisiblePayload {
+  componentId: string
+  scope: string
+  symbol: string
+}
+
+export interface ResumeLoaderPayload {
+  data: SerializedValue
+  error: SerializedValue
+  loaded: boolean
+}
+
+export interface LoaderSnapshot {
+  data: unknown
+  error: unknown
+  loaded: boolean
+}
+
+export interface ResumePayload {
+  actions: Record<string, ResumeActionPayload>
+  components: Record<string, ResumeComponentPayload>
+  loaders: Record<string, ResumeLoaderPayload>
+  scopes: Record<string, SerializedValue[]>
+  signals: Record<string, SerializedValue>
+  subscriptions: Record<string, string[]>
+  symbols: Record<string, string>
+  visibles: Record<string, ResumeVisiblePayload>
+  watches: Record<string, ResumeWatchPayload>
+}
+
+export interface StreamedSuspenseChunk {
+  boundaryId: string
+  payloadScriptId: string
+  templateId: string
+}
+
+export interface StreamState {
+  enqueue: (chunk: StreamedSuspenseChunk) => void
+  pending: StreamedSuspenseChunk[]
+  process?: () => Promise<void>
+  processing?: Promise<void> | null
+}
+
+export interface ReactiveEffect {
+  container?: RuntimeContainer | null
+  fn: () => void
+  signals: Set<SignalRecord>
+}
+
+export interface SignalRecord<T = unknown> {
+  effects: Set<ReactiveEffect>
+  handle: {
+    value: T
+  }
+  id: string
+  subscribers: Set<string>
+  value: T
+}
+
+export interface CleanupSlot {
+  callbacks: CleanupCallback[]
+}
+
+export interface ComponentState {
+  active: boolean
+  activateModeOnFlush?: 'patch' | 'replace'
+  didMount: boolean
+  end?: Comment
+  external?: ExternalComponentDescriptor
+  externalSlotHtml?: Map<string, string> | null
+  externalSlotDom?: Map<string, Node[]> | null
+  externalInstance?: unknown
+  externalMeta?: ExternalComponentMeta | null
+  id: string
+  mountCleanupSlots: CleanupSlot[]
+  optimizedRoot?: boolean
+  parentId: string | null
+  prefersEffectOnlyLocalSignalWrites?: boolean
+  props: unknown
+  projectionSlots: Record<string, number> | null
+  rawProps?: Record<string, unknown> | null
+  renderEffectCleanupSlot: CleanupSlot
+  reuseExistingDomOnActivate?: boolean
+  reuseProjectionSlotDomOnActivate?: boolean
+  scopeId: string
+  signalIds: string[]
+  start?: Comment
+  symbol: string
+  suspensePromise?: Promise<unknown> | null
+  visibleCount: number
+  watchCount: number
+}
+
+export interface RenderFrame {
+  childCursor: number
+  component: ComponentState
+  container: RuntimeContainer
+  effectCleanupSlot: CleanupSlot
+  insertCursor: number
+  keyedRangeCursor: number
+  keyedRangeScopeStack: string[]
+  mountCallbacks: Array<() => void>
+  projectionState: {
+    counters: Map<string, number>
+    reuseExistingDom: boolean
+    reuseProjectionSlotDom: boolean
+  }
+  visitedDescendants: Set<string>
+  mode: 'client' | 'ssr'
+  scopedStyles: ScopedStyleEntry[]
+  signalCursor: number
+  visibleCursor: number
+  watchCursor: number
+}
+
+export interface ClientInsertOwner {
+  childIndex: number
+  componentId: string
+  keyedRangeCursor: number
+  projectionCounters: Array<[string, number]>
+}
+
+export interface ScopedStyleEntry {
+  attributes: Record<string, unknown>
+  cssText: string
+}
+
+export interface RouterEventState {
+  originalPreventDefault: () => void
+  routerPrevented: boolean
+  userPrevented: boolean
+}
+
+export interface RuntimeSymbolModule {
+  default: (scope: unknown[], propsOrArg?: unknown, ...args: unknown[]) => unknown
+}
+
+export interface LoadedRouteModule {
+  metadata: RouteMetadataExport | null
+  renderer: RouteRenderer
+  symbol: string | null
+  url: string
+}
+
+export interface LoadedRoute {
+  entry: RouteModuleManifest
+  error: unknown
+  layouts: LoadedRouteModule[]
+  params: RouteParams
+  pathname: string
+  page: LoadedRouteModule
+  render: RouteRenderer
+}
+
+export interface RoutePreflightSuccess {
+  ok: true
+}
+
+export interface RoutePreflightRedirect {
+  location: string
+  ok: false
+}
+
+export interface RoutePreflightDocumentFallback {
+  document: true
+  ok: false
+}
+
+export type RoutePreflightResult =
+  | RoutePreflightSuccess
+  | RoutePreflightRedirect
+  | RoutePreflightDocumentFallback
+
+export interface RouteDataSuccess {
+  finalHref: string
+  finalPathname: string
+  kind: 'page' | 'not-found'
+  loaders: Record<string, ResumeLoaderPayload>
+  ok: true
+}
+
+export interface RouteDataRedirect {
+  location: string
+  ok: false
+}
+
+export interface RouteDataDocumentFallback {
+  document: true
+  ok: false
+}
+
+export type RouteDataResponse = RouteDataSuccess | RouteDataRedirect | RouteDataDocumentFallback
+export type RoutePrefetchResult = RouteDataResponse
+
+export interface RouteSlotValue {
+  __eclipsa_type: typeof ROUTE_SLOT_TYPE
+  pathname: string
+  startLayoutIndex: number
+}
+
+export interface RouteSlotCarrier extends RouteSlotValue {
+  [ROUTE_SLOT_ROUTE_KEY]?: LoadedRoute
+}
+
+export interface ProjectionSlotValue {
+  __eclipsa_type: typeof PROJECTION_SLOT_TYPE
+  componentId: string
+  name: string
+  occurrence: number
+  source: unknown
+}
+
+export interface WatchState {
+  cleanupSlot: CleanupSlot
+  componentId: string
+  effect: ReactiveEffect
+  id: string
+  mode: WatchMode
+  pending: Promise<void> | null
+  resumed: boolean
+  run: (() => void) | null
+  scopeId: string
+  symbol: string
+  track: (() => void) | null
+}
+
+export interface VisibleState {
+  cleanupSlot: CleanupSlot
+  componentId: string
+  done: boolean
+  id: string
+  pending: Promise<void> | null
+  run: (() => void | Promise<void>) | null
+  scopeId: string
+  symbol: string
+}
+
+export interface PendingLinkNavigation {
+  href: string
+  replace: boolean
+  state: RouterEventState
+}
+
+export interface PendingResumeLinkNavigation {
+  href: string
+  replace: boolean
+}
+
+export type RenderObject = Extract<
+  JSX.Element,
+  {
+    isStatic: boolean
+    props: Record<string, unknown>
+    type: JSX.Type
+  }
+>
+
+export interface RenderComponentTypeRef {
+  scopeId: string
+  symbol: string
+}
+
+export interface ForValue<T = unknown> {
+  __e_for: true
+  arr: readonly T[]
+  fallback?: JSX.Element
+  fn: (e: T, i: number) => JSX.Element
+  key?: (e: T, i: number) => string | number | symbol
+}
+
+export interface ShowValue<T = unknown> {
+  __e_show: true
+  children: JSX.Element | ((value: T) => JSX.Element)
+  fallback?: JSX.Element | ((value: T) => JSX.Element)
+  when: T
+}
+
+export interface RouterState {
+  currentPath: { value: string }
+  currentRoute: LoadedRoute | null
+  currentUrl: { value: string }
+  defaultTitle: string
+  isNavigating: { value: boolean }
+  loadedRoutes: Map<string, LoadedRoute>
+  location: RouteLocation
+  manifest: RouteManifest
+  navigate: Navigate
+  prefetchedLoaders: Map<string, Map<string, LoaderSnapshot>>
+  routeModuleBusts: Map<string, number>
+  routePrefetches: Map<string, Promise<RoutePrefetchResult>>
+  sequence: number
+}
+
+export interface RuntimeContainer {
+  actions: Map<string, unknown>
+  actionStates: Map<
+    string,
+    {
+      error: unknown
+      input: unknown
+      result: unknown
+    }
+  >
+  components: Map<string, ComponentState>
+  dirty: Set<string>
+  dirtyFlushQueued: boolean
+  doc?: Document
+  eventDispatchPromise: Promise<void> | null
+  externalRenderCache: Map<
+    string,
+    {
+      error?: unknown
+      html?: string
+      pending?: Promise<string>
+      status: 'pending' | 'rejected' | 'resolved'
+    }
+  >
+  id: string
+  imports: Map<string, Promise<RuntimeSymbolModule>>
+  interactivePrefetchCheckQueued: boolean
+  loaderStates: Map<
+    string,
+    {
+      data: unknown
+      error: unknown
+      loaded: boolean
+    }
+  >
+  loaders: Map<string, unknown>
+  nextComponentId: number
+  nextElementId: number
+  nextScopeId: number
+  nextSignalId: number
+  pendingSuspensePromises: Set<Promise<unknown>>
+  resumeReadyPromise: Promise<void> | null
+  rootChildCursor: number
+  rootElement?: HTMLElement
+  router: RouterState | null
+  asyncSignalStates: Map<string, unknown>
+  asyncSignalSnapshotCache: Map<string, unknown>
+  atoms: WeakMap<object, string>
+  nextAtomId: number
+  scopes: Map<string, SerializedValue[]>
+  signals: Map<string, SignalRecord>
+  symbols: Map<string, string>
+  visibilityListenersCleanup: (() => void) | null
+  visibilityCheckQueued: boolean
+  visibles: Map<string, VisibleState>
+  watches: Map<string, WatchState>
+}
diff --git a/packages/eclipsa/core/serialize.test.ts b/packages/eclipsa/core/serialize.test.ts
index f838760..9712845 100644
--- a/packages/eclipsa/core/serialize.test.ts
+++ b/packages/eclipsa/core/serialize.test.ts
@@ -1,5 +1,11 @@
 import { describe, expect, it } from 'vitest'
-import { deserializeValue, escapeJSONScriptText, serializeValue } from './serialize.ts'
+import {
+  deserializeValue,
+  escapeInlineScriptText,
+  escapeJSONScriptText,
+  serializeValue,
+} from './serialize.ts'
+import { noSerialize } from './no-serialize.ts'
 
 describe('serializeValue', () => {
   it('round-trips nested plain data, maps, and sets', () => {
@@ -31,7 +37,8 @@ describe('serializeValue', () => {
   })
 
   it('rejects sparse arrays', () => {
-    const value = new Array(2)
+    const value: unknown[] = []
+    value.length = 2
     value[1] = 'x'
 
     expect(() => serializeValue(value)).toThrow('Sparse arrays cannot be serialized.')
@@ -50,9 +57,23 @@ describe('serializeValue', () => {
   })
 
   it('rejects unsupported objects commonly involved in server gadget chains', () => {
-    expect(() => serializeValue(new Date())).toThrow('Unsupported object')
-    expect(() => serializeValue(new URL('https://example.com'))).toThrow('Unsupported object')
-    expect(() => serializeValue(new Error('boom'))).toThrow('Unsupported object')
+    expect(() => serializeValue(new Date())).toThrow('[object Date]')
+    expect(() => serializeValue(new URL('https://example.com'))).toThrow('[object URL]')
+    expect(() => serializeValue(new Error('boom'))).toThrow('[object Error]')
+    expect(() => serializeValue(new Date())).toThrow(
+      'Only primitives, plain objects, arrays, Map, Set',
+    )
+    expect(() => serializeValue(new Date())).toThrow('noSerialize()')
+  })
+
+  it('includes the constructor name for custom non-serializable instances', () => {
+    class MotionValueLike {
+      current = 1
+    }
+
+    expect(() => serializeValue(new MotionValueLike())).toThrow(
+      'Unsupported object [object Object] (constructor: MotionValueLike).',
+    )
   })
 
   it('rejects non-finite numbers', () => {
@@ -61,6 +82,21 @@ describe('serializeValue', () => {
     expect(() => serializeValue(-Infinity)).toThrow('Non-finite numbers cannot be serialized.')
   })
 
+  it('serializes noSerialize values as undefined', () => {
+    const serialized = serializeValue({
+      fn: noSerialize(() => 'hidden'),
+      nested: noSerialize({ answer: 42 }),
+    })
+
+    expect(serialized).toEqual({
+      __eclipsa_type: 'object',
+      entries: [
+        ['fn', { __eclipsa_type: 'undefined' }],
+        ['nested', { __eclipsa_type: 'undefined' }],
+      ],
+    })
+  })
+
   it('keeps hostile keys inert on decode', () => {
     const decoded = deserializeValue({
       __eclipsa_type: 'object',
@@ -101,15 +137,28 @@ describe('serializeValue', () => {
     }
     expect(() => serializeValue(deep)).toThrow('maximum depth')
 
-    expect(() => serializeValue(new Array(10_100).fill(0))).toThrow('maximum entry budget')
+    expect(() => serializeValue(Array.from({ length: 10_100 }, () => 0))).toThrow(
+      'maximum entry budget',
+    )
   })
 
   it('escapes script-breaking content', () => {
     const escaped = escapeJSONScriptText('"</script>\u2028\u2029&<>"')
     expect(escaped).not.toContain('</script>')
     expect(escaped).toContain('\\u003C')
+    expect(escaped).toContain('\\u003E')
     expect(escaped).toContain('\\u2028')
     expect(escaped).toContain('\\u2029')
     expect(escaped).toContain('\\u0026')
   })
+
+  it('keeps raw inline script operators intact while escaping html terminators', () => {
+    const escaped = escapeInlineScriptText('(()=>a > b && c < d)</script>\u2028\u2029')
+    expect(escaped).not.toContain('</script>')
+    expect(escaped).toContain('=>a > b')
+    expect(escaped).not.toContain('\\u003E')
+    expect(escaped).toContain('\\u003C')
+    expect(escaped).toContain('\\u2028')
+    expect(escaped).toContain('\\u2029')
+  })
 })
diff --git a/packages/eclipsa/core/serialize.ts b/packages/eclipsa/core/serialize.ts
index db19f8b..e6decf2 100644
--- a/packages/eclipsa/core/serialize.ts
+++ b/packages/eclipsa/core/serialize.ts
@@ -1,3 +1,6 @@
+import { isNoSerialize } from './no-serialize.ts'
+import { isPlainObject } from './shared.ts'
+
 export interface SerializedUndefined {
   __eclipsa_type: 'undefined'
 }
@@ -53,12 +56,30 @@ const DEFAULT_MAX_ENTRIES = 10_000
 
 const RESERVED_KEYS = new Set(['__proto__', 'constructor', 'prototype'])
 
-const isPlainObject = (value: unknown): value is Record<string, unknown> => {
-  if (!value || typeof value !== 'object') {
-    return false
+const getSerializedObjectTag = (value: object) => Object.prototype.toString.call(value)
+
+const getSerializedConstructorName = (value: object) => {
+  const constructor = value.constructor
+  if (typeof constructor !== 'function') {
+    return null
   }
-  const proto = Object.getPrototypeOf(value)
-  return proto === Object.prototype || proto === null
+  const name = constructor.name
+  return typeof name === 'string' && name.length > 0 ? name : null
+}
+
+const createUnsupportedObjectError = (value: object) => {
+  const tag = getSerializedObjectTag(value)
+  const constructorName = getSerializedConstructorName(value)
+  const constructorLabel =
+    constructorName && constructorName !== 'Object' && constructorName !== 'Array'
+      ? ` (constructor: ${constructorName})`
+      : ''
+
+  return new TypeError(
+    `Unsupported object ${tag}${constructorLabel}. ` +
+      'Only primitives, plain objects, arrays, Map, Set, undefined, and registered references can be serialized. ' +
+      'For runtime-only values, wrap them with noSerialize() or avoid capturing them in resumable props, state, or callbacks.',
+  )
 }
 
 const assertSafeEntryBudget = (count: number, maxEntries: number) => {
@@ -125,6 +146,14 @@ const serializeUnknown = (
 ): SerializedValue => {
   assertSafeDepth(depth, state.maxDepth)
 
+  if (isNoSerialize(value)) {
+    state.entryCount += 1
+    assertSafeEntryBudget(state.entryCount, state.maxEntries)
+    return {
+      __eclipsa_type: 'undefined',
+    }
+  }
+
   const reference = state.serializeReference?.(value) ?? null
   if (reference) {
     state.entryCount += 1
@@ -175,7 +204,7 @@ const serializeUnknown = (
     value instanceof ArrayBuffer ||
     ArrayBuffer.isView(value)
   ) {
-    throw new TypeError(`Unsupported object ${Object.prototype.toString.call(value)}.`)
+    throw createUnsupportedObjectError(value)
   }
   if (stack.has(value)) {
     throw new TypeError('Circular values cannot be serialized.')
@@ -230,7 +259,7 @@ const serializeUnknown = (
       }
     }
 
-    throw new TypeError(`Unsupported object ${Object.prototype.toString.call(value)}.`)
+    throw createUnsupportedObjectError(value)
   } finally {
     stack.delete(value)
   }
@@ -381,6 +410,13 @@ export const escapeJSONScriptText = (json: string) =>
     .replaceAll('\u2028', '\\u2028')
     .replaceAll('\u2029', '\\u2029')
 
+export const escapeInlineScriptText = (script: string) =>
+  script
+    .replaceAll('<', '\\u003C')
+    .replaceAll('&', '\\u0026')
+    .replaceAll('\u2028', '\\u2028')
+    .replaceAll('\u2029', '\\u2029')
+
 export const serializeJSONScriptContent = (value: unknown, options?: SerializeValueOptions) =>
   escapeJSONScriptText(JSON.stringify(serializeValue(value, options)))
 
diff --git a/packages/eclipsa/core/shared.ts b/packages/eclipsa/core/shared.ts
new file mode 100644
index 0000000..5311d1f
--- /dev/null
+++ b/packages/eclipsa/core/shared.ts
@@ -0,0 +1,11 @@
+export const IS_BROWSER = typeof window !== 'undefined' && typeof document !== 'undefined'
+
+export const IS_SSR = !IS_BROWSER
+
+export const isPlainObject = (value: unknown): value is Record<string, unknown> => {
+  if (!value || typeof value !== 'object') {
+    return false
+  }
+  const proto = Object.getPrototypeOf(value)
+  return proto === Object.prototype || proto === null
+}
diff --git a/packages/eclipsa/core/signal.test.ts b/packages/eclipsa/core/signal.test.ts
index bab4595..7b36ca8 100644
--- a/packages/eclipsa/core/signal.test.ts
+++ b/packages/eclipsa/core/signal.test.ts
@@ -1,8 +1,8 @@
 import { describe, expect, it } from 'vitest'
 import { jsxDEV } from '../jsx/jsx-dev-runtime.ts'
-import { component$ } from './component.ts'
+import { Dynamic } from './dynamic.ts'
 import { __eclipsaComponent } from './internal.ts'
-import { onCleanup, useSignal, useWatch } from './signal.ts'
+import { effect, onCleanup, signal, useComputed, useSignal, useWatch } from './signal.ts'
 import { renderClientInsertable, type RuntimeContainer, withRuntimeContainer } from './runtime.ts'
 
 class FakeNode {}
@@ -55,17 +55,26 @@ const createContainer = () =>
   ({
     actions: new Map(),
     actionStates: new Map(),
+    asyncSignalSnapshotCache: new Map(),
+    asyncSignalStates: new Map(),
+    atoms: new WeakMap(),
     components: new Map(),
     dirty: new Set(),
+    dirtyFlushQueued: false,
     doc: new FakeDocument() as unknown as Document,
+    eventDispatchPromise: null,
     imports: new Map(),
+    interactivePrefetchCheckQueued: false,
     loaderStates: new Map(),
     loaders: new Map(),
     id: 'rt-test',
+    nextAtomId: 0,
     nextComponentId: 0,
     nextElementId: 0,
     nextScopeId: 0,
     nextSignalId: 0,
+    pendingSuspensePromises: new Set(),
+    resumeReadyPromise: null,
     rootChildCursor: 0,
     rootElement: undefined,
     router: null,
@@ -97,7 +106,7 @@ const withFakeNodeGlobal = <T>(fn: () => T) => {
 }
 
 const renderComponent = (render: () => string) => {
-  const App = component$(__eclipsaComponent(render, 'component-signal-test', () => []))
+  const App = __eclipsaComponent(render, 'component-signal-test', () => [])
   const container = createContainer()
   withRuntimeContainer(container, () => {
     renderClientInsertable(jsxDEV(App, {}, null, false, {}), container)
@@ -118,7 +127,242 @@ describe('useSignal', () => {
   })
 })
 
+describe('signal', () => {
+  it('does not re-run effects for equal primitive values or the same object reference', () => {
+    const count = signal(1)
+    const initialObject = { label: 'same' }
+    const state = signal(initialObject)
+    const values: string[] = []
+
+    effect(() => {
+      values.push(`${count.value}:${state.value === initialObject ? 'same' : 'new'}`)
+    })
+
+    count.value = 1
+    state.value = initialObject
+    state.value = { label: 'same' }
+    count.value = 2
+
+    expect(values).toEqual(['1:same', '1:new', '2:new'])
+  })
+})
+
 describe('useWatch', () => {
+  it('does not re-run for equal primitive values or the same object reference', () => {
+    withFakeNodeGlobal(() => {
+      let count!: { value: number }
+      let state!: { value: { label: string } }
+      const initialObject = { label: 'same' }
+      const values: string[] = []
+
+      renderComponent(() => {
+        count = useSignal(1)
+        state = useSignal(initialObject)
+
+        useWatch(() => {
+          values.push(`${count.value}:${state.value === initialObject ? 'same' : 'new'}`)
+        })
+
+        return 'ready'
+      })
+
+      count.value = 1
+      state.value = initialObject
+      state.value = { label: 'same' }
+      count.value = 2
+
+      expect(values).toEqual(['1:same', '1:new', '2:new'])
+    })
+  })
+
+  it('reacts to signal changes read through managed component prop getters', () => {
+    withFakeNodeGlobal(() => {
+      let visible!: { value: boolean }
+      const values: number[] = []
+
+      const Child = __eclipsaComponent(
+        (props: { animate: { opacity: number } }) => {
+          useWatch(() => {
+            values.push(props.animate.opacity)
+          }, [() => props.animate])
+
+          return 'ready'
+        },
+        'component-prop-watch-child',
+        () => [],
+      )
+
+      const App = __eclipsaComponent(
+        () => {
+          visible = useSignal(true)
+
+          return jsxDEV(
+            Child as never,
+            {
+              get animate() {
+                return visible.value ? { opacity: 1 } : { opacity: 0 }
+              },
+            },
+            null,
+            false,
+            {},
+          )
+        },
+        'component-prop-watch-app',
+        () => [],
+      )
+
+      const container = createContainer()
+      withRuntimeContainer(container, () => {
+        renderClientInsertable(jsxDEV(App, {}, null, false, {}), container)
+      })
+
+      visible.value = false
+      visible.value = true
+
+      expect(values).toEqual([1, 0, 1])
+    })
+  })
+
+  it('skips component re-renders for optimized roots when local signals only drive watches', () => {
+    withFakeNodeGlobal(() => {
+      let trigger!: { value: number }
+      let renderCount = 0
+      const watchValues: number[] = []
+
+      const App = __eclipsaComponent(
+        () => {
+          renderCount += 1
+          trigger = useSignal(0)
+
+          useWatch(() => {
+            watchValues.push(trigger.value)
+          })
+
+          return 'ready'
+        },
+        'component-optimized-root-watch-only',
+        () => [],
+        undefined,
+        {
+          optimizedRoot: true,
+        },
+      )
+
+      const container = createContainer()
+      withRuntimeContainer(container, () => {
+        renderClientInsertable(jsxDEV(App, {}, null, false, {}), container)
+      })
+
+      trigger.value = 1
+
+      expect(renderCount).toBe(1)
+      expect(watchValues).toEqual([0, 1])
+    })
+  })
+
+  it('preserves getter props through non-managed wrapper components on the client', () => {
+    withFakeNodeGlobal(() => {
+      let visible!: { value: boolean }
+      const values: number[] = []
+
+      const Child = __eclipsaComponent(
+        (props: { animate: { opacity: number } }) => {
+          useWatch(() => {
+            values.push(props.animate.opacity)
+          }, [() => props.animate])
+
+          return 'ready'
+        },
+        'component-prop-watch-wrapper-child',
+        () => [],
+      )
+
+      const Wrapper = (props: { animate: { opacity: number } }) =>
+        jsxDEV(Child as never, props, null, false, {})
+
+      const App = __eclipsaComponent(
+        () => {
+          visible = useSignal(true)
+
+          return jsxDEV(
+            Wrapper as never,
+            {
+              get animate() {
+                return visible.value ? { opacity: 1 } : { opacity: 0 }
+              },
+            },
+            null,
+            false,
+            {},
+          )
+        },
+        'component-prop-watch-wrapper-app',
+        () => [],
+      )
+
+      const container = createContainer()
+      withRuntimeContainer(container, () => {
+        renderClientInsertable(jsxDEV(App, {}, null, false, {}), container)
+      })
+
+      visible.value = false
+      visible.value = true
+
+      expect(values).toEqual([1, 0, 1])
+    })
+  })
+
+  it('preserves getter props through Dynamic on the client', () => {
+    withFakeNodeGlobal(() => {
+      let visible!: { value: boolean }
+      const values: number[] = []
+
+      const Child = __eclipsaComponent(
+        (props: { animate: { opacity: number } }) => {
+          useWatch(() => {
+            values.push(props.animate.opacity)
+          }, [() => props.animate])
+
+          return 'ready'
+        },
+        'component-prop-watch-dynamic-child',
+        () => [],
+      )
+
+      const App = __eclipsaComponent(
+        () => {
+          visible = useSignal(true)
+
+          return jsxDEV(
+            Dynamic as never,
+            {
+              component: Child,
+              get animate() {
+                return visible.value ? { opacity: 1 } : { opacity: 0 }
+              },
+            },
+            null,
+            false,
+            {},
+          )
+        },
+        'component-prop-watch-dynamic-app',
+        () => [],
+      )
+
+      const container = createContainer()
+      withRuntimeContainer(container, () => {
+        renderClientInsertable(jsxDEV(App, {}, null, false, {}), container)
+      })
+
+      visible.value = false
+      visible.value = true
+
+      expect(values).toEqual([1, 0, 1])
+    })
+  })
+
   it('auto-tracks callback reads when dependencies are omitted', () => {
     withFakeNodeGlobal(() => {
       let tracked!: { value: number }
@@ -247,3 +491,86 @@ describe('useWatch', () => {
     })
   })
 })
+
+describe('useComputed', () => {
+  it('auto-tracks callback reads when dependencies are omitted', () => {
+    withFakeNodeGlobal(() => {
+      let tracked!: { value: number }
+      let untracked!: { value: string }
+      let computed!: { value: string }
+      const values: string[] = []
+
+      renderComponent(() => {
+        tracked = useSignal(0)
+        untracked = useSignal('a')
+        computed = useComputed(() => {
+          const snapshot = `${tracked.value}:${untracked.value}`
+          values.push(snapshot)
+          return snapshot
+        })
+
+        return 'ready'
+      })
+
+      untracked.value = 'b'
+      tracked.value = 1
+
+      expect(values).toEqual(['0:a', '0:b', '1:b'])
+      expect(computed.value).toBe('1:b')
+    })
+  })
+
+  it('re-runs only for explicitly listed signal dependencies', () => {
+    withFakeNodeGlobal(() => {
+      let tracked!: { value: number }
+      let untracked!: { value: string }
+      let computed!: { value: string }
+      const values: string[] = []
+
+      renderComponent(() => {
+        tracked = useSignal(0)
+        untracked = useSignal('a')
+        computed = useComputed(() => {
+          const snapshot = `${tracked.value}:${untracked.value}`
+          values.push(snapshot)
+          return snapshot
+        }, [tracked])
+
+        return 'ready'
+      })
+
+      untracked.value = 'b'
+      tracked.value = 1
+
+      expect(values).toEqual(['0:a', '1:b'])
+      expect(computed.value).toBe('1:b')
+    })
+  })
+
+  it('accepts getter dependencies without auto-tracking callback reads', () => {
+    withFakeNodeGlobal(() => {
+      let tracked!: { value: number }
+      let untracked!: { value: string }
+      let computed!: { value: string }
+      const values: string[] = []
+
+      renderComponent(() => {
+        tracked = useSignal(0)
+        untracked = useSignal('a')
+        computed = useComputed(() => {
+          const snapshot = `${tracked.value}:${untracked.value}`
+          values.push(snapshot)
+          return snapshot
+        }, [() => tracked.value])
+
+        return 'ready'
+      })
+
+      untracked.value = 'b'
+      tracked.value = 1
+
+      expect(values).toEqual(['0:a', '1:b'])
+      expect(computed.value).toBe('1:b')
+    })
+  })
+})
diff --git a/packages/eclipsa/core/signal.ts b/packages/eclipsa/core/signal.ts
index 22b6fa5..28d2c93 100644
--- a/packages/eclipsa/core/signal.ts
+++ b/packages/eclipsa/core/signal.ts
@@ -11,6 +11,7 @@ import {
   useRuntimeSignal,
   writeAsyncSignalSnapshot,
 } from './runtime.ts'
+import { setSignalMeta, type SignalMeta } from './internal.ts'
 import { createPendingSignalError, isPendingSignalError } from './suspense.ts'
 
 export interface Signal<T> {
@@ -20,7 +21,7 @@ export interface Signal<T> {
 interface SignalFactory {
   <T>(value: T): Signal<T>
   <T>(value?: T | undefined): Signal<T | undefined>
-  computed<T>(value: () => T | Promise<T>): Signal<T>
+  computed<T>(value: () => T | Promise<T>, dependencies?: WatchDependency[]): Signal<T>
 }
 
 interface ComputedSnapshot<T> {
@@ -48,7 +49,7 @@ const createComputedSnapshot = <T>(
 
 const createComputedSignalFactory =
   (createBaseSignal: <T>(value: T) => Signal<T>): SignalFactory['computed'] =>
-  <T>(fn: () => T | Promise<T>) => {
+  <T>(fn: () => T | Promise<T>, dependencies?: WatchDependency[]) => {
     const state = createBaseSignal<ComputedSnapshot<T>>(
       createComputedSnapshot({
         status: 'pending',
@@ -63,89 +64,98 @@ const createComputedSignalFactory =
     let useSeededSnapshot = !!seededSnapshot && seededSnapshot.status !== 'pending'
     let version = 0
 
-    effect(() => {
-      if (useSeededSnapshot && seededSnapshot) {
-        useSeededSnapshot = false
-        state.value = seededSnapshot
-        if (signalId !== null) {
-          writeAsyncSignalSnapshot(signalId, seededSnapshot, runtimeContainer)
-        }
-        return
-      }
-
-      const currentVersion = ++version
-      try {
-        const nextValue = fn()
-        if (isPromiseLike<T>(nextValue)) {
-          const pending = createComputedSnapshot<T>({
-            promise: nextValue,
-            status: 'pending',
-          })
-          state.value = pending
+    createEffect(
+      () => {
+        if (useSeededSnapshot && seededSnapshot) {
+          useSeededSnapshot = false
+          state.value = seededSnapshot
           if (signalId !== null) {
-            writeAsyncSignalSnapshot(signalId, pending, runtimeContainer)
+            writeAsyncSignalSnapshot(signalId, seededSnapshot, runtimeContainer)
           }
-          nextValue.then(
-            (resolved) => {
-              if (currentVersion !== version) {
-                return
-              }
-              const completed = createComputedSnapshot<T>({
-                status: 'resolved',
-                value: resolved,
-              })
-              state.value = completed
-              if (signalId !== null) {
-                writeAsyncSignalSnapshot(signalId, completed, runtimeContainer)
-              }
-            },
-            (error) => {
-              if (currentVersion !== version) {
-                return
-              }
-              const failed = createComputedSnapshot<T>({
-                error,
-                status: 'rejected',
-              })
-              state.value = failed
-              if (signalId !== null) {
-                writeAsyncSignalSnapshot(signalId, failed, runtimeContainer)
-              }
-            },
-          )
           return
         }
 
-        const resolved = createComputedSnapshot<T>({
-          status: 'resolved',
-          value: nextValue,
-        })
-        state.value = resolved
-        if (signalId !== null) {
-          writeAsyncSignalSnapshot(signalId, resolved, runtimeContainer)
-        }
-      } catch (error) {
-        if (isPendingSignalError(error)) {
-          const pending = createComputedSnapshot<T>({
-            promise: error.promise as Promise<T>,
-            status: 'pending',
+        const currentVersion = ++version
+        try {
+          const nextValue = fn()
+          if (isPromiseLike<T>(nextValue)) {
+            const pending = createComputedSnapshot<T>({
+              promise: nextValue,
+              status: 'pending',
+            })
+            state.value = pending
+            if (signalId !== null) {
+              writeAsyncSignalSnapshot(signalId, pending, runtimeContainer)
+            }
+            nextValue.then(
+              (resolved) => {
+                if (currentVersion !== version) {
+                  return
+                }
+                const completed = createComputedSnapshot<T>({
+                  status: 'resolved',
+                  value: resolved,
+                })
+                state.value = completed
+                if (signalId !== null) {
+                  writeAsyncSignalSnapshot(signalId, completed, runtimeContainer)
+                }
+              },
+              (error) => {
+                if (currentVersion !== version) {
+                  return
+                }
+                const failed = createComputedSnapshot<T>({
+                  error,
+                  status: 'rejected',
+                })
+                state.value = failed
+                if (signalId !== null) {
+                  writeAsyncSignalSnapshot(signalId, failed, runtimeContainer)
+                }
+              },
+            )
+            return
+          }
+
+          const resolved = createComputedSnapshot<T>({
+            status: 'resolved',
+            value: nextValue,
           })
-          state.value = pending
+          state.value = resolved
           if (signalId !== null) {
-            writeAsyncSignalSnapshot(signalId, pending, runtimeContainer)
+            writeAsyncSignalSnapshot(signalId, resolved, runtimeContainer)
+          }
+        } catch (error) {
+          if (isPendingSignalError(error)) {
+            const pending = createComputedSnapshot<T>({
+              promise: error.promise as Promise<T>,
+              status: 'pending',
+            })
+            state.value = pending
+            if (signalId !== null) {
+              writeAsyncSignalSnapshot(signalId, pending, runtimeContainer)
+            }
+            return
+          }
+          const failed = createComputedSnapshot<T>({
+            error,
+            status: 'rejected',
+          })
+          state.value = failed
+          if (signalId !== null) {
+            writeAsyncSignalSnapshot(signalId, failed, runtimeContainer)
           }
-          return
-        }
-        const failed = createComputedSnapshot<T>({
-          error,
-          status: 'rejected',
-        })
-        state.value = failed
-        if (signalId !== null) {
-          writeAsyncSignalSnapshot(signalId, failed, runtimeContainer)
         }
-      }
-    })
+      },
+      dependencies
+        ? {
+            dependencies,
+            errorLabel: 'useComputed',
+            untracked: true,
+          }
+        : undefined,
+    )
 
     const handle = {} as Signal<T>
     Object.defineProperty(handle, 'value', {
@@ -165,6 +175,16 @@ const createComputedSignalFactory =
         return snapshot.value as T
       },
     })
+    if (signalId !== null) {
+      setSignalMeta(handle, {
+        get: () => handle.value,
+        id: signalId,
+        kind: 'computed-signal',
+        set: () => {
+          throw new TypeError('Computed signals are read-only.')
+        },
+      } satisfies SignalMeta<T>)
+    }
     return handle
   }
 
@@ -182,4 +202,6 @@ export const onVisible = (fn: () => void) => createOnVisible(fn)
 export const useWatch = (fn: () => void, dependencies?: WatchDependency[]) =>
   createWatch(fn, dependencies)
 
-export const useComputed$ = <T>(fn: () => T | Promise<T>) => useSignal.computed(fn)
+export const useComputed = <T>(fn: () => T | Promise<T>, dependencies?: WatchDependency[]) =>
+  useSignal.computed(fn, dependencies)
+export const useComputed$ = useComputed
diff --git a/packages/eclipsa/core/ssr-fast-path.test.ts b/packages/eclipsa/core/ssr-fast-path.test.ts
new file mode 100644
index 0000000..0418e9c
--- /dev/null
+++ b/packages/eclipsa/core/ssr-fast-path.test.ts
@@ -0,0 +1,70 @@
+import { Fragment, jsxDEV } from 'eclipsa/jsx-dev-runtime'
+import { describe, expect, it } from 'vitest'
+import { ssrAttr, ssrRaw, ssrTemplate } from '../jsx/jsx-dev-runtime.ts'
+import { renderSSR } from './ssr.ts'
+
+describe('SSR fast path helpers', () => {
+  it('renders dynamic attributes and children through ssrTemplate', () => {
+    const View = (props) =>
+      ssrTemplate(
+        ['<section', '><h1>', '</h1><p>', '</p><input', ' /></section>'],
+        ssrAttr('data-title', props.title),
+        props.title,
+        props.count,
+        ssrAttr('disabled', true),
+      )
+    const { html } = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(View, { title: '<hello>', count: 3 }, void 0, false, {
+        fileName: 'packages/eclipsa/core/ssr-fast-path.test.ts',
+        lineNumber: 16,
+        columnNumber: 38,
+      }),
+    )
+    expect(html).toBe(
+      '<section data-title="&lt;hello&gt;"><h1>&lt;hello&gt;</h1><p>3</p><input disabled /></section>',
+    )
+  })
+  it('omits nullable attributes in ssrTemplate', () => {
+    const { html } = renderSSR(() =>
+      ssrTemplate(['<div', '>ready</div>'], ssrAttr('data-state', null)),
+    )
+    expect(html).toBe('<div>ready</div>')
+  })
+  it('never renders key attributes in SSR output', () => {
+    const { html } = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(
+        Fragment,
+        {
+          children: [
+            ssrTemplate(['<div', '>template</div>'], ssrAttr('key', 'template-key')),
+            /* @__PURE__ */ jsxDEV('div', { children: 'jsx' }, 'jsx-key', false, {
+              fileName: 'packages/eclipsa/core/ssr-fast-path.test.ts',
+              lineNumber: 35,
+              columnNumber: 9,
+            }),
+          ],
+        },
+        void 0,
+        true,
+        {
+          fileName: 'packages/eclipsa/core/ssr-fast-path.test.ts',
+          lineNumber: 33,
+          columnNumber: 7,
+        },
+      ),
+    )
+    expect(html).toContain('<div>template</div>')
+    expect(html).toContain('<div>jsx</div>')
+    expect(html).not.toContain(' key=')
+  })
+
+  it('renders only helper-created ssrRaw values as trusted HTML', () => {
+    const trusted = ssrRaw('<span>trusted</span>')
+    const forged = { ...trusted, value: '<img src=x onerror="alert(1)" />' }
+
+    const { html } = renderSSR(() => ssrTemplate(['<div>', '', '</div>'], trusted, forged))
+
+    expect(html).toBe('<div><span>trusted</span></div>')
+    expect(html).not.toContain('onerror')
+  })
+})
diff --git a/packages/eclipsa/core/ssr-fast-path.test.tsx b/packages/eclipsa/core/ssr-fast-path.test.tsx
deleted file mode 100644
index 39492f8..0000000
--- a/packages/eclipsa/core/ssr-fast-path.test.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { ssrAttr, ssrTemplate } from '../jsx/jsx-dev-runtime.ts'
-import { renderSSR } from './ssr.ts'
-
-describe('SSR fast path helpers', () => {
-  it('renders dynamic attributes and children through ssrTemplate', () => {
-    const View = (props: { count: number; title: string }) =>
-      ssrTemplate(
-        ['<section', '><h1>', '</h1><p>', '</p><input', ' /></section>'],
-        ssrAttr('data-title', props.title),
-        props.title,
-        props.count,
-        ssrAttr('disabled', true),
-      )
-
-    const { html } = renderSSR(() => <View title={'<hello>'} count={3} />)
-
-    expect(html).toBe(
-      '<section data-title="&lt;hello&gt;"><h1>&lt;hello&gt;</h1><p>3</p><input disabled /></section>',
-    )
-  })
-
-  it('omits nullable attributes in ssrTemplate', () => {
-    const { html } = renderSSR(() =>
-      ssrTemplate(['<div', '>ready</div>'], ssrAttr('data-state', null)),
-    )
-
-    expect(html).toBe('<div>ready</div>')
-  })
-})
diff --git a/packages/eclipsa/core/ssr-loader.test.tsx b/packages/eclipsa/core/ssr-loader.test.ts
similarity index 56%
rename from packages/eclipsa/core/ssr-loader.test.tsx
rename to packages/eclipsa/core/ssr-loader.test.ts
index 2e3390b..0148939 100644
--- a/packages/eclipsa/core/ssr-loader.test.tsx
+++ b/packages/eclipsa/core/ssr-loader.test.ts
@@ -1,37 +1,44 @@
+import { jsxDEV } from 'eclipsa/jsx-dev-runtime'
 import { Hono } from 'hono'
 import { describe, expect, it } from 'vitest'
-import { component$ } from './component.ts'
 import { __eclipsaLoader } from './loader.ts'
 import { renderSSRAsync } from './ssr.ts'
-
 const useProfile = __eclipsaLoader('profile-ssr', [], async () => ({
   ready: true,
 }))
-
-const App = component$(() => {
+const App = () => {
   const profile = useProfile()
-  return <div>{profile.data?.ready ? 'ready' : 'pending'}</div>
-})
-
+  return /* @__PURE__ */ jsxDEV(
+    'div',
+    { children: profile.data?.ready ? 'ready' : 'pending' },
+    void 0,
+    false,
+    {
+      fileName: 'packages/eclipsa/core/ssr-loader.test.ts',
+      lineNumber: 12,
+      columnNumber: 10,
+    },
+  )
+}
 describe('SSR loader discovery', () => {
   it('resolves component-local loaders during SSR and persists them into the payload', async () => {
     const app = new Hono()
-
     app.get('/', async (c) => {
-      const result = await renderSSRAsync(() => <App />, {
-        context: c,
-      })
+      const result = await renderSSRAsync(
+        () =>
+          /* @__PURE__ */ jsxDEV(App, {}, void 0, false, {
+            fileName: 'packages/eclipsa/core/ssr-loader.test.ts',
+            lineNumber: 20,
+            columnNumber: 49,
+          }),
+        {
+          context: c,
+        },
+      )
       return c.json(result)
     })
-
     const response = await app.request('http://localhost/')
-    const body = (await response.json()) as {
-      html: string
-      payload: {
-        loaders: Record<string, { data: unknown; error: unknown; loaded: boolean }>
-      }
-    }
-
+    const body = await response.json()
     expect(body.html).toContain('ready')
     expect(body.payload.loaders['profile-ssr']).toEqual({
       data: {
diff --git a/packages/eclipsa/core/ssr.ts b/packages/eclipsa/core/ssr.ts
index ad4f738..7762b91 100644
--- a/packages/eclipsa/core/ssr.ts
+++ b/packages/eclipsa/core/ssr.ts
@@ -1,13 +1,13 @@
 import type { Context } from 'hono'
 import type { JSX } from '../jsx/types.ts'
 import { renderToString } from '../jsx/mod.ts'
+import { createComponentBoundaryHtmlComment } from './runtime/markers.ts'
 import {
   beginAsyncSSRContainer,
   beginSSRContainer,
   collectPendingSuspenseBoundaryIds,
   getResumePayloadScriptContent,
   getStreamingResumeBootstrapScriptContent as getStreamingResumeBootstrapScriptContentFromRuntime,
-  renderResolvedSuspenseBoundaryToString,
   toResumePayload,
   toResumePayloadSubset,
   type ResumePayload,
@@ -47,6 +47,11 @@ const createStreamingResumePayload = (
   renderedComponentIds: Set<string>,
 ): ResumePayload => toResumePayloadSubset(container, ['$root', ...renderedComponentIds])
 
+const getPendingSuspensePromises = (container: RuntimeContainer) =>
+  collectPendingSuspenseBoundaryIds(container)
+    .map((boundaryId) => container.components.get(boundaryId)?.suspensePromise ?? null)
+    .filter((promise): promise is Promise<unknown> => !!promise)
+
 export const renderSSR = (
   render: () => JSX.Element | JSX.Element[],
   options?: {
@@ -70,6 +75,15 @@ export const renderSSRAsync = async (
   },
 ): Promise<SSRRenderResult> => {
   const asyncSignalSnapshotCache = new Map<string, unknown>()
+  const externalRenderCache = new Map<
+    string,
+    {
+      error?: unknown
+      html?: string
+      pending?: Promise<string>
+      status: 'pending' | 'rejected' | 'resolved'
+    }
+  >()
   const seededLoaderStates = new Map<string, { data: unknown; error: unknown; loaded: boolean }>()
 
   for (let attempt = 0; attempt < 10; attempt += 1) {
@@ -88,13 +102,15 @@ export const renderSSRAsync = async (
       },
       {
         asyncSignalSnapshotCache,
+        externalRenderCache,
       },
     )
 
     try {
       const html = withRuntimeContainer(container, () => renderToString(result))
-      if (container.pendingSuspensePromises.size > 0) {
-        await Promise.allSettled([...container.pendingSuspensePromises])
+      const pendingSuspensePromises = getPendingSuspensePromises(container)
+      if (container.pendingSuspensePromises.size > 0 || pendingSuspensePromises.length > 0) {
+        await Promise.allSettled([...container.pendingSuspensePromises, ...pendingSuspensePromises])
         continue
       }
       asyncSignalSnapshotCache.clear()
@@ -130,8 +146,8 @@ export const renderSSRAsync = async (
 }
 
 const extractBoundaryHtml = (html: string, boundaryId: string) => {
-  const startToken = `<!--ec:c:${boundaryId}:start-->`
-  const endToken = `<!--ec:c:${boundaryId}:end-->`
+  const startToken = createComponentBoundaryHtmlComment(boundaryId, 'start')
+  const endToken = createComponentBoundaryHtmlComment(boundaryId, 'end')
   const startIndex = html.indexOf(startToken)
   if (startIndex < 0) {
     return null
@@ -153,6 +169,15 @@ const renderStreamingAttempt = async (
   },
   seededLoaderStates: Map<string, { data: unknown; error: unknown; loaded: boolean }>,
   asyncSignalSnapshotCache: Map<string, unknown>,
+  externalRenderCache: Map<
+    string,
+    {
+      error?: unknown
+      html?: string
+      pending?: Promise<string>
+      status: 'pending' | 'rejected' | 'resolved'
+    }
+  >,
 ): Promise<{
   container: RuntimeContainer
   html: string
@@ -175,11 +200,16 @@ const renderStreamingAttempt = async (
       },
       {
         asyncSignalSnapshotCache,
+        externalRenderCache,
       },
     )
 
     try {
       const html = withRuntimeContainer(container, () => renderToString(result))
+      if (container.pendingSuspensePromises.size > 0) {
+        await Promise.allSettled(container.pendingSuspensePromises)
+        continue
+      }
       const renderedComponentIds = collectRenderedComponentIdsFromHtml(html)
       return {
         container,
@@ -224,12 +254,22 @@ export const renderSSRStream = async (
   },
 ): Promise<SSRStreamRenderResult> => {
   const asyncSignalSnapshotCache = new Map<string, unknown>()
+  const externalRenderCache = new Map<
+    string,
+    {
+      error?: unknown
+      html?: string
+      pending?: Promise<string>
+      status: 'pending' | 'rejected' | 'resolved'
+    }
+  >()
   const seededLoaderStates = new Map<string, { data: unknown; error: unknown; loaded: boolean }>()
   const initial = await renderStreamingAttempt(
     render,
     options ?? {},
     seededLoaderStates,
     asyncSignalSnapshotCache,
+    externalRenderCache,
   )
 
   if (initial.pendingBoundaryIds.length === 0) {
@@ -261,6 +301,7 @@ export const renderSSRStream = async (
           options ?? {},
           seededLoaderStates,
           asyncSignalSnapshotCache,
+          externalRenderCache,
         )
 
         const nextPending = new Set(next.pendingBoundaryIds)
diff --git a/packages/eclipsa/core/style.test.ts b/packages/eclipsa/core/style.test.ts
new file mode 100644
index 0000000..1ff39af
--- /dev/null
+++ b/packages/eclipsa/core/style.test.ts
@@ -0,0 +1,278 @@
+import { jsxDEV } from 'eclipsa/jsx-dev-runtime'
+import { describe, expect, it } from 'vitest'
+import { __eclipsaComponent } from './internal.ts'
+import { renderClientInsertable, withRuntimeContainer } from './runtime.ts'
+import { renderSSR } from './ssr.ts'
+import { useStyleScoped } from './style.ts'
+class FakeNode {
+  childNodes = []
+  nodeType = 0
+  parentNode = null
+}
+class FakeText extends FakeNode {
+  constructor(data) {
+    super()
+    this.data = data
+    this.nodeType = 3
+  }
+}
+class FakeComment extends FakeNode {
+  constructor(data) {
+    super()
+    this.data = data
+    this.nodeType = 8
+  }
+}
+class FakeElement extends FakeNode {
+  constructor(tagName) {
+    super()
+    this.tagName = tagName
+    this.nodeType = 1
+  }
+  attributes = /* @__PURE__ */ new Map()
+  appendChild(node) {
+    node.parentNode = this
+    this.childNodes.push(node)
+    return node
+  }
+  setAttribute(name, value) {
+    this.attributes.set(name, value)
+  }
+}
+class FakeDocument {
+  createComment(data) {
+    return new FakeComment(data)
+  }
+  createElement(tagName) {
+    return new FakeElement(tagName)
+  }
+  createTextNode(data) {
+    return new FakeText(data)
+  }
+}
+const createContainer = () => ({
+  actions: /* @__PURE__ */ new Map(),
+  actionStates: /* @__PURE__ */ new Map(),
+  asyncSignalStates: /* @__PURE__ */ new Map(),
+  asyncSignalSnapshotCache: /* @__PURE__ */ new Map(),
+  atoms: /* @__PURE__ */ new WeakMap(),
+  components: /* @__PURE__ */ new Map(),
+  dirty: /* @__PURE__ */ new Set(),
+  doc: new FakeDocument(),
+  id: 'rt-test',
+  imports: /* @__PURE__ */ new Map(),
+  loaderStates: /* @__PURE__ */ new Map(),
+  loaders: /* @__PURE__ */ new Map(),
+  nextAtomId: 0,
+  nextComponentId: 0,
+  nextElementId: 0,
+  nextScopeId: 0,
+  nextSignalId: 0,
+  pendingSuspensePromises: /* @__PURE__ */ new Set(),
+  rootChildCursor: 0,
+  rootElement: void 0,
+  router: null,
+  scopes: /* @__PURE__ */ new Map(),
+  signals: /* @__PURE__ */ new Map(),
+  symbols: /* @__PURE__ */ new Map(),
+  visibilityCheckQueued: false,
+  visibilityListenersCleanup: null,
+  visibles: /* @__PURE__ */ new Map(),
+  watches: /* @__PURE__ */ new Map(),
+})
+const withFakeNodeGlobal = (fn) => {
+  const OriginalNode = globalThis.Node
+  globalThis.Node = FakeNode
+  try {
+    const result = fn()
+    if (result instanceof Promise) {
+      return result.finally(() => {
+        globalThis.Node = OriginalNode
+      })
+    }
+    globalThis.Node = OriginalNode
+    return result
+  } catch (error) {
+    globalThis.Node = OriginalNode
+    throw error
+  }
+}
+describe('useStyleScoped', () => {
+  it('scopes tagged template styles during SSR', () => {
+    const App = __eclipsaComponent(
+      () => {
+        void useStyleScoped`h1 { color: red; }`
+        return /* @__PURE__ */ jsxDEV(
+          'div',
+          {
+            children: /* @__PURE__ */ jsxDEV('h1', { children: 'hello' }, void 0, false, {
+              fileName: 'packages/eclipsa/core/style.test.ts',
+              lineNumber: 118,
+              columnNumber: 13,
+            }),
+          },
+          void 0,
+          false,
+          {
+            fileName: 'packages/eclipsa/core/style.test.ts',
+            lineNumber: 117,
+            columnNumber: 11,
+          },
+        )
+      },
+      'component-symbol',
+      () => [],
+    )
+    const { html, payload } = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(App, {}, void 0, false, {
+        fileName: 'packages/eclipsa/core/style.test.ts',
+        lineNumber: 126,
+        columnNumber: 47,
+      }),
+    )
+    const scopeId = payload.components.c0?.scope
+    expect(scopeId).toBeTruthy()
+    expect(html).toContain(`@scope ([data-e-scope="${scopeId}"]) {
+h1 { color: red; }
+}`)
+    expect(html).toContain(`data-e-scope="${scopeId}"`)
+  })
+  it('accepts string and style element inputs during SSR', () => {
+    const StringStyle = __eclipsaComponent(
+      () => {
+        useStyleScoped('button { color: blue; }')
+        return /* @__PURE__ */ jsxDEV('button', { children: 'save' }, void 0, false, {
+          fileName: 'packages/eclipsa/core/style.test.ts',
+          lineNumber: 138,
+          columnNumber: 16,
+        })
+      },
+      'string-style-symbol',
+      () => [],
+    )
+    const ElementStyle = __eclipsaComponent(
+      () => {
+        useStyleScoped(
+          /* @__PURE__ */ jsxDEV(
+            'style',
+            { media: 'screen', children: 'p { color: green; }' },
+            void 0,
+            false,
+            {
+              fileName: 'packages/eclipsa/core/style.test.ts',
+              lineNumber: 146,
+              columnNumber: 24,
+            },
+          ),
+        )
+        return /* @__PURE__ */ jsxDEV('p', { children: 'done' }, void 0, false, {
+          fileName: 'packages/eclipsa/core/style.test.ts',
+          lineNumber: 147,
+          columnNumber: 16,
+        })
+      },
+      'element-style-symbol',
+      () => [],
+    )
+    const stringRender = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(StringStyle, {}, void 0, false, {
+        fileName: 'packages/eclipsa/core/style.test.ts',
+        lineNumber: 153,
+        columnNumber: 42,
+      }),
+    )
+    const elementRender = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(ElementStyle, {}, void 0, false, {
+        fileName: 'packages/eclipsa/core/style.test.ts',
+        lineNumber: 154,
+        columnNumber: 43,
+      }),
+    )
+    expect(stringRender.html).toContain('button { color: blue; }')
+    expect(elementRender.html).toContain('<style media="screen">')
+    expect(elementRender.html).toContain('p { color: green; }')
+  })
+  it('treats empty styles as a no-op', () => {
+    const App = __eclipsaComponent(
+      () => {
+        useStyleScoped('')
+        return /* @__PURE__ */ jsxDEV('div', { children: 'plain' }, void 0, false, {
+          fileName: 'packages/eclipsa/core/style.test.ts',
+          lineNumber: 165,
+          columnNumber: 16,
+        })
+      },
+      'empty-style-symbol',
+      () => [],
+    )
+    const { html } = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(App, {}, void 0, false, {
+        fileName: 'packages/eclipsa/core/style.test.ts',
+        lineNumber: 171,
+        columnNumber: 38,
+      }),
+    )
+    expect(html).toContain('<div>plain</div>')
+    expect(html).not.toContain('@scope (')
+  })
+  it('renders scoped style nodes during client rendering', () =>
+    withFakeNodeGlobal(() => {
+      const App = __eclipsaComponent(
+        () => {
+          useStyleScoped(
+            /* @__PURE__ */ jsxDEV(
+              'style',
+              { media: 'screen', children: 'p { color: green; }' },
+              void 0,
+              false,
+              {
+                fileName: 'packages/eclipsa/core/style.test.ts',
+                lineNumber: 181,
+                columnNumber: 26,
+              },
+            ),
+          )
+          return /* @__PURE__ */ jsxDEV(
+            'section',
+            {
+              children: /* @__PURE__ */ jsxDEV('p', { children: 'client' }, void 0, false, {
+                fileName: 'packages/eclipsa/core/style.test.ts',
+                lineNumber: 184,
+                columnNumber: 15,
+              }),
+            },
+            void 0,
+            false,
+            {
+              fileName: 'packages/eclipsa/core/style.test.ts',
+              lineNumber: 183,
+              columnNumber: 13,
+            },
+          )
+        },
+        'client-style-symbol',
+        () => [],
+      )
+      const container = createContainer()
+      const nodes = withRuntimeContainer(container, () =>
+        renderClientInsertable(
+          /* @__PURE__ */ jsxDEV(App, {}, void 0, false, {
+            fileName: 'packages/eclipsa/core/style.test.ts',
+            lineNumber: 194,
+            columnNumber: 32,
+          }),
+          container,
+        ),
+      )
+      const scopeId = container.components.get('c0')?.scopeId
+      const styleNode = nodes[1]
+      const sectionNode = nodes[2]
+      const paragraphNode = sectionNode.childNodes[0]
+      expect(scopeId).toBeTruthy()
+      expect(styleNode.tagName).toBe('style')
+      expect(styleNode.attributes.get('media')).toBe('screen')
+      expect(styleNode.childNodes[0].data).toContain(`@scope ([data-e-scope="${scopeId}"])`)
+      expect(sectionNode.attributes.get('data-e-scope')).toBe(scopeId)
+      expect(paragraphNode.attributes.get('data-e-scope')).toBe(scopeId)
+    }))
+})
diff --git a/packages/eclipsa/core/style.ts b/packages/eclipsa/core/style.ts
new file mode 100644
index 0000000..b859ff2
--- /dev/null
+++ b/packages/eclipsa/core/style.ts
@@ -0,0 +1,88 @@
+import type { JSX } from '../jsx/types.ts'
+import { registerRuntimeScopedStyle } from './runtime.ts'
+
+const DANGEROUSLY_SET_INNER_HTML_PROP = 'dangerouslySetInnerHTML'
+
+interface StyleElement {
+  props: Record<string, unknown>
+  type: 'style'
+}
+
+const isTemplateStringsArray = (value: unknown): value is TemplateStringsArray =>
+  Array.isArray(value) && Array.isArray((value as unknown as TemplateStringsArray).raw)
+
+const isStyleElement = (value: unknown): value is StyleElement =>
+  !!value &&
+  typeof value === 'object' &&
+  'type' in value &&
+  'props' in value &&
+  (value as StyleElement).type === 'style'
+
+const flattenStyleText = (value: unknown): string => {
+  if (Array.isArray(value)) {
+    return value.map((entry) => flattenStyleText(entry)).join('')
+  }
+  if (value === null || value === undefined || value === false) {
+    return ''
+  }
+  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+    return String(value)
+  }
+  throw new TypeError('useStyleScoped() only accepts text children inside <style>.')
+}
+
+const resolveTaggedTemplateCss = (strings: TemplateStringsArray, values: unknown[]) =>
+  strings.reduce(
+    (result, segment, index) =>
+      result + segment + (index < values.length ? String(values[index]) : ''),
+    '',
+  )
+
+const resolveStyleInput = (
+  value: JSX.Element | string,
+): {
+  attributes: Record<string, unknown>
+  cssText: string
+} => {
+  if (typeof value === 'string') {
+    return {
+      attributes: {},
+      cssText: value,
+    }
+  }
+
+  if (!isStyleElement(value)) {
+    throw new TypeError(
+      'useStyleScoped() expects a CSS string, a tagged template literal, or a <style> element.',
+    )
+  }
+
+  const attributes = { ...value.props }
+  const innerHTML = attributes[DANGEROUSLY_SET_INNER_HTML_PROP]
+  delete attributes.children
+  delete attributes[DANGEROUSLY_SET_INNER_HTML_PROP]
+
+  return {
+    attributes,
+    cssText:
+      innerHTML !== undefined
+        ? flattenStyleText(innerHTML)
+        : flattenStyleText(value.props.children),
+  }
+}
+
+export function useStyleScoped(strings: TemplateStringsArray, ...values: unknown[]): void
+export function useStyleScoped(value: JSX.Element | string): void
+export function useStyleScoped(
+  input: JSX.Element | string | TemplateStringsArray,
+  ...values: unknown[]
+): void {
+  const resolved = isTemplateStringsArray(input)
+    ? {
+        attributes: {},
+        cssText: resolveTaggedTemplateCss(input, values),
+      }
+    : resolveStyleInput(input)
+
+  registerRuntimeScopedStyle(resolved.cssText, resolved.attributes)
+}
diff --git a/packages/eclipsa/core/suspense.test.ts b/packages/eclipsa/core/suspense.test.ts
new file mode 100644
index 0000000..c84ed4c
--- /dev/null
+++ b/packages/eclipsa/core/suspense.test.ts
@@ -0,0 +1,313 @@
+import { jsxDEV } from 'eclipsa/jsx-dev-runtime'
+import { describe, expect, it } from 'vitest'
+import { __eclipsaComponent } from './internal.ts'
+import { renderSSRAsync, renderSSRStream } from './ssr.ts'
+import { signal, useSignal } from './signal.ts'
+import { Suspense, isSuspenseType } from './suspense.ts'
+const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
+describe('Suspense', () => {
+  it('resolves async computed signals during async SSR', async () => {
+    const App = __eclipsaComponent(
+      () => {
+        const ReadValue = __eclipsaComponent(
+          () => {
+            const value = useSignal.computed(async () => {
+              await wait(0)
+              return 'ready'
+            })
+            return /* @__PURE__ */ jsxDEV('p', { children: value.value }, void 0, false, {
+              fileName: 'packages/eclipsa/core/suspense.test.ts',
+              lineNumber: 19,
+              columnNumber: 20,
+            })
+          },
+          'suspense-read-value',
+          () => [],
+        )
+        return /* @__PURE__ */ jsxDEV(
+          Suspense,
+          {
+            fallback: /* @__PURE__ */ jsxDEV('p', { children: 'loading' }, void 0, false, {
+              fileName: 'packages/eclipsa/core/suspense.test.ts',
+              lineNumber: 26,
+              columnNumber: 31,
+            }),
+            children: /* @__PURE__ */ jsxDEV(ReadValue, {}, void 0, false, {
+              fileName: 'packages/eclipsa/core/suspense.test.ts',
+              lineNumber: 27,
+              columnNumber: 13,
+            }),
+          },
+          void 0,
+          false,
+          {
+            fileName: 'packages/eclipsa/core/suspense.test.ts',
+            lineNumber: 26,
+            columnNumber: 11,
+          },
+        )
+      },
+      'suspense-test-app',
+      () => [],
+    )
+    const { html } = await renderSSRAsync(() =>
+      /* @__PURE__ */ jsxDEV(App, {}, void 0, false, {
+        fileName: 'packages/eclipsa/core/suspense.test.ts',
+        lineNumber: 35,
+        columnNumber: 49,
+      }),
+    )
+    expect(html).toContain('<p>ready</p>')
+    expect(html).not.toContain('loading')
+  })
+  it('streams suspense fallbacks before resolved boundary content', async () => {
+    const App = __eclipsaComponent(
+      () => {
+        const ReadValue = __eclipsaComponent(
+          () => {
+            const value = useSignal.computed(async () => {
+              await wait(0)
+              return 'ready'
+            })
+            return /* @__PURE__ */ jsxDEV('p', { children: value.value }, void 0, false, {
+              fileName: 'packages/eclipsa/core/suspense.test.ts',
+              lineNumber: 50,
+              columnNumber: 20,
+            })
+          },
+          'suspense-stream-value',
+          () => [],
+        )
+        return /* @__PURE__ */ jsxDEV(
+          Suspense,
+          {
+            fallback: /* @__PURE__ */ jsxDEV('p', { children: 'loading' }, void 0, false, {
+              fileName: 'packages/eclipsa/core/suspense.test.ts',
+              lineNumber: 57,
+              columnNumber: 31,
+            }),
+            children: /* @__PURE__ */ jsxDEV(ReadValue, {}, void 0, false, {
+              fileName: 'packages/eclipsa/core/suspense.test.ts',
+              lineNumber: 58,
+              columnNumber: 13,
+            }),
+          },
+          void 0,
+          false,
+          {
+            fileName: 'packages/eclipsa/core/suspense.test.ts',
+            lineNumber: 57,
+            columnNumber: 11,
+          },
+        )
+      },
+      'suspense-stream-app',
+      () => [],
+    )
+    const { html, chunks } = await renderSSRStream(() =>
+      /* @__PURE__ */ jsxDEV(App, {}, void 0, false, {
+        fileName: 'packages/eclipsa/core/suspense.test.ts',
+        lineNumber: 66,
+        columnNumber: 58,
+      }),
+    )
+    const streamedChunks = []
+    for await (const chunk of chunks) {
+      streamedChunks.push({
+        boundaryId: chunk.boundaryId,
+        html: chunk.html,
+      })
+    }
+    expect(html).toContain('loading')
+    expect(html).not.toContain('<p>ready</p>')
+    expect(streamedChunks).toHaveLength(1)
+    expect(streamedChunks[0]?.boundaryId).toBe('c0.0')
+    expect(streamedChunks[0]?.html).toContain('<p>ready</p>')
+  })
+  it('does not reuse resolved async signal snapshots across SSR requests', async () => {
+    let invocationCount = 0
+    const App = __eclipsaComponent(
+      () => {
+        const ReadValue = __eclipsaComponent(
+          () => {
+            const value = useSignal.computed(async () => {
+              invocationCount += 1
+              await wait(0)
+              return `ready-${invocationCount}`
+            })
+            return /* @__PURE__ */ jsxDEV('p', { children: value.value }, void 0, false, {
+              fileName: 'packages/eclipsa/core/suspense.test.ts',
+              lineNumber: 94,
+              columnNumber: 20,
+            })
+          },
+          'suspense-request-value',
+          () => [],
+        )
+        return /* @__PURE__ */ jsxDEV(
+          Suspense,
+          {
+            fallback: /* @__PURE__ */ jsxDEV('p', { children: 'loading' }, void 0, false, {
+              fileName: 'packages/eclipsa/core/suspense.test.ts',
+              lineNumber: 101,
+              columnNumber: 31,
+            }),
+            children: /* @__PURE__ */ jsxDEV(ReadValue, {}, void 0, false, {
+              fileName: 'packages/eclipsa/core/suspense.test.ts',
+              lineNumber: 102,
+              columnNumber: 13,
+            }),
+          },
+          void 0,
+          false,
+          {
+            fileName: 'packages/eclipsa/core/suspense.test.ts',
+            lineNumber: 101,
+            columnNumber: 11,
+          },
+        )
+      },
+      'suspense-request-app',
+      () => [],
+    )
+    const first = await renderSSRAsync(() =>
+      /* @__PURE__ */ jsxDEV(App, {}, void 0, false, {
+        fileName: 'packages/eclipsa/core/suspense.test.ts',
+        lineNumber: 110,
+        columnNumber: 46,
+      }),
+    )
+    const second = await renderSSRAsync(() =>
+      /* @__PURE__ */ jsxDEV(App, {}, void 0, false, {
+        fileName: 'packages/eclipsa/core/suspense.test.ts',
+        lineNumber: 111,
+        columnNumber: 47,
+      }),
+    )
+    expect(first.html).toContain('<p>ready-1</p>')
+    expect(second.html).toContain('<p>ready-2</p>')
+    expect(invocationCount).toBe(2)
+  })
+  it('does not leak request-scoped async signal snapshots across concurrent SSR requests', async () => {
+    let fastInvocationCount = 0
+    let slowInvocationCount = 0
+    let releaseSlowRequest
+    const slowRequestGate = new Promise((resolve) => {
+      releaseSlowRequest = resolve
+    })
+    const App = __eclipsaComponent(
+      ({ blockSlow, label }) => {
+        const ReadValue = __eclipsaComponent(
+          () => {
+            const fastValue = useSignal.computed(async () => {
+              fastInvocationCount += 1
+              await wait(0)
+              return `${label}-fast-${fastInvocationCount}`
+            })
+            const slowValue = useSignal.computed(async () => {
+              slowInvocationCount += 1
+              if (blockSlow) {
+                await slowRequestGate
+              } else {
+                await wait(0)
+              }
+              return `${label}-slow-${slowInvocationCount}`
+            })
+            return /* @__PURE__ */ jsxDEV(
+              'div',
+              {
+                children: [
+                  /* @__PURE__ */ jsxDEV('p', { children: fastValue.value }, void 0, false, {
+                    fileName: 'packages/eclipsa/core/suspense.test.ts',
+                    lineNumber: 147,
+                    columnNumber: 17,
+                  }),
+                  /* @__PURE__ */ jsxDEV('p', { children: slowValue.value }, void 0, false, {
+                    fileName: 'packages/eclipsa/core/suspense.test.ts',
+                    lineNumber: 148,
+                    columnNumber: 17,
+                  }),
+                ],
+              },
+              void 0,
+              true,
+              {
+                fileName: 'packages/eclipsa/core/suspense.test.ts',
+                lineNumber: 146,
+                columnNumber: 15,
+              },
+            )
+          },
+          'suspense-concurrent-request-value',
+          () => [],
+        )
+        return /* @__PURE__ */ jsxDEV(
+          Suspense,
+          {
+            fallback: /* @__PURE__ */ jsxDEV('p', { children: 'loading' }, void 0, false, {
+              fileName: 'packages/eclipsa/core/suspense.test.ts',
+              lineNumber: 157,
+              columnNumber: 31,
+            }),
+            children: /* @__PURE__ */ jsxDEV(ReadValue, {}, void 0, false, {
+              fileName: 'packages/eclipsa/core/suspense.test.ts',
+              lineNumber: 158,
+              columnNumber: 13,
+            }),
+          },
+          void 0,
+          false,
+          {
+            fileName: 'packages/eclipsa/core/suspense.test.ts',
+            lineNumber: 157,
+            columnNumber: 11,
+          },
+        )
+      },
+      'suspense-concurrent-request-app',
+      () => [],
+    )
+    const first = renderSSRAsync(() =>
+      /* @__PURE__ */ jsxDEV(App, { blockSlow: true, label: 'first' }, void 0, false, {
+        fileName: 'packages/eclipsa/core/suspense.test.ts',
+        lineNumber: 166,
+        columnNumber: 40,
+      }),
+    )
+    await wait(10)
+    const second = renderSSRAsync(() =>
+      /* @__PURE__ */ jsxDEV(App, { blockSlow: false, label: 'second' }, void 0, false, {
+        fileName: 'packages/eclipsa/core/suspense.test.ts',
+        lineNumber: 168,
+        columnNumber: 41,
+      }),
+    )
+    await wait(10)
+    releaseSlowRequest()
+    const [firstResult, secondResult] = await Promise.all([first, second])
+    expect(firstResult.html).toMatch(/<p>first-fast-\d+<\/p>/)
+    expect(firstResult.html).toMatch(/<p>first-slow-\d+<\/p>/)
+    expect(firstResult.html).not.toContain('second-fast-')
+    expect(firstResult.html).not.toContain('second-slow-')
+    expect(secondResult.html).toMatch(/<p>second-fast-\d+<\/p>/)
+    expect(secondResult.html).toMatch(/<p>second-slow-\d+<\/p>/)
+    expect(secondResult.html).not.toContain('first-fast-')
+    expect(secondResult.html).not.toContain('first-slow-')
+  })
+  it('supports standalone computed signals', async () => {
+    const source = signal(1)
+    const doubled = signal.computed(() => source.value * 2)
+    const asyncDoubled = signal.computed(async () => doubled.value * 2)
+    expect(doubled.value).toBe(2)
+    await wait(0)
+    expect(asyncDoubled.value).toBe(4)
+    source.value = 3
+    expect(doubled.value).toBe(6)
+  })
+  it('recognizes suspense boundaries across duplicated module instances', () => {
+    const duplicateSuspense = (props) => props.children ?? null
+    duplicateSuspense[Symbol.for('eclipsa.suspense-type')] = true
+    expect(isSuspenseType(Suspense)).toBe(true)
+    expect(isSuspenseType(duplicateSuspense)).toBe(true)
+  })
+})
diff --git a/packages/eclipsa/core/suspense.test.tsx b/packages/eclipsa/core/suspense.test.tsx
deleted file mode 100644
index 9717c37..0000000
--- a/packages/eclipsa/core/suspense.test.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-import { describe, expect, it } from 'vitest'
-import { component$ } from './component.ts'
-import { __eclipsaComponent } from './internal.ts'
-import { renderSSR, renderSSRAsync, renderSSRStream } from './ssr.ts'
-import { signal, useSignal } from './signal.ts'
-import { Suspense, isSuspenseType } from './suspense.ts'
-
-const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
-
-describe('Suspense', () => {
-  it('resolves async computed signals during async SSR', async () => {
-    const App = component$(
-      __eclipsaComponent(
-        () => {
-          const ReadValue = component$(
-            __eclipsaComponent(
-              () => {
-                const value = useSignal.computed(async () => {
-                  await wait(0)
-                  return 'ready'
-                })
-                return <p>{value.value}</p>
-              },
-              'suspense-read-value',
-              () => [],
-            ),
-          )
-
-          return (
-            <Suspense fallback={<p>loading</p>}>
-              <ReadValue />
-            </Suspense>
-          )
-        },
-        'suspense-test-app',
-        () => [],
-      ),
-    )
-
-    const { html } = await renderSSRAsync(() => <App />)
-
-    expect(html).toContain('<p>ready</p>')
-    expect(html).not.toContain('loading')
-  })
-
-  it('streams suspense fallbacks before resolved boundary content', async () => {
-    const App = component$(
-      __eclipsaComponent(
-        () => {
-          const ReadValue = component$(
-            __eclipsaComponent(
-              () => {
-                const value = useSignal.computed(async () => {
-                  await wait(0)
-                  return 'ready'
-                })
-                return <p>{value.value}</p>
-              },
-              'suspense-stream-value',
-              () => [],
-            ),
-          )
-
-          return (
-            <Suspense fallback={<p>loading</p>}>
-              <ReadValue />
-            </Suspense>
-          )
-        },
-        'suspense-stream-app',
-        () => [],
-      ),
-    )
-
-    const { html, chunks } = await renderSSRStream(() => <App />)
-    const streamedChunks: Array<{ boundaryId: string; html: string }> = []
-    for await (const chunk of chunks) {
-      streamedChunks.push({
-        boundaryId: chunk.boundaryId,
-        html: chunk.html,
-      })
-    }
-
-    expect(html).toContain('loading')
-    expect(html).not.toContain('<p>ready</p>')
-    expect(streamedChunks).toHaveLength(1)
-    expect(streamedChunks[0]?.boundaryId).toBe('c0.0')
-    expect(streamedChunks[0]?.html).toContain('<p>ready</p>')
-  })
-
-  it('does not reuse resolved async signal snapshots across SSR requests', async () => {
-    let invocationCount = 0
-
-    const App = component$(
-      __eclipsaComponent(
-        () => {
-          const ReadValue = component$(
-            __eclipsaComponent(
-              () => {
-                const value = useSignal.computed(async () => {
-                  invocationCount += 1
-                  await wait(0)
-                  return `ready-${invocationCount}`
-                })
-                return <p>{value.value}</p>
-              },
-              'suspense-request-value',
-              () => [],
-            ),
-          )
-
-          return (
-            <Suspense fallback={<p>loading</p>}>
-              <ReadValue />
-            </Suspense>
-          )
-        },
-        'suspense-request-app',
-        () => [],
-      ),
-    )
-
-    const first = await renderSSRAsync(() => <App />)
-    const second = await renderSSRAsync(() => <App />)
-
-    expect(first.html).toContain('<p>ready-1</p>')
-    expect(second.html).toContain('<p>ready-2</p>')
-    expect(invocationCount).toBe(2)
-  })
-
-  it('does not leak request-scoped async signal snapshots across concurrent SSR requests', async () => {
-    let fastInvocationCount = 0
-    let slowInvocationCount = 0
-    let releaseSlowRequest!: () => void
-    const slowRequestGate = new Promise<void>((resolve) => {
-      releaseSlowRequest = resolve
-    })
-
-    const App = component$(
-      __eclipsaComponent(
-        ({ blockSlow, label }: { blockSlow: boolean; label: string }) => {
-          const ReadValue = component$(
-            __eclipsaComponent(
-              () => {
-                const fastValue = useSignal.computed(async () => {
-                  fastInvocationCount += 1
-                  await wait(0)
-                  return `${label}-fast-${fastInvocationCount}`
-                })
-                const slowValue = useSignal.computed(async () => {
-                  slowInvocationCount += 1
-                  if (blockSlow) {
-                    await slowRequestGate
-                  } else {
-                    await wait(0)
-                  }
-                  return `${label}-slow-${slowInvocationCount}`
-                })
-
-                return (
-                  <div>
-                    <p>{fastValue.value}</p>
-                    <p>{slowValue.value}</p>
-                  </div>
-                )
-              },
-              'suspense-concurrent-request-value',
-              () => [],
-            ),
-          )
-
-          return (
-            <Suspense fallback={<p>loading</p>}>
-              <ReadValue />
-            </Suspense>
-          )
-        },
-        'suspense-concurrent-request-app',
-        () => [],
-      ),
-    )
-
-    const first = renderSSRAsync(() => <App blockSlow label="first" />)
-    await wait(10)
-    const second = renderSSRAsync(() => <App blockSlow={false} label="second" />)
-    await wait(10)
-    releaseSlowRequest()
-
-    const [firstResult, secondResult] = await Promise.all([first, second])
-
-    expect(firstResult.html).toMatch(/<p>first-fast-\d+<\/p>/)
-    expect(firstResult.html).toMatch(/<p>first-slow-\d+<\/p>/)
-    expect(firstResult.html).not.toContain('second-fast-')
-    expect(firstResult.html).not.toContain('second-slow-')
-    expect(secondResult.html).toMatch(/<p>second-fast-\d+<\/p>/)
-    expect(secondResult.html).toMatch(/<p>second-slow-\d+<\/p>/)
-    expect(secondResult.html).not.toContain('first-fast-')
-    expect(secondResult.html).not.toContain('first-slow-')
-  })
-
-  it('supports standalone computed signals', async () => {
-    const source = signal(1)
-    const doubled = signal.computed(() => source.value * 2)
-    const asyncDoubled = signal.computed(async () => doubled.value * 2)
-
-    expect(doubled.value).toBe(2)
-    await wait(0)
-    expect(asyncDoubled.value).toBe(4)
-
-    source.value = 3
-
-    expect(doubled.value).toBe(6)
-  })
-
-  it('recognizes suspense boundaries across duplicated module instances', () => {
-    const duplicateSuspense = ((props: { children?: unknown }) => props.children ?? null) as ((
-      props: { children?: unknown },
-    ) => unknown) & {
-      [key: symbol]: true
-    }
-    duplicateSuspense[Symbol.for('eclipsa.suspense-type')] = true
-
-    expect(isSuspenseType(Suspense)).toBe(true)
-    expect(isSuspenseType(duplicateSuspense)).toBe(true)
-  })
-})
diff --git a/packages/eclipsa/core/suspense.ts b/packages/eclipsa/core/suspense.ts
index 5bd56be..da007f4 100644
--- a/packages/eclipsa/core/suspense.ts
+++ b/packages/eclipsa/core/suspense.ts
@@ -36,6 +36,4 @@ export const isPendingSignalError = (value: unknown): value is PendingSignalErro
   (value as PendingSignalError)[PENDING_SIGNAL_ERROR_KEY] === true
 
 export const isSuspenseType = (value: unknown): value is typeof Suspense =>
-  !!value &&
-  typeof value === 'function' &&
-  (value as typeof Suspense)[SUSPENSE_TYPE_KEY] === true
+  !!value && typeof value === 'function' && (value as typeof Suspense)[SUSPENSE_TYPE_KEY] === true
diff --git a/packages/eclipsa/core/watch-resume.test.ts b/packages/eclipsa/core/watch-resume.test.ts
new file mode 100644
index 0000000..5b8dea8
--- /dev/null
+++ b/packages/eclipsa/core/watch-resume.test.ts
@@ -0,0 +1,98 @@
+import { jsxDEV } from 'eclipsa/jsx-dev-runtime'
+import { describe, expect, it } from 'vitest'
+import { __eclipsaComponent, __eclipsaLazy, __eclipsaWatch } from './internal.ts'
+import { noSerialize } from './no-serialize.ts'
+import { useSignal, useWatch } from './signal.ts'
+import { renderSSR } from './ssr.ts'
+describe('useWatch resume payload', () => {
+  it('serializes resumable watch subscriptions without activating the component', () => {
+    const App = __eclipsaComponent(
+      () => {
+        const tracked = useSignal(0)
+        const explicit = useSignal('a')
+        useWatch(
+          __eclipsaWatch(
+            'watch-symbol',
+            () => {
+              void explicit.value
+            },
+            () => [explicit],
+          ),
+          [tracked, () => explicit.value],
+        )
+        return /* @__PURE__ */ jsxDEV('button', { children: tracked.value }, void 0, false, {
+          fileName: 'packages/eclipsa/core/watch-resume.test.ts',
+          lineNumber: 26,
+          columnNumber: 16,
+        })
+      },
+      'component-symbol',
+      () => [],
+    )
+    const { payload } = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(App, {}, void 0, false, {
+        fileName: 'packages/eclipsa/core/watch-resume.test.ts',
+        lineNumber: 32,
+        columnNumber: 41,
+      }),
+    )
+    const component = payload.components.c0
+    const [[watchId, watch]] = Object.entries(payload.watches)
+    expect(component.watchCount).toBe(1)
+    expect(watchId).toBe('c0:w0')
+    expect(watch.symbol).toBe('watch-symbol')
+    expect(watch.mode).toBe('explicit')
+    expect(new Set(watch.signals)).toEqual(new Set(component.signalIds))
+  })
+  it('serializes watch scopes that capture API objects with lazy methods', () => {
+    const App = __eclipsaComponent(
+      () => {
+        const controller = useSignal(null)
+        const api = {
+          set: __eclipsaLazy(
+            'api-set-symbol',
+            (value) => {
+              controller.value?.set(value)
+            },
+            () => [controller],
+          ),
+        }
+        controller.value = noSerialize({
+          set() {},
+        })
+        useWatch(
+          __eclipsaWatch(
+            'watch-symbol',
+            () => {
+              api.set(1)
+            },
+            () => [api],
+          ),
+        )
+        return /* @__PURE__ */ jsxDEV('button', { children: 'ready' }, void 0, false, {
+          fileName: 'packages/eclipsa/core/watch-resume.test.ts',
+          lineNumber: 71,
+          columnNumber: 16,
+        })
+      },
+      'component-symbol',
+      () => [],
+    )
+    expect(() =>
+      renderSSR(
+        () =>
+          /* @__PURE__ */ jsxDEV(App, {}, void 0, false, {
+            fileName: 'packages/eclipsa/core/watch-resume.test.ts',
+            lineNumber: 78,
+            columnNumber: 23,
+          }),
+        {
+          symbols: {
+            'api-set-symbol': '/app/api?eclipsa-symbol=api-set-symbol',
+            'watch-symbol': '/app/api?eclipsa-symbol=watch-symbol',
+          },
+        },
+      ),
+    ).not.toThrow()
+  })
+})
diff --git a/packages/eclipsa/core/watch.resume.test.tsx b/packages/eclipsa/core/watch.resume.test.tsx
deleted file mode 100644
index f6af6ec..0000000
--- a/packages/eclipsa/core/watch.resume.test.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { component$ } from './component.ts'
-import { __eclipsaComponent, __eclipsaWatch } from './internal.ts'
-import { useSignal, useWatch } from './signal.ts'
-import { renderSSR } from './ssr.ts'
-
-describe('useWatch resume payload', () => {
-  it('serializes resumable watch subscriptions without activating the component', () => {
-    const App = component$(
-      __eclipsaComponent(
-        () => {
-          const tracked = useSignal(0)
-          const explicit = useSignal('a')
-
-          useWatch(
-            __eclipsaWatch(
-              'watch-symbol',
-              () => {
-                explicit.value
-              },
-              () => [explicit],
-            ),
-            [tracked, () => explicit.value],
-          )
-
-          return <button>{tracked.value}</button>
-        },
-        'component-symbol',
-        () => [],
-      ),
-    )
-
-    const { payload } = renderSSR(() => <App />)
-    const component = payload.components.c0
-    const [[watchId, watch]] = Object.entries(payload.watches)
-
-    expect(component.watchCount).toBe(1)
-    expect(watchId).toBe('c0:w0')
-    expect(watch.symbol).toBe('watch-symbol')
-    expect(watch.mode).toBe('explicit')
-    expect(new Set(watch.signals)).toEqual(new Set(component.signalIds))
-  })
-})
diff --git a/packages/eclipsa/jsx/jsx-dev-runtime.ts b/packages/eclipsa/jsx/jsx-dev-runtime.ts
index 576dbfb..c92d897 100644
--- a/packages/eclipsa/jsx/jsx-dev-runtime.ts
+++ b/packages/eclipsa/jsx/jsx-dev-runtime.ts
@@ -7,6 +7,13 @@ export interface SSRAttrValue {
   value: unknown
 }
 
+export interface SSRRawValue {
+  __e_ssr_raw: true
+  value: string
+}
+
+const SSR_RAW_VALUES = new WeakSet<SSRRawValue>()
+
 export const jsxDEV = (
   type: JSX.Type,
   props: Record<string, unknown>,
@@ -30,9 +37,21 @@ export const ssrAttr = (name: string, value: unknown): SSRAttrValue => ({
 export const isSSRAttrValue = (value: unknown): value is SSRAttrValue =>
   !!value && typeof value === 'object' && (value as SSRAttrValue).__e_ssr_attr === true
 
+export const ssrRaw = (value: string): JSX.SSRRaw => {
+  const rawValue: SSRRawValue = {
+    __e_ssr_raw: true,
+    value,
+  }
+  SSR_RAW_VALUES.add(rawValue)
+  return rawValue
+}
+
+export const isSSRRawValue = (value: unknown): value is SSRRawValue =>
+  !!value && typeof value === 'object' && SSR_RAW_VALUES.has(value as SSRRawValue)
+
 export const ssrTemplate = (strings: readonly string[], ...values: unknown[]): JSX.SSRTemplate => ({
   __e_ssr_template: true,
-  strings: [...strings],
+  strings,
   values,
 })
 
diff --git a/packages/eclipsa/jsx/types.ts b/packages/eclipsa/jsx/types.ts
index 1a047fb..58364a4 100644
--- a/packages/eclipsa/jsx/types.ts
+++ b/packages/eclipsa/jsx/types.ts
@@ -1,5 +1,412 @@
+type SupportedDelegatedEventName =
+  | 'cancel'
+  | 'change'
+  | 'click'
+  | 'compositionend'
+  | 'compositionstart'
+  | 'input'
+  | 'keydown'
+  | 'submit'
+
+type DelegatedEventMap = {
+  cancel: Event
+  change: Event
+  click: MouseEvent
+  compositionend: CompositionEvent
+  compositionstart: CompositionEvent
+  input: InputEvent
+  keydown: KeyboardEvent
+  submit: SubmitEvent
+}
+
+type AttributeValue = string | number | boolean | null | undefined
+type StyleValue = string | number | null | undefined
+export type BindTarget<T> = {
+  value: T
+}
+
+type RefProp<TElement extends globalThis.Element> = {
+  value: TElement | undefined
+}
+
+type DataAttributeProps = {
+  [TName in `data-${string}`]?: AttributeValue
+}
+
+type AriaAttributeProps = {
+  [TName in `aria-${string}`]?: AttributeValue
+}
+
+type NamespacedAttributeProps = {
+  [TName in `${string}:${string}`]?: AttributeValue
+}
+
+type HyphenatedAttributeProps = {
+  [TName in `${string}-${string}`]?: AttributeValue
+}
+
+export type DelegatedEvent<
+  TCurrentTarget extends globalThis.Element = globalThis.Element,
+  TEvent extends Event = Event,
+> = Omit<TEvent, 'currentTarget'> & {
+  readonly currentTarget: TCurrentTarget
+}
+
+export type EventHandler<
+  TCurrentTarget extends globalThis.Element = globalThis.Element,
+  TEvent extends Event = Event,
+> = (event: DelegatedEvent<TCurrentTarget, TEvent>) => unknown
+
+type DelegatedEventPropName<TName extends SupportedDelegatedEventName> = TName extends 'cancel'
+  ? 'onCancel'
+  : TName extends 'compositionend'
+    ? 'onCompositionEnd'
+    : TName extends 'compositionstart'
+      ? 'onCompositionStart'
+      : TName extends 'keydown'
+        ? 'onKeyDown'
+        : `on${Capitalize<TName>}`
+
+type DelegatedEventProps<TElement extends globalThis.Element> = {
+  [TName in SupportedDelegatedEventName as DelegatedEventPropName<TName>]?: EventHandler<
+    TElement,
+    DelegatedEventMap[TName]
+  >
+}
+
+interface BaseIntrinsicElementProps<TElement extends globalThis.Element>
+  extends AriaAttributeProps, DataAttributeProps, DelegatedEventProps<TElement> {
+  children?: unknown
+  class?: string | undefined
+  dangerouslySetInnerHTML?: string | null | undefined
+  id?: string | undefined
+  key?: string | number | symbol | null | undefined
+  ref?: RefProp<TElement> | RefProp<globalThis.Element> | undefined
+  role?: string | undefined
+  slot?: string | undefined
+  style?: string | Record<string, StyleValue> | undefined
+  tabIndex?: number | undefined
+  title?: string | undefined
+}
+
+interface HTMLIntrinsicElementProps<
+  TElement extends HTMLElement,
+> extends BaseIntrinsicElementProps<TElement> {
+  accessKey?: string | undefined
+  autoCapitalize?: string | undefined
+  autoFocus?: boolean | undefined
+  contentEditable?: boolean | 'inherit' | 'plaintext-only' | undefined
+  dir?: 'auto' | 'ltr' | 'rtl' | undefined
+  draggable?: boolean | undefined
+  enterKeyHint?: 'done' | 'enter' | 'go' | 'next' | 'previous' | 'search' | 'send' | undefined
+  hidden?: boolean | undefined
+  inert?: boolean | undefined
+  inputMode?:
+    | 'decimal'
+    | 'email'
+    | 'none'
+    | 'numeric'
+    | 'search'
+    | 'tel'
+    | 'text'
+    | 'url'
+    | undefined
+  lang?: string | undefined
+  spellCheck?: boolean | undefined
+  translate?: 'no' | 'yes' | undefined
+}
+
+interface SVGIntrinsicElementProps<TElement extends SVGElement>
+  extends BaseIntrinsicElementProps<TElement>, HyphenatedAttributeProps, NamespacedAttributeProps {
+  color?: string | undefined
+  cx?: number | string | undefined
+  cy?: number | string | undefined
+  d?: string | undefined
+  fill?: string | undefined
+  gradientTransform?: string | undefined
+  gradientUnits?: string | undefined
+  height?: number | string | undefined
+  offset?: number | string | undefined
+  opacity?: number | string | undefined
+  points?: string | undefined
+  preserveAspectRatio?: string | undefined
+  r?: number | string | undefined
+  rx?: number | string | undefined
+  ry?: number | string | undefined
+  stroke?: string | undefined
+  transform?: string | undefined
+  version?: number | string | undefined
+  viewBox?: string | undefined
+  width?: number | string | undefined
+  x?: number | string | undefined
+  x1?: number | string | undefined
+  x2?: number | string | undefined
+  y?: number | string | undefined
+  y1?: number | string | undefined
+  y2?: number | string | undefined
+  xmlns?: string | undefined
+}
+
+type ButtonType = 'button' | 'reset' | 'submit'
+type CrossOrigin = 'anonymous' | 'use-credentials'
+type FormEncType = 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'
+type FormMethod = 'dialog' | 'get' | 'post'
+type HTMLInputType =
+  | 'button'
+  | 'checkbox'
+  | 'color'
+  | 'date'
+  | 'datetime-local'
+  | 'email'
+  | 'file'
+  | 'hidden'
+  | 'image'
+  | 'month'
+  | 'number'
+  | 'password'
+  | 'radio'
+  | 'range'
+  | 'reset'
+  | 'search'
+  | 'submit'
+  | 'tel'
+  | 'text'
+  | 'time'
+  | 'url'
+  | 'week'
+type Loading = 'eager' | 'lazy'
+type ReferrerPolicy =
+  | ''
+  | 'no-referrer'
+  | 'no-referrer-when-downgrade'
+  | 'origin'
+  | 'origin-when-cross-origin'
+  | 'same-origin'
+  | 'strict-origin'
+  | 'strict-origin-when-cross-origin'
+  | 'unsafe-url'
+
+interface AnchorHTMLAttributes<
+  TElement extends HTMLAnchorElement,
+> extends HTMLIntrinsicElementProps<TElement> {
+  download?: boolean | string | undefined
+  href?: string | undefined
+  hreflang?: string | undefined
+  ping?: string | undefined
+  referrerPolicy?: ReferrerPolicy | undefined
+  rel?: string | undefined
+  target?: string | undefined
+  type?: string | undefined
+}
+
+interface ButtonHTMLAttributes<
+  TElement extends HTMLButtonElement,
+> extends HTMLIntrinsicElementProps<TElement> {
+  disabled?: boolean | undefined
+  form?: string | undefined
+  name?: string | undefined
+  type?: ButtonType | undefined
+  value?: number | string | undefined
+}
+
+interface FormHTMLAttributes<
+  TElement extends HTMLFormElement,
+> extends HTMLIntrinsicElementProps<TElement> {
+  action?: string | undefined
+  autoComplete?: string | undefined
+  encType?: FormEncType | undefined
+  method?: FormMethod | undefined
+  name?: string | undefined
+  noValidate?: boolean | undefined
+  target?: string | undefined
+}
+
+interface ImgHTMLAttributes<
+  TElement extends HTMLImageElement,
+> extends HTMLIntrinsicElementProps<TElement> {
+  alt?: string | undefined
+  crossOrigin?: CrossOrigin | undefined
+  decoding?: 'async' | 'auto' | 'sync' | undefined
+  height?: number | string | undefined
+  loading?: Loading | undefined
+  referrerPolicy?: ReferrerPolicy | undefined
+  sizes?: string | undefined
+  src?: string | undefined
+  srcSet?: string | undefined
+  width?: number | string | undefined
+}
+
+interface InputHTMLAttributes<
+  TElement extends HTMLInputElement,
+> extends HTMLIntrinsicElementProps<TElement> {
+  'bind:checked'?: BindTarget<boolean | undefined> | undefined
+  'bind:value'?: BindTarget<number | readonly string[] | string | undefined> | undefined
+  accept?: string | undefined
+  alt?: string | undefined
+  autoComplete?: string | undefined
+  capture?: boolean | 'environment' | 'user' | undefined
+  checked?: boolean | undefined
+  disabled?: boolean | undefined
+  form?: string | undefined
+  list?: string | undefined
+  max?: number | string | undefined
+  maxLength?: number | undefined
+  min?: number | string | undefined
+  minLength?: number | undefined
+  multiple?: boolean | undefined
+  name?: string | undefined
+  pattern?: string | undefined
+  placeholder?: string | undefined
+  readOnly?: boolean | undefined
+  required?: boolean | undefined
+  size?: number | undefined
+  src?: string | undefined
+  step?: number | string | undefined
+  type?: HTMLInputType | undefined
+  value?: number | readonly string[] | string | undefined
+}
+
+interface LabelHTMLAttributes<
+  TElement extends HTMLLabelElement,
+> extends HTMLIntrinsicElementProps<TElement> {
+  for?: string | undefined
+}
+
+interface LinkHTMLAttributes<
+  TElement extends HTMLLinkElement,
+> extends HTMLIntrinsicElementProps<TElement> {
+  as?: string | undefined
+  crossOrigin?: CrossOrigin | undefined
+  fetchPriority?: 'auto' | 'high' | 'low' | undefined
+  href?: string | undefined
+  hrefLang?: string | undefined
+  integrity?: string | undefined
+  media?: string | undefined
+  referrerPolicy?: ReferrerPolicy | undefined
+  rel?: string | undefined
+  sizes?: string | undefined
+  type?: string | undefined
+}
+
+interface MetaHTMLAttributes<
+  TElement extends HTMLMetaElement,
+> extends HTMLIntrinsicElementProps<TElement> {
+  charset?: string | undefined
+  content?: string | undefined
+  httpEquiv?: string | undefined
+  name?: string | undefined
+}
+
+interface OptionHTMLAttributes<
+  TElement extends HTMLOptionElement,
+> extends HTMLIntrinsicElementProps<TElement> {
+  disabled?: boolean | undefined
+  label?: string | undefined
+  selected?: boolean | undefined
+  value?: number | string | undefined
+}
+
+interface ScriptHTMLAttributes<
+  TElement extends HTMLScriptElement,
+> extends HTMLIntrinsicElementProps<TElement> {
+  async?: boolean | undefined
+  crossOrigin?: CrossOrigin | undefined
+  defer?: boolean | undefined
+  integrity?: string | undefined
+  nonce?: string | undefined
+  referrerPolicy?: ReferrerPolicy | undefined
+  src?: string | undefined
+  type?: string | undefined
+}
+
+interface SelectHTMLAttributes<
+  TElement extends HTMLSelectElement,
+> extends HTMLIntrinsicElementProps<TElement> {
+  'bind:value'?: BindTarget<number | readonly string[] | string | undefined> | undefined
+  autoComplete?: string | undefined
+  disabled?: boolean | undefined
+  form?: string | undefined
+  multiple?: boolean | undefined
+  name?: string | undefined
+  required?: boolean | undefined
+  size?: number | undefined
+  value?: number | readonly string[] | string | undefined
+}
+
+interface StyleHTMLAttributes<
+  TElement extends HTMLStyleElement,
+> extends HTMLIntrinsicElementProps<TElement> {
+  media?: string | undefined
+  nonce?: string | undefined
+}
+
+interface TextareaHTMLAttributes<
+  TElement extends HTMLTextAreaElement,
+> extends HTMLIntrinsicElementProps<TElement> {
+  'bind:value'?: BindTarget<number | readonly string[] | string | undefined> | undefined
+  autoComplete?: string | undefined
+  cols?: number | undefined
+  disabled?: boolean | undefined
+  form?: string | undefined
+  maxLength?: number | undefined
+  minLength?: number | undefined
+  name?: string | undefined
+  placeholder?: string | undefined
+  readOnly?: boolean | undefined
+  required?: boolean | undefined
+  rows?: number | undefined
+  value?: number | readonly string[] | string | undefined
+  wrap?: 'hard' | 'off' | 'soft' | undefined
+}
+
+type HTMLElementIntrinsicElements = Omit<
+  {
+    [TTag in keyof HTMLElementTagNameMap]: HTMLIntrinsicElementProps<HTMLElementTagNameMap[TTag]>
+  },
+  | 'a'
+  | 'button'
+  | 'form'
+  | 'img'
+  | 'input'
+  | 'label'
+  | 'link'
+  | 'meta'
+  | 'option'
+  | 'script'
+  | 'select'
+  | 'style'
+  | 'textarea'
+> & {
+  a: AnchorHTMLAttributes<HTMLAnchorElement>
+  button: ButtonHTMLAttributes<HTMLButtonElement>
+  form: FormHTMLAttributes<HTMLFormElement>
+  img: ImgHTMLAttributes<HTMLImageElement>
+  input: InputHTMLAttributes<HTMLInputElement>
+  label: LabelHTMLAttributes<HTMLLabelElement>
+  link: LinkHTMLAttributes<HTMLLinkElement>
+  meta: MetaHTMLAttributes<HTMLMetaElement>
+  option: OptionHTMLAttributes<HTMLOptionElement>
+  script: ScriptHTMLAttributes<HTMLScriptElement>
+  select: SelectHTMLAttributes<HTMLSelectElement>
+  style: StyleHTMLAttributes<HTMLStyleElement>
+  textarea: TextareaHTMLAttributes<HTMLTextAreaElement>
+}
+
+type SVGElementIntrinsicElements = {
+  [TTag in keyof SVGElementTagNameMap]: SVGIntrinsicElementProps<SVGElementTagNameMap[TTag]>
+}
+
+type NamespacedIntrinsicElementProps = {
+  [name: string]: AttributeValue | undefined
+}
+
 // deno-lint-ignore no-namespace
 export namespace JSX {
+  export interface SSRRaw {
+    __e_ssr_raw: true
+    value: string
+  }
+
   export interface SSRTemplate {
     __e_ssr_template: true
     strings: readonly string[]
@@ -7,7 +414,7 @@ export namespace JSX {
   }
 
   export type Type = string | ((props: unknown) => Element)
-  export type Childable = Element
+  export type Childable = Element | Element[]
   export type Element =
     | {
         type: Type
@@ -16,6 +423,7 @@ export namespace JSX {
         isStatic: boolean
         metadata?: Metadata
       }
+    | SSRRaw
     | SSRTemplate
     | string
     | number
@@ -23,20 +431,23 @@ export namespace JSX {
     | null
     | boolean
     | ((() => Element) & { key?: string | number | symbol })
+
   export interface Metadata {
     componentID?: number
     fileid?: string
   }
 
   export interface IntrinsicAttributes {
-    key?: any
+    key?: string | number | symbol | null | undefined
   }
 
-  export interface IntrinsicElements {
-    [name: string]: any
-  }
+  export type IntrinsicElements = HTMLElementIntrinsicElements &
+    SVGElementIntrinsicElements & {
+      [name: `${string}-${string}`]: HTMLIntrinsicElementProps<HTMLElement>
+      [name: `${string}:${string}`]: NamespacedIntrinsicElementProps
+    }
 
   export interface ElementChildrenAttribute {
-    children?: any
+    children?: unknown
   }
 }
diff --git a/packages/eclipsa/jsx/types.typecheck.tsx b/packages/eclipsa/jsx/types.typecheck.tsx
new file mode 100644
index 0000000..ac25eb0
--- /dev/null
+++ b/packages/eclipsa/jsx/types.typecheck.tsx
@@ -0,0 +1,154 @@
+import type { BindTarget, DelegatedEvent, JSX } from './types.ts'
+
+type Equal<Left, Right> =
+  (<T>() => T extends Left ? 1 : 2) extends <T>() => T extends Right ? 1 : 2 ? true : false
+type Expect<T extends true> = T
+
+type ButtonClickHandler = NonNullable<JSX.IntrinsicElements['button']['onClick']>
+type ButtonClickEvent = Parameters<ButtonClickHandler>[0]
+type _ButtonClickEvent = Expect<
+  Equal<ButtonClickEvent, DelegatedEvent<HTMLButtonElement, MouseEvent>>
+>
+
+type InputHandler = NonNullable<JSX.IntrinsicElements['input']['onInput']>
+type InputEvent = Parameters<InputHandler>[0]
+type _InputEvent = Expect<
+  Equal<InputEvent, DelegatedEvent<HTMLInputElement, globalThis.InputEvent>>
+>
+
+type FormSubmitHandler = NonNullable<JSX.IntrinsicElements['form']['onSubmit']>
+type FormSubmitEvent = Parameters<FormSubmitHandler>[0]
+type _FormSubmitEvent = Expect<
+  Equal<FormSubmitEvent, DelegatedEvent<HTMLFormElement, globalThis.SubmitEvent>>
+>
+
+type DialogCancelHandler = NonNullable<JSX.IntrinsicElements['dialog']['onCancel']>
+type DialogCancelEvent = Parameters<DialogCancelHandler>[0]
+type _DialogCancelEvent = Expect<Equal<DialogCancelEvent, DelegatedEvent<HTMLDialogElement, Event>>>
+
+type InputKeyDownHandler = NonNullable<JSX.IntrinsicElements['input']['onKeyDown']>
+type InputKeyDownEvent = Parameters<InputKeyDownHandler>[0]
+type _InputKeyDownEvent = Expect<
+  Equal<InputKeyDownEvent, DelegatedEvent<HTMLInputElement, globalThis.KeyboardEvent>>
+>
+
+type InputCompositionStartHandler = NonNullable<
+  JSX.IntrinsicElements['input']['onCompositionStart']
+>
+type InputCompositionStartEvent = Parameters<InputCompositionStartHandler>[0]
+type _InputCompositionStartEvent = Expect<
+  Equal<InputCompositionStartEvent, DelegatedEvent<HTMLInputElement, globalThis.CompositionEvent>>
+>
+
+type ButtonType = JSX.IntrinsicElements['button']['type']
+type _ButtonType = Expect<Equal<ButtonType, 'button' | 'reset' | 'submit' | undefined>>
+
+type InputBindValue = JSX.IntrinsicElements['input']['bind:value']
+type _InputBindValue = Expect<
+  Equal<InputBindValue, BindTarget<number | readonly string[] | string | undefined> | undefined>
+>
+
+type InputBindChecked = JSX.IntrinsicElements['input']['bind:checked']
+type _InputBindChecked = Expect<
+  Equal<InputBindChecked, BindTarget<boolean | undefined> | undefined>
+>
+
+;<button
+  onClick={(event) => {
+    const currentTarget: HTMLButtonElement = event.currentTarget
+    const clientX: number = event.clientX
+    void currentTarget
+    void clientX
+  }}
+/>
+
+;<input
+  onInput={(event) => {
+    const currentTarget: HTMLInputElement = event.currentTarget
+    const value: string = event.currentTarget.value
+    void currentTarget
+    void value
+  }}
+/>
+
+;<input bind:value={{ value: 'hello' }} />
+
+;<input bind:checked={{ value: true }} type="checkbox" />
+
+;<textarea bind:value={{ value: 'notes' }} />
+
+;<select bind:value={{ value: 'option-a' }}>
+  <option value="option-a">A</option>
+</select>
+
+;<form
+  onSubmit={(event) => {
+    const currentTarget: HTMLFormElement = event.currentTarget
+    const submitter: HTMLElement | null | undefined = event.submitter
+    void currentTarget
+    void submitter
+  }}
+/>
+
+;<dialog
+  onCancel={(event) => {
+    const currentTarget: HTMLDialogElement = event.currentTarget
+    event.preventDefault()
+    void currentTarget
+  }}
+/>
+
+;<input
+  autoFocus
+  onCompositionStart={(event) => {
+    const currentTarget: HTMLInputElement = event.currentTarget
+    void currentTarget
+  }}
+  onKeyDown={(event) => {
+    const currentTarget: HTMLInputElement = event.currentTarget
+    const key: string = event.key
+    void currentTarget
+    void key
+  }}
+/>
+
+;<ul>
+  {[1, 2].map((item) => (
+    <li key={item}>{item}</li>
+  ))}
+</ul>
+
+;<div
+  class="card"
+  data-testid="probe"
+  style={{ opacity: 1, 'max-height': '24px' }}
+  ref={{ value: undefined as HTMLDivElement | undefined }}
+/>
+
+;<a href="/docs/getting-started/overview" rel="noreferrer" />
+
+;<svg viewBox="0 0 24 24" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <path d="M0 0h24v24H0z" fill="none" stroke="currentColor" stroke-width="2" />
+  <use xlink:href="#icon" />
+</svg>
+
+;<sodipodi:namedview pagecolor="#ffffff" bordercolor="#000000" />
+
+// @ts-expect-error div does not accept href.
+;<div href="/broken" />
+
+// @ts-expect-error button type is restricted to valid button modes.
+;<button type="link" />
+
+// @ts-expect-error delegated event handlers must be functions.
+;<button onClick="save" />
+
+// @ts-expect-error refs must be signal-like objects with a value slot.
+;<div ref="nope" />
+
+const invalidDataAttributes: JSX.IntrinsicElements['div'] = {
+  // @ts-expect-error data attributes only accept serializable primitive values.
+  'data-state': { open: true },
+}
+
+void invalidDataAttributes
diff --git a/packages/eclipsa/package.json b/packages/eclipsa/package.json
index 9495345..2d80903 100644
--- a/packages/eclipsa/package.json
+++ b/packages/eclipsa/package.json
@@ -1,11 +1,11 @@
 {
   "name": "eclipsa",
-  "version": "0.2.0-alpha.0",
-  "license": "MIT",
+  "version": "0.0.0",
   "homepage": "https://github.com/pnsk-lab/eclipsa",
   "bugs": {
     "url": "https://github.com/pnsk-lab/eclipsa/issues"
   },
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pnsk-lab/eclipsa.git",
@@ -17,10 +17,22 @@
       "types": "./mod.ts",
       "import": "./mod.ts"
     },
+    "./atom": {
+      "types": "./atom/mod.ts",
+      "import": "./atom/mod.ts"
+    },
+    "./web-utils": {
+      "types": "./web-utils/mod.ts",
+      "import": "./web-utils/mod.ts"
+    },
     "./vite": {
       "types": "./vite/mod.ts",
       "import": "./vite/mod.ts"
     },
+    "./vite/build/runtime": {
+      "types": "./vite/build/runtime.ts",
+      "import": "./vite/build/runtime.ts"
+    },
     "./jsx-runtime": {
       "types": "./jsx/jsx-runtime.ts",
       "import": "./jsx/jsx-runtime.ts"
@@ -56,10 +68,22 @@
         "types": "./mod.d.mts",
         "import": "./mod.mjs"
       },
+      "./atom": {
+        "types": "./atom/mod.d.mts",
+        "import": "./atom/mod.mjs"
+      },
+      "./web-utils": {
+        "types": "./web-utils/mod.d.mts",
+        "import": "./web-utils/mod.mjs"
+      },
       "./vite": {
         "types": "./vite/mod.d.mts",
         "import": "./vite/mod.mjs"
       },
+      "./vite/build/runtime": {
+        "types": "./vite/build/runtime.d.mts",
+        "import": "./vite/build/runtime.mjs"
+      },
       "./jsx-runtime": {
         "types": "./jsx/jsx-runtime.d.mts",
         "import": "./jsx/jsx-runtime.mjs"
@@ -90,41 +114,19 @@
       }
     }
   },
-  "napi": {
-    "binaryName": "eclipsa",
-    "targets": [
-      "x86_64-apple-darwin",
-      "aarch64-apple-darwin",
-      "x86_64-unknown-linux-gnu",
-      "aarch64-unknown-linux-gnu",
-      "x86_64-unknown-linux-musl",
-      "aarch64-unknown-linux-musl",
-      "x86_64-pc-windows-msvc",
-      "aarch64-pc-windows-msvc",
-      "wasm32-wasip1-threads"
-    ]
-  },
   "scripts": {
-    "artifacts": "bunx @napi-rs/cli artifacts --package-json-path ./package.json --output-dir ./compiler/native/generated --npm-dir ./npm --build-output-dir ./artifacts",
-    "build": "bun run build:js && bun run build:native",
-    "build:js": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
-    "build:native:dev": "node -e \"require('node:fs').rmSync('./compiler/native/generated', { recursive: true, force: true })\" && bunx @napi-rs/cli build --platform --manifest-path ./compiler/rust/Cargo.toml --package-json-path ./package.json --target-dir ./compiler/rust/target --output-dir ./compiler/native/generated --js-package-name eclipsa",
-    "build:native": "node -e \"require('node:fs').rmSync('./compiler/native/generated', { recursive: true, force: true })\" && bunx @napi-rs/cli build --platform --release --manifest-path ./compiler/rust/Cargo.toml --package-json-path ./package.json --target-dir ./compiler/rust/target --output-dir ./compiler/native/generated --js-package-name eclipsa",
-    "create:npm-dirs": "node -e \"require('node:fs').rmSync('./npm', { recursive: true, force: true })\" && bunx @napi-rs/cli create-npm-dirs --package-json-path ./package.json --npm-dir ./npm",
+    "build": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
     "pack": "bun run build",
-    "prepublishOnly": "bun ./scripts/sync-package-manifest.ts publish && bunx @napi-rs/cli pre-publish -t npm --package-json-path ./package.json --npm-dir ./npm",
-    "restore:manifest": "bun ./scripts/sync-package-manifest.ts dev",
     "typecheck": "tsgo -p tsconfig.json --noEmit",
-    "version:napi": "bunx @napi-rs/cli version --package-json-path ./package.json --npm-dir ./npm",
-    "test": "bun run build:native:dev && vp test --run"
+    "test": "bun run --filter @eclipsa/optimizer build:native:dev && vp test --run",
+    "test:coverage": "bun run --filter @eclipsa/optimizer build:native:dev && c8 --reporter=lcov --reporter=json-summary --reporter=text bunx vp test --run"
   },
   "dependencies": {
-    "@napi-rs/wasm-runtime": "^1.1.1",
+    "@eclipsa/optimizer": "workspace:^",
     "fast-glob": "^3.3.2",
     "hono": "^4.6.4"
   },
   "devDependencies": {
-    "@napi-rs/cli": "^3.5.1",
     "@typescript/native-preview": "^7.0.0-dev.20260310.1"
   },
   "peerDependencies": {
diff --git a/packages/eclipsa/scripts/sync-package-manifest.ts b/packages/eclipsa/scripts/sync-package-manifest.ts
index 6ac2ade..13eafd4 100644
--- a/packages/eclipsa/scripts/sync-package-manifest.ts
+++ b/packages/eclipsa/scripts/sync-package-manifest.ts
@@ -9,10 +9,22 @@ export const DEV_EXPORTS = {
     types: './mod.ts',
     import: './mod.ts',
   },
+  './atom': {
+    types: './atom/mod.ts',
+    import: './atom/mod.ts',
+  },
+  './web-utils': {
+    types: './web-utils/mod.ts',
+    import: './web-utils/mod.ts',
+  },
   './vite': {
     types: './vite/mod.ts',
     import: './vite/mod.ts',
   },
+  './vite/build/runtime': {
+    types: './vite/build/runtime.ts',
+    import: './vite/build/runtime.ts',
+  },
   './jsx-runtime': {
     types: './jsx/jsx-runtime.ts',
     import: './jsx/jsx-runtime.ts',
@@ -48,10 +60,22 @@ export const PUBLISH_EXPORTS = {
     types: './dist/mod.d.mts',
     import: './dist/mod.mjs',
   },
+  './atom': {
+    types: './dist/atom/mod.d.mts',
+    import: './dist/atom/mod.mjs',
+  },
+  './web-utils': {
+    types: './dist/web-utils/mod.d.mts',
+    import: './dist/web-utils/mod.mjs',
+  },
   './vite': {
     types: './dist/vite/mod.d.mts',
     import: './dist/vite/mod.mjs',
   },
+  './vite/build/runtime': {
+    types: './dist/vite/build/runtime.d.mts',
+    import: './dist/vite/build/runtime.mjs',
+  },
   './jsx-runtime': {
     types: './dist/jsx/jsx-runtime.d.mts',
     import: './dist/jsx/jsx-runtime.mjs',
@@ -82,21 +106,9 @@ export const PUBLISH_EXPORTS = {
   },
 }
 
-export const PUBLISH_FILES = [
-  'dist/**/*.mjs',
-  'dist/**/*.mjs.map',
-  'dist/**/*.d.mts',
-  'compiler/native/generated/**/*.js',
-  'compiler/native/generated/**/*.d.ts',
-  'compiler/native/generated/**/*.cjs',
-  'compiler/native/generated/**/*.mjs',
-  'compiler/native/generated/**/*.wasm',
-]
+export const PUBLISH_FILES = ['dist/**/*.mjs', 'dist/**/*.mjs.map', 'dist/**/*.d.mts']
 
-export const buildPackageManifest = (
-  packageJson: PackageJson,
-  mode: ManifestMode,
-): PackageJson => {
+export const buildPackageManifest = (packageJson: PackageJson, mode: ManifestMode): PackageJson => {
   const nextManifest: PackageJson = {
     ...packageJson,
     exports: mode === 'publish' ? PUBLISH_EXPORTS : DEV_EXPORTS,
diff --git a/packages/eclipsa/tsconfig.json b/packages/eclipsa/tsconfig.json
index 99cc971..77a2b62 100644
--- a/packages/eclipsa/tsconfig.json
+++ b/packages/eclipsa/tsconfig.json
@@ -1,4 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "include": ["./**/*.ts", "./**/*.tsx", "./**/*.d.ts"]
+  "include": ["./**/*.ts", "./**/*.tsx", "./**/*.d.ts"],
+  "exclude": ["./**/*.test.ts", "./**/*.test.tsx"]
 }
diff --git a/packages/eclipsa/vite.config.test.ts b/packages/eclipsa/vite.config.test.ts
new file mode 100644
index 0000000..5449549
--- /dev/null
+++ b/packages/eclipsa/vite.config.test.ts
@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest'
+import config from './vite.config.ts'
+
+describe('eclipsa vite pack config', () => {
+  it('runs tests without file-level parallelism because several suites patch process globals', () => {
+    expect(config.test).toMatchObject({
+      fileParallelism: false,
+    })
+  })
+
+  it('keeps vite and typescript external in the published vite entry', () => {
+    expect(config.pack).toMatchObject({
+      deps: {
+        neverBundle: ['typescript', 'vite'],
+      },
+    })
+  })
+})
diff --git a/packages/eclipsa/vite.config.ts b/packages/eclipsa/vite.config.ts
index c6e7a9f..8e3f281 100644
--- a/packages/eclipsa/vite.config.ts
+++ b/packages/eclipsa/vite.config.ts
@@ -2,9 +2,11 @@ import { defineConfig } from 'vite-plus'
 
 export default defineConfig({
   test: {
+    fileParallelism: false,
     include: [
+      'atom/**/*.test.ts',
       'core/**/*.test.ts',
-      'core/**/*.test.tsx',
+      'web-utils/**/*.test.ts',
       'compiler/**/*.test.ts',
       'vite/**/*.test.ts',
     ],
@@ -13,7 +15,9 @@ export default defineConfig({
   pack: {
     entry: [
       'mod.ts',
+      'web-utils/mod.ts',
       'vite/mod.ts',
+      'vite/build/runtime.ts',
       'jsx/mod.ts',
       'jsx/jsx-runtime.ts',
       'jsx/jsx-dev-runtime.ts',
@@ -25,6 +29,9 @@ export default defineConfig({
     ],
     dts: true,
     format: ['esm'],
+    deps: {
+      neverBundle: ['typescript', 'vite'],
+    },
     clean: true,
     sourcemap: true,
   },
diff --git a/packages/eclipsa/vite/build/mod.test.ts b/packages/eclipsa/vite/build/mod.test.ts
index e90c630..e7701c6 100644
--- a/packages/eclipsa/vite/build/mod.test.ts
+++ b/packages/eclipsa/vite/build/mod.test.ts
@@ -1,13 +1,16 @@
 import * as fs from 'node:fs/promises'
 import * as path from 'node:path'
 import { tmpdir } from 'node:os'
+import { pathToFileURL } from 'node:url'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import type { RouteEntry } from '../utils/routing.ts'
+import { ROUTE_RPC_URL_HEADER } from '../../core/router-shared.ts'
 
 const mocks = vi.hoisted(() => ({
   collectAppActions: vi.fn<() => Promise<Array<{ filePath: string; id: string }>>>(),
   collectAppLoaders: vi.fn<() => Promise<Array<{ filePath: string; id: string }>>>(),
   collectAppSymbols: vi.fn<() => Promise<Array<{ filePath: string; id: string }>>>(),
+  collectReachableAnalyzableFiles: vi.fn<(entryFiles: readonly string[]) => Promise<string[]>>(),
   createRouteManifest: vi.fn(),
   createRoutes: vi.fn<() => Promise<RouteEntry[]>>(),
   toSSG: vi.fn(),
@@ -20,22 +23,30 @@ vi.mock('hono/ssg', () => ({
 vi.mock('../utils/routing.ts', () => ({
   createBuildModuleUrl: vi.fn((entry: { entryName: string }) => `/entries/${entry.entryName}.js`),
   createBuildServerModuleUrl: vi.fn(
-    (entry: { entryName: string }) => `/entries/${entry.entryName}.mjs`,
+    (entry: { entryName: string }) => `./entries/${entry.entryName}.mjs`,
   ),
   createRouteManifest: mocks.createRouteManifest,
   createRoutes: mocks.createRoutes,
+  normalizeRoutePath: vi.fn((pathname: string) => {
+    const normalizedPath = pathname.trim() || '/'
+    const withLeadingSlash = normalizedPath.startsWith('/') ? normalizedPath : `/${normalizedPath}`
+    return withLeadingSlash.length > 1 && withLeadingSlash.endsWith('/')
+      ? withLeadingSlash.slice(0, -1)
+      : withLeadingSlash
+  }),
 }))
 
 vi.mock('../compiler.ts', () => ({
   collectAppActions: mocks.collectAppActions,
   collectAppLoaders: mocks.collectAppLoaders,
   collectAppSymbols: mocks.collectAppSymbols,
+  collectReachableAnalyzableFiles: mocks.collectReachableAnalyzableFiles,
   createBuildServerActionUrl: vi.fn((id: string) => `/__eclipsa/action/${id}`),
   createBuildServerLoaderUrl: vi.fn((id: string) => `/__eclipsa/loader/${id}`),
   createBuildSymbolUrl: vi.fn((id: string) => `/entries/symbol__${id}.js`),
 }))
 
-import { build, toHonoRoutePaths } from './mod.ts'
+import { build, resolveStaticPathInfo, toHonoRoutePaths } from './mod.ts'
 
 const createBuilder = () =>
   ({
@@ -46,6 +57,103 @@ const createBuilder = () =>
     },
   }) as any
 
+const writeMinimalRuntimeEntry = async (
+  root: string,
+  options?: {
+    applyActionCsrfCookieSource?: string
+    attachRequestFetchSource?: string
+    createRequestFetchSource?: string
+    executeActionSource?: string
+    executeLoaderSource?: string
+    escapeInlineScriptTextSource?: string
+    escapeJSONScriptTextSource?: string
+    ensureActionCsrfTokenSource?: string
+    getActionFormSubmissionIdSource?: string
+    getNormalizedActionInputSource?: string
+    hasActionSource?: string
+    hasLoaderSource?: string
+    jsxDEVSource?: string
+    renderSSRAsyncSource?: string
+    renderSSRStreamSource?: string
+    serializeResumePayloadSource?: string
+  },
+) => {
+  const entriesDir = path.join(root, 'dist/ssr/entries')
+  await fs.mkdir(entriesDir, { recursive: true })
+  await fs.writeFile(
+    path.join(entriesDir, 'eclipsa_runtime.mjs'),
+    [
+      'export const Fragment = Symbol.for("fragment");',
+      options?.applyActionCsrfCookieSource ??
+        'export const applyActionCsrfCookie = (response) => response;',
+      options?.attachRequestFetchSource ?? 'export const attachRequestFetch = () => undefined;',
+      options?.createRequestFetchSource ?? 'export const createRequestFetch = () => undefined;',
+      options?.executeActionSource ??
+        'export const executeAction = async () => new Response(null, { status: 204 });',
+      options?.executeLoaderSource ??
+        'export const executeLoader = async () => new Response(null, { status: 204 });',
+      options?.escapeInlineScriptTextSource ??
+        'export const escapeInlineScriptText = (value) => value;',
+      options?.escapeJSONScriptTextSource ??
+        'export const escapeJSONScriptText = (value) => value;',
+      options?.ensureActionCsrfTokenSource ?? 'export const ensureActionCsrfToken = () => "csrf";',
+      options?.hasActionSource ?? 'export const hasAction = () => false;',
+      options?.hasLoaderSource ?? 'export const hasLoader = () => false;',
+      options?.jsxDEVSource ?? 'export const jsxDEV = () => ({});',
+      options?.renderSSRAsyncSource ??
+        'export const renderSSRAsync = async () => ({ html: "<html><head></head><body></body></html>", payload: {} });',
+      options?.renderSSRStreamSource ??
+        'export const renderSSRStream = async () => ({ chunks: (async function* () {})(), html: "<html><head></head><body></body></html>", payload: {} });',
+      'export const resolvePendingLoaders = async () => undefined;',
+      options?.serializeResumePayloadSource ?? 'export const serializeResumePayload = () => "{}";',
+      'export const composeRouteMetadata = () => null;',
+      'export const renderRouteMetadataHead = () => [];',
+      'export const deserializePublicValue = (value) => value;',
+      options?.getActionFormSubmissionIdSource ??
+        'export const getActionFormSubmissionId = async () => null;',
+      options?.getNormalizedActionInputSource ??
+        'export const getNormalizedActionInput = async () => null;',
+      'export const getStreamingResumeBootstrapScriptContent = () => "";',
+      'export const markPublicError = (_, value) => value;',
+      'export const primeActionState = () => undefined;',
+      'export const primeLocationState = () => undefined;',
+      'export const resolveReroute = (_, __, pathname) => pathname;',
+      'export const runHandleError = async () => ({ message: "error" });',
+      'export const withServerRequestContext = (_, __, fn) => fn();',
+      'export const APP_HOOKS_ELEMENT_ID = "e-app-hooks";',
+      'export const RESUME_FINAL_STATE_ELEMENT_ID = "e-resume-final";',
+      'export const ACTION_CONTENT_TYPE = "application/eclipsa-action+json";',
+      '',
+    ].join('\n'),
+  )
+}
+
+const writeMinimalSsrEntries = async (root: string) => {
+  const entriesDir = path.join(root, 'dist/ssr/entries')
+  const assetsDir = path.join(root, 'dist/client/assets')
+  const clientEntriesDir = path.join(root, 'dist/client/entries')
+  const clientChunksDir = path.join(root, 'dist/client/chunks')
+
+  await fs.mkdir(entriesDir, { recursive: true })
+  await fs.mkdir(assetsDir, { recursive: true })
+  await fs.mkdir(clientEntriesDir, { recursive: true })
+  await fs.mkdir(clientChunksDir, { recursive: true })
+  await fs.writeFile(
+    path.join(entriesDir, 'server_entry.mjs'),
+    'import { Hono } from "hono"; const app = new Hono(); export default app;\n',
+  )
+  await fs.writeFile(path.join(entriesDir, 'ssr_root.mjs'), 'export default (props) => props;\n')
+  await fs.writeFile(path.join(clientEntriesDir, 'client_boot.js'), 'console.log("boot");\n')
+  await fs.writeFile(path.join(clientChunksDir, 'shared.js'), 'export const shared = true;\n')
+  await writeMinimalRuntimeEntry(root)
+}
+
+const writeBuiltPageModule = async (root: string, entryName: string, source: string) => {
+  const entriesDir = path.join(root, 'dist/ssr/entries')
+  await fs.mkdir(entriesDir, { recursive: true })
+  await fs.writeFile(path.join(entriesDir, `${entryName}.mjs`), source)
+}
+
 const createRootRoute = (): RouteEntry => ({
   error: null,
   layouts: [],
@@ -61,6 +169,17 @@ const createRootRoute = (): RouteEntry => ({
   server: null,
 })
 
+const writeAppSource = async (
+  root: string,
+  relativePath: string,
+  source = 'export default () => null;\n',
+) => {
+  const filePath = path.join(root, 'app', relativePath)
+  await fs.mkdir(path.dirname(filePath), { recursive: true })
+  await fs.writeFile(filePath, source)
+  return filePath
+}
+
 describe('toHonoRoutePaths', () => {
   it('expands optional segments into concrete Hono paths', () => {
     expect(
@@ -73,14 +192,36 @@ describe('toHonoRoutePaths', () => {
   })
 })
 
+describe('resolveStaticPathInfo', () => {
+  it('builds concrete paths for catch-all params', () => {
+    expect(
+      resolveStaticPathInfo(
+        '/docs/[...slug]',
+        [
+          { kind: 'static', value: 'docs' },
+          { kind: 'rest', value: 'slug' },
+        ],
+        { slug: ['guide', 'getting-started'] },
+      ),
+    ).toEqual({
+      concretePath: '/docs/guide/getting-started',
+      honoParams: {
+        slug: 'guide/getting-started',
+      },
+      honoPatternPath: '/docs/:slug{.+}',
+    })
+  })
+})
+
 describe('build', () => {
   beforeEach(() => {
     mocks.collectAppActions.mockResolvedValue([])
     mocks.collectAppLoaders.mockResolvedValue([])
     mocks.collectAppSymbols.mockResolvedValue([])
-    mocks.createRouteManifest.mockReturnValue({
-      routes: [],
-    })
+    mocks.collectReachableAnalyzableFiles.mockImplementation(
+      async (entryFiles: readonly string[]) => [...entryFiles],
+    )
+    mocks.createRouteManifest.mockReturnValue([])
     mocks.createRoutes.mockResolvedValue([createRootRoute()])
     mocks.toSSG.mockReset()
   })
@@ -101,35 +242,690 @@ describe('build', () => {
     expect(mocks.toSSG).not.toHaveBeenCalled()
   })
 
-  it('prerenders static routes while keeping the node server bundle for dynamic routes', async () => {
-    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-node-hybrid-'))
+  it('renders the built SSR root through jsxDEV instead of calling the component directly', async () => {
+    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-root-jsx-'))
     const builder = createBuilder()
-    const entriesDir = path.join(root, 'dist/ssr/entries')
-    const assetsDir = path.join(root, 'dist/client/assets')
-
-    await fs.mkdir(entriesDir, { recursive: true })
-    await fs.mkdir(assetsDir, { recursive: true })
-    await fs.writeFile(
-      path.join(entriesDir, 'server_entry.mjs'),
-      'import { Hono } from "hono"; const app = new Hono(); export default app;\n',
-    )
-    await fs.writeFile(path.join(entriesDir, 'ssr_root.mjs'), 'export default (props) => props;\n')
-    await fs.writeFile(
-      path.join(entriesDir, 'eclipsa_runtime.mjs'),
-      [
-        'export const Fragment = Symbol.for("fragment");',
+
+    await build(builder, { root }, { output: 'node' })
+
+    const appSource = await fs.readFile(path.join(root, 'dist/ssr/eclipsa_app.mjs'), 'utf8')
+
+    expect(appSource).toContain('const document = jsxDEV(SSRRoot, {')
+    expect(appSource).not.toContain('const document = SSRRoot({')
+  })
+
+  it('replaces every built app-shell placeholder occurrence before responding', async () => {
+    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-placeholder-replace-'))
+    const builder = createBuilder()
+    await writeMinimalSsrEntries(root)
+    await writeMinimalRuntimeEntry(root, {
+      renderSSRStreamSource: [
+        'export const renderSSRStream = async () => ({',
+        '  chunks: (async function* () {})(),',
+        '  html: "<html><head>" +',
+        '    "<script type=\\"application/eclipsa-resume+json\\">__ECLIPSA_RESUME_PAYLOAD__</script>" +',
+        '    "<script type=\\"application/eclipsa-route-manifest+json\\">__ECLIPSA_ROUTE_MANIFEST__</script>" +',
+        '    "<script type=\\"application/eclipsa-app-hooks+json\\">__ECLIPSA_APP_HOOKS__</script>" +',
+        '    "<script>__ECLIPSA_CHUNK_CACHE__</script>" +',
+        '    "<script type=\\"application/eclipsa-resume+json\\">__ECLIPSA_RESUME_PAYLOAD__</script>" +',
+        '    "<script type=\\"application/eclipsa-route-manifest+json\\">__ECLIPSA_ROUTE_MANIFEST__</script>" +',
+        '    "<script type=\\"application/eclipsa-app-hooks+json\\">__ECLIPSA_APP_HOOKS__</script>" +',
+        '    "<script>__ECLIPSA_CHUNK_CACHE__</script>" +',
+        '    "</head><body></body></html>",',
+        '  payload: {},',
+        '});',
+      ].join('\n'),
+    })
+    await writeBuiltPageModule(root, 'route__page', 'export default () => null;\n')
+
+    await build(builder, { root }, { output: 'node' })
+
+    const { default: app } = (await import(
+      `${pathToFileURL(path.join(root, 'dist/ssr/eclipsa_app.mjs')).href}?t=${Date.now()}`
+    )) as {
+      default: { fetch(request: Request): Promise<Response> }
+    }
+
+    const response = await app.fetch(new Request('http://localhost/'))
+    const html = await response.text()
+
+    expect(html).not.toContain('__ECLIPSA_RESUME_PAYLOAD__')
+    expect(html).not.toContain('__ECLIPSA_ROUTE_MANIFEST__')
+    expect(html).not.toContain('__ECLIPSA_APP_HOOKS__')
+    expect(html).not.toContain('__ECLIPSA_CHUNK_CACHE__')
+  })
+
+  it('replaces finite head placeholders inside serialized built resume payloads', async () => {
+    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-payload-placeholder-replace-'))
+    const builder = createBuilder()
+    await writeMinimalSsrEntries(root)
+    await writeMinimalRuntimeEntry(root, {
+      renderSSRStreamSource: [
+        'export const renderSSRStream = async () => ({',
+        '  chunks: (async function* () {})(),',
+        '  html: "<html><head></head><body></body></html>",',
+        '  payload: {',
+        '    components: {',
+        '      c0: {',
+        '        props: {',
+        '          head: {',
+        '            children: [',
+        '              { props: { children: "__ECLIPSA_ROUTE_MANIFEST__" }, type: "script" },',
+        '              { props: { children: "__ECLIPSA_APP_HOOKS__" }, type: "script" },',
+        '              { props: { dangerouslySetInnerHTML: "__ECLIPSA_CHUNK_CACHE__" }, type: "script" },',
+        '            ],',
+        '            type: "fragment",',
+        '          },',
+        '        },',
+        '      },',
+        '    },',
+        '  },',
+        '});',
+      ].join('\n'),
+      serializeResumePayloadSource:
+        'export const serializeResumePayload = (payload) => JSON.stringify(payload);',
+    })
+    await writeBuiltPageModule(root, 'route__page', 'export default () => null;\n')
+
+    await build(builder, { root }, { output: 'node' })
+
+    const { default: app } = (await import(
+      `${pathToFileURL(path.join(root, 'dist/ssr/eclipsa_app.mjs')).href}?t=${Date.now()}`
+    )) as {
+      default: { fetch(request: Request): Promise<Response> }
+    }
+
+    const response = await app.fetch(new Request('http://localhost/'))
+    const html = await response.text()
+
+    expect(html).not.toContain('__ECLIPSA_ROUTE_MANIFEST__')
+    expect(html).not.toContain('__ECLIPSA_APP_HOOKS__')
+    expect(html).not.toContain('__ECLIPSA_CHUNK_CACHE__')
+    expect(html).toContain('"children":"[]"')
+    expect(html).toContain('{\\"client\\":null}')
+    expect(html).toContain('eclipsa-chunk-cache-sw.js')
+  })
+
+  it('serves route-data loader snapshots from the built node app', async () => {
+    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-route-data-'))
+    const builder = createBuilder()
+    await writeMinimalSsrEntries(root)
+    await writeMinimalRuntimeEntry(root, {
+      renderSSRAsyncSource:
+        'export const renderSSRAsync = async () => ({ html: "<html></html>", payload: { loaders: { profile: { data: { name: "Ada" }, error: null, loaded: true } } } });',
+    })
+    await writeBuiltPageModule(root, 'route__page', 'export default () => null;\n')
+
+    await build(builder, { root }, { output: 'node' })
+
+    const { default: app } = (await import(
+      `${pathToFileURL(path.join(root, 'dist/ssr/eclipsa_app.mjs')).href}?t=${Date.now()}`
+    )) as {
+      default: { fetch(request: Request): Promise<Response> }
+    }
+
+    const response = await app.fetch(
+      new Request(
+        'http://127.0.0.1:4173/__eclipsa/route-data?href=http%3A%2F%2F127.0.0.1%3A4173%2F',
+      ),
+    )
+
+    expect(response.status).toBe(200)
+    await expect(response.json()).resolves.toEqual({
+      finalHref: 'http://127.0.0.1:4173/',
+      finalPathname: '/',
+      kind: 'page',
+      loaders: {
+        profile: {
+          data: { name: 'Ada' },
+          error: null,
+          loaded: true,
+        },
+      },
+      ok: true,
+    })
+  })
+
+  it('returns middleware redirects from the built route-data endpoint', async () => {
+    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-route-data-redirect-'))
+    const builder = createBuilder()
+    await writeMinimalSsrEntries(root)
+    await writeBuiltPageModule(root, 'route__guarded__page', 'export default () => null;\n')
+    await writeBuiltPageModule(
+      root,
+      'special__guarded__middleware',
+      'export default (c) => c.redirect("/counter");\n',
+    )
+    mocks.createRoutes.mockResolvedValue([
+      {
+        ...createRootRoute(),
+        middlewares: [
+          {
+            entryName: 'special__guarded__middleware',
+            filePath: '/tmp/app/guarded/+middleware.ts',
+          },
+        ],
+        page: {
+          entryName: 'route__guarded__page',
+          filePath: '/tmp/app/guarded/+page.tsx',
+        },
+        routePath: '/guarded',
+        segments: [{ kind: 'static', value: 'guarded' }],
+      },
+    ])
+
+    await build(builder, { root }, { output: 'node' })
+
+    const { default: app } = (await import(
+      `${pathToFileURL(path.join(root, 'dist/ssr/eclipsa_app.mjs')).href}?t=${Date.now()}`
+    )) as {
+      default: { fetch(request: Request): Promise<Response> }
+    }
+
+    const response = await app.fetch(
+      new Request('http://localhost/__eclipsa/route-data?href=http%3A%2F%2Flocalhost%2Fguarded'),
+    )
+
+    expect(response.status).toBe(200)
+    await expect(response.json()).resolves.toEqual({
+      location: 'http://localhost/counter',
+      ok: false,
+    })
+  })
+
+  it('keeps built route-preflight dispatches in-process even when the host header is spoofed', async () => {
+    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-route-preflight-ssrf-'))
+    const builder = createBuilder()
+    const originalFetch = globalThis.fetch
+    const externalFetch = vi.fn(async () => new Response(null, { status: 204 }))
+    globalThis.fetch = externalFetch as typeof fetch
+
+    try {
+      await writeMinimalSsrEntries(root)
+      await writeMinimalRuntimeEntry(root, {
+        attachRequestFetchSource:
+          'export const attachRequestFetch = (c, fetchImpl) => c.set("fetch", fetchImpl);',
+        createRequestFetchSource: 'export const createRequestFetch = () => globalThis.fetch;',
+      })
+      await writeBuiltPageModule(root, 'route__guarded__page', 'export default () => null;\n')
+      await writeBuiltPageModule(
+        root,
+        'special__guarded__middleware',
+        [
+          'export default (c, next) => {',
+          '  if (new URL(c.req.url).searchParams.get("allow") === "1") {',
+          '    return next();',
+          '  }',
+          '  return c.redirect("/counter");',
+          '};',
+        ].join('\n'),
+      )
+      mocks.createRoutes.mockResolvedValue([
+        {
+          ...createRootRoute(),
+          middlewares: [
+            {
+              entryName: 'special__guarded__middleware',
+              filePath: '/tmp/app/guarded/+middleware.ts',
+            },
+          ],
+          page: {
+            entryName: 'route__guarded__page',
+            filePath: '/tmp/app/guarded/+page.tsx',
+          },
+          routePath: '/guarded',
+          segments: [{ kind: 'static', value: 'guarded' }],
+        },
+      ])
+
+      await build(builder, { root }, { output: 'node' })
+
+      const { default: app } = (await import(
+        `${pathToFileURL(path.join(root, 'dist/ssr/eclipsa_app.mjs')).href}?t=${Date.now()}`
+      )) as {
+        default: { fetch(request: Request): Promise<Response> }
+      }
+
+      const response = await app.fetch(
+        new Request(
+          'http://localhost/__eclipsa/route-preflight?href=http%3A%2F%2F169.254.169.254%2Fguarded%3Fallow%3D1',
+          {
+            headers: {
+              host: '169.254.169.254',
+            },
+          },
+        ),
+      )
+
+      expect(response.status).toBe(200)
+      await expect(response.json()).resolves.toEqual({
+        ok: true,
+      })
+      expect(externalFetch).not.toHaveBeenCalled()
+    } finally {
+      globalThis.fetch = originalFetch
+    }
+  })
+
+  it('runs server hooks and route middleware for built action and loader rpc requests', async () => {
+    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-rpc-route-'))
+    const builder = createBuilder()
+    const securePagePath = await writeAppSource(root, 'secure/[id]/+page.tsx')
+    const publicPagePath = await writeAppSource(root, 'public/+page.tsx')
+    await writeAppSource(
+      root,
+      '+hooks.server.ts',
+      'export const handle = async (_c, resolve) => resolve(_c);\n',
+    )
+    await writeMinimalSsrEntries(root)
+    await writeMinimalRuntimeEntry(root, {
+      executeActionSource: [
+        'export const executeAction = async (_id, c) =>',
+        '  c.json({',
+        '    guard: c.get("guard") ?? null,',
+        '    handled: c.get("fromHandle") ?? null,',
+        '    id: c.req.param("id") ?? null,',
+        '  });',
+      ].join('\n'),
+      executeLoaderSource: [
+        'export const executeLoader = async (_id, c) =>',
+        '  c.json({',
+        '    guard: c.get("guard") ?? null,',
+        '    handled: c.get("fromHandle") ?? null,',
+        '    id: c.req.param("id") ?? null,',
+        '  });',
+      ].join('\n'),
+      hasActionSource: 'export const hasAction = () => true;',
+      hasLoaderSource: 'export const hasLoader = () => true;',
+    })
+    await writeBuiltPageModule(root, 'route__secure___id___page', 'export default () => null;\n')
+    await writeBuiltPageModule(root, 'route__public__page', 'export default () => null;\n')
+    await writeBuiltPageModule(
+      root,
+      'special__secure__middleware',
+      'export default async (c, next) => { c.set("guard", "secure"); await next(); };\n',
+    )
+    await writeBuiltPageModule(
+      root,
+      'server_hooks',
+      'export const handle = async (c, resolve) => { c.set("fromHandle", "yes"); return resolve(c); };\n',
+    )
+    mocks.collectAppActions.mockResolvedValue([{ filePath: securePagePath, id: 'secure-action' }])
+    mocks.collectAppLoaders.mockResolvedValue([{ filePath: securePagePath, id: 'secure-loader' }])
+    mocks.createRoutes.mockResolvedValue([
+      {
+        ...createRootRoute(),
+        middlewares: [
+          {
+            entryName: 'special__secure__middleware',
+            filePath: path.join(root, 'app/secure/+middleware.ts'),
+          },
+        ],
+        page: {
+          entryName: 'route__secure___id___page',
+          filePath: securePagePath,
+        },
+        routePath: '/secure/[id]',
+        segments: [
+          { kind: 'static', value: 'secure' },
+          { kind: 'required', value: 'id' },
+        ],
+      },
+      {
+        ...createRootRoute(),
+        page: {
+          entryName: 'route__public__page',
+          filePath: publicPagePath,
+        },
+        routePath: '/public',
+        segments: [{ kind: 'static', value: 'public' }],
+      },
+    ])
+
+    await build(builder, { root }, { output: 'node' })
+
+    const { default: app } = (await import(
+      `${pathToFileURL(path.join(root, 'dist/ssr/eclipsa_app.mjs')).href}?t=${Date.now()}`
+    )) as {
+      default: { fetch(request: Request): Promise<Response> }
+    }
+
+    const actionResponse = await app.fetch(
+      new Request('http://localhost/__eclipsa/action/secure-action', {
+        headers: {
+          [ROUTE_RPC_URL_HEADER]: 'http://localhost/secure/123',
+        },
+        method: 'POST',
+      }),
+    )
+    expect(actionResponse.status).toBe(200)
+    await expect(actionResponse.json()).resolves.toEqual({
+      guard: 'secure',
+      handled: 'yes',
+      id: '123',
+    })
+
+    const loaderResponse = await app.fetch(
+      new Request('http://localhost/__eclipsa/loader/secure-loader', {
+        headers: {
+          [ROUTE_RPC_URL_HEADER]: 'http://localhost/secure/123',
+        },
+      }),
+    )
+    expect(loaderResponse.status).toBe(200)
+    await expect(loaderResponse.json()).resolves.toEqual({
+      guard: 'secure',
+      handled: 'yes',
+      id: '123',
+    })
+
+    const blockedResponse = await app.fetch(
+      new Request('http://localhost/__eclipsa/action/secure-action', {
+        headers: {
+          [ROUTE_RPC_URL_HEADER]: 'http://localhost/public',
+        },
+        method: 'POST',
+      }),
+    )
+    expect(blockedResponse.status).toBe(404)
+  })
+
+  it('runs server hooks for built page route requests', async () => {
+    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-page-hooks-'))
+    const builder = createBuilder()
+    const secureServerPath = await writeAppSource(root, 'secure/[id]/+server.ts')
+    await writeAppSource(
+      root,
+      '+hooks.server.ts',
+      'export const handle = async (_c, resolve) => resolve(_c);\n',
+    )
+    await writeMinimalSsrEntries(root)
+    await writeMinimalRuntimeEntry(root)
+    await writeBuiltPageModule(
+      root,
+      'route__secure___id___server',
+      'export const GET = (c) => c.json({ guard: c.get("guard") ?? null, handled: c.get("fromHandle") ?? null, id: c.req.param("id") ?? null });\n',
+    )
+    await writeBuiltPageModule(
+      root,
+      'special__secure__middleware',
+      'export default async (c, next) => { c.set("guard", "secure"); await next(); };\n',
+    )
+    await writeBuiltPageModule(
+      root,
+      'server_hooks',
+      'export const handle = async (c, resolve) => { c.set("fromHandle", "yes"); return resolve(c); };\n',
+    )
+    mocks.createRoutes.mockResolvedValue([
+      {
+        ...createRootRoute(),
+        middlewares: [
+          {
+            entryName: 'special__secure__middleware',
+            filePath: path.join(root, 'app/secure/+middleware.ts'),
+          },
+        ],
+        page: null,
+        routePath: '/secure/[id]',
+        segments: [
+          { kind: 'static', value: 'secure' },
+          { kind: 'required', value: 'id' },
+        ],
+        server: {
+          entryName: 'route__secure___id___server',
+          filePath: secureServerPath,
+        },
+      },
+    ])
+
+    await build(builder, { root }, { output: 'node' })
+
+    const { default: app } = (await import(
+      `${pathToFileURL(path.join(root, 'dist/ssr/eclipsa_app.mjs')).href}?t=${Date.now()}`
+    )) as {
+      default: { fetch(request: Request): Promise<Response> }
+    }
+
+    const response = await app.fetch(new Request('http://localhost/secure/123'))
+    expect(response.status).toBe(200)
+    await expect(response.json()).resolves.toEqual({
+      guard: 'secure',
+      handled: 'yes',
+      id: '123',
+    })
+  })
+
+  it('rejects built form posts that target actions outside the current route graph', async () => {
+    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-form-action-'))
+    const builder = createBuilder()
+    const securePagePath = await writeAppSource(root, 'secure/+page.tsx')
+    const publicPagePath = await writeAppSource(root, 'public/+page.tsx')
+    await writeMinimalSsrEntries(root)
+    await writeMinimalRuntimeEntry(root, {
+      executeActionSource:
         'export const executeAction = async () => new Response(null, { status: 204 });',
-        'export const executeLoader = async () => new Response(null, { status: 204 });',
-        'export const escapeJSONScriptText = (value) => value;',
-        'export const hasAction = () => false;',
-        'export const hasLoader = () => false;',
-        'export const jsxDEV = () => ({});',
-        'export const renderSSRAsync = async () => ({ html: "<html><head></head><body></body></html>", payload: {} });',
-        'export const resolvePendingLoaders = async () => undefined;',
-        'export const serializeResumePayload = () => "{}";',
-        '',
+      getActionFormSubmissionIdSource: [
+        'export const getActionFormSubmissionId = async (c) => {',
+        '  const formData = await c.req.formData();',
+        '  return formData.get("__e_action");',
+        '};',
       ].join('\n'),
+      hasActionSource: 'export const hasAction = () => true;',
+    })
+    await writeBuiltPageModule(root, 'route__secure__page', 'export default () => null;\n')
+    await writeBuiltPageModule(root, 'route__public__page', 'export default () => null;\n')
+    mocks.collectAppActions.mockResolvedValue([{ filePath: securePagePath, id: 'secure-action' }])
+    mocks.createRoutes.mockResolvedValue([
+      {
+        ...createRootRoute(),
+        page: {
+          entryName: 'route__secure__page',
+          filePath: securePagePath,
+        },
+        routePath: '/secure',
+        segments: [{ kind: 'static', value: 'secure' }],
+      },
+      {
+        ...createRootRoute(),
+        page: {
+          entryName: 'route__public__page',
+          filePath: publicPagePath,
+        },
+        routePath: '/public',
+        segments: [{ kind: 'static', value: 'public' }],
+      },
+    ])
+
+    await build(builder, { root }, { output: 'node' })
+
+    const { default: app } = (await import(
+      `${pathToFileURL(path.join(root, 'dist/ssr/eclipsa_app.mjs')).href}?t=${Date.now()}`
+    )) as {
+      default: { fetch(request: Request): Promise<Response> }
+    }
+
+    const formData = new FormData()
+    formData.set('__e_action', 'secure-action')
+    const response = await app.fetch(
+      new Request('http://localhost/public', {
+        body: formData,
+        method: 'POST',
+      }),
     )
+
+    expect(response.status).toBe(404)
+  })
+
+  it('serves not-found loader snapshots from the built route-data endpoint', async () => {
+    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-route-data-not-found-'))
+    const builder = createBuilder()
+    await writeMinimalSsrEntries(root)
+    await writeMinimalRuntimeEntry(root, {
+      renderSSRAsyncSource:
+        'export const renderSSRAsync = async () => ({ html: "<html></html>", payload: { loaders: { missing: { data: null, error: { message: "missing" }, loaded: true } } } });',
+    })
+    await writeBuiltPageModule(root, 'route__page', 'export default () => null;\n')
+    await writeBuiltPageModule(root, 'special___not_found', 'export default () => null;\n')
+    mocks.createRoutes.mockResolvedValue([
+      {
+        ...createRootRoute(),
+        notFound: {
+          entryName: 'special___not_found',
+          filePath: '/tmp/app/+not-found.tsx',
+        },
+      },
+    ])
+
+    await build(builder, { root }, { output: 'node' })
+
+    const { default: app } = (await import(
+      `${pathToFileURL(path.join(root, 'dist/ssr/eclipsa_app.mjs')).href}?t=${Date.now()}`
+    )) as {
+      default: { fetch(request: Request): Promise<Response> }
+    }
+
+    const response = await app.fetch(
+      new Request('http://localhost/__eclipsa/route-data?href=http%3A%2F%2Flocalhost%2Fmissing'),
+    )
+
+    expect(response.status).toBe(200)
+    await expect(response.json()).resolves.toEqual({
+      finalHref: 'http://localhost/missing',
+      finalPathname: '/missing',
+      kind: 'not-found',
+      loaders: {
+        missing: {
+          data: null,
+          error: { message: 'missing' },
+          loaded: true,
+        },
+      },
+      ok: true,
+    })
+  })
+
+  it('keeps nearest dynamic params when built not-found route-data fallbacks resolve encoded paths', async () => {
+    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-not-found-params-'))
+    const builder = createBuilder()
+    await writeMinimalSsrEntries(root)
+    await writeMinimalRuntimeEntry(root, {
+      jsxDEVSource: 'export const jsxDEV = (type, props) => ({ type, props });',
+      renderSSRAsyncSource: [
+        'const resolveNode = (value) => {',
+        '  if (!value || typeof value !== "object") return value;',
+        '  if (typeof value.type === "function") return resolveNode(value.type(value.props ?? {}));',
+        '  return Object.fromEntries(Object.entries(value).map(([key, entry]) => [key, resolveNode(entry)]));',
+        '};',
+        'export const renderSSRAsync = async (renderDocument) => ({',
+        '  payload: {',
+        '    loaders: {',
+        '      params: {',
+        '        data: resolveNode(renderDocument()).params,',
+        '        error: null,',
+        '        loaded: true,',
+        '      },',
+        '    },',
+        '  },',
+        '});',
+      ].join('\n'),
+    })
+    await writeBuiltPageModule(
+      root,
+      'route__hello_world___slug____page',
+      'export default () => null;\n',
+    )
+    await writeBuiltPageModule(
+      root,
+      'special__hello_world___slug____not_found',
+      'export default (props) => ({ type: "not-found", params: props.__eclipsa_route_params });\n',
+    )
+    mocks.createRoutes.mockResolvedValue([
+      {
+        ...createRootRoute(),
+        notFound: {
+          entryName: 'special__hello_world___slug____not_found',
+          filePath: '/tmp/app/hello world/[slug]/+not-found.tsx',
+        },
+        page: {
+          entryName: 'route__hello_world___slug____page',
+          filePath: '/tmp/app/hello world/[slug]/+page.tsx',
+        },
+        routePath: '/hello world/[slug]',
+        segments: [
+          { kind: 'static', value: 'hello world' },
+          { kind: 'required', value: 'slug' },
+        ],
+        server: null,
+      },
+    ])
+
+    await build(builder, { root }, { output: 'node' })
+
+    const { default: app } = (await import(
+      `${pathToFileURL(path.join(root, 'dist/ssr/eclipsa_app.mjs')).href}?t=${Date.now()}`
+    )) as {
+      default: { fetch(request: Request): Promise<Response> }
+    }
+
+    const response = await app.fetch(
+      new Request(
+        'http://localhost/__eclipsa/route-data?href=http%3A%2F%2Flocalhost%2Fhello%2520world%2Fada%2Fmissing',
+      ),
+    )
+
+    expect(response.status).toBe(200)
+    await expect(response.json()).resolves.toEqual({
+      finalHref: 'http://localhost/hello%20world/ada/missing',
+      finalPathname: '/hello%20world/ada/missing',
+      kind: 'not-found',
+      loaders: {
+        params: {
+          data: {
+            slug: 'ada',
+          },
+          error: null,
+          loaded: true,
+        },
+      },
+      ok: true,
+    })
+  })
+
+  it('returns document fallback when built route-data rendering throws notFound without a special route', async () => {
+    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-route-data-document-'))
+    const builder = createBuilder()
+    await writeMinimalSsrEntries(root)
+    await writeMinimalRuntimeEntry(root, {
+      renderSSRAsyncSource:
+        'export const renderSSRAsync = async () => { throw { __eclipsa_not_found__: true }; };',
+    })
+    await writeBuiltPageModule(root, 'route__page', 'export default () => null;\n')
+
+    await build(builder, { root }, { output: 'node' })
+
+    const { default: app } = (await import(
+      `${pathToFileURL(path.join(root, 'dist/ssr/eclipsa_app.mjs')).href}?t=${Date.now()}`
+    )) as {
+      default: { fetch(request: Request): Promise<Response> }
+    }
+
+    const response = await app.fetch(
+      new Request(
+        'http://127.0.0.1:4173/__eclipsa/route-data?href=http%3A%2F%2F127.0.0.1%3A4173%2F',
+      ),
+    )
+
+    expect(response.status).toBe(200)
+    await expect(response.json()).resolves.toEqual({
+      document: true,
+      ok: false,
+    })
+  })
+
+  it('prerenders static routes while keeping the node server bundle for dynamic routes', async () => {
+    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-node-hybrid-'))
+    const builder = createBuilder()
+    await writeMinimalSsrEntries(root)
     mocks.createRoutes.mockResolvedValue([
       {
         ...createRootRoute(),
@@ -173,33 +969,8 @@ describe('build', () => {
   it('runs Hono toSSG for ssg output and skips non-page routes', async () => {
     const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-ssg-'))
     const builder = createBuilder()
-    const entriesDir = path.join(root, 'dist/ssr/entries')
-    const assetsDir = path.join(root, 'dist/client/assets')
-
-    await fs.mkdir(entriesDir, { recursive: true })
-    await fs.mkdir(assetsDir, { recursive: true })
-    await fs.writeFile(
-      path.join(entriesDir, 'server_entry.mjs'),
-      'import { Hono } from "hono"; const app = new Hono(); export default app;\n',
-    )
-    await fs.writeFile(path.join(assetsDir, 'layout.css'), 'body { color: white; }\n')
-    await fs.writeFile(path.join(entriesDir, 'ssr_root.mjs'), 'export default (props) => props;\n')
-    await fs.writeFile(
-      path.join(entriesDir, 'eclipsa_runtime.mjs'),
-      [
-        'export const Fragment = Symbol.for("fragment");',
-        'export const executeAction = async () => new Response(null, { status: 204 });',
-        'export const executeLoader = async () => new Response(null, { status: 204 });',
-        'export const escapeJSONScriptText = (value) => value;',
-        'export const hasAction = () => false;',
-        'export const hasLoader = () => false;',
-        'export const jsxDEV = () => ({});',
-        'export const renderSSRAsync = async () => ({ html: "<html><head></head><body></body></html>", payload: {} });',
-        'export const resolvePendingLoaders = async () => undefined;',
-        'export const serializeResumePayload = () => "{}";',
-        '',
-      ].join('\n'),
-    )
+    await writeMinimalSsrEntries(root)
+    await fs.writeFile(path.join(root, 'dist/client/assets/layout.css'), 'body { color: white; }\n')
     mocks.toSSG.mockResolvedValue({
       files: ['index.html'],
       success: true,
@@ -230,6 +1001,74 @@ describe('build', () => {
     await expect(fs.stat(path.join(root, 'dist/server'))).rejects.toThrow()
   })
 
+  it('emits a chunk cache service worker and registers it from the built app shell', async () => {
+    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-sw-'))
+    const builder = createBuilder()
+    await writeMinimalSsrEntries(root)
+    await writeBuiltPageModule(root, 'route__page', 'export default () => null;\n')
+
+    await build(builder, { root }, { output: 'node' })
+
+    await expect(
+      fs.readFile(path.join(root, 'dist/client/eclipsa-chunk-cache-sw.js'), 'utf8'),
+    ).resolves.toContain('const PATH_PREFIXES = ["/chunks/","/entries/"];')
+    await expect(
+      fs.readFile(path.join(root, 'dist/client/eclipsa-chunk-cache-sw.js'), 'utf8'),
+    ).resolves.toContain('caches.open(CACHE_NAME)')
+    await expect(
+      fs.readFile(path.join(root, 'dist/client/eclipsa-chunk-cache-sw.js'), 'utf8'),
+    ).resolves.toContain('addEventListener("message"')
+    await expect(
+      fs.readFile(path.join(root, 'dist/ssr/eclipsa_app.mjs'), 'utf8'),
+    ).resolves.toContain('/eclipsa-chunk-cache-sw.js')
+    await expect(
+      fs.readFile(path.join(root, 'dist/ssr/eclipsa_app.mjs'), 'utf8'),
+    ).resolves.toContain('navigator.serviceWorker.register')
+    await expect(
+      fs.readFile(path.join(root, 'dist/ssr/eclipsa_app.mjs'), 'utf8'),
+    ).resolves.toContain('eclipsa:chunk-cache-precache')
+  })
+
+  it('escapes chunk cache bootstrap scripts as inline javascript instead of json', async () => {
+    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-sw-inline-'))
+    const builder = createBuilder()
+    await writeMinimalSsrEntries(root)
+    await writeMinimalRuntimeEntry(root, {
+      escapeInlineScriptTextSource: [
+        'export const escapeInlineScriptText = (value) =>',
+        "  value.replaceAll('<', '\\\\u003C').replaceAll('&', '\\\\u0026').replaceAll('\\u2028', '\\\\u2028').replaceAll('\\u2029', '\\\\u2029');",
+      ].join('\n'),
+      escapeJSONScriptTextSource: [
+        'export const escapeJSONScriptText = (value) =>',
+        "  value.replaceAll('<', '\\\\u003C').replaceAll('>', '\\\\u003E').replaceAll('&', '\\\\u0026').replaceAll('\\u2028', '\\\\u2028').replaceAll('\\u2029', '\\\\u2029');",
+      ].join('\n'),
+      renderSSRAsyncSource: [
+        'export const renderSSRAsync = async () => ({',
+        '  html: "<html><head><script>__ECLIPSA_CHUNK_CACHE__</script><script id=\\"eclipsa-route-manifest\\" type=\\"application/eclipsa-route-manifest+json\\">__ECLIPSA_ROUTE_MANIFEST__</script><script id=\\"eclipsa-app-hooks\\" type=\\"application/eclipsa-app-hooks+json\\">__ECLIPSA_APP_HOOKS__</script></head><body><script id=\\"eclipsa-resume\\" type=\\"application/eclipsa-resume+json\\">__ECLIPSA_RESUME_PAYLOAD__</script></body></html>",',
+        '  payload: {},',
+        '});',
+      ].join('\n'),
+    })
+    await writeBuiltPageModule(root, 'route__page', 'export default () => null;\n')
+
+    await build(builder, { root }, { output: 'node' })
+
+    const { default: app } = (await import(
+      `${pathToFileURL(path.join(root, 'dist/ssr/eclipsa_app.mjs')).href}?t=${Date.now()}`
+    )) as {
+      default: { fetch(request: Request): Promise<Response> }
+    }
+
+    const response = await app.fetch(new Request('http://localhost/'))
+
+    expect(response.status).toBe(200)
+    const html = await response.text()
+    expect(html).toContain('eclipsa:chunk-cache-precache')
+    expect(html).toContain('(()=>{const message=')
+    expect(html).toContain('=>navigator.serviceWorker.ready')
+    expect(html).not.toContain('\\u003E')
+  })
+
   it('rejects ssg output when route middleware is present', async () => {
     const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-ssg-middleware-'))
     const builder = createBuilder()
@@ -265,27 +1104,166 @@ describe('build', () => {
     )
   })
 
-  it('rejects static rendering for routes with dynamic segments', async () => {
-    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-node-static-dynamic-segment-'))
+  it('prerenders dynamic static routes from getStaticPaths entries', async () => {
+    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-ssg-dynamic-static-'))
     const builder = createBuilder()
+    await writeMinimalSsrEntries(root)
+    await writeBuiltPageModule(
+      root,
+      'route__docs___slug____page',
+      [
+        'export const getStaticPaths = () => [{ params: { slug: ["getting-started"] } }];',
+        'export default () => null;',
+        '',
+      ].join('\n'),
+    )
     mocks.createRoutes.mockResolvedValue([
       {
         ...createRootRoute(),
         page: {
-          entryName: 'route__blog___slug___page',
-          filePath: '/tmp/app/blog/[slug]/+page.tsx',
+          entryName: 'route__docs___slug____page',
+          filePath: '/tmp/app/docs/[...slug]/+page.tsx',
         },
         renderMode: 'static',
-        routePath: '/blog/[slug]',
+        routePath: '/docs/[...slug]',
         segments: [
-          { kind: 'static', value: 'blog' },
-          { kind: 'required', value: 'slug' },
+          { kind: 'static', value: 'docs' },
+          { kind: 'rest', value: 'slug' },
         ],
       },
     ])
+    mocks.toSSG.mockResolvedValue({
+      files: ['docs/getting-started.html'],
+      success: true,
+    })
 
-    await expect(build(builder, { root }, { output: 'node' })).rejects.toThrow(
-      /Static rendering currently requires a concrete route path/,
+    await build(builder, { root }, { output: 'ssg' })
+
+    expect(mocks.toSSG).toHaveBeenCalledTimes(1)
+    const [, , options] = mocks.toSSG.mock.calls[0] as [
+      { fetch(request: Request): Promise<Response> },
+      typeof fs,
+      {
+        beforeRequestHook(request: Request): Request | false
+        dir: string
+      },
+    ]
+    const request = options.beforeRequestHook(new Request('http://localhost/docs/:slug{.+}'))
+    expect(request).toBeInstanceOf(Request)
+    if (!(request instanceof Request)) {
+      throw new Error('Expected dynamic static route to attach ssgParams.')
+    }
+    expect((request as Request & { ssgParams?: Record<string, string>[] }).ssgParams).toEqual([
+      {
+        slug: 'getting-started',
+      },
+    ])
+  })
+
+  it('rejects dynamic static routes without getStaticPaths', async () => {
+    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-static-missing-paths-'))
+    const builder = createBuilder()
+    await writeMinimalSsrEntries(root)
+    await writeBuiltPageModule(root, 'route__docs___slug____page', 'export default () => null;\n')
+    mocks.createRoutes.mockResolvedValue([
+      {
+        ...createRootRoute(),
+        page: {
+          entryName: 'route__docs___slug____page',
+          filePath: '/tmp/app/docs/[...slug]/+page.tsx',
+        },
+        renderMode: 'static',
+        routePath: '/docs/[...slug]',
+        segments: [
+          { kind: 'static', value: 'docs' },
+          { kind: 'rest', value: 'slug' },
+        ],
+      },
+    ])
+
+    await expect(build(builder, { root }, { output: 'ssg' })).rejects.toThrow(
+      /export getStaticPaths/,
+    )
+  })
+
+  it('rejects invalid getStaticPaths params', async () => {
+    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-static-invalid-paths-'))
+    const builder = createBuilder()
+    await writeMinimalSsrEntries(root)
+    await writeBuiltPageModule(
+      root,
+      'route__docs___slug____page',
+      [
+        'export const getStaticPaths = () => [{ params: { slug: "getting-started" } }];',
+        'export default () => null;',
+        '',
+      ].join('\n'),
+    )
+    mocks.createRoutes.mockResolvedValue([
+      {
+        ...createRootRoute(),
+        page: {
+          entryName: 'route__docs___slug____page',
+          filePath: '/tmp/app/docs/[...slug]/+page.tsx',
+        },
+        renderMode: 'static',
+        routePath: '/docs/[...slug]',
+        segments: [
+          { kind: 'static', value: 'docs' },
+          { kind: 'rest', value: 'slug' },
+        ],
+      },
+    ])
+
+    await expect(build(builder, { root }, { output: 'ssg' })).rejects.toThrow(
+      /rest param "slug" must be a string array/,
+    )
+  })
+
+  it('rejects duplicate concrete paths across static routes', async () => {
+    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-build-static-duplicate-paths-'))
+    const builder = createBuilder()
+    await writeMinimalSsrEntries(root)
+    await writeBuiltPageModule(
+      root,
+      'route__docs___slug____page',
+      [
+        'export const getStaticPaths = () => [{ params: { slug: ["about"] } }];',
+        'export default () => null;',
+        '',
+      ].join('\n'),
+    )
+    mocks.createRoutes.mockResolvedValue([
+      {
+        ...createRootRoute(),
+        page: {
+          entryName: 'route__docs__about__page',
+          filePath: '/tmp/app/docs/about/+page.tsx',
+        },
+        renderMode: 'static',
+        routePath: '/docs/about',
+        segments: [
+          { kind: 'static', value: 'docs' },
+          { kind: 'static', value: 'about' },
+        ],
+      },
+      {
+        ...createRootRoute(),
+        page: {
+          entryName: 'route__docs___slug____page',
+          filePath: '/tmp/app/docs/[...slug]/+page.tsx',
+        },
+        renderMode: 'static',
+        routePath: '/docs/[...slug]',
+        segments: [
+          { kind: 'static', value: 'docs' },
+          { kind: 'rest', value: 'slug' },
+        ],
+      },
+    ])
+
+    await expect(build(builder, { root }, { output: 'ssg' })).rejects.toThrow(
+      /duplicate concrete path "\/docs\/about"/,
     )
   })
 })
diff --git a/packages/eclipsa/vite/build/mod.ts b/packages/eclipsa/vite/build/mod.ts
index 5d740f3..38d17da 100644
--- a/packages/eclipsa/vite/build/mod.ts
+++ b/packages/eclipsa/vite/build/mod.ts
@@ -4,29 +4,56 @@ import * as fs from 'node:fs/promises'
 import * as path from 'node:path'
 import { cwd } from 'node:process'
 import { pathToFileURL } from 'node:url'
-import type { RouteManifest, RoutePathSegment } from '../../core/router-shared.ts'
-import { ROUTE_MANIFEST_ELEMENT_ID, ROUTE_PREFLIGHT_ENDPOINT } from '../../core/router-shared.ts'
+import type {
+  GetStaticPaths,
+  RouteManifest,
+  RouteParams,
+  RoutePathSegment,
+  StaticPath,
+} from '../../core/router-shared.ts'
+import {
+  ROUTE_DATA_ENDPOINT,
+  ROUTE_DATA_REQUEST_HEADER,
+  ROUTE_MANIFEST_ELEMENT_ID,
+  ROUTE_PREFLIGHT_ENDPOINT,
+  ROUTE_RPC_URL_HEADER,
+} from '../../core/router-shared.ts'
 import {
   createBuildModuleUrl,
   createBuildServerModuleUrl,
   createRouteManifest,
+  normalizeRoutePath,
   createRoutes,
 } from '../utils/routing.ts'
 import {
   collectAppActions,
   collectAppLoaders,
   collectAppSymbols,
+  collectReachableAnalyzableFiles,
   createBuildServerActionUrl,
   createBuildServerLoaderUrl,
   createBuildSymbolUrl,
 } from '../compiler.ts'
 import type { ResolvedEclipsaPluginOptions } from '../options.ts'
+import { xxHash32 } from '../../utils/xxhash32.ts'
 
 const joinHonoPath = (left: string, right: string) => `${left}/${right}`.replaceAll(/\/+/g, '/')
+const CHUNK_CACHE_NAME_PREFIX = 'eclipsa-chunk-cache'
+const CHUNK_CACHE_SW_URL = '/eclipsa-chunk-cache-sw.js'
+const CHUNK_CACHEABLE_PATH_PREFIXES = ['/chunks/', '/entries/']
 
 const toPublicAssetUrl = (root: string, filePath: string) =>
   `/${path.relative(root, filePath).split(path.sep).join('/')}`
 
+const fileExists = async (filePath: string) => {
+  try {
+    await fs.access(filePath)
+    return true
+  } catch {
+    return false
+  }
+}
+
 const collectFiles = async (directory: string): Promise<string[]> => {
   const entries = await fs.readdir(directory, { withFileTypes: true })
   const files = await Promise.all(
@@ -53,14 +80,174 @@ const collectClientStylesheetUrls = async (clientDir: string) => {
   }
 }
 
+interface ClientChunkCacheAsset {
+  hash: string
+  url: string
+}
+
+const collectClientChunkCacheAssets = async (
+  clientDir: string,
+): Promise<ClientChunkCacheAsset[]> => {
+  try {
+    const files = await collectFiles(clientDir)
+    const assetFiles = files
+      .filter((filePath) => path.extname(filePath) === '.js')
+      .map((filePath) => ({
+        filePath,
+        url: toPublicAssetUrl(clientDir, filePath),
+      }))
+      .filter((entry) =>
+        CHUNK_CACHEABLE_PATH_PREFIXES.some((prefix) => entry.url.startsWith(prefix)),
+      )
+      .sort((left, right) => left.url.localeCompare(right.url))
+
+    return Promise.all(
+      assetFiles.map(async (asset) => ({
+        hash: xxHash32(await fs.readFile(asset.filePath))
+          .toString(16)
+          .padStart(8, '0'),
+        url: asset.url,
+      })),
+    )
+  } catch (error) {
+    if ((error as NodeJS.ErrnoException).code === 'ENOENT') {
+      return []
+    }
+    throw error
+  }
+}
+
+const createClientChunkCacheVersion = (assets: ClientChunkCacheAsset[]) =>
+  xxHash32(assets.map((asset) => `${asset.url}:${asset.hash}`).join('\n'))
+    .toString(16)
+    .padStart(8, '0')
+
+const renderChunkCacheServiceWorker = (
+  version: string,
+) => `const CACHE_NAME = "${CHUNK_CACHE_NAME_PREFIX}-${version}";
+const CACHE_PREFIX = "${CHUNK_CACHE_NAME_PREFIX}-";
+const PATH_PREFIXES = ${JSON.stringify(CHUNK_CACHEABLE_PATH_PREFIXES)};
+const PRECACHE_MESSAGE_TYPE = "eclipsa:chunk-cache-precache";
+const pendingPrecacheUrls = new Set();
+
+const isCacheableRequest = (request) => {
+  if (request.method !== "GET") {
+    return false;
+  }
+  const url = new URL(request.url);
+  return url.origin === self.location.origin && PATH_PREFIXES.some((prefix) => url.pathname.startsWith(prefix));
+};
+
+const fetchAndCache = async (cache, request) => {
+  const response = await fetch(request);
+  if (response.ok && (response.type === "basic" || response.type === "cors")) {
+    await cache.put(request, response.clone());
+  }
+  return response;
+};
+
+const precacheUrl = async (cache, url) => {
+  if (pendingPrecacheUrls.has(url)) {
+    return;
+  }
+  pendingPrecacheUrls.add(url);
+  try {
+    const request = new Request(new URL(url, self.location.origin).href, {
+      credentials: "same-origin",
+    });
+    if (await cache.match(request)) {
+      return;
+    }
+    await fetchAndCache(cache, request);
+  } finally {
+    pendingPrecacheUrls.delete(url);
+  }
+};
+
+const precacheUrls = async (priorityUrls, urls) => {
+  const cache = await caches.open(CACHE_NAME);
+  const queue = [...new Set([...priorityUrls, ...urls])].filter((url) =>
+    PATH_PREFIXES.some((prefix) => {
+      const pathname = new URL(url, self.location.origin).pathname;
+      return pathname.startsWith(prefix);
+    }),
+  );
+  for (const url of queue) {
+    await precacheUrl(cache, url);
+  }
+};
+
+self.addEventListener("install", (event) => {
+  event.waitUntil(self.skipWaiting());
+});
+
+self.addEventListener("activate", (event) => {
+  event.waitUntil((async () => {
+    const names = await caches.keys();
+    await Promise.all(
+      names
+        .filter((name) => name.startsWith(CACHE_PREFIX) && name !== CACHE_NAME)
+        .map((name) => caches.delete(name)),
+    );
+    await self.clients.claim();
+  })());
+});
+
+self.addEventListener("fetch", (event) => {
+  if (!isCacheableRequest(event.request)) {
+    return;
+  }
+
+  event.respondWith((async () => {
+    const cache = await caches.open(CACHE_NAME);
+    const cached = await cache.match(event.request);
+    if (cached) {
+      event.waitUntil(fetchAndCache(cache, event.request).catch(() => undefined));
+      return cached;
+    }
+
+    try {
+      return await fetchAndCache(cache, event.request);
+    } catch (error) {
+      const fallback = await cache.match(event.request);
+      if (fallback) {
+        return fallback;
+      }
+      throw error;
+    }
+  })());
+});
+
+self.addEventListener("message", (event) => {
+  const data = event.data;
+  if (!data || data.type !== PRECACHE_MESSAGE_TYPE) {
+    return;
+  }
+
+  event.waitUntil(
+    precacheUrls(
+      Array.isArray(data.priorityUrls) ? data.priorityUrls : [],
+      Array.isArray(data.urls) ? data.urls : [],
+    ),
+  );
+});
+`
+
+const writeClientChunkCacheServiceWorker = async (
+  clientDir: string,
+  assets: ClientChunkCacheAsset[],
+) => {
+  const version = createClientChunkCacheVersion(assets)
+  const serviceWorkerPath = path.join(clientDir, CHUNK_CACHE_SW_URL.slice(1))
+  await fs.mkdir(path.dirname(serviceWorkerPath), { recursive: true })
+  await fs.writeFile(serviceWorkerPath, renderChunkCacheServiceWorker(version))
+}
+
 const resolveRouteRenderMode = (
   route: Awaited<ReturnType<typeof createRoutes>>[number],
   output: ResolvedEclipsaPluginOptions['output'],
 ) => route.renderMode ?? (output === 'ssg' ? 'static' : 'dynamic')
 
-const isConcreteStaticRoute = (route: Awaited<ReturnType<typeof createRoutes>>[number]) =>
-  route.segments.every((segment) => segment.kind === 'static')
-
 export const toHonoRoutePaths = (segments: RoutePathSegment[]) => {
   let paths = ['']
 
@@ -87,6 +274,223 @@ export const toHonoRoutePaths = (segments: RoutePathSegment[]) => {
   return [...new Set(paths.map((currentPath) => (currentPath === '' ? '/' : currentPath)))]
 }
 
+interface ResolvedStaticPathInfo {
+  concretePath: string
+  honoParams: Record<string, string>
+  honoPatternPath: string
+}
+
+interface ResolvedStaticPrerenderTargets {
+  concretePaths: Set<string>
+  dynamicParamsByPattern: Map<string, Record<string, string>[]>
+}
+
+const createStaticPathsError = (routePath: string, message: string) =>
+  new Error(`Invalid getStaticPaths() for route ${routePath}: ${message}`)
+
+const validatePathSegmentValue = (
+  routePath: string,
+  paramName: string,
+  value: string,
+  kind: 'optional' | 'required' | 'rest',
+) => {
+  if (value.length === 0) {
+    throw createStaticPathsError(routePath, `${kind} param "${paramName}" must not be empty.`)
+  }
+  if (value.includes('/')) {
+    throw createStaticPathsError(routePath, `${kind} param "${paramName}" must not contain "/".`)
+  }
+}
+
+export const resolveStaticPathInfo = (
+  routePath: string,
+  segments: RoutePathSegment[],
+  params: RouteParams,
+): ResolvedStaticPathInfo => {
+  const allowedParams = new Set(
+    segments.filter((segment) => segment.kind !== 'static').map((segment) => segment.value),
+  )
+
+  for (const key of Object.keys(params)) {
+    if (!allowedParams.has(key)) {
+      throw createStaticPathsError(routePath, `unknown param "${key}".`)
+    }
+  }
+
+  const concreteSegments: string[] = []
+  const honoPatternSegments: string[] = []
+  const honoParams: Record<string, string> = {}
+
+  for (const segment of segments) {
+    switch (segment.kind) {
+      case 'static':
+        concreteSegments.push(segment.value)
+        honoPatternSegments.push(segment.value)
+        break
+      case 'required': {
+        const value = params[segment.value]
+        if (typeof value !== 'string') {
+          throw createStaticPathsError(
+            routePath,
+            `required param "${segment.value}" must be a string.`,
+          )
+        }
+        validatePathSegmentValue(routePath, segment.value, value, 'required')
+        concreteSegments.push(value)
+        honoPatternSegments.push(`:${segment.value}`)
+        honoParams[segment.value] = value
+        break
+      }
+      case 'optional': {
+        const value = params[segment.value]
+        if (value === undefined) {
+          break
+        }
+        if (typeof value !== 'string') {
+          throw createStaticPathsError(
+            routePath,
+            `optional param "${segment.value}" must be a string when provided.`,
+          )
+        }
+        validatePathSegmentValue(routePath, segment.value, value, 'optional')
+        concreteSegments.push(value)
+        honoPatternSegments.push(`:${segment.value}`)
+        honoParams[segment.value] = value
+        break
+      }
+      case 'rest': {
+        const value = params[segment.value]
+        if (!Array.isArray(value)) {
+          throw createStaticPathsError(
+            routePath,
+            `rest param "${segment.value}" must be a string array.`,
+          )
+        }
+        if (value.length === 0) {
+          throw createStaticPathsError(
+            routePath,
+            `rest param "${segment.value}" must contain at least one segment.`,
+          )
+        }
+        for (const part of value) {
+          if (typeof part !== 'string') {
+            throw createStaticPathsError(
+              routePath,
+              `rest param "${segment.value}" must only contain strings.`,
+            )
+          }
+          validatePathSegmentValue(routePath, segment.value, part, 'rest')
+        }
+        concreteSegments.push(...value)
+        honoPatternSegments.push(`:${segment.value}{.+}`)
+        honoParams[segment.value] = value.join('/')
+        break
+      }
+    }
+  }
+
+  return {
+    concretePath: normalizeRoutePath(concreteSegments.join('/')),
+    honoParams,
+    honoPatternPath: normalizeRoutePath(honoPatternSegments.join('/')),
+  }
+}
+
+const resolveBuiltPageModulePath = (root: string, entryName: string) =>
+  path.join(root, 'dist', 'ssr', 'entries', `${entryName}.mjs`)
+
+const loadBuiltGetStaticPaths = async (root: string, entryName: string, routePath: string) => {
+  const modulePath = resolveBuiltPageModulePath(root, entryName)
+  const mod = (await import(`${pathToFileURL(modulePath).href}?t=${Date.now()}`)) as Partial<{
+    getStaticPaths: GetStaticPaths
+  }>
+  if (typeof mod.getStaticPaths !== 'function') {
+    throw createStaticPathsError(routePath, 'dynamic static routes must export getStaticPaths().')
+  }
+  return mod.getStaticPaths
+}
+
+const validateStaticPathsResult = (routePath: string, value: unknown): StaticPath[] => {
+  if (!Array.isArray(value)) {
+    throw createStaticPathsError(routePath, 'getStaticPaths() must return an array.')
+  }
+  return value as StaticPath[]
+}
+
+const resolveStaticPrerenderTargets = async (
+  root: string,
+  routes: Array<Awaited<ReturnType<typeof createRoutes>>[number]>,
+): Promise<ResolvedStaticPrerenderTargets> => {
+  const concretePaths = new Set<string>()
+  const dynamicParamsByPattern = new Map<string, Record<string, string>[]>()
+  const ownersByConcretePath = new Map<string, string>()
+
+  const registerConcretePath = (routePath: string, concretePath: string) => {
+    const existingOwner = ownersByConcretePath.get(concretePath)
+    if (existingOwner) {
+      throw createStaticPathsError(
+        routePath,
+        `duplicate concrete path "${concretePath}" conflicts with ${existingOwner}.`,
+      )
+    }
+    ownersByConcretePath.set(concretePath, routePath)
+  }
+
+  for (const route of routes) {
+    if (!route.page) {
+      continue
+    }
+
+    const hasDynamicSegment = route.segments.some((segment) => segment.kind !== 'static')
+    if (!hasDynamicSegment) {
+      registerConcretePath(route.routePath, route.routePath)
+      concretePaths.add(route.routePath)
+      continue
+    }
+
+    const getStaticPaths = await loadBuiltGetStaticPaths(
+      root,
+      route.page.entryName,
+      route.routePath,
+    )
+    const staticPaths = validateStaticPathsResult(route.routePath, await getStaticPaths())
+
+    for (const [index, staticPath] of staticPaths.entries()) {
+      if (!staticPath || typeof staticPath !== 'object') {
+        throw createStaticPathsError(route.routePath, `entry ${index} must be an object.`)
+      }
+      if (
+        !('params' in staticPath) ||
+        !staticPath.params ||
+        typeof staticPath.params !== 'object' ||
+        Array.isArray(staticPath.params)
+      ) {
+        throw createStaticPathsError(
+          route.routePath,
+          `entry ${index} must include a params object.`,
+        )
+      }
+
+      const resolved = resolveStaticPathInfo(route.routePath, route.segments, staticPath.params)
+      registerConcretePath(route.routePath, resolved.concretePath)
+
+      if (resolved.honoPatternPath === resolved.concretePath) {
+        concretePaths.add(resolved.concretePath)
+        continue
+      }
+
+      const params = dynamicParamsByPattern.get(resolved.honoPatternPath) ?? []
+      params.push(resolved.honoParams)
+      dynamicParamsByPattern.set(resolved.honoPatternPath, params)
+    }
+  }
+
+  return {
+    concretePaths,
+    dynamicParamsByPattern,
+  }
+}
+
 const createSerializedRoutes = (routes: Awaited<ReturnType<typeof createRoutes>>) =>
   JSON.stringify(
     routes.map((route) => ({
@@ -102,6 +506,49 @@ const createSerializedRoutes = (routes: Awaited<ReturnType<typeof createRoutes>>
     })),
   )
 
+const toIdsByFilePath = (entries: ReadonlyArray<{ filePath: string; id: string }>) => {
+  const idsByFilePath = new Map<string, string[]>()
+  for (const entry of entries) {
+    const existing = idsByFilePath.get(entry.filePath)
+    if (existing) {
+      existing.push(entry.id)
+      continue
+    }
+    idsByFilePath.set(entry.filePath, [entry.id])
+  }
+  return idsByFilePath
+}
+
+const getRouteReachableEntryFiles = (route: Awaited<ReturnType<typeof createRoutes>>[number]) =>
+  [
+    route.error?.filePath,
+    ...route.layouts.map((layout) => layout.filePath),
+    route.loading?.filePath,
+    route.notFound?.filePath,
+    route.page?.filePath,
+  ].filter((filePath): filePath is string => typeof filePath === 'string')
+
+const createRouteServerAccessEntries = async (
+  routes: Awaited<ReturnType<typeof createRoutes>>,
+  actions: ReadonlyArray<{ filePath: string; id: string }>,
+  loaders: ReadonlyArray<{ filePath: string; id: string }>,
+) => {
+  const actionIdsByFilePath = toIdsByFilePath(actions)
+  const loaderIdsByFilePath = toIdsByFilePath(loaders)
+
+  return await Promise.all(
+    routes.map(async (route) => {
+      const reachableFiles = await collectReachableAnalyzableFiles(
+        getRouteReachableEntryFiles(route),
+      )
+      return {
+        actionIds: reachableFiles.flatMap((filePath) => actionIdsByFilePath.get(filePath) ?? []),
+        loaderIds: reachableFiles.flatMap((filePath) => loaderIdsByFilePath.get(filePath) ?? []),
+      }
+    }),
+  )
+}
+
 const createActionTable = (actions: Array<{ filePath: string; id: string }>) =>
   actions
     .map(
@@ -130,23 +577,35 @@ const createPageRouteEntries = (routes: Awaited<ReturnType<typeof createRoutes>>
 
 const renderAppModule = (
   actions: Array<{ filePath: string; id: string }>,
+  appHooksClientUrl: string | null,
+  appHooksServerUrl: string | null,
   loaders: Array<{ filePath: string; id: string }>,
   routes: Awaited<ReturnType<typeof createRoutes>>,
+  routeServerAccessEntries: Array<{ actionIds: string[]; loaderIds: string[] }>,
   routeManifest: RouteManifest,
+  serverHooksUrl: string | null,
   symbolUrls: Record<string, string>,
   stylesheetUrls: string[],
+  chunkCacheUrls: string[],
 ) => {
   const serializedRoutes = createSerializedRoutes(routes)
   const serializedPageRouteEntries = JSON.stringify(createPageRouteEntries(routes))
   const actionTable = createActionTable(actions)
   const loaderTable = createLoaderTable(loaders)
+  const serializedAppHooksManifest = JSON.stringify({
+    client: appHooksClientUrl,
+  })
+  const serializedRouteServerAccessEntries = JSON.stringify(routeServerAccessEntries)
+  const serializedAppHooksServerUrl = JSON.stringify(appHooksServerUrl)
   const serializedSymbolUrls = JSON.stringify(symbolUrls)
   const serializedRouteManifest = JSON.stringify(routeManifest)
+  const serializedServerHooksUrl = JSON.stringify(serverHooksUrl)
   const serializedStylesheetUrls = JSON.stringify(stylesheetUrls)
+  const serializedChunkCacheUrls = JSON.stringify(chunkCacheUrls)
 
   return `import userApp from "./entries/server_entry.mjs";
 import SSRRoot from "./entries/ssr_root.mjs";
-import { ACTION_CONTENT_TYPE, Fragment, RESUME_FINAL_STATE_ELEMENT_ID, composeRouteMetadata, deserializeValue, escapeJSONScriptText, executeAction, executeLoader, getActionFormSubmissionId, getNormalizedActionInput, getStreamingResumeBootstrapScriptContent, hasAction, hasLoader, jsxDEV, primeActionState, renderRouteMetadataHead, renderSSRStream, resolvePendingLoaders, serializeResumePayload } from "./entries/eclipsa_runtime.mjs";
+import { ACTION_CONTENT_TYPE, APP_HOOKS_ELEMENT_ID, Fragment, RESUME_FINAL_STATE_ELEMENT_ID, applyActionCsrfCookie, attachRequestFetch, composeRouteMetadata, createRequestFetch, deserializePublicValue, ensureActionCsrfToken, escapeInlineScriptText, escapeJSONScriptText, executeAction, executeLoader, getActionFormSubmissionId, getNormalizedActionInput, getStreamingResumeBootstrapScriptContent, hasAction, hasLoader, jsxDEV, markPublicError, primeActionState, primeLocationState, renderRouteMetadataHead, renderSSRAsync, renderSSRStream, resolvePendingLoaders, resolveReroute, runHandleError, serializeResumePayload, withServerRequestContext } from "./entries/eclipsa_runtime.mjs";
 
 const app = userApp;
 const actions = {
@@ -156,14 +615,30 @@ const loaders = {
 ${loaderTable}
 };
 const routes = ${serializedRoutes};
+const routeServerAccessEntries = ${serializedRouteServerAccessEntries};
 const pageRouteEntries = ${serializedPageRouteEntries};
+const appHooksManifest = ${serializedAppHooksManifest};
+const appHooksServerUrl = ${serializedAppHooksServerUrl};
 const routeManifest = ${serializedRouteManifest};
+const serverHooksUrl = ${serializedServerHooksUrl};
 const symbolUrls = ${serializedSymbolUrls};
 const stylesheetUrls = ${serializedStylesheetUrls};
+const chunkCacheUrls = ${serializedChunkCacheUrls};
 const RESUME_PAYLOAD_PLACEHOLDER = ${JSON.stringify('__ECLIPSA_RESUME_PAYLOAD__')};
+const APP_HOOKS_PLACEHOLDER = ${JSON.stringify('__ECLIPSA_APP_HOOKS__')};
+const CHUNK_CACHE_PLACEHOLDER = ${JSON.stringify('__ECLIPSA_CHUNK_CACHE__')};
 const ROUTE_MANIFEST_PLACEHOLDER = ${JSON.stringify('__ECLIPSA_ROUTE_MANIFEST__')};
 const ROUTE_PARAMS_PROP = "__eclipsa_route_params";
+const ROUTE_ERROR_PROP = "__eclipsa_route_error";
+const ROUTE_DATA_REQUEST_HEADER = ${JSON.stringify(ROUTE_DATA_REQUEST_HEADER)};
 const ROUTE_PREFLIGHT_REQUEST_HEADER = "x-eclipsa-route-preflight";
+const CHUNK_CACHE_MESSAGE_TYPE = "eclipsa:chunk-cache-precache";
+const hooksPromise = (async () => {
+  const appHooks = appHooksServerUrl ? await import(appHooksServerUrl) : {};
+  const serverHooks = serverHooksUrl ? await import(serverHooksUrl) : {};
+  await serverHooks.init?.();
+  return { appHooks, serverHooks };
+})();
 
 const normalizeRoutePath = (pathname) => {
   const normalizedPath = pathname.trim() || "/";
@@ -173,6 +648,34 @@ const normalizeRoutePath = (pathname) => {
     : withLeadingSlash;
 };
 
+const decodeRoutePathSegment = (segment) => {
+  try {
+    return decodeURIComponent(segment);
+  } catch {
+    return segment;
+  }
+};
+
+const splitRawRoutePath = (pathname) => normalizeRoutePath(pathname).split("/").filter(Boolean);
+
+const splitRoutePath = (pathname) => splitRawRoutePath(pathname).map(decodeRoutePathSegment);
+
+const getRequestUrl = (request) => {
+  const url = new URL(request.url);
+  const host = request.headers.get("x-forwarded-host") ?? request.headers.get("host");
+  const proto = request.headers.get("x-forwarded-proto");
+  if (host) {
+    url.host = host;
+  }
+  if (proto) {
+    url.protocol = proto + ":";
+  }
+  return url;
+};
+
+const createInternalRouteRequestUrl = (request, targetUrl) =>
+  new URL(targetUrl.pathname + targetUrl.search, request.url).href;
+
 const matchSegments = (segments, pathnameSegments, routeIndex = 0, pathIndex = 0, params = {}) => {
   if (routeIndex >= segments.length) {
     return pathIndex >= pathnameSegments.length ? params : null;
@@ -209,16 +712,21 @@ const matchSegments = (segments, pathnameSegments, routeIndex = 0, pathIndex = 0
         [segment.value]: undefined,
       });
     }
-    case "rest":
+    case "rest": {
+      const rest = pathnameSegments.slice(pathIndex);
+      if (rest.length === 0) {
+        return null;
+      }
       return matchSegments(segments, pathnameSegments, segments.length, pathnameSegments.length, {
         ...params,
-        [segment.value]: pathnameSegments.slice(pathIndex),
+        [segment.value]: rest,
       });
+    }
   }
 };
 
 const matchRoute = (pathname) => {
-  const pathnameSegments = normalizeRoutePath(pathname).split("/").filter(Boolean);
+  const pathnameSegments = splitRoutePath(pathname);
   for (const route of routes) {
     const params = matchSegments(route.segments, pathnameSegments);
     if (params) {
@@ -228,8 +736,64 @@ const matchRoute = (pathname) => {
   return null;
 };
 
+const matchRouteManifestEntry = (pathname) => {
+  const pathnameSegments = splitRoutePath(pathname);
+  for (const entry of routeManifest) {
+    const params = matchSegments(entry.segments, pathnameSegments);
+    if (params) {
+      return { entry, params };
+    }
+  }
+  return null;
+};
+
+const uniqueChunkCacheUrls = (urls) =>
+  [...new Set(urls)].filter(
+    (url) =>
+      typeof url === "string" &&
+      (${JSON.stringify(CHUNK_CACHEABLE_PATH_PREFIXES)}).some((prefix) => url.startsWith(prefix)),
+  );
+
+const getChunkCacheUrlPriority = (url) => {
+  if (url.startsWith("/chunks/")) {
+    return 0;
+  }
+  if (url.startsWith("/entries/")) {
+    return 1;
+  }
+  return 2;
+};
+
+const sortChunkCacheUrls = (urls) =>
+  [...urls].sort(
+    (left, right) =>
+      getChunkCacheUrlPriority(left) - getChunkCacheUrlPriority(right) || left.localeCompare(right),
+  );
+
+const createChunkCacheMessage = (pathname, payload) => {
+  const matched = matchRouteManifestEntry(pathname);
+  const priorityUrls = uniqueChunkCacheUrls([
+    "/entries/client_boot.js",
+    ...(matched
+      ? [...matched.entry.layouts, matched.entry.page, matched.entry.notFound, matched.entry.error]
+      : []),
+    ...Object.values(payload.symbols ?? {}),
+  ]);
+  const priorityUrlSet = new Set(priorityUrls);
+  return {
+    priorityUrls,
+    type: CHUNK_CACHE_MESSAGE_TYPE,
+    urls: sortChunkCacheUrls(chunkCacheUrls.filter((url) => !priorityUrlSet.has(url))),
+  };
+};
+
+const createChunkCacheRegistrationScript = (pathname, payload) => {
+  const message = createChunkCacheMessage(pathname, payload);
+  return \`(()=>{const message=\${JSON.stringify(message)};if(!("serviceWorker" in navigator))return;const key="__eclipsa_chunk_cache";const state=window[key]??={registrationPromise:null,post(nextMessage){const post=(registration)=>{const worker=registration.active??registration.waiting??registration.installing;if(worker){worker.postMessage(nextMessage);}};this.registrationPromise=this.registrationPromise??navigator.serviceWorker.register(${JSON.stringify(CHUNK_CACHE_SW_URL)},{scope:"/",updateViaCache:"none"}).then(()=>navigator.serviceWorker.ready);void this.registrationPromise.then((registration)=>{post(registration);}).catch((error)=>{console.error("Failed to register Eclipsa chunk cache service worker.",error);});}};state.post(message);})();\`;
+};
+
 const scoreSpecialRoute = (route, pathname) => {
-  const pathnameSegments = normalizeRoutePath(pathname).split("/").filter(Boolean);
+  const pathnameSegments = splitRoutePath(pathname);
   let score = 0;
   for (let index = 0; index < route.segments.length && index < pathnameSegments.length; index += 1) {
     const segment = route.segments[index];
@@ -250,11 +814,21 @@ const scoreSpecialRoute = (route, pathname) => {
 };
 
 const findSpecialRoute = (pathname, kind) => {
-  const matched = matchRoute(pathname);
+  const normalizedPath = normalizeRoutePath(pathname);
+  const matched = matchRoute(normalizedPath);
   if (matched?.route[kind]) {
     return matched;
   }
 
+  const rawPathSegments = splitRawRoutePath(normalizedPath);
+  for (let length = rawPathSegments.length - 1; length >= 0; length -= 1) {
+    const candidatePath = length === 0 ? "/" : "/" + rawPathSegments.slice(0, length).join("/");
+    const candidate = matchRoute(candidatePath);
+    if (candidate?.route[kind]) {
+      return candidate;
+    }
+  }
+
   let best = null;
   let bestScore = -1;
   for (const route of routes) {
@@ -292,6 +866,106 @@ const isRedirectResponse = (response) =>
   response.status < 400 &&
   !!response.headers.get("location");
 
+const toPublicErrorValue = async (hooks, c, error, event) => {
+  const publicError = await runHandleError(
+    {
+      handleError: hooks.handleError,
+    },
+    {
+      context: c,
+      error,
+      event,
+    },
+  );
+  return markPublicError(error, publicError);
+};
+
+const logServerError = (error) => {
+  if (error && typeof error === "object" && error.__eclipsa_not_found__ === true) {
+    return;
+  }
+  console.error(error);
+};
+
+const prepareRequestContext = (c, hooks) => {
+  attachRequestFetch(c, createRequestFetch(c, hooks.handleFetch));
+  return c;
+};
+
+const reroutePathname = (hooks, request, pathname, baseUrl) =>
+  normalizeRoutePath(resolveReroute(hooks.reroute, request, pathname, baseUrl));
+
+const getRouteServerAccess = (route) => {
+  const routeIndex = routes.indexOf(route);
+  const entry = routeIndex >= 0 ? routeServerAccessEntries[routeIndex] : null;
+  return entry ?? { actionIds: [], loaderIds: [] };
+};
+
+const resolveRouteForCurrentUrl = (hooks, request, currentUrl) => {
+  const resolvedPathname = reroutePathname(hooks, request, normalizeRoutePath(currentUrl.pathname), currentUrl.href);
+  const match = matchRoute(resolvedPathname);
+  if (match?.route?.page) {
+    return match;
+  }
+  const fallback = findSpecialRoute(resolvedPathname, "notFound");
+  return fallback?.route?.notFound ? fallback : null;
+};
+
+const getRpcCurrentRoute = (hooks, c) => {
+  const requestUrl = getRequestUrl(c.req.raw);
+  const routeUrlHeader = c.req.header(${JSON.stringify(ROUTE_RPC_URL_HEADER)});
+  if (!routeUrlHeader) {
+    return null;
+  }
+  let currentUrl;
+  try {
+    currentUrl = new URL(routeUrlHeader, requestUrl);
+  } catch {
+    return null;
+  }
+  if (currentUrl.origin !== requestUrl.origin) {
+    return null;
+  }
+  return resolveRouteForCurrentUrl(hooks, c.req.raw, currentUrl);
+};
+
+const resolveRequest = async (c, handler) => {
+  const { appHooks, serverHooks } = await hooksPromise;
+  const requestContext = prepareRequestContext(c, serverHooks);
+  const execute = (nextContext = requestContext) =>
+    withServerRequestContext(
+      nextContext,
+      {
+        handleError: serverHooks.handleError,
+        transport: appHooks.transport,
+      },
+      () => handler(nextContext, appHooks, serverHooks),
+    );
+
+  if (!serverHooks.handle) {
+    return execute(requestContext);
+  }
+
+  return withServerRequestContext(
+    requestContext,
+    {
+      handleError: serverHooks.handleError,
+      transport: appHooks.transport,
+    },
+    () => serverHooks.handle(requestContext, (nextContext) => execute(nextContext ?? requestContext)),
+  );
+};
+
+const resolveRequestRoute = (hooks, request, url) => {
+  const requestPathname = normalizeRoutePath(new URL(url).pathname);
+  const resolvedPathname = reroutePathname(hooks, request, requestPathname, url);
+  return {
+    match: matchRoute(resolvedPathname),
+    requestPathname,
+    resolvedPathname,
+  };
+};
+
 const loadRouteMiddlewares = async (route) =>
   Promise.all(
     route.middlewares.map(async (middlewareUrl) => {
@@ -341,7 +1015,47 @@ const resolvePreflightTarget = (pathname) => {
   return null;
 };
 
-const replaceHeadPlaceholder = (html, placeholder, value) => html.replace(placeholder, value);
+const replaceHeadPlaceholder = (html, placeholder, value) => html.replaceAll(placeholder, value);
+const replaceResumePayloadPlaceholderValue = (value, replacements) => {
+  if (typeof value === "string") {
+    return replacements[value] ?? value;
+  }
+  if (Array.isArray(value)) {
+    let changed = false;
+    const next = value.map((entry) => {
+      const replaced = replaceResumePayloadPlaceholderValue(entry, replacements);
+      if (replaced !== entry) {
+        changed = true;
+      }
+      return replaced;
+    });
+    return changed ? next : value;
+  }
+  if (!value || typeof value !== "object") {
+    return value;
+  }
+  let changed = false;
+  const next = {};
+  for (const [key, entry] of Object.entries(value)) {
+    const replaced = replaceResumePayloadPlaceholderValue(entry, replacements);
+    if (replaced !== entry) {
+      changed = true;
+    }
+    next[key] = replaced;
+  }
+  return changed ? next : value;
+};
+const createResumePayloadPlaceholderReplacements = (pathname, payload) => ({
+  [ROUTE_MANIFEST_PLACEHOLDER]: JSON.stringify(routeManifest),
+  [APP_HOOKS_PLACEHOLDER]: JSON.stringify(appHooksManifest),
+  [CHUNK_CACHE_PLACEHOLDER]: createChunkCacheRegistrationScript(pathname, payload),
+});
+const serializeAppResumePayload = (pathname, payload) => serializeResumePayload(
+  replaceResumePayloadPlaceholderValue(
+    payload,
+    createResumePayloadPlaceholderReplacements(pathname, payload),
+  ),
+);
 const splitHtmlForStreaming = (html) => {
   const bodyCloseIndex = html.lastIndexOf("</body>");
   if (bodyCloseIndex >= 0) {
@@ -391,12 +1105,23 @@ const createRouteProps = (params, props) => {
   return nextProps;
 };
 
-const createRouteElement = (pathname, params, Page, Layouts) => {
+const attachRouteError = (props, error) => {
+  Object.defineProperty(props, ROUTE_ERROR_PROP, {
+    configurable: true,
+    enumerable: false,
+    value: error,
+    writable: true,
+  });
+  return props;
+};
+
+const createRouteElement = (pathname, params, Page, Layouts, error) => {
   if (Layouts.length === 0) {
-    return jsxDEV(Page, createRouteProps(params, {}), null, false, {});
+    return jsxDEV(Page, attachRouteError(createRouteProps(params, {}), error), null, false, {});
   }
 
   const route = {
+    error,
     layouts: Layouts.map((renderer) => ({ renderer })),
     page: { renderer: Page },
     params,
@@ -405,7 +1130,7 @@ const createRouteElement = (pathname, params, Page, Layouts) => {
   let children = null;
   for (let index = Layouts.length - 1; index >= 0; index -= 1) {
     const Layout = Layouts[index];
-    children = jsxDEV(Layout, createRouteProps(params, { children: createRouteSlot(route, index + 1) }), null, false, {});
+    children = jsxDEV(Layout, attachRouteError(createRouteProps(params, { children: createRouteSlot(route, index + 1) }), error), null, false, {});
   }
   return children;
 };
@@ -425,6 +1150,7 @@ const invokeRouteServer = async (moduleUrl, c, params) => {
 };
 
 const renderRouteResponse = async (route, pathname, params, c, moduleUrl, status = 200, options) => {
+  ensureActionCsrfToken(c);
   const [pageModule, ...layoutModules] = await Promise.all([
     import(moduleUrl),
     ...route.layouts.map((layout) => import(layout)),
@@ -435,11 +1161,11 @@ const renderRouteResponse = async (route, pathname, params, c, moduleUrl, status
     [...layoutModules.map((module) => module.metadata ?? null), pageModule.metadata ?? null],
     {
       params,
-      url: new URL(c.req.url),
+      url: getRequestUrl(c.req.raw),
     },
   );
-  const document = SSRRoot({
-    children: createRouteElement(pathname, params, Page, Layouts),
+  const document = jsxDEV(SSRRoot, {
+    children: createRouteElement(pathname, params, Page, Layouts, options?.routeError),
     head: {
       type: Fragment,
       isStatic: true,
@@ -472,6 +1198,15 @@ const renderRouteResponse = async (route, pathname, params, c, moduleUrl, status
                 type: "application/eclipsa-route-manifest+json",
               },
             },
+            {
+              type: "script",
+              isStatic: true,
+              props: {
+                children: APP_HOOKS_PLACEHOLDER,
+                id: APP_HOOKS_ELEMENT_ID,
+                type: "application/eclipsa-app-hooks+json",
+              },
+            },
             {
               type: "script",
               isStatic: true,
@@ -479,33 +1214,51 @@ const renderRouteResponse = async (route, pathname, params, c, moduleUrl, status
                 dangerouslySetInnerHTML: getStreamingResumeBootstrapScriptContent(),
               },
             },
+            {
+              type: "script",
+              isStatic: true,
+              props: {
+                dangerouslySetInnerHTML: CHUNK_CACHE_PLACEHOLDER,
+              },
+            },
             {
               type: "script",
               isStatic: true,
               props: {
                 type: "module",
-              src: "/entries/client_boot.js",
+                src: "/entries/client_boot.js",
+              },
             },
-          },
-        ],
+          ],
+        },
       },
-    },
-  });
+  }, null, false, {});
 
   applyRequestParams(c, params);
   const { html, payload, chunks } = await renderSSRStream(() => document, {
-    prepare: options?.prepare,
+    prepare(container) {
+      primeLocationState(container, getRequestUrl(c.req.raw));
+      return options?.prepare?.(container);
+    },
     resolvePendingLoaders: async (container) => resolvePendingLoaders(container, c),
     symbols: symbolUrls,
   });
   const shellHtml = replaceHeadPlaceholder(
-    replaceHeadPlaceholder(html, RESUME_PAYLOAD_PLACEHOLDER, serializeResumePayload(payload)),
-    ROUTE_MANIFEST_PLACEHOLDER,
-    escapeJSONScriptText(JSON.stringify(routeManifest)),
+    replaceHeadPlaceholder(
+        replaceHeadPlaceholder(
+          replaceHeadPlaceholder(html, RESUME_PAYLOAD_PLACEHOLDER, serializeAppResumePayload(pathname, payload)),
+          CHUNK_CACHE_PLACEHOLDER,
+          escapeInlineScriptText(createChunkCacheRegistrationScript(pathname, payload)),
+        ),
+      ROUTE_MANIFEST_PLACEHOLDER,
+      escapeJSONScriptText(JSON.stringify(routeManifest)),
+    ),
+    APP_HOOKS_PLACEHOLDER,
+    escapeJSONScriptText(JSON.stringify(appHooksManifest)),
   );
   const { prefix, suffix } = splitHtmlForStreaming(shellHtml);
   const encoder = new TextEncoder();
-  return new Response(
+  return applyActionCsrfCookie(new Response(
     new ReadableStream({
       start(controller) {
         controller.enqueue(encoder.encode(prefix));
@@ -519,7 +1272,7 @@ const renderRouteResponse = async (route, pathname, params, c, moduleUrl, status
             controller.enqueue(
               encoder.encode(
                 "<template id=\\"" + templateId + "\\">" + chunk.html + "</template>" +
-                  "<script id=\\"" + payloadId + "\\" type=\\"application/eclipsa-resume+json\\">" + serializeResumePayload(chunk.payload) + "</script>" +
+                  "<script id=\\"" + payloadId + "\\" type=\\"application/eclipsa-resume+json\\">" + serializeAppResumePayload(pathname, chunk.payload) + "</script>" +
                   "<script>window.__eclipsa_stream.enqueue({boundaryId:" + JSON.stringify(chunk.boundaryId) + ",payloadScriptId:" + JSON.stringify(payloadId) + ",templateId:" + JSON.stringify(templateId) + "})</script>",
               ),
             );
@@ -527,7 +1280,9 @@ const renderRouteResponse = async (route, pathname, params, c, moduleUrl, status
 
           controller.enqueue(
             encoder.encode(
-              "<script id=\\"" + RESUME_FINAL_STATE_ELEMENT_ID + "\\" type=\\"application/eclipsa-resume+json\\">" + serializeResumePayload(latestPayload) + "</script>" + suffix,
+              "<script id=\\"" + RESUME_FINAL_STATE_ELEMENT_ID + "\\" type=\\"application/eclipsa-resume+json\\">" + serializeAppResumePayload(pathname, latestPayload) + "</script>" +
+                "<script>" + escapeInlineScriptText(createChunkCacheRegistrationScript(pathname, latestPayload)) + "</script>" +
+                suffix,
             ),
           );
           controller.close();
@@ -542,53 +1297,137 @@ const renderRouteResponse = async (route, pathname, params, c, moduleUrl, status
       },
       status,
     },
-  );
+  ), c);
 };
 
 const renderMatchedPage = async (match, c, options) => {
-  const pathname = normalizeRoutePath(new URL(c.req.url).pathname);
+  const { appHooks, serverHooks } = await hooksPromise;
+  const requestUrl = getRequestUrl(c.req.raw);
+  const pathname = normalizeRoutePath(requestUrl.pathname);
+  const resolvedPathname = reroutePathname(appHooks, c.req.raw, pathname, requestUrl.href);
   try {
     return await renderRouteResponse(match.route, pathname, match.params, c, match.route.page, 200, options);
   } catch (error) {
-    const fallback = isNotFoundError(error) ? findSpecialRoute(pathname, "notFound") : findSpecialRoute(pathname, "error");
+    logServerError(error);
+    const publicError = await toPublicErrorValue(serverHooks, c, error, "page");
+    const fallback = isNotFoundError(error) ? findSpecialRoute(resolvedPathname, "notFound") : findSpecialRoute(resolvedPathname, "error");
     const kind = isNotFoundError(error) ? "notFound" : "error";
     const moduleUrl = fallback?.route?.[kind];
     if (!fallback || !moduleUrl) {
       return c.text(isNotFoundError(error) ? "Not Found" : "Internal Server Error", isNotFoundError(error) ? 404 : 500);
     }
-    return renderRouteResponse(fallback.route, pathname, fallback.params, c, moduleUrl, isNotFoundError(error) ? 404 : 500, options);
+    return renderRouteResponse(fallback.route, pathname, fallback.params, c, moduleUrl, isNotFoundError(error) ? 404 : 500, {
+      ...options,
+      routeError: publicError,
+    });
+  }
+};
+
+const renderRouteDataResponse = async (route, pathname, params, c, moduleUrl, kind) => {
+  const [pageModule, ...layoutModules] = await Promise.all([
+    import(moduleUrl),
+    ...route.layouts.map((layout) => import(layout)),
+  ]);
+  const Page = pageModule.default;
+  const Layouts = layoutModules.map((module) => module.default);
+
+  applyRequestParams(c, params);
+  const { payload } = await renderSSRAsync(() => createRouteElement(pathname, params, Page, Layouts, undefined), {
+    prepare(container) {
+      primeLocationState(container, getRequestUrl(c.req.raw));
+    },
+    resolvePendingLoaders: async (container) => resolvePendingLoaders(container, c),
+    symbols: symbolUrls,
+  });
+
+  return c.json({
+    finalHref: getRequestUrl(c.req.raw).href,
+    finalPathname: pathname,
+    kind,
+    loaders: payload.loaders,
+    ok: true,
+  });
+};
+
+const renderRouteData = async (route, pathname, params, c, moduleUrl, kind) => {
+  const { appHooks } = await hooksPromise;
+  const requestUrl = getRequestUrl(c.req.raw);
+  const requestPathname = normalizeRoutePath(requestUrl.pathname);
+  const resolvedPathname = reroutePathname(appHooks, c.req.raw, requestPathname, requestUrl.href);
+  try {
+    return await renderRouteDataResponse(route, pathname, params, c, moduleUrl, kind);
+  } catch (error) {
+    if (!isNotFoundError(error)) {
+      return c.json({ document: true, ok: false });
+    }
+    const fallback = findSpecialRoute(resolvedPathname, "notFound");
+    if (!fallback?.route?.notFound) {
+      return c.json({ document: true, ok: false });
+    }
+    try {
+      return await renderRouteDataResponse(
+        fallback.route,
+        requestPathname,
+        fallback.params,
+        c,
+        fallback.route.notFound,
+        "not-found",
+      );
+    } catch {
+      return c.json({ document: true, ok: false });
+    }
+  }
+};
+
+const resolveRouteData = async (href, c) => {
+  const requestUrl = getRequestUrl(c.req.raw);
+  const targetUrl = new URL(href, requestUrl);
+  if (targetUrl.origin !== requestUrl.origin) {
+    return c.json({ document: true, ok: false });
+  }
+  const headers = new Headers(c.req.raw.headers);
+  headers.set(ROUTE_DATA_REQUEST_HEADER, "1");
+  const response = await app.fetch(
+    new Request(createInternalRouteRequestUrl(c.req.raw, targetUrl), {
+      headers,
+      method: "GET",
+      redirect: "manual",
+    }),
+  );
+  if (response.status >= 200 && response.status < 300) {
+    return response;
+  }
+  if (isRedirectResponse(response)) {
+    return c.json({
+      location: new URL(response.headers.get("location"), requestUrl).href,
+      ok: false,
+    });
   }
+  return c.json({ document: true, ok: false });
 };
 
 const resolveRoutePreflight = async (href, c) => {
-  const requestUrl = new URL(c.req.url);
+  const { appHooks } = await hooksPromise;
+  const requestUrl = getRequestUrl(c.req.raw);
   const targetUrl = new URL(href, requestUrl);
   if (targetUrl.origin !== requestUrl.origin) {
     return c.json({ document: true, ok: false });
   }
 
-  const target = resolvePreflightTarget(normalizeRoutePath(targetUrl.pathname));
+  const target = resolvePreflightTarget(reroutePathname(appHooks, new Request(targetUrl.href), normalizeRoutePath(targetUrl.pathname), targetUrl.href));
   if (!target) {
     return c.json({ ok: true });
   }
 
   const headers = new Headers(c.req.raw.headers);
   headers.set(ROUTE_PREFLIGHT_REQUEST_HEADER, "1");
-  let response;
-  try {
-    response = await fetch(targetUrl.href, {
+  const response = await app.fetch(
+    new Request(createInternalRouteRequestUrl(c.req.raw, targetUrl), {
       headers,
+      method: "GET",
       redirect: "manual",
-    });
-  } catch {
-    response = await app.fetch(
-      new Request(targetUrl.href, {
-        headers,
-        method: "GET",
-        redirect: "manual",
-      }),
-    );
-  }
+    }),
+  );
 
   if (response.status >= 200 && response.status < 300) {
     return c.json({ ok: true });
@@ -603,143 +1442,236 @@ const resolveRoutePreflight = async (href, c) => {
 };
 
 for (const pageRouteEntry of pageRouteEntries) {
-  app.get(pageRouteEntry.path, async (c) => {
-    const pathname = normalizeRoutePath(new URL(c.req.url).pathname);
-    const match = matchRoute(pathname);
-    if (!match || match.route !== routes[pageRouteEntry.routeIndex]) {
-      return c.text("Not Found", 404);
+  app.get(pageRouteEntry.path, async (c) =>
+    resolveRequest(c, async (requestContext) => {
+      const pathname = normalizeRoutePath(getRequestUrl(requestContext.req.raw).pathname);
+      const match = matchRoute(pathname);
+      if (!match || match.route !== routes[pageRouteEntry.routeIndex]) {
+        return requestContext.text("Not Found", 404);
+      }
+      return composeRouteMiddlewares(
+        match.route,
+        requestContext,
+        match.params,
+        async () =>
+          requestContext.req.header(ROUTE_PREFLIGHT_REQUEST_HEADER) === "1"
+            ? requestContext.body(null, 204)
+            : requestContext.req.header(ROUTE_DATA_REQUEST_HEADER) === "1"
+              ? renderRouteData(
+                  match.route,
+                  pathname,
+                  match.params,
+                  requestContext,
+                  match.route.page,
+                  "page",
+                )
+              : renderMatchedPage(match, requestContext),
+      );
+    }),
+  );
+}
+
+app.post("/__eclipsa/action/:id", async (c) =>
+  resolveRequest(c, async (requestContext, appHooks) => {
+    const id = requestContext.req.param("id");
+    if (!id) {
+      return requestContext.text("Not Found", 404);
+    }
+    const routeMatch = getRpcCurrentRoute(appHooks, requestContext);
+    if (!routeMatch) {
+      return requestContext.text("Bad Request", 400);
+    }
+    const routeAccess = getRouteServerAccess(routeMatch.route);
+    if (!routeAccess.actionIds.includes(id)) {
+      return requestContext.text("Not Found", 404);
+    }
+    const moduleUrl = actions[id];
+    if (!moduleUrl) {
+      return requestContext.text("Not Found", 404);
+    }
+    if (!hasAction(id)) {
+      await import(moduleUrl);
     }
     return composeRouteMiddlewares(
-      match.route,
-      c,
-      match.params,
-      async () =>
-        c.req.header(ROUTE_PREFLIGHT_REQUEST_HEADER) === "1"
-          ? c.body(null, 204)
-          : renderMatchedPage(match, c),
+      routeMatch.route,
+      requestContext,
+      routeMatch.params,
+      async () => executeAction(id, requestContext),
     );
-  });
-}
-
-app.post("/__eclipsa/action/:id", async (c) => {
-  const id = c.req.param("id");
-  const moduleUrl = actions[id];
-  if (!moduleUrl) {
-    return c.text("Not Found", 404);
-  }
-  if (!hasAction(id)) {
-    await import(moduleUrl);
-  }
-  return executeAction(id, c);
-});
-
-app.get("/__eclipsa/loader/:id", async (c) => {
-  const id = c.req.param("id");
-  const moduleUrl = loaders[id];
-  if (!moduleUrl) {
-    return c.text("Not Found", 404);
-  }
-  if (!hasLoader(id)) {
-    await import(moduleUrl);
-  }
-  return executeLoader(id, c);
-});
+  }),
+);
+
+app.get("/__eclipsa/loader/:id", async (c) =>
+  resolveRequest(c, async (requestContext, appHooks) => {
+    const id = requestContext.req.param("id");
+    if (!id) {
+      return requestContext.text("Not Found", 404);
+    }
+    const routeMatch = getRpcCurrentRoute(appHooks, requestContext);
+    if (!routeMatch) {
+      return requestContext.text("Bad Request", 400);
+    }
+    const routeAccess = getRouteServerAccess(routeMatch.route);
+    if (!routeAccess.loaderIds.includes(id)) {
+      return requestContext.text("Not Found", 404);
+    }
+    const moduleUrl = loaders[id];
+    if (!moduleUrl) {
+      return requestContext.text("Not Found", 404);
+    }
+    if (!hasLoader(id)) {
+      await import(moduleUrl);
+    }
+    return composeRouteMiddlewares(
+      routeMatch.route,
+      requestContext,
+      routeMatch.params,
+      async () => executeLoader(id, requestContext),
+    );
+  }),
+);
+
+app.get(${JSON.stringify(ROUTE_PREFLIGHT_ENDPOINT)}, async (c) =>
+  resolveRequest(c, async (requestContext) => {
+    const href = requestContext.req.query("href");
+    if (!href) {
+      return requestContext.json({ document: true, ok: false }, 400);
+    }
+    return resolveRoutePreflight(href, requestContext);
+  }),
+);
+
+app.get(${JSON.stringify(ROUTE_DATA_ENDPOINT)}, async (c) =>
+  resolveRequest(c, async (requestContext) => {
+    const href = requestContext.req.query("href");
+    if (!href) {
+      return requestContext.json({ document: true, ok: false }, 400);
+    }
+    return resolveRouteData(href, requestContext);
+  }),
+);
 
-app.get(${JSON.stringify(ROUTE_PREFLIGHT_ENDPOINT)}, async (c) => {
-  const href = c.req.query("href");
-  if (!href) {
-    return c.json({ document: true, ok: false }, 400);
-  }
-  return resolveRoutePreflight(href, c);
-});
+app.all("*", async (c) =>
+  resolveRequest(c, async (requestContext) => {
+    const pathname = normalizeRoutePath(getRequestUrl(requestContext.req.raw).pathname);
+    const match = matchRoute(pathname);
 
-app.all("*", async (c) => {
-  const pathname = normalizeRoutePath(new URL(c.req.url).pathname);
-  const match = matchRoute(pathname);
+    if (!match) {
+      const fallback = findSpecialRoute(pathname, "notFound");
+      if (fallback?.route?.notFound) {
+        return composeRouteMiddlewares(
+          fallback.route,
+          requestContext,
+          fallback.params,
+          async () =>
+            requestContext.req.header(ROUTE_PREFLIGHT_REQUEST_HEADER) === "1"
+              ? requestContext.body(null, 204)
+              : requestContext.req.header(ROUTE_DATA_REQUEST_HEADER) === "1"
+                ? renderRouteData(
+                    fallback.route,
+                    pathname,
+                    fallback.params,
+                    requestContext,
+                    fallback.route.notFound,
+                    "not-found",
+                  )
+                : renderRouteResponse(
+                    fallback.route,
+                    pathname,
+                    fallback.params,
+                    requestContext,
+                    fallback.route.notFound,
+                    404,
+                  ),
+        );
+      }
+      return requestContext.text("Not Found", 404);
+    }
 
-  if (!match) {
-    const fallback = findSpecialRoute(pathname, "notFound");
-    if (fallback?.route?.notFound) {
+    if (
+      (requestContext.req.method === "GET" || requestContext.req.method === "HEAD") &&
+      match.route.page
+    ) {
       return composeRouteMiddlewares(
-        fallback.route,
-        c,
-        fallback.params,
+        match.route,
+        requestContext,
+        match.params,
         async () =>
-          c.req.header(ROUTE_PREFLIGHT_REQUEST_HEADER) === "1"
-            ? c.body(null, 204)
-            : renderRouteResponse(fallback.route, pathname, fallback.params, c, fallback.route.notFound, 404),
+          requestContext.req.header(ROUTE_PREFLIGHT_REQUEST_HEADER) === "1"
+            ? requestContext.body(null, 204)
+            : requestContext.req.header(ROUTE_DATA_REQUEST_HEADER) === "1"
+              ? renderRouteData(
+                  match.route,
+                  pathname,
+                  match.params,
+                  requestContext,
+                  match.route.page,
+                  "page",
+                )
+              : renderMatchedPage(match, requestContext),
       );
     }
-    return c.text("Not Found", 404);
-  }
-
-  if ((c.req.method === "GET" || c.req.method === "HEAD") && match.route.page) {
-    return composeRouteMiddlewares(
-      match.route,
-      c,
-      match.params,
-      async () =>
-        c.req.header(ROUTE_PREFLIGHT_REQUEST_HEADER) === "1"
-          ? c.body(null, 204)
-          : renderMatchedPage(match, c),
-    );
-  }
-  if (c.req.method === "POST" && match.route.page) {
-    return composeRouteMiddlewares(
-      match.route,
-      c,
-      match.params,
-      async () => {
-        const actionId = await getActionFormSubmissionId(c);
-        if (!actionId) {
-          return match.route.server
-            ? invokeRouteServer(match.route.server, c, match.params)
-            : renderMatchedPage(match, c);
-        }
-        const moduleUrl = actions[actionId];
-        if (!moduleUrl) {
-          return c.text("Not Found", 404);
-        }
-        if (!hasAction(actionId)) {
-          await import(moduleUrl);
-        }
-        const input = await getNormalizedActionInput(c);
-        const response = await executeAction(actionId, c);
-        const contentType = response.headers.get("content-type") ?? "";
-        if (!contentType.startsWith(ACTION_CONTENT_TYPE)) {
-          return response;
-        }
-        const body = await response.json();
-        return renderMatchedPage(match, c, {
-          prepare(container) {
-            primeActionState(container, actionId, {
-              error: body.ok ? undefined : deserializeValue(body.error),
-              input,
-              result: body.ok ? deserializeValue(body.value) : undefined,
-            });
-          },
-        });
-      },
-    );
-  }
-  if (match.route.server) {
-    return composeRouteMiddlewares(match.route, c, match.params, async () =>
-      invokeRouteServer(match.route.server, c, match.params),
-    );
-  }
-  if (match.route.page) {
-    return composeRouteMiddlewares(
-      match.route,
-      c,
-      match.params,
-      async () =>
-        c.req.header(ROUTE_PREFLIGHT_REQUEST_HEADER) === "1"
-          ? c.body(null, 204)
-          : renderMatchedPage(match, c),
-    );
-  }
-  return c.text("Not Found", 404);
-});
+    if (requestContext.req.method === "POST" && match.route.page) {
+      return composeRouteMiddlewares(
+        match.route,
+        requestContext,
+        match.params,
+        async () => {
+          const actionId = await getActionFormSubmissionId(requestContext);
+          if (!actionId) {
+            return match.route.server
+              ? invokeRouteServer(match.route.server, requestContext, match.params)
+              : renderMatchedPage(match, requestContext);
+          }
+          const routeAccess = getRouteServerAccess(match.route);
+          if (!routeAccess.actionIds.includes(actionId)) {
+            return requestContext.text("Not Found", 404);
+          }
+          const moduleUrl = actions[actionId];
+          if (!moduleUrl) {
+            return requestContext.text("Not Found", 404);
+          }
+          if (!hasAction(actionId)) {
+            await import(moduleUrl);
+          }
+          const input = await getNormalizedActionInput(requestContext);
+          const response = await executeAction(actionId, requestContext);
+          const contentType = response.headers.get("content-type") ?? "";
+          if (!contentType.startsWith(ACTION_CONTENT_TYPE)) {
+            return response;
+          }
+          const body = await response.json();
+          return renderMatchedPage(match, requestContext, {
+            prepare(container) {
+              primeActionState(container, actionId, {
+                error: body.ok ? undefined : deserializeValue(body.error),
+                input,
+                result: body.ok ? deserializeValue(body.value) : undefined,
+              });
+            },
+          });
+        },
+      );
+    }
+    if (match.route.server) {
+      return composeRouteMiddlewares(match.route, requestContext, match.params, async () =>
+        invokeRouteServer(match.route.server, requestContext, match.params),
+      );
+    }
+    if (match.route.page) {
+      return composeRouteMiddlewares(
+        match.route,
+        requestContext,
+        match.params,
+        async () =>
+          requestContext.req.header(ROUTE_PREFLIGHT_REQUEST_HEADER) === "1"
+            ? requestContext.body(null, 204)
+            : renderMatchedPage(match, requestContext),
+      );
+    }
+    return requestContext.text("Not Found", 404);
+  }),
+);
 
 export const pageRoutePatterns = [...new Set(pageRouteEntries.map((entry) => entry.path))];
 export default app;
@@ -847,21 +1779,18 @@ export const build = async (
   options: ResolvedEclipsaPluginOptions,
 ) => {
   const root = userConfig.root ?? cwd()
+  const appHooksPath = path.join(root, 'app/+hooks.ts')
+  const serverHooksPath = path.join(root, 'app/+hooks.server.ts')
   const actions = await collectAppActions(root)
   const loaders = await collectAppLoaders(root)
   const routes = await createRoutes(root)
+  const routeServerAccessEntries = await createRouteServerAccessEntries(routes, actions, loaders)
   const staticPageRoutes = routes.filter(
     (route) => route.page && resolveRouteRenderMode(route, options.output) === 'static',
   )
   const dynamicPageRoutes = routes.filter(
     (route) => route.page && resolveRouteRenderMode(route, options.output) === 'dynamic',
   )
-  const nonConcreteStaticRoute = staticPageRoutes.find((route) => !isConcreteStaticRoute(route))
-  if (nonConcreteStaticRoute) {
-    throw new Error(
-      `Static rendering currently requires a concrete route path. Remove dynamic segments from ${nonConcreteStaticRoute.routePath} or switch it to render = "dynamic".`,
-    )
-  }
   if (options.output === 'ssg') {
     const dynamicRoute = dynamicPageRoutes[0]
     if (dynamicRoute) {
@@ -885,20 +1814,45 @@ export const build = async (
   await builder.build(builder.environments.client)
   await builder.build(builder.environments.ssr)
 
+  const appHooksClientUrl = (await fileExists(appHooksPath))
+    ? createBuildModuleUrl({ entryName: 'app_hooks', filePath: appHooksPath })
+    : null
+  const appHooksServerUrl = (await fileExists(appHooksPath))
+    ? createBuildServerModuleUrl({ entryName: 'app_hooks', filePath: appHooksPath })
+    : null
   const clientDir = path.join(root, 'dist/client')
+  const serverHooksUrl = (await fileExists(serverHooksPath))
+    ? createBuildServerModuleUrl({ entryName: 'server_hooks', filePath: serverHooksPath })
+    : null
   const stylesheetUrls = await collectClientStylesheetUrls(clientDir)
+  const chunkCacheAssets = await collectClientChunkCacheAssets(clientDir)
+  await writeClientChunkCacheServiceWorker(clientDir, chunkCacheAssets)
   const serverDir = path.join(root, 'dist/server')
   const appModulePath = path.join(root, 'dist/ssr/eclipsa_app.mjs')
   await fs.mkdir(path.dirname(appModulePath), { recursive: true })
   await fs.writeFile(
     appModulePath,
-    renderAppModule(actions, loaders, routes, routeManifest, symbolUrls, stylesheetUrls),
+    renderAppModule(
+      actions,
+      appHooksClientUrl,
+      appHooksServerUrl,
+      loaders,
+      routes,
+      routeServerAccessEntries,
+      routeManifest,
+      serverHooksUrl,
+      symbolUrls,
+      stylesheetUrls,
+      chunkCacheAssets.map((asset) => asset.url),
+    ),
   )
-
-  const staticPageRouteSet = new Set(staticPageRoutes.map((route) => route.routePath))
+  const staticPrerenderTargets = await resolveStaticPrerenderTargets(root, staticPageRoutes)
 
   const prerenderStaticRoutes = async () => {
-    if (staticPageRouteSet.size === 0) {
+    if (
+      staticPrerenderTargets.concretePaths.size === 0 &&
+      staticPrerenderTargets.dynamicParamsByPattern.size === 0
+    ) {
       return
     }
 
@@ -909,8 +1863,20 @@ export const build = async (
     }
     const result = await toSSG(app as any, fs, {
       beforeRequestHook(request: Request) {
-        const routePath = new URL(request.url).pathname
-        return staticPageRouteSet.has(routePath) ? request : false
+        const routePath = normalizeRoutePath(decodeURIComponent(new URL(request.url).pathname))
+        if (
+          routePath === normalizeRoutePath(ROUTE_DATA_ENDPOINT) ||
+          routePath === normalizeRoutePath(ROUTE_PREFLIGHT_ENDPOINT) ||
+          routePath.startsWith('/__eclipsa/loader/')
+        ) {
+          return false
+        }
+        const ssgParams = staticPrerenderTargets.dynamicParamsByPattern.get(routePath)
+        if (ssgParams) {
+          ;(request as Request & { ssgParams?: Record<string, string>[] }).ssgParams = ssgParams
+          return request
+        }
+        return staticPrerenderTargets.concretePaths.has(routePath) ? request : false
       },
       dir: clientDir,
     })
diff --git a/packages/eclipsa/vite/build/runtime.test.ts b/packages/eclipsa/vite/build/runtime.test.ts
index 644b93c..a60e310 100644
--- a/packages/eclipsa/vite/build/runtime.test.ts
+++ b/packages/eclipsa/vite/build/runtime.test.ts
@@ -8,6 +8,7 @@ describe('vite build runtime exports', () => {
       Fragment: expect.anything(),
       composeRouteMetadata: expect.any(Function),
       deserializeValue: expect.any(Function),
+      escapeInlineScriptText: expect.any(Function),
       escapeJSONScriptText: expect.any(Function),
       executeAction: expect.any(Function),
       executeLoader: expect.any(Function),
@@ -17,6 +18,7 @@ describe('vite build runtime exports', () => {
       hasLoader: expect.any(Function),
       jsxDEV: expect.any(Function),
       primeActionState: expect.any(Function),
+      primeLocationState: expect.any(Function),
       renderRouteMetadataHead: expect.any(Function),
       renderSSRAsync: expect.any(Function),
       resolvePendingLoaders: expect.any(Function),
diff --git a/packages/eclipsa/vite/build/runtime.ts b/packages/eclipsa/vite/build/runtime.ts
index 69b5ec4..2b991a0 100644
--- a/packages/eclipsa/vite/build/runtime.ts
+++ b/packages/eclipsa/vite/build/runtime.ts
@@ -1,3 +1,30 @@
+export {
+  APP_HOOKS_ELEMENT_ID,
+  attachRequestFetch,
+  createRequestFetch,
+  deserializePublicValue,
+  markPublicError,
+  registerClientHooks,
+  resolveReroute,
+  runHandleError,
+  serializePublicValue,
+  toPublicError,
+  type AppContext,
+  type AppHooksManifest,
+  type AppHooksModule,
+  type BaseAppVariables,
+  type Handle,
+  type HandleError,
+  type HandleFetch,
+  type PublicError,
+  type RequestFetch,
+  type ResolvedHooks,
+  type Reroute,
+  type ServerHooksModule,
+  type Transport,
+  type WithAppEnv,
+  withServerRequestContext,
+} from '../../core/hooks.ts'
 export {
   ACTION_CONTENT_TYPE,
   executeAction,
@@ -6,6 +33,7 @@ export {
   hasAction,
   primeActionState,
 } from '../../core/action.ts'
+export { applyActionCsrfCookie, ensureActionCsrfToken } from '../../core/action-csrf.ts'
 export {
   executeLoader,
   hasLoader,
@@ -14,7 +42,7 @@ export {
 } from '../../core/loader.ts'
 export { composeRouteMetadata, renderRouteMetadataHead } from '../../core/metadata.ts'
 export { deserializeValue } from '../../core/serialize.ts'
-export { escapeJSONScriptText } from '../../core/serialize.ts'
+export { escapeInlineScriptText, escapeJSONScriptText } from '../../core/serialize.ts'
 export {
   getStreamingResumeBootstrapScriptContent,
   renderSSR,
@@ -22,5 +50,5 @@ export {
   renderSSRStream,
   serializeResumePayload,
 } from '../../core/ssr.ts'
-export { RESUME_FINAL_STATE_ELEMENT_ID } from '../../core/runtime.ts'
+export { RESUME_FINAL_STATE_ELEMENT_ID, primeLocationState } from '../../core/runtime.ts'
 export { Fragment, jsxDEV } from '../../jsx/jsx-dev-runtime.ts'
diff --git a/packages/eclipsa/vite/compiler.test.ts b/packages/eclipsa/vite/compiler.test.ts
index fe9a079..3884030 100644
--- a/packages/eclipsa/vite/compiler.test.ts
+++ b/packages/eclipsa/vite/compiler.test.ts
@@ -1,11 +1,20 @@
 import os from 'node:os'
 import path from 'node:path'
 import * as fs from 'node:fs/promises'
+import { fileURLToPath } from 'node:url'
 import { beforeEach, describe, expect, it } from 'vitest'
 import { analyzeModule } from '../compiler/mod.ts'
 import {
+  collectAppActions,
+  collectAppLoaders,
   collectAppSymbols,
+  createBuildSymbolEntryName,
+  createBuildSymbolUrl,
   compileModuleForSSR,
+  createSymbolRequestId,
+  createDevSymbolUrl,
+  parseSymbolRequest,
+  primeCompilerCache,
   createResumeHmrUpdate,
   loadSymbolModuleForSSR,
   resetCompilerCache,
@@ -29,6 +38,9 @@ const findComponentId = (source: Awaited<ReturnType<typeof analyze>>, prefix?: s
 const findSymbolId = (source: Awaited<ReturnType<typeof analyze>>, prefix: string) =>
   [...source.hmrManifest.symbols.values()].find((entry) => entry.hmrKey.startsWith(prefix))?.id
 
+const resolveWorkspacePath = (relativePath: string) =>
+  fileURLToPath(new URL(relativePath, import.meta.url))
+
 describe('createResumeHmrUpdate', () => {
   beforeEach(() => {
     resetCompilerCache()
@@ -36,14 +48,12 @@ describe('createResumeHmrUpdate', () => {
 
   it('keeps stable HMR keys for default and named components', async () => {
     const previous = await analyze(`
-      import { component$ } from "eclipsa";
-      export const Header = component$(() => <h1>old</h1>);
-      export default component$(() => <div>page</div>);
+            export const Header = () => <h1>old</h1>;
+      export default () => <div>page</div>;
     `)
     const next = await analyze(`
-      import { component$ } from "eclipsa";
-      export const Header = component$(() => <h1>new</h1>);
-      export default component$(() => <div>page</div>);
+            export const Header = () => <h1>new</h1>;
+      export default () => <div>page</div>;
     `)
 
     const previousKeys = [...previous.hmrManifest.components.keys()]
@@ -59,21 +69,21 @@ describe('createResumeHmrUpdate', () => {
   it('treats event body edits as symbol URL replacements without forcing rerender', async () => {
     const previous = await analyze(
       `
-      import { component$, useSignal } from "eclipsa";
-      export default component$(() => {
+      import { useSignal } from "eclipsa";
+      export default () => {
         const count = useSignal(0);
-        return <button onClick$={() => { count.value += 1; }}>{count.value}</button>;
-      });
+        return <button onClick={() => { count.value += 1; }}>{count.value}</button>;
+      };
     `,
       '/tmp/event-change.tsx',
     )
     const next = await analyze(
       `
-      import { component$, useSignal } from "eclipsa";
-      export default component$(() => {
+      import { useSignal } from "eclipsa";
+      export default () => {
         const count = useSignal(0);
-        return <button onClick$={() => { count.value += 2; }}>{count.value}</button>;
-      });
+        return <button onClick={() => { count.value += 2; }}>{count.value}</button>;
+      };
     `,
       '/tmp/event-change.tsx',
     )
@@ -107,21 +117,21 @@ describe('createResumeHmrUpdate', () => {
   it('rerenders the changed component when its JSX changes', async () => {
     const previous = await analyze(
       `
-      import { component$, useSignal } from "eclipsa";
-      export default component$(() => {
+      import { useSignal } from "eclipsa";
+      export default () => {
         const count = useSignal(0);
         return <button>{count.value}</button>;
-      });
+      };
     `,
       '/tmp/component-change.tsx',
     )
     const next = await analyze(
       `
-      import { component$, useSignal } from "eclipsa";
-      export default component$(() => {
+      import { useSignal } from "eclipsa";
+      export default () => {
         const count = useSignal(0);
         return <button><span>{count.value}</span></button>;
-      });
+      };
     `,
       '/tmp/component-change.tsx',
     )
@@ -139,26 +149,66 @@ describe('createResumeHmrUpdate', () => {
     expect(update?.rerenderOwnerSymbols).toEqual([])
   })
 
+  it('rerenders the owner component when a child prop literal changes', async () => {
+    const previous = await analyze(
+      `
+      const PageLink = (props: { label: string; href: string }) => {
+        return <a href={props.href}>{props.label}</a>;
+      };
+      export default () => {
+        return <nav><PageLink label="Overview" href="/docs/getting-started/overview" /></nav>;
+      };
+    `,
+      '/tmp/child-prop-change.tsx',
+    )
+    const next = await analyze(
+      `
+      const PageLink = (props: { label: string; href: string }) => {
+        return <a href={props.href}>{props.label}</a>;
+      };
+      export default () => {
+        return <nav><PageLink label="Overview Changed" href="/docs/getting-started/overview" /></nav>;
+      };
+    `,
+      '/tmp/child-prop-change.tsx',
+    )
+
+    const update = createResumeHmrUpdate({
+      filePath: '/tmp/child-prop-change.tsx',
+      next,
+      previous,
+      root: '/tmp',
+    })
+    const defaultComponentId = findComponentId(previous, 'component:default')
+
+    expect(update?.fullReload).toBe(false)
+    expect(update?.rerenderComponentSymbols).toEqual(defaultComponentId ? [defaultComponentId] : [])
+    expect(update?.rerenderOwnerSymbols).toEqual([])
+    expect(
+      defaultComponentId ? update?.symbolUrlReplacements[defaultComponentId] : undefined,
+    ).toMatch(/\?eclipsa-symbol=/)
+  })
+
   it('escalates capture changes to owner rerender', async () => {
     const previous = await analyze(
       `
-      import { component$, useSignal } from "eclipsa";
-      export default component$(() => {
+      import { useSignal } from "eclipsa";
+      export default () => {
         const count = useSignal(0);
         const label = useSignal("a");
-        return <button onClick$={() => { count.value += 1; }}>{label.value}</button>;
-      });
+        return <button onClick={() => { count.value += 1; }}>{label.value}</button>;
+      };
     `,
       '/tmp/capture-change.tsx',
     )
     const next = await analyze(
       `
-      import { component$, useSignal } from "eclipsa";
-      export default component$(() => {
+      import { useSignal } from "eclipsa";
+      export default () => {
         const count = useSignal(0);
         const label = useSignal("a");
-        return <button onClick$={() => { count.value += label.value.length; }}>{label.value}</button>;
-      });
+        return <button onClick={() => { count.value += label.value.length; }}>{label.value}</button>;
+      };
     `,
       '/tmp/capture-change.tsx',
     )
@@ -178,24 +228,24 @@ describe('createResumeHmrUpdate', () => {
   it('marks local symbol graph changes for owner rerender', async () => {
     const previous = await analyze(
       `
-      import { component$, useSignal, useWatch } from "eclipsa";
-      export default component$(() => {
+      import { useSignal, useWatch } from "eclipsa";
+      export default () => {
         const count = useSignal(0);
         useWatch(() => { count.value; });
         return <button>{count.value}</button>;
-      });
+      };
     `,
       '/tmp/watch-change.tsx',
     )
     const next = await analyze(
       `
-      import { component$, useSignal, useWatch } from "eclipsa";
-      export default component$(() => {
+      import { useSignal, useWatch } from "eclipsa";
+      export default () => {
         const count = useSignal(0);
         useWatch(() => { count.value; });
         useWatch(() => { console.log(count.value); });
         return <button>{count.value}</button>;
-      });
+      };
     `,
       '/tmp/watch-change.tsx',
     )
@@ -215,21 +265,21 @@ describe('createResumeHmrUpdate', () => {
   it('registers URLs for newly added event symbols while rerendering the owner', async () => {
     const previous = await analyze(
       `
-      import { component$, useSignal } from "eclipsa";
-      export default component$(() => {
+      import { useSignal } from "eclipsa";
+      export default () => {
         const count = useSignal(0);
         return <button>{count.value}</button>;
-      });
+      };
     `,
       '/tmp/new-event.tsx',
     )
     const next = await analyze(
       `
-      import { component$, useSignal } from "eclipsa";
-      export default component$(() => {
+      import { useSignal } from "eclipsa";
+      export default () => {
         const count = useSignal(0);
-        return <button onClick$={() => { count.value += 1; }}>{count.value}</button>;
-      });
+        return <button onClick={() => { count.value += 1; }}>{count.value}</button>;
+      };
     `,
       '/tmp/new-event.tsx',
     )
@@ -257,27 +307,27 @@ describe('createResumeHmrUpdate', () => {
   it('treats onVisible callbacks as lazy symbol URL replacements', async () => {
     const previous = await analyze(
       `
-      import { component$, onVisible } from "eclipsa";
-      export default component$(() => {
+      import { onVisible } from "eclipsa";
+      export default () => {
         const label = "ready";
         onVisible(() => {
           console.log(label);
         });
         return <div>{label}</div>;
-      });
+      };
     `,
       '/tmp/on-visible.tsx',
     )
     const next = await analyze(
       `
-      import { component$, onVisible } from "eclipsa";
-      export default component$(() => {
+      import { onVisible } from "eclipsa";
+      export default () => {
         const label = "ready";
         onVisible(() => {
           console.log(label.toUpperCase());
         });
         return <div>{label}</div>;
-      });
+      };
     `,
       '/tmp/on-visible.tsx',
     )
@@ -305,13 +355,13 @@ describe('createResumeHmrUpdate', () => {
     const appDir = path.join(root, 'app')
     const filePath = path.join(appDir, '+page.tsx')
     const source = `
-      import { component$, onVisible } from "eclipsa";
-      export default component$(() => {
+      import { onVisible } from "eclipsa";
+      export default () => {
         onVisible(() => {
           console.log("ready");
         });
         return <div>ready</div>;
-      });
+      };
     `
 
     await fs.mkdir(appDir, { recursive: true })
@@ -337,14 +387,14 @@ describe('createResumeHmrUpdate', () => {
     const appDir = path.join(root, 'app')
     const filePath = path.join(appDir, '+page.tsx')
     const source = `
-      import { component$, onVisible } from "eclipsa";
+      import { onVisible } from "eclipsa";
       import { setupLandingScene } from "./landing-scene.ts";
-      export default component$(() => {
+      export default () => {
         onVisible(() => {
           setupLandingScene({ canvas: null });
         });
         return <div>ready</div>;
-      });
+      };
     `
 
     await fs.mkdir(appDir, { recursive: true })
@@ -354,7 +404,9 @@ describe('createResumeHmrUpdate', () => {
       const symbols = await collectAppSymbols(root)
       const lazySymbol = symbols.find((symbol) => symbol.kind === 'lazy')
 
-      expect(lazySymbol?.code).toContain(`import { setupLandingScene } from "./landing-scene.ts";\n`)
+      expect(lazySymbol?.code).toContain(
+        `import { setupLandingScene } from "./landing-scene.ts";\n`,
+      )
 
       const compiled = await loadSymbolModuleForSSR(
         `/app/+page.tsx?eclipsa-symbol=${lazySymbol?.id}`,
@@ -367,19 +419,144 @@ describe('createResumeHmrUpdate', () => {
     }
   })
 
+  it('keeps app-local symbol urls rooted at /app for relative import resolution', async () => {
+    const root = await fs.mkdtemp(path.join(os.tmpdir(), 'eclipsa-vite-symbol-url-'))
+    const appDir = path.join(root, 'app')
+    const filePath = path.join(appDir, '+page.tsx')
+
+    await fs.mkdir(appDir, { recursive: true })
+    await fs.writeFile(
+      filePath,
+      `
+        import { onVisible } from "eclipsa";
+        import { setupLandingScene } from "./landing-scene.ts";
+        export default () => {
+          onVisible(() => {
+            setupLandingScene({ canvas: null });
+          });
+          return <div>ready</div>;
+        };
+      `,
+    )
+
+    try {
+      const symbols = await collectAppSymbols(root)
+      const lazySymbol = symbols.find((symbol) => symbol.kind === 'lazy')
+
+      expect(lazySymbol?.filePath).toBe('/app/+page.tsx')
+      expect(lazySymbol?.id).toBeTruthy()
+      expect(
+        lazySymbol ? createDevSymbolUrl(root, lazySymbol.filePath, lazySymbol.id) : null,
+      ).toMatch(/^\/app\/\+page\.tsx\?eclipsa-symbol=/)
+    } finally {
+      await fs.rm(root, { force: true, recursive: true })
+    }
+  })
+
+  it('collects symbols from package-exported modules imported by app files', async () => {
+    const root = await fs.mkdtemp(path.join(os.tmpdir(), 'eclipsa-vite-symbol-package-'))
+    const appDir = path.join(root, 'app')
+    const packageDir = path.join(root, 'node_modules', 'ui-kit')
+    const pagePath = path.join(appDir, '+page.tsx')
+    const packageEntryPath = path.join(packageDir, 'mod.ts')
+    const packageComponentPath = path.join(packageDir, 'nav.tsx')
+
+    await fs.mkdir(appDir, { recursive: true })
+    await fs.mkdir(packageDir, { recursive: true })
+    await fs.writeFile(
+      path.join(packageDir, 'package.json'),
+      JSON.stringify(
+        {
+          exports: {
+            '.': './mod.ts',
+          },
+          name: 'ui-kit',
+          type: 'module',
+        },
+        null,
+        2,
+      ),
+    )
+    await fs.writeFile(packageEntryPath, `export { SharedNav } from './nav.tsx'\n`)
+    await fs.writeFile(
+      packageComponentPath,
+      `
+        export const SharedNav = () => <nav>shared nav</nav>;
+      `,
+    )
+    await fs.writeFile(
+      pagePath,
+      `
+        import { SharedNav } from "ui-kit";
+        export default () => <SharedNav />;
+      `,
+    )
+
+    try {
+      const symbols = await collectAppSymbols(root)
+      const packageSymbols = symbols.filter((symbol) =>
+        symbol.filePath.replaceAll('\\', '/').endsWith('/node_modules/ui-kit/nav.tsx'),
+      )
+
+      expect(packageSymbols.some((symbol) => symbol.kind === 'component')).toBe(true)
+    } finally {
+      await fs.rm(root, { force: true, recursive: true })
+    }
+  })
+
+  it('collects symbols from workspace packages that export managed components through package exports', async () => {
+    const symbols = await collectAppSymbols(resolveWorkspacePath('../../../docs'))
+
+    expect(symbols.some((symbol) => symbol.id === '@eclipsa/motion:motion')).toBe(true)
+    expect(symbols.some((symbol) => symbol.id === '@eclipsa/motion:AnimatePresence')).toBe(true)
+    expect(symbols.some((symbol) => symbol.id === '@eclipsa/motion:LayoutGroup')).toBe(true)
+  })
+
+  it('adds a lang query to symbol request ids while keeping symbol parsing stable', () => {
+    const requestId = createSymbolRequestId('/app/+page.tsx', 'symbol-123')
+
+    expect(requestId).toBe('/app/+page.tsx?eclipsa-symbol=symbol-123&lang.js')
+    expect(parseSymbolRequest(requestId)).toEqual({
+      filePath: '/app/+page.tsx',
+      symbolId: 'symbol-123',
+    })
+  })
+
+  it('creates URL-safe build symbol entry names for package symbols', () => {
+    expect(createBuildSymbolEntryName('symbol-123')).toBe('symbol__symbol-123')
+    expect(createBuildSymbolEntryName('@eclipsa/motion:motion')).toBe(
+      'symbol__b64_QGVjbGlwc2EvbW90aW9uOm1vdGlvbg',
+    )
+    expect(createBuildSymbolUrl('@eclipsa/motion:motion')).toBe(
+      '/entries/symbol__b64_QGVjbGlwc2EvbW90aW9uOm1vdGlvbg.js',
+    )
+  })
+
+  it('loads workspace motion symbol modules through the virtual symbol pipeline', async () => {
+    const filePath = resolveWorkspacePath('../../motion/motion.tsx')
+    const source = await fs.readFile(filePath, 'utf8')
+
+    await primeCompilerCache(filePath, source)
+
+    const compiled = await loadSymbolModuleForSSR(
+      createSymbolRequestId(filePath, '@eclipsa/motion:MotionConfig'),
+    )
+
+    expect(compiled).toContain('export default')
+    expect(compiled).toContain('jsxDEV')
+  })
+
   it('falls back to full reload when top-level component membership changes', async () => {
     const previous = await analyze(
       `
-      import { component$ } from "eclipsa";
-      export default component$(() => <div>ready</div>);
+            export default () => <div>ready</div>;
     `,
       '/tmp/full-reload.tsx',
     )
     const next = await analyze(
       `
-      import { component$ } from "eclipsa";
-      export const Header = component$(() => <h1>new</h1>);
-      export default component$(() => <div>ready</div>);
+            export const Header = () => <h1>new</h1>;
+      export default () => <div>ready</div>;
     `,
       '/tmp/full-reload.tsx',
     )
@@ -399,4 +576,35 @@ describe('createResumeHmrUpdate', () => {
       symbolUrlReplacements: {},
     })
   })
+
+  it('returns absolute source file paths for collected actions and loaders', async () => {
+    const root = await fs.mkdtemp(path.join(os.tmpdir(), 'eclipsa-vite-entries-'))
+    const appDir = path.join(root, 'app')
+    const pagePath = path.join(appDir, '+page.tsx')
+
+    try {
+      await fs.mkdir(appDir, { recursive: true })
+      await fs.writeFile(
+        pagePath,
+        [
+          'import { action, loader } from "eclipsa";',
+          'export const usePing = action(async () => ({ ok: true }));',
+          'export const useStats = loader(async () => ({ ok: true }));',
+          'export default () => null;',
+        ].join('\n'),
+      )
+
+      const actions = await collectAppActions(root)
+      const loaders = await collectAppLoaders(root)
+
+      expect(actions).toHaveLength(1)
+      expect(loaders).toHaveLength(1)
+      expect(actions[0]?.filePath).toBe(pagePath)
+      expect(loaders[0]?.filePath).toBe(pagePath)
+      expect(actions[0]?.id).toBeTruthy()
+      expect(loaders[0]?.id).toBeTruthy()
+    } finally {
+      await fs.rm(root, { force: true, recursive: true })
+    }
+  })
 })
diff --git a/packages/eclipsa/vite/compiler.ts b/packages/eclipsa/vite/compiler.ts
index f3e2a0f..f6983a9 100644
--- a/packages/eclipsa/vite/compiler.ts
+++ b/packages/eclipsa/vite/compiler.ts
@@ -1,6 +1,8 @@
+import { Buffer } from 'node:buffer'
 import * as fs from 'node:fs/promises'
 import * as path from 'node:path'
 import fg from 'fast-glob'
+import ts from 'typescript'
 import {
   analyzeModule,
   compileClientModule,
@@ -13,9 +15,15 @@ import {
 import type { ResumeHmrUpdatePayload } from '../core/resume-hmr.ts'
 
 const SYMBOL_QUERY = 'eclipsa-symbol'
+const SYMBOL_LANG_QUERY = 'lang.js'
+const SIMPLE_BUILD_SYMBOL_PATTERN = /^[A-Za-z0-9_-]+$/
 
 interface AnalyzedEntry {
   analyzed: AnalyzedModule
+  previous: {
+    analyzed: AnalyzedModule
+    source: string
+  } | null
   source: string
 }
 
@@ -27,9 +35,19 @@ interface ResumeHmrResolution {
 }
 
 const cache = new Map<string, AnalyzedEntry>()
+const servedSources = new Map<string, string>()
 
 export const resetCompilerCache = () => {
   cache.clear()
+  servedSources.clear()
+}
+
+export const primeCompilerCache = async (filePath: string, source?: string) => {
+  const normalizedPath = stripQuery(filePath)
+  const normalizedId = normalizeCompilerModuleId(normalizedPath)
+  const resolvedSource = source ?? (await fs.readFile(normalizedPath, 'utf8'))
+  servedSources.set(normalizedId, resolvedSource)
+  await loadAnalyzedModule(normalizedPath, resolvedSource)
 }
 
 const stripQuery = (id: string) => {
@@ -72,6 +90,9 @@ export const parseSymbolRequest = (id: string): { filePath: string; symbolId: st
   }
 }
 
+export const createSymbolRequestId = (filePath: string, symbolId: string) =>
+  `${filePath}?${SYMBOL_QUERY}=${symbolId}&${SYMBOL_LANG_QUERY}`
+
 const loadAnalyzedModule = async (filePath: string, source?: string) => {
   const normalizedPath = stripQuery(filePath)
   const normalizedId = normalizeCompilerModuleId(normalizedPath)
@@ -90,12 +111,19 @@ const loadAnalyzedModule = async (filePath: string, source?: string) => {
     throw new Error(`Failed to compile ${normalizedId}.`)
   }
 
-  cache.set(normalizedId, {
+  const entry = {
     analyzed,
+    previous: cached
+      ? {
+          analyzed: cached.analyzed,
+          source: cached.source,
+        }
+      : null,
     source: resolvedSource,
-  })
+  } satisfies AnalyzedEntry
+  cache.set(normalizedId, entry)
 
-  return analyzed
+  return entry.analyzed
 }
 
 const createAnalyzedEntry = async (filePath: string, source: string): Promise<AnalyzedEntry> => {
@@ -106,6 +134,7 @@ const createAnalyzedEntry = async (filePath: string, source: string): Promise<An
 
   return {
     analyzed,
+    previous: null,
     source,
   }
 }
@@ -131,6 +160,21 @@ const getComponentEntryById = (components: Map<string, ResumeHmrComponentEntry>,
 const sameStrings = (left: string[], right: string[]) =>
   left.length === right.length && left.every((value, index) => value === right[index])
 
+const createDevSourceUrl = (root: string, filePath: string) => {
+  const normalizedRoot = root.replaceAll('\\', '/').replace(/\/$/, '')
+  const normalizedFilePath = filePath.replaceAll('\\', '/')
+  if (normalizedFilePath.startsWith('/app/')) {
+    return normalizedFilePath
+  }
+  if (
+    normalizedFilePath === normalizedRoot ||
+    normalizedFilePath.startsWith(`${normalizedRoot}/`)
+  ) {
+    return `/${path.relative(root, filePath).replaceAll('\\', '/')}`
+  }
+  return `/@fs/${normalizedFilePath}`
+}
+
 const findOwnerComponentForSymbol = (
   oldSymbol: ResumeHmrSymbolEntry,
   components: Map<string, ResumeHmrComponentEntry>,
@@ -151,7 +195,7 @@ export const createResumeHmrUpdate = (options: {
   root: string
 }): ResumeHmrUpdatePayload | null => {
   const { filePath, next, previous, root } = options
-  const fileUrl = `/${path.relative(root, filePath).replaceAll('\\', '/')}`
+  const fileUrl = createDevSourceUrl(root, filePath)
   if (!previous) {
     return next.symbols.size > 0
       ? {
@@ -325,14 +369,49 @@ export const inspectResumeHmrUpdate = async (options: {
 }): Promise<ResumeHmrResolution> => {
   const normalizedPath = stripQuery(options.filePath)
   const normalizedId = normalizeCompilerModuleId(normalizedPath)
-  const previous = cache.get(normalizedId)?.analyzed ?? null
-  const nextEntry = await createAnalyzedEntry(normalizedPath, options.source)
+  const cached = cache.get(normalizedId)
+  let nextEntry: AnalyzedEntry
+  if (cached?.source === options.source) {
+    nextEntry = cached
+  } else {
+    const createdEntry = await createAnalyzedEntry(normalizedPath, options.source)
+    nextEntry = {
+      ...createdEntry,
+      previous: cached
+        ? {
+            analyzed: cached.analyzed,
+            source: cached.source,
+          }
+        : null,
+    }
+  }
+  let previous =
+    cached?.source === options.source
+      ? (nextEntry.previous?.analyzed ?? null)
+      : (cached?.analyzed ?? null)
+  if (!previous) {
+    const servedSource = servedSources.get(normalizedId)
+    if (servedSource && servedSource !== options.source) {
+      const previousEntry = await createAnalyzedEntry(normalizedPath, servedSource)
+      previous = previousEntry.analyzed
+      if (!nextEntry.previous) {
+        nextEntry = {
+          ...nextEntry,
+          previous: {
+            analyzed: previousEntry.analyzed,
+            source: servedSource,
+          },
+        }
+      }
+    }
+  }
   const update = createResumeHmrUpdate({
     filePath: normalizedPath,
     next: nextEntry.analyzed,
     previous,
     root: options.root,
   })
+  servedSources.set(normalizedId, nextEntry.source)
   return {
     isResumable: (previous?.symbols.size ?? 0) > 0 || nextEntry.analyzed.symbols.size > 0,
     nextEntry,
@@ -349,7 +428,9 @@ export const compileModuleForClient = async (
   },
 ) => {
   const filePath = stripQuery(id)
+  const normalizedId = normalizeCompilerModuleId(filePath)
   const analyzed = await loadAnalyzedModule(filePath, source)
+  servedSources.set(normalizedId, servedSources.get(normalizedId) ?? source)
   return compileClientModule(analyzed.code, filePath, {
     hmr: options?.hmr ?? false,
   })
@@ -357,7 +438,9 @@ export const compileModuleForClient = async (
 
 export const compileModuleForSSR = async (source: string, id: string) => {
   const filePath = stripQuery(id)
+  const normalizedId = normalizeCompilerModuleId(filePath)
   const analyzed = await loadAnalyzedModule(filePath, source)
+  servedSources.set(normalizedId, servedSources.get(normalizedId) ?? source)
   return compileSSRModule(analyzed.code, filePath)
 }
 
@@ -367,7 +450,20 @@ export const loadSymbolModuleForClient = async (id: string) => {
     return null
   }
 
-  const analyzed = findCachedAnalyzedModuleBySymbolId(parsed.symbolId) ?? (await loadAnalyzedModule(parsed.filePath))
+  let currentAnalyzed = findCachedAnalyzedModuleBySymbolId(parsed.symbolId)
+  try {
+    const currentSource = await fs.readFile(stripQuery(parsed.filePath), 'utf8')
+    currentAnalyzed = await loadAnalyzedModule(parsed.filePath, currentSource)
+  } catch (error) {
+    const code = (error as NodeJS.ErrnoException | undefined)?.code
+    if (code !== 'ENOENT' && code !== 'ENOTDIR') {
+      throw error
+    }
+    currentAnalyzed ??= await loadAnalyzedModule(parsed.filePath)
+  }
+  const analyzed = currentAnalyzed.symbols.has(parsed.symbolId)
+    ? currentAnalyzed
+    : (findCachedAnalyzedModuleBySymbolId(parsed.symbolId) ?? currentAnalyzed)
   const symbol = analyzed.symbols.get(parsed.symbolId)
   if (!symbol) {
     throw new Error(`Unknown resume symbol ${parsed.symbolId} for ${parsed.filePath}.`)
@@ -384,7 +480,20 @@ export const loadSymbolModuleForSSR = async (id: string) => {
     return null
   }
 
-  const analyzed = findCachedAnalyzedModuleBySymbolId(parsed.symbolId) ?? (await loadAnalyzedModule(parsed.filePath))
+  let currentAnalyzed = findCachedAnalyzedModuleBySymbolId(parsed.symbolId)
+  try {
+    const currentSource = await fs.readFile(stripQuery(parsed.filePath), 'utf8')
+    currentAnalyzed = await loadAnalyzedModule(parsed.filePath, currentSource)
+  } catch (error) {
+    const code = (error as NodeJS.ErrnoException | undefined)?.code
+    if (code !== 'ENOENT' && code !== 'ENOTDIR') {
+      throw error
+    }
+    currentAnalyzed ??= await loadAnalyzedModule(parsed.filePath)
+  }
+  const analyzed = currentAnalyzed.symbols.has(parsed.symbolId)
+    ? currentAnalyzed
+    : (findCachedAnalyzedModuleBySymbolId(parsed.symbolId) ?? currentAnalyzed)
   const symbol = analyzed.symbols.get(parsed.symbolId)
   if (!symbol) {
     throw new Error(`Unknown resume symbol ${parsed.symbolId} for ${parsed.filePath}.`)
@@ -394,9 +503,15 @@ export const loadSymbolModuleForSSR = async (id: string) => {
 }
 
 export const createDevSymbolUrl = (root: string, filePath: string, symbolId: string) =>
-  `/${path.relative(root, filePath).replaceAll('\\', '/')}?${SYMBOL_QUERY}=${symbolId}`
+  createSymbolRequestId(createDevSourceUrl(root, filePath), symbolId)
+
+export const createBuildSymbolEntryName = (symbolId: string) =>
+  SIMPLE_BUILD_SYMBOL_PATTERN.test(symbolId)
+    ? `symbol__${symbolId}`
+    : `symbol__b64_${Buffer.from(symbolId).toString('base64url')}`
 
-export const createBuildSymbolUrl = (symbolId: string) => `/entries/symbol__${symbolId}.js`
+export const createBuildSymbolUrl = (symbolId: string) =>
+  `/entries/${createBuildSymbolEntryName(symbolId)}.js`
 
 export const createBuildServerActionUrl = (actionId: string) =>
   `../ssr/entries/action__${actionId}.mjs`
@@ -404,17 +519,149 @@ export const createBuildServerActionUrl = (actionId: string) =>
 export const createBuildServerLoaderUrl = (loaderId: string) =>
   `../ssr/entries/loader__${loaderId}.mjs`
 
+const ANALYZABLE_SOURCE_EXTENSIONS = new Set([
+  '.cjs',
+  '.cts',
+  '.js',
+  '.jsx',
+  '.mjs',
+  '.mts',
+  '.ts',
+  '.tsx',
+])
+
+const ANALYZABLE_APP_GLOB = '**/*.{cjs,cts,js,jsx,mjs,mts,ts,tsx}'
+
+const moduleResolutionOptions: ts.CompilerOptions = {
+  allowImportingTsExtensions: true,
+  jsx: ts.JsxEmit.Preserve,
+  module: ts.ModuleKind.ESNext,
+  moduleResolution: ts.ModuleResolutionKind.Bundler,
+  resolvePackageJsonExports: true,
+  resolvePackageJsonImports: true,
+  target: ts.ScriptTarget.ESNext,
+}
+
+const moduleResolutionHost = ts.createCompilerHost(moduleResolutionOptions, true)
+
+const isAnalyzableSourceFile = (filePath: string) => {
+  const ext = path.extname(filePath)
+  return ANALYZABLE_SOURCE_EXTENSIONS.has(ext) && !filePath.endsWith('.d.ts')
+}
+
+const resolveImportedModule = (specifier: string, containingFile: string) =>
+  ts.resolveModuleName(specifier, containingFile, moduleResolutionOptions, moduleResolutionHost)
+    .resolvedModule?.resolvedFileName ?? null
+
 export const collectAppSymbols = async (root: string): Promise<ResumeSymbol[]> => {
   const appDir = path.join(root, 'app')
-  const files = await fg(path.join(appDir, '**/*.tsx').replaceAll('\\', '/'))
-  const result: ResumeSymbol[] = []
+  const entryFiles = await fg(path.join(appDir, ANALYZABLE_APP_GLOB).replaceAll('\\', '/'))
+  const entryFileSet = new Set(entryFiles)
+  const pending = [...entryFiles]
+  const visited = new Set<string>()
+  const symbols = new Map<string, ResumeSymbol>()
+
+  while (pending.length > 0) {
+    const next = pending.pop()
+    if (!next) {
+      continue
+    }
 
-  for (const filePath of files) {
-    const analyzed = await loadAnalyzedModule(filePath)
-    result.push(...analyzed.symbols.values())
+    const filePath = stripQuery(next)
+    if (visited.has(filePath) || !isAnalyzableSourceFile(filePath)) {
+      continue
+    }
+    visited.add(filePath)
+
+    let source: string
+    try {
+      source = await fs.readFile(filePath, 'utf8')
+    } catch (error) {
+      if (entryFileSet.has(filePath)) {
+        throw error
+      }
+      continue
+    }
+
+    let analyzed: Awaited<ReturnType<typeof loadAnalyzedModule>>
+    try {
+      analyzed = await loadAnalyzedModule(filePath, source)
+    } catch (error) {
+      if (entryFileSet.has(filePath)) {
+        throw error
+      }
+      continue
+    }
+    for (const symbol of analyzed.symbols.values()) {
+      symbols.set(symbol.id, symbol)
+    }
+
+    const imports = ts.preProcessFile(source, true, true).importedFiles
+    for (const imported of imports) {
+      const resolvedFilePath = resolveImportedModule(imported.fileName, filePath)
+      if (!resolvedFilePath || !isAnalyzableSourceFile(resolvedFilePath)) {
+        continue
+      }
+      pending.push(resolvedFilePath)
+    }
   }
 
-  return result
+  return [...symbols.values()]
+}
+
+export const collectReachableAnalyzableFiles = async (
+  entryFiles: readonly string[],
+): Promise<string[]> => {
+  const pending = [...entryFiles]
+  const visited = new Set<string>()
+  const reachable = new Set<string>()
+  const entryFileSet = new Set(entryFiles.map((filePath) => stripQuery(filePath)))
+
+  while (pending.length > 0) {
+    const next = pending.pop()
+    if (!next) {
+      continue
+    }
+
+    const filePath = stripQuery(next)
+    if (visited.has(filePath) || !isAnalyzableSourceFile(filePath)) {
+      continue
+    }
+    visited.add(filePath)
+
+    let source: string
+    try {
+      source = await fs.readFile(filePath, 'utf8')
+    } catch (error) {
+      const code = (error as NodeJS.ErrnoException | undefined)?.code
+      if (entryFileSet.has(filePath) && code !== 'ENOENT' && code !== 'ENOTDIR') {
+        throw error
+      }
+      continue
+    }
+
+    try {
+      await loadAnalyzedModule(filePath, source)
+    } catch (error) {
+      if (entryFileSet.has(filePath)) {
+        throw error
+      }
+      continue
+    }
+
+    reachable.add(filePath)
+
+    const imports = ts.preProcessFile(source, true, true).importedFiles
+    for (const imported of imports) {
+      const resolvedFilePath = resolveImportedModule(imported.fileName, filePath)
+      if (!resolvedFilePath || !isAnalyzableSourceFile(resolvedFilePath)) {
+        continue
+      }
+      pending.push(resolvedFilePath)
+    }
+  }
+
+  return [...reachable]
 }
 
 export const collectAppActions = async (
@@ -426,7 +673,7 @@ export const collectAppActions = async (
 
   for (const filePath of files) {
     const analyzed = await loadAnalyzedModule(filePath)
-    result.push(...analyzed.actions.values())
+    result.push(...[...analyzed.actions.values()].map((action) => ({ filePath, id: action.id })))
   }
 
   return result
@@ -441,7 +688,7 @@ export const collectAppLoaders = async (
 
   for (const filePath of files) {
     const analyzed = await loadAnalyzedModule(filePath)
-    result.push(...analyzed.loaders.values())
+    result.push(...[...analyzed.loaders.values()].map((loader) => ({ filePath, id: loader.id })))
   }
 
   return result
diff --git a/packages/eclipsa/vite/config.test.ts b/packages/eclipsa/vite/config.test.ts
index 53f5328..529f8f0 100644
--- a/packages/eclipsa/vite/config.test.ts
+++ b/packages/eclipsa/vite/config.test.ts
@@ -1,3 +1,5 @@
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
 import { describe, expect, it, vi } from 'vitest'
 import type { RouteEntry } from './utils/routing.ts'
 
@@ -97,4 +99,55 @@ describe('createConfig', () => {
       },
     })
   })
+
+  it('resolves the SSR runtime entry from the package instead of the app root', async () => {
+    const userConfig = {
+      root: '/tmp/app',
+    }
+
+    mocks.createRoutes.mockResolvedValue([])
+    mocks.collectRouteModules.mockReturnValue([])
+    mocks.collectRouteServerModules.mockReturnValue([])
+    mocks.collectAppActions.mockResolvedValue([])
+    mocks.collectAppLoaders.mockResolvedValue([])
+    mocks.collectAppSymbols.mockResolvedValue([])
+
+    const hook = createConfig({ output: 'node' })
+    if (typeof hook !== 'function') {
+      throw new Error('Expected createConfig() to return a config hook function')
+    }
+
+    const config = await hook.call({} as any, userConfig as any, {} as any)
+    const ssrInput = (config as Record<string, any>).environments?.ssr?.build?.rollupOptions?.input
+
+    expect(ssrInput?.eclipsa_runtime).toBe(
+      fileURLToPath(import.meta.resolve('eclipsa/vite/build/runtime')),
+    )
+    expect(ssrInput?.eclipsa_runtime).not.toBe(
+      path.join(userConfig.root, '../packages/eclipsa/vite/build/runtime.ts'),
+    )
+  })
+
+  it('bundles eclipsa package imports into the SSR environment to avoid split runtimes', async () => {
+    const userConfig = {
+      root: '/tmp/app',
+    }
+
+    mocks.createRoutes.mockResolvedValue([])
+    mocks.collectRouteModules.mockReturnValue([])
+    mocks.collectRouteServerModules.mockReturnValue([])
+    mocks.collectAppActions.mockResolvedValue([])
+    mocks.collectAppLoaders.mockResolvedValue([])
+    mocks.collectAppSymbols.mockResolvedValue([])
+
+    const hook = createConfig({ output: 'node' })
+    if (typeof hook !== 'function') {
+      throw new Error('Expected createConfig() to return a config hook function')
+    }
+
+    const config = await hook.call({} as any, userConfig as any, {} as any)
+    const noExternal = (config as Record<string, any>).environments?.ssr?.resolve?.noExternal
+
+    expect(noExternal).toEqual([/^eclipsa(?:\/|$)/])
+  })
 })
diff --git a/packages/eclipsa/vite/config.ts b/packages/eclipsa/vite/config.ts
index aeb7403..ae60bfb 100644
--- a/packages/eclipsa/vite/config.ts
+++ b/packages/eclipsa/vite/config.ts
@@ -1,16 +1,39 @@
 import type { Plugin } from 'vite'
+import * as fs from 'node:fs/promises'
 import { cwd } from 'node:process'
 import path from 'node:path'
+import { fileURLToPath } from 'node:url'
 import { collectRouteModules, collectRouteServerModules, createRoutes } from './utils/routing.ts'
 import { build } from './build/mod.ts'
-import { collectAppActions, collectAppLoaders, collectAppSymbols } from './compiler.ts'
+import {
+  collectAppActions,
+  collectAppLoaders,
+  collectAppSymbols,
+  createBuildSymbolEntryName,
+  createSymbolRequestId,
+} from './compiler.ts'
 import type { ResolvedEclipsaPluginOptions } from './options.ts'
 import { createEclipsaNitroConfig, hasNitroPlugin } from './nitro.ts'
 
+const ECLIPSA_RUNTIME_ENTRY_PATH = fileURLToPath(import.meta.resolve('eclipsa/vite/build/runtime'))
+
+const fileExists = async (filePath: string) => {
+  try {
+    await fs.access(filePath)
+    return true
+  } catch {
+    return false
+  }
+}
+
 export const createConfig =
   (options: ResolvedEclipsaPluginOptions): Plugin['config'] =>
   async (userConfig) => {
     const root = userConfig.root ?? cwd()
+    const appHooksPath = path.join(root, 'app/+hooks.ts')
+    const serverHooksPath = path.join(root, 'app/+hooks.server.ts')
+    const hasAppHooks = await fileExists(appHooksPath)
+    const hasServerHooks = await fileExists(serverHooksPath)
     const nitroEnabled = hasNitroPlugin(userConfig.plugins)
     const routes = await createRoutes(root)
     const routeModules = collectRouteModules(routes)
@@ -21,9 +44,10 @@ export const createConfig =
 
     const clientInput = Object.fromEntries([
       ['client_boot', path.join(root, 'app/+client.dev.tsx')],
+      ...(hasAppHooks ? [['app_hooks', appHooksPath] as const] : []),
       ...symbols.map((symbol) => [
-        `symbol__${symbol.id}`,
-        `${symbol.filePath}?eclipsa-symbol=${symbol.id}`,
+        createBuildSymbolEntryName(symbol.id),
+        createSymbolRequestId(symbol.filePath, symbol.id),
       ]),
       ...routeModules.map((entry) => [entry.entryName, entry.filePath]),
     ])
@@ -31,7 +55,9 @@ export const createConfig =
     const ssrInput = Object.fromEntries([
       ['server_entry', path.join(root, 'app/+server-entry.ts')],
       ['ssr_root', path.join(root, 'app/+ssr-root.tsx')],
-      ['eclipsa_runtime', path.join(root, '../packages/eclipsa/vite/build/runtime.ts')],
+      ['eclipsa_runtime', ECLIPSA_RUNTIME_ENTRY_PATH],
+      ...(hasAppHooks ? [['app_hooks', appHooksPath] as const] : []),
+      ...(hasServerHooks ? [['server_hooks', serverHooksPath] as const] : []),
       ...actions.map((action) => [`action__${action.id}`, action.filePath]),
       ...loaders.map((loader) => [`loader__${loader.id}`, loader.filePath]),
       ...routeModules.map((entry) => [entry.entryName, entry.filePath]),
@@ -70,6 +96,9 @@ export const createConfig =
           },
         },
         ssr: {
+          resolve: {
+            noExternal: [/^eclipsa(?:\/|$)/],
+          },
           build: {
             emptyOutDir: true,
             outDir: path.join(root, 'dist/ssr'),
diff --git a/packages/eclipsa/vite/dev-app/mod.test.ts b/packages/eclipsa/vite/dev-app/mod.test.ts
index 7337f32..2ba491a 100644
--- a/packages/eclipsa/vite/dev-app/mod.test.ts
+++ b/packages/eclipsa/vite/dev-app/mod.test.ts
@@ -1,6 +1,10 @@
 import { Hono } from 'hono'
+import * as fs from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import * as path from 'node:path'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import type { RouteEntry } from '../utils/routing.ts'
+import { ROUTE_RPC_URL_HEADER } from '../../core/router-shared.ts'
 
 var createRoutes = vi.fn<() => Promise<RouteEntry[]>>()
 var collectAppActions = vi.fn<() => Promise<{ id: string; filePath: string }[]>>()
@@ -13,6 +17,17 @@ import { createDevFetch, shouldInvalidateDevApp } from './mod.ts'
 const createDevModuleUrl = (root: string, entry: { filePath: string }) =>
   entry.filePath.replace(root, '')
 
+const writeRouteModule = async (
+  root: string,
+  relativePath: string,
+  source = 'export default () => null\n',
+) => {
+  const filePath = path.join(root, 'app', relativePath)
+  await fs.mkdir(path.dirname(filePath), { recursive: true })
+  await fs.writeFile(filePath, source)
+  return filePath
+}
+
 describe('createDevFetch', () => {
   let routes: RouteEntry[]
   let serverEntryImports: number
@@ -249,6 +264,92 @@ describe('createDevFetch', () => {
     expect(html).toContain('"pathname":"/"')
   })
 
+  it('defers SSRRoot execution to the render pipeline', async () => {
+    const callOrder: string[] = []
+    const resolveNode = (value: any): any => {
+      if (!value || typeof value !== 'object') {
+        return value
+      }
+      if (typeof value.type === 'function') {
+        return resolveNode(value.type(value.props ?? {}))
+      }
+      return {
+        ...value,
+        ...(value.props ? { props: resolveNode(value.props) } : {}),
+      }
+    }
+
+    const devFetch = createDevFetch({
+      resolvedConfig: {
+        root: '/tmp',
+      } as any,
+      devServer: {} as any,
+      deps: {
+        collectAppActions,
+        collectAppLoaders,
+        collectAppSymbols,
+        createDevModuleUrl,
+        createDevSymbolUrl,
+        createRoutes,
+      },
+      runner: {
+        async import(id: string) {
+          if (id === '/app/+server-entry.ts') {
+            return { default: userApp }
+          }
+          if (id === '/app/+ssr-root.tsx') {
+            return {
+              default(props: any) {
+                callOrder.push('ssr-root')
+                return {
+                  props,
+                  type: 'html',
+                }
+              },
+            }
+          }
+          if (id === 'eclipsa') {
+            return {
+              Fragment: Symbol.for('fragment'),
+              RESUME_FINAL_STATE_ELEMENT_ID: 'eclipsa-resume-final',
+              escapeJSONScriptText(value: string) {
+                return value
+              },
+              getStreamingResumeBootstrapScriptContent() {
+                return ''
+              },
+              renderSSRStream(renderDocument: () => any) {
+                callOrder.push('render-stream:start')
+                const rendered = resolveNode(renderDocument())
+                callOrder.push('render-stream:end')
+                return {
+                  chunks: (async function* () {})(),
+                  html: JSON.stringify(rendered),
+                  payload: {},
+                }
+              },
+              resolvePendingLoaders: vi.fn(),
+              serializeResumePayload() {
+                return '{}'
+              },
+            }
+          }
+          return {
+            default() {
+              return null
+            },
+          }
+        },
+      } as any,
+      ssrEnv: {} as any,
+    })
+
+    const response = await devFetch.fetch(new Request('http://localhost/'))
+
+    expect(response?.status).toBe(200)
+    expect(callOrder).toEqual(['render-stream:start', 'ssr-root', 'render-stream:end'])
+  })
+
   it('renders resume metadata through SSRRoot head props', async () => {
     const devFetch = createDevFetch({
       resolvedConfig: {
@@ -330,8 +431,204 @@ describe('createDevFetch', () => {
 
     expect(html).toContain('"id":"eclipsa-resume"')
     expect(html).toContain(`"id":"${'eclipsa-route-manifest'}"`)
+    expect(html).toContain(`"id":"${'eclipsa-app-hooks'}"`)
+    expect(html).not.toContain('__ECLIPSA_RESUME_PAYLOAD__')
+    expect(html).not.toContain('__ECLIPSA_ROUTE_MANIFEST__')
+    expect(html).not.toContain('__ECLIPSA_APP_HOOKS__')
+  })
+
+  it('replaces repeated resume placeholders across serialized head output', async () => {
+    const devFetch = createDevFetch({
+      resolvedConfig: {
+        root: '/tmp',
+      } as any,
+      devServer: {} as any,
+      deps: {
+        collectAppActions,
+        collectAppLoaders,
+        collectAppSymbols,
+        createDevModuleUrl,
+        createDevSymbolUrl,
+        createRoutes,
+      },
+      runner: {
+        async import(id: string) {
+          if (id === '/app/+server-entry.ts') {
+            return { default: userApp }
+          }
+          if (id === '/app/+ssr-root.tsx') {
+            return {
+              default(props: any) {
+                return {
+                  props: {
+                    children: [
+                      {
+                        props: {
+                          children: props.head,
+                        },
+                        type: 'head',
+                      },
+                      {
+                        props: {
+                          children: props.body,
+                        },
+                        type: 'body',
+                      },
+                    ],
+                  },
+                  type: 'html',
+                }
+              },
+            }
+          }
+          if (id === 'eclipsa') {
+            return {
+              Fragment: Symbol.for('fragment'),
+              RESUME_FINAL_STATE_ELEMENT_ID: 'eclipsa-resume-final',
+              escapeJSONScriptText(value: string) {
+                return value
+              },
+              getStreamingResumeBootstrapScriptContent() {
+                return ''
+              },
+              renderSSRStream(renderDocument: () => any) {
+                const resolveNode = (value: any): any => {
+                  if (!value || typeof value !== 'object') {
+                    return value
+                  }
+                  if (typeof value.type === 'function') {
+                    return resolveNode(value.type(value.props ?? {}))
+                  }
+                  return {
+                    ...value,
+                    ...(value.props ? { props: resolveNode(value.props) } : {}),
+                  }
+                }
+
+                return {
+                  chunks: (async function* () {})(),
+                  html: JSON.stringify(resolveNode(renderDocument())),
+                  payload: {},
+                }
+              },
+              resolvePendingLoaders: vi.fn(),
+              serializeResumePayload() {
+                return '{}'
+              },
+            }
+          }
+          return {
+            default() {
+              return null
+            },
+          }
+        },
+      } as any,
+      ssrEnv: {} as any,
+    })
+
+    const response = await devFetch.fetch(new Request('http://localhost/'))
+    const html = await response?.text()
+
+    expect(html).toContain('"children":"{}"')
+    expect(html).toContain('"id":"eclipsa-route-manifest"')
+    expect(html).toContain('"routePath":"/"')
+    expect(html).toContain('"id":"eclipsa-app-hooks"')
+    expect(html).toContain('"client":null')
     expect(html).not.toContain('__ECLIPSA_RESUME_PAYLOAD__')
     expect(html).not.toContain('__ECLIPSA_ROUTE_MANIFEST__')
+    expect(html).not.toContain('__ECLIPSA_APP_HOOKS__')
+  })
+
+  it('replaces route metadata placeholders inside serialized dev resume payloads', async () => {
+    const devFetch = createDevFetch({
+      resolvedConfig: {
+        root: '/tmp',
+      } as any,
+      devServer: {} as any,
+      deps: {
+        collectAppActions,
+        collectAppLoaders,
+        collectAppSymbols,
+        createDevModuleUrl,
+        createDevSymbolUrl,
+        createRoutes,
+      },
+      runner: {
+        async import(id: string) {
+          if (id === '/app/+server-entry.ts') {
+            return { default: userApp }
+          }
+          if (id === '/app/+ssr-root.tsx') {
+            return {
+              default() {
+                return null
+              },
+            }
+          }
+          if (id === 'eclipsa') {
+            return {
+              RESUME_FINAL_STATE_ELEMENT_ID: 'eclipsa-resume-final',
+              escapeJSONScriptText(value: string) {
+                return value
+              },
+              getStreamingResumeBootstrapScriptContent() {
+                return ''
+              },
+              renderSSRStream() {
+                return {
+                  chunks: (async function* () {})(),
+                  html: '<html><head></head><body></body></html>',
+                  payload: {
+                    components: {
+                      c0: {
+                        props: {
+                          head: {
+                            children: [
+                              {
+                                props: {
+                                  children: '__ECLIPSA_ROUTE_MANIFEST__',
+                                },
+                                type: 'script',
+                              },
+                              {
+                                props: {
+                                  children: '__ECLIPSA_APP_HOOKS__',
+                                },
+                                type: 'script',
+                              },
+                            ],
+                            type: 'fragment',
+                          },
+                        },
+                      },
+                    },
+                  },
+                }
+              },
+              resolvePendingLoaders: vi.fn(),
+              serializeResumePayload(payload: unknown) {
+                return JSON.stringify(payload)
+              },
+            }
+          }
+          return {
+            default() {
+              return null
+            },
+          }
+        },
+      } as any,
+      ssrEnv: {} as any,
+    })
+
+    const response = await devFetch.fetch(new Request('http://localhost/'))
+    const html = await response?.text()
+
+    expect(html).not.toContain('__ECLIPSA_ROUTE_MANIFEST__')
+    expect(html).not.toContain('__ECLIPSA_APP_HOOKS__')
+    expect(html).toContain('\\"routePath\\":\\"/\\"')
+    expect(html).toContain('{\\"client\\":null}')
   })
 
   it('injects the suspense streaming bootstrap script without escaping it', async () => {
@@ -652,7 +949,28 @@ describe('createDevFetch', () => {
     })
   })
 
-  it('evaluates middleware against the target preflight URL', async () => {
+  it('runs route middleware and params for direct action and loader rpc requests', async () => {
+    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-dev-rpc-route-'))
+    const securePagePath = await writeRouteModule(root, 'secure/[id]/+page.tsx')
+    const publicPagePath = await writeRouteModule(root, 'public/+page.tsx')
+    const secureMiddlewarePath = await writeRouteModule(
+      root,
+      'secure/+middleware.ts',
+      'export default async (_c, next) => { await next(); }\n',
+    )
+    const executeAction = vi.fn(async (_id: string, c: any) =>
+      c.json({
+        guard: c.var.guard ?? null,
+        id: c.req.param('id') ?? null,
+      }),
+    )
+    const executeLoader = vi.fn(async (_id: string, c: any) =>
+      c.json({
+        guard: c.var.guard ?? null,
+        id: c.req.param('id') ?? null,
+      }),
+    )
+
     routes = [
       {
         error: null,
@@ -660,24 +978,43 @@ describe('createDevFetch', () => {
         loading: null,
         middlewares: [
           {
-            entryName: 'special__guarded__middleware',
-            filePath: '/tmp/app/guarded/+middleware.ts',
+            entryName: 'special__secure__middleware',
+            filePath: secureMiddlewarePath,
           },
         ],
         notFound: null,
         page: {
-          entryName: 'route__guarded__page',
-          filePath: '/tmp/app/guarded/+page.tsx',
+          entryName: 'route__secure___id___page',
+          filePath: securePagePath,
         },
-        routePath: '/guarded',
-        segments: [{ kind: 'static', value: 'guarded' }],
+        routePath: '/secure/[id]',
+        segments: [
+          { kind: 'static', value: 'secure' },
+          { kind: 'required', value: 'id' },
+        ],
+        server: null,
+      },
+      {
+        error: null,
+        layouts: [],
+        loading: null,
+        middlewares: [],
+        notFound: null,
+        page: {
+          entryName: 'route__public__page',
+          filePath: publicPagePath,
+        },
+        routePath: '/public',
+        segments: [{ kind: 'static', value: 'public' }],
         server: null,
       },
     ]
+    collectAppActions.mockResolvedValue([{ filePath: securePagePath, id: 'secure-action' }])
+    collectAppLoaders.mockResolvedValue([{ filePath: securePagePath, id: 'secure-loader' }])
 
     const devFetch = createDevFetch({
       resolvedConfig: {
-        root: '/tmp',
+        root,
       } as any,
       devServer: {} as any,
       deps: {
@@ -693,13 +1030,216 @@ describe('createDevFetch', () => {
           if (id === '/app/+server-entry.ts') {
             return { default: userApp }
           }
-          if (id === '/tmp/app/guarded/+middleware.ts') {
+          if (id === secureMiddlewarePath) {
             return {
-              default(c: any, next: any) {
-                if (new URL(c.req.url).searchParams.get('allow') === '1') {
-                  return next()
-                }
-                return c.redirect('/counter')
+              default: async (c: any, next: () => Promise<void>) => {
+                c.set('guard', 'secure')
+                await next()
+              },
+            }
+          }
+          if (id === 'eclipsa') {
+            return {
+              executeAction,
+              executeLoader,
+              hasAction: () => true,
+              hasLoader: () => true,
+            }
+          }
+          return {
+            default() {
+              return null
+            },
+          }
+        },
+      } as any,
+      ssrEnv: {} as any,
+    })
+
+    const actionResponse = await devFetch.fetch(
+      new Request('http://localhost/__eclipsa/action/secure-action', {
+        headers: {
+          [ROUTE_RPC_URL_HEADER]: 'http://localhost/secure/123',
+        },
+        method: 'POST',
+      }),
+    )
+
+    expect(actionResponse?.status).toBe(200)
+    await expect(actionResponse?.json()).resolves.toEqual({
+      guard: 'secure',
+      id: '123',
+    })
+
+    const loaderResponse = await devFetch.fetch(
+      new Request('http://localhost/__eclipsa/loader/secure-loader', {
+        headers: {
+          [ROUTE_RPC_URL_HEADER]: 'http://localhost/secure/123',
+        },
+      }),
+    )
+
+    expect(loaderResponse?.status).toBe(200)
+    await expect(loaderResponse?.json()).resolves.toEqual({
+      guard: 'secure',
+      id: '123',
+    })
+
+    const blockedResponse = await devFetch.fetch(
+      new Request('http://localhost/__eclipsa/action/secure-action', {
+        headers: {
+          [ROUTE_RPC_URL_HEADER]: 'http://localhost/public',
+        },
+        method: 'POST',
+      }),
+    )
+
+    expect(blockedResponse).toBeUndefined()
+    expect(executeAction).toHaveBeenCalledTimes(1)
+    expect(executeLoader).toHaveBeenCalledTimes(1)
+  })
+
+  it('rejects form posts that target actions outside the current route graph', async () => {
+    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-dev-form-action-'))
+    const securePagePath = await writeRouteModule(root, 'secure/+page.tsx')
+    const publicPagePath = await writeRouteModule(root, 'public/+page.tsx')
+    const executeAction = vi.fn(async () => new Response(null, { status: 204 }))
+
+    routes = [
+      {
+        error: null,
+        layouts: [],
+        loading: null,
+        middlewares: [],
+        notFound: null,
+        page: {
+          entryName: 'route__secure__page',
+          filePath: securePagePath,
+        },
+        routePath: '/secure',
+        segments: [{ kind: 'static', value: 'secure' }],
+        server: null,
+      },
+      {
+        error: null,
+        layouts: [],
+        loading: null,
+        middlewares: [],
+        notFound: null,
+        page: {
+          entryName: 'route__public__page',
+          filePath: publicPagePath,
+        },
+        routePath: '/public',
+        segments: [{ kind: 'static', value: 'public' }],
+        server: null,
+      },
+    ]
+    collectAppActions.mockResolvedValue([{ filePath: securePagePath, id: 'secure-action' }])
+
+    const devFetch = createDevFetch({
+      resolvedConfig: {
+        root,
+      } as any,
+      devServer: {} as any,
+      deps: {
+        collectAppActions,
+        collectAppLoaders,
+        collectAppSymbols,
+        createDevModuleUrl,
+        createDevSymbolUrl,
+        createRoutes,
+      },
+      runner: {
+        async import(id: string) {
+          if (id === '/app/+server-entry.ts') {
+            return { default: userApp }
+          }
+          if (id === 'eclipsa') {
+            return {
+              ACTION_CONTENT_TYPE: 'application/eclipsa-action+json',
+              deserializePublicValue: (value: unknown) => value,
+              executeAction,
+              getActionFormSubmissionId: async (c: any) => {
+                const formData = await c.req.formData()
+                return formData.get('__e_action')
+              },
+              getNormalizedActionInput: async () => null,
+              hasAction: () => true,
+              primeActionState: () => undefined,
+            }
+          }
+          return {
+            default() {
+              return null
+            },
+          }
+        },
+      } as any,
+      ssrEnv: {} as any,
+    })
+
+    const formData = new FormData()
+    formData.set('__e_action', 'secure-action')
+    const response = await devFetch.fetch(
+      new Request('http://localhost/public', {
+        body: formData,
+        method: 'POST',
+      }),
+    )
+
+    expect(response).toBeUndefined()
+    expect(executeAction).not.toHaveBeenCalled()
+  })
+
+  it('evaluates middleware against the target preflight URL', async () => {
+    routes = [
+      {
+        error: null,
+        layouts: [],
+        loading: null,
+        middlewares: [
+          {
+            entryName: 'special__guarded__middleware',
+            filePath: '/tmp/app/guarded/+middleware.ts',
+          },
+        ],
+        notFound: null,
+        page: {
+          entryName: 'route__guarded__page',
+          filePath: '/tmp/app/guarded/+page.tsx',
+        },
+        routePath: '/guarded',
+        segments: [{ kind: 'static', value: 'guarded' }],
+        server: null,
+      },
+    ]
+
+    const devFetch = createDevFetch({
+      resolvedConfig: {
+        root: '/tmp',
+      } as any,
+      devServer: {} as any,
+      deps: {
+        collectAppActions,
+        collectAppLoaders,
+        collectAppSymbols,
+        createDevModuleUrl,
+        createDevSymbolUrl,
+        createRoutes,
+      },
+      runner: {
+        async import(id: string) {
+          if (id === '/app/+server-entry.ts') {
+            return { default: userApp }
+          }
+          if (id === '/tmp/app/guarded/+middleware.ts') {
+            return {
+              default(c: any, next: any) {
+                if (new URL(c.req.url).searchParams.get('allow') === '1') {
+                  return next()
+                }
+                return c.redirect('/counter')
               },
             }
           }
@@ -754,6 +1294,537 @@ describe('createDevFetch', () => {
     })
   })
 
+  it('keeps route-preflight dispatches in-process even when the host header is spoofed', async () => {
+    const originalFetch = globalThis.fetch
+    const externalFetch = vi.fn(async () => new Response(null, { status: 204 }))
+    globalThis.fetch = externalFetch as typeof fetch
+
+    try {
+      routes = [
+        {
+          error: null,
+          layouts: [],
+          loading: null,
+          middlewares: [
+            {
+              entryName: 'special__guarded__middleware',
+              filePath: '/tmp/app/guarded/+middleware.ts',
+            },
+          ],
+          notFound: null,
+          page: {
+            entryName: 'route__guarded__page',
+            filePath: '/tmp/app/guarded/+page.tsx',
+          },
+          routePath: '/guarded',
+          segments: [{ kind: 'static', value: 'guarded' }],
+          server: null,
+        },
+      ]
+
+      const devFetch = createDevFetch({
+        resolvedConfig: {
+          root: '/tmp',
+        } as any,
+        devServer: {} as any,
+        deps: {
+          collectAppActions,
+          collectAppLoaders,
+          collectAppSymbols,
+          createDevModuleUrl,
+          createDevSymbolUrl,
+          createRoutes,
+        },
+        runner: {
+          async import(id: string) {
+            if (id === '/app/+server-entry.ts') {
+              return { default: userApp }
+            }
+            if (id === '/tmp/app/guarded/+middleware.ts') {
+              return {
+                default(c: any, next: any) {
+                  if (new URL(c.req.url).searchParams.get('allow') === '1') {
+                    return next()
+                  }
+                  return c.redirect('/counter')
+                },
+              }
+            }
+            if (id === '/app/+ssr-root.tsx') {
+              return {
+                default(props: any) {
+                  return props
+                },
+              }
+            }
+            if (id === 'eclipsa') {
+              return {
+                escapeJSONScriptText(value: string) {
+                  return value
+                },
+                getStreamingResumeBootstrapScriptContent() {
+                  return ''
+                },
+                renderSSRStream() {
+                  return {
+                    chunks: (async function* () {})(),
+                    html: '<html><head></head><body></body></html>',
+                    payload: {},
+                  }
+                },
+                RESUME_FINAL_STATE_ELEMENT_ID: 'eclipsa-resume-final',
+                resolvePendingLoaders: vi.fn(),
+                serializeResumePayload() {
+                  return '{}'
+                },
+              }
+            }
+            return {
+              default() {
+                return null
+              },
+            }
+          },
+        } as any,
+        ssrEnv: {} as any,
+      })
+
+      const response = await devFetch.fetch(
+        new Request(
+          'http://localhost/__eclipsa/route-preflight?href=http%3A%2F%2F169.254.169.254%2Fguarded%3Fallow%3D1',
+          {
+            headers: {
+              host: '169.254.169.254',
+            },
+          },
+        ),
+      )
+
+      expect(response?.status).toBe(200)
+      await expect(response?.json()).resolves.toEqual({
+        ok: true,
+      })
+      expect(externalFetch).not.toHaveBeenCalled()
+    } finally {
+      globalThis.fetch = originalFetch
+    }
+  })
+
+  it('returns prefetched loader snapshots from the route-data endpoint', async () => {
+    const devFetch = createDevFetch({
+      resolvedConfig: {
+        root: '/tmp',
+      } as any,
+      devServer: {} as any,
+      deps: {
+        collectAppActions,
+        collectAppLoaders,
+        collectAppSymbols,
+        createDevModuleUrl,
+        createDevSymbolUrl,
+        createRoutes,
+      },
+      runner: {
+        async import(id: string) {
+          if (id === '/app/+server-entry.ts') {
+            return { default: userApp }
+          }
+          if (id === '/tmp/app/+page.tsx') {
+            return {
+              default() {
+                return null
+              },
+            }
+          }
+          if (id === 'eclipsa') {
+            return {
+              renderSSRAsync: async () => ({
+                payload: {
+                  loaders: {
+                    profile: {
+                      data: { name: 'Ada' },
+                      error: null,
+                      loaded: true,
+                    },
+                  },
+                },
+              }),
+              resolvePendingLoaders: vi.fn(),
+            }
+          }
+          return {
+            default(props: any) {
+              return props ?? null
+            },
+          }
+        },
+      } as any,
+      ssrEnv: {} as any,
+    })
+
+    const response = await devFetch.fetch(
+      new Request(
+        'http://127.0.0.1:4173/__eclipsa/route-data?href=http%3A%2F%2F127.0.0.1%3A4173%2F',
+      ),
+    )
+
+    expect(response?.status).toBe(200)
+    await expect(response?.json()).resolves.toEqual({
+      finalHref: 'http://127.0.0.1:4173/',
+      finalPathname: '/',
+      kind: 'page',
+      loaders: {
+        profile: {
+          data: { name: 'Ada' },
+          error: null,
+          loaded: true,
+        },
+      },
+      ok: true,
+    })
+  })
+
+  it('returns middleware redirects from the route-data endpoint without HTML', async () => {
+    routes = [
+      {
+        error: null,
+        layouts: [],
+        loading: null,
+        middlewares: [
+          {
+            entryName: 'special__guarded__middleware',
+            filePath: '/tmp/app/guarded/+middleware.ts',
+          },
+        ],
+        notFound: null,
+        page: {
+          entryName: 'route__guarded__page',
+          filePath: '/tmp/app/guarded/+page.tsx',
+        },
+        routePath: '/guarded',
+        segments: [{ kind: 'static', value: 'guarded' }],
+        server: null,
+      },
+    ]
+
+    const devFetch = createDevFetch({
+      resolvedConfig: {
+        root: '/tmp',
+      } as any,
+      devServer: {} as any,
+      deps: {
+        collectAppActions,
+        collectAppLoaders,
+        collectAppSymbols,
+        createDevModuleUrl,
+        createDevSymbolUrl,
+        createRoutes,
+      },
+      runner: {
+        async import(id: string) {
+          if (id === '/app/+server-entry.ts') {
+            return { default: userApp }
+          }
+          if (id === '/tmp/app/guarded/+middleware.ts') {
+            return {
+              default(c: any) {
+                return c.redirect('/counter')
+              },
+            }
+          }
+          if (id === 'eclipsa') {
+            return {
+              renderSSRAsync: vi.fn(),
+              resolvePendingLoaders: vi.fn(),
+            }
+          }
+          return {
+            default() {
+              return null
+            },
+          }
+        },
+      } as any,
+      ssrEnv: {} as any,
+    })
+
+    const response = await devFetch.fetch(
+      new Request('http://localhost/__eclipsa/route-data?href=http%3A%2F%2Flocalhost%2Fguarded'),
+    )
+
+    expect(response?.status).toBe(200)
+    await expect(response?.json()).resolves.toEqual({
+      location: 'http://localhost/counter',
+      ok: false,
+    })
+  })
+
+  it('returns not-found loader snapshots from the route-data endpoint', async () => {
+    routes = [
+      {
+        error: null,
+        layouts: [],
+        loading: null,
+        middlewares: [],
+        notFound: {
+          entryName: 'special___not_found',
+          filePath: '/tmp/app/+not-found.tsx',
+        },
+        page: {
+          entryName: 'route__page',
+          filePath: '/tmp/app/+page.tsx',
+        },
+        routePath: '/',
+        segments: [],
+        server: null,
+      },
+    ]
+
+    const devFetch = createDevFetch({
+      resolvedConfig: {
+        root: '/tmp',
+      } as any,
+      devServer: {} as any,
+      deps: {
+        collectAppActions,
+        collectAppLoaders,
+        collectAppSymbols,
+        createDevModuleUrl,
+        createDevSymbolUrl,
+        createRoutes,
+      },
+      runner: {
+        async import(id: string) {
+          if (id === '/app/+server-entry.ts') {
+            return { default: userApp }
+          }
+          if (id === '/tmp/app/+not-found.tsx') {
+            return {
+              default() {
+                return null
+              },
+            }
+          }
+          if (id === 'eclipsa') {
+            return {
+              renderSSRAsync: async () => ({
+                payload: {
+                  loaders: {
+                    missing: {
+                      data: null,
+                      error: { message: 'missing' },
+                      loaded: true,
+                    },
+                  },
+                },
+              }),
+              resolvePendingLoaders: vi.fn(),
+            }
+          }
+          return {
+            default(props: any) {
+              return props ?? null
+            },
+          }
+        },
+      } as any,
+      ssrEnv: {} as any,
+    })
+
+    const response = await devFetch.fetch(
+      new Request('http://localhost/__eclipsa/route-data?href=http%3A%2F%2Flocalhost%2Fmissing'),
+    )
+
+    expect(response?.status).toBe(200)
+    await expect(response?.json()).resolves.toEqual({
+      finalHref: 'http://localhost/missing',
+      finalPathname: '/missing',
+      kind: 'not-found',
+      loaders: {
+        missing: {
+          data: null,
+          error: { message: 'missing' },
+          loaded: true,
+        },
+      },
+      ok: true,
+    })
+  })
+
+  it('keeps nearest dynamic params when resolving not-found route-data fallbacks', async () => {
+    routes = [
+      {
+        error: null,
+        layouts: [],
+        loading: null,
+        middlewares: [],
+        notFound: {
+          entryName: 'special__hello_world___slug____not_found',
+          filePath: '/tmp/app/hello world/[slug]/+not-found.tsx',
+        },
+        page: {
+          entryName: 'route__hello_world___slug____page',
+          filePath: '/tmp/app/hello world/[slug]/+page.tsx',
+        },
+        routePath: '/hello world/[slug]',
+        segments: [
+          { kind: 'static', value: 'hello world' },
+          { kind: 'required', value: 'slug' },
+        ],
+        server: null,
+      },
+    ]
+
+    const devFetch = createDevFetch({
+      resolvedConfig: {
+        root: '/tmp',
+      } as any,
+      devServer: {} as any,
+      deps: {
+        collectAppActions,
+        collectAppLoaders,
+        collectAppSymbols,
+        createDevModuleUrl,
+        createDevSymbolUrl,
+        createRoutes,
+      },
+      runner: {
+        async import(id: string) {
+          if (id === '/app/+server-entry.ts') {
+            return { default: userApp }
+          }
+          if (id === '/tmp/app/hello world/[slug]/+not-found.tsx') {
+            return {
+              default(props: any) {
+                return {
+                  params: props.__eclipsa_route_params,
+                  type: 'not-found',
+                }
+              },
+            }
+          }
+          if (id === 'eclipsa') {
+            return {
+              renderSSRAsync(renderDocument: () => any) {
+                const resolveNode = (value: any): any => {
+                  if (!value || typeof value !== 'object') {
+                    return value
+                  }
+                  if (typeof value.type === 'function') {
+                    return resolveNode(value.type(value.props ?? {}))
+                  }
+                  return Object.fromEntries(
+                    Object.entries(value).map(([key, entry]) => [key, resolveNode(entry)]),
+                  )
+                }
+                return {
+                  payload: {
+                    loaders: {
+                      params: {
+                        data: resolveNode(renderDocument()).params,
+                        error: null,
+                        loaded: true,
+                      },
+                    },
+                  },
+                }
+              },
+              resolvePendingLoaders: vi.fn(),
+            }
+          }
+          return {
+            default() {
+              return null
+            },
+          }
+        },
+      } as any,
+      ssrEnv: {} as any,
+    })
+
+    const response = await devFetch.fetch(
+      new Request(
+        'http://localhost/__eclipsa/route-data?href=http%3A%2F%2Flocalhost%2Fhello%2520world%2Fada%2Fmissing',
+      ),
+    )
+
+    expect(response?.status).toBe(200)
+    await expect(response?.json()).resolves.toEqual({
+      finalHref: 'http://localhost/hello%20world/ada/missing',
+      finalPathname: '/hello%20world/ada/missing',
+      kind: 'not-found',
+      loaders: {
+        params: {
+          data: {
+            slug: 'ada',
+          },
+          error: null,
+          loaded: true,
+        },
+      },
+      ok: true,
+    })
+  })
+
+  it('returns document fallback when route-data loader rendering throws notFound without a special route', async () => {
+    const devFetch = createDevFetch({
+      resolvedConfig: {
+        root: '/tmp',
+      } as any,
+      devServer: {} as any,
+      deps: {
+        collectAppActions,
+        collectAppLoaders,
+        collectAppSymbols,
+        createDevModuleUrl,
+        createDevSymbolUrl,
+        createRoutes,
+      },
+      runner: {
+        async import(id: string) {
+          if (id === '/app/+server-entry.ts') {
+            return { default: userApp }
+          }
+          if (id === '/tmp/app/+page.tsx') {
+            return {
+              default() {
+                return null
+              },
+            }
+          }
+          if (id === 'eclipsa') {
+            return {
+              renderSSRAsync: async () => {
+                throw {
+                  __eclipsa_not_found__: true,
+                }
+              },
+              resolvePendingLoaders: vi.fn(),
+            }
+          }
+          return {
+            default(props: any) {
+              return props ?? null
+            },
+          }
+        },
+      } as any,
+      ssrEnv: {} as any,
+    })
+
+    const response = await devFetch.fetch(
+      new Request(
+        'http://127.0.0.1:4173/__eclipsa/route-data?href=http%3A%2F%2F127.0.0.1%3A4173%2F',
+      ),
+    )
+
+    expect(response?.status).toBe(200)
+    await expect(response?.json()).resolves.toEqual({
+      document: true,
+      ok: false,
+    })
+  })
+
   it('logs route render failures with a fixed stack before returning a 500 response', async () => {
     const error = new Error('boom')
     const ssrFixStacktrace = vi.fn()
diff --git a/packages/eclipsa/vite/dev-app/mod.ts b/packages/eclipsa/vite/dev-app/mod.ts
index f3902e6..1c28745 100644
--- a/packages/eclipsa/vite/dev-app/mod.ts
+++ b/packages/eclipsa/vite/dev-app/mod.ts
@@ -2,19 +2,37 @@ import { Hono, type Context } from 'hono'
 import type { MiddlewareHandler, Next } from 'hono/types'
 import type { DevEnvironment, ResolvedConfig, ViteDevServer } from 'vite'
 import type { ModuleRunner } from 'vite/module-runner'
+import * as fs from 'node:fs/promises'
 import {
+  ROUTE_DATA_ENDPOINT,
+  ROUTE_DATA_REQUEST_HEADER,
   ROUTE_MANIFEST_ELEMENT_ID,
   ROUTE_PREFLIGHT_ENDPOINT,
   ROUTE_PREFLIGHT_REQUEST_HEADER,
+  ROUTE_RPC_URL_HEADER,
   type RouteParams,
 } from '../../core/router-shared.ts'
+import { applyActionCsrfCookie, ensureActionCsrfToken } from '../../core/action-csrf.ts'
 import type { SSRRootProps } from '../../core/types.ts'
+import {
+  APP_HOOKS_ELEMENT_ID,
+  attachRequestFetch,
+  createRequestFetch,
+  markPublicError,
+  resolveReroute,
+  runHandleError,
+  type AppContext,
+  type AppHooksModule,
+  type ServerHooksModule,
+  withServerRequestContext,
+} from '../../core/hooks.ts'
 import { Fragment, jsxDEV } from '../../jsx/jsx-dev-runtime.ts'
 import {
   composeRouteMetadata,
   renderRouteMetadataHead,
   type RouteMetadataExport,
 } from '../../core/metadata.ts'
+import { primeLocationState } from '../../core/runtime.ts'
 import {
   createDevModuleUrl,
   createRouteManifest,
@@ -28,10 +46,13 @@ import {
   collectAppActions,
   collectAppLoaders,
   collectAppSymbols,
+  collectReachableAnalyzableFiles,
   createDevSymbolUrl,
+  primeCompilerCache,
 } from '../compiler.ts'
 
 const ROUTE_PARAMS_PROP = '__eclipsa_route_params'
+const ROUTE_ERROR_PROP = '__eclipsa_route_error'
 interface DevAppDeps {
   collectAppActions(root: string): Promise<{ id: string; filePath: string }[]>
   collectAppLoaders(root: string): Promise<{ id: string; filePath: string }[]>
@@ -54,6 +75,31 @@ export interface DevFetchController {
   invalidate(): void
 }
 
+const fileExists = async (filePath: string) => {
+  try {
+    await fs.access(filePath)
+    return true
+  } catch {
+    return false
+  }
+}
+
+const getRequestUrl = (request: Request) => {
+  const url = new URL(request.url)
+  const host = request.headers.get('x-forwarded-host') ?? request.headers.get('host')
+  const proto = request.headers.get('x-forwarded-proto')
+  if (host) {
+    url.host = host
+  }
+  if (proto) {
+    url.protocol = `${proto}:`
+  }
+  return url
+}
+
+const createInternalRouteRequestUrl = (request: Request, targetUrl: URL) =>
+  new URL(`${targetUrl.pathname}${targetUrl.search}`, request.url).href
+
 const toAppRelativePath = (root: string, filePath: string) => {
   const relativePath = path.relative(path.join(root, 'app'), filePath)
   if (relativePath.startsWith('..') || path.isAbsolute(relativePath)) {
@@ -82,9 +128,57 @@ export const shouldInvalidateDevApp = (
 
 const RESUME_PAYLOAD_PLACEHOLDER = '__ECLIPSA_RESUME_PAYLOAD__'
 const ROUTE_MANIFEST_PLACEHOLDER = '__ECLIPSA_ROUTE_MANIFEST__'
+const APP_HOOKS_PLACEHOLDER = '__ECLIPSA_APP_HOOKS__'
+
+interface RouteDataResponse {
+  finalHref: string
+  finalPathname: string
+  kind: 'page' | 'not-found'
+  loaders: Record<string, unknown>
+  ok: true
+}
+
+interface RouteServerAccessEntry {
+  actionIds: Set<string>
+  loaderIds: Set<string>
+  route: RouteEntry
+}
 
 const replaceHeadPlaceholder = (html: string, placeholder: string, value: string) =>
-  html.replace(placeholder, value)
+  html.replaceAll(placeholder, value)
+
+const replaceResumePayloadPlaceholderValue = (
+  value: unknown,
+  replacements: Record<string, string>,
+): unknown => {
+  if (typeof value === 'string') {
+    return replacements[value] ?? value
+  }
+  if (Array.isArray(value)) {
+    let changed = false
+    const next = value.map((entry) => {
+      const replaced = replaceResumePayloadPlaceholderValue(entry, replacements)
+      if (replaced !== entry) {
+        changed = true
+      }
+      return replaced
+    })
+    return changed ? next : value
+  }
+  if (!value || typeof value !== 'object') {
+    return value
+  }
+  let changed = false
+  const next: Record<string, unknown> = {}
+  for (const [key, entry] of Object.entries(value)) {
+    const replaced = replaceResumePayloadPlaceholderValue(entry, replacements)
+    if (replaced !== entry) {
+      changed = true
+    }
+    next[key] = replaced
+  }
+  return changed ? next : value
+}
 
 const splitHtmlForStreaming = (html: string) => {
   const bodyCloseIndex = html.lastIndexOf('</body>')
@@ -107,10 +201,59 @@ const splitHtmlForStreaming = (html: string) => {
   }
 }
 
+const toIdsByFilePath = (entries: ReadonlyArray<{ filePath: string; id: string }>) => {
+  const idsByFilePath = new Map<string, string[]>()
+  for (const entry of entries) {
+    const existing = idsByFilePath.get(entry.filePath)
+    if (existing) {
+      existing.push(entry.id)
+      continue
+    }
+    idsByFilePath.set(entry.filePath, [entry.id])
+  }
+  return idsByFilePath
+}
+
+const getRouteReachableEntryFiles = (route: RouteEntry) =>
+  [
+    route.error?.filePath,
+    ...route.layouts.map((layout) => layout.filePath),
+    route.loading?.filePath,
+    route.notFound?.filePath,
+    route.page?.filePath,
+  ].filter((filePath): filePath is string => typeof filePath === 'string')
+
+const createRouteServerAccessEntries = async (
+  routes: readonly RouteEntry[],
+  actions: ReadonlyArray<{ filePath: string; id: string }>,
+  loaders: ReadonlyArray<{ filePath: string; id: string }>,
+) => {
+  const actionIdsByFilePath = toIdsByFilePath(actions)
+  const loaderIdsByFilePath = toIdsByFilePath(loaders)
+
+  return await Promise.all(
+    routes.map(async (route) => {
+      const reachableFiles = await collectReachableAnalyzableFiles(
+        getRouteReachableEntryFiles(route),
+      )
+      return {
+        actionIds: new Set(
+          reachableFiles.flatMap((filePath) => actionIdsByFilePath.get(filePath) ?? []),
+        ),
+        loaderIds: new Set(
+          reachableFiles.flatMap((filePath) => loaderIdsByFilePath.get(filePath) ?? []),
+        ),
+        route,
+      } satisfies RouteServerAccessEntry
+    }),
+  )
+}
+
 const ROUTE_SLOT_ROUTE_KEY = Symbol.for('eclipsa.route-slot-route')
 
 const createRouteSlot = (
   route: {
+    error?: unknown
     layouts: Array<{ renderer: (props: unknown) => unknown }>
     page: { renderer: (props: unknown) => unknown }
     params: RouteParams
@@ -150,12 +293,21 @@ const createRouteElement = (
   params: RouteParams,
   Page: (props: unknown) => unknown,
   Layouts: Array<(props: unknown) => unknown>,
+  error?: unknown,
 ): any => {
   if (Layouts.length === 0) {
-    return jsxDEV(Page as any, createRouteProps(params, {}), null, false, {})
+    const nextProps = createRouteProps(params, {})
+    Object.defineProperty(nextProps, ROUTE_ERROR_PROP, {
+      configurable: true,
+      enumerable: false,
+      value: error,
+      writable: true,
+    })
+    return jsxDEV(Page as any, nextProps, null, false, {})
   }
 
   const route = {
+    error,
     layouts: Layouts.map((renderer) => ({
       renderer,
     })),
@@ -168,21 +320,31 @@ const createRouteElement = (
   let children: unknown = null
   for (let index = Layouts.length - 1; index >= 0; index -= 1) {
     const Layout = Layouts[index]!
-    children = jsxDEV(
-      Layout as any,
-      createRouteProps(params, {
-        children: createRouteSlot(route, index + 1),
-      }),
-      null,
-      false,
-      {},
-    )
+    const nextProps = createRouteProps(params, {
+      children: createRouteSlot(route, index + 1),
+    })
+    Object.defineProperty(nextProps, ROUTE_ERROR_PROP, {
+      configurable: true,
+      enumerable: false,
+      value: error,
+      writable: true,
+    })
+    children = jsxDEV(Layout as any, nextProps, null, false, {})
   }
   return children
 }
 
 const scoreSpecialRoute = (route: RouteEntry, pathname: string) => {
-  const pathnameSegments = normalizeRoutePath(pathname).split('/').filter(Boolean)
+  const pathnameSegments = normalizeRoutePath(pathname)
+    .split('/')
+    .filter(Boolean)
+    .map((segment) => {
+      try {
+        return decodeURIComponent(segment)
+      } catch {
+        return segment
+      }
+    })
   let score = 0
   for (
     let index = 0;
@@ -211,11 +373,21 @@ const findSpecialRoute = (
   pathname: string,
   kind: 'error' | 'notFound',
 ): { params: RouteParams; route: RouteEntry } | null => {
-  const matched = matchRoute(routes, pathname)
+  const normalizedPath = normalizeRoutePath(pathname)
+  const matched = matchRoute(routes, normalizedPath)
   if (matched?.route[kind]) {
     return matched
   }
 
+  const rawPathSegments = normalizedPath.split('/').filter(Boolean)
+  for (let length = rawPathSegments.length - 1; length >= 0; length -= 1) {
+    const candidatePath = length === 0 ? '/' : `/${rawPathSegments.slice(0, length).join('/')}`
+    const candidate = matchRoute(routes, candidatePath)
+    if (candidate?.route[kind]) {
+      return candidate
+    }
+  }
+
   let best: { params: RouteParams; route: RouteEntry } | null = null
   let bestScore = -1
   for (const route of routes) {
@@ -256,6 +428,39 @@ const logDevServerError = (devServer: ViteDevServer, error: unknown) => {
   console.error(error)
 }
 
+const toPublicErrorValue = async (
+  devServer: ViteDevServer,
+  hooks: ServerHooksModule,
+  c: AppContext,
+  error: unknown,
+  event: Parameters<typeof runHandleError>[1]['event'],
+) => {
+  const publicError = await runHandleError(
+    {
+      handleError: hooks.handleError,
+    },
+    {
+      context: c,
+      error,
+      event,
+    },
+  )
+  if (!isNotFoundError(error)) {
+    logDevServerError(devServer, error)
+  }
+  return markPublicError(error, publicError)
+}
+
+const loadOptionalHookModule = async <T extends object>(
+  runner: ModuleRunner,
+  filePath: string,
+): Promise<Partial<T>> => {
+  if (!(await fileExists(filePath))) {
+    return {}
+  }
+  return (await runner.import(filePath)) as Partial<T>
+}
+
 const isRedirectResponse = (
   response: unknown,
 ): response is { headers: { get(name: string): string | null }; status: number } =>
@@ -286,6 +491,10 @@ const createDevApp = async (init: DevAppInit) => {
   const allSymbols = await deps.collectAppSymbols(init.resolvedConfig.root)
   const actionModules = new Map(actions.map((action) => [action.id, action.filePath]))
   const loaderModules = new Map(loaders.map((loader) => [loader.id, loader.filePath]))
+  const routeServerAccessEntries = await createRouteServerAccessEntries(routes, actions, loaders)
+  const routeServerAccessByRoute = new Map(
+    routeServerAccessEntries.map((entry) => [entry.route, entry] as const),
+  )
   const symbolUrls = Object.fromEntries(
     allSymbols.map((symbol) => [
       symbol.id,
@@ -295,6 +504,106 @@ const createDevApp = async (init: DevAppInit) => {
   const routeManifest = createRouteManifest(routes, (entry) =>
     deps.createDevModuleUrl(init.resolvedConfig.root, entry),
   )
+  const appHooksPath = path.join(init.resolvedConfig.root, 'app/+hooks.ts')
+  const serverHooksPath = path.join(init.resolvedConfig.root, 'app/+hooks.server.ts')
+  const appHooks = (await loadOptionalHookModule<AppHooksModule>(
+    init.runner,
+    appHooksPath,
+  )) as AppHooksModule
+  const serverHooks = (await loadOptionalHookModule<ServerHooksModule>(
+    init.runner,
+    serverHooksPath,
+  )) as ServerHooksModule
+  const appHooksManifest = {
+    client: (await fileExists(appHooksPath)) ? '/app/+hooks.ts' : null,
+  }
+
+  await serverHooks.init?.()
+
+  const prepareRequestContext = <E extends Context>(c: E) => {
+    attachRequestFetch(
+      c as unknown as AppContext,
+      createRequestFetch(c as unknown as AppContext, serverHooks.handleFetch),
+    )
+    return c as unknown as AppContext
+  }
+
+  const reroutePathname = (request: Request | null, pathname: string, baseUrl: string) =>
+    normalizeRoutePath(resolveReroute(appHooks.reroute, request, pathname, baseUrl))
+
+  const getRouteServerAccess = (route: RouteEntry) =>
+    routeServerAccessByRoute.get(route) ?? {
+      actionIds: new Set<string>(),
+      loaderIds: new Set<string>(),
+      route,
+    }
+
+  const resolveRouteForCurrentUrl = (request: Request | null, currentUrl: URL) => {
+    const resolvedPathname = reroutePathname(
+      request,
+      normalizeRoutePath(currentUrl.pathname),
+      currentUrl.href,
+    )
+    const match = matchRoute(routes, resolvedPathname)
+    if (match?.route.page) {
+      return match
+    }
+    const fallback = findSpecialRoute(routes, resolvedPathname, 'notFound')
+    if (fallback?.route.notFound) {
+      return fallback
+    }
+    return null
+  }
+
+  const getRpcCurrentRoute = (requestContext: AppContext) => {
+    const requestUrl = getRequestUrl(requestContext.req.raw)
+    const routeUrlHeader = requestContext.req.header(ROUTE_RPC_URL_HEADER)
+    if (!routeUrlHeader) {
+      return null
+    }
+    let currentUrl: URL
+    try {
+      currentUrl = new URL(routeUrlHeader, requestUrl)
+    } catch {
+      return null
+    }
+    if (currentUrl.origin !== requestUrl.origin) {
+      return null
+    }
+    return resolveRouteForCurrentUrl(requestContext.req.raw, currentUrl)
+  }
+
+  const resolveRequest = async <E extends Context>(
+    c: E,
+    handler: (requestContext: AppContext) => Promise<Response>,
+  ) => {
+    const requestContext = prepareRequestContext(c)
+    const execute = (nextContext = requestContext) =>
+      withServerRequestContext(
+        nextContext,
+        {
+          handleError: serverHooks.handleError,
+          transport: appHooks.transport,
+        },
+        () => handler(nextContext),
+      )
+
+    if (!serverHooks.handle) {
+      return execute(requestContext)
+    }
+
+    return withServerRequestContext(
+      requestContext,
+      {
+        handleError: serverHooks.handleError,
+        transport: appHooks.transport,
+      },
+      () =>
+        serverHooks.handle!(requestContext, (nextContext) =>
+          execute(nextContext ?? requestContext),
+        ),
+    )
+  }
 
   const loadRouteMiddlewares = async (route: RouteEntry): Promise<MiddlewareHandler[]> =>
     await Promise.all(
@@ -311,7 +620,7 @@ const createDevApp = async (init: DevAppInit) => {
 
   const composeRouteMiddlewares = async <T>(
     route: RouteEntry,
-    c: Context,
+    c: AppContext,
     params: RouteParams,
     handler: () => Promise<T>,
   ): Promise<T | Response> => {
@@ -353,11 +662,11 @@ const createDevApp = async (init: DevAppInit) => {
     return null
   }
 
-  const invokeRouteServer = async (filePath: string, c: Context, params: RouteParams) => {
+  const invokeRouteServer = async (filePath: string, c: AppContext, params: RouteParams) => {
     applyRequestParams(c, params)
     const mod = await init.runner.import(filePath)
     const methodHandler = mod[c.req.method] as
-      | ((context: Context) => Response | Promise<Response>)
+      | ((context: AppContext) => Response | Promise<Response>)
       | undefined
     if (typeof methodHandler === 'function') {
       return methodHandler(c)
@@ -375,14 +684,17 @@ const createDevApp = async (init: DevAppInit) => {
     route: RouteEntry,
     pathname: string,
     params: RouteParams,
-    c: Context,
+    c: AppContext,
     modulePath: string,
     status = 200,
     options?: {
       prepare?: (container: any) => void | Promise<void>
+      routeError?: unknown
     },
   ) => {
+    ensureActionCsrfToken(c)
     const [
+      _primedModules,
       modules,
       { default: SSRRoot },
       {
@@ -394,6 +706,16 @@ const createDevApp = async (init: DevAppInit) => {
         RESUME_FINAL_STATE_ELEMENT_ID,
       },
     ] = await Promise.all([
+      Promise.all([
+        fileExists(modulePath).then((exists) =>
+          exists ? primeCompilerCache(modulePath) : undefined,
+        ),
+        ...route.layouts.map((layout) =>
+          fileExists(layout.filePath).then((exists) =>
+            exists ? primeCompilerCache(layout.filePath) : undefined,
+          ),
+        ),
+      ]),
       Promise.all([
         init.runner.import(modulePath),
         ...route.layouts.map((layout) => init.runner.import(layout.filePath)),
@@ -407,126 +729,172 @@ const createDevApp = async (init: DevAppInit) => {
     }>
     const { default: Page } = pageModule
     const Layouts = layoutModules.map((module) => module.default)
+    const serializeAppResumePayload = (payload: unknown) =>
+      serializeResumePayload(
+        replaceResumePayloadPlaceholderValue(payload, {
+          [ROUTE_MANIFEST_PLACEHOLDER]: JSON.stringify(routeManifest),
+          [APP_HOOKS_PLACEHOLDER]: JSON.stringify(appHooksManifest),
+        }) as Parameters<typeof serializeResumePayload>[0],
+      )
     const metadata = composeRouteMetadata(
       [...layoutModules.map((module) => module.metadata ?? null), pageModule.metadata ?? null],
       {
         params,
-        url: new URL(c.req.url),
+        url: getRequestUrl(c.req.raw),
       },
     )
 
-    const document = SSRRoot({
-      children: createRouteElement(pathname, params, Page, Layouts) as SSRRootProps['children'],
-      head: {
-        type: Fragment,
-        isStatic: true,
-        props: {
-          children: [
-            ...renderRouteMetadataHead(metadata),
-            {
-              type: 'script',
-              isStatic: true,
-              props: {
-                children: RESUME_PAYLOAD_PLACEHOLDER,
-                id: 'eclipsa-resume',
-                type: 'application/eclipsa-resume+json',
+    const document = jsxDEV(
+      SSRRoot as any,
+      {
+        children: createRouteElement(
+          pathname,
+          params,
+          Page,
+          Layouts,
+          options?.routeError,
+        ) as SSRRootProps['children'],
+        head: {
+          type: Fragment,
+          isStatic: true,
+          props: {
+            children: [
+              ...renderRouteMetadataHead(metadata),
+              {
+                type: 'script',
+                isStatic: true,
+                props: {
+                  children: RESUME_PAYLOAD_PLACEHOLDER,
+                  id: 'eclipsa-resume',
+                  type: 'application/eclipsa-resume+json',
+                },
               },
-            },
-            {
-              type: 'script',
-              isStatic: true,
-              props: {
-                children: ROUTE_MANIFEST_PLACEHOLDER,
-                id: ROUTE_MANIFEST_ELEMENT_ID,
-                type: 'application/eclipsa-route-manifest+json',
+              {
+                type: 'script',
+                isStatic: true,
+                props: {
+                  children: ROUTE_MANIFEST_PLACEHOLDER,
+                  id: ROUTE_MANIFEST_ELEMENT_ID,
+                  type: 'application/eclipsa-route-manifest+json',
+                },
               },
-            },
-            {
-              type: 'script',
-              isStatic: true,
-              props: {
-                dangerouslySetInnerHTML: getStreamingResumeBootstrapScriptContent(),
+              {
+                type: 'script',
+                isStatic: true,
+                props: {
+                  children: APP_HOOKS_PLACEHOLDER,
+                  id: APP_HOOKS_ELEMENT_ID,
+                  type: 'application/eclipsa-app-hooks+json',
+                },
               },
-            },
-            {
-              type: 'script',
-              isStatic: true,
-              props: {
-                children: 'import("/@vite/client")',
+              {
+                type: 'script',
+                isStatic: true,
+                props: {
+                  dangerouslySetInnerHTML: getStreamingResumeBootstrapScriptContent(),
+                },
               },
-            },
-            {
-              type: 'script',
-              props: {
-                src: '/app/+client.dev.tsx',
-                type: 'module',
+              {
+                type: 'script',
+                isStatic: true,
+                props: {
+                  children: 'import("/@vite/client")',
+                },
               },
-            },
-          ],
+              {
+                type: 'script',
+                props: {
+                  src: '/app/+client.dev.tsx',
+                  type: 'module',
+                },
+              },
+            ],
+          },
         },
-      },
-    } satisfies SSRRootProps)
+      } satisfies SSRRootProps,
+      null,
+      false,
+      {},
+    )
 
     applyRequestParams(c, params)
     const { html, payload, chunks } = await renderSSRStream(() => document, {
-      prepare: options?.prepare,
+      prepare(container: any) {
+        primeLocationState(container, getRequestUrl(c.req.raw))
+        return options?.prepare?.(container)
+      },
       resolvePendingLoaders: async (container: any) => resolvePendingLoaders(container, c),
       symbols: symbolUrls,
     })
     const shellHtml = replaceHeadPlaceholder(
-      replaceHeadPlaceholder(html, RESUME_PAYLOAD_PLACEHOLDER, serializeResumePayload(payload)),
-      ROUTE_MANIFEST_PLACEHOLDER,
-      escapeJSONScriptText(JSON.stringify(routeManifest)),
+      replaceHeadPlaceholder(
+        replaceHeadPlaceholder(
+          html,
+          RESUME_PAYLOAD_PLACEHOLDER,
+          serializeAppResumePayload(payload),
+        ),
+        ROUTE_MANIFEST_PLACEHOLDER,
+        escapeJSONScriptText(JSON.stringify(routeManifest)),
+      ),
+      APP_HOOKS_PLACEHOLDER,
+      escapeJSONScriptText(JSON.stringify(appHooksManifest)),
     )
     const { prefix, suffix } = splitHtmlForStreaming(shellHtml)
     const encoder = new TextEncoder()
 
-    return new Response(
-      new ReadableStream<Uint8Array>({
-        start(controller) {
-          controller.enqueue(encoder.encode(prefix))
-          void (async () => {
-            let latestPayload = payload
-
-            for await (const chunk of chunks) {
-              latestPayload = chunk.payload
-              const templateId = `eclipsa-suspense-template-${chunk.boundaryId}`
-              const payloadId = `eclipsa-suspense-payload-${chunk.boundaryId}`
+    return applyActionCsrfCookie(
+      new Response(
+        new ReadableStream<Uint8Array>({
+          start(controller) {
+            controller.enqueue(encoder.encode(prefix))
+            void (async () => {
+              let latestPayload = payload
+
+              for await (const chunk of chunks) {
+                latestPayload = chunk.payload
+                const templateId = `eclipsa-suspense-template-${chunk.boundaryId}`
+                const payloadId = `eclipsa-suspense-payload-${chunk.boundaryId}`
+                controller.enqueue(
+                  encoder.encode(
+                    `<template id="${templateId}">${chunk.html}</template>` +
+                      `<script id="${payloadId}" type="application/eclipsa-resume+json">${serializeAppResumePayload(chunk.payload)}</script>` +
+                      `<script>window.__eclipsa_stream.enqueue({boundaryId:${JSON.stringify(chunk.boundaryId)},payloadScriptId:${JSON.stringify(payloadId)},templateId:${JSON.stringify(templateId)}})</script>`,
+                  ),
+                )
+              }
+
               controller.enqueue(
                 encoder.encode(
-                  `<template id="${templateId}">${chunk.html}</template>` +
-                    `<script id="${payloadId}" type="application/eclipsa-resume+json">${serializeResumePayload(chunk.payload)}</script>` +
-                    `<script>window.__eclipsa_stream.enqueue({boundaryId:${JSON.stringify(chunk.boundaryId)},payloadScriptId:${JSON.stringify(payloadId)},templateId:${JSON.stringify(templateId)}})</script>`,
+                  `<script id="${RESUME_FINAL_STATE_ELEMENT_ID}" type="application/eclipsa-resume+json">${serializeAppResumePayload(latestPayload)}</script>${suffix}`,
                 ),
               )
-            }
-
-            controller.enqueue(
-              encoder.encode(
-                `<script id="${RESUME_FINAL_STATE_ELEMENT_ID}" type="application/eclipsa-resume+json">${serializeResumePayload(latestPayload)}</script>${suffix}`,
-              ),
-            )
-            controller.close()
-          })().catch((error) => {
-            controller.error(error)
-          })
-        },
-      }),
-      { status, headers: { 'content-type': 'text/html; charset=utf-8' } },
+              controller.close()
+            })().catch((error) => {
+              controller.error(error)
+            })
+          },
+        }),
+        { status, headers: { 'content-type': 'text/html; charset=utf-8' } },
+      ),
+      c,
     )
   }
 
   const renderMatchedPage = async (
     match: { params: RouteParams; route: RouteEntry },
-    c: Context,
+    c: AppContext,
     options?: {
       prepare?: (container: any) => void | Promise<void>
+      routeError?: unknown
     },
   ) => {
+    const requestUrl = getRequestUrl(c.req.raw)
+    const requestPathname = normalizeRoutePath(requestUrl.pathname)
+    const resolvedPathname = reroutePathname(c.req.raw, requestPathname, requestUrl.href)
     try {
       return await renderRouteResponse(
         match.route,
-        normalizeRoutePath(new URL(c.req.url).pathname),
+        requestPathname,
         match.params,
         c,
         match.route.page!.filePath,
@@ -534,12 +902,10 @@ const createDevApp = async (init: DevAppInit) => {
         options,
       )
     } catch (error) {
-      if (!isNotFoundError(error)) {
-        logDevServerError(init.devServer, error)
-      }
+      const publicError = await toPublicErrorValue(init.devServer, serverHooks, c, error, 'page')
       const fallback = isNotFoundError(error)
-        ? findSpecialRoute(routes, normalizeRoutePath(new URL(c.req.url).pathname), 'notFound')
-        : findSpecialRoute(routes, normalizeRoutePath(new URL(c.req.url).pathname), 'error')
+        ? findSpecialRoute(routes, resolvedPathname, 'notFound')
+        : findSpecialRoute(routes, resolvedPathname, 'error')
       const module = fallback?.route[isNotFoundError(error) ? 'notFound' : 'error']
       if (!fallback || !module) {
         return c.text(
@@ -549,45 +915,163 @@ const createDevApp = async (init: DevAppInit) => {
       }
       return renderRouteResponse(
         fallback.route,
-        normalizeRoutePath(new URL(c.req.url).pathname),
+        requestPathname,
         fallback.params,
         c,
         module.filePath,
         isNotFoundError(error) ? 404 : 500,
-        options,
+        {
+          ...options,
+          routeError: publicError,
+        },
       )
     }
   }
 
-  const resolveRoutePreflight = async (href: string, c: Context) => {
-    const requestUrl = new URL(c.req.url)
+  const renderRouteDataResponse = async (
+    route: RouteEntry,
+    pathname: string,
+    params: RouteParams,
+    c: AppContext,
+    modulePath: string,
+    kind: RouteDataResponse['kind'],
+  ) => {
+    const [_primedModules, modules, { renderSSRAsync, resolvePendingLoaders }] = await Promise.all([
+      Promise.all([
+        fileExists(modulePath).then((exists) =>
+          exists ? primeCompilerCache(modulePath) : undefined,
+        ),
+        ...route.layouts.map((layout) =>
+          fileExists(layout.filePath).then((exists) =>
+            exists ? primeCompilerCache(layout.filePath) : undefined,
+          ),
+        ),
+      ]),
+      Promise.all([
+        init.runner.import(modulePath),
+        ...route.layouts.map((layout) => init.runner.import(layout.filePath)),
+      ]),
+      init.runner.import('eclipsa'),
+    ])
+    const [pageModule, ...layoutModules] = modules as Array<{
+      default: (props: unknown) => unknown
+    }>
+    const { default: Page } = pageModule
+    const Layouts = layoutModules.map((module) => module.default)
+
+    applyRequestParams(c, params)
+    const { payload } = await renderSSRAsync(
+      () => createRouteElement(pathname, params, Page, Layouts, undefined),
+      {
+        prepare(container: any) {
+          primeLocationState(container, getRequestUrl(c.req.raw))
+        },
+        resolvePendingLoaders: async (container: any) => resolvePendingLoaders(container, c),
+        symbols: symbolUrls,
+      },
+    )
+
+    return c.json({
+      finalHref: getRequestUrl(c.req.raw).href,
+      finalPathname: pathname,
+      kind,
+      loaders: payload.loaders,
+      ok: true,
+    } satisfies RouteDataResponse)
+  }
+
+  const renderRouteData = async (
+    route: RouteEntry,
+    pathname: string,
+    params: RouteParams,
+    c: AppContext,
+    modulePath: string,
+    kind: RouteDataResponse['kind'],
+  ) => {
+    const requestUrl = getRequestUrl(c.req.raw)
+    const requestPathname = normalizeRoutePath(requestUrl.pathname)
+    const resolvedPathname = reroutePathname(c.req.raw, requestPathname, requestUrl.href)
+    try {
+      return await renderRouteDataResponse(route, pathname, params, c, modulePath, kind)
+    } catch (error) {
+      if (!isNotFoundError(error)) {
+        return c.json({ document: true, ok: false })
+      }
+
+      const fallback = findSpecialRoute(routes, resolvedPathname, 'notFound')
+      if (!fallback?.route.notFound) {
+        return c.json({ document: true, ok: false })
+      }
+
+      try {
+        return await renderRouteDataResponse(
+          fallback.route,
+          requestPathname,
+          fallback.params,
+          c,
+          fallback.route.notFound.filePath,
+          'not-found',
+        )
+      } catch {
+        return c.json({ document: true, ok: false })
+      }
+    }
+  }
+
+  const resolveRouteData = async (href: string, c: AppContext) => {
+    const requestUrl = getRequestUrl(c.req.raw)
+    const targetUrl = new URL(href, requestUrl)
+    if (targetUrl.origin !== requestUrl.origin) {
+      return c.json({ document: true, ok: false })
+    }
+    const headers = new Headers(c.req.raw.headers)
+    headers.set(ROUTE_DATA_REQUEST_HEADER, '1')
+    const response = await app.fetch(
+      new Request(createInternalRouteRequestUrl(c.req.raw, targetUrl), {
+        headers,
+        method: 'GET',
+        redirect: 'manual',
+      }),
+    )
+    if (response.status >= 200 && response.status < 300) {
+      return response
+    }
+    if (isRedirectResponse(response)) {
+      return c.json({
+        location: new URL(response.headers.get('location')!, requestUrl).href,
+        ok: false,
+      })
+    }
+    return c.json({ document: true, ok: false })
+  }
+
+  const resolveRoutePreflight = async (href: string, c: AppContext) => {
+    const requestUrl = getRequestUrl(c.req.raw)
     const targetUrl = new URL(href, requestUrl)
     if (targetUrl.origin !== requestUrl.origin) {
       return c.json({ document: true, ok: false })
     }
 
-    const target = resolvePreflightTarget(normalizeRoutePath(targetUrl.pathname))
+    const target = resolvePreflightTarget(
+      reroutePathname(
+        new Request(targetUrl.href),
+        normalizeRoutePath(targetUrl.pathname),
+        targetUrl.href,
+      ),
+    )
     if (!target) {
       return c.json({ ok: true })
     }
 
     const headers = new Headers(c.req.raw.headers)
     headers.set(ROUTE_PREFLIGHT_REQUEST_HEADER, '1')
-    let response: Response
-    try {
-      response = await fetch(targetUrl.href, {
+    const response = await app.fetch(
+      new Request(createInternalRouteRequestUrl(c.req.raw, targetUrl), {
         headers,
+        method: 'GET',
         redirect: 'manual',
-      })
-    } catch {
-      response = await app.fetch(
-        new Request(targetUrl.href, {
-          headers,
-          method: 'GET',
-          redirect: 'manual',
-        }),
-      )
-    }
+      }),
+    )
 
     if (response.status >= 200 && response.status < 300) {
       return c.json({ ok: true })
@@ -601,134 +1085,224 @@ const createDevApp = async (init: DevAppInit) => {
     return c.json({ document: true, ok: false })
   }
 
-  app.post('/__eclipsa/action/:id', async (c) => {
-    const [{ executeAction, hasAction }] = await Promise.all([init.runner.import('eclipsa')])
-    const id = c.req.param('id')
-    const modulePath = actionModules.get(id)
-    if (!modulePath) {
-      return c.text('Not Found', 404)
-    }
-    if (!hasAction(id)) {
-      await init.runner.import(modulePath)
+  const resolveRequestRoute = (request: Request, url: string) => {
+    const requestPathname = normalizeRoutePath(new URL(url).pathname)
+    const resolvedPathname = reroutePathname(request, requestPathname, url)
+    return {
+      match: matchRoute(routes, resolvedPathname),
+      requestPathname,
+      resolvedPathname,
     }
-    return executeAction(id, c)
-  })
+  }
 
-  app.get('/__eclipsa/loader/:id', async (c) => {
-    const [{ executeLoader, hasLoader }] = await Promise.all([init.runner.import('eclipsa')])
-    const id = c.req.param('id')
-    const modulePath = loaderModules.get(id)
-    if (!modulePath) {
-      return c.text('Not Found', 404)
-    }
-    if (!hasLoader(id)) {
-      await init.runner.import(modulePath)
-    }
-    return executeLoader(id, c)
-  })
+  app.post('/__eclipsa/action/:id', async (c) =>
+    resolveRequest(c, async (requestContext) => {
+      const { executeAction, hasAction } = await init.runner.import('eclipsa')
+      const id = requestContext.req.param('id')
+      if (!id) {
+        return requestContext.text('Not Found', 404)
+      }
+      const routeMatch = getRpcCurrentRoute(requestContext)
+      if (!routeMatch) {
+        return requestContext.text('Bad Request', 400)
+      }
+      const routeAccess = getRouteServerAccess(routeMatch.route)
+      if (!routeAccess.actionIds.has(id)) {
+        return requestContext.text('Not Found', 404)
+      }
+      const modulePath = actionModules.get(id)
+      if (!modulePath) {
+        return requestContext.text('Not Found', 404)
+      }
+      if (!hasAction(id)) {
+        await init.runner.import(modulePath)
+      }
+      return composeRouteMiddlewares(
+        routeMatch.route,
+        requestContext,
+        routeMatch.params,
+        async () => executeAction(id, requestContext),
+      ) as Promise<Response>
+    }),
+  )
 
-  app.get(ROUTE_PREFLIGHT_ENDPOINT, async (c) => {
-    const href = c.req.query('href')
-    if (!href) {
-      return c.json({ document: true, ok: false }, 400)
-    }
-    return resolveRoutePreflight(href, c)
-  })
+  app.get('/__eclipsa/loader/:id', async (c) =>
+    resolveRequest(c, async (requestContext) => {
+      const { executeLoader, hasLoader } = await init.runner.import('eclipsa')
+      const id = requestContext.req.param('id')
+      if (!id) {
+        return requestContext.text('Not Found', 404)
+      }
+      const routeMatch = getRpcCurrentRoute(requestContext)
+      if (!routeMatch) {
+        return requestContext.text('Bad Request', 400)
+      }
+      const routeAccess = getRouteServerAccess(routeMatch.route)
+      if (!routeAccess.loaderIds.has(id)) {
+        return requestContext.text('Not Found', 404)
+      }
+      const modulePath = loaderModules.get(id)
+      if (!modulePath) {
+        return requestContext.text('Not Found', 404)
+      }
+      if (!hasLoader(id)) {
+        await init.runner.import(modulePath)
+      }
+      return composeRouteMiddlewares(
+        routeMatch.route,
+        requestContext,
+        routeMatch.params,
+        async () => executeLoader(id, requestContext),
+      ) as Promise<Response>
+    }),
+  )
 
-  app.all('*', async (c) => {
-    const pathname = normalizeRoutePath(new URL(c.req.url).pathname)
-    const match = matchRoute(routes, pathname)
+  app.get(ROUTE_PREFLIGHT_ENDPOINT, async (c) =>
+    resolveRequest(c, async (requestContext) => {
+      const href = requestContext.req.query('href')
+      if (!href) {
+        return requestContext.json({ document: true, ok: false }, 400)
+      }
+      return resolveRoutePreflight(href, requestContext)
+    }),
+  )
 
-    if (!match) {
-      const fallback = findSpecialRoute(routes, pathname, 'notFound')
-      if (fallback?.route.notFound) {
-        return composeRouteMiddlewares(fallback.route, c, fallback.params, async () =>
-          c.req.header(ROUTE_PREFLIGHT_REQUEST_HEADER) === '1'
-            ? c.body(null, 204)
-            : renderRouteResponse(
-                fallback.route,
-                pathname,
-                fallback.params,
-                c,
-                fallback.route.notFound!.filePath,
-                404,
-              ),
-        )
+  app.get(ROUTE_DATA_ENDPOINT, async (c) =>
+    resolveRequest(c, async (requestContext) => {
+      const href = requestContext.req.query('href')
+      if (!href) {
+        return requestContext.json({ document: true, ok: false }, 400)
       }
-      return c.text('Not Found', 404)
-    }
+      return resolveRouteData(href, requestContext)
+    }),
+  )
 
-    if ((c.req.method === 'GET' || c.req.method === 'HEAD') && match.route.page) {
-      return composeRouteMiddlewares(match.route, c, match.params, async () =>
-        c.req.header(ROUTE_PREFLIGHT_REQUEST_HEADER) === '1'
-          ? c.body(null, 204)
-          : renderMatchedPage(match, c),
+  app.all('*', async (c) =>
+    resolveRequest(c, async (requestContext) => {
+      const { match, requestPathname, resolvedPathname } = resolveRequestRoute(
+        requestContext.req.raw,
+        requestContext.req.url,
       )
-    }
 
-    if (c.req.method === 'POST' && match.route.page) {
-      return composeRouteMiddlewares(match.route, c, match.params, async () => {
-        const [
-          {
+      if (!match) {
+        const fallback = findSpecialRoute(routes, resolvedPathname, 'notFound')
+        if (fallback?.route.notFound) {
+          return composeRouteMiddlewares(
+            fallback.route,
+            requestContext,
+            fallback.params,
+            async () =>
+              requestContext.req.header(ROUTE_PREFLIGHT_REQUEST_HEADER) === '1'
+                ? requestContext.body(null, 204)
+                : requestContext.req.header(ROUTE_DATA_REQUEST_HEADER) === '1'
+                  ? renderRouteData(
+                      fallback.route,
+                      requestPathname,
+                      fallback.params,
+                      requestContext,
+                      fallback.route.notFound!.filePath,
+                      'not-found',
+                    )
+                  : renderRouteResponse(
+                      fallback.route,
+                      requestPathname,
+                      fallback.params,
+                      requestContext,
+                      fallback.route.notFound!.filePath,
+                      404,
+                    ),
+          )
+        }
+        return requestContext.text('Not Found', 404)
+      }
+
+      if (
+        (requestContext.req.method === 'GET' || requestContext.req.method === 'HEAD') &&
+        match.route.page
+      ) {
+        const page = match.route.page
+        return composeRouteMiddlewares(match.route, requestContext, match.params, async () =>
+          requestContext.req.header(ROUTE_PREFLIGHT_REQUEST_HEADER) === '1'
+            ? requestContext.body(null, 204)
+            : requestContext.req.header(ROUTE_DATA_REQUEST_HEADER) === '1'
+              ? renderRouteData(
+                  match.route,
+                  requestPathname,
+                  match.params,
+                  requestContext,
+                  page.filePath,
+                  'page',
+                )
+              : renderMatchedPage(match, requestContext),
+        )
+      }
+
+      if (requestContext.req.method === 'POST' && match.route.page) {
+        return composeRouteMiddlewares(match.route, requestContext, match.params, async () => {
+          const {
             ACTION_CONTENT_TYPE,
-            deserializeValue,
+            deserializePublicValue,
             executeAction,
             getNormalizedActionInput,
             getActionFormSubmissionId,
             hasAction,
             primeActionState,
-          },
-        ] = await Promise.all([init.runner.import('eclipsa')])
-        const actionId = await getActionFormSubmissionId(c)
-        if (!actionId) {
-          return match.route.server
-            ? invokeRouteServer(match.route.server.filePath, c, match.params)
-            : renderMatchedPage(match, c)
-        }
-        const modulePath = actionModules.get(actionId)
-        if (!modulePath) {
-          return c.text('Not Found', 404)
-        }
-        if (!hasAction(actionId)) {
-          await init.runner.import(modulePath)
-        }
-        const input = await getNormalizedActionInput(c)
-        const response = await executeAction(actionId, c)
-        const contentType = response.headers.get('content-type') ?? ''
-        if (!contentType.startsWith(ACTION_CONTENT_TYPE)) {
-          return response
-        }
-        const body = (await response.json()) as
-          | { error: unknown; ok: false }
-          | { ok: true; value: unknown }
-        return renderMatchedPage(match, c, {
-          prepare(container) {
-            primeActionState(container, actionId, {
-              error: body.ok ? undefined : deserializeValue(body.error),
-              input,
-              result: body.ok ? deserializeValue(body.value) : undefined,
-            })
-          },
+          } = await init.runner.import('eclipsa')
+          const actionId = await getActionFormSubmissionId(requestContext)
+          if (!actionId) {
+            return match.route.server
+              ? invokeRouteServer(match.route.server.filePath, requestContext, match.params)
+              : renderMatchedPage(match, requestContext)
+          }
+          const routeAccess = getRouteServerAccess(match.route)
+          if (!routeAccess.actionIds.has(actionId)) {
+            return requestContext.text('Not Found', 404)
+          }
+          const modulePath = actionModules.get(actionId)
+          if (!modulePath) {
+            return requestContext.text('Not Found', 404)
+          }
+          if (!hasAction(actionId)) {
+            await init.runner.import(modulePath)
+          }
+          const input = await getNormalizedActionInput(requestContext)
+          const response = await executeAction(actionId, requestContext)
+          const contentType = response.headers.get('content-type') ?? ''
+          if (!contentType.startsWith(ACTION_CONTENT_TYPE)) {
+            return response
+          }
+          const body = (await response.json()) as
+            | { error: unknown; ok: false }
+            | { ok: true; value: unknown }
+          return renderMatchedPage(match, requestContext, {
+            prepare(container) {
+              primeActionState(container, actionId, {
+                error: body.ok ? undefined : deserializePublicValue(body.error as any),
+                input,
+                result: body.ok ? deserializePublicValue(body.value as any) : undefined,
+              })
+            },
+          })
         })
-      })
-    }
+      }
 
-    if (match.route.server) {
-      return composeRouteMiddlewares(match.route, c, match.params, async () =>
-        invokeRouteServer(match.route.server!.filePath, c, match.params),
-      )
-    }
+      if (match.route.server) {
+        return composeRouteMiddlewares(match.route, requestContext, match.params, async () =>
+          invokeRouteServer(match.route.server!.filePath, requestContext, match.params),
+        )
+      }
 
-    if (match.route.page) {
-      return composeRouteMiddlewares(match.route, c, match.params, async () =>
-        c.req.header(ROUTE_PREFLIGHT_REQUEST_HEADER) === '1'
-          ? c.body(null, 204)
-          : renderMatchedPage(match, c),
-      )
-    }
+      if (match.route.page) {
+        return composeRouteMiddlewares(match.route, requestContext, match.params, async () =>
+          requestContext.req.header(ROUTE_PREFLIGHT_REQUEST_HEADER) === '1'
+            ? requestContext.body(null, 204)
+            : renderMatchedPage(match, requestContext),
+        )
+      }
 
-    return c.text('Not Found', 404)
-  })
+      return requestContext.text('Not Found', 404)
+    }),
+  )
 
   return app
 }
diff --git a/packages/eclipsa/vite/mod.test.ts b/packages/eclipsa/vite/mod.test.ts
index dd2d859..b25125f 100644
--- a/packages/eclipsa/vite/mod.test.ts
+++ b/packages/eclipsa/vite/mod.test.ts
@@ -1,27 +1,29 @@
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 import type { Plugin } from 'vite'
 import { RESUME_HMR_EVENT } from '../core/resume-hmr.ts'
-import { resolveResumeHmrUpdate } from './compiler.ts'
+import { primeCompilerCache, resetCompilerCache, resolveResumeHmrUpdate } from './compiler.ts'
 import { eclipsa } from './mod.ts'
 
-const getPlugin = (): Plugin => {
+const getPlugins = (): Plugin[] => {
   const plugin = eclipsa()
   if (!Array.isArray(plugin)) {
     throw new Error('Expected eclipsa() to return a plugin array')
   }
-  const result = plugin[0] as Plugin
-  const configResolved =
-    typeof result.configResolved === 'function'
-      ? result.configResolved
-      : result.configResolved?.handler
-  configResolved?.call(
-    {} as any,
-    {
-      isProduction: false,
-      root: '/tmp',
-    } as any,
-  )
-  return result
+  const results = plugin as Plugin[]
+  for (const result of results) {
+    const configResolved =
+      typeof result.configResolved === 'function'
+        ? result.configResolved
+        : result.configResolved?.handler
+    configResolved?.call(
+      {} as any,
+      {
+        isProduction: false,
+        root: '/tmp',
+      } as any,
+    )
+  }
+  return results
 }
 
 const getHotUpdate = (plugin: Plugin) => {
@@ -32,15 +34,144 @@ const getHotUpdate = (plugin: Plugin) => {
   return hook?.handler
 }
 
+const getTransform = (plugin: Plugin) => {
+  const hook = plugin.transform
+  if (typeof hook === 'function') {
+    return hook
+  }
+  return hook?.handler
+}
+
+const getTransformedCode = (
+  result: Awaited<ReturnType<NonNullable<ReturnType<typeof getTransform>>>>,
+) => {
+  if (!result || typeof result === 'string') {
+    return null
+  }
+  return result.code ?? null
+}
+
 describe('vite plugin hotUpdate', () => {
+  beforeEach(() => {
+    resetCompilerCache()
+  })
+
+  it('transforms resumable app-local .ts hook modules in both client and ssr environments', async () => {
+    const [plugin] = getPlugins()
+    const transform = getTransform(plugin)
+    const source = `
+      import { useSignal } from "eclipsa";
+
+      export const useCounterApi = () => {
+        const count = useSignal(0);
+        const increment = () => {
+          count.value += 1;
+        };
+
+        return {
+          increment,
+        };
+      };
+    `
+
+    const clientTransformed = await transform?.call(
+      {
+        environment: {
+          name: 'client',
+        },
+      } as any,
+      source,
+      '/tmp/app/use-counter-api.ts',
+    )
+    const ssrTransformed = await transform?.call(
+      {
+        environment: {
+          name: 'ssr',
+        },
+      } as any,
+      source,
+      '/tmp/app/use-counter-api.ts',
+    )
+
+    expect(clientTransformed).toBeTruthy()
+    expect(ssrTransformed).toBeTruthy()
+    expect(clientTransformed).toMatchObject({
+      code: expect.stringContaining('__eclipsaLazy'),
+    })
+    expect(ssrTransformed).toMatchObject({
+      code: expect.stringContaining('__eclipsaLazy'),
+    })
+  })
+
+  it('leaves non-app .ts modules to Vite', async () => {
+    const [plugin] = getPlugins()
+    const transform = getTransform(plugin)
+    const transformed = await transform?.call(
+      {
+        environment: {
+          name: 'ssr',
+        },
+      } as any,
+      'export const value = 1;',
+      '/tmp/packages/eclipsa/core/action.ts',
+    )
+
+    expect(transformed).toBeUndefined()
+  })
+
+  it('routes app-local tsx test modules through plain JSX lowering', async () => {
+    const [plugin] = getPlugins()
+    const transform = getTransform(plugin)
+    const transformed = await transform?.call(
+      {
+        environment: {
+          name: 'ssr',
+        },
+      } as any,
+      'export default () => <div>probe</div>;',
+      '/tmp/app/+page.test.tsx',
+    )
+
+    expect(transformed).toMatchObject({
+      code: expect.stringContaining('from "eclipsa/jsx-dev-runtime"'),
+    })
+    expect(getTransformedCode(transformed)).not.toContain('from "eclipsa/client"')
+  })
+
+  it('routes spec files through plain JSX lowering even when they live under app', async () => {
+    const [plugin] = getPlugins()
+    const transform = getTransform(plugin)
+    const transformed = await transform?.call(
+      {
+        environment: {
+          name: 'client',
+        },
+      } as any,
+      'export default () => <div>probe</div>;',
+      '/tmp/app/example.spec.tsx',
+    )
+
+    expect(transformed).toMatchObject({
+      code: expect.stringContaining('from "eclipsa/jsx-dev-runtime"'),
+    })
+    expect(getTransformedCode(transformed)).not.toContain('from "eclipsa/client"')
+  })
+
   it('runs as a pre-transform plugin so symbol ids are derived from raw TSX', () => {
-    const plugin = getPlugin()
+    const [plugin] = getPlugins()
 
     expect(plugin.enforce).toBe('pre')
   })
 
+  it('runs HMR after other plugins so CSS generators can observe original modules', () => {
+    const [, hmrPlugin] = getPlugins()
+
+    expect(hmrPlugin.name).toBe('vite-plugin-eclipsa:hmr')
+    expect(hmrPlugin.enforce).toBe('post')
+  })
+
   it('emits source-module HMR for non-resumable tsx modules', async () => {
-    const plugin = getPlugin()
+    const [, plugin] = getPlugins()
     const hotUpdate = getHotUpdate(plugin)
     const send = vi.fn()
 
@@ -78,15 +209,153 @@ describe('vite plugin hotUpdate', () => {
   })
 
   it('preserves css hot-update modules when handling non-resumable tsx updates', async () => {
-    const plugin = getPlugin()
+    const [, plugin] = getPlugins()
     const hotUpdate = getHotUpdate(plugin)
     const send = vi.fn()
+    const tsxModule = {
+      id: '/src/non-resumable.tsx',
+      type: 'js',
+      url: '/src/non-resumable.tsx',
+    }
     const cssModule = {
       id: '/src/app/style.css',
       type: 'css',
       url: '/src/app/style.css',
     }
 
+    const result = await hotUpdate?.call(
+      {
+        environment: {
+          name: 'client',
+          hot: {
+            send,
+          },
+          moduleGraph: {
+            getModulesByFile() {
+              return new Set([tsxModule])
+            },
+          },
+        },
+      } as any,
+      {
+        file: '/tmp/non-resumable.tsx',
+        modules: [
+          {
+            type: 'js',
+            url: '/src/non-resumable.tsx',
+          },
+          cssModule,
+        ],
+        read: () => 'export const value = <div>plain</div>;',
+        server: {},
+      } as any,
+    )
+
+    expect(result).toEqual([cssModule])
+    expect(send).toHaveBeenCalledWith('update-client', {
+      url: '/src/non-resumable.tsx',
+    })
+  })
+
+  it('falls back to the app source url when a non-resumable file is rewritten atomically', async () => {
+    const [, plugin] = getPlugins()
+    const hotUpdate = getHotUpdate(plugin)
+    const send = vi.fn()
+
+    const result = await hotUpdate?.call(
+      {
+        environment: {
+          name: 'client',
+          hot: {
+            send,
+          },
+          moduleGraph: {
+            getModulesByFile() {
+              return new Set()
+            },
+          },
+        },
+      } as any,
+      {
+        file: '/tmp/app/non-resumable.tsx',
+        modules: [],
+        read: () => 'export const value = <div>after</div>;',
+        server: {},
+      } as any,
+    )
+
+    expect(result).toEqual([])
+    expect(send).toHaveBeenCalledWith('update-client', {
+      url: '/app/non-resumable.tsx',
+    })
+  })
+
+  it('preserves css requests even when Vite classifies the stylesheet module as js', async () => {
+    const [, plugin] = getPlugins()
+    const hotUpdate = getHotUpdate(plugin)
+    const send = vi.fn()
+    const cssLikeJsModule = {
+      file: '/src/app/style.css',
+      id: '/src/app/style.css',
+      type: 'js',
+      url: '/src/app/style.css',
+    }
+    const tsxModule = {
+      id: '/src/non-resumable.tsx',
+      type: 'js',
+      url: '/src/non-resumable.tsx',
+    }
+
+    const result = await hotUpdate?.call(
+      {
+        environment: {
+          name: 'client',
+          hot: {
+            send,
+          },
+          moduleGraph: {
+            getModulesByFile() {
+              return new Set([tsxModule])
+            },
+          },
+        },
+      } as any,
+      {
+        file: '/tmp/non-resumable.tsx',
+        modules: [
+          {
+            type: 'js',
+            url: '/src/non-resumable.tsx',
+          },
+          cssLikeJsModule,
+        ],
+        read: () => 'export const value = <div>plain</div>;',
+        server: {},
+      } as any,
+    )
+
+    expect(result).toEqual([cssLikeJsModule])
+    expect(send).toHaveBeenCalledWith('update-client', {
+      url: '/src/non-resumable.tsx',
+    })
+  })
+
+  it('collects css-like modules from the module graph when the changed tsx module has none directly', async () => {
+    const [, plugin] = getPlugins()
+    const hotUpdate = getHotUpdate(plugin)
+    const send = vi.fn()
+    const cssLikeJsModule = {
+      file: '/src/app/style.css',
+      id: '/src/app/style.css',
+      type: 'js',
+      url: '/src/app/style.css',
+    }
+    const tsxModule = {
+      id: '/src/non-resumable.tsx',
+      type: 'js',
+      url: '/src/non-resumable.tsx',
+    }
+
     const result = await hotUpdate?.call(
       {
         environment: {
@@ -103,6 +372,10 @@ describe('vite plugin hotUpdate', () => {
                 },
               ])
             },
+            idToModuleMap: new Map([
+              ['/src/non-resumable.tsx', tsxModule],
+              ['/src/app/style.css', cssLikeJsModule],
+            ]),
           },
         },
       } as any,
@@ -113,37 +386,36 @@ describe('vite plugin hotUpdate', () => {
             type: 'js',
             url: '/src/non-resumable.tsx',
           },
-          cssModule,
         ],
         read: () => 'export const value = <div>plain</div>;',
         server: {},
       } as any,
     )
 
-    expect(result).toEqual([cssModule])
+    expect(result).toEqual([cssLikeJsModule])
     expect(send).toHaveBeenCalledWith('update-client', {
       url: '/src/non-resumable.tsx',
     })
   })
 
   it('emits resumable HMR payloads for resumable tsx modules', async () => {
-    const plugin = getPlugin()
+    const [, plugin] = getPlugins()
     const hotUpdate = getHotUpdate(plugin)
     const send = vi.fn()
     const filePath = '/tmp/resumable-page.tsx'
     const previousSource = `
-      import { component$, useSignal } from "eclipsa";
-      export default component$(() => {
+      import { useSignal } from "eclipsa";
+      export default () => {
         const count = useSignal(0);
-        return <button onClick$={() => { count.value += 1; }}>{count.value}</button>;
-      });
+        return <button onClick={() => { count.value += 1; }}>{count.value}</button>;
+      };
     `
     const nextSource = `
-      import { component$, useSignal } from "eclipsa";
-      export default component$(() => {
+      import { useSignal } from "eclipsa";
+      export default () => {
         const count = useSignal(0);
-        return <button onClick$={() => { count.value += 2; }}>{count.value}</button>;
-      });
+        return <button onClick={() => { count.value += 2; }}>{count.value}</button>;
+      };
     `
 
     await resolveResumeHmrUpdate({
@@ -163,7 +435,7 @@ describe('vite plugin hotUpdate', () => {
       } as any,
       {
         file: filePath,
-        modules: [],
+        modules: [{ url: '/tmp/image-page.tsx' }],
         read: () => nextSource,
         server: {},
       } as any,
@@ -178,25 +450,135 @@ describe('vite plugin hotUpdate', () => {
     })
   })
 
-  it('suppresses SSR full reloads without consuming the client resumable diff', async () => {
-    const plugin = getPlugin()
+  it('does not source-sniff route component imports when emitting resumable payloads', async () => {
+    const [, plugin] = getPlugins()
+    const hotUpdate = getHotUpdate(plugin)
+    const send = vi.fn()
+    const filePath = '/tmp/image-page.tsx'
+    const previousSource = `
+      import { Image } from "@eclipsa/image";
+      export default () => <main><p>before</p><Image alt="demo" src="/demo.png" /></main>;
+    `
+    const nextSource = `
+      import { Image } from "@eclipsa/image";
+      export default () => <main><p>after</p><Image alt="demo" src="/demo.png" /></main>;
+    `
+
+    await resolveResumeHmrUpdate({
+      filePath,
+      root: '/tmp',
+      source: previousSource,
+    })
+
+    const result = await hotUpdate?.call(
+      {
+        environment: {
+          name: 'client',
+          hot: {
+            send,
+          },
+        },
+      } as any,
+      {
+        file: filePath,
+        modules: [],
+        read: () => nextSource,
+        server: {},
+      } as any,
+    )
+
+    expect(result).toEqual([])
+    expect(send).toHaveBeenCalledTimes(1)
+    expect(send.mock.calls[0]?.[0]).toBe(RESUME_HMR_EVENT)
+    expect(send.mock.calls[0]?.[1]).toMatchObject({
+      fileUrl: '/image-page.tsx',
+      fullReload: false,
+    })
+  })
+
+  it('keeps client resumable updates on the environment hot channel even when ws is available', async () => {
+    const [, plugin] = getPlugins()
+    const hotUpdate = getHotUpdate(plugin)
+    const send = vi.fn()
+    const wsSend = vi.fn()
+    const filePath = '/tmp/client-resumable-page.tsx'
+    const previousSource = `
+      import { useSignal } from "eclipsa";
+      export default () => {
+        const count = useSignal(0);
+        return <button>{count.value}</button>;
+      };
+    `
+    const nextSource = `
+      import { useSignal } from "eclipsa";
+      export default () => {
+        const count = useSignal(0);
+        return <button><span>{count.value}</span></button>;
+      };
+    `
+
+    await resolveResumeHmrUpdate({
+      filePath,
+      root: '/tmp',
+      source: previousSource,
+    })
+
+    const result = await hotUpdate?.call(
+      {
+        environment: {
+          name: 'client',
+          hot: {
+            send,
+          },
+        },
+      } as any,
+      {
+        file: filePath,
+        modules: [
+          {
+            type: 'js',
+            url: '/src/client-resumable-page.tsx',
+          },
+        ],
+        read: () => nextSource,
+        server: {
+          ws: {
+            send: wsSend,
+          },
+        },
+      } as any,
+    )
+
+    expect(result).toEqual([])
+    expect(send).toHaveBeenCalledTimes(1)
+    expect(send.mock.calls[0]?.[0]).toBe(RESUME_HMR_EVENT)
+    expect(send.mock.calls[0]?.[1]).toMatchObject({
+      fileUrl: '/client-resumable-page.tsx',
+      fullReload: false,
+    })
+    expect(wsSend).not.toHaveBeenCalled()
+  })
+
+  it('defers resumable SSR payloads to the client when a client module graph entry exists', async () => {
+    const [, plugin] = getPlugins()
     const hotUpdate = getHotUpdate(plugin)
     const filePath = '/tmp/ssr-resumable-page.tsx'
     const previousSource = `
-      import { component$, useSignal } from "eclipsa";
-      export default component$(() => {
+      import { useSignal } from "eclipsa";
+      export default () => {
         const count = useSignal(0);
-        return <button onClick$={() => { count.value += 1; }}>{count.value}</button>;
-      });
+        return <button onClick={() => { count.value += 1; }}>{count.value}</button>;
+      };
     `
     const nextSource = `
-      import { component$, useSignal } from "eclipsa";
-      export default component$(() => {
+      import { useSignal } from "eclipsa";
+      export default () => {
         const count = useSignal(0);
-        return <button onClick$={() => { count.value += 2; }}>{count.value}</button>;
-      });
+        return <button onClick={() => { count.value += 2; }}>{count.value}</button>;
+      };
     `
     const send = vi.fn()
+    const wsSend = vi.fn()
 
     await resolveResumeHmrUpdate({
       filePath,
@@ -222,10 +604,31 @@ describe('vite plugin hotUpdate', () => {
           },
         ],
         read: () => nextSource,
-        server: {},
+        server: {
+          environments: {
+            client: {
+              moduleGraph: {
+                getModulesByFile() {
+                  return new Set([
+                    {
+                      url: '/src/ssr-resumable-page.tsx',
+                    },
+                  ])
+                },
+              },
+            },
+          },
+          ws: {
+            send: wsSend,
+          },
+        },
       } as any,
     )
 
+    expect(ssrResult).toEqual([])
+    expect(send).not.toHaveBeenCalled()
+    expect(wsSend).not.toHaveBeenCalled()
+
     const clientResult = await hotUpdate?.call(
       {
         environment: {
@@ -248,7 +651,6 @@ describe('vite plugin hotUpdate', () => {
       } as any,
     )
 
-    expect(ssrResult).toEqual([])
     expect(clientResult).toEqual([])
     expect(send).toHaveBeenCalledTimes(1)
     expect(send.mock.calls[0]?.[0]).toBe(RESUME_HMR_EVENT)
@@ -258,18 +660,313 @@ describe('vite plugin hotUpdate', () => {
     })
   })
 
+  it('emits resumable SSR payloads when the changed file has no client module graph entry', async () => {
+    const [, plugin] = getPlugins()
+    const hotUpdate = getHotUpdate(plugin)
+    const filePath = '/tmp/ssr-only-layout.tsx'
+    const previousSource = `
+      const PageLink = (props: { label: string; href: string }) => {
+        return <a href={props.href}>{props.label}</a>;
+      };
+      export default () => {
+        return <nav><PageLink label="Overview" href="/docs" /></nav>;
+      };
+    `
+    const nextSource = `
+      const PageLink = (props: { label: string; href: string }) => {
+        return <a href={props.href}>{props.label}</a>;
+      };
+      export default () => {
+        return <nav><PageLink label="Overview Changed" href="/docs" /></nav>;
+      };
+    `
+    const send = vi.fn()
+    const wsSend = vi.fn()
+
+    await resolveResumeHmrUpdate({
+      filePath,
+      root: '/tmp',
+      source: previousSource,
+    })
+
+    const result = await hotUpdate?.call(
+      {
+        environment: {
+          name: 'ssr',
+          hot: {
+            send,
+          },
+        },
+      } as any,
+      {
+        file: filePath,
+        modules: [],
+        read: () => nextSource,
+        server: {
+          environments: {
+            client: {
+              moduleGraph: {
+                getModulesByFile() {
+                  return new Set()
+                },
+              },
+            },
+          },
+          ws: {
+            send: wsSend,
+          },
+        },
+      } as any,
+    )
+
+    expect(result).toEqual([])
+    expect(send).not.toHaveBeenCalled()
+    expect(wsSend).toHaveBeenCalledTimes(1)
+    expect(wsSend.mock.calls[0]?.[0]).toBe(RESUME_HMR_EVENT)
+    expect(wsSend.mock.calls[0]?.[1]).toMatchObject({
+      fileUrl: '/ssr-only-layout.tsx',
+      fullReload: false,
+    })
+  })
+
+  it('uses the primed compiler cache to avoid first-edit full reloads for SSR-only route files', async () => {
+    const [, plugin] = getPlugins()
+    const hotUpdate = getHotUpdate(plugin)
+    const filePath = '/tmp/primed-ssr-only-layout.tsx'
+    const previousSource = `
+      const PageLink = (props: { label: string; href: string }) => {
+        return <a href={props.href}>{props.label}</a>;
+      };
+      export default () => {
+        return <nav><PageLink label="Overview" href="/docs" /></nav>;
+      };
+    `
+    const nextSource = `
+      const PageLink = (props: { label: string; href: string }) => {
+        return <a href={props.href}>{props.label}</a>;
+      };
+      export default () => {
+        return <nav><PageLink label="Overview Changed" href="/docs" /></nav>;
+      };
+    `
+    const send = vi.fn()
+
+    await primeCompilerCache(filePath, previousSource)
+
+    const result = await hotUpdate?.call(
+      {
+        environment: {
+          name: 'ssr',
+          hot: {
+            send,
+          },
+        },
+      } as any,
+      {
+        file: filePath,
+        modules: [],
+        read: () => nextSource,
+        server: {},
+      } as any,
+    )
+
+    expect(result).toEqual([])
+    expect(send).toHaveBeenCalledTimes(1)
+    expect(send.mock.calls[0]?.[0]).toBe(RESUME_HMR_EVENT)
+    expect(send.mock.calls[0]?.[1]).toMatchObject({
+      fileUrl: '/primed-ssr-only-layout.tsx',
+      fullReload: false,
+    })
+  })
+
+  it('emits resumable full-reload payloads during SSR hot updates when no client diff is available', async () => {
+    const [, plugin] = getPlugins()
+    const hotUpdate = getHotUpdate(plugin)
+    const filePath = '/tmp/ssr-full-reload.tsx'
+    const previousSource = `
+      export default () => <div>ready</div>;
+    `
+    const nextSource = `
+      export const PageLink = () => <a href="/docs">Docs</a>;
+      export default () => <div><PageLink /></div>;
+    `
+    const send = vi.fn()
+    const wsSend = vi.fn()
+
+    await resolveResumeHmrUpdate({
+      filePath,
+      root: '/tmp',
+      source: previousSource,
+    })
+
+    const result = await hotUpdate?.call(
+      {
+        environment: {
+          name: 'ssr',
+          hot: {
+            send,
+          },
+        },
+      } as any,
+      {
+        file: filePath,
+        modules: [
+          {
+            type: 'js',
+            url: '/src/ssr-full-reload.tsx',
+          },
+        ],
+        read: () => nextSource,
+        server: {
+          ws: {
+            send: wsSend,
+          },
+        },
+      } as any,
+    )
+
+    expect(result).toEqual([])
+    expect(send).not.toHaveBeenCalled()
+    expect(wsSend).toHaveBeenCalledTimes(1)
+    expect(wsSend.mock.calls[0]?.[0]).toBe(RESUME_HMR_EVENT)
+    expect(wsSend.mock.calls[0]?.[1]).toMatchObject({
+      fileUrl: '/ssr-full-reload.tsx',
+      fullReload: true,
+    })
+  })
+
+  it('uses the first transformed source as the resumable HMR baseline for later client updates', async () => {
+    const [transformPlugin, hmrPlugin] = getPlugins()
+    const transform = getTransform(transformPlugin)
+    const hotUpdate = getHotUpdate(hmrPlugin)
+    const send = vi.fn()
+    const filePath = '/tmp/first-hmr-diff.tsx'
+    const previousSource = `
+      export default () => <div>before</div>;
+    `
+    const nextSource = `
+      export default () => <div>after</div>;
+    `
+
+    await transform?.call(
+      {
+        environment: {
+          name: 'client',
+        },
+      } as any,
+      previousSource,
+      filePath,
+    )
+
+    const result = await hotUpdate?.call(
+      {
+        environment: {
+          name: 'client',
+          hot: {
+            send,
+          },
+        },
+      } as any,
+      {
+        file: filePath,
+        modules: [
+          {
+            type: 'js',
+            url: '/src/first-hmr-diff.tsx',
+          },
+        ],
+        read: () => nextSource,
+        server: {},
+      } as any,
+    )
+
+    expect(result).toEqual([])
+    expect(send).toHaveBeenCalledTimes(1)
+    expect(send.mock.calls[0]?.[0]).toBe(RESUME_HMR_EVENT)
+    expect(send.mock.calls[0]?.[1]).toMatchObject({
+      fileUrl: '/first-hmr-diff.tsx',
+      fullReload: false,
+      rerenderComponentSymbols: expect.any(Array),
+    })
+    expect(
+      Object.keys(
+        (send.mock.calls[0][1] as { symbolUrlReplacements: Record<string, string> })
+          .symbolUrlReplacements,
+      ),
+    ).not.toHaveLength(0)
+  })
+
+  it('retains resumable full-reload payloads after transform caches the next source', async () => {
+    const [transformPlugin, hmrPlugin] = getPlugins()
+    const transform = getTransform(transformPlugin)
+    const hotUpdate = getHotUpdate(hmrPlugin)
+    const send = vi.fn()
+    const filePath = '/tmp/full-reload.tsx'
+    const previousSource = `
+      export default () => <div>ready</div>;
+    `
+    const nextSource = `
+      export const PageLink = () => <a href="/docs">Docs</a>;
+      export default () => <div><PageLink /></div>;
+    `
+
+    await resolveResumeHmrUpdate({
+      filePath,
+      root: '/tmp',
+      source: previousSource,
+    })
+
+    await transform?.call(
+      {
+        environment: {
+          name: 'client',
+        },
+      } as any,
+      nextSource,
+      filePath,
+    )
+
+    const result = await hotUpdate?.call(
+      {
+        environment: {
+          name: 'client',
+          hot: {
+            send,
+          },
+        },
+      } as any,
+      {
+        file: filePath,
+        modules: [
+          {
+            type: 'js',
+            url: '/src/full-reload.tsx',
+          },
+        ],
+        read: () => nextSource,
+        server: {},
+      } as any,
+    )
+
+    expect(result).toEqual([])
+    expect(send).toHaveBeenCalledTimes(1)
+    expect(send.mock.calls[0]?.[0]).toBe(RESUME_HMR_EVENT)
+    expect(send.mock.calls[0]?.[1]).toMatchObject({
+      fileUrl: '/full-reload.tsx',
+      fullReload: true,
+    })
+  })
+
   it('preserves css hot-update modules when handling resumable tsx updates', async () => {
-    const plugin = getPlugin()
+    const [, plugin] = getPlugins()
     const hotUpdate = getHotUpdate(plugin)
     const send = vi.fn()
     const filePath = '/tmp/resumable-style.tsx'
     const previousSource = `
-      import { component$ } from "eclipsa";
-      export default component$(() => <div class="bg-red-500">ready</div>);
+            export default () => <div class="bg-red-500">ready</div>;
     `
     const nextSource = `
-      import { component$ } from "eclipsa";
-      export default component$(() => <div class="bg-lime-500">ready</div>);
+            export default () => <div class="bg-lime-500">ready</div>;
     `
     const cssModule = {
       id: '/src/app/style.css',
@@ -312,7 +1009,7 @@ describe('vite plugin hotUpdate', () => {
   })
 
   it('leaves non-tsx updates to Vite', async () => {
-    const plugin = getPlugin()
+    const [, plugin] = getPlugins()
     const hotUpdate = getHotUpdate(plugin)
     const send = vi.fn()
 
diff --git a/packages/eclipsa/vite/mod.ts b/packages/eclipsa/vite/mod.ts
index c5749cb..42fc9fc 100644
--- a/packages/eclipsa/vite/mod.ts
+++ b/packages/eclipsa/vite/mod.ts
@@ -1,4 +1,10 @@
-import { createServerModuleRunner, type Plugin, type PluginOption, type ResolvedConfig } from 'vite'
+import {
+  createServerModuleRunner,
+  transformWithOxc,
+  type Plugin,
+  type PluginOption,
+  type ResolvedConfig,
+} from 'vite'
 import { createDevFetch, shouldInvalidateDevApp } from './dev-app/mod.ts'
 import { incomingMessageToRequest, responseForServerResponse } from '../utils/node-connect.ts'
 import { createConfig } from './config.ts'
@@ -12,22 +18,250 @@ import {
   parseSymbolRequest,
   resolveResumeHmrUpdate,
 } from './compiler.ts'
-import { RESUME_HMR_EVENT } from '../core/resume-hmr.ts'
+import { RESUME_HMR_EVENT, type ResumeHmrUpdatePayload } from '../core/resume-hmr.ts'
+
+const ECLIPSA_SOURCE_EXTENSIONS = new Set([
+  '.cjs',
+  '.cts',
+  '.js',
+  '.jsx',
+  '.mjs',
+  '.mts',
+  '.ts',
+  '.tsx',
+])
+
+const stripRequestQuery = (value: string) => value.replace(/[?#].*$/, '')
+
+const isTestLikeSourceRequest = (value: string) =>
+  /\.(?:test|spec)\.[^./]+$/.test(stripRequestQuery(value).replaceAll('\\', '/'))
+
+const isAppSourceRequest = (value: string) =>
+  /(^|\/)app\//.test(stripRequestQuery(value).replaceAll('\\', '/'))
+
+const isEclipsaSourceRequest = (value: string) => {
+  const normalized = stripRequestQuery(value)
+  const extensionIndex = normalized.lastIndexOf('.')
+  if (extensionIndex < 0) {
+    return false
+  }
+  const extension = normalized.slice(extensionIndex)
+  if (!ECLIPSA_SOURCE_EXTENSIONS.has(extension)) {
+    return false
+  }
+  return extension === '.tsx' || isAppSourceRequest(normalized)
+}
+
+const isCssRequest = (value: string | undefined) => {
+  if (!value) {
+    return false
+  }
+  const normalized = stripRequestQuery(value)
+  return normalized.endsWith('.css')
+}
+
+const createHotTargetUrl = (root: string, filePath: string) => {
+  const normalizedRoot = root.replaceAll('\\', '/').replace(/\/$/, '')
+  const normalizedFilePath = stripRequestQuery(filePath).replaceAll('\\', '/')
+  if (normalizedFilePath.startsWith('/app/')) {
+    return normalizedFilePath
+  }
+  if (
+    normalizedFilePath === normalizedRoot ||
+    normalizedFilePath.startsWith(`${normalizedRoot}/`)
+  ) {
+    return `/${normalizedFilePath.slice(normalizedRoot.length + 1)}`
+  }
+  return `/@fs/${normalizedFilePath}`
+}
+
+const preserveCssHotModules = <
+  T extends { file?: string; id?: string; type?: string; url?: string },
+>(
+  modules: T[],
+) =>
+  modules.filter(
+    (module) =>
+      module.type === 'css' ||
+      isCssRequest(module.id) ||
+      isCssRequest(module.url) ||
+      isCssRequest(module.file),
+  )
+
+const mergeUniqueHotModules = <T extends { file?: string; id?: string; url?: string }>(
+  modules: T[],
+) => {
+  const seen = new Set<string>()
+  return modules.filter((module) => {
+    const key = module.id ?? module.file ?? module.url
+    if (!key || seen.has(key)) {
+      return false
+    }
+    seen.add(key)
+    return true
+  })
+}
+
+interface EclipsaPluginState {
+  config?: ResolvedConfig
+  pendingSsrUpdates?: Map<string, ResumeHmrUpdatePayload>
+}
+
+interface HotModule {
+  file?: string
+  id?: string
+  type?: string
+  url: string
+}
+
+const collectCssHotModules = (
+  pluginContext: PluginContextWithEnvironment,
+  options: HotUpdateContext,
+) =>
+  mergeUniqueHotModules([
+    ...preserveCssHotModules(options.modules),
+    ...preserveCssHotModules([
+      ...(pluginContext.environment.moduleGraph?.idToModuleMap?.values() ?? []),
+    ]),
+  ])
+
+const sendSsrHotEvent = (
+  pluginContext: PluginContextWithEnvironment,
+  options: HotUpdateContext,
+  event: string,
+  payload?: unknown,
+) => {
+  if (options.server?.ws) {
+    options.server.ws.send(event, payload)
+    return
+  }
+  pluginContext.environment.hot.send(event, payload)
+}
+
+const hasClientHotModuleForFile = (options: HotUpdateContext) => {
+  const clientModules = options.server?.environments?.client?.moduleGraph?.getModulesByFile(
+    options.file,
+  )
+  if (!clientModules) {
+    return false
+  }
+  for (const _module of clientModules) {
+    return true
+  }
+  return false
+}
+
+const shouldForceFullReloadForWatcherEvent = (
+  filePath: string,
+  event: 'add' | 'change' | 'unlink',
+) => event !== 'change' && isEclipsaSourceRequest(filePath) && !isTestLikeSourceRequest(filePath)
+
+const handleHotUpdate = async (
+  state: EclipsaPluginState,
+  pluginContext: PluginContextWithEnvironment,
+  options: HotUpdateContext,
+) => {
+  const config = state.config
+  if (!config || !isEclipsaSourceRequest(options.file) || isTestLikeSourceRequest(options.file)) {
+    return
+  }
+  const source = await options.read()
+  if (pluginContext.environment.name !== 'client') {
+    const resumableUpdate = await inspectResumeHmrUpdate({
+      filePath: options.file,
+      root: config.root,
+      source,
+    })
+    if (resumableUpdate.isResumable) {
+      if (resumableUpdate.update) {
+        if (hasClientHotModuleForFile(options)) {
+          return collectCssHotModules(pluginContext, options)
+        }
+        const pendingSsrUpdate = state.pendingSsrUpdates?.get(options.file)
+        if (
+          pendingSsrUpdate &&
+          !pendingSsrUpdate.fullReload &&
+          resumableUpdate.update.fullReload &&
+          pendingSsrUpdate.fileUrl === resumableUpdate.update.fileUrl
+        ) {
+          return collectCssHotModules(pluginContext, options)
+        }
+        state.pendingSsrUpdates ??= new Map()
+        state.pendingSsrUpdates.set(options.file, resumableUpdate.update)
+        sendSsrHotEvent(pluginContext, options, RESUME_HMR_EVENT, resumableUpdate.update)
+      }
+      return collectCssHotModules(pluginContext, options)
+    }
+    return
+  }
+  const resumableUpdate = await resolveResumeHmrUpdate({
+    filePath: options.file,
+    root: config.root,
+    source,
+  })
+  if (resumableUpdate.isResumable) {
+    const pendingSsrUpdate = state.pendingSsrUpdates?.get(options.file)
+    if (pendingSsrUpdate) {
+      state.pendingSsrUpdates?.delete(options.file)
+    } else if (resumableUpdate.update) {
+      pluginContext.environment.hot.send(RESUME_HMR_EVENT, resumableUpdate.update)
+    }
+    return collectCssHotModules(pluginContext, options)
+  }
 
-const preserveCssHotModules = <T extends { type?: string }>(modules: T[]) =>
-  modules.filter((module) => module.type === 'css')
+  const module =
+    options.modules[0] ??
+    [...(pluginContext.environment.moduleGraph?.getModulesByFile(options.file) ?? [])][0]
+  pluginContext.environment.hot.send('update-client', {
+    url: module?.url ?? createHotTargetUrl(config.root, options.file),
+  })
+  return collectCssHotModules(pluginContext, options)
+}
 
-const eclipsaCore = (options: EclipsaPluginOptions = {}): Plugin => {
-  let config: ResolvedConfig
+interface PluginContextWithEnvironment {
+  environment: {
+    hot: {
+      send(event: string, payload?: unknown): void
+    }
+    moduleGraph?: {
+      idToModuleMap?: Map<string, HotModule>
+      getModulesByFile(file: string): Iterable<{ url: string }> | undefined
+    }
+    name: string
+  }
+}
 
+interface HotUpdateContext {
+  file: string
+  modules: HotModule[]
+  read(): Promise<string> | string
+  server?: {
+    environments?: {
+      client?: {
+        moduleGraph?: {
+          getModulesByFile(file: string): Iterable<{ url: string }> | undefined
+        }
+      }
+    }
+    ws?: {
+      send(event: string, payload?: unknown): void
+    }
+  }
+}
+
+const eclipsaCore = (state: EclipsaPluginState, options: EclipsaPluginOptions = {}): Plugin => {
   return {
     enforce: 'pre',
     name: 'vite-plugin-eclipsa',
     config: createConfig(resolveEclipsaPluginOptions(options)),
     configResolved(resolvedConfig) {
-      config = resolvedConfig
+      state.config = resolvedConfig
     },
     configureServer(server) {
+      const config = state.config
+      if (!config) {
+        throw new Error('Resolved Vite config is unavailable during configureServer().')
+      }
       const ssrEnv = server.environments.ssr
       const runner = createServerModuleRunner(ssrEnv, {
         hmr: false,
@@ -42,6 +276,12 @@ const eclipsaCore = (options: EclipsaPluginOptions = {}): Plugin => {
         if (shouldInvalidateDevApp(config.root, filePath, event)) {
           devApp.invalidate()
         }
+        if (shouldForceFullReloadForWatcherEvent(filePath, event)) {
+          server.ws.send({
+            path: '*',
+            type: 'full-reload',
+          } as any)
+        }
       }
 
       server.watcher.on('add', (filePath) => {
@@ -64,45 +304,6 @@ const eclipsaCore = (options: EclipsaPluginOptions = {}): Plugin => {
         next()
       })
     },
-    async hotUpdate(options) {
-      if (!options.file.endsWith('.tsx')) {
-        return
-      }
-      const source = await options.read()
-      if (this.environment.name !== 'client') {
-        const resumableUpdate = await inspectResumeHmrUpdate({
-          filePath: options.file,
-          root: config.root,
-          source,
-        })
-        if (resumableUpdate.isResumable) {
-          return preserveCssHotModules(options.modules)
-        }
-        return
-      }
-      const resumableUpdate = await resolveResumeHmrUpdate({
-        filePath: options.file,
-        root: config.root,
-        source,
-      })
-      if (resumableUpdate.isResumable) {
-        if (resumableUpdate.update) {
-          this.environment.hot.send(RESUME_HMR_EVENT, resumableUpdate.update)
-        }
-        return preserveCssHotModules(options.modules)
-      }
-
-      const module =
-        options.modules[0] ??
-        [...(this.environment.moduleGraph?.getModulesByFile(options.file) ?? [])][0]
-      if (!module) {
-        return
-      }
-      this.environment.hot.send('update-client', {
-        url: module.url,
-      })
-      return preserveCssHotModules(options.modules)
-    },
     async load(id) {
       if (!parseSymbolRequest(id)) {
         return null
@@ -112,9 +313,22 @@ const eclipsaCore = (options: EclipsaPluginOptions = {}): Plugin => {
         : loadSymbolModuleForSSR(id)
     },
     async transform(code, id) {
-      if (!id.endsWith('.tsx') || parseSymbolRequest(id)) {
+      if (!isEclipsaSourceRequest(id) || parseSymbolRequest(id)) {
         return
       }
+      const config = state.config
+      if (!config) {
+        throw new Error('Resolved Vite config is unavailable during transform().')
+      }
+      if (isTestLikeSourceRequest(id)) {
+        return transformWithOxc(code, id, {
+          jsx: {
+            development: !config.isProduction,
+            importSource: 'eclipsa',
+            runtime: 'automatic',
+          },
+        })
+      }
       const isClient = this.environment.name === 'client'
       return {
         code: isClient
@@ -127,6 +341,21 @@ const eclipsaCore = (options: EclipsaPluginOptions = {}): Plugin => {
   }
 }
 
+const eclipsaHot = (state: EclipsaPluginState): Plugin => ({
+  enforce: 'post',
+  name: 'vite-plugin-eclipsa:hmr',
+  async hotUpdate(options) {
+    return handleHotUpdate(
+      state,
+      this as PluginContextWithEnvironment,
+      options as unknown as HotUpdateContext,
+    ) as any
+  },
+})
+
 export type { EclipsaPluginOptions } from './options.ts'
 
-export const eclipsa = (options?: EclipsaPluginOptions): PluginOption => [eclipsaCore(options)]
+export const eclipsa = (options?: EclipsaPluginOptions): PluginOption => {
+  const state: EclipsaPluginState = {}
+  return [eclipsaCore(state, options), eclipsaHot(state)]
+}
diff --git a/packages/eclipsa/vite/nitro.ts b/packages/eclipsa/vite/nitro.ts
index 1e57993..100f1ed 100644
--- a/packages/eclipsa/vite/nitro.ts
+++ b/packages/eclipsa/vite/nitro.ts
@@ -81,7 +81,7 @@ export const createEclipsaNitroConfig = (
     entry: ECLIPSA_NITRO_ENTRY_ID,
     publicAssets: nextPublicAssets,
     virtual: {
-      ...(nitroConfig?.virtual ?? {}),
+      ...nitroConfig?.virtual,
       [ECLIPSA_NITRO_ENTRY_ID]: createEclipsaNitroEntry(appModulePath),
     },
   }
diff --git a/packages/eclipsa/vite/publish-package-json.test.ts b/packages/eclipsa/vite/publish-package-json.test.ts
index b2c86ae..50527c5 100644
--- a/packages/eclipsa/vite/publish-package-json.test.ts
+++ b/packages/eclipsa/vite/publish-package-json.test.ts
@@ -12,31 +12,53 @@ const readPackageJson = async (relativePath: string) =>
 describe('publish package metadata', () => {
   it('packs eclipsa internal exports and build entries consistently', async () => {
     const packageJson = await readPackageJson('../package.json')
-    const publishPackageJson = createPublishPackageJson(packageJson)
+    const publishPackageJson = createPublishPackageJson(
+      packageJson,
+      new Map([['@eclipsa/optimizer', '0.2.0']]),
+    )
     const exportsMap = publishPackageJson.exports as Record<string, Record<string, string>>
-    const packConfig = Array.isArray(rootConfig.pack) ? rootConfig.pack[0] : rootConfig.pack
 
-    expect(packConfig?.entry).toContain('core/internal.ts')
     expect(publishPackageJson.repository).toEqual({
       type: 'git',
       url: 'git+https://github.com/pnsk-lab/eclipsa.git',
       directory: 'packages/eclipsa',
     })
+    expect(publishPackageJson.dependencies).toEqual({
+      '@eclipsa/optimizer': '^0.2.0',
+      'fast-glob': '^3.3.2',
+      hono: '^4.6.4',
+    })
     expect(exportsMap['./internal']).toEqual({
       types: './core/internal.d.mts',
       import: './core/internal.mjs',
     })
+    expect(exportsMap['./web-utils']).toEqual({
+      types: './web-utils/mod.d.mts',
+      import: './web-utils/mod.mjs',
+    })
+    expect(exportsMap['./vite/build/runtime']).toEqual({
+      types: './vite/build/runtime.d.mts',
+      import: './vite/build/runtime.mjs',
+    })
     expect(exportsMap['.']).toEqual({
       types: './mod.d.mts',
       import: './mod.mjs',
     })
   })
 
+  it('keeps publish pack entries aligned with generated exports', () => {
+    const packConfig = Array.isArray(rootConfig.pack) ? rootConfig.pack[0] : rootConfig.pack
+
+    expect(packConfig?.entry).toEqual(
+      expect.arrayContaining(['core/internal.ts', 'web-utils/mod.ts', 'vite/build/runtime.ts']),
+    )
+  })
+
   it('rewrites create-eclipsa metadata for dist publishing', async () => {
     const packageJson = await readPackageJson('../../create-eclipsa/package.json')
     const publishPackageJson = createPublishPackageJson(packageJson)
 
-    expect(publishPackageJson.version).toBe('0.1.0-alpha.0')
+    expect(publishPackageJson.version).toBe('0.0.0')
     expect(publishPackageJson.repository).toEqual({
       type: 'git',
       url: 'git+https://github.com/pnsk-lab/eclipsa.git',
@@ -84,6 +106,91 @@ describe('publish package metadata', () => {
     })
   })
 
+  it('rewrites @eclipsa/content metadata for dist publishing', async () => {
+    const packageJson = await readPackageJson('../../content/package.json')
+    const publishPackageJson = createPublishPackageJson(
+      packageJson,
+      new Map([['eclipsa', '0.2.0-alpha.0']]),
+    )
+    const exportsMap = publishPackageJson.exports as Record<string, Record<string, string>>
+
+    expect(publishPackageJson.private).toBe(false)
+    expect(publishPackageJson.repository).toEqual({
+      type: 'git',
+      url: 'git+https://github.com/pnsk-lab/eclipsa.git',
+      directory: 'packages/content',
+    })
+    expect(publishPackageJson.dependencies).toEqual({
+      '@ox-content/napi': '^0.17.0',
+      eclipsa: '0.2.0-alpha.0',
+      'fast-glob': '^3.3.2',
+      shiki: '^4.0.2',
+      yaml: '^2.8.1',
+    })
+    expect(exportsMap['.']).toEqual({
+      types: './mod.d.mts',
+      import: './mod.mjs',
+    })
+    expect(exportsMap['./vite']).toEqual({
+      types: './vite.d.mts',
+      import: './vite.mjs',
+    })
+    expect(exportsMap['./internal']).toEqual({
+      types: './internal.d.mts',
+      import: './internal.mjs',
+    })
+  })
+
+  it('rewrites @eclipsa/motion metadata for dist publishing', async () => {
+    const packageJson = await readPackageJson('../../motion/package.json')
+    const publishPackageJson = createPublishPackageJson(
+      packageJson,
+      new Map([['eclipsa', '0.2.0-alpha.0']]),
+    )
+
+    expect(publishPackageJson.private).toBe(false)
+    expect(publishPackageJson.repository).toEqual({
+      type: 'git',
+      url: 'git+https://github.com/pnsk-lab/eclipsa.git',
+      directory: 'packages/motion',
+    })
+    expect(publishPackageJson.dependencies).toEqual({
+      eclipsa: '0.2.0-alpha.0',
+      'motion-dom': '12.38.0',
+      'motion-utils': '12.36.0',
+    })
+    expect(publishPackageJson.exports).toEqual({
+      '.': {
+        types: './mod.d.mts',
+        import: './mod.mjs',
+      },
+    })
+  })
+
+  it('rewrites @eclipsa/markdown metadata for dist publishing', async () => {
+    const packageJson = await readPackageJson('../../markdown/package.json')
+    const publishPackageJson = createPublishPackageJson(
+      packageJson,
+      new Map([['eclipsa', '0.2.0-alpha.0']]),
+    )
+
+    expect(publishPackageJson.private).toBe(false)
+    expect(publishPackageJson.repository).toEqual({
+      type: 'git',
+      url: 'git+https://github.com/pnsk-lab/eclipsa.git',
+      directory: 'packages/markdown',
+    })
+    expect(publishPackageJson.dependencies).toEqual({
+      eclipsa: '0.2.0-alpha.0',
+    })
+    expect(publishPackageJson.exports).toEqual({
+      '.': {
+        types: './mod.d.mts',
+        import: './mod.mjs',
+      },
+    })
+  })
+
   it('rewrites workspace protocol dependency ranges for publishing', () => {
     const publishPackageJson = createPublishPackageJson(
       {
@@ -121,4 +228,16 @@ describe('publish package metadata', () => {
       helper: '2.0.0',
     })
   })
+
+  it('pins the optimizer dependency to the synchronized eclipsa release version', async () => {
+    const packageJson = await readPackageJson('../package.json')
+    const publishPackageJson = createPublishPackageJson(
+      packageJson,
+      new Map([['@eclipsa/optimizer', '3.4.5']]),
+    )
+
+    expect(publishPackageJson.dependencies).toMatchObject({
+      '@eclipsa/optimizer': '^3.4.5',
+    })
+  })
 })
diff --git a/packages/eclipsa/vite/utils/routing.test.ts b/packages/eclipsa/vite/utils/routing.test.ts
index 975eb3a..cd891f2 100644
--- a/packages/eclipsa/vite/utils/routing.test.ts
+++ b/packages/eclipsa/vite/utils/routing.test.ts
@@ -129,7 +129,7 @@ describe('routing helpers', () => {
     )
 
     await expect(createRoutes(root)).rejects.toThrow(/Unsupported render mode "streaming"/)
-  })
+  }, 15000)
 
   it('supports dynamic, optional, and catch-all params with route groups removed from the path', () => {
     const routes: RouteEntry[] = [
@@ -185,6 +185,7 @@ describe('routing helpers', () => {
       params: { rest: ['a', 'b'] },
       route: routes[1],
     })
+    expect(matchRoute(routes, '/docs')).toBeNull()
     expect(matchRoute(routes, '/about')).toMatchObject({
       params: { lang: undefined },
       route: routes[2],
@@ -195,6 +196,30 @@ describe('routing helpers', () => {
     })
   })
 
+  it('decodes url-encoded path segments before matching routes', () => {
+    const routes: RouteEntry[] = [
+      {
+        error: null,
+        layouts: [],
+        loading: null,
+        middlewares: [],
+        notFound: null,
+        page: null,
+        routePath: '/hello world/[slug]',
+        segments: [
+          { kind: 'static', value: 'hello world' },
+          { kind: 'required', value: 'slug' },
+        ],
+        server: null,
+      },
+    ]
+
+    expect(matchRoute(routes, '/hello%20world/ada%20lovelace')).toMatchObject({
+      params: { slug: 'ada lovelace' },
+      route: routes[0],
+    })
+  })
+
   it('creates module manifests for dev and build route loading', () => {
     const routes: RouteEntry[] = [
       {
diff --git a/packages/eclipsa/vite/utils/routing.ts b/packages/eclipsa/vite/utils/routing.ts
index 2007b11..81cb497 100644
--- a/packages/eclipsa/vite/utils/routing.ts
+++ b/packages/eclipsa/vite/utils/routing.ts
@@ -55,6 +55,17 @@ interface RouteMatch<T> {
   route: T
 }
 
+const decodeRoutePathSegment = (segment: string) => {
+  try {
+    return decodeURIComponent(segment)
+  } catch {
+    return segment
+  }
+}
+
+const splitRoutePath = (pathname: string) =>
+  normalizeRoutePath(pathname).split('/').filter(Boolean).map(decodeRoutePathSegment)
+
 const createDirectoryEntry = (): RouteDirectoryEntry => ({
   error: null,
   layout: null,
@@ -261,11 +272,16 @@ const matchSegments = (
         [segment.value]: undefined,
       })
     }
-    case 'rest':
+    case 'rest': {
+      const rest = pathnameSegments.slice(pathIndex)
+      if (rest.length === 0) {
+        return null
+      }
       return matchSegments(segments, pathnameSegments, segments.length, pathnameSegments.length, {
         ...params,
-        [segment.value]: pathnameSegments.slice(pathIndex),
+        [segment.value]: rest,
       })
+    }
   }
 }
 
@@ -273,7 +289,7 @@ const toMatch = <T extends { segments: RoutePathSegment[] }>(
   route: T,
   pathname: string,
 ): RouteMatch<T> | null => {
-  const pathnameSegments = normalizeRoutePath(pathname).split('/').filter(Boolean)
+  const pathnameSegments = splitRoutePath(pathname)
   const params = matchSegments(route.segments, pathnameSegments)
   if (!params) {
     return null
diff --git a/packages/eclipsa/web-utils/mod.test.ts b/packages/eclipsa/web-utils/mod.test.ts
new file mode 100644
index 0000000..9904604
--- /dev/null
+++ b/packages/eclipsa/web-utils/mod.test.ts
@@ -0,0 +1,508 @@
+import { describe, expect, it } from 'vitest'
+import { jsxDEV } from '../jsx/jsx-dev-runtime.ts'
+import { __eclipsaComponent } from '../core/internal.ts'
+import { renderClientInsertable, withRuntimeContainer } from '../core/runtime.ts'
+import { useSignal, useWatch } from '../core/signal.ts'
+import { renderSSR } from '../core/ssr.ts'
+import { useBoudingClientRect, useBoundingClientRect, useScroll, useWindowSize } from './mod.ts'
+class FakeNode {
+  static COMMENT_NODE = 8
+  static ELEMENT_NODE = 1
+  static TEXT_NODE = 3
+  childNodes = []
+  nodeType = 0
+  ownerDocument = null
+  parentNode = null
+}
+class FakeText extends FakeNode {
+  constructor(data) {
+    super()
+    this.data = data
+    this.nodeType = 3
+  }
+}
+class FakeComment extends FakeNode {
+  constructor(data) {
+    super()
+    this.data = data
+    this.nodeType = 8
+  }
+}
+class FakeElement extends FakeNode {
+  constructor(tagName) {
+    super()
+    this.tagName = tagName
+    this.nodeType = 1
+  }
+  attributes = /* @__PURE__ */ new Map()
+  scrollLeft = 0
+  scrollTop = 0
+  #boundingClientRect = {
+    bottom: 0,
+    height: 0,
+    left: 0,
+    right: 0,
+    top: 0,
+    width: 0,
+    x: 0,
+    y: 0,
+  }
+  #eventListeners = /* @__PURE__ */ new Map()
+  appendChild(node) {
+    node.ownerDocument = this.ownerDocument
+    node.parentNode = this
+    this.childNodes.push(node)
+    return node
+  }
+  setAttribute(name, value) {
+    this.attributes.set(name, value)
+  }
+  removeAttribute(name) {
+    this.attributes.delete(name)
+  }
+  getAttribute(name) {
+    return this.attributes.get(name) ?? null
+  }
+  hasAttribute(name) {
+    return this.attributes.has(name)
+  }
+  getBoundingClientRect() {
+    return { ...this.#boundingClientRect }
+  }
+  setBoundingClientRect(next) {
+    this.#boundingClientRect = {
+      ...this.#boundingClientRect,
+      ...next,
+    }
+  }
+  addEventListener(type, listener) {
+    let listeners = this.#eventListeners.get(type)
+    if (!listeners) {
+      listeners = /* @__PURE__ */ new Set()
+      this.#eventListeners.set(type, listeners)
+    }
+    listeners.add(listener)
+  }
+  removeEventListener(type, listener) {
+    this.#eventListeners.get(type)?.delete(listener)
+  }
+  dispatchEvent(event) {
+    for (const listener of this.#eventListeners.get(event.type) ?? []) {
+      if (typeof listener === 'function') {
+        listener.call(this, event)
+        continue
+      }
+      listener.handleEvent(event)
+    }
+    return !event.defaultPrevented
+  }
+}
+class FakeWindow {
+  pageXOffset = 0
+  pageYOffset = 0
+  scrollX = 0
+  scrollY = 0
+  innerHeight = 0
+  innerWidth = 0
+  #eventListeners = /* @__PURE__ */ new Map()
+  addEventListener(type, listener) {
+    let listeners = this.#eventListeners.get(type)
+    if (!listeners) {
+      listeners = /* @__PURE__ */ new Set()
+      this.#eventListeners.set(type, listeners)
+    }
+    listeners.add(listener)
+  }
+  removeEventListener(type, listener) {
+    this.#eventListeners.get(type)?.delete(listener)
+  }
+  dispatchEvent(event) {
+    for (const listener of this.#eventListeners.get(event.type) ?? []) {
+      if (typeof listener === 'function') {
+        listener.call(this, event)
+        continue
+      }
+      listener.handleEvent(event)
+    }
+    return !event.defaultPrevented
+  }
+}
+class FakeDocument {
+  body
+  defaultView = new FakeWindow()
+  #eventListeners = /* @__PURE__ */ new Map()
+  constructor() {
+    const body = new FakeElement('body')
+    body.ownerDocument = this
+    this.body = body
+  }
+  get scrollingElement() {
+    return this.body
+  }
+  createComment(data) {
+    const comment = new FakeComment(data)
+    comment.ownerDocument = this
+    return comment
+  }
+  createElement(tagName) {
+    const element = new FakeElement(tagName)
+    element.ownerDocument = this
+    return element
+  }
+  createTextNode(data) {
+    const text = new FakeText(data)
+    text.ownerDocument = this
+    return text
+  }
+  addEventListener(type, listener) {
+    let listeners = this.#eventListeners.get(type)
+    if (!listeners) {
+      listeners = /* @__PURE__ */ new Set()
+      this.#eventListeners.set(type, listeners)
+    }
+    listeners.add(listener)
+  }
+  removeEventListener(type, listener) {
+    this.#eventListeners.get(type)?.delete(listener)
+  }
+  dispatchEvent(event) {
+    for (const listener of this.#eventListeners.get(event.type) ?? []) {
+      if (typeof listener === 'function') {
+        listener.call(this, event)
+        continue
+      }
+      listener.handleEvent(event)
+    }
+    return !event.defaultPrevented
+  }
+}
+const createContainer = () => ({
+  actions: /* @__PURE__ */ new Map(),
+  actionStates: /* @__PURE__ */ new Map(),
+  asyncSignalSnapshotCache: /* @__PURE__ */ new Map(),
+  asyncSignalStates: /* @__PURE__ */ new Map(),
+  atoms: /* @__PURE__ */ new WeakMap(),
+  components: /* @__PURE__ */ new Map(),
+  dirty: /* @__PURE__ */ new Set(),
+  dirtyFlushQueued: false,
+  doc: new FakeDocument(),
+  eventDispatchPromise: null,
+  imports: /* @__PURE__ */ new Map(),
+  interactivePrefetchCheckQueued: false,
+  loaderStates: /* @__PURE__ */ new Map(),
+  loaders: /* @__PURE__ */ new Map(),
+  id: 'web-utils-test',
+  nextAtomId: 0,
+  nextComponentId: 0,
+  nextElementId: 0,
+  nextScopeId: 0,
+  nextSignalId: 0,
+  pendingSuspensePromises: /* @__PURE__ */ new Set(),
+  resumeReadyPromise: null,
+  rootChildCursor: 0,
+  rootElement: void 0,
+  router: null,
+  scopes: /* @__PURE__ */ new Map(),
+  signals: /* @__PURE__ */ new Map(),
+  symbols: /* @__PURE__ */ new Map(),
+  visibilityCheckQueued: false,
+  visibilityListenersCleanup: null,
+  visibles: /* @__PURE__ */ new Map(),
+  watches: /* @__PURE__ */ new Map(),
+})
+const flushAsync = async () => {
+  await Promise.resolve()
+  await Promise.resolve()
+}
+const withFakeNodeGlobal = (fn) => {
+  const OriginalComment = globalThis.Comment
+  const OriginalElement = globalThis.Element
+  const OriginalHTMLElement = globalThis.HTMLElement
+  const OriginalNode = globalThis.Node
+  const OriginalText = globalThis.Text
+  globalThis.Comment = FakeComment
+  globalThis.Element = FakeElement
+  globalThis.HTMLElement = FakeElement
+  globalThis.Node = FakeNode
+  globalThis.Text = FakeText
+  try {
+    return fn()
+  } finally {
+    globalThis.Comment = OriginalComment
+    globalThis.Element = OriginalElement
+    globalThis.HTMLElement = OriginalHTMLElement
+    globalThis.Node = OriginalNode
+    globalThis.Text = OriginalText
+  }
+}
+describe('eclipsa/web-utils useScroll', () => {
+  it('tracks a ref signal element scroll position', async () => {
+    await withFakeNodeGlobal(async () => {
+      let ref
+      let target
+      const values = []
+      const App = __eclipsaComponent(
+        () => {
+          ref = useSignal()
+          const scroll = useScroll(ref)
+          useWatch(() => {
+            values.push([scroll.value.x, scroll.value.y])
+          })
+          return jsxDEV('div', { ref }, null, false, {})
+        },
+        'component-web-utils-scroll-ref',
+        () => [],
+      )
+      const container = createContainer()
+      withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(App, {}, null, false, {}), container),
+      )
+      await flushAsync()
+      target = ref.value
+      target.scrollLeft = 12
+      target.scrollTop = 34
+      target.dispatchEvent(new Event('scroll'))
+      expect(values).toEqual([
+        [0, 0],
+        [12, 34],
+      ])
+    })
+  })
+  it('tracks the document scroll position when no ref signal is provided', async () => {
+    await withFakeNodeGlobal(async () => {
+      const values = []
+      const App = __eclipsaComponent(
+        () => {
+          const scroll = useScroll()
+          useWatch(() => {
+            values.push([scroll.value.x, scroll.value.y])
+          })
+          return jsxDEV('div', {}, null, false, {})
+        },
+        'component-web-utils-scroll-document',
+        () => [],
+      )
+      const container = createContainer()
+      withRuntimeContainer(container, () => {
+        renderClientInsertable(jsxDEV(App, {}, null, false, {}), container)
+      })
+      await flushAsync()
+      const doc = container.doc
+      const view = doc.defaultView
+      view.scrollX = 40
+      view.scrollY = 80
+      doc.dispatchEvent(new Event('scroll'))
+      expect(values).toEqual([
+        [0, 0],
+        [40, 80],
+      ])
+    })
+  })
+  it('returns zeroed scroll signals during SSR', () => {
+    const App = __eclipsaComponent(
+      () => {
+        const ref = useSignal()
+        const scroll = useScroll(ref)
+        return jsxDEV(
+          'div',
+          {
+            ref,
+            children: `${scroll.value.x}:${scroll.value.y}`,
+          },
+          null,
+          false,
+          {},
+        )
+      },
+      'component-web-utils-scroll-ssr',
+      () => [],
+    )
+    const { html } = renderSSR(() => jsxDEV(App, {}, null, false, {}))
+    expect(html).toContain('0:0')
+  })
+})
+describe('eclipsa/web-utils useBoundingClientRect', () => {
+  it('tracks a ref signal element client rect and updates on document scroll', async () => {
+    await withFakeNodeGlobal(async () => {
+      let ref
+      const values = []
+      const App = __eclipsaComponent(
+        () => {
+          ref = useSignal()
+          const rect = useBoundingClientRect(ref)
+          useWatch(() => {
+            values.push([rect.value.left, rect.value.top, rect.value.width, rect.value.height])
+          })
+          return jsxDEV('div', { ref }, null, false, {})
+        },
+        'component-web-utils-bounding-client-rect-ref',
+        () => [],
+      )
+      const container = createContainer()
+      withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(App, {}, null, false, {}), container),
+      )
+      await flushAsync()
+      const target = ref.value
+      target.setBoundingClientRect({
+        bottom: 170,
+        height: 150,
+        left: 10,
+        right: 210,
+        top: 20,
+        width: 200,
+        x: 10,
+        y: 20,
+      })
+      container.doc.dispatchEvent(new Event('scroll'))
+      expect(values).toEqual([
+        [0, 0, 0, 0],
+        [10, 20, 200, 150],
+      ])
+    })
+  })
+  it('tracks a ref signal element client rect when the runtime window scrolls', async () => {
+    await withFakeNodeGlobal(async () => {
+      let ref
+      const values = []
+      const App = __eclipsaComponent(
+        () => {
+          ref = useSignal()
+          const rect = useBoundingClientRect(ref)
+          useWatch(() => {
+            values.push([rect.value.top, rect.value.bottom])
+          })
+          return jsxDEV('div', { ref }, null, false, {})
+        },
+        'component-web-utils-bounding-client-rect-window-scroll',
+        () => [],
+      )
+      const container = createContainer()
+      withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(App, {}, null, false, {}), container),
+      )
+      await flushAsync()
+      const target = ref.value
+      target.setBoundingClientRect({
+        bottom: 640,
+        height: 180,
+        top: 460,
+      })
+      container.doc.defaultView.dispatchEvent(new Event('scroll'))
+      await flushAsync()
+      expect(values).toEqual([
+        [0, 0],
+        [460, 640],
+      ])
+    })
+  })
+  it('exports the requested misspelled alias for compatibility', async () => {
+    await withFakeNodeGlobal(async () => {
+      let ref
+      const values = []
+      const App = __eclipsaComponent(
+        () => {
+          ref = useSignal()
+          const rect = useBoudingClientRect(ref)
+          useWatch(() => {
+            values.push([rect.value.x, rect.value.y])
+          })
+          return jsxDEV('div', { ref }, null, false, {})
+        },
+        'component-web-utils-bouding-client-rect-alias',
+        () => [],
+      )
+      const container = createContainer()
+      withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV(App, {}, null, false, {}), container),
+      )
+      await flushAsync()
+      const target = ref.value
+      target.setBoundingClientRect({
+        left: 24,
+        top: 48,
+        x: 24,
+        y: 48,
+      })
+      container.doc.dispatchEvent(new Event('scroll'))
+      await flushAsync()
+      expect(values.at(-1)).toEqual([24, 48])
+    })
+  })
+  it('returns a zeroed client rect during SSR', () => {
+    const App = __eclipsaComponent(
+      () => {
+        const ref = useSignal()
+        const rect = useBoundingClientRect(ref)
+        return jsxDEV(
+          'div',
+          {
+            ref,
+            children: `${rect.value.left}:${rect.value.top}:${rect.value.width}:${rect.value.height}`,
+          },
+          null,
+          false,
+          {},
+        )
+      },
+      'component-web-utils-bounding-client-rect-ssr',
+      () => [],
+    )
+    const { html } = renderSSR(() => jsxDEV(App, {}, null, false, {}))
+    expect(html).toContain('0:0:0:0')
+  })
+})
+describe('eclipsa/web-utils useWindowSize', () => {
+  it('tracks the runtime window size', async () => {
+    await withFakeNodeGlobal(async () => {
+      const values = []
+      const App = __eclipsaComponent(
+        () => {
+          const windowSize = useWindowSize()
+          useWatch(() => {
+            values.push([windowSize.value.width, windowSize.value.height])
+          })
+          return jsxDEV('div', {}, null, false, {})
+        },
+        'component-web-utils-window-size',
+        () => [],
+      )
+      const container = createContainer()
+      const view = container.doc.defaultView
+      view.innerWidth = 640
+      view.innerHeight = 480
+      withRuntimeContainer(container, () => {
+        renderClientInsertable(jsxDEV(App, {}, null, false, {}), container)
+      })
+      await flushAsync()
+      view.innerWidth = 1024
+      view.innerHeight = 768
+      view.dispatchEvent(new Event('resize'))
+      expect(values).toEqual([
+        [0, 0],
+        [640, 480],
+        [1024, 768],
+      ])
+    })
+  })
+  it('returns zeroed window size during SSR', () => {
+    const App = __eclipsaComponent(
+      () => {
+        const windowSize = useWindowSize()
+        return jsxDEV(
+          'div',
+          {
+            children: `${windowSize.value.width}:${windowSize.value.height}`,
+          },
+          null,
+          false,
+          {},
+        )
+      },
+      'component-web-utils-window-size-ssr',
+      () => [],
+    )
+    const { html } = renderSSR(() => jsxDEV(App, {}, null, false, {}))
+    expect(html).toContain('0:0')
+  })
+})
diff --git a/packages/eclipsa/web-utils/mod.ts b/packages/eclipsa/web-utils/mod.ts
new file mode 100644
index 0000000..7433e13
--- /dev/null
+++ b/packages/eclipsa/web-utils/mod.ts
@@ -0,0 +1,8 @@
+export {
+  useBoudingClientRect,
+  useBoundingClientRect,
+  type BoundingClientRect,
+  type BoundingClientRectTargetSignal,
+} from './use-bounding-client-rect.ts'
+export { useScroll, type ScrollPosition, type ScrollTargetSignal } from './use-scroll.ts'
+export { useWindowSize, type WindowSize } from './use-window-size.ts'
diff --git a/packages/eclipsa/web-utils/use-bounding-client-rect.ts b/packages/eclipsa/web-utils/use-bounding-client-rect.ts
new file mode 100644
index 0000000..58939a4
--- /dev/null
+++ b/packages/eclipsa/web-utils/use-bounding-client-rect.ts
@@ -0,0 +1,98 @@
+import { getRuntimeContainer } from '../core/runtime.ts'
+import { onCleanup, onMount, useSignal, type Signal } from '../core/signal.ts'
+
+export interface BoundingClientRect {
+  bottom: number
+  height: number
+  left: number
+  right: number
+  top: number
+  width: number
+  x: number
+  y: number
+}
+
+export type BoundingClientRectTargetSignal<T extends Element = Element> = Signal<T | undefined>
+
+const createEmptyBoundingClientRect = (): BoundingClientRect => ({
+  bottom: 0,
+  height: 0,
+  left: 0,
+  right: 0,
+  top: 0,
+  width: 0,
+  x: 0,
+  y: 0,
+})
+
+const readBoundingClientRect = (element: Element): BoundingClientRect => {
+  const rect = element.getBoundingClientRect()
+  return {
+    bottom: rect.bottom ?? 0,
+    height: rect.height ?? 0,
+    left: rect.left ?? 0,
+    right: rect.right ?? 0,
+    top: rect.top ?? 0,
+    width: rect.width ?? 0,
+    x: rect.x ?? rect.left ?? 0,
+    y: rect.y ?? rect.top ?? 0,
+  }
+}
+
+const areBoundingClientRectsEqual = (a: BoundingClientRect, b: BoundingClientRect) =>
+  a.bottom === b.bottom &&
+  a.height === b.height &&
+  a.left === b.left &&
+  a.right === b.right &&
+  a.top === b.top &&
+  a.width === b.width &&
+  a.x === b.x &&
+  a.y === b.y
+
+export const useBoundingClientRect = <T extends Element = Element>(
+  target: BoundingClientRectTargetSignal<T>,
+): Signal<BoundingClientRect> => {
+  const rect = useSignal<BoundingClientRect>(createEmptyBoundingClientRect())
+  const runtimeDocument =
+    getRuntimeContainer()?.doc ?? (typeof document !== 'undefined' ? document : undefined)
+
+  onMount(() => {
+    const element = target.value
+    const doc = element?.ownerDocument ?? runtimeDocument
+    const view = doc?.defaultView
+
+    if (!element) {
+      return
+    }
+
+    const update = () => {
+      const next = readBoundingClientRect(element)
+      if (areBoundingClientRectsEqual(rect.value, next)) {
+        return
+      }
+      rect.value = next
+    }
+
+    update()
+    doc?.addEventListener('scroll', update, { capture: true, passive: true })
+    view?.addEventListener('scroll', update, { passive: true })
+    view?.addEventListener('resize', update)
+
+    let resizeObserver: ResizeObserver | null = null
+    if (typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(update)
+      resizeObserver.observe(element)
+    }
+
+    onCleanup(() => {
+      doc?.removeEventListener('scroll', update, true)
+      view?.removeEventListener('scroll', update)
+      view?.removeEventListener('resize', update)
+      resizeObserver?.disconnect()
+    })
+  })
+
+  return rect
+}
+
+export const useBoudingClientRect = useBoundingClientRect
diff --git a/packages/eclipsa/web-utils/use-scroll.ts b/packages/eclipsa/web-utils/use-scroll.ts
new file mode 100644
index 0000000..55be511
--- /dev/null
+++ b/packages/eclipsa/web-utils/use-scroll.ts
@@ -0,0 +1,65 @@
+import { getRuntimeContainer } from '../core/runtime.ts'
+import { onCleanup, onMount, useSignal, type Signal } from '../core/signal.ts'
+
+export interface ScrollPosition {
+  x: number
+  y: number
+}
+
+export type ScrollTargetSignal<T extends Element = Element> = Signal<T | undefined>
+
+const readDocumentScrollPosition = (doc: Document) => {
+  const scrollingElement =
+    doc.scrollingElement ??
+    (doc as Document & { documentElement?: Element | null }).documentElement ??
+    doc.body
+  const view = doc.defaultView
+
+  return {
+    x: view?.scrollX ?? view?.pageXOffset ?? scrollingElement?.scrollLeft ?? 0,
+    y: view?.scrollY ?? view?.pageYOffset ?? scrollingElement?.scrollTop ?? 0,
+  }
+}
+
+const readElementScrollPosition = (element: Element) => ({
+  x: element.scrollLeft ?? 0,
+  y: element.scrollTop ?? 0,
+})
+
+export const useScroll = <T extends Element = Element>(
+  target?: ScrollTargetSignal<T>,
+): Signal<ScrollPosition> => {
+  const position = useSignal<ScrollPosition>({
+    x: 0,
+    y: 0,
+  })
+  const runtimeDocument =
+    getRuntimeContainer()?.doc ?? (typeof document !== 'undefined' ? document : undefined)
+
+  onMount(() => {
+    const doc = target?.value?.ownerDocument ?? runtimeDocument
+    if (!doc) {
+      return
+    }
+
+    const scrollTarget = target?.value
+    const eventTarget = scrollTarget ?? doc
+    const update = () => {
+      const next = scrollTarget
+        ? readElementScrollPosition(scrollTarget)
+        : readDocumentScrollPosition(doc)
+      if (position.value.x === next.x && position.value.y === next.y) {
+        return
+      }
+      position.value = next
+    }
+
+    update()
+    eventTarget.addEventListener('scroll', update, { passive: true })
+    onCleanup(() => {
+      eventTarget.removeEventListener('scroll', update)
+    })
+  })
+
+  return position
+}
diff --git a/packages/eclipsa/web-utils/use-window-size.ts b/packages/eclipsa/web-utils/use-window-size.ts
new file mode 100644
index 0000000..948bd11
--- /dev/null
+++ b/packages/eclipsa/web-utils/use-window-size.ts
@@ -0,0 +1,44 @@
+import { getRuntimeContainer } from '../core/runtime.ts'
+import { onCleanup, onMount, useSignal, type Signal } from '../core/signal.ts'
+
+export interface WindowSize {
+  height: number
+  width: number
+}
+
+const readWindowSize = (view: Window) => ({
+  height: view.innerHeight ?? 0,
+  width: view.innerWidth ?? 0,
+})
+
+export const useWindowSize = (): Signal<WindowSize> => {
+  const windowSize = useSignal<WindowSize>({
+    height: 0,
+    width: 0,
+  })
+  const runtimeWindow =
+    getRuntimeContainer()?.doc?.defaultView ?? (typeof window !== 'undefined' ? window : undefined)
+
+  onMount(() => {
+    const view = runtimeWindow
+    if (!view) {
+      return
+    }
+
+    const update = () => {
+      const next = readWindowSize(view)
+      if (windowSize.value.width === next.width && windowSize.value.height === next.height) {
+        return
+      }
+      windowSize.value = next
+    }
+
+    update()
+    view.addEventListener('resize', update)
+    onCleanup(() => {
+      view.removeEventListener('resize', update)
+    })
+  })
+
+  return windowSize
+}
diff --git a/packages/image/client.d.ts b/packages/image/client.d.ts
index d0f9a88..3858534 100644
--- a/packages/image/client.d.ts
+++ b/packages/image/client.d.ts
@@ -1,39 +1,39 @@
-declare module '*.avif?eclipsa-image*' {
+declare module '*.avif?eclipsa-image' {
   import type { ImageSource } from '@eclipsa/image'
 
   const image: ImageSource
   export default image
 }
 
-declare module '*.jpeg?eclipsa-image*' {
+declare module '*.jpeg?eclipsa-image' {
   import type { ImageSource } from '@eclipsa/image'
 
   const image: ImageSource
   export default image
 }
 
-declare module '*.jpg?eclipsa-image*' {
+declare module '*.jpg?eclipsa-image' {
   import type { ImageSource } from '@eclipsa/image'
 
   const image: ImageSource
   export default image
 }
 
-declare module '*.png?eclipsa-image*' {
+declare module '*.png?eclipsa-image' {
   import type { ImageSource } from '@eclipsa/image'
 
   const image: ImageSource
   export default image
 }
 
-declare module '*.svg?eclipsa-image*' {
+declare module '*.svg?eclipsa-image' {
   import type { ImageSource } from '@eclipsa/image'
 
   const image: ImageSource
   export default image
 }
 
-declare module '*.webp?eclipsa-image*' {
+declare module '*.webp?eclipsa-image' {
   import type { ImageSource } from '@eclipsa/image'
 
   const image: ImageSource
diff --git a/packages/image/mod.test.tsx b/packages/image/mod.test.ts
similarity index 65%
rename from packages/image/mod.test.tsx
rename to packages/image/mod.test.ts
index c2f5842..c00d8e3 100644
--- a/packages/image/mod.test.tsx
+++ b/packages/image/mod.test.ts
@@ -2,25 +2,24 @@ import * as fs from 'node:fs/promises'
 import * as path from 'node:path'
 import { tmpdir } from 'node:os'
 import sharp from 'sharp'
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import { Image } from './mod.ts'
 import {
+  createBuildAssetUrl,
   createAssetName,
+  eclipsaImage,
   isAllowedImagePath,
   readLocalImage,
   resolveImageWidths,
   toContentType,
 } from './vite.ts'
-
 describe('@eclipsa/image helpers', () => {
   it('keeps configured widths ordered and appends the source width', () => {
     expect(resolveImageWidths(1200, [960, 320, 320, 1600, -5])).toEqual([320, 960, 1200])
   })
-
   it('reads local image metadata', async () => {
     const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-image-'))
     const filePath = path.join(root, 'sample.png')
-
     await sharp({
       create: {
         background: { alpha: 1, b: 200, g: 120, r: 40 },
@@ -31,36 +30,67 @@ describe('@eclipsa/image helpers', () => {
     })
       .png()
       .toFile(filePath)
-
     await expect(readLocalImage(filePath)).resolves.toMatchObject({
       format: 'png',
       height: 600,
       width: 900,
     })
   })
-
   it('returns the correct jpeg mime type', () => {
     expect(toContentType('jpeg')).toBe('image/jpeg')
     expect(toContentType('png')).toBe('image/png')
   })
-
   it('creates distinct emitted asset names for duplicate basenames', () => {
     expect(createAssetName('/tmp/one/hero.png', 320, 'png')).not.toBe(
       createAssetName('/tmp/two/hero.png', 320, 'png'),
     )
   })
+  it('creates public build asset URLs for emitted files', () => {
+    expect(createBuildAssetUrl('assets/example-320w.webp')).toBe('/assets/example-320w.webp')
+    expect(createBuildAssetUrl('/assets/example-320w.webp')).toBe('/assets/example-320w.webp')
+  })
+  it('inlines public build asset URLs in generated build modules', async () => {
+    const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-image-build-'))
+    const filePath = path.join(root, 'sample.png')
+    await sharp({
+      create: {
+        background: { alpha: 1, b: 200, g: 120, r: 40 },
+        channels: 4,
+        height: 600,
+        width: 900,
+      },
+    })
+      .png()
+      .toFile(filePath)
+
+    const plugin = eclipsaImage()
+    plugin.configResolved?.({
+      command: 'build',
+      root,
+      server: { fs: { allow: [] } },
+    } as never)
+
+    const emitFile = vi.fn().mockReturnValue('image-ref')
+    const moduleSource = await plugin.load?.call(
+      { emitFile } as never,
+      `\0eclipsa-image:${filePath}?eclipsa-image`,
+      undefined,
+    )
+    const sourceAssetFileName = `assets/${createAssetName(filePath, 900, 'png')}`
 
+    expect(emitFile).toHaveBeenCalled()
+    expect(moduleSource).toContain(JSON.stringify(createBuildAssetUrl(sourceAssetFileName)))
+    expect(moduleSource).not.toContain('ROLLUP_FILE_URL')
+  })
   it('only serves dev image paths inside the configured allowlist', async () => {
     const root = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-image-root-'))
     const allowed = path.join(root, 'allowed')
     const denied = await fs.mkdtemp(path.join(tmpdir(), 'eclipsa-image-denied-'))
     const allowedFile = path.join(allowed, 'hero.png')
     const deniedFile = path.join(denied, 'hero.png')
-
     await fs.mkdir(allowed, { recursive: true })
     await fs.writeFile(allowedFile, 'ok')
     await fs.writeFile(deniedFile, 'nope')
-
     const config = {
       root,
       server: {
@@ -68,12 +98,10 @@ describe('@eclipsa/image helpers', () => {
           allow: [allowed],
         },
       },
-    } as const
-
-    await expect(isAllowedImagePath(allowedFile, config as any)).resolves.toBe(true)
-    await expect(isAllowedImagePath(deniedFile, config as any)).resolves.toBe(false)
+    }
+    await expect(isAllowedImagePath(allowedFile, config)).resolves.toBe(true)
+    await expect(isAllowedImagePath(deniedFile, config)).resolves.toBe(false)
   })
-
   it('renders img defaults from imported metadata', () => {
     const element = Image({
       alt: 'Preview',
@@ -98,7 +126,6 @@ describe('@eclipsa/image helpers', () => {
         width: 960,
       },
     })
-
     expect(element).toMatchObject({
       props: {
         alt: 'Preview',
diff --git a/packages/image/mod.ts b/packages/image/mod.ts
index 3bd222c..f56e5e9 100644
--- a/packages/image/mod.ts
+++ b/packages/image/mod.ts
@@ -49,29 +49,33 @@ export const Image = ({
   width,
   ...props
 }: ImageProps) => {
-  if (typeof src === 'string') {
-    return createImageElement({
-      ...props,
-      alt,
-      decoding,
-      height,
-      loading,
-      sizes,
-      src,
-      srcset,
-      width,
-    })
-  }
+  const imageProps =
+    typeof src === 'string'
+      ? {
+          ...props,
+          alt,
+          decoding,
+          height,
+          loading,
+          sizes,
+          src,
+          srcset,
+          width,
+        }
+      : {
+          ...props,
+          alt,
+          decoding,
+          height: height ?? src.height,
+          loading,
+          sizes: sizes ?? (src.variants.length > 1 ? '100vw' : undefined),
+          src: src.src,
+          srcset:
+            srcset ?? src.variants.map((variant) => `${variant.src} ${variant.width}w`).join(', '),
+          width: width ?? src.width,
+        }
 
   return createImageElement({
-    ...props,
-    alt,
-    decoding,
-    height: height ?? src.height,
-    loading,
-    sizes: sizes ?? (src.variants.length > 1 ? '100vw' : undefined),
-    src: src.src,
-    srcset: srcset ?? src.variants.map((variant) => `${variant.src} ${variant.width}w`).join(', '),
-    width: width ?? src.width,
+    ...imageProps,
   })
 }
diff --git a/packages/image/package.json b/packages/image/package.json
index ddbb2a5..9a7233e 100644
--- a/packages/image/package.json
+++ b/packages/image/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@eclipsa/image",
-  "private": true,
-  "license": "MIT",
+  "private": false,
   "homepage": "https://github.com/pnsk-lab/eclipsa",
   "bugs": {
     "url": "https://github.com/pnsk-lab/eclipsa/issues"
   },
+  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/pnsk-lab/eclipsa.git",
@@ -46,6 +46,7 @@
     "build": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
     "pack": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
     "test": "vp test --run",
+    "test:coverage": "c8 --reporter=lcov --reporter=json-summary --reporter=text bunx vp test --run",
     "typecheck": "bun x tsc -p ../../tsconfig.json --noEmit"
   },
   "dependencies": {
diff --git a/packages/image/vite.config.ts b/packages/image/vite.config.ts
index 6b58139..7c2ed85 100644
--- a/packages/image/vite.config.ts
+++ b/packages/image/vite.config.ts
@@ -2,7 +2,7 @@ import { defineConfig } from 'vite-plus'
 
 export default defineConfig({
   test: {
-    include: ['*.test.ts', '*.test.tsx'],
+    include: ['*.test.ts'],
     environment: 'node',
   },
   pack: {
diff --git a/packages/image/vite.ts b/packages/image/vite.ts
index e659ff7..5166ad6 100644
--- a/packages/image/vite.ts
+++ b/packages/image/vite.ts
@@ -53,6 +53,7 @@ const splitId = (id: string) => {
 }
 
 const toOutputExtension = (format: string) => (format === 'jpeg' ? 'jpg' : format)
+export const createBuildAssetUrl = (fileName: string) => `/${fileName.replace(/^\/+/, '')}`
 
 export const toContentType = (format: string) => {
   if (format === 'svg') {
@@ -234,31 +235,32 @@ const createBuildModule = (
   filePath: string,
   emitFile: PluginContext['emitFile'],
 ) => {
-  const references = variants.map((variant) =>
+  const entries = variants.map((variant) => {
+    const assetFileName = `assets/${createAssetName(filePath, variant.width, variant.format)}`
     emitFile({
-      fileName: `assets/${createAssetName(filePath, variant.width, variant.format)}`,
+      fileName: assetFileName,
       name: createAssetName(filePath, variant.width, variant.format),
       source: variant.buffer,
       type: 'asset',
-    }),
-  )
+    })
+
+    return {
+      format: variant.format,
+      height: variant.height,
+      src: createBuildAssetUrl(assetFileName),
+      width: variant.width,
+    }
+  })
   const sourceIndex = variants.length - 1
 
-  return `const variants = [
-${variants
-  .map(
-    (variant, index) =>
-      `  { format: ${JSON.stringify(variant.format)}, height: ${variant.height}, src: import.meta.ROLLUP_FILE_URL_${references[index]}, width: ${variant.width} },`,
-  )
-  .join('\n')}
-];
+  return `const variants = ${JSON.stringify(entries)};
 
 export default {
-  format: ${JSON.stringify(variants[sourceIndex]!.format)},
-  height: ${variants[sourceIndex]!.height},
-  src: import.meta.ROLLUP_FILE_URL_${references[sourceIndex]!},
+  format: ${JSON.stringify(entries[sourceIndex]!.format)},
+  height: ${entries[sourceIndex]!.height},
+  src: ${JSON.stringify(entries[sourceIndex]!.src)},
   variants,
-  width: ${variants[sourceIndex]!.width},
+  width: ${entries[sourceIndex]!.width},
 };
 `
 }
@@ -351,7 +353,7 @@ const writeDevImageResponse = async (
 export const eclipsaImage = (options: EclipsaImageOptions = {}): Plugin => {
   let config: ResolvedConfig | null = null
 
-  return {
+  const plugin: Plugin = {
     configResolved(resolvedConfig) {
       config = resolvedConfig
     },
@@ -412,4 +414,6 @@ export const eclipsaImage = (options: EclipsaImageOptions = {}): Plugin => {
       return `${VIRTUAL_IMAGE_PREFIX}${resolved.id}?${params.toString()}`
     },
   }
+
+  return plugin
 }
diff --git a/packages/markdown/markdown-stream.tsx b/packages/markdown/markdown-stream.tsx
new file mode 100644
index 0000000..02f1f75
--- /dev/null
+++ b/packages/markdown/markdown-stream.tsx
@@ -0,0 +1,524 @@
+import type { JSX } from 'eclipsa'
+import { noSerialize, onCleanup, useSignal, useWatch } from 'eclipsa'
+import { __eclipsaComponent } from 'eclipsa/internal'
+
+type MarkdownBinaryChunk = ArrayBuffer | ArrayBufferView
+
+export type MarkdownChunk = string | MarkdownBinaryChunk
+
+export type MarkdownStreamSource =
+  | AsyncIterable<MarkdownChunk>
+  | Iterable<MarkdownChunk>
+  | MarkdownChunk
+  | ReadableStream<MarkdownChunk>
+  | null
+  | undefined
+
+type MarkdownStreamTag = keyof HTMLElementTagNameMap
+
+export type MarkdownStreamProps<TTag extends MarkdownStreamTag = 'div'> = Omit<
+  JSX.IntrinsicElements[TTag],
+  'children' | 'dangerouslySetInnerHTML'
+> & {
+  as?: TTag
+  onError?: (error: unknown) => void
+  source?: MarkdownStreamSource
+}
+
+const INTERNAL_MARKDOWN_STREAM_PROPS = new Set([
+  'as',
+  'children',
+  'dangerouslySetInnerHTML',
+  'onError',
+  'source',
+])
+
+const escapeHtml = (value: string) =>
+  value
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;')
+
+const escapeAttr = escapeHtml
+
+const MARKDOWN_LINK_REGEX = /\[([^\]\n]+)\]\(((?:[^()\n]+|\([^()\n]*\))+)\)/g
+
+const isBinaryChunk = (value: unknown): value is MarkdownBinaryChunk =>
+  value instanceof ArrayBuffer || ArrayBuffer.isView(value)
+
+const isMarkdownChunk = (value: unknown): value is MarkdownChunk =>
+  typeof value === 'string' || isBinaryChunk(value)
+
+function isAsyncIterableValue<T>(value: unknown): value is AsyncIterable<T> {
+  return (
+    !!value &&
+    typeof value === 'object' &&
+    Symbol.asyncIterator in value &&
+    typeof (value as AsyncIterable<T>)[Symbol.asyncIterator] === 'function'
+  )
+}
+
+function isReadableStreamValue(value: unknown): value is ReadableStream<MarkdownChunk> {
+  return typeof ReadableStream !== 'undefined' && value instanceof ReadableStream
+}
+
+function isSyncIterableValue<T>(value: unknown): value is Iterable<T> {
+  return (
+    !!value &&
+    typeof value === 'object' &&
+    Symbol.iterator in value &&
+    typeof (value as Iterable<T>)[Symbol.iterator] === 'function'
+  )
+}
+
+const toBinaryChunkBytes = (chunk: MarkdownBinaryChunk) =>
+  chunk instanceof ArrayBuffer
+    ? new Uint8Array(chunk)
+    : new Uint8Array(chunk.buffer, chunk.byteOffset, chunk.byteLength)
+
+const decodeChunk = (chunk: MarkdownChunk, decoder: TextDecoder) => {
+  if (typeof chunk === 'string') {
+    return chunk
+  }
+  return decoder.decode(toBinaryChunkBytes(chunk), { stream: true })
+}
+
+const flushChunkDecoder = (decoder: TextDecoder) => decoder.decode()
+
+const sanitizeUrl = (value: string) => {
+  const trimmed = value.trim()
+  if (!trimmed) {
+    return null
+  }
+
+  const normalizedCharacters: string[] = []
+  for (const character of trimmed) {
+    if (character.charCodeAt(0) <= 0x20) {
+      continue
+    }
+    normalizedCharacters.push(character)
+  }
+  const normalized = normalizedCharacters.join('').toLowerCase()
+  if (
+    normalized.startsWith('javascript:') ||
+    normalized.startsWith('vbscript:') ||
+    normalized.startsWith('data:')
+  ) {
+    return null
+  }
+  return trimmed
+}
+
+const createPlaceholderStore = () => {
+  let index = 0
+  const values = new Map<string, string>()
+
+  return {
+    put(value: string) {
+      const token = `\u0000md:${index++}\u0000`
+      values.set(token, value)
+      return token
+    },
+    restore(input: string) {
+      let output = input
+      for (const [token, value] of values) {
+        output = output.split(token).join(value)
+      }
+      return output
+    },
+  }
+}
+
+const renderInlineMarkdown = (input: string): string => {
+  if (!input) {
+    return ''
+  }
+
+  const placeholders = createPlaceholderStore()
+  let value = input
+
+  value = value.replace(/`([^`\n]+)`/g, (_, code: string) =>
+    placeholders.put(`<code>${escapeHtml(code)}</code>`),
+  )
+
+  value = value.replace(MARKDOWN_LINK_REGEX, (_, label: string, href: string) => {
+    const sanitized = sanitizeUrl(href)
+    const renderedLabel = renderInlineMarkdown(label)
+    return placeholders.put(
+      sanitized ? `<a href="${escapeAttr(sanitized)}">${renderedLabel}</a>` : renderedLabel,
+    )
+  })
+
+  value = value.replace(/<((?:https?:\/\/|mailto:|tel:)[^>\s]+)>/g, (_, href: string) =>
+    placeholders.put(`<a href="${escapeAttr(href)}">${escapeHtml(href)}</a>`),
+  )
+
+  let html = escapeHtml(value)
+
+  html = html.replace(/\*\*([^\n]+?)\*\*/g, '<strong>$1</strong>')
+  html = html.replace(/__([^\n]+?)__/g, '<strong>$1</strong>')
+  html = html.replace(/(^|[^*])\*([^*\n]+)\*(?!\*)/g, '$1<em>$2</em>')
+  html = html.replace(/(^|[^_])_([^_\n]+)_(?!_)/g, '$1<em>$2</em>')
+  html = html.replaceAll('\n', '<br />')
+
+  return placeholders.restore(html)
+}
+
+const isBlankLine = (line: string) => line.trim().length === 0
+
+const matchHeadingLine = (line: string) => line.match(/^ {0,3}(#{1,6})[ \t]+(.+?)\s*#*\s*$/)
+
+const matchFenceStart = (line: string) => line.match(/^ {0,3}(`{3,}|~{3,})(.*)$/)
+
+const isHorizontalRuleLine = (line: string) =>
+  /^ {0,3}(?:([-*_])[ \t]*(?:\1[ \t]*){2,})$/.test(line)
+
+const isBlockquoteLine = (line: string) => /^ {0,3}> ?/.test(line)
+
+const isOrderedListLine = (line: string) => /^ {0,3}\d+\.[ \t]+/.test(line)
+
+const isUnorderedListLine = (line: string) => /^ {0,3}[-+*][ \t]+/.test(line)
+
+const isParagraphBoundary = (line: string) =>
+  isBlankLine(line) ||
+  !!matchHeadingLine(line) ||
+  !!matchFenceStart(line) ||
+  isHorizontalRuleLine(line) ||
+  isBlockquoteLine(line) ||
+  isOrderedListLine(line) ||
+  isUnorderedListLine(line)
+
+const renderCodeFence = (
+  lines: string[],
+  startIndex: number,
+  fence: string,
+  info: string,
+): { html: string; nextIndex: number } => {
+  const marker = fence[0] ?? '`'
+  const closingPattern = new RegExp(`^ {0,3}${marker}{${fence.length},}\\s*$`)
+  const body: string[] = []
+  let index = startIndex + 1
+
+  while (index < lines.length) {
+    const line = lines[index] ?? ''
+    if (closingPattern.test(line)) {
+      index += 1
+      break
+    }
+    body.push(line)
+    index += 1
+  }
+
+  const language = info.trim().split(/\s+/, 1)[0] ?? ''
+  const languageAttr = language
+    ? ` class="language-${escapeAttr(language)}" data-language="${escapeAttr(language)}"`
+    : ''
+
+  return {
+    html: `<pre><code${languageAttr}>${escapeHtml(body.join('\n'))}</code></pre>`,
+    nextIndex: index,
+  }
+}
+
+const renderList = (
+  lines: string[],
+  startIndex: number,
+  ordered: boolean,
+): { html: string; nextIndex: number } => {
+  const itemPattern = ordered ? /^ {0,3}\d+\.[ \t]+(.*)$/ : /^ {0,3}[-+*][ \t]+(.*)$/
+  const items: string[] = []
+  let index = startIndex
+
+  while (index < lines.length) {
+    const matched = lines[index]?.match(itemPattern)
+    if (!matched) {
+      break
+    }
+
+    const itemLines = [matched[1] ?? '']
+    index += 1
+
+    while (index < lines.length) {
+      const line = lines[index] ?? ''
+      if (line.match(itemPattern)) {
+        break
+      }
+      if (
+        !line.startsWith(' ') &&
+        !line.startsWith('\t') &&
+        (matchHeadingLine(line) ||
+          matchFenceStart(line) ||
+          isHorizontalRuleLine(line) ||
+          isBlockquoteLine(line))
+      ) {
+        break
+      }
+      if (isBlankLine(line)) {
+        const nextLine = lines[index + 1] ?? ''
+        if (nextLine.match(itemPattern) || isParagraphBoundary(nextLine)) {
+          index += 1
+          break
+        }
+      }
+      itemLines.push(line.replace(/^ {1,4}/, ''))
+      index += 1
+    }
+
+    items.push(`<li>${renderInlineMarkdown(itemLines.join('\n'))}</li>`)
+  }
+
+  const tagName = ordered ? 'ol' : 'ul'
+  return {
+    html: `<${tagName}>${items.join('')}</${tagName}>`,
+    nextIndex: index,
+  }
+}
+
+export const renderMarkdownToHtml = (input: string): string => {
+  const markdown = input.replace(/\r\n?/g, '\n')
+  const lines = markdown.split('\n')
+  const html: string[] = []
+
+  let index = 0
+  while (index < lines.length) {
+    const line = lines[index] ?? ''
+
+    if (isBlankLine(line)) {
+      index += 1
+      continue
+    }
+
+    const heading = matchHeadingLine(line)
+    if (heading) {
+      const level = Math.min(heading[1]?.length ?? 1, 6)
+      html.push(`<h${level}>${renderInlineMarkdown(heading[2] ?? '')}</h${level}>`)
+      index += 1
+      continue
+    }
+
+    const fence = matchFenceStart(line)
+    if (fence) {
+      const rendered = renderCodeFence(lines, index, fence[1] ?? '```', fence[2] ?? '')
+      html.push(rendered.html)
+      index = rendered.nextIndex
+      continue
+    }
+
+    if (isHorizontalRuleLine(line)) {
+      html.push('<hr />')
+      index += 1
+      continue
+    }
+
+    if (isBlockquoteLine(line)) {
+      const quotedLines: string[] = []
+      while (index < lines.length) {
+        const quoted = lines[index] ?? ''
+        if (isBlockquoteLine(quoted)) {
+          quotedLines.push(quoted.replace(/^ {0,3}> ?/, ''))
+          index += 1
+          continue
+        }
+        if (isBlankLine(quoted) && isBlockquoteLine(lines[index + 1] ?? '')) {
+          quotedLines.push('')
+          index += 1
+          continue
+        }
+        break
+      }
+      html.push(`<blockquote>${renderMarkdownToHtml(quotedLines.join('\n'))}</blockquote>`)
+      continue
+    }
+
+    if (isOrderedListLine(line)) {
+      const rendered = renderList(lines, index, true)
+      html.push(rendered.html)
+      index = rendered.nextIndex
+      continue
+    }
+
+    if (isUnorderedListLine(line)) {
+      const rendered = renderList(lines, index, false)
+      html.push(rendered.html)
+      index = rendered.nextIndex
+      continue
+    }
+
+    const paragraphLines = [line]
+    index += 1
+    while (index < lines.length && !isParagraphBoundary(lines[index] ?? '')) {
+      paragraphLines.push(lines[index] ?? '')
+      index += 1
+    }
+    html.push(`<p>${renderInlineMarkdown(paragraphLines.join('\n'))}</p>`)
+  }
+
+  return html.join('')
+}
+
+const decodeStaticMarkdownSource = (source: Iterable<MarkdownChunk> | MarkdownChunk): string => {
+  if (typeof source === 'string') {
+    return source
+  }
+  if (isBinaryChunk(source)) {
+    const decoder = new TextDecoder()
+    return decodeChunk(source, decoder) + flushChunkDecoder(decoder)
+  }
+
+  const decoder = new TextDecoder()
+  let output = ''
+  for (const chunk of source) {
+    if (!isMarkdownChunk(chunk)) {
+      continue
+    }
+    output += decodeChunk(chunk, decoder)
+  }
+  return output + flushChunkDecoder(decoder)
+}
+
+export const collectMarkdownSource = (source: MarkdownStreamSource): string => {
+  if (source === null || source === undefined) {
+    return ''
+  }
+  if (isAsyncIterableValue(source) || isReadableStreamValue(source)) {
+    return ''
+  }
+  if (typeof source === 'string' || isBinaryChunk(source) || isSyncIterableValue(source)) {
+    return decodeStaticMarkdownSource(source)
+  }
+  return ''
+}
+
+async function* iterateReadableStream<T>(stream: ReadableStream<T>) {
+  const reader = stream.getReader()
+  try {
+    while (true) {
+      const next = await reader.read()
+      if (next.done) {
+        return
+      }
+      yield next.value
+    }
+  } finally {
+    reader.releaseLock()
+  }
+}
+
+export const consumeMarkdownSource = async (
+  source: MarkdownStreamSource,
+  onChunk: (chunk: string) => void | Promise<void>,
+) => {
+  if (source === null || source === undefined) {
+    return
+  }
+  if (!isAsyncIterableValue(source) && !isReadableStreamValue(source)) {
+    const staticContent = collectMarkdownSource(source)
+    if (staticContent) {
+      await onChunk(staticContent)
+    }
+    return
+  }
+
+  const decoder = new TextDecoder()
+  const iterable: AsyncIterable<MarkdownChunk> = isReadableStreamValue(source)
+    ? iterateReadableStream(source)
+    : (source as AsyncIterable<MarkdownChunk>)
+  for await (const chunk of iterable) {
+    if (!isMarkdownChunk(chunk)) {
+      continue
+    }
+    const rendered = decodeChunk(chunk, decoder)
+    if (rendered) {
+      await onChunk(rendered)
+    }
+  }
+
+  const remaining = flushChunkDecoder(decoder)
+  if (remaining) {
+    await onChunk(remaining)
+  }
+}
+
+const createElementProps = (rawProps: Record<string, unknown>, getHtml: () => string) => {
+  const nextProps = Object.create(null) as Record<string, unknown>
+  for (const [name, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(rawProps)) as [
+    string,
+    PropertyDescriptor,
+  ][]) {
+    if (INTERNAL_MARKDOWN_STREAM_PROPS.has(name)) {
+      continue
+    }
+    Object.defineProperty(nextProps, name, descriptor)
+  }
+  Object.defineProperty(nextProps, 'dangerouslySetInnerHTML', {
+    configurable: true,
+    enumerable: true,
+    get: getHtml,
+  })
+  return nextProps
+}
+
+function MarkdownStreamBody<TTag extends MarkdownStreamTag = 'div'>(
+  rawProps: MarkdownStreamProps<TTag>,
+): JSX.Element {
+  const markdown = useSignal(collectMarkdownSource(rawProps.source))
+  const state = useSignal(
+    noSerialize({
+      version: 0,
+    }),
+  )
+
+  useWatch(() => {
+    const source = rawProps.source
+    const currentVersion = ++state.value.version
+    markdown.value = collectMarkdownSource(source)
+
+    if (!isAsyncIterableValue(source) && !isReadableStreamValue(source)) {
+      return
+    }
+
+    onCleanup(() => {
+      if (state.value.version === currentVersion) {
+        state.value.version += 1
+      }
+    })
+
+    void consumeMarkdownSource(source, (chunk) => {
+      if (state.value.version !== currentVersion) {
+        return
+      }
+      markdown.value += chunk
+    }).catch((error) => {
+      if (state.value.version !== currentVersion) {
+        return
+      }
+      if (rawProps.onError) {
+        rawProps.onError(error)
+        return
+      }
+      console.error('Failed to consume Markdown stream.', error)
+    })
+  }, [() => rawProps.source])
+
+  const tagName = typeof rawProps.as === 'string' ? rawProps.as : 'div'
+
+  return {
+    isStatic: false,
+    props: createElementProps(rawProps as Record<string, unknown>, () =>
+      renderMarkdownToHtml(markdown.value),
+    ),
+    type: tagName,
+  } satisfies JSX.Element
+}
+
+interface MarkdownStreamComponent {
+  <TTag extends MarkdownStreamTag = 'div'>(props: MarkdownStreamProps<TTag>): JSX.Element
+}
+
+export const MarkdownStream = __eclipsaComponent(
+  MarkdownStreamBody as (props: MarkdownStreamProps) => JSX.Element,
+  '@eclipsa/markdown:MarkdownStream',
+  () => [],
+) as MarkdownStreamComponent
diff --git a/packages/markdown/mod.test.ts b/packages/markdown/mod.test.ts
new file mode 100644
index 0000000..e693fa4
--- /dev/null
+++ b/packages/markdown/mod.test.ts
@@ -0,0 +1,93 @@
+import { jsxDEV } from 'eclipsa/jsx-dev-runtime'
+import { describe, expect, it } from 'vitest'
+import { renderSSR } from 'eclipsa'
+import { MarkdownStream } from './mod.ts'
+import {
+  collectMarkdownSource,
+  consumeMarkdownSource,
+  renderMarkdownToHtml,
+} from './markdown-stream.tsx'
+describe('@eclipsa/markdown', () => {
+  it('renders headings, inline formatting, and lists into safe HTML', () => {
+    expect(
+      renderMarkdownToHtml(
+        '# Hello\n\nParagraph with **bold** and *em* and `code` and [safe](https://example.com).\n\n- one\n- two',
+      ),
+    ).toBe(
+      '<h1>Hello</h1><p>Paragraph with <strong>bold</strong> and <em>em</em> and <code>code</code> and <a href="https://example.com">safe</a>.</p><ul><li>one</li><li>two</li></ul>',
+    )
+  })
+  it('escapes raw HTML and strips unsafe link protocols', () => {
+    expect(renderMarkdownToHtml('<script>alert(1)</script>\n\n[x](javascript:alert(1))')).toBe(
+      '<p>&lt;script&gt;alert(1)&lt;/script&gt;</p><p>x</p>',
+    )
+  })
+  it('keeps balanced parentheses inside markdown link urls', () => {
+    expect(renderMarkdownToHtml('[docs](https://example.com/docs(v2))')).toBe(
+      '<p><a href="https://example.com/docs(v2)">docs</a></p>',
+    )
+  })
+  it('renders unterminated fenced code blocks while the stream is incomplete', () => {
+    expect(renderMarkdownToHtml('```ts\nconst answer = 42')).toBe(
+      '<pre><code class="language-ts" data-language="ts">const answer = 42</code></pre>',
+    )
+  })
+  it('collects synchronous chunk sources with utf-8 decoding', () => {
+    const bytes = new TextEncoder().encode('\u3053\u3093\u306B\u3061\u306F')
+    expect(collectMarkdownSource([bytes.subarray(0, 6), bytes.subarray(6)])).toBe(
+      '\u3053\u3093\u306B\u3061\u306F',
+    )
+  })
+  it('consumes asynchronous chunk sources incrementally', async () => {
+    const bytes = new TextEncoder().encode('\u3053\u3093\u306B\u3061\u306F')
+    const chunks = []
+    await consumeMarkdownSource(
+      (async function* () {
+        yield bytes.subarray(0, 4)
+        yield bytes.subarray(4)
+        yield '\n\n## done'
+      })(),
+      (chunk) => {
+        chunks.push(chunk)
+      },
+    )
+    expect(chunks.join('')).toBe('\u3053\u3093\u306B\u3061\u306F\n\n## done')
+  })
+  it('consumes ReadableStream chunk sources incrementally', async () => {
+    const bytes = new TextEncoder().encode('\u3053\u3093\u306B\u3061\u306F')
+    const chunks = []
+    const stream = new ReadableStream({
+      start(controller) {
+        controller.enqueue(bytes.subarray(0, 4))
+        controller.enqueue(bytes.subarray(4))
+        controller.enqueue('\n\n## done')
+        controller.close()
+      },
+    })
+    await consumeMarkdownSource(stream, (chunk) => {
+      chunks.push(chunk)
+    })
+    expect(chunks.join('')).toBe('\u3053\u3093\u306B\u3061\u306F\n\n## done')
+  })
+  it('renders static markdown sources through the public component', () => {
+    const { html, payload } = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(
+        MarkdownStream,
+        { as: 'article', class: 'prose', source: '# Hello\n\nWorld' },
+        void 0,
+        false,
+        {
+          fileName: 'packages/markdown/mod.test.ts',
+          lineNumber: 85,
+          columnNumber: 7,
+        },
+      ),
+    )
+    expect(html).toContain('<article class="prose"><h1>Hello</h1><p>World</p></article>')
+    expect(
+      Object.values(payload.components).some(
+        (component) => component.symbol === '@eclipsa/markdown:MarkdownStream',
+      ),
+    ).toBe(true)
+  })
+})
diff --git a/packages/markdown/mod.ts b/packages/markdown/mod.ts
new file mode 100644
index 0000000..3d8e081
--- /dev/null
+++ b/packages/markdown/mod.ts
@@ -0,0 +1,6 @@
+export {
+  MarkdownStream,
+  type MarkdownChunk,
+  type MarkdownStreamProps,
+  type MarkdownStreamSource,
+} from './markdown-stream.tsx'
diff --git a/packages/markdown/package.json b/packages/markdown/package.json
new file mode 100644
index 0000000..4b02c9e
--- /dev/null
+++ b/packages/markdown/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@eclipsa/markdown",
+  "version": "0.0.0",
+  "private": false,
+  "homepage": "https://github.com/pnsk-lab/eclipsa",
+  "bugs": {
+    "url": "https://github.com/pnsk-lab/eclipsa/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pnsk-lab/eclipsa.git",
+    "directory": "packages/markdown"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./mod.ts",
+      "import": "./mod.ts"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "types": "./mod.d.mts",
+        "import": "./mod.mjs"
+      }
+    }
+  },
+  "scripts": {
+    "build": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
+    "pack": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
+    "test": "vp test --run",
+    "test:coverage": "c8 --reporter=lcov --reporter=json-summary --reporter=text bunx vp test --run",
+    "typecheck": "bun x tsc -p ../../tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "eclipsa": "workspace:*"
+  }
+}
diff --git a/packages/markdown/typecheck.txt b/packages/markdown/typecheck.txt
new file mode 100644
index 0000000..e69de29
diff --git a/packages/markdown/vite-config.test.ts b/packages/markdown/vite-config.test.ts
new file mode 100644
index 0000000..ddce06d
--- /dev/null
+++ b/packages/markdown/vite-config.test.ts
@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest'
+import config from './vite.config.ts'
+
+describe('@eclipsa/markdown vite pack config', () => {
+  it('builds the package entry with declarations', () => {
+    expect(config.pack).toMatchObject({
+      clean: true,
+      dts: true,
+      entry: ['mod.ts'],
+      format: ['esm'],
+      sourcemap: true,
+    })
+  })
+})
diff --git a/packages/markdown/vite.config.ts b/packages/markdown/vite.config.ts
new file mode 100644
index 0000000..6001710
--- /dev/null
+++ b/packages/markdown/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite-plus'
+
+export default defineConfig({
+  test: {
+    include: ['*.test.ts'],
+    environment: 'node',
+  },
+  pack: {
+    entry: ['mod.ts'],
+    dts: true,
+    format: ['esm'],
+    clean: true,
+    sourcemap: true,
+  },
+})
diff --git a/packages/motion/animate.ts b/packages/motion/animate.ts
new file mode 100644
index 0000000..626b101
--- /dev/null
+++ b/packages/motion/animate.ts
@@ -0,0 +1,289 @@
+import { easeIn, easeInOut, easeOut, type Easing } from 'motion-utils'
+import {
+  MotionValue,
+  isMotionValue,
+  stagger as staggerValue,
+  delay as delayValue,
+  spring,
+} from 'motion-dom'
+
+export type MotionAnimationTarget =
+  | Element
+  | Element[]
+  | NodeListOf<Element>
+  | MotionValue<number>
+  | string
+  | null
+  | undefined
+
+export type MotionKeyframes = Record<string, string | number>
+
+export interface MotionAnimateOptions {
+  delay?: number
+  duration?: number
+  ease?: Easing | string
+  onComplete?: () => void
+}
+
+export interface MotionAnimationControls {
+  cancel(): void
+  complete(): void
+  finished: Promise<void>
+  pause(): void
+  play(): void
+  stop(): void
+}
+
+const WAAPI_EASING = {
+  easeIn,
+  easeInOut,
+  easeOut,
+}
+
+const isBrowser = () => typeof document !== 'undefined' && typeof window !== 'undefined'
+
+const isElement = (value: unknown): value is Element =>
+  !!value && typeof value === 'object' && 'nodeType' in value
+
+const resolveElements = (target: MotionAnimationTarget, scope?: Element | null): Element[] => {
+  if (!target) {
+    return []
+  }
+  if (typeof target === 'string') {
+    const root = scope ?? (isBrowser() ? document : null)
+    return root ? [...root.querySelectorAll(target)] : []
+  }
+  if (isElement(target)) {
+    return [target]
+  }
+  if (target instanceof MotionValue) {
+    return []
+  }
+  if (typeof NodeList !== 'undefined' && target instanceof NodeList) {
+    return [...target]
+  }
+  return Array.isArray(target) ? target.filter(isElement) : []
+}
+
+const toCssValue = (name: string, value: string | number) => {
+  if (typeof value !== 'number') {
+    return String(value)
+  }
+  if (
+    name === 'opacity' ||
+    name === 'scale' ||
+    name === 'scaleX' ||
+    name === 'scaleY' ||
+    name === 'scaleZ' ||
+    name === 'zIndex' ||
+    name.startsWith('--')
+  ) {
+    return String(value)
+  }
+  return `${value}px`
+}
+
+const resolveEasing = (ease: MotionAnimateOptions['ease']) => {
+  if (typeof ease === 'string') {
+    return ease in WAAPI_EASING ? ease : ease
+  }
+  if (
+    Array.isArray(ease) &&
+    ease.length === 4 &&
+    ease.every((entry) => typeof entry === 'number')
+  ) {
+    return `cubic-bezier(${ease.join(',')})`
+  }
+  if (typeof ease === 'function') {
+    return 'ease'
+  }
+  return 'ease'
+}
+
+const createNoopControls = (onComplete?: () => void): MotionAnimationControls => {
+  const finished = Promise.resolve().then(() => {
+    onComplete?.()
+  })
+  return {
+    cancel() {},
+    complete() {
+      onComplete?.()
+    },
+    finished,
+    pause() {},
+    play() {},
+    stop() {},
+  }
+}
+
+const createMotionValueControls = (
+  value: MotionValue<number>,
+  keyframes: string | number,
+  options?: MotionAnimateOptions,
+): MotionAnimationControls => {
+  if (typeof keyframes !== 'number') {
+    value.set(Number.parseFloat(String(keyframes)) || 0)
+    return createNoopControls(options?.onComplete)
+  }
+  const from = value.get()
+  const to = keyframes
+  const durationMs = Math.max(1, (options?.duration ?? 0.3) * 1000)
+  const startTime = Date.now()
+  let cancelled = false
+  let frameId = 0
+
+  const finished = new Promise<void>((resolve) => {
+    const step = () => {
+      if (cancelled) {
+        resolve()
+        return
+      }
+      const elapsed = Date.now() - startTime
+      const progress = Math.min(1, elapsed / durationMs)
+      value.set(from + (to - from) * progress)
+      if (progress >= 1) {
+        options?.onComplete?.()
+        resolve()
+        return
+      }
+      frameId = requestAnimationFrame(step)
+    }
+    frameId = requestAnimationFrame(step)
+  })
+
+  return {
+    cancel() {
+      cancelled = true
+      cancelAnimationFrame(frameId)
+    },
+    complete() {
+      value.set(to)
+      options?.onComplete?.()
+    },
+    finished,
+    pause() {},
+    play() {},
+    stop() {
+      cancelled = true
+      cancelAnimationFrame(frameId)
+    },
+  }
+}
+
+const createElementControls = (
+  elements: Element[],
+  keyframes: MotionKeyframes,
+  options?: MotionAnimateOptions,
+): MotionAnimationControls => {
+  if (
+    elements.length === 0 ||
+    !elements.every((element) => typeof element.animate === 'function')
+  ) {
+    for (const element of elements) {
+      const typed = element as HTMLElement | SVGElement
+      for (const [name, value] of Object.entries(keyframes)) {
+        if (name.startsWith('--') && 'style' in typed) {
+          typed.style.setProperty(name, String(value))
+          continue
+        }
+        ;(typed as HTMLElement).style.setProperty(name, toCssValue(name, value))
+      }
+    }
+    return createNoopControls(options?.onComplete)
+  }
+
+  const animations = elements.map((element) => {
+    const computed =
+      typeof getComputedStyle === 'function'
+        ? getComputedStyle(element as Element)
+        : (null as CSSStyleDeclaration | null)
+    const fromFrame: Record<string, string> = {}
+    const toFrame: Record<string, string> = {}
+    for (const [name, value] of Object.entries(keyframes)) {
+      const resolved = toCssValue(name, value)
+      fromFrame[name] =
+        computed?.getPropertyValue(name) || (element as HTMLElement).style.getPropertyValue(name)
+      toFrame[name] = resolved
+    }
+    return element.animate([fromFrame, toFrame], {
+      delay: (options?.delay ?? 0) * 1000,
+      duration: (options?.duration ?? 0.3) * 1000,
+      easing: resolveEasing(options?.ease),
+      fill: 'forwards',
+    })
+  })
+
+  const finished = Promise.all(
+    animations.map((animation) => animation.finished.catch(() => undefined)),
+  ).then(() => {
+    options?.onComplete?.()
+  })
+
+  return {
+    cancel() {
+      for (const animation of animations) {
+        animation.cancel()
+      }
+    },
+    complete() {
+      for (const animation of animations) {
+        animation.finish()
+      }
+    },
+    finished,
+    pause() {
+      for (const animation of animations) {
+        animation.pause()
+      }
+    },
+    play() {
+      for (const animation of animations) {
+        animation.play()
+      }
+    },
+    stop() {
+      for (const animation of animations) {
+        animation.cancel()
+      }
+    },
+  }
+}
+
+export const animate = (
+  target: MotionAnimationTarget,
+  keyframes: MotionKeyframes | string | number,
+  options?: MotionAnimateOptions,
+): MotionAnimationControls => {
+  if (isMotionValue(target)) {
+    return createMotionValueControls(
+      target as MotionValue<number>,
+      keyframes as string | number,
+      options,
+    )
+  }
+  const elements = resolveElements(target)
+  if (!isBrowser()) {
+    return createNoopControls(options?.onComplete)
+  }
+  if (typeof keyframes !== 'object' || !keyframes) {
+    return createNoopControls(options?.onComplete)
+  }
+  return createElementControls(elements, keyframes, options)
+}
+
+export const createScopedAnimate =
+  (scope: Element | null | undefined) =>
+  (
+    target: MotionAnimationTarget,
+    keyframes: MotionKeyframes | string | number,
+    options?: MotionAnimateOptions,
+  ) =>
+    typeof target === 'string'
+      ? createElementControls(
+          resolveElements(target, scope ?? null),
+          keyframes as MotionKeyframes,
+          options,
+        )
+      : animate(target, keyframes, options)
+
+export { delayValue as delay, spring, staggerValue as stagger }
diff --git a/packages/motion/hooks.ts b/packages/motion/hooks.ts
new file mode 100644
index 0000000..c79f8b8
--- /dev/null
+++ b/packages/motion/hooks.ts
@@ -0,0 +1,249 @@
+import { onMount, onCleanup, useSignal, useWatch, type Signal } from 'eclipsa'
+import {
+  MotionValue,
+  mapValue,
+  motionValue,
+  springValue,
+  time,
+  transformValue,
+  type TransformOptions,
+} from 'motion-dom'
+import { createScopedAnimate } from './animate.ts'
+
+export interface DragControls {
+  start(event: PointerEvent | MouseEvent | TouchEvent): void
+  subscribe(start: (event: PointerEvent | MouseEvent | TouchEvent) => void): () => void
+}
+
+export const useMotionValue = <T>(initial: T) => motionValue(initial)
+
+export function useTransform<O>(transform: () => O): MotionValue<O>
+export function useTransform<O>(
+  inputValue: MotionValue<number>,
+  inputRange: number[],
+  outputRange: O[],
+  options?: TransformOptions<O>,
+): MotionValue<O>
+export function useTransform<O>(
+  inputOrTransform: MotionValue<number> | (() => O),
+  inputRange?: number[],
+  outputRange?: O[],
+  options?: TransformOptions<O>,
+): MotionValue<O> {
+  if (typeof inputOrTransform === 'function') {
+    return transformValue(inputOrTransform)
+  }
+  return mapValue(inputOrTransform, inputRange ?? [0, 1], outputRange ?? ([] as O[]), options)
+}
+
+export const useSpring = <T extends string | number>(
+  source: T | MotionValue<T>,
+  options?: Parameters<typeof springValue>[1],
+) => springValue(source, options)
+
+export const useVelocity = (value: MotionValue<number>) => transformValue(() => value.getVelocity())
+
+export const useMotionTemplate = (
+  strings: TemplateStringsArray,
+  ...values: Array<string | number | MotionValue<string | number>>
+) =>
+  transformValue(() =>
+    strings.reduce((result, segment, index) => {
+      const value = values[index]
+      if (value === undefined) {
+        return result + segment
+      }
+      return result + segment + (value instanceof MotionValue ? String(value.get()) : String(value))
+    }, ''),
+  )
+
+export const useTime = () => {
+  const value = motionValue(time.now())
+  onMount(() => {
+    let frameId = 0
+    const tick = () => {
+      value.set(time.now())
+      frameId = requestAnimationFrame(tick)
+    }
+    frameId = requestAnimationFrame(tick)
+    onCleanup(() => cancelAnimationFrame(frameId))
+  })
+  return value
+}
+
+export const useAnimationFrame = (callback: (time: number, delta: number) => void) => {
+  onMount(() => {
+    let frameId = 0
+    let previous = time.now()
+    const tick = () => {
+      const current = time.now()
+      callback(current, current - previous)
+      previous = current
+      frameId = requestAnimationFrame(tick)
+    }
+    frameId = requestAnimationFrame(tick)
+    onCleanup(() => cancelAnimationFrame(frameId))
+  })
+}
+
+export const useMotionValueEvent = <T, EventName extends Parameters<MotionValue<T>['on']>[0]>(
+  value: MotionValue<T>,
+  eventName: EventName,
+  callback: Parameters<MotionValue<T>['on']>[1],
+) => {
+  onMount(() => {
+    // Prime derived motion values so change subscriptions receive upstream updates.
+    value.get()
+    const cleanup = value.on(eventName, callback as never)
+    onCleanup(cleanup)
+  })
+}
+
+export const useMotionValueSignal = <T>(value: MotionValue<T>): Signal<T> => {
+  const mirrored = useSignal<T>(value.get())
+
+  useMotionValueEvent(value, 'change', (nextValue) => {
+    mirrored.value = nextValue as T
+  })
+
+  return mirrored
+}
+
+export const useReducedMotion = (): Signal<boolean> => {
+  const reduced = useSignal(false)
+  onMount(() => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return
+    }
+    const media = window.matchMedia('(prefers-reduced-motion: reduce)')
+    const update = () => {
+      reduced.value = media.matches
+    }
+    update()
+    media.addEventListener?.('change', update)
+    onCleanup(() => media.removeEventListener?.('change', update))
+  })
+  return reduced
+}
+
+type TargetSignal = Signal<Element | undefined> | Element | null | undefined
+
+const resolveTargetElement = (target: TargetSignal) =>
+  target && typeof target === 'object' && 'value' in target
+    ? (target.value as Element | undefined)
+    : (target ?? undefined)
+
+export const useInView = (
+  target: TargetSignal,
+  options?: IntersectionObserverInit,
+): Signal<boolean> => {
+  const inView = useSignal(false)
+  const targetDependencies =
+    target && typeof target === 'object' && 'value' in target
+      ? [target as Signal<Element | undefined>]
+      : undefined
+
+  useWatch(() => {
+    const element = resolveTargetElement(target)
+    if (!element || typeof IntersectionObserver === 'undefined') {
+      inView.value = !!element
+      return
+    }
+    const observer = new IntersectionObserver((entries) => {
+      inView.value = !!entries[0]?.isIntersecting
+    }, options)
+    observer.observe(element)
+    onCleanup(() => observer.disconnect())
+  }, targetDependencies)
+  return inView
+}
+
+export const useScroll = (options?: {
+  container?: TargetSignal | Window
+}): {
+  scrollX: MotionValue<number>
+  scrollXProgress: MotionValue<number>
+  scrollY: MotionValue<number>
+  scrollYProgress: MotionValue<number>
+} => {
+  const scrollX = motionValue(0)
+  const scrollY = motionValue(0)
+  const scrollXProgress = motionValue(0)
+  const scrollYProgress = motionValue(0)
+
+  onMount(() => {
+    const resolved = options?.container
+    const target =
+      resolved && typeof resolved === 'object' && 'value' in resolved
+        ? resolved.value
+        : (resolved ?? window)
+    if (!target) {
+      return
+    }
+    const update = () => {
+      const element = target instanceof Window ? target.document.documentElement : target
+      const x = target instanceof Window ? target.scrollX : target.scrollLeft
+      const y = target instanceof Window ? target.scrollY : target.scrollTop
+      const maxX = Math.max(
+        0,
+        (element.scrollWidth || 0) -
+          (target instanceof Window ? target.innerWidth : target.clientWidth),
+      )
+      const maxY = Math.max(
+        0,
+        (element.scrollHeight || 0) -
+          (target instanceof Window ? target.innerHeight : target.clientHeight),
+      )
+      scrollX.set(x)
+      scrollY.set(y)
+      scrollXProgress.set(maxX === 0 ? 0 : x / maxX)
+      scrollYProgress.set(maxY === 0 ? 0 : y / maxY)
+    }
+    update()
+    target.addEventListener('scroll', update, { passive: true })
+    if (target instanceof Window) {
+      target.addEventListener('resize', update)
+    }
+    onCleanup(() => {
+      target.removeEventListener('scroll', update)
+      if (target instanceof Window) {
+        target.removeEventListener('resize', update)
+      }
+    })
+  })
+
+  return {
+    scrollX,
+    scrollXProgress,
+    scrollY,
+    scrollYProgress,
+  }
+}
+
+export const useAnimate = (): [
+  Signal<Element | undefined>,
+  ReturnType<typeof createScopedAnimate>,
+] => {
+  const scope = useSignal<Element | undefined>(undefined)
+  return [
+    scope,
+    (target, keyframes, options) => createScopedAnimate(scope.value)(target, keyframes, options),
+  ]
+}
+
+export const useDragControls = (): DragControls => {
+  const listeners = new Set<(event: PointerEvent | MouseEvent | TouchEvent) => void>()
+  return {
+    start(event) {
+      for (const listener of listeners) {
+        listener(event)
+      }
+    },
+    subscribe(start) {
+      listeners.add(start)
+      return () => {
+        listeners.delete(start)
+      }
+    },
+  }
+}
diff --git a/packages/motion/mod.test.ts b/packages/motion/mod.test.ts
new file mode 100644
index 0000000..9dd87a5
--- /dev/null
+++ b/packages/motion/mod.test.ts
@@ -0,0 +1,704 @@
+import { jsxDEV } from 'eclipsa/jsx-dev-runtime'
+import { describe, expect, it } from 'vitest'
+import { renderSSR } from 'eclipsa'
+import { jsxDEV as jsxDEV2 } from '../eclipsa/jsx/jsx-dev-runtime.ts'
+import { __eclipsaComponent } from '../eclipsa/core/internal.ts'
+import {
+  flushDirtyComponents,
+  renderClientInsertable,
+  withRuntimeContainer,
+} from '../eclipsa/core/runtime.ts'
+import { useSignal, useWatch } from '../eclipsa/core/signal.ts'
+import {
+  AnimatePresence,
+  MotionConfig,
+  motion,
+  useInView,
+  useMotionValue,
+  useMotionValueEvent,
+  useMotionValueSignal,
+} from './mod.ts'
+class FakeNode {
+  childNodes = []
+  nodeType = 0
+  ownerDocument = null
+  parentNode = null
+  remove() {
+    if (!this.parentNode) {
+      return
+    }
+    const index = this.parentNode.childNodes.indexOf(this)
+    if (index >= 0) {
+      this.parentNode.childNodes.splice(index, 1)
+    }
+    this.parentNode = null
+  }
+  get nextSibling() {
+    if (!this.parentNode) {
+      return null
+    }
+    const index = this.parentNode.childNodes.indexOf(this)
+    return index >= 0 ? (this.parentNode.childNodes[index + 1] ?? null) : null
+  }
+  get firstChild() {
+    return this.childNodes[0] ?? null
+  }
+  get lastChild() {
+    return this.childNodes.length > 0 ? this.childNodes[this.childNodes.length - 1] : null
+  }
+  get textContent() {
+    return this.childNodes.map((child) => child.textContent ?? '').join('')
+  }
+}
+class FakeText extends FakeNode {
+  constructor(data) {
+    super()
+    this.data = data
+    this.nodeType = 3
+  }
+  get textContent() {
+    return this.data
+  }
+}
+class FakeComment extends FakeNode {
+  constructor(data) {
+    super()
+    this.data = data
+    this.nodeType = 8
+  }
+  get textContent() {
+    return this.data
+  }
+}
+class FakeElement extends FakeNode {
+  constructor(tagName) {
+    super()
+    this.tagName = tagName
+    this.nodeType = 1
+  }
+  attributes = /* @__PURE__ */ new Map()
+  appendChild(node) {
+    node.ownerDocument = this.ownerDocument
+    node.parentNode = this
+    this.childNodes.push(node)
+    return node
+  }
+  insertBefore(node, referenceNode) {
+    node.ownerDocument = this.ownerDocument
+    node.parentNode = this
+    if (!referenceNode) {
+      this.childNodes.push(node)
+      return node
+    }
+    const index = this.childNodes.indexOf(referenceNode)
+    if (index < 0) {
+      this.childNodes.push(node)
+      return node
+    }
+    this.childNodes.splice(index, 0, node)
+    return node
+  }
+  replaceChild(newChild, oldChild) {
+    const index = this.childNodes.indexOf(oldChild)
+    if (index < 0) {
+      return oldChild
+    }
+    newChild.ownerDocument = this.ownerDocument
+    newChild.parentNode = this
+    oldChild.parentNode = null
+    this.childNodes[index] = newChild
+    return oldChild
+  }
+  setAttribute(name, value) {
+    this.attributes.set(name, value)
+  }
+  removeAttribute(name) {
+    this.attributes.delete(name)
+  }
+  getAttribute(name) {
+    return this.attributes.get(name) ?? null
+  }
+}
+class FakeWindow {
+  addEventListener() {}
+  removeEventListener() {}
+}
+class FakeDocument {
+  body
+  defaultView = new FakeWindow()
+  constructor() {
+    const body = new FakeElement('body')
+    body.ownerDocument = this
+    this.body = body
+  }
+  createComment(data) {
+    const comment = new FakeComment(data)
+    comment.ownerDocument = this
+    return comment
+  }
+  createElement(tagName) {
+    const element = new FakeElement(tagName)
+    element.ownerDocument = this
+    return element
+  }
+  createTextNode(data) {
+    const text = new FakeText(data)
+    text.ownerDocument = this
+    return text
+  }
+  createTreeWalker(root, whatToShow) {
+    const nodes = []
+    const visit = (node) => {
+      const matchesFilter = !whatToShow || whatToShow === 128 ? node instanceof FakeComment : true
+      if (matchesFilter) {
+        nodes.push(node)
+      }
+      for (const child of node.childNodes) {
+        visit(child)
+      }
+    }
+    visit(root)
+    let index = -1
+    const walker = {
+      currentNode: null,
+      nextNode() {
+        index += 1
+        const node = nodes[index] ?? null
+        walker.currentNode = node
+        return node
+      },
+    }
+    return walker
+  }
+}
+class FakeIntersectionObserver {
+  constructor(callback, options) {
+    this.callback = callback
+    this.options = options
+    FakeIntersectionObserver.instances.push(this)
+  }
+  static instances = []
+  observed = /* @__PURE__ */ new Set()
+  disconnect() {
+    this.observed.clear()
+  }
+  observe(element) {
+    this.observed.add(element)
+  }
+  unobserve(element) {
+    this.observed.delete(element)
+  }
+  trigger(isIntersecting) {
+    const target = [...this.observed][0]
+    if (!target) {
+      return
+    }
+    this.callback(
+      [
+        {
+          boundingClientRect: {},
+          intersectionRatio: isIntersecting ? 1 : 0,
+          intersectionRect: {},
+          isIntersecting,
+          rootBounds: null,
+          target,
+          time: 0,
+        },
+      ],
+      this,
+    )
+  }
+}
+const createContainer = () => ({
+  actions: /* @__PURE__ */ new Map(),
+  actionStates: /* @__PURE__ */ new Map(),
+  asyncSignalSnapshotCache: /* @__PURE__ */ new Map(),
+  asyncSignalStates: /* @__PURE__ */ new Map(),
+  atoms: /* @__PURE__ */ new WeakMap(),
+  components: /* @__PURE__ */ new Map(),
+  dirty: /* @__PURE__ */ new Set(),
+  dirtyFlushQueued: false,
+  doc: new FakeDocument(),
+  eventDispatchPromise: null,
+  imports: /* @__PURE__ */ new Map(),
+  interactivePrefetchCheckQueued: false,
+  loaderStates: /* @__PURE__ */ new Map(),
+  loaders: /* @__PURE__ */ new Map(),
+  id: 'motion-test',
+  nextAtomId: 0,
+  nextComponentId: 0,
+  nextElementId: 0,
+  nextScopeId: 0,
+  nextSignalId: 0,
+  pendingSuspensePromises: /* @__PURE__ */ new Set(),
+  resumeReadyPromise: null,
+  rootChildCursor: 0,
+  rootElement: void 0,
+  router: null,
+  scopes: /* @__PURE__ */ new Map(),
+  signals: /* @__PURE__ */ new Map(),
+  symbols: /* @__PURE__ */ new Map(),
+  visibilityCheckQueued: false,
+  visibilityListenersCleanup: null,
+  visibles: /* @__PURE__ */ new Map(),
+  watches: /* @__PURE__ */ new Map(),
+})
+const flushAsync = async () => {
+  await Promise.resolve()
+  await Promise.resolve()
+}
+const queryFakeElements = (root, predicate) => {
+  const matches = []
+  const visit = (node) => {
+    if (node instanceof FakeElement && predicate(node)) {
+      matches.push(node)
+    }
+    for (const child of node.childNodes) {
+      visit(child)
+    }
+  }
+  visit(root)
+  return matches
+}
+const withFakeNodeGlobal = async (fn) => {
+  const OriginalComment = globalThis.Comment
+  const OriginalElement = globalThis.Element
+  const OriginalHTMLElement = globalThis.HTMLElement
+  const OriginalIntersectionObserver = globalThis.IntersectionObserver
+  const OriginalNode = globalThis.Node
+  const OriginalCancelAnimationFrame = globalThis.cancelAnimationFrame
+  const OriginalRequestAnimationFrame = globalThis.requestAnimationFrame
+  const OriginalText = globalThis.Text
+  FakeIntersectionObserver.instances = []
+  globalThis.Comment = FakeComment
+  globalThis.Element = FakeElement
+  globalThis.HTMLElement = FakeElement
+  globalThis.IntersectionObserver = FakeIntersectionObserver
+  globalThis.Node = FakeNode
+  globalThis.requestAnimationFrame = (callback) => setTimeout(() => callback(0), 0)
+  globalThis.cancelAnimationFrame = (handle) => clearTimeout(handle)
+  globalThis.Text = FakeText
+  try {
+    await fn()
+  } finally {
+    globalThis.Comment = OriginalComment
+    globalThis.Element = OriginalElement
+    globalThis.HTMLElement = OriginalHTMLElement
+    globalThis.IntersectionObserver = OriginalIntersectionObserver
+    globalThis.Node = OriginalNode
+    globalThis.cancelAnimationFrame = OriginalCancelAnimationFrame
+    globalThis.requestAnimationFrame = OriginalRequestAnimationFrame
+    globalThis.Text = OriginalText
+  }
+}
+describe('@eclipsa/motion', () => {
+  it('strips motion-only props from rendered DOM output', () => {
+    const { html } = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(
+        motion.div,
+        {
+          animate: { opacity: 1 },
+          initial: { opacity: 0 },
+          transition: { duration: 0.2 },
+          whileHover: { opacity: 0.8 },
+        },
+        void 0,
+        false,
+        {
+          fileName: 'packages/motion/mod.test.ts',
+          lineNumber: 342,
+          columnNumber: 7,
+        },
+      ),
+    )
+    expect(html).toContain('<div')
+    expect(html).not.toContain('animate=')
+    expect(html).not.toContain('initial=')
+    expect(html).not.toContain('transition=')
+    expect(html).not.toContain('whileHover=')
+  })
+  it('renders the initial pose inline during SSR', () => {
+    const { html } = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(
+        motion.div,
+        { initial: { opacity: 0, x: 20 }, animate: { opacity: 1 } },
+        void 0,
+        false,
+        {
+          fileName: 'packages/motion/mod.test.ts',
+          lineNumber: 359,
+          columnNumber: 7,
+        },
+      ),
+    )
+    expect(html).toContain('opacity: 0; transform: translate3d(20px, 0px, 0px)')
+  })
+  it('renders the animate pose inline during SSR when initial is false', () => {
+    const { html } = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(
+        motion.div,
+        { initial: false, animate: { opacity: 1, x: 0 } },
+        void 0,
+        false,
+        {
+          fileName: 'packages/motion/mod.test.ts',
+          lineNumber: 366,
+          columnNumber: 38,
+        },
+      ),
+    )
+    expect(html).toContain('opacity: 1; transform: translate3d(0px, 0px, 0px)')
+  })
+  it('serializes nested accessor animate targets during SSR', () => {
+    const { html } = renderSSR(() =>
+      jsxDEV2(
+        motion.div,
+        {
+          get animate() {
+            const target = {}
+            Object.defineProperty(target, 'x', {
+              enumerable: true,
+              get() {
+                return 24
+              },
+            })
+            return target
+          },
+        },
+        null,
+        false,
+        {},
+      ),
+    )
+    expect(html).toContain('transform: translate3d(24px, 0px, 0px)')
+  })
+  it('serializes camelCase motion styles to valid CSS property names', () => {
+    const { html } = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(
+        motion.div,
+        { initial: false, animate: { maxHeight: 160, opacity: 1 } },
+        void 0,
+        false,
+        {
+          fileName: 'packages/motion/mod.test.ts',
+          lineNumber: 398,
+          columnNumber: 7,
+        },
+      ),
+    )
+    expect(html).toContain('max-height: 160px')
+    expect(html).toContain('transition-property: max-height, opacity')
+    expect(html).not.toContain('maxHeight:')
+  })
+  it('inherits transition config from MotionConfig', () => {
+    const { html } = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(
+        MotionConfig,
+        {
+          transition: { duration: 0.6 },
+          children: /* @__PURE__ */ jsxDEV(motion.div, { animate: { opacity: 1 } }, void 0, false, {
+            fileName: 'packages/motion/mod.test.ts',
+            lineNumber: 409,
+            columnNumber: 9,
+          }),
+        },
+        void 0,
+        false,
+        {
+          fileName: 'packages/motion/mod.test.ts',
+          lineNumber: 408,
+          columnNumber: 7,
+        },
+      ),
+    )
+    expect(html).toContain('<div')
+  })
+  it('keeps removed keyed children rendered through AnimatePresence until exit support is detected', () => {
+    const { html } = renderSSR(() =>
+      /* @__PURE__ */ jsxDEV(
+        AnimatePresence,
+        {
+          children: /* @__PURE__ */ jsxDEV(motion.div, { exit: { opacity: 0 } }, 'a', false, {
+            fileName: 'packages/motion/mod.test.ts',
+            lineNumber: 419,
+            columnNumber: 9,
+          }),
+        },
+        void 0,
+        false,
+        {
+          fileName: 'packages/motion/mod.test.ts',
+          lineNumber: 418,
+          columnNumber: 7,
+        },
+      ),
+    )
+    expect(html).toContain('<div')
+  })
+  it('tracks ref signals that resolve after the initial render in useInView', async () => {
+    await withFakeNodeGlobal(async () => {
+      let ref
+      const values = []
+      const App = __eclipsaComponent(
+        () => {
+          ref = useSignal()
+          const inView = useInView(ref)
+          useWatch(() => {
+            values.push(inView.value)
+          }, [inView])
+          return jsxDEV2('div', { ref }, null, false, {})
+        },
+        'motion-use-in-view-ref-signal',
+        () => [],
+      )
+      const container = createContainer()
+      container.symbols.set('motion-value-signal-bridge', '/tests/motion-value-signal-bridge.tsx')
+      withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV2(App, {}, null, false, {}), container),
+      )
+      await flushAsync()
+      expect(ref.value).toBeTruthy()
+      expect(FakeIntersectionObserver.instances).toHaveLength(1)
+      expect(values).toEqual([false])
+      FakeIntersectionObserver.instances[0]?.trigger(true)
+      await flushAsync()
+      expect(values).toEqual([false, true])
+    })
+  })
+  it('mirrors direct motion value changes through useMotionValueEvent', async () => {
+    await withFakeNodeGlobal(async () => {
+      let setValue
+      const observed = []
+      const App = __eclipsaComponent(
+        () => {
+          const source = useMotionValue(0)
+          useMotionValueEvent(source, 'change', (value) => {
+            observed.push(value)
+          })
+          setValue = (value) => {
+            source.set(value)
+          }
+          return jsxDEV2('span', { children: 'ready' }, null, false, {})
+        },
+        'motion-use-motion-value-event-direct',
+        () => [],
+      )
+      const container = createContainer()
+      withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV2(App, {}, null, false, {}), container),
+      )
+      await flushAsync()
+      setValue(4)
+      await flushAsync()
+      expect(observed).toEqual([4])
+    })
+  })
+  it('primes lazy motion values before subscribing in useMotionValueEvent', async () => {
+    await withFakeNodeGlobal(async () => {
+      const observed = []
+      let emit
+      const App = __eclipsaComponent(
+        () => {
+          let started = false
+          let listener
+          const lazyValue = {
+            get() {
+              started = true
+              return 0
+            },
+            on(_eventName, next) {
+              if (started) {
+                listener = next
+              }
+              return () => {
+                if (listener === next) {
+                  listener = void 0
+                }
+              }
+            },
+          }
+          emit = (value) => {
+            listener?.(value)
+          }
+          useMotionValueEvent(lazyValue, 'change', (value) => {
+            observed.push(value)
+          })
+          return jsxDEV2('span', { children: 'ready' }, null, false, {})
+        },
+        'motion-use-motion-value-event-lazy',
+        () => [],
+      )
+      const container = createContainer()
+      withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV2(App, {}, null, false, {}), container),
+      )
+      await flushAsync()
+      emit(8)
+      await flushAsync()
+      expect(observed).toEqual([8])
+    })
+  })
+  it('mirrors motion values into signals for ordinary reactive DOM updates', async () => {
+    await withFakeNodeGlobal(async () => {
+      let ref
+      let setRotate
+      let setAngle
+      const AppBody = () => {
+        ref = useSignal()
+        const rotate = useMotionValue(0)
+        const angle = useMotionValue('0deg')
+        const rotateSignal = useMotionValueSignal(rotate)
+        const angleSignal = useMotionValueSignal(angle)
+        setRotate = (value) => {
+          rotate.set(value)
+        }
+        setAngle = (value) => {
+          angle.set(value)
+        }
+        return jsxDEV2(
+          'div',
+          {
+            ref,
+            style: `--angle: ${angleSignal.value}; transform: rotate(${rotateSignal.value}deg)`,
+          },
+          null,
+          false,
+          {},
+        )
+      }
+      const App = __eclipsaComponent(AppBody, 'motion-value-signal-bridge', () => [])
+      const container = createContainer()
+      container.imports.set(
+        'motion-value-signal-bridge',
+        Promise.resolve({
+          default: () => AppBody(),
+        }),
+      )
+      withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV2(App, {}, null, false, {}), container),
+      )
+      await flushAsync()
+      expect(ref.value?.getAttribute('style')).toContain('--angle: 0deg')
+      expect(ref.value?.getAttribute('style')).toContain('transform: rotate(0deg)')
+      setRotate(90)
+      setAngle('90deg')
+      await flushDirtyComponents(container)
+      expect(ref.value?.getAttribute('style')).toContain('--angle: 90deg')
+      expect(ref.value?.getAttribute('style')).toContain('transform: rotate(90deg)')
+    })
+  })
+  it('updates animate props on the client after a dirty flush', async () => {
+    await withFakeNodeGlobal(async () => {
+      let ref
+      let visible
+      const AppBody = () => {
+        ref = useSignal()
+        visible = useSignal(false)
+        return jsxDEV2(
+          motion.div,
+          {
+            ref,
+            get animate() {
+              return { x: visible.value ? 0 : '150%' }
+            },
+          },
+          null,
+          false,
+          {},
+        )
+      }
+      const App = __eclipsaComponent(AppBody, 'motion-animate-prop-watch', () => [])
+      const container = createContainer()
+      container.imports.set(
+        'motion-animate-prop-watch',
+        Promise.resolve({
+          default: () => AppBody(),
+        }),
+      )
+      withRuntimeContainer(container, () =>
+        renderClientInsertable(jsxDEV2(App, {}, null, false, {}), container),
+      )
+      await flushAsync()
+      expect(ref.value?.getAttribute('style')).toContain('transform: translate3d(150%, 0px, 0px)')
+      visible.value = true
+      await flushDirtyComponents(container)
+      expect(ref.value?.getAttribute('style')).toContain('transform: translate3d(0px, 0px, 0px)')
+    })
+  })
+  it('does not duplicate a resumed motion child when the parent boundary reactivates', async () => {
+    await withFakeNodeGlobal(async () => {
+      const ParentBody = () =>
+        jsxDEV2(
+          motion.div,
+          {
+            animate: { opacity: 1 },
+            children: jsxDEV2(
+              'div',
+              {
+                class: 'mx-auto',
+                children: jsxDEV2(
+                  motion.div,
+                  {
+                    animate: { opacity: 1 },
+                    children: [
+                      jsxDEV2('pre', { children: '<div>{count.value}</div>' }, null, false, {}),
+                      jsxDEV2(
+                        'div',
+                        { class: 'text-gray-400', children: 'YOUR CODE' },
+                        null,
+                        false,
+                        {},
+                      ),
+                    ],
+                  },
+                  null,
+                  false,
+                  {},
+                ),
+              },
+              null,
+              false,
+              {},
+            ),
+          },
+          null,
+          false,
+          {},
+        )
+      const Parent = __eclipsaComponent(ParentBody, 'motion-resume-parent', () => [])
+      const container = createContainer()
+      container.imports.set(
+        'motion-resume-parent',
+        Promise.resolve({
+          default: () => ParentBody(),
+        }),
+      )
+      const host = new FakeElement('div')
+      host.ownerDocument = container.doc
+      withRuntimeContainer(container, () => {
+        const nodes = renderClientInsertable(jsxDEV2(Parent, {}, null, false, {}), container)
+        for (const node of nodes) {
+          host.appendChild(node)
+        }
+      })
+      await flushAsync()
+      expect(
+        queryFakeElements(host, (element) => element.textContent === 'YOUR CODE'),
+      ).toHaveLength(1)
+      for (const component of container.components.values()) {
+        component.active = false
+        component.reuseExistingDomOnActivate = true
+        component.reuseProjectionSlotDomOnActivate = false
+      }
+      const parentBoundary = [...container.components.values()].find(
+        (component) => component.symbol === 'motion-resume-parent',
+      )
+      expect(parentBoundary).toBeTruthy()
+      container.dirty.add(parentBoundary.id)
+      await flushDirtyComponents(container)
+      expect(
+        queryFakeElements(host, (element) => element.textContent === 'YOUR CODE'),
+      ).toHaveLength(1)
+    })
+  })
+})
diff --git a/packages/motion/mod.ts b/packages/motion/mod.ts
new file mode 100644
index 0000000..f93e007
--- /dev/null
+++ b/packages/motion/mod.ts
@@ -0,0 +1,43 @@
+export { MotionGlobalConfig } from 'motion-utils'
+export {
+  followValue,
+  mapValue,
+  motionValue,
+  springValue,
+  time,
+  transformValue,
+  type MotionValue,
+  type PanInfo,
+  type SpringOptions,
+  type TransformOptions,
+} from 'motion-dom'
+export { animate, delay, spring, stagger } from './animate.ts'
+export {
+  AnimatePresence,
+  LayoutGroup,
+  MotionConfig,
+  Reorder,
+  m,
+  motion,
+  useIsPresent,
+  usePresence,
+  type MotionConfigProps,
+  type MotionProps,
+} from './motion.tsx'
+export {
+  useAnimate,
+  useAnimationFrame,
+  useDragControls,
+  useInView,
+  useMotionTemplate,
+  useMotionValue,
+  useMotionValueEvent,
+  useMotionValueSignal,
+  useReducedMotion,
+  useScroll,
+  useSpring,
+  useTime,
+  useTransform,
+  useVelocity,
+  type DragControls,
+} from './hooks.ts'
diff --git a/packages/motion/mod.typecheck.tsx b/packages/motion/mod.typecheck.tsx
new file mode 100644
index 0000000..2792894
--- /dev/null
+++ b/packages/motion/mod.typecheck.tsx
@@ -0,0 +1,41 @@
+import type { JSX } from 'eclipsa'
+import { motion } from './mod.ts'
+
+type Equal<Left, Right> =
+  (<T>() => T extends Left ? 1 : 2) extends <T>() => T extends Right ? 1 : 2 ? true : false
+type Expect<T extends true> = T
+
+type MotionDivProps = Parameters<typeof motion.div>[0]
+type MotionAnchorProps = Parameters<typeof motion.a>[0]
+type MotionButtonProps = Parameters<(typeof motion)['button']>[0]
+const MotionSection = motion.create('section')
+
+type _MotionDivRef = Expect<Equal<MotionDivProps['ref'], JSX.IntrinsicElements['div']['ref']>>
+type _MotionAnchorHref = Expect<
+  Equal<MotionAnchorProps['href'], JSX.IntrinsicElements['a']['href']>
+>
+type _MotionButtonType = Expect<
+  Equal<MotionButtonProps['type'], JSX.IntrinsicElements['button']['type']>
+>
+
+;<motion.div
+  animate={{ opacity: 1, x: 12 }}
+  class="card"
+  onClick={(event) => {
+    const currentTarget: HTMLDivElement = event.currentTarget
+    void currentTarget
+  }}
+  ref={{ value: undefined as HTMLDivElement | undefined }}
+/>
+
+;<motion.a href="/docs" rel="noreferrer" />
+
+;<motion.button type="button" />
+
+;<MotionSection class="shell" />
+
+// @ts-expect-error div props should not accept anchor-only attributes.
+;<motion.div href="/broken" />
+
+// @ts-expect-error button type stays constrained to valid button modes.
+;<motion.button type="link" />
diff --git a/packages/motion/motion.tsx b/packages/motion/motion.tsx
new file mode 100644
index 0000000..adf8657
--- /dev/null
+++ b/packages/motion/motion.tsx
@@ -0,0 +1,685 @@
+import {
+  createContext,
+  noSerialize,
+  signal,
+  useContext,
+  useSignal,
+  type JSX,
+  type Signal,
+} from 'eclipsa'
+import { __eclipsaComponent } from 'eclipsa/internal'
+import { MotionValue, type MotionNodeOptions, type PanInfo } from 'motion-dom'
+import type { MotionAnimateOptions } from './animate.ts'
+import type { DragControls } from './hooks.ts'
+
+type MaybeMotionValue<T> = T | MotionValue<T>
+type StyleLike = Record<string, MaybeMotionValue<string | number>> | string | undefined
+
+export interface MotionConfigProps {
+  children?: JSX.Element | JSX.Element[]
+  reducedMotion?: 'always' | 'never' | 'user'
+  transition?: MotionAnimateOptions
+}
+
+interface MotionConfigState {
+  reducedMotion: 'always' | 'never' | 'user'
+  transition: MotionAnimateOptions
+}
+
+interface PresenceContextValue {
+  hasExit: Signal<boolean>
+  isPresent: Signal<boolean>
+  safeToRemove: (() => void) | null
+}
+
+interface LayoutGroupState {
+  id: string
+}
+
+interface ReorderGroupContextValue<T> {
+  axis: 'x' | 'y'
+  onReorder: (values: T[]) => void
+  setDraggedValue: (value: T | null) => void
+  values: T[]
+  draggedValue: Signal<T | null>
+}
+
+type MotionBaseProps = Partial<MotionNodeOptions> & {
+  as?: string
+  children?: JSX.Element | JSX.Element[]
+  dragControls?: DragControls
+  inViewOptions?: IntersectionObserverInit
+  layoutDependency?: unknown
+  style?: StyleLike
+}
+
+export type MotionProps = MotionBaseProps & {
+  ref?: Signal<Element | undefined> | { value?: Element | undefined }
+}
+
+type MotionRenderProps = MotionProps & Record<string, unknown>
+type CustomIntrinsicElementName = `${string}-${string}` | `${string}:${string}`
+type KnownIntrinsicElementName = Exclude<keyof JSX.IntrinsicElements, CustomIntrinsicElementName>
+
+export type MotionIntrinsicProps<TTag extends keyof JSX.IntrinsicElements> = Omit<
+  JSX.IntrinsicElements[TTag],
+  keyof MotionBaseProps | 'children' | 'ref' | 'style'
+> &
+  MotionBaseProps & {
+    children?: JSX.IntrinsicElements[TTag]['children']
+    ref?: JSX.IntrinsicElements[TTag]['ref']
+    style?: JSX.IntrinsicElements[TTag]['style'] | StyleLike
+  }
+
+type MotionComponent<TProps extends object> = (props: TProps) => JSX.Element
+type MotionIntrinsicComponent<TTag extends keyof JSX.IntrinsicElements> = MotionComponent<
+  MotionIntrinsicProps<TTag>
+>
+
+const DEFAULT_CONFIG: MotionConfigState = {
+  reducedMotion: 'user',
+  transition: {
+    duration: 0.3,
+    ease: 'ease',
+  },
+}
+
+const EMPTY_PRESENCE: PresenceContextValue = {
+  hasExit: signal(false),
+  isPresent: signal(true),
+  safeToRemove: null,
+}
+
+const MotionConfigContext = createContext(DEFAULT_CONFIG)
+const LayoutGroupContext = createContext<LayoutGroupState | null>(null)
+const PresenceContext = createContext(EMPTY_PRESENCE)
+const ReorderGroupContext = createContext<ReorderGroupContextValue<unknown> | null>(null)
+const INTERNAL_DEFAULT_TAG_PROP = '__motionDefaultTag'
+const INTERNAL_LIVE_PROPS_PROP = '__motionLiveProps'
+
+const MOTION_PROP_NAMES = new Set([
+  'animate',
+  'custom',
+  'drag',
+  'dragConstraints',
+  'dragControls',
+  'dragDirectionLock',
+  'dragElastic',
+  'dragListener',
+  'dragMomentum',
+  'dragSnapToOrigin',
+  'dragTransition',
+  'exit',
+  'inViewOptions',
+  'initial',
+  'layout',
+  'layoutDependency',
+  'layoutId',
+  'layoutRoot',
+  'layoutScroll',
+  'onAnimationComplete',
+  'onDrag',
+  'onDragEnd',
+  'onDragStart',
+  'onFocusEnd',
+  'onFocusStart',
+  'onHoverEnd',
+  'onHoverStart',
+  'onPan',
+  'onPanEnd',
+  'onPanStart',
+  'onTap',
+  'onTapCancel',
+  'onTapStart',
+  'onViewportEnter',
+  'onViewportLeave',
+  'transformTemplate',
+  'transition',
+  'variants',
+  'whileFocus',
+  'whileHover',
+  'whileInView',
+  'whileTap',
+])
+
+const TRANSFORM_PROP_NAMES = [
+  'x',
+  'y',
+  'z',
+  'scale',
+  'scaleX',
+  'scaleY',
+  'rotate',
+  'rotateX',
+  'rotateY',
+  'skewX',
+  'skewY',
+] as const
+const UNITLESS_STYLES = new Set(['opacity', 'scale', 'scaleX', 'scaleY', 'scaleZ', 'zIndex'])
+
+const isMotionValue = <T,>(value: unknown): value is MotionValue<T> => value instanceof MotionValue
+
+const isPlainObject = (value: unknown): value is Record<string, unknown> => {
+  if (!value || typeof value !== 'object') {
+    return false
+  }
+  const proto = Object.getPrototypeOf(value)
+  return proto === Object.prototype || proto === null
+}
+
+const materializeAccessorValue = (value: unknown): unknown => {
+  if (Array.isArray(value)) {
+    return value.map((entry) => materializeAccessorValue(entry))
+  }
+  if (!isPlainObject(value)) {
+    return value
+  }
+
+  const next = Object.create(null) as Record<string, unknown>
+  for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(value))) {
+    if (descriptor.get) {
+      next[key] = materializeAccessorValue(descriptor.get.call(value))
+      continue
+    }
+    next[key] = materializeAccessorValue(descriptor.value)
+  }
+  return next
+}
+
+const resolveValue = (value: MaybeMotionValue<string | number> | undefined) =>
+  isMotionValue(value) ? value.get() : value
+
+const toCssPropertyName = (name: string) => {
+  if (name.startsWith('--') || name.includes('-')) {
+    return name
+  }
+  return name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`)
+}
+
+const toUnitValue = (name: string, value: string | number | undefined) => {
+  if (value === undefined) {
+    return undefined
+  }
+  if (typeof value !== 'number') {
+    return String(value)
+  }
+  if (UNITLESS_STYLES.has(name) || name.startsWith('--')) {
+    return String(value)
+  }
+  if (name.startsWith('rotate') || name.startsWith('skew')) {
+    return `${value}deg`
+  }
+  return `${value}px`
+}
+
+const buildTransformString = (target: Record<string, string | number | undefined>) => {
+  const parts: string[] = []
+  if (target.x !== undefined || target.y !== undefined || target.z !== undefined) {
+    const x = toUnitValue('x', target.x) ?? '0px'
+    const y = toUnitValue('y', target.y) ?? '0px'
+    const z = toUnitValue('z', target.z) ?? '0px'
+    parts.push(`translate3d(${x}, ${y}, ${z})`)
+  }
+  for (const name of TRANSFORM_PROP_NAMES) {
+    if (name === 'x' || name === 'y' || name === 'z') {
+      continue
+    }
+    const value = target[name]
+    if (value === undefined) {
+      continue
+    }
+    parts.push(`${name}(${toUnitValue(name, value)})`)
+  }
+  return parts.join(' ')
+}
+
+const mergeTargets = (...targets: Array<Record<string, unknown> | null | undefined>) =>
+  targets.reduce<Record<string, unknown>>((result, target) => {
+    if (!target) {
+      return result
+    }
+    for (const [key, value] of Object.entries(target)) {
+      if (value !== undefined && key !== 'transition' && key !== 'transitionEnd') {
+        result[key] = value
+      }
+    }
+    return result
+  }, {})
+
+const resolveVariant = (value: unknown, props: MotionProps): Record<string, unknown> | null => {
+  if (!value || value === true || value === false) {
+    return null
+  }
+  if (Array.isArray(value)) {
+    return mergeTargets(...value.map((entry) => resolveVariant(entry, props)))
+  }
+  if (typeof value === 'string') {
+    const variants = (props.variants ?? null) as Record<string, unknown> | null
+    return variants && typeof variants === 'object'
+      ? (resolveVariant(variants[value], props) ?? {})
+      : null
+  }
+  if (typeof value === 'function') {
+    return resolveVariant(value(props.custom, {}, {}), props)
+  }
+  return typeof value === 'object' ? (value as Record<string, unknown>) : null
+}
+
+const createStyleTarget = (target: Record<string, unknown> | null): Record<string, string> => {
+  const styleTarget: Record<string, string | number | undefined> = {}
+  if (!target) {
+    target = {}
+  }
+  for (const [key, rawValue] of Object.entries(target)) {
+    const value = resolveValue(rawValue as MaybeMotionValue<string | number>)
+    if (
+      value === undefined ||
+      key === 'transition' ||
+      key === 'transitionEnd' ||
+      (typeof value !== 'string' && typeof value !== 'number')
+    ) {
+      continue
+    }
+    styleTarget[key] = value
+  }
+  const transform = buildTransformString(styleTarget)
+  const styleObject: Record<string, string> = {}
+  for (const [key, value] of Object.entries(styleTarget)) {
+    if ((TRANSFORM_PROP_NAMES as readonly string[]).includes(key)) {
+      continue
+    }
+    if (value !== undefined) {
+      styleObject[key] = toUnitValue(key, value) ?? ''
+    }
+  }
+  if (transform) {
+    styleObject.transform = transform
+  }
+  if (target.transitionEnd && typeof target.transitionEnd === 'object') {
+    for (const [key, value] of Object.entries(target.transitionEnd as Record<string, unknown>)) {
+      if (typeof value === 'string' || typeof value === 'number') {
+        styleObject[key] = toUnitValue(key, value) ?? ''
+      }
+    }
+  }
+  return styleObject
+}
+
+const parseStyle = (style: StyleLike): Record<string, string> => {
+  if (!style) {
+    return {}
+  }
+  if (typeof style === 'string') {
+    const result: Record<string, string> = {}
+    for (const part of style.split(';')) {
+      const [rawName, rawValue] = part.split(':')
+      const name = rawName?.trim()
+      const value = rawValue?.trim()
+      if (name && value) {
+        result[name] = value
+      }
+    }
+    return result
+  }
+  const result: Record<string, string> = {}
+  for (const [key, value] of Object.entries(style)) {
+    const resolved = resolveValue(value)
+    if (resolved !== undefined && (typeof resolved === 'string' || typeof resolved === 'number')) {
+      result[toCssPropertyName(key)] = toUnitValue(key, resolved) ?? ''
+    }
+  }
+  return result
+}
+
+const serializeStyle = (style: Record<string, string>) =>
+  Object.entries(style)
+    .filter(([, value]) => value !== '')
+    .map(([name, value]) => `${toCssPropertyName(name)}: ${value}`)
+    .join('; ')
+
+const toCssEasing = (value: MotionAnimateOptions['ease']) => {
+  if (typeof value === 'string') {
+    return value
+  }
+  if (Array.isArray(value) && value.length === 4) {
+    return `cubic-bezier(${value.join(',')})`
+  }
+  return 'ease'
+}
+
+const createTransitionCss = (
+  target: Record<string, string>,
+  transition: MotionAnimateOptions,
+): Record<string, string> =>
+  Object.keys(target).length === 0
+    ? {}
+    : {
+        'transition-delay': `${transition.delay ?? 0}s`,
+        'transition-duration': `${transition.duration ?? 0.3}s`,
+        'transition-property': Object.keys(target).map(toCssPropertyName).join(', '),
+        'transition-timing-function': toCssEasing(transition.ease),
+      }
+
+const resolveTransition = (props: MotionProps, config: MotionConfigState): MotionAnimateOptions => {
+  const own = props.transition
+  if (own && typeof own === 'object') {
+    const transition = own as Record<string, unknown>
+    return {
+      ...config.transition,
+      delay: typeof transition.delay === 'number' ? transition.delay : config.transition.delay,
+      duration:
+        typeof transition.duration === 'number' ? transition.duration : config.transition.duration,
+      ease:
+        typeof transition.ease === 'string' || Array.isArray(transition.ease)
+          ? (transition.ease as MotionAnimateOptions['ease'])
+          : config.transition.ease,
+      onComplete: props.onAnimationComplete as (() => void) | undefined,
+    }
+  }
+  return {
+    ...config.transition,
+    onComplete: props.onAnimationComplete as (() => void) | undefined,
+  }
+}
+
+export const MotionConfig = __eclipsaComponent(
+  (rawProps: MotionConfigProps) => {
+    const { children, reducedMotion, transition } = rawProps
+    const Provider = MotionConfigContext.Provider
+
+    return (
+      <Provider
+        value={{
+          reducedMotion: reducedMotion ?? DEFAULT_CONFIG.reducedMotion,
+          transition: {
+            ...DEFAULT_CONFIG.transition,
+            ...transition,
+          },
+        }}
+      >
+        {children}
+      </Provider>
+    )
+  },
+  '@eclipsa/motion:MotionConfig',
+  () => [],
+)
+
+export const LayoutGroup = __eclipsaComponent(
+  (rawProps: { children?: JSX.Element | JSX.Element[]; id?: string }) => {
+    const { children, id } = rawProps
+    const Provider = LayoutGroupContext.Provider
+
+    return (
+      <Provider
+        value={{
+          id: id ?? 'default',
+        }}
+      >
+        {children}
+      </Provider>
+    )
+  },
+  '@eclipsa/motion:LayoutGroup',
+  () => [],
+)
+
+export const usePresence = () => {
+  const presence = useContext(PresenceContext)
+  return [presence.isPresent.value, presence.safeToRemove ?? (() => {})] as const
+}
+
+export const useIsPresent = () => useContext(PresenceContext).isPresent.value
+
+export const AnimatePresence = __eclipsaComponent(
+  ({ children }: { children?: JSX.Element | JSX.Element[] }) => children as JSX.Element,
+  '@eclipsa/motion:AnimatePresence',
+  () => [],
+)
+
+const MotionRenderer = __eclipsaComponent(
+  (rawProps: MotionRenderProps) => {
+    const motionProps = rawProps ?? {}
+    const baseTag =
+      typeof motionProps.as === 'string'
+        ? motionProps.as
+        : typeof motionProps[INTERNAL_DEFAULT_TAG_PROP] === 'string'
+          ? (motionProps[INTERNAL_DEFAULT_TAG_PROP] as string)
+          : 'div'
+    const config = useContext(MotionConfigContext)
+    const getLiveProps = () =>
+      ((motionProps[INTERNAL_LIVE_PROPS_PROP] as MotionProps | undefined) ??
+        motionProps) as MotionProps
+    const getLiveAnimate = () => getLiveProps().animate as MotionProps['animate']
+    const getLiveInitial = () => getLiveProps().initial as MotionProps['initial']
+    const getLiveStyle = () => getLiveProps().style as MotionProps['style']
+    const getLiveTransition = () => getLiveProps().transition as MotionProps['transition']
+    const getResolvedMotionProps = () =>
+      ({
+        ...motionProps,
+        animate: getLiveAnimate(),
+        initial: getLiveInitial(),
+        style: getLiveStyle(),
+        transition: getLiveTransition(),
+      }) as MotionProps
+    const resolveAnimateTarget = () => {
+      const liveAnimate = getLiveAnimate()
+      return createStyleTarget(resolveVariant(liveAnimate, getResolvedMotionProps()))
+    }
+    const resolveInitialTarget = () =>
+      getLiveInitial() === false
+        ? resolveAnimateTarget()
+        : createStyleTarget(
+            resolveVariant(getLiveInitial() ?? getLiveAnimate(), getResolvedMotionProps()),
+          )
+
+    const forwardedProps: Record<string, unknown> = {}
+    for (const [key, descriptor] of Object.entries(Object.getOwnPropertyDescriptors(motionProps))) {
+      if (
+        MOTION_PROP_NAMES.has(key) ||
+        key === 'as' ||
+        key === 'style' ||
+        key === INTERNAL_DEFAULT_TAG_PROP ||
+        key === INTERNAL_LIVE_PROPS_PROP
+      ) {
+        continue
+      }
+      Object.defineProperty(forwardedProps, key, descriptor)
+    }
+    Object.defineProperty(forwardedProps, 'style', {
+      configurable: true,
+      enumerable: true,
+      get() {
+        const animateTarget = resolveAnimateTarget()
+        const renderInitialStyle =
+          getLiveInitial() === false ? animateTarget : resolveInitialTarget()
+        const resolvedStyle = typeof document !== 'undefined' ? animateTarget : renderInitialStyle
+        const mergedStyle = serializeStyle({
+          ...parseStyle(getLiveStyle()),
+          ...resolvedStyle,
+          ...createTransitionCss(
+            animateTarget,
+            resolveTransition(getResolvedMotionProps(), config),
+          ),
+        })
+        return mergedStyle === '' ? undefined : mergedStyle
+      },
+    })
+
+    return {
+      isStatic: false,
+      props: {
+        ...forwardedProps,
+        children: motionProps.children,
+      },
+      type: baseTag,
+    } as JSX.Element
+  },
+  '@eclipsa/motion:motion',
+  () => [],
+)
+
+const motionRendererCache = new Map<string, MotionComponent<MotionRenderProps>>()
+
+function createMotionRenderer<TTag extends keyof JSX.IntrinsicElements>(
+  defaultTag: TTag,
+): MotionIntrinsicComponent<TTag>
+function createMotionRenderer(defaultTag: string): MotionComponent<MotionRenderProps>
+function createMotionRenderer(defaultTag: string) {
+  const cached = motionRendererCache.get(defaultTag)
+  if (cached) {
+    return cached
+  }
+
+  const renderer: MotionComponent<MotionRenderProps> = (rawProps) => {
+    const props = Object.create(null) as Record<string, unknown>
+    const descriptors = Object.getOwnPropertyDescriptors(rawProps ?? {})
+    for (const [key, descriptor] of Object.entries(descriptors)) {
+      const value = descriptor.get ? descriptor.get.call(rawProps ?? {}) : descriptor.value
+
+      if (key === 'animate' || key === 'initial' || key === 'style' || key === 'transition') {
+        Object.defineProperty(props, key, {
+          configurable: descriptor.configurable ?? true,
+          enumerable: descriptor.enumerable ?? true,
+          value: materializeAccessorValue(value),
+          writable: true,
+        })
+        continue
+      }
+
+      Object.defineProperty(props, key, descriptor)
+    }
+    Object.defineProperty(props, INTERNAL_LIVE_PROPS_PROP, {
+      configurable: true,
+      enumerable: false,
+      value:
+        rawProps && (typeof rawProps === 'object' || typeof rawProps === 'function')
+          ? noSerialize(rawProps)
+          : rawProps,
+      writable: true,
+    })
+    Object.defineProperty(props, INTERNAL_DEFAULT_TAG_PROP, {
+      configurable: true,
+      enumerable: true,
+      value: defaultTag,
+      writable: true,
+    })
+
+    return {
+      isStatic: false,
+      props,
+      type: MotionRenderer,
+    } as JSX.Element
+  }
+
+  motionRendererCache.set(defaultTag, renderer)
+  return renderer
+}
+
+type MotionFactory = {
+  <TTag extends keyof JSX.IntrinsicElements>(tag: TTag): MotionIntrinsicComponent<TTag>
+  <TTag extends string>(tag: TTag): MotionComponent<MotionRenderProps>
+  create<TTag extends keyof JSX.IntrinsicElements>(tag: TTag): MotionIntrinsicComponent<TTag>
+  create<TTag extends string>(tag: TTag): MotionComponent<MotionRenderProps>
+} & {
+  [TTag in KnownIntrinsicElementName]: MotionIntrinsicComponent<TTag>
+}
+
+const motionFactory = ((tag: string) => createMotionRenderer(tag)) as MotionFactory
+motionFactory.create = ((tag: string) => createMotionRenderer(tag)) as MotionFactory['create']
+
+export const motion = new Proxy(motionFactory, {
+  get(target, prop, receiver) {
+    if (prop in target) {
+      return Reflect.get(target, prop, receiver)
+    }
+    return createMotionRenderer(String(prop))
+  },
+}) as MotionFactory
+
+export const m = motion
+
+const ReorderGroup = __eclipsaComponent(
+  (rawProps: {
+    axis?: 'x' | 'y'
+    children?: JSX.Element | JSX.Element[]
+    onReorder: (values: unknown[]) => void
+    values: unknown[]
+  }) => {
+    const { axis, children, onReorder, values } = rawProps
+    const draggedValue = useSignal<unknown | null>(null)
+    const Provider = ReorderGroupContext.Provider
+    return (
+      <Provider
+        value={
+          {
+            axis: axis ?? 'y',
+            draggedValue,
+            onReorder,
+            setDraggedValue: (value) => {
+              draggedValue.value = value
+            },
+            values,
+          } as ReorderGroupContextValue<unknown>
+        }
+      >
+        {children}
+      </Provider>
+    )
+  },
+  '@eclipsa/motion:Reorder.Group',
+  () => [],
+)
+
+const ReorderItem = __eclipsaComponent(
+  (rawProps: MotionProps & { value: unknown }) => {
+    const itemProps = rawProps ?? {}
+    const { as: asValue, onDragStart, value } = itemProps
+    const group = useContext(ReorderGroupContext)
+
+    const handleDragStart = (event: DragEvent) => {
+      group?.setDraggedValue(value)
+      onDragStart?.(event, {
+        delta: { x: 0, y: 0 },
+        offset: { x: 0, y: 0 },
+        point: { x: 0, y: 0 },
+        velocity: { x: 0, y: 0 },
+      } satisfies PanInfo)
+    }
+
+    const handleDrop = (event: DragEvent) => {
+      event.preventDefault()
+      if (!group || group.draggedValue.value === null || group.draggedValue.value === value) {
+        return
+      }
+      const next = [...group.values]
+      const from = next.indexOf(group.draggedValue.value)
+      const to = next.indexOf(value)
+      if (from < 0 || to < 0) {
+        return
+      }
+      const [movedValue] = next.splice(from, 1)
+      next.splice(to, 0, movedValue)
+      group.onReorder(next)
+      group.setDraggedValue(null)
+    }
+
+    const renderer = createMotionRenderer(typeof asValue === 'string' ? asValue : 'div')
+    return renderer({
+      ...itemProps,
+      draggable: true,
+      onDragOver: (event: DragEvent) => event.preventDefault(),
+      onDragStart: handleDragStart,
+      onDrop: handleDrop,
+    })
+  },
+  '@eclipsa/motion:Reorder.Item',
+  () => [],
+)
+
+export const Reorder = {
+  Group: ReorderGroup,
+  Item: ReorderItem,
+}
+
+export { LayoutGroupContext, MotionConfigContext, PresenceContext }
diff --git a/packages/motion/package.json b/packages/motion/package.json
new file mode 100644
index 0000000..5bfe09b
--- /dev/null
+++ b/packages/motion/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@eclipsa/motion",
+  "version": "0.0.0",
+  "private": false,
+  "homepage": "https://github.com/pnsk-lab/eclipsa",
+  "bugs": {
+    "url": "https://github.com/pnsk-lab/eclipsa/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pnsk-lab/eclipsa.git",
+    "directory": "packages/motion"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./mod.ts",
+      "import": "./mod.ts"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "types": "./mod.d.mts",
+        "import": "./mod.mjs"
+      }
+    }
+  },
+  "scripts": {
+    "build": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
+    "pack": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
+    "test": "vp test --run",
+    "test:coverage": "c8 --reporter=lcov --reporter=json-summary --reporter=text bunx vp test --run",
+    "typecheck": "bun x tsc -p ../../tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "eclipsa": "workspace:*",
+    "motion-dom": "12.38.0",
+    "motion-utils": "12.36.0"
+  }
+}
diff --git a/packages/motion/vite-config.test.ts b/packages/motion/vite-config.test.ts
new file mode 100644
index 0000000..47a4fc2
--- /dev/null
+++ b/packages/motion/vite-config.test.ts
@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest'
+import config from './vite.config.ts'
+
+describe('@eclipsa/motion vite pack config', () => {
+  it('builds the package entry with declarations', () => {
+    expect(config.pack).toMatchObject({
+      clean: true,
+      dts: true,
+      entry: ['mod.ts'],
+      format: ['esm'],
+      sourcemap: true,
+    })
+  })
+})
diff --git a/packages/motion/vite.config.ts b/packages/motion/vite.config.ts
new file mode 100644
index 0000000..6001710
--- /dev/null
+++ b/packages/motion/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite-plus'
+
+export default defineConfig({
+  test: {
+    include: ['*.test.ts'],
+    environment: 'node',
+  },
+  pack: {
+    entry: ['mod.ts'],
+    dts: true,
+    format: ['esm'],
+    clean: true,
+    sourcemap: true,
+  },
+})
diff --git a/packages/native-compose/android-compose/.gitignore b/packages/native-compose/android-compose/.gitignore
new file mode 100644
index 0000000..5b3641b
--- /dev/null
+++ b/packages/native-compose/android-compose/.gitignore
@@ -0,0 +1,5 @@
+.gradle/
+build/
+app/build/
+local.properties
+*.iml
diff --git a/packages/native-compose/android-compose/app/build.gradle.kts b/packages/native-compose/android-compose/app/build.gradle.kts
new file mode 100644
index 0000000..c891f07
--- /dev/null
+++ b/packages/native-compose/android-compose/app/build.gradle.kts
@@ -0,0 +1,54 @@
+import org.jetbrains.kotlin.gradle.dsl.JvmTarget
+
+plugins {
+  id("com.android.application")
+  id("org.jetbrains.kotlin.android")
+  id("org.jetbrains.kotlin.plugin.compose")
+}
+
+android {
+  namespace = "dev.eclipsa.nativecompose"
+  compileSdk = 36
+
+  defaultConfig {
+    applicationId = "dev.eclipsa.nativecompose"
+    minSdk = 26
+    targetSdk = 36
+    versionCode = 1
+    versionName = "0.0.0"
+  }
+
+  buildFeatures {
+    compose = true
+  }
+
+  compileOptions {
+    sourceCompatibility = JavaVersion.VERSION_17
+    targetCompatibility = JavaVersion.VERSION_17
+  }
+
+  packaging {
+    resources {
+      excludes += "/META-INF/{AL2.0,LGPL2.1}"
+    }
+  }
+}
+
+kotlin {
+  compilerOptions {
+    jvmTarget.set(JvmTarget.JVM_17)
+  }
+}
+
+dependencies {
+  val composeBom = platform("androidx.compose:compose-bom:2026.03.00")
+
+  implementation(composeBom)
+  androidTestImplementation(composeBom)
+
+  implementation("androidx.activity:activity-compose:1.12.4")
+  implementation("androidx.compose.material3:material3")
+  implementation("androidx.compose.ui:ui")
+  implementation("androidx.compose.ui:ui-tooling-preview")
+  debugImplementation("androidx.compose.ui:ui-tooling")
+}
diff --git a/packages/native-compose/android-compose/app/src/main/AndroidManifest.xml b/packages/native-compose/android-compose/app/src/main/AndroidManifest.xml
new file mode 100644
index 0000000..8866326
--- /dev/null
+++ b/packages/native-compose/android-compose/app/src/main/AndroidManifest.xml
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+  <uses-permission android:name="android.permission.INTERNET" />
+
+  <application
+    android:allowBackup="true"
+    android:label="Eclipsa Native Compose"
+    android:supportsRtl="true"
+    android:usesCleartextTraffic="true">
+    <activity
+      android:exported="true"
+      android:name=".MainActivity">
+      <intent-filter>
+        <action android:name="android.intent.action.MAIN" />
+
+        <category android:name="android.intent.category.LAUNCHER" />
+      </intent-filter>
+    </activity>
+  </application>
+</manifest>
diff --git a/packages/native-compose/android-compose/app/src/main/assets/vite-runner.js b/packages/native-compose/android-compose/app/src/main/assets/vite-runner.js
new file mode 100644
index 0000000..f824af2
--- /dev/null
+++ b/packages/native-compose/android-compose/app/src/main/assets/vite-runner.js
@@ -0,0 +1,222 @@
+const SSR_EXPORTS = '__vite_ssr_exports__'
+const SSR_IMPORT_META = '__vite_ssr_import_meta__'
+const SSR_IMPORT = '__vite_ssr_import__'
+const SSR_DYNAMIC_IMPORT = '__vite_ssr_dynamic_import__'
+const SSR_EXPORT_ALL = '__vite_ssr_exportAll__'
+const SSR_EXPORT_NAME = '__vite_ssr_exportName__'
+const VIRTUAL_NATIVE_DEV_CLIENT = 'virtual:eclipsa-native/dev-client'
+
+const globalState = globalThis
+const moduleCache = new Map()
+
+const runtimeManifest = globalState.__eclipsaNativeDevManifest
+const runtimeBridge = globalState.__eclipsaNativeRuntime
+
+const rewriteRunnerCode = (code) =>
+  code
+    .replaceAll('await __vite_ssr_import__(', '__vite_ssr_import__(')
+    .replaceAll('await __vite_ssr_dynamic_import__(', '__vite_ssr_dynamic_import__(')
+
+const exportAll = (exports, sourceModule) => {
+  if (!sourceModule || exports === sourceModule) {
+    return
+  }
+  for (const key of Object.keys(sourceModule)) {
+    if (key === 'default' || key === '__esModule' || key in exports) {
+      continue
+    }
+    Object.defineProperty(exports, key, {
+      configurable: true,
+      enumerable: true,
+      get: () => sourceModule[key],
+    })
+  }
+}
+
+const exportName = (exports, name, getter) => {
+  Object.defineProperty(exports, name, {
+    configurable: true,
+    enumerable: true,
+    get: getter,
+  })
+}
+
+const invokeRuntime = (name, data) => {
+  const response = JSON.parse(runtimeBridge.invoke(name, JSON.stringify(data)))
+  if (response?.error?.message) {
+    throw new Error(response.error.message)
+  }
+  return response.result
+}
+
+const createModuleRecord = () => ({
+  aliases: new Set(),
+  evaluated: false,
+  evaluating: false,
+  exports: undefined,
+  meta: null,
+})
+
+const setModuleRecord = (record, ...keys) => {
+  for (const key of keys) {
+    if (typeof key === 'string' && key.length > 0) {
+      moduleCache.set(key, record)
+      record.aliases.add(key)
+    }
+  }
+}
+
+const removeModuleRecord = (record) => {
+  for (const key of record.aliases) {
+    moduleCache.delete(key)
+  }
+  record.aliases.clear()
+}
+
+const findModuleRecord = (key) => {
+  const cachedRecord = moduleCache.get(key)
+  if (cachedRecord) {
+    return cachedRecord
+  }
+  for (const record of moduleCache.values()) {
+    if (record.meta?.url === key || record.meta?.id === key || record.meta?.file === key) {
+      return record
+    }
+  }
+  return null
+}
+
+const invalidateModule = (key) => {
+  const record = findModuleRecord(key)
+  if (!record) {
+    return
+  }
+  removeModuleRecord(record)
+}
+
+const resolveModuleFilename = (moduleInfo, url) => moduleInfo?.file ?? moduleInfo?.id ?? url
+
+const resolveModuleDirname = (filename) => {
+  const lastSlash = filename.lastIndexOf('/')
+  return lastSlash >= 0 ? filename.slice(0, lastSlash) : filename
+}
+
+const createImportMeta = (moduleInfo, url) => {
+  const canonicalUrl = moduleInfo?.url ?? url
+  const filename = resolveModuleFilename(moduleInfo, canonicalUrl)
+  return {
+    env: {
+      BASE_URL: '/',
+      DEV: true,
+      MODE: 'development',
+      PROD: false,
+      SSR: true,
+    },
+    filename,
+    dirname: resolveModuleDirname(filename),
+    hot: globalState.__eclipsaNativeCreateHotContext?.(canonicalUrl),
+    resolve(specifier) {
+      return specifier
+    },
+    url: canonicalUrl,
+  }
+}
+
+const importModule = (url, importer) => {
+  const existingRecord = moduleCache.get(url)
+  const moduleInfo = invokeRuntime('fetchModule', [
+    url,
+    importer ?? null,
+    {
+      cached: Boolean(existingRecord?.meta),
+      startOffset: 0,
+    },
+  ])
+
+  if (moduleInfo?.cache && existingRecord?.evaluated) {
+    return existingRecord.exports
+  }
+  if (moduleInfo?.externalize) {
+    throw new Error(`Unsupported external native module: ${moduleInfo.externalize}`)
+  }
+
+  const record = existingRecord ?? createModuleRecord()
+  record.meta = moduleInfo
+  setModuleRecord(record, url, moduleInfo?.id, moduleInfo?.url, moduleInfo?.file)
+  if (!moduleInfo?.cache) {
+    record.evaluated = false
+    record.exports = undefined
+  }
+
+  if (record.evaluated || record.evaluating) {
+    return record.exports
+  }
+
+  if (typeof moduleInfo?.code !== 'string') {
+    throw new Error(`Missing transformed code for native module ${url}`)
+  }
+
+  const canonicalUrl = moduleInfo?.url ?? url
+  const run = new Function(
+    SSR_EXPORTS,
+    SSR_IMPORT_META,
+    SSR_IMPORT,
+    SSR_DYNAMIC_IMPORT,
+    SSR_EXPORT_ALL,
+    SSR_EXPORT_NAME,
+    `"use strict";${rewriteRunnerCode(moduleInfo.code)}`,
+  )
+
+  record.evaluating = true
+  record.exports = Object.create(null)
+  Object.defineProperty(record.exports, Symbol.toStringTag, {
+    configurable: false,
+    enumerable: false,
+    value: 'Module',
+  })
+
+  try {
+    run(
+      record.exports,
+      createImportMeta(moduleInfo, url),
+      (dependency) => importModule(String(dependency), canonicalUrl),
+      (dependency) => importModule(String(dependency), canonicalUrl),
+      (sourceModule) => exportAll(record.exports, sourceModule),
+      (name, getter) => exportName(record.exports, name, getter),
+    )
+    record.evaluated = true
+    return record.exports
+  } finally {
+    record.evaluating = false
+  }
+}
+
+globalState.__eclipsaNativeModuleRunner = {
+  clearCache() {
+    moduleCache.clear()
+  },
+  importModule,
+  invalidateModules(urls) {
+    for (const url of urls) {
+      invalidateModule(String(url))
+    }
+  },
+}
+
+globalState.__eclipsaBoot = () => {
+  if (!runtimeManifest?.entry) {
+    throw new Error('Missing native dev manifest entry.')
+  }
+
+  importModule(VIRTUAL_NATIVE_DEV_CLIENT, null)
+  runtimeBridge.connectHMR((message) => {
+    const payload = JSON.parse(String(message ?? '{}'))
+    const handlePayload = globalState.__eclipsaNativeHandleHmrPayload
+    if (typeof handlePayload !== 'function') {
+      return
+    }
+    Promise.resolve(handlePayload(payload)).catch((error) => {
+      console.error(error)
+    })
+  })
+}
diff --git a/packages/native-compose/android-compose/app/src/main/java/dev/eclipsa/nativecompose/MainActivity.kt b/packages/native-compose/android-compose/app/src/main/java/dev/eclipsa/nativecompose/MainActivity.kt
new file mode 100644
index 0000000..710c115
--- /dev/null
+++ b/packages/native-compose/android-compose/app/src/main/java/dev/eclipsa/nativecompose/MainActivity.kt
@@ -0,0 +1,775 @@
+package dev.eclipsa.nativecompose
+
+import android.annotation.SuppressLint
+import android.os.Bundle
+import android.webkit.JavascriptInterface
+import android.webkit.ValueCallback
+import android.webkit.WebChromeClient
+import android.webkit.WebView
+import android.webkit.WebViewClient
+import androidx.activity.ComponentActivity
+import androidx.activity.compose.setContent
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.items
+import androidx.compose.material3.Button
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedTextField
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Switch
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
+import androidx.compose.runtime.getValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.viewinterop.AndroidView
+import kotlinx.coroutines.CompletableDeferred
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.Dispatchers
+import kotlinx.coroutines.SupervisorJob
+import kotlinx.coroutines.cancel
+import kotlinx.coroutines.launch
+import kotlinx.coroutines.withContext
+import org.json.JSONArray
+import org.json.JSONObject
+import java.io.File
+import java.net.HttpURLConnection
+import java.net.URL
+import java.util.concurrent.atomic.AtomicLong
+import kotlinx.coroutines.flow.MutableStateFlow
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.asStateFlow
+
+private const val DEFAULT_MANIFEST_EXTRA_NAME = "manifestUrl"
+private const val DEFAULT_MANIFEST_PATH_EXTRA_NAME = "manifestPath"
+private const val ANDROID_BRIDGE_NAME = "__eclipsaNativeAndroid"
+
+private data class NativeNode(
+  val id: String,
+  val tag: String,
+  val text: String?,
+  val props: Map<String, String>,
+  val children: List<NativeNode>,
+)
+
+private data class RendererRecord(
+  val childIds: MutableList<String> = mutableListOf(),
+  val props: MutableMap<String, String> = linkedMapOf(),
+  var tag: String,
+  var text: String? = null,
+)
+
+private data class NativeDevManifest(
+  val entry: String,
+  val hmrUrl: String,
+  val rpcUrl: String,
+)
+
+private sealed interface NativeApplicationDescriptor {
+  data class Dev(val manifest: NativeDevManifest) : NativeApplicationDescriptor
+
+  data class Script(val origin: String, val source: String) : NativeApplicationDescriptor
+}
+
+private class ComposeTreeStore {
+  private val lock = Any()
+  private val nextId = AtomicLong()
+  private val records = linkedMapOf<String, RendererRecord>()
+  private val _root = MutableStateFlow<NativeNode?>(null)
+  val root: StateFlow<NativeNode?> = _root.asStateFlow()
+  private var rootNodeId: String? = null
+
+  fun clear() {
+    synchronized(lock) {
+      records.clear()
+      rootNodeId = null
+    }
+    _root.value = null
+  }
+
+  fun createElement(type: String) =
+    synchronized(lock) {
+      val nodeId = allocateId()
+      records[nodeId] = RendererRecord(tag = type)
+      nodeId
+    }
+
+  fun createText(value: String) =
+    synchronized(lock) {
+      val nodeId = allocateId()
+      records[nodeId] = RendererRecord(tag = "compose:text", text = value).also {
+        it.props["value"] = value
+      }
+      nodeId
+    }
+
+  fun insert(parentId: String, childId: String, beforeId: String?) {
+    synchronized(lock) {
+      val parent = records[parentId] ?: return
+      parent.childIds.remove(childId)
+      val beforeIndex = beforeId?.let(parent.childIds::indexOf)?.takeIf { it >= 0 }
+      if (beforeIndex != null) {
+        parent.childIds.add(beforeIndex, childId)
+      } else {
+        parent.childIds.add(childId)
+      }
+    }
+  }
+
+  fun remove(parentId: String, childId: String) {
+    synchronized(lock) {
+      records[parentId]?.childIds?.remove(childId)
+      removeRecord(childId)
+    }
+  }
+
+  fun reorder(parentId: String, childId: String, beforeId: String?) {
+    insert(parentId, childId, beforeId)
+  }
+
+  fun setProp(nodeId: String, key: String, value: String) {
+    synchronized(lock) {
+      records[nodeId]?.props?.set(key, value)
+      if (key == "value" && records[nodeId]?.tag == "compose:text") {
+        records[nodeId]?.text = value
+      }
+    }
+  }
+
+  fun removeProp(nodeId: String, key: String) {
+    synchronized(lock) {
+      records[nodeId]?.props?.remove(key)
+    }
+  }
+
+  fun setText(nodeId: String, value: String) {
+    synchronized(lock) {
+      records[nodeId]?.text = value
+      records[nodeId]?.props?.set("value", value)
+    }
+  }
+
+  fun publish(rootId: String?) {
+    val rootNode =
+      synchronized(lock) {
+        if (!rootId.isNullOrBlank()) {
+          rootNodeId = rootId
+        }
+        rootNodeId?.let(::materialize)
+      }
+    _root.value = rootNode
+  }
+
+  private fun allocateId() = "compose-node-${nextId.incrementAndGet()}"
+
+  private fun materialize(nodeId: String): NativeNode? {
+    val record = records[nodeId] ?: return null
+    return NativeNode(
+      id = nodeId,
+      tag = record.tag,
+      text = record.text,
+      props = record.props.toMap(),
+      children = record.childIds.mapNotNull(::materialize),
+    )
+  }
+
+  private fun removeRecord(nodeId: String) {
+    val record = records.remove(nodeId) ?: return
+    for (childId in record.childIds) {
+      removeRecord(childId)
+    }
+    if (rootNodeId == nodeId) {
+      rootNodeId = null
+    }
+  }
+}
+
+private class AndroidRuntimeBridge(
+  private val store: ComposeTreeStore,
+  private val invokeRuntime: (String, String) -> String,
+) {
+  @JavascriptInterface
+  fun createElement(type: String): String = store.createElement(type)
+
+  @JavascriptInterface
+  fun createText(value: String): String = store.createText(value)
+
+  @JavascriptInterface
+  fun insert(parentId: String, childId: String, beforeId: String?) {
+    store.insert(parentId, childId, beforeId.nullIfBlank())
+  }
+
+  @JavascriptInterface
+  fun remove(parentId: String, childId: String) {
+    store.remove(parentId, childId)
+  }
+
+  @JavascriptInterface
+  fun reorder(parentId: String, childId: String, beforeId: String?) {
+    store.reorder(parentId, childId, beforeId.nullIfBlank())
+  }
+
+  @JavascriptInterface
+  fun setProp(nodeId: String, key: String, value: String) {
+    store.setProp(nodeId, key, value)
+  }
+
+  @JavascriptInterface
+  fun removeProp(nodeId: String, key: String) {
+    store.removeProp(nodeId, key)
+  }
+
+  @JavascriptInterface
+  fun setText(nodeId: String, value: String) {
+    store.setText(nodeId, value)
+  }
+
+  @JavascriptInterface
+  fun publish(rootId: String?) {
+    store.publish(rootId.nullIfBlank())
+  }
+
+  @JavascriptInterface
+  fun invoke(name: String, payloadJson: String): String = invokeRuntime(name, payloadJson)
+}
+
+@SuppressLint("SetJavaScriptEnabled")
+private class EclipsaComposeHostController(private val activity: ComponentActivity) {
+  private val scope = CoroutineScope(SupervisorJob() + Dispatchers.Main.immediate)
+  private val webViewReady = CompletableDeferred<Unit>()
+  private val store = ComposeTreeStore()
+  private val _status = MutableStateFlow<String?>(null)
+  val root: StateFlow<NativeNode?> = store.root
+  val status: StateFlow<String?> = _status.asStateFlow()
+  private var devManifest: NativeDevManifest? = null
+
+  val webView: WebView =
+    WebView(activity).apply {
+      settings.javaScriptEnabled = true
+      settings.domStorageEnabled = true
+      settings.allowFileAccess = true
+      webChromeClient = WebChromeClient()
+      webViewClient =
+        object : WebViewClient() {
+          override fun onPageFinished(view: WebView?, url: String?) {
+            if (!webViewReady.isCompleted) {
+              webViewReady.complete(Unit)
+            }
+          }
+        }
+      addJavascriptInterface(
+        AndroidRuntimeBridge(store) { name, payloadJson ->
+          invokeRuntime(name, payloadJson)
+        },
+        ANDROID_BRIDGE_NAME,
+      )
+      loadDataWithBaseURL(
+        "https://eclipsa.native.host/",
+        "<!doctype html><html><body></body></html>",
+        "text/html",
+        "utf-8",
+        null,
+      )
+    }
+
+  fun boot(manifestUrl: String?, manifestPath: String?) {
+    scope.launch {
+      store.clear()
+      _status.value = null
+      try {
+        webViewReady.await()
+        val descriptor =
+          withContext(Dispatchers.IO) {
+            loadDescriptor(
+              manifestUrl = manifestUrl?.trim().takeUnless { it.isNullOrEmpty() },
+              manifestPath = manifestPath?.trim().takeUnless { it.isNullOrEmpty() },
+            )
+          }
+        devManifest = (descriptor as? NativeApplicationDescriptor.Dev)?.manifest
+        evaluateJavascript(createBridgePrelude(descriptor))
+        when (descriptor) {
+          is NativeApplicationDescriptor.Dev ->
+            evaluateJavascript(loadAssetSource("vite-runner.js"))
+
+          is NativeApplicationDescriptor.Script ->
+            evaluateJavascript(descriptor.source)
+        }
+        evaluateJavascript("globalThis.__eclipsaBoot?.();")
+        if (store.root.value == null) {
+          _status.value = "Native bootstrap script did not publish a root node."
+        }
+      } catch (error: Throwable) {
+        _status.value = error.message ?: error.toString()
+      }
+    }
+  }
+
+  fun dispatchEvent(nodeId: String, eventName: String, payload: Any? = null) {
+    scope.launch {
+      try {
+        webViewReady.await()
+        evaluateJavascript(
+          "globalThis.__eclipsaDispatchEvent(${quoteJsString(nodeId)}, ${quoteJsString(eventName)}, ${encodeJsValue(payload)});",
+        )
+      } catch (error: Throwable) {
+        _status.value = error.message ?: error.toString()
+      }
+    }
+  }
+
+  fun close() {
+    scope.cancel()
+    webView.removeJavascriptInterface(ANDROID_BRIDGE_NAME)
+    webView.destroy()
+  }
+
+  private suspend fun loadDescriptor(
+    manifestUrl: String?,
+    manifestPath: String?,
+  ): NativeApplicationDescriptor {
+    val location =
+      manifestUrl
+        ?: manifestPath?.let { File(it).toURI().toString() }
+        ?: throw IllegalStateException("$DEFAULT_MANIFEST_EXTRA_NAME extra is not set")
+    val manifestSource = readTextFromLocation(location)
+    val manifest = JSONObject(manifestSource)
+    if (manifest.optString("mode") == "dev") {
+      val entry = manifest.optString("entry")
+      val rpc = manifest.optString("rpc")
+      val hmrUrl = manifest.optJSONObject("hmr")?.optString("url").orEmpty()
+      if (entry.isBlank() || rpc.isBlank() || hmrUrl.isBlank()) {
+        throw IllegalStateException("The native dev manifest is missing entry, rpc, or hmr.url.")
+      }
+      return NativeApplicationDescriptor.Dev(
+        NativeDevManifest(
+          entry = entry,
+          hmrUrl = hmrUrl,
+          rpcUrl = rpc,
+        ),
+      )
+    }
+
+    val bootstrapLocation = manifest.optString("bootstrap")
+    if (bootstrapLocation.isBlank()) {
+      throw IllegalStateException("The native manifest does not define a bootstrap bundle.")
+    }
+    val bootstrapUrl = URL(URL(location), bootstrapLocation).toString()
+    return NativeApplicationDescriptor.Script(
+      origin = bootstrapUrl,
+      source = readTextFromLocation(bootstrapUrl),
+    )
+  }
+
+  private fun createBridgePrelude(descriptor: NativeApplicationDescriptor): String {
+    val devManifestScript =
+      when (descriptor) {
+        is NativeApplicationDescriptor.Dev -> {
+          val manifestJson =
+            JSONObject()
+              .put("entry", descriptor.manifest.entry)
+              .put("hmr", JSONObject().put("url", descriptor.manifest.hmrUrl))
+              .put("rpc", descriptor.manifest.rpcUrl)
+              .toString()
+          """
+          globalThis.__eclipsaNativeDevManifest = $manifestJson;
+          globalThis.__eclipsaNativeRuntime = {
+            invoke(name, payloadJSON) {
+              return $ANDROID_BRIDGE_NAME.invoke(String(name), String(payloadJSON ?? "[]"));
+            },
+            connectHMR(callback) {
+              const manifest = globalThis.__eclipsaNativeDevManifest;
+              if (!manifest?.hmr?.url || typeof callback !== "function") {
+                return;
+              }
+              const socket = new WebSocket(manifest.hmr.url, ["vite-hmr"]);
+              socket.onmessage = (event) => {
+                callback(typeof event.data === "string" ? event.data : String(event.data ?? ""));
+              };
+              socket.onerror = (event) => {
+                console.error("EclipsaNative HMR socket error", event);
+              };
+              globalThis.__eclipsaNativeHmrSocket = socket;
+            },
+          };
+          """.trimIndent()
+        }
+
+        is NativeApplicationDescriptor.Script -> ""
+      }
+
+    return """
+      (() => {
+        const bridge = globalThis.$ANDROID_BRIDGE_NAME;
+        const eventHandlers = new Map();
+        const normalizeOptional = (value) => value == null ? "" : String(value);
+        const serializePropValue = (value) => {
+          if (value == null) {
+            return null;
+          }
+          if (typeof value === "string") {
+            return value;
+          }
+          if (typeof value === "boolean" || typeof value === "number") {
+            return String(value);
+          }
+          try {
+            return JSON.stringify(value);
+          } catch (_error) {
+            return String(value);
+          }
+        };
+
+        globalThis.__eclipsaDispatchEvent = (nodeID, eventName, payload) => {
+          const handler = eventHandlers.get(`${'$'}{String(nodeID)}::${'$'}{String(eventName)}`);
+          if (typeof handler !== "function") {
+            return false;
+          }
+          handler(payload);
+          return true;
+        };
+
+        globalThis.__eclipsaNative = {
+          renderer: {
+            createElement(type) {
+              return bridge.createElement(String(type));
+            },
+            createText(value) {
+              return bridge.createText(String(value ?? ""));
+            },
+            insert(parentID, childID, beforeID) {
+              bridge.insert(String(parentID), String(childID), normalizeOptional(beforeID));
+            },
+            remove(parentID, childID) {
+              bridge.remove(String(parentID), String(childID));
+            },
+            reorder(parentID, childID, beforeID) {
+              bridge.reorder(String(parentID), String(childID), normalizeOptional(beforeID));
+            },
+            removeProp(nodeID, key) {
+              bridge.removeProp(String(nodeID), String(key));
+            },
+            setProp(nodeID, key, value) {
+              const serialized = serializePropValue(value);
+              if (serialized == null) {
+                bridge.removeProp(String(nodeID), String(key));
+                return;
+              }
+              bridge.setProp(String(nodeID), String(key), serialized);
+            },
+            setText(nodeID, value) {
+              bridge.setText(String(nodeID), String(value ?? ""));
+            },
+            publish(rootID) {
+              bridge.publish(normalizeOptional(rootID));
+            },
+          },
+          events: {
+            on(nodeID, eventName, listener) {
+              eventHandlers.set(`${'$'}{String(nodeID)}::${'$'}{String(eventName)}`, listener);
+            },
+          },
+        };
+
+        $devManifestScript
+      })();
+    """.trimIndent()
+  }
+
+  private suspend fun evaluateJavascript(source: String): String =
+    withContext(Dispatchers.Main.immediate) {
+      val result = CompletableDeferred<String>()
+      webView.evaluateJavascript(source, ValueCallback { value ->
+        result.complete(value ?: "null")
+      })
+      result.await()
+    }
+
+  private suspend fun loadAssetSource(name: String) =
+    withContext(Dispatchers.IO) {
+      activity.assets.open(name).bufferedReader().use { it.readText() }
+    }
+
+  private fun invokeRuntime(name: String, payloadJson: String): String {
+    val manifest = devManifest
+      ?: return errorResponse("Native runtime bridge is unavailable before the dev manifest loads.")
+    return try {
+      val payload =
+        JSONObject()
+          .put("name", name)
+          .put("data", JSONArray(payloadJson))
+          .toString()
+      postJson(manifest.rpcUrl, payload)
+    } catch (error: Throwable) {
+      errorResponse(error.message ?: error.toString())
+    }
+  }
+}
+
+class MainActivity : ComponentActivity() {
+  private lateinit var controller: EclipsaComposeHostController
+
+  override fun onCreate(savedInstanceState: Bundle?) {
+    super.onCreate(savedInstanceState)
+    controller = EclipsaComposeHostController(this)
+
+    val manifestUrl = intent?.getStringExtra(DEFAULT_MANIFEST_EXTRA_NAME)
+    val manifestPath = intent?.getStringExtra(DEFAULT_MANIFEST_PATH_EXTRA_NAME)
+
+    setContent {
+      MaterialTheme {
+        NativeComposeHostScreen(
+          controller = controller,
+          manifestUrl = manifestUrl,
+          manifestPath = manifestPath,
+        )
+      }
+    }
+  }
+
+  override fun onDestroy() {
+    controller.close()
+    super.onDestroy()
+  }
+}
+
+@Composable
+private fun NativeComposeHostScreen(
+  controller: EclipsaComposeHostController,
+  manifestUrl: String?,
+  manifestPath: String?,
+) {
+  val root by controller.root.collectAsState()
+  val status by controller.status.collectAsState()
+
+  LaunchedEffect(manifestUrl, manifestPath) {
+    controller.boot(manifestUrl, manifestPath)
+  }
+
+  Surface(modifier = Modifier.fillMaxSize()) {
+    Box(modifier = Modifier.fillMaxSize()) {
+      AndroidView(
+        factory = { controller.webView },
+        modifier = Modifier.size(0.dp),
+      )
+
+      when {
+        root != null -> RenderNativeNode(node = root!!, controller = controller)
+        status != null -> ErrorScreen(message = status!!)
+        else -> LoadingScreen()
+      }
+    }
+  }
+}
+
+@Composable
+private fun LoadingScreen() {
+  Box(
+    modifier = Modifier.fillMaxSize(),
+    contentAlignment = Alignment.Center,
+  ) {
+    Column(
+      horizontalAlignment = Alignment.CenterHorizontally,
+      verticalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+      CircularProgressIndicator()
+      Text("Booting Eclipsa Native Compose…")
+    }
+  }
+}
+
+@Composable
+private fun ErrorScreen(message: String) {
+  Scaffold { padding ->
+    Column(
+      modifier =
+        Modifier
+          .fillMaxSize()
+          .padding(padding)
+          .padding(24.dp),
+      verticalArrangement = Arrangement.spacedBy(12.dp),
+    ) {
+      Text("Eclipsa Native Compose")
+      Text(message)
+    }
+  }
+}
+
+@Composable
+private fun RenderNativeNode(
+  node: NativeNode,
+  controller: EclipsaComposeHostController,
+  modifier: Modifier = Modifier,
+) {
+  when (node.tag) {
+    "compose:activity" ->
+      Scaffold { padding ->
+        Column(
+          modifier =
+            modifier
+              .fillMaxSize()
+              .padding(padding),
+        ) {
+          node.children.forEach { child ->
+            RenderNativeNode(node = child, controller = controller)
+          }
+        }
+      }
+
+    "compose:column" ->
+      Column(
+        modifier = modifier.fillMaxSize().padding(horizontal = 24.dp, vertical = 32.dp),
+        verticalArrangement = Arrangement.spacedBy(node.props.dp("spacing")),
+      ) {
+        node.children.forEach { child ->
+          RenderNativeNode(node = child, controller = controller)
+        }
+      }
+
+    "compose:row" ->
+      Row(
+        modifier = modifier,
+        horizontalArrangement = Arrangement.spacedBy(node.props.dp("spacing")),
+      ) {
+        node.children.forEach { child ->
+          RenderNativeNode(node = child, controller = controller)
+        }
+      }
+
+    "compose:lazy-column" ->
+      LazyColumn(
+        modifier = modifier.fillMaxSize().padding(horizontal = 24.dp, vertical = 32.dp),
+        verticalArrangement = Arrangement.spacedBy(node.props.dp("spacing")),
+      ) {
+        items(node.children, key = { it.id }) { child ->
+          RenderNativeNode(node = child, controller = controller)
+        }
+      }
+
+    "compose:text" ->
+      Text(node.textValue())
+
+    "compose:button" ->
+      Button(
+        onClick = { controller.dispatchEvent(node.id, "click") },
+      ) {
+        Text(node.props["title"] ?: node.props["value"] ?: "Button")
+      }
+
+    "compose:text-field" ->
+      OutlinedTextField(
+        value = node.props["value"].orEmpty(),
+        onValueChange = { controller.dispatchEvent(node.id, "valueChange", it) },
+        label = {
+          val placeholder = node.props["placeholder"]
+          if (!placeholder.isNullOrBlank()) {
+            Text(placeholder)
+          }
+        },
+      )
+
+    "compose:switch" -> {
+      val title = node.props["title"]
+      Row(
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
+      ) {
+        if (!title.isNullOrBlank()) {
+          Text(title)
+        }
+        Switch(
+          checked = node.props.boolean("value"),
+          onCheckedChange = { controller.dispatchEvent(node.id, "checkedChange", it) },
+        )
+      }
+    }
+
+    "compose:spacer" ->
+      Spacer(
+        modifier =
+          modifier
+            .width(node.props.dp("width", fallback = node.props.dp("size")))
+            .height(node.props.dp("height", fallback = node.props.dp("size"))),
+      )
+
+    else ->
+      Column(
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+      ) {
+        if (node.textValue().isNotBlank()) {
+          Text(node.textValue())
+        }
+        node.children.forEach { child ->
+          RenderNativeNode(node = child, controller = controller)
+        }
+      }
+  }
+}
+
+private fun readTextFromLocation(location: String): String {
+  val url = URL(location)
+  val connection = url.openConnection().apply {
+    connectTimeout = 10_000
+    readTimeout = 30_000
+    if (this is HttpURLConnection) {
+      requestMethod = "GET"
+      setRequestProperty("Accept", "application/json, text/javascript, */*")
+    }
+  }
+  return connection.getInputStream().bufferedReader().use { it.readText() }
+}
+
+private fun postJson(url: String, body: String): String {
+  val connection = (URL(url).openConnection() as HttpURLConnection).apply {
+    connectTimeout = 10_000
+    readTimeout = 30_000
+    doOutput = true
+    requestMethod = "POST"
+    setRequestProperty("Content-Type", "application/json; charset=utf-8")
+  }
+  connection.outputStream.bufferedWriter().use { it.write(body) }
+  val stream =
+    if (connection.responseCode in 200..299) {
+      connection.inputStream
+    } else {
+      connection.errorStream ?: throw IllegalStateException("Native dev RPC failed with ${connection.responseCode}.")
+    }
+  return stream.bufferedReader().use { it.readText() }
+}
+
+private fun errorResponse(message: String) =
+  JSONObject().put("error", JSONObject().put("message", message)).toString()
+
+private fun quoteJsString(value: String) = JSONObject.quote(value)
+
+private fun encodeJsValue(value: Any?): String =
+  when (value) {
+    null -> "null"
+    is Boolean, is Number -> value.toString()
+    is String -> JSONObject.quote(value)
+    else -> JSONObject.wrap(value)?.toString() ?: "null"
+  }
+
+private fun String?.nullIfBlank(): String? = this?.takeUnless { it.isBlank() }
+
+private fun Map<String, String>.boolean(key: String) =
+  this[key]?.equals("true", ignoreCase = true) == true
+
+private fun Map<String, String>.dp(key: String, fallback: Dp = 0.dp) =
+  this[key]?.toFloatOrNull()?.dp ?: fallback
+
+private fun NativeNode.textValue() = props["value"] ?: text.orEmpty()
diff --git a/packages/native-compose/android-compose/build.gradle.kts b/packages/native-compose/android-compose/build.gradle.kts
new file mode 100644
index 0000000..98640ca
--- /dev/null
+++ b/packages/native-compose/android-compose/build.gradle.kts
@@ -0,0 +1,5 @@
+plugins {
+  id("com.android.application") version "8.13.2" apply false
+  id("org.jetbrains.kotlin.android") version "2.2.21" apply false
+  id("org.jetbrains.kotlin.plugin.compose") version "2.2.21" apply false
+}
diff --git a/packages/native-compose/android-compose/gradle.properties b/packages/native-compose/android-compose/gradle.properties
new file mode 100644
index 0000000..e696167
--- /dev/null
+++ b/packages/native-compose/android-compose/gradle.properties
@@ -0,0 +1,3 @@
+org.gradle.jvmargs=-Xmx2048m -Dfile.encoding=UTF-8
+android.useAndroidX=true
+kotlin.code.style=official
diff --git a/packages/native-compose/android-compose/gradle/wrapper/gradle-wrapper.jar b/packages/native-compose/android-compose/gradle/wrapper/gradle-wrapper.jar
new file mode 100644
index 0000000..1b33c55
Binary files /dev/null and b/packages/native-compose/android-compose/gradle/wrapper/gradle-wrapper.jar differ
diff --git a/packages/native-compose/android-compose/gradle/wrapper/gradle-wrapper.properties b/packages/native-compose/android-compose/gradle/wrapper/gradle-wrapper.properties
new file mode 100644
index 0000000..37f853b
--- /dev/null
+++ b/packages/native-compose/android-compose/gradle/wrapper/gradle-wrapper.properties
@@ -0,0 +1,7 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip
+networkTimeout=10000
+validateDistributionUrl=true
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
diff --git a/packages/native-compose/android-compose/gradlew b/packages/native-compose/android-compose/gradlew
new file mode 100755
index 0000000..23d15a9
--- /dev/null
+++ b/packages/native-compose/android-compose/gradlew
@@ -0,0 +1,251 @@
+#!/bin/sh
+
+#
+# Copyright © 2015-2021 the original authors.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#      https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+# SPDX-License-Identifier: Apache-2.0
+#
+
+##############################################################################
+#
+#   Gradle start up script for POSIX generated by Gradle.
+#
+#   Important for running:
+#
+#   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
+#       noncompliant, but you have some other compliant shell such as ksh or
+#       bash, then to run this script, type that shell name before the whole
+#       command line, like:
+#
+#           ksh Gradle
+#
+#       Busybox and similar reduced shells will NOT work, because this script
+#       requires all of these POSIX shell features:
+#         * functions;
+#         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
+#           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
+#         * compound commands having a testable exit status, especially «case»;
+#         * various built-in commands including «command», «set», and «ulimit».
+#
+#   Important for patching:
+#
+#   (2) This script targets any POSIX shell, so it avoids extensions provided
+#       by Bash, Ksh, etc; in particular arrays are avoided.
+#
+#       The "traditional" practice of packing multiple parameters into a
+#       space-separated string is a well documented source of bugs and security
+#       problems, so this is (mostly) avoided, by progressively accumulating
+#       options in "$@", and eventually passing that to Java.
+#
+#       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
+#       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
+#       see the in-line comments for details.
+#
+#       There are tweaks for specific operating systems such as AIX, CygWin,
+#       Darwin, MinGW, and NonStop.
+#
+#   (3) This script is generated from the Groovy template
+#       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
+#       within the Gradle project.
+#
+#       You can find Gradle at https://github.com/gradle/gradle/.
+#
+##############################################################################
+
+# Attempt to set APP_HOME
+
+# Resolve links: $0 may be a link
+app_path=$0
+
+# Need this for daisy-chained symlinks.
+while
+    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
+    [ -h "$app_path" ]
+do
+    ls=$( ls -ld "$app_path" )
+    link=${ls#*' -> '}
+    case $link in             #(
+      /*)   app_path=$link ;; #(
+      *)    app_path=$APP_HOME$link ;;
+    esac
+done
+
+# This is normally unused
+# shellcheck disable=SC2034
+APP_BASE_NAME=${0##*/}
+# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
+APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD=maximum
+
+warn () {
+    echo "$*"
+} >&2
+
+die () {
+    echo
+    echo "$*"
+    echo
+    exit 1
+} >&2
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+nonstop=false
+case "$( uname )" in                #(
+  CYGWIN* )         cygwin=true  ;; #(
+  Darwin* )         darwin=true  ;; #(
+  MSYS* | MINGW* )  msys=true    ;; #(
+  NONSTOP* )        nonstop=true ;;
+esac
+
+CLASSPATH="\\\"\\\""
+
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD=$JAVA_HOME/jre/sh/java
+    else
+        JAVACMD=$JAVA_HOME/bin/java
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD=java
+    if ! command -v java >/dev/null 2>&1
+    then
+        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+fi
+
+# Increase the maximum file descriptors if we can.
+if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
+    case $MAX_FD in #(
+      max*)
+        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        MAX_FD=$( ulimit -H -n ) ||
+            warn "Could not query maximum file descriptor limit"
+    esac
+    case $MAX_FD in  #(
+      '' | soft) :;; #(
+      *)
+        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
+        # shellcheck disable=SC2039,SC3045
+        ulimit -n "$MAX_FD" ||
+            warn "Could not set maximum file descriptor limit to $MAX_FD"
+    esac
+fi
+
+# Collect all arguments for the java command, stacking in reverse order:
+#   * args from the command line
+#   * the main class name
+#   * -classpath
+#   * -D...appname settings
+#   * --module-path (only if needed)
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
+
+# For Cygwin or MSYS, switch paths to Windows format before running java
+if "$cygwin" || "$msys" ; then
+    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
+    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
+
+    JAVACMD=$( cygpath --unix "$JAVACMD" )
+
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    for arg do
+        if
+            case $arg in                                #(
+              -*)   false ;;                            # don't mess with options #(
+              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
+                    [ -e "$t" ] ;;                      #(
+              *)    false ;;
+            esac
+        then
+            arg=$( cygpath --path --ignore --mixed "$arg" )
+        fi
+        # Roll the args list around exactly as many times as the number of
+        # args, so each arg winds up back in the position where it started, but
+        # possibly modified.
+        #
+        # NB: a `for` loop captures its iteration list before it begins, so
+        # changing the positional parameters here affects neither the number of
+        # iterations, nor the values presented in `arg`.
+        shift                   # remove old arg
+        set -- "$@" "$arg"      # push replacement arg
+    done
+fi
+
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
+
+# Collect all arguments for the java command:
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#     and any embedded shellness will be escaped.
+#   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
+#     treated as '${Hostname}' itself on the command line.
+
+set -- \
+        "-Dorg.gradle.appname=$APP_BASE_NAME" \
+        -classpath "$CLASSPATH" \
+        -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
+        "$@"
+
+# Stop when "xargs" is not available.
+if ! command -v xargs >/dev/null 2>&1
+then
+    die "xargs is not available"
+fi
+
+# Use "xargs" to parse quoted args.
+#
+# With -n1 it outputs one arg per line, with the quotes and backslashes removed.
+#
+# In Bash we could simply go:
+#
+#   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
+#   set -- "${ARGS[@]}" "$@"
+#
+# but POSIX shell has neither arrays nor command substitution, so instead we
+# post-process each arg (as a line of input to sed) to backslash-escape any
+# character that might be a shell metacharacter, then use eval to reverse
+# that process (while maintaining the separation between arguments), and wrap
+# the whole thing up as a single "set" statement.
+#
+# This will of course break if any of these variables contains a newline or
+# an unmatched quote.
+#
+
+eval "set -- $(
+        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
+        xargs -n1 |
+        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
+        tr '\n' ' '
+    )" '"$@"'
+
+exec "$JAVACMD" "$@"
diff --git a/packages/native-compose/android-compose/gradlew.bat b/packages/native-compose/android-compose/gradlew.bat
new file mode 100644
index 0000000..5eed7ee
--- /dev/null
+++ b/packages/native-compose/android-compose/gradlew.bat
@@ -0,0 +1,94 @@
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+@rem SPDX-License-Identifier: Apache-2.0
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+@rem This is normally unused
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo. 1>&2
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
+echo. 1>&2
+echo Please set the JAVA_HOME variable in your environment to match the 1>&2
+echo location of your Java installation. 1>&2
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega
diff --git a/packages/native-compose/android-compose/settings.gradle.kts b/packages/native-compose/android-compose/settings.gradle.kts
new file mode 100644
index 0000000..3cb0c61
--- /dev/null
+++ b/packages/native-compose/android-compose/settings.gradle.kts
@@ -0,0 +1,21 @@
+import org.gradle.api.initialization.resolve.RepositoriesMode
+
+pluginManagement {
+  repositories {
+    google()
+    mavenCentral()
+    gradlePluginPortal()
+  }
+}
+
+dependencyResolutionManagement {
+  repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
+  repositories {
+    google()
+    mavenCentral()
+  }
+}
+
+rootProject.name = "EclipsaNativeCompose"
+
+include(":app")
diff --git a/packages/native-compose/host.test.ts b/packages/native-compose/host.test.ts
new file mode 100644
index 0000000..f867236
--- /dev/null
+++ b/packages/native-compose/host.test.ts
@@ -0,0 +1,234 @@
+import {
+  createDefaultComposeHostCommand,
+  createDefaultComposeHostInstallCommand,
+  resolveAndroidSdkRoot,
+  isMissingComposeHostActivityError,
+  launchComposeHostActivity,
+  parseComposeCliOptions,
+  parseComposeCliOptionsFromEnv,
+  parseComposeHostLaunchArgs,
+  resolveJavaHome,
+  waitForEmulatorDevice,
+} from './host.ts'
+import { describe, expect, it } from 'vitest'
+
+describe('@eclipsa/native-compose host launcher', () => {
+  it('parses emulator launch flags including the legacy typo alias', () => {
+    expect(parseComposeHostLaunchArgs(['--emulator']).emulator).toBe(true)
+    expect(parseComposeHostLaunchArgs(['--enurator']).emulator).toBe(true)
+  })
+
+  it('extracts CLI-only options for vp dev passthrough', () => {
+    expect(
+      parseComposeCliOptions([
+        'dev',
+        '--emulator',
+        '--avd',
+        'Pixel_8_API_35',
+        '--boot-timeout-ms',
+        '45000',
+      ]),
+    ).toEqual({
+      avd: 'Pixel_8_API_35',
+      bootTimeoutMs: 45_000,
+      emulator: true,
+    })
+  })
+
+  it('reads compose runtime options from environment variables', () => {
+    expect(
+      parseComposeCliOptionsFromEnv({
+        ECLIPSA_NATIVE_COMPOSE_AVD: 'Pixel_8_API_35',
+        ECLIPSA_NATIVE_COMPOSE_BOOT_TIMEOUT_MS: '45000',
+        ECLIPSA_NATIVE_COMPOSE_EMULATOR: '1',
+      }),
+    ).toEqual({
+      avd: 'Pixel_8_API_35',
+      bootTimeoutMs: 45_000,
+      emulator: true,
+    })
+  })
+
+  it('builds a default host command that can target an emulator', () => {
+    const command = createDefaultComposeHostCommand(
+      'http://127.0.0.1:5173/__eclipsa_native__/manifest.json',
+      {
+        activityName: '.CustomActivity',
+        applicationId: 'dev.eclipsa.example',
+        avd: 'Pixel_8_API_35',
+        bootTimeoutMs: 45_000,
+        emulator: true,
+        manifestExtraName: 'manifestUrl',
+      },
+    )
+
+    expect(command[0]).toBe('bun')
+    expect(command).toContain('--emulator')
+    expect(command).toContain('--avd')
+    expect(command).toContain('Pixel_8_API_35')
+    expect(command).toContain('--manifest-url')
+    expect(command).toContain('http://127.0.0.1:5173/__eclipsa_native__/manifest.json')
+    expect(command).toContain('.CustomActivity')
+    expect(command).toContain('dev.eclipsa.example')
+  })
+
+  it('detects the adb error when the Compose host activity is not installed yet', () => {
+    const error = new Error('Command failed') as Error & { stdout: string }
+    error.stdout =
+      'Starting: Intent { act=android.intent.action.MAIN cmp=dev.eclipsa.nativecompose/.MainActivity (has extras) }\n' +
+      'Error type 3\n' +
+      'Error: Activity class {dev.eclipsa.nativecompose/dev.eclipsa.nativecompose.MainActivity} does not exist.\n'
+
+    expect(isMissingComposeHostActivityError(error)).toBe(true)
+  })
+
+  it('builds the default install command for the bundled Android host project', () => {
+    const command = createDefaultComposeHostInstallCommand('/tmp/eclipsa-native-compose-host')
+
+    expect(command[0]).toBe(process.platform === 'win32' ? 'gradlew.bat' : './gradlew')
+    expect(command).toContain('--project-dir')
+    expect(command).toContain('/tmp/eclipsa-native-compose-host')
+    expect(command).toContain(':app:installDebug')
+  })
+
+  it('resolves a Java home from the java executable on PATH when JAVA_HOME is unset', async () => {
+    const javaHome = await resolveJavaHome(
+      {
+        PATH: '/tmp/bin',
+      },
+      {
+        execFile: async (file, args) => {
+          expect(file).toBe(process.platform === 'win32' ? 'where' : 'which')
+          expect(args).toEqual(['java'])
+          return {
+            stderr: '',
+            stdout: '/tmp/bin/java\n',
+          }
+        },
+        fileExists: async () => false,
+        realpath: async (filePath) =>
+          filePath === '/tmp/bin/java' ? '/toolchains/openjdk-17/bin/java' : filePath,
+      },
+    )
+
+    expect(javaHome).toBe('/toolchains/openjdk-17')
+  })
+
+  it('resolves an Android SDK root from adb or emulator paths', async () => {
+    const sdkRoot = await resolveAndroidSdkRoot({}, ['/tmp/bin/adb', '/tmp/bin/emulator'], {
+      execFile: async () => ({ stderr: '', stdout: '' }),
+      fileExists: async (filePath) =>
+        filePath === '/toolchains/android-sdk/platform-tools/adb' ||
+        filePath === '/toolchains/android-sdk/build-tools',
+      realpath: async (filePath) => {
+        if (filePath === '/tmp/bin/adb') {
+          return '/toolchains/android-sdk/platform-tools/adb'
+        }
+        if (filePath === '/tmp/bin/emulator') {
+          return '/toolchains/android-sdk/emulator/emulator'
+        }
+        return filePath
+      },
+    })
+
+    expect(sdkRoot).toBe('/toolchains/android-sdk')
+  })
+
+  it('installs the bundled Android host app and retries the activity launch on missing activity', async () => {
+    const calls: Array<{
+      args: readonly string[]
+      cwd?: string
+      env?: NodeJS.ProcessEnv
+      file: string
+    }> = []
+    let launchAttempts = 0
+
+    await launchComposeHostActivity(
+      {
+        activityName: '.MainActivity',
+        adbPath: 'adb',
+        applicationId: 'dev.eclipsa.nativecompose',
+        emulator: true,
+        hostProjectPath: '/tmp/eclipsa-native-compose-host',
+        manifestExtraName: 'manifestUrl',
+        manifestValue: 'http://127.0.0.1:5173/__eclipsa_native__/manifest.json',
+      },
+      {},
+      {
+        execFile: async (file, args, options) => {
+          calls.push({ args, cwd: options.cwd, env: options.env, file })
+          if (file === 'adb' && args.includes('shell') && launchAttempts === 0) {
+            launchAttempts += 1
+            const error = new Error('Command failed') as Error & { stdout: string }
+            error.stdout =
+              'Starting: Intent { act=android.intent.action.MAIN cmp=dev.eclipsa.nativecompose/.MainActivity (has extras) }\n' +
+              'Error type 3\n' +
+              'Error: Activity class {dev.eclipsa.nativecompose/dev.eclipsa.nativecompose.MainActivity} does not exist.\n'
+            throw error
+          }
+          if (file === (process.platform === 'win32' ? 'where' : 'which')) {
+            return { stderr: '', stdout: '/tmp/bin/java\n' }
+          }
+          launchAttempts += file === 'adb' && args.includes('shell') ? 1 : 0
+          return { stderr: '', stdout: '' }
+        },
+        fileExists: async (filePath) =>
+          filePath === '/tmp/eclipsa-native-compose-host/gradlew' ||
+          filePath === '/toolchains/openjdk-17/bin/java' ||
+          filePath === '/toolchains/android-sdk/platform-tools/adb' ||
+          filePath === '/toolchains/android-sdk/build-tools',
+        realpath: async (filePath) => {
+          if (filePath === 'adb') {
+            return '/toolchains/android-sdk/platform-tools/adb'
+          }
+          if (filePath === '/tmp/bin/java') {
+            return '/toolchains/openjdk-17/bin/java'
+          }
+          return filePath
+        },
+      },
+    )
+
+    expect(calls).toHaveLength(5)
+    expect(calls[0]?.file).toBe('adb')
+    expect(calls[0]?.args).toEqual(['-e', 'reverse', 'tcp:5173', 'tcp:5173'])
+    expect(calls[1]?.file).toBe('adb')
+    expect(calls[1]?.args).toContain('http://127.0.0.1:5173/__eclipsa_native__/manifest.json')
+    expect(calls[2]?.file).toBe(process.platform === 'win32' ? 'where' : 'which')
+    expect(calls[2]?.args).toEqual(['java'])
+    expect(calls[3]?.file).toBe(process.platform === 'win32' ? 'gradlew.bat' : './gradlew')
+    expect(calls[3]?.cwd).toBe('/tmp/eclipsa-native-compose-host')
+    expect(calls[3]?.args).toContain(':app:installDebug')
+    expect(calls[3]?.env?.ANDROID_HOME).toBe('/toolchains/android-sdk')
+    expect(calls[3]?.env?.ANDROID_SDK_ROOT).toBe('/toolchains/android-sdk')
+    expect(calls[3]?.env?.JAVA_HOME).toBe('/toolchains/openjdk-17')
+    expect(calls[4]?.file).toBe('adb')
+  })
+
+  it('fails fast when the Android emulator process exits before a device appears', async () => {
+    const launchedProcess = {
+      exitCode: 1,
+      signalCode: null,
+      stderr: {
+        on(event: string, listener: (value: string) => void) {
+          if (event === 'data') {
+            listener('PANIC: Missing emulator backend')
+          }
+          return this
+        },
+        setEncoding() {},
+      },
+      unref() {},
+    } as unknown as ReturnType<typeof import('node:child_process').spawn>
+
+    await expect(waitForEmulatorDevice('adb', {}, 50, launchedProcess, 'Pixel_9a')).rejects.toThrow(
+      /Missing emulator backend/,
+    )
+  })
+
+  it('times out instead of hanging forever when no emulator device becomes available', async () => {
+    await expect(waitForEmulatorDevice('__missing_adb__', {}, 50)).rejects.toThrow(
+      /Timed out waiting for the Android emulator device/,
+    )
+  }, 3_000)
+})
diff --git a/packages/native-compose/host.ts b/packages/native-compose/host.ts
new file mode 100644
index 0000000..b28d428
--- /dev/null
+++ b/packages/native-compose/host.ts
@@ -0,0 +1,712 @@
+import { execFile, spawn } from 'node:child_process'
+import { access, realpath } from 'node:fs/promises'
+import path from 'node:path'
+import { promisify } from 'node:util'
+
+const execFileAsync = promisify(execFile)
+const DEFAULT_ANDROID_APPLICATION_ID = 'dev.eclipsa.nativecompose'
+const DEFAULT_ANDROID_ACTIVITY_NAME = '.MainActivity'
+const DEFAULT_MANIFEST_EXTRA_NAME = 'manifestUrl'
+const DEFAULT_BOOT_TIMEOUT_MS = 120_000
+const DEFAULT_HOST_PROJECT_PATH = path.resolve(import.meta.dirname, './android-compose')
+
+export interface ComposeHostLaunchOptions {
+  activityName: string
+  adbPath: string
+  applicationId: string
+  avd?: string
+  bootTimeoutMs: number
+  emulator: boolean
+  emulatorPath: string
+  hostProjectPath?: string
+  installHostApp?: boolean
+  manifestExtraName: string
+  manifestValue?: string
+}
+
+export interface ComposeCliOptions {
+  avd?: string
+  bootTimeoutMs?: number
+  emulator?: boolean
+}
+
+const COMPOSE_EMULATOR_ENV_NAME = 'ECLIPSA_NATIVE_COMPOSE_EMULATOR'
+const COMPOSE_AVD_ENV_NAME = 'ECLIPSA_NATIVE_COMPOSE_AVD'
+const COMPOSE_BOOT_TIMEOUT_ENV_NAME = 'ECLIPSA_NATIVE_COMPOSE_BOOT_TIMEOUT_MS'
+const composeHostInstallTask = ':app:installDebug'
+
+const splitLines = (value: string) =>
+  value
+    .split(/\r?\n/)
+    .map((line) => line.trim())
+    .filter(Boolean)
+
+const fileExists = async (filePath: string) => {
+  try {
+    await access(filePath)
+    return true
+  } catch {
+    return false
+  }
+}
+
+const resolveSdkRoots = (env: NodeJS.ProcessEnv) => {
+  const roots = [
+    env.ANDROID_HOME,
+    env.ANDROID_SDK_ROOT,
+    path.join(env.HOME ?? '', 'Android', 'Sdk'),
+  ]
+  return roots.filter((value): value is string => typeof value === 'string' && value.length > 0)
+}
+
+const resolveExecutable = async (
+  env: NodeJS.ProcessEnv,
+  preferredName: string,
+  fallbackPaths: string[],
+) => {
+  try {
+    const { stdout } = await execFileAsync('which', [preferredName], {
+      encoding: 'utf8',
+      env,
+    })
+    const resolvedPath = stdout.trim()
+    if (resolvedPath.length > 0) {
+      return resolvedPath
+    }
+  } catch {}
+
+  for (const candidate of fallbackPaths) {
+    if (await fileExists(candidate)) {
+      return candidate
+    }
+  }
+
+  throw new Error(
+    `Could not resolve "${preferredName}". Add it to PATH or set ANDROID_HOME/ANDROID_SDK_ROOT.`,
+  )
+}
+
+interface CommandError extends Error {
+  stderr?: string
+  stdout?: string
+}
+
+interface ExecFileResult {
+  stderr: string
+  stdout: string
+}
+
+interface ExecFileOptions {
+  cwd?: string
+  encoding?: BufferEncoding
+  env?: NodeJS.ProcessEnv
+}
+
+interface ComposeHostTooling {
+  execFile: (
+    file: string,
+    args: readonly string[],
+    options: ExecFileOptions,
+  ) => Promise<ExecFileResult>
+  fileExists: (filePath: string) => Promise<boolean>
+  realpath: (filePath: string) => Promise<string>
+}
+
+const defaultComposeHostTooling: ComposeHostTooling = {
+  execFile: (file, args, options) => execFileAsync(file, [...args], options),
+  fileExists,
+  realpath,
+}
+
+const listAdbDevices = async (adbPath: string, env: NodeJS.ProcessEnv) => {
+  const { stdout } = await execFileAsync(adbPath, ['devices'], {
+    encoding: 'utf8',
+    env,
+  })
+  return splitLines(stdout)
+    .slice(1)
+    .map((line) => line.split(/\s+/)[0] ?? '')
+    .filter(Boolean)
+}
+
+const listAvds = async (emulatorPath: string, env: NodeJS.ProcessEnv) => {
+  const { stdout } = await execFileAsync(emulatorPath, ['-list-avds'], {
+    encoding: 'utf8',
+    env,
+  })
+  return splitLines(stdout)
+}
+
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+const formatEmulatorLaunchFailure = (
+  reason: string,
+  details: {
+    avd?: string
+    stderr?: string
+    timeoutMs: number
+  },
+) => {
+  const stderr = details.stderr?.trim()
+  const message = [
+    `${reason} after ${details.timeoutMs}ms.`,
+    details.avd ? `AVD: ${details.avd}.` : null,
+    stderr ? `Emulator stderr:\n${stderr}` : null,
+  ]
+    .filter(Boolean)
+    .join(' ')
+  return new Error(message)
+}
+
+export const waitForEmulatorDevice = async (
+  adbPath: string,
+  env: NodeJS.ProcessEnv,
+  timeoutMs: number,
+  launchedProcess?: ReturnType<typeof spawn>,
+  launchedAvd?: string,
+) => {
+  const deadline = Date.now() + timeoutMs
+  const stderrChunks: string[] = []
+  if (launchedProcess?.stderr) {
+    launchedProcess.stderr.setEncoding('utf8')
+    launchedProcess.stderr.on('data', (chunk: string) => {
+      stderrChunks.push(chunk)
+      if (stderrChunks.join('').length > 8_192) {
+        stderrChunks.splice(0, stderrChunks.length, stderrChunks.join('').slice(-8_192))
+      }
+    })
+  }
+
+  while (Date.now() < deadline) {
+    if (launchedProcess && launchedProcess.exitCode != null) {
+      throw formatEmulatorLaunchFailure('Android emulator exited before it became available', {
+        avd: launchedAvd,
+        stderr: stderrChunks.join(''),
+        timeoutMs,
+      })
+    }
+    if (launchedProcess && launchedProcess.signalCode != null) {
+      throw formatEmulatorLaunchFailure(
+        `Android emulator terminated with signal ${launchedProcess.signalCode}`,
+        {
+          avd: launchedAvd,
+          stderr: stderrChunks.join(''),
+          timeoutMs,
+        },
+      )
+    }
+
+    try {
+      const devices = await listAdbDevices(adbPath, env)
+      if (devices.some((serial) => serial.startsWith('emulator-'))) {
+        launchedProcess?.unref()
+        return
+      }
+    } catch {}
+
+    await delay(1_000)
+  }
+
+  throw formatEmulatorLaunchFailure('Timed out waiting for the Android emulator device', {
+    avd: launchedAvd,
+    stderr: stderrChunks.join(''),
+    timeoutMs,
+  })
+}
+
+const waitForEmulatorBoot = async (adbPath: string, env: NodeJS.ProcessEnv, timeoutMs: number) => {
+  const deadline = Date.now() + timeoutMs
+  while (Date.now() < deadline) {
+    try {
+      const { stdout } = await execFileAsync(
+        adbPath,
+        ['-e', 'shell', 'getprop', 'sys.boot_completed'],
+        {
+          encoding: 'utf8',
+          env,
+        },
+      )
+      if (stdout.trim() === '1') {
+        return
+      }
+    } catch {}
+    await delay(1_000)
+  }
+  throw new Error(
+    `Timed out waiting for the Android emulator to finish booting after ${timeoutMs}ms.`,
+  )
+}
+
+const ensureEmulator = async (
+  options: Pick<ComposeHostLaunchOptions, 'adbPath' | 'avd' | 'bootTimeoutMs' | 'emulatorPath'>,
+  env: NodeJS.ProcessEnv,
+) => {
+  const devices = await listAdbDevices(options.adbPath, env)
+  let launchedProcess: ReturnType<typeof spawn> | undefined
+  let launchedAvd: string | undefined
+  if (!devices.some((serial) => serial.startsWith('emulator-'))) {
+    const availableAvds = await listAvds(options.emulatorPath, env)
+    const avd = options.avd ?? availableAvds[0]
+    if (!avd) {
+      throw new Error(
+        'No Android Virtual Devices are available. Create one in Android Studio Device Manager first.',
+      )
+    }
+    launchedAvd = avd
+    launchedProcess = spawn(options.emulatorPath, ['-avd', avd], {
+      detached: true,
+      env,
+      stdio: ['ignore', 'ignore', 'pipe'],
+    })
+  }
+
+  await waitForEmulatorDevice(
+    options.adbPath,
+    env,
+    options.bootTimeoutMs,
+    launchedProcess,
+    launchedAvd,
+  )
+  await waitForEmulatorBoot(options.adbPath, env, options.bootTimeoutMs)
+}
+
+export const parseComposeHostLaunchArgs = (argv: string[]) => {
+  const parsed = {
+    activityName: DEFAULT_ANDROID_ACTIVITY_NAME,
+    applicationId: DEFAULT_ANDROID_APPLICATION_ID,
+    avd: undefined as string | undefined,
+    bootTimeoutMs: DEFAULT_BOOT_TIMEOUT_MS,
+    emulator: false,
+    manifestExtraName: DEFAULT_MANIFEST_EXTRA_NAME,
+    manifestValue: undefined as string | undefined,
+  }
+
+  for (let index = 0; index < argv.length; index += 1) {
+    const argument = argv[index]
+    switch (argument) {
+      case '--activity-name':
+        parsed.activityName = argv[++index] ?? parsed.activityName
+        break
+      case '--application-id':
+        parsed.applicationId = argv[++index] ?? parsed.applicationId
+        break
+      case '--avd':
+        parsed.avd = argv[++index] ?? parsed.avd
+        break
+      case '--boot-timeout-ms': {
+        const rawValue = argv[++index]
+        if (rawValue) {
+          const value = Number(rawValue)
+          if (Number.isFinite(value) && value > 0) {
+            parsed.bootTimeoutMs = value
+          }
+        }
+        break
+      }
+      case '--emulator':
+      case '--enurator':
+        parsed.emulator = true
+        break
+      case '--manifest-extra-name':
+        parsed.manifestExtraName = argv[++index] ?? parsed.manifestExtraName
+        break
+      case '--manifest-path':
+      case '--manifest-url':
+        parsed.manifestValue = argv[++index] ?? parsed.manifestValue
+        break
+      default:
+        break
+    }
+  }
+
+  return parsed
+}
+
+export const parseComposeCliOptions = (argv: string[]): ComposeCliOptions => {
+  const parsed = parseComposeHostLaunchArgs(argv)
+  return {
+    avd: parsed.avd,
+    bootTimeoutMs: argv.includes('--boot-timeout-ms') ? parsed.bootTimeoutMs : undefined,
+    emulator: argv.includes('--emulator') || argv.includes('--enurator') ? true : undefined,
+  }
+}
+
+export const parseComposeCliOptionsFromEnv = (env: NodeJS.ProcessEnv): ComposeCliOptions => {
+  const rawBootTimeout = env[COMPOSE_BOOT_TIMEOUT_ENV_NAME]
+  const bootTimeoutMs =
+    rawBootTimeout && Number.isFinite(Number(rawBootTimeout)) && Number(rawBootTimeout) > 0
+      ? Number(rawBootTimeout)
+      : undefined
+
+  return {
+    avd: env[COMPOSE_AVD_ENV_NAME] || undefined,
+    bootTimeoutMs,
+    emulator:
+      env[COMPOSE_EMULATOR_ENV_NAME] === '1' || env[COMPOSE_EMULATOR_ENV_NAME] === 'true'
+        ? true
+        : undefined,
+  }
+}
+
+export const createDefaultComposeHostCommand = (
+  manifestUrl: string,
+  options: {
+    activityName?: string
+    applicationId?: string
+    avd?: string
+    bootTimeoutMs?: number
+    emulator?: boolean
+    manifestExtraName?: string
+  } = {},
+) => {
+  const args: [string, ...string[]] = [
+    'bun',
+    path.resolve(import.meta.dirname, './host.ts'),
+    '--application-id',
+    options.applicationId ?? DEFAULT_ANDROID_APPLICATION_ID,
+    '--activity-name',
+    options.activityName ?? DEFAULT_ANDROID_ACTIVITY_NAME,
+    '--manifest-extra-name',
+    options.manifestExtraName ?? DEFAULT_MANIFEST_EXTRA_NAME,
+    '--manifest-url',
+    manifestUrl,
+  ]
+
+  if (options.bootTimeoutMs != null) {
+    args.push('--boot-timeout-ms', String(options.bootTimeoutMs))
+  }
+  if (options.emulator) {
+    args.push('--emulator')
+  }
+  if (options.avd) {
+    args.push('--avd', options.avd)
+  }
+
+  return args
+}
+
+export const createDefaultComposeHostInstallCommand = (hostProjectPath: string) =>
+  [
+    process.platform === 'win32' ? 'gradlew.bat' : './gradlew',
+    '--project-dir',
+    hostProjectPath,
+    composeHostInstallTask,
+  ] as const
+
+const resolveLoopbackManifestPort = (manifestValue: string) => {
+  try {
+    const url = new URL(manifestValue)
+    if (
+      (url.protocol === 'http:' || url.protocol === 'https:') &&
+      (url.hostname === 'localhost' || url.hostname === '127.0.0.1' || url.hostname === '::1') &&
+      url.port.length > 0
+    ) {
+      return url.port
+    }
+  } catch {}
+  return null
+}
+
+const getComposeHostGradleWrapperPath = (hostProjectPath: string) =>
+  path.join(hostProjectPath, process.platform === 'win32' ? 'gradlew.bat' : 'gradlew')
+
+const normalizeAndroidSdkRoot = async (
+  candidatePath: string,
+  tooling: ComposeHostTooling,
+): Promise<string | null> => {
+  let currentPath = await tooling.realpath(candidatePath).catch(() => candidatePath)
+  while (true) {
+    if (path.basename(currentPath) === 'android-sdk') {
+      return currentPath
+    }
+    const parentPath = path.dirname(currentPath)
+    if (parentPath === currentPath) {
+      return null
+    }
+    currentPath = parentPath
+  }
+}
+
+const resolveAndroidSdkRootFromCandidates = async (
+  candidatePaths: readonly string[],
+  tooling: ComposeHostTooling,
+) => {
+  for (const candidatePath of candidatePaths) {
+    const normalizedPath = await normalizeAndroidSdkRoot(candidatePath, tooling)
+    if (normalizedPath) {
+      return normalizedPath
+    }
+  }
+  return null
+}
+
+const isCompleteAndroidSdkRoot = async (sdkRoot: string, tooling: ComposeHostTooling) => {
+  const adbPath = path.join(
+    sdkRoot,
+    'platform-tools',
+    process.platform === 'win32' ? 'adb.exe' : 'adb',
+  )
+  if (!(await tooling.fileExists(adbPath))) {
+    return false
+  }
+
+  const hasBuildTools = await tooling.fileExists(path.join(sdkRoot, 'build-tools'))
+  const hasPlatforms = await tooling.fileExists(path.join(sdkRoot, 'platforms'))
+  return hasBuildTools || hasPlatforms
+}
+
+export const resolveAndroidSdkRoot = async (
+  env: NodeJS.ProcessEnv = process.env,
+  candidatePaths: readonly string[] = [],
+  tooling: ComposeHostTooling = defaultComposeHostTooling,
+) => {
+  const configuredRoot = env.ANDROID_HOME?.trim() || env.ANDROID_SDK_ROOT?.trim()
+  if (configuredRoot && (await isCompleteAndroidSdkRoot(configuredRoot, tooling))) {
+    return configuredRoot
+  }
+
+  const resolvedFromCandidates = await resolveAndroidSdkRootFromCandidates(
+    [...candidatePaths, ...resolveSdkRoots(env)],
+    tooling,
+  )
+  if (resolvedFromCandidates && (await isCompleteAndroidSdkRoot(resolvedFromCandidates, tooling))) {
+    return resolvedFromCandidates
+  }
+
+  return resolvedFromCandidates
+}
+
+const normalizeJavaHome = async (javaExecutablePath: string, tooling: ComposeHostTooling) =>
+  path.dirname(path.dirname(await tooling.realpath(javaExecutablePath)))
+
+const resolveJavaHomeFromPath = async (env: NodeJS.ProcessEnv, tooling: ComposeHostTooling) => {
+  try {
+    const { stdout } = await tooling.execFile(
+      process.platform === 'win32' ? 'where' : 'which',
+      ['java'],
+      {
+        encoding: 'utf8',
+        env,
+      },
+    )
+    const javaExecutablePath = stdout.trim().split(/\r?\n/)[0]?.trim()
+    if (!javaExecutablePath) {
+      return null
+    }
+    return normalizeJavaHome(javaExecutablePath, tooling)
+  } catch {
+    return null
+  }
+}
+
+export const resolveJavaHome = async (
+  env: NodeJS.ProcessEnv = process.env,
+  tooling: ComposeHostTooling = defaultComposeHostTooling,
+) => {
+  const configuredJavaHome = env.JAVA_HOME?.trim()
+  if (configuredJavaHome) {
+    const configuredJavaExecutable = path.join(
+      configuredJavaHome,
+      'bin',
+      process.platform === 'win32' ? 'java.exe' : 'java',
+    )
+    if (await tooling.fileExists(configuredJavaExecutable)) {
+      return normalizeJavaHome(configuredJavaExecutable, tooling)
+    }
+  }
+
+  return resolveJavaHomeFromPath(env, tooling)
+}
+
+const formatCommandErrorOutput = (error: unknown) => {
+  const lines: string[] = []
+  if (error instanceof Error && error.message) {
+    lines.push(error.message)
+  }
+  if (typeof (error as CommandError | undefined)?.stdout === 'string') {
+    lines.push((error as CommandError).stdout ?? '')
+  }
+  if (typeof (error as CommandError | undefined)?.stderr === 'string') {
+    lines.push((error as CommandError).stderr ?? '')
+  }
+  return lines.join('\n')
+}
+
+export const isMissingComposeHostActivityError = (error: unknown) => {
+  const output = formatCommandErrorOutput(error)
+  return (
+    /Error type 3/i.test(output) ||
+    /Activity class .* does not exist\./i.test(output) ||
+    /unable to resolve Intent/i.test(output)
+  )
+}
+
+const shouldInstallComposeHostApp = (
+  options: Pick<
+    ComposeHostLaunchOptions,
+    'activityName' | 'applicationId' | 'hostProjectPath' | 'installHostApp'
+  >,
+) => {
+  if (options.installHostApp === false) {
+    return false
+  }
+  if (options.hostProjectPath) {
+    return true
+  }
+  return (
+    options.applicationId === DEFAULT_ANDROID_APPLICATION_ID &&
+    options.activityName === DEFAULT_ANDROID_ACTIVITY_NAME
+  )
+}
+
+export const launchComposeHostActivity = async (
+  options: Pick<
+    ComposeHostLaunchOptions,
+    | 'activityName'
+    | 'adbPath'
+    | 'applicationId'
+    | 'emulator'
+    | 'hostProjectPath'
+    | 'installHostApp'
+    | 'manifestExtraName'
+    | 'manifestValue'
+  >,
+  env: NodeJS.ProcessEnv = process.env,
+  tooling: ComposeHostTooling = defaultComposeHostTooling,
+) => {
+  const targetArgs = options.emulator ? ['-e'] : []
+  const manifestValue = options.manifestValue
+  const manifestPort = manifestValue ? resolveLoopbackManifestPort(manifestValue) : null
+  if (manifestPort) {
+    await tooling.execFile(
+      options.adbPath,
+      [...targetArgs, 'reverse', `tcp:${manifestPort}`, `tcp:${manifestPort}`],
+      {
+        env,
+      },
+    )
+  }
+  const args = [
+    ...targetArgs,
+    'shell',
+    'am',
+    'start',
+    '-W',
+    '-a',
+    'android.intent.action.MAIN',
+    '-n',
+    `${options.applicationId}/${options.activityName}`,
+  ]
+  if (manifestValue) {
+    args.push('--es', options.manifestExtraName, manifestValue)
+  }
+
+  try {
+    await tooling.execFile(options.adbPath, args, {
+      env,
+    })
+    return
+  } catch (error) {
+    const hostProjectPath = options.hostProjectPath ?? DEFAULT_HOST_PROJECT_PATH
+    const shouldInstall =
+      shouldInstallComposeHostApp(options) &&
+      isMissingComposeHostActivityError(error) &&
+      (await tooling.fileExists(getComposeHostGradleWrapperPath(hostProjectPath)))
+
+    if (!shouldInstall) {
+      throw error
+    }
+
+    const [command, ...installArgs] = createDefaultComposeHostInstallCommand(hostProjectPath)
+    const javaHome = await resolveJavaHome(env, tooling)
+    const androidSdkRoot = await resolveAndroidSdkRoot(env, [options.adbPath], tooling)
+    const installEnv = {
+      ...env,
+      ...(androidSdkRoot
+        ? {
+            ANDROID_HOME: androidSdkRoot,
+            ANDROID_SDK_ROOT: androidSdkRoot,
+          }
+        : {}),
+      ...(javaHome
+        ? {
+            JAVA_HOME: javaHome,
+            PATH: [path.join(javaHome, 'bin'), env.PATH ?? process.env.PATH ?? '']
+              .filter(Boolean)
+              .join(path.delimiter),
+          }
+        : {}),
+    }
+    await tooling.execFile(command, installArgs, {
+      cwd: hostProjectPath,
+      env: installEnv,
+    })
+    await tooling.execFile(options.adbPath, args, {
+      env,
+    })
+  }
+}
+
+export const launchComposeHost = async (
+  options: Omit<ComposeHostLaunchOptions, 'adbPath' | 'emulatorPath'>,
+  env: NodeJS.ProcessEnv = process.env,
+) => {
+  const sdkRoots = resolveSdkRoots(env)
+  const adbPath = await resolveExecutable(
+    env,
+    'adb',
+    sdkRoots.map((root) =>
+      path.join(root, 'platform-tools', process.platform === 'win32' ? 'adb.exe' : 'adb'),
+    ),
+  )
+  const emulatorPath = await resolveExecutable(
+    env,
+    'emulator',
+    sdkRoots.map((root) =>
+      path.join(root, 'emulator', process.platform === 'win32' ? 'emulator.exe' : 'emulator'),
+    ),
+  ).catch((error) => {
+    if (!options.emulator) {
+      return 'emulator'
+    }
+    throw error
+  })
+
+  if (options.emulator) {
+    await ensureEmulator(
+      {
+        adbPath,
+        avd: options.avd,
+        bootTimeoutMs: options.bootTimeoutMs,
+        emulatorPath,
+      },
+      env,
+    )
+  }
+
+  await launchComposeHostActivity(
+    {
+      ...options,
+      adbPath,
+    },
+    env,
+  )
+}
+
+if (import.meta.main) {
+  const parsed = parseComposeHostLaunchArgs(process.argv.slice(2))
+  const manifestValue = parsed.manifestValue ?? process.env.ECLIPSA_NATIVE_MANIFEST
+
+  await launchComposeHost(
+    {
+      activityName: parsed.activityName,
+      applicationId: parsed.applicationId,
+      avd: parsed.avd,
+      bootTimeoutMs: parsed.bootTimeoutMs,
+      emulator: parsed.emulator,
+      manifestExtraName: parsed.manifestExtraName,
+      manifestValue,
+    },
+    process.env,
+  )
+}
diff --git a/packages/native-compose/mod.test.ts b/packages/native-compose/mod.test.ts
new file mode 100644
index 0000000..420c948
--- /dev/null
+++ b/packages/native-compose/mod.test.ts
@@ -0,0 +1,25 @@
+import { createElement } from '@eclipsa/native-core'
+import { resolveNativeElementType } from '@eclipsa/native'
+import { Activity, Column, COMPOSE_DEFAULT_TAG_MAP, Text } from './mod.ts'
+import { describe, expect, it } from 'vitest'
+
+describe('@eclipsa/native-compose', () => {
+  it('exports the default Compose tag map', () => {
+    expect(COMPOSE_DEFAULT_TAG_MAP.activity).toBe('compose:activity')
+    expect(COMPOSE_DEFAULT_TAG_MAP.column).toBe('compose:column')
+  })
+
+  it('wraps primitives as native elements using the Compose tags', () => {
+    const element = createElement(resolveNativeElementType(Activity), {
+      children: createElement(resolveNativeElementType(Column), {
+        children: createElement(resolveNativeElementType(Text), { value: 'Hello Compose' }),
+        spacing: 16,
+      }),
+      title: 'Eclipsa Native Compose',
+    })
+
+    expect(element.type).toBe('compose:activity')
+    expect(element.props.title).toBe('Eclipsa Native Compose')
+    expect((element.props.children as { type: string }).type).toBe('compose:column')
+  })
+})
diff --git a/packages/native-compose/mod.ts b/packages/native-compose/mod.ts
new file mode 100644
index 0000000..cb99a22
--- /dev/null
+++ b/packages/native-compose/mod.ts
@@ -0,0 +1,28 @@
+import { defineNativeComponent } from '@eclipsa/native'
+import type { DefinedNativeComponent } from '@eclipsa/native'
+import type { Android, AndroidX } from './typings.ts'
+import { COMPOSE_DEFAULT_TAG_MAP } from './platform.ts'
+
+export type { Android, AndroidX } from './typings.ts'
+export { COMPOSE_DEFAULT_TAG_MAP } from './platform.ts'
+
+export const Activity: DefinedNativeComponent<AndroidX.Compose.ActivityProps> =
+  defineNativeComponent<AndroidX.Compose.ActivityProps>(COMPOSE_DEFAULT_TAG_MAP.activity)
+export const Column: DefinedNativeComponent<AndroidX.Compose.StackProps> =
+  defineNativeComponent<AndroidX.Compose.StackProps>(COMPOSE_DEFAULT_TAG_MAP.column)
+export const Row: DefinedNativeComponent<AndroidX.Compose.StackProps> =
+  defineNativeComponent<AndroidX.Compose.StackProps>(COMPOSE_DEFAULT_TAG_MAP.row)
+export const Text: DefinedNativeComponent<AndroidX.Compose.TextProps> =
+  defineNativeComponent<AndroidX.Compose.TextProps>(COMPOSE_DEFAULT_TAG_MAP.text)
+export const Button: DefinedNativeComponent<AndroidX.Compose.ButtonProps> =
+  defineNativeComponent<AndroidX.Compose.ButtonProps>(COMPOSE_DEFAULT_TAG_MAP.button)
+export const Spacer: DefinedNativeComponent<AndroidX.Compose.ViewProps> =
+  defineNativeComponent<AndroidX.Compose.ViewProps>(COMPOSE_DEFAULT_TAG_MAP.spacer)
+export const Image: DefinedNativeComponent<AndroidX.Compose.ImageProps> =
+  defineNativeComponent<AndroidX.Compose.ImageProps>(COMPOSE_DEFAULT_TAG_MAP.image)
+export const TextField: DefinedNativeComponent<AndroidX.Compose.TextFieldProps> =
+  defineNativeComponent<AndroidX.Compose.TextFieldProps>(COMPOSE_DEFAULT_TAG_MAP.textField)
+export const Switch: DefinedNativeComponent<AndroidX.Compose.SwitchProps> =
+  defineNativeComponent<AndroidX.Compose.SwitchProps>(COMPOSE_DEFAULT_TAG_MAP.switch)
+export const LazyColumn: DefinedNativeComponent<AndroidX.Compose.LazyColumnProps> =
+  defineNativeComponent<AndroidX.Compose.LazyColumnProps>(COMPOSE_DEFAULT_TAG_MAP.lazyColumn)
diff --git a/packages/native-compose/package.json b/packages/native-compose/package.json
new file mode 100644
index 0000000..ead409a
--- /dev/null
+++ b/packages/native-compose/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "@eclipsa/native-compose",
+  "version": "0.0.0",
+  "homepage": "https://github.com/pnsk-lab/eclipsa",
+  "bugs": {
+    "url": "https://github.com/pnsk-lab/eclipsa/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pnsk-lab/eclipsa.git",
+    "directory": "packages/native-compose"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./mod.ts",
+      "import": "./mod.ts"
+    },
+    "./vite": {
+      "types": "./vite.ts",
+      "import": "./vite.ts"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "types": "./mod.d.mts",
+        "import": "./mod.mjs"
+      },
+      "./vite": {
+        "types": "./vite.d.mts",
+        "import": "./vite.mjs"
+      }
+    }
+  },
+  "scripts": {
+    "build": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
+    "host:app": "bun ./host.ts",
+    "host:app:emulator": "bun ./host.ts --emulator",
+    "host:build": "./android-compose/gradlew --project-dir ./android-compose :app:assembleDebug",
+    "host:install-debug": "./android-compose/gradlew --project-dir ./android-compose :app:installDebug",
+    "pack": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
+    "test": "vp test --run",
+    "test:coverage": "c8 --reporter=lcov --reporter=json-summary --reporter=text bunx vp test --run",
+    "typecheck": "bun x tsc -p ../../tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@eclipsa/native": "workspace:^",
+    "@eclipsa/native-core": "workspace:^"
+  }
+}
diff --git a/packages/native-compose/platform.ts b/packages/native-compose/platform.ts
new file mode 100644
index 0000000..30ca59e
--- /dev/null
+++ b/packages/native-compose/platform.ts
@@ -0,0 +1,25 @@
+export const COMPOSE_DEFAULT_TAG_MAP = {
+  activity: 'compose:activity',
+  button: 'compose:button',
+  column: 'compose:column',
+  image: 'compose:image',
+  lazyColumn: 'compose:lazy-column',
+  row: 'compose:row',
+  spacer: 'compose:spacer',
+  switch: 'compose:switch',
+  text: 'compose:text',
+  textField: 'compose:text-field',
+} as const
+
+export const COMPOSE_DEFAULT_COMPONENT_MAP = {
+  activity: 'Activity',
+  button: 'Button',
+  column: 'Column',
+  image: 'Image',
+  lazyColumn: 'LazyColumn',
+  row: 'Row',
+  spacer: 'Spacer',
+  switch: 'Switch',
+  text: 'Text',
+  textField: 'TextField',
+} as const
diff --git a/packages/native-compose/tsconfig.json b/packages/native-compose/tsconfig.json
new file mode 100644
index 0000000..271730b
--- /dev/null
+++ b/packages/native-compose/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./**/*.ts", "./**/*.d.ts"],
+  "exclude": ["./**/*.test.ts"]
+}
diff --git a/packages/native-compose/typings.ts b/packages/native-compose/typings.ts
new file mode 100644
index 0000000..0631cb0
--- /dev/null
+++ b/packages/native-compose/typings.ts
@@ -0,0 +1,55 @@
+export namespace Android {
+  export type ResourceReference = string
+  export type Uri = string
+}
+
+export namespace AndroidX {
+  export namespace Compose {
+    export interface ViewProps {
+      enabled?: boolean
+      id?: string
+      padding?: boolean | number
+      visible?: boolean
+    }
+
+    export interface StackProps extends ViewProps {
+      alignment?: 'center' | 'end' | 'start' | 'stretch'
+      spacing?: number
+    }
+
+    export interface ActivityProps extends ViewProps {
+      title?: string
+    }
+
+    export interface TextProps extends ViewProps {
+      maxLines?: number
+      value?: string
+    }
+
+    export interface ButtonProps extends ViewProps {
+      onClick?: () => void
+      title?: string
+    }
+
+    export interface ImageProps extends ViewProps {
+      contentDescription?: string
+      src?: Android.ResourceReference | Android.Uri
+    }
+
+    export interface TextFieldProps extends ViewProps {
+      onValueChange?: (value: string) => void
+      placeholder?: string
+      value?: string
+    }
+
+    export interface SwitchProps extends ViewProps {
+      onCheckedChange?: (value: boolean) => void
+      title?: string
+      value?: boolean
+    }
+
+    export interface LazyColumnProps extends ViewProps {
+      selection?: string
+    }
+  }
+}
diff --git a/packages/native-compose/vite.config.ts b/packages/native-compose/vite.config.ts
new file mode 100644
index 0000000..9da577d
--- /dev/null
+++ b/packages/native-compose/vite.config.ts
@@ -0,0 +1,21 @@
+import path from 'node:path'
+import { defineConfig } from 'vite-plus'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@eclipsa/native-core': path.resolve(import.meta.dirname, '../native-core/mod.ts'),
+    },
+  },
+  test: {
+    include: ['*.test.ts'],
+    environment: 'node',
+  },
+  pack: {
+    clean: true,
+    dts: true,
+    entry: './mod.ts',
+    format: ['esm'],
+    sourcemap: true,
+  },
+})
diff --git a/packages/native-compose/vite.test.ts b/packages/native-compose/vite.test.ts
new file mode 100644
index 0000000..e05b342
--- /dev/null
+++ b/packages/native-compose/vite.test.ts
@@ -0,0 +1,212 @@
+import { mkdtemp, mkdir, readFile, rm, writeFile } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import path from 'node:path'
+import { createServer } from 'vite'
+import { afterEach, describe, expect, it } from 'vitest'
+import { native } from '../native/vite.ts'
+import { compose, NATIVE_COMPOSE_ENVIRONMENT_NAME } from './vite.ts'
+import { createDefaultComposeHostCommand } from './host.ts'
+
+const repoRoot = path.resolve(import.meta.dirname, '../..')
+const eclipsaEntry = path.join(repoRoot, 'packages/eclipsa/mod.ts')
+const eclipsaInternalEntry = path.join(repoRoot, 'packages/eclipsa/core/internal.ts')
+const nativeEntry = path.join(repoRoot, 'packages/native/mod.ts')
+const nativeJsxRuntime = path.join(repoRoot, 'packages/native/jsx-runtime.ts')
+const nativeJsxDevRuntime = path.join(repoRoot, 'packages/native/jsx-dev-runtime.ts')
+const nativeCoreEntry = path.join(repoRoot, 'packages/native-core/mod.ts')
+const nativeComposeEntry = path.join(repoRoot, 'packages/native-compose/mod.ts')
+const testServerPort = 5184
+
+const fileExists = async (filePath: string) => {
+  try {
+    await readFile(filePath)
+    return true
+  } catch {
+    return false
+  }
+}
+
+const waitFor = async (fn: () => Promise<boolean>, timeoutMs = 10_000) => {
+  const deadline = Date.now() + timeoutMs
+  while (Date.now() < deadline) {
+    if (await fn()) {
+      return
+    }
+    await new Promise((resolve) => setTimeout(resolve, 100))
+  }
+  throw new Error(`Timed out after ${timeoutMs}ms`)
+}
+
+const createFixture = async () => {
+  const root = await mkdtemp(path.join(tmpdir(), 'eclipsa-native-compose-env-'))
+  await mkdir(path.join(root, 'app'), { recursive: true })
+  await writeFile(
+    path.join(root, 'app', '+layout.tsx'),
+    [
+      `export default function Layout(props: { children?: unknown }) {`,
+      `  return <activity>{props.children}</activity>`,
+      `}`,
+      '',
+    ].join('\n'),
+  )
+  await writeFile(
+    path.join(root, 'app', '+native-map.ts'),
+    [
+      `import { Activity, Column, Text } from '@eclipsa/native-compose'`,
+      `export const activity = Activity`,
+      `export const div = Column`,
+      `export const span = Text`,
+      '',
+    ].join('\n'),
+  )
+  await writeFile(
+    path.join(root, 'app', '+page.tsx'),
+    [
+      `import { useSignal } from 'eclipsa'`,
+      `export default function App() {`,
+      `  const count = useSignal(1)`,
+      `  return <div><span value={\`count \${count.value}\`} /></div>`,
+      `}`,
+      '',
+    ].join('\n'),
+  )
+  await writeFile(
+    path.join(root, 'fake-host.mjs'),
+    [
+      `import { writeFile } from 'node:fs/promises'`,
+      `const [launchedFile, terminatedFile] = process.argv.slice(2)`,
+      `const manifestUrl = process.env.ECLIPSA_NATIVE_MANIFEST`,
+      `const manifest = await fetch(manifestUrl).then((response) => response.json())`,
+      `await writeFile(launchedFile, JSON.stringify({ manifest, manifestUrl }))`,
+      `const shutdown = () => {`,
+      `  void writeFile(terminatedFile, 'terminated').finally(() => process.exit(0))`,
+      `}`,
+      `process.on('SIGTERM', shutdown)`,
+      `process.on('SIGINT', shutdown)`,
+      `setInterval(() => {}, 1_000)`,
+      '',
+    ].join('\n'),
+  )
+  return root
+}
+
+const resolveConfig = (root: string, command: readonly [string, ...string[]]) => ({
+  appType: 'custom' as const,
+  plugins: [
+    native({
+      target: compose({
+        command,
+        cwd: root,
+        startupTimeoutMs: 15_000,
+        stdio: 'ignore',
+      }),
+    }),
+  ],
+  resolve: {
+    alias: [
+      {
+        find: /^eclipsa\/internal$/,
+        replacement: eclipsaInternalEntry,
+      },
+      {
+        find: /^eclipsa$/,
+        replacement: eclipsaEntry,
+      },
+      {
+        find: /^@eclipsa\/native\/jsx-dev-runtime$/,
+        replacement: nativeJsxDevRuntime,
+      },
+      {
+        find: /^@eclipsa\/native\/jsx-runtime$/,
+        replacement: nativeJsxRuntime,
+      },
+      {
+        find: /^@eclipsa\/native$/,
+        replacement: nativeEntry,
+      },
+      {
+        find: /^@eclipsa\/native-core$/,
+        replacement: nativeCoreEntry,
+      },
+      {
+        find: /^@eclipsa\/native-compose$/,
+        replacement: nativeComposeEntry,
+      },
+    ],
+  },
+  root,
+  server: {
+    fs: {
+      allow: [repoRoot],
+    },
+    host: '127.0.0.1',
+    port: testServerPort,
+    strictPort: true,
+  },
+})
+
+describe('@eclipsa/native-compose vite environment', () => {
+  const cleanup = new Set<string>()
+
+  afterEach(async () => {
+    for (const directory of cleanup) {
+      await rm(directory, { force: true, recursive: true })
+    }
+    cleanup.clear()
+  })
+
+  it('launches and stops the nativeCompose host automatically during dev', async () => {
+    const root = await createFixture()
+    cleanup.add(root)
+
+    const launchedFile = path.join(root, 'launched.json')
+    const terminatedFile = path.join(root, 'terminated.txt')
+    const server = await createServer(
+      resolveConfig(root, ['bun', path.join(root, 'fake-host.mjs'), launchedFile, terminatedFile]),
+    )
+
+    try {
+      await server.listen()
+      expect(server.environments[NATIVE_COMPOSE_ENVIRONMENT_NAME]).toBeDefined()
+      expect(
+        typeof (
+          server.environments[NATIVE_COMPOSE_ENVIRONMENT_NAME] as {
+            dispatchFetch?: unknown
+          }
+        ).dispatchFetch,
+      ).toBe('function')
+      await waitFor(() => fileExists(launchedFile))
+      const launched = JSON.parse(await readFile(launchedFile, 'utf8')) as {
+        manifest: {
+          platform: string
+          target: string
+        }
+        manifestUrl: string
+      }
+
+      expect(launched.manifest.target).toBe('compose')
+      expect(launched.manifest.platform).toBe('android')
+      expect(launched.manifestUrl).toContain('/__eclipsa_native__/manifest.json')
+    } finally {
+      await server.close()
+    }
+
+    await waitFor(() => fileExists(terminatedFile))
+  }, 30_000)
+
+  it('builds the default host command with emulator flags when requested', () => {
+    const command = createDefaultComposeHostCommand(
+      'http://127.0.0.1:5184/__eclipsa_native__/manifest.json',
+      {
+        avd: 'Pixel_8_API_35',
+        emulator: true,
+      },
+    )
+
+    expect(command[0]).toBe('bun')
+    expect(command).toContain('--emulator')
+    expect(command).toContain('--avd')
+    expect(command).toContain('Pixel_8_API_35')
+    expect(command).toContain('--manifest-url')
+  })
+})
diff --git a/packages/native-compose/vite.ts b/packages/native-compose/vite.ts
new file mode 100644
index 0000000..7bbfd8f
--- /dev/null
+++ b/packages/native-compose/vite.ts
@@ -0,0 +1,150 @@
+import { spawn, type SpawnOptions } from 'node:child_process'
+import { fileURLToPath } from 'node:url'
+import {
+  createNativeFetchableDevEnvironment,
+  type NativeFetchableEnvironmentContext,
+} from '../native/dev-environment.ts'
+import type { NativeTargetAdapter } from '@eclipsa/native/vite'
+import type { ResolvedConfig } from 'vite'
+import { createDefaultComposeHostCommand } from './host.ts'
+import { parseComposeCliOptionsFromEnv } from './host.ts'
+import { parseComposeCliOptions } from './host.ts'
+import { COMPOSE_DEFAULT_COMPONENT_MAP } from './platform.ts'
+
+export const NATIVE_COMPOSE_ENVIRONMENT_NAME = 'nativeCompose'
+const DEFAULT_HOST_STARTUP_TIMEOUT_MS = 30_000
+const DEFAULT_ANDROID_APPLICATION_ID = 'dev.eclipsa.nativecompose'
+const DEFAULT_ANDROID_ACTIVITY_NAME = '.MainActivity'
+const DEFAULT_MANIFEST_EXTRA_NAME = 'manifestUrl'
+
+export interface ComposeLaunchContext {
+  manifestPath: string
+  manifestUrl: string
+}
+
+export type ComposeCommandFactory = (
+  context: ComposeLaunchContext,
+) => readonly [string, ...string[]]
+
+export interface ComposeTargetOptions {
+  activityName?: string
+  applicationId?: string
+  avd?: string
+  bootTimeoutMs?: number
+  command?: ComposeCommandFactory | readonly [string, ...string[]]
+  cwd?: string
+  emulator?: boolean
+  env?: NodeJS.ProcessEnv
+  launch?: boolean
+  manifestExtraName?: string
+  startupTimeoutMs?: number
+  stdio?: SpawnOptions['stdio']
+}
+
+interface ResolvedNativeComposeTargetOptions {
+  commandFactory: ComposeCommandFactory
+  cwd: string
+  env?: NodeJS.ProcessEnv
+  launch: boolean
+  startupTimeoutMs: number
+  stdio: SpawnOptions['stdio']
+}
+
+const resolveComposeOptionsFromCli = (options: ComposeTargetOptions): ComposeTargetOptions => {
+  const cliOptions = parseComposeCliOptions(process.argv.slice(2))
+  const envOptions = parseComposeCliOptionsFromEnv(process.env)
+  return {
+    ...options,
+    avd: options.avd ?? envOptions.avd ?? cliOptions.avd,
+    bootTimeoutMs: options.bootTimeoutMs ?? envOptions.bootTimeoutMs ?? cliOptions.bootTimeoutMs,
+    emulator: options.emulator ?? envOptions.emulator ?? cliOptions.emulator,
+  }
+}
+
+const resolveNativeComposeTargetOptions = (
+  config: ResolvedConfig,
+  options: ComposeTargetOptions,
+): ResolvedNativeComposeTargetOptions => {
+  const resolvedOptions = resolveComposeOptionsFromCli(options)
+  const manifestExtraName = options.manifestExtraName ?? DEFAULT_MANIFEST_EXTRA_NAME
+  return {
+    commandFactory:
+      typeof resolvedOptions.command === 'function'
+        ? resolvedOptions.command
+        : resolvedOptions.command
+          ? () => resolvedOptions.command as readonly [string, ...string[]]
+          : ({ manifestUrl }) =>
+              createDefaultComposeHostCommand(manifestUrl, {
+                activityName: resolvedOptions.activityName ?? DEFAULT_ANDROID_ACTIVITY_NAME,
+                applicationId: resolvedOptions.applicationId ?? DEFAULT_ANDROID_APPLICATION_ID,
+                avd: resolvedOptions.avd,
+                bootTimeoutMs: resolvedOptions.bootTimeoutMs,
+                emulator: resolvedOptions.emulator,
+                manifestExtraName,
+              }),
+    cwd: resolvedOptions.cwd ?? config.root,
+    env: resolvedOptions.env,
+    launch: resolvedOptions.launch ?? true,
+    startupTimeoutMs: resolvedOptions.startupTimeoutMs ?? DEFAULT_HOST_STARTUP_TIMEOUT_MS,
+    stdio: resolvedOptions.stdio ?? 'inherit',
+  }
+}
+
+const createNativeComposeDevEnvironment = (
+  name: string,
+  config: ResolvedConfig,
+  context: NativeFetchableEnvironmentContext,
+  options: ComposeTargetOptions,
+  manifestPath: string,
+) => {
+  const resolved = resolveNativeComposeTargetOptions(config, options)
+  return createNativeFetchableDevEnvironment(config, context, {
+    createHostProcess({ manifestUrl }) {
+      const [command, ...args] = resolved.commandFactory({
+        manifestPath,
+        manifestUrl,
+      })
+      return {
+        child: spawn(command, args, {
+          cwd: resolved.cwd,
+          env: {
+            ...process.env,
+            ...resolved.env,
+            ECLIPSA_NATIVE_MANIFEST: manifestUrl,
+          },
+          stdio: resolved.stdio,
+        }),
+        description: [command, ...args].join(' '),
+      }
+    },
+    launch: resolved.launch,
+    manifestPath,
+    name,
+    startupTimeoutMs: resolved.startupTimeoutMs,
+  })
+}
+
+export const compose = (options: ComposeTargetOptions = {}): NativeTargetAdapter => ({
+  bindingPackage: '@eclipsa/native-compose',
+  createEnvironmentOptions({ manifestPath }) {
+    return {
+      consumer: 'server',
+      dev: {
+        createEnvironment(name, config, context) {
+          return createNativeComposeDevEnvironment(
+            name,
+            config,
+            context as NativeFetchableEnvironmentContext,
+            options,
+            manifestPath,
+          )
+        },
+      },
+    }
+  },
+  defaultMap: COMPOSE_DEFAULT_COMPONENT_MAP,
+  environmentName: NATIVE_COMPOSE_ENVIRONMENT_NAME,
+  name: 'compose',
+  platform: 'android',
+  workspaceFallback: fileURLToPath(new URL('./mod.ts', import.meta.url)),
+})
diff --git a/packages/native-core/component.ts b/packages/native-core/component.ts
new file mode 100644
index 0000000..7bd55ae
--- /dev/null
+++ b/packages/native-core/component.ts
@@ -0,0 +1,108 @@
+import { getContextProviderMeta } from './context.ts'
+
+export type NativeKey = number | string | symbol
+export type NativePrimitive = bigint | boolean | null | number | string | undefined
+
+export const Fragment = Symbol.for('eclipsa.native.fragment')
+export const NativeComponentType = Symbol.for('eclipsa.native.component-type')
+
+export interface NativeComponentDescriptor<P = object> {
+  [NativeComponentType]: NativeElementType<P>
+}
+
+export interface NativeElement<P = object> {
+  key?: NativeKey
+  props: P & {
+    children?: NativeChild
+  }
+  type: NativeElementType<P>
+}
+
+export type NativeComponent<P = object> = (props: P) => NativeChild
+
+export type NativeElementType<P = object> =
+  | NativeComponent<P>
+  | NativeComponentDescriptor<P>
+  | typeof Fragment
+  | string
+
+export type NativeChild = NativeElement | NativePrimitive | readonly NativeChild[]
+
+const normalizeChildren = (value: readonly NativeChild[]): NativeChild => {
+  if (value.length === 0) {
+    return undefined
+  }
+  if (value.length === 1) {
+    return value[0]
+  }
+  return value
+}
+
+export const createElement = <P extends object>(
+  type: NativeElementType<P>,
+  props?: (P & { children?: NativeChild; key?: NativeKey }) | null,
+  ...children: NativeChild[]
+): NativeElement<P> => {
+  const key = props?.key
+  const nextProps = {
+    ...props,
+    ...(children.length > 0 ? { children: normalizeChildren(children) } : {}),
+  } as P & {
+    children?: NativeChild
+    key?: NativeKey
+  }
+  if ('key' in nextProps) {
+    delete nextProps.key
+  }
+  return {
+    ...(key === undefined ? {} : { key }),
+    props: nextProps,
+    type,
+  }
+}
+
+export const h = createElement
+
+export const isNativeElement = (value: unknown): value is NativeElement =>
+  !!value &&
+  typeof value === 'object' &&
+  'props' in value &&
+  'type' in value &&
+  typeof (value as { props?: unknown }).props === 'object'
+
+export const isNativeComponentType = (value: unknown): value is NativeComponent =>
+  typeof value === 'function' && !getContextProviderMeta(value)
+
+export const createNativeComponentDescriptor = <P extends object>(
+  type: NativeElementType<P>,
+): NativeComponentDescriptor<P> =>
+  Object.freeze({
+    [NativeComponentType]: type,
+  }) as NativeComponentDescriptor<P>
+
+export const isNativeComponentDescriptor = (value: unknown): value is NativeComponentDescriptor =>
+  !!value &&
+  (typeof value === 'object' || typeof value === 'function') &&
+  NativeComponentType in (value as Record<PropertyKey, unknown>)
+
+export const resolveNativeComponentDescriptor = <P extends object>(
+  value: NativeComponentDescriptor<P>,
+) => value[NativeComponentType]
+
+export const toChildArray = (value: NativeChild): NativeChild[] => {
+  const result: NativeChild[] = []
+  const append = (candidate: NativeChild) => {
+    if (candidate === null || candidate === undefined || typeof candidate === 'boolean') {
+      return
+    }
+    if (Array.isArray(candidate)) {
+      for (const entry of candidate) {
+        append(entry)
+      }
+      return
+    }
+    result.push(candidate)
+  }
+  append(value)
+  return result
+}
diff --git a/packages/native-core/context.ts b/packages/native-core/context.ts
new file mode 100644
index 0000000..9c30b85
--- /dev/null
+++ b/packages/native-core/context.ts
@@ -0,0 +1,196 @@
+import type { NativeChild, NativeComponent } from './component.ts'
+
+const CONTEXT_META_KEY = Symbol.for('eclipsa.native.context-meta')
+const CONTEXT_PROVIDER_META_KEY = Symbol.for('eclipsa.native.context-provider-meta')
+const CONTEXT_REGISTRY_KEY = Symbol.for('eclipsa.native.context-registry')
+const CONTEXT_NEXT_ID_KEY = Symbol.for('eclipsa.native.context-next-id')
+
+type ContextToken<T> = symbol & {
+  __context?: T
+}
+
+interface NativeContextState<T> {
+  defaultValue: T | undefined
+  hasDefault: boolean
+  id: string
+  token: ContextToken<T>
+}
+
+export interface ContextProviderProps<T> {
+  children?: NativeChild
+  value: T
+}
+
+export interface NativeContext<T> {
+  Provider: NativeComponent<ContextProviderProps<T>>
+}
+
+export interface SerializedContextDescriptor<T = unknown> {
+  defaultValue: T | undefined
+  hasDefault: boolean
+  id: string
+}
+
+export interface ContextProviderMeta<T = unknown> {
+  id: string
+  token: ContextToken<T>
+}
+
+interface RenderContextFrame {
+  parent: RenderContextFrame | null
+  values: Map<ContextToken<unknown>, unknown>
+}
+
+const renderContextStack: RenderContextFrame[] = []
+
+const getContextRegistry = () => {
+  const globalRecord = globalThis as Record<PropertyKey, unknown>
+  let registry = globalRecord[CONTEXT_REGISTRY_KEY] as
+    | Map<string, NativeContext<unknown>>
+    | undefined
+  if (!registry) {
+    registry = new Map()
+    globalRecord[CONTEXT_REGISTRY_KEY] = registry
+  }
+  return registry
+}
+
+const allocateContextId = () => {
+  const globalRecord = globalThis as Record<PropertyKey, unknown>
+  const nextId = ((globalRecord[CONTEXT_NEXT_ID_KEY] as number | undefined) ?? 0) + 1
+  globalRecord[CONTEXT_NEXT_ID_KEY] = nextId
+  return `native-context-${nextId}`
+}
+
+const getContextStateMaybe = <T>(value: unknown): NativeContextState<T> | null => {
+  if (!value || (typeof value !== 'function' && typeof value !== 'object')) {
+    return null
+  }
+  return (
+    ((value as Record<PropertyKey, unknown>)[CONTEXT_META_KEY] as
+      | NativeContextState<T>
+      | undefined) ?? null
+  )
+}
+
+const getContextState = <T>(context: NativeContext<T>) => {
+  const state = getContextStateMaybe<T>(context)
+  if (!state) {
+    throw new TypeError('Expected a context created by createContext().')
+  }
+  return state
+}
+
+const registerContext = <T>(id: string, context: NativeContext<T>) => {
+  getContextRegistry().set(id, context as NativeContext<unknown>)
+}
+
+const createContextWithId = <T>(
+  id: string,
+  hasDefault: boolean,
+  defaultValue: T | undefined,
+): NativeContext<T> => {
+  const token = Symbol.for(`eclipsa.native.context:${id}`) as ContextToken<T>
+  const Provider = ((props: ContextProviderProps<T>) => props.children) as NativeComponent<
+    ContextProviderProps<T>
+  >
+
+  Object.defineProperty(Provider, CONTEXT_PROVIDER_META_KEY, {
+    configurable: false,
+    enumerable: false,
+    value: {
+      id,
+      token,
+    } satisfies ContextProviderMeta<T>,
+    writable: false,
+  })
+
+  const context = {
+    Provider,
+  } as NativeContext<T>
+
+  Object.defineProperty(context, CONTEXT_META_KEY, {
+    configurable: false,
+    enumerable: false,
+    value: {
+      defaultValue,
+      hasDefault,
+      id,
+      token,
+    } satisfies NativeContextState<T>,
+    writable: false,
+  })
+
+  registerContext(id, context)
+  return context
+}
+
+export const createContext = <T>(...args: [defaultValue?: T]) =>
+  createContextWithId(allocateContextId(), args.length > 0, args[0])
+
+export const describeContext = <T>(context: NativeContext<T>): SerializedContextDescriptor<T> => {
+  const state = getContextState(context)
+  return {
+    defaultValue: state.defaultValue,
+    hasDefault: state.hasDefault,
+    id: state.id,
+  }
+}
+
+export const materializeContext = <T>(descriptor: SerializedContextDescriptor<T>) => {
+  const existing = getContextRegistry().get(descriptor.id) as NativeContext<T> | undefined
+  if (existing) {
+    return existing
+  }
+  return createContextWithId(descriptor.id, descriptor.hasDefault, descriptor.defaultValue)
+}
+
+export const getContextProviderMeta = (value: unknown): ContextProviderMeta | null => {
+  if (typeof value !== 'function') {
+    return null
+  }
+  return (
+    ((value as unknown as Record<PropertyKey, unknown>)[CONTEXT_PROVIDER_META_KEY] as
+      | ContextProviderMeta
+      | undefined) ?? null
+  )
+}
+
+export const getCurrentRenderContext = () =>
+  renderContextStack.length > 0 ? renderContextStack[renderContextStack.length - 1]! : null
+
+export const enterRenderContext = <T>(frame: RenderContextFrame | null, fn: () => T) => {
+  if (!frame) {
+    return fn()
+  }
+  renderContextStack.push(frame)
+  try {
+    return fn()
+  } finally {
+    renderContextStack.pop()
+  }
+}
+
+export const createChildRenderContext = <T>(
+  token: ContextToken<T>,
+  value: T,
+  parent = getCurrentRenderContext(),
+): RenderContextFrame => ({
+  parent,
+  values: new Map<ContextToken<unknown>, unknown>([[token as ContextToken<unknown>, value]]),
+})
+
+export const useContext = <T>(context: NativeContext<T>): T => {
+  const state = getContextState(context)
+  let frame = getCurrentRenderContext()
+  while (frame) {
+    if (frame.values.has(state.token as ContextToken<unknown>)) {
+      return frame.values.get(state.token as ContextToken<unknown>) as T
+    }
+    frame = frame.parent
+  }
+  if (state.hasDefault) {
+    return state.defaultValue as T
+  }
+  throw new Error('useContext() could not find a matching provider in the native render tree.')
+}
diff --git a/packages/native-core/dev-client.test.ts b/packages/native-core/dev-client.test.ts
new file mode 100644
index 0000000..3b0e011
--- /dev/null
+++ b/packages/native-core/dev-client.test.ts
@@ -0,0 +1,123 @@
+import { describe, expect, it } from 'vitest'
+import { createNativeDevClientRuntime } from './dev-client.ts'
+
+const silentLogger = {
+  debug() {},
+  error() {},
+}
+
+describe('native-core dev client runtime', () => {
+  it('applies accepted dependency updates through the shared hmr graph', async () => {
+    const imported: string[] = []
+    const invalidated: string[][] = []
+    let depVersion = 0
+
+    const runtime = createNativeDevClientRuntime({
+      entry: '/entry.js',
+      logger: silentLogger,
+      runner: {
+        clearCache() {},
+        importModule(url) {
+          imported.push(url)
+          return {
+            default: url === '/dep.js' ? `dep:${++depVersion}` : `module:${url}`,
+          }
+        },
+        invalidateModules(urls) {
+          invalidated.push([...urls])
+        },
+      },
+    })
+
+    const hot = runtime.createHotContext('/entry.js')
+    let updatedModule: string | undefined
+    hot.accept('/dep.js', (module) => {
+      updatedModule = module?.default as string | undefined
+    })
+
+    await runtime.handlePayload({
+      type: 'update',
+      updates: [
+        {
+          acceptedPath: '/dep.js',
+          firstInvalidatedBy: '/source.js',
+          invalidates: ['/nested.js'],
+          path: '/entry.js',
+          type: 'js-update',
+        },
+      ],
+    })
+
+    expect(invalidated).toEqual([['/dep.js', '/entry.js', '/source.js', '/nested.js']])
+    expect(imported).toEqual(['/dep.js'])
+    expect(updatedModule).toBe('dep:1')
+  })
+
+  it('keeps hot data across self-accepted updates', async () => {
+    let entryVersion = 0
+
+    const runtime = createNativeDevClientRuntime({
+      entry: '/entry.js',
+      logger: silentLogger,
+      runner: {
+        clearCache() {},
+        importModule() {
+          entryVersion += 1
+          return {
+            default: `entry:${entryVersion}`,
+          }
+        },
+        invalidateModules() {},
+      },
+    })
+
+    const hot = runtime.createHotContext('/entry.js')
+    hot.dispose((data) => {
+      data.version = entryVersion
+    })
+    hot.accept(() => undefined)
+
+    await runtime.handlePayload({
+      type: 'update',
+      updates: [
+        {
+          acceptedPath: '/entry.js',
+          path: '/entry.js',
+          type: 'js-update',
+        },
+      ],
+    })
+
+    const nextHot = runtime.createHotContext('/entry.js')
+    expect(nextHot.data.version).toBe(0)
+  })
+
+  it('reimports the entry module on full reload payloads', async () => {
+    const imported: string[] = []
+    let clearCount = 0
+
+    const runtime = createNativeDevClientRuntime({
+      entry: '/entry.js',
+      logger: silentLogger,
+      runner: {
+        clearCache() {
+          clearCount += 1
+        },
+        importModule(url) {
+          imported.push(url)
+          return {
+            default: url,
+          }
+        },
+        invalidateModules() {},
+      },
+    })
+
+    await runtime.handlePayload({
+      type: 'full-reload',
+    })
+
+    expect(clearCount).toBe(1)
+    expect(imported).toEqual(['/entry.js'])
+  })
+})
diff --git a/packages/native-core/dev-client.ts b/packages/native-core/dev-client.ts
new file mode 100644
index 0000000..9b9c7d1
--- /dev/null
+++ b/packages/native-core/dev-client.ts
@@ -0,0 +1,504 @@
+export interface NativeHotUpdate {
+  acceptedPath: string
+  firstInvalidatedBy?: string
+  invalidates?: string[]
+  path: string
+  timestamp?: number
+  type: 'css-update' | 'js-update'
+}
+
+export interface NativeConnectedPayload {
+  type: 'connected'
+}
+
+export interface NativeCustomPayload {
+  data?: unknown
+  event: string
+  type: 'custom'
+}
+
+export interface NativeErrorPayload {
+  err: {
+    message: string
+    stack?: string
+  }
+  type: 'error'
+}
+
+export interface NativeFullReloadPayload {
+  path?: string
+  triggeredBy?: string
+  type: 'full-reload'
+}
+
+export interface NativePingPayload {
+  type: 'ping'
+}
+
+export interface NativePrunePayload {
+  paths: string[]
+  type: 'prune'
+}
+
+export interface NativeUpdatePayload {
+  type: 'update'
+  updates: NativeHotUpdate[]
+}
+
+export type NativeHotPayload =
+  | NativeConnectedPayload
+  | NativeCustomPayload
+  | NativeErrorPayload
+  | NativeFullReloadPayload
+  | NativePingPayload
+  | NativePrunePayload
+  | NativeUpdatePayload
+
+export type NativeModuleNamespace = Record<string, unknown> & {
+  [Symbol.toStringTag]?: 'Module'
+}
+
+export interface NativeModuleRunner {
+  clearCache(): void
+  importModule(url: string, importer?: string | null): NativeModuleNamespace
+  invalidateModules(urls: Iterable<string>): void
+}
+
+export interface NativeHMRLogger {
+  debug(...message: unknown[]): void
+  error(message: Error | string): void
+}
+
+export interface NativeHotContext {
+  readonly data: Record<string, unknown>
+  accept(): void
+  accept(callback: (module: NativeModuleNamespace | undefined) => void): void
+  accept(dependency: string, callback: (module: NativeModuleNamespace | undefined) => void): void
+  accept(
+    dependencies: readonly string[],
+    callback: (modules: Array<NativeModuleNamespace | undefined>) => void,
+  ): void
+  acceptExports(
+    exportNames: string | readonly string[],
+    callback?: (module: NativeModuleNamespace | undefined) => void,
+  ): void
+  dispose(callback: (data: Record<string, unknown>) => void | Promise<void>): void
+  invalidate(message?: string): void
+  off(event: string, callback: (payload: unknown) => void): void
+  on(event: string, callback: (payload: unknown) => void): void
+  prune(callback: (data: Record<string, unknown>) => void | Promise<void>): void
+  send(event: string, payload?: unknown): void
+}
+
+export interface NativeDevClientRuntime {
+  boot(): void
+  createHotContext(ownerPath: string): NativeHotContext
+  handlePayload(payload: NativeHotPayload): Promise<void>
+}
+
+interface HotModuleCallback {
+  deps: string[]
+  fn: (modules: Array<NativeModuleNamespace | undefined>) => void
+}
+
+interface HotModuleRecord {
+  callbacks: HotModuleCallback[]
+  id: string
+}
+
+type ListenerMap = Map<string, Array<(payload: unknown) => void>>
+
+const defaultLogger: NativeHMRLogger = {
+  debug(...message) {
+    console.log('[vite]', ...message)
+  },
+  error(message) {
+    console.error('[vite]', message)
+  },
+}
+
+const unwrapViteId = (value: string) =>
+  value.startsWith('/@id/') ? value.slice(5).replace('__x00__', '\0') : value
+
+class NativeHMRClient {
+  readonly customListenersMap = new Map<string, Array<(payload: unknown) => void>>()
+  readonly ctxToListenersMap = new Map<string, ListenerMap>()
+  readonly dataMap = new Map<string, Record<string, unknown>>()
+  readonly disposeMap = new Map<string, (data: Record<string, unknown>) => void | Promise<void>>()
+  readonly hotModulesMap = new Map<string, HotModuleRecord>()
+  readonly pruneMap = new Map<string, (data: Record<string, unknown>) => void | Promise<void>>()
+
+  currentFirstInvalidatedBy: string | undefined
+
+  private readonly importUpdatedModule: (update: NativeHotUpdate) => NativeModuleNamespace
+  private pendingUpdateQueue = false
+  private updateQueue: Array<Promise<(() => void) | undefined>> = []
+
+  constructor(
+    readonly logger: NativeHMRLogger,
+    importUpdatedModule: (update: NativeHotUpdate) => NativeModuleNamespace,
+  ) {
+    this.importUpdatedModule = importUpdatedModule
+  }
+
+  clear() {
+    this.hotModulesMap.clear()
+    this.disposeMap.clear()
+    this.pruneMap.clear()
+    this.dataMap.clear()
+    this.customListenersMap.clear()
+    this.ctxToListenersMap.clear()
+  }
+
+  async notifyListeners(event: string, payload: unknown) {
+    const listeners = this.customListenersMap.get(event) ?? []
+    await Promise.allSettled(listeners.map(async (listener) => listener(payload)))
+  }
+
+  async prunePaths(paths: string[]) {
+    await Promise.all(
+      paths.map(async (path) => {
+        const disposer = this.disposeMap.get(path)
+        if (disposer) {
+          await disposer(this.dataMap.get(path) ?? {})
+        }
+      }),
+    )
+    await Promise.all(
+      paths.map(async (path) => {
+        const prune = this.pruneMap.get(path)
+        if (prune) {
+          await prune(this.dataMap.get(path) ?? {})
+        }
+      }),
+    )
+  }
+
+  async queueUpdate(payload: NativeHotUpdate) {
+    this.updateQueue.push(this.fetchUpdate(payload))
+    if (this.pendingUpdateQueue) {
+      return
+    }
+
+    this.pendingUpdateQueue = true
+    await Promise.resolve()
+    this.pendingUpdateQueue = false
+
+    const pending = [...this.updateQueue]
+    this.updateQueue = []
+    ;(await Promise.all(pending)).forEach((applyUpdate) => {
+      applyUpdate?.()
+    })
+  }
+
+  private async fetchUpdate(update: NativeHotUpdate) {
+    const { acceptedPath, firstInvalidatedBy, path } = update
+    const module = this.hotModulesMap.get(path)
+    if (!module) {
+      return undefined
+    }
+
+    const isSelfUpdate = path === acceptedPath
+    const qualifiedCallbacks = module.callbacks.filter(({ deps }) => deps.includes(acceptedPath))
+    let fetchedModule: NativeModuleNamespace | undefined
+
+    if (isSelfUpdate || qualifiedCallbacks.length > 0) {
+      const disposer = this.disposeMap.get(acceptedPath)
+      if (disposer) {
+        await disposer(this.dataMap.get(acceptedPath) ?? {})
+      }
+      try {
+        fetchedModule = this.importUpdatedModule(update)
+      } catch (error) {
+        this.warnFailedUpdate(error, acceptedPath)
+      }
+    }
+
+    return () => {
+      try {
+        this.currentFirstInvalidatedBy = firstInvalidatedBy
+        for (const { deps, fn } of qualifiedCallbacks) {
+          fn(deps.map((dependency) => (dependency === acceptedPath ? fetchedModule : undefined)))
+        }
+        this.logger.debug('hot updated:', isSelfUpdate ? path : `${acceptedPath} via ${path}`)
+      } finally {
+        this.currentFirstInvalidatedBy = undefined
+      }
+    }
+  }
+
+  private warnFailedUpdate(error: unknown, path: string) {
+    if (error instanceof Error) {
+      this.logger.error(error)
+      this.logger.error(
+        `Failed to reload ${path}. This could be due to syntax errors or importing non-existent modules.`,
+      )
+      return
+    }
+    this.logger.error(`Failed to reload ${path}: ${String(error)}`)
+  }
+}
+
+class NativeHotContextImpl implements NativeHotContext {
+  readonly data: Record<string, unknown>
+  private readonly newListeners = new Map<string, Array<(payload: unknown) => void>>()
+
+  constructor(
+    private readonly client: NativeHMRClient,
+    private readonly ownerPath: string,
+  ) {
+    this.data = client.dataMap.get(ownerPath) ?? {}
+    if (!client.dataMap.has(ownerPath)) {
+      client.dataMap.set(ownerPath, this.data)
+    }
+
+    const moduleRecord = client.hotModulesMap.get(ownerPath)
+    if (moduleRecord) {
+      moduleRecord.callbacks = []
+    }
+
+    const staleListeners = client.ctxToListenersMap.get(ownerPath)
+    if (staleListeners) {
+      for (const [event, callbacks] of staleListeners) {
+        const listeners = client.customListenersMap.get(event)
+        if (!listeners) {
+          continue
+        }
+        client.customListenersMap.set(
+          event,
+          listeners.filter((listener) => !callbacks.includes(listener)),
+        )
+      }
+    }
+
+    client.ctxToListenersMap.set(ownerPath, this.newListeners)
+  }
+
+  accept(
+    dependencies?:
+      | string
+      | readonly string[]
+      | ((module: NativeModuleNamespace | undefined) => void),
+    callback?:
+      | ((module: NativeModuleNamespace | undefined) => void)
+      | ((modules: Array<NativeModuleNamespace | undefined>) => void),
+  ) {
+    if (typeof dependencies === 'function' || dependencies == null) {
+      this.acceptDependencies([this.ownerPath], ([module]) => {
+        dependencies?.(module)
+      })
+      return
+    }
+    if (typeof dependencies === 'string') {
+      this.acceptDependencies([dependencies], ([module]) => {
+        ;(callback as ((module: NativeModuleNamespace | undefined) => void) | undefined)?.(module)
+      })
+      return
+    }
+    if (Array.isArray(dependencies)) {
+      this.acceptDependencies(
+        [...dependencies],
+        (callback as ((modules: Array<NativeModuleNamespace | undefined>) => void) | undefined) ??
+          (() => undefined),
+      )
+      return
+    }
+    throw new Error('invalid hot.accept() usage.')
+  }
+
+  acceptExports(
+    _exportNames: string | readonly string[],
+    callback?: (module: NativeModuleNamespace | undefined) => void,
+  ) {
+    this.acceptDependencies([this.ownerPath], ([module]) => {
+      callback?.(module)
+    })
+  }
+
+  dispose(callback: (data: Record<string, unknown>) => void | Promise<void>) {
+    this.client.disposeMap.set(this.ownerPath, callback)
+  }
+
+  invalidate(message?: string) {
+    const firstInvalidatedBy = this.client.currentFirstInvalidatedBy ?? this.ownerPath
+    void this.client.notifyListeners('vite:invalidate', {
+      firstInvalidatedBy,
+      message,
+      path: this.ownerPath,
+    })
+    this.client.logger.debug(`invalidate ${this.ownerPath}${message ? `: ${message}` : ''}`)
+  }
+
+  off(event: string, callback: (payload: unknown) => void) {
+    this.removeFromListeners(this.client.customListenersMap, event, callback)
+    this.removeFromListeners(this.newListeners, event, callback)
+  }
+
+  on(event: string, callback: (payload: unknown) => void) {
+    this.addToListeners(this.client.customListenersMap, event, callback)
+    this.addToListeners(this.newListeners, event, callback)
+  }
+
+  prune(callback: (data: Record<string, unknown>) => void | Promise<void>) {
+    this.client.pruneMap.set(this.ownerPath, callback)
+  }
+
+  send(event: string, payload?: unknown) {
+    void this.client.notifyListeners(event, payload)
+  }
+
+  private acceptDependencies(
+    dependencies: string[],
+    callback: (modules: Array<NativeModuleNamespace | undefined>) => void,
+  ) {
+    const moduleRecord = this.client.hotModulesMap.get(this.ownerPath) ?? {
+      callbacks: [],
+      id: this.ownerPath,
+    }
+    moduleRecord.callbacks.push({
+      deps: dependencies,
+      fn: callback,
+    })
+    this.client.hotModulesMap.set(this.ownerPath, moduleRecord)
+  }
+
+  private addToListeners(
+    listenersMap: ListenerMap,
+    event: string,
+    callback: (payload: unknown) => void,
+  ) {
+    const listeners = listenersMap.get(event) ?? []
+    listeners.push(callback)
+    listenersMap.set(event, listeners)
+  }
+
+  private removeFromListeners(
+    listenersMap: ListenerMap,
+    event: string,
+    callback: (payload: unknown) => void,
+  ) {
+    const listeners = listenersMap.get(event)
+    if (!listeners) {
+      return
+    }
+    const nextListeners = listeners.filter((listener) => listener !== callback)
+    if (nextListeners.length === 0) {
+      listenersMap.delete(event)
+      return
+    }
+    listenersMap.set(event, nextListeners)
+  }
+}
+
+export const createNativeDevClientRuntime = ({
+  entry,
+  logger = defaultLogger,
+  runner,
+}: {
+  entry: string
+  logger?: NativeHMRLogger
+  runner: NativeModuleRunner
+}): NativeDevClientRuntime => {
+  const client = new NativeHMRClient(logger, (update) => {
+    const invalidatedModules = new Set<string>([update.acceptedPath, update.path])
+    if (update.firstInvalidatedBy) {
+      invalidatedModules.add(update.firstInvalidatedBy)
+    }
+    for (const invalidated of update.invalidates ?? []) {
+      invalidatedModules.add(invalidated)
+    }
+    runner.invalidateModules(invalidatedModules)
+    return runner.importModule(update.acceptedPath, null)
+  })
+
+  return {
+    boot() {
+      runner.importModule(entry, null)
+    },
+    createHotContext(ownerPath) {
+      return new NativeHotContextImpl(client, ownerPath)
+    },
+    async handlePayload(payload) {
+      switch (payload.type) {
+        case 'connected':
+          logger.debug('connected.')
+          return
+        case 'custom':
+          await client.notifyListeners(payload.event, payload.data)
+          return
+        case 'error':
+          logger.error(`Internal Server Error\n${payload.err.message}\n${payload.err.stack ?? ''}`)
+          return
+        case 'full-reload':
+          logger.debug('program reload')
+          await client.notifyListeners('vite:beforeFullReload', payload)
+          client.clear()
+          runner.clearCache()
+          runner.importModule(entry, null)
+          return
+        case 'ping':
+          return
+        case 'prune':
+          await client.notifyListeners('vite:beforePrune', payload)
+          await client.prunePaths(payload.paths)
+          return
+        case 'update':
+          await client.notifyListeners('vite:beforeUpdate', payload)
+          await Promise.all(
+            payload.updates.map(async (update) => {
+              if (update.type !== 'js-update') {
+                logger.error('css hmr is not supported in native runner mode.')
+                return
+              }
+              await client.queueUpdate({
+                ...update,
+                acceptedPath: unwrapViteId(update.acceptedPath),
+                firstInvalidatedBy: update.firstInvalidatedBy
+                  ? unwrapViteId(update.firstInvalidatedBy)
+                  : undefined,
+                invalidates: update.invalidates?.map(unwrapViteId),
+                path: unwrapViteId(update.path),
+              })
+            }),
+          )
+          await client.notifyListeners('vite:afterUpdate', payload)
+          return
+      }
+    },
+  }
+}
+
+interface NativeDevManifest {
+  entry: string
+}
+
+interface NativeDevGlobalState {
+  __eclipsaNativeCreateHotContext?: (ownerPath: string) => NativeHotContext
+  __eclipsaNativeDevManifest?: NativeDevManifest
+  __eclipsaNativeHandleHmrPayload?: (payload: NativeHotPayload) => Promise<void>
+  __eclipsaNativeModuleRunner?: NativeModuleRunner
+}
+
+export const bootNativeDevClient = () => {
+  const globalState = globalThis as NativeDevGlobalState
+  const manifest = globalState.__eclipsaNativeDevManifest
+  const runner = globalState.__eclipsaNativeModuleRunner
+
+  if (!manifest?.entry) {
+    throw new Error('Missing native dev manifest entry.')
+  }
+  if (!runner) {
+    throw new Error(
+      'Native module runner is unavailable on globalThis.__eclipsaNativeModuleRunner.',
+    )
+  }
+
+  const runtime = createNativeDevClientRuntime({
+    entry: manifest.entry,
+    runner,
+  })
+
+  globalState.__eclipsaNativeCreateHotContext = (ownerPath) => runtime.createHotContext(ownerPath)
+  globalState.__eclipsaNativeHandleHmrPayload = (payload) => runtime.handlePayload(payload)
+  runtime.boot()
+}
diff --git a/packages/native-core/metadata.ts b/packages/native-core/metadata.ts
new file mode 100644
index 0000000..9fbd85f
--- /dev/null
+++ b/packages/native-core/metadata.ts
@@ -0,0 +1,102 @@
+import type { NativeComponent } from './component.ts'
+
+const COMPONENT_META_KEY = Symbol.for('eclipsa.native.component-meta')
+const LAZY_META_KEY = Symbol.for('eclipsa.native.lazy-meta')
+const WATCH_META_KEY = Symbol.for('eclipsa.native.watch-meta')
+
+export interface ComponentMeta {
+  captures: () => unknown[]
+  symbol: string
+}
+
+export interface LazyMeta {
+  captures: () => unknown[]
+  symbol: string
+}
+
+export interface WatchMeta {
+  captures: () => unknown[]
+  symbol: string
+}
+
+export const defineComponent = <P>(
+  component: NativeComponent<P>,
+  symbol: string,
+  captures: () => unknown[] = () => [],
+) => {
+  Object.defineProperty(component, COMPONENT_META_KEY, {
+    configurable: true,
+    enumerable: false,
+    value: {
+      captures,
+      symbol,
+    } satisfies ComponentMeta,
+    writable: true,
+  })
+  return component
+}
+
+export const defineLazySymbol = <T extends (...args: any[]) => unknown>(
+  symbol: string,
+  fn: T,
+  captures: () => unknown[] = () => [],
+) => {
+  Object.defineProperty(fn, LAZY_META_KEY, {
+    configurable: true,
+    enumerable: false,
+    value: {
+      captures,
+      symbol,
+    } satisfies LazyMeta,
+    writable: true,
+  })
+  return fn
+}
+
+export const defineWatchSymbol = <T extends (...args: any[]) => unknown>(
+  symbol: string,
+  fn: T,
+  captures: () => unknown[] = () => [],
+) => {
+  Object.defineProperty(fn, WATCH_META_KEY, {
+    configurable: true,
+    enumerable: false,
+    value: {
+      captures,
+      symbol,
+    } satisfies WatchMeta,
+    writable: true,
+  })
+  return fn
+}
+
+export const getComponentMeta = (value: unknown): ComponentMeta | null => {
+  if (typeof value !== 'function') {
+    return null
+  }
+  return (
+    ((value as unknown as Record<PropertyKey, unknown>)[COMPONENT_META_KEY] as
+      | ComponentMeta
+      | undefined) ?? null
+  )
+}
+
+export const getLazyMeta = (value: unknown): LazyMeta | null => {
+  if (typeof value !== 'function') {
+    return null
+  }
+  return (
+    ((value as unknown as Record<PropertyKey, unknown>)[LAZY_META_KEY] as LazyMeta | undefined) ??
+    null
+  )
+}
+
+export const getWatchMeta = (value: unknown): WatchMeta | null => {
+  if (typeof value !== 'function') {
+    return null
+  }
+  return (
+    ((value as unknown as Record<PropertyKey, unknown>)[WATCH_META_KEY] as WatchMeta | undefined) ??
+    null
+  )
+}
diff --git a/packages/native-core/mod.ts b/packages/native-core/mod.ts
new file mode 100644
index 0000000..ca7e40c
--- /dev/null
+++ b/packages/native-core/mod.ts
@@ -0,0 +1,6 @@
+export * from './component.ts'
+export * from './context.ts'
+export * from './dev-client.ts'
+export * from './metadata.ts'
+export * from './quickjs.ts'
+export * from './renderer.ts'
diff --git a/packages/native-core/package.json b/packages/native-core/package.json
new file mode 100644
index 0000000..b0f72e3
--- /dev/null
+++ b/packages/native-core/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "@eclipsa/native-core",
+  "version": "0.0.0",
+  "homepage": "https://github.com/pnsk-lab/eclipsa",
+  "bugs": {
+    "url": "https://github.com/pnsk-lab/eclipsa/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pnsk-lab/eclipsa.git",
+    "directory": "packages/native-core"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./mod.ts",
+      "import": "./mod.ts"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "types": "./mod.d.mts",
+        "import": "./mod.mjs"
+      }
+    }
+  },
+  "scripts": {
+    "build": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
+    "pack": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
+    "test": "vp test --run",
+    "test:coverage": "c8 --reporter=lcov --reporter=json-summary --reporter=text bunx vp test --run",
+    "typecheck": "bun x tsc -p ../../tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "eclipsa": "workspace:^"
+  }
+}
diff --git a/packages/native-core/quickjs.test.ts b/packages/native-core/quickjs.test.ts
new file mode 100644
index 0000000..8b181fb
--- /dev/null
+++ b/packages/native-core/quickjs.test.ts
@@ -0,0 +1,45 @@
+import {
+  createHostCallbackRegistry,
+  createHostObjectRegistry,
+  createQuickJSRuntimeBridge,
+  createRuntimeModuleRegistry,
+  createRuntimeTaskScheduler,
+} from './quickjs.ts'
+import { describe, expect, it } from 'vitest'
+
+describe('native-core quickjs bridge helpers', () => {
+  it('stores host object references until they are deleted', () => {
+    const registry = createHostObjectRegistry()
+    const reference = registry.create({ platform: 'swiftui' })
+
+    expect(registry.get(reference)).toEqual({ platform: 'swiftui' })
+    expect(registry.delete(reference)).toBe(true)
+    expect(registry.has(reference)).toBe(false)
+  })
+
+  it('registers callbacks and modules and flushes queued tasks', () => {
+    const callbacks = createHostCallbackRegistry()
+    const modules = createRuntimeModuleRegistry()
+    const scheduler = createRuntimeTaskScheduler()
+    const steps: string[] = []
+
+    callbacks.register('boot', (mode: string) => {
+      steps.push(`callback:${mode}`)
+    })
+    modules.register({ code: 'export const answer = 42', id: 'app.ts' })
+    scheduler.queue(() => {
+      steps.push('task:first')
+    })
+    scheduler.queue(() => {
+      steps.push(`module:${modules.get('app.ts').id}`)
+      callbacks.invoke('boot', 'dev')
+    })
+
+    scheduler.flush()
+
+    expect(steps).toEqual(['task:first', 'module:app.ts', 'callback:dev'])
+    expect(
+      createQuickJSRuntimeBridge({ callbacks, modules, scheduler }).modules.has('app.ts'),
+    ).toBe(true)
+  })
+})
diff --git a/packages/native-core/quickjs.ts b/packages/native-core/quickjs.ts
new file mode 100644
index 0000000..732a1e8
--- /dev/null
+++ b/packages/native-core/quickjs.ts
@@ -0,0 +1,139 @@
+export interface HostObjectReference {
+  id: number
+}
+
+export interface HostObjectRegistry {
+  create(value: unknown): HostObjectReference
+  delete(reference: HostObjectReference): boolean
+  get(reference: HostObjectReference): unknown
+  has(reference: HostObjectReference): boolean
+}
+
+export type HostCallback = (...args: readonly unknown[]) => unknown
+
+export interface HostCallbackRegistry {
+  get(name: string): HostCallback
+  has(name: string): boolean
+  invoke(name: string, ...args: readonly unknown[]): unknown
+  register(name: string, callback: HostCallback): () => void
+}
+
+export interface RuntimeTaskScheduler {
+  flush(): void
+  queue(task: () => void): void
+}
+
+export interface RuntimeModuleRecord {
+  code: string
+  id: string
+}
+
+export interface RuntimeModuleRegistry {
+  get(id: string): RuntimeModuleRecord
+  has(id: string): boolean
+  register(record: RuntimeModuleRecord): void
+}
+
+export interface QuickJSRuntimeBridge {
+  callbacks: HostCallbackRegistry
+  modules: RuntimeModuleRegistry
+  scheduler: RuntimeTaskScheduler
+  values: HostObjectRegistry
+}
+
+export const createHostObjectRegistry = (): HostObjectRegistry => {
+  let nextId = 1
+  const values = new Map<number, unknown>()
+  return {
+    create(value) {
+      const reference = { id: nextId++ }
+      values.set(reference.id, value)
+      return reference
+    },
+    delete(reference) {
+      return values.delete(reference.id)
+    },
+    get(reference) {
+      if (!values.has(reference.id)) {
+        throw new Error(`Unknown host object reference "${reference.id}".`)
+      }
+      return values.get(reference.id)
+    },
+    has(reference) {
+      return values.has(reference.id)
+    },
+  }
+}
+
+export const createHostCallbackRegistry = (): HostCallbackRegistry => {
+  const callbacks = new Map<string, HostCallback>()
+  return {
+    get(name) {
+      const callback = callbacks.get(name)
+      if (!callback) {
+        throw new Error(`Unknown host callback "${name}".`)
+      }
+      return callback
+    },
+    has(name) {
+      return callbacks.has(name)
+    },
+    invoke(name, ...args) {
+      return this.get(name)(...args)
+    },
+    register(name, callback) {
+      callbacks.set(name, callback)
+      return () => {
+        callbacks.delete(name)
+      }
+    },
+  }
+}
+
+export const createRuntimeTaskScheduler = (): RuntimeTaskScheduler => {
+  const queue: Array<() => void> = []
+  return {
+    flush() {
+      while (queue.length > 0) {
+        const task = queue.shift()
+        task?.()
+      }
+    },
+    queue(task) {
+      queue.push(task)
+    },
+  }
+}
+
+export const createRuntimeModuleRegistry = (
+  records: Iterable<RuntimeModuleRecord> = [],
+): RuntimeModuleRegistry => {
+  const modules = new Map<string, RuntimeModuleRecord>()
+  for (const record of records) {
+    modules.set(record.id, record)
+  }
+  return {
+    get(id) {
+      const record = modules.get(id)
+      if (!record) {
+        throw new Error(`Unknown native module "${id}".`)
+      }
+      return record
+    },
+    has(id) {
+      return modules.has(id)
+    },
+    register(record) {
+      modules.set(record.id, record)
+    },
+  }
+}
+
+export const createQuickJSRuntimeBridge = (
+  options: Partial<QuickJSRuntimeBridge> = {},
+): QuickJSRuntimeBridge => ({
+  callbacks: options.callbacks ?? createHostCallbackRegistry(),
+  modules: options.modules ?? createRuntimeModuleRegistry(),
+  scheduler: options.scheduler ?? createRuntimeTaskScheduler(),
+  values: options.values ?? createHostObjectRegistry(),
+})
diff --git a/packages/native-core/renderer.test.ts b/packages/native-core/renderer.test.ts
new file mode 100644
index 0000000..9c236cc
--- /dev/null
+++ b/packages/native-core/renderer.test.ts
@@ -0,0 +1,142 @@
+import { createContext, useContext } from './context.ts'
+import { createNativeRoot, type NativeRendererAbi } from './renderer.ts'
+import { createElement as h } from './component.ts'
+import { describe, expect, it } from 'vitest'
+
+interface MockNode {
+  children: MockNode[]
+  events: Map<string, () => void>
+  props: Record<string, unknown>
+  text: string | null
+  type: string
+}
+
+const createMockNode = (type: string, text: string | null = null): MockNode => ({
+  children: [],
+  events: new Map(),
+  props: {},
+  text,
+  type,
+})
+
+const insertChild = (parent: MockNode, child: MockNode, before?: MockNode | null) => {
+  const currentIndex = parent.children.indexOf(child)
+  if (currentIndex >= 0) {
+    parent.children.splice(currentIndex, 1)
+  }
+  const index = before ? parent.children.indexOf(before) : -1
+  if (index >= 0) {
+    parent.children.splice(index, 0, child)
+    return
+  }
+  parent.children.push(child)
+}
+
+const createRenderer = (): {
+  container: MockNode
+  renderer: NativeRendererAbi<MockNode, MockNode, () => void>
+} => {
+  const container = createMockNode('root')
+  return {
+    container,
+    renderer: {
+      createElement(type) {
+        return createMockNode(type)
+      },
+      createText(value) {
+        return createMockNode('#text', value)
+      },
+      insert(parent, child, before) {
+        insertChild(parent, child, before)
+      },
+      remove(parent, child) {
+        const index = parent.children.indexOf(child)
+        if (index >= 0) {
+          parent.children.splice(index, 1)
+        }
+      },
+      reorder(parent, child, before) {
+        insertChild(parent, child, before)
+      },
+      removeProp(node, key) {
+        delete node.props[key]
+      },
+      setProp(node, key, value) {
+        node.props[key] = value
+      },
+      setText(node, value) {
+        node.text = value
+      },
+      subscribe(node, eventName, listener) {
+        node.events.set(eventName, listener)
+        return () => {
+          node.events.delete(eventName)
+        }
+      },
+      unsubscribe(_node, _eventName, subscription) {
+        subscription()
+      },
+    },
+  }
+}
+
+describe('native-core renderer', () => {
+  it('mounts, updates, and unmounts native trees with prop and event diffs', () => {
+    const { container, renderer } = createRenderer()
+    const root = createNativeRoot(renderer, container)
+    const events: string[] = []
+
+    root.update(
+      h(
+        'VStack',
+        { spacing: 8 },
+        h('Text', { value: 'hello' }),
+        h(
+          'Button',
+          {
+            onPress: () => {
+              events.push('press')
+            },
+            role: 'primary',
+          },
+          'Tap',
+        ),
+      ),
+    )
+
+    expect(container.children[0]?.type).toBe('VStack')
+    expect(container.children[0]?.children[1]?.events.has('press')).toBe(true)
+
+    container.children[0]?.children[1]?.events.get('press')?.()
+    expect(events).toEqual(['press'])
+
+    root.update(
+      h(
+        'VStack',
+        { spacing: 12 },
+        h('Button', { key: 'cta', role: 'secondary' }, 'Tap'),
+        h('Text', { key: 'label', value: 'updated' }),
+      ),
+    )
+
+    expect(container.children[0]?.props.spacing).toBe(12)
+    expect(container.children[0]?.children.map((child) => child.type)).toEqual(['Button', 'Text'])
+    expect(container.children[0]?.children[0]?.events.size).toBe(0)
+
+    root.unmount()
+
+    expect(container.children).toEqual([])
+  })
+
+  it('renders component trees through provider-aware contexts', () => {
+    const { container, renderer } = createRenderer()
+    const root = createNativeRoot(renderer, container)
+    const ThemeContext = createContext('fallback')
+
+    const Label = () => h('Text', { value: useContext(ThemeContext) })
+
+    root.update(h(ThemeContext.Provider, { value: 'swiftui' }, h(Label, {})))
+
+    expect(container.children[0]?.props.value).toBe('swiftui')
+  })
+})
diff --git a/packages/native-core/renderer.ts b/packages/native-core/renderer.ts
new file mode 100644
index 0000000..a43f729
--- /dev/null
+++ b/packages/native-core/renderer.ts
@@ -0,0 +1,474 @@
+import {
+  createElement,
+  Fragment,
+  isNativeComponentDescriptor,
+  toChildArray,
+  resolveNativeComponentDescriptor,
+  type NativeChild,
+  type NativeComponent,
+  type NativeElement,
+  type NativeElementType,
+  type NativeKey,
+} from './component.ts'
+import {
+  type ContextProviderProps,
+  createChildRenderContext,
+  enterRenderContext,
+  getContextProviderMeta,
+  getCurrentRenderContext,
+} from './context.ts'
+import { isRouteSlot, resolveRouteSlot } from 'eclipsa/internal'
+
+export type NativeEventHandler = (payload?: unknown) => unknown
+
+export interface NativeRendererAbi<TNode = unknown, TContainer = unknown, TSubscription = unknown> {
+  createElement(type: string): TNode
+  createText(value: string): TNode
+  insert(parent: TContainer | TNode, child: TNode, before?: TNode | null): void
+  remove(parent: TContainer | TNode, child: TNode): void
+  reorder(parent: TContainer | TNode, child: TNode, before?: TNode | null): void
+  removeProp(node: TNode, key: string): void
+  setProp(node: TNode, key: string, value: unknown): void
+  setText(node: TNode, value: string): void
+  subscribe(node: TNode, eventName: string, listener: NativeEventHandler): TSubscription
+  unsubscribe(node: TNode, eventName: string, subscription: TSubscription): void
+}
+
+export interface NativeRoot {
+  update(nextTree: NativeChild): void
+  unmount(): void
+}
+
+export interface NativeRootOptions {
+  createComponentState?: () => unknown
+  disposeComponentState?: (state: unknown) => void
+  renderComponent?: <T>(state: unknown, render: () => T) => T
+}
+
+type RenderParent<TNode, TContainer> = TContainer | TNode
+
+type Instance<TNode, TContainer, TSubscription> =
+  | ComponentInstance<TNode, TContainer, TSubscription>
+  | ElementInstance<TNode, TContainer, TSubscription>
+  | FragmentInstance<TNode, TContainer, TSubscription>
+  | TextInstance<TNode>
+
+interface TextInstance<TNode> {
+  handle: TNode
+  kind: 'text'
+  mounted: boolean
+  value: string
+}
+
+interface ElementInstance<TNode, TContainer, TSubscription> {
+  children: Array<Instance<TNode, TContainer, TSubscription>>
+  eventSubscriptions: Map<string, TSubscription>
+  handle: TNode
+  key?: NativeKey
+  kind: 'element'
+  mounted: boolean
+  props: Record<string, unknown>
+  type: string
+}
+
+interface FragmentInstance<TNode, TContainer, TSubscription> {
+  children: Array<Instance<TNode, TContainer, TSubscription>>
+  key?: NativeKey
+  kind: 'fragment'
+}
+
+interface ComponentInstance<TNode, TContainer, TSubscription> {
+  child: Instance<TNode, TContainer, TSubscription> | null
+  key?: NativeKey
+  kind: 'component'
+  props: Record<string, unknown>
+  state?: unknown
+  type: NativeComponent<Record<string, unknown>>
+}
+
+const isTextLike = (value: NativeChild): value is bigint | number | string =>
+  typeof value === 'bigint' || typeof value === 'number' || typeof value === 'string'
+
+const textValue = (value: bigint | number | string) => String(value)
+
+const isEventProp = (key: string, value: unknown): value is NativeEventHandler =>
+  key.startsWith('on') && key.length > 2 && typeof value === 'function'
+
+const toEventName = (key: string) => `${key[2]!.toLowerCase()}${key.slice(3)}`
+
+const resolveRenderableChild = (value: NativeChild | unknown): NativeChild | unknown =>
+  isRouteSlot(value) ? resolveRouteSlot(null, value) : value
+
+const normalizeRenderableChildren = (value: NativeChild | unknown) =>
+  toChildArray(resolveRenderableChild(value) as NativeChild)
+    .flatMap((child) => toChildArray(resolveRenderableChild(child) as NativeChild))
+    .map((child) => (isTextLike(child) ? textValue(child) : child)) as Array<NativeElement | string>
+
+const createFragmentElement = (children: Array<NativeElement | string>) =>
+  createElement(Fragment, null, ...children)
+
+const resolveRenderableType = <P extends object>(
+  type: NativeElementType<P>,
+): NativeElementType<P> =>
+  isNativeComponentDescriptor(type)
+    ? resolveRenderableType(resolveNativeComponentDescriptor(type))
+    : type
+
+const getInstanceKey = <TNode, TContainer, TSubscription>(
+  instance: Instance<TNode, TContainer, TSubscription>,
+) => ('key' in instance ? instance.key : undefined)
+
+const firstHandle = <TNode, TContainer, TSubscription>(
+  instance: Instance<TNode, TContainer, TSubscription> | null,
+): TNode | null => {
+  if (!instance) {
+    return null
+  }
+  if (instance.kind === 'text' || instance.kind === 'element') {
+    return instance.handle
+  }
+  if (instance.kind === 'component') {
+    return firstHandle(instance.child)
+  }
+  for (const child of instance.children) {
+    const handle = firstHandle(child)
+    if (handle !== null) {
+      return handle
+    }
+  }
+  return null
+}
+
+const placeInstance = <TNode, TContainer, TSubscription>(
+  renderer: NativeRendererAbi<TNode, TContainer, TSubscription>,
+  parent: RenderParent<TNode, TContainer>,
+  instance: Instance<TNode, TContainer, TSubscription> | null,
+  anchor: TNode | null,
+): TNode | null => {
+  if (!instance) {
+    return anchor
+  }
+
+  if (instance.kind === 'component') {
+    return placeInstance(renderer, parent, instance.child, anchor)
+  }
+
+  if (instance.kind === 'fragment') {
+    let nextAnchor = anchor
+    for (let index = instance.children.length - 1; index >= 0; index -= 1) {
+      nextAnchor = placeInstance(renderer, parent, instance.children[index]!, nextAnchor)
+    }
+    return firstHandle(instance) ?? anchor
+  }
+
+  if (instance.mounted) {
+    renderer.reorder(parent, instance.handle, anchor)
+  } else {
+    renderer.insert(parent, instance.handle, anchor)
+    instance.mounted = true
+  }
+  return instance.handle
+}
+
+const removeInstance = <TNode, TContainer, TSubscription>(
+  renderer: NativeRendererAbi<TNode, TContainer, TSubscription>,
+  parent: RenderParent<TNode, TContainer>,
+  instance: Instance<TNode, TContainer, TSubscription> | null,
+  options?: NativeRootOptions,
+) => {
+  if (!instance) {
+    return
+  }
+
+  if (instance.kind === 'component') {
+    removeInstance(renderer, parent, instance.child, options)
+    instance.child = null
+    if (instance.state !== undefined) {
+      options?.disposeComponentState?.(instance.state)
+      instance.state = undefined
+    }
+    return
+  }
+
+  if (instance.kind === 'fragment') {
+    for (const child of instance.children) {
+      removeInstance(renderer, parent, child, options)
+    }
+    instance.children = []
+    return
+  }
+
+  if (instance.kind === 'element') {
+    for (const [eventName, subscription] of instance.eventSubscriptions) {
+      renderer.unsubscribe(instance.handle, eventName, subscription)
+    }
+    instance.eventSubscriptions.clear()
+    for (const child of instance.children) {
+      removeInstance(renderer, instance.handle, child, options)
+    }
+    instance.children = []
+  }
+
+  if (instance.mounted) {
+    renderer.remove(parent, instance.handle)
+    instance.mounted = false
+  }
+}
+
+const sameRenderableType = <TNode, TContainer, TSubscription>(
+  current: Instance<TNode, TContainer, TSubscription> | null,
+  next: NativeElement | string,
+) => {
+  if (!current) {
+    return false
+  }
+  if (typeof next === 'string') {
+    return current.kind === 'text'
+  }
+  const nextType = resolveRenderableType(next.type)
+  if (nextType === Fragment) {
+    return current.kind === 'fragment'
+  }
+  if (typeof nextType === 'function') {
+    return current.kind === 'component' && current.type === nextType
+  }
+  return current.kind === 'element' && current.type === nextType
+}
+
+const updateElementProps = <TNode, TContainer, TSubscription>(
+  renderer: NativeRendererAbi<TNode, TContainer, TSubscription>,
+  instance: ElementInstance<TNode, TContainer, TSubscription>,
+  nextProps: Record<string, unknown>,
+) => {
+  const previousProps = instance.props
+  const keys = new Set([...Object.keys(previousProps), ...Object.keys(nextProps)])
+
+  for (const key of keys) {
+    if (key === 'children') {
+      continue
+    }
+    const previousValue = previousProps[key]
+    const nextValue = nextProps[key]
+    if (isEventProp(key, previousValue)) {
+      const eventName = toEventName(key)
+      const currentSubscription = instance.eventSubscriptions.get(eventName)
+      if (currentSubscription !== undefined) {
+        renderer.unsubscribe(instance.handle, eventName, currentSubscription)
+        instance.eventSubscriptions.delete(eventName)
+      }
+    } else if (previousValue !== undefined && !(key in nextProps)) {
+      renderer.removeProp(instance.handle, key)
+    }
+
+    if (isEventProp(key, nextValue)) {
+      const eventName = toEventName(key)
+      const subscription = renderer.subscribe(instance.handle, eventName, nextValue)
+      instance.eventSubscriptions.set(eventName, subscription)
+      continue
+    }
+
+    if (nextValue === undefined) {
+      continue
+    }
+    if (!Object.is(previousValue, nextValue)) {
+      renderer.setProp(instance.handle, key, nextValue)
+    }
+  }
+
+  instance.props = nextProps
+}
+
+const reconcileChildren = <TNode, TContainer, TSubscription>(
+  renderer: NativeRendererAbi<TNode, TContainer, TSubscription>,
+  parent: RenderParent<TNode, TContainer>,
+  currentChildren: Array<Instance<TNode, TContainer, TSubscription>>,
+  nextChildren: Array<NativeElement | string>,
+  options?: NativeRootOptions,
+): Array<Instance<TNode, TContainer, TSubscription>> => {
+  const keyedCurrent = new Map<NativeKey, Instance<TNode, TContainer, TSubscription>>()
+  const unkeyedCurrent: Array<Instance<TNode, TContainer, TSubscription>> = []
+
+  for (const child of currentChildren) {
+    const key = getInstanceKey(child)
+    if (key !== undefined) {
+      keyedCurrent.set(key, child)
+    } else {
+      unkeyedCurrent.push(child)
+    }
+  }
+
+  const nextInstances: Array<Instance<TNode, TContainer, TSubscription>> = []
+  let unkeyedIndex = 0
+
+  for (const child of nextChildren) {
+    const nextKey = typeof child === 'string' ? undefined : child.key
+    let current =
+      nextKey !== undefined
+        ? (keyedCurrent.get(nextKey) ?? null)
+        : (unkeyedCurrent[unkeyedIndex] ?? null)
+    if (nextKey !== undefined) {
+      keyedCurrent.delete(nextKey)
+    } else if (current) {
+      unkeyedIndex += 1
+    }
+    if (current && !sameRenderableType(current, child)) {
+      removeInstance(renderer, parent, current, options)
+      current = null
+    }
+    const nextInstance = reconcileNode(renderer, parent, current, child, options)
+    if (nextInstance) {
+      nextInstances.push(nextInstance)
+    }
+  }
+
+  for (const leftover of keyedCurrent.values()) {
+    removeInstance(renderer, parent, leftover, options)
+  }
+  for (let index = unkeyedIndex; index < unkeyedCurrent.length; index += 1) {
+    removeInstance(renderer, parent, unkeyedCurrent[index]!, options)
+  }
+
+  let anchor: TNode | null = null
+  for (let index = nextInstances.length - 1; index >= 0; index -= 1) {
+    anchor = placeInstance(renderer, parent, nextInstances[index]!, anchor)
+  }
+
+  return nextInstances
+}
+
+const reconcileNode = <TNode, TContainer, TSubscription>(
+  renderer: NativeRendererAbi<TNode, TContainer, TSubscription>,
+  parent: RenderParent<TNode, TContainer>,
+  current: Instance<TNode, TContainer, TSubscription> | null,
+  next: NativeElement | string,
+  options?: NativeRootOptions,
+): Instance<TNode, TContainer, TSubscription> | null => {
+  if (typeof next === 'string') {
+    if (current?.kind === 'text') {
+      if (current.value !== next) {
+        renderer.setText(current.handle, next)
+        current.value = next
+      }
+      return current
+    }
+    const instance: TextInstance<TNode> = {
+      handle: renderer.createText(next),
+      kind: 'text',
+      mounted: false,
+      value: next,
+    }
+    return instance
+  }
+
+  const nextType = resolveRenderableType(next.type)
+
+  if (nextType === Fragment) {
+    const instance: FragmentInstance<TNode, TContainer, TSubscription> =
+      current?.kind === 'fragment'
+        ? current
+        : {
+            children: [],
+            ...(next.key === undefined ? {} : { key: next.key }),
+            kind: 'fragment',
+          }
+    instance.children = reconcileChildren(
+      renderer,
+      parent,
+      instance.children,
+      normalizeRenderableChildren(next.props.children),
+      options,
+    )
+    return instance
+  }
+
+  if (typeof nextType === 'function') {
+    const providerMeta = getContextProviderMeta(nextType)
+    const renderFrame = providerMeta
+      ? createChildRenderContext(
+          providerMeta.token,
+          (next.props as ContextProviderProps<unknown>).value,
+          getCurrentRenderContext(),
+        )
+      : getCurrentRenderContext()
+
+    const instance: ComponentInstance<TNode, TContainer, TSubscription> =
+      current?.kind === 'component' && current.type === nextType
+        ? current
+        : {
+            child: null,
+            ...(next.key === undefined ? {} : { key: next.key }),
+            kind: 'component',
+            props: next.props,
+            state: options?.createComponentState?.(),
+            type: nextType as NativeComponent<Record<string, unknown>>,
+          }
+    instance.props = next.props
+
+    const renderChild = () =>
+      enterRenderContext(renderFrame, () => {
+        const renderedChild = providerMeta
+          ? next.props.children
+          : (nextType as NativeComponent<Record<string, unknown>>)(next.props)
+        const renderables = normalizeRenderableChildren(renderedChild)
+        const normalized =
+          renderables.length === 1 ? renderables[0]! : createFragmentElement(renderables)
+        return normalized
+          ? reconcileNode(renderer, parent, instance.child, normalized, options)
+          : null
+      })
+
+    instance.child =
+      instance.state !== undefined && options?.renderComponent
+        ? options.renderComponent(instance.state, renderChild)
+        : renderChild()
+    return instance
+  }
+
+  const instance: ElementInstance<TNode, TContainer, TSubscription> =
+    current?.kind === 'element' && current.type === nextType
+      ? current
+      : {
+          children: [],
+          eventSubscriptions: new Map(),
+          handle: renderer.createElement(nextType as string),
+          ...(next.key === undefined ? {} : { key: next.key }),
+          kind: 'element',
+          mounted: false,
+          props: {},
+          type: nextType as string,
+        }
+
+  updateElementProps(renderer, instance, next.props)
+  instance.children = reconcileChildren(
+    renderer,
+    instance.handle,
+    instance.children,
+    normalizeRenderableChildren(next.props.children),
+    options,
+  )
+  return instance
+}
+
+export const createNativeRoot = <TNode, TContainer, TSubscription>(
+  renderer: NativeRendererAbi<TNode, TContainer, TSubscription>,
+  container: TContainer,
+  options?: NativeRootOptions,
+): NativeRoot => {
+  let current: Instance<TNode, TContainer, TSubscription> | null = null
+
+  return {
+    update(nextTree) {
+      const normalizedChildren = normalizeRenderableChildren(nextTree)
+      const normalized =
+        normalizedChildren.length === 1
+          ? normalizedChildren[0]!
+          : createFragmentElement(normalizedChildren)
+      current = reconcileNode(renderer, container, current, normalized, options)
+      placeInstance(renderer, container, current, null)
+    },
+    unmount() {
+      removeInstance(renderer, container, current, options)
+      current = null
+    },
+  }
+}
diff --git a/packages/native-core/tsconfig.json b/packages/native-core/tsconfig.json
new file mode 100644
index 0000000..271730b
--- /dev/null
+++ b/packages/native-core/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./**/*.ts", "./**/*.d.ts"],
+  "exclude": ["./**/*.test.ts"]
+}
diff --git a/packages/native-core/vite.config.ts b/packages/native-core/vite.config.ts
new file mode 100644
index 0000000..83b3f76
--- /dev/null
+++ b/packages/native-core/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite-plus'
+
+export default defineConfig({
+  test: {
+    include: ['*.test.ts'],
+    environment: 'node',
+  },
+  pack: {
+    clean: true,
+    dts: true,
+    entry: './mod.ts',
+    format: ['esm'],
+    sourcemap: true,
+  },
+})
diff --git a/packages/native-gtk4/gtk4-rust/Cargo.lock b/packages/native-gtk4/gtk4-rust/Cargo.lock
new file mode 100644
index 0000000..f4bd1e1
--- /dev/null
+++ b/packages/native-gtk4/gtk4-rust/Cargo.lock
@@ -0,0 +1,1662 @@
+# This file is automatically @generated by Cargo.
+# It is not intended for manual editing.
+version = 4
+
+[[package]]
+name = "adler2"
+version = "2.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "320119579fcad9c21884f5c4861d16174d0e06250625266f50fe6898340abefa"
+
+[[package]]
+name = "allocator-api2"
+version = "0.2.21"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "683d7910e743518b0e34f1186f92494becacb047c7b6bf616c96772180fef923"
+
+[[package]]
+name = "anyhow"
+version = "1.0.102"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7f202df86484c868dbad7eaa557ef785d5c66295e41b460ef922eca0723b842c"
+
+[[package]]
+name = "autocfg"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c08606f8c3cbf4ce6ec8e28fb0014a2c086708fe954eaa885384a6165172e7e8"
+
+[[package]]
+name = "base64"
+version = "0.22.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "72b3254f16251a8381aa12e40e3c4d2f0199f8c6508fbecb9d91f575e0fbb8c6"
+
+[[package]]
+name = "bitflags"
+version = "2.11.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c4512299f36f043ab09a583e57bceb5a5aab7a73db1805848e8fef3c9e8c78b3"
+
+[[package]]
+name = "block-buffer"
+version = "0.10.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3078c7629b62d3f0439517fa394996acacc5cbc91c5a20d8c658e77abd503a71"
+dependencies = [
+ "generic-array",
+]
+
+[[package]]
+name = "bytes"
+version = "1.11.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1e748733b7cbc798e1434b6ac524f0c1ff2ab456fe201501e6497c8417a4fc33"
+
+[[package]]
+name = "cairo-rs"
+version = "0.21.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b01fe135c0bd16afe262b6dea349bd5ea30e6de50708cec639aae7c5c14cc7e4"
+dependencies = [
+ "bitflags",
+ "cairo-sys-rs",
+ "glib",
+ "libc",
+]
+
+[[package]]
+name = "cairo-sys-rs"
+version = "0.21.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "06c28280c6b12055b5e39e4554271ae4e6630b27c0da9148c4cf6485fc6d245c"
+dependencies = [
+ "glib-sys",
+ "libc",
+ "system-deps",
+]
+
+[[package]]
+name = "cc"
+version = "1.2.60"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "43c5703da9466b66a946814e1adf53ea2c90f10063b86290cc9eb67ce3478a20"
+dependencies = [
+ "find-msvc-tools",
+ "shlex",
+]
+
+[[package]]
+name = "cfg-expr"
+version = "0.20.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3c6b04e07d8080154ed4ac03546d9a2b303cc2fe1901ba0b35b301516e289368"
+dependencies = [
+ "smallvec",
+ "target-lexicon",
+]
+
+[[package]]
+name = "cfg-if"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9330f8b2ff13f34540b44e946ef35111825727b38d33286ef986142615121801"
+
+[[package]]
+name = "cookie"
+version = "0.18.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4ddef33a339a91ea89fb53151bd0a4689cfce27055c291dfa69945475d22c747"
+dependencies = [
+ "percent-encoding",
+ "time",
+ "version_check",
+]
+
+[[package]]
+name = "cookie_store"
+version = "0.22.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "15b2c103cf610ec6cae3da84a766285b42fd16aad564758459e6ecf128c75206"
+dependencies = [
+ "cookie",
+ "document-features",
+ "idna",
+ "indexmap",
+ "log",
+ "serde",
+ "serde_derive",
+ "serde_json",
+ "time",
+ "url",
+]
+
+[[package]]
+name = "cpufeatures"
+version = "0.2.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "59ed5838eebb26a2bb2e58f6d5b5316989ae9d08bab10e0e6d103e656d1b0280"
+dependencies = [
+ "libc",
+]
+
+[[package]]
+name = "crc32fast"
+version = "1.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9481c1c90cbf2ac953f07c8d4a58aa3945c425b7185c9154d67a65e4230da511"
+dependencies = [
+ "cfg-if",
+]
+
+[[package]]
+name = "crypto-common"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "78c8292055d1c1df0cce5d180393dc8cce0abec0a7102adb6c7b1eef6016d60a"
+dependencies = [
+ "generic-array",
+ "typenum",
+]
+
+[[package]]
+name = "data-encoding"
+version = "2.10.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d7a1e2f27636f116493b8b860f5546edb47c8d8f8ea73e1d2a20be88e28d1fea"
+
+[[package]]
+name = "deranged"
+version = "0.5.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7cd812cc2bc1d69d4764bd80df88b4317eaef9e773c75226407d9bc0876b211c"
+dependencies = [
+ "powerfmt",
+]
+
+[[package]]
+name = "digest"
+version = "0.10.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9ed9a281f7bc9b7576e61468ba615a66a5c8cfdff42420a70aa82701a3b1e292"
+dependencies = [
+ "block-buffer",
+ "crypto-common",
+]
+
+[[package]]
+name = "displaydoc"
+version = "0.2.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "97369cbbc041bc366949bc74d34658d6cda5621039731c6310521892a3a20ae0"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "document-features"
+version = "0.2.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d4b8a88685455ed29a21542a33abd9cb6510b6b129abadabdcef0f4c55bc8f61"
+dependencies = [
+ "litrs",
+]
+
+[[package]]
+name = "eclipsa-native-gtk4-host"
+version = "0.0.0"
+dependencies = [
+ "anyhow",
+ "gdk-pixbuf",
+ "gtk4",
+ "rquickjs",
+ "serde",
+ "serde_json",
+ "tungstenite",
+ "ureq",
+ "url",
+]
+
+[[package]]
+name = "equivalent"
+version = "1.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "877a4ace8713b0bcf2a4e7eec82529c029f1d0619886d18145fea96c3ffe5c0f"
+
+[[package]]
+name = "field-offset"
+version = "0.3.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "38e2275cc4e4fc009b0669731a1e5ab7ebf11f469eaede2bab9309a5b4d6057f"
+dependencies = [
+ "memoffset",
+ "rustc_version",
+]
+
+[[package]]
+name = "find-msvc-tools"
+version = "0.1.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5baebc0774151f905a1a2cc41989300b1e6fbb29aff0ceffa1064fdd3088d582"
+
+[[package]]
+name = "flate2"
+version = "1.1.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "843fba2746e448b37e26a819579957415c8cef339bf08564fe8b7ddbd959573c"
+dependencies = [
+ "crc32fast",
+ "miniz_oxide",
+]
+
+[[package]]
+name = "foldhash"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "77ce24cb58228fbb8aa041425bb1050850ac19177686ea6e0f41a70416f56fdb"
+
+[[package]]
+name = "form_urlencoded"
+version = "1.2.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cb4cb245038516f5f85277875cdaa4f7d2c9a0fa0468de06ed190163b1581fcf"
+dependencies = [
+ "percent-encoding",
+]
+
+[[package]]
+name = "futures-channel"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "07bbe89c50d7a535e539b8c17bc0b49bdb77747034daa8087407d655f3f7cc1d"
+dependencies = [
+ "futures-core",
+]
+
+[[package]]
+name = "futures-core"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7e3450815272ef58cec6d564423f6e755e25379b217b0bc688e295ba24df6b1d"
+
+[[package]]
+name = "futures-executor"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "baf29c38818342a3b26b5b923639e7b1f4a61fc5e76102d4b1981c6dc7a7579d"
+dependencies = [
+ "futures-core",
+ "futures-task",
+ "futures-util",
+]
+
+[[package]]
+name = "futures-io"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cecba35d7ad927e23624b22ad55235f2239cfa44fd10428eecbeba6d6a717718"
+
+[[package]]
+name = "futures-macro"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e835b70203e41293343137df5c0664546da5745f82ec9b84d40be8336958447b"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "futures-task"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "037711b3d59c33004d3856fbdc83b99d4ff37a24768fa1be9ce3538a1cde4393"
+
+[[package]]
+name = "futures-util"
+version = "0.3.32"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "389ca41296e6190b48053de0321d02a77f32f8a5d2461dd38762c0593805c6d6"
+dependencies = [
+ "futures-core",
+ "futures-macro",
+ "futures-task",
+ "pin-project-lite",
+ "slab",
+]
+
+[[package]]
+name = "gdk-pixbuf"
+version = "0.21.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "debb0d39e3cdd84626edfd54d6e4a6ba2da9a0ef2e796e691c4e9f8646fda00c"
+dependencies = [
+ "gdk-pixbuf-sys",
+ "gio",
+ "glib",
+ "libc",
+]
+
+[[package]]
+name = "gdk-pixbuf-sys"
+version = "0.21.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bd95ad50b9a3d2551e25dd4f6892aff0b772fe5372d84514e9d0583af60a0ce7"
+dependencies = [
+ "gio-sys",
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "system-deps",
+]
+
+[[package]]
+name = "gdk4"
+version = "0.10.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "756564212bbe4a4ce05d88ffbd2582581ac6003832d0d32822d0825cca84bfbf"
+dependencies = [
+ "cairo-rs",
+ "gdk-pixbuf",
+ "gdk4-sys",
+ "gio",
+ "glib",
+ "libc",
+ "pango",
+]
+
+[[package]]
+name = "gdk4-sys"
+version = "0.10.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a6d4e5b3ccf591826a4adcc83f5f57b4e59d1925cb4bf620b0d645f79498b034"
+dependencies = [
+ "cairo-sys-rs",
+ "gdk-pixbuf-sys",
+ "gio-sys",
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "pango-sys",
+ "pkg-config",
+ "system-deps",
+]
+
+[[package]]
+name = "generic-array"
+version = "0.14.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "85649ca51fd72272d7821adaf274ad91c288277713d9c18820d8499a7ff69e9a"
+dependencies = [
+ "typenum",
+ "version_check",
+]
+
+[[package]]
+name = "getrandom"
+version = "0.2.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ff2abc00be7fca6ebc474524697ae276ad847ad0a6b3faa4bcb027e9a4614ad0"
+dependencies = [
+ "cfg-if",
+ "libc",
+ "wasi",
+]
+
+[[package]]
+name = "getrandom"
+version = "0.3.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "899def5c37c4fd7b2664648c28120ecec138e4d395b459e5ca34f9cce2dd77fd"
+dependencies = [
+ "cfg-if",
+ "libc",
+ "r-efi",
+ "wasip2",
+]
+
+[[package]]
+name = "gio"
+version = "0.21.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c5ff48bf600c68b476e61dc6b7c762f2f4eb91deef66583ba8bb815c30b5811a"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "futures-io",
+ "futures-util",
+ "gio-sys",
+ "glib",
+ "libc",
+ "pin-project-lite",
+ "smallvec",
+]
+
+[[package]]
+name = "gio-sys"
+version = "0.21.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0071fe88dba8e40086c8ff9bbb62622999f49628344b1d1bf490a48a29d80f22"
+dependencies = [
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "system-deps",
+ "windows-sys 0.61.2",
+]
+
+[[package]]
+name = "glib"
+version = "0.21.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "16de123c2e6c90ce3b573b7330de19be649080ec612033d397d72da265f1bd8b"
+dependencies = [
+ "bitflags",
+ "futures-channel",
+ "futures-core",
+ "futures-executor",
+ "futures-task",
+ "futures-util",
+ "gio-sys",
+ "glib-macros",
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "memchr",
+ "smallvec",
+]
+
+[[package]]
+name = "glib-macros"
+version = "0.21.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cf59b675301228a696fe01c3073974643365080a76cc3ed5bc2cbc466ad87f17"
+dependencies = [
+ "heck",
+ "proc-macro-crate",
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "glib-sys"
+version = "0.21.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2d95e1a3a19ae464a7286e14af9a90683c64d70c02532d88d87ce95056af3e6c"
+dependencies = [
+ "libc",
+ "system-deps",
+]
+
+[[package]]
+name = "gobject-sys"
+version = "0.21.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2dca35da0d19a18f4575f3cb99fe1c9e029a2941af5662f326f738a21edaf294"
+dependencies = [
+ "glib-sys",
+ "libc",
+ "system-deps",
+]
+
+[[package]]
+name = "graphene-rs"
+version = "0.21.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2730030ac9db663fd8bfe1e7093742c1cafb92db9c315c9417c29032341fe2f9"
+dependencies = [
+ "glib",
+ "graphene-sys",
+ "libc",
+]
+
+[[package]]
+name = "graphene-sys"
+version = "0.21.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "915e32091ea9ad241e4b044af62b7351c2d68aeb24f489a0d7f37a0fc484fd93"
+dependencies = [
+ "glib-sys",
+ "libc",
+ "pkg-config",
+ "system-deps",
+]
+
+[[package]]
+name = "gsk4"
+version = "0.10.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e755de9d8c5896c5beaa028b89e1969d067f1b9bf1511384ede971f5983aa153"
+dependencies = [
+ "cairo-rs",
+ "gdk4",
+ "glib",
+ "graphene-rs",
+ "gsk4-sys",
+ "libc",
+ "pango",
+]
+
+[[package]]
+name = "gsk4-sys"
+version = "0.10.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7ce91472391146f482065f1041876d8f869057b195b95399414caa163d72f4f7"
+dependencies = [
+ "cairo-sys-rs",
+ "gdk4-sys",
+ "glib-sys",
+ "gobject-sys",
+ "graphene-sys",
+ "libc",
+ "pango-sys",
+ "system-deps",
+]
+
+[[package]]
+name = "gtk4"
+version = "0.10.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "acb21d53cfc6f7bfaf43549731c43b67ca47d87348d81c8cfc4dcdd44828e1a4"
+dependencies = [
+ "cairo-rs",
+ "field-offset",
+ "futures-channel",
+ "gdk-pixbuf",
+ "gdk4",
+ "gio",
+ "glib",
+ "graphene-rs",
+ "gsk4",
+ "gtk4-macros",
+ "gtk4-sys",
+ "libc",
+ "pango",
+]
+
+[[package]]
+name = "gtk4-macros"
+version = "0.10.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3ccfb5a14a3d941244815d5f8101fa12d4577b59cc47245778d8d907b0003e42"
+dependencies = [
+ "proc-macro-crate",
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "gtk4-sys"
+version = "0.10.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "842577fe5a1ee15d166cd3afe804ce0cab6173bc789ca32e21308834f20088dd"
+dependencies = [
+ "cairo-sys-rs",
+ "gdk-pixbuf-sys",
+ "gdk4-sys",
+ "gio-sys",
+ "glib-sys",
+ "gobject-sys",
+ "graphene-sys",
+ "gsk4-sys",
+ "libc",
+ "pango-sys",
+ "system-deps",
+]
+
+[[package]]
+name = "hashbrown"
+version = "0.16.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "841d1cc9bed7f9236f321df977030373f4a4163ae1a7dbfe1a51a2c1a51d9100"
+dependencies = [
+ "allocator-api2",
+ "equivalent",
+ "foldhash",
+]
+
+[[package]]
+name = "hashbrown"
+version = "0.17.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4f467dd6dccf739c208452f8014c75c18bb8301b050ad1cfb27153803edb0f51"
+
+[[package]]
+name = "heck"
+version = "0.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2304e00983f87ffb38b55b444b5e3b60a884b5d30c0fca7d82fe33449bbe55ea"
+
+[[package]]
+name = "http"
+version = "1.4.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e3ba2a386d7f85a81f119ad7498ebe444d2e22c2af0b86b069416ace48b3311a"
+dependencies = [
+ "bytes",
+ "itoa",
+]
+
+[[package]]
+name = "httparse"
+version = "1.10.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6dbf3de79e51f3d586ab4cb9d5c3e2c14aa28ed23d180cf89b4df0454a69cc87"
+
+[[package]]
+name = "icu_collections"
+version = "2.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2984d1cd16c883d7935b9e07e44071dca8d917fd52ecc02c04d5fa0b5a3f191c"
+dependencies = [
+ "displaydoc",
+ "potential_utf",
+ "utf8_iter",
+ "yoke",
+ "zerofrom",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_locale_core"
+version = "2.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "92219b62b3e2b4d88ac5119f8904c10f8f61bf7e95b640d25ba3075e6cac2c29"
+dependencies = [
+ "displaydoc",
+ "litemap",
+ "tinystr",
+ "writeable",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_normalizer"
+version = "2.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c56e5ee99d6e3d33bd91c5d85458b6005a22140021cc324cea84dd0e72cff3b4"
+dependencies = [
+ "icu_collections",
+ "icu_normalizer_data",
+ "icu_properties",
+ "icu_provider",
+ "smallvec",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_normalizer_data"
+version = "2.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "da3be0ae77ea334f4da67c12f149704f19f81d1adf7c51cf482943e84a2bad38"
+
+[[package]]
+name = "icu_properties"
+version = "2.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bee3b67d0ea5c2cca5003417989af8996f8604e34fb9ddf96208a033901e70de"
+dependencies = [
+ "icu_collections",
+ "icu_locale_core",
+ "icu_properties_data",
+ "icu_provider",
+ "zerotrie",
+ "zerovec",
+]
+
+[[package]]
+name = "icu_properties_data"
+version = "2.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8e2bbb201e0c04f7b4b3e14382af113e17ba4f63e2c9d2ee626b720cbce54a14"
+
+[[package]]
+name = "icu_provider"
+version = "2.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "139c4cf31c8b5f33d7e199446eff9c1e02decfc2f0eec2c8d71f65befa45b421"
+dependencies = [
+ "displaydoc",
+ "icu_locale_core",
+ "writeable",
+ "yoke",
+ "zerofrom",
+ "zerotrie",
+ "zerovec",
+]
+
+[[package]]
+name = "idna"
+version = "1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3b0875f23caa03898994f6ddc501886a45c7d3d62d04d2d90788d47be1b1e4de"
+dependencies = [
+ "idna_adapter",
+ "smallvec",
+ "utf8_iter",
+]
+
+[[package]]
+name = "idna_adapter"
+version = "1.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3acae9609540aa318d1bc588455225fb2085b9ed0c4f6bd0d9d5bcd86f1a0344"
+dependencies = [
+ "icu_normalizer",
+ "icu_properties",
+]
+
+[[package]]
+name = "indexmap"
+version = "2.14.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d466e9454f08e4a911e14806c24e16fba1b4c121d1ea474396f396069cf949d9"
+dependencies = [
+ "equivalent",
+ "hashbrown 0.17.0",
+]
+
+[[package]]
+name = "itoa"
+version = "1.0.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8f42a60cbdf9a97f5d2305f08a87dc4e09308d1276d28c869c684d7777685682"
+
+[[package]]
+name = "libc"
+version = "0.2.185"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "52ff2c0fe9bc6cb6b14a0592c2ff4fa9ceb83eea9db979b0487cd054946a2b8f"
+
+[[package]]
+name = "litemap"
+version = "0.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "92daf443525c4cce67b150400bc2316076100ce0b3686209eb8cf3c31612e6f0"
+
+[[package]]
+name = "litrs"
+version = "1.0.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "11d3d7f243d5c5a8b9bb5d6dd2b1602c0cb0b9db1621bafc7ed66e35ff9fe092"
+
+[[package]]
+name = "log"
+version = "0.4.29"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "5e5032e24019045c762d3c0f28f5b6b8bbf38563a65908389bf7978758920897"
+
+[[package]]
+name = "memchr"
+version = "2.8.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f8ca58f447f06ed17d5fc4043ce1b10dd205e060fb3ce5b979b8ed8e59ff3f79"
+
+[[package]]
+name = "memoffset"
+version = "0.9.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "488016bfae457b036d996092f6cb448677611ce4449e970ceaf42695203f218a"
+dependencies = [
+ "autocfg",
+]
+
+[[package]]
+name = "miniz_oxide"
+version = "0.8.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1fa76a2c86f704bdb222d66965fb3d63269ce38518b83cb0575fca855ebb6316"
+dependencies = [
+ "adler2",
+ "simd-adler32",
+]
+
+[[package]]
+name = "num-conv"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c6673768db2d862beb9b39a78fdcb1a69439615d5794a1be50caa9bc92c81967"
+
+[[package]]
+name = "once_cell"
+version = "1.21.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9f7c3e4beb33f85d45ae3e3a1792185706c8e16d043238c593331cc7cd313b50"
+
+[[package]]
+name = "pango"
+version = "0.21.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "52d1d85e2078077a065bb7fc072783d5bcd4e51b379f22d67107d0a16937eb69"
+dependencies = [
+ "gio",
+ "glib",
+ "libc",
+ "pango-sys",
+]
+
+[[package]]
+name = "pango-sys"
+version = "0.21.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b4f06627d36ed5ff303d2df65211fc2e52ba5b17bf18dd80ff3d9628d6e06cfd"
+dependencies = [
+ "glib-sys",
+ "gobject-sys",
+ "libc",
+ "system-deps",
+]
+
+[[package]]
+name = "percent-encoding"
+version = "2.3.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9b4f627cb1b25917193a259e49bdad08f671f8d9708acfd5fe0a8c1455d87220"
+
+[[package]]
+name = "pin-project-lite"
+version = "0.2.17"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a89322df9ebe1c1578d689c92318e070967d1042b512afbe49518723f4e6d5cd"
+
+[[package]]
+name = "pkg-config"
+version = "0.3.33"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "19f132c84eca552bf34cab8ec81f1c1dcc229b811638f9d283dceabe58c5569e"
+
+[[package]]
+name = "potential_utf"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0103b1cef7ec0cf76490e969665504990193874ea05c85ff9bab8b911d0a0564"
+dependencies = [
+ "zerovec",
+]
+
+[[package]]
+name = "powerfmt"
+version = "0.2.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "439ee305def115ba05938db6eb1644ff94165c5ab5e9420d1c1bcedbba909391"
+
+[[package]]
+name = "ppv-lite86"
+version = "0.2.21"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "85eae3c4ed2f50dcfe72643da4befc30deadb458a9b590d720cde2f2b1e97da9"
+dependencies = [
+ "zerocopy",
+]
+
+[[package]]
+name = "proc-macro-crate"
+version = "3.5.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e67ba7e9b2b56446f1d419b1d807906278ffa1a658a8a5d8a39dcb1f5a78614f"
+dependencies = [
+ "toml_edit",
+]
+
+[[package]]
+name = "proc-macro2"
+version = "1.0.106"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8fd00f0bb2e90d81d1044c2b32617f68fcb9fa3bb7640c23e9c748e53fb30934"
+dependencies = [
+ "unicode-ident",
+]
+
+[[package]]
+name = "quote"
+version = "1.0.45"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "41f2619966050689382d2b44f664f4bc593e129785a36d6ee376ddf37259b924"
+dependencies = [
+ "proc-macro2",
+]
+
+[[package]]
+name = "r-efi"
+version = "5.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "69cdb34c158ceb288df11e18b4bd39de994f6657d83847bdffdbd7f346754b0f"
+
+[[package]]
+name = "rand"
+version = "0.9.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "44c5af06bb1b7d3216d91932aed5265164bf384dc89cd6ba05cf59a35f5f76ea"
+dependencies = [
+ "rand_chacha",
+ "rand_core",
+]
+
+[[package]]
+name = "rand_chacha"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d3022b5f1df60f26e1ffddd6c66e8aa15de382ae63b3a0c1bfc0e4d3e3f325cb"
+dependencies = [
+ "ppv-lite86",
+ "rand_core",
+]
+
+[[package]]
+name = "rand_core"
+version = "0.9.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "76afc826de14238e6e8c374ddcc1fa19e374fd8dd986b0d2af0d02377261d83c"
+dependencies = [
+ "getrandom 0.3.4",
+]
+
+[[package]]
+name = "relative-path"
+version = "2.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bca40a312222d8ba74837cb474edef44b37f561da5f773981007a10bbaa992b0"
+dependencies = [
+ "serde",
+]
+
+[[package]]
+name = "ring"
+version = "0.17.14"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a4689e6c2294d81e88dc6261c768b63bc4fcdb852be6d1352498b114f61383b7"
+dependencies = [
+ "cc",
+ "cfg-if",
+ "getrandom 0.2.17",
+ "libc",
+ "untrusted",
+ "windows-sys 0.52.0",
+]
+
+[[package]]
+name = "rquickjs"
+version = "0.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c50dc6d6c587c339edb4769cf705867497a2baf0eca8b4645fa6ecd22f02c77a"
+dependencies = [
+ "rquickjs-core",
+]
+
+[[package]]
+name = "rquickjs-core"
+version = "0.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b8bf7840285c321c3ab20e752a9afb95548c75cd7f4632a0627cea3507e310c1"
+dependencies = [
+ "hashbrown 0.16.1",
+ "relative-path",
+ "rquickjs-sys",
+]
+
+[[package]]
+name = "rquickjs-sys"
+version = "0.11.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "27344601ef27460e82d6a4e1ecb9e7e99f518122095f3c51296da8e9be2b9d83"
+dependencies = [
+ "cc",
+]
+
+[[package]]
+name = "rustc_version"
+version = "0.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "cfcb3a22ef46e85b45de6ee7e79d063319ebb6594faafcf1c225ea92ab6e9b92"
+dependencies = [
+ "semver",
+]
+
+[[package]]
+name = "rustls"
+version = "0.23.38"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "69f9466fb2c14ea04357e91413efb882e2a6d4a406e625449bc0a5d360d53a21"
+dependencies = [
+ "log",
+ "once_cell",
+ "ring",
+ "rustls-pki-types",
+ "rustls-webpki",
+ "subtle",
+ "zeroize",
+]
+
+[[package]]
+name = "rustls-pki-types"
+version = "1.14.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "be040f8b0a225e40375822a563fa9524378b9d63112f53e19ffff34df5d33fdd"
+dependencies = [
+ "zeroize",
+]
+
+[[package]]
+name = "rustls-webpki"
+version = "0.103.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8279bb85272c9f10811ae6a6c547ff594d6a7f3c6c6b02ee9726d1d0dcfcdd06"
+dependencies = [
+ "ring",
+ "rustls-pki-types",
+ "untrusted",
+]
+
+[[package]]
+name = "semver"
+version = "1.0.28"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8a7852d02fc848982e0c167ef163aaff9cd91dc640ba85e263cb1ce46fae51cd"
+
+[[package]]
+name = "serde"
+version = "1.0.228"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9a8e94ea7f378bd32cbbd37198a4a91436180c5bb472411e48b5ec2e2124ae9e"
+dependencies = [
+ "serde_core",
+ "serde_derive",
+]
+
+[[package]]
+name = "serde_core"
+version = "1.0.228"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "41d385c7d4ca58e59fc732af25c3983b67ac852c1a25000afe1175de458b67ad"
+dependencies = [
+ "serde_derive",
+]
+
+[[package]]
+name = "serde_derive"
+version = "1.0.228"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d540f220d3187173da220f885ab66608367b6574e925011a9353e4badda91d79"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "serde_json"
+version = "1.0.149"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "83fc039473c5595ace860d8c4fafa220ff474b3fc6bfdb4293327f1a37e94d86"
+dependencies = [
+ "itoa",
+ "memchr",
+ "serde",
+ "serde_core",
+ "zmij",
+]
+
+[[package]]
+name = "serde_spanned"
+version = "1.1.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6662b5879511e06e8999a8a235d848113e942c9124f211511b16466ee2995f26"
+dependencies = [
+ "serde_core",
+]
+
+[[package]]
+name = "sha1"
+version = "0.10.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e3bf829a2d51ab4a5ddf1352d8470c140cadc8301b2ae1789db023f01cedd6ba"
+dependencies = [
+ "cfg-if",
+ "cpufeatures",
+ "digest",
+]
+
+[[package]]
+name = "shlex"
+version = "1.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0fda2ff0d084019ba4d7c6f371c95d8fd75ce3524c3cb8fb653a3023f6323e64"
+
+[[package]]
+name = "simd-adler32"
+version = "0.3.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "703d5c7ef118737c72f1af64ad2f6f8c5e1921f818cdcb97b8fe6fc69bf66214"
+
+[[package]]
+name = "slab"
+version = "0.4.12"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0c790de23124f9ab44544d7ac05d60440adc586479ce501c1d6d7da3cd8c9cf5"
+
+[[package]]
+name = "smallvec"
+version = "1.15.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "67b1b7a3b5fe4f1376887184045fcf45c69e92af734b7aaddc05fb777b6fbd03"
+
+[[package]]
+name = "stable_deref_trait"
+version = "1.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "6ce2be8dc25455e1f91df71bfa12ad37d7af1092ae736f3a6cd0e37bc7810596"
+
+[[package]]
+name = "subtle"
+version = "2.6.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "13c2bddecc57b384dee18652358fb23172facb8a2c51ccc10d74c157bdea3292"
+
+[[package]]
+name = "syn"
+version = "2.0.117"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e665b8803e7b1d2a727f4023456bbbbe74da67099c585258af0ad9c5013b9b99"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "unicode-ident",
+]
+
+[[package]]
+name = "synstructure"
+version = "0.13.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "728a70f3dbaf5bab7f0c4b1ac8d7ae5ea60a4b5549c8a5914361c99147a709d2"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "system-deps"
+version = "7.0.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "396a35feb67335377e0251fcbc1092fc85c484bd4e3a7a54319399da127796e7"
+dependencies = [
+ "cfg-expr",
+ "heck",
+ "pkg-config",
+ "toml",
+ "version-compare",
+]
+
+[[package]]
+name = "target-lexicon"
+version = "0.13.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "df7f62577c25e07834649fc3b39fafdc597c0a3527dc1c60129201ccfcbaa50c"
+
+[[package]]
+name = "thiserror"
+version = "2.0.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4288b5bcbc7920c07a1149a35cf9590a2aa808e0bc1eafaade0b80947865fbc4"
+dependencies = [
+ "thiserror-impl",
+]
+
+[[package]]
+name = "thiserror-impl"
+version = "2.0.18"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ebc4ee7f67670e9b64d05fa4253e753e016c6c95ff35b89b7941d6b856dec1d5"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "time"
+version = "0.3.47"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "743bd48c283afc0388f9b8827b976905fb217ad9e647fae3a379a9283c4def2c"
+dependencies = [
+ "deranged",
+ "itoa",
+ "num-conv",
+ "powerfmt",
+ "serde_core",
+ "time-core",
+ "time-macros",
+]
+
+[[package]]
+name = "time-core"
+version = "0.1.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "7694e1cfe791f8d31026952abf09c69ca6f6fa4e1a1229e18988f06a04a12dca"
+
+[[package]]
+name = "time-macros"
+version = "0.2.27"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "2e70e4c5a0e0a8a4823ad65dfe1a6930e4f4d756dcd9dd7939022b5e8c501215"
+dependencies = [
+ "num-conv",
+ "time-core",
+]
+
+[[package]]
+name = "tinystr"
+version = "0.8.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "c8323304221c2a851516f22236c5722a72eaa19749016521d6dff0824447d96d"
+dependencies = [
+ "displaydoc",
+ "zerovec",
+]
+
+[[package]]
+name = "toml"
+version = "1.1.2+spec-1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "81f3d15e84cbcd896376e6730314d59fb5a87f31e4b038454184435cd57defee"
+dependencies = [
+ "indexmap",
+ "serde_core",
+ "serde_spanned",
+ "toml_datetime",
+ "toml_parser",
+ "toml_writer",
+ "winnow",
+]
+
+[[package]]
+name = "toml_datetime"
+version = "1.1.1+spec-1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "3165f65f62e28e0115a00b2ebdd37eb6f3b641855f9d636d3cd4103767159ad7"
+dependencies = [
+ "serde_core",
+]
+
+[[package]]
+name = "toml_edit"
+version = "0.25.11+spec-1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0b59c4d22ed448339746c59b905d24568fcbb3ab65a500494f7b8c3e97739f2b"
+dependencies = [
+ "indexmap",
+ "toml_datetime",
+ "toml_parser",
+ "winnow",
+]
+
+[[package]]
+name = "toml_parser"
+version = "1.1.2+spec-1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a2abe9b86193656635d2411dc43050282ca48aa31c2451210f4202550afb7526"
+dependencies = [
+ "winnow",
+]
+
+[[package]]
+name = "toml_writer"
+version = "1.1.1+spec-1.1.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "756daf9b1013ebe47a8776667b466417e2d4c5679d441c26230efd9ef78692db"
+
+[[package]]
+name = "tungstenite"
+version = "0.28.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8628dcc84e5a09eb3d8423d6cb682965dea9133204e8fb3efee74c2a0c259442"
+dependencies = [
+ "bytes",
+ "data-encoding",
+ "http",
+ "httparse",
+ "log",
+ "rand",
+ "sha1",
+ "thiserror",
+ "utf-8",
+]
+
+[[package]]
+name = "typenum"
+version = "1.20.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "40ce102ab67701b8526c123c1bab5cbe42d7040ccfd0f64af1a385808d2f43de"
+
+[[package]]
+name = "unicode-ident"
+version = "1.0.24"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e6e4313cd5fcd3dad5cafa179702e2b244f760991f45397d14d4ebf38247da75"
+
+[[package]]
+name = "untrusted"
+version = "0.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8ecb6da28b8a351d773b68d5825ac39017e680750f980f3a1a85cd8dd28a47c1"
+
+[[package]]
+name = "ureq"
+version = "3.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "dea7109cdcd5864d4eeb1b58a1648dc9bf520360d7af16ec26d0a9354bafcfc0"
+dependencies = [
+ "base64",
+ "cookie_store",
+ "flate2",
+ "log",
+ "percent-encoding",
+ "rustls",
+ "rustls-pki-types",
+ "serde",
+ "serde_json",
+ "ureq-proto",
+ "utf8-zero",
+ "webpki-roots",
+]
+
+[[package]]
+name = "ureq-proto"
+version = "0.6.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e994ba84b0bd1b1b0cf92878b7ef898a5c1760108fe7b6010327e274917a808c"
+dependencies = [
+ "base64",
+ "http",
+ "httparse",
+ "log",
+]
+
+[[package]]
+name = "url"
+version = "2.5.8"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ff67a8a4397373c3ef660812acab3268222035010ab8680ec4215f38ba3d0eed"
+dependencies = [
+ "form_urlencoded",
+ "idna",
+ "percent-encoding",
+ "serde",
+]
+
+[[package]]
+name = "utf-8"
+version = "0.7.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "09cc8ee72d2a9becf2f2febe0205bbed8fc6615b7cb429ad062dc7b7ddd036a9"
+
+[[package]]
+name = "utf8-zero"
+version = "0.8.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b8c0a043c9540bae7c578c88f91dda8bd82e59ae27c21baca69c8b191aaf5a6e"
+
+[[package]]
+name = "utf8_iter"
+version = "1.0.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b6c140620e7ffbb22c2dee59cafe6084a59b5ffc27a8859a5f0d494b5d52b6be"
+
+[[package]]
+name = "version-compare"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "03c2856837ef78f57382f06b2b8563a2f512f7185d732608fd9176cb3b8edf0e"
+
+[[package]]
+name = "version_check"
+version = "0.9.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0b928f33d975fc6ad9f86c8f283853ad26bdd5b10b7f1542aa2fa15e2289105a"
+
+[[package]]
+name = "wasi"
+version = "0.11.1+wasi-snapshot-preview1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ccf3ec651a847eb01de73ccad15eb7d99f80485de043efb2f370cd654f4ea44b"
+
+[[package]]
+name = "wasip2"
+version = "1.0.3+wasi-0.2.9"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "20064672db26d7cdc89c7798c48a0fdfac8213434a1186e5ef29fd560ae223d6"
+dependencies = [
+ "wit-bindgen",
+]
+
+[[package]]
+name = "webpki-roots"
+version = "1.0.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "52f5ee44c96cf55f1b349600768e3ece3a8f26010c05265ab73f945bb1a2eb9d"
+dependencies = [
+ "rustls-pki-types",
+]
+
+[[package]]
+name = "windows-link"
+version = "0.2.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f0805222e57f7521d6a62e36fa9163bc891acd422f971defe97d64e70d0a4fe5"
+
+[[package]]
+name = "windows-sys"
+version = "0.52.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "282be5f36a8ce781fad8c8ae18fa3f9beff57ec1b52cb3de0789201425d9a33d"
+dependencies = [
+ "windows-targets",
+]
+
+[[package]]
+name = "windows-sys"
+version = "0.61.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "ae137229bcbd6cdf0f7b80a31df61766145077ddf49416a728b02cb3921ff3fc"
+dependencies = [
+ "windows-link",
+]
+
+[[package]]
+name = "windows-targets"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "9b724f72796e036ab90c1021d4780d4d3d648aca59e491e6b98e725b84e99973"
+dependencies = [
+ "windows_aarch64_gnullvm",
+ "windows_aarch64_msvc",
+ "windows_i686_gnu",
+ "windows_i686_gnullvm",
+ "windows_i686_msvc",
+ "windows_x86_64_gnu",
+ "windows_x86_64_gnullvm",
+ "windows_x86_64_msvc",
+]
+
+[[package]]
+name = "windows_aarch64_gnullvm"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "32a4622180e7a0ec044bb555404c800bc9fd9ec262ec147edd5989ccd0c02cd3"
+
+[[package]]
+name = "windows_aarch64_msvc"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "09ec2a7bb152e2252b53fa7803150007879548bc709c039df7627cabbd05d469"
+
+[[package]]
+name = "windows_i686_gnu"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8e9b5ad5ab802e97eb8e295ac6720e509ee4c243f69d781394014ebfe8bbfa0b"
+
+[[package]]
+name = "windows_i686_gnullvm"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0eee52d38c090b3caa76c563b86c3a4bd71ef1a819287c19d586d7334ae8ed66"
+
+[[package]]
+name = "windows_i686_msvc"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "240948bc05c5e7c6dabba28bf89d89ffce3e303022809e73deaefe4f6ec56c66"
+
+[[package]]
+name = "windows_x86_64_gnu"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "147a5c80aabfbf0c7d901cb5895d1de30ef2907eb21fbbab29ca94c5b08b1a78"
+
+[[package]]
+name = "windows_x86_64_gnullvm"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "24d5b23dc417412679681396f2b49f3de8c1473deb516bd34410872eff51ed0d"
+
+[[package]]
+name = "windows_x86_64_msvc"
+version = "0.52.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "589f6da84c646204747d1270a2a5661ea66ed1cced2631d546fdfb155959f9ec"
+
+[[package]]
+name = "winnow"
+version = "1.0.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "09dac053f1cd375980747450bfc7250c264eaae0583872e845c0c7cd578872b5"
+dependencies = [
+ "memchr",
+]
+
+[[package]]
+name = "wit-bindgen"
+version = "0.57.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1ebf944e87a7c253233ad6766e082e3cd714b5d03812acc24c318f549614536e"
+
+[[package]]
+name = "writeable"
+version = "0.6.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "1ffae5123b2d3fc086436f8834ae3ab053a283cfac8fe0a0b8eaae044768a4c4"
+
+[[package]]
+name = "yoke"
+version = "0.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "abe8c5fda708d9ca3df187cae8bfb9ceda00dd96231bed36e445a1a48e66f9ca"
+dependencies = [
+ "stable_deref_trait",
+ "yoke-derive",
+ "zerofrom",
+]
+
+[[package]]
+name = "yoke-derive"
+version = "0.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "de844c262c8848816172cef550288e7dc6c7b7814b4ee56b3e1553f275f1858e"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+ "synstructure",
+]
+
+[[package]]
+name = "zerocopy"
+version = "0.8.48"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "eed437bf9d6692032087e337407a86f04cd8d6a16a37199ed57949d415bd68e9"
+dependencies = [
+ "zerocopy-derive",
+]
+
+[[package]]
+name = "zerocopy-derive"
+version = "0.8.48"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "70e3cd084b1788766f53af483dd21f93881ff30d7320490ec3ef7526d203bad4"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "zerofrom"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "69faa1f2a1ea75661980b013019ed6687ed0e83d069bc1114e2cc74c6c04c4df"
+dependencies = [
+ "zerofrom-derive",
+]
+
+[[package]]
+name = "zerofrom-derive"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "11532158c46691caf0f2593ea8358fed6bbf68a0315e80aae9bd41fbade684a1"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+ "synstructure",
+]
+
+[[package]]
+name = "zeroize"
+version = "1.8.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b97154e67e32c85465826e8bcc1c59429aaaf107c1e4a9e53c8d8ccd5eff88d0"
+
+[[package]]
+name = "zerotrie"
+version = "0.2.4"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0f9152d31db0792fa83f70fb2f83148effb5c1f5b8c7686c3459e361d9bc20bf"
+dependencies = [
+ "displaydoc",
+ "yoke",
+ "zerofrom",
+]
+
+[[package]]
+name = "zerovec"
+version = "0.11.6"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "90f911cbc359ab6af17377d242225f4d75119aec87ea711a880987b18cd7b239"
+dependencies = [
+ "yoke",
+ "zerofrom",
+ "zerovec-derive",
+]
+
+[[package]]
+name = "zerovec-derive"
+version = "0.11.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "625dc425cab0dca6dc3c3319506e6593dcb08a9f387ea3b284dbd52a92c40555"
+dependencies = [
+ "proc-macro2",
+ "quote",
+ "syn",
+]
+
+[[package]]
+name = "zmij"
+version = "1.0.21"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b8848ee67ecc8aedbaf3e4122217aff892639231befc6a1b58d29fff4c2cabaa"
diff --git a/packages/native-gtk4/gtk4-rust/Cargo.toml b/packages/native-gtk4/gtk4-rust/Cargo.toml
new file mode 100644
index 0000000..e6441f2
--- /dev/null
+++ b/packages/native-gtk4/gtk4-rust/Cargo.toml
@@ -0,0 +1,29 @@
+[package]
+name = "eclipsa-native-gtk4-host"
+version = "0.0.0"
+edition = "2021"
+publish = false
+
+[features]
+default = []
+gtk-ui = ["dep:gdk-pixbuf", "dep:gtk4"]
+
+[dependencies]
+anyhow = "1.0.100"
+gdk-pixbuf = { version = "0.21.5", optional = true }
+gtk4 = { version = "0.10.3", optional = true }
+rquickjs = "0.11.0"
+serde = { version = "1.0.228", features = ["derive"] }
+serde_json = "1.0.145"
+tungstenite = { version = "0.28.0", default-features = true }
+ureq = { version = "3.1.4", features = ["json"] }
+url = "2.5.7"
+
+[[bin]]
+name = "eclipsa-native-gtk4"
+path = "src/bin/eclipsa-native-gtk4.rs"
+required-features = ["gtk-ui"]
+
+[[bin]]
+name = "eclipsa-native-gtk4-smoke"
+path = "src/bin/eclipsa-native-gtk4-smoke.rs"
diff --git a/packages/native-gtk4/gtk4-rust/src/bin/eclipsa-native-gtk4-smoke.rs b/packages/native-gtk4/gtk4-rust/src/bin/eclipsa-native-gtk4-smoke.rs
new file mode 100644
index 0000000..aaaa90e
--- /dev/null
+++ b/packages/native-gtk4/gtk4-rust/src/bin/eclipsa-native-gtk4-smoke.rs
@@ -0,0 +1,95 @@
+use anyhow::{Context, Result};
+use eclipsa_native_gtk4_host::{write_file, EclipsaGtk4Host, EventPayload, NativeNode};
+use serde::Serialize;
+use std::env;
+use std::path::PathBuf;
+use std::thread;
+use std::time::{Duration, Instant};
+
+#[derive(Serialize)]
+#[serde(rename_all = "camelCase")]
+struct SmokeOutput {
+    final_tree: NativeNode,
+    initial_tree: NativeNode,
+}
+
+fn main() {
+    if let Err(error) = run() {
+        eprintln!("{error:?}");
+        std::process::exit(1);
+    }
+}
+
+fn run() -> Result<()> {
+    let mut host = EclipsaGtk4Host::new()?;
+    host.boot()?;
+
+    let initial_tree = host
+        .root()
+        .context("GTK 4 host did not publish an initial tree.")?;
+
+    if let Some(ready_file) = env::var_os("ECLIPSA_NATIVE_SMOKE_READY_FILE") {
+        write_file(&PathBuf::from(ready_file), "ready")?;
+        let wait_seconds = env::var("ECLIPSA_NATIVE_SMOKE_WAIT_FOR_SECONDS")
+            .ok()
+            .and_then(|value| value.parse::<f64>().ok())
+            .unwrap_or(0.0);
+        let deadline = Instant::now() + Duration::from_secs_f64(wait_seconds.max(0.0));
+        while Instant::now() < deadline {
+            if let Err(error) = host.pump(std::iter::empty()) {
+                eprintln!("{error:?}");
+            }
+            thread::sleep(Duration::from_millis(25));
+        }
+    } else {
+        apply_interactions(&mut host, &initial_tree)?;
+    }
+
+    let final_tree = host
+        .root()
+        .context("GTK 4 host did not publish a final tree.")?;
+
+    let output = SmokeOutput {
+        final_tree,
+        initial_tree,
+    };
+    println!("{}", serde_json::to_string(&output)?);
+    Ok(())
+}
+
+fn apply_interactions(host: &mut EclipsaGtk4Host, root: &NativeNode) -> Result<()> {
+    if let Some(button) = find_node(root, |node| node.tag == "gtk4:button") {
+        host.dispatch_event(&button.id, "click", None)?;
+    }
+
+    if let Some(text_field) = find_node(root, |node| node.tag == "gtk4:text-field") {
+        host.update_string(&text_field.id, "value", "GTK 4");
+        host.dispatch_event(
+            &text_field.id,
+            "input",
+            Some(EventPayload::String("GTK 4".to_owned())),
+        )?;
+    }
+
+    if let Some(toggle) = find_node(root, |node| node.tag == "gtk4:switch") {
+        host.update_bool(&toggle.id, "value", false);
+        host.dispatch_event(&toggle.id, "toggle", Some(EventPayload::Bool(false)))?;
+    }
+
+    Ok(())
+}
+
+fn find_node<'a>(
+    node: &'a NativeNode,
+    predicate: impl Fn(&NativeNode) -> bool + Copy,
+) -> Option<&'a NativeNode> {
+    if predicate(node) {
+        return Some(node);
+    }
+    for child in &node.children {
+        if let Some(found) = find_node(child, predicate) {
+            return Some(found);
+        }
+    }
+    None
+}
diff --git a/packages/native-gtk4/gtk4-rust/src/bin/eclipsa-native-gtk4.rs b/packages/native-gtk4/gtk4-rust/src/bin/eclipsa-native-gtk4.rs
new file mode 100644
index 0000000..5ead2c1
--- /dev/null
+++ b/packages/native-gtk4/gtk4-rust/src/bin/eclipsa-native-gtk4.rs
@@ -0,0 +1,898 @@
+#[cfg(feature = "gtk-ui")]
+mod app {
+    use anyhow::Result;
+    use eclipsa_native_gtk4_host::{
+        is_dev_manifest_source, EclipsaGtk4Host, HostUiAction, NativeNode, PumpResult,
+        SnapshotHostWidget,
+    };
+    use gtk4::gio;
+    use gtk4::gdk::FrameClockPhase;
+    use gtk4::prelude::*;
+    use gtk4::{
+        Align, Application, ApplicationWindow, Box as GtkBox, Button, Entry, Image, Label, ListBox,
+        Orientation, Switch, Widget,
+    };
+    use std::cell::RefCell;
+    use std::collections::VecDeque;
+    #[cfg(test)]
+    use std::collections::BTreeMap;
+    use std::rc::Rc;
+
+    const NODE_ID_DATA_KEY: &str = "eclipsa-native-node-id";
+    const NODE_TAG_DATA_KEY: &str = "eclipsa-native-node-tag";
+
+    #[derive(Clone, Debug)]
+    struct FocusState {
+        cursor_position: Option<i32>,
+        node_id: String,
+    }
+
+    pub fn run() -> Result<()> {
+        let application_flags =
+            if is_dev_manifest_source(std::env::var("ECLIPSA_NATIVE_MANIFEST").ok().as_deref()) {
+                gio::ApplicationFlags::NON_UNIQUE
+            } else {
+                gio::ApplicationFlags::empty()
+            };
+        let app = Application::builder()
+            .application_id("dev.eclipsa.nativegtk4")
+            .flags(application_flags)
+            .build();
+        app.connect_activate(|app| {
+            let host = Rc::new(RefCell::new(
+                EclipsaGtk4Host::new().expect("create GTK host"),
+            ));
+            let pending_actions = Rc::new(RefCell::new(VecDeque::<HostUiAction>::new()));
+            if let Err(error) = host.borrow_mut().boot_or_render_fallback() {
+                eprintln!("{error:?}");
+            }
+
+            let window = build_window(app);
+
+            refresh_window(
+                &window,
+                Rc::clone(&host),
+                Rc::clone(&pending_actions),
+                false,
+            );
+            host.borrow_mut().take_render_update();
+
+            let host_for_tick = Rc::clone(&host);
+            let pending_actions_for_tick = Rc::clone(&pending_actions);
+            let window_for_tick = window.clone();
+            gtk4::glib::timeout_add_local(std::time::Duration::from_millis(25), move || {
+                let actions = {
+                    let mut pending_actions = pending_actions_for_tick.borrow_mut();
+                    std::mem::take(&mut *pending_actions)
+                };
+                let pump_result = {
+                    let mut host = host_for_tick.borrow_mut();
+                    match host.pump(actions) {
+                        Ok(result) => result,
+                        Err(error) => {
+                            eprintln!("{error:?}");
+                            PumpResult::default()
+                        }
+                    }
+                };
+                if pump_result.needs_refresh {
+                    refresh_window(
+                        &window_for_tick,
+                        Rc::clone(&host_for_tick),
+                        Rc::clone(&pending_actions_for_tick),
+                        pump_result.requires_full_rebuild,
+                    );
+                }
+                gtk4::glib::ControlFlow::Continue
+            });
+
+            window.present();
+        });
+        app.run();
+        Ok(())
+    }
+
+    fn build_window(app: &Application) -> ApplicationWindow {
+        let window = ApplicationWindow::builder()
+            .application(app)
+            .default_height(640)
+            .default_width(480)
+            .title("Eclipsa Native GTK 4")
+            .build();
+        window.set_child(Some(&SnapshotHostWidget::new()));
+        window
+    }
+
+    fn refresh_window(
+        window: &ApplicationWindow,
+        host: Rc<RefCell<EclipsaGtk4Host>>,
+        pending_actions: Rc<RefCell<VecDeque<HostUiAction>>>,
+        force_rebuild: bool,
+    ) {
+        let Some(root) = host.borrow().root() else {
+            return;
+        };
+        let focus_state = capture_focus_state(window);
+        if std::env::var_os("ECLIPSA_NATIVE_DEBUG_HMR").is_some() {
+            eprintln!("EclipsaNative GTK refresh: {}", summarize_root(&root));
+        }
+        let content_node = if root.tag == "gtk4:window" {
+            if let Some(title) = root.string_prop("title") {
+                window.set_title(Some(title));
+            }
+            if let Some(width) = root.double_prop("defaultWidth") {
+                window.set_default_width(width as i32);
+            }
+            if let Some(height) = root.double_prop("defaultHeight") {
+                window.set_default_height(height as i32);
+            }
+            root.children.first()
+        } else {
+            Some(&root)
+        };
+        let root_widget = if force_rebuild {
+            let replacement = SnapshotHostWidget::new();
+            sync_root_widget(
+                &replacement,
+                content_node,
+                Rc::clone(&pending_actions),
+                true,
+            );
+            window.set_child(Some(&replacement));
+            replacement
+        } else {
+            let existing = snapshot_host(window);
+            sync_root_widget(
+                &existing,
+                content_node,
+                Rc::clone(&pending_actions),
+                false,
+            );
+            existing
+        };
+        if force_rebuild {
+            restore_focus_state(window, focus_state);
+        }
+        if std::env::var_os("ECLIPSA_NATIVE_DEBUG_HMR").is_some() {
+            if let Some(child) = root_widget.content() {
+                eprintln!("EclipsaNative GTK widget: {}", summarize_widget_tree(&child));
+            }
+        }
+        if let Some(child) = root_widget.content() {
+            child.queue_allocate();
+            child.queue_resize();
+            child.queue_draw();
+        }
+        root_widget.queue_allocate();
+        root_widget.queue_resize();
+        root_widget.queue_draw();
+        window.queue_allocate();
+        window.queue_resize();
+        window.queue_draw();
+        window.present();
+        if let Some(surface) = window.surface() {
+            surface.request_layout();
+            surface.queue_render();
+            surface
+                .frame_clock()
+                .request_phase(FrameClockPhase::UPDATE | FrameClockPhase::LAYOUT | FrameClockPhase::PAINT);
+        }
+        if let Some(display) = gtk4::gdk::Display::default() {
+            display.flush();
+            display.sync();
+        }
+    }
+
+    fn snapshot_host(window: &ApplicationWindow) -> SnapshotHostWidget {
+        if let Some(root_widget) = window
+            .child()
+            .and_then(|child| child.downcast::<SnapshotHostWidget>().ok())
+        {
+            return root_widget;
+        }
+        let root_widget = SnapshotHostWidget::new();
+        window.set_child(Some(&root_widget));
+        root_widget
+    }
+
+    fn capture_focus_state(window: &ApplicationWindow) -> Option<FocusState> {
+        let raw_focus = gtk4::prelude::GtkWindowExt::focus(window)?;
+        let mut widget = raw_focus.clone();
+        loop {
+            if let Some(node_id) = widget_data(&widget, NODE_ID_DATA_KEY) {
+                let cursor_position = raw_focus
+                    .downcast_ref::<Entry>()
+                    .map(|entry| entry.position());
+                return Some(FocusState {
+                    cursor_position,
+                    node_id,
+                });
+            }
+            widget = widget.parent()?;
+        }
+    }
+
+    fn restore_focus_state(window: &ApplicationWindow, focus_state: Option<FocusState>) {
+        let Some(focus_state) = focus_state else {
+            return;
+        };
+        let Some(child) = window.child() else {
+            return;
+        };
+        let Some(widget) = find_widget_by_node_id(&child, &focus_state.node_id) else {
+            return;
+        };
+        let _ = widget.grab_focus();
+        if let Some(cursor_position) = focus_state.cursor_position {
+            if let Some(entry) = widget.downcast_ref::<Entry>() {
+                entry.set_position(cursor_position.min(i32::from(entry.text_length())));
+            }
+        }
+    }
+
+    fn find_widget_by_node_id(widget: &Widget, node_id: &str) -> Option<Widget> {
+        if widget_data(widget, NODE_ID_DATA_KEY).as_deref() == Some(node_id) {
+            return Some(widget.clone());
+        }
+        for child in collect_children(widget) {
+            if let Some(found) = find_widget_by_node_id(&child, node_id) {
+                return Some(found);
+            }
+        }
+        None
+    }
+
+    fn summarize_root(node: &NativeNode) -> String {
+        let mut parts = Vec::new();
+        collect_node_summaries(node, &mut parts);
+        parts.join(" | ")
+    }
+
+    fn collect_node_summaries(node: &NativeNode, parts: &mut Vec<String>) {
+        match node.tag.as_str() {
+            "gtk4:text" => {
+                if let Some(value) = node.string_prop("value").or(node.text.as_deref()) {
+                    parts.push(format!("{}#{} value={value}", node.tag, node.id));
+                }
+            }
+            "gtk4:button" => {
+                parts.push(format!("{}#{} title={}", node.tag, node.id, button_label(node)));
+            }
+            "gtk4:text-field" => {
+                parts.push(format!(
+                    "{}#{} value={}",
+                    node.tag,
+                    node.id,
+                    node.string_prop("value").unwrap_or_default()
+                ));
+            }
+            "gtk4:switch" => {
+                parts.push(format!(
+                    "{}#{} value={}",
+                    node.tag,
+                    node.id,
+                    node.bool_prop("value").unwrap_or(false)
+                ));
+            }
+            _ => {}
+        }
+        for child in &node.children {
+            collect_node_summaries(child, parts);
+        }
+    }
+
+    fn sync_root_widget(
+        root_widget: &SnapshotHostWidget,
+        node: Option<&NativeNode>,
+        pending_actions: Rc<RefCell<VecDeque<HostUiAction>>>,
+        force_rebuild: bool,
+    ) {
+        let Some(node) = node else {
+            root_widget.set_content(None);
+            return;
+        };
+
+        if force_rebuild {
+            let child = build_widget(node, pending_actions);
+            root_widget.set_content(Some(&child));
+            return;
+        }
+
+        if let Some(existing_child) = root_widget.content() {
+            if widget_matches_node(&existing_child, node) {
+                update_widget(&existing_child, node, pending_actions);
+                return;
+            }
+        }
+
+        let child = build_widget(node, pending_actions);
+        root_widget.set_content(Some(&child));
+    }
+
+    fn build_widget(
+        node: &NativeNode,
+        pending_actions: Rc<RefCell<VecDeque<HostUiAction>>>,
+    ) -> Widget {
+        let widget = match node.tag.as_str() {
+            "gtk4:box" => build_box(node, pending_actions).upcast(),
+            "gtk4:button" => build_button(node, pending_actions).upcast(),
+            "gtk4:image" => build_image(node).upcast(),
+            "gtk4:list-box" => build_list_box(node, pending_actions).upcast(),
+            "gtk4:spacer" => build_spacer(node).upcast(),
+            "gtk4:switch" => build_switch(node, pending_actions).upcast(),
+            "gtk4:text" => build_label(node).upcast(),
+            "gtk4:text-field" => build_text_field(node, pending_actions).upcast(),
+            "gtk4:window" => {
+                if let Some(child) = node.children.first() {
+                    build_widget(child, pending_actions)
+                } else {
+                    build_box(node, pending_actions).upcast()
+                }
+            }
+            _ => build_label(&NativeNode {
+                id: node.id.clone(),
+                tag: node.tag.clone(),
+                text: None,
+                props: Default::default(),
+                children: Vec::new(),
+            })
+            .upcast(),
+        };
+        set_widget_metadata(&widget, node);
+        widget
+    }
+
+    fn build_box(node: &NativeNode, pending_actions: Rc<RefCell<VecDeque<HostUiAction>>>) -> GtkBox {
+        let orientation = match node.string_prop("orientation") {
+            Some("horizontal") => Orientation::Horizontal,
+            _ => Orientation::Vertical,
+        };
+        let spacing = node.double_prop("spacing").unwrap_or(12.0) as i32;
+        let widget = GtkBox::new(orientation, spacing);
+        apply_widget_props(widget.upcast_ref(), node);
+        for child in &node.children {
+            widget.append(&build_widget(child, Rc::clone(&pending_actions)));
+        }
+        widget
+    }
+
+    fn build_button(
+        node: &NativeNode,
+        pending_actions: Rc<RefCell<VecDeque<HostUiAction>>>,
+    ) -> Button {
+        let label = button_label(node);
+        let widget = Button::with_label(&label);
+        apply_widget_props(widget.upcast_ref(), node);
+        let node_id = node.id.clone();
+        let pending_actions = Rc::clone(&pending_actions);
+        widget.connect_clicked(move |_| {
+            if std::env::var_os("ECLIPSA_NATIVE_DEBUG_HMR").is_some() {
+                eprintln!("EclipsaNative GTK action: click {}", node_id);
+            }
+            pending_actions
+                .borrow_mut()
+                .push_back(HostUiAction::Click { node_id: node_id.clone() });
+        });
+        widget
+    }
+
+    fn build_image(node: &NativeNode) -> Image {
+        let widget = if let Some(icon_name) = node.string_prop("iconName") {
+            Image::from_icon_name(icon_name)
+        } else {
+            Image::new()
+        };
+        apply_widget_props(widget.upcast_ref(), node);
+        widget
+    }
+
+    fn build_label(node: &NativeNode) -> Label {
+        let label = node
+            .string_prop("value")
+            .or(node.text.as_deref())
+            .unwrap_or_default();
+        let widget = Label::new(Some(label));
+        widget.set_wrap(node.bool_prop("wrap").unwrap_or(false));
+        widget.set_selectable(node.bool_prop("selectable").unwrap_or(false));
+        apply_widget_props(widget.upcast_ref(), node);
+        widget
+    }
+
+    fn build_list_box(
+        node: &NativeNode,
+        pending_actions: Rc<RefCell<VecDeque<HostUiAction>>>,
+    ) -> ListBox {
+        let widget = ListBox::new();
+        apply_widget_props(widget.upcast_ref(), node);
+        for child in &node.children {
+            widget.append(&build_widget(child, Rc::clone(&pending_actions)));
+        }
+        widget
+    }
+
+    fn build_spacer(node: &NativeNode) -> GtkBox {
+        let widget = GtkBox::new(Orientation::Vertical, 0);
+        widget.set_hexpand(true);
+        widget.set_vexpand(true);
+        apply_widget_props(widget.upcast_ref(), node);
+        widget
+    }
+
+    fn build_switch(
+        node: &NativeNode,
+        pending_actions: Rc<RefCell<VecDeque<HostUiAction>>>,
+    ) -> GtkBox {
+        let row = GtkBox::new(Orientation::Horizontal, 12);
+        apply_widget_props(row.upcast_ref(), node);
+        let label = Label::new(Some(node.string_prop("title").unwrap_or("Enabled")));
+        row.append(&label);
+        let switch = Switch::new();
+        switch.set_active(node.bool_prop("value").unwrap_or(false));
+        let node_id = node.id.clone();
+        let pending_actions = Rc::clone(&pending_actions);
+        switch.connect_active_notify(move |widget| {
+            let value = widget.is_active();
+            if std::env::var_os("ECLIPSA_NATIVE_DEBUG_HMR").is_some() {
+                eprintln!("EclipsaNative GTK action: toggle {}={value}", node_id);
+            }
+            pending_actions.borrow_mut().push_back(HostUiAction::Toggle {
+                node_id: node_id.clone(),
+                value,
+            });
+        });
+        row.append(&switch);
+        row
+    }
+
+    fn build_text_field(
+        node: &NativeNode,
+        pending_actions: Rc<RefCell<VecDeque<HostUiAction>>>,
+    ) -> Entry {
+        let widget = Entry::new();
+        widget.set_text(node.string_prop("value").unwrap_or_default());
+        widget.set_placeholder_text(node.string_prop("placeholder"));
+        apply_widget_props(widget.upcast_ref(), node);
+        let node_id = node.id.clone();
+        let pending_actions = Rc::clone(&pending_actions);
+        widget.connect_changed(move |entry| {
+            let value = entry.text().to_string();
+            if std::env::var_os("ECLIPSA_NATIVE_DEBUG_HMR").is_some() {
+                eprintln!("EclipsaNative GTK action: input {}={value}", node_id);
+            }
+            pending_actions.borrow_mut().push_back(HostUiAction::Input {
+                node_id: node_id.clone(),
+                value,
+            });
+        });
+        widget
+    }
+
+    fn update_widget(
+        widget: &Widget,
+        node: &NativeNode,
+        pending_actions: Rc<RefCell<VecDeque<HostUiAction>>>,
+    ) {
+        match node.tag.as_str() {
+            "gtk4:box" => {
+                if let Some(box_widget) = widget.downcast_ref::<GtkBox>() {
+                    update_box(box_widget, node, pending_actions);
+                }
+            }
+            "gtk4:button" => {
+                if let Some(button) = widget.downcast_ref::<Button>() {
+                    update_button(button, node);
+                }
+            }
+            "gtk4:image" => {
+                if let Some(image) = widget.downcast_ref::<Image>() {
+                    update_image(image, node);
+                }
+            }
+            "gtk4:list-box" => {
+                if let Some(list_box) = widget.downcast_ref::<ListBox>() {
+                    update_list_box(list_box, node, pending_actions);
+                }
+            }
+            "gtk4:spacer" => {
+                if let Some(spacer) = widget.downcast_ref::<GtkBox>() {
+                    update_spacer(spacer, node);
+                }
+            }
+            "gtk4:switch" => {
+                if let Some(row) = widget.downcast_ref::<GtkBox>() {
+                    update_switch(row, node, pending_actions);
+                }
+            }
+            "gtk4:text" => {
+                if let Some(label) = widget.downcast_ref::<Label>() {
+                    update_label(label, node);
+                }
+            }
+            "gtk4:text-field" => {
+                if let Some(entry) = widget.downcast_ref::<Entry>() {
+                    update_text_field(entry, node);
+                }
+            }
+            _ => {
+                if let Some(label) = widget.downcast_ref::<Label>() {
+                    update_label(label, node);
+                }
+            }
+        }
+        set_widget_metadata(widget, node);
+    }
+
+    fn update_box(
+        widget: &GtkBox,
+        node: &NativeNode,
+        pending_actions: Rc<RefCell<VecDeque<HostUiAction>>>,
+    ) {
+        let orientation = match node.string_prop("orientation") {
+            Some("horizontal") => Orientation::Horizontal,
+            _ => Orientation::Vertical,
+        };
+        widget.set_orientation(orientation);
+        widget.set_spacing(node.double_prop("spacing").unwrap_or(12.0) as i32);
+        apply_widget_props(widget.upcast_ref(), node);
+        sync_box_children(widget, &node.children, pending_actions);
+    }
+
+    fn update_button(widget: &Button, node: &NativeNode) {
+        widget.set_label(&button_label(node));
+        apply_widget_props(widget.upcast_ref(), node);
+    }
+
+    fn update_image(widget: &Image, node: &NativeNode) {
+        widget.set_icon_name(node.string_prop("iconName"));
+        apply_widget_props(widget.upcast_ref(), node);
+    }
+
+    fn update_label(widget: &Label, node: &NativeNode) {
+        let label = node
+            .string_prop("value")
+            .or(node.text.as_deref())
+            .unwrap_or_default();
+        widget.set_label(label);
+        widget.set_wrap(node.bool_prop("wrap").unwrap_or(false));
+        widget.set_selectable(node.bool_prop("selectable").unwrap_or(false));
+        apply_widget_props(widget.upcast_ref(), node);
+    }
+
+    fn update_list_box(
+        widget: &ListBox,
+        node: &NativeNode,
+        pending_actions: Rc<RefCell<VecDeque<HostUiAction>>>,
+    ) {
+        apply_widget_props(widget.upcast_ref(), node);
+        sync_list_box_children(widget, &node.children, pending_actions);
+    }
+
+    fn update_spacer(widget: &GtkBox, node: &NativeNode) {
+        widget.set_hexpand(true);
+        widget.set_vexpand(true);
+        apply_widget_props(widget.upcast_ref(), node);
+    }
+
+    fn update_switch(
+        row: &GtkBox,
+        node: &NativeNode,
+        pending_actions: Rc<RefCell<VecDeque<HostUiAction>>>,
+    ) {
+        row.set_orientation(Orientation::Horizontal);
+        row.set_spacing(12);
+        apply_widget_props(row.upcast_ref(), node);
+
+        let children = collect_children(row.upcast_ref());
+        let Some(label_widget) = children.first().and_then(|child| child.downcast_ref::<Label>()) else {
+            repopulate_switch_row(row, node, pending_actions);
+            return;
+        };
+        let Some(switch_widget) = children.get(1).and_then(|child| child.downcast_ref::<Switch>()) else {
+            repopulate_switch_row(row, node, pending_actions);
+            return;
+        };
+        if children.len() != 2 {
+            repopulate_switch_row(row, node, pending_actions);
+            return;
+        }
+
+        label_widget.set_label(node.string_prop("title").unwrap_or("Enabled"));
+        let next_value = node.bool_prop("value").unwrap_or(false);
+        if switch_widget.is_active() != next_value {
+            switch_widget.set_active(next_value);
+        }
+    }
+
+    fn update_text_field(widget: &Entry, node: &NativeNode) {
+        let value = node.string_prop("value").unwrap_or_default();
+        if widget.text().as_str() != value {
+            widget.set_text(value);
+        }
+        widget.set_placeholder_text(node.string_prop("placeholder"));
+        apply_widget_props(widget.upcast_ref(), node);
+    }
+
+    fn sync_box_children(
+        widget: &GtkBox,
+        nodes: &[NativeNode],
+        pending_actions: Rc<RefCell<VecDeque<HostUiAction>>>,
+    ) {
+        let children = collect_children(widget.upcast_ref());
+        if children.len() == nodes.len()
+            && children
+                .iter()
+                .zip(nodes)
+                .all(|(child, node)| widget_matches_node(child, node))
+        {
+            for (child, node) in children.iter().zip(nodes) {
+                update_widget(child, node, Rc::clone(&pending_actions));
+            }
+            return;
+        }
+
+        clear_box_children(widget);
+        for child in nodes {
+            widget.append(&build_widget(child, Rc::clone(&pending_actions)));
+        }
+    }
+
+    fn sync_list_box_children(
+        widget: &ListBox,
+        nodes: &[NativeNode],
+        pending_actions: Rc<RefCell<VecDeque<HostUiAction>>>,
+    ) {
+        let children = collect_children(widget.upcast_ref());
+        if children.len() == nodes.len()
+            && children
+                .iter()
+                .zip(nodes)
+                .all(|(child, node)| widget_matches_node(child, node))
+        {
+            for (child, node) in children.iter().zip(nodes) {
+                update_widget(child, node, Rc::clone(&pending_actions));
+            }
+            return;
+        }
+
+        clear_list_box_children(widget);
+        for child in nodes {
+            widget.append(&build_widget(child, Rc::clone(&pending_actions)));
+        }
+    }
+
+    fn repopulate_switch_row(
+        row: &GtkBox,
+        node: &NativeNode,
+        pending_actions: Rc<RefCell<VecDeque<HostUiAction>>>,
+    ) {
+        clear_box_children(row);
+        let label = Label::new(Some(node.string_prop("title").unwrap_or("Enabled")));
+        row.append(&label);
+        let switch = Switch::new();
+        switch.set_active(node.bool_prop("value").unwrap_or(false));
+        let node_id = node.id.clone();
+        switch.connect_active_notify(move |widget| {
+            let value = widget.is_active();
+            if std::env::var_os("ECLIPSA_NATIVE_DEBUG_HMR").is_some() {
+                eprintln!("EclipsaNative GTK action: toggle {}={value}", node_id);
+            }
+            pending_actions.borrow_mut().push_back(HostUiAction::Toggle {
+                node_id: node_id.clone(),
+                value,
+            });
+        });
+        row.append(&switch);
+    }
+
+    fn collect_children(widget: &Widget) -> Vec<Widget> {
+        let mut children = Vec::new();
+        let mut next_child = widget.first_child();
+        while let Some(child) = next_child {
+            next_child = child.next_sibling();
+            children.push(child);
+        }
+        children
+    }
+
+    fn clear_box_children(widget: &GtkBox) {
+        while let Some(child) = widget.first_child() {
+            widget.remove(&child);
+        }
+    }
+
+    fn clear_list_box_children(widget: &ListBox) {
+        while let Some(child) = widget.first_child() {
+            widget.remove(&child);
+        }
+    }
+
+    fn button_label(node: &NativeNode) -> String {
+        if node.children.is_empty() {
+            node.string_prop("title").unwrap_or("Button").to_owned()
+        } else {
+            node.children
+                .iter()
+                .filter_map(|child| child.string_prop("value"))
+                .collect::<Vec<_>>()
+                .join(" ")
+        }
+    }
+
+    fn set_widget_metadata(widget: &Widget, node: &NativeNode) {
+        unsafe {
+            widget.set_data(NODE_ID_DATA_KEY, node.id.clone());
+            widget.set_data(NODE_TAG_DATA_KEY, node.tag.clone());
+        }
+    }
+
+    fn widget_matches_node(widget: &Widget, node: &NativeNode) -> bool {
+        widget_data(widget, NODE_ID_DATA_KEY).as_deref() == Some(node.id.as_str())
+            && widget_data(widget, NODE_TAG_DATA_KEY).as_deref() == Some(node.tag.as_str())
+    }
+
+    fn widget_data(widget: &Widget, key: &str) -> Option<String> {
+        unsafe { widget.data::<String>(key).map(|value| value.as_ref().clone()) }
+    }
+
+    fn summarize_widget_tree(widget: &Widget) -> String {
+        let mut parts = Vec::new();
+        collect_widget_summaries(widget, &mut parts);
+        parts.join(" | ")
+    }
+
+    fn collect_widget_summaries(widget: &Widget, parts: &mut Vec<String>) {
+        let tag = widget_data(widget, NODE_TAG_DATA_KEY);
+        let id = widget_data(widget, NODE_ID_DATA_KEY);
+        match tag.as_deref() {
+            Some("gtk4:text") => {
+                if let Some(label) = widget.downcast_ref::<Label>() {
+                    parts.push(format!(
+                        "gtk4:text#{} value={}",
+                        id.as_deref().unwrap_or("?"),
+                        label.label()
+                    ));
+                }
+            }
+            Some("gtk4:button") => {
+                if let Some(button) = widget.downcast_ref::<Button>() {
+                    parts.push(format!(
+                        "gtk4:button#{} title={}",
+                        id.as_deref().unwrap_or("?"),
+                        button.label().as_deref().unwrap_or_default()
+                    ));
+                }
+            }
+            Some("gtk4:text-field") => {
+                if let Some(entry) = widget.downcast_ref::<Entry>() {
+                    parts.push(format!(
+                        "gtk4:text-field#{} value={}",
+                        id.as_deref().unwrap_or("?"),
+                        entry.text()
+                    ));
+                }
+            }
+            Some("gtk4:switch") => {
+                if let Some(box_widget) = widget.downcast_ref::<GtkBox>() {
+                    let children = collect_children(box_widget.upcast_ref());
+                    if let Some(switch) = children.get(1).and_then(|child| child.downcast_ref::<Switch>()) {
+                        parts.push(format!(
+                            "gtk4:switch#{} value={}",
+                            id.as_deref().unwrap_or("?"),
+                            switch.is_active()
+                        ));
+                    }
+                }
+            }
+            _ => {}
+        }
+
+        for child in collect_children(widget) {
+            collect_widget_summaries(&child, parts);
+        }
+    }
+
+    fn apply_widget_props(widget: &Widget, node: &NativeNode) {
+        widget.set_visible(node.bool_prop("visible").unwrap_or(true));
+        widget.set_sensitive(node.bool_prop("sensitive").unwrap_or(true));
+        widget.set_hexpand(node.bool_prop("hexpand").unwrap_or(false));
+        widget.set_vexpand(node.bool_prop("vexpand").unwrap_or(false));
+        if let Some(halign) = node.string_prop("halign").and_then(to_align) {
+            widget.set_halign(halign);
+        }
+        if let Some(valign) = node.string_prop("valign").and_then(to_align) {
+            widget.set_valign(valign);
+        }
+        if let Some(margin) = node.double_prop("margin") {
+            let margin = margin as i32;
+            widget.set_margin_top(margin);
+            widget.set_margin_bottom(margin);
+            widget.set_margin_start(margin);
+            widget.set_margin_end(margin);
+        }
+        let css_classes = parse_css_classes(node.string_prop("cssClasses"));
+        let css_class_refs = css_classes.iter().map(String::as_str).collect::<Vec<_>>();
+        widget.set_css_classes(&css_class_refs);
+    }
+
+    fn to_align(value: &str) -> Option<Align> {
+        match value {
+            "baseline" => Some(Align::Baseline),
+            "center" => Some(Align::Center),
+            "end" => Some(Align::End),
+            "fill" => Some(Align::Fill),
+            "start" => Some(Align::Start),
+            _ => None,
+        }
+    }
+
+    fn parse_css_classes(value: Option<&str>) -> Vec<String> {
+        value
+            .map(|css_classes| {
+                css_classes
+                    .trim_matches(['[', ']'])
+                    .split(',')
+                    .map(|class_name| class_name.trim().trim_matches('"'))
+                    .filter(|class_name| !class_name.is_empty())
+                    .map(str::to_owned)
+                    .collect()
+            })
+            .unwrap_or_default()
+    }
+
+    #[cfg(test)]
+    mod tests {
+        use super::*;
+
+        fn test_node(props: &[(&str, &str)]) -> NativeNode {
+            NativeNode {
+                id: "node-1".to_owned(),
+                tag: "gtk4:text".to_owned(),
+                text: None,
+                props: props
+                    .iter()
+                    .map(|(key, value)| ((*key).to_owned(), (*value).to_owned()))
+                    .collect::<BTreeMap<_, _>>(),
+                children: Vec::new(),
+            }
+        }
+
+        #[gtk4::test]
+        fn apply_widget_props_replaces_stale_css_classes() {
+            let widget = Label::new(None);
+
+            apply_widget_props(widget.upcast_ref(), &test_node(&[("cssClasses", r#"["first","second"]"#)]));
+            assert_eq!(
+                widget
+                    .css_classes()
+                    .into_iter()
+                    .map(|class_name| class_name.to_string())
+                    .collect::<Vec<_>>(),
+                vec!["first".to_owned(), "second".to_owned()],
+            );
+
+            apply_widget_props(widget.upcast_ref(), &test_node(&[("cssClasses", r#"["second","third"]"#)]));
+            assert_eq!(
+                widget
+                    .css_classes()
+                    .into_iter()
+                    .map(|class_name| class_name.to_string())
+                    .collect::<Vec<_>>(),
+                vec!["second".to_owned(), "third".to_owned()],
+            );
+        }
+    }
+}
+
+#[cfg(feature = "gtk-ui")]
+fn main() {
+    if let Err(error) = app::run() {
+        eprintln!("{error:?}");
+        std::process::exit(1);
+    }
+}
+
+#[cfg(not(feature = "gtk-ui"))]
+fn main() {
+    eprintln!("The GTK UI binary requires the gtk-ui feature.");
+    std::process::exit(1);
+}
diff --git a/packages/native-gtk4/gtk4-rust/src/host.rs b/packages/native-gtk4/gtk4-rust/src/host.rs
new file mode 100644
index 0000000..9e2b995
--- /dev/null
+++ b/packages/native-gtk4/gtk4-rust/src/host.rs
@@ -0,0 +1,984 @@
+use crate::loader::{
+    BootstrapScript, BootstrapScriptLoading, DefaultBootstrapScriptLoader,
+    NativeApplicationDescriptor, NativeDevManifest,
+};
+use crate::renderer::Gtk4RendererBridge;
+use crate::tree::NativeNode;
+use anyhow::{anyhow, bail, Context, Result};
+use rquickjs::context::EvalOptions;
+use rquickjs::prelude::Func;
+use rquickjs::{Context as JsContext, Ctx, Function, Object, Persistent, Runtime};
+use serde_json::json;
+use std::cell::RefCell;
+use std::collections::HashMap;
+use std::fs;
+use std::io::ErrorKind;
+use std::path::Path;
+use std::rc::Rc;
+use std::sync::mpsc::{self, Receiver, RecvTimeoutError, Sender};
+use std::sync::atomic::{AtomicBool, Ordering};
+use std::sync::Arc;
+use std::thread;
+use std::time::Duration;
+use tungstenite::client::IntoClientRequest;
+use tungstenite::handshake::client::Request as WebSocketRequest;
+use tungstenite::http::HeaderValue;
+use tungstenite::{connect, Error as WebSocketError, Message};
+
+const VITE_RUNNER_SOURCE: &str = include_str!("./vite-runner.js");
+const INITIAL_HMR_READY_TIMEOUT: Duration = Duration::from_secs(2);
+
+#[derive(Clone, Debug, Eq, Hash, PartialEq)]
+struct EventHandlerKey {
+    event_name: String,
+    node_id: String,
+}
+
+#[derive(Clone, Debug)]
+pub enum EventPayload {
+    Bool(bool),
+    Json(serde_json::Value),
+    String(String),
+}
+
+#[derive(Clone, Debug, Eq, PartialEq)]
+pub enum HostUiAction {
+    Click { node_id: String },
+    Input { node_id: String, value: String },
+    Toggle { node_id: String, value: bool },
+}
+
+#[derive(Clone, Copy, Debug, Default, Eq, PartialEq)]
+pub struct PumpResult {
+    pub needs_refresh: bool,
+    pub requires_full_rebuild: bool,
+}
+
+#[derive(Default)]
+struct DevSessionState {
+    hmr_callback: Option<Persistent<Function<'static>>>,
+    receiver: Option<Receiver<String>>,
+    stop_hmr: Option<Arc<AtomicBool>>,
+}
+
+struct SpawnedHmrReceiver {
+    initial_ready: Receiver<()>,
+    receiver: Receiver<String>,
+}
+
+impl SpawnedHmrReceiver {
+    fn wait_for_initial_ready(&self, timeout: Duration) -> bool {
+        match self.initial_ready.recv_timeout(timeout) {
+            Ok(()) => true,
+            Err(RecvTimeoutError::Timeout) => false,
+            Err(RecvTimeoutError::Disconnected) => false,
+        }
+    }
+}
+
+pub struct EclipsaGtk4Host {
+    dev_state: Rc<RefCell<DevSessionState>>,
+    event_handlers: Rc<RefCell<HashMap<EventHandlerKey, Persistent<Function<'static>>>>>,
+    loader: Box<dyn BootstrapScriptLoading>,
+    renderer: Rc<RefCell<Gtk4RendererBridge>>,
+    context: JsContext,
+    _runtime: Runtime,
+}
+
+impl EclipsaGtk4Host {
+    pub fn new() -> Result<Self> {
+        Self::with_loader(DefaultBootstrapScriptLoader::new())
+    }
+
+    pub fn with_loader(loader: impl BootstrapScriptLoading + 'static) -> Result<Self> {
+        let runtime = Runtime::new()?;
+        let context = JsContext::full(&runtime)?;
+        Ok(Self {
+            context,
+            dev_state: Rc::new(RefCell::new(DevSessionState::default())),
+            event_handlers: Rc::new(RefCell::new(HashMap::new())),
+            loader: Box::new(loader),
+            renderer: Rc::new(RefCell::new(Gtk4RendererBridge::default())),
+            _runtime: runtime,
+        })
+    }
+
+    pub fn boot(&mut self) -> Result<()> {
+        let descriptor = self.loader.load()?;
+        self.event_handlers.borrow_mut().clear();
+        {
+            let mut dev_state = self.dev_state.borrow_mut();
+            if let Some(stop_hmr) = dev_state.stop_hmr.take() {
+                stop_hmr.store(true, Ordering::Relaxed);
+            }
+            dev_state.hmr_callback = None;
+            dev_state.receiver = None;
+        }
+
+        self.context.with(|ctx| -> Result<()> {
+            self.install_console(ctx.clone())?;
+            self.install_native_bridge(ctx.clone())?;
+
+            match descriptor {
+                NativeApplicationDescriptor::Script(ref bootstrap) => {
+                    self.evaluate_bootstrap_script(ctx.clone(), bootstrap)?;
+                }
+                NativeApplicationDescriptor::Dev(ref manifest) => {
+                    self.install_dev_runtime_bridge(ctx.clone(), manifest)?;
+                    self.evaluate_native_dev_runtime(ctx.clone())?;
+                }
+            }
+
+            self.run_pending_jobs(ctx.clone())?;
+            Ok(())
+        })?;
+
+        if self.root().is_none() {
+            bail!("Native bootstrap script did not publish a root node.");
+        }
+
+        Ok(())
+    }
+
+    pub fn boot_or_render_fallback(&mut self) -> Result<()> {
+        if let Err(error) = self.boot() {
+            self.renderer
+                .borrow_mut()
+                .render_fallback("Eclipsa Native GTK 4", &error.to_string());
+            return Err(error);
+        }
+        Ok(())
+    }
+
+    pub fn dispatch_event(
+        &mut self,
+        node_id: &str,
+        event_name: &str,
+        payload: Option<EventPayload>,
+    ) -> Result<()> {
+        let key = EventHandlerKey {
+            event_name: event_name.to_owned(),
+            node_id: node_id.to_owned(),
+        };
+        let handler = self
+            .event_handlers
+            .borrow()
+            .get(&key)
+            .cloned()
+            .ok_or_else(|| anyhow!("No event handler is registered for {node_id}#{event_name}."))?;
+
+        self.context.with(|ctx| -> Result<()> {
+            let function = handler.restore(&ctx)?;
+            match payload {
+                Some(EventPayload::Bool(value)) => {
+                    function.call::<_, ()>((value,))?;
+                }
+                Some(EventPayload::String(ref value)) => {
+                    function.call::<_, ()>((value.clone(),))?;
+                }
+                Some(EventPayload::Json(ref value)) => {
+                    let payload_value = ctx.json_parse(serde_json::to_string(value)?)?;
+                    function.call::<_, ()>((payload_value,))?;
+                }
+                None => {
+                    function.call::<_, ()>(())?;
+                }
+            }
+            self.run_pending_jobs(ctx.clone())?;
+            Ok(())
+        })
+    }
+
+    pub fn update_bool(&mut self, node_id: &str, key: &str, value: bool) {
+        self.renderer
+            .borrow_mut()
+            .set_prop(node_id, key, if value { "true" } else { "false" });
+        self.renderer.borrow_mut().publish(None);
+    }
+
+    pub fn update_string(&mut self, node_id: &str, key: &str, value: &str) {
+        self.renderer.borrow_mut().set_prop(node_id, key, value);
+        self.renderer.borrow_mut().publish(None);
+    }
+
+    pub fn apply_ui_action(&mut self, action: HostUiAction) -> Result<()> {
+        match action {
+            HostUiAction::Click { node_id } => self.dispatch_event(&node_id, "click", None),
+            HostUiAction::Input { node_id, value } => {
+                self.update_string(&node_id, "value", &value);
+                self.dispatch_event(&node_id, "input", Some(EventPayload::String(value)))
+            }
+            HostUiAction::Toggle { node_id, value } => {
+                self.update_bool(&node_id, "value", value);
+                self.dispatch_event(&node_id, "toggle", Some(EventPayload::Bool(value)))
+            }
+        }
+    }
+
+    pub fn pump(
+        &mut self,
+        actions: impl IntoIterator<Item = HostUiAction>,
+    ) -> Result<PumpResult> {
+        for action in actions {
+            self.apply_ui_action(action)?;
+        }
+        let processed_hmr_messages = self.process_hmr_messages()?;
+        let needs_refresh = self.take_render_update();
+        Ok(PumpResult {
+            needs_refresh,
+            requires_full_rebuild: needs_refresh && processed_hmr_messages,
+        })
+    }
+
+    pub fn process_hmr_messages(&mut self) -> Result<bool> {
+        let messages = {
+            let mut drained = Vec::new();
+            if let Some(receiver) = self.dev_state.borrow().receiver.as_ref() {
+                while let Ok(message) = receiver.try_recv() {
+                    drained.push(message);
+                }
+            }
+            drained
+        };
+
+        if messages.is_empty() {
+            return Ok(false);
+        }
+
+        let callback = self.dev_state.borrow().hmr_callback.clone();
+        let Some(callback) = callback else {
+            return Ok(false);
+        };
+
+        self.context.with(|ctx| -> Result<()> {
+            for message in messages {
+                if std::env::var_os("ECLIPSA_NATIVE_DEBUG_HMR").is_some() {
+                    eprintln!("EclipsaNative HMR: {message}");
+                }
+                let function = callback.clone().restore(&ctx)?;
+                function.call::<_, ()>((message,))?;
+                self.run_pending_jobs(ctx.clone())?;
+            }
+            Ok(())
+        })?;
+
+        Ok(true)
+    }
+
+    pub fn root(&self) -> Option<NativeNode> {
+        self.renderer.borrow().root().cloned()
+    }
+
+    pub fn take_render_update(&mut self) -> bool {
+        self.renderer.borrow_mut().take_pending_publish()
+    }
+
+    fn evaluate_bootstrap_script(&self, ctx: Ctx<'_>, bootstrap: &BootstrapScript) -> Result<()> {
+        let mut options = EvalOptions::default();
+        options.global = true;
+        options.filename = Some(bootstrap.origin.clone());
+        ctx.eval_with_options::<(), _>(bootstrap.source.as_str(), options)?;
+        Ok(())
+    }
+
+    fn evaluate_native_dev_runtime(&self, ctx: Ctx<'_>) -> Result<()> {
+        let mut options = EvalOptions::default();
+        options.global = true;
+        options.filename = Some("vite-runner.js".to_owned());
+        ctx.eval_with_options::<(), _>(VITE_RUNNER_SOURCE, options)?;
+        self.call_boot_function(ctx)
+    }
+
+    fn call_boot_function(&self, ctx: Ctx<'_>) -> Result<()> {
+        let globals = ctx.globals();
+        let boot: Function<'_> = globals
+            .get("__eclipsaBoot")
+            .context("Missing __eclipsaBoot in native runtime.")?;
+        boot.call::<_, ()>(())?;
+        Ok(())
+    }
+
+    fn install_console(&self, ctx: Ctx<'_>) -> Result<()> {
+        let console = Object::new(ctx.clone())?;
+        console.set(
+            "log",
+            Func::from(|message: String| {
+                eprintln!("EclipsaNative JS: {message}");
+            }),
+        )?;
+        console.set(
+            "error",
+            Func::from(|message: String| {
+                eprintln!("EclipsaNative JS error: {message}");
+            }),
+        )?;
+        ctx.globals().set("console", console)?;
+        Ok(())
+    }
+
+    fn install_native_bridge(&self, ctx: Ctx<'_>) -> Result<()> {
+        let native_root = Object::new(ctx.clone())?;
+        let renderer_object = Object::new(ctx.clone())?;
+        let events_object = Object::new(ctx.clone())?;
+
+        let renderer = Rc::clone(&self.renderer);
+        renderer_object.set(
+            "createElement",
+            Func::from(move |type_name: String| -> String {
+                renderer.borrow_mut().create_element(&type_name)
+            }),
+        )?;
+
+        let renderer = Rc::clone(&self.renderer);
+        renderer_object.set(
+            "createText",
+            Func::from(move |value: String| -> String {
+                renderer.borrow_mut().create_text(&value)
+            }),
+        )?;
+
+        let renderer = Rc::clone(&self.renderer);
+        renderer_object.set(
+            "insert",
+            Func::from(
+                move |parent_id: String, child_id: String, before_id: Option<String>| {
+                    renderer
+                        .borrow_mut()
+                        .insert(&parent_id, &child_id, before_id.as_deref());
+                },
+            ),
+        )?;
+
+        let renderer = Rc::clone(&self.renderer);
+        renderer_object.set(
+            "remove",
+            Func::from(move |parent_id: String, child_id: String| {
+                renderer.borrow_mut().remove(&parent_id, &child_id);
+            }),
+        )?;
+
+        let renderer = Rc::clone(&self.renderer);
+        renderer_object.set(
+            "reorder",
+            Func::from(
+                move |parent_id: String, child_id: String, before_id: Option<String>| {
+                    renderer
+                        .borrow_mut()
+                        .reorder(&parent_id, &child_id, before_id.as_deref());
+                },
+            ),
+        )?;
+
+        let renderer = Rc::clone(&self.renderer);
+        renderer_object.set(
+            "setPropSerialized",
+            Func::from(move |node_id: String, key: String, value: String| {
+                renderer.borrow_mut().set_prop(&node_id, &key, &value);
+            }),
+        )?;
+
+        let renderer = Rc::clone(&self.renderer);
+        renderer_object.set(
+            "removeProp",
+            Func::from(move |node_id: String, key: String| {
+                renderer.borrow_mut().remove_prop(&node_id, &key);
+            }),
+        )?;
+
+        let renderer = Rc::clone(&self.renderer);
+        renderer_object.set(
+            "setText",
+            Func::from(move |node_id: String, value: String| {
+                renderer.borrow_mut().set_text(&node_id, &value);
+            }),
+        )?;
+
+        let renderer = Rc::clone(&self.renderer);
+        renderer_object.set(
+            "publish",
+            Func::from(move |root_id: Option<String>| {
+                renderer.borrow_mut().publish(root_id.as_deref());
+            }),
+        )?;
+
+        let event_handlers = Rc::clone(&self.event_handlers);
+        events_object.set(
+            "on",
+            Func::from(
+                move |node_id: String,
+                      event_name: String,
+                      handler: Persistent<Function<'static>>| {
+                    event_handlers.borrow_mut().insert(
+                        EventHandlerKey {
+                            event_name,
+                            node_id,
+                        },
+                        handler,
+                    );
+                },
+            ),
+        )?;
+
+        native_root.set("renderer", renderer_object)?;
+        native_root.set("events", events_object)?;
+        ctx.globals().set("__eclipsaNative", native_root)?;
+        ctx.eval::<(), _>(
+            r#"
+            {
+              const nativeRoot = globalThis.__eclipsaNative
+              const rawRenderer = nativeRoot.renderer
+              nativeRoot.renderer = {
+                ...rawRenderer,
+                setProp(nodeID, key, value) {
+                  if (value == null) {
+                    rawRenderer.removeProp(nodeID, key)
+                    return
+                  }
+                  if (typeof value === "boolean") {
+                    rawRenderer.setPropSerialized(nodeID, key, value ? "true" : "false")
+                    return
+                  }
+                  if (typeof value === "string" || typeof value === "number") {
+                    rawRenderer.setPropSerialized(nodeID, key, String(value))
+                    return
+                  }
+                  try {
+                    rawRenderer.setPropSerialized(nodeID, key, JSON.stringify(value))
+                  } catch {
+                    rawRenderer.setPropSerialized(nodeID, key, String(value))
+                  }
+                },
+              }
+            }
+            "#,
+        )?;
+        Ok(())
+    }
+
+    fn install_dev_runtime_bridge(&self, ctx: Ctx<'_>, manifest: &NativeDevManifest) -> Result<()> {
+        let dev_manifest = Object::new(ctx.clone())?;
+        dev_manifest.set("entry", manifest.entry.clone())?;
+        let hmr = Object::new(ctx.clone())?;
+        hmr.set("url", manifest.hmr_url.clone())?;
+        dev_manifest.set("hmr", hmr)?;
+        dev_manifest.set("rpc", manifest.rpc_url.clone())?;
+        ctx.globals()
+            .set("__eclipsaNativeDevManifest", dev_manifest)?;
+
+        let runtime_object = Object::new(ctx.clone())?;
+        let rpc_url = manifest.rpc_url.clone();
+        runtime_object.set(
+            "invoke",
+            Func::from(move |name: String, payload_json: String| -> String {
+                match invoke_native_dev_rpc(&rpc_url, &name, &payload_json) {
+                    Ok(result) => result,
+                    Err(error) => json!({
+                        "error": {
+                            "message": error.to_string(),
+                        }
+                    })
+                    .to_string(),
+                }
+            }),
+        )?;
+
+        let dev_state = Rc::clone(&self.dev_state);
+        let hmr_url = manifest.hmr_url.clone();
+        runtime_object.set(
+            "connectHMR",
+            Func::from(move |callback: Persistent<Function<'static>>| {
+                {
+                    let mut dev_state = dev_state.borrow_mut();
+                    dev_state.hmr_callback = Some(callback);
+                }
+
+                let should_connect = dev_state.borrow().receiver.is_none();
+                if should_connect {
+                    let stop_hmr = Arc::new(AtomicBool::new(false));
+                    match spawn_hmr_receiver(&hmr_url, Arc::clone(&stop_hmr)) {
+                        Ok(spawned) => {
+                            let connected = spawned.wait_for_initial_ready(INITIAL_HMR_READY_TIMEOUT);
+                            let SpawnedHmrReceiver { receiver, .. } = spawned;
+                            let mut dev_state = dev_state.borrow_mut();
+                            dev_state.receiver = Some(receiver);
+                            dev_state.stop_hmr = Some(stop_hmr);
+                            if !connected {
+                                eprintln!(
+                                    "The native GTK 4 host timed out waiting for the initial HMR connection."
+                                );
+                            }
+                        }
+                        Err(error) => {
+                            eprintln!("Failed to connect native HMR: {error}");
+                        }
+                    }
+                }
+            }),
+        )?;
+
+        ctx.globals()
+            .set("__eclipsaNativeRuntime", runtime_object)?;
+        Ok(())
+    }
+
+    fn run_pending_jobs(&self, ctx: Ctx<'_>) -> Result<()> {
+        loop {
+            if !ctx.execute_pending_job() {
+                break;
+            }
+        }
+        Ok(())
+    }
+}
+
+impl Drop for EclipsaGtk4Host {
+    fn drop(&mut self) {
+        if let Ok(mut dev_state) = self.dev_state.try_borrow_mut() {
+            if let Some(stop_hmr) = dev_state.stop_hmr.take() {
+                stop_hmr.store(true, Ordering::Relaxed);
+            }
+            dev_state.hmr_callback = None;
+            dev_state.receiver = None;
+        }
+        if let Ok(mut event_handlers) = self.event_handlers.try_borrow_mut() {
+            event_handlers.clear();
+        }
+    }
+}
+
+fn invoke_native_dev_rpc(rpc_url: &str, name: &str, payload_json: &str) -> Result<String> {
+    let payload = if payload_json.trim().is_empty() {
+        serde_json::Value::Array(Vec::new())
+    } else {
+        serde_json::from_str(payload_json)
+            .with_context(|| format!("Invalid JSON payload for native RPC {name}."))?
+    };
+    let response = ureq::post(rpc_url)
+        .content_type("application/json; charset=utf-8")
+        .send_json(json!({
+            "data": payload,
+            "name": name,
+        }))?;
+    let mut body = response.into_body();
+    Ok(body.read_to_string()?)
+}
+
+fn signal_initial_ready(initial_ready: &Sender<()>, did_signal_ready: &mut bool) {
+    if *did_signal_ready {
+        return;
+    }
+    *did_signal_ready = true;
+    let _ = initial_ready.send(());
+}
+
+fn create_hmr_request(hmr_url: &str) -> Result<WebSocketRequest> {
+    let mut request = hmr_url.into_client_request()?;
+    request.headers_mut().insert(
+        "Sec-WebSocket-Protocol",
+        HeaderValue::from_static("vite-hmr"),
+    );
+    Ok(request)
+}
+
+fn spawn_hmr_receiver(hmr_url: &str, stop_hmr: Arc<AtomicBool>) -> Result<SpawnedHmrReceiver> {
+    create_hmr_request(hmr_url)?;
+    let (initial_ready_tx, initial_ready_rx) = mpsc::channel();
+    let (sender, receiver) = mpsc::channel();
+    let hmr_url = hmr_url.to_owned();
+
+    thread::spawn(move || {
+        let mut did_signal_ready = false;
+
+        while !stop_hmr.load(Ordering::Relaxed) {
+            let request = match create_hmr_request(&hmr_url) {
+                Ok(request) => request,
+                Err(error) => {
+                    eprintln!("Failed to connect native HMR: {error}");
+                    break;
+                }
+            };
+
+            let (mut socket, _) = match connect(request) {
+                Ok(connection) => connection,
+                Err(error) => {
+                    if !stop_hmr.load(Ordering::Relaxed) {
+                        eprintln!("Failed to connect native HMR: {error}");
+                        thread::sleep(Duration::from_millis(250));
+                    }
+                    continue;
+                }
+            };
+
+            loop {
+                if stop_hmr.load(Ordering::Relaxed) {
+                    let _ = socket.close(None);
+                    return;
+                }
+
+                match socket.read() {
+                    Ok(Message::Text(message)) => {
+                        signal_initial_ready(&initial_ready_tx, &mut did_signal_ready);
+                        if sender.send(message.to_string()).is_err() {
+                            return;
+                        }
+                    }
+                    Ok(Message::Binary(bytes)) => {
+                        let Ok(message) = String::from_utf8(bytes.to_vec()) else {
+                            continue;
+                        };
+                        signal_initial_ready(&initial_ready_tx, &mut did_signal_ready);
+                        if sender.send(message).is_err() {
+                            return;
+                        }
+                    }
+                    Ok(Message::Ping(payload)) => {
+                        if socket.send(Message::Pong(payload)).is_err() {
+                            break;
+                        }
+                    }
+                    Ok(Message::Pong(_)) | Ok(Message::Frame(_)) => {}
+                    Ok(Message::Close(_))
+                    | Err(WebSocketError::ConnectionClosed)
+                    | Err(WebSocketError::AlreadyClosed) => break,
+                    Err(WebSocketError::Io(error))
+                        if error.kind() == ErrorKind::WouldBlock
+                            || error.kind() == ErrorKind::TimedOut =>
+                    {
+                        continue;
+                    }
+                    Err(error) => {
+                        if !stop_hmr.load(Ordering::Relaxed) {
+                            eprintln!("Native HMR socket error: {error}");
+                        }
+                        break;
+                    }
+                }
+            }
+
+            if !stop_hmr.load(Ordering::Relaxed) {
+                thread::sleep(Duration::from_millis(250));
+            }
+        }
+    });
+
+    Ok(SpawnedHmrReceiver {
+        initial_ready: initial_ready_rx,
+        receiver,
+    })
+}
+
+pub fn write_file(path: &Path, value: &str) -> Result<()> {
+    fs::write(path, value)?;
+    Ok(())
+}
+
+#[cfg_attr(not(feature = "gtk-ui"), allow(dead_code))]
+pub fn is_dev_manifest_source(value: Option<&str>) -> bool {
+    matches!(value, Some(manifest) if manifest.starts_with("http://") || manifest.starts_with("https://"))
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use crate::loader::NativeApplicationDescriptor;
+    use std::net::TcpListener;
+    use tungstenite::{
+        accept_hdr,
+        handshake::server::{Request, Response},
+        Message,
+    };
+
+    struct TestLoader {
+        descriptor: NativeApplicationDescriptor,
+    }
+
+    impl BootstrapScriptLoading for TestLoader {
+        fn load(&self) -> Result<NativeApplicationDescriptor> {
+            Ok(self.descriptor.clone())
+        }
+    }
+
+    fn create_test_host(source: &str) -> EclipsaGtk4Host {
+        EclipsaGtk4Host::with_loader(TestLoader {
+            descriptor: NativeApplicationDescriptor::Script(BootstrapScript {
+                origin: "inline-test.js".to_owned(),
+                source: source.to_owned(),
+            }),
+        })
+        .expect("create test GTK host")
+    }
+
+    #[test]
+    fn hmr_receiver_relays_messages_after_the_initial_ready_event() {
+        let listener = TcpListener::bind("127.0.0.1:0").expect("bind test websocket listener");
+        let address = listener.local_addr().expect("read local websocket address");
+        let ws_url = format!("ws://{address}/");
+
+        let server = thread::spawn(move || {
+            let (stream, _) = listener.accept().expect("accept websocket client");
+            let callback = |request: &Request, mut response: Response| {
+                if let Some(protocol) = request.headers().get("Sec-WebSocket-Protocol") {
+                    response
+                        .headers_mut()
+                        .insert("Sec-WebSocket-Protocol", protocol.clone());
+                }
+                Ok(response)
+            };
+            let mut socket = accept_hdr(stream, callback).expect("upgrade websocket client");
+            socket
+                .send(Message::Text("{\"type\":\"connected\"}".into()))
+                .expect("send connected payload");
+            socket
+                .send(Message::Text(
+                    "{\"type\":\"update\",\"updates\":[]}".into(),
+                ))
+                .expect("send update payload");
+        });
+
+        let stop_hmr = Arc::new(AtomicBool::new(false));
+        let spawned =
+            spawn_hmr_receiver(&ws_url, Arc::clone(&stop_hmr)).expect("spawn hmr receiver");
+
+        assert!(spawned.wait_for_initial_ready(Duration::from_secs(2)));
+        assert_eq!(
+            spawned
+                .receiver
+                .recv_timeout(Duration::from_secs(2))
+                .expect("receive connected payload"),
+            "{\"type\":\"connected\"}"
+        );
+        assert_eq!(
+            spawned
+                .receiver
+                .recv_timeout(Duration::from_secs(2))
+                .expect("receive update payload"),
+            "{\"type\":\"update\",\"updates\":[]}"
+        );
+
+        stop_hmr.store(true, Ordering::Relaxed);
+        server.join().expect("join websocket server");
+    }
+
+    #[test]
+    fn detects_http_manifests_as_dev_sources() {
+        assert!(is_dev_manifest_source(Some("http://127.0.0.1:5179/__eclipsa_native__/manifest.json")));
+        assert!(is_dev_manifest_source(Some("https://example.test/manifest.json")));
+        assert!(!is_dev_manifest_source(Some("/tmp/eclipsa/manifest.json")));
+        assert!(!is_dev_manifest_source(None));
+    }
+
+    #[test]
+    fn applies_ui_actions_without_calling_dispatch_from_the_widget_callback() {
+        let mut host = create_test_host(
+            r#"
+            const renderer = globalThis.__eclipsaNative.renderer
+            const events = globalThis.__eclipsaNative.events
+            const root = renderer.createElement("gtk4:window")
+            const status = renderer.createElement("gtk4:text")
+            renderer.setProp(status, "value", "idle")
+            renderer.insert(root, status, null)
+
+            const button = renderer.createElement("gtk4:button")
+            renderer.setProp(button, "title", "Click")
+            events.on(button, "click", () => {
+              renderer.setProp(status, "value", "clicked")
+              renderer.publish(root)
+            })
+            renderer.insert(root, button, null)
+
+            const input = renderer.createElement("gtk4:text-field")
+            renderer.setProp(input, "value", "GTK")
+            events.on(input, "input", (value) => {
+              renderer.setProp(status, "value", `input:${value}`)
+              renderer.publish(root)
+            })
+            renderer.insert(root, input, null)
+
+            const toggle = renderer.createElement("gtk4:switch")
+            renderer.setProp(toggle, "value", true)
+            events.on(toggle, "toggle", (value) => {
+              renderer.setProp(status, "value", value ? "enabled" : "disabled")
+              renderer.publish(root)
+            })
+            renderer.insert(root, toggle, null)
+
+            renderer.publish(root)
+            "#,
+        );
+
+        host.boot().expect("boot test host");
+        host.apply_ui_action(HostUiAction::Click {
+            node_id: "gtk4-node-3".to_owned(),
+        })
+        .expect("apply click action");
+        assert_eq!(
+            host.root()
+                .expect("rendered root after click")
+                .children
+                .first()
+                .and_then(|node| node.string_prop("value")),
+            Some("clicked")
+        );
+
+        host.apply_ui_action(HostUiAction::Input {
+            node_id: "gtk4-node-4".to_owned(),
+            value: "GTK 4".to_owned(),
+        })
+        .expect("apply input action");
+        assert_eq!(
+            host.root()
+                .expect("rendered root after input")
+                .children
+                .first()
+                .and_then(|node| node.string_prop("value")),
+            Some("input:GTK 4")
+        );
+
+        host.apply_ui_action(HostUiAction::Toggle {
+            node_id: "gtk4-node-5".to_owned(),
+            value: false,
+        })
+        .expect("apply toggle action");
+        assert_eq!(
+            host.root()
+                .expect("rendered root after toggle")
+                .children
+                .first()
+                .and_then(|node| node.string_prop("value")),
+            Some("disabled")
+        );
+    }
+
+    #[test]
+    fn repeated_click_actions_keep_publishing_updates() {
+        let mut host = create_test_host(
+            r#"
+            const renderer = globalThis.__eclipsaNative.renderer
+            const events = globalThis.__eclipsaNative.events
+            let count = 0
+
+            const root = renderer.createElement("gtk4:window")
+            const status = renderer.createElement("gtk4:text")
+            renderer.setProp(status, "value", "count:0")
+            renderer.insert(root, status, null)
+
+            const button = renderer.createElement("gtk4:button")
+            renderer.setProp(button, "title", "Count")
+            events.on(button, "click", () => {
+              count += 1
+              renderer.setProp(status, "value", `count:${count}`)
+              renderer.publish(root)
+            })
+            renderer.insert(root, button, null)
+            renderer.publish(root)
+            "#,
+        );
+
+        host.boot().expect("boot test host");
+
+        for expected in ["count:1", "count:2"] {
+            host.apply_ui_action(HostUiAction::Click {
+                node_id: "gtk4-node-3".to_owned(),
+            })
+            .expect("apply repeated click action");
+            assert_eq!(
+                host.root()
+                    .expect("rendered root after repeated click")
+                    .children
+                    .first()
+                    .and_then(|node| node.string_prop("value")),
+                Some(expected)
+            );
+            assert!(host.take_render_update());
+        }
+    }
+
+    #[test]
+    fn pump_only_requests_a_refresh_when_the_tree_was_published() {
+        let mut host = create_test_host(
+            r#"
+            const renderer = globalThis.__eclipsaNative.renderer
+            const root = renderer.createElement("gtk4:window")
+            const status = renderer.createElement("gtk4:text")
+            renderer.setProp(status, "value", "idle")
+            renderer.insert(root, status, null)
+            renderer.publish(root)
+            "#,
+        );
+
+        host.boot().expect("boot test host");
+        assert!(host.take_render_update());
+        let result = host
+            .pump(std::iter::empty::<HostUiAction>())
+            .expect("pump without actions");
+        assert!(!result.needs_refresh, "pump without actions should not request a refresh");
+        assert!(!result.requires_full_rebuild);
+
+        let (sender, receiver) = mpsc::channel();
+        sender
+            .send("{\"type\":\"connected\"}".to_owned())
+            .expect("send connected payload");
+        let callback = host.context.with(|ctx| -> Result<Persistent<Function<'static>>> {
+            let function = ctx.eval::<Function<'_>, _>("(message) => { void message }")?;
+            Ok(Persistent::save(&ctx, function))
+        })
+        .expect("create persistent hmr callback");
+        {
+            let mut dev_state = host.dev_state.borrow_mut();
+            dev_state.hmr_callback = Some(callback);
+            dev_state.receiver = Some(receiver);
+        }
+
+        let result = host
+            .pump(std::iter::empty::<HostUiAction>())
+            .expect("pump hmr without publish");
+        assert!(!result.needs_refresh);
+        assert!(!result.requires_full_rebuild);
+    }
+
+    #[test]
+    fn pump_marks_hmr_publishes_for_full_rebuild() {
+        let mut host = create_test_host(
+            r#"
+            const renderer = globalThis.__eclipsaNative.renderer
+            const root = renderer.createElement("gtk4:window")
+            const status = renderer.createElement("gtk4:text")
+            renderer.setProp(status, "value", "idle")
+            renderer.insert(root, status, null)
+            renderer.publish(root)
+            globalThis.__testHmrUpdate = () => {
+              renderer.setProp(status, "value", "hmr")
+              renderer.publish(root)
+            }
+            "#,
+        );
+
+        host.boot().expect("boot test host");
+        assert!(host.take_render_update());
+
+        let callback = host
+            .context
+            .with(|ctx| -> Result<Persistent<Function<'static>>> {
+                let function = ctx.eval::<Function<'_>, _>(
+                    "(message) => { if (JSON.parse(message).type === \"update\") globalThis.__testHmrUpdate() }",
+                )?;
+                Ok(Persistent::save(&ctx, function))
+            })
+            .expect("create persistent hmr callback");
+        let (sender, receiver) = mpsc::channel();
+        sender
+            .send("{\"type\":\"update\",\"updates\":[]}".to_owned())
+            .expect("send update payload");
+        {
+            let mut dev_state = host.dev_state.borrow_mut();
+            dev_state.hmr_callback = Some(callback);
+            dev_state.receiver = Some(receiver);
+        }
+
+        let result = host
+            .pump(std::iter::empty::<HostUiAction>())
+            .expect("pump hmr publish");
+        assert!(result.needs_refresh);
+        assert!(result.requires_full_rebuild);
+    }
+}
diff --git a/packages/native-gtk4/gtk4-rust/src/lib.rs b/packages/native-gtk4/gtk4-rust/src/lib.rs
new file mode 100644
index 0000000..2df6450
--- /dev/null
+++ b/packages/native-gtk4/gtk4-rust/src/lib.rs
@@ -0,0 +1,21 @@
+mod host;
+mod loader;
+mod renderer;
+#[cfg(feature = "gtk-ui")]
+mod snapshot_host;
+mod tree;
+
+pub use host::write_file;
+pub use host::EclipsaGtk4Host;
+pub use host::EventPayload;
+pub use host::HostUiAction;
+pub use host::PumpResult;
+pub use host::is_dev_manifest_source;
+pub use loader::BootstrapScript;
+pub use loader::BootstrapScriptLoading;
+pub use loader::DefaultBootstrapScriptLoader;
+pub use loader::NativeApplicationDescriptor;
+pub use loader::NativeDevManifest;
+#[cfg(feature = "gtk-ui")]
+pub use snapshot_host::SnapshotHostWidget;
+pub use tree::NativeNode;
diff --git a/packages/native-gtk4/gtk4-rust/src/loader.rs b/packages/native-gtk4/gtk4-rust/src/loader.rs
new file mode 100644
index 0000000..cfe61af
--- /dev/null
+++ b/packages/native-gtk4/gtk4-rust/src/loader.rs
@@ -0,0 +1,179 @@
+use anyhow::{anyhow, bail, Context, Result};
+use serde::Deserialize;
+use std::collections::BTreeMap;
+use std::fs;
+use std::path::{Path, PathBuf};
+use url::Url;
+
+#[derive(Clone, Debug)]
+pub struct BootstrapScript {
+    pub origin: String,
+    pub source: String,
+}
+
+#[derive(Clone, Debug)]
+pub struct NativeDevManifest {
+    pub entry: String,
+    pub hmr_url: String,
+    pub rpc_url: String,
+}
+
+#[derive(Clone, Debug)]
+pub enum NativeApplicationDescriptor {
+    Script(BootstrapScript),
+    Dev(NativeDevManifest),
+}
+
+pub trait BootstrapScriptLoading {
+    fn load(&self) -> Result<NativeApplicationDescriptor>;
+}
+
+#[derive(Debug, Default)]
+pub struct DefaultBootstrapScriptLoader {
+    environment: BTreeMap<String, String>,
+}
+
+#[derive(Debug, Deserialize)]
+struct NativeBundleManifest {
+    bootstrap: Option<String>,
+    entry: Option<String>,
+    hmr: Option<NativeBundleHmrManifest>,
+    mode: Option<String>,
+    rpc: Option<String>,
+}
+
+#[derive(Debug, Deserialize)]
+struct NativeBundleHmrManifest {
+    url: String,
+}
+
+impl DefaultBootstrapScriptLoader {
+    pub fn new() -> Self {
+        Self {
+            environment: std::env::vars().collect(),
+        }
+    }
+
+    pub fn with_environment(environment: impl IntoIterator<Item = (String, String)>) -> Self {
+        Self {
+            environment: environment.into_iter().collect(),
+        }
+    }
+
+    fn load_from_manifest(&self, location: &str) -> Result<NativeApplicationDescriptor> {
+        let manifest_url = resolve_location(location)?;
+        let manifest_source = read_to_string(&manifest_url)
+            .with_context(|| format!("Failed to load native bundle manifest at {location}."))?;
+        let manifest: NativeBundleManifest = serde_json::from_str(&manifest_source)
+            .with_context(|| format!("Failed to decode native bundle manifest at {location}."))?;
+
+        if manifest.mode.as_deref() == Some("dev") {
+            let entry = manifest
+                .entry
+                .ok_or_else(|| anyhow!("Native dev manifest is missing entry."))?;
+            let rpc_url = manifest
+                .rpc
+                .ok_or_else(|| anyhow!("Native dev manifest is missing rpc."))?;
+            let hmr_url = manifest
+                .hmr
+                .map(|hmr| hmr.url)
+                .ok_or_else(|| anyhow!("Native dev manifest is missing hmr.url."))?;
+            return Ok(NativeApplicationDescriptor::Dev(NativeDevManifest {
+                entry,
+                hmr_url,
+                rpc_url,
+            }));
+        }
+
+        let bootstrap = manifest
+            .bootstrap
+            .ok_or_else(|| anyhow!("Native bundle manifest is missing bootstrap."))?;
+        let bootstrap_url =
+            resolve_relative_location(&manifest_url, &bootstrap).with_context(|| {
+                format!("Failed to resolve native bootstrap script at {bootstrap}.")
+            })?;
+        let source = read_to_string(&bootstrap_url)
+            .with_context(|| format!("Failed to load native bootstrap script at {bootstrap}."))?;
+        Ok(NativeApplicationDescriptor::Script(BootstrapScript {
+            origin: bootstrap_url.to_string(),
+            source,
+        }))
+    }
+}
+
+impl BootstrapScriptLoading for DefaultBootstrapScriptLoader {
+    fn load(&self) -> Result<NativeApplicationDescriptor> {
+        let manifest_location = self
+            .environment
+            .get("ECLIPSA_NATIVE_MANIFEST")
+            .filter(|value| !value.is_empty())
+            .ok_or_else(|| {
+                anyhow!("Set ECLIPSA_NATIVE_MANIFEST before booting the native host.")
+            })?;
+        self.load_from_manifest(manifest_location)
+    }
+}
+
+fn resolve_location(location: &str) -> Result<Url> {
+    if let Ok(url) = Url::parse(location) {
+        return Ok(url);
+    }
+
+    let expanded = shellexpand(location);
+    let path = PathBuf::from(expanded);
+    let canonical = if path.is_absolute() {
+        path
+    } else {
+        std::env::current_dir()?.join(path)
+    };
+    Url::from_file_path(&canonical)
+        .map_err(|_| anyhow!("Failed to resolve native bundle location {location}."))
+}
+
+fn resolve_relative_location(base_url: &Url, location: &str) -> Result<Url> {
+    if let Ok(url) = Url::parse(location) {
+        return Ok(url);
+    }
+
+    match base_url.scheme() {
+        "file" => {
+            let base_path = base_url
+                .to_file_path()
+                .map_err(|_| anyhow!("Invalid file manifest URL."))?;
+            let resolved = base_path.parent().unwrap_or(Path::new("/")).join(location);
+            Url::from_file_path(resolved).map_err(|_| anyhow!("Failed to resolve file URL."))
+        }
+        _ => base_url
+            .join(location)
+            .map_err(|error| anyhow!("Failed to resolve remote URL: {error}")),
+    }
+}
+
+fn read_to_string(url: &Url) -> Result<String> {
+    match url.scheme() {
+        "http" | "https" => {
+            let response = ureq::get(url.as_str()).call()?;
+            let mut body = response.into_body();
+            Ok(body.read_to_string()?)
+        }
+        "file" => {
+            let path = url
+                .to_file_path()
+                .map_err(|_| anyhow!("Invalid file URL {url}."))?;
+            Ok(fs::read_to_string(path)?)
+        }
+        scheme => bail!("Unsupported manifest URL scheme {scheme}."),
+    }
+}
+
+fn shellexpand(value: &str) -> String {
+    if value == "~" {
+        return std::env::var("HOME").unwrap_or_else(|_| value.to_owned());
+    }
+    if let Some(stripped) = value.strip_prefix("~/") {
+        if let Ok(home) = std::env::var("HOME") {
+            return format!("{home}/{stripped}");
+        }
+    }
+    value.to_owned()
+}
diff --git a/packages/native-gtk4/gtk4-rust/src/renderer.rs b/packages/native-gtk4/gtk4-rust/src/renderer.rs
new file mode 100644
index 0000000..d9a45f3
--- /dev/null
+++ b/packages/native-gtk4/gtk4-rust/src/renderer.rs
@@ -0,0 +1,186 @@
+use crate::tree::NativeNode;
+use std::collections::BTreeMap;
+
+#[derive(Clone, Debug)]
+struct RendererRecord {
+    child_ids: Vec<String>,
+    props: BTreeMap<String, String>,
+    tag: String,
+    text: Option<String>,
+}
+
+#[derive(Clone, Debug, Default)]
+pub struct Gtk4RendererBridge {
+    next_id: usize,
+    pending_publish: bool,
+    records: BTreeMap<String, RendererRecord>,
+    root: Option<NativeNode>,
+    root_node_id: Option<String>,
+}
+
+impl Gtk4RendererBridge {
+    pub fn create_element(&mut self, type_name: &str) -> String {
+        let node_id = self.allocate_id();
+        self.records.insert(
+            node_id.clone(),
+            RendererRecord {
+                child_ids: Vec::new(),
+                props: BTreeMap::new(),
+                tag: type_name.to_owned(),
+                text: None,
+            },
+        );
+        node_id
+    }
+
+    pub fn create_text(&mut self, value: &str) -> String {
+        let node_id = self.allocate_id();
+        self.records.insert(
+            node_id.clone(),
+            RendererRecord {
+                child_ids: Vec::new(),
+                props: BTreeMap::new(),
+                tag: "gtk4:text".to_owned(),
+                text: Some(value.to_owned()),
+            },
+        );
+        node_id
+    }
+
+    pub fn insert(&mut self, parent_id: &str, child_id: &str, before_id: Option<&str>) {
+        let Some(parent) = self.records.get_mut(parent_id) else {
+            return;
+        };
+        parent.child_ids.retain(|candidate| candidate != child_id);
+        if let Some(before_id) = before_id {
+            if let Some(index) = parent
+                .child_ids
+                .iter()
+                .position(|candidate| candidate == before_id)
+            {
+                parent.child_ids.insert(index, child_id.to_owned());
+                return;
+            }
+        }
+        parent.child_ids.push(child_id.to_owned());
+    }
+
+    pub fn remove(&mut self, parent_id: &str, child_id: &str) {
+        if let Some(parent) = self.records.get_mut(parent_id) {
+            parent.child_ids.retain(|candidate| candidate != child_id);
+        }
+        self.remove_subtree(child_id);
+    }
+
+    pub fn reorder(&mut self, parent_id: &str, child_id: &str, before_id: Option<&str>) {
+        self.insert(parent_id, child_id, before_id);
+    }
+
+    pub fn set_prop(&mut self, node_id: &str, key: &str, value: &str) {
+        let Some(record) = self.records.get_mut(node_id) else {
+            return;
+        };
+        record.props.insert(key.to_owned(), value.to_owned());
+    }
+
+    pub fn remove_prop(&mut self, node_id: &str, key: &str) {
+        let Some(record) = self.records.get_mut(node_id) else {
+            return;
+        };
+        record.props.remove(key);
+    }
+
+    pub fn set_text(&mut self, node_id: &str, value: &str) {
+        let Some(record) = self.records.get_mut(node_id) else {
+            return;
+        };
+        record.text = Some(value.to_owned());
+    }
+
+    pub fn publish(&mut self, root_id: Option<&str>) {
+        if let Some(root_id) = root_id {
+            self.root_node_id = Some(root_id.to_owned());
+        }
+        self.root = self
+            .root_node_id
+            .as_deref()
+            .and_then(|root_node_id| self.materialize_tree(root_node_id));
+        self.pending_publish = true;
+    }
+
+    pub fn take_pending_publish(&mut self) -> bool {
+        let pending_publish = self.pending_publish;
+        self.pending_publish = false;
+        pending_publish
+    }
+
+    pub fn root(&self) -> Option<&NativeNode> {
+        self.root.as_ref()
+    }
+
+    pub fn render_fallback(&mut self, title: &str, message: &str) {
+        self.next_id = 0;
+        self.records.clear();
+        self.root = None;
+        self.root_node_id = None;
+
+        let root = self.create_element("gtk4:box");
+        self.set_prop(&root, "orientation", "vertical");
+        self.set_prop(&root, "spacing", "12");
+
+        let title_node = self.create_element("gtk4:text");
+        self.set_prop(&title_node, "value", title);
+        self.insert(&root, &title_node, None);
+
+        let body_node = self.create_element("gtk4:text");
+        self.set_prop(&body_node, "value", message);
+        self.insert(&root, &body_node, None);
+
+        self.publish(Some(&root));
+    }
+
+    fn allocate_id(&mut self) -> String {
+        self.next_id += 1;
+        format!("gtk4-node-{}", self.next_id)
+    }
+
+    fn materialize_tree(&self, node_id: &str) -> Option<NativeNode> {
+        let record = self.records.get(node_id)?;
+        Some(NativeNode {
+            id: node_id.to_owned(),
+            tag: record.tag.clone(),
+            text: record.text.clone(),
+            props: record.props.clone(),
+            children: record
+                .child_ids
+                .iter()
+                .filter_map(|child_id| self.materialize_tree(child_id))
+                .collect(),
+        })
+    }
+
+    fn remove_subtree(&mut self, node_id: &str) {
+        let Some(record) = self.records.remove(node_id) else {
+            return;
+        };
+        for child_id in record.child_ids {
+            self.remove_subtree(&child_id);
+        }
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::Gtk4RendererBridge;
+
+    #[test]
+    fn publish_marks_and_clears_pending_updates() {
+        let mut bridge = Gtk4RendererBridge::default();
+        let root = bridge.create_element("gtk4:window");
+
+        bridge.publish(Some(&root));
+
+        assert!(bridge.take_pending_publish());
+        assert!(!bridge.take_pending_publish());
+    }
+}
diff --git a/packages/native-gtk4/gtk4-rust/src/snapshot_host.rs b/packages/native-gtk4/gtk4-rust/src/snapshot_host.rs
new file mode 100644
index 0000000..92922e8
--- /dev/null
+++ b/packages/native-gtk4/gtk4-rust/src/snapshot_host.rs
@@ -0,0 +1,104 @@
+#![cfg(feature = "gtk-ui")]
+
+use gtk4::glib;
+use gtk4::prelude::*;
+use gtk4::subclass::prelude::*;
+use std::cell::RefCell;
+
+mod imp {
+    use super::*;
+
+    #[derive(Default)]
+    pub struct SnapshotHostWidget {
+        pub child: RefCell<Option<gtk4::Widget>>,
+    }
+
+    #[glib::object_subclass]
+    impl ObjectSubclass for SnapshotHostWidget {
+        const NAME: &'static str = "EclipsaSnapshotHostWidget";
+        type Type = super::SnapshotHostWidget;
+        type ParentType = gtk4::Widget;
+
+        fn class_init(klass: &mut Self::Class) {
+            klass.set_css_name("eclipsa-native-snapshot-host");
+            klass.set_layout_manager_type::<gtk4::BinLayout>();
+        }
+    }
+
+    impl ObjectImpl for SnapshotHostWidget {
+        fn dispose(&self) {
+            if let Some(child) = self.child.borrow_mut().take() {
+                child.unparent();
+            }
+        }
+    }
+
+    impl WidgetImpl for SnapshotHostWidget {
+        fn snapshot(&self, snapshot: &gtk4::Snapshot) {
+            if let Some(child) = self.child.borrow().as_ref() {
+                self.obj().snapshot_child(child, snapshot);
+            }
+        }
+    }
+}
+
+glib::wrapper! {
+    pub struct SnapshotHostWidget(ObjectSubclass<imp::SnapshotHostWidget>)
+        @extends gtk4::Widget,
+        @implements gtk4::Accessible, gtk4::Buildable, gtk4::ConstraintTarget;
+}
+
+impl Default for SnapshotHostWidget {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl SnapshotHostWidget {
+    pub fn new() -> Self {
+        let widget: Self = glib::Object::new();
+        widget.set_hexpand(true);
+        widget.set_vexpand(true);
+        widget.set_visible(true);
+        widget
+    }
+
+    pub fn content(&self) -> Option<gtk4::Widget> {
+        self.imp().child.borrow().clone()
+    }
+
+    pub fn set_content(&self, child: Option<&gtk4::Widget>) {
+        let imp = self.imp();
+        if let Some(existing_child) = imp.child.borrow_mut().take() {
+            existing_child.unparent();
+        }
+        if let Some(child) = child {
+            child.set_parent(self);
+            imp.child.borrow_mut().replace(child.clone());
+        }
+        self.queue_allocate();
+        self.queue_resize();
+        self.queue_draw();
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[gtk4::test]
+    fn replaces_content_without_replacing_root_widget() {
+        let root = SnapshotHostWidget::new();
+        let first = gtk4::Label::new(Some("First"));
+        let second = gtk4::Label::new(Some("Second"));
+
+        root.set_content(Some(first.upcast_ref()));
+        assert_eq!(root.content().as_ref(), Some(first.upcast_ref()));
+        assert_eq!(first.parent().as_ref(), Some(root.upcast_ref()));
+
+        root.set_content(Some(second.upcast_ref()));
+        assert_eq!(root.content().as_ref(), Some(second.upcast_ref()));
+        assert!(first.parent().is_none());
+        assert_eq!(second.parent().as_ref(), Some(root.upcast_ref()));
+    }
+}
diff --git a/packages/native-gtk4/gtk4-rust/src/tree.rs b/packages/native-gtk4/gtk4-rust/src/tree.rs
new file mode 100644
index 0000000..fb7add8
--- /dev/null
+++ b/packages/native-gtk4/gtk4-rust/src/tree.rs
@@ -0,0 +1,26 @@
+use serde::Serialize;
+use std::collections::BTreeMap;
+
+#[derive(Clone, Debug, Eq, PartialEq, Serialize)]
+pub struct NativeNode {
+    pub id: String,
+    pub tag: String,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub text: Option<String>,
+    pub props: BTreeMap<String, String>,
+    pub children: Vec<NativeNode>,
+}
+
+impl NativeNode {
+    pub fn string_prop(&self, key: &str) -> Option<&str> {
+        self.props.get(key).map(String::as_str)
+    }
+
+    pub fn bool_prop(&self, key: &str) -> Option<bool> {
+        self.string_prop(key).map(|value| value == "true")
+    }
+
+    pub fn double_prop(&self, key: &str) -> Option<f64> {
+        self.string_prop(key)?.parse::<f64>().ok()
+    }
+}
diff --git a/packages/native-gtk4/gtk4-rust/src/vite-runner.js b/packages/native-gtk4/gtk4-rust/src/vite-runner.js
new file mode 100644
index 0000000..565eae0
--- /dev/null
+++ b/packages/native-gtk4/gtk4-rust/src/vite-runner.js
@@ -0,0 +1,241 @@
+const SSR_EXPORTS = '__vite_ssr_exports__'
+const SSR_IMPORT_META = '__vite_ssr_import_meta__'
+const SSR_IMPORT = '__vite_ssr_import__'
+const SSR_DYNAMIC_IMPORT = '__vite_ssr_dynamic_import__'
+const SSR_EXPORT_ALL = '__vite_ssr_exportAll__'
+const SSR_EXPORT_NAME = '__vite_ssr_exportName__'
+const VIRTUAL_NATIVE_DEV_CLIENT = 'virtual:eclipsa-native/dev-client'
+
+const globalState = globalThis
+const moduleCache = new Map()
+
+const runtimeManifest = globalState.__eclipsaNativeDevManifest
+const runtimeBridge = globalState.__eclipsaNativeRuntime
+
+const normalizeModuleKey = (value) =>
+  typeof value === 'string' && value.startsWith('/@id/')
+    ? value.slice(5).replace('__x00__', '\0')
+    : value
+
+const rewriteRunnerCode = (code) =>
+  code
+    .replaceAll('await __vite_ssr_import__(', '__vite_ssr_import__(')
+    .replaceAll('await __vite_ssr_dynamic_import__(', '__vite_ssr_dynamic_import__(')
+
+const exportAll = (exports, sourceModule) => {
+  if (!sourceModule || exports === sourceModule) {
+    return
+  }
+  for (const key of Object.keys(sourceModule)) {
+    if (key === 'default' || key === '__esModule' || key in exports) {
+      continue
+    }
+    Object.defineProperty(exports, key, {
+      configurable: true,
+      enumerable: true,
+      get: () => sourceModule[key],
+    })
+  }
+}
+
+const exportName = (exports, name, getter) => {
+  Object.defineProperty(exports, name, {
+    configurable: true,
+    enumerable: true,
+    get: getter,
+  })
+}
+
+const invokeRuntime = (name, data) => {
+  const response = JSON.parse(runtimeBridge.invoke(name, JSON.stringify(data)))
+  if (response?.error?.message) {
+    throw new Error(response.error.message)
+  }
+  return response.result
+}
+
+const createModuleRecord = () => ({
+  aliases: new Set(),
+  evaluated: false,
+  evaluating: false,
+  exports: undefined,
+  meta: null,
+})
+
+const setModuleRecord = (record, ...keys) => {
+  for (const key of keys) {
+    if (typeof key === 'string' && key.length > 0) {
+      moduleCache.set(key, record)
+      record.aliases.add(key)
+      const normalizedKey = normalizeModuleKey(key)
+      if (typeof normalizedKey === 'string' && normalizedKey.length > 0) {
+        moduleCache.set(normalizedKey, record)
+        record.aliases.add(normalizedKey)
+      }
+    }
+  }
+}
+
+const removeModuleRecord = (record) => {
+  for (const key of record.aliases) {
+    moduleCache.delete(key)
+  }
+  record.aliases.clear()
+}
+
+const findModuleRecord = (key) => {
+  const cachedRecord = moduleCache.get(key) ?? moduleCache.get(normalizeModuleKey(key))
+  if (cachedRecord) {
+    return cachedRecord
+  }
+  const normalizedKey = normalizeModuleKey(key)
+  for (const record of moduleCache.values()) {
+    if (
+      record.meta?.url === key ||
+      record.meta?.id === key ||
+      record.meta?.file === key ||
+      normalizeModuleKey(record.meta?.url) === normalizedKey ||
+      normalizeModuleKey(record.meta?.id) === normalizedKey ||
+      normalizeModuleKey(record.meta?.file) === normalizedKey
+    ) {
+      return record
+    }
+  }
+  return null
+}
+
+const invalidateModule = (key) => {
+  const record = findModuleRecord(key)
+  if (!record) {
+    return
+  }
+  removeModuleRecord(record)
+}
+
+const resolveModuleFilename = (moduleInfo, url) => moduleInfo?.file ?? moduleInfo?.id ?? url
+
+const resolveModuleDirname = (filename) => {
+  const lastSlash = filename.lastIndexOf('/')
+  return lastSlash >= 0 ? filename.slice(0, lastSlash) : filename
+}
+
+const createImportMeta = (moduleInfo, url) => {
+  const canonicalUrl = moduleInfo?.url ?? url
+  const hotOwnerPath = normalizeModuleKey(canonicalUrl)
+  const filename = resolveModuleFilename(moduleInfo, canonicalUrl)
+  return {
+    env: {
+      BASE_URL: '/',
+      DEV: true,
+      MODE: 'development',
+      PROD: false,
+      SSR: true,
+    },
+    filename,
+    dirname: resolveModuleDirname(filename),
+    hot: globalState.__eclipsaNativeCreateHotContext?.(hotOwnerPath),
+    resolve(specifier) {
+      return specifier
+    },
+    url: canonicalUrl,
+  }
+}
+
+const importModule = (url, importer) => {
+  const existingRecord = moduleCache.get(url)
+  const moduleInfo = invokeRuntime('fetchModule', [
+    url,
+    importer ?? null,
+    {
+      cached: Boolean(existingRecord?.meta),
+      startOffset: 0,
+    },
+  ])
+
+  if (moduleInfo?.cache && existingRecord?.evaluated) {
+    return existingRecord.exports
+  }
+  if (moduleInfo?.externalize) {
+    throw new Error(`Unsupported external native module: ${moduleInfo.externalize}`)
+  }
+
+  const record = existingRecord ?? createModuleRecord()
+  record.meta = moduleInfo
+  setModuleRecord(record, url, moduleInfo?.id, moduleInfo?.url, moduleInfo?.file)
+  if (!moduleInfo?.cache) {
+    record.evaluated = false
+    record.exports = undefined
+  }
+
+  if (record.evaluated || record.evaluating) {
+    return record.exports
+  }
+
+  if (typeof moduleInfo?.code !== 'string') {
+    throw new Error(`Missing transformed code for native module ${url}`)
+  }
+
+  const canonicalUrl = moduleInfo?.url ?? url
+  const run = new Function(
+    SSR_EXPORTS,
+    SSR_IMPORT_META,
+    SSR_IMPORT,
+    SSR_DYNAMIC_IMPORT,
+    SSR_EXPORT_ALL,
+    SSR_EXPORT_NAME,
+    `"use strict";${rewriteRunnerCode(moduleInfo.code)}`,
+  )
+
+  record.evaluating = true
+  record.exports = Object.create(null)
+  Object.defineProperty(record.exports, Symbol.toStringTag, {
+    configurable: false,
+    enumerable: false,
+    value: 'Module',
+  })
+
+  try {
+    run(
+      record.exports,
+      createImportMeta(moduleInfo, url),
+      (dependency) => importModule(String(dependency), canonicalUrl),
+      (dependency) => importModule(String(dependency), canonicalUrl),
+      (sourceModule) => exportAll(record.exports, sourceModule),
+      (name, getter) => exportName(record.exports, name, getter),
+    )
+    record.evaluated = true
+    return record.exports
+  } finally {
+    record.evaluating = false
+  }
+}
+
+globalState.__eclipsaNativeModuleRunner = {
+  clearCache() {
+    moduleCache.clear()
+  },
+  importModule,
+  invalidateModules(urls) {
+    for (const url of urls) {
+      invalidateModule(String(url))
+    }
+  },
+}
+
+globalState.__eclipsaBoot = () => {
+  if (!runtimeManifest?.entry) {
+    throw new Error('Missing native dev manifest entry.')
+  }
+
+  importModule(VIRTUAL_NATIVE_DEV_CLIENT, null)
+  runtimeBridge.connectHMR((message) => {
+    const payload = JSON.parse(String(message ?? '{}'))
+    const handlePayload = globalState.__eclipsaNativeHandleHmrPayload
+    if (typeof handlePayload !== 'function') {
+      return
+    }
+    Promise.resolve(handlePayload(payload)).catch((error) => {
+      console.error(error)
+    })
+  })
+}
diff --git a/packages/native-gtk4/mod.test.ts b/packages/native-gtk4/mod.test.ts
new file mode 100644
index 0000000..273008b
--- /dev/null
+++ b/packages/native-gtk4/mod.test.ts
@@ -0,0 +1,28 @@
+import { createElement } from '@eclipsa/native-core'
+import { resolveNativeElementType } from '@eclipsa/native'
+import * as gtk4 from './mod.ts'
+import { describe, expect, it } from 'vitest'
+
+describe('@eclipsa/native-gtk4', () => {
+  it('exports the default GTK 4 tag map', () => {
+    expect(gtk4.GTK4_DEFAULT_TAG_MAP.window).toBe('gtk4:window')
+    expect(gtk4.GTK4_DEFAULT_TAG_MAP.box).toBe('gtk4:box')
+    expect('application' in gtk4.GTK4_DEFAULT_TAG_MAP).toBe(false)
+    expect('Application' in gtk4).toBe(false)
+  })
+
+  it('wraps primitives as native elements using the GTK 4 tags', () => {
+    const element = createElement(resolveNativeElementType(gtk4.Window), {
+      children: createElement(resolveNativeElementType(gtk4.Box), {
+        children: createElement(resolveNativeElementType(gtk4.Text), { value: 'Hello GTK 4' }),
+        orientation: 'vertical',
+        spacing: 12,
+      }),
+      title: 'Eclipsa Native GTK 4',
+    })
+
+    expect(element.type).toBe('gtk4:window')
+    expect(element.props.title).toBe('Eclipsa Native GTK 4')
+    expect((element.props.children as { type: string }).type).toBe('gtk4:box')
+  })
+})
diff --git a/packages/native-gtk4/mod.ts b/packages/native-gtk4/mod.ts
new file mode 100644
index 0000000..a5a65bb
--- /dev/null
+++ b/packages/native-gtk4/mod.ts
@@ -0,0 +1,29 @@
+import { defineNativeComponent } from '@eclipsa/native'
+import type { DefinedNativeComponent } from '@eclipsa/native'
+import type { Gio, GLib, Gtk } from './typings.ts'
+import { GTK4_DEFAULT_TAG_MAP } from './platform.ts'
+
+export type { Gio, GLib, Gtk } from './typings.ts'
+export { GTK4_DEFAULT_TAG_MAP } from './platform.ts'
+
+export const Window: DefinedNativeComponent<Gtk.WindowProps> =
+  defineNativeComponent<Gtk.WindowProps>(GTK4_DEFAULT_TAG_MAP.window)
+export const Box: DefinedNativeComponent<Gtk.BoxProps> = defineNativeComponent<Gtk.BoxProps>(
+  GTK4_DEFAULT_TAG_MAP.box,
+)
+export const Text: DefinedNativeComponent<Gtk.TextProps> = defineNativeComponent<Gtk.TextProps>(
+  GTK4_DEFAULT_TAG_MAP.text,
+)
+export const Button: DefinedNativeComponent<Gtk.ButtonProps> =
+  defineNativeComponent<Gtk.ButtonProps>(GTK4_DEFAULT_TAG_MAP.button)
+export const Spacer: DefinedNativeComponent<Gtk.WidgetProps> =
+  defineNativeComponent<Gtk.WidgetProps>(GTK4_DEFAULT_TAG_MAP.spacer)
+export const Image: DefinedNativeComponent<Gtk.ImageProps> = defineNativeComponent<Gtk.ImageProps>(
+  GTK4_DEFAULT_TAG_MAP.image,
+)
+export const TextField: DefinedNativeComponent<Gtk.TextFieldProps> =
+  defineNativeComponent<Gtk.TextFieldProps>(GTK4_DEFAULT_TAG_MAP.textField)
+export const Switch: DefinedNativeComponent<Gtk.SwitchProps> =
+  defineNativeComponent<Gtk.SwitchProps>(GTK4_DEFAULT_TAG_MAP.switch)
+export const ListBox: DefinedNativeComponent<Gtk.ListBoxProps> =
+  defineNativeComponent<Gtk.ListBoxProps>(GTK4_DEFAULT_TAG_MAP.listBox)
diff --git a/packages/native-gtk4/package.json b/packages/native-gtk4/package.json
new file mode 100644
index 0000000..565d6a8
--- /dev/null
+++ b/packages/native-gtk4/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "@eclipsa/native-gtk4",
+  "version": "0.0.0",
+  "homepage": "https://github.com/pnsk-lab/eclipsa",
+  "bugs": {
+    "url": "https://github.com/pnsk-lab/eclipsa/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pnsk-lab/eclipsa.git",
+    "directory": "packages/native-gtk4"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./mod.ts",
+      "import": "./mod.ts"
+    },
+    "./vite": {
+      "types": "./vite.ts",
+      "import": "./vite.ts"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "types": "./mod.d.mts",
+        "import": "./mod.mjs"
+      },
+      "./vite": {
+        "types": "./vite.d.mts",
+        "import": "./vite.mjs"
+      }
+    }
+  },
+  "scripts": {
+    "build": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
+    "host:app": "cargo run --manifest-path ./gtk4-rust/Cargo.toml --features gtk-ui --bin eclipsa-native-gtk4",
+    "host:build": "cargo build --manifest-path ./gtk4-rust/Cargo.toml --features gtk-ui --bin eclipsa-native-gtk4",
+    "host:smoke": "cargo run --manifest-path ./gtk4-rust/Cargo.toml --bin eclipsa-native-gtk4-smoke",
+    "pack": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
+    "test": "vp test --run",
+    "test:coverage": "c8 --reporter=lcov --reporter=json-summary --reporter=text bunx vp test --run",
+    "typecheck": "bun x tsc -p ../../tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@eclipsa/native": "workspace:^",
+    "@eclipsa/native-core": "workspace:^"
+  }
+}
diff --git a/packages/native-gtk4/platform.ts b/packages/native-gtk4/platform.ts
new file mode 100644
index 0000000..9540a50
--- /dev/null
+++ b/packages/native-gtk4/platform.ts
@@ -0,0 +1,23 @@
+export const GTK4_DEFAULT_TAG_MAP = {
+  box: 'gtk4:box',
+  button: 'gtk4:button',
+  image: 'gtk4:image',
+  listBox: 'gtk4:list-box',
+  spacer: 'gtk4:spacer',
+  switch: 'gtk4:switch',
+  text: 'gtk4:text',
+  textField: 'gtk4:text-field',
+  window: 'gtk4:window',
+} as const
+
+export const GTK4_DEFAULT_COMPONENT_MAP = {
+  box: 'Box',
+  button: 'Button',
+  image: 'Image',
+  listBox: 'ListBox',
+  spacer: 'Spacer',
+  switch: 'Switch',
+  text: 'Text',
+  textField: 'TextField',
+  window: 'Window',
+} as const
diff --git a/packages/native-gtk4/smoke.test.ts b/packages/native-gtk4/smoke.test.ts
new file mode 100644
index 0000000..97cd62e
--- /dev/null
+++ b/packages/native-gtk4/smoke.test.ts
@@ -0,0 +1,399 @@
+import { execFile, spawnSync } from 'node:child_process'
+import { access, mkdtemp, mkdir, rm, writeFile } from 'node:fs/promises'
+import { createServer as createNetServer } from 'node:net'
+import { tmpdir } from 'node:os'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { promisify } from 'node:util'
+import { createBuilder, createServer } from 'vite'
+import { afterEach, beforeAll, describe, expect, it } from 'vitest'
+import { native } from '../native/vite.ts'
+import { gtk4 } from './vite.ts'
+
+interface NativeNodeSnapshot {
+  children: NativeNodeSnapshot[]
+  id: string
+  props: Record<string, string>
+  tag: string
+  text?: string | null
+}
+
+interface SmokeOutput {
+  finalTree: NativeNodeSnapshot
+  initialTree: NativeNodeSnapshot
+}
+
+const currentDir = dirname(fileURLToPath(import.meta.url))
+const packagePath = resolve(currentDir, './gtk4-rust')
+const smokeExecutablePath = resolve(packagePath, 'target', 'debug', 'eclipsa-native-gtk4-smoke')
+const repoRoot = resolve(currentDir, '../..')
+const execFileAsync = promisify(execFile)
+const eclipsaEntry = resolve(repoRoot, 'packages/eclipsa/mod.ts')
+const eclipsaInternalEntry = resolve(repoRoot, 'packages/eclipsa/core/internal.ts')
+const nativeEntry = resolve(repoRoot, 'packages/native/mod.ts')
+const nativeJsxRuntime = resolve(repoRoot, 'packages/native/jsx-runtime.ts')
+const nativeJsxDevRuntime = resolve(repoRoot, 'packages/native/jsx-dev-runtime.ts')
+const nativeCoreEntry = resolve(repoRoot, 'packages/native-core/mod.ts')
+const nativeGtk4Entry = resolve(repoRoot, 'packages/native-gtk4/mod.ts')
+
+const flatten = (node: NativeNodeSnapshot): NativeNodeSnapshot[] => [
+  node,
+  ...node.children.flatMap(flatten),
+]
+
+const waitFor = async (fn: () => Promise<boolean>, timeoutMs = 10_000) => {
+  const deadline = Date.now() + timeoutMs
+  while (Date.now() < deadline) {
+    if (await fn()) {
+      return
+    }
+    await new Promise((resolve) => setTimeout(resolve, 100))
+  }
+  throw new Error(`Timed out after ${timeoutMs}ms`)
+}
+
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+const allocatePort = async () =>
+  await new Promise<number>((resolve, reject) => {
+    const server = createNetServer()
+    server.once('error', reject)
+    server.listen(0, '127.0.0.1', () => {
+      const address = server.address()
+      if (!address || typeof address === 'string') {
+        server.close(() => reject(new Error('Failed to allocate a native GTK 4 test port.')))
+        return
+      }
+      const { port } = address
+      server.close((error) => {
+        if (error) {
+          reject(error)
+          return
+        }
+        resolve(port)
+      })
+    })
+  })
+
+const buildSmokeExecutable = async () => {
+  await execFileAsync(
+    'cargo',
+    [
+      'build',
+      '--manifest-path',
+      resolve(packagePath, 'Cargo.toml'),
+      '--bin',
+      'eclipsa-native-gtk4-smoke',
+    ],
+    {
+      cwd: currentDir,
+      encoding: 'utf8',
+    },
+  )
+  return smokeExecutablePath
+}
+
+const fileExists = async (filePath: string) => {
+  try {
+    await access(filePath)
+    return true
+  } catch {
+    return false
+  }
+}
+
+const createFixture = async () => {
+  const root = await mkdtemp(resolve(tmpdir(), 'eclipsa-native-gtk4-hmr-'))
+  await mkdir(resolve(root, 'app'), { recursive: true })
+  await writeFile(
+    resolve(root, 'tsconfig.json'),
+    JSON.stringify(
+      {
+        extends: resolve(repoRoot, 'tsconfig.json'),
+        compilerOptions: {
+          jsxImportSource: '@eclipsa/native',
+        },
+        include: ['./app/**/*.ts', './app/**/*.tsx'],
+      },
+      null,
+      2,
+    ),
+  )
+  await writeFile(
+    resolve(root, 'package.json'),
+    JSON.stringify(
+      {
+        name: '@test/native-gtk4-hmr-app',
+        private: true,
+        type: 'module',
+      },
+      null,
+      2,
+    ),
+  )
+  await writeFile(
+    resolve(root, 'app', '+layout.tsx'),
+    [
+      `export default function Layout(props: { children?: unknown }) {`,
+      `  return <window title="GTK 4 Test Window">{props.children}</window>`,
+      `}`,
+      '',
+    ].join('\n'),
+  )
+  await writeNativeMapSource(root)
+  return root
+}
+
+const writeNativeMapSource = async (root: string, stackComponent = 'Box') => {
+  await writeFile(
+    resolve(root, 'app', '+native-map.ts'),
+    [
+      `import { Button, Box, Switch, Text, TextField, Window } from '@eclipsa/native-gtk4'`,
+      `export const button = Button`,
+      `export const div = ${stackComponent}`,
+      `export const input = TextField`,
+      `export const span = Text`,
+      `export const toggle = Switch`,
+      `export const window = Window`,
+      '',
+    ].join('\n'),
+  )
+}
+
+const writePageSource = async (root: string, title: string) => {
+  await writeFile(
+    resolve(root, 'app', '+page.tsx'),
+    [
+      `export default function App() {`,
+      `  return <div><span value=${JSON.stringify(title)} /></div>`,
+      `}`,
+      '',
+    ].join('\n'),
+  )
+}
+
+const writeInteractivePageSource = async (root: string) => {
+  await writeFile(
+    resolve(root, 'app', '+page.tsx'),
+    [
+      `import { getNativeRuntime } from '@eclipsa/native'`,
+      `import { useSignal } from 'eclipsa'`,
+      `export default function App() {`,
+      `  const count = useSignal(0)`,
+      `  const enabled = useSignal(true)`,
+      `  const name = useSignal('GTK')`,
+      `  const runtimeStatus = useSignal('runtime pending')`,
+      `  return (`,
+      `    <div orientation="vertical" spacing={16}>`,
+      `      <span value="Eclipsa Native GTK 4" />`,
+      `      <span value={runtimeStatus.value} />`,
+      `      <span value={\`Hello \${name.value} · \${enabled.value ? 'enabled' : 'disabled'} · count \${count.value}\`} />`,
+      `      <button`,
+      `        onClick={() => {`,
+      `          getNativeRuntime()`,
+      `          runtimeStatus.value = 'runtime ready'`,
+      `          count.value += 1`,
+      `        }}`,
+      `        title={\`Count \${count.value}\`}`,
+      `      />`,
+      `      <input`,
+      `        onInput={(value: string) => { name.value = String(value ?? '') }}`,
+      `        placeholder="Name"`,
+      `        value={name.value}`,
+      `      />`,
+      `      <toggle`,
+      `        onToggle={(value: boolean) => { enabled.value = Boolean(value) }}`,
+      `        title="Enabled"`,
+      `        value={enabled.value}`,
+      `      />`,
+      `    </div>`,
+      `  )`,
+      `}`,
+      '',
+    ].join('\n'),
+  )
+}
+
+const resolveConfig = (root: string, port: number) => ({
+  appType: 'custom' as const,
+  plugins: [
+    native({
+      target: gtk4({
+        launch: false,
+      }),
+    }),
+  ],
+  resolve: {
+    alias: [
+      {
+        find: /^eclipsa\/internal$/,
+        replacement: eclipsaInternalEntry,
+      },
+      {
+        find: /^eclipsa$/,
+        replacement: eclipsaEntry,
+      },
+      {
+        find: /^@eclipsa\/native\/jsx-dev-runtime$/,
+        replacement: nativeJsxDevRuntime,
+      },
+      {
+        find: /^@eclipsa\/native\/jsx-runtime$/,
+        replacement: nativeJsxRuntime,
+      },
+      {
+        find: /^@eclipsa\/native$/,
+        replacement: nativeEntry,
+      },
+      {
+        find: /^@eclipsa\/native-core$/,
+        replacement: nativeCoreEntry,
+      },
+      {
+        find: /^@eclipsa\/native-gtk4$/,
+        replacement: nativeGtk4Entry,
+      },
+    ],
+  },
+  root,
+  server: {
+    fs: {
+      allow: [repoRoot],
+    },
+    host: '127.0.0.1',
+    port,
+    strictPort: port > 0,
+  },
+})
+
+const buildFixture = async (root: string) => {
+  const builder = await createBuilder(resolveConfig(root, 0))
+  await builder.buildApp()
+  return resolve(root, 'dist', 'native', 'manifest.json')
+}
+
+describe('@eclipsa/native-gtk4 smoke host', () => {
+  const cleanup = new Set<string>()
+
+  beforeAll(async () => {
+    await buildSmokeExecutable()
+  }, 120_000)
+
+  afterEach(async () => {
+    for (const directory of cleanup) {
+      await rm(directory, { force: true, recursive: true })
+    }
+    cleanup.clear()
+  })
+
+  it('boots the built manifest and applies GTK 4 events through the Rust smoke host', async () => {
+    const root = await createFixture()
+    cleanup.add(root)
+    await writeInteractivePageSource(root)
+    const manifestPath = await buildFixture(root)
+    const result = spawnSync(smokeExecutablePath, [], {
+      cwd: currentDir,
+      encoding: 'utf8',
+      env: {
+        ...process.env,
+        ECLIPSA_NATIVE_MANIFEST: manifestPath,
+      },
+    })
+
+    expect(result.status, result.stderr).toBe(0)
+
+    const output = JSON.parse(result.stdout) as SmokeOutput
+    const initialNodes = flatten(output.initialTree)
+    const finalNodes = flatten(output.finalTree)
+
+    expect(output.initialTree.tag).toBe('gtk4:window')
+    expect(
+      initialNodes.some(
+        (node) => node.tag === 'gtk4:text' && node.props.value === 'Eclipsa Native GTK 4',
+      ),
+    ).toBe(true)
+    expect(
+      finalNodes.some((node) => node.tag === 'gtk4:text' && node.props.value === 'runtime ready'),
+    ).toBe(true)
+    expect(
+      initialNodes.some((node) => node.tag === 'gtk4:button' && node.props.title === 'Count 0'),
+    ).toBe(true)
+    expect(
+      finalNodes.some((node) => node.tag === 'gtk4:button' && node.props.title === 'Count 1'),
+    ).toBe(true)
+    expect(
+      finalNodes.some(
+        (node) =>
+          node.tag === 'gtk4:text' && node.props.value === 'Hello GTK 4 · disabled · count 1',
+      ),
+    ).toBe(true)
+    expect(
+      finalNodes.some((node) => node.tag === 'gtk4:text-field' && node.props.value === 'GTK 4'),
+    ).toBe(true)
+    expect(
+      finalNodes.some((node) => node.tag === 'gtk4:switch' && node.props.value === 'false'),
+    ).toBe(true)
+  }, 120_000)
+
+  it('reloads the Rust runtime when native source changes during dev', async () => {
+    const root = await createFixture()
+    cleanup.add(root)
+    await writePageSource(root, 'Initial Native Title')
+    const readyFile = resolve(root, 'runtime-ready')
+
+    const server = await createServer(resolveConfig(root, await allocatePort()))
+
+    try {
+      await server.listen()
+      const address = server.httpServer?.address()
+      const port = typeof address === 'object' && address ? address.port : 5173
+      await waitFor(async () => {
+        const response = await fetch(`http://127.0.0.1:${port}/__eclipsa_native__/manifest.json`)
+        return response.ok
+      })
+      await delay(300)
+
+      const smokePromise = execFileAsync(smokeExecutablePath, [], {
+        cwd: currentDir,
+        encoding: 'utf8',
+        env: {
+          ...process.env,
+          ECLIPSA_NATIVE_MANIFEST: `http://127.0.0.1:${port}/__eclipsa_native__/manifest.json`,
+          ECLIPSA_NATIVE_SMOKE_READY_FILE: readyFile,
+          ECLIPSA_NATIVE_SMOKE_WAIT_FOR_SECONDS: '3',
+        },
+      })
+
+      await waitFor(() => fileExists(readyFile))
+      await writePageSource(root, 'Updated Native Title')
+
+      const { stdout } = await smokePromise
+      const output = JSON.parse(stdout) as SmokeOutput
+      const initialNodes = flatten(output.initialTree)
+      const finalNodes = flatten(output.finalTree)
+
+      expect(output.finalTree.id).toBe(output.initialTree.id)
+      expect(
+        initialNodes.some(
+          (node) => node.tag === 'gtk4:text' && node.props.value === 'Initial Native Title',
+        ),
+      ).toBe(true)
+      expect(
+        finalNodes.some(
+          (node) => node.tag === 'gtk4:text' && node.props.value === 'Updated Native Title',
+        ),
+      ).toBe(true)
+      expect(
+        finalNodes.find(
+          (node) => node.tag === 'gtk4:text' && node.props.value === 'Updated Native Title',
+        )?.id,
+      ).toBe(
+        initialNodes.find(
+          (node) => node.tag === 'gtk4:text' && node.props.value === 'Initial Native Title',
+        )?.id,
+      )
+    } finally {
+      await server.close()
+    }
+  }, 120_000)
+})
diff --git a/packages/native-gtk4/tsconfig.json b/packages/native-gtk4/tsconfig.json
new file mode 100644
index 0000000..271730b
--- /dev/null
+++ b/packages/native-gtk4/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./**/*.ts", "./**/*.d.ts"],
+  "exclude": ["./**/*.test.ts"]
+}
diff --git a/packages/native-gtk4/typings.ts b/packages/native-gtk4/typings.ts
new file mode 100644
index 0000000..ab4ba21
--- /dev/null
+++ b/packages/native-gtk4/typings.ts
@@ -0,0 +1,73 @@
+export namespace GLib {
+  export type Uri = string
+}
+
+export namespace Gio {
+  export type IconName = string
+  export type ResourcePath = string
+}
+
+export namespace Gtk {
+  export type Align = 'baseline' | 'center' | 'end' | 'fill' | 'start'
+  export type Orientation = 'horizontal' | 'vertical'
+  export type SelectionMode = 'browse' | 'multiple' | 'none' | 'single'
+
+  export interface WidgetProps {
+    cssClasses?: readonly string[] | string
+    halign?: Align
+    hexpand?: boolean
+    id?: string
+    margin?: number
+    sensitive?: boolean
+    valign?: Align
+    vexpand?: boolean
+    visible?: boolean
+  }
+
+  export interface WindowProps extends WidgetProps {
+    defaultHeight?: number
+    defaultWidth?: number
+    title?: string
+  }
+
+  export interface BoxProps extends WidgetProps {
+    homogeneous?: boolean
+    orientation?: Orientation
+    spacing?: number
+  }
+
+  export interface TextProps extends WidgetProps {
+    selectable?: boolean
+    value?: string
+    wrap?: boolean
+    xalign?: number
+  }
+
+  export interface ButtonProps extends WidgetProps {
+    onClick?: () => void
+    title?: string
+  }
+
+  export interface ImageProps extends WidgetProps {
+    iconName?: Gio.IconName
+    pixelSize?: number
+    src?: Gio.ResourcePath | GLib.Uri
+  }
+
+  export interface TextFieldProps extends WidgetProps {
+    onInput?: (value: string) => void
+    placeholder?: string
+    value?: string
+    visibility?: boolean
+  }
+
+  export interface SwitchProps extends WidgetProps {
+    onToggle?: (value: boolean) => void
+    title?: string
+    value?: boolean
+  }
+
+  export interface ListBoxProps extends WidgetProps {
+    selectionMode?: SelectionMode
+  }
+}
diff --git a/packages/native-gtk4/vite.config.ts b/packages/native-gtk4/vite.config.ts
new file mode 100644
index 0000000..8851c02
--- /dev/null
+++ b/packages/native-gtk4/vite.config.ts
@@ -0,0 +1,28 @@
+import path from 'node:path'
+import { defineConfig } from 'vite-plus'
+
+export default defineConfig({
+  resolve: {
+    alias: [
+      {
+        find: /^@eclipsa\/native$/,
+        replacement: path.resolve(import.meta.dirname, '../native/mod.ts'),
+      },
+      {
+        find: /^@eclipsa\/native-core$/,
+        replacement: path.resolve(import.meta.dirname, '../native-core/mod.ts'),
+      },
+    ],
+  },
+  test: {
+    include: ['*.test.ts'],
+    environment: 'node',
+  },
+  pack: {
+    clean: true,
+    dts: true,
+    entry: './mod.ts',
+    format: ['esm'],
+    sourcemap: true,
+  },
+})
diff --git a/packages/native-gtk4/vite.test.ts b/packages/native-gtk4/vite.test.ts
new file mode 100644
index 0000000..c271241
--- /dev/null
+++ b/packages/native-gtk4/vite.test.ts
@@ -0,0 +1,192 @@
+import { mkdtemp, mkdir, readFile, rm, writeFile } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import path from 'node:path'
+import { createServer } from 'vite'
+import { afterEach, describe, expect, it } from 'vitest'
+import { native } from '../native/vite.ts'
+import { gtk4, NATIVE_GTK4_ENVIRONMENT_NAME } from './vite.ts'
+
+const repoRoot = path.resolve(import.meta.dirname, '../..')
+const eclipsaEntry = path.join(repoRoot, 'packages/eclipsa/mod.ts')
+const eclipsaInternalEntry = path.join(repoRoot, 'packages/eclipsa/core/internal.ts')
+const nativeEntry = path.join(repoRoot, 'packages/native/mod.ts')
+const nativeJsxRuntime = path.join(repoRoot, 'packages/native/jsx-runtime.ts')
+const nativeJsxDevRuntime = path.join(repoRoot, 'packages/native/jsx-dev-runtime.ts')
+const nativeCoreEntry = path.join(repoRoot, 'packages/native-core/mod.ts')
+const nativeGtk4Entry = path.join(repoRoot, 'packages/native-gtk4/mod.ts')
+const testServerPort = 5185
+
+const fileExists = async (filePath: string) => {
+  try {
+    await readFile(filePath)
+    return true
+  } catch {
+    return false
+  }
+}
+
+const waitFor = async (fn: () => Promise<boolean>, timeoutMs = 10_000) => {
+  const deadline = Date.now() + timeoutMs
+  while (Date.now() < deadline) {
+    if (await fn()) {
+      return
+    }
+    await new Promise((resolve) => setTimeout(resolve, 100))
+  }
+  throw new Error(`Timed out after ${timeoutMs}ms`)
+}
+
+const createFixture = async () => {
+  const root = await mkdtemp(path.join(tmpdir(), 'eclipsa-native-gtk4-env-'))
+  await mkdir(path.join(root, 'app'), { recursive: true })
+  await writeFile(
+    path.join(root, 'app', '+layout.tsx'),
+    [
+      `export default function Layout(props: { children?: unknown }) {`,
+      `  return <window>{props.children}</window>`,
+      `}`,
+      '',
+    ].join('\n'),
+  )
+  await writeFile(
+    path.join(root, 'app', '+native-map.ts'),
+    [
+      `import { Box, Text, Window } from '@eclipsa/native-gtk4'`,
+      `export const div = Box`,
+      `export const span = Text`,
+      `export const window = Window`,
+      '',
+    ].join('\n'),
+  )
+  await writeFile(
+    path.join(root, 'app', '+page.tsx'),
+    [
+      `import { useSignal } from 'eclipsa'`,
+      `export default function App() {`,
+      `  const count = useSignal(1)`,
+      `  return <div><span value={\`count \${count.value}\`} /></div>`,
+      `}`,
+      '',
+    ].join('\n'),
+  )
+  await writeFile(
+    path.join(root, 'fake-host.mjs'),
+    [
+      `import { writeFile } from 'node:fs/promises'`,
+      `const [launchedFile, terminatedFile] = process.argv.slice(2)`,
+      `const manifestUrl = process.env.ECLIPSA_NATIVE_MANIFEST`,
+      `const manifest = await fetch(manifestUrl).then((response) => response.json())`,
+      `await writeFile(launchedFile, JSON.stringify({ manifest, manifestUrl }))`,
+      `const shutdown = () => {`,
+      `  void writeFile(terminatedFile, 'terminated').finally(() => process.exit(0))`,
+      `}`,
+      `process.on('SIGTERM', shutdown)`,
+      `process.on('SIGINT', shutdown)`,
+      `setInterval(() => {}, 1_000)`,
+      '',
+    ].join('\n'),
+  )
+  return root
+}
+
+const resolveConfig = (root: string, command: readonly [string, ...string[]]) => ({
+  appType: 'custom' as const,
+  plugins: [
+    native({
+      target: gtk4({
+        command,
+        cwd: root,
+        startupTimeoutMs: 15_000,
+        stdio: 'ignore',
+      }),
+    }),
+  ],
+  resolve: {
+    alias: [
+      {
+        find: /^eclipsa\/internal$/,
+        replacement: eclipsaInternalEntry,
+      },
+      {
+        find: /^eclipsa$/,
+        replacement: eclipsaEntry,
+      },
+      {
+        find: /^@eclipsa\/native\/jsx-dev-runtime$/,
+        replacement: nativeJsxDevRuntime,
+      },
+      {
+        find: /^@eclipsa\/native\/jsx-runtime$/,
+        replacement: nativeJsxRuntime,
+      },
+      {
+        find: /^@eclipsa\/native$/,
+        replacement: nativeEntry,
+      },
+      {
+        find: /^@eclipsa\/native-core$/,
+        replacement: nativeCoreEntry,
+      },
+      {
+        find: /^@eclipsa\/native-gtk4$/,
+        replacement: nativeGtk4Entry,
+      },
+    ],
+  },
+  root,
+  server: {
+    fs: {
+      allow: [repoRoot],
+    },
+    host: '127.0.0.1',
+    port: testServerPort,
+    strictPort: true,
+  },
+})
+
+describe('@eclipsa/native-gtk4 vite environment', () => {
+  const cleanup = new Set<string>()
+
+  afterEach(async () => {
+    for (const directory of cleanup) {
+      await rm(directory, { force: true, recursive: true })
+    }
+    cleanup.clear()
+  })
+
+  it('launches and stops a configured GTK 4 host automatically during dev', async () => {
+    const root = await createFixture()
+    cleanup.add(root)
+
+    const launchedFile = path.join(root, 'launched.json')
+    const terminatedFile = path.join(root, 'terminated.txt')
+    const server = await createServer(
+      resolveConfig(root, ['bun', path.join(root, 'fake-host.mjs'), launchedFile, terminatedFile]),
+    )
+
+    try {
+      await server.listen()
+      expect(server.environments[NATIVE_GTK4_ENVIRONMENT_NAME]).toBeDefined()
+      expect(
+        typeof (server.environments[NATIVE_GTK4_ENVIRONMENT_NAME] as { dispatchFetch?: unknown })
+          .dispatchFetch,
+      ).toBe('function')
+      await waitFor(() => fileExists(launchedFile))
+      const launched = JSON.parse(await readFile(launchedFile, 'utf8')) as {
+        manifest: {
+          platform: string
+          target: string
+        }
+        manifestUrl: string
+      }
+
+      expect(launched.manifest.target).toBe('gtk4')
+      expect(launched.manifest.platform).toBe('linux')
+      expect(launched.manifestUrl).toContain('/__eclipsa_native__/manifest.json')
+    } finally {
+      await server.close()
+    }
+
+    await waitFor(() => fileExists(terminatedFile))
+  }, 30_000)
+})
diff --git a/packages/native-gtk4/vite.ts b/packages/native-gtk4/vite.ts
new file mode 100644
index 0000000..d441f8c
--- /dev/null
+++ b/packages/native-gtk4/vite.ts
@@ -0,0 +1,119 @@
+import { spawn, type SpawnOptions } from 'node:child_process'
+import { join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import {
+  createNativeFetchableDevEnvironment,
+  type NativeFetchableEnvironmentContext,
+} from '../native/dev-environment.ts'
+import type { NativeTargetAdapter } from '@eclipsa/native/vite'
+import type { ResolvedConfig } from 'vite'
+import { GTK4_DEFAULT_COMPONENT_MAP } from './platform.ts'
+
+export const NATIVE_GTK4_ENVIRONMENT_NAME = 'nativeGtk4'
+const DEFAULT_HOST_STARTUP_TIMEOUT_MS = 30_000
+
+export interface GTK4TargetOptions {
+  command?: readonly [string, ...string[]]
+  cwd?: string
+  env?: NodeJS.ProcessEnv
+  hostPackagePath?: string
+  launch?: boolean
+  startupTimeoutMs?: number
+  stdio?: SpawnOptions['stdio']
+}
+
+interface ResolvedNativeGtk4TargetOptions {
+  command: readonly [string, ...string[]]
+  cwd: string
+  env?: NodeJS.ProcessEnv
+  hasCustomCommand: boolean
+  launch: boolean
+  startupTimeoutMs: number
+  stdio: SpawnOptions['stdio']
+}
+
+const defaultHostPackagePath = fileURLToPath(new URL('./gtk4-rust', import.meta.url))
+
+const resolveNativeGtk4TargetOptions = (
+  config: ResolvedConfig,
+  options: GTK4TargetOptions,
+): ResolvedNativeGtk4TargetOptions => {
+  const hostPackagePath = options.hostPackagePath ?? defaultHostPackagePath
+  return {
+    command: options.command ?? [
+      'cargo',
+      'run',
+      '--manifest-path',
+      join(hostPackagePath, 'Cargo.toml'),
+      '--features',
+      'gtk-ui',
+      '--bin',
+      'eclipsa-native-gtk4',
+    ],
+    cwd: options.cwd ?? config.root,
+    env: options.env,
+    hasCustomCommand: options.command != null,
+    launch: options.launch ?? true,
+    startupTimeoutMs: options.startupTimeoutMs ?? DEFAULT_HOST_STARTUP_TIMEOUT_MS,
+    stdio: options.stdio ?? 'inherit',
+  }
+}
+
+const createNativeGtk4DevEnvironment = (
+  name: string,
+  config: ResolvedConfig,
+  context: NativeFetchableEnvironmentContext,
+  options: GTK4TargetOptions,
+  manifestPath: string,
+) => {
+  const resolved = resolveNativeGtk4TargetOptions(config, options)
+  return createNativeFetchableDevEnvironment(config, context, {
+    createHostProcess({ manifestUrl }) {
+      const [command, ...args] = resolved.command
+      return {
+        child: spawn(command, args, {
+          cwd: resolved.cwd,
+          env: {
+            ...process.env,
+            ...resolved.env,
+            ECLIPSA_NATIVE_MANIFEST: manifestUrl,
+          },
+          stdio: resolved.stdio,
+        }),
+        description: [command, ...args].join(' '),
+      }
+    },
+    launch: resolved.launch,
+    manifestPath,
+    name,
+    shouldLaunch() {
+      return process.platform === 'linux' || resolved.hasCustomCommand
+    },
+    startupTimeoutMs: resolved.startupTimeoutMs,
+  })
+}
+
+export const gtk4 = (options: GTK4TargetOptions = {}): NativeTargetAdapter => ({
+  bindingPackage: '@eclipsa/native-gtk4',
+  createEnvironmentOptions({ manifestPath }) {
+    return {
+      consumer: 'server',
+      dev: {
+        createEnvironment(name, config, context) {
+          return createNativeGtk4DevEnvironment(
+            name,
+            config,
+            context as NativeFetchableEnvironmentContext,
+            options,
+            manifestPath,
+          )
+        },
+      },
+    }
+  },
+  defaultMap: GTK4_DEFAULT_COMPONENT_MAP,
+  environmentName: NATIVE_GTK4_ENVIRONMENT_NAME,
+  name: 'gtk4',
+  platform: 'linux',
+  workspaceFallback: fileURLToPath(new URL('./mod.ts', import.meta.url)),
+})
diff --git a/packages/native-swiftui/macos-swiftui/Package.swift b/packages/native-swiftui/macos-swiftui/Package.swift
new file mode 100644
index 0000000..4a9c37a
--- /dev/null
+++ b/packages/native-swiftui/macos-swiftui/Package.swift
@@ -0,0 +1,51 @@
+// swift-tools-version: 5.10
+import PackageDescription
+
+let package = Package(
+  name: "EclipsaNativeMacOS",
+  platforms: [
+    .macOS(.v14),
+  ],
+  products: [
+    .library(
+      name: "EclipsaNativeHost",
+      targets: ["EclipsaNativeHost"]
+    ),
+    .executable(
+      name: "EclipsaNativeMacOS",
+      targets: ["EclipsaNativeMacOS"]
+    ),
+    .executable(
+      name: "EclipsaNativeSmoke",
+      targets: ["EclipsaNativeSmoke"]
+    ),
+  ],
+  targets: [
+    .target(
+      name: "EclipsaNativeHost",
+      path: "Sources/EclipsaNativeHost",
+      resources: [
+        .process("Resources"),
+      ],
+      linkerSettings: [
+        .linkedFramework("JavaScriptCore"),
+      ]
+    ),
+    .executableTarget(
+      name: "EclipsaNativeMacOS",
+      dependencies: ["EclipsaNativeHost"],
+      path: "Sources/EclipsaNativeMacOS",
+      linkerSettings: [
+        .linkedFramework("JavaScriptCore"),
+      ]
+    ),
+    .executableTarget(
+      name: "EclipsaNativeSmoke",
+      dependencies: ["EclipsaNativeHost"],
+      path: "Sources/EclipsaNativeSmoke",
+      linkerSettings: [
+        .linkedFramework("JavaScriptCore"),
+      ]
+    ),
+  ]
+)
diff --git a/packages/native-swiftui/macos-swiftui/Sources/EclipsaNativeHost/NativeTree.swift b/packages/native-swiftui/macos-swiftui/Sources/EclipsaNativeHost/NativeTree.swift
new file mode 100644
index 0000000..a9fac4c
--- /dev/null
+++ b/packages/native-swiftui/macos-swiftui/Sources/EclipsaNativeHost/NativeTree.swift
@@ -0,0 +1,41 @@
+import Foundation
+
+public struct NativeNode: Codable, Equatable, Identifiable, Sendable {
+  public let id: String
+  public var tag: String
+  public var text: String?
+  public var props: [String: String]
+  public var children: [NativeNode]
+
+  public init(
+    id: String,
+    tag: String,
+    text: String?,
+    props: [String: String],
+    children: [NativeNode],
+  ) {
+    self.id = id
+    self.tag = tag
+    self.text = text
+    self.props = props
+    self.children = children
+  }
+
+  public func stringProp(_ key: String) -> String? {
+    props[key]
+  }
+
+  public func doubleProp(_ key: String) -> Double? {
+    guard let value = props[key] else {
+      return nil
+    }
+    return Double(value)
+  }
+
+  public func boolProp(_ key: String) -> Bool? {
+    guard let value = props[key] else {
+      return nil
+    }
+    return value == "true"
+  }
+}
diff --git a/packages/native-swiftui/macos-swiftui/Sources/EclipsaNativeHost/QuickJSHost.swift b/packages/native-swiftui/macos-swiftui/Sources/EclipsaNativeHost/QuickJSHost.swift
new file mode 100644
index 0000000..044af70
--- /dev/null
+++ b/packages/native-swiftui/macos-swiftui/Sources/EclipsaNativeHost/QuickJSHost.swift
@@ -0,0 +1,689 @@
+import Combine
+import Foundation
+import JavaScriptCore
+import SwiftUI
+
+public protocol QuickJSRuntime {
+  func boot(renderer: SwiftUIRendererBridge) async throws
+  func dispatchEvent(nodeID: String, eventName: String, payload: Any?) async throws
+}
+
+public struct BootstrapScript {
+  public let origin: String
+  public let source: String
+
+  public init(origin: String, source: String) {
+    self.origin = origin
+    self.source = source
+  }
+}
+
+public struct NativeDevManifest {
+  public let entry: String
+  public let hmrURL: String
+  public let rpcURL: String
+
+  public init(entry: String, hmrURL: String, rpcURL: String) {
+    self.entry = entry
+    self.hmrURL = hmrURL
+    self.rpcURL = rpcURL
+  }
+}
+
+public enum NativeApplicationDescriptor {
+  case script(BootstrapScript)
+  case dev(NativeDevManifest)
+}
+
+public protocol BootstrapScriptLoading {
+  func load() throws -> NativeApplicationDescriptor
+}
+
+private struct NativeBundleManifest: Decodable {
+  struct HMRManifest: Decodable {
+    let url: String
+  }
+
+  let bootstrap: String?
+  let entry: String?
+  let hmr: HMRManifest?
+  let mode: String?
+  let rpc: String?
+}
+
+public enum QuickJSHostError: LocalizedError {
+  case missingBootstrapConfiguration
+  case invalidBootstrapManifest(String)
+  case invalidBootstrapScriptPath(String)
+  case javaScriptContextUnavailable
+  case javaScriptException(String)
+  case missingEventHandler(nodeID: String, eventName: String)
+  case missingNativeDevRuntimeResource
+  case nativeDevRPCFailure(String)
+
+  public var errorDescription: String? {
+    switch self {
+    case .missingBootstrapConfiguration:
+      return "Set ECLIPSA_NATIVE_MANIFEST before booting the native host."
+    case .invalidBootstrapManifest(let path):
+      return "Failed to load native bundle manifest at \(path)."
+    case .invalidBootstrapScriptPath(let path):
+      return "Failed to load native bootstrap script at \(path)."
+    case .javaScriptContextUnavailable:
+      return "Failed to create the embedded JavaScript runtime."
+    case .javaScriptException(let message):
+      return message
+    case .missingEventHandler(let nodeID, let eventName):
+      return "No event handler is registered for \(nodeID)#\(eventName)."
+    case .missingNativeDevRuntimeResource:
+      return "The native dev runtime resource is missing."
+    case .nativeDevRPCFailure(let message):
+      return message
+    }
+  }
+}
+
+public struct DefaultBootstrapScriptLoader: BootstrapScriptLoading {
+  public let environment: [String: String]
+  public let fileManager: FileManager
+
+  public init(
+    environment: [String: String] = ProcessInfo.processInfo.environment,
+    fileManager: FileManager = .default,
+  ) {
+    self.environment = environment
+    self.fileManager = fileManager
+  }
+
+  public func load() throws -> NativeApplicationDescriptor {
+    if let manifestLocation = environment["ECLIPSA_NATIVE_MANIFEST"], !manifestLocation.isEmpty {
+      return try loadFromManifest(location: manifestLocation)
+    }
+
+    throw QuickJSHostError.missingBootstrapConfiguration
+  }
+
+  private func loadFromManifest(location: String) throws -> NativeApplicationDescriptor {
+    let manifestURL = try resolveURL(for: location, kind: .invalidBootstrapManifest)
+    let data = try Data(contentsOf: manifestURL)
+    let manifest = try JSONDecoder().decode(NativeBundleManifest.self, from: data)
+
+    if manifest.mode == "dev" {
+      guard
+        let entry = manifest.entry,
+        let rpc = manifest.rpc,
+        let hmrURL = manifest.hmr?.url
+      else {
+        throw QuickJSHostError.invalidBootstrapManifest(location)
+      }
+      return .dev(NativeDevManifest(entry: entry, hmrURL: hmrURL, rpcURL: rpc))
+    }
+
+    guard let bootstrap = manifest.bootstrap else {
+      throw QuickJSHostError.invalidBootstrapManifest(location)
+    }
+    let bootstrapURL = URL(string: bootstrap, relativeTo: manifestURL.deletingLastPathComponent())?
+      .absoluteURL
+    guard let bootstrapURL else {
+      throw QuickJSHostError.invalidBootstrapManifest(location)
+    }
+    return .script(try loadScript(at: bootstrapURL.absoluteString))
+  }
+
+  private func loadScript(at location: String) throws -> BootstrapScript {
+    let url = try resolveURL(for: location, kind: .invalidBootstrapScriptPath)
+    let source = try String(contentsOf: url, encoding: .utf8)
+    return BootstrapScript(origin: url.absoluteString, source: source)
+  }
+
+  private enum FailureKind {
+    case invalidBootstrapManifest
+    case invalidBootstrapScriptPath
+  }
+
+  private func resolveURL(for location: String, kind: FailureKind) throws -> URL {
+    if let remoteURL = URL(string: location), let scheme = remoteURL.scheme, !scheme.isEmpty {
+      return remoteURL
+    }
+
+    let expandedPath = NSString(string: location).expandingTildeInPath
+    guard fileManager.fileExists(atPath: expandedPath) else {
+      switch kind {
+      case .invalidBootstrapManifest:
+        throw QuickJSHostError.invalidBootstrapManifest(expandedPath)
+      case .invalidBootstrapScriptPath:
+        throw QuickJSHostError.invalidBootstrapScriptPath(expandedPath)
+      }
+    }
+    return URL(fileURLWithPath: expandedPath)
+  }
+}
+
+private struct EventHandlerKey: Hashable {
+  let eventName: String
+  let nodeID: String
+}
+
+private final class NativeDevRuntimeSession: NSObject {
+  private let hmrPingInterval: TimeInterval = 20
+  private let manifest: NativeDevManifest
+  private lazy var urlSession: URLSession = {
+    let configuration = URLSessionConfiguration.default
+    configuration.timeoutIntervalForRequest = .greatestFiniteMagnitude
+    configuration.timeoutIntervalForResource = .greatestFiniteMagnitude
+    return URLSession(configuration: configuration)
+  }()
+  private var hmrCallback: JSValue?
+  private var pingTimer: Timer?
+  private var webSocketTask: URLSessionWebSocketTask?
+
+  init(manifest: NativeDevManifest) {
+    self.manifest = manifest
+  }
+
+  deinit {
+    close()
+  }
+
+  func close() {
+    pingTimer?.invalidate()
+    pingTimer = nil
+    webSocketTask?.cancel(with: .goingAway, reason: nil)
+    webSocketTask = nil
+    hmrCallback = nil
+  }
+
+  func invoke(name: String, payloadJSON: String) throws -> String {
+    guard let rpcURL = URL(string: manifest.rpcURL) else {
+      throw QuickJSHostError.nativeDevRPCFailure("Invalid native dev RPC URL: \(manifest.rpcURL)")
+    }
+
+    let payloadData = payloadJSON.data(using: .utf8) ?? Data("[]".utf8)
+    let payloadObject = (try? JSONSerialization.jsonObject(with: payloadData)) ?? []
+    let bodyData = try JSONSerialization.data(withJSONObject: [
+      "name": name,
+      "data": payloadObject,
+    ])
+
+    var request = URLRequest(url: rpcURL)
+    request.httpMethod = "POST"
+    request.httpBody = bodyData
+    request.setValue("application/json; charset=utf-8", forHTTPHeaderField: "Content-Type")
+
+    let responseData = try performSynchronousRequest(request)
+    guard let responseText = String(data: responseData, encoding: .utf8) else {
+      throw QuickJSHostError.nativeDevRPCFailure("Native dev RPC returned non-UTF-8 data.")
+    }
+    return responseText
+  }
+
+  func connectHMR(callback: JSValue) {
+    guard webSocketTask == nil, let url = URL(string: manifest.hmrURL) else {
+      return
+    }
+
+    hmrCallback = callback
+    let task = urlSession.webSocketTask(with: url, protocols: ["vite-hmr"])
+    webSocketTask = task
+    task.resume()
+    startPingLoop()
+    receiveNextHMRMessage()
+  }
+
+  private func performSynchronousRequest(_ request: URLRequest) throws -> Data {
+    let semaphore = DispatchSemaphore(value: 0)
+    var result: Result<Data, Error>?
+
+    urlSession.dataTask(with: request) { data, response, error in
+      defer { semaphore.signal() }
+
+      if let error {
+        result = .failure(error)
+        return
+      }
+
+      guard let httpResponse = response as? HTTPURLResponse, let data else {
+        result = .failure(
+          QuickJSHostError.nativeDevRPCFailure("Native dev RPC returned an invalid response.")
+        )
+        return
+      }
+
+      guard (200..<300).contains(httpResponse.statusCode) else {
+        let message = String(data: data, encoding: .utf8) ?? "HTTP \(httpResponse.statusCode)"
+        result = .failure(QuickJSHostError.nativeDevRPCFailure(message))
+        return
+      }
+
+      result = .success(data)
+    }.resume()
+
+    semaphore.wait()
+    return try result?.get()
+      ?? {
+        throw QuickJSHostError.nativeDevRPCFailure("Native dev RPC completed without a result.")
+      }()
+  }
+
+  private func receiveNextHMRMessage() {
+    webSocketTask?.receive { [weak self] result in
+      guard let self else {
+        return
+      }
+
+      switch result {
+      case .success(.data(let data)):
+        let message = String(data: data, encoding: .utf8) ?? ""
+        Task { @MainActor in
+          self.hmrCallback?.call(withArguments: [message])
+        }
+        self.receiveNextHMRMessage()
+      case .success(.string(let message)):
+        Task { @MainActor in
+          self.hmrCallback?.call(withArguments: [message])
+        }
+        self.receiveNextHMRMessage()
+      case .failure(let error):
+        NSLog("EclipsaNative HMR socket closed: %@", error.localizedDescription)
+        self.pingTimer?.invalidate()
+        self.pingTimer = nil
+        self.webSocketTask = nil
+      @unknown default:
+        self.pingTimer?.invalidate()
+        self.pingTimer = nil
+        self.webSocketTask = nil
+      }
+    }
+  }
+
+  private func startPingLoop() {
+    pingTimer?.invalidate()
+    pingTimer = Timer.scheduledTimer(withTimeInterval: hmrPingInterval, repeats: true) {
+      [weak self] _ in
+      self?.webSocketTask?.sendPing { error in
+        if let error {
+          NSLog("EclipsaNative HMR ping failed: %@", error.localizedDescription)
+        }
+      }
+    }
+  }
+}
+
+public final class JavaScriptCoreRuntime: NSObject, QuickJSRuntime {
+  private let loader: BootstrapScriptLoading
+
+  private var context: JSContext?
+  private var devSession: NativeDevRuntimeSession?
+  private weak var renderer: SwiftUIRendererBridge?
+  private var eventHandlers: [EventHandlerKey: JSValue] = [:]
+
+  public init(loader: BootstrapScriptLoading = DefaultBootstrapScriptLoader()) {
+    self.loader = loader
+  }
+
+  @MainActor
+  public func boot(renderer: SwiftUIRendererBridge) async throws {
+    let descriptor = try loader.load()
+    let context = try makeContext(renderer: renderer)
+
+    self.renderer = renderer
+    self.context = context
+    self.eventHandlers = [:]
+    self.devSession?.close()
+    self.devSession = nil
+
+    switch descriptor {
+    case .script(let bootstrap):
+      try evaluateBootstrapScript(bootstrap, in: context)
+    case .dev(let manifest):
+      try evaluateNativeDevRuntime(manifest, in: context)
+    }
+  }
+
+  @MainActor
+  public func dispatchEvent(nodeID: String, eventName: String, payload: Any?) async throws {
+    guard let context else {
+      throw QuickJSHostError.javaScriptContextUnavailable
+    }
+    let handlerKey = EventHandlerKey(eventName: eventName, nodeID: nodeID)
+    guard let handler = eventHandlers[handlerKey] else {
+      throw QuickJSHostError.missingEventHandler(nodeID: nodeID, eventName: eventName)
+    }
+    let arguments = payload.map { [$0] } ?? []
+    handler.call(withArguments: arguments)
+    if let exception = context.exception?.toString() {
+      throw QuickJSHostError.javaScriptException(exception)
+    }
+  }
+
+  @MainActor
+  private func makeContext(renderer: SwiftUIRendererBridge) throws -> JSContext {
+    guard let context = JSContext() else {
+      throw QuickJSHostError.javaScriptContextUnavailable
+    }
+
+    context.exceptionHandler = { _, exception in
+      if let exception {
+        NSLog("EclipsaNative JS exception: %@", exception.toString())
+      }
+    }
+
+    installConsole(in: context)
+    installNativeBridge(in: context, renderer: renderer)
+    return context
+  }
+
+  @MainActor
+  private func evaluateBootstrapScript(_ bootstrap: BootstrapScript, in context: JSContext) throws {
+    let sourceURL = URL(string: bootstrap.origin) ?? URL(fileURLWithPath: bootstrap.origin)
+    if context.evaluateScript(bootstrap.source, withSourceURL: sourceURL) == nil,
+      let exception = context.exception?.toString()
+    {
+      throw QuickJSHostError.javaScriptException(exception)
+    }
+
+    let bootFunction = context.objectForKeyedSubscript("__eclipsaBoot")
+    if let bootFunction, !bootFunction.isUndefined, !bootFunction.isNull {
+      bootFunction.call(withArguments: [])
+      if let exception = context.exception?.toString() {
+        throw QuickJSHostError.javaScriptException(exception)
+      }
+    }
+  }
+
+  @MainActor
+  private func evaluateNativeDevRuntime(_ manifest: NativeDevManifest, in context: JSContext) throws {
+    guard let runtimeURL = Bundle.module.url(forResource: "vite-runner", withExtension: "js") else {
+      throw QuickJSHostError.missingNativeDevRuntimeResource
+    }
+
+    let session = NativeDevRuntimeSession(manifest: manifest)
+    self.devSession = session
+    installNativeRuntimeBridge(in: context, manifest: manifest, session: session)
+
+    let source = try String(contentsOf: runtimeURL, encoding: .utf8)
+    if context.evaluateScript(source, withSourceURL: runtimeURL) == nil,
+      let exception = context.exception?.toString()
+    {
+      throw QuickJSHostError.javaScriptException(exception)
+    }
+
+    let bootFunction = context.objectForKeyedSubscript("__eclipsaBoot")
+    if let bootFunction, !bootFunction.isUndefined, !bootFunction.isNull {
+      bootFunction.call(withArguments: [])
+      if let exception = context.exception?.toString() {
+        throw QuickJSHostError.javaScriptException(exception)
+      }
+    }
+  }
+
+  private func installConsole(in context: JSContext) {
+    let console = JSValue(newObjectIn: context)
+
+    let logBlock: @convention(block) (JSValue) -> Void = { value in
+      NSLog("EclipsaNative JS: %@", value.toString())
+    }
+    console?.setObject(unsafeBitCast(logBlock, to: AnyObject.self), forKeyedSubscript: "log" as NSString)
+
+    let errorBlock: @convention(block) (JSValue) -> Void = { value in
+      NSLog("EclipsaNative JS error: %@", value.toString())
+    }
+    console?.setObject(
+      unsafeBitCast(errorBlock, to: AnyObject.self),
+      forKeyedSubscript: "error" as NSString
+    )
+
+    context.setObject(console, forKeyedSubscript: "console" as NSString)
+  }
+
+  @MainActor
+  private func installNativeBridge(in context: JSContext, renderer: SwiftUIRendererBridge) {
+    let nativeRoot = JSValue(newObjectIn: context)
+    let rendererObject = JSValue(newObjectIn: context)
+    let eventsObject = JSValue(newObjectIn: context)
+
+    let createElementBlock: @convention(block) (String) -> String = { type in
+      renderer.createElement(type: type)
+    }
+    rendererObject?.setObject(
+      unsafeBitCast(createElementBlock, to: AnyObject.self),
+      forKeyedSubscript: "createElement" as NSString
+    )
+
+    let createTextBlock: @convention(block) (String) -> String = { value in
+      renderer.createText(value: value)
+    }
+    rendererObject?.setObject(
+      unsafeBitCast(createTextBlock, to: AnyObject.self),
+      forKeyedSubscript: "createText" as NSString
+    )
+
+    let insertBlock: @convention(block) (String, String, JSValue) -> Void = { parentID, childID, beforeID in
+      renderer.insert(parentID: parentID, childID: childID, beforeID: Self.optionalString(from: beforeID))
+    }
+    rendererObject?.setObject(
+      unsafeBitCast(insertBlock, to: AnyObject.self),
+      forKeyedSubscript: "insert" as NSString
+    )
+
+    let removeBlock: @convention(block) (String, String) -> Void = { parentID, childID in
+      renderer.remove(parentID: parentID, childID: childID)
+    }
+    rendererObject?.setObject(
+      unsafeBitCast(removeBlock, to: AnyObject.self),
+      forKeyedSubscript: "remove" as NSString
+    )
+
+    let reorderBlock: @convention(block) (String, String, JSValue) -> Void = { parentID, childID, beforeID in
+      renderer.reorder(parentID: parentID, childID: childID, beforeID: Self.optionalString(from: beforeID))
+    }
+    rendererObject?.setObject(
+      unsafeBitCast(reorderBlock, to: AnyObject.self),
+      forKeyedSubscript: "reorder" as NSString
+    )
+
+    let setPropBlock: @convention(block) (String, String, JSValue) -> Void = { nodeID, key, value in
+      if let stringValue = Self.serializedPropValue(from: value) {
+        renderer.setProp(nodeID: nodeID, key: key, value: stringValue)
+      } else {
+        renderer.removeProp(nodeID: nodeID, key: key)
+      }
+    }
+    rendererObject?.setObject(
+      unsafeBitCast(setPropBlock, to: AnyObject.self),
+      forKeyedSubscript: "setProp" as NSString
+    )
+
+    let removePropBlock: @convention(block) (String, String) -> Void = { nodeID, key in
+      renderer.removeProp(nodeID: nodeID, key: key)
+    }
+    rendererObject?.setObject(
+      unsafeBitCast(removePropBlock, to: AnyObject.self),
+      forKeyedSubscript: "removeProp" as NSString
+    )
+
+    let setTextBlock: @convention(block) (String, String) -> Void = { nodeID, value in
+      renderer.setText(nodeID: nodeID, value: value)
+    }
+    rendererObject?.setObject(
+      unsafeBitCast(setTextBlock, to: AnyObject.self),
+      forKeyedSubscript: "setText" as NSString
+    )
+
+    let publishBlock: @convention(block) (JSValue) -> Void = { rootID in
+      renderer.publish(rootID: Self.optionalString(from: rootID))
+    }
+    rendererObject?.setObject(
+      unsafeBitCast(publishBlock, to: AnyObject.self),
+      forKeyedSubscript: "publish" as NSString
+    )
+
+    let onEventBlock: @convention(block) (String, String, JSValue) -> Void = { [weak self] nodeID, eventName, handler in
+      guard let self else {
+        return
+      }
+      let key = EventHandlerKey(eventName: eventName, nodeID: nodeID)
+      self.eventHandlers[key] = handler
+    }
+    eventsObject?.setObject(unsafeBitCast(onEventBlock, to: AnyObject.self), forKeyedSubscript: "on" as NSString)
+
+    nativeRoot?.setObject(rendererObject, forKeyedSubscript: "renderer" as NSString)
+    nativeRoot?.setObject(eventsObject, forKeyedSubscript: "events" as NSString)
+    context.setObject(nativeRoot, forKeyedSubscript: "__eclipsaNative" as NSString)
+  }
+
+  @MainActor
+  private func installNativeRuntimeBridge(
+    in context: JSContext,
+    manifest: NativeDevManifest,
+    session: NativeDevRuntimeSession,
+  ) {
+    context.setObject(
+      [
+        "entry": manifest.entry,
+        "hmr": [
+          "url": manifest.hmrURL,
+        ],
+        "rpc": manifest.rpcURL,
+      ],
+      forKeyedSubscript: "__eclipsaNativeDevManifest" as NSString
+    )
+
+    let runtimeObject = JSValue(newObjectIn: context)
+
+    let invokeBlock: @convention(block) (String, String) -> String = { name, payloadJSON in
+      do {
+        return try session.invoke(name: name, payloadJSON: payloadJSON)
+      } catch {
+        return "{\"error\":{\"message\":\(String(reflecting: error.localizedDescription))}}"
+      }
+    }
+    runtimeObject?.setObject(
+      unsafeBitCast(invokeBlock, to: AnyObject.self),
+      forKeyedSubscript: "invoke" as NSString
+    )
+
+    let connectHMRBlock: @convention(block) (JSValue) -> Void = { callback in
+      session.connectHMR(callback: callback)
+    }
+    runtimeObject?.setObject(
+      unsafeBitCast(connectHMRBlock, to: AnyObject.self),
+      forKeyedSubscript: "connectHMR" as NSString
+    )
+
+    context.setObject(runtimeObject, forKeyedSubscript: "__eclipsaNativeRuntime" as NSString)
+  }
+
+  private static func optionalString(from value: JSValue?) -> String? {
+    guard let value, !value.isUndefined, !value.isNull else {
+      return nil
+    }
+    return value.toString()
+  }
+
+  private static func serializedPropValue(from value: JSValue) -> String? {
+    if value.isUndefined || value.isNull {
+      return nil
+    }
+    if value.isBoolean {
+      return value.toBool() ? "true" : "false"
+    }
+    if value.isString {
+      return value.toString()
+    }
+    if value.isNumber {
+      return value.toNumber().stringValue
+    }
+    if let object = value.toObject() {
+      if JSONSerialization.isValidJSONObject(object),
+        let data = try? JSONSerialization.data(withJSONObject: object),
+        let json = String(data: data, encoding: .utf8)
+      {
+        return json
+      }
+      return String(describing: object)
+    }
+    return value.toString()
+  }
+}
+
+@MainActor
+public final class NativeTreeStore: ObservableObject {
+  @Published public var root: NativeNode?
+
+  public init() {}
+}
+
+@MainActor
+public final class EclipsaHostController: ObservableObject {
+  @Published public private(set) var root: NativeNode?
+
+  private let renderer: SwiftUIRendererBridge
+  private let runtime: QuickJSRuntime
+  private let store = NativeTreeStore()
+  private var rootSubscription: AnyCancellable?
+  private var booted = false
+
+  public init(runtime: QuickJSRuntime = JavaScriptCoreRuntime()) {
+    self.runtime = runtime
+    self.renderer = SwiftUIRendererBridge()
+    self.renderer.store = store
+    self.rootSubscription = store.$root.sink { [weak self] value in
+      self?.root = value
+    }
+  }
+
+  public func bootIfNeeded() async {
+    guard !booted else {
+      return
+    }
+    booted = true
+    do {
+      try await runtime.boot(renderer: renderer)
+    } catch {
+      renderFallback(error: error.localizedDescription)
+      return
+    }
+
+    if store.root == nil {
+      renderFallback(error: "Native bootstrap script did not publish a root node.")
+    }
+  }
+
+  public func dispatchEvent(nodeID: String, eventName: String, payload: Any? = nil) {
+    Task { @MainActor in
+      try? await dispatchEventNow(nodeID: nodeID, eventName: eventName, payload: payload)
+    }
+  }
+
+  public func dispatchEventNow(nodeID: String, eventName: String, payload: Any? = nil) async throws {
+    try await runtime.dispatchEvent(nodeID: nodeID, eventName: eventName, payload: payload)
+  }
+
+  public func updateString(nodeID: String, key: String, value: String) {
+    renderer.setProp(nodeID: nodeID, key: key, value: value)
+    renderer.publish()
+  }
+
+  public func updateBool(nodeID: String, key: String, value: Bool) {
+    renderer.setProp(nodeID: nodeID, key: key, value: value ? "true" : "false")
+    renderer.publish()
+  }
+
+  private func renderFallback(error: String?) {
+    let root = renderer.createElement(type: "swiftui:vstack")
+    let title = renderer.createElement(type: "swiftui:text")
+    renderer.setProp(nodeID: title, key: "value", value: "Eclipsa Native SwiftUI")
+    renderer.insert(parentID: root, childID: title, beforeID: nil)
+
+    let body = renderer.createElement(type: "swiftui:text")
+    renderer.setProp(
+      nodeID: body,
+      key: "value",
+      value: error ?? "The embedded JavaScript runtime failed before rendering."
+    )
+    renderer.insert(parentID: root, childID: body, beforeID: nil)
+    renderer.rootNodeID = root
+    renderer.publish()
+  }
+}
diff --git a/packages/native-swiftui/macos-swiftui/Sources/EclipsaNativeHost/RendererBridge.swift b/packages/native-swiftui/macos-swiftui/Sources/EclipsaNativeHost/RendererBridge.swift
new file mode 100644
index 0000000..f209b95
--- /dev/null
+++ b/packages/native-swiftui/macos-swiftui/Sources/EclipsaNativeHost/RendererBridge.swift
@@ -0,0 +1,111 @@
+import Foundation
+
+private struct RendererRecord {
+  var childIDs: [String]
+  var props: [String: String]
+  var tag: String
+  var text: String?
+}
+
+@MainActor
+public final class SwiftUIRendererBridge {
+  public weak var store: NativeTreeStore?
+
+  public var rootNodeID: String?
+
+  private var nextID = 0
+  private var records: [String: RendererRecord] = [:]
+
+  public init() {}
+
+  public func createElement(type: String) -> String {
+    let nodeID = allocateID()
+    records[nodeID] = RendererRecord(childIDs: [], props: [:], tag: type, text: nil)
+    return nodeID
+  }
+
+  public func createText(value: String) -> String {
+    let nodeID = allocateID()
+    records[nodeID] = RendererRecord(childIDs: [], props: [:], tag: "swiftui:text", text: value)
+    return nodeID
+  }
+
+  public func insert(parentID: String, childID: String, beforeID: String?) {
+    guard var parent = records[parentID] else {
+      return
+    }
+    parent.childIDs.removeAll { $0 == childID }
+    if let beforeID, let index = parent.childIDs.firstIndex(of: beforeID) {
+      parent.childIDs.insert(childID, at: index)
+    } else {
+      parent.childIDs.append(childID)
+    }
+    records[parentID] = parent
+  }
+
+  public func remove(parentID: String, childID: String) {
+    guard var parent = records[parentID] else {
+      return
+    }
+    parent.childIDs.removeAll { $0 == childID }
+    records[parentID] = parent
+    records.removeValue(forKey: childID)
+  }
+
+  public func reorder(parentID: String, childID: String, beforeID: String?) {
+    insert(parentID: parentID, childID: childID, beforeID: beforeID)
+  }
+
+  public func setProp(nodeID: String, key: String, value: String) {
+    guard var record = records[nodeID] else {
+      return
+    }
+    record.props[key] = value
+    records[nodeID] = record
+  }
+
+  public func removeProp(nodeID: String, key: String) {
+    guard var record = records[nodeID] else {
+      return
+    }
+    record.props.removeValue(forKey: key)
+    records[nodeID] = record
+  }
+
+  public func setText(nodeID: String, value: String) {
+    guard var record = records[nodeID] else {
+      return
+    }
+    record.text = value
+    records[nodeID] = record
+  }
+
+  public func publish(rootID: String? = nil) {
+    if let rootID {
+      rootNodeID = rootID
+    }
+    guard let rootNodeID else {
+      store?.root = nil
+      return
+    }
+    store?.root = materializeTree(nodeID: rootNodeID)
+  }
+
+  private func allocateID() -> String {
+    nextID += 1
+    return "native-node-\(nextID)"
+  }
+
+  private func materializeTree(nodeID: String) -> NativeNode? {
+    guard let record = records[nodeID] else {
+      return nil
+    }
+    return NativeNode(
+      id: nodeID,
+      tag: record.tag,
+      text: record.text,
+      props: record.props,
+      children: record.childIDs.compactMap(materializeTree)
+    )
+  }
+}
diff --git a/packages/native-swiftui/macos-swiftui/Sources/EclipsaNativeHost/Resources/vite-runner.js b/packages/native-swiftui/macos-swiftui/Sources/EclipsaNativeHost/Resources/vite-runner.js
new file mode 100644
index 0000000..f824af2
--- /dev/null
+++ b/packages/native-swiftui/macos-swiftui/Sources/EclipsaNativeHost/Resources/vite-runner.js
@@ -0,0 +1,222 @@
+const SSR_EXPORTS = '__vite_ssr_exports__'
+const SSR_IMPORT_META = '__vite_ssr_import_meta__'
+const SSR_IMPORT = '__vite_ssr_import__'
+const SSR_DYNAMIC_IMPORT = '__vite_ssr_dynamic_import__'
+const SSR_EXPORT_ALL = '__vite_ssr_exportAll__'
+const SSR_EXPORT_NAME = '__vite_ssr_exportName__'
+const VIRTUAL_NATIVE_DEV_CLIENT = 'virtual:eclipsa-native/dev-client'
+
+const globalState = globalThis
+const moduleCache = new Map()
+
+const runtimeManifest = globalState.__eclipsaNativeDevManifest
+const runtimeBridge = globalState.__eclipsaNativeRuntime
+
+const rewriteRunnerCode = (code) =>
+  code
+    .replaceAll('await __vite_ssr_import__(', '__vite_ssr_import__(')
+    .replaceAll('await __vite_ssr_dynamic_import__(', '__vite_ssr_dynamic_import__(')
+
+const exportAll = (exports, sourceModule) => {
+  if (!sourceModule || exports === sourceModule) {
+    return
+  }
+  for (const key of Object.keys(sourceModule)) {
+    if (key === 'default' || key === '__esModule' || key in exports) {
+      continue
+    }
+    Object.defineProperty(exports, key, {
+      configurable: true,
+      enumerable: true,
+      get: () => sourceModule[key],
+    })
+  }
+}
+
+const exportName = (exports, name, getter) => {
+  Object.defineProperty(exports, name, {
+    configurable: true,
+    enumerable: true,
+    get: getter,
+  })
+}
+
+const invokeRuntime = (name, data) => {
+  const response = JSON.parse(runtimeBridge.invoke(name, JSON.stringify(data)))
+  if (response?.error?.message) {
+    throw new Error(response.error.message)
+  }
+  return response.result
+}
+
+const createModuleRecord = () => ({
+  aliases: new Set(),
+  evaluated: false,
+  evaluating: false,
+  exports: undefined,
+  meta: null,
+})
+
+const setModuleRecord = (record, ...keys) => {
+  for (const key of keys) {
+    if (typeof key === 'string' && key.length > 0) {
+      moduleCache.set(key, record)
+      record.aliases.add(key)
+    }
+  }
+}
+
+const removeModuleRecord = (record) => {
+  for (const key of record.aliases) {
+    moduleCache.delete(key)
+  }
+  record.aliases.clear()
+}
+
+const findModuleRecord = (key) => {
+  const cachedRecord = moduleCache.get(key)
+  if (cachedRecord) {
+    return cachedRecord
+  }
+  for (const record of moduleCache.values()) {
+    if (record.meta?.url === key || record.meta?.id === key || record.meta?.file === key) {
+      return record
+    }
+  }
+  return null
+}
+
+const invalidateModule = (key) => {
+  const record = findModuleRecord(key)
+  if (!record) {
+    return
+  }
+  removeModuleRecord(record)
+}
+
+const resolveModuleFilename = (moduleInfo, url) => moduleInfo?.file ?? moduleInfo?.id ?? url
+
+const resolveModuleDirname = (filename) => {
+  const lastSlash = filename.lastIndexOf('/')
+  return lastSlash >= 0 ? filename.slice(0, lastSlash) : filename
+}
+
+const createImportMeta = (moduleInfo, url) => {
+  const canonicalUrl = moduleInfo?.url ?? url
+  const filename = resolveModuleFilename(moduleInfo, canonicalUrl)
+  return {
+    env: {
+      BASE_URL: '/',
+      DEV: true,
+      MODE: 'development',
+      PROD: false,
+      SSR: true,
+    },
+    filename,
+    dirname: resolveModuleDirname(filename),
+    hot: globalState.__eclipsaNativeCreateHotContext?.(canonicalUrl),
+    resolve(specifier) {
+      return specifier
+    },
+    url: canonicalUrl,
+  }
+}
+
+const importModule = (url, importer) => {
+  const existingRecord = moduleCache.get(url)
+  const moduleInfo = invokeRuntime('fetchModule', [
+    url,
+    importer ?? null,
+    {
+      cached: Boolean(existingRecord?.meta),
+      startOffset: 0,
+    },
+  ])
+
+  if (moduleInfo?.cache && existingRecord?.evaluated) {
+    return existingRecord.exports
+  }
+  if (moduleInfo?.externalize) {
+    throw new Error(`Unsupported external native module: ${moduleInfo.externalize}`)
+  }
+
+  const record = existingRecord ?? createModuleRecord()
+  record.meta = moduleInfo
+  setModuleRecord(record, url, moduleInfo?.id, moduleInfo?.url, moduleInfo?.file)
+  if (!moduleInfo?.cache) {
+    record.evaluated = false
+    record.exports = undefined
+  }
+
+  if (record.evaluated || record.evaluating) {
+    return record.exports
+  }
+
+  if (typeof moduleInfo?.code !== 'string') {
+    throw new Error(`Missing transformed code for native module ${url}`)
+  }
+
+  const canonicalUrl = moduleInfo?.url ?? url
+  const run = new Function(
+    SSR_EXPORTS,
+    SSR_IMPORT_META,
+    SSR_IMPORT,
+    SSR_DYNAMIC_IMPORT,
+    SSR_EXPORT_ALL,
+    SSR_EXPORT_NAME,
+    `"use strict";${rewriteRunnerCode(moduleInfo.code)}`,
+  )
+
+  record.evaluating = true
+  record.exports = Object.create(null)
+  Object.defineProperty(record.exports, Symbol.toStringTag, {
+    configurable: false,
+    enumerable: false,
+    value: 'Module',
+  })
+
+  try {
+    run(
+      record.exports,
+      createImportMeta(moduleInfo, url),
+      (dependency) => importModule(String(dependency), canonicalUrl),
+      (dependency) => importModule(String(dependency), canonicalUrl),
+      (sourceModule) => exportAll(record.exports, sourceModule),
+      (name, getter) => exportName(record.exports, name, getter),
+    )
+    record.evaluated = true
+    return record.exports
+  } finally {
+    record.evaluating = false
+  }
+}
+
+globalState.__eclipsaNativeModuleRunner = {
+  clearCache() {
+    moduleCache.clear()
+  },
+  importModule,
+  invalidateModules(urls) {
+    for (const url of urls) {
+      invalidateModule(String(url))
+    }
+  },
+}
+
+globalState.__eclipsaBoot = () => {
+  if (!runtimeManifest?.entry) {
+    throw new Error('Missing native dev manifest entry.')
+  }
+
+  importModule(VIRTUAL_NATIVE_DEV_CLIENT, null)
+  runtimeBridge.connectHMR((message) => {
+    const payload = JSON.parse(String(message ?? '{}'))
+    const handlePayload = globalState.__eclipsaNativeHandleHmrPayload
+    if (typeof handlePayload !== 'function') {
+      return
+    }
+    Promise.resolve(handlePayload(payload)).catch((error) => {
+      console.error(error)
+    })
+  })
+}
diff --git a/packages/native-swiftui/macos-swiftui/Sources/EclipsaNativeMacOS/EclipsaNativeMacOSApp.swift b/packages/native-swiftui/macos-swiftui/Sources/EclipsaNativeMacOS/EclipsaNativeMacOSApp.swift
new file mode 100644
index 0000000..44593f1
--- /dev/null
+++ b/packages/native-swiftui/macos-swiftui/Sources/EclipsaNativeMacOS/EclipsaNativeMacOSApp.swift
@@ -0,0 +1,121 @@
+import EclipsaNativeHost
+import SwiftUI
+
+@main
+struct EclipsaNativeMacOSApp: App {
+  @StateObject private var host = EclipsaHostController()
+
+  var body: some Scene {
+    WindowGroup {
+      NativeRootView(node: host.root)
+        .environmentObject(host)
+        .task {
+          await host.bootIfNeeded()
+        }
+        .frame(minWidth: 480, minHeight: 320)
+    }
+  }
+}
+
+struct NativeRootView: View {
+  let node: NativeNode?
+
+  var body: some View {
+    Group {
+      if let node {
+        NativeNodeView(node: node)
+      } else {
+        ProgressView("Booting Eclipsa native runtime…")
+      }
+    }
+  }
+}
+
+struct NativeNodeView: View {
+  @EnvironmentObject private var host: EclipsaHostController
+
+  let node: NativeNode
+
+  var body: some View {
+    switch node.tag {
+    case "swiftui:window-group", "swiftui:vstack":
+      VStack(alignment: .leading, spacing: node.doubleProp("spacing") ?? 12) {
+        childViews
+      }
+    case "swiftui:hstack":
+      HStack(alignment: .center, spacing: node.doubleProp("spacing") ?? 12) {
+        childViews
+      }
+    case "swiftui:text":
+      Text(node.stringProp("verbatim") ?? node.stringProp("value") ?? node.text ?? "")
+    case "swiftui:button":
+      Button(role: buttonRole) {
+        host.dispatchEvent(nodeID: node.id, eventName: "press")
+      } label: {
+        if node.children.isEmpty {
+          Text(node.stringProp("title") ?? "Button")
+        } else {
+          childViews
+        }
+      }
+    case "swiftui:image":
+      Image(systemName: node.stringProp("systemName") ?? "circle")
+    case "swiftui:text-field":
+      TextField(
+        node.stringProp("placeholder") ?? "",
+        text: Binding(
+          get: { node.stringProp("value") ?? "" },
+          set: { newValue in
+            host.updateString(nodeID: node.id, key: "value", value: newValue)
+            host.dispatchEvent(nodeID: node.id, eventName: "input", payload: newValue)
+          }
+        )
+      )
+    case "swiftui:toggle":
+      Toggle(
+        isOn: Binding(
+          get: { node.boolProp("value") ?? false },
+          set: { newValue in
+            host.updateBool(nodeID: node.id, key: "value", value: newValue)
+            host.dispatchEvent(nodeID: node.id, eventName: "toggle", payload: newValue)
+          }
+        )
+      ) {
+        if node.children.isEmpty {
+          Text(node.stringProp("title") ?? "Toggle")
+        } else {
+          childViews
+        }
+      }
+    case "swiftui:list":
+      List {
+        childViews
+      }
+    case "swiftui:spacer":
+      Spacer()
+    default:
+      VStack(alignment: .leading, spacing: 8) {
+        Text(node.tag).font(.headline)
+        childViews
+      }
+    }
+  }
+
+  @ViewBuilder
+  private var childViews: some View {
+    ForEach(node.children) { child in
+      NativeNodeView(node: child)
+    }
+  }
+
+  private var buttonRole: ButtonRole? {
+    switch node.stringProp("role") {
+    case "cancel":
+      return .cancel
+    case "destructive":
+      return .destructive
+    default:
+      return nil
+    }
+  }
+}
diff --git a/packages/native-swiftui/macos-swiftui/Sources/EclipsaNativeSmoke/main.swift b/packages/native-swiftui/macos-swiftui/Sources/EclipsaNativeSmoke/main.swift
new file mode 100644
index 0000000..40cc303
--- /dev/null
+++ b/packages/native-swiftui/macos-swiftui/Sources/EclipsaNativeSmoke/main.swift
@@ -0,0 +1,109 @@
+import EclipsaNativeHost
+import Foundation
+
+private struct SmokeOutput: Codable {
+  let finalTree: NativeNode
+  let initialTree: NativeNode
+}
+
+private enum SmokeSignals {
+  static func signalInitialTreeReady() throws {
+    guard
+      let path = ProcessInfo.processInfo.environment["ECLIPSA_NATIVE_SMOKE_READY_FILE"],
+      !path.isEmpty
+    else {
+      return
+    }
+
+    try Data("ready\n".utf8).write(to: URL(fileURLWithPath: path), options: .atomic)
+  }
+}
+
+@main
+struct EclipsaNativeSmoke {
+  static func main() async {
+    do {
+      let output = try await runSmoke()
+      let encoder = JSONEncoder()
+      encoder.outputFormatting = [.prettyPrinted, .sortedKeys]
+      let data = try encoder.encode(output)
+      FileHandle.standardOutput.write(data)
+      FileHandle.standardOutput.write(Data("\n".utf8))
+    } catch {
+      FileHandle.standardError.write(Data("\(error.localizedDescription)\n".utf8))
+      Foundation.exit(1)
+    }
+  }
+
+@MainActor
+  private static func runSmoke() async throws -> SmokeOutput {
+    if let waitSeconds = ProcessInfo.processInfo.environment["ECLIPSA_NATIVE_SMOKE_WAIT_FOR_SECONDS"],
+      let seconds = Double(waitSeconds)
+    {
+      return try await runHMRSmoke(waitSeconds: seconds)
+    }
+
+    let host = EclipsaHostController(runtime: JavaScriptCoreRuntime())
+    await host.bootIfNeeded()
+
+    let initialTree = try require(host.root, message: "Boot script did not publish a root tree.")
+    let button = try require(
+      findNode(in: initialTree) { $0.tag == "swiftui:button" },
+      message: "Missing button node."
+    )
+    let input = try require(
+      findNode(in: initialTree) { $0.tag == "swiftui:text-field" },
+      message: "Missing text field node."
+    )
+    let toggle = try require(
+      findNode(in: initialTree) { $0.tag == "swiftui:toggle" },
+      message: "Missing toggle node."
+    )
+
+    try await host.dispatchEventNow(nodeID: button.id, eventName: "press", payload: nil)
+    try await host.dispatchEventNow(nodeID: input.id, eventName: "input", payload: "macOS")
+    try await host.dispatchEventNow(nodeID: toggle.id, eventName: "toggle", payload: false)
+
+    let finalTree = try require(host.root, message: "Runtime events did not publish an updated tree.")
+    return SmokeOutput(finalTree: finalTree, initialTree: initialTree)
+  }
+
+  @MainActor
+  private static func runHMRSmoke(waitSeconds: Double) async throws -> SmokeOutput {
+    let host = EclipsaHostController(runtime: JavaScriptCoreRuntime())
+    await host.bootIfNeeded()
+
+    let initialTree = try require(host.root, message: "Boot script did not publish a root tree.")
+    try SmokeSignals.signalInitialTreeReady()
+    try await Task.sleep(nanoseconds: UInt64(waitSeconds * 1_000_000_000))
+    let finalTree = try require(host.root, message: "HMR did not publish an updated root tree.")
+    return SmokeOutput(finalTree: finalTree, initialTree: initialTree)
+  }
+}
+
+private func findNode(in root: NativeNode, where predicate: (NativeNode) -> Bool) -> NativeNode? {
+  if predicate(root) {
+    return root
+  }
+  for child in root.children {
+    if let match = findNode(in: child, where: predicate) {
+      return match
+    }
+  }
+  return nil
+}
+
+private func require<T>(_ value: T?, message: String) throws -> T {
+  guard let value else {
+    throw SmokeError(message: message)
+  }
+  return value
+}
+
+private struct SmokeError: LocalizedError {
+  let message: String
+
+  var errorDescription: String? {
+    message
+  }
+}
diff --git a/packages/native-swiftui/mod.test.ts b/packages/native-swiftui/mod.test.ts
new file mode 100644
index 0000000..a846064
--- /dev/null
+++ b/packages/native-swiftui/mod.test.ts
@@ -0,0 +1,22 @@
+import { createElement } from '@eclipsa/native-core'
+import { resolveNativeElementType } from '@eclipsa/native'
+import { SWIFTUI_DEFAULT_TAG_MAP, Text, VStack } from './mod.ts'
+import { describe, expect, it } from 'vitest'
+
+describe('@eclipsa/native-swiftui', () => {
+  it('exports the default SwiftUI tag map', () => {
+    expect(SWIFTUI_DEFAULT_TAG_MAP.windowGroup).toBe('swiftui:window-group')
+    expect(SWIFTUI_DEFAULT_TAG_MAP.vstack).toBe('swiftui:vstack')
+  })
+
+  it('wraps primitives as native elements using the SwiftUI tags', () => {
+    const element = createElement(resolveNativeElementType(VStack), {
+      children: createElement(resolveNativeElementType(Text), { value: 'Hello' }),
+      spacing: 12,
+    })
+
+    expect(element.type).toBe('swiftui:vstack')
+    expect(element.props.spacing).toBe(12)
+    expect((element.props.children as { type: string }).type).toBe('swiftui:text')
+  })
+})
diff --git a/packages/native-swiftui/mod.ts b/packages/native-swiftui/mod.ts
new file mode 100644
index 0000000..93f8b98
--- /dev/null
+++ b/packages/native-swiftui/mod.ts
@@ -0,0 +1,28 @@
+import { defineNativeComponent } from '@eclipsa/native'
+import type { DefinedNativeComponent } from '@eclipsa/native'
+import type { SwiftUI } from './typings.ts'
+import { SWIFTUI_DEFAULT_TAG_MAP } from './platform.ts'
+
+export type { Foundation, SwiftUI } from './typings.ts'
+export { SWIFTUI_DEFAULT_TAG_MAP } from './platform.ts'
+
+export const WindowGroup: DefinedNativeComponent<SwiftUI.SceneProps> =
+  defineNativeComponent<SwiftUI.SceneProps>(SWIFTUI_DEFAULT_TAG_MAP.windowGroup)
+export const VStack: DefinedNativeComponent<SwiftUI.StackProps> =
+  defineNativeComponent<SwiftUI.StackProps>(SWIFTUI_DEFAULT_TAG_MAP.vstack)
+export const HStack: DefinedNativeComponent<SwiftUI.StackProps> =
+  defineNativeComponent<SwiftUI.StackProps>(SWIFTUI_DEFAULT_TAG_MAP.hstack)
+export const Text: DefinedNativeComponent<SwiftUI.TextProps> =
+  defineNativeComponent<SwiftUI.TextProps>(SWIFTUI_DEFAULT_TAG_MAP.text)
+export const Button: DefinedNativeComponent<SwiftUI.ButtonProps> =
+  defineNativeComponent<SwiftUI.ButtonProps>(SWIFTUI_DEFAULT_TAG_MAP.button)
+export const Spacer: DefinedNativeComponent<SwiftUI.ViewProps> =
+  defineNativeComponent<SwiftUI.ViewProps>(SWIFTUI_DEFAULT_TAG_MAP.spacer)
+export const Image: DefinedNativeComponent<SwiftUI.ImageProps> =
+  defineNativeComponent<SwiftUI.ImageProps>(SWIFTUI_DEFAULT_TAG_MAP.image)
+export const TextField: DefinedNativeComponent<SwiftUI.TextFieldProps> =
+  defineNativeComponent<SwiftUI.TextFieldProps>(SWIFTUI_DEFAULT_TAG_MAP.textField)
+export const Toggle: DefinedNativeComponent<SwiftUI.ToggleProps> =
+  defineNativeComponent<SwiftUI.ToggleProps>(SWIFTUI_DEFAULT_TAG_MAP.toggle)
+export const List: DefinedNativeComponent<SwiftUI.ListProps> =
+  defineNativeComponent<SwiftUI.ListProps>(SWIFTUI_DEFAULT_TAG_MAP.list)
diff --git a/packages/native-swiftui/package.json b/packages/native-swiftui/package.json
new file mode 100644
index 0000000..d57ff9b
--- /dev/null
+++ b/packages/native-swiftui/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "@eclipsa/native-swiftui",
+  "version": "0.0.0",
+  "homepage": "https://github.com/pnsk-lab/eclipsa",
+  "bugs": {
+    "url": "https://github.com/pnsk-lab/eclipsa/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pnsk-lab/eclipsa.git",
+    "directory": "packages/native-swiftui"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./mod.ts",
+      "import": "./mod.ts"
+    },
+    "./vite": {
+      "types": "./vite.ts",
+      "import": "./vite.ts"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "types": "./mod.d.mts",
+        "import": "./mod.mjs"
+      },
+      "./vite": {
+        "types": "./vite.d.mts",
+        "import": "./vite.mjs"
+      }
+    }
+  },
+  "scripts": {
+    "build": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
+    "host:app": "swift run --package-path ./macos-swiftui EclipsaNativeMacOS",
+    "host:build": "swift build --package-path ./macos-swiftui",
+    "host:smoke": "swift run --quiet --package-path ./macos-swiftui EclipsaNativeSmoke",
+    "pack": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
+    "test": "vp test --run",
+    "test:coverage": "c8 --reporter=lcov --reporter=json-summary --reporter=text bunx vp test --run",
+    "typecheck": "bun x tsc -p ../../tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@eclipsa/native": "workspace:^",
+    "@eclipsa/native-core": "workspace:^"
+  }
+}
diff --git a/packages/native-swiftui/platform.ts b/packages/native-swiftui/platform.ts
new file mode 100644
index 0000000..ddcb9a3
--- /dev/null
+++ b/packages/native-swiftui/platform.ts
@@ -0,0 +1,25 @@
+export const SWIFTUI_DEFAULT_TAG_MAP = {
+  button: 'swiftui:button',
+  hstack: 'swiftui:hstack',
+  image: 'swiftui:image',
+  list: 'swiftui:list',
+  spacer: 'swiftui:spacer',
+  text: 'swiftui:text',
+  textField: 'swiftui:text-field',
+  toggle: 'swiftui:toggle',
+  vstack: 'swiftui:vstack',
+  windowGroup: 'swiftui:window-group',
+} as const
+
+export const SWIFTUI_DEFAULT_COMPONENT_MAP = {
+  button: 'Button',
+  hstack: 'HStack',
+  image: 'Image',
+  list: 'List',
+  spacer: 'Spacer',
+  text: 'Text',
+  textField: 'TextField',
+  toggle: 'Toggle',
+  vstack: 'VStack',
+  windowGroup: 'WindowGroup',
+} as const
diff --git a/packages/native-swiftui/smoke.test.ts b/packages/native-swiftui/smoke.test.ts
new file mode 100644
index 0000000..38554c3
--- /dev/null
+++ b/packages/native-swiftui/smoke.test.ts
@@ -0,0 +1,390 @@
+import { execFile, spawnSync } from 'node:child_process'
+import { access, mkdtemp, mkdir, rm, writeFile } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { promisify } from 'node:util'
+import { createBuilder, createServer } from 'vite'
+import { afterEach, beforeAll, describe, expect, it } from 'vitest'
+import { native } from '../native/vite.ts'
+import { swiftui } from './vite.ts'
+
+interface NativeNodeSnapshot {
+  children: NativeNodeSnapshot[]
+  id: string
+  props: Record<string, string>
+  tag: string
+  text?: string | null
+}
+
+interface SmokeOutput {
+  finalTree: NativeNodeSnapshot
+  initialTree: NativeNodeSnapshot
+}
+
+const currentDir = dirname(fileURLToPath(import.meta.url))
+const packagePath = resolve(currentDir, './macos-swiftui')
+const smokeExecutablePath = resolve(packagePath, '.build', 'debug', 'EclipsaNativeSmoke')
+const repoRoot = resolve(currentDir, '../..')
+const execFileAsync = promisify(execFile)
+const eclipsaEntry = resolve(repoRoot, 'packages/eclipsa/mod.ts')
+const eclipsaInternalEntry = resolve(repoRoot, 'packages/eclipsa/core/internal.ts')
+const nativeEntry = resolve(repoRoot, 'packages/native/mod.ts')
+const nativeJsxRuntime = resolve(repoRoot, 'packages/native/jsx-runtime.ts')
+const nativeJsxDevRuntime = resolve(repoRoot, 'packages/native/jsx-dev-runtime.ts')
+const nativeCoreEntry = resolve(repoRoot, 'packages/native-core/mod.ts')
+const nativeSwiftUIEntry = resolve(repoRoot, 'packages/native-swiftui/mod.ts')
+
+const flatten = (node: NativeNodeSnapshot): NativeNodeSnapshot[] => [
+  node,
+  ...node.children.flatMap(flatten),
+]
+
+const waitFor = async (fn: () => Promise<boolean>, timeoutMs = 10_000) => {
+  const deadline = Date.now() + timeoutMs
+  while (Date.now() < deadline) {
+    if (await fn()) {
+      return
+    }
+    await new Promise((resolve) => setTimeout(resolve, 100))
+  }
+  throw new Error(`Timed out after ${timeoutMs}ms`)
+}
+
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
+
+const buildSmokeExecutable = async () => {
+  await execFileAsync(
+    'swift',
+    ['build', '--quiet', '--package-path', packagePath, '--product', 'EclipsaNativeSmoke'],
+    {
+      cwd: currentDir,
+      encoding: 'utf8',
+    },
+  )
+  return smokeExecutablePath
+}
+
+const fileExists = async (filePath: string) => {
+  try {
+    await access(filePath)
+    return true
+  } catch {
+    return false
+  }
+}
+
+const createFixture = async () => {
+  const root = await mkdtemp(resolve(tmpdir(), 'eclipsa-native-swiftui-hmr-'))
+  await mkdir(resolve(root, 'app'), { recursive: true })
+  await writeFile(
+    resolve(root, 'tsconfig.json'),
+    JSON.stringify(
+      {
+        extends: resolve(repoRoot, 'tsconfig.json'),
+        compilerOptions: {
+          jsxImportSource: '@eclipsa/native',
+        },
+        include: ['./app/**/*.ts', './app/**/*.tsx'],
+      },
+      null,
+      2,
+    ),
+  )
+  await writeFile(
+    resolve(root, 'package.json'),
+    JSON.stringify(
+      {
+        name: '@test/native-swiftui-hmr-app',
+        private: true,
+        type: 'module',
+      },
+      null,
+      2,
+    ),
+  )
+  await writeFile(
+    resolve(root, 'app', '+layout.tsx'),
+    [
+      `export default function Layout(props: { children?: unknown }) {`,
+      `  return <windowGroup>{props.children}</windowGroup>`,
+      `}`,
+      '',
+    ].join('\n'),
+  )
+  await writeNativeMapSource(root)
+  return root
+}
+
+const writeNativeMapSource = async (root: string, stackComponent = 'VStack') => {
+  await writeFile(
+    resolve(root, 'app', '+native-map.ts'),
+    [
+      `import { Button, HStack, Text, TextField, Toggle, VStack, WindowGroup } from '@eclipsa/native-swiftui'`,
+      `export const button = Button`,
+      `export const div = ${stackComponent}`,
+      `export const input = TextField`,
+      `export const span = Text`,
+      `export const toggle = Toggle`,
+      `export const windowGroup = WindowGroup`,
+      '',
+    ].join('\n'),
+  )
+}
+
+const writePageSource = async (root: string, title: string) => {
+  await writeFile(
+    resolve(root, 'app', '+page.tsx'),
+    [
+      `export default function App() {`,
+      `  return <div><span value=${JSON.stringify(title)} /></div>`,
+      `}`,
+      '',
+    ].join('\n'),
+  )
+}
+
+const writeInteractivePageSource = async (root: string) => {
+  await writeFile(
+    resolve(root, 'app', '+page.tsx'),
+    [
+      `import { getNativeRuntime } from '@eclipsa/native'`,
+      `import { useSignal } from 'eclipsa'`,
+      `export default function App() {`,
+      `  const count = useSignal(0)`,
+      `  const enabled = useSignal(true)`,
+      `  const name = useSignal('SwiftUI')`,
+      `  const runtimeStatus = useSignal('runtime pending')`,
+      `  return (`,
+      `    <div spacing={16}>`,
+      `      <span value="Eclipsa Native SwiftUI" />`,
+      `      <span value={runtimeStatus.value} />`,
+      `      <span value={\`Hello \${name.value} · \${enabled.value ? 'enabled' : 'disabled'} · count \${count.value}\`} />`,
+      `      <button`,
+      `        onPress={() => {`,
+      `          getNativeRuntime()`,
+      `          runtimeStatus.value = 'runtime ready'`,
+      `          count.value += 1`,
+      `        }}`,
+      `        title={\`Count \${count.value}\`}`,
+      `      />`,
+      `      <input`,
+      `        onInput={(value: string) => { name.value = String(value ?? '') }}`,
+      `        placeholder="Name"`,
+      `        value={name.value}`,
+      `      />`,
+      `      <toggle`,
+      `        onToggle={(value: boolean) => { enabled.value = Boolean(value) }}`,
+      `        title="Enabled"`,
+      `        value={enabled.value}`,
+      `      />`,
+      `    </div>`,
+      `  )`,
+      `}`,
+      '',
+    ].join('\n'),
+  )
+}
+
+const resolveConfig = (root: string, port: number) => ({
+  appType: 'custom' as const,
+  plugins: [
+    native({
+      target: swiftui({
+        launch: false,
+      }),
+    }),
+  ],
+  resolve: {
+    alias: [
+      {
+        find: /^eclipsa\/internal$/,
+        replacement: eclipsaInternalEntry,
+      },
+      {
+        find: /^eclipsa$/,
+        replacement: eclipsaEntry,
+      },
+      {
+        find: /^@eclipsa\/native\/jsx-dev-runtime$/,
+        replacement: nativeJsxDevRuntime,
+      },
+      {
+        find: /^@eclipsa\/native\/jsx-runtime$/,
+        replacement: nativeJsxRuntime,
+      },
+      {
+        find: /^@eclipsa\/native$/,
+        replacement: nativeEntry,
+      },
+      {
+        find: /^@eclipsa\/native-core$/,
+        replacement: nativeCoreEntry,
+      },
+      {
+        find: /^@eclipsa\/native-swiftui$/,
+        replacement: nativeSwiftUIEntry,
+      },
+    ],
+  },
+  root,
+  server: {
+    fs: {
+      allow: [repoRoot],
+    },
+    host: '127.0.0.1',
+    port,
+    strictPort: true,
+  },
+})
+
+const buildFixture = async (root: string) => {
+  const builder = await createBuilder(resolveConfig(root, 0))
+  await builder.buildApp()
+  return resolve(root, 'dist', 'native', 'manifest.json')
+}
+
+const darwinOnly = process.platform === 'darwin' ? it : it.skip
+
+describe('@eclipsa/native-swiftui smoke host', () => {
+  const cleanup = new Set<string>()
+
+  beforeAll(async () => {
+    if (process.platform !== 'darwin') {
+      return
+    }
+    await buildSmokeExecutable()
+  }, 60_000)
+
+  afterEach(async () => {
+    for (const directory of cleanup) {
+      await rm(directory, { force: true, recursive: true })
+    }
+    cleanup.clear()
+  })
+
+  darwinOnly(
+    'boots the built manifest, exposes the public runtime API, and applies SwiftUI events',
+    async () => {
+      const root = await createFixture()
+      cleanup.add(root)
+      await writeInteractivePageSource(root)
+      const manifestPath = await buildFixture(root)
+      const result = spawnSync(smokeExecutablePath, [], {
+        cwd: currentDir,
+        encoding: 'utf8',
+        env: {
+          ...process.env,
+          ECLIPSA_NATIVE_MANIFEST: manifestPath,
+        },
+      })
+
+      expect(result.status, result.stderr).toBe(0)
+
+      const output = JSON.parse(result.stdout) as SmokeOutput
+      const initialNodes = flatten(output.initialTree)
+      const finalNodes = flatten(output.finalTree)
+
+      expect(output.initialTree.tag).toBe('swiftui:window-group')
+      expect(
+        initialNodes.some(
+          (node) => node.tag === 'swiftui:text' && node.props.value === 'Eclipsa Native SwiftUI',
+        ),
+      ).toBe(true)
+      expect(
+        finalNodes.some(
+          (node) => node.tag === 'swiftui:text' && node.props.value === 'runtime ready',
+        ),
+      ).toBe(true)
+      expect(
+        initialNodes.some(
+          (node) => node.tag === 'swiftui:button' && node.props.title === 'Count 0',
+        ),
+      ).toBe(true)
+      expect(
+        finalNodes.some((node) => node.tag === 'swiftui:button' && node.props.title === 'Count 1'),
+      ).toBe(true)
+      expect(
+        finalNodes.some(
+          (node) =>
+            node.tag === 'swiftui:text' && node.props.value === 'Hello macOS · disabled · count 1',
+        ),
+      ).toBe(true)
+      expect(
+        finalNodes.some(
+          (node) => node.tag === 'swiftui:text-field' && node.props.value === 'macOS',
+        ),
+      ).toBe(true)
+      expect(
+        finalNodes.some((node) => node.tag === 'swiftui:toggle' && node.props.value === 'false'),
+      ).toBe(true)
+    },
+    60_000,
+  )
+
+  darwinOnly(
+    'reloads the Swift runtime when native source changes during dev',
+    async () => {
+      const root = await createFixture()
+      cleanup.add(root)
+      await writePageSource(root, 'Initial Native Title')
+      const readyFile = resolve(root, 'runtime-ready')
+
+      const server = await createServer(resolveConfig(root, 0))
+
+      try {
+        await server.listen()
+        const address = server.httpServer?.address()
+        const port = typeof address === 'object' && address ? address.port : 5173
+        await waitFor(async () => {
+          const response = await fetch(`http://127.0.0.1:${port}/__eclipsa_native__/manifest.json`)
+          return response.ok
+        })
+        await delay(300)
+
+        const smokePromise = execFileAsync(smokeExecutablePath, [], {
+          cwd: currentDir,
+          encoding: 'utf8',
+          env: {
+            ...process.env,
+            ECLIPSA_NATIVE_MANIFEST: `http://127.0.0.1:${port}/__eclipsa_native__/manifest.json`,
+            ECLIPSA_NATIVE_SMOKE_READY_FILE: readyFile,
+            ECLIPSA_NATIVE_SMOKE_WAIT_FOR_SECONDS: '3',
+          },
+        })
+
+        await waitFor(() => fileExists(readyFile))
+        await writePageSource(root, 'Updated Native Title')
+
+        const { stdout } = await smokePromise
+        const output = JSON.parse(stdout) as SmokeOutput
+        const initialNodes = flatten(output.initialTree)
+        const finalNodes = flatten(output.finalTree)
+
+        expect(output.finalTree.id).toBe(output.initialTree.id)
+        expect(
+          initialNodes.some(
+            (node) => node.tag === 'swiftui:text' && node.props.value === 'Initial Native Title',
+          ),
+        ).toBe(true)
+        expect(
+          finalNodes.some(
+            (node) => node.tag === 'swiftui:text' && node.props.value === 'Updated Native Title',
+          ),
+        ).toBe(true)
+        expect(
+          finalNodes.find(
+            (node) => node.tag === 'swiftui:text' && node.props.value === 'Updated Native Title',
+          )?.id,
+        ).toBe(
+          initialNodes.find(
+            (node) => node.tag === 'swiftui:text' && node.props.value === 'Initial Native Title',
+          )?.id,
+        )
+      } finally {
+        await server.close()
+      }
+    },
+    60_000,
+  )
+})
diff --git a/packages/native-swiftui/tsconfig.json b/packages/native-swiftui/tsconfig.json
new file mode 100644
index 0000000..271730b
--- /dev/null
+++ b/packages/native-swiftui/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./**/*.ts", "./**/*.d.ts"],
+  "exclude": ["./**/*.test.ts"]
+}
diff --git a/packages/native-swiftui/typings.ts b/packages/native-swiftui/typings.ts
new file mode 100644
index 0000000..6da7de1
--- /dev/null
+++ b/packages/native-swiftui/typings.ts
@@ -0,0 +1,53 @@
+export namespace Foundation {
+  export type LocalizedStringKey = string
+  export type URL = string
+}
+
+export namespace SwiftUI {
+  export interface ViewProps {
+    disabled?: boolean
+    hidden?: boolean
+    id?: string
+    padding?: boolean | number
+  }
+
+  export interface StackProps extends ViewProps {
+    alignment?: 'center' | 'leading' | 'trailing'
+    spacing?: number
+  }
+
+  export interface SceneProps extends ViewProps {
+    title?: string
+  }
+
+  export interface TextProps extends ViewProps {
+    value?: Foundation.LocalizedStringKey | string
+    verbatim?: string
+  }
+
+  export interface ButtonProps extends ViewProps {
+    onPress?: () => void
+    role?: 'cancel' | 'destructive' | 'none'
+    title?: string
+  }
+
+  export interface ImageProps extends ViewProps {
+    systemName?: string
+  }
+
+  export interface TextFieldProps extends ViewProps {
+    onInput?: (value: string) => void
+    placeholder?: string
+    value?: string
+  }
+
+  export interface ToggleProps extends ViewProps {
+    onToggle?: (value: boolean) => void
+    title?: string
+    value?: boolean
+  }
+
+  export interface ListProps extends ViewProps {
+    selection?: string
+  }
+}
diff --git a/packages/native-swiftui/vite.config.ts b/packages/native-swiftui/vite.config.ts
new file mode 100644
index 0000000..9da577d
--- /dev/null
+++ b/packages/native-swiftui/vite.config.ts
@@ -0,0 +1,21 @@
+import path from 'node:path'
+import { defineConfig } from 'vite-plus'
+
+export default defineConfig({
+  resolve: {
+    alias: {
+      '@eclipsa/native-core': path.resolve(import.meta.dirname, '../native-core/mod.ts'),
+    },
+  },
+  test: {
+    include: ['*.test.ts'],
+    environment: 'node',
+  },
+  pack: {
+    clean: true,
+    dts: true,
+    entry: './mod.ts',
+    format: ['esm'],
+    sourcemap: true,
+  },
+})
diff --git a/packages/native-swiftui/vite.test.ts b/packages/native-swiftui/vite.test.ts
new file mode 100644
index 0000000..4d6b398
--- /dev/null
+++ b/packages/native-swiftui/vite.test.ts
@@ -0,0 +1,190 @@
+import { mkdtemp, mkdir, readFile, rm, writeFile } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import path from 'node:path'
+import { createServer } from 'vite'
+import { afterEach, describe, expect, it } from 'vitest'
+import { native } from '../native/vite.ts'
+import { NATIVE_SWIFT_ENVIRONMENT_NAME, swiftui } from './vite.ts'
+
+const repoRoot = path.resolve(import.meta.dirname, '../..')
+const eclipsaEntry = path.join(repoRoot, 'packages/eclipsa/mod.ts')
+const eclipsaInternalEntry = path.join(repoRoot, 'packages/eclipsa/core/internal.ts')
+const nativeEntry = path.join(repoRoot, 'packages/native/mod.ts')
+const nativeJsxRuntime = path.join(repoRoot, 'packages/native/jsx-runtime.ts')
+const nativeJsxDevRuntime = path.join(repoRoot, 'packages/native/jsx-dev-runtime.ts')
+const nativeCoreEntry = path.join(repoRoot, 'packages/native-core/mod.ts')
+const nativeSwiftUIEntry = path.join(repoRoot, 'packages/native-swiftui/mod.ts')
+const testServerPort = 5183
+
+const fileExists = async (filePath: string) => {
+  try {
+    await readFile(filePath)
+    return true
+  } catch {
+    return false
+  }
+}
+
+const waitFor = async (fn: () => Promise<boolean>, timeoutMs = 10_000) => {
+  const deadline = Date.now() + timeoutMs
+  while (Date.now() < deadline) {
+    if (await fn()) {
+      return
+    }
+    await new Promise((resolve) => setTimeout(resolve, 100))
+  }
+  throw new Error(`Timed out after ${timeoutMs}ms`)
+}
+
+const createFixture = async () => {
+  const root = await mkdtemp(path.join(tmpdir(), 'eclipsa-native-swiftui-env-'))
+  await mkdir(path.join(root, 'app'), { recursive: true })
+  await writeFile(
+    path.join(root, 'app', '+layout.tsx'),
+    [
+      `export default function Layout(props: { children?: unknown }) {`,
+      `  return <windowGroup>{props.children}</windowGroup>`,
+      `}`,
+      '',
+    ].join('\n'),
+  )
+  await writeFile(
+    path.join(root, 'app', '+native-map.ts'),
+    [
+      `import { Text, VStack, WindowGroup } from '@eclipsa/native-swiftui'`,
+      `export const div = VStack`,
+      `export const span = Text`,
+      `export const windowGroup = WindowGroup`,
+      '',
+    ].join('\n'),
+  )
+  await writeFile(
+    path.join(root, 'app', '+page.tsx'),
+    [
+      `import { useSignal } from 'eclipsa'`,
+      `export default function App() {`,
+      `  const count = useSignal(1)`,
+      `  return <div><span value={\`count \${count.value}\`} /></div>`,
+      `}`,
+      '',
+    ].join('\n'),
+  )
+  await writeFile(
+    path.join(root, 'fake-host.mjs'),
+    [
+      `import { writeFile } from 'node:fs/promises'`,
+      `const [launchedFile, terminatedFile] = process.argv.slice(2)`,
+      `const manifestUrl = process.env.ECLIPSA_NATIVE_MANIFEST`,
+      `const manifest = await fetch(manifestUrl).then((response) => response.json())`,
+      `await writeFile(launchedFile, JSON.stringify({ manifest, manifestUrl }))`,
+      `const shutdown = () => {`,
+      `  void writeFile(terminatedFile, 'terminated').finally(() => process.exit(0))`,
+      `}`,
+      `process.on('SIGTERM', shutdown)`,
+      `process.on('SIGINT', shutdown)`,
+      `setInterval(() => {}, 1_000)`,
+      '',
+    ].join('\n'),
+  )
+  return root
+}
+
+const resolveConfig = (root: string, command: readonly [string, ...string[]]) => ({
+  appType: 'custom' as const,
+  plugins: [
+    native({
+      target: swiftui({
+        command,
+        cwd: root,
+        startupTimeoutMs: 15_000,
+        stdio: 'ignore',
+      }),
+    }),
+  ],
+  resolve: {
+    alias: [
+      {
+        find: /^eclipsa\/internal$/,
+        replacement: eclipsaInternalEntry,
+      },
+      {
+        find: /^eclipsa$/,
+        replacement: eclipsaEntry,
+      },
+      {
+        find: /^@eclipsa\/native\/jsx-dev-runtime$/,
+        replacement: nativeJsxDevRuntime,
+      },
+      {
+        find: /^@eclipsa\/native\/jsx-runtime$/,
+        replacement: nativeJsxRuntime,
+      },
+      {
+        find: /^@eclipsa\/native$/,
+        replacement: nativeEntry,
+      },
+      {
+        find: /^@eclipsa\/native-core$/,
+        replacement: nativeCoreEntry,
+      },
+      {
+        find: /^@eclipsa\/native-swiftui$/,
+        replacement: nativeSwiftUIEntry,
+      },
+    ],
+  },
+  root,
+  server: {
+    fs: {
+      allow: [repoRoot],
+    },
+    host: '127.0.0.1',
+    port: testServerPort,
+    strictPort: true,
+  },
+})
+
+describe('@eclipsa/native-swiftui vite environment', () => {
+  const cleanup = new Set<string>()
+
+  afterEach(async () => {
+    for (const directory of cleanup) {
+      await rm(directory, { force: true, recursive: true })
+    }
+    cleanup.clear()
+  })
+
+  it('launches and stops the nativeSwift host automatically during dev', async () => {
+    const root = await createFixture()
+    cleanup.add(root)
+
+    const launchedFile = path.join(root, 'launched.json')
+    const terminatedFile = path.join(root, 'terminated.txt')
+    const server = await createServer(
+      resolveConfig(root, ['bun', path.join(root, 'fake-host.mjs'), launchedFile, terminatedFile]),
+    )
+
+    try {
+      await server.listen()
+      expect(server.environments[NATIVE_SWIFT_ENVIRONMENT_NAME]).toBeDefined()
+      expect(
+        typeof (server.environments[NATIVE_SWIFT_ENVIRONMENT_NAME] as { dispatchFetch?: unknown })
+          .dispatchFetch,
+      ).toBe('function')
+      await waitFor(() => fileExists(launchedFile))
+      const launched = JSON.parse(await readFile(launchedFile, 'utf8')) as {
+        manifest: {
+          target: string
+        }
+        manifestUrl: string
+      }
+
+      expect(launched.manifest.target).toBe('swiftui')
+      expect(launched.manifestUrl).toContain('/__eclipsa_native__/manifest.json')
+    } finally {
+      await server.close()
+    }
+
+    await waitFor(() => fileExists(terminatedFile))
+  }, 30_000)
+})
diff --git a/packages/native-swiftui/vite.ts b/packages/native-swiftui/vite.ts
new file mode 100644
index 0000000..f845cf3
--- /dev/null
+++ b/packages/native-swiftui/vite.ts
@@ -0,0 +1,115 @@
+import { spawn, type SpawnOptions } from 'node:child_process'
+import { fileURLToPath } from 'node:url'
+import {
+  createNativeFetchableDevEnvironment,
+  type NativeFetchableEnvironmentContext,
+} from '../native/dev-environment.ts'
+import type { NativeTargetAdapter } from '@eclipsa/native/vite'
+import type { ResolvedConfig } from 'vite'
+import { SWIFTUI_DEFAULT_COMPONENT_MAP } from './platform.ts'
+
+export const NATIVE_SWIFT_ENVIRONMENT_NAME = 'nativeSwift'
+const DEFAULT_HOST_STARTUP_TIMEOUT_MS = 30_000
+
+export interface SwiftUITargetOptions {
+  command?: readonly [string, ...string[]]
+  cwd?: string
+  env?: NodeJS.ProcessEnv
+  hostPackagePath?: string
+  launch?: boolean
+  startupTimeoutMs?: number
+  stdio?: SpawnOptions['stdio']
+}
+
+interface ResolvedNativeSwiftTargetOptions {
+  command: readonly [string, ...string[]]
+  cwd: string
+  env?: NodeJS.ProcessEnv
+  hasCustomCommand: boolean
+  launch: boolean
+  startupTimeoutMs: number
+  stdio: SpawnOptions['stdio']
+}
+
+const defaultHostPackagePath = fileURLToPath(new URL('./macos-swiftui', import.meta.url))
+
+const resolveNativeSwiftTargetOptions = (
+  config: ResolvedConfig,
+  options: SwiftUITargetOptions,
+): ResolvedNativeSwiftTargetOptions => {
+  const hostPackagePath = options.hostPackagePath ?? defaultHostPackagePath
+  return {
+    command: options.command ?? [
+      'swift',
+      'run',
+      '--package-path',
+      hostPackagePath,
+      'EclipsaNativeMacOS',
+    ],
+    cwd: options.cwd ?? config.root,
+    env: options.env,
+    hasCustomCommand: options.command != null,
+    launch: options.launch ?? true,
+    startupTimeoutMs: options.startupTimeoutMs ?? DEFAULT_HOST_STARTUP_TIMEOUT_MS,
+    stdio: options.stdio ?? 'inherit',
+  }
+}
+
+const createNativeSwiftDevEnvironment = (
+  name: string,
+  config: ResolvedConfig,
+  context: NativeFetchableEnvironmentContext,
+  options: SwiftUITargetOptions,
+  manifestPath: string,
+) => {
+  const resolved = resolveNativeSwiftTargetOptions(config, options)
+  return createNativeFetchableDevEnvironment(config, context, {
+    createHostProcess({ manifestUrl }) {
+      const [command, ...args] = resolved.command
+      return {
+        child: spawn(command, args, {
+          cwd: resolved.cwd,
+          env: {
+            ...process.env,
+            ...resolved.env,
+            ECLIPSA_NATIVE_MANIFEST: manifestUrl,
+          },
+          stdio: resolved.stdio,
+        }),
+        description: [command, ...args].join(' '),
+      }
+    },
+    launch: resolved.launch,
+    manifestPath,
+    name,
+    shouldLaunch() {
+      return process.platform === 'darwin' || resolved.hasCustomCommand
+    },
+    startupTimeoutMs: resolved.startupTimeoutMs,
+  })
+}
+
+export const swiftui = (options: SwiftUITargetOptions = {}): NativeTargetAdapter => ({
+  bindingPackage: '@eclipsa/native-swiftui',
+  createEnvironmentOptions({ manifestPath }) {
+    return {
+      consumer: 'server',
+      dev: {
+        createEnvironment(name, config, context) {
+          return createNativeSwiftDevEnvironment(
+            name,
+            config,
+            context as NativeFetchableEnvironmentContext,
+            options,
+            manifestPath,
+          )
+        },
+      },
+    }
+  },
+  defaultMap: SWIFTUI_DEFAULT_COMPONENT_MAP,
+  environmentName: NATIVE_SWIFT_ENVIRONMENT_NAME,
+  name: 'swiftui',
+  platform: 'swiftui',
+  workspaceFallback: fileURLToPath(new URL('./mod.ts', import.meta.url)),
+})
diff --git a/packages/native/dev-environment.test.ts b/packages/native/dev-environment.test.ts
new file mode 100644
index 0000000..e36ffab
--- /dev/null
+++ b/packages/native/dev-environment.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, it, vi } from 'vitest'
+import { handleNativeRpcRequest } from './dev-environment.ts'
+
+describe('handleNativeRpcRequest', () => {
+  it('does not expose internal fetchModule errors to the client', async () => {
+    const logger = {
+      error: vi.fn(),
+    }
+    const environment = {
+      config: {
+        resolve: {
+          builtins: [],
+        },
+      },
+      fetchModule: vi.fn(async () => {
+        throw new Error('secret stack trace')
+      }),
+      logger,
+    }
+
+    const request = new Request('http://native.invalid/rpc', {
+      method: 'POST',
+      body: JSON.stringify({
+        data: ['/entry.ts'],
+        name: 'fetchModule',
+      }),
+      headers: {
+        'content-type': 'application/json',
+      },
+    })
+
+    const response = await handleNativeRpcRequest(
+      environment as Parameters<typeof handleNativeRpcRequest>[0],
+      request,
+    )
+    const body = (await response.json()) as {
+      error: {
+        message: string
+      }
+    }
+
+    expect(response.status).toBe(500)
+    expect(body.error.message).toBe('Internal native RPC failure.')
+    expect(logger.error).toHaveBeenCalledWith('secret stack trace')
+  })
+})
diff --git a/packages/native/dev-environment.ts b/packages/native/dev-environment.ts
new file mode 100644
index 0000000..7f93988
--- /dev/null
+++ b/packages/native/dev-environment.ts
@@ -0,0 +1,307 @@
+import type { ChildProcess } from 'node:child_process'
+import {
+  createFetchableDevEnvironment,
+  type FetchableDevEnvironment,
+  type ResolvedConfig,
+  type ViteDevServer,
+} from 'vite'
+
+const DEFAULT_HOST_SHUTDOWN_TIMEOUT_MS = 3_000
+
+export interface NativeFetchableEnvironmentContext {
+  ws: ViteDevServer['ws']
+}
+
+export interface NativeHostProcess {
+  child: ChildProcess
+  description: string
+}
+
+export interface NativeFetchableEnvironmentOptions {
+  launch: boolean
+  manifestPath: string
+  name: string
+  startupTimeoutMs: number
+  createHostProcess(context: { manifestPath: string; manifestUrl: string }): NativeHostProcess
+  shouldLaunch?(): boolean
+}
+
+const normalizeServerHost = (host: string | boolean | undefined) => {
+  if (typeof host !== 'string' || host === '0.0.0.0' || host === '::') {
+    return '127.0.0.1'
+  }
+  return host
+}
+
+const tryResolveServerOrigin = (server: ViteDevServer, name: string) => {
+  const preferredOrigin =
+    server.resolvedUrls?.local[0] ??
+    server.resolvedUrls?.network[0] ??
+    server.config.server.origin ??
+    null
+  if (preferredOrigin) {
+    return preferredOrigin.endsWith('/') ? preferredOrigin : `${preferredOrigin}/`
+  }
+
+  if (server.config.server.strictPort && server.config.server.port > 0) {
+    const protocol = server.config.server.https ? 'https' : 'http'
+    const host = normalizeServerHost(server.config.server.host)
+    return `${protocol}://${host}:${server.config.server.port}/`
+  }
+
+  const address = server.httpServer?.address()
+  if (!address || typeof address === 'string') {
+    throw new Error(`Could not resolve a dev server origin for the ${name} environment.`)
+  }
+
+  const protocol = server.config.server.https ? 'https' : 'http'
+  const host =
+    address.address === '::' || address.address === '0.0.0.0' ? '127.0.0.1' : address.address
+  return `${protocol}://${host}:${address.port}/`
+}
+
+const waitForServerOrigin = async (
+  server: ViteDevServer,
+  name: string,
+  timeoutMs: number,
+  shouldCancel?: () => boolean,
+) => {
+  const deadline = Date.now() + timeoutMs
+  while (Date.now() < deadline) {
+    if (shouldCancel?.()) {
+      throw new Error(`Cancelled ${name} host startup.`)
+    }
+    try {
+      return tryResolveServerOrigin(server, name)
+    } catch {}
+    await new Promise((resolve) => setTimeout(resolve, 25))
+  }
+  throw new Error(`Could not resolve a dev server origin for the ${name} environment.`)
+}
+
+const resolveManifestUrl = async (
+  server: ViteDevServer,
+  name: string,
+  manifestPath: string,
+  timeoutMs: number,
+  shouldCancel?: () => boolean,
+) => {
+  const origin = await waitForServerOrigin(server, name, timeoutMs, shouldCancel)
+  return new URL(manifestPath.slice(1), origin).href
+}
+
+const waitForManifest = async (
+  manifestUrl: string,
+  name: string,
+  timeoutMs: number,
+  shouldCancel?: () => boolean,
+) => {
+  const deadline = Date.now() + timeoutMs
+  let lastError: unknown = null
+  while (Date.now() < deadline) {
+    if (shouldCancel?.()) {
+      throw new Error(`Cancelled ${name} host startup.`)
+    }
+    try {
+      const response = await fetch(manifestUrl)
+      if (response.ok) {
+        return
+      }
+      lastError = new Error(`Received ${response.status} from ${manifestUrl}`)
+    } catch (error) {
+      lastError = error
+    }
+    await new Promise((resolve) => setTimeout(resolve, 100))
+  }
+
+  throw new Error(
+    `Timed out waiting for the native manifest at ${manifestUrl}.${lastError ? ` ${String(lastError)}` : ''}`,
+  )
+}
+
+const stopChildProcess = async (child: ChildProcess | null) => {
+  if (!child || child.exitCode != null || child.signalCode != null) {
+    return
+  }
+
+  await new Promise<void>((resolve) => {
+    const finish = () => {
+      clearTimeout(timeoutId)
+      resolve()
+    }
+
+    const timeoutId = setTimeout(() => {
+      if (child.exitCode == null && child.signalCode == null) {
+        child.kill('SIGKILL')
+      }
+    }, DEFAULT_HOST_SHUTDOWN_TIMEOUT_MS)
+
+    child.once('exit', finish)
+    child.kill('SIGTERM')
+  })
+}
+
+const toSerializableBuiltin = (value: RegExp | string) =>
+  typeof value === 'string'
+    ? value
+    : {
+        flags: value.flags,
+        source: value.source,
+        type: 'regexp' as const,
+      }
+
+const createJsonResponse = (body: unknown, status = 200) =>
+  new Response(JSON.stringify(body), {
+    headers: {
+      'content-type': 'application/json; charset=utf-8',
+    },
+    status,
+  })
+
+const createTextResponse = (body: string, status: number) => new Response(body, { status })
+
+const INTERNAL_NATIVE_RPC_ERROR_MESSAGE = 'Internal native RPC failure.'
+
+export const handleNativeRpcRequest = async (
+  environment: FetchableDevEnvironment,
+  request: Request,
+): Promise<Response> => {
+  if (request.method !== 'POST') {
+    return createTextResponse('Method Not Allowed', 405)
+  }
+
+  try {
+    const payload = (await request.json()) as {
+      data?: unknown[]
+      name?: string
+    }
+
+    switch (payload.name) {
+      case 'fetchModule': {
+        const [url, importer, options] = payload.data ?? []
+        const result = await environment.fetchModule(
+          String(url ?? ''),
+          importer == null ? undefined : String(importer),
+          (options ?? {}) as { cached?: boolean; startOffset?: number },
+        )
+        return createJsonResponse({ result })
+      }
+      case 'getBuiltins': {
+        const result = environment.config.resolve.builtins.map(toSerializableBuiltin)
+        return createJsonResponse({ result })
+      }
+      default:
+        return createJsonResponse(
+          {
+            error: {
+              message: `Unsupported native RPC method: ${String(payload.name ?? '')}`,
+            },
+          },
+          400,
+        )
+    }
+  } catch (error) {
+    environment.logger.error(
+      error instanceof Error ? error.message : `Native RPC failed: ${String(error)}`,
+    )
+    return createJsonResponse(
+      {
+        error: {
+          message: INTERNAL_NATIVE_RPC_ERROR_MESSAGE,
+        },
+      },
+      500,
+    )
+  }
+}
+
+export const createNativeFetchableDevEnvironment = (
+  config: ResolvedConfig,
+  context: NativeFetchableEnvironmentContext,
+  options: NativeFetchableEnvironmentOptions,
+) => {
+  let environment!: FetchableDevEnvironment
+  environment = createFetchableDevEnvironment(options.name, config, {
+    handleRequest(request) {
+      return handleNativeRpcRequest(environment, request)
+    },
+    hot: true,
+    options: config.environments[options.name],
+    transport: context.ws,
+  })
+
+  const originalListen = environment.listen.bind(environment)
+  const originalClose = environment.close.bind(environment)
+  let closing = false
+  let hostProcess: ChildProcess | null = null
+  let startupTask: Promise<void> | null = null
+
+  environment.listen = async (server) => {
+    await originalListen(server)
+    if (hostProcess || startupTask || !options.launch) {
+      return
+    }
+    if (options.shouldLaunch && !options.shouldLaunch()) {
+      return
+    }
+
+    startupTask = (async () => {
+      const shouldCancel = () => closing
+      try {
+        const manifestUrl = await resolveManifestUrl(
+          server,
+          options.name,
+          options.manifestPath,
+          options.startupTimeoutMs,
+          shouldCancel,
+        )
+        await waitForManifest(manifestUrl, options.name, options.startupTimeoutMs, shouldCancel)
+        if (closing) {
+          return
+        }
+
+        const { child, description } = options.createHostProcess({
+          manifestPath: options.manifestPath,
+          manifestUrl,
+        })
+        hostProcess = child
+
+        hostProcess.once('error', (error) => {
+          environment.logger.error(
+            `Failed to launch the ${options.name} host with "${description}": ${String(error)}`,
+          )
+        })
+        hostProcess.once('exit', (code, signal) => {
+          const expectedShutdown = closing && (signal === 'SIGTERM' || signal === 'SIGKILL')
+          hostProcess = null
+          if (expectedShutdown || code === 0) {
+            return
+          }
+          environment.logger.warn(
+            `The ${options.name} host exited unexpectedly${code != null ? ` with code ${code}` : ''}${signal ? ` (${signal})` : ''}.`,
+          )
+        })
+      } catch (error) {
+        if (!closing) {
+          environment.logger.error(String(error))
+        }
+      } finally {
+        startupTask = null
+      }
+    })()
+  }
+
+  environment.close = async () => {
+    closing = true
+    try {
+      await startupTask
+      await stopChildProcess(hostProcess)
+      hostProcess = null
+      await originalClose()
+    } finally {
+      closing = false
+    }
+  }
+
+  return environment
+}
diff --git a/packages/native/jsx-dev-runtime.ts b/packages/native/jsx-dev-runtime.ts
new file mode 100644
index 0000000..28febe8
--- /dev/null
+++ b/packages/native/jsx-dev-runtime.ts
@@ -0,0 +1,6 @@
+import { jsx } from './jsx-runtime.ts'
+
+export type { JSX } from './jsx-types.ts'
+export { Fragment, jsx, jsxs } from './jsx-runtime.ts'
+
+export const jsxDEV = jsx
diff --git a/packages/native/jsx-runtime.ts b/packages/native/jsx-runtime.ts
new file mode 100644
index 0000000..3171c00
--- /dev/null
+++ b/packages/native/jsx-runtime.ts
@@ -0,0 +1,18 @@
+import { createElement, Fragment } from '@eclipsa/native-core'
+import type { NativeChild, NativeElementType } from '@eclipsa/native-core'
+import { resolveNativeElementType } from './runtime.ts'
+
+export type { JSX } from './jsx-types.ts'
+
+const withKey = (props: Record<string, unknown> | null | undefined, key: unknown) =>
+  key === undefined ? props : { ...props, key }
+
+export const jsx = (
+  type: NativeElementType<object>,
+  props: Record<string, unknown> | null,
+  key?: unknown,
+): NativeChild => createElement(resolveNativeElementType(type), withKey(props, key))
+
+export const jsxs = jsx
+
+export { Fragment }
diff --git a/packages/native/jsx-types.ts b/packages/native/jsx-types.ts
new file mode 100644
index 0000000..b46c377
--- /dev/null
+++ b/packages/native/jsx-types.ts
@@ -0,0 +1,18 @@
+import type { NativeChild, NativeElementType } from '@eclipsa/native-core'
+
+export namespace JSX {
+  export type Element = NativeChild
+  export type ElementType = NativeElementType<object>
+
+  export interface ElementChildrenAttribute {
+    children: unknown
+  }
+
+  export interface IntrinsicAttributes {
+    key?: number | string | symbol
+  }
+
+  export interface IntrinsicElements {
+    [elementName: string]: Record<string, unknown>
+  }
+}
diff --git a/packages/native/mod.ts b/packages/native/mod.ts
new file mode 100644
index 0000000..b271c74
--- /dev/null
+++ b/packages/native/mod.ts
@@ -0,0 +1,30 @@
+export {
+  createContext,
+  Fragment,
+  useContext,
+  type NativeChild,
+  type NativeComponent,
+  type NativeElement,
+  type NativeElementType,
+  type NativeKey,
+} from '@eclipsa/native-core'
+export {
+  bootNativeApplication,
+  createElement,
+  defineNativeComponent,
+  getNativeRuntime,
+  getNativeMap,
+  h,
+  mountNativeApplication,
+  peekNativeRuntime,
+  resolveNativeElementType,
+  setNativeMap,
+  type DefinedNativeComponent,
+  type MountedNativeApplication,
+  type NativeApplicationInput,
+  type NativeMap,
+  type NativeMapModule,
+  type NativeRuntime,
+  type NativeRuntimeEvents,
+  type NativeRuntimeRenderer,
+} from './runtime.ts'
diff --git a/packages/native/package.json b/packages/native/package.json
new file mode 100644
index 0000000..1f90ae8
--- /dev/null
+++ b/packages/native/package.json
@@ -0,0 +1,68 @@
+{
+  "name": "@eclipsa/native",
+  "version": "0.0.0",
+  "homepage": "https://github.com/pnsk-lab/eclipsa",
+  "bugs": {
+    "url": "https://github.com/pnsk-lab/eclipsa/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pnsk-lab/eclipsa.git",
+    "directory": "packages/native"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./mod.ts",
+      "import": "./mod.ts"
+    },
+    "./vite": {
+      "types": "./vite.ts",
+      "import": "./vite.ts"
+    },
+    "./jsx-runtime": {
+      "types": "./jsx-runtime.ts",
+      "import": "./jsx-runtime.ts"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./jsx-dev-runtime.ts",
+      "import": "./jsx-dev-runtime.ts"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "types": "./mod.d.mts",
+        "import": "./mod.mjs"
+      },
+      "./vite": {
+        "types": "./vite.d.mts",
+        "import": "./vite.mjs"
+      },
+      "./jsx-runtime": {
+        "types": "./jsx-runtime.d.mts",
+        "import": "./jsx-runtime.mjs"
+      },
+      "./jsx-dev-runtime": {
+        "types": "./jsx-dev-runtime.d.mts",
+        "import": "./jsx-dev-runtime.mjs"
+      }
+    }
+  },
+  "scripts": {
+    "build": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
+    "pack": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
+    "test": "vp test --run",
+    "test:coverage": "c8 --reporter=lcov --reporter=json-summary --reporter=text bunx vp test --run",
+    "typecheck": "bun x tsc -p ../../tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@eclipsa/native-core": "workspace:^",
+    "@eclipsa/optimizer": "workspace:^",
+    "eclipsa": "workspace:^"
+  },
+  "peerDependencies": {
+    "vite": "*"
+  }
+}
diff --git a/packages/native/runtime.test.tsx b/packages/native/runtime.test.tsx
new file mode 100644
index 0000000..f70cfa1
--- /dev/null
+++ b/packages/native/runtime.test.tsx
@@ -0,0 +1,354 @@
+/** @jsxImportSource @eclipsa/native */
+
+import * as native from './mod.ts'
+import {
+  createElement,
+  bootNativeApplication,
+  defineNativeComponent,
+  getNativeRuntime,
+  getNativeMap,
+  peekNativeRuntime,
+  setNativeMap,
+} from './mod.ts'
+import { useSignal } from 'eclipsa'
+import { createRouteElement } from 'eclipsa/internal'
+import { afterEach, describe, expect, it } from 'vitest'
+
+interface MockNode {
+  children: MockNode[]
+  id: string
+  props: Record<string, unknown>
+  tag: string
+  text: string | null
+}
+
+const createMockNode = (id: string, tag: string, text: string | null = null): MockNode => ({
+  children: [],
+  id,
+  props: {},
+  tag,
+  text,
+})
+
+const insertChild = (parent: MockNode, child: MockNode, beforeID?: string | null) => {
+  parent.children = parent.children.filter((candidate) => candidate.id !== child.id)
+  if (beforeID) {
+    const nextIndex = parent.children.findIndex((candidate) => candidate.id === beforeID)
+    if (nextIndex >= 0) {
+      parent.children.splice(nextIndex, 0, child)
+      return
+    }
+  }
+  parent.children.push(child)
+}
+
+const createMockBridge = () => {
+  let nextID = 0
+  const publishedRootIDs: string[] = []
+  const handlers = new Map<string, (payload?: unknown) => unknown>()
+  const nodes = new Map<string, MockNode>()
+  return {
+    bridge: {
+      events: {
+        on(nodeID: string, eventName: string, listener: (payload?: unknown) => unknown) {
+          handlers.set(`${nodeID}:${eventName}`, listener)
+        },
+      },
+      renderer: {
+        createElement(type: string) {
+          const node = createMockNode(`node-${++nextID}`, type)
+          nodes.set(node.id, node)
+          return node.id
+        },
+        createText(value: string) {
+          const node = createMockNode(`node-${++nextID}`, '#text', value)
+          nodes.set(node.id, node)
+          return node.id
+        },
+        insert(parentID: string, childID: string, beforeID?: string | null) {
+          insertChild(nodes.get(parentID)!, nodes.get(childID)!, beforeID)
+        },
+        publish(rootID: string) {
+          publishedRootIDs.push(rootID)
+        },
+        remove(parentID: string, childID: string) {
+          const parent = nodes.get(parentID)!
+          parent.children = parent.children.filter((candidate) => candidate.id !== childID)
+        },
+        removeProp(nodeID: string, key: string) {
+          delete nodes.get(nodeID)!.props[key]
+        },
+        reorder(parentID: string, childID: string, beforeID?: string | null) {
+          insertChild(nodes.get(parentID)!, nodes.get(childID)!, beforeID)
+        },
+        setProp(nodeID: string, key: string, value: unknown) {
+          nodes.get(nodeID)!.props[key] = value
+        },
+        setText(nodeID: string, value: string) {
+          nodes.get(nodeID)!.text = value
+        },
+      },
+    },
+    getNode(id: string) {
+      return nodes.get(id)
+    },
+    publishedRootIDs,
+    trigger(nodeID: string, eventName: string, payload?: unknown) {
+      return handlers.get(`${nodeID}:${eventName}`)?.(payload)
+    },
+  }
+}
+
+describe('@eclipsa/native runtime', () => {
+  afterEach(() => {
+    setNativeMap({})
+  })
+
+  it('rerenders imported native components with useSignal state', () => {
+    const mock = createMockBridge()
+    const Button = defineNativeComponent<{
+      onPress?: () => void
+      title?: string
+    }>('swiftui:button')
+    const Text = defineNativeComponent<{ value: string }>('swiftui:text')
+    const VStack = defineNativeComponent<{ children?: unknown }>('swiftui:vstack')
+    const WindowGroup = defineNativeComponent<{ children?: unknown }>('swiftui:window-group')
+
+    const App = () => {
+      const count = useSignal(0)
+
+      return (
+        <WindowGroup>
+          <VStack>
+            <Text value={`count ${count.value}`} />
+            <Button
+              onPress={() => {
+                count.value += 1
+              }}
+              title={`Count ${count.value}`}
+            />
+          </VStack>
+        </WindowGroup>
+      )
+    }
+
+    const mounted = bootNativeApplication(App, mock.bridge)
+
+    const rootID = mock.publishedRootIDs.at(-1)!
+    const rootNode = mock.getNode(rootID)!
+    expect(rootNode.tag).toBe('swiftui:window-group')
+
+    const stackNode = mock.getNode(rootNode.children[0]!.id)!
+    const buttonNode = mock.getNode(stackNode.children[1]!.id)!
+    expect(buttonNode.tag).toBe('swiftui:button')
+    expect(buttonNode.props.title).toBe('Count 0')
+
+    mock.trigger(buttonNode.id, 'press')
+
+    expect(buttonNode.props.title).toBe('Count 1')
+    const labelNode = mock.getNode(stackNode.children[0]!.id)!
+    expect(labelNode.props.value).toBe('count 1')
+
+    mounted.unmount()
+  })
+
+  it('does not re-export standalone signal helpers', () => {
+    expect('signal' in native).toBe(false)
+  })
+
+  it('supports imported component wrappers around concrete native tags', () => {
+    const mock = createMockBridge()
+    const Label = defineNativeComponent<{ value: string }>('swiftui:text')
+    const Stack = defineNativeComponent<{ children?: unknown }>('swiftui:vstack')
+    const Window = defineNativeComponent<{ children?: unknown }>('swiftui:window-group')
+
+    const App = () => (
+      <Window>
+        <Stack>
+          <Label value="wrapped" />
+        </Stack>
+      </Window>
+    )
+
+    bootNativeApplication(App, mock.bridge)
+
+    const rootNode = mock.getNode(mock.publishedRootIDs.at(-1)!)!
+    const stackNode = mock.getNode(rootNode.children[0]!.id)!
+    const labelNode = mock.getNode(stackNode.children[0]!.id)!
+
+    expect(rootNode.tag).toBe('swiftui:window-group')
+    expect(stackNode.tag).toBe('swiftui:vstack')
+    expect(labelNode.tag).toBe('swiftui:text')
+    expect(labelNode.props.value).toBe('wrapped')
+  })
+
+  it('resolves lowercase JSX tags through the native map', () => {
+    const mock = createMockBridge()
+    const Text = defineNativeComponent<{ value: string }>('swiftui:text')
+    const VStack = defineNativeComponent<{ children?: unknown }>('swiftui:vstack')
+    const WindowGroup = defineNativeComponent<{ children?: unknown }>('swiftui:window-group')
+
+    setNativeMap({
+      div: VStack,
+      span: Text,
+      windowGroup: WindowGroup,
+    })
+
+    const App = () => (
+      <windowGroup>
+        <div>
+          <span value="mapped" />
+        </div>
+      </windowGroup>
+    )
+
+    bootNativeApplication(App, mock.bridge)
+
+    const rootNode = mock.getNode(mock.publishedRootIDs.at(-1)!)!
+    const stackNode = mock.getNode(rootNode.children[0]!.id)!
+    const labelNode = mock.getNode(stackNode.children[0]!.id)!
+
+    expect(rootNode.tag).toBe('swiftui:window-group')
+    expect(stackNode.tag).toBe('swiftui:vstack')
+    expect(labelNode.tag).toBe('swiftui:text')
+    expect(labelNode.props.value).toBe('mapped')
+  })
+
+  it('exposes the public native runtime bridge helpers', () => {
+    const mock = createMockBridge()
+
+    expect(peekNativeRuntime()).toBeNull()
+    expect(() => getNativeRuntime()).toThrowError(
+      'Native runtime is unavailable on globalThis.__eclipsaNative. This API can only be used while running inside a native host.',
+    )
+
+    expect(peekNativeRuntime(mock.bridge)).toBe(mock.bridge)
+    expect(getNativeRuntime(mock.bridge).renderer.createElement('swiftui:text')).toMatch(/^node-/)
+  })
+
+  it('stores native map updates from plain objects and module-shaped inputs', () => {
+    const Text = defineNativeComponent<{ value: string }>('swiftui:text')
+    const VStack = defineNativeComponent<{ children?: unknown }>('swiftui:vstack')
+
+    expect(setNativeMap({ div: VStack })).toEqual({ div: VStack })
+    expect(getNativeMap()).toEqual({ div: VStack })
+
+    setNativeMap({
+      default: {
+        div: VStack,
+      },
+      span: Text,
+    })
+
+    expect(getNativeMap()).toEqual({
+      div: VStack,
+      span: Text,
+    })
+
+    const element = createElement('div', {
+      children: createElement('span', { value: 'mapped child' }),
+    }) as {
+      props: {
+        children: {
+          props: {
+            value: string
+          }
+          type: string
+        }
+      }
+      type: string
+    }
+    expect(element.type).toBe('swiftui:vstack')
+    expect(element.props.children.type).toBe('swiftui:text')
+    expect(element.props.children.props.value).toBe('mapped child')
+  })
+
+  it('rerenders and replaces the mounted application input without remounting the host bridge', () => {
+    const mock = createMockBridge()
+    const Text = defineNativeComponent<{ value: string }>('swiftui:text')
+    const VStack = defineNativeComponent<{ children?: unknown }>('swiftui:vstack')
+    const WindowGroup = defineNativeComponent<{ children?: unknown }>('swiftui:window-group')
+    let title = 'before'
+
+    const App = () => (
+      <WindowGroup>
+        <VStack>
+          <Text value={title} />
+        </VStack>
+      </WindowGroup>
+    )
+
+    const mounted = bootNativeApplication(App, mock.bridge)
+    const readLabelValue = () => {
+      const rootNode = mock.getNode(mock.publishedRootIDs.at(-1)!)!
+      const stackNode = mock.getNode(rootNode.children[0]!.id)!
+      const labelNode = mock.getNode(stackNode.children[0]!.id)!
+      return labelNode.props.value
+    }
+
+    expect(readLabelValue()).toBe('before')
+
+    title = 'after rerender'
+    mounted.rerender()
+    expect(readLabelValue()).toBe('after rerender')
+
+    const ReplacedApp = () => (
+      <WindowGroup>
+        <VStack>
+          <Text value="after replace" />
+        </VStack>
+      </WindowGroup>
+    )
+
+    mounted.replace(ReplacedApp)
+    expect(readLabelValue()).toBe('after replace')
+  })
+
+  it('renders layout and page composition through shared route slots', () => {
+    const mock = createMockBridge()
+    const Text = defineNativeComponent<{ value: string }>('swiftui:text')
+    const VStack = defineNativeComponent<{ children?: unknown }>('swiftui:vstack')
+    const WindowGroup = defineNativeComponent<{ children?: unknown }>('swiftui:window-group')
+
+    const Layout = (props: { children?: unknown }) => <WindowGroup>{props.children}</WindowGroup>
+    const Page = () => (
+      <VStack>
+        <Text value="route ok" />
+      </VStack>
+    )
+
+    const App = () =>
+      createRouteElement({
+        error: null,
+        layouts: [
+          {
+            metadata: null,
+            renderer: Layout,
+            symbol: null,
+            url: '/app/+layout.tsx',
+          },
+        ],
+        page: {
+          metadata: null,
+          renderer: Page,
+          symbol: null,
+          url: '/app/+page.tsx',
+        },
+        params: {},
+        pathname: '/',
+        render: Page,
+      } as never)
+
+    const mounted = bootNativeApplication(App as never, mock.bridge)
+    const rootNode = mock.getNode(mock.publishedRootIDs.at(-1)!)!
+    expect(rootNode.tag).toBe('swiftui:window-group')
+
+    const stackNode = mock.getNode(rootNode.children[0]!.id)!
+    expect(stackNode.tag).toBe('swiftui:vstack')
+
+    const labelNode = mock.getNode(stackNode.children[0]!.id)!
+    expect(labelNode.props.value).toBe('route ok')
+
+    mounted.unmount()
+  })
+})
diff --git a/packages/native/runtime.ts b/packages/native/runtime.ts
new file mode 100644
index 0000000..8e207b1
--- /dev/null
+++ b/packages/native/runtime.ts
@@ -0,0 +1,338 @@
+import {
+  createElement as createCoreElement,
+  createNativeRoot,
+  Fragment,
+  NativeComponentType,
+  isNativeComponentDescriptor,
+  isNativeComponentType,
+  resolveNativeComponentDescriptor,
+  type NativeChild,
+  type NativeComponent,
+  type NativeElementType,
+  type NativeEventHandler,
+  type NativeKey,
+  type NativeRendererAbi,
+  type NativeRoot,
+} from '@eclipsa/native-core'
+import { effect } from 'eclipsa'
+import {
+  createDetachedRuntimeComponent,
+  createDetachedRuntimeContainer,
+  disposeDetachedRuntimeComponent,
+  runDetachedRuntimeComponent,
+  type ComponentState,
+} from 'eclipsa/internal'
+
+const ROOT_CONTAINER_KEY = Symbol('eclipsa.native.root-container')
+
+type RootContainer = {
+  [ROOT_CONTAINER_KEY]: true
+}
+
+interface NativeEventSubscription {
+  active: boolean
+}
+
+export interface NativeRuntimeRenderer {
+  createElement(type: string): string
+  createText(value: string): string
+  insert(parentID: string, childID: string, beforeID?: string | null): void
+  publish(rootID: string): void
+  remove(parentID: string, childID: string): void
+  removeProp(nodeID: string, key: string): void
+  reorder(parentID: string, childID: string, beforeID?: string | null): void
+  setProp(nodeID: string, key: string, value: unknown): void
+  setText(nodeID: string, value: string): void
+}
+
+export interface NativeRuntimeEvents {
+  on(nodeID: string, eventName: string, listener: NativeEventHandler): void
+}
+
+export interface NativeRuntime {
+  events: NativeRuntimeEvents
+  renderer: NativeRuntimeRenderer
+}
+
+export interface MountedNativeApplication {
+  root: NativeRoot
+  rerender(): void
+  replace(nextInput: NativeApplicationInput): void
+  unmount(): void
+  update(nextTree: NativeChild): void
+}
+
+export type NativeApplicationInput = NativeChild | NativeComponent<object>
+export type DefinedNativeComponent<P extends object> = NativeComponent<
+  P & { children?: NativeChild }
+>
+export type NativeMap = Record<string, NativeElementType<object>>
+export type NativeMapModule =
+  | NativeMap
+  | {
+      default?: NativeMap
+      [key: string]: unknown
+    }
+
+let currentNativeMap: NativeMap = {}
+
+const isRootContainer = (value: unknown): value is RootContainer =>
+  !!value && typeof value === 'object' && ROOT_CONTAINER_KEY in value
+
+const insertRootChild = (childIDs: string[], childID: string, beforeID?: string | null) => {
+  const existingIndex = childIDs.indexOf(childID)
+  if (existingIndex >= 0) {
+    childIDs.splice(existingIndex, 1)
+  }
+  if (beforeID) {
+    const nextIndex = childIDs.indexOf(beforeID)
+    if (nextIndex >= 0) {
+      childIDs.splice(nextIndex, 0, childID)
+      return
+    }
+  }
+  childIDs.push(childID)
+}
+
+const removeRootChild = (childIDs: string[], childID: string) => {
+  const index = childIDs.indexOf(childID)
+  if (index >= 0) {
+    childIDs.splice(index, 1)
+  }
+}
+
+export const defineNativeComponent = <P extends object>(
+  type: NativeElementType<P>,
+): DefinedNativeComponent<P> => {
+  const component = ((props: P & { children?: NativeChild }) =>
+    createElement(resolveNativeElementType(type), props)) as unknown as NativeComponent<
+    P & { children?: NativeChild }
+  > & {
+    [NativeComponentType]: NativeElementType<P>
+  }
+  Object.defineProperty(component, NativeComponentType, {
+    configurable: false,
+    enumerable: false,
+    value: type,
+    writable: false,
+  })
+  return component
+}
+
+const isNativeMapValue = (value: unknown): value is NativeElementType<object> =>
+  typeof value === 'function' ||
+  typeof value === 'string' ||
+  typeof value === 'symbol' ||
+  isNativeComponentDescriptor(value)
+
+const isNativeMapRecord = (value: unknown): value is Record<string, unknown> =>
+  !!value && typeof value === 'object' && !isNativeMapValue(value)
+
+const mergeNativeMapEntries = (target: NativeMap, source: Record<string, unknown>) => {
+  for (const [key, value] of Object.entries(source)) {
+    if (key === '__esModule' || key === 'default' || !isNativeMapValue(value)) {
+      continue
+    }
+    target[key] = value
+  }
+}
+
+const toNativeMap = (input: NativeMapModule | null | undefined): NativeMap => {
+  if (!input || typeof input !== 'object') {
+    return {}
+  }
+  const nextMap: NativeMap = {}
+  const defaultMap = 'default' in input ? input.default : undefined
+  if (isNativeMapRecord(defaultMap)) {
+    mergeNativeMapEntries(nextMap, defaultMap)
+  }
+  mergeNativeMapEntries(nextMap, input)
+  return nextMap
+}
+
+export const getNativeMap = () => currentNativeMap
+
+export const setNativeMap = (input: NativeMapModule | null | undefined) => {
+  currentNativeMap = toNativeMap(input)
+  return currentNativeMap
+}
+
+export const createElement = <P extends object>(
+  type: NativeElementType<P>,
+  props?: (P & { children?: NativeChild; key?: NativeKey }) | null,
+  ...children: NativeChild[]
+) => createCoreElement(resolveNativeElementType(type), props, ...children)
+
+export const h = createElement
+
+export const resolveNativeElementType = <P extends object>(
+  type: NativeElementType<P>,
+  seenAliases = new Set<string>(),
+): NativeElementType<P> => {
+  if (isNativeComponentDescriptor(type)) {
+    return resolveNativeElementType(resolveNativeComponentDescriptor(type), seenAliases)
+  }
+  if (typeof type === 'string') {
+    const mappedType = currentNativeMap[type]
+    if (!mappedType) {
+      return type
+    }
+    if (seenAliases.has(type)) {
+      throw new Error(`Circular native map alias detected for "${type}".`)
+    }
+    seenAliases.add(type)
+    return resolveNativeElementType(mappedType as NativeElementType<P>, seenAliases)
+  }
+  return type
+}
+
+export const peekNativeRuntime = (
+  input = (globalThis as Record<string, unknown>).__eclipsaNative,
+): NativeRuntime | null => {
+  if (!input || typeof input !== 'object') {
+    return null
+  }
+  const runtime = input as Partial<NativeRuntime>
+  if (!runtime.renderer || !runtime.events) {
+    return null
+  }
+  return runtime as NativeRuntime
+}
+
+export const getNativeRuntime = (
+  input = (globalThis as Record<string, unknown>).__eclipsaNative,
+): NativeRuntime => {
+  const runtime = peekNativeRuntime(input)
+  if (runtime) {
+    return runtime
+  }
+  throw new Error(
+    'Native runtime is unavailable on globalThis.__eclipsaNative. This API can only be used while running inside a native host.',
+  )
+}
+
+const createBridgeRenderer = (
+  runtime: NativeRuntime,
+  rootChildIDs: string[],
+): NativeRendererAbi<string, RootContainer, NativeEventSubscription> => ({
+  createElement(type) {
+    return runtime.renderer.createElement(type)
+  },
+  createText(value) {
+    return runtime.renderer.createText(value)
+  },
+  insert(parent, child, before) {
+    if (isRootContainer(parent)) {
+      insertRootChild(rootChildIDs, child, before)
+      return
+    }
+    runtime.renderer.insert(parent, child, before ?? null)
+  },
+  remove(parent, child) {
+    if (isRootContainer(parent)) {
+      removeRootChild(rootChildIDs, child)
+      return
+    }
+    runtime.renderer.remove(parent, child)
+  },
+  reorder(parent, child, before) {
+    if (isRootContainer(parent)) {
+      insertRootChild(rootChildIDs, child, before)
+      return
+    }
+    runtime.renderer.reorder(parent, child, before ?? null)
+  },
+  removeProp(node, key) {
+    runtime.renderer.removeProp(node, key)
+  },
+  setProp(node, key, value) {
+    runtime.renderer.setProp(node, key, value)
+  },
+  setText(node, value) {
+    runtime.renderer.setText(node, value)
+  },
+  subscribe(node, eventName, listener) {
+    const subscription = { active: true }
+    runtime.events.on(node, eventName, (payload) => {
+      if (!subscription.active) {
+        return
+      }
+      listener(payload)
+    })
+    return subscription
+  },
+  unsubscribe(_node, _eventName, subscription) {
+    subscription.active = false
+  },
+})
+
+const publishRoot = (runtime: NativeRuntime, rootChildIDs: string[]) => {
+  if (rootChildIDs.length === 0) {
+    return
+  }
+  if (rootChildIDs.length !== 1) {
+    throw new Error('Native apps must render exactly one root element.')
+  }
+  runtime.renderer.publish(rootChildIDs[0]!)
+}
+
+const resolveApplicationTree = (input: NativeApplicationInput): NativeChild => {
+  if (typeof input === 'function' && isNativeComponentType(input)) {
+    return createElement(input as NativeComponent<object>, {})
+  }
+  return input
+}
+
+export const mountNativeApplication = (
+  render: () => NativeChild,
+  runtime = getNativeRuntime(),
+): MountedNativeApplication => {
+  const rootChildIDs: string[] = []
+  const runtimeContainer = createDetachedRuntimeContainer()
+  const container: RootContainer = {
+    [ROOT_CONTAINER_KEY]: true,
+  }
+  const root = createNativeRoot(createBridgeRenderer(runtime, rootChildIDs), container, {
+    createComponentState: () => createDetachedRuntimeComponent(runtimeContainer),
+    disposeComponentState: (state) =>
+      disposeDetachedRuntimeComponent(runtimeContainer, state as ComponentState),
+    renderComponent: (state, run) =>
+      runDetachedRuntimeComponent(runtimeContainer, state as ComponentState, run),
+  })
+  let currentRender = render
+  const renderCurrentTree = () => {
+    root.update(currentRender())
+    publishRoot(runtime, rootChildIDs)
+  }
+  const stop = effect(() => {
+    renderCurrentTree()
+  })
+  const rerender = () => {
+    renderCurrentTree()
+  }
+
+  return {
+    root,
+    rerender,
+    replace(nextInput) {
+      currentRender = () => resolveApplicationTree(nextInput)
+      rootChildIDs.splice(0, rootChildIDs.length)
+      renderCurrentTree()
+    },
+    unmount() {
+      stop()
+      root.unmount()
+    },
+    update(nextTree) {
+      root.update(nextTree)
+      publishRoot(runtime, rootChildIDs)
+    },
+  }
+}
+
+export const bootNativeApplication = (
+  input: NativeApplicationInput,
+  runtime = getNativeRuntime(),
+) => mountNativeApplication(() => resolveApplicationTree(input), runtime)
+
+export { Fragment }
diff --git a/packages/native/tsconfig.json b/packages/native/tsconfig.json
new file mode 100644
index 0000000..271730b
--- /dev/null
+++ b/packages/native/tsconfig.json
@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./**/*.ts", "./**/*.d.ts"],
+  "exclude": ["./**/*.test.ts"]
+}
diff --git a/packages/native/vite.config.ts b/packages/native/vite.config.ts
new file mode 100644
index 0000000..9cd3247
--- /dev/null
+++ b/packages/native/vite.config.ts
@@ -0,0 +1,56 @@
+import path from 'node:path'
+import { defineConfig } from 'vite-plus'
+
+export default defineConfig({
+  resolve: {
+    alias: [
+      {
+        find: /^eclipsa\/internal$/,
+        replacement: path.resolve(import.meta.dirname, '../eclipsa/core/internal.ts'),
+      },
+      {
+        find: /^eclipsa$/,
+        replacement: path.resolve(import.meta.dirname, '../eclipsa/mod.ts'),
+      },
+      {
+        find: /^@eclipsa\/native\/jsx-dev-runtime$/,
+        replacement: path.resolve(import.meta.dirname, './jsx-dev-runtime.ts'),
+      },
+      {
+        find: /^@eclipsa\/native\/jsx-runtime$/,
+        replacement: path.resolve(import.meta.dirname, './jsx-runtime.ts'),
+      },
+      {
+        find: /^@eclipsa\/native$/,
+        replacement: path.resolve(import.meta.dirname, './mod.ts'),
+      },
+      {
+        find: /^@eclipsa\/native-core$/,
+        replacement: path.resolve(import.meta.dirname, '../native-core/mod.ts'),
+      },
+      {
+        find: /^@eclipsa\/native-swiftui$/,
+        replacement: path.resolve(import.meta.dirname, '../native-swiftui/mod.ts'),
+      },
+      {
+        find: /^@eclipsa\/native-compose$/,
+        replacement: path.resolve(import.meta.dirname, '../native-compose/mod.ts'),
+      },
+      {
+        find: /^@eclipsa\/native-gtk4$/,
+        replacement: path.resolve(import.meta.dirname, '../native-gtk4/mod.ts'),
+      },
+    ],
+  },
+  test: {
+    include: ['*.test.ts', '*.test.tsx'],
+    environment: 'node',
+  },
+  pack: {
+    clean: true,
+    dts: true,
+    entry: './mod.ts',
+    format: ['esm'],
+    sourcemap: true,
+  },
+})
diff --git a/packages/native/vite.test.ts b/packages/native/vite.test.ts
new file mode 100644
index 0000000..439c041
--- /dev/null
+++ b/packages/native/vite.test.ts
@@ -0,0 +1,253 @@
+import { mkdtemp, mkdir, readFile, readdir, rm, writeFile } from 'node:fs/promises'
+import { tmpdir } from 'node:os'
+import path from 'node:path'
+import { createBuilder, createServer } from 'vite'
+import { afterEach, describe, expect, it } from 'vitest'
+import { native } from './vite.ts'
+import { swiftui } from '../native-swiftui/vite.ts'
+
+const repoRoot = path.resolve(import.meta.dirname, '../..')
+const eclipsaEntry = path.join(repoRoot, 'packages/eclipsa/mod.ts')
+const eclipsaInternalEntry = path.join(repoRoot, 'packages/eclipsa/core/internal.ts')
+const nativeEntry = path.join(repoRoot, 'packages/native/mod.ts')
+const nativeJsxRuntime = path.join(repoRoot, 'packages/native/jsx-runtime.ts')
+const nativeJsxDevRuntime = path.join(repoRoot, 'packages/native/jsx-dev-runtime.ts')
+const nativeCoreEntry = path.join(repoRoot, 'packages/native-core/mod.ts')
+const nativeSwiftUIEntry = path.join(repoRoot, 'packages/native-swiftui/mod.ts')
+
+const createFixture = async () => {
+  const root = await mkdtemp(path.join(tmpdir(), 'eclipsa-native-vite-'))
+  await mkdir(path.join(root, 'app'), { recursive: true })
+  await writeFile(
+    path.join(root, 'tsconfig.json'),
+    JSON.stringify(
+      {
+        extends: path.join(repoRoot, 'tsconfig.json'),
+        compilerOptions: {
+          jsxImportSource: '@eclipsa/native',
+        },
+        include: ['./app/**/*.ts', './app/**/*.tsx'],
+      },
+      null,
+      2,
+    ),
+  )
+  await writeFile(
+    path.join(root, 'package.json'),
+    JSON.stringify(
+      {
+        name: '@test/native-app',
+        private: true,
+        type: 'module',
+      },
+      null,
+      2,
+    ),
+  )
+  await writeFile(
+    path.join(root, 'app', '+layout.tsx'),
+    [
+      `export default function Layout(props: { children?: unknown }) {`,
+      `  return <windowGroup>{props.children}</windowGroup>`,
+      `}`,
+      '',
+    ].join('\n'),
+  )
+  await writeFile(
+    path.join(root, 'app', '+native-map.ts'),
+    [
+      `import { Text, VStack, WindowGroup } from '@eclipsa/native-swiftui'`,
+      `export const div = VStack`,
+      `export const span = Text`,
+      `export const windowGroup = WindowGroup`,
+      '',
+    ].join('\n'),
+  )
+  await writeFile(
+    path.join(root, 'app', '+page.tsx'),
+    [
+      `import { useSignal } from 'eclipsa'`,
+      `export default function App() {`,
+      `  const count = useSignal(1)`,
+      `  return <div><span value={\`count \${count.value}\`} /></div>`,
+      `}`,
+      '',
+    ].join('\n'),
+  )
+  return root
+}
+
+const waitFor = async (fn: () => Promise<boolean>, timeoutMs = 10_000) => {
+  const deadline = Date.now() + timeoutMs
+  while (Date.now() < deadline) {
+    if (await fn()) {
+      return
+    }
+    await new Promise((resolve) => setTimeout(resolve, 100))
+  }
+  throw new Error(`Timed out after ${timeoutMs}ms`)
+}
+
+const resolveConfig = (root: string) => ({
+  appType: 'custom' as const,
+  plugins: [native({ target: swiftui() })],
+  resolve: {
+    alias: [
+      {
+        find: /^eclipsa\/internal$/,
+        replacement: eclipsaInternalEntry,
+      },
+      {
+        find: /^eclipsa$/,
+        replacement: eclipsaEntry,
+      },
+      {
+        find: /^@eclipsa\/native\/jsx-dev-runtime$/,
+        replacement: nativeJsxDevRuntime,
+      },
+      {
+        find: /^@eclipsa\/native\/jsx-runtime$/,
+        replacement: nativeJsxRuntime,
+      },
+      {
+        find: /^@eclipsa\/native$/,
+        replacement: nativeEntry,
+      },
+      {
+        find: /^@eclipsa\/native-core$/,
+        replacement: nativeCoreEntry,
+      },
+      {
+        find: /^@eclipsa\/native-swiftui$/,
+        replacement: nativeSwiftUIEntry,
+      },
+    ],
+  },
+  root,
+})
+
+describe('@eclipsa/native vite plugin', () => {
+  const cleanup = new Set<string>()
+
+  afterEach(async () => {
+    for (const directory of cleanup) {
+      await rm(directory, { force: true, recursive: true })
+    }
+    cleanup.clear()
+  })
+
+  it('builds a single bootstrap bundle plus manifest', async () => {
+    const root = await createFixture()
+    cleanup.add(root)
+
+    const builder = await createBuilder({
+      ...resolveConfig(root),
+    })
+    await builder.buildApp()
+    const outDir = path.join(root, 'dist', 'native')
+    const fileNames = await readdir(outDir)
+    expect(fileNames).toContain('bootstrap.js')
+    expect(fileNames).toContain('manifest.json')
+
+    const manifestSource = await readFile(path.join(outDir, 'manifest.json'), 'utf8')
+    expect(manifestSource).toContain('"target": "swiftui"')
+    expect(manifestSource).toContain('"bootstrap": "./bootstrap.js"')
+  })
+
+  it('serves a native dev manifest plus module RPC through vite dev', async () => {
+    const root = await createFixture()
+    cleanup.add(root)
+
+    const server = await createServer({
+      ...resolveConfig(root),
+      server: {
+        host: '127.0.0.1',
+        port: 0,
+      },
+    })
+    try {
+      await server.listen()
+      const address = server.httpServer?.address()
+      const port = typeof address === 'object' && address ? address.port : 5173
+      await waitFor(async () => {
+        const response = await fetch(`http://127.0.0.1:${port}/__eclipsa_native__/manifest.json`)
+        return response.status === 200
+      })
+      const manifestResponse = await fetch(
+        `http://127.0.0.1:${port}/__eclipsa_native__/manifest.json`,
+      )
+      expect(manifestResponse.status).toBe(200)
+      const manifest = await manifestResponse.json()
+      expect(manifest.mode).toBe('dev')
+      expect(manifest.target).toBe('swiftui')
+      expect(manifest.entry).toBe('virtual:eclipsa-native/bootstrap')
+      expect(typeof manifest.rpc).toBe('string')
+      expect(typeof manifest.hmr?.url).toBe('string')
+      expect(server.environments.nativeSwift).toBeDefined()
+      expect(
+        typeof (server.environments.nativeSwift as { dispatchFetch?: unknown }).dispatchFetch,
+      ).toBe('function')
+
+      const rpcResponse = await fetch(`http://127.0.0.1:${port}/__eclipsa_native__/rpc`, {
+        body: JSON.stringify({
+          data: [manifest.entry, null, { startOffset: 0 }],
+          name: 'fetchModule',
+        }),
+        headers: {
+          'content-type': 'application/json',
+        },
+        method: 'POST',
+      })
+      expect(rpcResponse.status).toBe(200)
+      const rpcPayload = await rpcResponse.json()
+      expect(rpcPayload.result.code).toContain('bootNativeApplication')
+      expect(rpcPayload.result.code).toContain('__eclipsaNativeApplyAppUpdate')
+      expect(rpcPayload.result.code).toContain('eclipsa:native-map-update')
+      expect(rpcPayload.result.code).toContain(
+        'runner.importModule("virtual:eclipsa-native/map", null);',
+      )
+      expect(rpcPayload.result.code).toContain('resolveNativeHotRegistry')
+      expect(rpcPayload.result.code).toContain('currentNativeModule')
+      expect(rpcPayload.result.url).toBe('virtual:eclipsa-native/bootstrap')
+
+      const appRpcResponse = await fetch(`http://127.0.0.1:${port}/__eclipsa_native__/rpc`, {
+        body: JSON.stringify({
+          data: ['virtual:eclipsa-native/app', null, { startOffset: 0 }],
+          name: 'fetchModule',
+        }),
+        headers: {
+          'content-type': 'application/json',
+        },
+        method: 'POST',
+      })
+      expect(appRpcResponse.status).toBe(200)
+      const appRpcPayload = await appRpcResponse.json()
+      expect(appRpcPayload.result.code).toContain('createRouteElement')
+      expect(appRpcPayload.result.code).toContain('/app/+layout.tsx')
+      expect(appRpcPayload.result.code).toContain('/app/+page.tsx')
+      expect(appRpcPayload.result.code).toContain('__vite_ssr_import_meta__.hot.accept')
+      expect(appRpcPayload.result.code).toContain('__eclipsa$hotRegistry')
+
+      const mapRpcResponse = await fetch(`http://127.0.0.1:${port}/__eclipsa_native__/rpc`, {
+        body: JSON.stringify({
+          data: ['virtual:eclipsa-native/map', null, { startOffset: 0 }],
+          name: 'fetchModule',
+        }),
+        headers: {
+          'content-type': 'application/json',
+        },
+        method: 'POST',
+      })
+      expect(mapRpcResponse.status).toBe(200)
+      const mapRpcPayload = await mapRpcResponse.json()
+      expect(mapRpcPayload.result.code).toContain('const resolveNativeMap = (value) =>')
+      expect(mapRpcPayload.result.code).toContain('/app/+native-map.ts')
+      expect(mapRpcPayload.result.code).toContain('setNativeMap')
+      expect(mapRpcPayload.result.code).not.toContain(
+        'globalThis.__eclipsaNativeMountedApp?.rerender?.();',
+      )
+    } finally {
+      await server.close()
+    }
+  }, 15_000)
+})
diff --git a/packages/native/vite.ts b/packages/native/vite.ts
new file mode 100644
index 0000000..d761d91
--- /dev/null
+++ b/packages/native/vite.ts
@@ -0,0 +1,527 @@
+import { mkdir, writeFile } from 'node:fs/promises'
+import { existsSync } from 'node:fs'
+import { createRequire } from 'node:module'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import {
+  createNativeJsxTransformOptions,
+  emitNativeBootstrapModule,
+  emitResolvedNativeMapModule,
+  emitNativeRouteModule,
+  isNativeJsxLikeRequest,
+} from '@eclipsa/optimizer/native'
+import { createRoutes, matchRoute, normalizeRoutePath } from '../eclipsa/vite/utils/routing.ts'
+import {
+  mergeConfig,
+  transformWithOxc,
+  type EnvironmentOptions,
+  type FetchableDevEnvironment,
+  type Plugin,
+  type PluginOption,
+  type ResolvedConfig,
+  type ViteBuilder,
+} from 'vite'
+import {
+  incomingMessageToRequest,
+  responseForServerResponse,
+} from '../eclipsa/utils/node-connect.ts'
+
+const require = createRequire(import.meta.url)
+
+const VIRTUAL_BOOTSTRAP_MODULE_ID = 'virtual:eclipsa-native/bootstrap'
+const RESOLVED_BOOTSTRAP_MODULE_ID = '\0virtual:eclipsa-native/bootstrap'
+const VIRTUAL_APP_MODULE_ID = 'virtual:eclipsa-native/app'
+const RESOLVED_APP_MODULE_ID = '\0virtual:eclipsa-native/app'
+const VIRTUAL_MAP_MODULE_ID = 'virtual:eclipsa-native/map'
+const RESOLVED_MAP_MODULE_ID = '\0virtual:eclipsa-native/map'
+const VIRTUAL_DEV_CLIENT_MODULE_ID = 'virtual:eclipsa-native/dev-client'
+const RESOLVED_DEV_CLIENT_MODULE_ID = '\0virtual:eclipsa-native/dev-client'
+const DEFAULT_NATIVE_SERVE_PATH = '/__eclipsa_native__'
+const DEFAULT_NATIVE_OUT_DIR = path.join('dist', 'native')
+const DEFAULT_NATIVE_MAP_BASENAME = '+native-map'
+const DEFAULT_NATIVE_PATHNAME = '/'
+
+export interface NativePluginOptions {
+  environmentName?: string
+  outDir?: string
+  pathname?: string
+  servePath?: string
+  target: NativeTargetAdapter
+}
+
+interface ResolvedNativePluginOptions {
+  eclipsaDevClientFile: string
+  environmentName: string
+  manifestPath: string
+  nativeMapFile: string | null
+  outDir: string
+  route: ResolvedNativeRoute
+  root: string
+  servePath: string
+  target: ResolvedNativeTarget
+}
+
+interface ResolvedNativeRoute {
+  layoutFiles: string[]
+  pageFile: string
+  params: Record<string, string | string[] | undefined>
+  pathname: string
+}
+
+export interface NativeTargetAdapter {
+  bindingPackage: string
+  defaultMap?: Record<string, string>
+  environmentName: string
+  name: string
+  platform: string
+  createEnvironmentOptions?:
+    | ((context: NativeTargetEnvironmentContext) => EnvironmentOptions | null | undefined)
+    | undefined
+  workspaceFallback?: string
+}
+
+export interface NativeTargetEnvironmentContext {
+  manifestPath: string
+  root: string
+  servePath: string
+  target: {
+    name: string
+    platform: string
+  }
+}
+
+interface NativePluginState {
+  config?: ResolvedConfig
+  resolved?: ResolvedNativePluginOptions
+}
+
+interface ResolvedNativeTarget extends NativeTargetAdapter {}
+
+interface NativeBootstrapChunk {
+  fileName: string
+  isEntry: boolean
+  type: 'chunk'
+}
+
+const resolveWorkspaceBinding = (target: ResolvedNativeTarget, root: string) => {
+  try {
+    return require.resolve(target.bindingPackage, { paths: [root] })
+  } catch {}
+  if (target.workspaceFallback && existsSync(target.workspaceFallback)) {
+    return target.workspaceFallback
+  }
+  throw new Error(
+    `Native target "${target.name}" requires ${target.bindingPackage}. Install it or provide the matching workspace package before using the native Vite plugin.`,
+  )
+}
+
+const resolveWorkspaceImport = (specifier: string, root: string, fallback: string) => {
+  try {
+    return require.resolve(specifier, { paths: [root] })
+  } catch {}
+  if (existsSync(fallback)) {
+    return fallback
+  }
+  throw new Error(
+    `Failed to resolve ${specifier}. Install the package or provide the matching workspace source before using the native Vite plugin.`,
+  )
+}
+
+const withLeadingSlash = (value: string) => (value.startsWith('/') ? value : `/${value}`)
+
+const normalizeServePath = (value: string) => withLeadingSlash(value).replace(/\/$/, '')
+
+const createNativeEnvironmentOptions = (
+  resolved: ResolvedNativePluginOptions,
+): EnvironmentOptions => {
+  const baseEnvironment: EnvironmentOptions = {
+    consumer: 'server',
+    build: {
+      emptyOutDir: true,
+      outDir: resolved.outDir,
+      rollupOptions: {
+        input: VIRTUAL_BOOTSTRAP_MODULE_ID,
+        output: {
+          entryFileNames: 'bootstrap.js',
+          format: 'iife',
+          inlineDynamicImports: true,
+        },
+      },
+      sourcemap: true,
+    },
+  }
+  const targetEnvironment =
+    resolved.target.createEnvironmentOptions?.({
+      manifestPath: resolved.manifestPath,
+      root: resolved.root,
+      servePath: resolved.servePath,
+      target: {
+        name: resolved.target.name,
+        platform: resolved.target.platform,
+      },
+    }) ?? {}
+  return mergeConfig(baseEnvironment, targetEnvironment)
+}
+
+const resolveNativeRoute = async (root: string, pathname: string): Promise<ResolvedNativeRoute> => {
+  const normalizedPath = normalizeRoutePath(pathname)
+  const routes = await createRoutes(root)
+  const matched = matchRoute(routes, normalizedPath)
+
+  if (!matched?.route.page) {
+    throw new Error(
+      `Could not find a native route for ${normalizedPath}. Add app/+page.tsx or pass native({ pathname }) with an existing route.`,
+    )
+  }
+
+  return {
+    layoutFiles: matched.route.layouts.map((layout) => layout.filePath),
+    pageFile: matched.route.page.filePath,
+    params: matched.params,
+    pathname: normalizedPath,
+  }
+}
+
+const resolveNativeMapFile = (root: string) => {
+  const basePath = path.resolve(root, 'app', DEFAULT_NATIVE_MAP_BASENAME)
+  for (const extension of ['.ts', '.tsx', '.js', '.jsx', '.mts', '.mjs']) {
+    const candidate = `${basePath}${extension}`
+    if (existsSync(candidate)) {
+      return candidate
+    }
+  }
+  return null
+}
+
+const resolveNativeOptions = async (
+  root: string,
+  options: NativePluginOptions,
+): Promise<ResolvedNativePluginOptions> => {
+  const target = options.target
+  if (!target) {
+    throw new Error(
+      'The native Vite plugin requires a platform adapter. Pass native({ target: swiftui() }) or another @eclipsa/native target adapter.',
+    )
+  }
+  resolveWorkspaceBinding(target, root)
+
+  const route = await resolveNativeRoute(root, options.pathname ?? DEFAULT_NATIVE_PATHNAME)
+
+  const servePath = normalizeServePath(options.servePath ?? DEFAULT_NATIVE_SERVE_PATH)
+  return {
+    eclipsaDevClientFile: resolveWorkspaceImport(
+      'eclipsa/dev-client',
+      root,
+      fileURLToPath(new URL('../eclipsa/core/dev-client/mod.ts', import.meta.url)),
+    ),
+    environmentName: options.environmentName ?? target.environmentName,
+    manifestPath: `${servePath}/manifest.json`,
+    nativeMapFile: resolveNativeMapFile(root),
+    outDir: path.resolve(root, options.outDir ?? DEFAULT_NATIVE_OUT_DIR),
+    route,
+    root,
+    servePath,
+    target,
+  }
+}
+
+const findBootstrapChunk = (
+  bundle: Record<string, { type: string; isEntry?: boolean; fileName: string }>,
+) =>
+  Object.values(bundle).find(
+    (item): item is NativeBootstrapChunk => item.type === 'chunk' && item.isEntry === true,
+  )
+
+const createNativeManifestSource = (
+  resolved: ResolvedNativePluginOptions,
+  bootstrapFileName: string,
+) =>
+  JSON.stringify(
+    {
+      bindingPackage: resolved.target.bindingPackage,
+      bootstrap: `./${bootstrapFileName}`,
+      platform: resolved.target.platform,
+      target: resolved.target.name,
+    },
+    null,
+    2,
+  )
+
+const resolveRequestOrigin = (
+  req: { headers: Record<string, string | string[] | undefined> },
+  server: { config: ResolvedConfig },
+) => {
+  const forwardedProto = req.headers['x-forwarded-proto']
+  const protocol =
+    (Array.isArray(forwardedProto) ? forwardedProto[0] : forwardedProto) ??
+    (server.config.server.https ? 'https' : 'http')
+  const headerHost = req.headers.host
+  const host =
+    (Array.isArray(headerHost) ? headerHost[0] : headerHost) ??
+    (typeof server.config.server.host === 'string'
+      ? server.config.server.host
+      : `127.0.0.1:${server.config.server.port}`)
+  return `${protocol}://${host}`
+}
+
+const resolveNativeRpcUrl = (origin: string, resolved: ResolvedNativePluginOptions) =>
+  new URL(`${resolved.servePath.replace(/\/$/, '')}/rpc`, `${origin}/`).href
+
+const resolveNativeHmrUrl = (origin: string, config: ResolvedConfig) => {
+  const hmrConfig = typeof config.server.hmr === 'object' ? config.server.hmr : undefined
+  const originUrl = new URL(origin)
+  const protocol = hmrConfig?.protocol ?? (originUrl.protocol === 'https:' ? 'wss' : 'ws')
+  const hostname = hmrConfig?.host ?? originUrl.hostname
+  const port = hmrConfig?.clientPort ?? hmrConfig?.port ?? originUrl.port
+  const basePath = hmrConfig?.path ? path.posix.join(config.base, hmrConfig.path) : config.base
+  const hostWithPort = port ? `${hostname}:${port}` : hostname
+  const url = new URL(`${protocol}://${hostWithPort}${basePath}`)
+  url.searchParams.set('token', config.webSocketToken)
+  return url.href
+}
+
+const createNativeDevManifest = (
+  origin: string,
+  config: ResolvedConfig,
+  resolved: ResolvedNativePluginOptions,
+) => ({
+  bindingPackage: resolved.target.bindingPackage,
+  entry: VIRTUAL_BOOTSTRAP_MODULE_ID,
+  hmr: {
+    url: resolveNativeHmrUrl(origin, config),
+  },
+  mode: 'dev' as const,
+  platform: resolved.target.platform,
+  rpc: resolveNativeRpcUrl(origin, resolved),
+  target: resolved.target.name,
+})
+
+const createNativeCorePlugin = (
+  state: NativePluginState,
+  options: NativePluginOptions,
+): Plugin => ({
+  name: 'vite-plugin-eclipsa-native',
+  enforce: 'pre',
+  async config(userConfig) {
+    const root = userConfig.root ?? process.cwd()
+    const resolved = await resolveNativeOptions(root, options)
+    state.resolved = resolved
+    return {
+      appType: 'custom',
+      builder: {},
+      environments: {
+        [resolved.environmentName]: {},
+      },
+    }
+  },
+  configEnvironment(name) {
+    const resolved = state.resolved
+    if (!resolved || name !== resolved.environmentName) {
+      return null
+    }
+    return createNativeEnvironmentOptions(resolved)
+  },
+  configResolved(config) {
+    state.config = config
+  },
+  async buildApp(builder: ViteBuilder) {
+    const resolved = state.resolved
+    if (!resolved) {
+      throw new Error('Resolved native plugin options are unavailable during buildApp().')
+    }
+    const environment = builder.environments[resolved.environmentName]
+    if (!environment) {
+      throw new Error(
+        `The native Vite plugin expected a build environment named "${resolved.environmentName}".`,
+      )
+    }
+    await builder.build(environment)
+  },
+  async configureServer(server) {
+    const resolved = state.resolved
+    if (!resolved) {
+      throw new Error('Resolved native plugin options are unavailable during configureServer().')
+    }
+    const environment = server.environments[resolved.environmentName] as
+      | FetchableDevEnvironment
+      | undefined
+    if (!environment) {
+      throw new Error(
+        `The native Vite plugin expected a dev environment named "${resolved.environmentName}". Configure it with Vite's environment API before starting the dev server.`,
+      )
+    }
+    if (typeof environment.dispatchFetch !== 'function') {
+      throw new Error(
+        `The native Vite plugin expected "${resolved.environmentName}" to be a fetchable dev environment.`,
+      )
+    }
+
+    server.middlewares.use(async (req, res, next) => {
+      const requestPath = req.url?.split('?')[0] ?? '/'
+      if (requestPath === '/' || requestPath === resolved.servePath) {
+        res.statusCode = 200
+        res.setHeader('Content-Type', 'application/json; charset=utf-8')
+        res.end(
+          JSON.stringify({
+            manifest: `${resolved.servePath}/manifest.json`,
+            platform: resolved.target.platform,
+            target: resolved.target.name,
+          }),
+        )
+        return
+      }
+
+      if (!requestPath.startsWith(resolved.servePath)) {
+        next()
+        return
+      }
+
+      if (requestPath === `${resolved.servePath}/manifest.json`) {
+        const origin = resolveRequestOrigin(req, server)
+        res.statusCode = 200
+        res.setHeader('Content-Type', 'application/json; charset=utf-8')
+        res.end(JSON.stringify(createNativeDevManifest(origin, server.config, resolved), null, 2))
+        return
+      }
+
+      if (requestPath === `${resolved.servePath}/rpc`) {
+        const response = await environment.dispatchFetch(incomingMessageToRequest(req))
+        await responseForServerResponse(response, res)
+        return
+      }
+
+      res.statusCode = 404
+      res.end('Not Found')
+    })
+  },
+})
+
+const createNativeHmrPlugin = (state: NativePluginState): Plugin => ({
+  name: 'vite-plugin-eclipsa-native:hmr',
+  enforce: 'post',
+  applyToEnvironment(environment) {
+    return environment.name === state.resolved?.environmentName
+  },
+  hotUpdate(options) {
+    const resolved = state.resolved
+    if (!resolved?.nativeMapFile || options.file !== resolved.nativeMapFile) {
+      return
+    }
+    this.environment.hot.send('eclipsa:native-map-update', {
+      file: resolved.nativeMapFile,
+    })
+  },
+})
+
+const createNativePlugin = (state: NativePluginState, options: NativePluginOptions): Plugin[] => [
+  createNativeCorePlugin(state, options),
+  createNativeHmrPlugin(state),
+]
+
+const createNativeResolverPlugin = (state: NativePluginState): Plugin => ({
+  name: 'vite-plugin-eclipsa-native:modules',
+  enforce: 'pre',
+  applyToEnvironment(environment) {
+    return environment.name === state.resolved?.environmentName
+  },
+  resolveId(id) {
+    if (id === VIRTUAL_BOOTSTRAP_MODULE_ID) {
+      return RESOLVED_BOOTSTRAP_MODULE_ID
+    }
+    if (id === VIRTUAL_APP_MODULE_ID) {
+      return RESOLVED_APP_MODULE_ID
+    }
+    if (id === VIRTUAL_MAP_MODULE_ID) {
+      return RESOLVED_MAP_MODULE_ID
+    }
+    if (id === VIRTUAL_DEV_CLIENT_MODULE_ID) {
+      return RESOLVED_DEV_CLIENT_MODULE_ID
+    }
+    return null
+  },
+  load(id) {
+    const resolved = state.resolved
+    if (!resolved) {
+      throw new Error('Resolved native plugin options are unavailable during load().')
+    }
+    if (id === RESOLVED_BOOTSTRAP_MODULE_ID) {
+      return emitNativeBootstrapModule({
+        appModuleId: VIRTUAL_APP_MODULE_ID,
+        hmr: state.config?.command === 'serve',
+        hmrHelpersImport: resolved.eclipsaDevClientFile,
+        mapModuleId: VIRTUAL_MAP_MODULE_ID,
+      })
+    }
+    if (id === RESOLVED_APP_MODULE_ID) {
+      return emitNativeRouteModule({
+        hmr: state.config?.command === 'serve',
+        hmrHelpersImport: resolved.eclipsaDevClientFile,
+        layoutFiles: resolved.route.layoutFiles,
+        pageFile: resolved.route.pageFile,
+        params: resolved.route.params,
+        pathname: resolved.route.pathname,
+      })
+    }
+    if (id === RESOLVED_MAP_MODULE_ID) {
+      return emitResolvedNativeMapModule({
+        bindingImport: resolved.target.bindingPackage,
+        defaultMap: resolved.target.defaultMap,
+        mapFile: resolved.nativeMapFile,
+      })
+    }
+    if (id === RESOLVED_DEV_CLIENT_MODULE_ID) {
+      return [
+        `import { bootNativeDevClient } from ${JSON.stringify('@eclipsa/native-core')};`,
+        `bootNativeDevClient();`,
+        '',
+      ].join('\n')
+    }
+    return null
+  },
+  async transform(code, id) {
+    if (!isNativeJsxLikeRequest(id)) {
+      return null
+    }
+    const config = state.config
+    if (!config) {
+      throw new Error('Resolved Vite config is unavailable during transform().')
+    }
+    return transformWithOxc(code, id, createNativeJsxTransformOptions(id, config.isProduction))
+  },
+  generateBundle(_, bundle) {
+    const resolved = state.resolved
+    if (!resolved) {
+      throw new Error('Resolved native plugin options are unavailable during generateBundle().')
+    }
+    const bootstrapChunk = findBootstrapChunk(bundle)
+    if (!bootstrapChunk || bootstrapChunk.type !== 'chunk') {
+      throw new Error('Failed to emit the native bootstrap entry chunk.')
+    }
+    this.emitFile({
+      type: 'asset',
+      fileName: 'manifest.json',
+      source: createNativeManifestSource(resolved, bootstrapChunk.fileName),
+    })
+  },
+  async writeBundle(_, bundle) {
+    const resolved = state.resolved
+    if (!resolved) {
+      throw new Error('Resolved native plugin options are unavailable during writeBundle().')
+    }
+    const bootstrapChunk = findBootstrapChunk(bundle)
+    if (!bootstrapChunk) {
+      throw new Error('Failed to write the native manifest because the bootstrap chunk is missing.')
+    }
+    await mkdir(resolved.outDir, { recursive: true })
+    await writeFile(
+      path.join(resolved.outDir, 'manifest.json'),
+      createNativeManifestSource(resolved, bootstrapChunk.fileName),
+      'utf8',
+    )
+  },
+})
+
+export const native = (options: NativePluginOptions): PluginOption => {
+  const state: NativePluginState = {}
+  return [...createNativePlugin(state, options), createNativeResolverPlugin(state)]
+}
diff --git a/packages/optimizer/browser-artifacts.ts b/packages/optimizer/browser-artifacts.ts
new file mode 100644
index 0000000..956d729
--- /dev/null
+++ b/packages/optimizer/browser-artifacts.ts
@@ -0,0 +1,42 @@
+import { copyFileSync, existsSync, mkdirSync } from 'node:fs'
+import { dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+export const GENERATED_BROWSER_WASM_FILE_NAME = 'optimizer.wasm32-wasi.wasm'
+
+const GENERATED_BROWSER_WASM_RELATIVE_PATH = `./generated/${GENERATED_BROWSER_WASM_FILE_NAME}`
+const BROWSER_WASM_SOURCE_RELATIVE_PATHS = [
+  '../eclipsa/compiler/rust/target/wasm32-wasip1-threads/release/eclipsa_compiler.wasm',
+  '../eclipsa/compiler/rust/target/wasm32-wasip1-threads/debug/eclipsa_compiler.wasm',
+]
+
+export const resolveGeneratedBrowserWasmPath = (baseUrl = import.meta.url) => {
+  return fileURLToPath(new URL(GENERATED_BROWSER_WASM_RELATIVE_PATH, baseUrl))
+}
+
+export const resolveBrowserWasmSourcePath = (baseUrl = import.meta.url) => {
+  for (const relativePath of BROWSER_WASM_SOURCE_RELATIVE_PATHS) {
+    const absolutePath = fileURLToPath(new URL(relativePath, baseUrl))
+    if (existsSync(absolutePath)) {
+      return absolutePath
+    }
+  }
+
+  return null
+}
+
+export const syncGeneratedBrowserWasm = (baseUrl = import.meta.url) => {
+  const generatedPath = resolveGeneratedBrowserWasmPath(baseUrl)
+  if (existsSync(generatedPath)) {
+    return generatedPath
+  }
+
+  const sourcePath = resolveBrowserWasmSourcePath(baseUrl)
+  if (!sourcePath) {
+    return null
+  }
+
+  mkdirSync(dirname(generatedPath), { recursive: true })
+  copyFileSync(sourcePath, generatedPath)
+  return generatedPath
+}
diff --git a/packages/optimizer/mod.test.ts b/packages/optimizer/mod.test.ts
new file mode 100644
index 0000000..62b9bc7
--- /dev/null
+++ b/packages/optimizer/mod.test.ts
@@ -0,0 +1,346 @@
+import { execFile } from 'node:child_process'
+import { mkdtemp, mkdir, readFile, readdir, writeFile } from 'node:fs/promises'
+import os from 'node:os'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { promisify } from 'node:util'
+import { describe, expect, it } from 'vitest'
+import { resolveGeneratedArtifactPath } from './mod.ts'
+import {
+  buildPackageManifest,
+  PUBLISH_EXPORTS,
+  PUBLISH_FILES,
+} from './scripts/sync-package-manifest.ts'
+import {
+  GENERATED_BROWSER_WASM_FILE_NAME,
+  resolveBrowserWasmSourcePath,
+  syncGeneratedBrowserWasm,
+} from './browser-artifacts.ts'
+import {
+  prepareDownloadedArtifacts,
+  shouldFlattenArtifact,
+} from './scripts/prepare-downloaded-artifacts.ts'
+import { createNpmDirs, parseTargetTriple } from './scripts/create-npm-dirs.ts'
+
+const execFileAsync = promisify(execFile)
+const packageRoot = path.dirname(fileURLToPath(import.meta.url))
+const packageJsonPath = path.join(packageRoot, 'package.json')
+const publishWorkflowPath = path.resolve(packageRoot, '../../.github/workflows/publish.yml')
+
+const writePlaceholder = async (root: string, relativePath: string, contents = 'export {}\n') => {
+  const filePath = path.join(root, relativePath)
+  await mkdir(path.dirname(filePath), { recursive: true })
+  await writeFile(filePath, contents)
+}
+
+describe('optimizer packaging', () => {
+  it('exposes the browser compiler binding through a public subpath export', async () => {
+    const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf8')) as {
+      exports?: Record<string, { import?: string; types?: string }>
+    }
+
+    expect(packageJson.exports?.['./browser']).toEqual({
+      import: './generated/optimizer.wasi-browser.js',
+      types: './generated/index.d.ts',
+    })
+  })
+
+  it('resolves the generated napi binding entry from the optimizer package root', () => {
+    const wasmBindingPath = resolveGeneratedArtifactPath('optimizer.wasi.cjs')
+
+    expect(wasmBindingPath).toBeTruthy()
+    expect(wasmBindingPath).toContain(`${path.sep}generated${path.sep}`)
+    expect(wasmBindingPath).toMatch(/optimizer\.wasi\.cjs$/)
+  })
+
+  it('produces a publish manifest that points at built dist entries', async () => {
+    const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf8')) as Record<
+      string,
+      unknown
+    >
+    const publishManifest = buildPackageManifest(packageJson, 'publish')
+
+    expect(publishManifest.exports).toEqual(PUBLISH_EXPORTS)
+    expect(publishManifest.exports).toMatchObject({
+      './browser': {
+        import: './generated/optimizer.wasi-browser.js',
+        types: './generated/index.d.ts',
+      },
+    })
+    expect(publishManifest.files).toEqual(PUBLISH_FILES)
+    expect(publishManifest.main).toBe('./dist/mod.mjs')
+    expect(publishManifest.types).toBe('./dist/mod.d.mts')
+    expect(publishManifest.optionalDependencies).toMatchObject({
+      '@eclipsa/optimizer-darwin-arm64': packageJson.version,
+      '@eclipsa/optimizer-darwin-x64': packageJson.version,
+      '@eclipsa/optimizer-linux-arm64-gnu': packageJson.version,
+      '@eclipsa/optimizer-linux-arm64-musl': packageJson.version,
+      '@eclipsa/optimizer-linux-x64-gnu': packageJson.version,
+      '@eclipsa/optimizer-linux-x64-musl': packageJson.version,
+      '@eclipsa/optimizer-wasm32-wasi': packageJson.version,
+      '@eclipsa/optimizer-win32-arm64-msvc': packageJson.version,
+      '@eclipsa/optimizer-win32-x64-msvc': packageJson.version,
+    })
+  })
+
+  it('keeps direct emnapi dependencies required for wasi napi builds', async () => {
+    const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf8')) as Record<
+      string,
+      unknown
+    >
+    const dependencies = packageJson.dependencies as Record<string, string>
+    const devManifest = buildPackageManifest(packageJson, 'dev')
+
+    expect(dependencies).toMatchObject({
+      '@emnapi/core': '^1.9.0',
+      '@emnapi/runtime': '^1.9.0',
+      '@emnapi/wasi-threads': '^1.2.0',
+    })
+    expect(devManifest.dependencies).toMatchObject({
+      '@emnapi/core': '^1.9.0',
+      '@emnapi/runtime': '^1.9.0',
+      '@emnapi/wasi-threads': '^1.2.0',
+    })
+    expect(devManifest.optionalDependencies).toBeUndefined()
+  })
+
+  it('uses the workspace-pinned napi cli for packaging and publish builds', async () => {
+    const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf8')) as {
+      scripts?: Record<string, string>
+    }
+    const publishWorkflow = await readFile(publishWorkflowPath, 'utf8')
+
+    for (const scriptName of [
+      'artifacts',
+      'build:native:dev',
+      'build:native',
+      'prepublishOnly',
+      'version:napi',
+    ]) {
+      expect(packageJson.scripts?.[scriptName]).toContain('bun ./scripts/run-napi.ts')
+      expect(packageJson.scripts?.[scriptName]).not.toContain('bunx @napi-rs/cli')
+    }
+
+    expect(packageJson.scripts?.['create:npm-dirs']).toContain('bun ./scripts/create-npm-dirs.ts')
+    expect(packageJson.scripts?.['create:npm-dirs']).not.toContain('bun ./scripts/run-napi.ts')
+
+    expect(publishWorkflow).toContain('bun ./scripts/run-napi.ts build')
+    expect(publishWorkflow).not.toContain('bunx @napi-rs/cli build')
+  })
+
+  it('creates npm package directories for every configured napi target', async () => {
+    const tempRoot = await mkdtemp(path.join(os.tmpdir(), 'optimizer-create-npm-dirs-'))
+    const tempPackageJsonPath = path.join(tempRoot, 'package.json')
+
+    await writeFile(
+      tempPackageJsonPath,
+      `${JSON.stringify(
+        {
+          name: '@scope/example',
+          version: '1.2.3',
+          description: 'example package',
+          homepage: 'https://example.test/pkg',
+          license: 'MIT',
+          repository: {
+            type: 'git',
+            url: 'https://example.test/repo.git',
+          },
+          bugs: {
+            url: 'https://example.test/issues',
+          },
+          dependencies: {
+            '@napi-rs/wasm-runtime': '^1.2.3',
+          },
+          napi: {
+            binaryName: 'example',
+            targets: ['x86_64-unknown-linux-gnu', 'aarch64-apple-darwin', 'wasm32-wasip1-threads'],
+          },
+        },
+        null,
+        2,
+      )}\n`,
+    )
+
+    await createNpmDirs({
+      cwd: tempRoot,
+      packageJsonPath: './package.json',
+      npmDir: './npm',
+    })
+
+    expect(await readFile(path.join(tempRoot, 'npm/linux-x64-gnu/README.md'), 'utf8')).toContain(
+      'x86_64-unknown-linux-gnu',
+    )
+    expect(
+      JSON.parse(
+        await readFile(path.join(tempRoot, 'npm/linux-x64-gnu/package.json'), 'utf8'),
+      ) as Record<string, unknown>,
+    ).toMatchObject({
+      name: '@scope/example-linux-x64-gnu',
+      main: 'example.linux-x64-gnu.node',
+      files: ['example.linux-x64-gnu.node'],
+      os: ['linux'],
+      cpu: ['x64'],
+      libc: ['glibc'],
+    })
+    expect(
+      JSON.parse(
+        await readFile(path.join(tempRoot, 'npm/darwin-arm64/package.json'), 'utf8'),
+      ) as Record<string, unknown>,
+    ).toMatchObject({
+      name: '@scope/example-darwin-arm64',
+      main: 'example.darwin-arm64.node',
+      files: ['example.darwin-arm64.node'],
+      os: ['darwin'],
+      cpu: ['arm64'],
+    })
+    expect(
+      JSON.parse(
+        await readFile(path.join(tempRoot, 'npm/wasm32-wasi/package.json'), 'utf8'),
+      ) as Record<string, unknown>,
+    ).toMatchObject({
+      name: '@scope/example-wasm32-wasi',
+      main: 'example.wasi.cjs',
+      browser: 'example.wasi-browser.js',
+      files: [
+        'example.wasm32-wasi.wasm',
+        'example.wasi.cjs',
+        'example.wasi-browser.js',
+        'wasi-worker.mjs',
+        'wasi-worker-browser.mjs',
+      ],
+      cpu: ['wasm32'],
+      dependencies: {
+        '@napi-rs/wasm-runtime': '^1.2.3',
+      },
+      engines: {
+        node: '>=14.0.0',
+      },
+    })
+  })
+
+  it('materializes every target configured in the optimizer package', async () => {
+    const tempRoot = await mkdtemp(path.join(os.tmpdir(), 'optimizer-all-npm-dirs-'))
+    const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf8')) as {
+      napi?: {
+        targets?: string[]
+      }
+    }
+
+    await writeFile(path.join(tempRoot, 'package.json'), await readFile(packageJsonPath, 'utf8'))
+    await createNpmDirs({
+      cwd: tempRoot,
+      packageJsonPath: './package.json',
+      npmDir: './npm',
+    })
+
+    const actualDirs = (await readdir(path.join(tempRoot, 'npm'))).sort()
+    const expectedDirs = (packageJson.napi?.targets ?? []).map(
+      (target) => parseTargetTriple(target).platformArchABI,
+    )
+
+    expect(actualDirs).toEqual(expectedDirs.sort())
+  })
+
+  it('flattens downloaded binding artifacts before npm artifact hydration', async () => {
+    const tempRoot = await mkdtemp(path.join(os.tmpdir(), 'optimizer-artifacts-'))
+    const artifactsDir = path.join(tempRoot, 'artifacts')
+    const nestedDir = path.join(artifactsDir, 'bindings-wasm32-wasip1-threads')
+
+    await writePlaceholder(nestedDir, 'optimizer.wasi.cjs', 'module.exports = {}\n')
+    await writePlaceholder(nestedDir, 'optimizer.wasi-browser.js')
+    await writePlaceholder(nestedDir, 'wasi-worker.mjs')
+    await writePlaceholder(nestedDir, 'wasi-worker-browser.mjs')
+    await writeFile(
+      path.join(nestedDir, 'optimizer.wasm32-wasi.wasm'),
+      new Uint8Array([0x00, 0x61, 0x73, 0x6d]),
+    )
+    await writePlaceholder(nestedDir, 'ignored.txt')
+
+    await prepareDownloadedArtifacts(artifactsDir)
+
+    expect(shouldFlattenArtifact('optimizer.wasi.cjs')).toBe(true)
+    expect(shouldFlattenArtifact('ignored.txt')).toBe(false)
+    expect(await readFile(path.join(artifactsDir, 'optimizer.wasi.cjs'), 'utf8')).toContain(
+      'module.exports',
+    )
+    expect(await readFile(path.join(artifactsDir, 'optimizer.wasi-browser.js'), 'utf8')).toContain(
+      'export {}',
+    )
+    expect(await readFile(path.join(artifactsDir, 'wasi-worker.mjs'), 'utf8')).toContain(
+      'export {}',
+    )
+    expect(await readFile(path.join(artifactsDir, 'wasi-worker-browser.mjs'), 'utf8')).toContain(
+      'export {}',
+    )
+    expect(await readFile(path.join(artifactsDir, 'optimizer.wasm32-wasi.wasm'))).toEqual(
+      Buffer.from([0x00, 0x61, 0x73, 0x6d]),
+    )
+    await expect(readFile(path.join(artifactsDir, 'ignored.txt'), 'utf8')).rejects.toMatchObject({
+      code: 'ENOENT',
+    })
+  })
+
+  it('runs artifact flattening in publish workflow before npm hydration', async () => {
+    const publishWorkflow = await readFile(publishWorkflowPath, 'utf8')
+
+    expect(publishWorkflow).toContain('name: Flatten downloaded binding artifacts')
+    expect(publishWorkflow).toContain('run: bun ./scripts/prepare-downloaded-artifacts.ts')
+  })
+
+  it('packs only publish artifacts and excludes native binaries', async () => {
+    const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf8')) as Record<
+      string,
+      unknown
+    >
+    const publishManifest = buildPackageManifest(packageJson, 'publish')
+    const tempRoot = await mkdtemp(path.join(os.tmpdir(), 'optimizer-pack-'))
+
+    await writeFile(
+      path.join(tempRoot, 'package.json'),
+      `${JSON.stringify(publishManifest, null, 2)}\n`,
+    )
+
+    await writePlaceholder(tempRoot, 'dist/mod.mjs')
+    await writePlaceholder(tempRoot, 'dist/mod.d.mts')
+    await writePlaceholder(tempRoot, 'generated/optimizer.wasi.cjs', 'module.exports = {}\n')
+    await writePlaceholder(tempRoot, 'generated/browser.js')
+    await writePlaceholder(tempRoot, 'generated/wasi-worker.mjs')
+    await writePlaceholder(tempRoot, 'generated/index.d.ts')
+    await writeFile(
+      path.join(tempRoot, 'generated/optimizer.linux-x64-gnu.node'),
+      new Uint8Array([0x00]),
+    )
+    await writeFile(
+      path.join(tempRoot, 'generated/optimizer.wasm32-wasi.wasm'),
+      new Uint8Array([0x00, 0x61, 0x73, 0x6d]),
+    )
+
+    const { stdout } = await execFileAsync('bun', ['pm', 'pack', '--dry-run'], {
+      cwd: tempRoot,
+      encoding: 'utf8',
+    })
+
+    expect(stdout).toContain('generated/browser.js')
+    expect(stdout).toContain('generated/optimizer.wasi.cjs')
+    expect(stdout).toContain('generated/optimizer.wasm32-wasi.wasm')
+    expect(stdout).not.toContain('generated/optimizer.linux-x64-gnu.node')
+  }, 15000)
+
+  it('syncs the browser wasm artifact from the compiler release target into generated output', async () => {
+    const tempRoot = await mkdtemp(path.join(os.tmpdir(), 'optimizer-browser-wasm-'))
+    const baseUrl = new URL(`file://${path.join(tempRoot, 'browser-artifacts.ts')}`)
+    const releaseWasmPath = path.join(
+      tempRoot,
+      '../eclipsa/compiler/rust/target/wasm32-wasip1-threads/release/eclipsa_compiler.wasm',
+    )
+
+    await mkdir(path.dirname(releaseWasmPath), { recursive: true })
+    await writeFile(releaseWasmPath, new Uint8Array([0x00, 0x61, 0x73, 0x6d]))
+
+    expect(resolveBrowserWasmSourcePath(baseUrl.href)).toBe(path.resolve(releaseWasmPath))
+
+    const syncedPath = syncGeneratedBrowserWasm(baseUrl.href)
+    expect(syncedPath).toBe(path.join(tempRoot, 'generated', GENERATED_BROWSER_WASM_FILE_NAME))
+    expect(await readFile(syncedPath!)).toEqual(Buffer.from([0x00, 0x61, 0x73, 0x6d]))
+  })
+})
diff --git a/packages/eclipsa/compiler/native/mod.ts b/packages/optimizer/mod.ts
similarity index 74%
rename from packages/eclipsa/compiler/native/mod.ts
rename to packages/optimizer/mod.ts
index 7787f59..fd20564 100644
--- a/packages/eclipsa/compiler/native/mod.ts
+++ b/packages/optimizer/mod.ts
@@ -60,11 +60,8 @@ interface CompilerRequest {
   target: CompilerTarget
 }
 
-const GENERATED_ARTIFACT_RELATIVE_DIRS = [
-  './generated',
-  '../compiler/native/generated',
-  '../../compiler/native/generated',
-]
+const OPTIMIZER_PACKAGE_NAME = '@eclipsa/optimizer'
+const GENERATED_ARTIFACT_RELATIVE_DIRS = ['./generated', '../generated', '../../generated']
 
 const require = createRequire(import.meta.url)
 
@@ -77,7 +74,8 @@ interface ProcessReportLike {
   sharedObjects?: string[]
 }
 
-const isFileMusl = (filePath: string) => filePath.includes('libc.musl-') || filePath.includes('ld-musl-')
+const isFileMusl = (filePath: string) =>
+  filePath.includes('libc.musl-') || filePath.includes('ld-musl-')
 
 const isMusl = () => {
   if (process.platform !== 'linux') {
@@ -90,7 +88,11 @@ const isMusl = () => {
 
   if (typeof process.report?.getReport === 'function') {
     const report = process.report.getReport() as ProcessReportLike
-    if (report?.header && 'glibcVersionRuntime' in report.header && report.header.glibcVersionRuntime) {
+    if (
+      report?.header &&
+      'glibcVersionRuntime' in report.header &&
+      report.header.glibcVersionRuntime
+    ) {
       return false
     }
     if (Array.isArray(report?.sharedObjects) && report.sharedObjects.some(isFileMusl)) {
@@ -99,12 +101,16 @@ const isMusl = () => {
   }
 
   try {
-    return require('node:child_process').execSync('ldd --version', { encoding: 'utf8' }).includes('musl')
+    return require('node:child_process')
+      .execSync('ldd --version', { encoding: 'utf8' })
+      .includes('musl')
   } catch {
     return false
   }
 }
 
+const getTargetPackageName = (suffix: string) => `${OPTIMIZER_PACKAGE_NAME}-${suffix}`
+
 export const resolveGeneratedArtifactPath = (fileName: string) => {
   for (const relativeDir of GENERATED_ARTIFACT_RELATIVE_DIRS) {
     const absolutePath = fileURLToPath(new URL(`${relativeDir}/${fileName}`, import.meta.url))
@@ -143,8 +149,8 @@ const requireOptionalBinding = (packageName: string) => {
 
 const requireWasiBinding = () => {
   return (
-    requireGeneratedArtifact('eclipsa.wasi.cjs') ??
-    requireOptionalBinding('eclipsa-wasm32-wasip1-threads')
+    requireGeneratedArtifact('optimizer.wasi.cjs') ??
+    requireOptionalBinding(getTargetPackageName('wasm32-wasi'))
   )
 }
 
@@ -168,19 +174,31 @@ const requireNativeBinding = () => {
 
   if (process.platform === 'darwin') {
     if (process.arch === 'arm64') {
-      return requirePreferredBinding('eclipsa.darwin-arm64.node', 'eclipsa-darwin-arm64')
+      return requirePreferredBinding(
+        'optimizer.darwin-arm64.node',
+        getTargetPackageName('darwin-arm64'),
+      )
     }
     if (process.arch === 'x64') {
-      return requirePreferredBinding('eclipsa.darwin-x64.node', 'eclipsa-darwin-x64')
+      return requirePreferredBinding(
+        'optimizer.darwin-x64.node',
+        getTargetPackageName('darwin-x64'),
+      )
     }
   }
 
   if (process.platform === 'win32') {
     if (process.arch === 'arm64') {
-      return requirePreferredBinding('eclipsa.win32-arm64-msvc.node', 'eclipsa-win32-arm64-msvc')
+      return requirePreferredBinding(
+        'optimizer.win32-arm64-msvc.node',
+        getTargetPackageName('win32-arm64-msvc'),
+      )
     }
     if (process.arch === 'x64') {
-      return requirePreferredBinding('eclipsa.win32-x64-msvc.node', 'eclipsa-win32-x64-msvc')
+      return requirePreferredBinding(
+        'optimizer.win32-x64-msvc.node',
+        getTargetPackageName('win32-x64-msvc'),
+      )
     }
   }
 
@@ -188,14 +206,14 @@ const requireNativeBinding = () => {
     const libc = isMusl() ? 'musl' : 'gnu'
     if (process.arch === 'arm64') {
       return requirePreferredBinding(
-        `eclipsa.linux-arm64-${libc}.node`,
-        `eclipsa-linux-arm64-${libc}`,
+        `optimizer.linux-arm64-${libc}.node`,
+        getTargetPackageName(`linux-arm64-${libc}`),
       )
     }
     if (process.arch === 'x64') {
       return requirePreferredBinding(
-        `eclipsa.linux-x64-${libc}.node`,
-        `eclipsa-linux-x64-${libc}`,
+        `optimizer.linux-x64-${libc}.node`,
+        getTargetPackageName(`linux-x64-${libc}`),
       )
     }
   }
@@ -213,8 +231,8 @@ const loadNativeBinding = async () => {
 
       const localBuildHint =
         process.env.NAPI_RS_FORCE_WASI === '1'
-          ? 'Run "bun run build:native --filter eclipsa -- --target wasm32-wasip1-threads" or install the matching optional package.'
-          : 'Run "bun run build:native:dev --filter eclipsa" before using the compiler in the workspace, or install the matching optional package.'
+          ? 'Run "bun run build:native --filter @eclipsa/optimizer -- --target wasm32-wasip1-threads" or install the matching optional package.'
+          : 'Run "bun run build:native:dev --filter @eclipsa/optimizer" before using the compiler in the workspace, or install the matching optional package.'
       const details =
         loadErrors.length === 0
           ? 'No matching generated artifact or optional package was found.'
diff --git a/packages/optimizer/native.test.ts b/packages/optimizer/native.test.ts
new file mode 100644
index 0000000..32e7d55
--- /dev/null
+++ b/packages/optimizer/native.test.ts
@@ -0,0 +1,124 @@
+import {
+  createNativeJsxTransformOptions,
+  emitNativeBootstrapModule,
+  emitResolvedNativeMapModule,
+  emitNativeRouteModule,
+  isNativeJsxLikeRequest,
+  isNativeTestLikeRequest,
+} from './native.ts'
+import { describe, expect, it } from 'vitest'
+
+describe('optimizer native helpers', () => {
+  it('detects native JSX modules and test files', () => {
+    expect(isNativeJsxLikeRequest('/tmp/app/+page.tsx?direct')).toBe(true)
+    expect(isNativeJsxLikeRequest('/tmp/app/+page.ts')).toBe(false)
+    expect(isNativeTestLikeRequest('/tmp/pkg/runtime.test.tsx')).toBe(true)
+    expect(isNativeTestLikeRequest('/tmp/pkg/runtime.tsx')).toBe(false)
+  })
+
+  it('creates JSX transform options for @eclipsa/native', () => {
+    expect(createNativeJsxTransformOptions('/tmp/app/+page.tsx', true)).toEqual({
+      jsx: {
+        development: false,
+        importSource: '@eclipsa/native',
+        runtime: 'automatic',
+      },
+    })
+
+    expect(createNativeJsxTransformOptions('/tmp/app/+page.test.tsx', true)).toEqual({
+      jsx: {
+        development: true,
+        importSource: '@eclipsa/native',
+        runtime: 'automatic',
+      },
+    })
+  })
+
+  it('emits the native bootstrap module source for production', () => {
+    const source = emitNativeBootstrapModule({
+      appModuleId: 'virtual:eclipsa-native/app',
+    })
+
+    expect(source).toContain('import * as appModule from "virtual:eclipsa-native/app";')
+    expect(source).toContain('import "virtual:eclipsa-native/map";')
+    expect(source).toContain('let currentNativeEntry = resolveNativeEntry(appModule);')
+    expect(source).toContain('const updateNativeApplication = (nextAppModule = appModule) => {')
+    expect(source).toContain('return mountNativeEntry(currentNativeEntry);')
+    expect(source).not.toContain('import.meta.hot')
+  })
+
+  it('emits a hot-aware native bootstrap module source for dev', () => {
+    const source = emitNativeBootstrapModule({
+      appModuleId: 'virtual:eclipsa-native/app',
+      hmr: true,
+      hmrHelpersImport: '/tmp/eclipsa/dev-client.ts',
+    })
+
+    expect(source).toContain('import { applyHotUpdate } from "/tmp/eclipsa/dev-client.ts";')
+    expect(source).toContain('import.meta.hot.on("eclipsa:native-map-update", refreshNativeMap);')
+    expect(source).toContain('runner.importModule("virtual:eclipsa-native/map", null);')
+    expect(source).toContain('globalState.__eclipsaNativeApplyAppUpdate = (nextAppModule) => {')
+    expect(source).toContain('globalState.__eclipsaNativeMountedApp?.rerender?.();')
+    expect(source).toContain('let currentNativeModule = appModule;')
+    expect(source).toContain('let currentNativeHotRegistry = resolveNativeHotRegistry(appModule);')
+  })
+
+  it('emits a resolved native map module that merges defaults and app overrides', () => {
+    const source = emitResolvedNativeMapModule({
+      bindingImport: '@eclipsa/native-swiftui',
+      defaultMap: {
+        button: 'Button',
+        vstack: 'VStack',
+      },
+      mapFile: '/tmp/app/+native-map.ts',
+    })
+
+    expect(source).toContain('import * as nativeBinding from "@eclipsa/native-swiftui";')
+    expect(source).toContain('import * as appNativeMapModule from "/tmp/app/+native-map.ts";')
+    expect(source).toContain('import { setNativeMap } from "@eclipsa/native";')
+    expect(source).toContain('"button": nativeBinding["Button"]')
+    expect(source).toContain('"vstack": nativeBinding["VStack"]')
+    expect(source).toContain('const resolvedNativeMap = resolveNativeMap(appNativeMapModule);')
+    expect(source).toContain('setNativeMap(resolvedNativeMap);')
+    expect(source).not.toContain('import.meta.hot.accept')
+  })
+
+  it('emits a native route module source that composes layouts and page via createRouteElement', () => {
+    const source = emitNativeRouteModule({
+      layoutFiles: ['/tmp/app/+layout.tsx', '/tmp/app/dashboard/+layout.tsx'],
+      pageFile: '/tmp/app/dashboard/+page.tsx',
+      params: {
+        slug: 'overview',
+      },
+      pathname: '/dashboard',
+    })
+
+    expect(source).toContain('import { createRouteElement } from "eclipsa/internal";')
+    expect(source).toContain('import NativePage from "/tmp/app/dashboard/+page.tsx";')
+    expect(source).toContain('import NativeLayout0 from "/tmp/app/+layout.tsx";')
+    expect(source).toContain('import NativeLayout1 from "/tmp/app/dashboard/+layout.tsx";')
+    expect(source).toContain('pathname: "/dashboard"')
+    expect(source).toContain('"slug":"overview"')
+    expect(source).toContain('return createRouteElement(route);')
+  })
+
+  it('emits a self-accepting native route module source for dev', () => {
+    const source = emitNativeRouteModule({
+      hmr: true,
+      hmrHelpersImport: '/tmp/eclipsa/dev-client.ts',
+      layoutFiles: ['/tmp/app/+layout.tsx'],
+      pageFile: '/tmp/app/+page.tsx',
+      params: {},
+      pathname: '/',
+    })
+
+    expect(source).toContain(
+      'import { createHotRegistry, defineHotComponent } from "/tmp/eclipsa/dev-client.ts";',
+    )
+    expect(source).toContain('export const __eclipsa$hotRegistry = createHotRegistry();')
+    expect(source).toContain('const HotNativePage = defineHotComponent(NativePage')
+    expect(source).toContain('export default NativeRouteAppBase;')
+    expect(source).toContain('import.meta.hot.accept((nextModule) => {')
+    expect(source).toContain('globalThis.__eclipsaNativeApplyAppUpdate?.(nextModule ?? undefined);')
+  })
+})
diff --git a/packages/optimizer/native.ts b/packages/optimizer/native.ts
new file mode 100644
index 0000000..1a8e496
--- /dev/null
+++ b/packages/optimizer/native.ts
@@ -0,0 +1,230 @@
+const NATIVE_JSX_IMPORT_SOURCE = '@eclipsa/native'
+
+export interface EmitNativeBootstrapModuleOptions {
+  appModuleId: string
+  hmr?: boolean
+  hmrHelpersImport?: string
+  mapModuleId?: string
+}
+
+export interface EmitResolvedNativeMapModuleOptions {
+  bindingImport: string
+  defaultMap?: Record<string, string>
+  mapFile?: string | null
+}
+
+export interface EmitNativeRouteModuleOptions {
+  hmr?: boolean
+  hmrHelpersImport?: string
+  layoutFiles: string[]
+  pageFile: string
+  params: Record<string, string | string[] | undefined>
+  pathname: string
+  routeHelpersImport?: string
+}
+
+const stripRequestQuery = (value: string) => value.replace(/[?#].*$/, '')
+
+export const isNativeJsxLikeRequest = (id: string) => {
+  const normalized = stripRequestQuery(id)
+  return normalized.endsWith('.jsx') || normalized.endsWith('.tsx')
+}
+
+export const isNativeTestLikeRequest = (id: string) =>
+  /\.(?:test|spec)\.[^./]+$/.test(stripRequestQuery(id).replaceAll('\\', '/'))
+
+export const createNativeJsxTransformOptions = (id: string, isProduction: boolean) => ({
+  jsx: {
+    development: !isProduction || isNativeTestLikeRequest(id),
+    importSource: NATIVE_JSX_IMPORT_SOURCE,
+    runtime: 'automatic' as const,
+  },
+})
+
+export const emitNativeBootstrapModule = ({
+  appModuleId,
+  hmr = false,
+  hmrHelpersImport = 'eclipsa/dev-client',
+  mapModuleId = 'virtual:eclipsa-native/map',
+}: EmitNativeBootstrapModuleOptions) =>
+  [
+    `import * as appModule from ${JSON.stringify(appModuleId)};`,
+    `import ${JSON.stringify(mapModuleId)};`,
+    `import { bootNativeApplication } from ${JSON.stringify(NATIVE_JSX_IMPORT_SOURCE)};`,
+    ...(!hmr ? [] : [`import { applyHotUpdate } from ${JSON.stringify(hmrHelpersImport)};`]),
+    `const globalState = globalThis;`,
+    `const resolveNativeEntry = (value) => value?.default ?? value ?? appModule.default ?? appModule;`,
+    ...(!hmr
+      ? []
+      : [`const resolveNativeHotRegistry = (value) => value?.__eclipsa$hotRegistry ?? null;`]),
+    ...(!hmr
+      ? [`let currentNativeEntry = resolveNativeEntry(appModule);`]
+      : [
+          `let currentNativeModule = appModule;`,
+          `let currentNativeEntry = resolveNativeEntry(appModule);`,
+          `let currentNativeHotRegistry = resolveNativeHotRegistry(appModule);`,
+        ]),
+    `const mountNativeEntry = (value = currentNativeEntry) => {`,
+    `  const mountedApp = globalState.__eclipsaNativeMountedApp;`,
+    `  if (mountedApp?.replace) {`,
+    `    mountedApp.replace(value);`,
+    `    return mountedApp;`,
+    `  }`,
+    `  mountedApp?.unmount?.();`,
+    `  const nextMountedApp = bootNativeApplication(value);`,
+    `  globalState.__eclipsaNativeMountedApp = nextMountedApp;`,
+    `  return nextMountedApp;`,
+    `};`,
+    `const updateNativeApplication = (nextAppModule = ${hmr ? 'currentNativeModule' : 'appModule'}) => {`,
+    ...(!hmr
+      ? [
+          `  currentNativeEntry = resolveNativeEntry(nextAppModule);`,
+          `  return mountNativeEntry(currentNativeEntry);`,
+        ]
+      : [
+          `  const nextEntry = resolveNativeEntry(nextAppModule);`,
+          `  const nextHotRegistry = resolveNativeHotRegistry(nextAppModule);`,
+          `  if (!globalState.__eclipsaNativeMountedApp) {`,
+          `    currentNativeModule = nextAppModule;`,
+          `    currentNativeEntry = nextEntry;`,
+          `    currentNativeHotRegistry = nextHotRegistry;`,
+          `    return mountNativeEntry(nextEntry);`,
+          `  }`,
+          `  if (currentNativeHotRegistry && nextHotRegistry && applyHotUpdate(currentNativeHotRegistry, nextHotRegistry) === "updated") {`,
+          `    currentNativeModule = {`,
+          `      __eclipsa$hotRegistry: currentNativeHotRegistry,`,
+          `      default: currentNativeEntry,`,
+          `    };`,
+          `      globalState.__eclipsaNativeMountedApp?.rerender?.();`,
+          `      return globalState.__eclipsaNativeMountedApp;`,
+          `  }`,
+          `  currentNativeModule = nextAppModule;`,
+          `  currentNativeEntry = nextEntry;`,
+          `  currentNativeHotRegistry = nextHotRegistry;`,
+          `  return mountNativeEntry(nextEntry);`,
+        ]),
+    `};`,
+    ...(!hmr
+      ? []
+      : [
+          `const refreshNativeMap = (payload) => {`,
+          `  const runner = globalState.__eclipsaNativeModuleRunner;`,
+          `  if (!runner) {`,
+          `    return;`,
+          `  }`,
+          `  const invalidatedModules = [${JSON.stringify(mapModuleId)}];`,
+          `  if (payload && typeof payload === "object" && typeof payload.file === "string") {`,
+          `    invalidatedModules.push(payload.file);`,
+          `  }`,
+          `  runner.invalidateModules(invalidatedModules);`,
+          `  runner.importModule(${JSON.stringify(mapModuleId)}, null);`,
+          `  globalState.__eclipsaNativeMountedApp?.rerender?.();`,
+          `};`,
+          `if (import.meta.hot) {`,
+          `  import.meta.hot.on("eclipsa:native-map-update", refreshNativeMap);`,
+          `}`,
+          `globalState.__eclipsaNativeApplyAppUpdate = (nextAppModule) => {`,
+          `  updateNativeApplication(nextAppModule ?? currentNativeModule);`,
+          `};`,
+        ]),
+    `updateNativeApplication(appModule);`,
+    '',
+  ].join('\n')
+
+export const emitResolvedNativeMapModule = ({
+  bindingImport,
+  defaultMap = {},
+  mapFile = null,
+}: EmitResolvedNativeMapModuleOptions) => {
+  const defaultEntries =
+    Object.entries(defaultMap).length === 0
+      ? '{}'
+      : `{\n${Object.entries(defaultMap)
+          .map(
+            ([alias, exportName]) =>
+              `  ${JSON.stringify(alias)}: nativeBinding[${JSON.stringify(exportName)}],`,
+          )
+          .join('\n')}\n}`
+
+  return [
+    `import * as nativeBinding from ${JSON.stringify(bindingImport)};`,
+    `import { setNativeMap } from ${JSON.stringify(NATIVE_JSX_IMPORT_SOURCE)};`,
+    mapFile
+      ? `import * as appNativeMapModule from ${JSON.stringify(mapFile)};`
+      : `const appNativeMapModule = {};`,
+    `const toPlainNativeMap = (value) => {`,
+    `  if (!value || typeof value !== "object") {`,
+    `    return {};`,
+    `  }`,
+    `  const namedEntries = Object.fromEntries(`,
+    `    Object.entries(value).filter(([key]) => key !== "__esModule" && key !== "default"),`,
+    `  );`,
+    `  const defaultEntries =`,
+    `    typeof value.default === "object" && value.default !== null ? value.default : {};`,
+    `  return { ...defaultEntries, ...namedEntries };`,
+    `};`,
+    `const defaultNativeMap = ${defaultEntries};`,
+    `const resolveNativeMap = (value) => ({ ...defaultNativeMap, ...toPlainNativeMap(value) });`,
+    `const resolvedNativeMap = resolveNativeMap(appNativeMapModule);`,
+    `setNativeMap(resolvedNativeMap);`,
+    `export default resolvedNativeMap;`,
+    '',
+  ].join('\n')
+}
+
+export const emitNativeRouteModule = ({
+  hmr = false,
+  hmrHelpersImport = 'eclipsa/dev-client',
+  layoutFiles,
+  pageFile,
+  params,
+  pathname,
+  routeHelpersImport = 'eclipsa/internal',
+}: EmitNativeRouteModuleOptions) => {
+  const layoutImports = layoutFiles.map(
+    (file, index) => `import NativeLayout${index} from ${JSON.stringify(file)};`,
+  )
+  const layoutEntries = layoutFiles.map(
+    (file, index) =>
+      `{ renderer: ${hmr ? `HotNativeLayout${index}` : `NativeLayout${index}`}, url: ${JSON.stringify(file)}, metadata: null, symbol: null }`,
+  )
+
+  return [
+    `import { createRouteElement } from ${JSON.stringify(routeHelpersImport)};`,
+    `import NativePage from ${JSON.stringify(pageFile)};`,
+    ...layoutImports,
+    ...(!hmr
+      ? []
+      : [
+          `import { createHotRegistry, defineHotComponent } from ${JSON.stringify(hmrHelpersImport)};`,
+          `export const __eclipsa$hotRegistry = createHotRegistry();`,
+          ...layoutFiles.map(
+            (_, index) =>
+              `const HotNativeLayout${index} = defineHotComponent(NativeLayout${index}, { name: ${JSON.stringify(`layout:${index}`)}, registry: __eclipsa$hotRegistry });`,
+          ),
+          `const HotNativePage = defineHotComponent(NativePage, { name: "page", registry: __eclipsa$hotRegistry });`,
+        ]),
+    `const route = Object.freeze({`,
+    `  error: null,`,
+    `  layouts: [${layoutEntries.join(', ')}],`,
+    `  page: { renderer: ${hmr ? 'HotNativePage' : 'NativePage'}, url: ${JSON.stringify(pageFile)}, metadata: null, symbol: null },`,
+    `  params: ${JSON.stringify(params)},`,
+    `  pathname: ${JSON.stringify(pathname)},`,
+    `  render: ${hmr ? 'HotNativePage' : 'NativePage'},`,
+    `});`,
+    `function NativeRouteAppBase() {`,
+    `  return createRouteElement(route);`,
+    `}`,
+    `export default NativeRouteAppBase;`,
+    ...(!hmr
+      ? []
+      : [
+          `if (import.meta.hot) {`,
+          `  import.meta.hot.accept((nextModule) => {`,
+          `    globalThis.__eclipsaNativeApplyAppUpdate?.(nextModule ?? undefined);`,
+          `  });`,
+          `}`,
+        ]),
+    '',
+  ].join('\n')
+}
diff --git a/packages/optimizer/package.json b/packages/optimizer/package.json
new file mode 100644
index 0000000..2bc6d8f
--- /dev/null
+++ b/packages/optimizer/package.json
@@ -0,0 +1,83 @@
+{
+  "name": "@eclipsa/optimizer",
+  "version": "0.0.0",
+  "homepage": "https://github.com/pnsk-lab/eclipsa",
+  "bugs": {
+    "url": "https://github.com/pnsk-lab/eclipsa/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pnsk-lab/eclipsa.git",
+    "directory": "packages/optimizer"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./mod.ts",
+      "import": "./mod.ts"
+    },
+    "./native": {
+      "types": "./native.ts",
+      "import": "./native.ts"
+    },
+    "./browser": {
+      "types": "./generated/index.d.ts",
+      "import": "./generated/optimizer.wasi-browser.js"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "types": "./dist/mod.d.mts",
+        "import": "./dist/mod.mjs"
+      },
+      "./native": {
+        "types": "./dist/native.d.mts",
+        "import": "./dist/native.mjs"
+      },
+      "./browser": {
+        "types": "./generated/index.d.ts",
+        "import": "./generated/optimizer.wasi-browser.js"
+      }
+    }
+  },
+  "scripts": {
+    "artifacts": "bun ./scripts/run-napi.ts artifacts --package-json-path ./package.json --output-dir ./generated --npm-dir ./npm --build-output-dir ./artifacts",
+    "build": "bun run build:js && bun run build:native",
+    "build:js": "vp pack",
+    "build:native:dev": "node -e \"require('node:fs').rmSync('./generated', { recursive: true, force: true })\" && bun ./scripts/run-napi.ts build --platform --manifest-path ../eclipsa/compiler/rust/Cargo.toml --package-json-path ./package.json --target-dir ../eclipsa/compiler/rust/target --output-dir ./generated --js-package-name @eclipsa/optimizer && bun ./scripts/sync-browser-wasm.ts",
+    "build:native": "node -e \"require('node:fs').rmSync('./generated', { recursive: true, force: true })\" && bun ./scripts/run-napi.ts build --platform --release --manifest-path ../eclipsa/compiler/rust/Cargo.toml --package-json-path ./package.json --target-dir ../eclipsa/compiler/rust/target --output-dir ./generated --js-package-name @eclipsa/optimizer && bun ./scripts/sync-browser-wasm.ts",
+    "create:npm-dirs": "bun ./scripts/create-npm-dirs.ts --package-json-path ./package.json --npm-dir ./npm",
+    "pack": "bun run build",
+    "prepublishOnly": "bun ./scripts/sync-package-manifest.ts publish && bun ./scripts/run-napi.ts pre-publish -t npm --package-json-path ./package.json --npm-dir ./npm",
+    "restore:manifest": "bun ./scripts/sync-package-manifest.ts dev",
+    "typecheck": "bunx tsc -p tsconfig.json --noEmit",
+    "version:napi": "bun ./scripts/run-napi.ts version --package-json-path ./package.json --npm-dir ./npm",
+    "test": "bun run build:native:dev && vp test --run",
+    "test:coverage": "bun run build:native:dev && c8 --reporter=lcov --reporter=json-summary --reporter=text bunx vp test --run"
+  },
+  "dependencies": {
+    "@emnapi/core": "^1.9.0",
+    "@emnapi/runtime": "^1.9.0",
+    "@emnapi/wasi-threads": "^1.2.0",
+    "@napi-rs/wasm-runtime": "^1.1.1"
+  },
+  "devDependencies": {
+    "@napi-rs/cli": "^3.5.1"
+  },
+  "napi": {
+    "binaryName": "optimizer",
+    "targets": [
+      "x86_64-apple-darwin",
+      "aarch64-apple-darwin",
+      "x86_64-unknown-linux-gnu",
+      "aarch64-unknown-linux-gnu",
+      "x86_64-unknown-linux-musl",
+      "aarch64-unknown-linux-musl",
+      "x86_64-pc-windows-msvc",
+      "aarch64-pc-windows-msvc",
+      "wasm32-wasip1-threads"
+    ]
+  }
+}
diff --git a/packages/optimizer/scripts/create-npm-dirs.ts b/packages/optimizer/scripts/create-npm-dirs.ts
new file mode 100644
index 0000000..638ac00
--- /dev/null
+++ b/packages/optimizer/scripts/create-npm-dirs.ts
@@ -0,0 +1,324 @@
+import { mkdir, readFile, rm, writeFile } from 'node:fs/promises'
+import path from 'node:path'
+
+type Platform = NodeJS.Platform | 'wasi' | 'wasm' | 'openharmony'
+type NodeArch =
+  | 'arm'
+  | 'arm64'
+  | 'ia32'
+  | 'loong64'
+  | 'ppc64'
+  | 'riscv64'
+  | 'universal'
+  | 'wasm32'
+  | 'x64'
+  | 's390x'
+
+interface RootPackageJson {
+  author?: string
+  authors?: string[]
+  bugs?: unknown
+  dependencies?: Record<string, string>
+  description?: string
+  engines?: Record<string, string>
+  homepage?: unknown
+  keywords?: string[]
+  license?: string
+  name: string
+  napi?: {
+    binaryName?: string
+    name?: string
+    package?: {
+      name?: string
+    }
+    packageName?: string
+    targets?: string[]
+  }
+  publishConfig?: {
+    access?: string
+    registry?: string
+  }
+  repository?: unknown
+  version: string
+}
+
+interface ParsedTarget {
+  abi: string | null
+  arch: NodeArch
+  platform: Platform
+  platformArchABI: string
+  triple: string
+}
+
+interface ScopedPackageJson {
+  author?: string
+  authors?: string[]
+  browser?: string
+  bugs?: unknown
+  cpu?: string[]
+  dependencies?: Record<string, string>
+  description?: string
+  engines?: Record<string, string>
+  files: string[]
+  homepage?: unknown
+  keywords?: string[]
+  libc?: string[]
+  license?: string
+  main: string
+  name: string
+  os?: string[]
+  publishConfig?: {
+    access?: string
+    registry?: string
+  }
+  repository?: unknown
+  version: string
+}
+
+interface CreateNpmDirsOptions {
+  cwd?: string
+  npmDir?: string
+  packageJsonPath?: string
+}
+
+const CPU_TO_NODE_ARCH: Record<string, NodeArch> = {
+  aarch64: 'arm64',
+  i686: 'ia32',
+  loongarch64: 'loong64',
+  powerpc64le: 'ppc64',
+  riscv64gc: 'riscv64',
+  s390x: 's390x',
+  wasm32: 'wasm32',
+  x86_64: 'x64',
+}
+
+const SYS_TO_NODE_PLATFORM: Record<string, Platform> = {
+  darwin: 'darwin',
+  freebsd: 'freebsd',
+  linux: 'linux',
+  ohos: 'openharmony',
+  wasi: 'wasi',
+  windows: 'win32',
+}
+
+const SUB_SYSTEMS = new Set(['android', 'ohos'])
+
+const readPackageJson = async (packageJsonPath: string) =>
+  JSON.parse(await readFile(packageJsonPath, 'utf8')) as RootPackageJson
+
+const parseTargetTriple = (rawTriple: string): ParsedTarget => {
+  if (
+    rawTriple === 'wasm32-wasi' ||
+    rawTriple === 'wasm32-wasi-preview1-threads' ||
+    rawTriple.startsWith('wasm32-wasip')
+  ) {
+    return {
+      triple: rawTriple,
+      platformArchABI: 'wasm32-wasi',
+      platform: 'wasi',
+      arch: 'wasm32',
+      abi: 'wasi',
+    }
+  }
+
+  const triple = rawTriple.endsWith('eabi') ? `${rawTriple.slice(0, -4)}-eabi` : rawTriple
+  const segments = triple.split('-')
+  let cpu: string
+  let sys: string
+  let abi: string | null = null
+
+  if (segments.length === 2) {
+    ;[cpu, sys] = segments
+  } else {
+    ;[cpu, , sys, abi = null] = segments
+  }
+
+  if (abi && SUB_SYSTEMS.has(abi)) {
+    sys = abi
+    abi = null
+  }
+
+  const platform = SYS_TO_NODE_PLATFORM[sys] ?? (sys as Platform)
+  const arch = CPU_TO_NODE_ARCH[cpu] ?? (cpu as NodeArch)
+
+  return {
+    triple: rawTriple,
+    platformArchABI: abi ? `${platform}-${arch}-${abi}` : `${platform}-${arch}`,
+    platform,
+    arch,
+    abi,
+  }
+}
+
+const pickDefined = <T extends object, K extends keyof T>(source: T, keys: K[]) =>
+  Object.fromEntries(
+    keys.flatMap((key) => {
+      const value = source[key]
+      return value === undefined ? [] : [[key, value]]
+    }),
+  ) as Partial<Pick<T, K>>
+
+const resolveBinaryName = (packageJson: RootPackageJson) =>
+  packageJson.napi?.binaryName ?? packageJson.napi?.name ?? 'index'
+
+const resolvePackageName = (packageJson: RootPackageJson) =>
+  packageJson.napi?.packageName ?? packageJson.napi?.package?.name ?? packageJson.name
+
+const resolveTargets = (packageJson: RootPackageJson) => {
+  const rawTargets = packageJson.napi?.targets ?? []
+  const uniqueTargets = new Set(rawTargets)
+
+  if (rawTargets.length === 0) {
+    throw new Error('Expected package.json napi.targets to contain at least one target.')
+  }
+
+  if (uniqueTargets.size !== rawTargets.length) {
+    const duplicateTarget = rawTargets.find((target, index) => rawTargets.indexOf(target) !== index)
+    throw new Error(`Duplicate targets are not allowed: ${duplicateTarget}`)
+  }
+
+  return rawTargets.map(parseTargetTriple)
+}
+
+const hasNode14OrNewer = (engines: Record<string, string> | undefined) => {
+  const declared = engines?.node
+  if (!declared) {
+    return false
+  }
+
+  const major = Number(declared.match(/\d+/)?.[0] ?? 0)
+  return Number.isFinite(major) && major >= 14
+}
+
+const createScopedPackageJson = (packageJson: RootPackageJson, target: ParsedTarget) => {
+  const binaryName = resolveBinaryName(packageJson)
+  const scopedPackageJson: ScopedPackageJson = {
+    name: `${resolvePackageName(packageJson)}-${target.platformArchABI}`,
+    version: packageJson.version,
+    cpu: [target.arch],
+    main:
+      target.arch === 'wasm32'
+        ? `${binaryName}.wasi.cjs`
+        : `${binaryName}.${target.platformArchABI}.node`,
+    files:
+      target.arch === 'wasm32'
+        ? [
+            `${binaryName}.wasm32-wasi.wasm`,
+            `${binaryName}.wasi.cjs`,
+            `${binaryName}.wasi-browser.js`,
+            'wasi-worker.mjs',
+            'wasi-worker-browser.mjs',
+          ]
+        : [`${binaryName}.${target.platformArchABI}.node`],
+    ...pickDefined(packageJson, [
+      'description',
+      'keywords',
+      'author',
+      'authors',
+      'homepage',
+      'license',
+      'engines',
+      'repository',
+      'bugs',
+    ]),
+  }
+
+  if (packageJson.publishConfig) {
+    const publishConfig = pickDefined(packageJson.publishConfig, ['registry', 'access'])
+    scopedPackageJson.publishConfig = publishConfig
+  }
+
+  if (target.arch !== 'wasm32') {
+    scopedPackageJson.os = [target.platform]
+  } else {
+    if (!hasNode14OrNewer(scopedPackageJson.engines)) {
+      scopedPackageJson.engines = {
+        node: '>=14.0.0',
+      }
+    }
+
+    const wasmRuntimeVersion = packageJson.dependencies?.['@napi-rs/wasm-runtime']
+    if (!wasmRuntimeVersion) {
+      throw new Error('Expected @napi-rs/wasm-runtime to be declared in dependencies.')
+    }
+
+    scopedPackageJson.browser = `${binaryName}.wasi-browser.js`
+    scopedPackageJson.dependencies = {
+      '@napi-rs/wasm-runtime': wasmRuntimeVersion,
+    }
+  }
+
+  if (target.abi === 'gnu') {
+    scopedPackageJson.libc = ['glibc']
+  } else if (target.abi === 'musl') {
+    scopedPackageJson.libc = ['musl']
+  }
+
+  return scopedPackageJson
+}
+
+const createScopedReadme = (
+  packageName: string,
+  target: ParsedTarget,
+) => `# \`${packageName}-${target.platformArchABI}\`
+
+This is the **${target.triple}** binary for \`${packageName}\`
+`
+
+export const createNpmDirs = async (options: CreateNpmDirsOptions = {}) => {
+  const cwd = path.resolve(options.cwd ?? process.cwd())
+  const packageJsonPath = path.resolve(cwd, options.packageJsonPath ?? 'package.json')
+  const npmDir = path.resolve(cwd, options.npmDir ?? 'npm')
+  const packageJson = await readPackageJson(packageJsonPath)
+  const packageName = resolvePackageName(packageJson)
+
+  await rm(npmDir, { recursive: true, force: true })
+
+  for (const target of resolveTargets(packageJson)) {
+    const targetDir = path.join(npmDir, target.platformArchABI)
+    await mkdir(targetDir, { recursive: true })
+    await writeFile(
+      path.join(targetDir, 'package.json'),
+      `${JSON.stringify(createScopedPackageJson(packageJson, target), null, 2)}\n`,
+    )
+    await writeFile(path.join(targetDir, 'README.md'), createScopedReadme(packageName, target))
+  }
+}
+
+const parseCliArgs = (argv: string[]) => {
+  const parsed: CreateNpmDirsOptions = {}
+
+  for (let index = 0; index < argv.length; index += 1) {
+    const argument = argv[index]
+    const value = argv[index + 1]
+
+    if (!value) {
+      continue
+    }
+
+    if (argument === '--cwd') {
+      parsed.cwd = value
+      index += 1
+      continue
+    }
+
+    if (argument === '--package-json-path') {
+      parsed.packageJsonPath = value
+      index += 1
+      continue
+    }
+
+    if (argument === '--npm-dir') {
+      parsed.npmDir = value
+      index += 1
+    }
+  }
+
+  return parsed
+}
+
+if (import.meta.main) {
+  await createNpmDirs(parseCliArgs(process.argv.slice(2)))
+}
+
+export { parseTargetTriple }
diff --git a/packages/optimizer/scripts/prepare-downloaded-artifacts.ts b/packages/optimizer/scripts/prepare-downloaded-artifacts.ts
new file mode 100644
index 0000000..628f70c
--- /dev/null
+++ b/packages/optimizer/scripts/prepare-downloaded-artifacts.ts
@@ -0,0 +1,79 @@
+import { access, copyFile, mkdir, opendir, readFile } from 'node:fs/promises'
+import path from 'node:path'
+
+const MATCHED_ARTIFACT_NAMES = [
+  /^optimizer\..+\.node$/,
+  /^optimizer\..+\.wasm$/,
+  /^optimizer\..+\.cjs$/,
+  /^optimizer\.wasi-browser\.js$/,
+  /^wasi-worker(?:-browser)?\.mjs$/,
+]
+
+export const shouldFlattenArtifact = (fileName: string) =>
+  MATCHED_ARTIFACT_NAMES.some((pattern) => pattern.test(fileName))
+
+const sameFileContent = async (leftPath: string, rightPath: string) => {
+  const [left, right] = await Promise.all([readFile(leftPath), readFile(rightPath)])
+  return left.equals(right)
+}
+
+const fileExists = async (filePath: string) => {
+  try {
+    await access(filePath)
+    return true
+  } catch {
+    return false
+  }
+}
+
+const walkFiles = async function* (rootDir: string): AsyncGenerator<string> {
+  const directory = await opendir(rootDir)
+  for await (const entry of directory) {
+    const entryPath = path.join(rootDir, entry.name)
+    if (entry.isDirectory()) {
+      yield* walkFiles(entryPath)
+      continue
+    }
+    if (entry.isFile()) {
+      yield entryPath
+    }
+  }
+}
+
+export const prepareDownloadedArtifacts = async (artifactsDir = path.resolve('artifacts')) => {
+  await mkdir(artifactsDir, { recursive: true })
+
+  for await (const sourcePath of walkFiles(artifactsDir)) {
+    const fileName = path.basename(sourcePath)
+    if (!shouldFlattenArtifact(fileName)) {
+      continue
+    }
+
+    const targetPath = path.join(artifactsDir, fileName)
+    if (sourcePath === targetPath) {
+      continue
+    }
+
+    if (await fileExists(targetPath)) {
+      if (await sameFileContent(sourcePath, targetPath)) {
+        continue
+      }
+      throw new Error(`Conflicting artifact contents for ${fileName}`)
+    }
+
+    await copyFile(sourcePath, targetPath)
+  }
+}
+
+const parseArtifactsDirArg = (argv: string[]) => {
+  for (let index = 0; index < argv.length; index += 1) {
+    if (argv[index] === '--artifacts-dir') {
+      return path.resolve(argv[index + 1] ?? '')
+    }
+  }
+  return path.resolve('artifacts')
+}
+
+if (import.meta.main) {
+  await prepareDownloadedArtifacts(parseArtifactsDirArg(process.argv.slice(2)))
+}
diff --git a/packages/optimizer/scripts/run-napi.ts b/packages/optimizer/scripts/run-napi.ts
new file mode 100644
index 0000000..eede77c
--- /dev/null
+++ b/packages/optimizer/scripts/run-napi.ts
@@ -0,0 +1,49 @@
+import { spawn } from 'node:child_process'
+import { readFile } from 'node:fs/promises'
+import { createRequire } from 'node:module'
+import path from 'node:path'
+
+type CliPackageJson = {
+  bin?: Record<string, string>
+}
+
+export const resolveNapiCliPath = async () => {
+  const require = createRequire(import.meta.url)
+  const packageJsonPath = require.resolve('@napi-rs/cli/package.json')
+  const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf8')) as CliPackageJson
+  const cliRelativePath = packageJson.bin?.napi
+
+  if (!cliRelativePath) {
+    throw new Error('Unable to resolve the napi binary entry from @napi-rs/cli/package.json.')
+  }
+
+  return path.resolve(path.dirname(packageJsonPath), cliRelativePath)
+}
+
+export const runNapiCli = async (argv: string[]) => {
+  const cliPath = await resolveNapiCliPath()
+
+  await new Promise<void>((resolve, reject) => {
+    const child = spawn(process.execPath, [cliPath, ...argv], {
+      stdio: 'inherit',
+      env: process.env,
+    })
+
+    child.once('error', reject)
+    child.once('exit', (code, signal) => {
+      if (signal) {
+        reject(new Error(`napi terminated with signal ${signal}`))
+        return
+      }
+      if (code && code !== 0) {
+        reject(new Error(`napi exited with status ${code}`))
+        return
+      }
+      resolve()
+    })
+  })
+}
+
+if (import.meta.main) {
+  await runNapiCli(process.argv.slice(2))
+}
diff --git a/packages/optimizer/scripts/sync-browser-wasm.ts b/packages/optimizer/scripts/sync-browser-wasm.ts
new file mode 100644
index 0000000..c5c626e
--- /dev/null
+++ b/packages/optimizer/scripts/sync-browser-wasm.ts
@@ -0,0 +1,7 @@
+import { syncGeneratedBrowserWasm } from '../browser-artifacts.ts'
+
+const syncedPath = syncGeneratedBrowserWasm()
+
+if (syncedPath) {
+  console.log(`Synced browser compiler wasm: ${syncedPath}`)
+}
diff --git a/packages/optimizer/scripts/sync-package-manifest.ts b/packages/optimizer/scripts/sync-package-manifest.ts
new file mode 100644
index 0000000..beca56d
--- /dev/null
+++ b/packages/optimizer/scripts/sync-package-manifest.ts
@@ -0,0 +1,118 @@
+import { readFile, writeFile } from 'node:fs/promises'
+import path from 'node:path'
+import { parseTargetTriple } from './create-npm-dirs.ts'
+
+type PackageJson = Record<string, unknown>
+type ManifestMode = 'dev' | 'publish'
+
+interface NapiConfig {
+  targets?: string[]
+}
+
+const buildOptionalDependencies = (packageJson: PackageJson) => {
+  const packageName = packageJson.name
+  const version = packageJson.version
+  const napi = packageJson.napi as NapiConfig | undefined
+
+  if (typeof packageName !== 'string' || packageName.length === 0) {
+    throw new Error('Expected package.json name to be a non-empty string.')
+  }
+
+  if (typeof version !== 'string' || version.length === 0) {
+    throw new Error('Expected package.json version to be a non-empty string.')
+  }
+
+  const targets = napi?.targets ?? []
+  if (!Array.isArray(targets) || targets.length === 0) {
+    return undefined
+  }
+
+  return Object.fromEntries(
+    targets.map((target) => {
+      const { platformArchABI } = parseTargetTriple(target)
+      return [`${packageName}-${platformArchABI}`, version]
+    }),
+  )
+}
+
+export const DEV_EXPORTS = {
+  '.': {
+    types: './mod.ts',
+    import: './mod.ts',
+  },
+  './browser': {
+    types: './generated/index.d.ts',
+    import: './generated/optimizer.wasi-browser.js',
+  },
+}
+
+export const PUBLISH_EXPORTS = {
+  '.': {
+    types: './dist/mod.d.mts',
+    import: './dist/mod.mjs',
+  },
+  './browser': {
+    types: './generated/index.d.ts',
+    import: './generated/optimizer.wasi-browser.js',
+  },
+}
+
+export const PUBLISH_FILES = [
+  'dist/**/*.mjs',
+  'dist/**/*.mjs.map',
+  'dist/**/*.d.mts',
+  'generated/**/*.js',
+  'generated/**/*.d.ts',
+  'generated/**/*.cjs',
+  'generated/**/*.mjs',
+  'generated/**/*.wasm',
+]
+
+export const buildPackageManifest = (packageJson: PackageJson, mode: ManifestMode): PackageJson => {
+  const nextManifest: PackageJson = {
+    ...packageJson,
+    exports: mode === 'publish' ? PUBLISH_EXPORTS : DEV_EXPORTS,
+  }
+
+  if (mode === 'publish') {
+    nextManifest.files = PUBLISH_FILES
+    nextManifest.main = './dist/mod.mjs'
+    nextManifest.types = './dist/mod.d.mts'
+    nextManifest.optionalDependencies = buildOptionalDependencies(packageJson)
+    return nextManifest
+  }
+
+  delete nextManifest.files
+  delete nextManifest.main
+  delete nextManifest.types
+  delete nextManifest.optionalDependencies
+  return nextManifest
+}
+
+const parseArgs = (argv: string[]) => {
+  const [modeArg, ...rest] = argv
+  let mode: ManifestMode | null = null
+  if (modeArg === 'publish' || modeArg === 'dev') {
+    mode = modeArg
+  }
+  if (!mode) {
+    throw new Error('Expected mode argument: dev | publish')
+  }
+
+  let packageJsonPath = path.resolve('package.json')
+  for (let index = 0; index < rest.length; index += 1) {
+    if (rest[index] === '--package-json') {
+      packageJsonPath = path.resolve(rest[index + 1] ?? '')
+      index += 1
+    }
+  }
+
+  return { mode, packageJsonPath }
+}
+
+if (import.meta.main) {
+  const { mode, packageJsonPath } = parseArgs(process.argv.slice(2))
+  const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf8')) as PackageJson
+  const nextManifest = buildPackageManifest(packageJson, mode)
+  await writeFile(packageJsonPath, `${JSON.stringify(nextManifest, null, 2)}\n`)
+}
diff --git a/packages/optimizer/tsconfig.json b/packages/optimizer/tsconfig.json
new file mode 100644
index 0000000..99cc971
--- /dev/null
+++ b/packages/optimizer/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["./**/*.ts", "./**/*.tsx", "./**/*.d.ts"]
+}
diff --git a/packages/optimizer/vite.config.ts b/packages/optimizer/vite.config.ts
new file mode 100644
index 0000000..92a0b11
--- /dev/null
+++ b/packages/optimizer/vite.config.ts
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite-plus'
+
+export default defineConfig({
+  test: {
+    include: ['**/*.test.ts'],
+    environment: 'node',
+  },
+  pack: {
+    entry: ['mod.ts'],
+    dts: true,
+    format: ['esm'],
+    clean: true,
+    sourcemap: true,
+  },
+})
diff --git a/packages/react/mod.test.ts b/packages/react/mod.test.ts
new file mode 100644
index 0000000..65ea3e3
--- /dev/null
+++ b/packages/react/mod.test.ts
@@ -0,0 +1,185 @@
+import { describe, expect, it, vi } from 'vitest'
+import { createElement } from 'react'
+import { getExternalComponentMeta } from 'eclipsa/internal'
+import { eclipsifyReact } from './mod.ts'
+import { hydrateRoot } from 'react-dom/client'
+
+vi.mock('react-dom/client', () => ({
+  hydrateRoot: vi.fn(() => ({
+    render: vi.fn(),
+    unmount: vi.fn(),
+  })),
+}))
+
+class FakeNode {
+  parentNode: FakeElement | null = null
+
+  remove() {
+    this.parentNode?.removeChild(this)
+  }
+}
+
+class FakeElement extends FakeNode {
+  attributes = new Map<string, string>()
+  childNodes: FakeNode[] = []
+
+  constructor(private readonly slotHosts: Map<string, FakeElement> = new Map()) {
+    super()
+  }
+
+  appendChild(node: FakeNode) {
+    node.remove()
+    this.childNodes.push(node)
+    node.parentNode = this
+    return node
+  }
+
+  removeChild(node: FakeNode) {
+    const index = this.childNodes.indexOf(node)
+    if (index >= 0) {
+      this.childNodes.splice(index, 1)
+      node.parentNode = null
+    }
+    return node
+  }
+
+  getAttribute(name: string) {
+    return this.attributes.get(name) ?? null
+  }
+
+  setAttribute(name: string, value: string) {
+    this.attributes.set(name, value)
+  }
+
+  querySelector(selector: string) {
+    const matched = selector.match(/data-e-slot="([^"]+)"/)
+    return matched ? (this.slotHosts.get(matched[1]) ?? null) : null
+  }
+}
+
+const flushExternalDomCommit = async () => {
+  await new Promise<void>((resolve) => {
+    setTimeout(resolve, 0)
+  })
+  await new Promise<void>((resolve) => {
+    setTimeout(resolve, 0)
+  })
+}
+
+describe('eclipsifyReact()', () => {
+  it('attaches react external metadata and renders slot hosts on the server', async () => {
+    const Island = eclipsifyReact((props: { title: string; children?: unknown }) =>
+      createElement(
+        'section',
+        null,
+        createElement('h1', { key: 'title' }, props.title),
+        props.children as any,
+      ),
+    )
+
+    const meta = getExternalComponentMeta(Island)
+    expect(meta?.kind).toBe('react')
+    expect(meta?.slots).toEqual(['children'])
+
+    const html = await meta!.renderToString({ title: 'React island' })
+    expect(html).toContain('<h1>React island</h1>')
+    expect(html).toContain('<e-slot-host data-e-slot="children"></e-slot-host>')
+  })
+
+  it('updates through the retained root without remounting the adapter contract', async () => {
+    const Island = eclipsifyReact((props: { title: string }) =>
+      createElement('h1', null, props.title),
+    )
+    const meta = getExternalComponentMeta(Island)!
+    const root = {
+      render: vi.fn(),
+    }
+
+    const instance = await meta.update(root, {} as HTMLElement, { title: 'Updated' })
+
+    expect(instance).toBe(root)
+    expect(root.render).toHaveBeenCalledTimes(1)
+    expect(root.render.mock.calls[0]?.[0]).toMatchObject({
+      props: {
+        title: 'Updated',
+      },
+    })
+  })
+
+  it('restores projected slot DOM after observed React-managed mutations', async () => {
+    const observed: Array<() => void> = []
+    class FakeMutationObserver {
+      constructor(private readonly callback: () => void) {}
+
+      disconnect() {}
+
+      observe() {
+        observed.push(this.callback)
+      }
+    }
+
+    const previousObserver = globalThis.MutationObserver
+    globalThis.MutationObserver = FakeMutationObserver as unknown as typeof MutationObserver
+
+    try {
+      const Island = eclipsifyReact((props: { children?: unknown }) =>
+        createElement('section', null, props.children as any),
+      )
+      const meta = getExternalComponentMeta(Island)!
+      const projectedNode = new FakeNode()
+      const slotHost = new FakeElement()
+      slotHost.appendChild(projectedNode)
+      const host = new FakeElement(new Map([['children', slotHost]]))
+
+      const instance = (await meta.hydrate(host as unknown as HTMLElement, {})) as {
+        slotDom: Map<string, Node[]>
+      }
+
+      expect(hydrateRoot).toHaveBeenCalledTimes(1)
+      expect(observed).toHaveLength(1)
+      await flushExternalDomCommit()
+
+      slotHost.removeChild(projectedNode)
+      observed[0]!()
+      await flushExternalDomCommit()
+
+      expect(slotHost.childNodes).toEqual([projectedNode])
+      expect(instance.slotDom.get('children')).toEqual([projectedNode])
+    } finally {
+      globalThis.MutationObserver = previousObserver
+    }
+  })
+
+  it('keeps the latest projected slot DOM during deferred restore even without an observed mutation', async () => {
+    vi.useFakeTimers()
+
+    try {
+      const Island = eclipsifyReact((props: { children?: unknown }) =>
+        createElement('section', null, props.children as any),
+      )
+      const meta = getExternalComponentMeta(Island)!
+      const ssrNode = new FakeNode()
+      const liveNode = new FakeNode()
+      const slotHost = new FakeElement()
+      slotHost.appendChild(ssrNode)
+      const host = new FakeElement(new Map([['children', slotHost]]))
+
+      const hydrating = meta.hydrate(host as unknown as HTMLElement, {})
+      await vi.runAllTimersAsync()
+      const instance = (await hydrating) as {
+        slotDom: Map<string, Node[]>
+      }
+
+      const updating = meta.update(instance as any, host as unknown as HTMLElement, {})
+      slotHost.removeChild(ssrNode)
+      slotHost.appendChild(liveNode)
+      await vi.runAllTimersAsync()
+      await updating
+
+      expect(slotHost.childNodes).toEqual([liveNode])
+      expect(instance.slotDom.get('children')).toEqual([liveNode])
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+})
diff --git a/packages/react/mod.ts b/packages/react/mod.ts
new file mode 100644
index 0000000..cada84a
--- /dev/null
+++ b/packages/react/mod.ts
@@ -0,0 +1,359 @@
+import type { Component } from 'eclipsa'
+import { setExternalComponentMeta, type ExternalComponentMeta } from 'eclipsa/internal'
+import {
+  Component as ReactComponent,
+  createElement,
+  type ComponentType,
+  type ReactElement,
+} from 'react'
+import { hydrateRoot, type Root } from 'react-dom/client'
+import { renderToString } from 'react-dom/server'
+
+const SLOT_HOST_TAG = 'e-slot-host'
+
+interface ReactExternalInstance {
+  observer?: MutationObserver
+  restoreScheduled: boolean
+  restoring: boolean
+  root: Root
+  slotDom: Map<string, Node[]>
+  slotHtml: Map<string, string>
+  slotNames: string[]
+}
+
+const restoreSlotNodes = (slotHost: Element, nodes: Node[]) => {
+  if (
+    slotHost.childNodes.length === nodes.length &&
+    nodes.every((node, index) => slotHost.childNodes[index] === node)
+  ) {
+    return
+  }
+  while (slotHost.firstChild) {
+    slotHost.firstChild.remove()
+  }
+  for (const node of nodes) {
+    slotHost.appendChild(node)
+  }
+}
+
+class ExternalSlotHost extends ReactComponent<{
+  name: string
+  slotState: Pick<ReactExternalInstance, 'slotDom' | 'slotHtml'>
+}> {
+  private host: HTMLElement | null = null
+
+  componentDidMount() {
+    this.restore()
+  }
+
+  componentDidUpdate() {
+    this.restore()
+  }
+
+  private restore() {
+    if (!this.host) {
+      return
+    }
+    restoreSlotNodes(this.host, this.props.slotState.slotDom.get(this.props.name) ?? [])
+    this.props.slotState.slotHtml.delete(this.props.name)
+  }
+
+  render() {
+    const html = this.props.slotState.slotHtml.get(this.props.name) ?? ''
+    return createElement(SLOT_HOST_TAG, {
+      'data-e-slot': this.props.name,
+      ...(html === '' ? {} : { dangerouslySetInnerHTML: { __html: html } }),
+      ref: (node: Element | null) => {
+        this.host = node as HTMLElement | null
+        if (this.host) {
+          restoreSlotNodes(this.host, this.props.slotState.slotDom.get(this.props.name) ?? [])
+          this.props.slotState.slotHtml.delete(this.props.name)
+        }
+      },
+      suppressHydrationWarning: true,
+    })
+  }
+}
+
+const waitForExternalDomCommit = async () => {
+  await new Promise<void>((resolve) => {
+    queueMicrotask(resolve)
+  })
+  await new Promise<void>((resolve) => {
+    if (typeof requestAnimationFrame === 'function') {
+      requestAnimationFrame(() => {
+        resolve()
+      })
+      return
+    }
+    setTimeout(resolve, 0)
+  })
+}
+
+const findSlotHost = (host: HTMLElement, name: string) => {
+  if (typeof host.querySelectorAll !== 'function') {
+    return host.querySelector?.(`${SLOT_HOST_TAG}[data-e-slot="${name}"]`) ?? null
+  }
+  const matches = [...host.querySelectorAll<HTMLElement>(`${SLOT_HOST_TAG}[data-e-slot="${name}"]`)]
+  if (matches.length === 0) {
+    return null
+  }
+  for (let index = matches.length - 1; index >= 0; index -= 1) {
+    const candidate = matches[index]!
+    if (candidate.childNodes.length > 0 || (candidate.innerHTML ?? '') !== '') {
+      return candidate
+    }
+  }
+  return matches[0]!
+}
+
+const captureSlotDom = (host: HTMLElement, slotNames: string[]) => {
+  const preserved = new Map<string, Node[]>()
+  if (typeof host.querySelector !== 'function') {
+    for (const name of slotNames) {
+      preserved.set(name, [])
+    }
+    return preserved
+  }
+  for (const name of slotNames) {
+    const slotHost = findSlotHost(host, name)
+    if (!slotHost) {
+      preserved.set(name, [])
+      continue
+    }
+    preserved.set(name, [...slotHost.childNodes])
+  }
+  return preserved
+}
+
+const captureSlotHtml = (host: HTMLElement, slotNames: string[]) => {
+  const captured = new Map<string, string>()
+  if (typeof host.querySelector !== 'function') {
+    for (const name of slotNames) {
+      captured.set(name, '')
+    }
+    return captured
+  }
+  for (const name of slotNames) {
+    const slotHost = findSlotHost(host, name)
+    captured.set(name, slotHost?.innerHTML ?? '')
+  }
+  return captured
+}
+
+const restoreSlotDom = (host: HTMLElement, slotDom: Map<string, Node[]>) => {
+  if (typeof host.querySelector !== 'function') {
+    return
+  }
+  for (const [name, nodes] of slotDom) {
+    const slotHost = findSlotHost(host, name)
+    if (!slotHost) {
+      continue
+    }
+    restoreSlotNodes(slotHost, nodes)
+  }
+}
+
+const mergeSlotDom = (previous: Map<string, Node[]> | undefined, next: Map<string, Node[]>) => {
+  const merged = new Map<string, Node[]>()
+  for (const [name, nodes] of next) {
+    if (nodes.length === 0 && (previous?.get(name)?.length ?? 0) > 0) {
+      merged.set(name, previous!.get(name)!)
+      continue
+    }
+    merged.set(name, nodes)
+  }
+  return merged
+}
+
+const scheduleSlotDomRestore = (host: HTMLElement, instance: ReactExternalInstance) => {
+  if (instance.restoreScheduled) {
+    return
+  }
+  instance.restoreScheduled = true
+  queueMicrotask(() => {
+    instance.restoreScheduled = false
+    instance.restoring = true
+    try {
+      instance.slotDom = mergeSlotDom(instance.slotDom, captureSlotDom(host, instance.slotNames))
+      restoreSlotDom(host, instance.slotDom)
+    } finally {
+      instance.restoring = false
+    }
+  })
+}
+
+const scheduleDeferredSlotDomRestore = (host: HTMLElement, instance: ReactExternalInstance) => {
+  scheduleSlotDomRestore(host, instance)
+  if (typeof setTimeout !== 'function') {
+    return
+  }
+  for (const delay of [0, 16, 100]) {
+    setTimeout(() => {
+      scheduleSlotDomRestore(host, instance)
+    }, delay)
+  }
+}
+
+const observeSlotDom = (
+  host: HTMLElement,
+  slotNames: string[],
+  instance: ReactExternalInstance,
+) => {
+  if (typeof MutationObserver !== 'function') {
+    return
+  }
+  const observer = new MutationObserver(() => {
+    if (instance.restoring) {
+      return
+    }
+    instance.slotDom = mergeSlotDom(instance.slotDom, captureSlotDom(host, slotNames))
+    scheduleSlotDomRestore(host, instance)
+  })
+  observer.observe(host, {
+    childList: true,
+    subtree: true,
+  })
+  instance.observer = observer
+}
+
+const toReactProps = (
+  props: Record<string, unknown>,
+  slotNames: string[],
+  slotState: Pick<ReactExternalInstance, 'slotDom' | 'slotHtml'>,
+) => {
+  const nextProps: Record<string, unknown> = { ...props }
+  for (const name of slotNames) {
+    nextProps[name] = createElement(ExternalSlotHost, {
+      key: `slot:${name}`,
+      name,
+      slotState,
+    })
+  }
+  return nextProps
+}
+
+export const eclipsifyReact = <TProps extends Record<string, unknown>>(
+  component: ComponentType<TProps>,
+  options?: {
+    slots?: readonly string[]
+  },
+): Component<TProps> => {
+  const slotNames = [...(options?.slots ?? ['children'])]
+  const meta: ExternalComponentMeta = {
+    async hydrate(host, props) {
+      let slotDom = captureSlotDom(host, slotNames)
+      let slotHtml = captureSlotHtml(host, slotNames)
+      const componentId =
+        host.getAttribute('data-e-external-snapshot') ??
+        host.getAttribute('data-e-external-component')
+      const snapshotStore = (
+        globalThis as typeof globalThis & {
+          __eclipsaExternalSlotSnapshotStore?: Record<
+            string,
+            {
+              dom?: Map<string, Node[]>
+              html?: Map<string, string>
+            }
+          >
+        }
+      ).__eclipsaExternalSlotSnapshotStore
+      const snapshotMap = (
+        globalThis as typeof globalThis & {
+          __eclipsaExternalSlotSnapshotMap?: Map<
+            HTMLElement,
+            {
+              dom?: Map<string, Node[]>
+              html?: Map<string, string>
+            }
+          >
+        }
+      ).__eclipsaExternalSlotSnapshotMap
+      const snapshotEntry =
+        (componentId ? snapshotStore?.[componentId] : undefined) ??
+        (() => {
+          if (!snapshotStore) {
+            return undefined
+          }
+          const entries = Object.values(snapshotStore)
+          return entries.length === 1 ? entries[0] : undefined
+        })()
+      const snapshotByHost = snapshotMap?.get(host)
+      if ([...slotDom.values()].every((nodes) => nodes.length === 0)) {
+        slotDom = snapshotByHost?.dom ?? snapshotEntry?.dom ?? slotDom
+      }
+      if ([...slotHtml.values()].every((html) => html === '')) {
+        slotHtml = snapshotByHost?.html ?? snapshotEntry?.html ?? slotHtml
+      }
+      const instance: ReactExternalInstance = {
+        restoreScheduled: false,
+        restoring: false,
+        root: null as unknown as Root,
+        slotDom,
+        slotHtml,
+        slotNames,
+      }
+      const root = hydrateRoot(
+        host,
+        createElement(
+          component,
+          toReactProps(props, slotNames, instance) as TProps,
+        ) as ReactElement,
+      )
+      instance.root = root
+      observeSlotDom(host, slotNames, instance)
+      await waitForExternalDomCommit()
+      scheduleDeferredSlotDomRestore(host, instance)
+      await waitForExternalDomCommit()
+      return instance
+    },
+    kind: 'react',
+    renderToString(props) {
+      return renderToString(
+        createElement(
+          component,
+          toReactProps(props, slotNames, { slotDom: new Map(), slotHtml: new Map() }) as TProps,
+        ) as ReactElement,
+      )
+    },
+    slots: slotNames,
+    async unmount(instance) {
+      const resolved = instance as ReactExternalInstance | Root | undefined
+      if (!resolved) {
+        return
+      }
+      if ('root' in resolved) {
+        resolved.observer?.disconnect()
+        resolved.root.unmount()
+        return
+      }
+      resolved.unmount()
+    },
+    async update(instance, host, props) {
+      const resolved = instance as ReactExternalInstance | Root
+      const root = 'root' in resolved ? resolved.root : resolved
+      const slotDom =
+        'root' in resolved
+          ? mergeSlotDom(resolved.slotDom, captureSlotDom(host, slotNames))
+          : undefined
+      if ('root' in resolved && slotDom) {
+        resolved.slotDom = slotDom
+      }
+      const slotState = 'root' in resolved ? resolved : { slotDom: new Map(), slotHtml: new Map() }
+      root.render(
+        createElement(
+          component,
+          toReactProps(props, slotNames, slotState) as TProps,
+        ) as ReactElement,
+      )
+      await waitForExternalDomCommit()
+      if ('root' in resolved && slotDom) {
+        scheduleDeferredSlotDomRestore(host, resolved)
+        await waitForExternalDomCommit()
+      }
+      return resolved
+    },
+  }
+
+  return setExternalComponentMeta((() => null) as Component<TProps>, meta)
+}
diff --git a/packages/react/package.json b/packages/react/package.json
new file mode 100644
index 0000000..8608812
--- /dev/null
+++ b/packages/react/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "@eclipsa/react",
+  "version": "0.0.0",
+  "homepage": "https://github.com/pnsk-lab/eclipsa",
+  "bugs": {
+    "url": "https://github.com/pnsk-lab/eclipsa/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pnsk-lab/eclipsa.git",
+    "directory": "packages/react"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./mod.ts",
+      "import": "./mod.ts"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "types": "./dist/mod.d.mts",
+        "import": "./dist/mod.mjs"
+      }
+    }
+  },
+  "scripts": {
+    "build": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
+    "pack": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
+    "test": "vp test --run",
+    "test:coverage": "c8 --reporter=lcov --reporter=json-summary --reporter=text bunx vp test --run",
+    "typecheck": "bun x tsc -p ../../tsconfig.json --noEmit"
+  },
+  "peerDependencies": {
+    "eclipsa": "*",
+    "react": "*",
+    "react-dom": "*"
+  }
+}
diff --git a/packages/react/vite.config.ts b/packages/react/vite.config.ts
new file mode 100644
index 0000000..53a0bd7
--- /dev/null
+++ b/packages/react/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite-plus'
+
+export default defineConfig({
+  pack: {
+    entry: './mod.ts',
+    dts: true,
+  },
+})
diff --git a/packages/vue/mod.test.ts b/packages/vue/mod.test.ts
new file mode 100644
index 0000000..922068e
--- /dev/null
+++ b/packages/vue/mod.test.ts
@@ -0,0 +1,146 @@
+import { describe, expect, it } from 'vitest'
+import { defineComponent, h } from 'vue'
+import { getExternalComponentMeta } from 'eclipsa/internal'
+import { eclipsifyVue } from './mod.ts'
+
+class FakeNode {
+  parentNode: FakeElement | null = null
+
+  remove() {
+    this.parentNode?.removeChild(this)
+  }
+}
+
+class FakeElement extends FakeNode {
+  attributes = new Map<string, string>()
+  childNodes: FakeNode[] = []
+
+  constructor(private readonly slotHosts: Map<string, FakeElement> = new Map()) {
+    super()
+  }
+
+  appendChild(node: FakeNode) {
+    node.remove()
+    this.childNodes.push(node)
+    node.parentNode = this
+    return node
+  }
+
+  removeChild(node: FakeNode) {
+    const index = this.childNodes.indexOf(node)
+    if (index >= 0) {
+      this.childNodes.splice(index, 1)
+      node.parentNode = null
+    }
+    return node
+  }
+
+  getAttribute(name: string) {
+    return this.attributes.get(name) ?? null
+  }
+
+  setAttribute(name: string, value: string) {
+    this.attributes.set(name, value)
+  }
+
+  querySelector(selector: string) {
+    const matched = selector.match(/data-e-slot="([^"]+)"/)
+    return matched ? (this.slotHosts.get(matched[1]) ?? null) : null
+  }
+
+  querySelectorAll(selector: string) {
+    const matched = selector.match(/data-e-slot="([^"]+)"/)
+    const slotHost = matched ? (this.slotHosts.get(matched[1]) ?? null) : null
+    return slotHost ? [slotHost] : []
+  }
+}
+
+describe('eclipsifyVue()', () => {
+  it('attaches vue external metadata and renders slot hosts on the server', async () => {
+    const Island = eclipsifyVue(
+      defineComponent({
+        props: {
+          title: String,
+        },
+        setup(props, { slots }) {
+          return () =>
+            h('section', null, [h('h1', null, props.title), slots.default ? slots.default() : null])
+        },
+      }),
+    )
+
+    const meta = getExternalComponentMeta(Island)
+    expect(meta?.kind).toBe('vue')
+    expect(meta?.slots).toEqual(['children'])
+
+    const html = await meta!.renderToString({ title: 'Vue island' })
+    expect(html).toContain('<h1>Vue island</h1>')
+    expect(html).toContain(
+      '<e-slot-host data-allow-mismatch="children" data-e-slot="children"></e-slot-host>',
+    )
+  })
+
+  it('updates the retained reactive props object in place', async () => {
+    const Island = eclipsifyVue(
+      defineComponent({
+        props: {
+          title: String,
+        },
+        setup(props) {
+          return () => h('h1', null, props.title)
+        },
+      }),
+    )
+    const meta = getExternalComponentMeta(Island)!
+    const instance = {
+      app: {
+        unmount() {},
+      },
+      slotDom: new Map<string, Node[]>(),
+      slotNames: ['children'],
+      state: {
+        props: {
+          stale: true,
+          title: 'Before',
+        },
+      },
+    }
+
+    const resolved = await meta.update(instance, {} as HTMLElement, { title: 'After' })
+
+    expect(resolved).toBe(instance)
+    expect(instance.state.props).toEqual({
+      title: 'After',
+    })
+  })
+
+  it('restores projected slot DOM during updates', async () => {
+    const Island = eclipsifyVue(
+      defineComponent({
+        setup(_, { slots }) {
+          return () => h('section', null, slots.default ? slots.default() : [])
+        },
+      }),
+    )
+    const meta = getExternalComponentMeta(Island)!
+    const projectedNode = new FakeNode()
+    const slotHost = new FakeElement()
+    const host = new FakeElement(new Map([['children', slotHost]]))
+    const instance = {
+      app: {
+        unmount() {},
+      },
+      slotDom: new Map([['children', [projectedNode]]]),
+      slotNames: ['children'],
+      state: {
+        props: {},
+      },
+    }
+
+    const resolved = await meta.update(instance as any, host as unknown as HTMLElement, {})
+
+    expect(resolved).toBe(instance)
+    expect(slotHost.childNodes).toEqual([projectedNode])
+    expect(instance.slotDom.get('children')).toEqual([projectedNode])
+  })
+})
diff --git a/packages/vue/mod.ts b/packages/vue/mod.ts
new file mode 100644
index 0000000..f9f9e7f
--- /dev/null
+++ b/packages/vue/mod.ts
@@ -0,0 +1,261 @@
+import type { Component } from 'eclipsa'
+import { setExternalComponentMeta, type ExternalComponentMeta } from 'eclipsa/internal'
+import {
+  createSSRApp,
+  h,
+  nextTick,
+  shallowReactive,
+  type App,
+  type Component as VueComponent,
+  type VNode,
+} from 'vue'
+import { renderToString } from 'vue/server-renderer'
+
+const SLOT_HOST_TAG = 'e-slot-host'
+
+interface VueExternalInstance {
+  app: App
+  slotDom: Map<string, Node[]>
+  state: {
+    props: Record<string, unknown>
+  }
+  slotNames: string[]
+}
+
+const waitForExternalDomCommit = async () => {
+  await nextTick()
+  await new Promise<void>((resolve) => {
+    if (typeof requestAnimationFrame === 'function') {
+      requestAnimationFrame(() => {
+        resolve()
+      })
+      return
+    }
+    setTimeout(resolve, 0)
+  })
+}
+
+const findSlotHost = (host: HTMLElement, name: string) => {
+  if (typeof host.querySelectorAll !== 'function') {
+    return host.querySelector?.(`${SLOT_HOST_TAG}[data-e-slot="${name}"]`) ?? null
+  }
+  const matches = [...host.querySelectorAll<HTMLElement>(`${SLOT_HOST_TAG}[data-e-slot="${name}"]`)]
+  if (matches.length === 0) {
+    return null
+  }
+  for (let index = matches.length - 1; index >= 0; index -= 1) {
+    const candidate = matches[index]!
+    if (candidate.childNodes.length > 0 || (candidate.innerHTML ?? '') !== '') {
+      return candidate
+    }
+  }
+  return matches[0]!
+}
+
+const captureSlotDom = (host: HTMLElement, slotNames: string[]) => {
+  const captured = new Map<string, Node[]>()
+  if (typeof host.querySelector !== 'function') {
+    for (const name of slotNames) {
+      captured.set(name, [])
+    }
+    return captured
+  }
+  for (const name of slotNames) {
+    const slotHost = findSlotHost(host, name)
+    captured.set(name, slotHost ? [...slotHost.childNodes] : [])
+  }
+  return captured
+}
+
+const mergeSlotDom = (previous: Map<string, Node[]> | undefined, next: Map<string, Node[]>) => {
+  const merged = new Map<string, Node[]>()
+  for (const [name, nodes] of next) {
+    if (nodes.length === 0 && (previous?.get(name)?.length ?? 0) > 0) {
+      merged.set(name, previous!.get(name)!)
+      continue
+    }
+    merged.set(name, nodes)
+  }
+  return merged
+}
+
+const restoreSlotNodes = (slotHost: Element, nodes: Node[]) => {
+  if (
+    slotHost.childNodes.length === nodes.length &&
+    nodes.every((node, index) => slotHost.childNodes[index] === node)
+  ) {
+    return
+  }
+  while (slotHost.firstChild) {
+    slotHost.firstChild.remove()
+  }
+  for (const node of nodes) {
+    slotHost.appendChild(node)
+  }
+}
+
+const restoreSlotDom = (host: HTMLElement, slotDom?: Map<string, Node[]>) => {
+  if (!slotDom || typeof host.querySelector !== 'function') {
+    return
+  }
+  for (const [name, nodes] of slotDom) {
+    const slotHost = findSlotHost(host, name)
+    if (!slotHost) {
+      continue
+    }
+    restoreSlotNodes(slotHost, nodes)
+  }
+}
+
+const scheduleSlotDomRestore = (host: HTMLElement, instance: VueExternalInstance) => {
+  instance.slotDom = mergeSlotDom(instance.slotDom, captureSlotDom(host, instance.slotNames))
+  restoreSlotDom(host, instance.slotDom)
+  if (typeof setTimeout !== 'function') {
+    return
+  }
+  for (const delay of [0, 16, 100]) {
+    setTimeout(() => {
+      instance.slotDom = mergeSlotDom(instance.slotDom, captureSlotDom(host, instance.slotNames))
+      restoreSlotDom(host, instance.slotDom)
+    }, delay)
+  }
+}
+
+const toVueInput = (props: Record<string, unknown>, slotNames: string[]) => {
+  const nextProps: Record<string, unknown> = { ...props }
+  const slots: Record<string, () => VNode> = {}
+  for (const name of slotNames) {
+    if (name === 'children') {
+      delete nextProps.children
+      slots.default = () =>
+        h(SLOT_HOST_TAG, {
+          'data-allow-mismatch': 'children',
+          'data-e-slot': name,
+        })
+      continue
+    }
+    delete nextProps[name]
+    slots[name] = () =>
+      h(SLOT_HOST_TAG, {
+        'data-allow-mismatch': 'children',
+        'data-e-slot': name,
+      })
+  }
+  return {
+    props: nextProps,
+    slots,
+  }
+}
+
+const createVueRoot = (
+  component: VueComponent,
+  state: {
+    props: Record<string, unknown>
+  },
+  slotNames: string[],
+) => ({
+  render() {
+    const { props, slots } = toVueInput(state.props, slotNames)
+    return h(component as VueComponent, props, slots)
+  },
+})
+
+const syncRecord = (target: Record<string, unknown>, next: Record<string, unknown>) => {
+  for (const key of Object.keys(target)) {
+    if (!Object.hasOwn(next, key)) {
+      delete target[key]
+    }
+  }
+  for (const [key, value] of Object.entries(next)) {
+    target[key] = value
+  }
+}
+
+export const eclipsifyVue = <TProps extends Record<string, unknown>>(
+  component: VueComponent,
+  options?: {
+    slots?: readonly string[]
+  },
+): Component<TProps> => {
+  const slotNames = [...(options?.slots ?? ['children'])]
+  const meta: ExternalComponentMeta = {
+    async hydrate(host, props) {
+      let slotDom = captureSlotDom(host, slotNames)
+      const componentId =
+        host.getAttribute('data-e-external-snapshot') ??
+        host.getAttribute('data-e-external-component')
+      const snapshotStore = (
+        globalThis as typeof globalThis & {
+          __eclipsaExternalSlotSnapshotStore?: Record<
+            string,
+            {
+              dom?: Map<string, Node[]>
+            }
+          >
+        }
+      ).__eclipsaExternalSlotSnapshotStore
+      const snapshotMap = (
+        globalThis as typeof globalThis & {
+          __eclipsaExternalSlotSnapshotMap?: Map<
+            HTMLElement,
+            {
+              dom?: Map<string, Node[]>
+            }
+          >
+        }
+      ).__eclipsaExternalSlotSnapshotMap
+      const snapshotEntry =
+        (componentId ? snapshotStore?.[componentId] : undefined) ??
+        (() => {
+          if (!snapshotStore) {
+            return undefined
+          }
+          const entries = Object.values(snapshotStore)
+          return entries.length === 1 ? entries[0] : undefined
+        })()
+      const snapshotByHost = snapshotMap?.get(host)
+      if ([...slotDom.values()].every((nodes) => nodes.length === 0)) {
+        slotDom = snapshotByHost?.dom ?? snapshotEntry?.dom ?? slotDom
+      }
+      const state = shallowReactive({
+        props: { ...props } as Record<string, unknown>,
+      })
+      const app = createSSRApp(createVueRoot(component, state, slotNames))
+      app.mount(host)
+      await waitForExternalDomCommit()
+      const instance = {
+        app,
+        slotDom,
+        state,
+        slotNames,
+      } satisfies VueExternalInstance
+      scheduleSlotDomRestore(host, instance)
+      return instance
+    },
+    kind: 'vue',
+    async renderToString(props) {
+      const app = createSSRApp({
+        render() {
+          const input = toVueInput(props, slotNames)
+          return h(component as VueComponent, input.props, input.slots)
+        },
+      })
+      return renderToString(app)
+    },
+    slots: slotNames,
+    async unmount(instance) {
+      ;(instance as VueExternalInstance | undefined)?.app.unmount()
+    },
+    async update(instance, host, props) {
+      const resolved = instance as VueExternalInstance
+      const slotDom = mergeSlotDom(resolved.slotDom, captureSlotDom(host, slotNames))
+      syncRecord(resolved.state.props, props)
+      await waitForExternalDomCommit()
+      resolved.slotDom = slotDom
+      scheduleSlotDomRestore(host, resolved)
+      return resolved
+    },
+  }
+
+  return setExternalComponentMeta((() => null) as Component<TProps>, meta)
+}
diff --git a/packages/vue/package.json b/packages/vue/package.json
new file mode 100644
index 0000000..da3e5ba
--- /dev/null
+++ b/packages/vue/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@eclipsa/vue",
+  "version": "0.0.0",
+  "homepage": "https://github.com/pnsk-lab/eclipsa",
+  "bugs": {
+    "url": "https://github.com/pnsk-lab/eclipsa/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pnsk-lab/eclipsa.git",
+    "directory": "packages/vue"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./mod.ts",
+      "import": "./mod.ts"
+    }
+  },
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "types": "./dist/mod.d.mts",
+        "import": "./dist/mod.mjs"
+      }
+    }
+  },
+  "scripts": {
+    "build": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
+    "pack": "vp pack && bun ../../scripts/release/write-dist-package-json.ts",
+    "test": "vp test --run",
+    "test:coverage": "c8 --reporter=lcov --reporter=json-summary --reporter=text bunx vp test --run",
+    "typecheck": "bun x tsc -p ../../tsconfig.json --noEmit"
+  },
+  "peerDependencies": {
+    "eclipsa": "*",
+    "vue": "*"
+  }
+}
diff --git a/packages/vue/vite.config.ts b/packages/vue/vite.config.ts
new file mode 100644
index 0000000..53a0bd7
--- /dev/null
+++ b/packages/vue/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite-plus'
+
+export default defineConfig({
+  pack: {
+    entry: './mod.ts',
+    dts: true,
+  },
+})
diff --git a/scripts/release/resolve-release-metadata.ts b/scripts/release/resolve-release-metadata.ts
index 38f5709..9f355a0 100644
--- a/scripts/release/resolve-release-metadata.ts
+++ b/scripts/release/resolve-release-metadata.ts
@@ -31,7 +31,6 @@ type VersionCore = {
 
 type ResolveVersionPlanInput = {
   publishedVersions?: string[]
-  packageJsonVersion?: string
   releaseType: string
 }
 
@@ -145,7 +144,6 @@ function maxPrereleaseNumber(versions: ParsedVersion[]): number {
 
 export function resolveVersionPlan({
   publishedVersions,
-  packageJsonVersion,
   releaseType,
 }: ResolveVersionPlanInput): ResolveVersionPlanResult {
   const release = parseReleaseType(releaseType)
@@ -153,13 +151,11 @@ export function resolveVersionPlan({
     .map((version) => parseVersion(version))
     .filter((version): version is ParsedVersion => version != null)
   const stablePublished = parsedPublished.filter((version) => version.isStable)
-  const parsedPackageJsonVersion = parseVersion(packageJsonVersion)
-  const stableBase = maxCore(stablePublished) ??
-    (parsedPackageJsonVersion?.isStable ? parsedPackageJsonVersion : null) ?? {
-      major: 0,
-      minor: 0,
-      patch: 0,
-    }
+  const stableBase = maxCore(stablePublished) ?? {
+    major: 0,
+    minor: 0,
+    patch: 0,
+  }
   const targetCore = incrementCore(toCore(stableBase), release.bump)
 
   if (release.channel == null) {
@@ -196,17 +192,6 @@ export function resolveVersionPlan({
         npmTag: release.channel,
       }
     }
-
-    if (
-      parsedPackageJsonVersion?.channel === release.channel &&
-      Number.isInteger(parsedPackageJsonVersion.prereleaseNumber)
-    ) {
-      const packageCore = toCore(parsedPackageJsonVersion)
-      return {
-        version: `${formatCore(packageCore)}-${release.channel}.${parsedPackageJsonVersion.prereleaseNumber + 1}`,
-        npmTag: release.channel,
-      }
-    }
   }
 
   return {
@@ -287,10 +272,8 @@ export function resolveReleaseMetadata({
     throw new Error(`package.json does not contain a valid name field: ${packageJsonPath}`)
   }
 
-  const packageJsonVersion = typeof pkg.version === 'string' ? pkg.version : undefined
   const versionPlan = resolveVersionPlan({
     publishedVersions: fetchPublishedVersions(packageName),
-    packageJsonVersion,
     releaseType,
   })
 
diff --git a/scripts/release/write-dist-package-json.ts b/scripts/release/write-dist-package-json.ts
index bb9a66b..5083b0e 100644
--- a/scripts/release/write-dist-package-json.ts
+++ b/scripts/release/write-dist-package-json.ts
@@ -4,7 +4,13 @@ import * as fs from 'node:fs/promises'
 import * as path from 'node:path'
 import process from 'node:process'
 
-export type JsonValue = null | boolean | number | string | JsonValue[] | { [key: string]: JsonValue }
+export type JsonValue =
+  | null
+  | boolean
+  | number
+  | string
+  | JsonValue[]
+  | { [key: string]: JsonValue }
 export type JsonObject = { [key: string]: JsonValue }
 type DependencyMap = Record<string, string>
 
@@ -249,26 +255,17 @@ export const createPublishPackageJson = (
   assignJsonField(
     packageJsonFields,
     'dependencies',
-    rewriteDependencyMap(
-      packageJsonFields.dependencies,
-      workspaceVersions,
-    ),
+    rewriteDependencyMap(packageJsonFields.dependencies, workspaceVersions),
   )
   assignJsonField(
     packageJsonFields,
     'peerDependencies',
-    rewriteDependencyMap(
-      packageJsonFields.peerDependencies,
-      workspaceVersions,
-    ),
+    rewriteDependencyMap(packageJsonFields.peerDependencies, workspaceVersions),
   )
   assignJsonField(
     packageJsonFields,
     'optionalDependencies',
-    rewriteDependencyMap(
-      packageJsonFields.optionalDependencies,
-      workspaceVersions,
-    ),
+    rewriteDependencyMap(packageJsonFields.optionalDependencies, workspaceVersions),
   )
 
   packageJsonFields.private = false
diff --git a/skills/eclipsa/SKILL.md b/skills/eclipsa/SKILL.md
new file mode 100644
index 0000000..60b0e1a
--- /dev/null
+++ b/skills/eclipsa/SKILL.md
@@ -0,0 +1,65 @@
+---
+name: eclipsa
+description: Build and extend user-facing Eclipsa applications. Use when Codex needs to create a new Eclipsa project, scaffold or explain the `app/` file structure, implement routes and layouts, work with `useSignal`, `Link`, `useNavigate`, `loader()`, `action()`, metadata, middleware, SSR root files, resumable client boot, or validate a normal Eclipsa app created with `npm create eclipsa@latest`.
+---
+
+# Eclipsa
+
+## Overview
+
+Use this skill for normal Eclipsa app work from the app author's point of view. Focus on route files, layouts, state, data loading, actions, metadata, and resumable SSR. Prefer small working snippets over framework-internals explanations.
+
+## Workflow
+
+1. Start from the user's app goal, not from Eclipsa repository internals.
+2. Map the request to the smallest useful rule set:
+   - new app or starter confusion: `rules/getting-started.md` and `rules/project-creation.md`
+   - route tree, layouts, special files: `rules/app-structure.md`
+   - links, params, route groups, `useNavigate()`: `rules/routing-and-navigation.md`
+   - `useSignal`, `useWatch`, `onMount`: `rules/state-and-lifecycle.md`
+   - `loader()`, `action()`, validators, middleware: `rules/data-loading-and-actions.md`
+   - `metadata`, `+ssr-root.tsx`, `+server-entry.ts`: `rules/metadata-and-server.md`
+   - resume behavior and browser-only logic: `rules/resume-and-ssr.md`
+   - app verification: `rules/validation.md`
+3. Prefer generated-app conventions from `npm create eclipsa@latest`.
+4. Give concrete snippets that fit directly into `app/` files.
+5. Keep examples public-data-oriented, serializable, and SSR-safe.
+6. When validating, use the commands that exist in a normal generated app.
+
+## Common Requests
+
+- "Create a new page or dashboard route": read `rules/app-structure.md`, then `rules/routing-and-navigation.md`.
+- "Make a layout that keeps shared state while pages change": read `rules/app-structure.md` and `rules/state-and-lifecycle.md`.
+- "Fetch data for a page or layout": read `rules/data-loading-and-actions.md`.
+- "Handle a form submit or button-triggered mutation": read `rules/data-loading-and-actions.md`.
+- "Set title, canonical URL, or social metadata": read `rules/metadata-and-server.md`.
+- "Fix code that assumes client-only rendering": read `rules/resume-and-ssr.md`.
+- "Check whether an app is wired correctly": read `rules/validation.md`.
+
+## Hard Constraints
+
+- Keep `loader()` and `action()` at module scope so the compiler can register them once.
+- Call `useSignal()` at the top level of the component body, not inside nested callbacks or branches.
+- Keep loader and action input or output serializable unless the API explicitly supports richer values.
+- Keep `app/+client.dev.tsx` on `resumeContainer(document)`.
+- Treat Eclipsa as SSR plus resume. Do not switch examples to route-level full-body hydration patterns.
+
+## Rule Index
+
+- Read `rules/getting-started.md` for setup, starter commands, and the default project shape.
+- Read `rules/project-creation.md` for `npm create eclipsa@latest`, scaffold output, and starter maintenance.
+- Read `rules/app-structure.md` for route conventions, entry files, and preferred component patterns.
+- Read `rules/routing-and-navigation.md` for `+page.tsx`, `+layout.tsx`, params, `Link`, and `useNavigate()`.
+- Read `rules/state-and-lifecycle.md` for `useSignal`, `For`, `onMount`, `useWatch`, and component patterns.
+- Read `rules/data-loading-and-actions.md` for `loader()`, `action()`, validation, and middleware.
+- Read `rules/metadata-and-server.md` for `metadata`, `+ssr-root.tsx`, `+server-entry.ts`, and Hono integration.
+- Read `rules/resume-and-ssr.md` for resumability, `resumeContainer(document)`, and SSR-safe guidance.
+- Read `rules/validation.md` for app-level validation and common commands.
+
+## Default Tactics
+
+- Prefer app code under `app/` and the generated starter conventions.
+- Use `Link` for normal navigation and `useNavigate()` when navigation is driven by code.
+- Keep loader and action input or output public and serializable.
+- Keep `+client.dev.tsx` boot on `resumeContainer(document)`.
+- Treat Eclipsa as resumable SSR, not as a full-client-hydration framework.
diff --git a/skills/eclipsa/agents/openai.yaml b/skills/eclipsa/agents/openai.yaml
new file mode 100644
index 0000000..f0591eb
--- /dev/null
+++ b/skills/eclipsa/agents/openai.yaml
@@ -0,0 +1,4 @@
+interface:
+  display_name: 'Eclipsa App Builder'
+  short_description: 'Guide for building apps with Eclipsa'
+  default_prompt: 'Use $eclipsa to create, structure, or extend an Eclipsa app.'
diff --git a/skills/eclipsa/rules/app-structure.md b/skills/eclipsa/rules/app-structure.md
new file mode 100644
index 0000000..6611677
--- /dev/null
+++ b/skills/eclipsa/rules/app-structure.md
@@ -0,0 +1,90 @@
+# App Structure
+
+## Route File Conventions
+
+- `app/+page.tsx`: page component for a route segment.
+- `app/+layout.tsx`: shared layout state and shared shell for nested routes.
+- `app/+middleware.ts`: route guard or request-time routing decisions.
+- `app/+ssr-root.tsx`: document shell for SSR.
+- `app/+server-entry.ts`: server entry used in dev and production.
+- `app/+client.dev.tsx`: client resume entry during development.
+
+## Starter Tree Example
+
+```text
+app/
+  +client.dev.tsx
+  +layout.tsx
+  +page.tsx
+  +server-entry.ts
+  +ssr-root.tsx
+  dashboard/
+    +layout.tsx
+    +page.tsx
+    [teamId]/
+      +page.tsx
+```
+
+## Routing Shape
+
+- Dynamic segments use bracket syntax such as `[id]`.
+- Catch-all segments use `[...slug]`.
+- Optional segments use `[[name]]`.
+- Route groups use `(group-name)` and do not appear in the URL.
+
+## Preferred Interactive Patterns
+
+- Use `useSignal` for component-local reactive state.
+- Use `Link` for declarative navigation.
+- Use `useNavigate` for imperative navigation.
+- Use `For` for list rendering instead of ad hoc array mutation patterns that obscure reactivity.
+- Use `useWatch`, `onMount`, and related primitives when behavior depends on runtime lifecycle.
+
+## Concrete Layout Pattern
+
+Put shared chrome and shared state in a layout, then keep page-specific content in the nested page:
+
+```tsx
+import { Link, useSignal } from 'eclipsa'
+
+export default function DashboardLayout(props: { children: unknown }) {
+  const sidebarOpen = useSignal(true)
+
+  return (
+    <div class="dashboard-shell">
+      <aside hidden={!sidebarOpen.value}>
+        <nav>
+          <Link href="/dashboard">Overview</Link>
+          <Link href="/dashboard/settings">Settings</Link>
+        </nav>
+      </aside>
+      <main>
+        <button onClick={() => (sidebarOpen.value = !sidebarOpen.value)} type="button">
+          {sidebarOpen.value ? 'Hide' : 'Show'} sidebar
+        </button>
+        {props.children}
+      </main>
+    </div>
+  )
+}
+```
+
+```tsx
+export default function DashboardPage() {
+  return (
+    <section>
+      <h1>Dashboard</h1>
+      <p>Put route-specific content here.</p>
+    </section>
+  )
+}
+```
+
+## File Responsibilities
+
+- Put normal route UI in `+page.tsx`.
+- Put shared shells and shared state in `+layout.tsx`.
+- Put subtree request logic such as auth or redirects in `+middleware.ts`.
+- Put document HTML in `+ssr-root.tsx`.
+- Put server setup in `+server-entry.ts`.
+- Keep `+client.dev.tsx` only for client resume boot.
diff --git a/skills/eclipsa/rules/data-loading-and-actions.md b/skills/eclipsa/rules/data-loading-and-actions.md
new file mode 100644
index 0000000..c243058
--- /dev/null
+++ b/skills/eclipsa/rules/data-loading-and-actions.md
@@ -0,0 +1,149 @@
+# Data Loading And Actions
+
+## `loader()`
+
+- Use `loader()` for route data in pages and layouts.
+- A loader works for initial SSR and later client navigation with the same API.
+- A loader handle exposes:
+  - `data`
+  - `error`
+  - `isLoading`
+  - `load()`
+
+## Concrete Loader Example
+
+Declare loaders at module scope:
+
+```tsx
+import { loader, type LoaderMiddleware } from 'eclipsa'
+
+const requestMeta: LoaderMiddleware<{
+  Variables: {
+    traceId: string
+  }
+}> = async (c, next) => {
+  c.set('traceId', 'trace-dashboard')
+  await next()
+}
+
+const useTeamLoader = loader(requestMeta, async (c) => {
+  const teamId = c.req.param('teamId')
+
+  return {
+    name: `Team ${teamId}`,
+    traceId: c.var.traceId,
+  }
+})
+```
+
+```tsx
+export default function TeamPage() {
+  const team = useTeamLoader()
+
+  return (
+    <section>
+      <h1>{team.data?.name ?? 'Loading team...'}</h1>
+      <p>{team.error ? 'Failed to load team.' : `trace: ${team.data?.traceId ?? 'pending'}`}</p>
+      <button disabled={team.isLoading} onClick={() => void team.load()} type="button">
+        Refresh
+      </button>
+    </section>
+  )
+}
+```
+
+## Loader Guidance
+
+- Read route params from the request context, for example `c.req.param('slug')`.
+- Use `load()` for manual refresh.
+- Return public, serializable data such as strings, numbers, booleans, arrays, and plain objects.
+- Do not design loaders around `Response` or `ReadableStream` results.
+- Keep `loader()` at module scope so the compiler can register it once.
+
+## Loader Middleware
+
+- Use loader middleware when request-scoped shared values are needed.
+- Values set with `c.set()` become available through `c.var` in the loader handler.
+
+## `action()`
+
+- Use `action()` for mutations, submissions, and side effects.
+- An action handle exposes:
+  - `Form`
+  - `action()`
+  - `isPending`
+  - `result`
+  - `error`
+  - `lastSubmission`
+
+## Concrete Action Example
+
+Declare actions at module scope too:
+
+```tsx
+import { action, useSignal } from 'eclipsa'
+
+const useSaveProfile = action(async (c) => {
+  const name = String(c.var.input?.name ?? '').trim()
+
+  return {
+    name,
+    saved: name.length > 0,
+  }
+})
+```
+
+```tsx
+export default function ProfileEditor() {
+  const name = useSignal('Ada')
+  const saveProfile = useSaveProfile()
+
+  return (
+    <section>
+      <label>
+        Name
+        <input
+          name="name"
+          onInput={(event: InputEvent) => {
+            name.value = (event.currentTarget as HTMLInputElement).value
+          }}
+          value={name.value}
+        />
+      </label>
+      <button
+        disabled={saveProfile.isPending}
+        onClick={() => void saveProfile.action({ name: name.value })}
+        type="button"
+      >
+        Save
+      </button>
+      <saveProfile.Form class="stack">
+        <input name="name" value={name.value} />
+        <button disabled={saveProfile.isPending} type="submit">
+          Save with form submit
+        </button>
+      </saveProfile.Form>
+      <p>{saveProfile.result?.saved ? `Saved ${saveProfile.result.name}` : 'Not saved yet'}</p>
+      <p>{saveProfile.error ? 'Save failed.' : 'No error'}</p>
+    </section>
+  )
+}
+```
+
+## Action Guidance
+
+- Use `Form` for native form submission.
+- Use `action(input)` for programmatic submission.
+- Keep action input and output serializable.
+- Use `validator()` to validate and transform incoming input before the handler runs.
+- Standard Schema based validators and adapters such as Zod or valibot fit well here.
+- Keep `action()` at module scope so the compiler can register it once.
+
+## Action Middleware
+
+- Actions can use middleware in the same Hono-style pattern as loaders.
+- Values written with `c.set()` are read back through `c.var`.
+
+## Streaming
+
+- Actions may return async generators or readable streams when the UI should consume progressive results.
diff --git a/skills/eclipsa/rules/getting-started.md b/skills/eclipsa/rules/getting-started.md
new file mode 100644
index 0000000..052adf7
--- /dev/null
+++ b/skills/eclipsa/rules/getting-started.md
@@ -0,0 +1,69 @@
+# Getting Started
+
+## Create A New App
+
+- Start with `npm create eclipsa@latest`.
+- The starter prompts for a project name and a toolchain.
+- Current toolchain choices are `vite` and `vite-plus`.
+
+## Fast Path
+
+```bash
+npm create eclipsa@latest
+cd my-app
+bun install
+bun run dev
+```
+
+## Starter Commands
+
+After scaffolding, the normal workflow is:
+
+- `bun install`
+- `bun run dev`
+- `bun run build`
+- `bun run start`
+- `bun run typecheck`
+
+If the user picked `vite-plus`, the same workflow may also be available through `vp dev`, `vp build`, and `vp run typecheck`.
+
+## Starter Shape
+
+A fresh app includes:
+
+- `app/+page.tsx`: the first route page.
+- `app/+client.dev.tsx`: client resume entry.
+- `app/+server-entry.ts`: Hono server entry.
+- `app/+ssr-root.tsx`: HTML shell used during SSR.
+- `vite.config.ts`: Eclipsa Vite plugin wiring.
+
+## First Useful Edit
+
+The starter page is intentionally small. A realistic first edit looks like this:
+
+```tsx
+import { Link, useSignal } from 'eclipsa'
+
+export default function Page() {
+  const count = useSignal(0)
+
+  return (
+    <main>
+      <h1>Hello from Eclipsa</h1>
+      <p>The starter is wired for SSR first and resumable client updates.</p>
+      <button onClick={() => count.value++} type="button">
+        Count: {count.value}
+      </button>
+      <p>
+        <Link href="/dashboard">Open the dashboard</Link>
+      </p>
+    </main>
+  )
+}
+```
+
+## Mental Model
+
+- Eclipsa renders on the server first.
+- Client interactivity resumes from the server output.
+- Normal app code should be written with that SSR plus resume model in mind.
diff --git a/skills/eclipsa/rules/metadata-and-server.md b/skills/eclipsa/rules/metadata-and-server.md
new file mode 100644
index 0000000..ef371ad
--- /dev/null
+++ b/skills/eclipsa/rules/metadata-and-server.md
@@ -0,0 +1,76 @@
+# Metadata And Server
+
+## Route Metadata
+
+- Export `metadata` from a page or layout to control route head tags.
+- Metadata can be an object or a function that receives `MetadataContext`.
+- Common fields include:
+  - `title`
+  - `canonical`
+  - `openGraph`
+  - `twitter`
+
+## Concrete Metadata Example
+
+```tsx
+import type { MetadataContext } from 'eclipsa'
+
+export const metadata = ({ url }: MetadataContext) => ({
+  title: 'Dashboard',
+  canonical: url.pathname,
+  openGraph: {
+    title: 'Dashboard',
+    url: url.href,
+  },
+  twitter: {
+    card: 'summary',
+    title: 'Dashboard',
+  },
+})
+```
+
+## Practical Metadata Pattern
+
+- Use `canonical: url.pathname` when the canonical path should follow the current route.
+- Set `openGraph.title` and `twitter.card` or `twitter.title` when social metadata matters.
+- Put shared metadata in layouts and route-specific metadata in pages.
+
+## `+ssr-root.tsx`
+
+- Use `SSRRootProps`.
+- Render the base document structure:
+  - `<html>`
+  - `<head>{props.head}</head>`
+  - `<body>{props.children}</body>`
+- Keep the root shell minimal unless the user needs a custom document structure.
+
+```tsx
+import type { SSRRootProps } from 'eclipsa'
+
+export default function Root(props: SSRRootProps) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="UTF-8" />
+        <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+        {props.head}
+      </head>
+      <body>{props.children}</body>
+    </html>
+  )
+}
+```
+
+## `+server-entry.ts`
+
+- The generated starter uses Hono.
+- Export a Hono app as the server entry.
+- Put route-scoped request handling in route files before expanding global server complexity.
+
+```ts
+import { Hono } from 'hono'
+
+const app = new Hono()
+
+export default app
+```
diff --git a/skills/eclipsa/rules/project-creation.md b/skills/eclipsa/rules/project-creation.md
new file mode 100644
index 0000000..63e0893
--- /dev/null
+++ b/skills/eclipsa/rules/project-creation.md
@@ -0,0 +1,58 @@
+# Project Creation
+
+## Public Entry Point
+
+- The public way to create a new app is `npm create eclipsa@latest`.
+
+## Typical Scaffold Session
+
+```bash
+npm create eclipsa@latest
+# choose a project name
+# choose `vite` or `vite-plus`
+cd my-app
+bun install
+```
+
+## What The Starter Sets Up
+
+- The starter is a Node SSR app.
+- Toolchain choices are `vite` and `vite-plus`.
+- The prompt defaults to `vite` when the user does not choose.
+- `vite` maps to `vite dev` and `vite build`.
+- `vite-plus` maps to `vp dev` and `vp build`.
+
+## Files A Fresh App Should Have
+
+- `app/+page.tsx`: default interactive route.
+- `app/+client.dev.tsx`: client boot entry; it must call `resumeContainer(document)`.
+- `app/+server-entry.ts`: Hono server entry.
+- `app/+ssr-root.tsx`: HTML shell for SSR.
+- `vite.config.ts`: `appType: 'custom'` and `plugins: [eclipsa()]`.
+- `package.json`: `eclipsa` and `hono` in dependencies, TypeScript and selected toolchain in devDependencies.
+
+## Starter Tree
+
+```text
+app/
+  +client.dev.tsx
+  +page.tsx
+  +server-entry.ts
+  +ssr-root.tsx
+package.json
+vite.config.ts
+```
+
+## Expected Next Steps After Scaffolding
+
+- `bun install`
+- `bun run dev`
+- `bun run build`
+- `bun run start`
+
+## Practical Advice
+
+- Keep the initial `+ssr-root.tsx` minimal and standards-based.
+- Put app routes under `app/` instead of inventing a custom route table.
+- Use the generated Vite config unless the user has a concrete integration need.
+- When the user wants a feature, add route files under `app/` instead of rewriting the starter architecture first.
diff --git a/skills/eclipsa/rules/resume-and-ssr.md b/skills/eclipsa/rules/resume-and-ssr.md
new file mode 100644
index 0000000..4157c2a
--- /dev/null
+++ b/skills/eclipsa/rules/resume-and-ssr.md
@@ -0,0 +1,49 @@
+# Resume And SSR
+
+## Core Model
+
+- Eclipsa renders HTML on the server.
+- The browser resumes interactivity from that output.
+- Normal app code should assume SSR first, then client resume.
+
+## Client Boot
+
+- Keep `app/+client.dev.tsx` on:
+
+```tsx
+import { resumeContainer } from 'eclipsa'
+
+resumeContainer(document)
+```
+
+- Do not replace this with a custom client render boot unless the user explicitly needs a low-level experiment.
+
+## App-Level Cautions
+
+- Avoid assuming browser-only globals are available during SSR.
+- Put browser-only setup behind lifecycle hooks such as `onMount()`.
+- Keep loader and action data serializable so SSR payloads and resume stay reliable.
+- Prefer Eclipsa navigation primitives over manual full-page reload patterns.
+
+## Browser-Only Pattern
+
+```tsx
+import { onMount, useSignal } from 'eclipsa'
+
+export default function ThemeProbe() {
+  const theme = useSignal('server')
+
+  onMount(() => {
+    theme.value = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  })
+
+  return <p>theme: {theme.value}</p>
+}
+```
+
+This keeps SSR safe because `window` is only touched after the component mounts in the browser.
+
+## Good Mental Shortcut
+
+- Think "resume" rather than "hydrate the entire page".
+- Build pages and layouts so the server output is already meaningful before any client code runs.
diff --git a/skills/eclipsa/rules/routing-and-navigation.md b/skills/eclipsa/rules/routing-and-navigation.md
new file mode 100644
index 0000000..6d0fbde
--- /dev/null
+++ b/skills/eclipsa/rules/routing-and-navigation.md
@@ -0,0 +1,130 @@
+# Routing And Navigation
+
+## Route Tree
+
+- Eclipsa uses file-based routing from the `app/` directory.
+- `+page.tsx` renders a route.
+- `+layout.tsx` wraps nested pages and layouts.
+- `[slug]` captures one segment.
+- `[...parts]` captures the remaining path.
+- `[[lang]]` makes a segment optional.
+- `(marketing)` groups files without changing the URL.
+
+## Concrete Route Example
+
+```text
+app/
+  +page.tsx
+  blog/
+    +page.tsx
+    [slug]/
+      +page.tsx
+  (marketing)/
+    pricing/
+      +page.tsx
+```
+
+- `/blog/[slug]/+page.tsx` matches `/blog/hello-world`
+- `/(marketing)/pricing/+page.tsx` still matches `/pricing`
+
+## Navigation
+
+- Use `Link` for standard client-side navigation.
+- Use `useNavigate()` when a click handler or async flow decides where to go.
+- Use `useLocation()` for active navigation state and URL-aware UI.
+
+## Active Nav Pattern
+
+```tsx
+import { Link, useLocation } from 'eclipsa'
+
+const NavLink = (props: { href: string; label: string }) => {
+  const location = useLocation()
+  const active = location.pathname === props.href
+
+  return (
+    <Link class={active ? 'active' : 'inactive'} href={props.href}>
+      {props.label}
+    </Link>
+  )
+}
+
+export default function AppNav() {
+  return (
+    <nav>
+      <NavLink href="/" label="Home" />
+      <NavLink href="/dashboard" label="Dashboard" />
+      <NavLink href="/settings" label="Settings" />
+    </nav>
+  )
+}
+```
+
+## Imperative Navigation Pattern
+
+```tsx
+import { useNavigate, useSignal } from 'eclipsa'
+
+export default function SearchBox() {
+  const query = useSignal('')
+  const navigate = useNavigate()
+
+  return (
+    <form
+      onSubmit={async (event) => {
+        event.preventDefault()
+        await navigate(`/search?q=${encodeURIComponent(query.value)}`)
+      }}
+    >
+      <input
+        onInput={(event: InputEvent) => {
+          query.value = (event.currentTarget as HTMLInputElement).value
+        }}
+        value={query.value}
+      />
+      <button type="submit">Search</button>
+    </form>
+  )
+}
+```
+
+## Prefetch
+
+`Link` supports `prefetch`:
+
+- `'focus'`
+- `'hover'`
+- `'intent'`
+- `'none'`
+
+Boolean shortcuts:
+
+- `true` means `'intent'`
+- `false` means `'none'`
+
+## Route Helpers
+
+- Use `notFound()` to render the current subtree's `+not-found.tsx`.
+- Use `useRouteError()` inside `+error.tsx`.
+- Use `getStaticPaths` with `render = 'static'` when a dynamic route should be prebuilt.
+
+## Params Pattern
+
+Use request params inside a loader when page data depends on the URL:
+
+```tsx
+import { loader } from 'eclipsa'
+
+const useArticle = loader(async (c) => {
+  const slug = c.req.param('slug')
+  return {
+    slug,
+  }
+})
+```
+
+## Layout Pattern
+
+- Put persistent chrome such as nav bars or sidebars in `+layout.tsx`.
+- Keep page-specific content in `+page.tsx`.
+- Use layouts for shared navigation state instead of duplicating logic in each page.
diff --git a/skills/eclipsa/rules/state-and-lifecycle.md b/skills/eclipsa/rules/state-and-lifecycle.md
new file mode 100644
index 0000000..e61226e
--- /dev/null
+++ b/skills/eclipsa/rules/state-and-lifecycle.md
@@ -0,0 +1,72 @@
+# State And Lifecycle
+
+## Core Patterns
+
+- Use `useSignal(initialValue)` for local reactive state.
+- Read and write signal state through `.value`.
+- Use `For` for list rendering.
+- Use `onMount()` for client lifecycle setup.
+- Use `useWatch()` when code should rerun in response to reactive reads.
+
+## Example Shape
+
+- Keep event handlers small and direct.
+- Update signals from event handlers such as `onClick` or `onInput`.
+- Prefer explicit state updates over hidden abstractions.
+
+## Concrete Component Example
+
+```tsx
+import { onMount, useSignal, useWatch } from 'eclipsa'
+
+export default function NewsletterForm() {
+  const email = useSignal('')
+  const submitted = useSignal(false)
+  const inputRef = useSignal<HTMLInputElement | undefined>()
+
+  onMount(() => {
+    inputRef.value?.focus()
+  })
+
+  useWatch(() => {
+    if (submitted.value) {
+      console.log(`submitted: ${email.value}`)
+    }
+  }, [submitted, email])
+
+  return (
+    <form
+      onSubmit={(event) => {
+        event.preventDefault()
+        submitted.value = true
+      }}
+    >
+      <input
+        onInput={(event: InputEvent) => {
+          email.value = (event.currentTarget as HTMLInputElement).value
+          submitted.value = false
+        }}
+        ref={inputRef}
+        value={email.value}
+      />
+      <button type="submit">Subscribe</button>
+      <p>{submitted.value ? `Saved ${email.value}` : 'Waiting for submit'}</p>
+    </form>
+  )
+}
+```
+
+## Important Cautions
+
+- Treat `useSignal` as a component-render API, not a general utility outside rendering.
+- Keep signal values serializable unless the API explicitly supports a richer value.
+- When rendering lists, use stable keys when identity matters.
+- Call `useSignal()` at the top level of the component body, not inside event handlers or nested helper functions.
+
+## Good Fits
+
+- Form input state
+- Toggle state
+- Counters
+- Tabs
+- Layout-owned active navigation UI
diff --git a/skills/eclipsa/rules/validation.md b/skills/eclipsa/rules/validation.md
new file mode 100644
index 0000000..2ece43c
--- /dev/null
+++ b/skills/eclipsa/rules/validation.md
@@ -0,0 +1,37 @@
+# Validation
+
+## Normal App Commands
+
+Use the commands generated by a standard Eclipsa app:
+
+- `bun run dev`
+- `bun run build`
+- `bun run start`
+- `bun run typecheck`
+
+If the app uses `vite-plus`, also prefer the matching `vp` commands that the project already defines.
+
+## What To Check
+
+- The app renders correctly on first load.
+- Navigation through `Link` and `useNavigate()` behaves correctly.
+- Loader-backed content appears on first SSR and after client navigation.
+- Action state updates correctly for pending, success, and error paths.
+- Metadata updates on route navigation when relevant.
+- Browser-only code does not break SSR.
+
+## Quick Validation Matrix
+
+- Route or layout work: check first SSR render, then click through `Link` navigation.
+- `useNavigate()` work: trigger the actual event handler, not just direct URL entry.
+- Loader work: check initial data, loading state, error state, and manual `load()`.
+- Action work: check pending, success, error, and `lastSubmission` if the UI uses it.
+- Metadata work: check title and meta tags on first render and after navigation.
+- Resume-sensitive work: reload the page and confirm interactive state resumes without replacing the whole document.
+
+## When Features Are Involved
+
+- For loader work, verify both initial route load and manual `load()` calls.
+- For action work, verify both form submission and programmatic `action()` calls when both are used.
+- For layout work, verify shared state survives client-side route changes.
+- For route params, verify dynamic and catch-all routes with realistic URLs.
diff --git a/tsconfig.json b/tsconfig.json
index 17f7298..ca58291 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,6 +5,19 @@
     "moduleResolution": "Bundler",
     "allowImportingTsExtensions": true,
     "verbatimModuleSyntax": true,
+    "paths": {
+      "eclipsa": ["./packages/eclipsa/mod.ts"],
+      "eclipsa/internal": ["./packages/eclipsa/core/internal.ts"],
+      "@eclipsa/optimizer/native": ["./packages/optimizer/native.ts"],
+      "@eclipsa/native": ["./packages/native/mod.ts"],
+      "@eclipsa/native/vite": ["./packages/native/vite.ts"],
+      "@eclipsa/native/jsx-runtime": ["./packages/native/jsx-runtime.ts"],
+      "@eclipsa/native/jsx-dev-runtime": ["./packages/native/jsx-dev-runtime.ts"],
+      "@eclipsa/native-core": ["./packages/native-core/mod.ts"],
+      "@eclipsa/native-swiftui": ["./packages/native-swiftui/mod.ts"],
+      "@eclipsa/native-compose": ["./packages/native-compose/mod.ts"],
+      "@eclipsa/native-gtk4": ["./packages/native-gtk4/mod.ts"]
+    },
     "strict": true,
     "noEmit": true,
     "skipLibCheck": true,
@@ -17,9 +30,14 @@
     "packages/**/*.ts",
     "packages/**/*.tsx",
     "packages/**/*.d.ts",
-    "example/**/*.ts",
-    "example/**/*.tsx",
-    "example/**/*.d.ts",
     "e2e/playwright.config.ts"
+  ],
+  "exclude": [
+    "**/dist/**",
+    "**/node_modules/**",
+    "**/*.test.ts",
+    "**/*.test.tsx",
+    ".contexts/**",
+    "packages/create-eclipsa/template/**"
   ]
 }
diff --git a/turbo.json b/turbo.json
index f89222d..e0a8d2f 100644
--- a/turbo.json
+++ b/turbo.json
@@ -21,6 +21,10 @@
       "dependsOn": ["^test"],
       "outputs": []
     },
+    "test:coverage": {
+      "dependsOn": ["^test:coverage"],
+      "outputs": []
+    },
     "e2e": {
       "cache": false,
       "outputs": []