Add web-side player and complete MVP implementation of Source Editor

playground/pagx-playground/README.md

@@ -39,6 +39,25 @@ pagx-playground/
 First, ensure you have installed all the tools and dependencies listed in the
 [README.md](../../README.md#Development) in the project root, including Emscripten.
 
+> Important: The playground does not compile any WebAssembly itself. It consumes the compiled
+> WASM artifacts from [pagx-viewer](../pagx-viewer). You must build pagx-viewer first, and the
+> multi-threaded (MT) / single-threaded (ST) choice is made there, not here. Read the
+> [pagx-viewer README](../pagx-viewer/README.md) before building the playground.
+
+### Build pagx-viewer First
+
+The MT and ST WASM builds are produced in pagx-viewer, not in the playground. Pick the flavor
+you need there:
+
+```bash
+# In playground/pagx-viewer
+npm install
+npm run build:release       # multi-threaded (default, requires SharedArrayBuffer)
+npm run build:release:st    # single-threaded (no SharedArrayBuffer required)
+```
+
+See the [pagx-viewer README](../pagx-viewer/README.md) for the full build matrix.
+
 ### Install Dependencies
 
 ```bash
@@ -48,31 +67,53 @@ npm install
 
 ### Build
 
+Build the playground against the viewer artifacts. Use the plain commands to bundle against the
+multi-threaded viewer build, or the `:st` variants for the single-threaded one:
+
 ```bash
-# Build the TypeScript source
+# Bundle against the multi-threaded viewer artifacts (default)
 npm run build
-
-# Build release version (minified)
 npm run build:release
 
+# Bundle against the single-threaded viewer artifacts
+npm run build:st
+npm run build:release:st
+
 # Clean build artifacts
 npm run clean
 ```
 
+The `:st` variants only tell the playground bundler to pick up the single-threaded viewer
+artifacts; the actual MT/ST WASM compilation happens in pagx-viewer. Multi-threaded builds rely
+on `SharedArrayBuffer`, which requires the `Cross-Origin-Opener-Policy` and
+`Cross-Origin-Embedder-Policy` headers. The development server detects the build type
+automatically and only sends these headers for multi-threaded builds, so no manual configuration
+is needed when switching between the two.
+
 ## Development
 
 ### Run Development Server
 
-Start a local development server with hot reload:
+Start a local development server:
 
 ```bash
 npm run server
 ```
 
-The server will automatically open http://localhost:8081 in your browser.
+The server automatically opens the playground in your default browser and applies the correct
+COOP/COEP headers based on the detected build type (see [Build](#build)).
+
+### LAN Sharing
 
-> Note: The development server requires SharedArrayBuffer for WASM threading.
-> If you encounter issues, ensure your browser supports the required COOP/COEP headers.
+By default the server binds to `localhost` only. To share it with other devices on the same
+network (e.g. testing on a phone), enable LAN binding with the `PAGX_LAN` environment variable:
+
+```bash
+PAGX_LAN=1 npm run server
+```
+
+The console then prints a `LAN access` URL. Only enable this on trusted networks, as it exposes
+the local file server to any device on the LAN.
 
 ## Publish
 
@@ -101,19 +142,6 @@ npm run publish -- -o /path/to/output
 npm run publish -- --skip-build
 ```
 
-## Use with PAGX Viewer
-
-The playground consumes the compiled artifacts from [pagx-viewer](../pagx-viewer).
-Make sure to build the pagx-viewer first before building the playground:
-
-```bash
-# In playground/pagx-viewer
-npm run build:release
-
-# Then in playground/pagx-playground
-npm run build:release
-```
-
 ## Browser Requirements
 
 - Chrome 69+

playground/pagx-playground/README.zh_CN.md

@@ -38,6 +38,23 @@ pagx-playground/
 首先，请确保已安装项目根目录 [README.md](../../README.md#Development) 中列出的所有工具和依赖，
 包括 Emscripten。
 
+> 重要：Playground 本身不编译任何 WebAssembly，它直接使用 [pagx-viewer](../pagx-viewer) 编译出的
+> WASM 产物。你必须先构建 pagx-viewer，并且多线程（MT）/ 单线程（ST）的选择是在 pagx-viewer 中完成的，
+> 而不是在这里。构建 playground 前请先阅读 [pagx-viewer README](../pagx-viewer/README.zh_CN.md)。
+
+### 先构建 pagx-viewer
+
+MT 和 ST 的 WASM 构建都是在 pagx-viewer 中进行的，而非 playground。请在那里选择所需的版本：
+
+```bash
+# 在 playground/pagx-viewer 中
+npm install
+npm run build:release       # 多线程（默认，需要 SharedArrayBuffer）
+npm run build:release:st    # 单线程（无需 SharedArrayBuffer）
+```
+
+完整的构建命令矩阵参见 [pagx-viewer README](../pagx-viewer/README.zh_CN.md)。
+
 ### 安装依赖
 
 ```bash
@@ -47,31 +64,50 @@ npm install
 
 ### 构建
 
+Playground 基于 viewer 的产物进行打包。使用普通命令对应多线程 viewer 构建，使用 `:st` 变体对应单线程构建：
+
 ```bash
-# 构建 TypeScript 源码
+# 对应多线程 viewer 产物（默认）
 npm run build
-
-# 构建 Release 版本（压缩）
 npm run build:release
 
+# 对应单线程 viewer 产物
+npm run build:st
+npm run build:release:st
+
 # 清理构建产物
 npm run clean
 ```
 
+`:st` 变体只是告诉 playground 打包器选用单线程 viewer 产物；真正的 MT/ST WASM 编译发生在
+pagx-viewer 中。多线程构建依赖 `SharedArrayBuffer`，需要 `Cross-Origin-Opener-Policy` 和
+`Cross-Origin-Embedder-Policy` 头。开发服务器会自动检测构建类型，仅在多线程构建时发送这些头，
+因此在两种构建之间切换时无需手动配置。
+
 ## 开发
 
 ### 启动开发服务器
 
-启动本地开发服务器，支持热更新：
+启动本地开发服务器：
 
 ```bash
 npm run server
 ```
 
-服务器将自动在浏览器中打开 http://localhost:8081。
+服务器会自动在默认浏览器中打开 playground，并根据检测到的构建类型应用对应的 COOP/COEP 头
+（参见[构建](#构建)）。
+
+### 局域网分享
 
-> 注意：开发服务器需要 SharedArrayBuffer 来支持 WASM 多线程。
-> 如果遇到问题，请确保浏览器支持所需的 COOP/COEP 头。
+默认情况下服务器仅绑定 `localhost`。如需与同一网络下的其他设备共享（例如在手机上测试），
+可通过 `PAGX_LAN` 环境变量启用局域网绑定：
+
+```bash
+PAGX_LAN=1 npm run server
+```
+
+启用后控制台会打印 `LAN access` 地址。请仅在可信网络中启用，因为它会将本地文件服务器
+暴露给局域网内的任意设备。
 
 ## 发布
 
@@ -99,19 +135,6 @@ npm run publish -- -o /path/to/output
 npm run publish -- --skip-build
 ```
 
-## 与 PAGX Viewer 配合使用
-
-Playground 依赖 [pagx-viewer](../pagx-viewer) 的构建产物。
-构建 playground 前请先构建 pagx-viewer：
-
-```bash
-# 在 playground/pagx-viewer 中
-npm run build:release
-
-# 然后在 playground/pagx-playground 中
-npm run build:release
-```
-
 ## 浏览器要求
 
 - Chrome 69+

playground/pagx-playground/package.json

@@ -10,6 +10,9 @@
     "prebuild": "node scripts/prebuild.js",
     "build": "npm run prebuild && rollup -c ./scripts/rollup.js",
     "build:release": "node scripts/prebuild.js --release && BUILD_MODE=release rollup -c ./scripts/rollup.js",
+    "prebuild:st": "node scripts/prebuild.js --arch st",
+    "build:st": "npm run prebuild:st && ARCH=st rollup -c ./scripts/rollup.js",
+    "build:release:st": "node scripts/prebuild.js --arch st --release && ARCH=st BUILD_MODE=release rollup -c ./scripts/rollup.js",
     "publish": "node scripts/publish.js",
     "server": "node static/server.js"
   },
@@ -28,6 +31,13 @@
     "typescript": "~5.0.3"
   },
   "dependencies": {
+    "@codemirror/commands": "^6.10.4",
+    "@codemirror/lang-xml": "^6.1.0",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/search": "^6.7.1",
+    "@codemirror/state": "^6.7.1",
+    "@codemirror/view": "^6.43.6",
+    "@lezer/highlight": "^1.2.3",
     "express": "^4.21.1",
     "highlight.js": "^11.9.0",
     "marked": "^15.0.0",