diff --git a/compiler/Cargo.lock b/compiler/Cargo.lock
index 3b40829..f66bf9c 100644
--- a/compiler/Cargo.lock
+++ b/compiler/Cargo.lock
@@ -996,6 +996,7 @@ dependencies = [
  "napi-derive",
  "oxc_allocator",
  "oxc_ast",
+ "oxc_codegen",
  "oxc_sourcemap",
  "oxc_span",
  "oxc_syntax",
diff --git a/compiler/Cargo.toml b/compiler/Cargo.toml
index 8ac3e98..93e4881 100644
--- a/compiler/Cargo.toml
+++ b/compiler/Cargo.toml
@@ -29,6 +29,7 @@ serde_json = { version = "1", features = ["preserve_order"] }
 solidjs-compiler = { git = "https://github.com/solidjs/solid", rev = "2105ffb8ca2fced55f5fac0763177fc93f97c2c2", default-features = false }
 oxc_allocator = "0.144"
 oxc_ast = "0.144"
+oxc_codegen = "0.144"
 oxc_span = "0.144"
 oxc_sourcemap = "8.1"
 oxc_syntax = "0.144"
diff --git a/compiler/src/app.rs b/compiler/src/app.rs
index ca1f7cd..31799e9 100644
--- a/compiler/src/app.rs
+++ b/compiler/src/app.rs
@@ -2,7 +2,7 @@
 //! compiler for `target`, each importing its dependencies by `.rx` path, with the program's stylesheet. What `rxc app`
 //! prints and the Node-API build (`src/node.rs`) returns to `@reactivescript/compiler/vite`.
 use crate::check::check_modules;
-use crate::emit::{compile_linked, lower_view, Target};
+use crate::emit::{compile_linked, lower_view, view_jsx, Target};
 use crate::modules::load_modules;
 use serde_json::{json, Map, Value};
 use std::path::Path;
@@ -26,16 +26,22 @@ pub fn target(name: &str) -> Target {
 /// `{entry, css, modules: {path: {code, map}}}`, or `{diagnostics: [...]}` / `{error}`. `entry` is an absolute path.
 /// `spa`: a client-only build, checked under 08 CN-3d.
 pub fn app(entry: &str, target: Target, module_name: &str, spa: bool) -> Value {
+    app_with(entry, target, module_name, spa, false, &read_disk)
+}
+
+/// `app` over `read` in place of the disk: the WebAssembly build's host, or an editor's open files. `jsx`: each module
+/// also carries the JSX Solid's compiler was handed (`view_jsx`).
+pub fn app_with(entry: &str, target: Target, module_name: &str, spa: bool, jsx: bool, read: &dyn Fn(&str) -> Option<String>) -> Value {
     // module keys are POSIX paths (`modules::join_path`); Windows takes `D:/a/b.rx` as it takes `D:\a\b.rx`
     let entry = &entry.replace('\\', "/");
     (|| {
-        if read_disk(entry).is_none() {
+        if read(entry).is_none() {
             return Err(json!({ "error": format!("{entry}: no such file") }));
         }
-        let set = load_modules(entry, &read_disk).map_err(|e| {
+        let set = load_modules(entry, read).map_err(|e| {
             // a parse error is a diagnostic like the checker's, with its code (PARSE, or the habit it names)
             let file = e.2.clone().unwrap_or_else(|| entry.to_string());
-            let mut d = crate::serve::parse_error_in(&file, &e, read_disk(&file).as_deref());
+            let mut d = crate::serve::parse_error_in(&file, &e, read(&file).as_deref());
             d["msg"] = json!(crate::serve::parse_message(&e));
             json!({ "diagnostics": [d] })
         })?;
@@ -47,9 +53,13 @@ pub fn app(entry: &str, target: Target, module_name: &str, spa: bool) -> Value {
         let mut modules = Map::new();
         for (name, module) in &out.files {
             let path = &out.paths[name];
-            let text = read_disk(path).unwrap_or_default();
+            let text = read(path).unwrap_or_default();
             let l = lower_view(module, path, target, module_name, Some((path, &text))).map_err(|e| json!({ "error": e }))?;
-            modules.insert(path.clone(), json!({ "code": l.code, "map": l.map }));
+            let mut m = json!({ "code": l.code, "map": l.map });
+            if jsx {
+                m["jsx"] = json!(view_jsx(module));
+            }
+            modules.insert(path.clone(), m);
         }
         Ok(json!({ "entry": set.entry, "css": out.css, "modules": modules }))
     })()
diff --git a/compiler/src/emit.rs b/compiler/src/emit.rs
index ffc44a3..5170edc 100644
--- a/compiler/src/emit.rs
+++ b/compiler/src/emit.rs
@@ -1829,6 +1829,13 @@ pub struct Lowered {
     pub map: Option<String>,
 }
 
+/// A module as the JSX Solid's compiler is handed, printed: what `lower_view` compiles, before templates.
+pub fn view_jsx(module: &[S]) -> String {
+    let alloc = oxc_allocator::Allocator::default();
+    let program = crate::oxc::Build::new(&alloc).program(module);
+    oxc_codegen::Codegen::new().build(&program).code
+}
+
 /// Each module's JSX → JavaScript for `target` (`ref/compile/jsx.ts`): dom and ssr with hydration; universal over the
 /// renderer `module_name`. With `rx` (the module's `.rx` path and text), the output carries a source map onto it. CP-1c:
 /// Solid's positions are the program's layout; each maps to the `.rx` line it was lowered from (`oxc::Build::lines`), at
diff --git a/compiler/src/parse.rs b/compiler/src/parse.rs
index 45660c1..84dd0cb 100644
--- a/compiler/src/parse.rs
+++ b/compiler/src/parse.rs
@@ -1216,11 +1216,16 @@ pub fn parse_block(c: &mut Cursor) -> R<Vec<Stmt>> {
     c.ws(true);
     let mut out = vec![];
     while !c.starts_with("}") {
+        let at = c.i;
         out.push(parse_stmt(c)?);
         out.append(&mut c.pending);
         c.ws(true);
         c.eat(";");
         c.ws(true);
+        // an editor's parse reads a missing statement as an empty one, so at the end of input nothing moves
+        if c.i == at {
+            break;
+        }
     }
     c.expect("}")?;
     Ok(out)
@@ -2256,6 +2261,13 @@ mod recovering {
         assert!(parse_program(src).is_err());
     }
 
+    #[test]
+    fn an_unclosed_block_at_the_end_of_input_stops() {
+        let src = "export default component App() {\n  <button onClick={() => { c";
+        let (_, errs) = parse_program_recovering(src);
+        assert!(!errs.is_empty());
+    }
+
     #[test]
     fn function_types_in_props_and_type_aliases() {
         let src = "type Pick = (id: number) => void\ncomponent Row(props: { id: number; onPick: (id: number) => void; onDrop: Pick }) {\n  source n: number := peek(props.id)\n  <li onClick={() => { props.onPick(n) }}>{n}</li>\n}\nfn twice(x: number): number => x * 2\nexport default component App() {\n  <Row id={twice(1)} onPick={id => { log(id) }} onDrop={id => { log(id) }} />\n}\n";
diff --git a/compiler/src/serve.rs b/compiler/src/serve.rs
index 7803568..5c5519b 100644
--- a/compiler/src/serve.rs
+++ b/compiler/src/serve.rs
@@ -3,11 +3,12 @@
 use serde_json::{json, Value};
 use std::collections::HashMap;
 
-/// One request: `analyze` (`{file, overlays, prelude}`) or `prelude`.
+/// One request: `analyze` (`{file, overlays, prelude, project}`), `app` (`{entry, overlays, target, moduleName, spa, jsx}`) or `prelude`.
 pub fn request(method: &str, params: &Value, disk: &dyn Fn(&str) -> Option<String>) -> Value {
     match method {
         "analyze" => analyze(params, disk),
         "prelude" => json!(crate::project::PRELUDE),
+        "app" => app(params, disk),
         _ => json!({ "error": "unknown method" }),
     }
 }
@@ -60,12 +61,17 @@ pub fn utf16_index(s: &str) -> Vec<u32> {
     idx
 }
 
+/// A request's `overlays`: the editor's open files, read before the disk.
+fn overlays(params: &Value) -> HashMap<String, String> {
+    params["overlays"].as_object().map(|o| o.iter().filter_map(|(k, v)| Some((k.clone(), v.as_str()?.to_string()))).collect()).unwrap_or_default()
+}
+
 /// `rxc serve`, one request: `{file, overlays: {path: text}, prelude}` — the file loaded (and its imports) as an editor
 /// has them, recovering (CP-8e); its projection with mappings in UTF-16 offsets, and its diagnostics: the parse's, else
 /// the checker's.
 pub fn analyze(params: &Value, disk: &dyn Fn(&str) -> Option<String>) -> Value {
     let file = params["file"].as_str().unwrap_or_default().to_string();
-    let overlays: HashMap<String, String> = params["overlays"].as_object().map(|o| o.iter().filter_map(|(k, v)| Some((k.clone(), v.as_str()?.to_string()))).collect()).unwrap_or_default();
+    let overlays = overlays(params);
     let read = |p: &str| overlays.get(p).cloned().or_else(|| disk(p));
     let set = match crate::modules::load_modules_recovering(&file, &read) {
         Ok(s) => s,
@@ -77,7 +83,9 @@ pub fn analyze(params: &Value, disk: &dyn Fn(&str) -> Option<String>) -> Value {
     let src = set.sources.get(&file).cloned().unwrap_or_default();
     let prelude = params["prelude"].as_str();
     let mut out = json!({ "code": null, "mappings": [] });
-    if let Some(p) = crate::project::project_modules_with(&set, prelude).into_iter().find(|p| p.rx == file) {
+    // `project: false`: diagnostics only, for a caller that does not show the TSX projection
+    let project = params["project"].as_bool().unwrap_or(true);
+    if let Some(p) = project.then(|| crate::project::project_modules_with(&set, prelude).into_iter().find(|p| p.rx == file)).flatten() {
         let (gi, si) = (utf16_index(&p.code), utf16_index(&src));
         let maps: Vec<[u32; 3]> = p.mappings.iter().map(|m| [gi[m.gen as usize], si[m.src as usize], si[(m.src + m.len) as usize] - si[m.src as usize]]).collect();
         let u = |i: &[u32], a: u32, n: u32| [i[a as usize], i[(a + n) as usize] - i[a as usize]];
@@ -93,3 +101,12 @@ pub fn analyze(params: &Value, disk: &dyn Fn(&str) -> Option<String>) -> Value {
     out
 }
 
+
+/// `rxc app` over the editor's files: what `app.rs` returns for `entry`, reading `overlays` before the disk.
+pub fn app(params: &Value, disk: &dyn Fn(&str) -> Option<String>) -> Value {
+    let overlays = overlays(params);
+    let read = |p: &str| overlays.get(p).cloned().or_else(|| disk(p));
+    let target = crate::app::target(params["target"].as_str().unwrap_or("dom"));
+    let module_name = params["moduleName"].as_str().unwrap_or("@solidjs/web");
+    crate::app::app_with(params["entry"].as_str().unwrap_or_default(), target, module_name, params["spa"].as_bool().unwrap_or(false), params["jsx"].as_bool().unwrap_or(false), &read)
+}
diff --git a/site/.assetsignore b/site/.assetsignore
index 328f4a4..bcfd63c 100644
--- a/site/.assetsignore
+++ b/site/.assetsignore
@@ -1,3 +1,4 @@
 wrangler.toml
 .assetsignore
 .wrangler
+playground/
diff --git a/site/playground/.gitignore b/site/playground/.gitignore
new file mode 100644
index 0000000..fae9c09
--- /dev/null
+++ b/site/playground/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+dist
+test-results
+public/rxc.wasm
diff --git a/site/playground/README.md b/site/playground/README.md
new file mode 100644
index 0000000..8d2bed2
--- /dev/null
+++ b/site/playground/README.md
@@ -0,0 +1,35 @@
+# ReactiveScript Playground
+
+![The playground: .rx on the left, the same program as Solid 2.0 primitives on the right](docs/screenshot.png)
+
+Type `.rx` on the left and see it as Solid 2.0 on the right: the program written with Solid's own primitives
+(`createSignal`, `createMemo`, `createOptimistic`, `action`, `<Errored>`, `<Loading>`) and the checker's diagnostics
+(each linked to `guide/diagnostics.md#<code>`). The program is kept in the URL hash, so a link reopens it.
+
+The Solid view is the JSX the crate hands to Solid's compiler, with each `__rt` helper that is a Solid primitive
+underneath written as that primitive and the mangled names (`v$id`, `w$id`) made plain (`src/solidify.ts`), then
+formatted with Prettier. It is a reading aid, not the code that runs.
+
+## How it compiles in the browser
+
+`public/rxc.wasm` is the crate (`compiler/` in this repository) built for `wasm32-unknown-unknown`, the same build the
+language server loads (`compiler/src/wasm.rs`: `rx_alloc`, `rx_call`, `rx_free`, and a host `env.rx_read`). The page
+answers `rx_read` from the editor's files in memory, so there is no server and no filesystem. Each keystroke sends
+`analyze` (diagnostics) for every `.rx` file and `app` with `jsx: true` for `main.rx`.
+
+The `app` request is new: `app::app_with` takes a reader in place of the disk, `serve.rs` routes `app` to it, and with
+`jsx: true` each module also carries the JSX printed before Solid's compiler runs (`emit::view_jsx`, over
+`oxc_codegen`). `pnpm wasm` rebuilds `../../compiler` and copies the result into `public/` (it is not checked in).
+
+The playground is not part of the deployed site: `site/.assetsignore` leaves `playground/` out of the static upload.
+Publishing it would need a build step (`pnpm wasm && pnpm build`) and its `dist/` served under `/playground/`.
+
+## Run
+
+```sh
+. ~/.local/share/solid-toolchain/env.sh
+corepack pnpm@11.9.0 install
+corepack pnpm@11.9.0 wasm     # needs Rust with the wasm32-unknown-unknown target
+corepack pnpm@11.9.0 dev      # vite --host on port 3020
+corepack pnpm@11.9.0 test     # Playwright against the running dev server
+```
diff --git a/site/playground/docs/screenshot.png b/site/playground/docs/screenshot.png
new file mode 100644
index 0000000..515f425
Binary files /dev/null and b/site/playground/docs/screenshot.png differ
diff --git a/site/playground/index.html b/site/playground/index.html
new file mode 100644
index 0000000..c78ad38
--- /dev/null
+++ b/site/playground/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" href="/logo.svg" type="image/svg+xml" />
+    <link rel="preload" href="/rxc.wasm" as="fetch" type="application/wasm" crossorigin />
+    <meta name="color-scheme" content="dark" />
+    <link rel="stylesheet" href="/src/style.css" />
+    <title>ReactiveScript Playground</title>
+    <meta name="description" content="Type ReactiveScript and see the Solid 2.0 it compiles to." />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/site/playground/package.json b/site/playground/package.json
new file mode 100644
index 0000000..79cbbea
--- /dev/null
+++ b/site/playground/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "reactivescript-playground",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host --port 3020",
+    "build": "vite build",
+    "preview": "vite preview --host --port 3020",
+    "wasm": "sh scripts/build-wasm.sh",
+    "test": "node tests/playground.check.mjs"
+  },
+  "dependencies": {
+    "@solidjs/web": "2.0.0-rc.21",
+    "highlight.js": "^11.11.1",
+    "prettier": "^3.10.1",
+    "solid-js": "2.0.0-rc.21"
+  },
+  "devDependencies": {
+    "@solidjs/vite-plugin": "3.0.0-next.57",
+    "playwright-core": "^1.56.0",
+    "typescript": "^5.9.3",
+    "vite": "^8.3.8"
+  }
+}
diff --git a/site/playground/pnpm-lock.yaml b/site/playground/pnpm-lock.yaml
new file mode 100644
index 0000000..febb3a4
--- /dev/null
+++ b/site/playground/pnpm-lock.yaml
@@ -0,0 +1,810 @@
+lockfileVersion: '9.0'
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
+importers:
+
+  .:
+    dependencies:
+      '@solidjs/web':
+        specifier: 2.0.0-rc.21
+        version: 2.0.0-rc.21(solid-js@2.0.0-rc.21)
+      highlight.js:
+        specifier: ^11.11.1
+        version: 11.12.0
+      prettier:
+        specifier: ^3.10.1
+        version: 3.10.1
+      solid-js:
+        specifier: 2.0.0-rc.21
+        version: 2.0.0-rc.21
+    devDependencies:
+      '@solidjs/vite-plugin':
+        specifier: 3.0.0-next.57
+        version: 3.0.0-next.57(@solidjs/web@2.0.0-rc.21(solid-js@2.0.0-rc.21))(solid-js@2.0.0-rc.21)(vite@8.3.8)
+      playwright-core:
+        specifier: ^1.56.0
+        version: 1.65.0
+      typescript:
+        specifier: ^5.9.3
+        version: 5.9.3
+      vite:
+        specifier: ^8.3.8
+        version: 8.3.8
+
+packages:
+
+  '@ampproject/remapping@2.3.0':
+    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
+    engines: {node: '>=6.0.0'}
+
+  '@emnapi/core@1.11.3':
+    resolution: {integrity: sha512-zLpS5asjEb7lq8jYLq37N6XKaE41DIexlY1rF/z4/tIl3wo13Sqm28fRyfIsKZD+NZ8mM5RoKkpW/rBcuoSZSg==}
+
+  '@emnapi/core@2.0.0-beta.2':
+    resolution: {integrity: sha512-MzCVoWtcg4Pm2B3je5mMvYMvj3MmBKw+fU7vbsJc9/iT8ip6/eYIHo/Dsm/mr+wsHB6SEyJDuxB09Yy6r/8+4A==}
+
+  '@emnapi/runtime@1.11.3':
+    resolution: {integrity: sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==}
+
+  '@emnapi/runtime@2.0.0-beta.2':
+    resolution: {integrity: sha512-JcrSPzPvZuNZvJqPTF9Fw25LbOJ8avzFVlaf2grmH4Cku0oGP47tRgqPZadcfj3YoZMHkFVnCYFbQM8I+i5QEw==}
+
+  '@emnapi/wasi-threads@1.2.3':
+    resolution: {integrity: sha512-ELEBe8PsLvvJ6QMr0zLt8ffvOHW/dc1m3CEzNMg7aJUv3bMaoDtw2TXyDAwkYBuroxxuHEwhRTLJSe5sya547g==}
+
+  '@emnapi/wasi-threads@2.2.0':
+    resolution: {integrity: sha512-JP7OYH38Q7+pyTAe14raZHLQIK7BDKbdwji+Xi3pcd/6QkJYQH3SX4wu6EplGrGJWRepoNzedfm0G3B9Z4e9Rw==}
+
+  '@jridgewell/gen-mapping@0.3.13':
+    resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
+
+  '@jridgewell/resolve-uri@3.1.2':
+    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
+    engines: {node: '>=6.0.0'}
+
+  '@jridgewell/sourcemap-codec@1.6.0':
+    resolution: {integrity: sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    resolution: {integrity: sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==}
+
+  '@napi-rs/wasm-runtime@1.2.6':
+    resolution: {integrity: sha512-mRyDmEw9/fCDXCGfL1sbgIw/GUK0PVxRW4YwgPN61F3LQ+fSyoBFarJVzgGyhF6kRzEQZ0FejDqm4WLXSeqQmw==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=23.5.0}
+    peerDependencies:
+      '@emnapi/core': ^1.7.1 || 2.0.0-beta.2
+      '@emnapi/runtime': ^1.7.1 || 2.0.0-beta.2
+
+  '@napi-rs/wasm-runtime@1.2.7':
+    resolution: {integrity: sha512-zJccwplOAbgfZju95IUHazLnx9RAPtPN2YGJXI6UbrgeaR9QfPjGrQL6ERkSAtnVCA4Q+83ApGyaX5zdpCaKkQ==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=23.5.0}
+    peerDependencies:
+      '@emnapi/core': ^1.7.1 || 2.0.0-beta.2 || 2.0.0-beta.3
+      '@emnapi/runtime': ^1.7.1 || 2.0.0-beta.2 || 2.0.0-beta.3
+
+  '@oxc-project/types@0.156.0':
+    resolution: {integrity: sha512-1Duyg48TdJNdyhEB8Xn1L36bT9Pv6GUtlKjHxOys8xkaF/rQq3XJE+bAurSK/AgIz5mGFsb77cn9Pb20+WCScw==}
+
+  '@rolldown/binding-android-arm-eabi@1.2.19':
+    resolution: {integrity: sha512-e+Ebe0WT+9tbXmNKPIiC8YrWAHYwug3m6i4p3rZGGulfZri1jtI4HslT+OZnFf/OIHowWF71DTlHwXBP2SiA7A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@rolldown/binding-android-arm64@1.2.19':
+    resolution: {integrity: sha512-hOombrTJ+szt2ciEzS7oCA78lMPBgF5UMQWCJIyNfnrI7GLl8HYoFqCnpL2gcPOaXMqryGCU5ExdQKyDDcC+yA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@rolldown/binding-darwin-arm64@1.2.19':
+    resolution: {integrity: sha512-XoMA2pwCKGTQzUjPgtRwkedH4WmXhdIPKT6l6oOxd1PUbNodGI6DcBekgN7EC//+x3pfBYX/qL1gNmZAqivw5g==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rolldown/binding-darwin-x64@1.2.19':
+    resolution: {integrity: sha512-zo8EsSSwMZCY/e+fRnGaX02YGgvJD0yvhNi/9hpGPA2MJ9ZF8dPCw75UGfpI6OpQ/myR/dIYmogRvqiZD0TrXg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rolldown/binding-freebsd-x64@1.2.19':
+    resolution: {integrity: sha512-O8ISAOfI1nj7AuBPd30FSF47z7f7lzlk5poQVGgiikvQuGEBFYvW8ki+UEnT+YJPnNGjQzn304klt4O9FUE7mA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.2.19':
+    resolution: {integrity: sha512-/lYCba5NO0yq4S0jGMH8QTBtkvQxoXjoQWzF5BcWp9MjB9jxVRD1GQDNofkVjcOj30DWyhLIN/4Oe60JKzaONw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@rolldown/binding-linux-arm64-gnu@1.2.19':
+    resolution: {integrity: sha512-pm/apFMBnSbFb3O6nG5pHO1iqHhZrjGDFEjSm+ot9J17XXPvH9L90y5h+jgfHCE+Qdlsvy8qKEcU4VKxgjD+vA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-arm64-musl@1.2.19':
+    resolution: {integrity: sha512-K1SmQp3FFichn8oqrNIwvFoZ5wcvjC7goBzpaMNvLf9FZc+QB/QvLmnpJZgAAGHiD980tP8FZZnXk2K94rvlxg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-linux-ppc64-gnu@1.2.19':
+    resolution: {integrity: sha512-I0xwD57jP/3A7+5UPZin2w8Y7XHEmEM5zqpYZOcQ45MlNW6tUJUziymV3yRr7rL4vwyfEcRsRksC4a7Kc08p5Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-s390x-gnu@1.2.19':
+    resolution: {integrity: sha512-BrtEHT24SNXj9HiXqy+s/kXiSiQGt6EKCPUlRirAoIioVxKGnbXBUEkbZASAei7iZJB0/Ynm+0JP00Ipx7AnSw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-gnu@1.2.19':
+    resolution: {integrity: sha512-rm75/9DkHKeU2WnA8w4X94WGYgLlDCFCfkQC+4bguVJmC/jvDRv2B+2wLOYhyE0fVuv7//Ckk39OoOufyCu76Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@rolldown/binding-linux-x64-musl@1.2.19':
+    resolution: {integrity: sha512-irh/4+iYFM4GAzpluDErgjz89bj6NDtqqMAG/6O1LG38Ed3NpyebzCpcVNkFW8uhy+/3/BocUvnXDR33CXWe9A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@rolldown/binding-openharmony-arm64@1.2.19':
+    resolution: {integrity: sha512-+KWTWNoPt+CfSq94CiceWu3yPE+QzkaG+phPyz9G60tmZLwfQkcA4AeksafzvJAw4pvg1mcd5a1TkUqVv0s4JA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rolldown/binding-wasm32-wasi@1.2.19':
+    resolution: {integrity: sha512-7EH+skOsl5qpWnK0vzamgJFhOv1cwxQpsxm8tI883K9fur5c27p8q87fzEO6BbBPabA2/+s/zR63/pLc137iOg==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=23.5.0}
+    cpu: [wasm32]
+
+  '@rolldown/binding-win32-arm64-msvc@1.2.19':
+    resolution: {integrity: sha512-3Q1Yg1Q7tEvBWoZf5rFvG/GKZQPgwfru+p4wBajDfJFBs0SHCpL++dfTjW9gyAKd1T7ZpIYvdaUax7Pa/IhFVQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rolldown/binding-win32-x64-msvc@1.2.19':
+    resolution: {integrity: sha512-y/sqRRc6d7hECzOFc5n3LSeqctmIp9mMjY1Kq4s14uLPd/LZ4z7i1zrW6fMtp2mPeuQIC4e6ULMcwQzMomqQag==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
+  '@rolldown/pluginutils@1.1.0':
+    resolution: {integrity: sha512-K+NU2HDCEem4sClgHH4ZZXwdJeNFkJo+hRk479DIwdIviAPN2hFJH1KHHwg8CxHQXvi0M5XY4deTXINfIiSG6w==}
+
+  '@solidjs/compiler-darwin-arm64@2.0.0-rc.21':
+    resolution: {integrity: sha512-lXLk6GrmidICtHiIyCxDQC+6XqcrI7YMoGffo1wLigdojwNcCsifQfwRvzx0D78ieTU91VwzifmBu8hw1TQ28Q==}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@solidjs/compiler-darwin-x64@2.0.0-rc.21':
+    resolution: {integrity: sha512-RKEXt5sXX7qHuYc+EjOdIhvOl+8HohI97GPlLzFN+64k4ywc0dr4Ge3W7RvgdJTwfyZVEolEelq2hw6vbEWQwg==}
+    cpu: [x64]
+    os: [darwin]
+
+  '@solidjs/compiler-linux-arm64-gnu@2.0.0-rc.21':
+    resolution: {integrity: sha512-rJpzsmhydP13WSqWpBegbRd8NSZrWZkeCGJOfMeisOUzIY3XntA50RDe0+sLNXaekU8PXGeyQCxOxkDlrBbEXQ==}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@solidjs/compiler-linux-x64-gnu@2.0.0-rc.21':
+    resolution: {integrity: sha512-lZa593mWtgtOZuWLa54rolQOTp+II9DUznRoJKcGxNzCyhjzqMAGiWOP1fHGmEAdYlbyUqA+CnhwhjcC34WBKQ==}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@solidjs/compiler-wasm32-wasi@2.0.0-rc.21':
+    resolution: {integrity: sha512-gQeaqDoie2wgh8ph2Ti89mFiBthVmq0EWYL5HesI45K5NvvrlvaftZs0Zt3VlVQrvz79A7OLKhHX+2aD6PvnzA==}
+    engines: {node: '>=14.0.0'}
+
+  '@solidjs/compiler-win32-x64-msvc@2.0.0-rc.21':
+    resolution: {integrity: sha512-cGNQL/7MF/CudNo1j2C9TEG/wTKZtFuSAQRPhU/UKzlq61oO5tKWLRugGWY4qGZ+K+4iw6CpSAuj4/s0z0POww==}
+    cpu: [x64]
+    os: [win32]
+
+  '@solidjs/compiler@2.0.0-rc.21':
+    resolution: {integrity: sha512-nhI5oCRx+ArUxcJtnesRb7pArO5zhTd/hef2I+dBD10MYwrQNM7ftpDdNVv7fQh/dH5xvqAnpWN4tUhZavo4ng==}
+
+  '@solidjs/signals@2.0.0-rc.21':
+    resolution: {integrity: sha512-F1TUMO/nd1XC//+tcaWxibOOgXBHQGmNQnAeiDnpLh+1smnlwIgKF6pc20evlyfQwqf0gP6rH4sNEqCPBNcpgg==}
+    engines: {node: '>=22.12.0'}
+
+  '@solidjs/vite-plugin@3.0.0-next.57':
+    resolution: {integrity: sha512-z05CuXxtHUSYfKBw8PirIpXkjSmqevUiygbqIMxCmc+ZCW4x2d+1zHw7nd98NdQsNAUIXJir3GmM7n3f/j0jZg==}
+    engines: {node: '>=22.12.0'}
+    peerDependencies:
+      '@babel/core': ^7.23.3 || ^8.0.0
+      '@solidjs/babel-plugin': ^2.0.0-rc.19
+      '@solidjs/start-devtools': ^1.0.0-next.2
+      '@solidjs/web': ^2.0.0-rc.19
+      '@testing-library/jest-dom': ^5.16.6 || ^5.17.0 || ^6.0.0 || ^7.0.0
+      solid-js: ^2.0.0-rc.19
+      vite: ^8.0.0 || ^9.0.0
+    peerDependenciesMeta:
+      '@babel/core':
+        optional: true
+      '@solidjs/babel-plugin':
+        optional: true
+      '@solidjs/start-devtools':
+        optional: true
+      '@testing-library/jest-dom':
+        optional: true
+
+  '@solidjs/web@2.0.0-rc.21':
+    resolution: {integrity: sha512-1E9dvR3/+5fQTI3oxxACBX2Rg4rezXgrljerhWDHR5uQZ04p5Z8qXROI7dIDJKyANtsnLKYbM2OyI/p/FmjGUA==}
+    engines: {node: '>=22.12.0'}
+    peerDependencies:
+      solid-js: ^2.0.0-rc.21
+
+  '@tybys/wasm-util@0.10.4':
+    resolution: {integrity: sha512-W3c4gRigFS0T/Ma4qIYF3GDAc5AQdHb1yL5znJT1Zv1YaD9Kitx656wBjvr19qbiosmZT8lWDM5BEMynUqX65A==}
+
+  csstype@3.2.3:
+    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
+
+  detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+
+  fdir@6.5.0:
+    resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
+    engines: {node: '>=12.0.0'}
+    peerDependencies:
+      picomatch: ^3 || ^4
+    peerDependenciesMeta:
+      picomatch:
+        optional: true
+
+  fsevents@2.3.3:
+    resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
+    engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
+    os: [darwin]
+
+  highlight.js@11.12.0:
+    resolution: {integrity: sha512-nbfWpyRMcMrPMmDwJB+dhX/eiaPKtc2RB+0QZskqJ3WjRA/FDS0e9hZrx8EC/lbEv8gXy98FcDbNa/dspAaJMg==}
+    engines: {node: '>=12.0.0'}
+
+  is-what@4.1.16:
+    resolution: {integrity: sha512-ZhMwEosbFJkA0YhFnNDgTM4ZxDRsS6HqTo7qsZM08fehyRYIYa0yHu5R6mgo1n/8MgaPBXiPimPD77baVFYg+A==}
+    engines: {node: '>=12.13'}
+
+  lightningcss-android-arm64@1.33.0:
+    resolution: {integrity: sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.33.0:
+    resolution: {integrity: sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.33.0:
+    resolution: {integrity: sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.33.0:
+    resolution: {integrity: sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.33.0:
+    resolution: {integrity: sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.33.0:
+    resolution: {integrity: sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-arm64-musl@1.33.0:
+    resolution: {integrity: sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-linux-x64-gnu@1.33.0:
+    resolution: {integrity: sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  lightningcss-linux-x64-musl@1.33.0:
+    resolution: {integrity: sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  lightningcss-win32-arm64-msvc@1.33.0:
+    resolution: {integrity: sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.33.0:
+    resolution: {integrity: sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.33.0:
+    resolution: {integrity: sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==}
+    engines: {node: '>= 12.0.0'}
+
+  magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+
+  merge-anything@5.1.7:
+    resolution: {integrity: sha512-eRtbOb1N5iyH0tkQDAoQ4Ipsp/5qSR79Dzrz8hEPxRX10RWWR/iQXdoKmBSRCThY1Fh5EhISDtpSc93fpxUniQ==}
+    engines: {node: '>=12.13'}
+
+  nanoid@3.3.20:
+    resolution: {integrity: sha512-uKdg2G3GNCKQn9byYOpxbGqrT2fGO5KRt5J/8b3pok8rT6qxGWF6hxMyJiEYtAf+FVyYuD9hRaDqX5uPFYJ4ZQ==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
+  picocolors@1.1.1:
+    resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+
+  picomatch@4.0.7:
+    resolution: {integrity: sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==}
+    engines: {node: '>=12'}
+
+  playwright-core@1.65.0:
+    resolution: {integrity: sha512-vNSKgH6YqtN7cdT/L334zo0a+YwkrpicyrHJlWWPIm/Q+Nn2SWInil01oT0mbu96U4GgoRtCYQD9CzJQgju+lA==}
+    engines: {node: '>=20'}
+    hasBin: true
+
+  postcss@8.5.32:
+    resolution: {integrity: sha512-LJlKCCAUFKOuZxipUdYw1NzIITEsPcgyOG9LkvRJvuKj/bRzbuRY0ARXvL0pWGpsZvn8jku+LMep2eU0seHp8g==}
+    engines: {node: ^10 || ^12 || >=14}
+
+  prettier@3.10.1:
+    resolution: {integrity: sha512-70vp3ZUYoPlFbF9uiTdXHUUCGEIp7d4+6p+8DYbkm2jP7x/3i/paXVF6dopSI3zd/CEitrZN1rc4i85xWmmXlg==}
+    engines: {node: '>=14'}
+    hasBin: true
+
+  rolldown@1.2.19:
+    resolution: {integrity: sha512-QIiV1J9d0pzN4jeeTH4sjPy0AZ6cAy2cG0ExeoE1+U8Rvj+hR3gYkokx0YbeUNGlZqiQJJ2utcETe0oKXwzsuA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
+  seroval-plugins@1.7.0:
+    resolution: {integrity: sha512-WM4rArfPtLZriTuxC5DBvNulEwAaRcjNe/dkMOEesOcuvXf5nEwKf5Bw3AT92WHohqcc45+57GdtsCuBTI0mjw==}
+    engines: {node: '>=20'}
+    peerDependencies:
+      seroval: ^1.0
+
+  seroval@1.7.0:
+    resolution: {integrity: sha512-FU+LUkmDzWNsJ6oubZFN3dGPKny53DRhPJG6nftEaXDL8MIn19+kEE1Gvc+63Go+qPOwVUlKIdKhsu2HN6tksw==}
+    engines: {node: '>=20'}
+
+  solid-js@2.0.0-rc.21:
+    resolution: {integrity: sha512-0Z8/qiJKnK6A2g8QspGthwxR0W8WauMOD2/LQtNmxBT8gpZkKaXmo/fdek/+cB+84w4HYejWJixSAn4fcAI0Uw==}
+    engines: {node: '>=22.12.0'}
+
+  source-map-js@1.2.2:
+    resolution: {integrity: sha512-KGj/8Y43x35aZVDtt+J4mK1hoLGHULMYfSkODJNQjNDC3oW1PqPoxMwo0pLUsWM/UEGzON/NxeHywEfNXNP3Vw==}
+    engines: {node: '>=0.10.0'}
+
+  tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
+    engines: {node: '>=12.0.0'}
+
+  tslib@2.9.1:
+    resolution: {integrity: sha512-a4Ux9VKuIMHsOS7ENbEq6hK2ZGYIT27Rtl0E4eD9KqwxhKiQeMZE/9xb3IdYwWaSOyIBQLExhQgXDTYoiCxnWA==}
+
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
+    engines: {node: '>=14.17'}
+    hasBin: true
+
+  vite@8.3.8:
+    resolution: {integrity: sha512-LzOn3h9rG/0vhLdXrV4yJ4QFA9eEoqCl+Yx+kGJd7aB9w6nfNgVHKSYwLPZUHrz4ZGa+t+kXjV9itvcHDLQouA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      '@vitejs/devtools': ^0.7.1 || ^0.8.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
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      '@vitejs/devtools':
+        optional: true
+      esbuild:
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
+  vitefu@1.1.3:
+    resolution: {integrity: sha512-ub4okH7Z5KLjb6hDyjqrGXqWtWvoYdU3IGm/NorpgHncKoLTCfRIbvlhBm7r0YstIaQRYlp4yEbFqDcKSzXSSg==}
+    peerDependencies:
+      vite: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
+    peerDependenciesMeta:
+      vite:
+        optional: true
+
+snapshots:
+
+  '@ampproject/remapping@2.3.0':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@emnapi/core@1.11.3':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.3
+      tslib: 2.9.1
+    optional: true
+
+  '@emnapi/core@2.0.0-beta.2':
+    dependencies:
+      '@emnapi/wasi-threads': 2.2.0
+      tslib: 2.9.1
+    optional: true
+
+  '@emnapi/runtime@1.11.3':
+    dependencies:
+      tslib: 2.9.1
+    optional: true
+
+  '@emnapi/runtime@2.0.0-beta.2':
+    dependencies:
+      tslib: 2.9.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.2.3':
+    dependencies:
+      tslib: 2.9.1
+    optional: true
+
+  '@emnapi/wasi-threads@2.2.0':
+    dependencies:
+      tslib: 2.9.1
+    optional: true
+
+  '@jridgewell/gen-mapping@0.3.13':
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.6.0
+      '@jridgewell/trace-mapping': 0.3.31
+
+  '@jridgewell/resolve-uri@3.1.2': {}
+
+  '@jridgewell/sourcemap-codec@1.6.0': {}
+
+  '@jridgewell/trace-mapping@0.3.31':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.6.0
+
+  '@napi-rs/wasm-runtime@1.2.6(@emnapi/core@2.0.0-beta.2)(@emnapi/runtime@2.0.0-beta.2)':
+    dependencies:
+      '@emnapi/core': 2.0.0-beta.2
+      '@emnapi/runtime': 2.0.0-beta.2
+      '@tybys/wasm-util': 0.10.4
+    optional: true
+
+  '@napi-rs/wasm-runtime@1.2.7(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)':
+    dependencies:
+      '@emnapi/core': 1.11.3
+      '@emnapi/runtime': 1.11.3
+      '@tybys/wasm-util': 0.10.4
+    optional: true
+
+  '@oxc-project/types@0.156.0': {}
+
+  '@rolldown/binding-android-arm-eabi@1.2.19':
+    optional: true
+
+  '@rolldown/binding-android-arm64@1.2.19':
+    optional: true
+
+  '@rolldown/binding-darwin-arm64@1.2.19':
+    optional: true
+
+  '@rolldown/binding-darwin-x64@1.2.19':
+    optional: true
+
+  '@rolldown/binding-freebsd-x64@1.2.19':
+    optional: true
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.2.19':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-gnu@1.2.19':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-musl@1.2.19':
+    optional: true
+
+  '@rolldown/binding-linux-ppc64-gnu@1.2.19':
+    optional: true
+
+  '@rolldown/binding-linux-s390x-gnu@1.2.19':
+    optional: true
+
+  '@rolldown/binding-linux-x64-gnu@1.2.19':
+    optional: true
+
+  '@rolldown/binding-linux-x64-musl@1.2.19':
+    optional: true
+
+  '@rolldown/binding-openharmony-arm64@1.2.19':
+    optional: true
+
+  '@rolldown/binding-wasm32-wasi@1.2.19':
+    dependencies:
+      '@emnapi/core': 2.0.0-beta.2
+      '@emnapi/runtime': 2.0.0-beta.2
+      '@napi-rs/wasm-runtime': 1.2.6(@emnapi/core@2.0.0-beta.2)(@emnapi/runtime@2.0.0-beta.2)
+    optional: true
+
+  '@rolldown/binding-win32-arm64-msvc@1.2.19':
+    optional: true
+
+  '@rolldown/binding-win32-x64-msvc@1.2.19':
+    optional: true
+
+  '@rolldown/pluginutils@1.1.0': {}
+
+  '@solidjs/compiler-darwin-arm64@2.0.0-rc.21':
+    optional: true
+
+  '@solidjs/compiler-darwin-x64@2.0.0-rc.21':
+    optional: true
+
+  '@solidjs/compiler-linux-arm64-gnu@2.0.0-rc.21':
+    optional: true
+
+  '@solidjs/compiler-linux-x64-gnu@2.0.0-rc.21':
+    optional: true
+
+  '@solidjs/compiler-wasm32-wasi@2.0.0-rc.21':
+    dependencies:
+      '@emnapi/core': 1.11.3
+      '@emnapi/runtime': 1.11.3
+      '@napi-rs/wasm-runtime': 1.2.7(@emnapi/core@1.11.3)(@emnapi/runtime@1.11.3)
+    optional: true
+
+  '@solidjs/compiler-win32-x64-msvc@2.0.0-rc.21':
+    optional: true
+
+  '@solidjs/compiler@2.0.0-rc.21':
+    optionalDependencies:
+      '@solidjs/compiler-darwin-arm64': 2.0.0-rc.21
+      '@solidjs/compiler-darwin-x64': 2.0.0-rc.21
+      '@solidjs/compiler-linux-arm64-gnu': 2.0.0-rc.21
+      '@solidjs/compiler-linux-x64-gnu': 2.0.0-rc.21
+      '@solidjs/compiler-wasm32-wasi': 2.0.0-rc.21
+      '@solidjs/compiler-win32-x64-msvc': 2.0.0-rc.21
+
+  '@solidjs/signals@2.0.0-rc.21': {}
+
+  '@solidjs/vite-plugin@3.0.0-next.57(@solidjs/web@2.0.0-rc.21(solid-js@2.0.0-rc.21))(solid-js@2.0.0-rc.21)(vite@8.3.8)':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@solidjs/compiler': 2.0.0-rc.21
+      '@solidjs/web': 2.0.0-rc.21(solid-js@2.0.0-rc.21)
+      magic-string: 0.30.21
+      merge-anything: 5.1.7
+      solid-js: 2.0.0-rc.21
+      vite: 8.3.8
+      vitefu: 1.1.3(vite@8.3.8)
+
+  '@solidjs/web@2.0.0-rc.21(solid-js@2.0.0-rc.21)':
+    dependencies:
+      seroval: 1.7.0
+      seroval-plugins: 1.7.0(seroval@1.7.0)
+      solid-js: 2.0.0-rc.21
+
+  '@tybys/wasm-util@0.10.4':
+    dependencies:
+      tslib: 2.9.1
+    optional: true
+
+  csstype@3.2.3: {}
+
+  detect-libc@2.1.2: {}
+
+  fdir@6.5.0(picomatch@4.0.7):
+    optionalDependencies:
+      picomatch: 4.0.7
+
+  fsevents@2.3.3:
+    optional: true
+
+  highlight.js@11.12.0: {}
+
+  is-what@4.1.16: {}
+
+  lightningcss-android-arm64@1.33.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.33.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.33.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.33.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.33.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.33.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.33.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.33.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.33.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.33.0:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.33.0:
+    optional: true
+
+  lightningcss@1.33.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.33.0
+      lightningcss-darwin-arm64: 1.33.0
+      lightningcss-darwin-x64: 1.33.0
+      lightningcss-freebsd-x64: 1.33.0
+      lightningcss-linux-arm-gnueabihf: 1.33.0
+      lightningcss-linux-arm64-gnu: 1.33.0
+      lightningcss-linux-arm64-musl: 1.33.0
+      lightningcss-linux-x64-gnu: 1.33.0
+      lightningcss-linux-x64-musl: 1.33.0
+      lightningcss-win32-arm64-msvc: 1.33.0
+      lightningcss-win32-x64-msvc: 1.33.0
+
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.6.0
+
+  merge-anything@5.1.7:
+    dependencies:
+      is-what: 4.1.16
+
+  nanoid@3.3.20: {}
+
+  picocolors@1.1.1: {}
+
+  picomatch@4.0.7: {}
+
+  playwright-core@1.65.0: {}
+
+  postcss@8.5.32:
+    dependencies:
+      nanoid: 3.3.20
+      picocolors: 1.1.1
+      source-map-js: 1.2.2
+
+  prettier@3.10.1: {}
+
+  rolldown@1.2.19:
+    dependencies:
+      '@oxc-project/types': 0.156.0
+      '@rolldown/pluginutils': 1.1.0
+    optionalDependencies:
+      '@rolldown/binding-android-arm-eabi': 1.2.19
+      '@rolldown/binding-android-arm64': 1.2.19
+      '@rolldown/binding-darwin-arm64': 1.2.19
+      '@rolldown/binding-darwin-x64': 1.2.19
+      '@rolldown/binding-freebsd-x64': 1.2.19
+      '@rolldown/binding-linux-arm-gnueabihf': 1.2.19
+      '@rolldown/binding-linux-arm64-gnu': 1.2.19
+      '@rolldown/binding-linux-arm64-musl': 1.2.19
+      '@rolldown/binding-linux-ppc64-gnu': 1.2.19
+      '@rolldown/binding-linux-s390x-gnu': 1.2.19
+      '@rolldown/binding-linux-x64-gnu': 1.2.19
+      '@rolldown/binding-linux-x64-musl': 1.2.19
+      '@rolldown/binding-openharmony-arm64': 1.2.19
+      '@rolldown/binding-wasm32-wasi': 1.2.19
+      '@rolldown/binding-win32-arm64-msvc': 1.2.19
+      '@rolldown/binding-win32-x64-msvc': 1.2.19
+
+  seroval-plugins@1.7.0(seroval@1.7.0):
+    dependencies:
+      seroval: 1.7.0
+
+  seroval@1.7.0: {}
+
+  solid-js@2.0.0-rc.21:
+    dependencies:
+      '@solidjs/signals': 2.0.0-rc.21
+      csstype: 3.2.3
+      seroval: 1.7.0
+      seroval-plugins: 1.7.0(seroval@1.7.0)
+
+  source-map-js@1.2.2: {}
+
+  tinyglobby@0.2.17:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.7)
+      picomatch: 4.0.7
+
+  tslib@2.9.1:
+    optional: true
+
+  typescript@5.9.3: {}
+
+  vite@8.3.8:
+    dependencies:
+      lightningcss: 1.33.0
+      picomatch: 4.0.7
+      postcss: 8.5.32
+      rolldown: 1.2.19
+      tinyglobby: 0.2.17
+    optionalDependencies:
+      fsevents: 2.3.3
+
+  vitefu@1.1.3(vite@8.3.8):
+    optionalDependencies:
+      vite: 8.3.8
diff --git a/site/playground/pnpm-workspace.yaml b/site/playground/pnpm-workspace.yaml
new file mode 100644
index 0000000..2437fcb
--- /dev/null
+++ b/site/playground/pnpm-workspace.yaml
@@ -0,0 +1,15 @@
+# pnpm settings for this project (honored even for a single-package project —
+# this file marks the workspace root). The Solid packages release in lockstep
+# and templates track them closely; exclude the whole family from any
+# minimumReleaseAge policy so fresh Solid releases install immediately.
+#
+# NOTE: this exclusion is a temporary measure for the Solid 2.0 prerelease
+# cycle (frequent lockstep releases where new floors would otherwise fail
+# under an age policy). It should be removed once Solid 2.0 is stable —
+# at that point a caret range nearly always contains an age-satisfying
+# release and the policy can protect these packages like any other.
+minimumReleaseAgeExclude:
+  - solid-js
+  - '@solidjs/*'
+  # ReactiveScript 0.x releases follow the Solid RCs the same way.
+  - '@reactivescript/*'
diff --git a/site/playground/public/logo.svg b/site/playground/public/logo.svg
new file mode 100644
index 0000000..9c1c3f6
--- /dev/null
+++ b/site/playground/public/logo.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" role="img" aria-label="ReactiveScript">
+  <title>ReactiveScript</title>
+  <rect width="100" height="100" rx="22" fill="#12233D"/>
+  <path fill="#FFFFFF" d="M12.72 63V42.1H18.04V46.09H19.48L17.85 48.52Q17.85 45.14 19.4 43.43Q20.96 41.72 23.96 41.72Q27.42 41.72 29.34 43.81Q31.26 45.9 31.26 49.7V51.41H25.18V50.08Q25.18 48.37 24.25 47.42Q23.32 46.47 21.76 46.47Q20.13 46.47 19.27 47.42Q18.42 48.37 18.42 50.08V63Z"/>
+  <path fill="#FFFFFF" d="M68.59 63 75.81 52.17 69.08 42.1H75.43L78.01 46.28Q78.32 46.77 78.58 47.38Q78.85 47.99 79 48.37Q79.15 47.99 79.44 47.38Q79.72 46.77 79.99 46.28L82.57 42.1H88.92L82.23 52.17L89.41 63H83.07L80.03 58.06Q79.72 57.53 79.44 56.94Q79.15 56.35 79 55.97Q78.85 56.35 78.58 56.94Q78.32 57.53 78.01 58.06L74.93 63Z"/>
+  <line x1="38" y1="44" x2="62" y2="44" stroke="#5B9BE6" stroke-width="7" stroke-linecap="round"/>
+  <line x1="38" y1="56" x2="62" y2="56" stroke="#F0B44C" stroke-width="7" stroke-linecap="round"/>
+</svg>
diff --git a/site/playground/scripts/build-wasm.sh b/site/playground/scripts/build-wasm.sh
new file mode 100644
index 0000000..6ad82ce
--- /dev/null
+++ b/site/playground/scripts/build-wasm.sh
@@ -0,0 +1,10 @@
+#!/bin/sh
+# Builds the crate's WebAssembly library (serve.rs requests, with the `app` method) into public/rxc.wasm.
+set -e
+HERE="$(cd "$(dirname "$0")/.." && pwd)"
+CRATE="${RX_CRATE:-$HERE/../../compiler}"
+export CARGO_HOME="${CARGO_HOME:-$HOME/.local/share/cargo}" RUSTUP_HOME="${RUSTUP_HOME:-$HOME/.local/share/rustup}"
+export PATH="$CARGO_HOME/bin:$PATH"
+cargo build --lib --release --config 'profile.release.strip=true' --target wasm32-unknown-unknown --manifest-path "$CRATE/Cargo.toml"
+cp "$CRATE/target/wasm32-unknown-unknown/release/reactivescript.wasm" "$HERE/public/rxc.wasm"
+ls -la "$HERE/public/rxc.wasm"
diff --git a/site/playground/src/compile.ts b/site/playground/src/compile.ts
new file mode 100644
index 0000000..22428da
--- /dev/null
+++ b/site/playground/src/compile.ts
@@ -0,0 +1,83 @@
+import { loadRxc, type Files } from "./rxc";
+
+export type Target = "dom" | "ssr" | "universal";
+
+export type Diagnostic = {
+  file: string;
+  line?: number;
+  code: string;
+  rule: string;
+  message: string;
+  range?: { start: { line: number; column: number }; end: { line: number; column: number } };
+};
+
+export type AppOut = {
+  entry?: string;
+  css?: string;
+  modules?: Record<string, { code: string; map: unknown; jsx?: string }>;
+  diagnostics?: Diagnostic[];
+  error?: string;
+};
+
+export type Result = {
+  diagnostics: Diagnostic[];
+  app: AppOut;
+  ms: number;
+};
+
+export const ENTRY = "/main.rx";
+
+// kept across hot updates, so an edited module does not drop the loaded compiler
+let call: ReturnType<typeof loadRxc> | undefined = import.meta.hot?.data.call;
+
+async function fetchModule(): Promise<WebAssembly.Module> {
+  const res = await fetch(`${import.meta.env.BASE_URL}rxc.wasm`);
+  if (!res.ok || res.headers.get("content-type")?.includes("text/html")) throw new Error("rxc.wasm is missing: run `pnpm wasm` to build it");
+  return res.headers.get("content-type")?.includes("application/wasm") ? WebAssembly.compileStreaming(res) : WebAssembly.compile(await res.arrayBuffer());
+}
+
+export async function init() {
+  let module: WebAssembly.Module | undefined;
+  for (let attempt = 1; !module; attempt++) {
+    try {
+      module = await fetchModule();
+    } catch (e) {
+      // a download cut off midway (NotReadableError, a network error) is worth another try; a missing file is not
+      if (attempt >= 3 || String(e).includes("pnpm wasm")) throw e;
+    }
+  }
+  call = loadRxc(module);
+  if (import.meta.hot) import.meta.hot.data.call = call;
+}
+
+/** The editor's files keyed by absolute path, as the crate reads them. */
+export const toFs = (files: Record<string, string>): Files =>
+  Object.fromEntries(Object.entries(files).map(([k, v]) => ["/" + k.replace(/^\/+/, ""), v]));
+
+const normalize = (d: any): Diagnostic => ({ ...d, message: d.message ?? d.msg ?? "" });
+
+export function compile(files: Record<string, string>, target: Target): Result {
+  if (!call) return { diagnostics: [], app: { error: "the compiler is not loaded: reload the page" }, ms: 0 };
+  const t0 = performance.now();
+  const fs = toFs(files);
+  const diagnostics: Diagnostic[] = [];
+  for (const file of Object.keys(fs).filter((f) => f.endsWith(".rx") && !f.endsWith(".d.rx"))) {
+    try {
+      const a = call("analyze", { file, prelude: "./prelude", project: false }, fs);
+      diagnostics.push(...(a.diagnostics ?? []).map(normalize));
+    } catch (e) {
+      diagnostics.push({ file, code: "PANIC", rule: "—", message: `the compiler trapped: ${(e as Error).message}` });
+    }
+  }
+  let app: AppOut;
+  try {
+    app = fs[ENTRY] === undefined ? { error: "no main.rx: the program starts at main.rx" } : call("app", { entry: ENTRY, target, jsx: true }, fs);
+  } catch (e) {
+    app = { error: `the compiler trapped: ${(e as Error).message}` };
+  }
+  if (app.diagnostics) app.diagnostics = app.diagnostics.map(normalize);
+  // analyze reports per file; app's checker run can name a file analyze did not (a .d.rx, say)
+  for (const d of app.diagnostics ?? [])
+    if (!diagnostics.some((x) => x.file === d.file && x.code === d.code && x.line === d.line)) diagnostics.push(d);
+  return { diagnostics, app, ms: performance.now() - t0 };
+}
diff --git a/site/playground/src/explain.ts b/site/playground/src/explain.ts
new file mode 100644
index 0000000..c6dbc80
--- /dev/null
+++ b/site/playground/src/explain.ts
@@ -0,0 +1,74 @@
+export type Note = { helper: string; name?: string; reads: string[]; text: string };
+
+/** The `.rx` form each Solid primitive in the view stands for (spec/11 CP-4b, @reactivescript/runtime). */
+export const SOLID_PRIMS: Record<string, string> = {
+  createSignal: "source x := e (ST-1); for source x = await …, its truth (ST-5)",
+  createStore: "source x := […] or {…}: structured, a store (ST-2a)",
+  createOptimistic: "source x = … that an action guesses (AC-3)",
+  createOptimisticStore: "a keyed or structured source an action guesses by row (AC-3)",
+  createMemo: "an equation x = e (E-1), and each hoisted await (R-1)",
+  createProjection: "x key k = e (ST-4), and x = draft(pre x -> seed) { … } (ST-3)",
+  action: "action f(…) { … } (AC-1): each await is a yield",
+  affects: "affects x (AC-5)",
+  refresh: "refresh x (AC-4)",
+  untrack: "a read in imperative scope: a snapshot (H-10)",
+  omit: "{ a, ...rest }: a rest of a destructured value, a live view of the other fields (RG-4b)",
+  latest: "latest x (R-12)",
+  isPending: "pending? x (R-9)",
+  onFlush: "onFlush(() => { … }) (EF-8)",
+  onSettled: "onSettled (EF-7)",
+  until: "until (AC-6)",
+  Errored: "errored fallback(e) { … } { … } (R-f-4)",
+  Loading: "loading fallback { … } { … }",
+  Show: "if c { … } else { … }",
+  For: "for x in xs { … }",
+  Repeat: "for i in 0..n { … }",
+};
+
+export function primsIn(code: string): { name: string; from: string }[] {
+  const m = /^import \{([^}]*)\} from "solid-js";/m.exec(code);
+  if (!m) return [];
+  return m[1]
+    .split(",")
+    .map((s) => s.trim())
+    .filter((n) => SOLID_PRIMS[n])
+    .map((name) => ({ name, from: SOLID_PRIMS[name] }));
+}
+
+const reads = (s: string, skip: string) =>
+  [...new Set([...s.matchAll(/\b([A-Za-z_]\w*(?:\$await\d*)?)\(\)/g)].map((r) => r[1].replace(/\$await\d*$/, " (the await)")))].filter((r) => r !== skip);
+
+/** A note for a line of the view: the `.rx` form it was written as. */
+export function noteFor(line: string): Note | undefined {
+  let m: RegExpExecArray | null;
+  if ((m = /const \[(\w+)\$truth, set\w+\] = createSignal\((.*)$/.exec(line)))
+    return { helper: "createSignal", name: m[1], reads: reads(m[2], m[1]), text: `source ${m[1]} = …: its answer, the truth a guess reverts to` };
+  if ((m = /const \[(\w+), guess\w+\] = createOptimistic\(/.exec(line)))
+    return { helper: "createOptimistic", name: m[1], reads: [], text: `source ${m[1]} as shown: \`guess ${m[1]} := v\` writes over the truth (AC-3)` };
+  if ((m = /const \[(\w+), set\w+\] = createSignal\((.*)$/.exec(line)))
+    return { helper: "createSignal", name: m[1], reads: reads(m[2], m[1]), text: /^\(\) =>/.test(m[2]) ? `source ${m[1]} = …: a source with a question (ST-5)` : `source ${m[1]} := … (ST-1)` };
+  if ((m = /const \[(\w+), set\w+\] = create(?:Optimistic)?Store\((.*)$/.exec(line)))
+    return { helper: "createStore", name: m[1], reads: reads(m[2], m[1]), text: `source ${m[1]}, structured: a store (ST-2a)` };
+  if ((m = /const (\w+)\$answer = createMemo\((.*)$/.exec(line)))
+    return { helper: "createMemo", name: m[1], reads: reads(m[2], ""), text: `the answer of ${m[1]} key … = …, before rows are matched by key` };
+  if ((m = /const (\w+) = omit\(\w+((?:, "\w+")*)\)/.exec(line)))
+    return { helper: "omit", name: m[1], reads: [], text: `{ ${m[2].split(", ").filter(Boolean).map((k) => k.replace(/"/g, "") + ", ").join("")}...${m[1]} }: the other fields, still live (RG-4b)` };
+  if ((m = /const (\w+) = createProjection\(\(\) => \w+\$answer\(\), \[\], \{ key: ("?\w+"?) \}/.exec(line)))
+    return { helper: "createProjection", name: m[1], reads: [], text: `${m[1]} key ${m[2].replace(/"/g, "")} = …: each row keeps its identity by ${m[2].replace(/"/g, "")} (ST-4)` };
+  if ((m = /const (\w+) = createProjection\(\((\w+)\) =>/.exec(line)))
+    return { helper: "createProjection", name: m[1], reads: [], text: `${m[1]} = draft(pre ${m[1]} -> seed) { … }: writes to ${m[2]} change only those paths (ST-3)` };
+  if ((m = /const (\w+)\$await\d* = createMemo\((.*)$/.exec(line)))
+    return { helper: "createMemo", name: m[1], reads: reads(m[2], ""), text: `the await in ${m[1]}, hoisted to its own memo (R-1)` };
+  if ((m = /const (\w+) = createMemo\((.*)$/.exec(line))) return { helper: "createMemo", name: m[1], reads: reads(m[2], m[1]), text: `equation ${m[1]} = … (E-1)` };
+  if ((m = /const (\w+) = action\(/.exec(line))) return { helper: "action", name: m[1], reads: [], text: `action ${m[1]}(…): its body is one change; each await is a yield (AC-1)` };
+  if ((m = /^\s*guess(\w)(\w*)\(/.exec(line))) {
+    const n = m[1].toLowerCase() + m[2];
+    return { helper: "guess", name: n, reads: [], text: `guess ${n} := …: shows now, reverts if the action fails` };
+  }
+  if ((m = /^\s*affects\((\w+)\)/.exec(line))) return { helper: "affects", name: m[1], reads: [], text: `affects ${m[1]}: pending? ${m[1]} is true while the action runs` };
+  if (/^\s*onFlush\(/.test(line)) return { helper: "onFlush", reads: [], text: "lands now, in its own instant (EF-8)" };
+  if ((m = /^\s*<(Errored|Loading|Show|For)\b/.exec(line))) return { helper: m[1], reads: [], text: SOLID_PRIMS[m[1]] };
+  if ((m = /\bset(\w)(\w*)\((untrack|latest)\(/.exec(line)))
+    return { helper: m[3], reads: [], text: m[3] === "latest" ? "latest x: the newest value, even while held (R-12)" : `a read in a handler is a snapshot (H-10)` };
+  return undefined;
+}
diff --git a/site/playground/src/format.ts b/site/playground/src/format.ts
new file mode 100644
index 0000000..2b792e5
--- /dev/null
+++ b/site/playground/src/format.ts
@@ -0,0 +1,57 @@
+import { solidify } from "./solidify";
+
+let loaded: Promise<(code: string) => Promise<string>> | undefined;
+
+const WIDTH = 110;
+const width = (s: string) => s.replace(/\t/g, "  ").length;
+
+/** Puts the short calls Prettier splits one argument per line back on one line. */
+function rejoin(code: string) {
+  const lines = code.split("\n");
+  const out: string[] = [];
+  for (let i = 0; i < lines.length; i++) {
+    const open = lines[i];
+    if (open.endsWith("(")) {
+      const indent = /^\t*/.exec(open)![0];
+      let j = i + 1;
+      while (j < lines.length && j - i <= 6 && !/^\t*\)/.test(lines[j]) && !/[<>{]\s*$/.test(lines[j]) && !lines[j].includes("//")) j++;
+      const close = lines[j];
+      if (close !== undefined && close.startsWith(indent + ")") && j - i <= 6) {
+        const args = lines.slice(i + 1, j).map((l) => l.trim()).join(" ").replace(/,$/, "");
+        const joined = open + args + close.slice(indent.length);
+        if (width(joined) <= WIDTH) {
+          out.push(joined);
+          i = j;
+          continue;
+        }
+      }
+    }
+    out.push(open);
+  }
+  return out.join("\n");
+}
+
+/** Prettier, loaded the first time the JSX view is shown. */
+export function formatter() {
+  return (loaded ??= Promise.all([import("prettier/standalone"), import("prettier/plugins/babel"), import("prettier/plugins/estree")]).then(
+    ([prettier, babel, estree]) =>
+      async (code: string) =>
+        rejoin(await prettier.format(code, { parser: "babel", plugins: [babel, estree as any], printWidth: 100, useTabs: true })),
+    (e) => {
+      loaded = undefined;
+      throw e;
+    },
+  ));
+}
+
+/** The crate's JSX read as Solid primitives (`solidify`), formatted. */
+export async function formatSolid(raw: string): Promise<{ code: string; error?: string }> {
+  const format = await formatter();
+  let runtime = raw;
+  try {
+    runtime = await format(raw);
+    return { code: await format(solidify(runtime)) };
+  } catch (e) {
+    return { code: runtime, error: String((e as Error)?.message ?? e).split("\n")[0] };
+  }
+}
diff --git a/site/playground/src/highlight.ts b/site/playground/src/highlight.ts
new file mode 100644
index 0000000..c430561
--- /dev/null
+++ b/site/playground/src/highlight.ts
@@ -0,0 +1,30 @@
+import hljs from "highlight.js/lib/core";
+import javascript from "highlight.js/lib/languages/javascript";
+import xml from "highlight.js/lib/languages/xml";
+
+hljs.registerLanguage("javascript", javascript);
+hljs.registerLanguage("xml", xml);
+
+export const highlight = (code: string, language: "javascript") => hljs.highlight(code, { language, ignoreIllegals: true }).value;
+
+const RX_KEYWORDS = new Set(
+  "source|component|action|effect|export|default|import|pure|from|if|else|for|in|await|loading|errored|fallback|guess|affects|refresh|latest|pending?|peek|pre|deferred|key|draft|let|try|catch|throw|error|fn|type|on|portal|onFlush|until|server|client|return|true|false|null|rejects".split("|"),
+);
+
+const esc = (s: string) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+
+/** A light colouring of .rx for the editor's backdrop: comments, strings, keywords, :=, tags. */
+export function highlightRx(src: string) {
+  const TOKEN = /(\/\/[^\n]*)|("(?:[^"\\\n]|\\.)*"|`(?:[^`\\]|\\.)*`)|(:=)|(<\/?[A-Za-z][\w.-]*)|([A-Za-z_$][\w$]*\??)|([^"`/<:A-Za-z_$]+|.)/gs;
+  let out = "";
+  for (const m of src.matchAll(TOKEN)) {
+    const [t, comment, str, assign, tag, word] = m;
+    if (comment) out += `<span class="hl-c">${esc(t)}</span>`;
+    else if (str) out += `<span class="hl-s">${esc(t)}</span>`;
+    else if (assign) out += `<span class="hl-w">${esc(t)}</span>`;
+    else if (tag) out += `<span class="hl-t">${esc(t)}</span>`;
+    else if (word) out += RX_KEYWORDS.has(t) ? `<span class="hl-k">${esc(t)}</span>` : esc(t);
+    else out += esc(t);
+  }
+  return out;
+}
diff --git a/site/playground/src/main.tsx b/site/playground/src/main.tsx
new file mode 100644
index 0000000..0bc0678
--- /dev/null
+++ b/site/playground/src/main.tsx
@@ -0,0 +1,347 @@
+import { render } from "@solidjs/web";
+import { createEffect, createMemo, createSignal, For, Show } from "solid-js";
+import { compile, ENTRY, init, type Diagnostic } from "./compile";
+import { highlight, highlightRx } from "./highlight";
+import { noteFor, primsIn } from "./explain";
+import { presets } from "./presets";
+import { decode, encode } from "./share";
+import { formatSolid } from "./format";
+
+const GUIDE = "https://github.com/solidjs/reactivescript/blob/main/guide/diagnostics.md";
+
+const esc = (s: string) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+
+function lineCol(text: string, line: number, column: number) {
+  let i = 0;
+  for (let l = 1; l < line; l++) {
+    const n = text.indexOf("\n", i);
+    if (n < 0) return text.length;
+    i = n + 1;
+  }
+  return Math.min(i + column, text.length);
+}
+
+async function copyText(text: string): Promise<boolean> {
+  if (navigator.clipboard) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {}
+  }
+  // the Clipboard API exists only on https and localhost; a LAN address over http needs the old copy command
+  const ta = document.createElement("textarea");
+  ta.value = text;
+  ta.style.cssText = "position:fixed;opacity:0";
+  document.body.append(ta);
+  ta.select();
+  try {
+    return document.execCommand("copy");
+  } catch {
+    return false;
+  } finally {
+    ta.remove();
+  }
+}
+
+function Playground(props: { initial: { files: Record<string, string>; active: string; preset?: string }; compiler: Promise<void> }) {
+  const [files, setFiles] = createSignal<Record<string, string>>(props.initial.files);
+  const [active, setActive] = createSignal(props.initial.active);
+  const [preset, setPreset] = createSignal(props.initial.preset ?? "");
+  const [copied, setCopied] = createSignal("");
+  const [explain, setExplain] = createSignal(true);
+
+  // "loading", "ready", or why the compiler did not load
+  const [compiler, setCompiler] = createSignal("loading");
+  props.compiler.then(
+    () => setCompiler("ready"),
+    (e) => setCompiler(String(e?.message ?? e)),
+  );
+  const ready = () => compiler() === "ready";
+  const result = createMemo(() => (ready() ? compile(files(), "dom") : { diagnostics: [], app: {}, ms: 0 }));
+  const lastGood = createMemo<ReturnType<typeof compile> | undefined>((prev) => (result().app.modules ? result() : prev));
+  const stale = () => ready() && !result().app.modules;
+  const diagnostics = () => result().diagnostics;
+  const failure = () => result().app.error;
+  const modules = createMemo(() =>
+    Object.entries(lastGood()?.app.modules ?? {})
+      .sort(([a], [b]) => Number(b === ENTRY) - Number(a === ENTRY))
+      .map(([p, m]) => ({ path: p, jsx: m.jsx ?? "" })),
+  );
+  const rawJsx = createMemo(() => modules().map((m) => m.jsx).join("\n\n"));
+  const [solid, setSolid] = createSignal<{ raw: string; code: string; error?: string }>({ raw: "", code: "" });
+  createEffect(
+    () => [rawJsx(), modules()] as const,
+    ([raw, mods]) => {
+      Promise.all(mods.map((m) => formatSolid(m.jsx).then((r) => ({ ...r, code: m.path === ENTRY ? r.code : `// ${m.path}\n${r.code}` }))))
+        .then((rs) => rawJsx() === raw && setSolid({ raw, code: rs.map((r) => r.code).join("\n"), error: rs.find((r) => r.error)?.error }))
+        .catch((e) => rawJsx() === raw && setSolid({ raw, code: raw, error: String(e?.message ?? e) }));
+    },
+  );
+  const shown = () => (solid().raw === rawJsx() ? solid().code : "");
+  const codeHtml = createMemo(() =>
+    shown()
+      .split("\n")
+      .map((l) => {
+        const n = explain() ? noteFor(l) : undefined;
+        const note = n
+          ? `<div class="note" data-testid="note">${/^\s*/.exec(l)![0]}<span><b>${esc(n.helper)}</b> → ${esc(n.text)}${esc(n.reads.length ? ` · reads ${n.reads.join(", ")}` : "")}</span></div>`
+          : "";
+        return `<div class="cl">${highlight(l, "javascript") || " "}${note}</div>`;
+      })
+      .join(""),
+  );
+  const prims = createMemo(() => primsIn(shown()));
+
+  const text = () => files()[active()] ?? "";
+  const editLines = createMemo(() => {
+    const bad = new Set(diagnostics().filter((d) => d.file === "/" + active() && d.line).map((d) => d.line!));
+    return highlightRx(text())
+      .split("\n")
+      .map((l, i) => `<span class="eline${bad.has(i + 1) ? " bad" : ""}">${l || " "}</span>`)
+      .join("\n");
+  });
+
+  let textarea!: HTMLTextAreaElement;
+  let backdrop!: HTMLPreElement;
+
+  const update = (value: string) => {
+    setFiles({ ...files(), [active()]: value });
+    setPreset("");
+  };
+  const loadPreset = (id: string) => {
+    const p = presets.find((x) => x.id === id);
+    if (!p) return;
+    setFiles({ ...p.files });
+    setActive("main.rx");
+    setPreset(id);
+  };
+  const goTo = (d: Diagnostic) => {
+    const name = d.file.replace(/^\//, "");
+    if (name in files()) setActive(name);
+    queueMicrotask(() => {
+      const t = files()[active()] ?? "";
+      const start = d.range ? lineCol(t, d.range.start.line, d.range.start.column) : lineCol(t, d.line ?? 1, 0);
+      const end = d.range ? lineCol(t, d.range.end.line, d.range.end.column) : start;
+      textarea.focus();
+      textarea.setSelectionRange(start, Math.max(end, start));
+    });
+  };
+  const addFile = () => {
+    const name = prompt("New file name (an .rx module, a .d.rx declaration, or a .js module):", "util.rx");
+    if (!name || name in files() || !/^[\w./-]+\.(rx|js|mjs)$/.test(name)) return;
+    setPreset("");
+    setFiles({ ...files(), [name]: name.endsWith(".d.rx") ? "export pure fn load()\n" : name.endsWith(".rx") ? "export n = 1\n" : "export const n = 1;\n" });
+    setActive(name);
+  };
+  const removeFile = (name: string) => {
+    if (name === "main.rx" || !confirm(`Remove ${name}?`)) return;
+    const next = { ...files() };
+    delete next[name];
+    setPreset("");
+    setFiles(next);
+    setActive("main.rx");
+  };
+  const share = async () => {
+    const hash = await encode({ files: files(), active: active() });
+    history.replaceState(null, "", "#" + hash);
+    setCopied((await copyText(location.href)) ? "Link copied" : "Copy the address bar");
+    setTimeout(() => setCopied(""), 2000);
+  };
+
+  // the URL keeps the program, so a reload or a shared link opens it again
+  let hashTimer: ReturnType<typeof setTimeout> | undefined;
+  createEffect(
+    () => [files(), active(), preset()] as const,
+    ([f, a, p]) => {
+      clearTimeout(hashTimer);
+      hashTimer = setTimeout(async () => {
+        const hash = p ? `example=${p}` : await encode({ files: f, active: a });
+        history.replaceState(null, "", "#" + hash);
+      }, 300);
+    },
+  );
+
+  const syncScroll = () => {
+    backdrop.scrollTop = textarea.scrollTop;
+    backdrop.scrollLeft = textarea.scrollLeft;
+  };
+  const onKey = (e: KeyboardEvent) => {
+    if (e.key === "Tab" && !e.shiftKey) {
+      e.preventDefault();
+      const { selectionStart: s, selectionEnd: end, value } = textarea;
+      update(value.slice(0, s) + "  " + value.slice(end));
+      queueMicrotask(() => textarea.setSelectionRange(s + 2, s + 2));
+    }
+  };
+
+  return (
+    <div class="shell">
+      <header class="bar">
+        <a class="brand" href="https://reactivescript.dev/" target="_blank" rel="noopener">
+          <img src={`${import.meta.env.BASE_URL}logo.svg`} alt="" width="28" height="28" />
+          <span>
+            ReactiveScript <b>Playground</b>
+          </span>
+        </a>
+        <label class="field">
+          <span>Example</span>
+          <select data-testid="example" value={preset()} onChange={(e) => loadPreset(e.currentTarget.value)}>
+            <option value="" disabled>
+              (edited)
+            </option>
+            <For each={presets}>{(p) => <option value={p.id}>{p.title}</option>}</For>
+          </select>
+        </label>
+        <span class="spacer" />
+        <span class="ms" data-testid="ms">
+          {ready() ? `${result().ms.toFixed(1)} ms` : ""}
+        </span>
+        <button type="button" class="btn primary" onClick={share}>
+          {copied() || "Share"}
+        </button>
+      </header>
+
+      <Show when={presets.find((p) => p.id === preset())}>
+        {(p) => <p class="blurb">{p().blurb}</p>}
+      </Show>
+
+      <main class="grid">
+        <section class="pane editor-pane">
+          <div class="tabs">
+            <For each={Object.keys(files())}>
+              {(name) => (
+                <span class={`tab${active() === name ? " on" : ""}`}>
+                  <button type="button" onClick={() => setActive(name)}>
+                    {name}
+                  </button>
+                  <Show when={name !== "main.rx"}>
+                    <button type="button" class="x" title={`Remove ${name}`} onClick={() => removeFile(name)}>
+                      ×
+                    </button>
+                  </Show>
+                </span>
+              )}
+            </For>
+            <button type="button" class="tab add" title="Add a file" onClick={addFile}>
+              +
+            </button>
+          </div>
+          <div class="editor">
+            <pre class="backdrop" aria-hidden="true" ref={backdrop} innerHTML={editLines() + "\n"} />
+            <textarea
+              ref={textarea}
+              data-testid="editor"
+              spellcheck={false}
+              autocapitalize="off"
+              autocomplete="off"
+              value={text()}
+              onInput={(e) => update(e.currentTarget.value)}
+              onScroll={syncScroll}
+              onKeyDown={onKey}
+            />
+          </div>
+          <div class="diags" data-testid="diagnostics">
+            <div class="label">
+              Diagnostics <span class={`count${diagnostics().length ? " bad" : ""}`}>{diagnostics().length}</span>
+            </div>
+            <Show when={diagnostics().length || failure()} fallback={<p class={ready() ? "ok" : "loading"}>{ready() ? "The checker accepts the program." : ""}</p>}>
+              <Show when={failure()}>{(f) => <pre class="err">{f()}</pre>}</Show>
+              <ul>
+                <For each={diagnostics()} keyed={false}>
+                  {(d) => (
+                    <li>
+                      <button type="button" class="where" onClick={() => goTo(d())}>
+                        {d().file.replace(/^\//, "")}:{d().range ? `${d().range!.start.line}:${d().range!.start.column + 1}` : d().line ?? "?"}
+                      </button>
+                      <a class="code" href={`${GUIDE}#${d().code.toLowerCase()}`} target="_blank" rel="noopener" data-testid="diag-code">
+                        {d().code}
+                      </a>
+                      <span class="rule">[{d().rule}]</span>
+                      <span class="msg">{d().message}</span>
+                    </li>
+                  )}
+                </For>
+              </ul>
+            </Show>
+          </div>
+        </section>
+
+        <section class="pane out-pane">
+          <div class="out-head">
+            <span class="label">Solid primitives</span>
+            <span class="hint">what the compiler's __rt calls are in Solid 2.0, for reading</span>
+            <span class="spacer" />
+            <label class="check">
+              <input type="checkbox" checked={explain()} onChange={(e) => setExplain(e.currentTarget.checked)} data-testid="explain-toggle" /> Explain
+            </label>
+          </div>
+          <Show when={stale() && lastGood()}>
+            <p class="stale-note">Not compiled: showing the last output that compiled.</p>
+          </Show>
+          <Show when={solid().raw === rawJsx() && solid().error}>
+            <p class="stale-note" data-testid="solid-error">
+              Could not write this as Solid primitives ({solid().error}); showing the compiler's JSX instead.
+            </p>
+          </Show>
+          <div class={`output${stale() ? " stale" : ""}`}>
+            <Show when={!ready()}>
+              <div class="loading" data-testid="loading">
+                <Show when={compiler() !== "loading"} fallback={<p>Loading the compiler…</p>}>
+                  <p>The compiler did not load.</p>
+                  <pre class="err">{compiler()}</pre>
+                  <button type="button" class="btn" onClick={() => location.reload()}>
+                    Retry
+                  </button>
+                </Show>
+              </div>
+            </Show>
+            <pre class="code" data-testid="solid" innerHTML={codeHtml()} />
+            <Show when={explain() && prims().length}>
+              <div class="explain">
+                <div class="label">What each primitive stands for in .rx</div>
+                <table class="map" data-testid="explain">
+                  <thead>
+                    <tr>
+                      <th>Solid</th>
+                      <th>written in .rx as</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <For each={prims()} keyed={false}>
+                      {(p) => (
+                        <tr>
+                          <td>
+                            <code>{p().name}</code>
+                          </td>
+                          <td>{p().from}</td>
+                        </tr>
+                      )}
+                    </For>
+                  </tbody>
+                </table>
+              </div>
+            </Show>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+}
+
+async function start() {
+  const compiler = init();
+  const fromHash = await decode(location.hash);
+  const featured = presets.find((p) => p.id === (fromHash?.preset ?? "await")) ?? presets[0];
+  const initial = fromHash?.files
+    ? { files: fromHash.files, active: fromHash.active in fromHash.files ? fromHash.active : "main.rx" }
+    : { files: { ...featured.files }, active: "main.rx", preset: featured.id };
+  const root = document.getElementById("app")!;
+  root.textContent = "";
+  render(() => <Playground initial={initial} compiler={compiler} />, root);
+}
+
+start().catch((e) => {
+  const root = document.getElementById("app")!;
+  root.innerHTML = `<div class="loading"><p>The playground did not start.</p><pre class="err"></pre></div>`;
+  root.querySelector("pre")!.textContent = String(e?.message ?? e);
+});
diff --git a/site/playground/src/presets.ts b/site/playground/src/presets.ts
new file mode 100644
index 0000000..add5538
--- /dev/null
+++ b/site/playground/src/presets.ts
@@ -0,0 +1,198 @@
+export type Preset = { id: string; title: string; blurb: string; files: Record<string, string> };
+
+const users = {
+  "users.d.rx": `export pure fn fetchUser(id: number) rejects(NotFound)
+export error NotFound
+`,
+};
+
+export const presets: Preset[] = [
+  {
+    id: "source",
+    title: "Source and equation",
+    blurb: "A source is a signal you write; an equation is a memo over what it reads.",
+    files: {
+      "main.rx": `export default component App() {
+  source count := 0          // a source: __rt.source, over createSignal
+  double = count * 2         // an equation: __rt.memo, over createMemo
+  parity = count % 2 == 0 ? "even" : "odd"
+
+  <div>
+    <button type="button" onClick={() => { count := count + 1 }}>
+      Clicked {count} times
+    </button>
+    <p>double: {double}, {parity}</p>
+  </div>
+}
+`,
+    },
+  },
+  {
+    id: "await",
+    title: "await, loading, errored",
+    blurb: "One equation with an await lowers to two memos: the hoisted await keyed on id, and the rest reading suffix.",
+    files: {
+      "main.rx": `import pure { fetchUser } from "./users"
+
+export default component App() {
+  source id := 1
+  source suffix := "!"
+  label = (await fetchUser(id)).name + suffix
+
+  <section>
+    {errored fallback(e) { <p class="error">{e.message}</p> } {
+      {loading fallback { <p>Loading…</p> } {
+        <h2 class={pending? label ? "stale" : ""}>{label}</h2>
+      }}
+    }}
+    <button type="button" onClick={() => { id := latest id + 1 }}>Next user ({latest id})</button>
+    <button type="button" onClick={() => { suffix := suffix + "!" }}>More excitement</button>
+  </section>
+
+  <style>
+    .stale { opacity: 0.5; }
+    .error { color: crimson; }
+  </style>
+}
+`,
+      ...users,
+    },
+  },
+  {
+    id: "action",
+    title: "action with guess",
+    blurb: "guess shows a value now and takes it back by itself if the action fails.",
+    files: {
+      "main.rx": `import pure { loadName, saveName } from "./names"
+
+export default component App() {
+  source name = await loadName()   // a source with a question: it can take a guess
+  source draft := ""
+  source saveError := ""
+
+  action save(next: string) {
+    guess name := next
+    affects name
+    onFlush(() => { saveError := "" })
+    try {
+      let saved = await saveName(next)
+      name := saved
+    } catch (e) {
+      saveError := e.message
+    }
+  }
+
+  <section>
+    {errored fallback(e) { <p class="error">{e.message}</p> } {
+      {loading fallback { <p>Loading…</p> } {
+        <h2 class={pending? name ? "saving" : ""}>Hello, {name}</h2>
+      }}
+    }}
+    <input value={draft} onInput={(e) => { draft := e.currentTarget.value }} />
+    <button type="button" onClick={() => save(draft)}>Save</button>
+    {if saveError != "" { <p class="error">{saveError}</p> }}
+  </section>
+
+  <style>
+    .saving { opacity: 0.6; font-style: italic; }
+    .error { color: crimson; }
+  </style>
+}
+`,
+      "names.d.rx": `export pure fn loadName()
+export pure fn saveName(name: string)
+`,
+    },
+  },
+  {
+    id: "control",
+    title: "for and if",
+    blurb: "for and if are expressions in the view; they lower to Solid's For and Show.",
+    files: {
+      "main.rx": `names = ["Ada", "Grace", "Anders", "Brendan"]
+
+export default component App() {
+  source guests: string[] := []
+  count = guests.length
+
+  <section>
+    <button type="button" onClick={() => { guests := gs => [...gs, names[gs.length % names.length]] }}>
+      Sign the guestbook
+    </button>
+    <button type="button" onClick={() => { guests := [] }}>Clear</button>
+    <ul>
+      {if count == 0 {
+        <li class="empty">No signatures yet.</li>
+      } else {
+        {for guest in guests {
+          <li>{guest}</li>
+        }}
+      }}
+    </ul>
+  </section>
+}
+`,
+    },
+  },
+  {
+    id: "projection",
+    title: "Projections: key and draft",
+    blurb: "A keyed equation and a draft both become createProjection: rows keep identity by key, a draft writes only what changed.",
+    files: {
+      "main.rx": `export default component App() {
+  source todos := [
+    { id: 1, title: "Write the spec", done: true },
+    { id: 2, title: "Port the crate", done: false },
+    { id: 3, title: "Ship the playground", done: false },
+  ]
+  source picked := 2
+  source last := 0
+
+  open key id = todos.filter(t => !t.done)             // a keyed equation: createMemo + createProjection
+  marks = draft(pre marks -> {}) {                      // a draft: createProjection over its own writes
+    d[str(picked)] := true
+    d[str(last)] := false
+  }
+
+  <ul>
+    {for todo in open {
+      <li class={marks[str(todo.id)] ? "picked" : ""}>
+        <button type="button" onClick={() => { last := picked; picked := todo.id }}>{todo.title}</button>
+      </li>
+    }}
+  </ul>
+
+  <style>
+    .picked { font-weight: 600; }
+  </style>
+}
+`,
+    },
+  },
+  {
+    id: "style",
+    title: "Scoped style",
+    blurb: "A component's <style> is scoped to its own elements by a class hash.",
+    files: {
+      "main.rx": `export default component App() {
+  source lit := false
+
+  <style>
+    .card {
+      padding: 1rem 1.25rem;
+      border-radius: 12px;
+      border: 2px solid #5b9be6;
+      transition: background 0.2s;
+    }
+    .card.on { background: #f0b44c; color: #0c1829; }
+    button { font: inherit; }
+  </style>
+  <div class={lit ? "card on" : "card"}>
+    <p>The card is {lit ? "lit" : "dark"}.</p>
+    <button type="button" onClick={() => { lit := !lit }}>Toggle</button>
+  </div>
+}
+`,
+    },
+  },
+];
diff --git a/site/playground/src/rxc.ts b/site/playground/src/rxc.ts
new file mode 100644
index 0000000..d802d31
--- /dev/null
+++ b/site/playground/src/rxc.ts
@@ -0,0 +1,38 @@
+export type Files = Record<string, string>;
+
+export function loadRxc(module: WebAssembly.Module) {
+  let x: any;
+  let files: Files = {};
+  const enc = new TextEncoder(), dec = new TextDecoder();
+  const put = (b: Uint8Array) => {
+    const p = x.rx_alloc(b.length + 4);
+    new DataView(x.memory.buffer).setUint32(p, b.length, true);
+    new Uint8Array(x.memory.buffer).set(b, p + 4);
+    return p;
+  };
+  const env = {
+    rx_read(ptr: number, len: number) {
+      const f = dec.decode(new Uint8Array(x.memory.buffer, ptr, len));
+      return f in files ? put(enc.encode(files[f])) : 0;
+    },
+  };
+  const fresh = () => (x = new WebAssembly.Instance(module, { env }).exports);
+  fresh();
+  return (method: string, params: any, fs: Files = {}) => {
+    files = fs;
+    try {
+      const req = enc.encode(JSON.stringify({ method, params }));
+      const p = x.rx_alloc(req.length);
+      new Uint8Array(x.memory.buffer).set(req, p);
+      const out = x.rx_call(p, req.length);
+      const n = new DataView(x.memory.buffer).getUint32(out, true);
+      const text = dec.decode(new Uint8Array(x.memory.buffer, out + 4, n));
+      x.rx_free(out, n + 4);
+      return JSON.parse(text);
+    } catch (e) {
+      // a panic traps and leaves the instance unusable
+      fresh();
+      throw e;
+    }
+  };
+}
diff --git a/site/playground/src/share.ts b/site/playground/src/share.ts
new file mode 100644
index 0000000..30bba1b
--- /dev/null
+++ b/site/playground/src/share.ts
@@ -0,0 +1,25 @@
+export type State = { files: Record<string, string>; active: string; preset?: string };
+
+const b64 = (bytes: Uint8Array) => btoa(Array.from(bytes, (b) => String.fromCharCode(b)).join("")).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+const unb64 = (s: string) => Uint8Array.from(atob(s.replace(/-/g, "+").replace(/_/g, "/")), (c) => c.charCodeAt(0));
+
+async function pipe(bytes: Uint8Array, stream: CompressionStream | DecompressionStream) {
+  return new Uint8Array(await new Response(new Blob([bytes as BlobPart]).stream().pipeThrough(stream)).arrayBuffer());
+}
+
+export async function encode(state: State) {
+  const json = new TextEncoder().encode(JSON.stringify({ f: state.files, a: state.active }));
+  return "code=" + b64(await pipe(json, new CompressionStream("deflate-raw")));
+}
+
+export async function decode(hash: string): Promise<State | undefined> {
+  const params = new URLSearchParams(hash.replace(/^#/, ""));
+  const code = params.get("code");
+  if (!code) return params.get("example") ? ({ preset: params.get("example")! } as State) : undefined;
+  try {
+    const s = JSON.parse(new TextDecoder().decode(await pipe(unb64(code), new DecompressionStream("deflate-raw"))));
+    return { files: s.f, active: s.a ?? "main.rx" };
+  } catch {
+    return undefined;
+  }
+}
diff --git a/site/playground/src/solidify.ts b/site/playground/src/solidify.ts
new file mode 100644
index 0000000..b3cd6ae
--- /dev/null
+++ b/site/playground/src/solidify.ts
@@ -0,0 +1,266 @@
+// The crate's `__rt` JSX read as Solid 2.0 primitives (spec/11 CP-4b); a reading aid, not what runs.
+
+/** The index just past the bracket that closes the one at `open`, skipping strings, templates and comments. */
+function close(code: string, open: number): number {
+  const pairs: Record<string, string> = { "(": ")", "[": "]", "{": "}" };
+  const stack: string[] = [];
+  for (let i = open; i < code.length; i++) {
+    const c = code[i];
+    if (c === '"' || c === "'" || c === "`") {
+      for (i++; i < code.length && code[i] !== c; i++) if (code[i] === "\\") i++;
+      continue;
+    }
+    if (c === "/" && code[i + 1] === "/") {
+      i = code.indexOf("\n", i);
+      if (i < 0) return code.length;
+      continue;
+    }
+    if (pairs[c]) stack.push(pairs[c]);
+    else if (c === ")" || c === "]" || c === "}") {
+      stack.pop();
+      if (!stack.length) return i + 1;
+    }
+  }
+  return code.length;
+}
+
+/** Top-level arguments of the call whose `(` is at `open`. */
+function args(code: string, open: number): { list: string[]; end: number } {
+  const end = close(code, open);
+  const inner = code.slice(open + 1, end - 1);
+  const list: string[] = [];
+  let depth = 0;
+  let start = 0;
+  for (let i = 0; i < inner.length; i++) {
+    const c = inner[i];
+    if (c === '"' || c === "'" || c === "`") {
+      for (i++; i < inner.length && inner[i] !== c; i++) if (inner[i] === "\\") i++;
+    } else if ("([{".includes(c)) depth++;
+    else if (")]}".includes(c)) depth--;
+    else if (c === "," && depth === 0) {
+      list.push(inner.slice(start, i).trim());
+      start = i + 1;
+    }
+  }
+  if (inner.slice(start).trim()) list.push(inner.slice(start).trim());
+  return { list, end };
+}
+
+/** Applies `f` to the code between strings, templates and comments, leaving their contents as written. */
+function inCode(code: string, f: (part: string) => string): string {
+  let out = "";
+  let from = 0;
+  for (let i = 0; i < code.length; i++) {
+    const c = code[i];
+    let end = -1;
+    if (c === '"' || c === "'" || c === "`") {
+      let j = i + 1;
+      for (; j < code.length && code[j] !== c; j++) if (code[j] === "\\") j++;
+      end = j + 1;
+    } else if (c === "/" && code[i + 1] === "/") {
+      end = code.indexOf("\n", i);
+      if (end < 0) end = code.length;
+    }
+    if (end < 0) continue;
+    out += f(code.slice(from, i)) + code.slice(i, end);
+    from = i = end;
+    i--;
+  }
+  return out + f(code.slice(from));
+}
+
+/** Rewrites every `name(` call in `code` with `f(args, start, end)`; returning undefined keeps the call. */
+function eachCall(code: string, name: string, f: (a: string[], start: number) => string | undefined): string {
+  let out = "";
+  let from = 0;
+  for (let i = code.indexOf(name + "(", from); i >= 0; i = code.indexOf(name + "(", from)) {
+    if (/[\w$.]/.test(code[i - 1] ?? "")) {
+      out += code.slice(from, i + name.length);
+      from = i + name.length;
+      continue;
+    }
+    const open = i + name.length;
+    const { list, end } = args(code, open);
+    const r = f(list, i);
+    out += code.slice(from, i) + (r ?? code.slice(i, end));
+    from = end;
+  }
+  return out + code.slice(from);
+}
+
+/** `(X)` → `X` when the parentheses wrap all of it. */
+const unparen = (x: string) => {
+  x = x.trim();
+  return x.startsWith("(") && close(x, 0) === x.length ? x.slice(1, -1).trim() : x;
+};
+const cap = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
+const unprev = (fn: string) => (/__prev/.test(fn.replace(/^\(__prev\)\s*=>/, "")) ? fn : fn.replace(/^\(__prev\)\s*=>/, "() =>"));
+const unseed = (seed: string) => {
+  const m = /^__rt\.untrack\(\(\) => ([\s\S]*)\)$/.exec(seed);
+  if (!m) return seed;
+  const value = unparen(m[1]);
+  // createSignal(fn) would derive from fn, so a function-valued seed keeps its untrack
+  return /^(\([^)]*\)\s*=>|\w+\s*=>|function|async)/.test(value) ? seed : value;
+};
+
+export function solidify(code: string): string {
+  const used = new Set<string>();
+  const optimistic = new Set<string>();
+  const stores = new Set<string>();
+
+  // import aliases: `import { f as w$f }` and `const v$f = w$f;` are one name
+  code = code.replace(/(\w+) as w\$\1\b/g, "$1").replace(/^\s*const v\$(\w+) = w\$\1;\n/gm, "");
+  code = code.replace(/^[ \t]*__rt\.reg\([^;]*\);\n/gm, "").replace(/^[ \t]*__rt\.hoisted\([^;]*\);\n/gm, "");
+  if ((code.match(/\b__o\b/g) ?? []).length === (code.match(/const __o = __rt\.owner\(\);/g) ?? []).length)
+    code = code.replace(/^[ \t]*const __o = __rt\.owner\(\);\n/gm, "");
+
+  code = eachCall(code, "__rt.source", (a) => {
+    const seed = unseed(a[1] ?? "undefined");
+    const prim = /^[[{]/.test(seed.trim()) ? "createStore" : "createSignal";
+    if (prim === "createStore") stores.add(JSON.parse(a[0]));
+    used.add(prim);
+    return `${prim}(${seed})`;
+  });
+  code = eachCall(code, "__rt.question", (a, at) => {
+    const [, fn, opts, mode = "", key] = a;
+    const name = JSON.parse(a[0]);
+    const flag = (f: string) => new RegExp(`\\b${f}: true`).test(mode);
+    const o = opts && opts !== "undefined" ? `, ${opts}` : "";
+    const f = unprev(fn);
+    if (flag("optimistic") && flag("structured")) return stores.add(name), used.add("createOptimisticStore"), `createOptimisticStore(${f}, ${key ? "[]" : "{}"}${key ? `, { key: ${key} }` : ""})`;
+    if (flag("optimistic") && flag("derived")) return used.add("createOptimistic"), `createOptimistic(${f}${o})`;
+    if (flag("optimistic")) {
+      // a truth signal, and the optimistic layer a guess writes over it
+      optimistic.add(name);
+      used.add("createSignal").add("createOptimistic");
+      void at;
+      return `createSignal(${f}${o})`;
+    }
+    if (flag("structured")) return stores.add(name), used.add("createStore"), `createStore(${f}, {})`;
+    used.add("createSignal");
+    return `createSignal(${f}${o})`;
+  });
+  // `const [v$x, w$x] = createSignal(fn)` with a guess: `const [x$truth, setX] = …; const [x, guessX] = createOptimistic(…)`
+  for (const name of optimistic) {
+    const decl = `const [v$${name}, w$${name}] = createSignal(`;
+    const i = code.indexOf(decl);
+    if (i < 0) continue;
+    const end = close(code, i + decl.length - 1);
+    const semi = code[end] === ";" ? end + 1 : end;
+    const ind = /[ \t]*$/.exec(code.slice(0, i))![0];
+    const call = code.slice(i + decl.length - "createSignal(".length, end);
+    code = code.slice(0, i) + `const [${name}$truth, set${cap(name)}] = ${call};\n${ind}const [${name}, guess${cap(name)}] = createOptimistic(() => ${name}$truth());` + code.slice(semi);
+  }
+
+  // `x key k = e` (ST-4): the answer as a memo, and a projection over it that keeps each row by its key
+  for (let i = code.indexOf("const v$"); i >= 0; i = code.indexOf("const v$", i + 1)) {
+    const m = /^const v\$(\w+) = __rt\.keyed\(/.exec(code.slice(i));
+    if (!m) continue;
+    const { list, end } = args(code, i + m[0].length - 1);
+    const semi = code[end] === ";" ? end + 1 : end;
+    const ind = /[ \t]*$/.exec(code.slice(0, i))![0];
+    const name = m[1];
+    stores.add(name);
+    used.add("createMemo").add("createProjection");
+    code = code.slice(0, i) + `const ${name}$answer = createMemo(${list[2]});\n${ind}const v$${name} = createProjection(() => ${name}$answer(), [], { key: ${list[1]} });` + code.slice(semi);
+  }
+  // `x = draft(pre x -> seed) { … }` (ST-3): a projection whose function writes its draft
+  for (let i = code.indexOf("const v$"); i >= 0; i = code.indexOf("const v$", i + 1)) {
+    const m = /^const v\$(\w+) = __rt\.draft\(/.exec(code.slice(i));
+    if (!m) continue;
+    const { list, end } = args(code, i + m[0].length - 1);
+    stores.add(m[1]);
+    used.add("createProjection");
+    code = code.slice(0, i) + `const v$${m[1]} = createProjection(${list[1]}, ${unseed(list[0])})` + code.slice(end);
+  }
+  // a draft write: `{ let __t = d; __t[k] = v; }` is `d[k] = v;`
+  code = code.replace(/\{\s*let __t = ([\w$]+);\s*__t((?:\[[^\n]*?\]|\.\w+)+) = ([^;\n]+);\s*\}/g, "$1$2 = $3;");
+  code = code.replace(/\b__B\.str\(/g, "String(");
+
+  code = eachCall(code, "__rt.memo", (a) => {
+    // `...rest` in a prop pattern: Solid's omit is already a live view of props, so the memo around it adds nothing
+    const omitted = /^\(__prev\)\s*=>\s*__rt\.omit\(([\s\S]*)\)$/.exec(a[1]);
+    if (omitted && close(a[1], a[1].indexOf("__rt.omit(") + 9) === a[1].length) {
+      stores.add(JSON.parse(a[0]));
+      used.add("omit");
+      return `omit(${omitted[1]})`;
+    }
+    used.add("createMemo");
+    return `createMemo(${unprev(a[1])}${a[2] && a[2] !== "undefined" ? `, ${a[2]}` : ""})`;
+  });
+  code = code.replace(/!__rt\.eq\(/g, "__rt.neq(");
+  code = eachCall(code, "__rt.neq", (a) => `((${a[0]}) !== (${a[1]}))`);
+  code = eachCall(code, "__rt.eq", (a) => `((${a[0]}) === (${a[1]}))`);
+  code = eachCall(code, "__rt.awaited", (a) => a[0]);
+  code = eachCall(code, "__rt.show", (a) => a[0]);
+  code = eachCall(code, "__rt.snapshot", (a) => (used.add("untrack"), `untrack(${a[0]})`));
+  code = eachCall(code, "__rt.refresh", (a) => (used.add("refresh"), `refresh(${a[1]})`));
+  code = eachCall(code, "__rt.scopedClass", (a) => `[${a[0]}, ${a[1]}]`);
+  for (const h of ["untrack", "latest", "isPending", "affects", "onFlush", "onSettled", "until", "action"])
+    code = code.replace(new RegExp(`__rt\\.${h}\\(`, "g"), () => (used.add(h), `${h}(`));
+
+  // `(() => { return X; })()`: what was left of a region's function once its owner line went
+  for (let i = code.indexOf("(() => {"); i >= 0; i = code.indexOf("(() => {", i + 1)) {
+    const bodyOpen = i + "(() => ".length;
+    const bodyEnd = close(code, bodyOpen);
+    if (code.slice(bodyEnd, bodyEnd + 3) !== ")()") continue;
+    const m = /^\{\s*return ([\s\S]*);\s*\}$/.exec(code.slice(bodyOpen, bodyEnd));
+    if (m && !/^\s*\(?\s*$/.test(m[1])) code = code.slice(0, i) + unparen(m[1]) + code.slice(bodyEnd + 3);
+  }
+
+  // `=> { return X; }` is `=> X`
+  for (let i = code.indexOf("=> {"); i >= 0; i = code.indexOf("=> {", i + 1)) {
+    const bodyOpen = i + 3;
+    const bodyEnd = close(code, bodyOpen);
+    const m = /^\{\s*return ([\s\S]*);\s*\}$/.exec(code.slice(bodyOpen, bodyEnd));
+    if (m && !/^\s*\(?\s*$/.test(m[1]) && !/\breturn\b/.test(m[1])) {
+      const x = unparen(m[1]);
+      code = code.slice(0, bodyOpen) + (x.startsWith("{") ? `(${x})` : x) + code.slice(bodyEnd);
+    }
+  }
+  // a branch's unused item parameter: `{(__item) => X}` is `{X}`
+  for (let i = code.indexOf("(__item) => "); i >= 0; i = code.indexOf("(__item) => ", i + 1)) {
+    const body = i + "(__item) => ".length;
+    const end = "([{".includes(code[body]) ? close(code, body) : code.indexOf("\n", body);
+    if (!/\b__item\b/.test(code.slice(body, end < 0 ? undefined : end))) code = code.slice(0, i) + code.slice(body);
+  }
+
+  // writers and names
+  for (const name of optimistic) code = code.replace(new RegExp(`w\\$${name}\\.guess\\(`, "g"), `guess${cap(name)}(`);
+  code = inCode(code, (part) =>
+    part
+      .replace(/\bw\$(\w+)\.set\(/g, (_, n) => `set${cap(n)}(`)
+      .replace(/\bw\$(\w+)\b/g, (_, n) => `set${cap(n)}`)
+      .replace(/\ba\$(\w+)\$(\d+)\b/g, (_, n, k) => (k === "0" ? `${n}$await` : `${n}$await${k}`))
+      .replace(/\bp\$(\w+)\b/g, (_, n) => `prev${cap(n)}`)
+      .replace(/\b[vV]\$(\w+)\b/g, "$1"),
+  );
+  // a store, or omit's view of props, is read as itself, not called: within the block that declares it
+  for (const n of stores) {
+    const decl = new RegExp(`const (?:\\[${n}, \\w+\\]|${n}) = (?:create(?:Store|OptimisticStore|Projection)|omit)\\(`, "g");
+    for (const m of [...code.matchAll(decl)].reverse()) {
+      let open = (m.index ?? 0) - 1;
+      while (open >= 0 && !(code[open] === "{" && close(code, open) > (m.index ?? 0))) open--;
+      const end = open < 0 ? code.length : close(code, open);
+      const from = open < 0 ? 0 : open;
+      code = code.slice(0, from) + inCode(code.slice(from, end), (part) => part.replace(new RegExp(`(?<=^|[^\\w$.]|\\.\\.\\.)${n}\\(\\)`, "g"), n)) + code.slice(end);
+    }
+  }
+
+  // JSX text: `type={"button"}` and `{"Clear"}` as plain text where nothing changes by it
+  code = code.replace(/=\{("[^"\\{}]*")\}/g, "=$1").replace(/\{"([^"\\{}<>&\n]*[^"\\{}<>&\s])"\}/g, (all, t, at, str) => (/^\S/.test(t) ? t : all));
+  // a fragment around one element, or braces around one element, says nothing
+  for (let before = ""; before !== code; ) {
+    before = code;
+    code = code.replace(/<>\s*(<(\w[\w.$]*)\b(?:[^<]|<(?!\/?>))*?<\/\2>|<\w[\w.$]*\b[^<>]*\/>)\s*<\/>/g, "$1");
+    code = code.replace(/\{\s*(<(\w[\w.$]*)\b(?:[^<]|<(?!\/?>))*?<\/\2>)\s*\}/g, (all, el, tag, at, str) => (/[>}]\s*$/.test(str.slice(0, at)) ? el : all));
+  }
+
+  // the app wrapper, when nothing in it needs the runtime any more
+  const wrap = /export default function main\(__rt\) \{\s*const __B = __rt\.B;\s*return \(\) => \{([\s\S]*)return \(?\s*(?:<>\s*)?<(\w+) children=\{\[\]\} \/>\s*(?:<\/>\s*)?\)?;\s*\};\s*\}\s*$/.exec(code);
+  if (wrap && !/__rt|__B/.test(wrap[1])) code = code.slice(0, wrap.index) + wrap[1].replace(/^\t\t/gm, "") + `export default ${wrap[2]};\n`;
+
+  for (const c of ["Errored", "Loading", "For", "Show", "Repeat"]) if (new RegExp(`<${c}[\\s>]`).test(code)) used.add(c);
+  const head = used.size ? `import { ${[...used].sort().join(", ")} } from "solid-js";\n` : "";
+  return head + code;
+}
diff --git a/site/playground/src/style.css b/site/playground/src/style.css
new file mode 100644
index 0000000..8550554
--- /dev/null
+++ b/site/playground/src/style.css
@@ -0,0 +1,118 @@
+/* palette and type from reactivescript.dev (site/index.html) */
+:root {
+  --bg: #0c1829;
+  --tile: #12233d;
+  --panel: #15294a;
+  --line: #23406b;
+  --text: #e8eef7;
+  --muted: #9fb2cc;
+  --blue: #5b9be6;
+  --amber: #f0b44c;
+  --red: #ff8a80;
+  --green: #a8d59b;
+  --violet: #c9a7f2;
+  --comment: #6f86a6;
+  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
+  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  color-scheme: dark;
+}
+* { box-sizing: border-box; }
+html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 15px/1.5 var(--sans); }
+a { color: var(--blue); text-decoration: none; }
+a:hover { text-decoration: underline; }
+button, select, input { font: inherit; color: inherit; }
+#app { height: 100%; }
+.loading { color: var(--muted); padding: 12px 16px; }
+.loading p { margin: 0 0 8px; }
+.loading pre.err { margin: 0 0 10px; }
+.diags p.loading { padding: 0; margin: 8px 0 0; font-size: 14px; min-height: 1.5em; }
+
+.shell { display: flex; flex-direction: column; height: 100%; }
+.bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--tile); }
+.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; letter-spacing: -0.01em; }
+.brand:hover { text-decoration: none; }
+.brand b { color: var(--amber); font-weight: 600; }
+.field { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; }
+select { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; }
+.spacer { flex: 1; }
+.ms { font: 12px var(--mono); color: var(--muted); }
+.btn { padding: 6px 14px; border-radius: 9px; border: 1px solid var(--line); background: none; font-weight: 600; cursor: pointer; }
+.btn.primary { background: var(--blue); border-color: var(--blue); color: var(--bg); }
+.blurb { margin: 0; padding: 8px 16px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 14px; }
+
+.grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
+.pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
+.editor-pane { border-right: 1px solid var(--line); }
+
+.tabs { flex: none; display: flex; align-items: center; gap: 2px; padding: 6px 10px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
+.tab { display: inline-flex; align-items: center; background: none; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; padding: 0; color: var(--muted); font: 13px var(--mono); cursor: pointer; white-space: nowrap; }
+.tabs > button.tab, .tab > button { background: none; border: 0; padding: 6px 12px; cursor: pointer; color: inherit; font: inherit; }
+.tab.on { background: var(--tile); border-color: var(--line); color: var(--text); margin-bottom: -1px; padding-bottom: 1px; }
+.tab .x { padding: 6px 8px 6px 0; color: var(--muted); }
+.tab.add { padding: 6px 10px; }
+
+.editor { position: relative; flex: 1 1 auto; min-height: 200px; background: var(--tile); }
+.editor textarea, .editor .backdrop {
+  position: absolute; inset: 0; margin: 0; padding: 14px 16px; border: 0; overflow: auto;
+  font: 14px/1.6 var(--mono); font-variant-ligatures: none; tab-size: 2; white-space: pre; word-wrap: normal;
+}
+.editor textarea { background: transparent; color: transparent; caret-color: var(--text); resize: none; outline: none; }
+.editor textarea::selection { background: rgba(91, 155, 230, 0.35); color: transparent; }
+.editor .backdrop { color: var(--text); pointer-events: none; }
+.eline.bad { background: rgba(255, 138, 128, 0.12); box-shadow: inset 3px 0 var(--red); display: inline-block; min-width: 100%; }
+.hl-k { color: var(--blue); } .hl-w { color: var(--amber); } .hl-s { color: var(--green); } .hl-c { color: var(--comment); } .hl-t { color: var(--violet); }
+
+.label { font: 600 12px var(--sans); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
+.label .hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
+.diags { flex: 0 0 auto; max-height: 40%; min-height: 96px; overflow: auto; padding: 10px 16px 14px; border-top: 1px solid var(--line); }
+.diags ul { list-style: none; margin: 8px 0 0; padding: 0; }
+.diags li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
+.diags .where { background: none; border: 0; padding: 0; color: var(--muted); font: 12px var(--mono); cursor: pointer; margin-right: 8px; }
+.diags .where:hover { color: var(--text); text-decoration: underline; }
+.diags .code { font: 600 12px var(--mono); color: var(--red); margin-right: 6px; }
+.diags .rule { font: 12px var(--mono); color: var(--amber); margin-right: 8px; }
+.diags .msg { display: block; margin-top: 2px; }
+.diags .ok { color: var(--green); margin: 8px 0 0; font-size: 14px; }
+.count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 6px; border-radius: 10px; background: var(--panel); color: var(--green); text-align: center; }
+.count.bad { color: var(--red); }
+
+.out-head { flex: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line); }
+.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
+.cl { min-height: 1.55em; }
+.note { color: var(--amber); font: 12px/1.7 var(--mono); }
+.note > span { padding: 1px 7px; border-radius: 5px; background: rgba(240, 180, 76, 0.12); }
+.note b { font-weight: 600; }
+.explain { padding: 6px 16px 16px; border-top: 1px solid var(--line); }
+table.map { width: 100%; border-collapse: collapse; margin: 6px 0 0; font-size: 13px; }
+table.map th, table.map td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
+table.map th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
+table.map td:first-child { white-space: nowrap; }
+table.map code { font: 12px var(--mono); background: var(--panel); padding: 1px 5px; border-radius: 5px; }
+.out-head .hint { color: var(--muted); font-size: 13px; }
+.output { flex: 1 1 auto; min-height: 160px; overflow: auto; background: var(--tile); }
+.output.stale { opacity: 0.55; }
+.stale-note { margin: 0; padding: 6px 16px; background: #1d1626; color: var(--red); font-size: 13px; border-bottom: 1px solid #5a2a33; }
+pre.code { margin: 0; padding: 14px 16px; font: 13px/1.55 var(--mono); font-variant-ligatures: none; tab-size: 2; white-space: pre; }
+
+pre.err { margin: 8px 16px; padding: 10px 12px; border: 1px solid #5a2a33; background: #1d1626; color: var(--red); border-radius: 10px; white-space: pre-wrap; font: 12px/1.5 var(--mono); max-height: 160px; overflow: auto; }
+.diags pre.err { margin: 8px 0 0; }
+
+/* highlight.js tokens in the site's colours */
+.hljs-keyword, .hljs-built_in, .hljs-literal { color: var(--blue); }
+.hljs-string, .hljs-regexp { color: var(--green); }
+.hljs-comment { color: var(--comment); font-style: italic; }
+.hljs-number { color: var(--amber); }
+.hljs-title, .hljs-title.function_ { color: #e8c58a; }
+.hljs-attr, .hljs-property { color: #9fd0f0; }
+.hljs-tag, .hljs-name, .hljs-selector-class, .hljs-selector-tag { color: var(--violet); }
+.hljs-variable, .hljs-params { color: var(--text); }
+
+@media (max-width: 900px) {
+  html, body, #app, .shell { height: auto; }
+  .grid { display: block; }
+  .pane { min-height: auto; }
+  .editor-pane { border-right: 0; border-bottom: 1px solid var(--line); }
+  .editor { flex: none; height: 360px; }
+  .diags { max-height: none; }
+  .output { flex: none; height: 440px; }
+  }
diff --git a/site/playground/tests/playground.check.mjs b/site/playground/tests/playground.check.mjs
new file mode 100644
index 0000000..b53f419
--- /dev/null
+++ b/site/playground/tests/playground.check.mjs
@@ -0,0 +1,167 @@
+// Drives the running playground (`pnpm dev`) in headless Chromium. PLAYGROUND_URL overrides the address and
+// CHROMIUM the browser binary.
+import { chromium } from "playwright-core";
+import { existsSync } from "node:fs";
+import { homedir } from "node:os";
+
+const URL = process.env.PLAYGROUND_URL ?? "http://localhost:3020/";
+const exe =
+  process.env.CHROMIUM ??
+  [`${homedir()}/Library/Caches/ms-playwright/chromium_headless_shell-1243/chrome-headless-shell-mac-arm64/chrome-headless-shell`].find(existsSync);
+
+let failed = 0;
+const check = async (name, fn) => {
+  try {
+    await fn();
+    console.log(`ok   ${name}`);
+  } catch (e) {
+    failed++;
+    console.log(`FAIL ${name}\n     ${String(e.message).split("\n").join("\n     ")}`);
+  }
+};
+const assert = (cond, msg) => {
+  if (!cond) throw new Error(msg);
+};
+
+const browser = await chromium.launch({ executablePath: exe });
+const page = await browser.newPage({ viewport: { width: 1400, height: 900 } });
+const pageErrors = [];
+page.on("pageerror", (e) => pageErrors.push(e.message));
+
+const editor = page.getByTestId("editor");
+const js = page.getByTestId("solid");
+const settle = () => page.waitForTimeout(300);
+const codes = () => page.getByTestId("diag-code").allInnerTexts();
+const type = async (text) => {
+  await editor.fill(text);
+  await page.waitForTimeout(400);
+};
+
+await page.goto(URL);
+await editor.waitFor();
+
+await check("the featured example reads as Solid primitives: two memos for label", async () => {
+  await js.getByText("createMemo", { exact: false }).first().waitFor({ timeout: 5000 });
+  const text = await js.innerText();
+  assert(text.includes("const [id, setId] = createSignal(1);"), "no createSignal for id");
+  assert(text.includes("const label$await = createMemo(() => fetchUser(id()));"), "no memo for the hoisted await");
+  assert(text.includes("const label = createMemo(() => label$await()?.name + suffix());"), "no memo for the rest of label");
+  assert(text.includes("<Errored") && text.includes("<Loading"), "no Errored/Loading");
+  assert(!text.includes("__rt") && !text.includes("_$template"), "runtime or compiled code in the view");
+});
+
+await check("Explain notes each line's .rx form and lists the primitives", async () => {
+  const notes = await page.getByTestId("note").allInnerTexts();
+  assert(notes.some((n) => n.includes("source id := …")), `notes: ${notes.join(" | ")}`);
+  assert(notes.some((n) => n.includes("the await in label") && n.includes("reads id")), `notes: ${notes.join(" | ")}`);
+  assert(notes.some((n) => n.includes("equation label") && n.includes("suffix")), `notes: ${notes.join(" | ")}`);
+  const table = await page.getByTestId("explain").innerText();
+  assert(table.includes("createMemo") && table.includes("an equation x = e"), `table: ${table}`);
+  await page.getByTestId("explain-toggle").uncheck();
+  assert((await page.getByTestId("note").count()) === 0, "notes still shown with Explain off");
+  await page.getByTestId("explain-toggle").check();
+});
+
+await check("an object source reads as createStore", async () => {
+  await type(`export default component App() {\n  source person := { first: "Ada", last: "Lovelace" }\n  <p>{person.first}</p>\n}\n`);
+  const text = await js.innerText();
+  assert(text.includes("const [person, setPerson] = createStore({"), `no createStore:\n${text}`);
+  assert(text.includes("person?.first") && !text.includes("person()"), "the store is called like a signal");
+});
+
+await check("a rest prop reads as omit, spread without a call", async () => {
+  await type(`component Badge({ label, tone = "info", ...rest }) {\n  <span class={tone} {...rest}>{label}</span>\n}\nexport default component App() {\n  <Badge label="New" title="fresh" />\n}\n`);
+  const text = await js.innerText();
+  assert(text.includes('const rest = omit(props, "label", "tone");') && text.includes("{...rest}"), `no omit:\n${text}`);
+  assert(!text.includes("__rt") && !text.includes("rest()"), "omit is wrapped or called");
+  assert((await page.getByTestId("explain").innerText()).includes("omit"), "Explain does not list omit");
+});
+
+await check("the projection example reads as createProjection, keyed and draft", async () => {
+  await page.getByTestId("example").selectOption("projection");
+  await js.getByText("createProjection", { exact: false }).first().waitFor({ timeout: 5000 });
+  const text = await js.innerText();
+  assert(text.includes('const open = createProjection(() => open$answer(), [], { key: "id" });'), `no keyed projection:\n${text}`);
+  assert(text.includes("const marks = createProjection((d) => {") && text.includes("d[String(picked())] = true;"), `no draft projection:\n${text}`);
+  assert(text.includes("<For each={open}>"), "the projection is called like a signal");
+  const notes = await page.getByTestId("note").allInnerTexts();
+  assert(notes.some((n) => n.includes("open key id = …")), `notes: ${notes.join(" | ")}`);
+  assert(notes.some((n) => n.includes("marks = draft(pre marks -> seed)")), `notes: ${notes.join(" | ")}`);
+});
+
+await check("typing updates the compiled output live", async () => {
+  await type(`export default component App() {
+  source count := 0
+  tripled = count * 3
+  <button onClick={() => { count := count + 1 }}>{tripled}</button>
+}
+`);
+  const text = await js.innerText();
+  assert(text.includes("const tripled = createMemo(() => count() * 3);"), `the new equation is not in the output:\n${text}`);
+  assert((await codes()).length === 0, `unexpected diagnostics: ${await codes()}`);
+  await type((await editor.inputValue()).replace("count * 3", "count * 4"));
+  assert((await js.innerText()).includes("count() * 4"), "the edit did not reach the output");
+});
+
+await check("`double := 4` shows WRITE_TO_NON_SOURCE, with its rule and a guide link", async () => {
+  await type(`export default component App() {
+  source count := 0
+  double = count * 2
+  <button onClick={() => { double := 4 }}>{double}</button>
+}
+`);
+  const link = page.getByTestId("diag-code").first();
+  await link.waitFor();
+  assert((await codes()).includes("WRITE_TO_NON_SOURCE"), `codes: ${await codes()}`);
+  const href = await link.getAttribute("href");
+  assert(href.endsWith("guide/diagnostics.md#write_to_non_source"), `href: ${href}`);
+  const row = await page.getByTestId("diagnostics").innerText();
+  assert(row.includes("[W-1]") && row.includes("double is an equation"), `row: ${row}`);
+  assert(await page.locator(".output.stale").count(), "the output is not marked stale");
+});
+
+await check("every example compiles and reads as Solid primitives", async () => {
+  const ids = await page.getByTestId("example").locator("option:not([disabled])").evaluateAll((os) => os.map((o) => o.value));
+  assert(ids.length >= 5, `only ${ids.length} examples`);
+  for (const id of ids) {
+    await page.getByTestId("example").selectOption(id);
+    await settle();
+    assert((await codes()).length === 0, `${id}: ${await codes()}`);
+    assert(!(await page.locator(".output.stale").count()), `${id}: output stale`);
+    const text = await js.innerText();
+    assert(/create(Signal|Store)\(/.test(text) && !text.includes("__rt"), `${id}: not shown as Solid primitives:\n${text}`);
+  }
+});
+
+await check("an edited program survives a reload through the URL hash", async () => {
+  await type(`export default component App() {\n  source shared := 41\n  <p>{shared + 1}</p>\n}\n`);
+  await page.waitForTimeout(500);
+  assert(page.url().includes("#code="), `url: ${page.url()}`);
+  await page.reload();
+  await editor.waitFor();
+  assert((await editor.inputValue()).includes("source shared := 41"), "the program did not come back");
+  await js.getByText("createSignal(41)", { exact: false }).waitFor({ timeout: 5000 });
+});
+
+await check("a program of two .rx modules shows both, and adding a file is kept in the URL", async () => {
+  await page.getByTestId("example").selectOption("source");
+  page.once("dialog", (d) => d.accept("util.rx"));
+  await page.getByTitle("Add a file").click();
+  await type("export bump = 10\n");
+  await page.getByRole("button", { name: "main.rx", exact: true }).click();
+  await type(`import { bump } from "./util.rx"\n\nexport default component App() {\n  source n := 0\n  total = n + bump\n  <p>{total}</p>\n}\n`);
+  await js.getByText("// /util.rx", { exact: false }).waitFor({ timeout: 5000 });
+  const text = await js.innerText();
+  assert(text.includes("const total = createMemo("), `entry not shown as primitives:\n${text}`);
+  assert(!(await page.getByTestId("solid-error").count()), await page.getByTestId("solid-error").innerText().catch(() => ""));
+  await page.waitForTimeout(500);
+  assert(page.url().includes("#code="), `the added file is not in the URL: ${page.url()}`);
+});
+
+await check("no uncaught page errors", async () => {
+  assert(pageErrors.length === 0, pageErrors.join("\n"));
+});
+
+await browser.close();
+console.log(failed ? `\n${failed} failed` : "\nall passed");
+process.exit(failed ? 1 : 0);
diff --git a/site/playground/tsconfig.json b/site/playground/tsconfig.json
new file mode 100644
index 0000000..8065ba9
--- /dev/null
+++ b/site/playground/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "@solidjs/web",
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src", "vite.config.ts"]
+}
diff --git a/site/playground/vite.config.ts b/site/playground/vite.config.ts
new file mode 100644
index 0000000..30e0e72
--- /dev/null
+++ b/site/playground/vite.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import solid from "@solidjs/vite-plugin";
+
+export default defineConfig({
+  plugins: [solid()],
+  server: { port: 3020, strictPort: true },
+  build: { target: "esnext" },
+});