diff --git a/examples/esm-demo.html b/examples/esm-demo.html
index 510d744..0ebd42b 100644
--- a/examples/esm-demo.html
+++ b/examples/esm-demo.html
@@ -3,7 +3,24 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>@knighted/jsx &mdash; esm.sh demo</title>
+    <title>@knighted/jsx &mdash; CDN demo</title>
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
+    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
+    <link
+      rel="modulepreload"
+      href="https://cdn.jsdelivr.net/npm/@knighted/jsx@1.7.6/lite/+esm"
+    />
+    <link
+      rel="modulepreload"
+      href="https://cdn.jsdelivr.net/npm/@knighted/jsx@1.7.6/react/+esm"
+    />
+    <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/react@19.2.4/+esm" />
+    <link
+      rel="modulepreload"
+      href="https://cdn.jsdelivr.net/npm/react-dom@19.2.4/client/+esm"
+    />
+    <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/lit@3/+esm" />
+    <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/shiki@1.1.7/+esm" />
     <style>
       :root {
         font-family:
@@ -436,7 +453,7 @@
   <body>
     <main id="app">
       <header>
-        <h1>@knighted/jsx + esm.sh</h1>
+        <h1>@knighted/jsx + CDN</h1>
         <p>
           Use @knighted/jsx in any modern runtime—browser, Node, or CDN—without a build
           step.
@@ -446,18 +463,22 @@ <h1>@knighted/jsx + esm.sh</h1>
         <div class="loading-spinner" aria-hidden="true"></div>
         <div>
           <p><strong>Loading demo modules…</strong></p>
-          <p>esm.sh dependencies stream in on first visit.</p>
+          <p>CDN dependencies stream in on first visit.</p>
         </div>
       </section>
     </main>
 
     <script type="module">
-      import { jsx } from 'https://esm.sh/@knighted/jsx@latest/lite'
-      import { reactJsx } from 'https://esm.sh/@knighted/jsx@latest/react'
-      import { useEffect, useRef, useState } from 'https://esm.sh/react@19'
-      import { createRoot } from 'https://esm.sh/react-dom@19/client'
-      import { LitElement, css, html } from 'https://esm.sh/lit@3'
-      import { codeToHtml } from 'https://esm.sh/shiki@1.1.7'
+      import { jsx } from 'https://cdn.jsdelivr.net/npm/@knighted/jsx@1.7.6/lite/+esm'
+      import { reactJsx } from 'https://cdn.jsdelivr.net/npm/@knighted/jsx@1.7.6/react/+esm'
+      import {
+        useEffect,
+        useRef,
+        useState,
+      } from 'https://cdn.jsdelivr.net/npm/react@19.2.4/+esm'
+      import { createRoot } from 'https://cdn.jsdelivr.net/npm/react-dom@19.2.4/client/+esm'
+      import { LitElement, css, html } from 'https://cdn.jsdelivr.net/npm/lit@3/+esm'
+      import { codeToHtml } from 'https://cdn.jsdelivr.net/npm/shiki@1.1.7/+esm'
 
       const app = document.getElementById('app')
       const loadingCard = document.getElementById('demo-loading')
@@ -1058,7 +1079,7 @@ <h3>Share React state with Lit</h3>
               <h2>Pick the runtime that matches your target</h2>
               <p>
                 Each subpath ships a pre-minified helper so you can import exactly what you need from
-                npm or esm.sh.
+                npm or a CDN.
               </p>
             </header>
             <div class="lite-metric-grid">
@@ -1108,7 +1129,7 @@ <h2>Try the React runtime</h2>
               </p>
             </header>
             <p>
-              The panel below mounts React 19 + react-dom directly from esm.sh and keeps state with hooks.
+              The panel below mounts React 19 + react-dom directly from a CDN and keeps state with hooks.
             </p>
             <div class="react-mount" id="react-runtime-demo"></div>
             <p>
@@ -1149,7 +1170,7 @@ <h2>Lit renders React via <code>reactJsx</code></h2>
             <header>
               <h2>Combine Lit + React</h2>
               <p>
-                Stream Lit from esm.sh, register a custom element, and let React drive it with shared state.
+                Stream Lit from a CDN, register a custom element, and let React drive it with shared state.
               </p>
             </header>
             <p>
diff --git a/package-lock.json b/package-lock.json
index 3866b92..3450ff5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,19 +1,19 @@
 {
   "name": "@knighted/jsx",
-  "version": "1.7.5",
+  "version": "1.7.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@knighted/jsx",
-      "version": "1.7.5",
+      "version": "1.7.6",
       "license": "MIT",
       "dependencies": {
         "@napi-rs/wasm-runtime": "^1.1.0",
         "magic-string": "^0.30.21",
         "oxc-parser": "^0.105.0",
         "property-information": "^7.1.0",
-        "tar": "^7.5.4"
+        "tar": "^7.5.7"
       },
       "bin": {
         "jsx": "dist/cli/init.js"
@@ -41,7 +41,7 @@
         "lint-staged": "^16.2.7",
         "lit": "^3.2.1",
         "madge": "^8.0.0",
-        "next": "^16.0.0",
+        "next": "^16.1.6",
         "prettier": "^3.7.3",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
@@ -282,6 +282,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -325,6 +326,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -1754,16 +1756,16 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "16.1.5",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.1.5.tgz",
-      "integrity": "sha512-CRSCPJiSZoi4Pn69RYBDI9R7YK2g59vLexPQFXY0eyw+ILevIenCywzg+DqmlBik9zszEnw2HLFOUlLAcJbL7g==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.1.6.tgz",
+      "integrity": "sha512-N1ySLuZjnAtN3kFnwhAwPvZah8RJxKasD7x1f8shFqhncnWZn4JMfg37diLNuoHsLAlrDfM3g4mawVdtAG8XLQ==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "16.1.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.1.5.tgz",
-      "integrity": "sha512-eK7Wdm3Hjy/SCL7TevlH0C9chrpeOYWx2iR7guJDaz4zEQKWcS1IMVfMb9UKBFMg1XgzcPTYPIp1Vcpukkjg6Q==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.1.6.tgz",
+      "integrity": "sha512-wTzYulosJr/6nFnqGW7FrG3jfUUlEf8UjGA0/pyypJl42ExdVgC6xJgcXQ+V8QFn6niSG2Pb8+MIG1mZr2vczw==",
       "cpu": [
         "arm64"
       ],
@@ -1778,9 +1780,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "16.1.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.1.5.tgz",
-      "integrity": "sha512-foQscSHD1dCuxBmGkbIr6ScAUF6pRoDZP6czajyvmXPAOFNnQUJu2Os1SGELODjKp/ULa4fulnBWoHV3XdPLfA==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.1.6.tgz",
+      "integrity": "sha512-BLFPYPDO+MNJsiDWbeVzqvYd4NyuRrEYVB5k2N3JfWncuHAy2IVwMAOlVQDFjj+krkWzhY2apvmekMkfQR0CUQ==",
       "cpu": [
         "x64"
       ],
@@ -1795,9 +1797,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "16.1.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.1.5.tgz",
-      "integrity": "sha512-qNIb42o3C02ccIeSeKjacF3HXotGsxh/FMk/rSRmCzOVMtoWH88odn2uZqF8RLsSUWHcAqTgYmPD3pZ03L9ZAA==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.1.6.tgz",
+      "integrity": "sha512-OJYkCd5pj/QloBvoEcJ2XiMnlJkRv9idWA/j0ugSuA34gMT6f5b7vOiCQHVRpvStoZUknhl6/UxOXL4OwtdaBw==",
       "cpu": [
         "arm64"
       ],
@@ -1812,9 +1814,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "16.1.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.1.5.tgz",
-      "integrity": "sha512-U+kBxGUY1xMAzDTXmuVMfhaWUZQAwzRaHJ/I6ihtR5SbTVUEaDRiEU9YMjy1obBWpdOBuk1bcm+tsmifYSygfw==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.1.6.tgz",
+      "integrity": "sha512-S4J2v+8tT3NIO9u2q+S0G5KdvNDjXfAv06OhfOzNDaBn5rw84DGXWndOEB7d5/x852A20sW1M56vhC/tRVbccQ==",
       "cpu": [
         "arm64"
       ],
@@ -1829,9 +1831,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "16.1.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.1.5.tgz",
-      "integrity": "sha512-gq2UtoCpN7Ke/7tKaU7i/1L7eFLfhMbXjNghSv0MVGF1dmuoaPeEVDvkDuO/9LVa44h5gqpWeJ4mRRznjDv7LA==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.1.6.tgz",
+      "integrity": "sha512-2eEBDkFlMMNQnkTyPBhQOAyn2qMxyG2eE7GPH2WIDGEpEILcBPI/jdSv4t6xupSP+ot/jkfrCShLAa7+ZUPcJQ==",
       "cpu": [
         "x64"
       ],
@@ -1846,9 +1848,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "16.1.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.1.5.tgz",
-      "integrity": "sha512-bQWSE729PbXT6mMklWLf8dotislPle2L70E9q6iwETYEOt092GDn0c+TTNj26AjmeceSsC4ndyGsK5nKqHYXjQ==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.1.6.tgz",
+      "integrity": "sha512-oicJwRlyOoZXVlxmIMaTq7f8pN9QNbdes0q2FXfRsPhfCi8n8JmOZJm5oo1pwDaFbnnD421rVU409M3evFbIqg==",
       "cpu": [
         "x64"
       ],
@@ -1863,9 +1865,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "16.1.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.1.5.tgz",
-      "integrity": "sha512-LZli0anutkIllMtTAWZlDqdfvjWX/ch8AFK5WgkNTvaqwlouiD1oHM+WW8RXMiL0+vAkAJyAGEzPPjO+hnrSNQ==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.1.6.tgz",
+      "integrity": "sha512-gQmm8izDTPgs+DCWH22kcDmuUp7NyiJgEl18bcr8irXA5N2m2O+JQIr6f3ct42GOs9c0h8QF3L5SzIxcYAAXXw==",
       "cpu": [
         "arm64"
       ],
@@ -1880,9 +1882,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "16.1.5",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.5.tgz",
-      "integrity": "sha512-7is37HJTNQGhjPpQbkKjKEboHYQnCgpVt/4rBrrln0D9nderNxZ8ZWs8w1fAtzUx7wEyYjQ+/13myFgFj6K2Ng==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.6.tgz",
+      "integrity": "sha512-NRfO39AIrzBnixKbjuo2YiYhB6o9d8v/ymU9m/Xk8cyVk+k7XylniXkHwjs4s70wedVffc6bQNbufk5v0xEm0A==",
       "cpu": [
         "x64"
       ],
@@ -2151,6 +2153,7 @@
       "integrity": "sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "playwright": "1.57.0"
       },
@@ -2684,6 +2687,7 @@
       "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.8.0"
       }
@@ -2854,6 +2858,7 @@
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -2927,6 +2932,7 @@
       "integrity": "sha512-hM5faZwg7aVNa819m/5r7D0h0c9yC4DUlWAOvHAtISdFTc8xB86VmX5Xqabrama3wIPJ/q9RbGS1worb6JfnMg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.50.1",
         "@typescript-eslint/types": "8.50.1",
@@ -3418,6 +3424,7 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3690,6 +3697,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -4501,6 +4509,7 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "esbuild": "bin/esbuild"
       },
@@ -4598,6 +4607,7 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -6719,13 +6729,13 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "16.1.5",
-      "resolved": "https://registry.npmjs.org/next/-/next-16.1.5.tgz",
-      "integrity": "sha512-f+wE+NSbiQgh3DSAlTaw2FwY5yGdVViAtp8TotNQj4kk4Q8Bh1sC/aL9aH+Rg1YAVn18OYXsRDT7U/079jgP7w==",
+      "version": "16.1.6",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.1.6.tgz",
+      "integrity": "sha512-hkyRkcu5x/41KoqnROkfTm2pZVbKxvbZRuNvKXLRXxs3VfyO0WhY50TQS40EuKO9SW3rBj/sF3WbVwDACeMZyw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@next/env": "16.1.5",
+        "@next/env": "16.1.6",
         "@swc/helpers": "0.5.15",
         "baseline-browser-mapping": "^2.8.3",
         "caniuse-lite": "^1.0.30001579",
@@ -6739,14 +6749,14 @@
         "node": ">=20.9.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "16.1.5",
-        "@next/swc-darwin-x64": "16.1.5",
-        "@next/swc-linux-arm64-gnu": "16.1.5",
-        "@next/swc-linux-arm64-musl": "16.1.5",
-        "@next/swc-linux-x64-gnu": "16.1.5",
-        "@next/swc-linux-x64-musl": "16.1.5",
-        "@next/swc-win32-arm64-msvc": "16.1.5",
-        "@next/swc-win32-x64-msvc": "16.1.5",
+        "@next/swc-darwin-arm64": "16.1.6",
+        "@next/swc-darwin-x64": "16.1.6",
+        "@next/swc-linux-arm64-gnu": "16.1.6",
+        "@next/swc-linux-arm64-musl": "16.1.6",
+        "@next/swc-linux-x64-gnu": "16.1.6",
+        "@next/swc-linux-x64-musl": "16.1.6",
+        "@next/swc-win32-arm64-msvc": "16.1.6",
+        "@next/swc-win32-x64-msvc": "16.1.6",
         "sharp": "^0.34.4"
       },
       "peerDependencies": {
@@ -7314,6 +7324,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -7461,6 +7472,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -7587,6 +7599,7 @@
       "integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7597,6 +7610,7 @@
       "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -8594,6 +8608,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8881,6 +8896,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -9024,6 +9040,7 @@
       "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -9132,6 +9149,7 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -9174,6 +9192,7 @@
       "integrity": "sha512-E4t7DJ9pESL6E3I8nFjPa4xGUd3PmiWDLsDztS2qXSJWfHtbQnwAWylaBvSNY48I3vr8PTqIZlyK8TE3V3CA4Q==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vitest/expect": "4.0.16",
         "@vitest/mocker": "4.0.16",
diff --git a/package.json b/package.json
index 7c5b057..b4ce545 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@knighted/jsx",
-  "version": "1.7.5",
+  "version": "1.7.6",
   "description": "Runtime JSX tagged template that renders DOM or React trees anywhere with or without a build step.",
   "keywords": [
     "jsx runtime",
@@ -164,7 +164,7 @@
     "lint-staged": "^16.2.7",
     "lit": "^3.2.1",
     "madge": "^8.0.0",
-    "next": "^16.0.0",
+    "next": "^16.1.6",
     "prettier": "^3.7.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -180,7 +180,7 @@
     "magic-string": "^0.30.21",
     "oxc-parser": "^0.105.0",
     "property-information": "^7.1.0",
-    "tar": "^7.5.4"
+    "tar": "^7.5.7"
   },
   "peerDependencies": {
     "jsdom": "*",
diff --git a/playwright.config.ts b/playwright.config.ts
index 4c17bfe..1dc533f 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -24,6 +24,9 @@ export default defineConfig({
   fullyParallel: true,
   retries: process.env.CI ? 2 : 0,
   reporter: process.env.CI ? 'github' : 'list',
+  expect: {
+    timeout: 10_000,
+  },
   use: {
     baseURL: esmDemoUrl,
     trace: 'on-first-retry',
@@ -32,8 +35,8 @@ export default defineConfig({
   projects,
   webServer: [
     {
-      command: `npx http-server examples -p ${ESM_DEMO_PORT} -a ${HOST} --silent`,
-      url: `http://${HOST}:${ESM_DEMO_PORT}/esm-demo.html`,
+      command: `npx http-server . -p ${ESM_DEMO_PORT} -a ${HOST} --silent`,
+      url: `http://${HOST}:${ESM_DEMO_PORT}/test/fixtures/e2e.html`,
       reuseExistingServer: !process.env.CI,
       timeout: 120 * 1000,
     },
diff --git a/playwright/esm-demo.spec.ts b/playwright/esm-demo.spec.ts
index e258a9d..7abc057 100644
--- a/playwright/esm-demo.spec.ts
+++ b/playwright/esm-demo.spec.ts
@@ -14,14 +14,11 @@ const overviewSelectors = {
 }
 
 /**
- * Tests the esm.sh demo page to ensure that the published package works as expected.
- *
- * NOTE: These tests rely on esm.sh serving the latest published version.
- * If a new release is pending propagation, expect these checks to fail until the CDN updates.
+ * Tests the local E2E fixture to ensure that the current build works as expected.
  */
-test.describe('esm demo via esm.sh', () => {
+test.describe('esm demo via local dist fixture', () => {
   test('renders nested DOM trees and increments counter', async ({ page }) => {
-    await page.goto('/esm-demo.html')
+    await page.goto('/test/fixtures/e2e.html')
 
     const counterButton = page.locator('.counter-button')
     const counterLabel = page.locator('.counter-value')
@@ -41,7 +38,7 @@ test.describe('esm demo via esm.sh', () => {
   })
 
   test('bridges lite tree with React + Lit hybrid widget', async ({ page }) => {
-    await page.goto('/esm-demo.html')
+    await page.goto('/test/fixtures/e2e.html')
 
     const reactPanelButton = page.locator(hybridSelectors.reactRuntimeButton)
     const reactPanelCounter = page
diff --git a/test/fixtures/e2e.html b/test/fixtures/e2e.html
new file mode 100644
index 0000000..7b449ac
--- /dev/null
+++ b/test/fixtures/e2e.html
@@ -0,0 +1,1232 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>@knighted/jsx &mdash; E2E fixture</title>
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
+    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
+    <link rel="modulepreload" href="/dist/lite/index.js" />
+    <link rel="modulepreload" href="/dist/react/index.js" />
+    <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/react@19.2.4/+esm" />
+    <link
+      rel="modulepreload"
+      href="https://cdn.jsdelivr.net/npm/react-dom@19.2.4/client/+esm"
+    />
+    <link
+      rel="modulepreload"
+      href="https://cdn.jsdelivr.net/npm/property-information@7.1.0/+esm"
+    />
+    <link
+      rel="modulepreload"
+      href="https://cdn.jsdelivr.net/npm/oxc-parser@0.105.0/+esm"
+    />
+    <link
+      rel="modulepreload"
+      href="https://cdn.jsdelivr.net/npm/@oxc-parser/binding-wasm32-wasi@0.105.0/+esm"
+    />
+    <link
+      rel="modulepreload"
+      href="https://cdn.jsdelivr.net/npm/@oxc-project/types@0.105.0/+esm"
+    />
+    <link
+      rel="modulepreload"
+      href="https://cdn.jsdelivr.net/npm/@napi-rs/wasm-runtime@1.1.0/+esm"
+    />
+    <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/lit@3/+esm" />
+    <link rel="modulepreload" href="https://cdn.jsdelivr.net/npm/shiki@1.1.7/+esm" />
+    <script type="importmap">
+      {
+        "imports": {
+          "@knighted/jsx/lite": "/dist/lite/index.js",
+          "@knighted/jsx/react": "/dist/react/index.js",
+          "react": "https://cdn.jsdelivr.net/npm/react@19.2.4/+esm",
+          "react-dom/client": "https://cdn.jsdelivr.net/npm/react-dom@19.2.4/client/+esm",
+          "lit": "https://cdn.jsdelivr.net/npm/lit@3/+esm",
+          "shiki": "https://cdn.jsdelivr.net/npm/shiki@1.1.7/+esm",
+          "property-information": "https://cdn.jsdelivr.net/npm/property-information@7.1.0/+esm",
+          "oxc-parser": "https://cdn.jsdelivr.net/npm/oxc-parser@0.105.0/+esm",
+          "@oxc-parser/binding-wasm32-wasi": "https://cdn.jsdelivr.net/npm/@oxc-parser/binding-wasm32-wasi@0.105.0/+esm",
+          "@oxc-project/types": "https://cdn.jsdelivr.net/npm/@oxc-project/types@0.105.0/+esm",
+          "@napi-rs/wasm-runtime": "https://cdn.jsdelivr.net/npm/@napi-rs/wasm-runtime@1.1.0/+esm"
+        }
+      }
+    </script>
+    <style>
+      :root {
+        font-family:
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          'Segoe UI',
+          sans-serif;
+        color: #111;
+        background: #f7f7f8;
+        line-height: 1.5;
+      }
+
+      body {
+        margin: 0;
+        padding: 2rem;
+      }
+
+      h1 {
+        margin-top: 0;
+        font-size: clamp(1.75rem, 3vw, 2.5rem);
+      }
+
+      main {
+        max-width: 720px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+      }
+
+      .card {
+        background: white;
+        border-radius: 1rem;
+        padding: 1.5rem;
+        box-shadow: 0 15px 45px rgba(15, 23, 42, 0.08);
+      }
+
+      .loading-card {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        color: #4b5563;
+      }
+
+      .loading-spinner {
+        width: 2.75rem;
+        height: 2.75rem;
+        border-radius: 50%;
+        border: 3px solid rgba(37, 99, 235, 0.2);
+        border-top-color: #2563eb;
+        animation: spinner 1s linear infinite;
+        flex-shrink: 0;
+      }
+
+      @keyframes spinner {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+
+      .list {
+        padding-left: 1.5rem;
+      }
+
+      .counter-button {
+        margin-top: 1rem;
+        padding: 0.75rem 1.25rem;
+        border: none;
+        border-radius: 999px;
+        background: #111;
+        color: white;
+        font-weight: 600;
+        cursor: pointer;
+      }
+
+      .counter-value {
+        font-size: 2rem;
+        font-weight: 700;
+      }
+
+      .eyebrow {
+        font-size: 0.75rem;
+        letter-spacing: 0.35em;
+        text-transform: uppercase;
+        color: #6b7280;
+        margin: 0 0 0.5rem;
+      }
+
+      .overview-card {
+        border-left: 4px solid #6366f1;
+        background-image: linear-gradient(
+          120deg,
+          rgba(99, 102, 241, 0.08),
+          rgba(14, 165, 233, 0.08)
+        );
+      }
+
+      .capability-list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: grid;
+        gap: 1rem;
+        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+      }
+
+      .capability-item {
+        border-radius: 1rem;
+        border: 1px solid rgba(15, 23, 42, 0.08);
+        padding: 1rem;
+        background: #f9fafb;
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
+      }
+
+      .capability-item:last-child:nth-child(odd) {
+        grid-column: 1 / -1;
+      }
+
+      .capability-item strong {
+        display: block;
+        font-size: 0.9rem;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+        color: #1d4ed8;
+        margin-bottom: 0.35rem;
+      }
+
+      .capability-item p {
+        margin: 0;
+        color: #1f2937;
+      }
+
+      .dom-card {
+        border-left: 4px solid #16a34a;
+      }
+
+      .demo-link {
+        color: #2563eb;
+        text-decoration: none;
+        font-weight: 600;
+      }
+
+      .demo-link:hover {
+        text-decoration: underline;
+      }
+
+      .lite-metric-grid {
+        display: grid;
+        gap: 1rem;
+        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+        margin-top: 1.5rem;
+      }
+
+      .lite-metric {
+        border-radius: 1rem;
+        border: 1px solid rgba(37, 99, 235, 0.2);
+        background: linear-gradient(
+          135deg,
+          rgba(37, 99, 235, 0.06),
+          rgba(14, 165, 233, 0.08)
+        );
+        padding: 1rem;
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
+      }
+
+      .lite-metric header {
+        display: flex;
+        flex-direction: column;
+        gap: 0.2rem;
+        margin-bottom: 0.4rem;
+      }
+
+      .lite-metric header strong {
+        font-size: 0.9rem;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        color: #1d4ed8;
+      }
+
+      .lite-metric header span {
+        font-size: 0.95rem;
+        color: #0f172a;
+      }
+
+      .lite-metric-size {
+        font-size: 1.05rem;
+        font-weight: 700;
+        margin: 0 0 0.35rem;
+        color: #111827;
+      }
+
+      .lite-metric-note {
+        margin: 0;
+        color: #1f2937;
+      }
+
+      .source-panel {
+        margin-top: 1rem;
+        border-radius: 0.9rem;
+        border: 1px solid rgba(15, 23, 42, 0.12);
+        background: #f9fafb;
+        overflow: hidden;
+      }
+
+      .source-panel summary {
+        cursor: pointer;
+        padding: 0.75rem 1.25rem;
+        font-weight: 600;
+        color: #1d4ed8;
+        list-style: none;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.75rem;
+      }
+
+      .source-panel summary span {
+        text-decoration: underline;
+      }
+
+      .source-panel summary::-webkit-details-marker {
+        display: none;
+      }
+
+      .source-panel summary::after {
+        content: '↴';
+        font-size: 1.15rem;
+        transition: transform 0.25s ease;
+      }
+
+      .source-panel[open] summary::after {
+        transform: rotate(180deg);
+      }
+
+      .source-panel-body {
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height 0.35s ease;
+        border-top: 1px solid rgba(15, 23, 42, 0.08);
+        background: #fff;
+      }
+
+      .source-panel[open] .source-panel-body {
+        max-height: 30rem;
+        overflow-y: auto;
+      }
+
+      .source-panel pre {
+        margin: 0;
+        padding: 1rem 1.25rem;
+        background: transparent;
+      }
+
+      .source-code {
+        font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+        font-size: 0.85rem;
+        line-height: 1.5;
+        white-space: pre;
+        overflow-x: auto;
+        word-break: normal;
+      }
+
+      .source-code.shiki {
+        border-radius: 0;
+        background: transparent;
+      }
+
+      .source-code.shiki code {
+        font-family: inherit;
+        background: none;
+        border-radius: 0;
+        padding: 0;
+        color: inherit;
+      }
+
+      code {
+        font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+        font-size: 0.9em;
+        background: rgba(15, 23, 42, 0.08);
+        border-radius: 0.35rem;
+        padding: 0.05rem 0.35rem;
+        color: #0f172a;
+      }
+
+      @media (max-width: 640px) {
+        .lite-metric header {
+          gap: 0.35rem;
+        }
+
+        .lite-metric header strong {
+          word-break: break-word;
+          font-size: 0.85rem;
+        }
+
+        .lite-metric-size {
+          font-size: 0.95rem;
+        }
+
+        .source-panel pre {
+          font-size: 0.8rem;
+        }
+      }
+
+      .react-card {
+        border-left: 4px solid #2563eb;
+      }
+
+      .lit-react-card {
+        border-left-color: #f97316;
+      }
+
+      .lit-react-card .react-mount {
+        border-color: rgba(249, 115, 22, 0.35);
+        background: linear-gradient(
+          135deg,
+          rgba(249, 115, 22, 0.08),
+          rgba(234, 179, 8, 0.08)
+        );
+      }
+
+      .react-mount {
+        min-height: 220px;
+        border-radius: 1rem;
+        border: 1px dashed rgba(37, 99, 235, 0.4);
+        padding: 1rem;
+        background: linear-gradient(
+          135deg,
+          rgba(37, 99, 235, 0.05),
+          rgba(14, 165, 233, 0.05)
+        );
+      }
+
+      .react-panel {
+        display: flex;
+        flex-direction: column;
+        gap: 0.8rem;
+      }
+
+      .react-panel h3 {
+        margin: 0;
+      }
+
+      .react-panel button {
+        align-self: flex-start;
+        padding: 0.65rem 1.2rem;
+        border-radius: 999px;
+        border: none;
+        background: #2563eb;
+        color: white;
+        font-weight: 600;
+        cursor: pointer;
+      }
+
+      .react-metrics {
+        display: flex;
+        gap: 0.6rem;
+        flex-wrap: wrap;
+        font-weight: 600;
+        margin: 0.35rem 0 0.85rem;
+      }
+
+      .react-metrics span {
+        padding: 0.3rem 0.65rem;
+        border-radius: 999px;
+        background: rgba(37, 99, 235, 0.12);
+        color: #1d4ed8;
+        font-size: 0.85rem;
+      }
+
+      .hybrid-card {
+        border-left: 4px solid #f59e0b;
+      }
+
+      .hybrid-react-cluster {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+      }
+
+      .hybrid-react-badge {
+        border-radius: 1rem;
+        padding: 1rem 1.25rem;
+        background: rgba(255, 255, 255, 0.9);
+        border: 1px solid rgba(37, 99, 235, 0.2);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
+      }
+
+      .hybrid-react-badge header {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+        gap: 0.5rem;
+        margin-bottom: 0.5rem;
+      }
+
+      .hybrid-react-badge header strong {
+        font-size: 0.95rem;
+        color: #2563eb;
+      }
+
+      .hybrid-react-badge .handshake-count {
+        font-size: 2rem;
+        font-weight: 700;
+        margin: 0;
+      }
+
+      .hybrid-react-badge button {
+        margin-top: 0.75rem;
+        border: none;
+        border-radius: 999px;
+        padding: 0.55rem 1.15rem;
+        background: #2563eb;
+        color: white;
+        font-weight: 600;
+        cursor: pointer;
+      }
+
+      .hybrid-react-badge[data-connected='false'] {
+        border-color: rgba(234, 88, 12, 0.35);
+        background: rgba(251, 146, 60, 0.08);
+      }
+
+      lit-hosts-react {
+        display: block;
+        margin-top: 1rem;
+      }
+    </style>
+  </head>
+  <body>
+    <main id="app">
+      <header>
+        <h1>@knighted/jsx + CDN</h1>
+        <p>
+          Use @knighted/jsx in any modern runtime—browser, Node, or CDN—without a build
+          step.
+        </p>
+      </header>
+      <section id="demo-loading" class="card loading-card" aria-live="polite">
+        <div class="loading-spinner" aria-hidden="true"></div>
+        <div>
+          <p><strong>Loading demo modules…</strong></p>
+          <p>CDN dependencies stream in on first visit.</p>
+        </div>
+      </section>
+    </main>
+
+    <script type="module">
+      import { jsx } from '@knighted/jsx/lite'
+      import { reactJsx } from '@knighted/jsx/react'
+      import { useEffect, useRef, useState } from 'react'
+      import { createRoot } from 'react-dom/client'
+      import { LitElement, css, html } from 'lit'
+      import { codeToHtml } from 'shiki'
+
+      const app = document.getElementById('app')
+      const loadingCard = document.getElementById('demo-loading')
+      const capabilityHighlights = [
+        {
+          label: 'DOM template tag',
+          detail:
+            'Render real DOM nodes anywhere the browser runs, no transpilation required.',
+        },
+        {
+          label: 'React runtime',
+          detail: jsx`<span>Call <code>reactJsx</code> to emit React elements with full hook + hydration support.</span>`,
+        },
+        {
+          label: 'Node + SSR',
+          detail:
+            'Use @knighted/jsx/node to bootstrap linkedom/jsdom and reuse templates on the server.',
+        },
+        {
+          label: 'Bundler + loader',
+          detail:
+            'Drop @knighted/jsx/loader into Rspack/Webpack to rewrite template literals at build time.',
+        },
+        {
+          label: 'Lite entrypaths',
+          detail:
+            'Ship pre-minified helpers scoped to DOM, React, or Node by importing the /lite variants.',
+        },
+      ]
+      const liteEntryMetrics = [
+        {
+          entry: '@knighted/jsx/lite',
+          context: 'DOM runtime helpers',
+          raw: '~10.3 kB raw',
+          gzip: '~4.3 kB min+gzip',
+          note: 'Great for browser demos or DOM-like shims without bundlers.',
+        },
+        {
+          entry: '@knighted/jsx/react/lite',
+          context: 'React runtime helpers',
+          raw: '~6.8 kB raw',
+          gzip: '~3.0 kB min+gzip',
+          note: 'Emits React elements so hooks and React 19 streaming just work.',
+        },
+        {
+          entry: '@knighted/jsx/node/lite',
+          context: 'Node DOM entry',
+          raw: '~11.5 kB raw',
+          gzip: '~4.8 kB min+gzip',
+          note: 'Bundles the DOM shim bootstrap for headless SSR scripts.',
+        },
+        {
+          entry: '@knighted/jsx/node/react/lite',
+          context: 'Node React entry',
+          raw: '~6.8 kB raw',
+          gzip: '~3.0 kB min+gzip',
+          note: jsx`<span>Combines the <code>reactJsx</code> helper with the DOM shim for hybrid SSR pipelines.</span>`,
+        },
+      ]
+      const counterSource = [
+        "import { jsx } from '@knighted/jsx'",
+        '',
+        'const Counter = ({ start = 0 }) => {',
+        '  let value = start',
+        '  const valueLabel = jsx`<span class="counter-value">${value}</span>`',
+        '',
+        '  const increment = () => {',
+        '    value += 1',
+        '    valueLabel.textContent = String(value)',
+        '  }',
+        '',
+        '  return jsx`',
+        '    <section class="card dom-card">',
+        '      <header>',
+        '        <p class="eyebrow">DOM helper</p>',
+        '        <h2>Stateful counter rendered with <code>jsx</code></h2>',
+        '      </header>',
+        '      <p>No React, no framework—just the DOM API and the <code>jsx</code> tag.</p>',
+        '      <p>Current total: ${valueLabel}</p>',
+        '      <button onClick={${increment}}>Increment</button>',
+        '    </section>',
+        '  `',
+        '}',
+        '',
+        'document.body.append(Counter({ start: 0 }))',
+      ].join('\n')
+      const reactRuntimeSource = [
+        "import { reactJsx } from '@knighted/jsx/react'",
+        "import { useState } from 'react'",
+        "import { createRoot } from 'react-dom/client'",
+        '',
+        'const ReactRuntimePanel = () => {',
+        '  const [clicks, setClicks] = useState(0)',
+        '',
+        '  return reactJsx`',
+        '    <div className="react-panel">',
+        '      <p className="eyebrow">React runtime</p>',
+        '      <h3><code>reactJsx</code> + React 19</h3>',
+        '      <div className="react-metrics">',
+        '        ${reactMetrics.map(label => reactJsx`<span key={${label}}>${label}</span>`)}',
+        '      </div>',
+        "      <p>Button clicks:{' '}<strong>${clicks}</strong></p>",
+        '      <button onClick={${() => setClicks(value => value + 1)}}>',
+        '        Trigger React state',
+        '      </button>',
+        '    </div>',
+        '  `',
+        '}',
+        '',
+        "const host = document.getElementById('react-runtime-demo')",
+        'if (host) {',
+        '  createRoot(host).render(',
+        '    reactJsx`',
+        '      <${ReactRuntimePanel} />',
+        '    `,',
+        '  )',
+        '}',
+      ].join('\n')
+      const litHostsSource = [
+        "import { jsx } from '@knighted/jsx'",
+        "import { reactJsx } from '@knighted/jsx/react'",
+        "import { useState } from 'react'",
+        "import { createRoot } from 'react-dom/client'",
+        "import { LitElement, html } from 'lit'",
+        '',
+        'const HybridReactBadge = ({ label }) => {',
+        '  const [handshakes, setHandshakes] = useState(1)',
+        '  const [connected, setConnected] = useState(true)',
+        '  const toggleConnection = () => {',
+        '    setHandshakes(value => value + 1)',
+        '    setConnected(value => !value)',
+        '  }',
+        '',
+        '  return reactJsx`',
+        '    <div className="hybrid-react-badge" data-connected={${String(connected)}}>',
+        '      <header>',
+        '        <p className="eyebrow">React child</p>',
+        "        <strong>${connected ? 'Connected' : 'Paused'}</strong>",
+        '      </header>',
+        '      <p className="handshake-count">${handshakes}</p>',
+        '      <button type="button" onClick={${toggleConnection}}>',
+        "        ${connected ? 'Pause bridge' : 'Resume bridge'}",
+        '      </button>',
+        '    </div>',
+        '  `',
+        '}',
+        '',
+        'class LitHostsReactElement extends LitElement {',
+        '  renderReactTree(tree) {',
+        '    if (!this.reactHost) {',
+        "      this.reactHost = document.createElement('div')",
+        '    }',
+        '',
+        '    if (!this.reactRoot && this.reactHost) {',
+        '      this.reactRoot = createRoot(this.reactHost)',
+        '    }',
+        '',
+        '    this.reactRoot?.render(tree)',
+        '    return this.reactHost',
+        '  }',
+        '',
+        '  render() {',
+        '    const reactTree = reactJsx`',
+        '      <div className="hybrid-react-cluster">',
+        '        <${HybridReactBadge} label={${this.title}} />',
+        '        <p className="react-status">Rendered with <code>reactJsx</code></p>',
+        '      </div>',
+        '    `',
+        '',
+        '    return html`',
+        '      <article class="hybrid-shell">',
+        '        <div class="react-slot">${this.renderReactTree(reactTree)}</div>',
+        '        <div class="nested-slot">',
+        '          ${jsx`',
+        '            <ul class="list">',
+        '              <li>Lit renders DOM nodes via the <code>jsx</code> helper.</li>',
+        '              <li>The React subtree above mounts with <code>reactJsx</code>.</li>',
+        '            </ul>',
+        '          `}',
+        '        </div>',
+        '      </article>',
+        '    `',
+        '  }',
+        '}',
+        '',
+        "if (!customElements.get('lit-hosts-react')) {",
+        "  customElements.define('lit-hosts-react', LitHostsReactElement)",
+        '}',
+        '',
+        'document.body.append(',
+        '  jsx`<lit-hosts-react title="Lit hosts React"></lit-hosts-react>`',
+        ')',
+      ].join('\n')
+      const litBridgeSource = [
+        "import { reactJsx } from '@knighted/jsx/react'",
+        "import { useEffect, useRef, useState } from 'react'",
+        "import { createRoot } from 'react-dom/client'",
+        '',
+        'const LitReactBridgePanel = () => {',
+        '  const [syncCount, setSyncCount] = useState(2)',
+        '  const meterRef = useRef(null)',
+        '',
+        '  useEffect(() => {',
+        '    if (!meterRef.current) {',
+        '      return',
+        '    }',
+        '    meterRef.current.count = syncCount',
+        "    meterRef.current.status = syncCount % 2 === 0 ? 'Even handshake' : 'Odd handshake'",
+        '  }, [syncCount])',
+        '',
+        '  return reactJsx`',
+        '    <div className="react-panel">',
+        '      <lit-react-meter ref={${meterRef}} />',
+        '      <button onClick={${() => setSyncCount(value => value + 1)}}>',
+        '        Sync Lit with React state',
+        '      </button>',
+        '    </div>',
+        '  `',
+        '}',
+        '',
+        "const bridgeHost = document.getElementById('lit-react-bridge-demo')",
+        'if (bridgeHost) {',
+        '  createRoot(bridgeHost).render(',
+        '    reactJsx`',
+        '      <${LitReactBridgePanel} />',
+        '    `,',
+        '  )',
+        '}',
+      ].join('\n')
+      const renderSourcePanel = ({ label, code, language = 'tsx' }) =>
+        jsx`
+          <details class="source-panel">
+            <summary>
+              <span>View source · ${label}</span>
+            </summary>
+            <div class="source-panel-body">
+              <pre class="source-code" data-lang={${language}}>{${code}}</pre>
+            </div>
+          </details>
+        `
+      const Counter = ({ start = 0 }) => {
+        let value = start
+        const valueLabel = jsx`<span class="counter-value">${value}</span>`
+        const increment = () => {
+          value += 1
+          valueLabel.textContent = String(value)
+        }
+
+        return jsx`
+          <section class="card dom-card">
+            <header>
+              <p class="eyebrow">DOM helper</p>
+              <h2>Stateful counter rendered with <code>jsx</code></h2>
+            </header>
+            <p>No React, no framework—just the DOM API and the <code>jsx</code> tag.</p>
+            <p>Current total: ${valueLabel}</p>
+            <button class="counter-button" onClick={${increment}}>
+              Increment
+            </button>
+            ${renderSourcePanel({
+              label: 'DOM counter',
+              code: counterSource,
+              language: 'tsx',
+            })}
+          </section>
+        `
+      }
+      const reactMetrics = ['Hooks ready', 'Fragments inline', 'Suspense friendly']
+      const ReactBadge = ({ label }) =>
+        reactJsx`
+          <span>${label}</span>
+        `
+      const HybridReactBadge = ({ label }) => {
+        const [handshakes, setHandshakes] = useState(1)
+        const [connected, setConnected] = useState(true)
+        const toggleConnection = () => {
+          setHandshakes(value => value + 1)
+          setConnected(value => !value)
+        }
+
+        return reactJsx`
+          <div className="hybrid-react-badge" data-connected={${String(connected)}}>
+            <header>
+              <p className="eyebrow">React child</p>
+              <strong>${connected ? 'Connected' : 'Paused'}</strong>
+            </header>
+            <p className="handshake-count">${handshakes}</p>
+            <p>Handshakes with the Lit parent since mount.</p>
+            <button type="button" onClick={${toggleConnection}}>
+              ${connected ? 'Pause bridge' : 'Resume bridge'}
+            </button>
+          </div>
+        `
+      }
+
+      class LitReactMeter extends LitElement {
+        static properties = {
+          count: { type: Number },
+          status: { type: String },
+        }
+
+        static styles = css`
+          :host {
+            display: block;
+            border-radius: 1rem;
+            border: 1px solid rgba(15, 23, 42, 0.08);
+            padding: 1rem 1.25rem;
+            background: white;
+            box-shadow: 0 15px 40px rgba(15, 23, 42, 0.08);
+          }
+
+          .meter-status {
+            font-size: 0.75rem;
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+            color: #fb923c;
+            margin: 0 0 0.4rem;
+          }
+
+          .meter-count {
+            font-size: 2.25rem;
+            font-weight: 700;
+            margin: 0 0 0.5rem;
+            color: #111827;
+          }
+
+          .meter-subtext {
+            font-size: 0.95rem;
+            margin: 0;
+            color: #4b5563;
+          }
+        `
+
+        constructor() {
+          super()
+          this.count = 0
+          this.status = 'Bridge idle'
+        }
+
+        render() {
+          return html`
+            <p class="meter-status">${this.status}</p>
+            <p class="meter-count">${this.count}</p>
+            <p class="meter-subtext">
+              <slot></slot>
+            </p>
+          `
+        }
+      }
+
+      const highlightSourcePanels = async () => {
+        const sourceNodes = document.querySelectorAll('.source-code')
+        if (!sourceNodes.length) {
+          return
+        }
+
+        await Promise.all(
+          Array.from(sourceNodes).map(async node => {
+            const language = node.dataset.lang || 'tsx'
+            const rawSample = node.textContent || ''
+            const codeSample = rawSample.replace(/^\s+/, '')
+            if (!codeSample.trim()) {
+              return
+            }
+
+            try {
+              const highlighted = await codeToHtml(codeSample, {
+                lang: language,
+                theme: 'github-light',
+              })
+              const template = document.createElement('template')
+              template.innerHTML = highlighted
+              const shikiPre = template.content.querySelector('pre')
+              if (!shikiPre) {
+                return
+              }
+
+              node.classList.add('shiki')
+              const shikiStyle = shikiPre.getAttribute('style')
+              if (shikiStyle) {
+                node.setAttribute('style', shikiStyle)
+              }
+              node.innerHTML = shikiPre.innerHTML
+              delete node.dataset.lang
+            } catch (error) {
+              console.warn('Failed to highlight source panel', error)
+            }
+          }),
+        )
+      }
+
+      if (!customElements.get('lit-react-meter')) {
+        customElements.define('lit-react-meter', LitReactMeter)
+      }
+
+      class LitHostsReactElement extends LitElement {
+        static properties = {
+          title: { type: String },
+          subtitle: { type: String },
+        }
+
+        static styles = css`
+          :host {
+            display: block;
+          }
+
+          .hybrid-shell {
+            border-radius: 1.25rem;
+            border: 1px solid rgba(15, 23, 42, 0.08);
+            padding: 1.5rem;
+            background: white;
+            box-shadow: 0 15px 45px rgba(15, 23, 42, 0.1);
+            display: flex;
+            flex-direction: column;
+            gap: 1.25rem;
+          }
+
+          .hybrid-shell header h3 {
+            margin: 0.25rem 0 0;
+          }
+
+          .react-slot {
+            padding: 1rem;
+            border-radius: 1rem;
+            background: rgba(37, 99, 235, 0.08);
+            border: 1px dashed rgba(37, 99, 235, 0.35);
+          }
+
+          .react-slot :is(button, span) {
+            font-weight: 600;
+            border-radius: 999px;
+            padding: 0.4rem 0.9rem;
+            border: none;
+            background: white;
+          }
+
+          .nested-slot {
+            border-radius: 0.85rem;
+            border: 1px solid rgba(15, 23, 42, 0.08);
+            padding: 1rem;
+            background: #f9fafb;
+          }
+
+          .nested-slot ul {
+            margin: 0;
+          }
+
+          .hybrid-shell footer {
+            font-size: 0.9rem;
+            color: #4b5563;
+            margin: 0;
+          }
+        `
+
+        constructor() {
+          super()
+          this.title = 'Lit hosts React'
+          this.subtitle = 'renders the React subtree while Lit owns the shell.'
+          this.reactRoot = null
+          this.reactHost = null
+        }
+
+        renderReactTree(tree) {
+          if (!this.reactHost) {
+            this.reactHost = document.createElement('div')
+          }
+
+          if (!this.reactRoot && this.reactHost) {
+            this.reactRoot = createRoot(this.reactHost)
+          }
+
+          this.reactRoot?.render(tree)
+          return this.reactHost
+        }
+
+        disconnectedCallback() {
+          this.reactRoot?.unmount()
+          this.reactRoot = null
+          this.reactHost = null
+          super.disconnectedCallback()
+        }
+
+        render() {
+          const reactTree = reactJsx`
+            <div className="hybrid-react-cluster">
+              <${HybridReactBadge} label={${this.title}} />
+              <p className="react-status">Rendered with <code>reactJsx</code></p>
+            </div>
+          `
+          const reactNode = this.renderReactTree(reactTree)
+
+          return html`
+            <article class="hybrid-shell">
+              <header>
+                <p class="eyebrow">Lit parent</p>
+                <h3>${this.title}</h3>
+                <p><code>reactJsx</code> ${this.subtitle}</p>
+              </header>
+              <div class="react-slot">${reactNode}</div>
+              <div class="nested-slot">
+                ${jsx`
+                  <ul class="list">
+                    <li>Lit renders DOM nodes via the <code>jsx</code> helper.</li>
+                    <li>The React subtree above mounts with <code>reactJsx</code>.</li>
+                  </ul>
+                `}
+              </div>
+              <footer>React output lives inside the Lit template.</footer>
+            </article>
+          `
+        }
+      }
+
+      if (!customElements.get('lit-hosts-react')) {
+        customElements.define('lit-hosts-react', LitHostsReactElement)
+      }
+
+      const ReactRuntimePanel = () => {
+        const [clicks, setClicks] = useState(0)
+
+        return reactJsx`
+          <div className="react-panel">
+            <p className="eyebrow">React runtime</p>
+            <h3><code>reactJsx</code> + React 19</h3>
+            <div className="react-metrics">
+              ${reactMetrics.map(
+                label => reactJsx`<${ReactBadge} key={${label}} label={${label}} />`,
+              )}
+            </div>
+            <p>
+              Button clicks:{' '}<strong>${clicks}</strong>
+            </p>
+            <button type="button" onClick={${() => setClicks(value => value + 1)}}>
+              Trigger React state
+            </button>
+          </div>
+        `
+      }
+
+      const LitReactBridgePanel = () => {
+        const [syncCount, setSyncCount] = useState(2)
+        const meterRef = useRef(null)
+
+        useEffect(() => {
+          if (!meterRef.current) {
+            return
+          }
+          meterRef.current.count = syncCount
+          meterRef.current.status =
+            syncCount % 2 === 0 ? 'Even handshake' : 'Odd handshake'
+        }, [syncCount])
+
+        return reactJsx`
+          <div className="react-panel">
+            <p className="eyebrow">React + Lit</p>
+            <h3>Share React state with Lit</h3>
+            <p>
+              React hooks update a Lit web component below using plain custom element refs.
+            </p>
+            <lit-react-meter ref={${meterRef}}>
+              <span>Lit renders this meter while React drives the data flow.</span>
+            </lit-react-meter>
+            <button type="button" onClick={${() => setSyncCount(value => value + 1)}}>
+              Sync Lit with React state
+            </button>
+          </div>
+        `
+      }
+      const mountReactRuntimeDemo = host => {
+        if (!host) {
+          return null
+        }
+        const root = createRoot(host)
+        root.render(
+          reactJsx`
+            <${ReactRuntimePanel} />
+          `,
+        )
+        return root
+      }
+      const mountLitReactBridgeDemo = host => {
+        if (!host) {
+          return null
+        }
+        const root = createRoot(host)
+        root.render(
+          reactJsx`
+            <${LitReactBridgePanel} />
+          `,
+        )
+        return root
+      }
+      const LiteSavings = () =>
+        jsx`
+          <section class="card lite-savings" id="lite-entrypaths">
+            <header>
+              <p class="eyebrow">Lite entrypaths</p>
+              <h2>Pick the runtime that matches your target</h2>
+              <p>
+                Each subpath ships a pre-minified helper so you can import exactly what you need from
+                npm or a CDN.
+              </p>
+            </header>
+            <div class="lite-metric-grid">
+              ${liteEntryMetrics.map(
+                metric =>
+                  jsx`<article class="lite-metric">
+                    <header>
+                      <strong>${metric.entry}</strong>
+                      <span>${metric.context}</span>
+                    </header>
+                    <p class="lite-metric-size">${metric.raw} • ${metric.gzip}</p>
+                    <p class="lite-metric-note">${metric.note}</p>
+                  </article>`,
+              )}
+            </div>
+          </section>
+        `
+      const demo = jsx`
+        <>
+          <section class="card overview-card">
+            <header>
+              <p class="eyebrow">Runtime overview</p>
+              <h2>All the ways to use @knighted/jsx</h2>
+              <p>
+                Share one tagged template workflow across DOM nodes, React trees, SSR, and bundler builds.
+              </p>
+            </header>
+            <ul class="capability-list">
+              ${capabilityHighlights.map(
+                capability =>
+                  jsx`<li class="capability-item">
+                    <strong>${capability.label}</strong>
+                    <p>${capability.detail}</p>
+                  </li>`,
+              )}
+            </ul>
+            <p>
+              <a class="demo-link" href="#lite-entrypaths">Jump to the lite entrypaths ↴</a>
+            </p>
+          </section>
+          <${Counter} start={${0}} />
+          <section class="card react-card">
+            <header>
+              <h2>Try the React runtime</h2>
+              <p>
+                The <code>reactJsx</code> helper builds React elements so you can share a single template style between DOM and React trees.
+              </p>
+            </header>
+            <p>
+              The panel below mounts React 19 + react-dom directly from a CDN and keeps state with hooks.
+            </p>
+            <div class="react-mount" id="react-runtime-demo"></div>
+            <p>
+              No bundler needed—both the DOM and React runtimes run straight from CDN imports.
+            </p>
+            ${renderSourcePanel({
+              label: 'React runtime panel',
+              code: reactRuntimeSource,
+              language: 'tsx',
+            })}
+          </section>
+          <section class="card hybrid-card">
+            <header>
+              <h2>Lit renders React via <code>reactJsx</code></h2>
+            </header>
+            <p>
+              The custom element below registers on load, mounts React with createRoot, and drops the Node back into the Lit template.
+            </p>
+            <lit-hosts-react></lit-hosts-react>
+            <p>
+              Explore the bundler variant under${' '}
+              <a
+                class="demo-link"
+                href="https://github.com/knightedcodemonkey/jsx/tree/main/test/fixtures/rspack-app"
+                target="_blank"
+                rel="noreferrer"
+              >
+                test/fixtures/rspack-app
+              </a>
+            </p>
+            ${renderSourcePanel({
+              label: 'Lit hosts React element',
+              code: litHostsSource,
+              language: 'tsx',
+            })}
+          </section>
+          <section class="card react-card lit-react-card">
+            <header>
+              <h2>Combine Lit + React</h2>
+              <p>
+                Stream Lit from a CDN, register a custom element, and let React drive it with shared state.
+              </p>
+            </header>
+            <p>
+              The bridge below mounts a React panel that references a Lit component with nothing but custom element refs.
+            </p>
+            <div class="react-mount" id="lit-react-bridge-demo"></div>
+            <p>
+              Click the sync button to watch React hooks update the Lit meter in real time.
+            </p>
+            ${renderSourcePanel({
+              label: 'Lit + React bridge',
+              code: litBridgeSource,
+              language: 'tsx',
+            })}
+          </section>
+          <${LiteSavings} />
+        </>
+      `
+
+      if (loadingCard) {
+        loadingCard.replaceWith(demo)
+      } else {
+        app?.append(demo)
+      }
+      mountReactRuntimeDemo(document.getElementById('react-runtime-demo'))
+      mountLitReactBridgeDemo(document.getElementById('lit-react-bridge-demo'))
+      highlightSourcePanels().catch(error => {
+        console.warn('Unable to run syntax highlighting', error)
+      })
+    </script>
+  </body>
+</html>
