Merge pull request #1673 from arrufat/mcp

Add Model Context Protocol (MCP) server support

.github/actions/install/action.yml

@@ -13,7 +13,7 @@ inputs:
   zig-v8:
     description: 'zig v8 version to install'
     required: false
-    default: 'v0.2.2'
+    default: 'v0.3.1'
   v8:
     description: 'v8 version to install'
     required: false
@@ -22,6 +22,10 @@ inputs:
     description: 'cache dir to use'
     required: false
     default: '~/.cache'
+  debug:
+    description: 'enable v8 pre-built debug version, only available for linux x86_64'
+    required: false
+    default: 'false'
 
 runs:
   using: "composite"
@@ -32,7 +36,7 @@ runs:
       shell: bash
       run: |
         sudo apt-get update
-        sudo apt-get install -y wget xz-utils python3 ca-certificates git pkg-config libglib2.0-dev gperf libexpat1-dev cmake clang
+        sudo apt-get install -y wget xz-utils ca-certificates clang make git
 
     # Zig version used from the `minimum_zig_version` field in build.zig.zon
     - uses: mlugg/setup-zig@v2
@@ -47,17 +51,17 @@ runs:
         cache-name: cache-v8
       with:
         path: ${{ inputs.cache-dir }}/v8
-        key: libc_v8_${{ inputs.v8 }}_${{ inputs.os }}_${{ inputs.arch }}_${{ inputs.zig-v8 }}.a
+        key: libc_v8_${{ inputs.v8 }}_${{ inputs.os }}_${{ inputs.arch }}_${{ inputs.zig-v8 }}${{inputs.debug == 'true' && '_debug' || '' }}.a
 
     - if: ${{ steps.cache-v8.outputs.cache-hit != 'true' }}
       shell: bash
       run: |
         mkdir -p ${{ inputs.cache-dir }}/v8
 
-        wget -O ${{ inputs.cache-dir }}/v8/libc_v8.a https://github.com/lightpanda-io/zig-v8-fork/releases/download/${{ inputs.zig-v8 }}/libc_v8_${{ inputs.v8 }}_${{ inputs.os }}_${{ inputs.arch }}.a
+        wget -O ${{ inputs.cache-dir }}/v8/libc_v8.a https://github.com/lightpanda-io/zig-v8-fork/releases/download/${{ inputs.zig-v8 }}/libc_v8_${{ inputs.v8 }}_${{ inputs.os }}_${{ inputs.arch }}${{inputs.debug == 'true' && '_debug' || '' }}.a
 
     - name: install v8
       shell: bash
       run: |
         mkdir -p v8
-        ln -s ${{ inputs.cache-dir }}/v8/libc_v8.a v8/libc_v8.a
+        ln -s ${{ inputs.cache-dir }}/v8/libc_v8.a v8/libc_v8${{inputs.debug == 'true' && '_debug' || '' }}.a

.github/workflows/build.yml

@@ -27,7 +27,7 @@ jobs:
       OS: linux
 
     runs-on: ubuntu-22.04
-    timeout-minutes: 15
+    timeout-minutes: 20
 
     steps:
       - uses: actions/checkout@v6
@@ -40,7 +40,6 @@ jobs:
         with:
           os: ${{env.OS}}
           arch: ${{env.ARCH}}
-          mode: 'release'
 
       - name: v8 snapshot
         run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast snapshot_creator -- src/snapshot.bin
@@ -62,6 +61,7 @@ jobs:
           allowUpdates: true
           artifacts: lightpanda-${{ env.ARCH }}-${{ env.OS }}
           tag: ${{ env.RELEASE }}
+          makeLatest: true
 
   build-linux-aarch64:
     env:
@@ -69,7 +69,7 @@ jobs:
       OS: linux
 
     runs-on: ubuntu-22.04-arm
-    timeout-minutes: 15
+    timeout-minutes: 20
 
     steps:
       - uses: actions/checkout@v4
@@ -82,7 +82,6 @@ jobs:
         with:
           os: ${{env.OS}}
           arch: ${{env.ARCH}}
-          mode: 'release'
 
       - name: v8 snapshot
         run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast snapshot_creator -- src/snapshot.bin
@@ -104,6 +103,7 @@ jobs:
           allowUpdates: true
           artifacts: lightpanda-${{ env.ARCH }}-${{ env.OS }}
           tag: ${{ env.RELEASE }}
+          makeLatest: true
 
   build-macos-aarch64:
     env:
@@ -113,7 +113,7 @@ jobs:
     # macos-14 runs on arm CPU. see
     # https://github.com/actions/runner-images?tab=readme-ov-file
     runs-on: macos-14
-    timeout-minutes: 15
+    timeout-minutes: 20
 
     steps:
       - uses: actions/checkout@v4
@@ -126,7 +126,6 @@ jobs:
         with:
           os: ${{env.OS}}
           arch: ${{env.ARCH}}
-          mode: 'release'
 
       - name: v8 snapshot
         run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast snapshot_creator -- src/snapshot.bin
@@ -148,6 +147,7 @@ jobs:
           allowUpdates: true
           artifacts: lightpanda-${{ env.ARCH }}-${{ env.OS }}
           tag: ${{ env.RELEASE }}
+          makeLatest: true
 
   build-macos-x86_64:
     env:
@@ -155,7 +155,7 @@ jobs:
       OS: macos
 
     runs-on: macos-14-large
-    timeout-minutes: 15
+    timeout-minutes: 20
 
     steps:
       - uses: actions/checkout@v4
@@ -168,7 +168,6 @@ jobs:
         with:
           os: ${{env.OS}}
           arch: ${{env.ARCH}}
-          mode: 'release'
 
       - name: v8 snapshot
         run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast snapshot_creator -- src/snapshot.bin
@@ -190,3 +189,4 @@ jobs:
           allowUpdates: true
           artifacts: lightpanda-${{ env.ARCH }}-${{ env.OS }}
           tag: ${{ env.RELEASE }}
+          makeLatest: true

.github/workflows/e2e-integration-test.yml

@@ -63,6 +63,6 @@ jobs:
 
       - name: run end to end integration tests
         run: |
-          ./lightpanda serve & echo $! > LPD.pid
+          ./lightpanda serve --log_level error & echo $! > LPD.pid
           go run integration/main.go
           kill `cat LPD.pid`

.github/workflows/e2e-test.yml

@@ -56,8 +56,6 @@ jobs:
           submodules: recursive
 
       - uses: ./.github/actions/install
-        with:
-          mode: 'release'
 
       - name: zig build release
         run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -Dcpu=x86_64 -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
@@ -124,10 +122,19 @@ jobs:
     needs: zig-build-release
 
     env:
-      MAX_MEMORY: 28000
-      MAX_AVG_DURATION: 23
+      MAX_VmHWM: 28000 # 28MB (KB)
+      MAX_CG_PEAK: 8000 # 8MB (KB)
+      MAX_AVG_DURATION: 17
       LIGHTPANDA_DISABLE_TELEMETRY: true
 
+      # How to give cgroups access to the user actions-runner on the host:
+      # $ sudo apt install cgroup-tools
+      # $ sudo chmod o+w /sys/fs/cgroup/cgroup.procs
+      # $ sudo mkdir -p /sys/fs/cgroup/actions-runner
+      # $ sudo chown -R actions-runner:actions-runner /sys/fs/cgroup/actions-runner
+      CG_ROOT: /sys/fs/cgroup
+      CG: actions-runner/lpd_${{ github.run_id }}_${{ github.run_attempt }}
+
     # use a self host runner.
     runs-on: lpd-bench-hetzner
     timeout-minutes: 15
@@ -152,22 +159,53 @@ jobs:
           go run ws/main.go & echo $! > WS.pid
           sleep 2
 
+      - name: run lightpanda in cgroup
+        run: |
+          if [ ! -f /sys/fs/cgroup/cgroup.controllers ]; then
+            echo "cgroup v2 not available: /sys/fs/cgroup/cgroup.controllers missing"
+            exit 1
+          fi
+
+          mkdir -p $CG_ROOT/$CG
+          cgexec -g memory:$CG ./lightpanda serve & echo $! > LPD.pid
+
+          sleep 2
+
       - name: run puppeteer
         run: |
-          ./lightpanda serve & echo $! > LPD.pid
-          sleep 2
           RUNS=100 npm run bench-puppeteer-cdp > puppeteer.out || exit 1
           cat /proc/`cat LPD.pid`/status |grep VmHWM|grep -oP '\d+' > LPD.VmHWM
           kill `cat LPD.pid`
 
+          PID=$(cat LPD.pid)
+          while kill -0 $PID 2>/dev/null; do
+            sleep 1
+          done
+          if [ ! -f $CG_ROOT/$CG/memory.peak ]; then
+            echo "memory.peak not available in $CG"
+            exit 1
+          fi
+          cat $CG_ROOT/$CG/memory.peak > LPD.cg_mem_peak
+
       - name: puppeteer result
         run: cat puppeteer.out
 
-      - name: memory regression
+      - name: cgroup memory regression
+        run: |
+          PEAK_BYTES=$(cat LPD.cg_mem_peak)
+          PEAK_KB=$((PEAK_BYTES / 1024))
+          echo "memory.peak_bytes=$PEAK_BYTES"
+          echo "memory.peak_kb=$PEAK_KB"
+          test "$PEAK_KB" -le "$MAX_CG_PEAK"
+
+      - name: virtual memory regression
         run: |
           export LPD_VmHWM=`cat LPD.VmHWM`
           echo "Peak resident set size: $LPD_VmHWM"
-          test "$LPD_VmHWM" -le "$MAX_MEMORY"
+          test "$LPD_VmHWM" -le "$MAX_VmHWM"
+
+      - name: cleanup cgroup
+        run: rmdir $CG_ROOT/$CG
 
       - name: duration regression
         run: |
@@ -180,7 +218,8 @@ jobs:
           export AVG_DURATION=`cat puppeteer.out|grep 'avg run'|sed 's/avg run duration (ms) //'`
           export TOTAL_DURATION=`cat puppeteer.out|grep 'total duration'|sed 's/total duration (ms) //'`
           export LPD_VmHWM=`cat LPD.VmHWM`
-          echo "{\"duration_total\":${TOTAL_DURATION},\"duration_avg\":${AVG_DURATION},\"mem_peak\":${LPD_VmHWM}}" > bench.json
+          export LPD_CG_PEAK_KB=$(( $(cat LPD.cg_mem_peak) / 1024 ))
+          echo "{\"duration_total\":${TOTAL_DURATION},\"duration_avg\":${AVG_DURATION},\"mem_peak\":${LPD_VmHWM},\"cg_mem_peak\":${LPD_CG_PEAK_KB}}" > bench.json
           cat bench.json
 
       - name: run hyperfine
@@ -232,3 +271,19 @@ jobs:
 
       - name: format and send json result
         run: /perf-fmt hyperfine ${{ github.sha }} hyperfine.json
+
+  browser-fetch:
+    name: browser fetch
+    needs: zig-build-release
+
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: download artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: lightpanda-build-release
+
+      - run: chmod a+x ./lightpanda
+
+      - run: ./lightpanda fetch https://demo-browser.lightpanda.io/campfire-commerce/

.github/workflows/wpt.yml

@@ -15,11 +15,11 @@ on:
   workflow_dispatch:
 
 jobs:
-  wpt:
-    name: web platform tests json output
+  wpt-build-release:
+    name: zig build release
 
     runs-on: ubuntu-latest
-    timeout-minutes: 90
+    timeout-minutes: 15
 
     steps:
       - uses: actions/checkout@v6
@@ -30,8 +30,85 @@ jobs:
 
       - uses: ./.github/actions/install
 
-      - name: json output
-        run: zig build wpt -- --json > wpt.json
+      - name: zig build release
+        run: zig build -Dprebuilt_v8_path=v8/libc_v8.a -Doptimize=ReleaseFast -Dcpu=x86_64 -Dgit_commit=$(git rev-parse --short ${{ github.sha }})
+
+      - name: upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: lightpanda-build-release
+          path: |
+            zig-out/bin/lightpanda
+          retention-days: 1
+
+  wpt-build-runner:
+    name: build wpt runner
+
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          repository: 'lightpanda-io/demo'
+          fetch-depth: 0
+
+      - run: |
+          cd ./wptrunner
+          CGO_ENABLED=0 go build
+
+      - name: upload artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: wptrunner
+          path: |
+            wptrunner/wptrunner
+          retention-days: 1
+
+  run-wpt:
+    name: web platform tests json output
+    needs:
+      - wpt-build-release
+      - wpt-build-runner
+
+    # use a self host runner.
+    runs-on: lpd-bench-hetzner
+    timeout-minutes: 120
+
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          ref: fork
+          repository: 'lightpanda-io/wpt'
+          fetch-depth: 0
+
+      # The hosts are configured manually on the self host runner.
+      # - name: create custom hosts
+      #   run: ./wpt make-hosts-file | sudo tee -a /etc/hosts
+
+      - name: generate manifest
+        run: ./wpt manifest
+
+      - name: download lightpanda release
+        uses: actions/download-artifact@v4
+        with:
+          name: lightpanda-build-release
+
+      - run: chmod a+x ./lightpanda
+
+      - name: download wptrunner
+        uses: actions/download-artifact@v4
+        with:
+          name: wptrunner
+
+      - run: chmod a+x ./wptrunner
+
+      - name: run test with json output
+        run: |
+          ./wpt serve 2> /dev/null & echo $! > WPT.pid
+          sleep 10s
+          ./wptrunner -lpd-path ./lightpanda -json -concurrency 1 > wpt.json
+          kill `cat WPT.pid`
 
       - name: write commit
         run: |
@@ -48,7 +125,7 @@ jobs:
 
   perf-fmt:
     name: perf-fmt
-    needs: wpt
+    needs: run-wpt
 
     runs-on: ubuntu-latest
     timeout-minutes: 15

.github/workflows/zig-test.yml

@@ -12,8 +12,7 @@ on:
       - main
     paths:
       - "build.zig"
-      - "src/**/*.zig"
-      - "src/*.zig"
+      - "src/**"
       - "vendor/zig-js-runtime"
       - ".github/**"
       - "vendor/**"
@@ -38,51 +37,25 @@ on:
   workflow_dispatch:
 
 jobs:
-  zig-build-dev:
-    name: zig build dev
-
-    # Don't run the CI with draft PR.
-    if: github.event.pull_request.draft == false
+  zig-test-debug:
+    name: zig test using v8 in debug mode
+    timeout-minutes: 15
 
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v4
         with:
           fetch-depth: 0
+          # fetch submodules recusively, to get zig-js-runtime submodules also.
           submodules: recursive
 
       - uses: ./.github/actions/install
-
-      - name: zig build debug
-        run: zig build -Dprebuilt_v8_path=v8/libc_v8.a
-
-      - name: upload artifact
-        uses: actions/upload-artifact@v4
         with:
-          name: lightpanda-build-dev
-          path: |
-            zig-out/bin/lightpanda
-          retention-days: 1
+          debug: true
 
-  browser-fetch:
-    name: browser fetch
-    needs: zig-build-dev
-
-    # Don't run the CI with draft PR.
-    if: github.event.pull_request.draft == false
-
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: download artifact
-        uses: actions/download-artifact@v4
-        with:
-          name: lightpanda-build-dev
-
-      - run: chmod a+x ./lightpanda
-
-      - run: ./lightpanda fetch https://httpbin.io/xhr/get
+      - name: zig build test
+        run: zig build -Dprebuilt_v8_path=v8/libc_v8_debug.a -Dtsan=true test
 
   zig-test:
     name: zig test
@@ -103,7 +76,7 @@ jobs:
       - uses: ./.github/actions/install
 
       - name: zig build test
-        run: zig build  -Dprebuilt_v8_path=v8/libc_v8.a test -- --json > bench.json
+        run: METRICS=true zig build -Dprebuilt_v8_path=v8/libc_v8.a test > bench.json
 
       - name: write commit
         run: |

.gitignore

@@ -1,11 +1,6 @@
-zig-cache
 /.zig-cache/
 /.lp-cache/
 zig-out
-/vendor/netsurf/out
-/vendor/libiconv/
 lightpanda.id
-/v8/
-/build/
 /src/html5ever/target/
 src/snapshot.bin

.gitmodules

@@ -1,15 +0,0 @@
-[submodule "tests/wpt"]
-	path = tests/wpt
-	url = https://github.com/lightpanda-io/wpt
-[submodule "vendor/nghttp2"]
-	path = vendor/nghttp2
-	url = https://github.com/nghttp2/nghttp2.git
-[submodule "vendor/zlib"]
-	path = vendor/zlib
-	url = https://github.com/madler/zlib.git
-[submodule "vendor/curl"]
-	path = vendor/curl
-	url = https://github.com/curl/curl.git
-[submodule "vendor/brotli"]
-	path = vendor/brotli
-	url = https://github.com/google/brotli

Dockerfile

@@ -3,11 +3,12 @@ FROM debian:stable-slim
 ARG MINISIG=0.12
 ARG ZIG_MINISIG=RWSGOq2NVecA2UPNdBUZykf1CCb147pkmdtYxgb3Ti+JO/wCYvhbAb/U
 ARG V8=14.0.365.4
-ARG ZIG_V8=v0.2.2
+ARG ZIG_V8=v0.3.1
 ARG TARGETPLATFORM
 
 RUN apt-get update -yq && \
     apt-get install -yq xz-utils ca-certificates \
+        pkg-config libglib2.0-dev \
         clang make curl git
 
 # Get Rust

Makefile

@@ -47,7 +47,7 @@ help:
 
 # $(ZIG) commands
 # ------------
-.PHONY: build build-v8-snapshot build-dev run run-release shell test bench wpt data end2end
+.PHONY: build build-v8-snapshot build-dev run run-release shell test bench data end2end
 
 ## Build v8 snapshot
 build-v8-snapshot:
@@ -57,7 +57,7 @@ build-v8-snapshot:
 
 ## Build in release-fast mode
 build: build-v8-snapshot
-	@printf "\033[36mBuilding (release safe)...\033[0m\n"
+	@printf "\033[36mBuilding (release fast)...\033[0m\n"
 	@$(ZIG) build -Doptimize=ReleaseFast -Dsnapshot_path=../../snapshot.bin -Dgit_commit=$$(git rev-parse --short HEAD) || (printf "\033[33mBuild ERROR\033[0m\n"; exit 1;)
 	@printf "\033[33mBuild OK\033[0m\n"
 
@@ -82,15 +82,6 @@ shell:
 	@printf "\033[36mBuilding shell...\033[0m\n"
 	@$(ZIG) build shell || (printf "\033[33mBuild ERROR\033[0m\n"; exit 1;)
 
-## Run WPT tests
-wpt:
-	@printf "\033[36mBuilding wpt...\033[0m\n"
-	@$(ZIG) build wpt -- $(filter-out $@,$(MAKECMDGOALS)) || (printf "\033[33mBuild ERROR\033[0m\n"; exit 1;)
-
-wpt-summary:
-	@printf "\033[36mBuilding wpt...\033[0m\n"
-	@$(ZIG) build wpt -- --summary $(filter-out $@,$(MAKECMDGOALS)) || (printf "\033[33mBuild ERROR\033[0m\n"; exit 1;)
-
 ## Test - `grep` is used to filter out the huge compile command on build
 ifeq ($(OS), macos)
 test:
@@ -111,13 +102,8 @@ end2end:
 # ------------
 .PHONY: install
 
-## Install and build dependencies for release
-install: install-submodule
+install: build
 
 data:
 	cd src/data && go run public_suffix_list_gen.go > public_suffix_list.zig
 
-## Init and update git submodule
-install-submodule:
-	@git submodule init && \
-	git submodule update

README.md

@@ -78,23 +78,49 @@ docker run -d --name lightpanda -p 9222:9222 lightpanda/browser:nightly
 ### Dump a URL
 
 ```console
-./lightpanda fetch --dump https://lightpanda.io
+./lightpanda fetch --obey_robots --log_format pretty  --log_level info https://demo-browser.lightpanda.io/campfire-commerce/
 ```
 ```console
-info(browser): GET https://lightpanda.io/ http.Status.ok
-info(browser): fetch script https://api.website.lightpanda.io/js/script.js: http.Status.ok
-info(browser): eval remote https://api.website.lightpanda.io/js/script.js: TypeError: Cannot read properties of undefined (reading 'pushState')
+INFO  telemetry : telemetry status . . . . . . . . . . . . .  [+0ms]
+      disabled = false
+
+INFO  page : navigate . . . . . . . . . . . . . . . . . . . . [+6ms]
+      url = https://demo-browser.lightpanda.io/campfire-commerce/
+      method = GET
+      reason = address_bar
+      body = false
+      req_id = 1
+
+INFO  browser : executing script . . . . . . . . . . . . . .  [+118ms]
+      src = https://demo-browser.lightpanda.io/campfire-commerce/script.js
+      kind = javascript
+      cacheable = true
+
+INFO  http : request complete . . . . . . . . . . . . . . . . [+140ms]
+      source = xhr
+      url = https://demo-browser.lightpanda.io/campfire-commerce/json/product.json
+      status = 200
+      len = 4770
+
+INFO  http : request complete . . . . . . . . . . . . . . . . [+141ms]
+      source = fetch
+      url = https://demo-browser.lightpanda.io/campfire-commerce/json/reviews.json
+      status = 200
+      len = 1615
 <!DOCTYPE html>
 ```
 
 ### Start a CDP server
 
 ```console
-./lightpanda serve --host 127.0.0.1 --port 9222
+./lightpanda serve --obey_robots --log_format pretty  --log_level info --host 127.0.0.1 --port 9222
 ```
 ```console
-info(websocket): starting blocking worker to listen on 127.0.0.1:9222
-info(server): accepting new conn...
+INFO  telemetry : telemetry status . . . . . . . . . . . . .  [+0ms]
+      disabled = false
+
+INFO  app : server running . . . . . . . . . . . . . . . . .  [+0ms]
+      address = 127.0.0.1:9222
 ```
 
 Once the CDP server started, you can run a Puppeteer script by configuring the
@@ -115,7 +141,7 @@ const context = await browser.createBrowserContext();
 const page = await context.newPage();
 
 // Dump all the links from the page.
-await page.goto('https://wikipedia.com/');
+await page.goto('https://demo-browser.lightpanda.io/amiibo/', {waitUntil: "networkidle0"});
 
 const links = await page.evaluate(() => {
   return Array.from(document.querySelectorAll('a')).map(row => {
@@ -156,6 +182,7 @@ Here are the key features we have implemented:
 - [x] Custom HTTP headers
 - [x] Proxy support
 - [x] Network interception
+- [x] Respect `robots.txt` with option `--obey_robots`
 
 NOTE: There are hundreds of Web APIs. Developing a browser (even just for headless mode) is a huge task. Coverage will increase over time.
 
@@ -178,6 +205,7 @@ For **Debian/Ubuntu based Linux**:
 
 ```
 sudo apt install xz-utils ca-certificates \
+    pkg-config libglib2.0-dev \
     clang make curl git
 ```
 You also need to [install Rust](https://rust-lang.org/tools/install/).
@@ -192,18 +220,6 @@ For **MacOS**, you need cmake and [Rust](https://rust-lang.org/tools/install/).
 brew install cmake
 ```
 
-### Install Git submodules
-
-The project uses git submodules for dependencies.
-
-To init or update the submodules in the `vendor/` directory:
-
-```
-make install-submodule
-```
-
-This is an alias for `git submodule init && git submodule update`.
-
 ### Build and run
 
 You an build the entire browser with `make build` or `make build-dev` for debug
@@ -253,35 +269,75 @@ make end2end
 Lightpanda is tested against the standardized [Web Platform
 Tests](https://web-platform-tests.org/).
 
-The relevant tests cases are committed in a [dedicated repository](https://github.com/lightpanda-io/wpt) which is fetched by the `make install-submodule` command.
-
-All the tests cases executed are located in the `tests/wpt` sub-directory.
+We use [a fork](https://github.com/lightpanda-io/wpt/tree/fork) including a custom
+[`testharnessreport.js`](https://github.com/lightpanda-io/wpt/commit/01a3115c076a3ad0c84849dbbf77a6e3d199c56f).
 
 For reference, you can easily execute a WPT test case with your browser via
 [wpt.live](https://wpt.live).
 
+#### Configure WPT HTTP server
+
+To run the test, you must clone the repository, configure the custom hosts and generate the
+`MANIFEST.json` file.
+
+Clone the repository with the `fork` branch.
+```
+git clone -b fork --depth=1 git@github.com:lightpanda-io/wpt.git
+```
+
+Enter into the `wpt/` dir.
+
+Install custom domains in your `/etc/hosts`
+```
+./wpt make-hosts-file | sudo tee -a /etc/hosts
+```
+
+Generate `MANIFEST.json`
+```
+./wpt manifest
+```
+Use the [WPT's setup
+guide](https://web-platform-tests.org/running-tests/from-local-system.html) for
+details.
+
 #### Run WPT test suite
 
-To run all the tests:
+An external [Go](https://go.dev) runner is provided by
+[github.com/lightpanda-io/demo/](https://github.com/lightpanda-io/demo/)
+repository, located into `wptrunner/` dir.
+You need to clone the project first.
+
+First start the WPT's HTTP server from your `wpt/` clone dir.
+```
+./wpt serve
+```
+
+Run a Lightpanda browser
 
 ```
-make wpt
+zig build run -- --insecure_disable_tls_host_verification
+```
+
+Then you can start the wptrunner from the Demo's clone dir:
+```
+cd wptrunner && go run .
 ```
 
 Or one specific test:
 
 ```
-make wpt Node-childNodes.html
+cd wptrunner && go run . Node-childNodes.html
 ```
 
-#### Add a new WPT test case
+`wptrunner` command accepts `--summary` and `--json` options modifying output.
+Also `--concurrency` define the concurrency limit.
 
-We add new relevant tests cases files when we implemented changes in Lightpanda.
+:warning: Running the whole test suite will take a long time. In this case,
+it's useful to build in `releaseFast` mode to make tests faster.
 
-To add a new test, copy the file you want from the [WPT
-repo](https://github.com/web-platform-tests/wpt) into the `tests/wpt` directory.
-
-:warning: Please keep the original directory tree structure of `tests/wpt`.
+```
+zig build -Doptimize=ReleaseFast run
+```
 
 ## Contributing
 

build.zig.zon

@@ -1,18 +1,36 @@
 .{
     .name = .browser,
-    .paths = .{""},
     .version = "0.0.0",
     .fingerprint = 0xda130f3af836cea0, // Changing this has security and trust implications.
     .minimum_zig_version = "0.15.2",
     .dependencies = .{
         .v8 = .{
-            .url = "https://github.com/lightpanda-io/zig-v8-fork/archive/d6b5f89cfc7feece29359e8c848bb916e8ecfab6.tar.gz",
-            .hash = "v8-0.0.0-xddH6_0gBABrJc5cL6-P2wGvvweTTCgWdpmClr9r-C-s",
+            .url = "https://github.com/lightpanda-io/zig-v8-fork/archive/refs/tags/v0.3.1.tar.gz",
+            .hash = "v8-0.0.0-xddH64J7BAC81mkf6G9RbEJxS-W3TIRl5iFnShwbqCqy",
+
         },
         //.v8 = .{ .path = "../zig-v8-fork" },
+        .brotli = .{
+            // v1.2.0
+            .url = "https://github.com/google/brotli/archive/028fb5a23661f123017c060daa546b55cf4bde29.tar.gz",
+            .hash = "N-V-__8AAJudKgCQCuIiH6MJjAiIJHfg_tT_Ew-0vZwVkCo_",
+        },
+        .zlib = .{
+            .url = "https://github.com/madler/zlib/releases/download/v1.3.2/zlib-1.3.2.tar.gz",
+            .hash = "N-V-__8AAJ2cNgAgfBtAw33Bxfu1IWISDeKKSr3DAqoAysIJ",
+        },
+        .nghttp2 = .{
+            .url = "https://github.com/nghttp2/nghttp2/releases/download/v1.68.0/nghttp2-1.68.0.tar.gz",
+            .hash = "N-V-__8AAL15vQCI63ZL6Zaz5hJg6JTEgYXGbLnMFSnf7FT3",
+        },
         .@"boringssl-zig" = .{
             .url = "git+https://github.com/Syndica/boringssl-zig.git#c53df00d06b02b755ad88bbf4d1202ed9687b096",
             .hash = "boringssl-0.1.0-VtJeWehMAAA4RNnwRnzEvKcS9rjsR1QVRw1uJrwXxmVK",
         },
+        .curl = .{
+            .url = "https://github.com/curl/curl/releases/download/curl-8_18_0/curl-8.18.0.tar.gz",
+            .hash = "N-V-__8AALp9QAGn6CCHZ6fK_FfMyGtG824LSHYHHasM3w-y",
+        },
     },
+    .paths = .{""},
 }

flake.lock

@@ -8,11 +8,11 @@
         "rust-analyzer-src": "rust-analyzer-src"
       },
       "locked": {
-        "lastModified": 1763016383,
-        "narHash": "sha256-eYmo7FNvm3q08iROzwIi8i9dWuUbJJl3uLR3OLnSmdI=",
+        "lastModified": 1770708269,
+        "narHash": "sha256-OnZW86app7hHJJoB5lC9GNXY5QBBIESJB+sIdwEyld0=",
         "owner": "nix-community",
         "repo": "fenix",
-        "rev": "0fad5c0e5c531358e7174cd666af4608f08bc3ba",
+        "rev": "6b5325a017a9a9fe7e6252ccac3680cc7181cd63",
         "type": "github"
       },
       "original": {
@@ -96,11 +96,11 @@
     },
     "nixpkgs": {
       "locked": {
-        "lastModified": 1763043403,
-        "narHash": "sha256-DgCTbHdIpzbXSlQlOZEWj8oPt2lrRMlSk03oIstvkVQ=",
+        "lastModified": 1768649915,
+        "narHash": "sha256-jc21hKogFnxU7KXSVTRmxC7u5D4RHwm9BAvDf5/Z1Uo=",
         "owner": "nixos",
         "repo": "nixpkgs",
-        "rev": "75e04ecd084f93d4105ce68c07dac7656291fe2e",
+        "rev": "3e3f3c7f9977dc123c23ee21e8085ed63daf8c37",
         "type": "github"
       },
       "original": {
@@ -122,11 +122,11 @@
     "rust-analyzer-src": {
       "flake": false,
       "locked": {
-        "lastModified": 1762860488,
-        "narHash": "sha256-rMfWMCOo/pPefM2We0iMBLi2kLBAnYoB9thi4qS7uk4=",
+        "lastModified": 1770668050,
+        "narHash": "sha256-Q05yaIZtQrBKHpyWaPmyJmDRj0lojnVf8nUFE0vydcY=",
         "owner": "rust-lang",
         "repo": "rust-analyzer",
-        "rev": "2efc80078029894eec0699f62ec8d5c1a56af763",
+        "rev": "9efc1f709f3c8134c3acac5d3592a8e4c184a0c6",
         "type": "github"
       },
       "original": {
@@ -175,11 +175,11 @@
         ]
       },
       "locked": {
-        "lastModified": 1762907712,
-        "narHash": "sha256-VNW/+VYIg6N4b9Iq+F0YZmm22n74IdFS7hsPLblWuOY=",
+        "lastModified": 1770598090,
+        "narHash": "sha256-k+82IDgTd9o5sxHIqGlvfwseKln3Ejx1edGtDltuPXo=",
         "owner": "mitchellh",
         "repo": "zig-overlay",
-        "rev": "d16453ee78765e49527c56d23386cead799b6b53",
+        "rev": "142495696982c88edddc8e17e4da90d8164acadf",
         "type": "github"
       },
       "original": {

src/App.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -21,80 +21,53 @@ const std = @import("std");
 const Allocator = std.mem.Allocator;
 
 const log = @import("log.zig");
-const Http = @import("http/Http.zig");
+const Config = @import("Config.zig");
 const Snapshot = @import("browser/js/Snapshot.zig");
 const Platform = @import("browser/js/Platform.zig");
-
-const Notification = @import("Notification.zig");
 const Telemetry = @import("telemetry/telemetry.zig").Telemetry;
+const RobotStore = @import("browser/Robots.zig").RobotStore;
+
+pub const Http = @import("http/Http.zig");
+pub const ArenaPool = @import("ArenaPool.zig");
 
-// Container for global state / objects that various parts of the system
-// might need.
 const App = @This();
 
 http: Http,
-config: Config,
+config: *const Config,
 platform: Platform,
 snapshot: Snapshot,
 telemetry: Telemetry,
 allocator: Allocator,
+arena_pool: ArenaPool,
+robots: RobotStore,
 app_dir_path: ?[]const u8,
-notification: *Notification,
 shutdown: bool = false,
 
-pub const RunMode = enum {
-    help,
-    fetch,
-    serve,
-    version,
-};
-
-pub const Config = struct {
-    run_mode: RunMode,
-    tls_verify_host: bool = true,
-    http_proxy: ?[:0]const u8 = null,
-    proxy_bearer_token: ?[:0]const u8 = null,
-    http_timeout_ms: ?u31 = null,
-    http_connect_timeout_ms: ?u31 = null,
-    http_max_host_open: ?u8 = null,
-    http_max_concurrent: ?u8 = null,
-    user_agent: [:0]const u8,
-};
-
-pub fn init(allocator: Allocator, config: Config) !*App {
+pub fn init(allocator: Allocator, config: *const Config) !*App {
     const app = try allocator.create(App);
     errdefer allocator.destroy(app);
 
     app.config = config;
     app.allocator = allocator;
 
-    app.notification = try Notification.init(allocator, null);
-    errdefer app.notification.deinit();
+    app.robots = RobotStore.init(allocator);
 
-    app.http = try Http.init(allocator, .{
-        .max_host_open = config.http_max_host_open orelse 4,
-        .max_concurrent = config.http_max_concurrent orelse 10,
-        .timeout_ms = config.http_timeout_ms orelse 5000,
-        .connect_timeout_ms = config.http_connect_timeout_ms orelse 0,
-        .http_proxy = config.http_proxy,
-        .tls_verify_host = config.tls_verify_host,
-        .proxy_bearer_token = config.proxy_bearer_token,
-        .user_agent = config.user_agent,
-    });
+    app.http = try Http.init(allocator, &app.robots, config);
     errdefer app.http.deinit();
 
     app.platform = try Platform.init();
     errdefer app.platform.deinit();
 
-    app.snapshot = try Snapshot.load(allocator);
-    errdefer app.snapshot.deinit(allocator);
+    app.snapshot = try Snapshot.load();
+    errdefer app.snapshot.deinit();
 
     app.app_dir_path = getAndMakeAppDir(allocator);
 
-    app.telemetry = try Telemetry.init(app, config.run_mode);
+    app.telemetry = try Telemetry.init(app, config.mode);
     errdefer app.telemetry.deinit();
 
-    try app.telemetry.register(app.notification);
+    app.arena_pool = ArenaPool.init(allocator, 512, 1024 * 16);
+    errdefer app.arena_pool.deinit();
 
     return app;
 }
@@ -110,10 +83,11 @@ pub fn deinit(self: *App) void {
         self.app_dir_path = null;
     }
     self.telemetry.deinit();
-    self.notification.deinit();
+    self.robots.deinit();
     self.http.deinit();
-    self.snapshot.deinit(allocator);
+    self.snapshot.deinit();
     self.platform.deinit();
+    self.arena_pool.deinit();
 
     allocator.destroy(self);
 }

src/ArenaPool.zig

@@ -0,0 +1,212 @@
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+
+const Allocator = std.mem.Allocator;
+const ArenaAllocator = std.heap.ArenaAllocator;
+
+const ArenaPool = @This();
+
+allocator: Allocator,
+retain_bytes: usize,
+free_list_len: u16 = 0,
+free_list: ?*Entry = null,
+free_list_max: u16,
+entry_pool: std.heap.MemoryPool(Entry),
+mutex: std.Thread.Mutex = .{},
+
+const Entry = struct {
+    next: ?*Entry,
+    arena: ArenaAllocator,
+};
+
+pub fn init(allocator: Allocator, free_list_max: u16, retain_bytes: usize) ArenaPool {
+    return .{
+        .allocator = allocator,
+        .free_list_max = free_list_max,
+        .retain_bytes = retain_bytes,
+        .entry_pool = .init(allocator),
+    };
+}
+
+pub fn deinit(self: *ArenaPool) void {
+    var entry = self.free_list;
+    while (entry) |e| {
+        entry = e.next;
+        e.arena.deinit();
+    }
+    self.entry_pool.deinit();
+}
+
+pub fn acquire(self: *ArenaPool) !Allocator {
+    self.mutex.lock();
+    defer self.mutex.unlock();
+
+    if (self.free_list) |entry| {
+        self.free_list = entry.next;
+        self.free_list_len -= 1;
+        return entry.arena.allocator();
+    }
+
+    const entry = try self.entry_pool.create();
+    entry.* = .{
+        .next = null,
+        .arena = ArenaAllocator.init(self.allocator),
+    };
+
+    return entry.arena.allocator();
+}
+
+pub fn release(self: *ArenaPool, allocator: Allocator) void {
+    const arena: *std.heap.ArenaAllocator = @ptrCast(@alignCast(allocator.ptr));
+    const entry: *Entry = @fieldParentPtr("arena", arena);
+
+    // Reset the arena before acquiring the lock to minimize lock hold time
+    _ = arena.reset(.{ .retain_with_limit = self.retain_bytes });
+
+    self.mutex.lock();
+    defer self.mutex.unlock();
+
+    const free_list_len = self.free_list_len;
+    if (free_list_len == self.free_list_max) {
+        arena.deinit();
+        self.entry_pool.destroy(entry);
+        return;
+    }
+
+    entry.next = self.free_list;
+    self.free_list_len = free_list_len + 1;
+    self.free_list = entry;
+}
+
+pub fn reset(_: *const ArenaPool, allocator: Allocator, retain: usize) void {
+    const arena: *std.heap.ArenaAllocator = @ptrCast(@alignCast(allocator.ptr));
+    _ = arena.reset(.{ .retain_with_limit = retain });
+}
+
+const testing = std.testing;
+
+test "arena pool - basic acquire and use" {
+    var pool = ArenaPool.init(testing.allocator, 512, 1024 * 16);
+    defer pool.deinit();
+
+    const alloc = try pool.acquire();
+    const buf = try alloc.alloc(u8, 64);
+    @memset(buf, 0xAB);
+    try testing.expectEqual(@as(u8, 0xAB), buf[0]);
+
+    pool.release(alloc);
+}
+
+test "arena pool - reuse entry after release" {
+    var pool = ArenaPool.init(testing.allocator, 512, 1024 * 16);
+    defer pool.deinit();
+
+    const alloc1 = try pool.acquire();
+    try testing.expectEqual(@as(u16, 0), pool.free_list_len);
+
+    pool.release(alloc1);
+    try testing.expectEqual(@as(u16, 1), pool.free_list_len);
+
+    // The same entry should be returned from the free list.
+    const alloc2 = try pool.acquire();
+    try testing.expectEqual(@as(u16, 0), pool.free_list_len);
+    try testing.expectEqual(alloc1.ptr, alloc2.ptr);
+
+    pool.release(alloc2);
+}
+
+test "arena pool - multiple concurrent arenas" {
+    var pool = ArenaPool.init(testing.allocator, 512, 1024 * 16);
+    defer pool.deinit();
+
+    const a1 = try pool.acquire();
+    const a2 = try pool.acquire();
+    const a3 = try pool.acquire();
+
+    // All three must be distinct arenas.
+    try testing.expect(a1.ptr != a2.ptr);
+    try testing.expect(a2.ptr != a3.ptr);
+    try testing.expect(a1.ptr != a3.ptr);
+
+    _ = try a1.alloc(u8, 16);
+    _ = try a2.alloc(u8, 32);
+    _ = try a3.alloc(u8, 48);
+
+    pool.release(a1);
+    pool.release(a2);
+    pool.release(a3);
+
+    try testing.expectEqual(@as(u16, 3), pool.free_list_len);
+}
+
+test "arena pool - free list respects max limit" {
+    // Cap the free list at 1 so the second release discards its arena.
+    var pool = ArenaPool.init(testing.allocator, 1, 1024 * 16);
+    defer pool.deinit();
+
+    const a1 = try pool.acquire();
+    const a2 = try pool.acquire();
+
+    pool.release(a1);
+    try testing.expectEqual(@as(u16, 1), pool.free_list_len);
+
+    // The free list is full; a2's arena should be destroyed, not queued.
+    pool.release(a2);
+    try testing.expectEqual(@as(u16, 1), pool.free_list_len);
+}
+
+test "arena pool - reset clears memory without releasing" {
+    var pool = ArenaPool.init(testing.allocator, 512, 1024 * 16);
+    defer pool.deinit();
+
+    const alloc = try pool.acquire();
+
+    const buf = try alloc.alloc(u8, 128);
+    @memset(buf, 0xFF);
+
+    // reset() frees arena memory but keeps the allocator in-flight.
+    pool.reset(alloc, 0);
+
+    // The free list must stay empty; the allocator was not released.
+    try testing.expectEqual(@as(u16, 0), pool.free_list_len);
+
+    // Allocating again through the same arena must still work.
+    const buf2 = try alloc.alloc(u8, 64);
+    @memset(buf2, 0x00);
+    try testing.expectEqual(@as(u8, 0x00), buf2[0]);
+
+    pool.release(alloc);
+}
+
+test "arena pool - deinit with entries in free list" {
+    // Verifies that deinit properly cleans up free-listed arenas (no leaks
+    // detected by the test allocator).
+    var pool = ArenaPool.init(testing.allocator, 512, 1024 * 16);
+
+    const a1 = try pool.acquire();
+    const a2 = try pool.acquire();
+    _ = try a1.alloc(u8, 256);
+    _ = try a2.alloc(u8, 512);
+    pool.release(a1);
+    pool.release(a2);
+    try testing.expectEqual(@as(u16, 2), pool.free_list_len);
+
+    pool.deinit();
+}

src/Config.zig

@@ -0,0 +1,849 @@
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+const builtin = @import("builtin");
+const Allocator = std.mem.Allocator;
+
+const log = @import("log.zig");
+const dump = @import("browser/dump.zig");
+
+pub const RunMode = enum {
+    help,
+    fetch,
+    serve,
+    version,
+    mcp,
+};
+
+pub const CDP_MAX_HTTP_REQUEST_SIZE = 4096;
+
+// max message size
+// +14 for max websocket payload overhead
+// +140 for the max control packet that might be interleaved in a message
+pub const CDP_MAX_MESSAGE_SIZE = 512 * 1024 + 14 + 140;
+
+mode: Mode,
+exec_name: []const u8,
+http_headers: HttpHeaders,
+
+const Config = @This();
+
+pub fn init(allocator: Allocator, exec_name: []const u8, mode: Mode) !Config {
+    var config = Config{
+        .mode = mode,
+        .exec_name = exec_name,
+        .http_headers = undefined,
+    };
+    config.http_headers = try HttpHeaders.init(allocator, &config);
+    return config;
+}
+
+pub fn deinit(self: *const Config, allocator: Allocator) void {
+    self.http_headers.deinit(allocator);
+}
+
+pub fn tlsVerifyHost(self: *const Config) bool {
+    return switch (self.mode) {
+        inline .serve, .fetch, .mcp => |opts| opts.common.tls_verify_host,
+        else => unreachable,
+    };
+}
+
+pub fn obeyRobots(self: *const Config) bool {
+    return switch (self.mode) {
+        inline .serve, .fetch, .mcp => |opts| opts.common.obey_robots,
+        else => unreachable,
+    };
+}
+
+pub fn httpProxy(self: *const Config) ?[:0]const u8 {
+    return switch (self.mode) {
+        inline .serve, .fetch, .mcp => |opts| opts.common.http_proxy,
+        else => unreachable,
+    };
+}
+
+pub fn proxyBearerToken(self: *const Config) ?[:0]const u8 {
+    return switch (self.mode) {
+        inline .serve, .fetch, .mcp => |opts| opts.common.proxy_bearer_token,
+        .help, .version => null,
+    };
+}
+
+pub fn httpMaxConcurrent(self: *const Config) u8 {
+    return switch (self.mode) {
+        inline .serve, .fetch, .mcp => |opts| opts.common.http_max_concurrent orelse 10,
+        else => unreachable,
+    };
+}
+
+pub fn httpMaxHostOpen(self: *const Config) u8 {
+    return switch (self.mode) {
+        inline .serve, .fetch, .mcp => |opts| opts.common.http_max_host_open orelse 4,
+        else => unreachable,
+    };
+}
+
+pub fn httpConnectTimeout(self: *const Config) u31 {
+    return switch (self.mode) {
+        inline .serve, .fetch, .mcp => |opts| opts.common.http_connect_timeout orelse 0,
+        else => unreachable,
+    };
+}
+
+pub fn httpTimeout(self: *const Config) u31 {
+    return switch (self.mode) {
+        inline .serve, .fetch, .mcp => |opts| opts.common.http_timeout orelse 5000,
+        else => unreachable,
+    };
+}
+
+pub fn httpMaxRedirects(_: *const Config) u8 {
+    return 10;
+}
+
+pub fn httpMaxResponseSize(self: *const Config) ?usize {
+    return switch (self.mode) {
+        inline .serve, .fetch, .mcp => |opts| opts.common.http_max_response_size,
+        else => unreachable,
+    };
+}
+
+pub fn logLevel(self: *const Config) ?log.Level {
+    return switch (self.mode) {
+        inline .serve, .fetch, .mcp => |opts| opts.common.log_level,
+        else => unreachable,
+    };
+}
+
+pub fn logFormat(self: *const Config) ?log.Format {
+    return switch (self.mode) {
+        inline .serve, .fetch, .mcp => |opts| opts.common.log_format,
+        else => unreachable,
+    };
+}
+
+pub fn logFilterScopes(self: *const Config) ?[]const log.Scope {
+    return switch (self.mode) {
+        inline .serve, .fetch, .mcp => |opts| opts.common.log_filter_scopes,
+        else => unreachable,
+    };
+}
+
+pub fn userAgentSuffix(self: *const Config) ?[]const u8 {
+    return switch (self.mode) {
+        inline .serve, .fetch, .mcp => |opts| opts.common.user_agent_suffix,
+        .help, .version => null,
+    };
+}
+
+pub fn maxConnections(self: *const Config) u16 {
+    return switch (self.mode) {
+        .serve => |opts| opts.cdp_max_connections,
+        else => unreachable,
+    };
+}
+
+pub fn maxPendingConnections(self: *const Config) u31 {
+    return switch (self.mode) {
+        .serve => |opts| opts.cdp_max_pending_connections,
+        else => unreachable,
+    };
+}
+
+pub const Mode = union(RunMode) {
+    help: bool, // false when being printed because of an error
+    fetch: Fetch,
+    serve: Serve,
+    version: void,
+    mcp: Mcp,
+};
+
+pub const Serve = struct {
+    host: []const u8 = "127.0.0.1",
+    port: u16 = 9222,
+    timeout: u31 = 10,
+    cdp_max_connections: u16 = 16,
+    cdp_max_pending_connections: u16 = 128,
+    common: Common = .{},
+};
+
+pub const Mcp = struct {
+    common: Common = .{},
+};
+
+pub const DumpFormat = enum {
+    html,
+    markdown,
+    wpt,
+};
+
+pub const Fetch = struct {
+    url: [:0]const u8,
+    dump_mode: ?DumpFormat = null,
+    common: Common = .{},
+    with_base: bool = false,
+    with_frames: bool = false,
+    strip: dump.Opts.Strip = .{},
+};
+
+pub const Common = struct {
+    obey_robots: bool = false,
+    proxy_bearer_token: ?[:0]const u8 = null,
+    http_proxy: ?[:0]const u8 = null,
+    http_max_concurrent: ?u8 = null,
+    http_max_host_open: ?u8 = null,
+    http_timeout: ?u31 = null,
+    http_connect_timeout: ?u31 = null,
+    http_max_response_size: ?usize = null,
+    tls_verify_host: bool = true,
+    log_level: ?log.Level = null,
+    log_format: ?log.Format = null,
+    log_filter_scopes: ?[]log.Scope = null,
+    user_agent_suffix: ?[]const u8 = null,
+};
+
+/// Pre-formatted HTTP headers for reuse across Http and Client.
+/// Must be initialized with an allocator that outlives all HTTP connections.
+pub const HttpHeaders = struct {
+    const user_agent_base: [:0]const u8 = "Lightpanda/1.0";
+
+    user_agent: [:0]const u8, // User agent value (e.g. "Lightpanda/1.0")
+    user_agent_header: [:0]const u8,
+
+    proxy_bearer_header: ?[:0]const u8,
+
+    pub fn init(allocator: Allocator, config: *const Config) !HttpHeaders {
+        const user_agent: [:0]const u8 = if (config.userAgentSuffix()) |suffix|
+            try std.fmt.allocPrintSentinel(allocator, "{s} {s}", .{ user_agent_base, suffix }, 0)
+        else
+            user_agent_base;
+        errdefer if (config.userAgentSuffix() != null) allocator.free(user_agent);
+
+        const user_agent_header = try std.fmt.allocPrintSentinel(allocator, "User-Agent: {s}", .{user_agent}, 0);
+        errdefer allocator.free(user_agent_header);
+
+        const proxy_bearer_header: ?[:0]const u8 = if (config.proxyBearerToken()) |token|
+            try std.fmt.allocPrintSentinel(allocator, "Proxy-Authorization: Bearer {s}", .{token}, 0)
+        else
+            null;
+
+        return .{
+            .user_agent = user_agent,
+            .user_agent_header = user_agent_header,
+            .proxy_bearer_header = proxy_bearer_header,
+        };
+    }
+
+    pub fn deinit(self: *const HttpHeaders, allocator: Allocator) void {
+        if (self.proxy_bearer_header) |hdr| {
+            allocator.free(hdr);
+        }
+        allocator.free(self.user_agent_header);
+        if (self.user_agent.ptr != user_agent_base.ptr) {
+            allocator.free(self.user_agent);
+        }
+    }
+};
+
+pub fn printUsageAndExit(self: *const Config, success: bool) void {
+    //                                                                     MAX_HELP_LEN|
+    const common_options =
+        \\
+        \\--insecure_disable_tls_host_verification
+        \\                Disables host verification on all HTTP requests. This is an
+        \\                advanced option which should only be set if you understand
+        \\                and accept the risk of disabling host verification.
+        \\
+        \\--obey_robots
+        \\                Fetches and obeys the robots.txt (if available) of the web pages
+        \\                we make requests towards.
+        \\                Defaults to false.
+        \\
+        \\--http_proxy    The HTTP proxy to use for all HTTP requests.
+        \\                A username:password can be included for basic authentication.
+        \\                Defaults to none.
+        \\
+        \\--proxy_bearer_token
+        \\                The <token> to send for bearer authentication with the proxy
+        \\                Proxy-Authorization: Bearer <token>
+        \\
+        \\--http_max_concurrent
+        \\                The maximum number of concurrent HTTP requests.
+        \\                Defaults to 10.
+        \\
+        \\--http_max_host_open
+        \\                The maximum number of open connection to a given host:port.
+        \\                Defaults to 4.
+        \\
+        \\--http_connect_timeout
+        \\                The time, in milliseconds, for establishing an HTTP connection
+        \\                before timing out. 0 means it never times out.
+        \\                Defaults to 0.
+        \\
+        \\--http_timeout
+        \\                The maximum time, in milliseconds, the transfer is allowed
+        \\                to complete. 0 means it never times out.
+        \\                Defaults to 10000.
+        \\
+        \\--http_max_response_size
+        \\                Limits the acceptable response size for any request
+        \\                (e.g. XHR, fetch, script loading, ...).
+        \\                Defaults to no limit.
+        \\
+        \\--log_level     The log level: debug, info, warn, error or fatal.
+        \\                Defaults to
+    ++ (if (builtin.mode == .Debug) " info." else "warn.") ++
+        \\
+        \\
+        \\--log_format    The log format: pretty or logfmt.
+        \\                Defaults to
+    ++ (if (builtin.mode == .Debug) " pretty." else " logfmt.") ++
+        \\
+        \\
+        \\--log_filter_scopes
+        \\                Filter out too verbose logs per scope:
+        \\                http, unknown_prop, event, ...
+        \\
+        \\--user_agent_suffix
+        \\                Suffix to append to the Lightpanda/X.Y User-Agent
+        \\
+    ;
+
+    //                                                                     MAX_HELP_LEN|
+    const usage =
+        \\usage: {s} command [options] [URL]
+        \\
+        \\Command can be either 'fetch', 'serve', 'mcp' or 'help'
+        \\
+        \\fetch command
+        \\Fetches the specified URL
+        \\Example: {s} fetch --dump html https://lightpanda.io/
+        \\
+        \\Options:
+        \\--dump          Dumps document to stdout.
+        \\                Argument must be 'html' or 'markdown'.
+        \\                Defaults to no dump.
+        \\
+        \\--strip_mode    Comma separated list of tag groups to remove from dump
+        \\                the dump. e.g. --strip_mode js,css
+        \\                  - "js" script and link[as=script, rel=preload]
+        \\                  - "ui" includes img, picture, video, css and svg
+        \\                  - "css" includes style and link[rel=stylesheet]
+        \\                  - "full" includes js, ui and css
+        \\
+        \\--with_base     Add a <base> tag in dump. Defaults to false.
+        \\
+        \\--with_frames   Includes the contents of iframes. Defaults to false.
+        \\
+    ++ common_options ++
+        \\
+        \\serve command
+        \\Starts a websocket CDP server
+        \\Example: {s} serve --host 127.0.0.1 --port 9222
+        \\
+        \\Options:
+        \\--host          Host of the CDP server
+        \\                Defaults to "127.0.0.1"
+        \\
+        \\--port          Port of the CDP server
+        \\                Defaults to 9222
+        \\
+        \\--timeout       Inactivity timeout in seconds before disconnecting clients
+        \\                Defaults to 10 (seconds). Limited to 604800 (1 week).
+        \\
+        \\--cdp_max_connections
+        \\                Maximum number of simultaneous CDP connections.
+        \\                Defaults to 16.
+        \\
+        \\--cdp_max_pending_connections
+        \\                Maximum pending connections in the accept queue.
+        \\                Defaults to 128.
+        \\
+    ++ common_options ++
+        \\
+        \\mcp command
+        \\Starts an MCP (Model Context Protocol) server over stdio
+        \\Example: {s} mcp
+        \\
+    ++ common_options ++
+        \\
+        \\version command
+        \\Displays the version of {s}
+        \\
+        \\help command
+        \\Displays this message
+        \\
+    ;
+    std.debug.print(usage, .{ self.exec_name, self.exec_name, self.exec_name, self.exec_name, self.exec_name });
+    if (success) {
+        return std.process.cleanExit();
+    }
+    std.process.exit(1);
+}
+
+pub fn parseArgs(allocator: Allocator) !Config {
+    var args = try std.process.argsWithAllocator(allocator);
+    defer args.deinit();
+
+    const exec_name = try allocator.dupe(u8, std.fs.path.basename(args.next().?));
+
+    const mode_string = args.next() orelse "";
+    const run_mode = std.meta.stringToEnum(RunMode, mode_string) orelse blk: {
+        const inferred_mode = inferMode(mode_string) orelse
+            return init(allocator, exec_name, .{ .help = false });
+        // "command" wasn't a command but an option. We can't reset args, but
+        // we can create a new one. Not great, but this fallback is temporary
+        // as we transition to this command mode approach.
+        args.deinit();
+
+        args = try std.process.argsWithAllocator(allocator);
+        // skip the exec_name
+        _ = args.skip();
+
+        break :blk inferred_mode;
+    };
+
+    const mode: Mode = switch (run_mode) {
+        .help => .{ .help = true },
+        .serve => .{ .serve = parseServeArgs(allocator, &args) catch
+            return init(allocator, exec_name, .{ .help = false }) },
+        .fetch => .{ .fetch = parseFetchArgs(allocator, &args) catch
+            return init(allocator, exec_name, .{ .help = false }) },
+        .mcp => .{ .mcp = parseMcpArgs(allocator, &args) catch
+            return init(allocator, exec_name, .{ .help = false }) },
+        .version => .{ .version = {} },
+    };
+    return init(allocator, exec_name, mode);
+}
+
+fn inferMode(opt: []const u8) ?RunMode {
+    if (opt.len == 0) {
+        return .serve;
+    }
+
+    if (std.mem.startsWith(u8, opt, "--") == false) {
+        return .fetch;
+    }
+
+    if (std.mem.eql(u8, opt, "--dump")) {
+        return .fetch;
+    }
+
+    if (std.mem.eql(u8, opt, "--noscript")) {
+        return .fetch;
+    }
+
+    if (std.mem.eql(u8, opt, "--strip_mode")) {
+        return .fetch;
+    }
+
+    if (std.mem.eql(u8, opt, "--with_base")) {
+        return .fetch;
+    }
+
+    if (std.mem.eql(u8, opt, "--with_frames")) {
+        return .fetch;
+    }
+
+    if (std.mem.eql(u8, opt, "--host")) {
+        return .serve;
+    }
+
+    if (std.mem.eql(u8, opt, "--port")) {
+        return .serve;
+    }
+
+    if (std.mem.eql(u8, opt, "--timeout")) {
+        return .serve;
+    }
+
+    return null;
+}
+
+fn parseServeArgs(
+    allocator: Allocator,
+    args: *std.process.ArgIterator,
+) !Serve {
+    var serve: Serve = .{};
+
+    while (args.next()) |opt| {
+        if (std.mem.eql(u8, "--host", opt)) {
+            const str = args.next() orelse {
+                log.fatal(.app, "missing argument value", .{ .arg = "--host" });
+                return error.InvalidArgument;
+            };
+            serve.host = try allocator.dupe(u8, str);
+            continue;
+        }
+
+        if (std.mem.eql(u8, "--port", opt)) {
+            const str = args.next() orelse {
+                log.fatal(.app, "missing argument value", .{ .arg = "--port" });
+                return error.InvalidArgument;
+            };
+
+            serve.port = std.fmt.parseInt(u16, str, 10) catch |err| {
+                log.fatal(.app, "invalid argument value", .{ .arg = "--port", .err = err });
+                return error.InvalidArgument;
+            };
+            continue;
+        }
+
+        if (std.mem.eql(u8, "--timeout", opt)) {
+            const str = args.next() orelse {
+                log.fatal(.app, "missing argument value", .{ .arg = "--timeout" });
+                return error.InvalidArgument;
+            };
+
+            serve.timeout = std.fmt.parseInt(u31, str, 10) catch |err| {
+                log.fatal(.app, "invalid argument value", .{ .arg = "--timeout", .err = err });
+                return error.InvalidArgument;
+            };
+            continue;
+        }
+
+        if (std.mem.eql(u8, "--cdp_max_connections", opt)) {
+            const str = args.next() orelse {
+                log.fatal(.app, "missing argument value", .{ .arg = "--cdp_max_connections" });
+                return error.InvalidArgument;
+            };
+
+            serve.cdp_max_connections = std.fmt.parseInt(u16, str, 10) catch |err| {
+                log.fatal(.app, "invalid argument value", .{ .arg = "--cdp_max_connections", .err = err });
+                return error.InvalidArgument;
+            };
+            continue;
+        }
+
+        if (std.mem.eql(u8, "--cdp_max_pending_connections", opt)) {
+            const str = args.next() orelse {
+                log.fatal(.app, "missing argument value", .{ .arg = "--cdp_max_pending_connections" });
+                return error.InvalidArgument;
+            };
+
+            serve.cdp_max_pending_connections = std.fmt.parseInt(u16, str, 10) catch |err| {
+                log.fatal(.app, "invalid argument value", .{ .arg = "--cdp_max_pending_connections", .err = err });
+                return error.InvalidArgument;
+            };
+            continue;
+        }
+
+        if (try parseCommonArg(allocator, opt, args, &serve.common)) {
+            continue;
+        }
+
+        log.fatal(.app, "unknown argument", .{ .mode = "serve", .arg = opt });
+        return error.UnkownOption;
+    }
+
+    return serve;
+}
+
+fn parseMcpArgs(
+    allocator: Allocator,
+    args: *std.process.ArgIterator,
+) !Mcp {
+    var mcp: Mcp = .{};
+
+    while (args.next()) |opt| {
+        if (try parseCommonArg(allocator, opt, args, &mcp.common)) {
+            continue;
+        }
+
+        log.fatal(.mcp, "unknown argument", .{ .mode = "mcp", .arg = opt });
+        return error.UnkownOption;
+    }
+
+    return mcp;
+}
+
+fn parseFetchArgs(
+    allocator: Allocator,
+    args: *std.process.ArgIterator,
+) !Fetch {
+    var dump_mode: ?DumpFormat = null;
+    var with_base: bool = false;
+    var with_frames: bool = false;
+    var url: ?[:0]const u8 = null;
+    var common: Common = .{};
+    var strip: dump.Opts.Strip = .{};
+
+    while (args.next()) |opt| {
+        if (std.mem.eql(u8, "--dump", opt)) {
+            var peek_args = args.*;
+            if (peek_args.next()) |next_arg| {
+                if (std.meta.stringToEnum(DumpFormat, next_arg)) |mode| {
+                    dump_mode = mode;
+                    _ = args.next();
+                } else {
+                    dump_mode = .html;
+                }
+            } else {
+                dump_mode = .html;
+            }
+            continue;
+        }
+
+        if (std.mem.eql(u8, "--noscript", opt)) {
+            log.warn(.app, "deprecation warning", .{
+                .feature = "--noscript argument",
+                .hint = "use '--strip_mode js' instead",
+            });
+            strip.js = true;
+            continue;
+        }
+
+        if (std.mem.eql(u8, "--with_base", opt)) {
+            with_base = true;
+            continue;
+        }
+
+        if (std.mem.eql(u8, "--with_frames", opt)) {
+            with_frames = true;
+            continue;
+        }
+
+        if (std.mem.eql(u8, "--strip_mode", opt)) {
+            const str = args.next() orelse {
+                log.fatal(.app, "missing argument value", .{ .arg = "--strip_mode" });
+                return error.InvalidArgument;
+            };
+
+            var it = std.mem.splitScalar(u8, str, ',');
+            while (it.next()) |part| {
+                const trimmed = std.mem.trim(u8, part, &std.ascii.whitespace);
+                if (std.mem.eql(u8, trimmed, "js")) {
+                    strip.js = true;
+                } else if (std.mem.eql(u8, trimmed, "ui")) {
+                    strip.ui = true;
+                } else if (std.mem.eql(u8, trimmed, "css")) {
+                    strip.css = true;
+                } else if (std.mem.eql(u8, trimmed, "full")) {
+                    strip.js = true;
+                    strip.ui = true;
+                    strip.css = true;
+                } else {
+                    log.fatal(.app, "invalid option choice", .{ .arg = "--strip_mode", .value = trimmed });
+                }
+            }
+            continue;
+        }
+
+        if (try parseCommonArg(allocator, opt, args, &common)) {
+            continue;
+        }
+
+        if (std.mem.startsWith(u8, opt, "--")) {
+            log.fatal(.app, "unknown argument", .{ .mode = "fetch", .arg = opt });
+            return error.UnkownOption;
+        }
+
+        if (url != null) {
+            log.fatal(.app, "duplicate fetch url", .{ .help = "only 1 URL can be specified" });
+            return error.TooManyURLs;
+        }
+        url = try allocator.dupeZ(u8, opt);
+    }
+
+    if (url == null) {
+        log.fatal(.app, "missing fetch url", .{ .help = "URL to fetch must be provided" });
+        return error.MissingURL;
+    }
+
+    return .{
+        .url = url.?,
+        .dump_mode = dump_mode,
+        .strip = strip,
+        .common = common,
+        .with_base = with_base,
+        .with_frames = with_frames,
+    };
+}
+
+fn parseCommonArg(
+    allocator: Allocator,
+    opt: []const u8,
+    args: *std.process.ArgIterator,
+    common: *Common,
+) !bool {
+    if (std.mem.eql(u8, "--insecure_disable_tls_host_verification", opt)) {
+        common.tls_verify_host = false;
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--obey_robots", opt)) {
+        common.obey_robots = true;
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--http_proxy", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--http_proxy" });
+            return error.InvalidArgument;
+        };
+        common.http_proxy = try allocator.dupeZ(u8, str);
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--proxy_bearer_token", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--proxy_bearer_token" });
+            return error.InvalidArgument;
+        };
+        common.proxy_bearer_token = try allocator.dupeZ(u8, str);
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--http_max_concurrent", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--http_max_concurrent" });
+            return error.InvalidArgument;
+        };
+
+        common.http_max_concurrent = std.fmt.parseInt(u8, str, 10) catch |err| {
+            log.fatal(.app, "invalid argument value", .{ .arg = "--http_max_concurrent", .err = err });
+            return error.InvalidArgument;
+        };
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--http_max_host_open", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--http_max_host_open" });
+            return error.InvalidArgument;
+        };
+
+        common.http_max_host_open = std.fmt.parseInt(u8, str, 10) catch |err| {
+            log.fatal(.app, "invalid argument value", .{ .arg = "--http_max_host_open", .err = err });
+            return error.InvalidArgument;
+        };
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--http_connect_timeout", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--http_connect_timeout" });
+            return error.InvalidArgument;
+        };
+
+        common.http_connect_timeout = std.fmt.parseInt(u31, str, 10) catch |err| {
+            log.fatal(.app, "invalid argument value", .{ .arg = "--http_connect_timeout", .err = err });
+            return error.InvalidArgument;
+        };
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--http_timeout", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--http_timeout" });
+            return error.InvalidArgument;
+        };
+
+        common.http_timeout = std.fmt.parseInt(u31, str, 10) catch |err| {
+            log.fatal(.app, "invalid argument value", .{ .arg = "--http_timeout", .err = err });
+            return error.InvalidArgument;
+        };
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--http_max_response_size", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--http_max_response_size" });
+            return error.InvalidArgument;
+        };
+
+        common.http_max_response_size = std.fmt.parseInt(usize, str, 10) catch |err| {
+            log.fatal(.app, "invalid argument value", .{ .arg = "--http_max_response_size", .err = err });
+            return error.InvalidArgument;
+        };
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--log_level", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--log_level" });
+            return error.InvalidArgument;
+        };
+
+        common.log_level = std.meta.stringToEnum(log.Level, str) orelse blk: {
+            if (std.mem.eql(u8, str, "error")) {
+                break :blk .err;
+            }
+            log.fatal(.app, "invalid option choice", .{ .arg = "--log_level", .value = str });
+            return error.InvalidArgument;
+        };
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--log_format", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--log_format" });
+            return error.InvalidArgument;
+        };
+
+        common.log_format = std.meta.stringToEnum(log.Format, str) orelse {
+            log.fatal(.app, "invalid option choice", .{ .arg = "--log_format", .value = str });
+            return error.InvalidArgument;
+        };
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--log_filter_scopes", opt)) {
+        if (builtin.mode != .Debug) {
+            log.fatal(.app, "experimental", .{ .help = "log scope filtering is only available in debug builds" });
+            return false;
+        }
+
+        const str = args.next() orelse {
+            // disables the default filters
+            common.log_filter_scopes = &.{};
+            return true;
+        };
+
+        var arr: std.ArrayList(log.Scope) = .empty;
+
+        var it = std.mem.splitScalar(u8, str, ',');
+        while (it.next()) |part| {
+            try arr.append(allocator, std.meta.stringToEnum(log.Scope, part) orelse {
+                log.fatal(.app, "invalid option choice", .{ .arg = "--log_filter_scopes", .value = part });
+                return false;
+            });
+        }
+        common.log_filter_scopes = arr.items;
+        return true;
+    }
+
+    if (std.mem.eql(u8, "--user_agent_suffix", opt)) {
+        const str = args.next() orelse {
+            log.fatal(.app, "missing argument value", .{ .arg = "--user_agent_suffix" });
+            return error.InvalidArgument;
+        };
+        for (str) |c| {
+            if (!std.ascii.isPrint(c)) {
+                log.fatal(.app, "not printable character", .{ .arg = "--user_agent_suffix" });
+                return error.InvalidArgument;
+            }
+        }
+        common.user_agent_suffix = try allocator.dupe(u8, str);
+        return true;
+    }
+
+    return false;
+}

src/Notification.zig

@@ -17,6 +17,7 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
+const lp = @import("lightpanda");
 
 const log = @import("log.zig");
 const Page = @import("browser/Page.zig");
@@ -38,10 +39,9 @@ const List = std.DoublyLinkedList;
 // CDP code registers for the "network_bytes_sent" event, because it needs to
 // send messages to the client when this happens. Our HTTP client could then
 // emit a "network_bytes_sent" message. It would be easy, and it would work.
-// That is, it would work until the Telemetry code makes an HTTP request, and
-// because everything's just one big global, that gets picked up by the
-// registered CDP listener, and the telemetry network activity gets sent to the
-// CDP client.
+// That is, it would work until multiple CDP clients connect, and because
+// everything's just one big global, events from one CDP session would be sent
+// to all CDP clients.
 //
 // To avoid this, one way or another, we need scoping. We could still have
 // a global registry but every "register" and every "emit" has some type of
@@ -49,14 +49,10 @@ const List = std.DoublyLinkedList;
 // between components to share a common scope.
 //
 // Instead, the approach that we take is to have a notification instance per
-// scope. This makes some things harder, but we only plan on having 2
-// notification instances  at a given time: one in a Browser and one in the App.
-// What about something like Telemetry, which lives outside of a Browser but
-// still cares about Browser-events (like .page_navigate)? When the Browser
-// notification is created, a `notification_created` event is raised in the
-// App's notification, which Telemetry is registered for. This allows Telemetry
-// to register for events in the Browser notification. See the Telemetry's
-// register function.
+// CDP connection (BrowserContext). Each CDP connection has its own notification
+// that is shared across all Sessions (tabs) within that connection. This ensures
+// proper isolation between different CDP clients while allowing a single client
+// to receive events from all its tabs.
 const Notification = @This();
 // Every event type (which are hard-coded), has a list of Listeners.
 // When the event happens, we dispatch to those listener.
@@ -65,7 +61,7 @@ event_listeners: EventListeners,
 // list of listeners for a specified receiver
 // @intFromPtr(receiver) -> [listener1, listener2, ...]
 // Used when `unregisterAll` is called.
-listeners: std.AutoHashMapUnmanaged(usize, std.ArrayListUnmanaged(*Listener)),
+listeners: std.AutoHashMapUnmanaged(usize, std.ArrayList(*Listener)),
 
 allocator: Allocator,
 mem_pool: std.heap.MemoryPool(Listener),
@@ -77,6 +73,7 @@ const EventListeners = struct {
     page_navigated: List = .{},
     page_network_idle: List = .{},
     page_network_almost_idle: List = .{},
+    page_frame_created: List = .{},
     http_request_fail: List = .{},
     http_request_start: List = .{},
     http_request_intercept: List = .{},
@@ -84,7 +81,6 @@ const EventListeners = struct {
     http_request_auth_required: List = .{},
     http_response_data: List = .{},
     http_response_header_done: List = .{},
-    notification_created: List = .{},
 };
 
 const Events = union(enum) {
@@ -94,6 +90,7 @@ const Events = union(enum) {
     page_navigated: *const PageNavigated,
     page_network_idle: *const PageNetworkIdle,
     page_network_almost_idle: *const PageNetworkAlmostIdle,
+    page_frame_created: *const PageFrameCreated,
     http_request_fail: *const RequestFail,
     http_request_start: *const RequestStart,
     http_request_intercept: *const RequestIntercept,
@@ -101,31 +98,42 @@ const Events = union(enum) {
     http_request_done: *const RequestDone,
     http_response_data: *const ResponseData,
     http_response_header_done: *const ResponseHeaderDone,
-    notification_created: *Notification,
 };
 const EventType = std.meta.FieldEnum(Events);
 
 pub const PageRemove = struct {};
 
 pub const PageNavigate = struct {
-    req_id: usize,
+    req_id: u32,
+    frame_id: u32,
     timestamp: u64,
     url: [:0]const u8,
     opts: Page.NavigateOpts,
 };
 
 pub const PageNavigated = struct {
-    req_id: usize,
+    req_id: u32,
+    frame_id: u32,
     timestamp: u64,
     url: [:0]const u8,
     opts: Page.NavigatedOpts,
 };
 
 pub const PageNetworkIdle = struct {
+    req_id: u32,
+    frame_id: u32,
     timestamp: u64,
 };
 
 pub const PageNetworkAlmostIdle = struct {
+    req_id: u32,
+    frame_id: u32,
+    timestamp: u64,
+};
+
+pub const PageFrameCreated = struct {
+    frame_id: u32,
+    parent_id: u32,
     timestamp: u64,
 };
 
@@ -161,12 +169,7 @@ pub const RequestFail = struct {
     err: anyerror,
 };
 
-pub fn init(allocator: Allocator, parent: ?*Notification) !*Notification {
-
-    // This is put on the heap because we want to raise a .notification_created
-    // event, so that, something like Telemetry, can receive the
-    // .page_navigate event on all notification instances. That can only work
-    // if we dispatch .notification_created with a *Notification.
+pub fn init(allocator: Allocator) !*Notification {
     const notification = try allocator.create(Notification);
     errdefer allocator.destroy(notification);
 
@@ -177,10 +180,6 @@ pub fn init(allocator: Allocator, parent: ?*Notification) !*Notification {
         .mem_pool = std.heap.MemoryPool(Listener).init(allocator),
     };
 
-    if (parent) |pn| {
-        pn.dispatch(.notification_created, notification);
-    }
-
     return notification;
 }
 
@@ -241,7 +240,7 @@ pub fn unregister(self: *Notification, comptime event: EventType, receiver: anyt
     if (listeners.items.len == 0) {
         listeners.deinit(self.allocator);
         const removed = self.listeners.remove(@intFromPtr(receiver));
-        std.debug.assert(removed == true);
+        lp.assert(removed == true, "Notification.unregister", .{ .type = event });
     }
 }
 
@@ -255,6 +254,9 @@ pub fn unregisterAll(self: *Notification, receiver: *anyopaque) void {
 }
 
 pub fn dispatch(self: *Notification, comptime event: EventType, data: ArgType(event)) void {
+    if (self.listeners.count() == 0) {
+        return;
+    }
     const list = &@field(self.event_listeners, @tagName(event));
 
     var node = list.first;
@@ -312,11 +314,12 @@ const Listener = struct {
 
 const testing = std.testing;
 test "Notification" {
-    var notifier = try Notification.init(testing.allocator, null);
+    var notifier = try Notification.init(testing.allocator);
     defer notifier.deinit();
 
     // noop
     notifier.dispatch(.page_navigate, &.{
+        .frame_id = 0,
         .req_id = 1,
         .timestamp = 4,
         .url = undefined,
@@ -327,6 +330,7 @@ test "Notification" {
 
     try notifier.register(.page_navigate, &tc, TestClient.pageNavigate);
     notifier.dispatch(.page_navigate, &.{
+        .frame_id = 0,
         .req_id = 1,
         .timestamp = 4,
         .url = undefined,
@@ -336,6 +340,7 @@ test "Notification" {
 
     notifier.unregisterAll(&tc);
     notifier.dispatch(.page_navigate, &.{
+        .frame_id = 0,
         .req_id = 1,
         .timestamp = 10,
         .url = undefined,
@@ -346,23 +351,25 @@ test "Notification" {
     try notifier.register(.page_navigate, &tc, TestClient.pageNavigate);
     try notifier.register(.page_navigated, &tc, TestClient.pageNavigated);
     notifier.dispatch(.page_navigate, &.{
+        .frame_id = 0,
         .req_id = 1,
         .timestamp = 10,
         .url = undefined,
         .opts = .{},
     });
-    notifier.dispatch(.page_navigated, &.{ .req_id = 1, .timestamp = 6, .url = undefined, .opts = .{} });
+    notifier.dispatch(.page_navigated, &.{ .frame_id = 0, .req_id = 1, .timestamp = 6, .url = undefined, .opts = .{} });
     try testing.expectEqual(14, tc.page_navigate);
     try testing.expectEqual(6, tc.page_navigated);
 
     notifier.unregisterAll(&tc);
     notifier.dispatch(.page_navigate, &.{
+        .frame_id = 0,
         .req_id = 1,
         .timestamp = 100,
         .url = undefined,
         .opts = .{},
     });
-    notifier.dispatch(.page_navigated, &.{ .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
+    notifier.dispatch(.page_navigated, &.{ .frame_id = 0, .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
     try testing.expectEqual(14, tc.page_navigate);
     try testing.expectEqual(6, tc.page_navigated);
 
@@ -370,27 +377,27 @@ test "Notification" {
         // unregister
         try notifier.register(.page_navigate, &tc, TestClient.pageNavigate);
         try notifier.register(.page_navigated, &tc, TestClient.pageNavigated);
-        notifier.dispatch(.page_navigate, &.{ .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
-        notifier.dispatch(.page_navigated, &.{ .req_id = 1, .timestamp = 1000, .url = undefined, .opts = .{} });
+        notifier.dispatch(.page_navigate, &.{ .frame_id = 0, .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
+        notifier.dispatch(.page_navigated, &.{ .frame_id = 0, .req_id = 1, .timestamp = 1000, .url = undefined, .opts = .{} });
         try testing.expectEqual(114, tc.page_navigate);
         try testing.expectEqual(1006, tc.page_navigated);
 
         notifier.unregister(.page_navigate, &tc);
-        notifier.dispatch(.page_navigate, &.{ .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
-        notifier.dispatch(.page_navigated, &.{ .req_id = 1, .timestamp = 1000, .url = undefined, .opts = .{} });
+        notifier.dispatch(.page_navigate, &.{ .frame_id = 0, .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
+        notifier.dispatch(.page_navigated, &.{ .frame_id = 0, .req_id = 1, .timestamp = 1000, .url = undefined, .opts = .{} });
         try testing.expectEqual(114, tc.page_navigate);
         try testing.expectEqual(2006, tc.page_navigated);
 
         notifier.unregister(.page_navigated, &tc);
-        notifier.dispatch(.page_navigate, &.{ .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
-        notifier.dispatch(.page_navigated, &.{ .req_id = 1, .timestamp = 1000, .url = undefined, .opts = .{} });
+        notifier.dispatch(.page_navigate, &.{ .frame_id = 0, .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
+        notifier.dispatch(.page_navigated, &.{ .frame_id = 0, .req_id = 1, .timestamp = 1000, .url = undefined, .opts = .{} });
         try testing.expectEqual(114, tc.page_navigate);
         try testing.expectEqual(2006, tc.page_navigated);
 
         // already unregistered, try anyways
         notifier.unregister(.page_navigated, &tc);
-        notifier.dispatch(.page_navigate, &.{ .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
-        notifier.dispatch(.page_navigated, &.{ .req_id = 1, .timestamp = 1000, .url = undefined, .opts = .{} });
+        notifier.dispatch(.page_navigate, &.{ .frame_id = 0, .req_id = 1, .timestamp = 100, .url = undefined, .opts = .{} });
+        notifier.dispatch(.page_navigated, &.{ .frame_id = 0, .req_id = 1, .timestamp = 1000, .url = undefined, .opts = .{} });
         try testing.expectEqual(114, tc.page_navigate);
         try testing.expectEqual(2006, tc.page_navigated);
     }

src/TestHTTPServer.zig

@@ -20,7 +20,7 @@ const std = @import("std");
 
 const TestHTTPServer = @This();
 
-shutdown: bool,
+shutdown: std.atomic.Value(bool),
 listener: ?std.net.Server,
 handler: Handler,
 
@@ -28,16 +28,23 @@ const Handler = *const fn (req: *std.http.Server.Request) anyerror!void;
 
 pub fn init(handler: Handler) TestHTTPServer {
     return .{
-        .shutdown = true,
+        .shutdown = .init(true),
         .listener = null,
         .handler = handler,
     };
 }
 
 pub fn deinit(self: *TestHTTPServer) void {
-    self.shutdown = true;
+    self.listener = null;
+}
+
+pub fn stop(self: *TestHTTPServer) void {
+    self.shutdown.store(true, .release);
     if (self.listener) |*listener| {
-        listener.deinit();
+        switch (@import("builtin").target.os.tag) {
+            .linux => std.posix.shutdown(listener.stream.handle, .recv) catch {},
+            else => std.posix.close(listener.stream.handle),
+        }
     }
 }
 
@@ -46,12 +53,13 @@ pub fn run(self: *TestHTTPServer, wg: *std.Thread.WaitGroup) !void {
 
     self.listener = try address.listen(.{ .reuse_address = true });
     var listener = &self.listener.?;
+    self.shutdown.store(false, .release);
 
     wg.finish();
 
     while (true) {
         const conn = listener.accept() catch |err| {
-            if (self.shutdown) {
+            if (self.shutdown.load(.acquire) or err == error.SocketNotListening) {
                 return;
             }
             return err;

src/browser/Browser.zig

@@ -25,11 +25,13 @@ const js = @import("js/js.zig");
 const log = @import("../log.zig");
 const App = @import("../App.zig");
 const HttpClient = @import("../http/Client.zig");
-const Notification = @import("../Notification.zig");
+
+const ArenaPool = App.ArenaPool;
 
 const IS_DEBUG = @import("builtin").mode == .Debug;
 
 const Session = @import("Session.zig");
+const Notification = @import("../Notification.zig");
 
 // Browser is an instance of the browser.
 // You can create multiple browser instances.
@@ -40,54 +42,40 @@ env: js.Env,
 app: *App,
 session: ?Session,
 allocator: Allocator,
+arena_pool: *ArenaPool,
 http_client: *HttpClient,
-call_arena: ArenaAllocator,
-page_arena: ArenaAllocator,
-session_arena: ArenaAllocator,
-transfer_arena: ArenaAllocator,
-notification: *Notification,
 
-pub fn init(app: *App) !Browser {
+const InitOpts = struct {
+    env: js.Env.InitOpts = .{},
+    http_client: *HttpClient,
+};
+
+pub fn init(app: *App, opts: InitOpts) !Browser {
     const allocator = app.allocator;
 
-    var env = try js.Env.init(allocator, &app.platform, &app.snapshot);
+    var env = try js.Env.init(app, opts.env);
     errdefer env.deinit();
 
-    const notification = try Notification.init(allocator, app.notification);
-    app.http.client.notification = notification;
-    app.http.client.next_request_id = 0; // Should we track ids in CDP only?
-    errdefer notification.deinit();
-
     return .{
         .app = app,
         .env = env,
         .session = null,
         .allocator = allocator,
-        .notification = notification,
-        .http_client = app.http.client,
-        .call_arena = ArenaAllocator.init(allocator),
-        .page_arena = ArenaAllocator.init(allocator),
-        .session_arena = ArenaAllocator.init(allocator),
-        .transfer_arena = ArenaAllocator.init(allocator),
+        .arena_pool = &app.arena_pool,
+        .http_client = opts.http_client,
     };
 }
 
 pub fn deinit(self: *Browser) void {
     self.closeSession();
     self.env.deinit();
-    self.call_arena.deinit();
-    self.page_arena.deinit();
-    self.session_arena.deinit();
-    self.transfer_arena.deinit();
-    self.http_client.notification = null;
-    self.notification.deinit();
 }
 
-pub fn newSession(self: *Browser) !*Session {
+pub fn newSession(self: *Browser, notification: *Notification) !*Session {
     self.closeSession();
     self.session = @as(Session, undefined);
     const session = &self.session.?;
-    try Session.init(session, self);
+    try Session.init(session, self, notification);
     return session;
 }
 
@@ -95,20 +83,33 @@ pub fn closeSession(self: *Browser) void {
     if (self.session) |*session| {
         session.deinit();
         self.session = null;
-        _ = self.session_arena.reset(.{ .retain_with_limit = 1 * 1024 * 1024 });
-        self.env.lowMemoryNotification();
+        self.env.memoryPressureNotification(.critical);
     }
 }
 
-pub fn runMicrotasks(self: *const Browser) void {
+pub fn runMicrotasks(self: *Browser) void {
     self.env.runMicrotasks();
 }
 
-pub fn runMessageLoop(self: *const Browser) void {
-    while (self.env.pumpMessageLoop()) {
-        if (comptime IS_DEBUG) {
-            log.debug(.browser, "pumpMessageLoop", .{});
-        }
-    }
+pub fn runMacrotasks(self: *Browser) !?u64 {
+    const env = &self.env;
+
+    const time_to_next = try self.env.runMacrotasks();
+    env.pumpMessageLoop();
+
+    // either of the above could have queued more microtasks
+    env.runMicrotasks();
+
+    return time_to_next;
+}
+
+pub fn hasBackgroundTasks(self: *Browser) bool {
+    return self.env.hasBackgroundTasks();
+}
+pub fn waitForBackgroundTasks(self: *Browser) void {
+    self.env.waitForBackgroundTasks();
+}
+
+pub fn runIdleTasks(self: *const Browser) void {
     self.env.runIdleTasks();
 }

src/browser/EventManager.zig

@@ -28,30 +28,61 @@ const Page = @import("Page.zig");
 const Node = @import("webapi/Node.zig");
 const Event = @import("webapi/Event.zig");
 const EventTarget = @import("webapi/EventTarget.zig");
+const Element = @import("webapi/Element.zig");
 
 const Allocator = std.mem.Allocator;
 
 const IS_DEBUG = builtin.mode == .Debug;
 
+const EventKey = struct {
+    event_target: usize,
+    type_string: String,
+};
+
+const EventKeyContext = struct {
+    pub fn hash(_: @This(), key: EventKey) u64 {
+        var hasher = std.hash.Wyhash.init(0);
+        hasher.update(std.mem.asBytes(&key.event_target));
+        hasher.update(key.type_string.str());
+        return hasher.final();
+    }
+
+    pub fn eql(_: @This(), a: EventKey, b: EventKey) bool {
+        return a.event_target == b.event_target and a.type_string.eql(b.type_string);
+    }
+};
+
 pub const EventManager = @This();
 
 page: *Page,
 arena: Allocator,
+// Used as an optimization in Page._documentIsComplete. If we know there are no
+// 'load' listeners in the document, we can skip dispatching the per-resource
+// 'load' event (e.g. amazon product page has no listener and ~350 resources)
+has_dom_load_listener: bool,
 listener_pool: std.heap.MemoryPool(Listener),
+ignore_list: std.ArrayList(*Listener),
 list_pool: std.heap.MemoryPool(std.DoublyLinkedList),
-lookup: std.AutoHashMapUnmanaged(usize, *std.DoublyLinkedList),
+lookup: std.HashMapUnmanaged(
+    EventKey,
+    *std.DoublyLinkedList,
+    EventKeyContext,
+    std.hash_map.default_max_load_percentage,
+),
 dispatch_depth: usize,
 deferred_removals: std.ArrayList(struct { list: *std.DoublyLinkedList, listener: *Listener }),
 
-pub fn init(page: *Page) EventManager {
+pub fn init(arena: Allocator, page: *Page) EventManager {
     return .{
         .page = page,
         .lookup = .{},
-        .arena = page.arena,
-        .list_pool = std.heap.MemoryPool(std.DoublyLinkedList).init(page.arena),
-        .listener_pool = std.heap.MemoryPool(Listener).init(page.arena),
+        .arena = arena,
+        .ignore_list = .{},
+        .list_pool = .init(arena),
+        .listener_pool = .init(arena),
         .dispatch_depth = 0,
         .deferred_removals = .{},
+        .has_dom_load_listener = false,
     };
 }
 
@@ -69,7 +100,7 @@ pub const Callback = union(enum) {
 
 pub fn register(self: *EventManager, target: *EventTarget, typ: []const u8, callback: Callback, opts: RegisterOptions) !void {
     if (comptime IS_DEBUG) {
-        log.debug(.event, "eventManager.register", .{ .type = typ, .capture = opts.capture, .once = opts.once, .target = target });
+        log.debug(.event, "eventManager.register", .{ .type = typ, .capture = opts.capture, .once = opts.once, .target = target.toString() });
     }
 
     // If a signal is provided and already aborted, don't register the listener
@@ -79,20 +110,28 @@ pub fn register(self: *EventManager, target: *EventTarget, typ: []const u8, call
         }
     }
 
-    const gop = try self.lookup.getOrPut(self.arena, @intFromPtr(target));
+    // Allocate the type string we'll use in both listener and key
+    const type_string = try String.init(self.arena, typ, .{});
+
+    if (type_string.eql(comptime .wrap("load")) and target._type == .node) {
+        self.has_dom_load_listener = true;
+    }
+
+    const gop = try self.lookup.getOrPut(self.arena, .{
+        .type_string = type_string,
+        .event_target = @intFromPtr(target),
+    });
     if (gop.found_existing) {
         // check for duplicate callbacks already registered
         var node = gop.value_ptr.*.first;
         while (node) |n| {
             const listener: *Listener = @alignCast(@fieldParentPtr("node", n));
-            if (listener.typ.eqlSlice(typ)) {
-                const is_duplicate = switch (callback) {
-                    .object => |obj| listener.function.eqlObject(obj),
-                    .function => |func| listener.function.eqlFunction(func),
-                };
-                if (is_duplicate and listener.capture == opts.capture) {
-                    return;
-                }
+            const is_duplicate = switch (callback) {
+                .object => |obj| listener.function.eqlObject(obj),
+                .function => |func| listener.function.eqlFunction(func),
+            };
+            if (is_duplicate and listener.capture == opts.capture) {
+                return;
             }
             node = n.next;
         }
@@ -102,8 +141,8 @@ pub fn register(self: *EventManager, target: *EventTarget, typ: []const u8, call
     }
 
     const func = switch (callback) {
-        .function => |f| Function{ .value = f },
-        .object => |o| Function{ .object = o },
+        .function => |f| Function{ .value = try f.persist() },
+        .object => |o| Function{ .object = try o.persist() },
     };
 
     const listener = try self.listener_pool.create();
@@ -114,48 +153,67 @@ pub fn register(self: *EventManager, target: *EventTarget, typ: []const u8, call
         .passive = opts.passive,
         .function = func,
         .signal = opts.signal,
-        .typ = try String.init(self.arena, typ, .{}),
+        .typ = type_string,
     };
     // append the listener to the list of listeners for this target
     gop.value_ptr.*.append(&listener.node);
+
+    // Track load listeners for script execution ignore list
+    if (type_string.eql(comptime .wrap("load"))) {
+        try self.ignore_list.append(self.arena, listener);
+    }
 }
 
 pub fn remove(self: *EventManager, target: *EventTarget, typ: []const u8, callback: Callback, use_capture: bool) void {
-    const list = self.lookup.get(@intFromPtr(target)) orelse return;
-    if (findListener(list, typ, callback, use_capture)) |listener| {
+    const list = self.lookup.get(.{
+        .type_string = .wrap(typ),
+        .event_target = @intFromPtr(target),
+    }) orelse return;
+    if (findListener(list, callback, use_capture)) |listener| {
         self.removeListener(list, listener);
     }
 }
 
-pub fn dispatch(self: *EventManager, target: *EventTarget, event: *Event) !void {
+pub fn clearIgnoreList(self: *EventManager) void {
+    self.ignore_list.clearRetainingCapacity();
+}
+
+// Dispatching can be recursive from the compiler's point of view, so we need to
+// give it an explicit error set so that other parts of the code can use and
+// inferred error.
+const DispatchError = error{
+    OutOfMemory,
+    StringTooLarge,
+    JSExecCallback,
+    CompilationError,
+    ExecutionError,
+    JsException,
+};
+
+pub const DispatchOpts = struct {
+    // A "load" event triggered by a script (in ScriptManager) should not trigger
+    // a "load" listener added within that script. Therefore, any "load" listener
+    // that we add go into an ignore list until after the script finishes executing.
+    // The ignore list is only checked when apply_ignore  == true, which is only
+    // set by the ScriptManager when raising the script's "load" event.
+    apply_ignore: bool = false,
+};
+
+pub fn dispatch(self: *EventManager, target: *EventTarget, event: *Event) DispatchError!void {
+    return self.dispatchOpts(target, event, .{});
+}
+
+pub fn dispatchOpts(self: *EventManager, target: *EventTarget, event: *Event, comptime opts: DispatchOpts) DispatchError!void {
+    event.acquireRef();
+    defer event.deinit(false, self.page);
+
     if (comptime IS_DEBUG) {
         log.debug(.event, "eventManager.dispatch", .{ .type = event._type_string.str(), .bubbles = event._bubbles });
     }
 
-    event._target = target;
-    event._dispatch_target = target; // Store original target for composedPath()
-    var was_handled = false;
-
-    defer if (was_handled) {
-        self.page.js.runMicrotasks();
-    };
-
     switch (target._type) {
-        .node => |node| try self.dispatchNode(node, event, &was_handled),
-        .xhr,
-        .window,
-        .abort_signal,
-        .media_query_list,
-        .message_port,
-        .text_track_cue,
-        .navigation,
-        .screen,
-        .screen_orientation,
-        .generic,
-        => {
-            const list = self.lookup.get(@intFromPtr(target)) orelse return;
-            try self.dispatchAll(list, target, event, &was_handled);
-        },
+        .node => |node| try self.dispatchNode(node, event, opts),
+        else => try self.dispatchDirect(target, event, null, .{ .context = "dispatch" }),
     }
 }
 
@@ -164,13 +222,22 @@ pub fn dispatch(self: *EventManager, target: *EventTarget, event: *Event) !void
 // property is just a shortcut for calling addEventListener, but they are distinct.
 // An event set via property cannot be removed by removeEventListener. If you
 // set both the property and add a listener, they both execute.
-const DispatchWithFunctionOptions = struct {
+const DispatchDirectOptions = struct {
     context: []const u8,
     inject_target: bool = true,
 };
-pub fn dispatchWithFunction(self: *EventManager, target: *EventTarget, event: *Event, function_: ?js.Function, comptime opts: DispatchWithFunctionOptions) !void {
+
+// Direct dispatch for non-DOM targets (Window, XHR, AbortSignal) or DOM nodes with
+// property handlers. No propagation - just calls the handler and registered listeners.
+// Handler can be: null, ?js.Function.Global, ?js.Function.Temp, or js.Function
+pub fn dispatchDirect(self: *EventManager, target: *EventTarget, event: *Event, handler: anytype, comptime opts: DispatchDirectOptions) !void {
+    const page = self.page;
+
+    event.acquireRef();
+    defer event.deinit(false, page);
+
     if (comptime IS_DEBUG) {
-        log.debug(.event, "dispatchWithFunction", .{ .type = event._type_string.str(), .context = opts.context, .has_function = function_ != null });
+        log.debug(.event, "dispatchDirect", .{ .type = event._type_string, .context = opts.context });
     }
 
     if (comptime opts.inject_target) {
@@ -179,11 +246,15 @@ pub fn dispatchWithFunction(self: *EventManager, target: *EventTarget, event: *E
     }
 
     var was_dispatched = false;
-    defer if (was_dispatched) {
-        self.page.js.runMicrotasks();
-    };
 
-    if (function_) |func| {
+    var ls: js.Local.Scope = undefined;
+    page.js.localScope(&ls);
+    defer {
+        ls.local.runMicrotasks();
+        ls.deinit();
+    }
+
+    if (getFunction(handler, &ls.local)) |func| {
         event._current_target = target;
         if (func.callWithThis(void, target, .{event})) {
             was_dispatched = true;
@@ -193,110 +264,15 @@ pub fn dispatchWithFunction(self: *EventManager, target: *EventTarget, event: *E
         }
     }
 
-    const list = self.lookup.get(@intFromPtr(target)) orelse return;
-    try self.dispatchAll(list, target, event, &was_dispatched);
-}
+    // listeners reigstered via addEventListener
+    const list = self.lookup.get(.{
+        .event_target = @intFromPtr(target),
+        .type_string = event._type_string,
+    }) orelse return;
 
-fn dispatchNode(self: *EventManager, target: *Node, event: *Event, was_handled: *bool) !void {
-    const ShadowRoot = @import("webapi/ShadowRoot.zig");
-
-    // Defer runs even on early return - ensures event phase is reset
-    // and default actions execute (unless prevented)
-    defer {
-        event._event_phase = .none;
-
-        // Execute default action if not prevented
-        if (event._prevent_default) {
-            // can't return in a defer (╯°□°)╯︵ ┻━┻
-        } else if (event._type_string.eqlSlice("click")) {
-            self.page.handleClick(target) catch |err| {
-                log.warn(.event, "page.click", .{ .err = err });
-            };
-        } else if (event._type_string.eqlSlice("keydown")) {
-            self.page.handleKeydown(target, event) catch |err| {
-                log.warn(.event, "page.keydown", .{ .err = err });
-            };
-        }
-    }
-
-    var path_len: usize = 0;
-    var path_buffer: [128]*EventTarget = undefined;
-
-    var node: ?*Node = target;
-    while (node) |n| {
-        if (path_len >= path_buffer.len) break;
-        path_buffer[path_len] = n.asEventTarget();
-        path_len += 1;
-
-        // Check if this node is a shadow root
-        if (n.is(ShadowRoot)) |shadow| {
-            event._needs_retargeting = true;
-
-            // If event is not composed, stop at shadow boundary
-            if (!event._composed) {
-                break;
-            }
-
-            // Otherwise, jump to the shadow host and continue
-            node = shadow._host.asNode();
-            continue;
-        }
-
-        node = n._parent;
-    }
-
-    // Even though the window isn't part of the DOM, events always propagate
-    // through it in the capture phase (unless we stopped at a shadow boundary)
-    if (path_len < path_buffer.len) {
-        path_buffer[path_len] = self.page.window.asEventTarget();
-        path_len += 1;
-    }
-
-    const path = path_buffer[0..path_len];
-
-    // Phase 1: Capturing phase (root → target, excluding target)
-    // This happens for all events, regardless of bubbling
-    event._event_phase = .capturing_phase;
-    var i: usize = path_len;
-    while (i > 1) {
-        i -= 1;
-        const current_target = path[i];
-        if (self.lookup.get(@intFromPtr(current_target))) |list| {
-            try self.dispatchPhase(list, current_target, event, was_handled, true);
-            if (event._stop_propagation) {
-                return;
-            }
-        }
-    }
-
-    // Phase 2: At target
-    event._event_phase = .at_target;
-    const target_et = target.asEventTarget();
-    if (self.lookup.get(@intFromPtr(target_et))) |list| {
-        try self.dispatchPhase(list, target_et, event, was_handled, null);
-        if (event._stop_propagation) {
-            return;
-        }
-    }
-
-    // Phase 3: Bubbling phase (target → root, excluding target)
-    // This only happens if the event bubbles
-    if (event._bubbles) {
-        event._event_phase = .bubbling_phase;
-        for (path[1..]) |current_target| {
-            if (self.lookup.get(@intFromPtr(current_target))) |list| {
-                try self.dispatchPhase(list, current_target, event, was_handled, false);
-                if (event._stop_propagation) {
-                    break;
-                }
-            }
-        }
-    }
-}
-
-fn dispatchPhase(self: *EventManager, list: *std.DoublyLinkedList, current_target: *EventTarget, event: *Event, was_handled: *bool, comptime capture_only: ?bool) !void {
-    const page = self.page;
-    const typ = event._type_string;
+    // This is a slightly simplified version of what you'll find in dispatchPhase
+    // It is simpler because, for direct dispatching, we know there's no ancestors
+    // and only the single target phase.
 
     // Track dispatch depth for deferred removal
     self.dispatch_depth += 1;
@@ -330,16 +306,6 @@ fn dispatchPhase(self: *EventManager, list: *std.DoublyLinkedList, current_targe
         is_done = (listener == last_listener);
         node = n.next;
 
-        // Skip non-matching listeners
-        if (!listener.typ.eql(typ)) {
-            continue;
-        }
-        if (comptime capture_only) |capture| {
-            if (listener.capture != capture) {
-                continue;
-            }
-        }
-
         // Skip removed listeners
         if (listener.removed) {
             continue;
@@ -358,6 +324,280 @@ fn dispatchPhase(self: *EventManager, list: *std.DoublyLinkedList, current_targe
             self.removeListener(list, listener);
         }
 
+        was_dispatched = true;
+        event._current_target = target;
+
+        switch (listener.function) {
+            .value => |value| try ls.toLocal(value).callWithThis(void, target, .{event}),
+            .string => |string| {
+                const str = try page.call_arena.dupeZ(u8, string.str());
+                try ls.local.eval(str, null);
+            },
+            .object => |obj_global| {
+                const obj = ls.toLocal(obj_global);
+                if (try obj.getFunction("handleEvent")) |handleEvent| {
+                    try handleEvent.callWithThis(void, obj, .{event});
+                }
+            },
+        }
+
+        if (event._stop_immediate_propagation) {
+            return;
+        }
+    }
+}
+
+fn getFunction(handler: anytype, local: *const js.Local) ?js.Function {
+    const T = @TypeOf(handler);
+    const ti = @typeInfo(T);
+
+    if (ti == .null) {
+        return null;
+    }
+    if (ti == .optional) {
+        return getFunction(handler orelse return null, local);
+    }
+    return switch (T) {
+        js.Function => handler,
+        js.Function.Temp => local.toLocal(handler),
+        js.Function.Global => local.toLocal(handler),
+        else => @compileError("handler must be null or \\??js.Function(\\.(Temp|Global))?"),
+    };
+}
+
+fn dispatchNode(self: *EventManager, target: *Node, event: *Event, comptime opts: DispatchOpts) !void {
+    const ShadowRoot = @import("webapi/ShadowRoot.zig");
+
+    {
+        const et = target.asEventTarget();
+        event._target = et;
+        event._dispatch_target = et; // Store original target for composedPath()
+    }
+
+    const page = self.page;
+    var was_handled = false;
+
+    defer if (was_handled) {
+        var ls: js.Local.Scope = undefined;
+        page.js.localScope(&ls);
+        defer ls.deinit();
+        ls.local.runMicrotasks();
+    };
+
+    const activation_state = ActivationState.create(event, target, page);
+
+    // Defer runs even on early return - ensures event phase is reset
+    // and default actions execute (unless prevented)
+    defer {
+        event._event_phase = .none;
+        event._stop_propagation = false;
+        event._stop_immediate_propagation = false;
+        // Handle checkbox/radio activation rollback or commit
+        if (activation_state) |state| {
+            state.restore(event, page);
+        }
+
+        // Execute default action if not prevented
+        if (event._prevent_default) {
+            // can't return in a defer (╯°□°)╯︵ ┻━┻
+        } else if (event._type_string.eql(comptime .wrap("click"))) {
+            page.handleClick(target) catch |err| {
+                log.warn(.event, "page.click", .{ .err = err });
+            };
+        } else if (event._type_string.eql(comptime .wrap("keydown"))) {
+            page.handleKeydown(target, event) catch |err| {
+                log.warn(.event, "page.keydown", .{ .err = err });
+            };
+        }
+    }
+
+    var path_len: usize = 0;
+    var path_buffer: [128]*EventTarget = undefined;
+
+    var node: ?*Node = target;
+    while (node) |n| {
+        if (path_len >= path_buffer.len) break;
+        path_buffer[path_len] = n.asEventTarget();
+        path_len += 1;
+
+        // Check if this node is a shadow root
+        if (n.is(ShadowRoot)) |shadow| {
+            event._needs_retargeting = true;
+
+            // If event is not composed, stop at shadow boundary
+            if (!event._composed) {
+                break;
+            }
+
+            // Otherwise, jump to the shadow host and continue
+            node = shadow._host.asNode();
+            continue;
+        }
+
+        node = n._parent;
+    }
+
+    // Even though the window isn't part of the DOM, most events propagate
+    // through it in the capture phase (unless we stopped at a shadow boundary)
+    // The only explicit exception is "load"
+    if (event._type_string.eql(comptime .wrap("load")) == false) {
+        if (path_len < path_buffer.len) {
+            path_buffer[path_len] = page.window.asEventTarget();
+            path_len += 1;
+        }
+    }
+
+    const path = path_buffer[0..path_len];
+
+    // Phase 1: Capturing phase (root → target, excluding target)
+    // This happens for all events, regardless of bubbling
+    event._event_phase = .capturing_phase;
+    var i: usize = path_len;
+    while (i > 1) {
+        i -= 1;
+        if (event._stop_propagation) return;
+        const current_target = path[i];
+        if (self.lookup.get(.{
+            .event_target = @intFromPtr(current_target),
+            .type_string = event._type_string,
+        })) |list| {
+            try self.dispatchPhase(list, current_target, event, &was_handled, comptime .init(true, opts));
+        }
+    }
+
+    // Phase 2: At target
+    if (event._stop_propagation) return;
+    event._event_phase = .at_target;
+    const target_et = target.asEventTarget();
+
+    blk: {
+        // Get inline handler (e.g., onclick property) for this target
+        if (self.getInlineHandler(target_et, event)) |inline_handler| {
+            was_handled = true;
+            event._current_target = target_et;
+
+            var ls: js.Local.Scope = undefined;
+            self.page.js.localScope(&ls);
+            defer ls.deinit();
+
+            try ls.toLocal(inline_handler).callWithThis(void, target_et, .{event});
+
+            if (event._stop_propagation) {
+                return;
+            }
+
+            if (event._stop_immediate_propagation) {
+                break :blk;
+            }
+        }
+
+        if (self.lookup.get(.{
+            .type_string = event._type_string,
+            .event_target = @intFromPtr(target_et),
+        })) |list| {
+            try self.dispatchPhase(list, target_et, event, &was_handled, comptime .init(null, opts));
+            if (event._stop_propagation) {
+                return;
+            }
+        }
+    }
+
+    // Phase 3: Bubbling phase (target → root, excluding target)
+    // This only happens if the event bubbles
+    if (event._bubbles) {
+        event._event_phase = .bubbling_phase;
+        for (path[1..]) |current_target| {
+            if (event._stop_propagation) break;
+            if (self.lookup.get(.{
+                .type_string = event._type_string,
+                .event_target = @intFromPtr(current_target),
+            })) |list| {
+                try self.dispatchPhase(list, current_target, event, &was_handled, comptime .init(false, opts));
+            }
+        }
+    }
+}
+
+const DispatchPhaseOpts = struct {
+    capture_only: ?bool = null,
+    apply_ignore: bool = false,
+
+    fn init(capture_only: ?bool, opts: DispatchOpts) DispatchPhaseOpts {
+        return .{
+            .capture_only = capture_only,
+            .apply_ignore = opts.apply_ignore,
+        };
+    }
+};
+
+fn dispatchPhase(self: *EventManager, list: *std.DoublyLinkedList, current_target: *EventTarget, event: *Event, was_handled: *bool, comptime opts: DispatchPhaseOpts) !void {
+    const page = self.page;
+
+    // Track dispatch depth for deferred removal
+    self.dispatch_depth += 1;
+    defer {
+        const dispatch_depth = self.dispatch_depth;
+        // Only destroy deferred listeners when we exit the outermost dispatch
+        if (dispatch_depth == 1) {
+            for (self.deferred_removals.items) |removal| {
+                removal.list.remove(&removal.listener.node);
+                self.listener_pool.destroy(removal.listener);
+            }
+            self.deferred_removals.clearRetainingCapacity();
+        } else {
+            self.dispatch_depth = dispatch_depth - 1;
+        }
+    }
+
+    // Use the last listener in the list as sentinel - listeners added during dispatch will be after it
+    const last_node = list.last orelse return;
+    const last_listener: *Listener = @alignCast(@fieldParentPtr("node", last_node));
+
+    // Iterate through the list, stopping after we've encountered the last_listener
+    var node = list.first;
+    var is_done = false;
+    node_loop: while (node) |n| {
+        if (is_done) {
+            break;
+        }
+
+        const listener: *Listener = @alignCast(@fieldParentPtr("node", n));
+        is_done = (listener == last_listener);
+        node = n.next;
+
+        // Skip non-matching listeners
+        if (comptime opts.capture_only) |capture| {
+            if (listener.capture != capture) {
+                continue;
+            }
+        }
+
+        // Skip removed listeners
+        if (listener.removed) {
+            continue;
+        }
+
+        // If the listener has an aborted signal, remove it and skip
+        if (listener.signal) |signal| {
+            if (signal.getAborted()) {
+                self.removeListener(list, listener);
+                continue;
+            }
+        }
+
+        if (comptime opts.apply_ignore) {
+            for (self.ignore_list.items) |ignored| {
+                if (ignored == listener) {
+                    continue :node_loop;
+                }
+            }
+        }
+
+        // Remove "once" listeners BEFORE calling them so nested dispatches don't see them
+        if (listener.once) {
+            self.removeListener(list, listener);
+        }
+
         was_handled.* = true;
         event._current_target = current_target;
 
@@ -367,13 +607,18 @@ fn dispatchPhase(self: *EventManager, list: *std.DoublyLinkedList, current_targe
             event._target = getAdjustedTarget(original_target, current_target);
         }
 
+        var ls: js.Local.Scope = undefined;
+        page.js.localScope(&ls);
+        defer ls.deinit();
+
         switch (listener.function) {
-            .value => |value| try value.callWithThis(void, current_target, .{event}),
+            .value => |value| try ls.toLocal(value).callWithThis(void, current_target, .{event}),
             .string => |string| {
                 const str = try page.call_arena.dupeZ(u8, string.str());
-                try self.page.js.eval(str, null);
+                try ls.local.eval(str, null);
             },
-            .object => |obj| {
+            .object => |obj_global| {
+                const obj = ls.toLocal(obj_global);
                 if (try obj.getFunction("handleEvent")) |handleEvent| {
                     try handleEvent.callWithThis(void, obj, .{event});
                 }
@@ -391,9 +636,20 @@ fn dispatchPhase(self: *EventManager, list: *std.DoublyLinkedList, current_targe
     }
 }
 
-//  Non-Node dispatching (XHR, Window without propagation)
-fn dispatchAll(self: *EventManager, list: *std.DoublyLinkedList, current_target: *EventTarget, event: *Event, was_handled: *bool) !void {
-    return self.dispatchPhase(list, current_target, event, was_handled, null);
+fn getInlineHandler(self: *EventManager, target: *EventTarget, event: *Event) ?js.Function.Global {
+    const global_event_handlers = @import("webapi/global_event_handlers.zig");
+    const handler_type = global_event_handlers.fromEventType(event._type_string.str()) orelse return null;
+
+    // Look up the inline handler for this target
+    const html_element = switch (target._type) {
+        .node => |n| n.is(Element.Html) orelse return null,
+        else => return null,
+    };
+
+    return html_element.getAttributeFunction(handler_type, self.page) catch |err| {
+        log.warn(.event, "inline html callback", .{ .type = handler_type, .err = err });
+        return null;
+    };
 }
 
 fn removeListener(self: *EventManager, list: *std.DoublyLinkedList, listener: *Listener) void {
@@ -408,7 +664,7 @@ fn removeListener(self: *EventManager, list: *std.DoublyLinkedList, listener: *L
     }
 }
 
-fn findListener(list: *const std.DoublyLinkedList, typ: []const u8, callback: Callback, capture: bool) ?*Listener {
+fn findListener(list: *const std.DoublyLinkedList, callback: Callback, capture: bool) ?*Listener {
     var node = list.first;
     while (node) |n| {
         node = n.next;
@@ -423,9 +679,6 @@ fn findListener(list: *const std.DoublyLinkedList, typ: []const u8, callback: Ca
         if (listener.capture != capture) {
             continue;
         }
-        if (!listener.typ.eqlSlice(typ)) {
-            continue;
-        }
         return listener;
     }
     return null;
@@ -443,20 +696,20 @@ const Listener = struct {
 };
 
 const Function = union(enum) {
-    value: js.Function,
+    value: js.Function.Global,
     string: String,
-    object: js.Object,
+    object: js.Object.Global,
 
     fn eqlFunction(self: Function, func: js.Function) bool {
         return switch (self) {
-            .value => |v| return v.id == func.id,
+            .value => |v| v.isEqual(func),
             else => false,
         };
     }
 
     fn eqlObject(self: Function, obj: js.Object) bool {
         return switch (self) {
-            .object => |o| return o.getId() == obj.getId(),
+            .object => |o| return o.isEqual(obj),
             else => false,
         };
     }
@@ -514,3 +767,144 @@ fn isAncestorOrSelf(ancestor: *Node, node: *Node) bool {
 
     return false;
 }
+
+// Handles the default action for clicking on input checked/radio. Maybe this
+// could be generalized if needed, but I'm not sure. This wasn't obvious to me
+// but when an input is clicked, it's important to think about both the intent
+// and the actual result. Imagine you have an unchecked checkbox. When clicked,
+// the checkbox immediately becomes checked, and event handlers see this "checked"
+// intent. But a listener can preventDefault() in which case the check we did at
+// the start will be undone.
+// This is a bit more complicated for radio buttons, as the checking/unchecking
+// and the rollback can impact a different radio input. So if you "check" a radio
+// the intent is that it becomes checked and whatever was checked before becomes
+// unchecked, so that if you have to rollback (because of a preventDefault())
+// then both inputs have to revert to their original values.
+const ActivationState = struct {
+    old_checked: bool,
+    input: *Element.Html.Input,
+    previously_checked_radio: ?*Input,
+
+    const Input = Element.Html.Input;
+
+    fn create(event: *const Event, target: *Node, page: *Page) ?ActivationState {
+        if (event._type_string.eql(comptime .wrap("click")) == false) {
+            return null;
+        }
+
+        const input = target.is(Element.Html.Input) orelse return null;
+        if (input._input_type != .checkbox and input._input_type != .radio) {
+            return null;
+        }
+
+        const old_checked = input._checked;
+        var previously_checked_radio: ?*Element.Html.Input = null;
+
+        // For radio buttons, find the currently checked radio in the group
+        if (input._input_type == .radio and !old_checked) {
+            previously_checked_radio = try findCheckedRadioInGroup(input, page);
+        }
+
+        // Toggle checkbox or check radio (which unchecks others in group)
+        const new_checked = if (input._input_type == .checkbox) !old_checked else true;
+        try input.setChecked(new_checked, page);
+
+        return .{
+            .input = input,
+            .old_checked = old_checked,
+            .previously_checked_radio = previously_checked_radio,
+        };
+    }
+
+    fn restore(self: *const ActivationState, event: *const Event, page: *Page) void {
+        const input = self.input;
+        if (event._prevent_default) {
+            // Rollback: restore previous state
+            input._checked = self.old_checked;
+            input._checked_dirty = true;
+            if (self.previously_checked_radio) |prev_radio| {
+                prev_radio._checked = true;
+                prev_radio._checked_dirty = true;
+            }
+            return;
+        }
+
+        // Commit: fire input and change events only if state actually changed
+        // and the element is connected to a document (detached elements don't fire).
+        // For checkboxes, state always changes. For radios, only if was unchecked.
+        const state_changed = (input._input_type == .checkbox) or !self.old_checked;
+        if (state_changed and input.asElement().asNode().isConnected()) {
+            fireEvent(page, input, "input") catch |err| {
+                log.warn(.event, "input event", .{ .err = err });
+            };
+            fireEvent(page, input, "change") catch |err| {
+                log.warn(.event, "change event", .{ .err = err });
+            };
+        }
+    }
+
+    fn findCheckedRadioInGroup(input: *Input, page: *Page) !?*Input {
+        const elem = input.asElement();
+
+        const name = elem.getAttributeSafe(comptime .wrap("name")) orelse return null;
+        if (name.len == 0) {
+            return null;
+        }
+
+        const form = input.getForm(page);
+
+        // Walk from the root of the tree containing this element
+        // This handles both document-attached and orphaned elements
+        const root = elem.asNode().getRootNode(null);
+
+        const TreeWalker = @import("webapi/TreeWalker.zig");
+        var walker = TreeWalker.Full.init(root, .{});
+
+        while (walker.next()) |node| {
+            const other_element = node.is(Element) orelse continue;
+            const other_input = other_element.is(Input) orelse continue;
+
+            if (other_input._input_type != .radio) {
+                continue;
+            }
+
+            // Skip the input we're checking from
+            if (other_input == input) {
+                continue;
+            }
+
+            const other_name = other_element.getAttributeSafe(comptime .wrap("name")) orelse continue;
+            if (!std.mem.eql(u8, name, other_name)) {
+                continue;
+            }
+
+            // Check if same form context
+            const other_form = other_input.getForm(page);
+            if (form) |f| {
+                const of = other_form orelse continue;
+                if (f != of) {
+                    continue; // Different forms
+                }
+            } else if (other_form != null) {
+                continue; // form is null but other has a form
+            }
+
+            if (other_input._checked) {
+                return other_input;
+            }
+        }
+
+        return null;
+    }
+
+    // Fire input or change event
+    fn fireEvent(page: *Page, input: *Input, comptime typ: []const u8) !void {
+        const event = try Event.initTrusted(comptime .wrap(typ), .{
+            .bubbles = true,
+            .cancelable = false,
+        }, page);
+
+        const target = input.asElement().asEventTarget();
+        try page._event_manager.dispatch(target, event);
+    }
+};

src/browser/Factory.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -17,10 +17,8 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
-const assert = std.debug.assert;
 const builtin = @import("builtin");
 const reflect = @import("reflect.zig");
-const IS_DEBUG = builtin.mode == .Debug;
 
 const log = @import("../log.zig");
 const String = @import("../string.zig").String;
@@ -31,6 +29,7 @@ const Page = @import("Page.zig");
 const Node = @import("webapi/Node.zig");
 const Event = @import("webapi/Event.zig");
 const UIEvent = @import("webapi/event/UIEvent.zig");
+const MouseEvent = @import("webapi/event/MouseEvent.zig");
 const Element = @import("webapi/Element.zig");
 const Document = @import("webapi/Document.zig");
 const EventTarget = @import("webapi/EventTarget.zig");
@@ -38,10 +37,101 @@ const XMLHttpRequestEventTarget = @import("webapi/net/XMLHttpRequestEventTarget.
 const Blob = @import("webapi/Blob.zig");
 const AbstractRange = @import("webapi/AbstractRange.zig");
 
+const Allocator = std.mem.Allocator;
+
+const IS_DEBUG = builtin.mode == .Debug;
+const assert = std.debug.assert;
+
+// Shared across all frames of a Page.
 const Factory = @This();
-_page: *Page,
+
+_arena: Allocator,
 _slab: SlabAllocator,
 
+pub fn init(arena: Allocator) !*Factory {
+    const self = try arena.create(Factory);
+    self.* = .{
+        ._arena = arena,
+        ._slab = SlabAllocator.init(arena, 128),
+    };
+    return self;
+}
+
+// this is a root object
+pub fn eventTarget(self: *Factory, child: anytype) !*@TypeOf(child) {
+    return self.eventTargetWithAllocator(self._slab.allocator(), child);
+}
+
+pub fn eventTargetWithAllocator(_: *const Factory, allocator: Allocator, child: anytype) !*@TypeOf(child) {
+    const chain = try PrototypeChain(
+        &.{ EventTarget, @TypeOf(child) },
+    ).allocate(allocator);
+
+    const event_ptr = chain.get(0);
+    event_ptr.* = .{
+        ._type = unionInit(EventTarget.Type, chain.get(1)),
+    };
+    chain.setLeaf(1, child);
+
+    return chain.get(1);
+}
+
+pub fn standaloneEventTarget(self: *Factory, child: anytype) !*EventTarget {
+    const allocator = self._slab.allocator();
+    const et = try allocator.create(EventTarget);
+    et.* = .{ ._type = unionInit(EventTarget.Type, child) };
+    return et;
+}
+
+// this is a root object
+pub fn event(_: *const Factory, arena: Allocator, typ: String, child: anytype) !*@TypeOf(child) {
+    const chain = try PrototypeChain(
+        &.{ Event, @TypeOf(child) },
+    ).allocate(arena);
+
+    // Special case: Event has a _type_string field, so we need manual setup
+    const event_ptr = chain.get(0);
+    event_ptr.* = try eventInit(arena, typ, chain.get(1));
+    chain.setLeaf(1, child);
+
+    return chain.get(1);
+}
+
+pub fn uiEvent(_: *const Factory, arena: Allocator, typ: String, child: anytype) !*@TypeOf(child) {
+    const chain = try PrototypeChain(
+        &.{ Event, UIEvent, @TypeOf(child) },
+    ).allocate(arena);
+
+    // Special case: Event has a _type_string field, so we need manual setup
+    const event_ptr = chain.get(0);
+    event_ptr.* = try eventInit(arena, typ, chain.get(1));
+    chain.setMiddle(1, UIEvent.Type);
+    chain.setLeaf(2, child);
+
+    return chain.get(2);
+}
+
+pub fn mouseEvent(_: *const Factory, arena: Allocator, typ: String, mouse: MouseEvent, child: anytype) !*@TypeOf(child) {
+    const chain = try PrototypeChain(
+        &.{ Event, UIEvent, MouseEvent, @TypeOf(child) },
+    ).allocate(arena);
+
+    // Special case: Event has a _type_string field, so we need manual setup
+    const event_ptr = chain.get(0);
+    event_ptr.* = try eventInit(arena, typ, chain.get(1));
+    chain.setMiddle(1, UIEvent.Type);
+
+    // Set MouseEvent with all its fields
+    const mouse_ptr = chain.get(2);
+    mouse_ptr.* = mouse;
+    mouse_ptr._proto = chain.get(1);
+    mouse_ptr._type = unionInit(MouseEvent.Type, chain.get(3));
+
+    chain.setLeaf(3, child);
+
+    return chain.get(3);
+}
+
 fn PrototypeChain(comptime types: []const type) type {
     return struct {
         const Self = @This();
@@ -145,73 +235,20 @@ fn AutoPrototypeChain(comptime types: []const type) type {
     };
 }
 
-pub fn init(page: *Page) Factory {
-    return .{
-        ._page = page,
-        ._slab = SlabAllocator.init(page.arena, 128),
-    };
-}
-
-// this is a root object
-pub fn eventTarget(self: *Factory, child: anytype) !*@TypeOf(child) {
-    const allocator = self._slab.allocator();
-    const chain = try PrototypeChain(
-        &.{ EventTarget, @TypeOf(child) },
-    ).allocate(allocator);
-
-    const event_ptr = chain.get(0);
-    event_ptr.* = .{
-        ._type = unionInit(EventTarget.Type, chain.get(1)),
-    };
-    chain.setLeaf(1, child);
-
-    return chain.get(1);
-}
-
-fn eventInit(typ: []const u8, value: anytype, page: *Page) !Event {
+fn eventInit(arena: Allocator, typ: String, value: anytype) !Event {
     // Round to 2ms for privacy (browsers do this)
     const raw_timestamp = @import("../datetime.zig").milliTimestamp(.monotonic);
     const time_stamp = (raw_timestamp / 2) * 2;
 
     return .{
+        ._rc = 0,
+        ._arena = arena,
         ._type = unionInit(Event.Type, value),
-        ._type_string = try String.init(page.arena, typ, .{}),
+        ._type_string = typ,
         ._time_stamp = time_stamp,
     };
 }
 
-// this is a root object
-pub fn event(self: *Factory, typ: []const u8, child: anytype) !*@TypeOf(child) {
-    const allocator = self._slab.allocator();
-
-    const chain = try PrototypeChain(
-        &.{ Event, @TypeOf(child) },
-    ).allocate(allocator);
-
-    // Special case: Event has a _type_string field, so we need manual setup
-    const event_ptr = chain.get(0);
-    event_ptr.* = try eventInit(typ, chain.get(1), self._page);
-    chain.setLeaf(1, child);
-
-    return chain.get(1);
-}
-
-pub fn uiEvent(self: *Factory, typ: []const u8, child: anytype) !*@TypeOf(child) {
-    const allocator = self._slab.allocator();
-
-    const chain = try PrototypeChain(
-        &.{ Event, UIEvent, @TypeOf(child) },
-    ).allocate(allocator);
-
-    // Special case: Event has a _type_string field, so we need manual setup
-    const event_ptr = chain.get(0);
-    event_ptr.* = try eventInit(typ, chain.get(1), self._page);
-    chain.setMiddle(1, UIEvent.Type);
-    chain.setLeaf(2, child);
-
-    return chain.get(2);
-}
-
 pub fn blob(self: *Factory, child: anytype) !*@TypeOf(child) {
     const allocator = self._slab.allocator();
 
@@ -306,7 +343,7 @@ pub fn svgElement(self: *Factory, tag_name: []const u8, child: anytype) !*@TypeO
     chain.setMiddle(2, Element.Type);
 
     // will never allocate, can't fail
-    const tag_name_str = String.init(self._page.arena, tag_name, .{}) catch unreachable;
+    const tag_name_str = String.init(self._arena, tag_name, .{}) catch unreachable;
 
     // Manually set Element.Svg with the tag_name
     chain.set(3, .{
@@ -319,9 +356,7 @@ pub fn svgElement(self: *Factory, tag_name: []const u8, child: anytype) !*@TypeO
     return chain.get(4);
 }
 
-pub fn xhrEventTarget(self: *Factory, child: anytype) !*@TypeOf(child) {
-    const allocator = self._slab.allocator();
-
+pub fn xhrEventTarget(_: *const Factory, allocator: Allocator, child: anytype) !*@TypeOf(child) {
     return try AutoPrototypeChain(
         &.{ EventTarget, XMLHttpRequestEventTarget, @TypeOf(child) },
     ).create(allocator, child);
@@ -336,32 +371,6 @@ pub fn textTrackCue(self: *Factory, child: anytype) !*@TypeOf(child) {
     ).create(allocator, child);
 }
 
-fn hasChainRoot(comptime T: type) bool {
-    // Check if this is a root
-    if (@hasDecl(T, "_prototype_root")) {
-        return true;
-    }
-
-    // If no _proto field, we're at the top but not a recognized root
-    if (!@hasField(T, "_proto")) return false;
-
-    // Get the _proto field's type and recurse
-    const fields = @typeInfo(T).@"struct".fields;
-    inline for (fields) |field| {
-        if (std.mem.eql(u8, field.name, "_proto")) {
-            const ProtoType = reflect.Struct(field.type);
-            return hasChainRoot(ProtoType);
-        }
-    }
-
-    return false;
-}
-
-fn isChainType(comptime T: type) bool {
-    if (@hasField(T, "_proto")) return false;
-    return comptime hasChainRoot(T);
-}
-
 pub fn destroy(self: *Factory, value: anytype) void {
     const S = reflect.Struct(@TypeOf(value));
 
@@ -378,35 +387,21 @@ pub fn destroy(self: *Factory, value: anytype) void {
         }
     }
 
-    if (comptime isChainType(S)) {
-        self.destroyChain(value, true, 0, std.mem.Alignment.@"1");
+    if (comptime @hasField(S, "_proto")) {
+        self.destroyChain(value, 0, std.mem.Alignment.@"1");
     } else {
         self.destroyStandalone(value);
     }
 }
 
 pub fn destroyStandalone(self: *Factory, value: anytype) void {
-    const S = reflect.Struct(@TypeOf(value));
-    assert(!@hasDecl(S, "_prototype_root"));
-
     const allocator = self._slab.allocator();
-
-    if (@hasDecl(S, "deinit")) {
-        // And it has a deinit, we'll call it
-        switch (@typeInfo(@TypeOf(S.deinit)).@"fn".params.len) {
-            1 => value.deinit(),
-            2 => value.deinit(self._page),
-            else => @compileLog(@typeName(S) ++ " has an invalid deinit function"),
-        }
-    }
-
     allocator.destroy(value);
 }
 
 fn destroyChain(
     self: *Factory,
     value: anytype,
-    comptime first: bool,
     old_size: usize,
     old_align: std.mem.Alignment,
 ) void {
@@ -415,42 +410,20 @@ fn destroyChain(
 
     // aligns the old size to the alignment of this element
     const current_size = std.mem.alignForward(usize, old_size, @alignOf(S));
-    const alignment = std.mem.Alignment.fromByteUnits(@alignOf(S));
-
-    const new_align = std.mem.Alignment.max(old_align, alignment);
     const new_size = current_size + @sizeOf(S);
-
-    // This is initially called from a deinit. We don't want to call that
-    // same deinit. So when this is the first time destroyChain is called
-    // we don't call deinit (because we're in that deinit)
-    if (!comptime first) {
-        // But if it isn't the first time
-        if (@hasDecl(S, "deinit")) {
-            // And it has a deinit, we'll call it
-            switch (@typeInfo(@TypeOf(S.deinit)).@"fn".params.len) {
-                1 => value.deinit(),
-                2 => value.deinit(self._page),
-                else => @compileLog(@typeName(S) ++ " has an invalid deinit function"),
-            }
-        }
-    }
+    const new_align = std.mem.Alignment.max(old_align, std.mem.Alignment.of(S));
 
     if (@hasField(S, "_proto")) {
-        self.destroyChain(value._proto, false, new_size, new_align);
-    } else if (@hasDecl(S, "JsApi")) {
-        // Doesn't have a _proto, but has a JsApi.
-        if (self._page.js.removeTaggedMapping(@intFromPtr(value))) |tagged| {
-            allocator.destroy(tagged);
-        }
+        self.destroyChain(value._proto, new_size, new_align);
     } else {
         // no proto so this is the head of the chain.
         // we use this as the ptr to the start of the chain.
         // and we have summed up the length.
         assert(@hasDecl(S, "_prototype_root"));
 
-        const memory_ptr: [*]const u8 = @ptrCast(value);
+        const memory_ptr: [*]u8 = @ptrCast(@constCast(value));
         const len = std.mem.alignForward(usize, new_size, new_align.toByteUnits());
-        allocator.free(memory_ptr[0..len]);
+        allocator.rawFree(memory_ptr[0..len], new_align, @returnAddress());
     }
 }
 

src/browser/Mime.zig

@@ -24,10 +24,11 @@ params: []const u8 = "",
 // IANA defines max. charset value length as 40.
 // We keep 41 for null-termination since HTML parser expects in this format.
 charset: [41]u8 = default_charset,
-charset_len: usize = 5,
+charset_len: usize = default_charset_len,
 
 /// String "UTF-8" continued by null characters.
-pub const default_charset = .{ 'U', 'T', 'F', '-', '8' } ++ .{0} ** 36;
+const default_charset = .{ 'U', 'T', 'F', '-', '8' } ++ .{0} ** 36;
+const default_charset_len = 5;
 
 /// Mime with unknown Content-Type, empty params and empty charset.
 pub const unknown = Mime{ .content_type = .{ .unknown = {} } };
@@ -38,6 +39,10 @@ pub const ContentTypeEnum = enum {
     text_javascript,
     text_plain,
     text_css,
+    image_jpeg,
+    image_gif,
+    image_png,
+    image_webp,
     application_json,
     unknown,
     other,
@@ -49,6 +54,10 @@ pub const ContentType = union(ContentTypeEnum) {
     text_javascript: void,
     text_plain: void,
     text_css: void,
+    image_jpeg: void,
+    image_gif: void,
+    image_png: void,
+    image_webp: void,
     application_json: void,
     unknown: void,
     other: struct { type: []const u8, sub_type: []const u8 },
@@ -61,6 +70,10 @@ pub fn contentTypeString(mime: *const Mime) []const u8 {
         .text_javascript => "application/javascript",
         .text_plain => "text/plain",
         .text_css => "text/css",
+        .image_jpeg => "image/jpeg",
+        .image_png => "image/png",
+        .image_gif => "image/gif",
+        .image_webp => "image/webp",
         .application_json => "application/json",
         else => "",
     };
@@ -115,17 +128,17 @@ pub fn parse(input: []u8) !Mime {
 
     const params = trimLeft(normalized[type_len..]);
 
-    var charset: [41]u8 = undefined;
-    var charset_len: usize = undefined;
+    var charset: [41]u8 = default_charset;
+    var charset_len: usize = default_charset_len;
 
     var it = std.mem.splitScalar(u8, params, ';');
     while (it.next()) |attr| {
-        const i = std.mem.indexOfScalarPos(u8, attr, 0, '=') orelse return error.Invalid;
+        const i = std.mem.indexOfScalarPos(u8, attr, 0, '=') orelse continue;
         const name = trimLeft(attr[0..i]);
 
         const value = trimRight(attr[i + 1 ..]);
         if (value.len == 0) {
-            return error.Invalid;
+            continue;
         }
 
         const attribute_name = std.meta.stringToEnum(enum {
@@ -138,7 +151,7 @@ pub fn parse(input: []u8) !Mime {
                     break;
                 }
 
-                const attribute_value = try parseCharset(value);
+                const attribute_value = parseCharset(value) catch continue;
                 @memcpy(charset[0..attribute_value.len], attribute_value);
                 // Null-terminate right after attribute value.
                 charset[attribute_value.len] = 0;
@@ -243,6 +256,11 @@ fn parseContentType(value: []const u8) !struct { ContentType, usize } {
         @"application/javascript",
         @"application/x-javascript",
 
+        @"image/jpeg",
+        @"image/png",
+        @"image/gif",
+        @"image/webp",
+
         @"application/json",
     }, type_name)) |known_type| {
         const ct: ContentType = switch (known_type) {
@@ -251,6 +269,10 @@ fn parseContentType(value: []const u8) !struct { ContentType, usize } {
             .@"text/javascript", .@"application/javascript", .@"application/x-javascript" => .{ .text_javascript = {} },
             .@"text/plain" => .{ .text_plain = {} },
             .@"text/css" => .{ .text_css = {} },
+            .@"image/jpeg" => .{ .image_jpeg = {} },
+            .@"image/png" => .{ .image_png = {} },
+            .@"image/gif" => .{ .image_gif = {} },
+            .@"image/webp" => .{ .image_webp = {} },
             .@"application/json" => .{ .application_json = {} },
         };
         return .{ ct, attribute_start };
@@ -313,6 +335,19 @@ test "Mime: invalid" {
         "text/ html",
         "text / html",
         "text/html other",
+    };
+
+    for (invalids) |invalid| {
+        const mutable_input = try testing.arena_allocator.dupe(u8, invalid);
+        try testing.expectError(error.Invalid, Mime.parse(mutable_input));
+    }
+}
+
+test "Mime: malformed parameters are ignored" {
+    defer testing.reset();
+
+    // These should all parse successfully as text/html with malformed params ignored
+    const valid_with_malformed_params = [_][]const u8{
         "text/html; x",
         "text/html; x=",
         "text/html; x=  ",
@@ -321,11 +356,13 @@ test "Mime: invalid" {
         "text/html; charset=\"\"",
         "text/html; charset=\"",
         "text/html; charset=\"\\",
+        "text/html;\"",
     };
 
-    for (invalids) |invalid| {
-        const mutable_input = try testing.arena_allocator.dupe(u8, invalid);
-        try testing.expectError(error.Invalid, Mime.parse(mutable_input));
+    for (valid_with_malformed_params) |input| {
+        const mutable_input = try testing.arena_allocator.dupe(u8, input);
+        const mime = try Mime.parse(mutable_input);
+        try testing.expectEqual(.text_html, std.meta.activeTag(mime.content_type));
     }
 }
 
@@ -358,6 +395,11 @@ test "Mime: parse common" {
 
     try expect(.{ .content_type = .{ .application_json = {} } }, "application/json");
     try expect(.{ .content_type = .{ .text_css = {} } }, "text/css");
+
+    try expect(.{ .content_type = .{ .image_jpeg = {} } }, "image/jpeg");
+    try expect(.{ .content_type = .{ .image_png = {} } }, "image/png");
+    try expect(.{ .content_type = .{ .image_gif = {} } }, "image/gif");
+    try expect(.{ .content_type = .{ .image_webp = {} } }, "image/webp");
 }
 
 test "Mime: parse uncommon" {
@@ -409,6 +451,12 @@ test "Mime: parse charset" {
         .charset = "custom-non-standard-charset-value",
         .params = "charset=\"custom-non-standard-charset-value\"",
     }, "text/xml;charset=\"custom-non-standard-charset-value\"");
+
+    try expect(.{
+        .content_type = .{ .text_html = {} },
+        .charset = "UTF-8",
+        .params = "x=\"",
+    }, "text/html;x=\"");
 }
 
 test "Mime: isHTML" {

src/browser/ScriptManager.zig

@@ -17,20 +17,22 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
+const lp = @import("lightpanda");
 const builtin = @import("builtin");
 
-const js = @import("js/js.zig");
 const log = @import("../log.zig");
+const Http = @import("../http/Http.zig");
+const String = @import("../string.zig").String;
 
+const js = @import("js/js.zig");
 const URL = @import("URL.zig");
 const Page = @import("Page.zig");
 const Browser = @import("Browser.zig");
-const Http = @import("../http/Http.zig");
 
 const Element = @import("webapi/Element.zig");
 
 const Allocator = std.mem.Allocator;
-const ArrayListUnmanaged = std.ArrayListUnmanaged;
+const ArrayList = std.ArrayList;
 
 const IS_DEBUG = builtin.mode == .Debug;
 
@@ -82,10 +84,11 @@ imported_modules: std.StringHashMapUnmanaged(ImportedModule),
 // importmap contains resolved urls.
 importmap: std.StringHashMapUnmanaged([:0]const u8),
 
-pub fn init(page: *Page) ScriptManager {
-    // page isn't fully initialized, we can setup our reference, but that's it.
-    const browser = page._session.browser;
-    const allocator = browser.allocator;
+// have we notified the page that all scripts are loaded (used to fire the "load"
+// event).
+page_notified_of_completion: bool,
+
+pub fn init(allocator: Allocator, http_client: *Http.Client, page: *Page) ScriptManager {
     return .{
         .page = page,
         .async_scripts = .{},
@@ -95,9 +98,10 @@ pub fn init(page: *Page) ScriptManager {
         .is_evaluating = false,
         .allocator = allocator,
         .imported_modules = .empty,
-        .client = browser.http_client,
+        .client = http_client,
         .static_scripts_done = false,
         .buffer_pool = BufferPool.init(allocator, 5),
+        .page_notified_of_completion = false,
         .script_pool = std.heap.MemoryPool(Script).init(allocator),
     };
 }
@@ -137,6 +141,12 @@ fn clearList(list: *std.DoublyLinkedList) void {
     }
 }
 
+pub fn getHeaders(self: *ScriptManager, url: [:0]const u8) !Http.Headers {
+    var headers = try self.client.newHeaders();
+    try self.page.headersForRequest(self.page.arena, url, &headers);
+    return headers;
+}
+
 pub fn addFromElement(self: *ScriptManager, comptime from_parser: bool, script_element: *Element.Html.Script, comptime ctx: []const u8) !void {
     if (script_element._executed) {
         // If a script tag gets dynamically created and added to the dom:
@@ -151,14 +161,14 @@ pub fn addFromElement(self: *ScriptManager, comptime from_parser: bool, script_e
     script_element._executed = true;
 
     const element = script_element.asElement();
-    if (element.getAttributeSafe("nomodule") != null) {
+    if (element.getAttributeSafe(comptime .wrap("nomodule")) != null) {
         // these scripts should only be loaded if we don't support modules
         // but since we do support modules, we can just skip them.
         return;
     }
 
     const kind: Script.Kind = blk: {
-        const script_type = element.getAttributeSafe("type") orelse break :blk .javascript;
+        const script_type = element.getAttributeSafe(comptime .wrap("type")) orelse break :blk .javascript;
         if (script_type.len == 0) {
             break :blk .javascript;
         }
@@ -185,7 +195,7 @@ pub fn addFromElement(self: *ScriptManager, comptime from_parser: bool, script_e
     var source: Script.Source = undefined;
     var remote_url: ?[:0]const u8 = null;
     const base_url = page.base();
-    if (element.getAttributeSafe("src")) |src| {
+    if (element.getAttributeSafe(comptime .wrap("src"))) |src| {
         if (try parseDataURI(page.arena, src)) |data_uri| {
             source = .{ .@"inline" = data_uri };
         } else {
@@ -216,12 +226,12 @@ pub fn addFromElement(self: *ScriptManager, comptime from_parser: bool, script_e
                 break :blk if (kind == .module) .@"defer" else .normal;
             }
 
-            if (element.getAttributeSafe("async") != null) {
+            if (element.getAttributeSafe(comptime .wrap("async")) != null) {
                 break :blk .async;
             }
 
             // Check for defer or module (before checking dynamic script default)
-            if (kind == .module or element.getAttributeSafe("defer") != null) {
+            if (kind == .module or element.getAttributeSafe(comptime .wrap("defer")) != null) {
                 break :blk .@"defer";
             }
 
@@ -251,17 +261,16 @@ pub fn addFromElement(self: *ScriptManager, comptime from_parser: bool, script_e
             script.deinit(true);
         }
 
-        var headers = try self.client.newHeaders();
-        try page.requestCookie(.{}).headersForRequest(page.arena, url, &headers);
-
         try self.client.request(.{
             .url = url,
             .ctx = script,
             .method = .GET,
-            .headers = headers,
+            .frame_id = page._frame_id,
+            .headers = try self.getHeaders(url),
             .blocking = is_blocking,
             .cookie_jar = &page._session.cookie_jar,
             .resource_type = .script,
+            .notification = page._session.notification,
             .start_callback = if (log.enabled(.http, .debug)) Script.startCallback else null,
             .header_callback = Script.headerCallback,
             .data_callback = Script.dataCallback,
@@ -270,11 +279,15 @@ pub fn addFromElement(self: *ScriptManager, comptime from_parser: bool, script_e
         });
 
         if (comptime IS_DEBUG) {
+            var ls: js.Local.Scope = undefined;
+            page.js.localScope(&ls);
+            defer ls.deinit();
+
             log.debug(.http, "script queue", .{
                 .ctx = ctx,
                 .url = remote_url.?,
                 .element = element,
-                .stack = page.js.stackTrace() catch "???",
+                .stack = ls.local.stackTrace() catch "???",
             });
         }
     }
@@ -352,15 +365,18 @@ pub fn preloadImport(self: *ScriptManager, url: [:0]const u8, referrer: []const
         .manager = self,
     };
 
-    var headers = try self.client.newHeaders();
-    try self.page.requestCookie(.{}).headersForRequest(self.page.arena, url, &headers);
+    const page = self.page;
 
     if (comptime IS_DEBUG) {
+        var ls: js.Local.Scope = undefined;
+        page.js.localScope(&ls);
+        defer ls.deinit();
+
         log.debug(.http, "script queue", .{
             .url = url,
             .ctx = "module",
             .referrer = referrer,
-            .stack = self.page.js.stackTrace() catch "???",
+            .stack = ls.local.stackTrace() catch "???",
         });
     }
 
@@ -368,9 +384,11 @@ pub fn preloadImport(self: *ScriptManager, url: [:0]const u8, referrer: []const
         .url = url,
         .ctx = script,
         .method = .GET,
-        .headers = headers,
-        .cookie_jar = &self.page._session.cookie_jar,
+        .frame_id = page._frame_id,
+        .headers = try self.getHeaders(url),
+        .cookie_jar = &page._session.cookie_jar,
         .resource_type = .script,
+        .notification = page._session.notification,
         .start_callback = if (log.enabled(.http, .debug)) Script.startCallback else null,
         .header_callback = Script.headerCallback,
         .data_callback = Script.dataCallback,
@@ -443,15 +461,17 @@ pub fn getAsyncImport(self: *ScriptManager, url: [:0]const u8, cb: ImportAsync.C
         } },
     };
 
-    var headers = try self.client.newHeaders();
-    try self.page.requestCookie(.{}).headersForRequest(self.page.arena, url, &headers);
-
+    const page = self.page;
     if (comptime IS_DEBUG) {
+        var ls: js.Local.Scope = undefined;
+        page.js.localScope(&ls);
+        defer ls.deinit();
+
         log.debug(.http, "script queue", .{
             .url = url,
             .ctx = "dynamic module",
             .referrer = referrer,
-            .stack = self.page.js.stackTrace() catch "???",
+            .stack = ls.local.stackTrace() catch "???",
         });
     }
 
@@ -467,10 +487,12 @@ pub fn getAsyncImport(self: *ScriptManager, url: [:0]const u8, cb: ImportAsync.C
     try self.client.request(.{
         .url = url,
         .method = .GET,
-        .headers = headers,
+        .frame_id = page._frame_id,
+        .headers = try self.getHeaders(url),
         .ctx = script,
         .resource_type = .script,
-        .cookie_jar = &self.page._session.cookie_jar,
+        .cookie_jar = &page._session.cookie_jar,
+        .notification = page._session.notification,
         .start_callback = if (log.enabled(.http, .debug)) Script.startCallback else null,
         .header_callback = Script.headerCallback,
         .data_callback = Script.dataCallback,
@@ -484,7 +506,7 @@ pub fn getAsyncImport(self: *ScriptManager, url: [:0]const u8, cb: ImportAsync.C
 // Called from the Page to let us know it's done parsing the HTML. Necessary that
 // we know this so that we know that we can start evaluating deferred scripts.
 pub fn staticScriptsDone(self: *ScriptManager) void {
-    std.debug.assert(self.static_scripts_done == false);
+    lp.assert(self.static_scripts_done == false, "ScriptManager.staticScriptsDone", .{});
     self.static_scripts_done = true;
     self.evaluate();
 }
@@ -554,19 +576,12 @@ fn evaluate(self: *ScriptManager) void {
     // Page makes this safe to call multiple times.
     page.documentIsLoaded();
 
-    if (self.async_scripts.first == null) {
-        // Looks like all async scripts are done too!
-        // Page makes this safe to call multiple times.
-        page.documentIsComplete();
+    if (self.async_scripts.first == null and self.page_notified_of_completion == false) {
+        self.page_notified_of_completion = true;
+        page.scriptsCompletedLoading();
     }
 }
 
-pub fn isDone(self: *const ScriptManager) bool {
-    return self.static_scripts_done and // page is done processing initial html
-        self.defer_scripts.first == null and // no deferred scripts
-        self.async_scripts.first == null; // no async scripts
-}
-
 fn parseImportmap(self: *ScriptManager, script: *const Script) !void {
     const content = script.source.content();
 
@@ -608,6 +623,18 @@ pub const Script = struct {
     script_element: ?*Element.Html.Script,
     manager: *ScriptManager,
 
+    // for debugging a rare production issue
+    header_callback_called: bool = false,
+
+    // for debugging a rare production issue
+    debug_transfer_id: u32 = 0,
+    debug_transfer_tries: u8 = 0,
+    debug_transfer_aborted: bool = false,
+    debug_transfer_bytes_received: usize = 0,
+    debug_transfer_notified_fail: bool = false,
+    debug_transfer_redirecting: bool = false,
+    debug_transfer_intercept_state: u8 = 0,
+
     const Kind = enum {
         module,
         javascript,
@@ -621,7 +648,7 @@ pub const Script = struct {
 
     const Source = union(enum) {
         @"inline": []const u8,
-        remote: std.ArrayListUnmanaged(u8),
+        remote: std.ArrayList(u8),
 
         fn content(self: Source) []const u8 {
             return switch (self) {
@@ -650,7 +677,7 @@ pub const Script = struct {
         log.debug(.http, "script fetch start", .{ .req = transfer });
     }
 
-    fn headerCallback(transfer: *Http.Transfer) !void {
+    fn headerCallback(transfer: *Http.Transfer) !bool {
         const self: *Script = @ptrCast(@alignCast(transfer.ctx));
         const header = &transfer.response_header.?;
         self.status = header.status;
@@ -660,7 +687,7 @@ pub const Script = struct {
                 .status = header.status,
                 .content_type = header.contentType(),
             });
-            return;
+            return false;
         }
 
         if (comptime IS_DEBUG) {
@@ -671,16 +698,44 @@ pub const Script = struct {
             });
         }
 
-        // If this isn't true, then we'll likely leak memory. If you don't
-        // set `CURLOPT_SUPPRESS_CONNECT_HEADERS` and CONNECT to a proxy, this
-        // will fail. This assertion exists to catch incorrect assumptions about
-        // how libcurl works, or about how we've configured it.
-        std.debug.assert(self.source.remote.capacity == 0);
+        {
+            // temp debug, trying to figure out why the next assert sometimes
+            // fails. Is the buffer just corrupt or is headerCallback really
+            // being called twice?
+            lp.assert(self.header_callback_called == false, "ScriptManager.Header recall", .{
+                .m = @tagName(std.meta.activeTag(self.mode)),
+                .a1 = self.debug_transfer_id,
+                .a2 = self.debug_transfer_tries,
+                .a3 = self.debug_transfer_aborted,
+                .a4 = self.debug_transfer_bytes_received,
+                .a5 = self.debug_transfer_notified_fail,
+                .a6 = self.debug_transfer_redirecting,
+                .a7 = self.debug_transfer_intercept_state,
+                .b1 = transfer.id,
+                .b2 = transfer._tries,
+                .b3 = transfer.aborted,
+                .b4 = transfer.bytes_received,
+                .b5 = transfer._notified_fail,
+                .b6 = transfer._redirecting,
+                .b7 = @intFromEnum(transfer._intercept_state),
+            });
+            self.header_callback_called = true;
+            self.debug_transfer_id = transfer.id;
+            self.debug_transfer_tries = transfer._tries;
+            self.debug_transfer_aborted = transfer.aborted;
+            self.debug_transfer_bytes_received = transfer.bytes_received;
+            self.debug_transfer_notified_fail = transfer._notified_fail;
+            self.debug_transfer_redirecting = transfer._redirecting;
+            self.debug_transfer_intercept_state = @intFromEnum(transfer._intercept_state);
+        }
+
+        lp.assert(self.source.remote.capacity == 0, "ScriptManager.Header buffer", .{ .capacity = self.source.remote.capacity });
         var buffer = self.manager.buffer_pool.get();
         if (transfer.getContentLength()) |cl| {
             try buffer.ensureTotalCapacity(self.manager.allocator, cl);
         }
         self.source = .{ .remote = buffer };
+        return true;
     }
 
     fn dataCallback(transfer: *Http.Transfer, data: []const u8) !void {
@@ -720,7 +775,7 @@ pub const Script = struct {
         log.warn(.http, "script fetch error", .{
             .err = err,
             .req = self.url,
-            .mode = self.mode,
+            .mode = std.meta.activeTag(self.mode),
             .kind = self.kind,
             .status = self.status,
         });
@@ -740,9 +795,13 @@ pub const Script = struct {
             return;
         }
 
-        if (self.mode == .import) {
-            const entry = self.manager.imported_modules.getPtr(self.url).?;
-            entry.state = .err;
+        switch (self.mode) {
+            .import_async => |ia| ia.callback(ia.data, error.FailedToLoad),
+            .import => {
+                const entry = manager.imported_modules.getPtr(self.url).?;
+                entry.state = .err;
+            },
+            else => {},
         }
         self.deinit(true);
         manager.evaluate();
@@ -750,10 +809,12 @@ pub const Script = struct {
 
     fn eval(self: *Script, page: *Page) void {
         // never evaluated, source is passed back to v8, via callbacks.
-        std.debug.assert(self.mode != .import_async);
+        if (comptime IS_DEBUG) {
+            std.debug.assert(self.mode != .import_async);
 
-        // never evaluated, source is passed back to v8 when asked for it.
-        std.debug.assert(self.mode != .import);
+            // never evaluated, source is passed back to v8 when asked for it.
+            std.debug.assert(self.mode != .import);
+        }
 
         if (page.isGoingAway()) {
             // don't evaluate scripts for a dying page.
@@ -782,6 +843,12 @@ pub const Script = struct {
             .cacheable = cacheable,
         });
 
+        var ls: js.Local.Scope = undefined;
+        page.js.localScope(&ls);
+        defer ls.deinit();
+
+        const local = &ls.local;
+
         // Handle importmap special case here: the content is a JSON containing
         // imports.
         if (self.kind == .importmap) {
@@ -792,25 +859,26 @@ pub const Script = struct {
                     .kind = self.kind,
                     .cacheable = cacheable,
                 });
-                self.executeCallback("error", script_element._on_error, page);
+                self.executeCallback(comptime .wrap("error"), page);
                 return;
             };
-            self.executeCallback("load", script_element._on_load, page);
+            self.executeCallback(comptime .wrap("load"), page);
             return;
         }
 
-        const js_context = page.js;
+        defer page._event_manager.clearIgnoreList();
+
         var try_catch: js.TryCatch = undefined;
-        try_catch.init(js_context);
+        try_catch.init(local);
         defer try_catch.deinit();
 
         const success = blk: {
             const content = self.source.content();
             switch (self.kind) {
-                .javascript => _ = js_context.eval(content, url) catch break :blk false,
+                .javascript => _ = local.eval(content, url) catch break :blk false,
                 .module => {
                     // We don't care about waiting for the evaluation here.
-                    js_context.module(false, content, url, cacheable) catch break :blk false;
+                    page.js.module(false, local, content, url, cacheable) catch break :blk false;
                 },
                 .importmap => unreachable, // handled before the try/catch.
             }
@@ -818,37 +886,32 @@ pub const Script = struct {
         };
 
         if (comptime IS_DEBUG) {
-            log.debug(.browser, "executed script", .{ .src = url, .success = success, .on_load = script_element._on_load != null });
+            log.debug(.browser, "executed script", .{ .src = url, .success = success });
         }
 
         defer {
-            // We should run microtasks even if script execution fails.
-            page.js.runMicrotasks();
-            _ = page.scheduler.run() catch |err| {
+            local.runMacrotasks(); // also runs microtasks
+            _ = page.js.scheduler.run() catch |err| {
                 log.err(.page, "scheduler", .{ .err = err });
             };
         }
 
         if (success) {
-            self.executeCallback("load", script_element._on_load, page);
+            self.executeCallback(comptime .wrap("load"), page);
             return;
         }
 
-        const msg = try_catch.err(page.arena) catch |err| @errorName(err) orelse "unknown";
+        const caught = try_catch.caughtOrError(page.call_arena, error.Unknown);
         log.warn(.js, "eval script", .{
             .url = url,
-            .err = msg,
-            .stack = try_catch.stack(page.call_arena) catch null,
-            .line = try_catch.sourceLineNumber() orelse 0,
+            .caught = caught,
             .cacheable = cacheable,
         });
 
-        self.executeCallback("error", script_element._on_error, page);
+        self.executeCallback(comptime .wrap("error"), page);
     }
 
-    fn executeCallback(self: *const Script, comptime typ: []const u8, cb_: ?js.Function, page: *Page) void {
-        const cb = cb_ orelse return;
-
+    fn executeCallback(self: *const Script, typ: String, page: *Page) void {
         const Event = @import("webapi/Event.zig");
         const event = Event.initTrusted(typ, .{}, page) catch |err| {
             log.warn(.js, "script internal callback", .{
@@ -858,14 +921,11 @@ pub const Script = struct {
             });
             return;
         };
-
-        var result: js.Function.Result = undefined;
-        cb.tryCall(void, .{event}, &result) catch {
+        page._event_manager.dispatchOpts(self.script_element.?.asNode().asEventTarget(), event, .{ .apply_ignore = true }) catch |err| {
             log.warn(.js, "script callback", .{
                 .url = self.url,
                 .type = typ,
-                .err = result.exception,
-                .stack = result.stack,
+                .err = err,
             });
         };
     }
@@ -878,11 +938,11 @@ const BufferPool = struct {
     max_concurrent_transfers: u8,
     mem_pool: std.heap.MemoryPool(Container),
 
-    const List = std.DoublyLinkedList;
+    const List = std.SinglyLinkedList;
 
     const Container = struct {
         node: List.Node,
-        buf: std.ArrayListUnmanaged(u8),
+        buf: std.ArrayList(u8),
     };
 
     fn init(allocator: Allocator, max_concurrent_transfers: u8) BufferPool {
@@ -907,7 +967,7 @@ const BufferPool = struct {
         self.mem_pool.deinit();
     }
 
-    fn get(self: *BufferPool) std.ArrayListUnmanaged(u8) {
+    fn get(self: *BufferPool) std.ArrayList(u8) {
         const node = self.available.popFirst() orelse {
             // return a new buffer
             return .{};
@@ -919,7 +979,7 @@ const BufferPool = struct {
         return container.buf;
     }
 
-    fn release(self: *BufferPool, buffer: ArrayListUnmanaged(u8)) void {
+    fn release(self: *BufferPool, buffer: ArrayList(u8)) void {
         // create mutable copy
         var b = buffer;
 
@@ -937,7 +997,7 @@ const BufferPool = struct {
         b.clearRetainingCapacity();
         container.* = .{ .buf = b, .node = .{} };
         self.count += 1;
-        self.available.append(&container.node);
+        self.available.prepend(&container.node);
     }
 };
 
@@ -985,23 +1045,35 @@ fn parseDataURI(allocator: Allocator, src: []const u8) !?[]const u8 {
 
     const uri = src[5..];
     const data_starts = std.mem.indexOfScalar(u8, uri, ',') orelse return null;
+    const data = uri[data_starts + 1 ..];
 
-    var data = uri[data_starts + 1 ..];
+    const unescaped = try URL.unescape(allocator, data);
 
-    // Extract the encoding.
     const metadata = uri[0..data_starts];
-    if (std.mem.endsWith(u8, metadata, ";base64")) {
-        const decoder = std.base64.standard.Decoder;
-        const decoded_size = try decoder.calcSizeForSlice(data);
-
-        const buffer = try allocator.alloc(u8, decoded_size);
-        errdefer allocator.free(buffer);
-
-        try decoder.decode(buffer, data);
-        data = buffer;
+    if (std.mem.endsWith(u8, metadata, ";base64") == false) {
+        return unescaped;
     }
 
-    return data;
+    // Forgiving base64 decode per WHATWG spec:
+    // https://infra.spec.whatwg.org/#forgiving-base64-decode
+    // Step 1: Remove all ASCII whitespace
+    var stripped = try std.ArrayList(u8).initCapacity(allocator, unescaped.len);
+    for (unescaped) |c| {
+        if (!std.ascii.isWhitespace(c)) {
+            stripped.appendAssumeCapacity(c);
+        }
+    }
+    const trimmed = std.mem.trimRight(u8, stripped.items, "=");
+
+    // Length % 4 == 1 is invalid
+    if (trimmed.len % 4 == 1) {
+        return error.InvalidCharacterError;
+    }
+
+    const decoded_size = std.base64.standard_no_pad.Decoder.calcSizeForSlice(trimmed) catch return error.InvalidCharacterError;
+    const buffer = try allocator.alloc(u8, decoded_size);
+    std.base64.standard_no_pad.Decoder.decode(buffer, trimmed) catch return error.InvalidCharacterError;
+    return buffer;
 }
 
 const testing = @import("../testing.zig");

src/browser/Session.zig

@@ -17,6 +17,8 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
+const lp = @import("lightpanda");
+const builtin = @import("builtin");
 
 const log = @import("../log.zig");
 
@@ -27,9 +29,10 @@ const History = @import("webapi/History.zig");
 
 const Page = @import("Page.zig");
 const Browser = @import("Browser.zig");
+const Notification = @import("../Notification.zig");
 
 const Allocator = std.mem.Allocator;
-const IS_DEBUG = @import("builtin").mode == .Debug;
+const IS_DEBUG = builtin.mode == .Debug;
 
 // Session is like a browser's tab.
 // It owns the js env and the loader for all the pages of the session.
@@ -38,45 +41,37 @@ const IS_DEBUG = @import("builtin").mode == .Debug;
 const Session = @This();
 
 browser: *Browser,
+notification: *Notification,
 
 // Used to create our Inspector and in the BrowserContext.
 arena: Allocator,
 
-// The page's arena is unsuitable for data that has to existing while
-// navigating from one page to another. For example, if we're clicking
-// on an HREF, the URL exists in the original page (where the click
-// originated) but also has to exist in the new page.
-// While we could use the Session's arena, this could accumulate a lot of
-// memory if we do many navigation events. The `transfer_arena` is meant to
-// bridge the gap: existing long enough to store any data needed to end one
-// page and start another.
-transfer_arena: Allocator,
-
-executor: js.ExecutionWorld,
 cookie_jar: storage.Cookie.Jar,
 storage_shed: storage.Shed,
 
 history: History,
 navigation: Navigation,
 
-page: ?*Page = null,
+page: ?Page,
 
-pub fn init(self: *Session, browser: *Browser) !void {
-    var executor = try browser.env.newExecutionWorld();
-    errdefer executor.deinit();
+frame_id_gen: u32,
 
+pub fn init(self: *Session, browser: *Browser, notification: *Notification) !void {
     const allocator = browser.app.allocator;
-    const session_allocator = browser.session_arena.allocator();
+    const arena = try browser.arena_pool.acquire();
+    errdefer browser.arena_pool.release(arena);
 
     self.* = .{
-        .browser = browser,
-        .executor = executor,
-        .storage_shed = .{},
-        .arena = session_allocator,
-        .cookie_jar = storage.Cookie.Jar.init(allocator),
-        .navigation = .{},
+        .page = null,
+        .arena = arena,
         .history = .{},
-        .transfer_arena = browser.transfer_arena.allocator(),
+        .frame_id_gen = 0,
+        // The prototype (EventTarget) for Navigation is created when a Page is created.
+        .navigation = .{ ._proto = undefined },
+        .storage_shed = .{},
+        .browser = browser,
+        .notification = notification,
+        .cookie_jar = storage.Cookie.Jar.init(allocator),
     };
 }
 
@@ -84,21 +79,21 @@ pub fn deinit(self: *Session) void {
     if (self.page != null) {
         self.removePage();
     }
+    const browser = self.browser;
+
     self.cookie_jar.deinit();
-    self.storage_shed.deinit(self.browser.app.allocator);
-    self.executor.deinit();
+    self.storage_shed.deinit(browser.app.allocator);
+    browser.arena_pool.release(self.arena);
 }
 
 // NOTE: the caller is not the owner of the returned value,
 // the pointer on Page is just returned as a convenience
 pub fn createPage(self: *Session) !*Page {
-    std.debug.assert(self.page == null);
+    lp.assert(self.page == null, "Session.createPage - page not null", .{});
 
-    const page_arena = &self.browser.page_arena;
-    _ = page_arena.reset(.{ .retain_with_limit = 1 * 1024 * 1024 });
-
-    self.page = try Page.init(page_arena.allocator(), self.browser.call_arena.allocator(), self);
-    const page = self.page.?;
+    self.page = @as(Page, undefined);
+    const page = &self.page.?;
+    try Page.init(page, self.nextFrameId(), self, null);
 
     // Creates a new NavigationEventTarget for this page.
     try self.navigation.onNewPage(page);
@@ -108,16 +103,15 @@ pub fn createPage(self: *Session) !*Page {
     }
     // start JS env
     // Inform CDP the main page has been created such that additional context for other Worlds can be created as well
-    self.browser.notification.dispatch(.page_created, page);
+    self.notification.dispatch(.page_created, page);
 
     return page;
 }
 
 pub fn removePage(self: *Session) void {
     // Inform CDP the page is going to be removed, allowing other worlds to remove themselves before the main one
-    self.browser.notification.dispatch(.page_remove, .{});
-
-    std.debug.assert(self.page != null);
+    self.notification.dispatch(.page_remove, .{});
+    lp.assert(self.page != null, "Session.removePage - page is null", .{});
 
     self.page.?.deinit();
     self.page = null;
@@ -129,48 +123,262 @@ pub fn removePage(self: *Session) void {
     }
 }
 
+pub fn replacePage(self: *Session) !*Page {
+    if (comptime IS_DEBUG) {
+        log.debug(.browser, "replace page", .{});
+    }
+
+    lp.assert(self.page != null, "Session.replacePage null page", .{});
+
+    var current = self.page.?;
+    const frame_id = current._frame_id;
+    const parent = current.parent;
+    current.deinit();
+
+    self.browser.env.memoryPressureNotification(.moderate);
+
+    self.page = @as(Page, undefined);
+    const page = &self.page.?;
+    try Page.init(page, frame_id, self, parent);
+    return page;
+}
+
 pub fn currentPage(self: *Session) ?*Page {
-    return self.page orelse return null;
+    return &(self.page orelse return null);
 }
 
 pub const WaitResult = enum {
     done,
     no_page,
     cdp_socket,
-    navigate,
 };
 
+pub fn findPage(self: *Session, frame_id: u32) ?*Page {
+    const page = self.currentPage() orelse return null;
+    return if (page._frame_id == frame_id) page else null;
+}
+
 pub fn wait(self: *Session, wait_ms: u32) WaitResult {
+    var page = &(self.page orelse return .no_page);
     while (true) {
-        const page = self.page orelse return .no_page;
-        switch (page.wait(wait_ms)) {
-            .navigate => self.processScheduledNavigation() catch return .done,
+        const wait_result = self._wait(page, wait_ms) catch |err| {
+            switch (err) {
+                error.JsError => {}, // already logged (with hopefully more context)
+                else => log.err(.browser, "session wait", .{
+                    .err = err,
+                    .url = page.url,
+                }),
+            }
+            return .done;
+        };
+
+        switch (wait_result) {
+            .done => {
+                if (page._queued_navigation == null) {
+                    return .done;
+                }
+                page = self.processScheduledNavigation(page) catch return .done;
+            },
             else => |result| return result,
         }
-        // if we've successfull navigated, we'll give the new page another
-        // page.wait(wait_ms)
     }
 }
 
-fn processScheduledNavigation(self: *Session) !void {
-    const qn = self.page.?._queued_navigation.?;
-    defer _ = self.browser.transfer_arena.reset(.{ .retain_with_limit = 8 * 1024 });
+fn _wait(self: *Session, page: *Page, wait_ms: u32) !WaitResult {
+    var timer = try std.time.Timer.start();
+    var ms_remaining = wait_ms;
 
-    // This was already aborted on the page, but it would be pretty
-    // bad if old requests went to the new page, so let's make double sure
-    self.browser.http_client.abort();
-    self.removePage();
+    const browser = self.browser;
+    var http_client = browser.http_client;
 
-    const page = self.createPage() catch |err| {
-        log.err(.browser, "queued navigation page error", .{
-            .err = err,
-            .url = qn.url,
-        });
-        return err;
+    // I'd like the page to know NOTHING about cdp_socket / CDP, but the
+    // fact is that the behavior of wait changes depending on whether or
+    // not we're using CDP.
+    // If we aren't using CDP, as soon as we think there's nothing left
+    // to do, we can exit - we'de done.
+    // But if we are using CDP, we should wait for the whole `wait_ms`
+    // because the http_click.tick() also monitors the CDP socket. And while
+    // we could let CDP poll http (like it does for HTTP requests), the fact
+    // is that we know more about the timing of stuff (e.g. how long to
+    // poll/sleep) in the page.
+    const exit_when_done = http_client.cdp_client == null;
+
+    while (true) {
+        switch (page._parse_state) {
+            .pre, .raw, .text, .image => {
+                // The main page hasn't started/finished navigating.
+                // There's no JS to run, and no reason to run the scheduler.
+                if (http_client.active == 0 and exit_when_done) {
+                    // haven't started navigating, I guess.
+                    return .done;
+                }
+                // Either we have active http connections, or we're in CDP
+                // mode with an extra socket. Either way, we're waiting
+                // for http traffic
+                if (try http_client.tick(@intCast(ms_remaining)) == .cdp_socket) {
+                    // exit_when_done is explicitly set when there isn't
+                    // an extra socket, so it should not be possibl to
+                    // get an cdp_socket message when exit_when_done
+                    // is true.
+                    if (IS_DEBUG) {
+                        std.debug.assert(exit_when_done == false);
+                    }
+
+                    // data on a socket we aren't handling, return to caller
+                    return .cdp_socket;
+                }
+            },
+            .html, .complete => {
+                if (page._queued_navigation != null) {
+                    return .done;
+                }
+
+                // The HTML page was parsed. We now either have JS scripts to
+                // download, or scheduled tasks to execute, or both.
+
+                // scheduler.run could trigger new http transfers, so do not
+                // store http_client.active BEFORE this call and then use
+                // it AFTER.
+                const ms_to_next_task = try browser.runMacrotasks();
+
+                // Each call to this runs scheduled load events.
+                try page.dispatchLoad();
+
+                const http_active = http_client.active;
+                const total_network_activity = http_active + http_client.intercepted;
+                if (page._notified_network_almost_idle.check(total_network_activity <= 2)) {
+                    page.notifyNetworkAlmostIdle();
+                }
+                if (page._notified_network_idle.check(total_network_activity == 0)) {
+                    page.notifyNetworkIdle();
+                }
+
+                if (http_active == 0 and exit_when_done) {
+                    // we don't need to consider http_client.intercepted here
+                    // because exit_when_done is true, and that can only be
+                    // the case when interception isn't possible.
+                    if (comptime IS_DEBUG) {
+                        std.debug.assert(http_client.intercepted == 0);
+                    }
+
+                    const ms: u64 = ms_to_next_task orelse blk: {
+                        if (wait_ms - ms_remaining < 100) {
+                            if (comptime builtin.is_test) {
+                                return .done;
+                            }
+                            // Look, we want to exit ASAP, but we don't want
+                            // to exit so fast that we've run none of the
+                            // background jobs.
+                            break :blk 50;
+                        }
+
+                        if (browser.hasBackgroundTasks()) {
+                            // _we_ have nothing to run, but v8 is working on
+                            // background tasks. We'll wait for them.
+                            browser.waitForBackgroundTasks();
+                            break :blk 20;
+                        }
+
+                        // No http transfers, no cdp extra socket, no
+                        // scheduled tasks, we're done.
+                        return .done;
+                    };
+
+                    if (ms > ms_remaining) {
+                        // Same as above, except we have a scheduled task,
+                        // it just happens to be too far into the future
+                        // compared to how long we were told to wait.
+                        return .done;
+                    }
+
+                    // We have a task to run in the not-so-distant future.
+                    // You might think we can just sleep until that task is
+                    // ready, but we should continue to run lowPriority tasks
+                    // in the meantime, and that could unblock things. So
+                    // we'll just sleep for a bit, and then restart our wait
+                    // loop to see if anything new can be processed.
+                    std.Thread.sleep(std.time.ns_per_ms * @as(u64, @intCast(@min(ms, 20))));
+                } else {
+                    // We're here because we either have active HTTP
+                    // connections, or exit_when_done == false (aka, there's
+                    // an cdp_socket registered with the http client).
+                    // We should continue to run lowPriority tasks, so we
+                    // minimize how long we'll poll for network I/O.
+                    var ms_to_wait = @min(200, ms_to_next_task orelse 200);
+                    if (ms_to_wait > 10 and browser.hasBackgroundTasks()) {
+                        // if we have background tasks, we don't want to wait too
+                        // long for a message from the client. We want to go back
+                        // to the top of the loop and run macrotasks.
+                        ms_to_wait = 10;
+                    }
+                    if (try http_client.tick(@min(ms_remaining, ms_to_wait)) == .cdp_socket) {
+                        // data on a socket we aren't handling, return to caller
+                        return .cdp_socket;
+                    }
+                }
+            },
+            .err => |err| {
+                page._parse_state = .{ .raw_done = @errorName(err) };
+                return err;
+            },
+            .raw_done => {
+                if (exit_when_done) {
+                    return .done;
+                }
+                // we _could_ http_client.tick(ms_to_wait), but this has
+                // the same result, and I feel is more correct.
+                return .no_page;
+            },
+        }
+
+        const ms_elapsed = timer.lap() / 1_000_000;
+        if (ms_elapsed >= ms_remaining) {
+            return .done;
+        }
+        ms_remaining -= @intCast(ms_elapsed);
+    }
+}
+
+fn processScheduledNavigation(self: *Session, current_page: *Page) !*Page {
+    const browser = self.browser;
+
+    const qn = current_page._queued_navigation.?;
+    // take ownership of the page's queued navigation
+    current_page._queued_navigation = null;
+    defer browser.arena_pool.release(qn.arena);
+
+    const frame_id, const parent = blk: {
+        const page = &self.page.?;
+        const frame_id = page._frame_id;
+        const parent = page.parent;
+
+        browser.http_client.abort();
+        self.removePage();
+
+        break :blk .{ frame_id, parent };
     };
 
+    self.page = @as(Page, undefined);
+    const page = &self.page.?;
+    try Page.init(page, frame_id, self, parent);
+
+    // Creates a new NavigationEventTarget for this page.
+    try self.navigation.onNewPage(page);
+
+    // start JS env
+    // Inform CDP the main page has been created such that additional context for other Worlds can be created as well
+    self.notification.dispatch(.page_created, page);
+
     page.navigate(qn.url, qn.opts) catch |err| {
         log.err(.browser, "queued navigation error", .{ .err = err, .url = qn.url });
         return err;
     };
+
+    return page;
+}
+
+pub fn nextFrameId(self: *Session) u32 {
+    const id = self.frame_id_gen +% 1;
+    self.frame_id_gen = id;
+    return id;
 }

src/browser/URL.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -20,44 +20,61 @@ const std = @import("std");
 const Allocator = std.mem.Allocator;
 
 const ResolveOpts = struct {
+    encode: bool = false,
     always_dupe: bool = false,
 };
+
 // path is anytype, so that it can be used with both []const u8 and [:0]const u8
 pub fn resolve(allocator: Allocator, base: [:0]const u8, path: anytype, comptime opts: ResolveOpts) ![:0]const u8 {
     const PT = @TypeOf(path);
     if (base.len == 0 or isCompleteHTTPUrl(path)) {
         if (comptime opts.always_dupe or !isNullTerminated(PT)) {
-            return allocator.dupeZ(u8, path);
+            const duped = try allocator.dupeZ(u8, path);
+            return processResolved(allocator, duped, opts);
+        }
+        if (comptime opts.encode) {
+            return processResolved(allocator, path, opts);
         }
         return path;
     }
 
     if (path.len == 0) {
         if (comptime opts.always_dupe) {
-            return allocator.dupeZ(u8, base);
+            const duped = try allocator.dupeZ(u8, base);
+            return processResolved(allocator, duped, opts);
+        }
+        if (comptime opts.encode) {
+            return processResolved(allocator, base, opts);
         }
         return base;
     }
 
     if (path[0] == '?') {
         const base_path_end = std.mem.indexOfAny(u8, base, "?#") orelse base.len;
-        return std.mem.joinZ(allocator, "", &.{ base[0..base_path_end], path });
+        const result = try std.mem.joinZ(allocator, "", &.{ base[0..base_path_end], path });
+        return processResolved(allocator, result, opts);
     }
     if (path[0] == '#') {
         const base_fragment_start = std.mem.indexOfScalar(u8, base, '#') orelse base.len;
-        return std.mem.joinZ(allocator, "", &.{ base[0..base_fragment_start], path });
+        const result = try std.mem.joinZ(allocator, "", &.{ base[0..base_fragment_start], path });
+        return processResolved(allocator, result, opts);
     }
 
     if (std.mem.startsWith(u8, path, "//")) {
         // network-path reference
         const index = std.mem.indexOfScalar(u8, base, ':') orelse {
             if (comptime isNullTerminated(PT)) {
+                if (comptime opts.encode) {
+                    return processResolved(allocator, path, opts);
+                }
                 return path;
             }
-            return allocator.dupeZ(u8, path);
+            const duped = try allocator.dupeZ(u8, path);
+            return processResolved(allocator, duped, opts);
         };
         const protocol = base[0 .. index + 1];
-        return std.mem.joinZ(allocator, "", &.{ protocol, path });
+        const result = try std.mem.joinZ(allocator, "", &.{ protocol, path });
+        return processResolved(allocator, result, opts);
     }
 
     const scheme_end = std.mem.indexOf(u8, base, "://");
@@ -65,7 +82,8 @@ pub fn resolve(allocator: Allocator, base: [:0]const u8, path: anytype, comptime
     const path_start = std.mem.indexOfScalarPos(u8, base, authority_start, '/') orelse base.len;
 
     if (path[0] == '/') {
-        return std.mem.joinZ(allocator, "", &.{ base[0..path_start], path });
+        const result = try std.mem.joinZ(allocator, "", &.{ base[0..path_start], path });
+        return processResolved(allocator, result, opts);
     }
 
     var normalized_base: []const u8 = base[0..path_start];
@@ -76,8 +94,9 @@ pub fn resolve(allocator: Allocator, base: [:0]const u8, path: anytype, comptime
     }
 
     // trailing space so that we always have space to append the null terminator
-    var out = try std.mem.join(allocator, "", &.{ normalized_base, "/", path, " " });
-    const end = out.len - 1;
+    // and so that we can compare the next two characters without needing to length check
+    var out = try std.mem.join(allocator, "", &.{ normalized_base, "/", path, "  " });
+    const end = out.len - 2;
 
     const path_marker = path_start + 1;
 
@@ -87,40 +106,158 @@ pub fn resolve(allocator: Allocator, base: [:0]const u8, path: anytype, comptime
     var in_i: usize = 0;
     var out_i: usize = 0;
     while (in_i < end) {
-        if (std.mem.startsWith(u8, out[in_i..], "./")) {
-            in_i += 2;
-            continue;
-        }
-
-        if (std.mem.startsWith(u8, out[in_i..], "../")) {
-            std.debug.assert(out[out_i - 1] == '/');
-
-            if (out_i > path_marker) {
-                // go back before the /
-                out_i -= 2;
-                while (out_i > 1 and out[out_i - 1] != '/') {
-                    out_i -= 1;
-                }
-            } else {
-                // if out_i == path_marker, than we've reached the start of
-                // the path. We can't ../ any more. E.g.:
-                //    http://www.example.com/../hello.
-                // You might think that's an error, but, at least with
-                //     new URL('../hello', 'http://www.example.com/')
-                // it just ignores the extra ../
+        if (out[in_i] == '.' and (out_i == 0 or out[out_i - 1] == '/')) {
+            if (out[in_i + 1] == '/') { // always safe, because we added a whitespace
+                // /./
+                in_i += 2;
+                continue;
+            }
+            if (out[in_i + 1] == '.' and out[in_i + 2] == '/') { // always safe, because we added two whitespaces
+                // /../
+                if (out_i > path_marker) {
+                    // go back before the /
+                    out_i -= 2;
+                    while (out_i > 1 and out[out_i - 1] != '/') {
+                        out_i -= 1;
+                    }
+                } else {
+                    // if out_i == path_marker, than we've reached the start of
+                    // the path. We can't ../ any more. E.g.:
+                    //    http://www.example.com/../hello.
+                    // You might think that's an error, but, at least with
+                    //     new URL('../hello', 'http://www.example.com/')
+                    // it just ignores the extra ../
+                }
+                in_i += 3;
+                continue;
+            }
+            if (in_i == end - 1) {
+                // ignore trailing dot
+                break;
             }
-            in_i += 3;
-            continue;
         }
 
-        out[out_i] = out[in_i];
+        const c = out[in_i];
+        out[out_i] = c;
         in_i += 1;
         out_i += 1;
     }
 
     // we always have an extra space
     out[out_i] = 0;
-    return out[0..out_i :0];
+    return processResolved(allocator, out[0..out_i :0], opts);
+}
+
+fn processResolved(allocator: Allocator, url: [:0]const u8, comptime opts: ResolveOpts) ![:0]const u8 {
+    if (!comptime opts.encode) {
+        return url;
+    }
+    return ensureEncoded(allocator, url);
+}
+
+pub fn ensureEncoded(allocator: Allocator, url: [:0]const u8) ![:0]const u8 {
+    const scheme_end = std.mem.indexOf(u8, url, "://");
+    const authority_start = if (scheme_end) |end| end + 3 else 0;
+    const path_start = std.mem.indexOfScalarPos(u8, url, authority_start, '/') orelse return url;
+
+    const query_start = std.mem.indexOfScalarPos(u8, url, path_start, '?');
+    const fragment_start = std.mem.indexOfScalarPos(u8, url, query_start orelse path_start, '#');
+
+    const path_end = query_start orelse fragment_start orelse url.len;
+    const query_end = if (query_start) |_| (fragment_start orelse url.len) else path_end;
+
+    const path_to_encode = url[path_start..path_end];
+    const encoded_path = try percentEncodeSegment(allocator, path_to_encode, true);
+
+    const encoded_query = if (query_start) |qs| blk: {
+        const query_to_encode = url[qs + 1 .. query_end];
+        const encoded = try percentEncodeSegment(allocator, query_to_encode, false);
+        break :blk encoded;
+    } else null;
+
+    const encoded_fragment = if (fragment_start) |fs| blk: {
+        const fragment_to_encode = url[fs + 1 ..];
+        const encoded = try percentEncodeSegment(allocator, fragment_to_encode, false);
+        break :blk encoded;
+    } else null;
+
+    if (encoded_path.ptr == path_to_encode.ptr and
+        (encoded_query == null or encoded_query.?.ptr == url[query_start.? + 1 .. query_end].ptr) and
+        (encoded_fragment == null or encoded_fragment.?.ptr == url[fragment_start.? + 1 ..].ptr))
+    {
+        // nothing has changed
+        return url;
+    }
+
+    var buf = try std.ArrayList(u8).initCapacity(allocator, url.len + 20);
+    try buf.appendSlice(allocator, url[0..path_start]);
+    try buf.appendSlice(allocator, encoded_path);
+    if (encoded_query) |eq| {
+        try buf.append(allocator, '?');
+        try buf.appendSlice(allocator, eq);
+    }
+    if (encoded_fragment) |ef| {
+        try buf.append(allocator, '#');
+        try buf.appendSlice(allocator, ef);
+    }
+    try buf.append(allocator, 0);
+    return buf.items[0 .. buf.items.len - 1 :0];
+}
+
+fn percentEncodeSegment(allocator: Allocator, segment: []const u8, comptime is_path: bool) ![]const u8 {
+    // Check if encoding is needed
+    var needs_encoding = false;
+    for (segment) |c| {
+        if (shouldPercentEncode(c, is_path)) {
+            needs_encoding = true;
+            break;
+        }
+    }
+    if (!needs_encoding) {
+        return segment;
+    }
+
+    var buf = try std.ArrayList(u8).initCapacity(allocator, segment.len + 10);
+
+    var i: usize = 0;
+    while (i < segment.len) : (i += 1) {
+        const c = segment[i];
+
+        // Check if this is an already-encoded sequence (%XX)
+        if (c == '%' and i + 2 < segment.len) {
+            const end = i + 2;
+            const h1 = segment[i + 1];
+            const h2 = segment[end];
+            if (std.ascii.isHex(h1) and std.ascii.isHex(h2)) {
+                try buf.appendSlice(allocator, segment[i .. end + 1]);
+                i = end;
+                continue;
+            }
+        }
+
+        if (shouldPercentEncode(c, is_path)) {
+            try buf.writer(allocator).print("%{X:0>2}", .{c});
+        } else {
+            try buf.append(allocator, c);
+        }
+    }
+
+    return buf.items;
+}
+
+fn shouldPercentEncode(c: u8, comptime is_path: bool) bool {
+    return switch (c) {
+        // Unreserved characters (RFC 3986)
+        'A'...'Z', 'a'...'z', '0'...'9', '-', '.', '_', '~' => false,
+        // sub-delims allowed in both path and query
+        '!', '$', '&', '\'', '(', ')', '*', '+', ',', ';', '=' => false,
+        // Separators allowed in both path and query
+        '/', ':', '@' => false,
+        // Query-specific: '?' is allowed in queries but not in paths
+        '?' => comptime is_path,
+        // Everything else needs encoding (including space)
+        else => true,
+    };
 }
 
 fn isNullTerminated(comptime value: type) bool {
@@ -495,6 +632,43 @@ pub fn concatQueryString(arena: Allocator, url: []const u8, query_string: []cons
     return buf.items[0 .. buf.items.len - 1 :0];
 }
 
+pub fn getRobotsUrl(arena: Allocator, url: [:0]const u8) ![:0]const u8 {
+    const origin = try getOrigin(arena, url) orelse return error.NoOrigin;
+    return try std.fmt.allocPrintSentinel(
+        arena,
+        "{s}/robots.txt",
+        .{origin},
+        0,
+    );
+}
+
+pub fn unescape(arena: Allocator, input: []const u8) ![]const u8 {
+    if (std.mem.indexOfScalar(u8, input, '%') == null) {
+        return input;
+    }
+
+    var result = try std.ArrayList(u8).initCapacity(arena, input.len);
+
+    var i: usize = 0;
+    while (i < input.len) {
+        if (input[i] == '%' and i + 2 < input.len) {
+            const hex = input[i + 1 .. i + 3];
+            const byte = std.fmt.parseInt(u8, hex, 16) catch {
+                result.appendAssumeCapacity(input[i]);
+                i += 1;
+                continue;
+            };
+            result.appendAssumeCapacity(byte);
+            i += 3;
+        } else {
+            result.appendAssumeCapacity(input[i]);
+            i += 1;
+        }
+    }
+
+    return result.items;
+}
+
 const testing = @import("../testing.zig");
 test "URL: isCompleteHTTPUrl" {
     try testing.expectEqual(true, isCompleteHTTPUrl("http://example.com/about"));
@@ -541,6 +715,21 @@ test "URL: resolve" {
     };
 
     const cases = [_]Case{
+        .{
+            .base = "https://example/dir",
+            .path = "abc../test",
+            .expected = "https://example/abc../test",
+        },
+        .{
+            .base = "https://example/dir",
+            .path = "abc.",
+            .expected = "https://example/abc.",
+        },
+        .{
+            .base = "https://example/dir",
+            .path = "abc/.",
+            .expected = "https://example/abc/",
+        },
         .{
             .base = "https://example/xyz/abc/123",
             .path = "something.js",
@@ -659,6 +848,293 @@ test "URL: resolve" {
     }
 }
 
+test "URL: ensureEncoded" {
+    defer testing.reset();
+
+    const Case = struct {
+        url: [:0]const u8,
+        expected: [:0]const u8,
+    };
+
+    const cases = [_]Case{
+        .{
+            .url = "https://example.com/over 9000!",
+            .expected = "https://example.com/over%209000!",
+        },
+        .{
+            .url = "http://example.com/hello world.html",
+            .expected = "http://example.com/hello%20world.html",
+        },
+        .{
+            .url = "https://example.com/file[1].html",
+            .expected = "https://example.com/file%5B1%5D.html",
+        },
+        .{
+            .url = "https://example.com/file{name}.html",
+            .expected = "https://example.com/file%7Bname%7D.html",
+        },
+        .{
+            .url = "https://example.com/page?query=hello world",
+            .expected = "https://example.com/page?query=hello%20world",
+        },
+        .{
+            .url = "https://example.com/page?a=1&b=value with spaces",
+            .expected = "https://example.com/page?a=1&b=value%20with%20spaces",
+        },
+        .{
+            .url = "https://example.com/page#section one",
+            .expected = "https://example.com/page#section%20one",
+        },
+        .{
+            .url = "https://example.com/my path?query=my value#my anchor",
+            .expected = "https://example.com/my%20path?query=my%20value#my%20anchor",
+        },
+        .{
+            .url = "https://example.com/already%20encoded",
+            .expected = "https://example.com/already%20encoded",
+        },
+        .{
+            .url = "https://example.com/file%5B1%5D.html",
+            .expected = "https://example.com/file%5B1%5D.html",
+        },
+        .{
+            .url = "https://example.com/caf%C3%A9",
+            .expected = "https://example.com/caf%C3%A9",
+        },
+        .{
+            .url = "https://example.com/page?query=already%20encoded",
+            .expected = "https://example.com/page?query=already%20encoded",
+        },
+        .{
+            .url = "https://example.com/page?a=1&b=value%20here",
+            .expected = "https://example.com/page?a=1&b=value%20here",
+        },
+        .{
+            .url = "https://example.com/page#section%20one",
+            .expected = "https://example.com/page#section%20one",
+        },
+        .{
+            .url = "https://example.com/part%20encoded and not",
+            .expected = "https://example.com/part%20encoded%20and%20not",
+        },
+        .{
+            .url = "https://example.com/page?a=encoded%20value&b=not encoded",
+            .expected = "https://example.com/page?a=encoded%20value&b=not%20encoded",
+        },
+        .{
+            .url = "https://example.com/my%20path?query=not encoded#encoded%20anchor",
+            .expected = "https://example.com/my%20path?query=not%20encoded#encoded%20anchor",
+        },
+        .{
+            .url = "https://example.com/fully%20encoded?query=also%20encoded#and%20this",
+            .expected = "https://example.com/fully%20encoded?query=also%20encoded#and%20this",
+        },
+        .{
+            .url = "https://example.com/path-with_under~tilde",
+            .expected = "https://example.com/path-with_under~tilde",
+        },
+        .{
+            .url = "https://example.com/sub-delims!$&'()*+,;=",
+            .expected = "https://example.com/sub-delims!$&'()*+,;=",
+        },
+        .{
+            .url = "https://example.com",
+            .expected = "https://example.com",
+        },
+        .{
+            .url = "https://example.com?query=value",
+            .expected = "https://example.com?query=value",
+        },
+        .{
+            .url = "https://example.com/clean/path",
+            .expected = "https://example.com/clean/path",
+        },
+        .{
+            .url = "https://example.com/path?clean=query#clean-fragment",
+            .expected = "https://example.com/path?clean=query#clean-fragment",
+        },
+        .{
+            .url = "https://example.com/100% complete",
+            .expected = "https://example.com/100%25%20complete",
+        },
+        .{
+            .url = "https://example.com/path?value=100% done",
+            .expected = "https://example.com/path?value=100%25%20done",
+        },
+    };
+
+    for (cases) |case| {
+        const result = try ensureEncoded(testing.arena_allocator, case.url);
+        try testing.expectString(case.expected, result);
+    }
+}
+
+test "URL: resolve with encoding" {
+    defer testing.reset();
+
+    const Case = struct {
+        base: [:0]const u8,
+        path: [:0]const u8,
+        expected: [:0]const u8,
+    };
+
+    const cases = [_]Case{
+        // Spaces should be encoded as %20, but ! is allowed
+        .{
+            .base = "https://example.com/dir/",
+            .path = "over 9000!",
+            .expected = "https://example.com/dir/over%209000!",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "hello world.html",
+            .expected = "https://example.com/hello%20world.html",
+        },
+        // Multiple spaces
+        .{
+            .base = "https://example.com/",
+            .path = "path with  multiple   spaces",
+            .expected = "https://example.com/path%20with%20%20multiple%20%20%20spaces",
+        },
+        // Special characters that need encoding
+        .{
+            .base = "https://example.com/",
+            .path = "file[1].html",
+            .expected = "https://example.com/file%5B1%5D.html",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "file{name}.html",
+            .expected = "https://example.com/file%7Bname%7D.html",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "file<test>.html",
+            .expected = "https://example.com/file%3Ctest%3E.html",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "file\"quote\".html",
+            .expected = "https://example.com/file%22quote%22.html",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "file|pipe.html",
+            .expected = "https://example.com/file%7Cpipe.html",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "file\\backslash.html",
+            .expected = "https://example.com/file%5Cbackslash.html",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "file^caret.html",
+            .expected = "https://example.com/file%5Ecaret.html",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "file`backtick`.html",
+            .expected = "https://example.com/file%60backtick%60.html",
+        },
+        // Characters that should NOT be encoded
+        .{
+            .base = "https://example.com/",
+            .path = "path-with_under~tilde.html",
+            .expected = "https://example.com/path-with_under~tilde.html",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "path/with/slashes",
+            .expected = "https://example.com/path/with/slashes",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "sub-delims!$&'()*+,;=.html",
+            .expected = "https://example.com/sub-delims!$&'()*+,;=.html",
+        },
+        // Already encoded characters should not be double-encoded
+        .{
+            .base = "https://example.com/",
+            .path = "already%20encoded",
+            .expected = "https://example.com/already%20encoded",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "file%5B1%5D.html",
+            .expected = "https://example.com/file%5B1%5D.html",
+        },
+        // Mix of encoded and unencoded
+        .{
+            .base = "https://example.com/",
+            .path = "part%20encoded and not",
+            .expected = "https://example.com/part%20encoded%20and%20not",
+        },
+        // Query strings and fragments ARE encoded
+        .{
+            .base = "https://example.com/",
+            .path = "file name.html?query=value with spaces",
+            .expected = "https://example.com/file%20name.html?query=value%20with%20spaces",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "file name.html#anchor with spaces",
+            .expected = "https://example.com/file%20name.html#anchor%20with%20spaces",
+        },
+        .{
+            .base = "https://example.com/",
+            .path = "file.html?hello=world !",
+            .expected = "https://example.com/file.html?hello=world%20!",
+        },
+        // Query structural characters should NOT be encoded
+        .{
+            .base = "https://example.com/",
+            .path = "file.html?a=1&b=2",
+            .expected = "https://example.com/file.html?a=1&b=2",
+        },
+        // Relative paths with encoding
+        .{
+            .base = "https://example.com/dir/page.html",
+            .path = "../other dir/file.html",
+            .expected = "https://example.com/other%20dir/file.html",
+        },
+        .{
+            .base = "https://example.com/dir/",
+            .path = "./sub dir/file.html",
+            .expected = "https://example.com/dir/sub%20dir/file.html",
+        },
+        // Absolute paths with encoding
+        .{
+            .base = "https://example.com/some/path",
+            .path = "/absolute path/file.html",
+            .expected = "https://example.com/absolute%20path/file.html",
+        },
+        // Unicode/high bytes (though ideally these should be UTF-8 encoded first)
+        .{
+            .base = "https://example.com/",
+            .path = "café",
+            .expected = "https://example.com/caf%C3%A9",
+        },
+        // Empty path
+        .{
+            .base = "https://example.com/",
+            .path = "",
+            .expected = "https://example.com/",
+        },
+        // Complete URL as path (should not be encoded)
+        .{
+            .base = "https://example.com/",
+            .path = "https://other.com/path with spaces",
+            .expected = "https://other.com/path%20with%20spaces",
+        },
+    };
+
+    for (cases) |case| {
+        const result = try resolve(testing.arena_allocator, case.base, case.path, .{ .encode = true });
+        try testing.expectString(case.expected, result);
+    }
+}
+
 test "URL: eqlDocument" {
     defer testing.reset();
     {
@@ -756,3 +1232,96 @@ test "URL: concatQueryString" {
         try testing.expectEqual("https://www.lightpanda.io/index?1=2&a=b", url);
     }
 }
+
+test "URL: getRobotsUrl" {
+    defer testing.reset();
+    const arena = testing.arena_allocator;
+
+    {
+        const url = try getRobotsUrl(arena, "https://www.lightpanda.io");
+        try testing.expectEqual("https://www.lightpanda.io/robots.txt", url);
+    }
+
+    {
+        const url = try getRobotsUrl(arena, "https://www.lightpanda.io/some/path");
+        try testing.expectString("https://www.lightpanda.io/robots.txt", url);
+    }
+
+    {
+        const url = try getRobotsUrl(arena, "https://www.lightpanda.io:8080/page");
+        try testing.expectString("https://www.lightpanda.io:8080/robots.txt", url);
+    }
+    {
+        const url = try getRobotsUrl(arena, "http://example.com/deep/nested/path?query=value#fragment");
+        try testing.expectString("http://example.com/robots.txt", url);
+    }
+    {
+        const url = try getRobotsUrl(arena, "https://user:pass@example.com/page");
+        try testing.expectString("https://example.com/robots.txt", url);
+    }
+}
+
+test "URL: unescape" {
+    defer testing.reset();
+    const arena = testing.arena_allocator;
+
+    {
+        const result = try unescape(arena, "hello world");
+        try testing.expectEqual("hello world", result);
+    }
+
+    {
+        const result = try unescape(arena, "hello%20world");
+        try testing.expectEqual("hello world", result);
+    }
+
+    {
+        const result = try unescape(arena, "%48%65%6c%6c%6f");
+        try testing.expectEqual("Hello", result);
+    }
+
+    {
+        const result = try unescape(arena, "%48%65%6C%6C%6F");
+        try testing.expectEqual("Hello", result);
+    }
+
+    {
+        const result = try unescape(arena, "a%3Db");
+        try testing.expectEqual("a=b", result);
+    }
+
+    {
+        const result = try unescape(arena, "a%3DB");
+        try testing.expectEqual("a=B", result);
+    }
+
+    {
+        const result = try unescape(arena, "ZDIgPSAndHdvJzs%3D");
+        try testing.expectEqual("ZDIgPSAndHdvJzs=", result);
+    }
+
+    {
+        const result = try unescape(arena, "%5a%44%4d%67%50%53%41%6e%64%47%68%79%5a%57%55%6e%4f%77%3D%3D");
+        try testing.expectEqual("ZDMgPSAndGhyZWUnOw==", result);
+    }
+
+    {
+        const result = try unescape(arena, "hello%2world");
+        try testing.expectEqual("hello%2world", result);
+    }
+
+    {
+        const result = try unescape(arena, "hello%ZZworld");
+        try testing.expectEqual("hello%ZZworld", result);
+    }
+
+    {
+        const result = try unescape(arena, "hello%");
+        try testing.expectEqual("hello%", result);
+    }
+
+    {
+        const result = try unescape(arena, "hello%2");
+        try testing.expectEqual("hello%2", result);
+    }
+}

src/browser/color.zig

@@ -0,0 +1,298 @@
+// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+const Io = std.Io;
+
+pub fn isHexColor(value: []const u8) bool {
+    if (value.len == 0) {
+        return false;
+    }
+
+    if (value[0] != '#') {
+        return false;
+    }
+
+    const hex_part = value[1..];
+    switch (hex_part.len) {
+        3, 4, 6, 8 => for (hex_part) |c| if (!std.ascii.isHex(c)) return false,
+        else => return false,
+    }
+
+    return true;
+}
+
+pub const RGBA = packed struct(u32) {
+    r: u8,
+    g: u8,
+    b: u8,
+    /// Opaque by default.
+    a: u8 = std.math.maxInt(u8),
+
+    pub const Named = struct {
+        // Basic colors (CSS Level 1)
+        pub const black: RGBA = .init(0, 0, 0, 1);
+        pub const silver: RGBA = .init(192, 192, 192, 1);
+        pub const gray: RGBA = .init(128, 128, 128, 1);
+        pub const white: RGBA = .init(255, 255, 255, 1);
+        pub const maroon: RGBA = .init(128, 0, 0, 1);
+        pub const red: RGBA = .init(255, 0, 0, 1);
+        pub const purple: RGBA = .init(128, 0, 128, 1);
+        pub const fuchsia: RGBA = .init(255, 0, 255, 1);
+        pub const green: RGBA = .init(0, 128, 0, 1);
+        pub const lime: RGBA = .init(0, 255, 0, 1);
+        pub const olive: RGBA = .init(128, 128, 0, 1);
+        pub const yellow: RGBA = .init(255, 255, 0, 1);
+        pub const navy: RGBA = .init(0, 0, 128, 1);
+        pub const blue: RGBA = .init(0, 0, 255, 1);
+        pub const teal: RGBA = .init(0, 128, 128, 1);
+        pub const aqua: RGBA = .init(0, 255, 255, 1);
+
+        // Extended colors (CSS Level 2+)
+        pub const aliceblue: RGBA = .init(240, 248, 255, 1);
+        pub const antiquewhite: RGBA = .init(250, 235, 215, 1);
+        pub const aquamarine: RGBA = .init(127, 255, 212, 1);
+        pub const azure: RGBA = .init(240, 255, 255, 1);
+        pub const beige: RGBA = .init(245, 245, 220, 1);
+        pub const bisque: RGBA = .init(255, 228, 196, 1);
+        pub const blanchedalmond: RGBA = .init(255, 235, 205, 1);
+        pub const blueviolet: RGBA = .init(138, 43, 226, 1);
+        pub const brown: RGBA = .init(165, 42, 42, 1);
+        pub const burlywood: RGBA = .init(222, 184, 135, 1);
+        pub const cadetblue: RGBA = .init(95, 158, 160, 1);
+        pub const chartreuse: RGBA = .init(127, 255, 0, 1);
+        pub const chocolate: RGBA = .init(210, 105, 30, 1);
+        pub const coral: RGBA = .init(255, 127, 80, 1);
+        pub const cornflowerblue: RGBA = .init(100, 149, 237, 1);
+        pub const cornsilk: RGBA = .init(255, 248, 220, 1);
+        pub const crimson: RGBA = .init(220, 20, 60, 1);
+        pub const cyan: RGBA = .init(0, 255, 255, 1); // Synonym of aqua
+        pub const darkblue: RGBA = .init(0, 0, 139, 1);
+        pub const darkcyan: RGBA = .init(0, 139, 139, 1);
+        pub const darkgoldenrod: RGBA = .init(184, 134, 11, 1);
+        pub const darkgray: RGBA = .init(169, 169, 169, 1);
+        pub const darkgreen: RGBA = .init(0, 100, 0, 1);
+        pub const darkgrey: RGBA = .init(169, 169, 169, 1); // Synonym of darkgray
+        pub const darkkhaki: RGBA = .init(189, 183, 107, 1);
+        pub const darkmagenta: RGBA = .init(139, 0, 139, 1);
+        pub const darkolivegreen: RGBA = .init(85, 107, 47, 1);
+        pub const darkorange: RGBA = .init(255, 140, 0, 1);
+        pub const darkorchid: RGBA = .init(153, 50, 204, 1);
+        pub const darkred: RGBA = .init(139, 0, 0, 1);
+        pub const darksalmon: RGBA = .init(233, 150, 122, 1);
+        pub const darkseagreen: RGBA = .init(143, 188, 143, 1);
+        pub const darkslateblue: RGBA = .init(72, 61, 139, 1);
+        pub const darkslategray: RGBA = .init(47, 79, 79, 1);
+        pub const darkslategrey: RGBA = .init(47, 79, 79, 1); // Synonym of darkslategray
+        pub const darkturquoise: RGBA = .init(0, 206, 209, 1);
+        pub const darkviolet: RGBA = .init(148, 0, 211, 1);
+        pub const deeppink: RGBA = .init(255, 20, 147, 1);
+        pub const deepskyblue: RGBA = .init(0, 191, 255, 1);
+        pub const dimgray: RGBA = .init(105, 105, 105, 1);
+        pub const dimgrey: RGBA = .init(105, 105, 105, 1); // Synonym of dimgray
+        pub const dodgerblue: RGBA = .init(30, 144, 255, 1);
+        pub const firebrick: RGBA = .init(178, 34, 34, 1);
+        pub const floralwhite: RGBA = .init(255, 250, 240, 1);
+        pub const forestgreen: RGBA = .init(34, 139, 34, 1);
+        pub const gainsboro: RGBA = .init(220, 220, 220, 1);
+        pub const ghostwhite: RGBA = .init(248, 248, 255, 1);
+        pub const gold: RGBA = .init(255, 215, 0, 1);
+        pub const goldenrod: RGBA = .init(218, 165, 32, 1);
+        pub const greenyellow: RGBA = .init(173, 255, 47, 1);
+        pub const grey: RGBA = .init(128, 128, 128, 1); // Synonym of gray
+        pub const honeydew: RGBA = .init(240, 255, 240, 1);
+        pub const hotpink: RGBA = .init(255, 105, 180, 1);
+        pub const indianred: RGBA = .init(205, 92, 92, 1);
+        pub const indigo: RGBA = .init(75, 0, 130, 1);
+        pub const ivory: RGBA = .init(255, 255, 240, 1);
+        pub const khaki: RGBA = .init(240, 230, 140, 1);
+        pub const lavender: RGBA = .init(230, 230, 250, 1);
+        pub const lavenderblush: RGBA = .init(255, 240, 245, 1);
+        pub const lawngreen: RGBA = .init(124, 252, 0, 1);
+        pub const lemonchiffon: RGBA = .init(255, 250, 205, 1);
+        pub const lightblue: RGBA = .init(173, 216, 230, 1);
+        pub const lightcoral: RGBA = .init(240, 128, 128, 1);
+        pub const lightcyan: RGBA = .init(224, 255, 255, 1);
+        pub const lightgoldenrodyellow: RGBA = .init(250, 250, 210, 1);
+        pub const lightgray: RGBA = .init(211, 211, 211, 1);
+        pub const lightgreen: RGBA = .init(144, 238, 144, 1);
+        pub const lightgrey: RGBA = .init(211, 211, 211, 1); // Synonym of lightgray
+        pub const lightpink: RGBA = .init(255, 182, 193, 1);
+        pub const lightsalmon: RGBA = .init(255, 160, 122, 1);
+        pub const lightseagreen: RGBA = .init(32, 178, 170, 1);
+        pub const lightskyblue: RGBA = .init(135, 206, 250, 1);
+        pub const lightslategray: RGBA = .init(119, 136, 153, 1);
+        pub const lightslategrey: RGBA = .init(119, 136, 153, 1); // Synonym of lightslategray
+        pub const lightsteelblue: RGBA = .init(176, 196, 222, 1);
+        pub const lightyellow: RGBA = .init(255, 255, 224, 1);
+        pub const limegreen: RGBA = .init(50, 205, 50, 1);
+        pub const linen: RGBA = .init(250, 240, 230, 1);
+        pub const magenta: RGBA = .init(255, 0, 255, 1); // Synonym of fuchsia
+        pub const mediumaquamarine: RGBA = .init(102, 205, 170, 1);
+        pub const mediumblue: RGBA = .init(0, 0, 205, 1);
+        pub const mediumorchid: RGBA = .init(186, 85, 211, 1);
+        pub const mediumpurple: RGBA = .init(147, 112, 219, 1);
+        pub const mediumseagreen: RGBA = .init(60, 179, 113, 1);
+        pub const mediumslateblue: RGBA = .init(123, 104, 238, 1);
+        pub const mediumspringgreen: RGBA = .init(0, 250, 154, 1);
+        pub const mediumturquoise: RGBA = .init(72, 209, 204, 1);
+        pub const mediumvioletred: RGBA = .init(199, 21, 133, 1);
+        pub const midnightblue: RGBA = .init(25, 25, 112, 1);
+        pub const mintcream: RGBA = .init(245, 255, 250, 1);
+        pub const mistyrose: RGBA = .init(255, 228, 225, 1);
+        pub const moccasin: RGBA = .init(255, 228, 181, 1);
+        pub const navajowhite: RGBA = .init(255, 222, 173, 1);
+        pub const oldlace: RGBA = .init(253, 245, 230, 1);
+        pub const olivedrab: RGBA = .init(107, 142, 35, 1);
+        pub const orange: RGBA = .init(255, 165, 0, 1);
+        pub const orangered: RGBA = .init(255, 69, 0, 1);
+        pub const orchid: RGBA = .init(218, 112, 214, 1);
+        pub const palegoldenrod: RGBA = .init(238, 232, 170, 1);
+        pub const palegreen: RGBA = .init(152, 251, 152, 1);
+        pub const paleturquoise: RGBA = .init(175, 238, 238, 1);
+        pub const palevioletred: RGBA = .init(219, 112, 147, 1);
+        pub const papayawhip: RGBA = .init(255, 239, 213, 1);
+        pub const peachpuff: RGBA = .init(255, 218, 185, 1);
+        pub const peru: RGBA = .init(205, 133, 63, 1);
+        pub const pink: RGBA = .init(255, 192, 203, 1);
+        pub const plum: RGBA = .init(221, 160, 221, 1);
+        pub const powderblue: RGBA = .init(176, 224, 230, 1);
+        pub const rebeccapurple: RGBA = .init(102, 51, 153, 1);
+        pub const rosybrown: RGBA = .init(188, 143, 143, 1);
+        pub const royalblue: RGBA = .init(65, 105, 225, 1);
+        pub const saddlebrown: RGBA = .init(139, 69, 19, 1);
+        pub const salmon: RGBA = .init(250, 128, 114, 1);
+        pub const sandybrown: RGBA = .init(244, 164, 96, 1);
+        pub const seagreen: RGBA = .init(46, 139, 87, 1);
+        pub const seashell: RGBA = .init(255, 245, 238, 1);
+        pub const sienna: RGBA = .init(160, 82, 45, 1);
+        pub const skyblue: RGBA = .init(135, 206, 235, 1);
+        pub const slateblue: RGBA = .init(106, 90, 205, 1);
+        pub const slategray: RGBA = .init(112, 128, 144, 1);
+        pub const slategrey: RGBA = .init(112, 128, 144, 1); // Synonym of slategray
+        pub const snow: RGBA = .init(255, 250, 250, 1);
+        pub const springgreen: RGBA = .init(0, 255, 127, 1);
+        pub const steelblue: RGBA = .init(70, 130, 180, 1);
+        pub const tan: RGBA = .init(210, 180, 140, 1);
+        pub const thistle: RGBA = .init(216, 191, 216, 1);
+        pub const tomato: RGBA = .init(255, 99, 71, 1);
+        pub const transparent: RGBA = .init(0, 0, 0, 0);
+        pub const turquoise: RGBA = .init(64, 224, 208, 1);
+        pub const violet: RGBA = .init(238, 130, 238, 1);
+        pub const wheat: RGBA = .init(245, 222, 179, 1);
+        pub const whitesmoke: RGBA = .init(245, 245, 245, 1);
+        pub const yellowgreen: RGBA = .init(154, 205, 50, 1);
+    };
+
+    pub fn init(r: u8, g: u8, b: u8, a: f32) RGBA {
+        const clamped = std.math.clamp(a, 0, 1);
+        return .{ .r = r, .g = g, .b = b, .a = @intFromFloat(clamped * 255) };
+    }
+
+    /// Finds a color by its name.
+    pub fn find(name: []const u8) ?RGBA {
+        const match = std.meta.stringToEnum(std.meta.DeclEnum(Named), name) orelse return null;
+
+        return switch (match) {
+            inline else => |comptime_enum| @field(Named, @tagName(comptime_enum)),
+        };
+    }
+
+    /// Parses the given color.
+    /// Currently we only parse hex colors and named colors; other variants
+    /// require CSS evaluation.
+    pub fn parse(input: []const u8) !RGBA {
+        if (!isHexColor(input)) {
+            // Try named colors.
+            return find(input) orelse return error.Invalid;
+        }
+
+        const slice = input[1..];
+        switch (slice.len) {
+            // This means the digit for a color is repeated.
+            // Given HEX is #f0c, its interpreted the same as #FF00CC.
+            3 => {
+                const r = try std.fmt.parseInt(u8, &.{ slice[0], slice[0] }, 16);
+                const g = try std.fmt.parseInt(u8, &.{ slice[1], slice[1] }, 16);
+                const b = try std.fmt.parseInt(u8, &.{ slice[2], slice[2] }, 16);
+                return .{ .r = r, .g = g, .b = b, .a = 255 };
+            },
+            4 => {
+                const r = try std.fmt.parseInt(u8, &.{ slice[0], slice[0] }, 16);
+                const g = try std.fmt.parseInt(u8, &.{ slice[1], slice[1] }, 16);
+                const b = try std.fmt.parseInt(u8, &.{ slice[2], slice[2] }, 16);
+                const a = try std.fmt.parseInt(u8, &.{ slice[3], slice[3] }, 16);
+                return .{ .r = r, .g = g, .b = b, .a = a };
+            },
+            // Regular HEX format.
+            6 => {
+                const r = try std.fmt.parseInt(u8, slice[0..2], 16);
+                const g = try std.fmt.parseInt(u8, slice[2..4], 16);
+                const b = try std.fmt.parseInt(u8, slice[4..6], 16);
+                return .{ .r = r, .g = g, .b = b, .a = 255 };
+            },
+            8 => {
+                const r = try std.fmt.parseInt(u8, slice[0..2], 16);
+                const g = try std.fmt.parseInt(u8, slice[2..4], 16);
+                const b = try std.fmt.parseInt(u8, slice[4..6], 16);
+                const a = try std.fmt.parseInt(u8, slice[6..8], 16);
+                return .{ .r = r, .g = g, .b = b, .a = a };
+            },
+            else => return error.Invalid,
+        }
+    }
+
+    /// By default, browsers prefer lowercase formatting.
+    const format_upper = false;
+
+    /// Formats the `Color` according to web expectations.
+    /// If color is opaque, HEX is preferred; RGBA otherwise.
+    pub fn format(self: *const RGBA, writer: *Io.Writer) Io.Writer.Error!void {
+        if (self.isOpaque()) {
+            // Convert RGB to HEX.
+            // https://gristle.tripod.com/hexconv.html
+            // Hexadecimal characters up to 15.
+            const char: []const u8 = "0123456789" ++ if (format_upper) "ABCDEF" else "abcdef";
+            // This variant always prefers 6 digit format, +1 is for hash char.
+            const buffer = [7]u8{
+                '#',
+                char[self.r >> 4],
+                char[self.r & 15],
+                char[self.g >> 4],
+                char[self.g & 15],
+                char[self.b >> 4],
+                char[self.b & 15],
+            };
+
+            return writer.writeAll(&buffer);
+        }
+
+        // Prefer RGBA format for everything else.
+        return writer.print("rgba({d}, {d}, {d}, {d:.2})", .{ self.r, self.g, self.b, self.normalizedAlpha() });
+    }
+
+    /// Returns true if `Color` is opaque.
+    pub inline fn isOpaque(self: *const RGBA) bool {
+        return self.a == std.math.maxInt(u8);
+    }
+
+    /// Returns the normalized alpha value.
+    pub inline fn normalizedAlpha(self: *const RGBA) f32 {
+        return @as(f32, @floatFromInt(self.a)) / 255;
+    }
+};

src/browser/css/Tokenizer.zig

@@ -583,7 +583,7 @@ fn consumeNumeric(self: *Tokenizer) Token {
             };
 
             self.advance(2);
-        } else if (self.hasAtLeast(1) and std.ascii.isDigit(self.byteAt(2))) {
+        } else if (self.hasAtLeast(2) and std.ascii.isDigit(self.byteAt(2))) {
             self.advance(1);
         } else {
             break :blk;

src/browser/dump.zig

@@ -20,16 +20,15 @@ const std = @import("std");
 const Page = @import("Page.zig");
 const Node = @import("webapi/Node.zig");
 const Slot = @import("webapi/element/html/Slot.zig");
+const IFrame = @import("webapi/element/html/IFrame.zig");
 
-pub const RootOpts = struct {
-    with_base: bool = false,
-    strip: Opts.Strip = .{},
-    shadow: Opts.Shadow = .rendered,
-};
+const IS_DEBUG = @import("builtin").mode == .Debug;
 
 pub const Opts = struct {
-    strip: Strip = .{},
-    shadow: Shadow = .rendered,
+    with_base: bool = false,
+    with_frames: bool = false,
+    strip: Opts.Strip = .{},
+    shadow: Opts.Shadow = .rendered,
 
     pub const Strip = struct {
         js: bool = false,
@@ -49,18 +48,29 @@ pub const Opts = struct {
     };
 };
 
-pub fn root(doc: *Node.Document, opts: RootOpts, writer: *std.Io.Writer, page: *Page) !void {
+pub fn root(doc: *Node.Document, opts: Opts, writer: *std.Io.Writer, page: *Page) !void {
     if (doc.is(Node.Document.HTMLDocument)) |html_doc| {
-        try writer.writeAll("<!DOCTYPE html>");
+        blk: {
+            // Ideally we just render the doctype which is part of the document
+            if (doc.asNode().firstChild()) |first| {
+                if (first._type == .document_type) {
+                    break :blk;
+                }
+            }
+            // But if the doc has no child, or the first child isn't a doctype
+            // well force it.
+            try writer.writeAll("<!DOCTYPE html>");
+        }
+
         if (opts.with_base) {
             const parent = if (html_doc.getHead()) |head| head.asNode() else doc.asNode();
             const base = try doc.createElement("base", null, page);
-            try base.setAttributeSafe("base", page.base(), page);
+            try base.setAttributeSafe(comptime .wrap("base"), .wrap(page.base()), page);
             _ = try parent.insertBefore(base.asNode(), parent.firstChild(), page);
         }
     }
 
-    return deep(doc.asNode(), .{ .strip = opts.strip, .shadow = opts.shadow }, writer, page);
+    return deep(doc.asNode(), opts, writer, page);
 }
 
 pub fn deep(node: *Node, opts: Opts, writer: *std.Io.Writer, page: *Page) error{WriteFailed}!void {
@@ -72,19 +82,19 @@ fn _deep(node: *Node, opts: Opts, comptime force_slot: bool, writer: *std.Io.Wri
         .cdata => |cd| {
             if (node.is(Node.CData.Comment)) |_| {
                 try writer.writeAll("<!--");
-                try writer.writeAll(cd.getData());
+                try writer.writeAll(cd.getData().str());
                 try writer.writeAll("-->");
             } else if (node.is(Node.CData.ProcessingInstruction)) |pi| {
                 try writer.writeAll("<?");
                 try writer.writeAll(pi._target);
                 try writer.writeAll(" ");
-                try writer.writeAll(cd.getData());
+                try writer.writeAll(cd.getData().str());
                 try writer.writeAll("?>");
             } else {
                 if (shouldEscapeText(node._parent)) {
-                    try writeEscapedText(cd.getData(), writer);
+                    try writeEscapedText(cd.getData().str(), writer);
                 } else {
-                    try writer.writeAll(cd.getData());
+                    try writer.writeAll(cd.getData().str());
                 }
             }
         },
@@ -99,7 +109,7 @@ fn _deep(node: *Node, opts: Opts, comptime force_slot: bool, writer: *std.Io.Wri
             // to render that "active" content, so when we're trying to render
             // it, we don't want to skip it.
             if ((comptime force_slot == false) and opts.shadow == .rendered) {
-                if (el.getAttributeSafe("slot")) |_| {
+                if (el.getAttributeSafe(comptime .wrap("slot"))) |_| {
                     // Skip - will be rendered by the Slot if it's the active container
                     return;
                 }
@@ -129,7 +139,24 @@ fn _deep(node: *Node, opts: Opts, comptime force_slot: bool, writer: *std.Io.Wri
                 }
             }
 
-            try children(node, opts, writer, page);
+            if (opts.with_frames and el.is(IFrame) != null) {
+                const frame = el.as(IFrame);
+                if (frame.getContentDocument()) |doc| {
+                    // A frame's document should always ahave a page, but
+                    // I'm not willing to crash a release build on that assertion.
+                    if (comptime IS_DEBUG) {
+                        std.debug.assert(doc._page != null);
+                    }
+                    if (doc._page) |frame_page| {
+                        try writer.writeByte('\n');
+                        root(doc, opts, writer, frame_page) catch return error.WriteFailed;
+                        try writer.writeByte('\n');
+                    }
+                }
+            } else {
+                try children(node, opts, writer, page);
+            }
+
             if (!isVoidElement(el)) {
                 try writer.writeAll("</");
                 try writer.writeAll(el.getTagNameDump());
@@ -161,7 +188,11 @@ fn _deep(node: *Node, opts: Opts, comptime force_slot: bool, writer: *std.Io.Wri
             try writer.writeAll(">\n");
         },
         .document_fragment => try children(node, opts, writer, page),
-        .attribute => unreachable,
+        .attribute => {
+            // Not called normally, but can be called via XMLSerializer.serializeToString
+            // in which case it should return an empty string
+            try writer.writeAll("");
+        },
     }
 }
 
@@ -242,12 +273,12 @@ fn shouldStripElement(el: *const Node.Element, opts: Opts) bool {
         if (std.mem.eql(u8, tag_name, "noscript")) return true;
 
         if (std.mem.eql(u8, tag_name, "link")) {
-            if (el.getAttributeSafe("as")) |as| {
+            if (el.getAttributeSafe(comptime .wrap("as"))) |as| {
                 if (std.mem.eql(u8, as, "script")) return true;
             }
-            if (el.getAttributeSafe("rel")) |rel| {
+            if (el.getAttributeSafe(comptime .wrap("rel"))) |rel| {
                 if (std.mem.eql(u8, rel, "modulepreload") or std.mem.eql(u8, rel, "preload")) {
-                    if (el.getAttributeSafe("as")) |as| {
+                    if (el.getAttributeSafe(comptime .wrap("as"))) |as| {
                         if (std.mem.eql(u8, as, "script")) return true;
                     }
                 }
@@ -259,7 +290,7 @@ fn shouldStripElement(el: *const Node.Element, opts: Opts) bool {
         if (std.mem.eql(u8, tag_name, "style")) return true;
 
         if (std.mem.eql(u8, tag_name, "link")) {
-            if (el.getAttributeSafe("rel")) |rel| {
+            if (el.getAttributeSafe(comptime .wrap("rel"))) |rel| {
                 if (std.mem.eql(u8, rel, "stylesheet")) return true;
             }
         }
@@ -283,6 +314,12 @@ fn shouldEscapeText(node_: ?*Node) bool {
     if (node.is(Node.Element.Html.Script) != null) {
         return false;
     }
+    // When scripting is enabled, <noscript> is a raw text element per the HTML spec
+    // (https://html.spec.whatwg.org/multipage/parsing.html#serialising-html-fragments).
+    // Its text content must not be HTML-escaped during serialization.
+    if (node.is(Node.Element.Html.Generic)) |generic| {
+        if (generic._tag == .noscript) return false;
+    }
     return true;
 }
 fn writeEscapedText(text: []const u8, writer: *std.Io.Writer) !void {

src/browser/js/Array.zig

@@ -21,18 +21,46 @@ const js = @import("js.zig");
 const v8 = js.v8;
 
 const Array = @This();
-js_arr: v8.Array,
-context: *js.Context,
+
+local: *const js.Local,
+handle: *const v8.Array,
 
 pub fn len(self: Array) usize {
-    return @intCast(self.js_arr.length());
+    return v8.v8__Array__Length(self.handle);
 }
 
-pub fn get(self: Array, index: usize) !js.Value {
-    const idx_key = v8.Integer.initU32(self.context.isolate, @intCast(index));
-    const js_obj = self.js_arr.castTo(v8.Object);
+pub fn get(self: Array, index: u32) !js.Value {
+    const ctx = self.local.ctx;
+
+    const idx = js.Integer.init(ctx.isolate.handle, index);
+    const handle = v8.v8__Object__Get(@ptrCast(self.handle), self.local.handle, idx.handle) orelse {
+        return error.JsException;
+    };
+
     return .{
-        .context = self.context,
-        .js_val = try js_obj.getValue(self.context.v8_context, idx_key.toValue()),
+        .local = self.local,
+        .handle = handle,
+    };
+}
+
+pub fn set(self: Array, index: u32, value: anytype, comptime opts: js.Caller.CallOpts) !bool {
+    const js_value = try self.local.zigValueToJs(value, opts);
+
+    var out: v8.MaybeBool = undefined;
+    v8.v8__Object__SetAtIndex(@ptrCast(self.handle), self.local.handle, index, js_value.handle, &out);
+    return out.has_value;
+}
+
+pub fn toObject(self: Array) js.Object {
+    return .{
+        .local = self.local,
+        .handle = @ptrCast(self.handle),
+    };
+}
+
+pub fn toValue(self: Array) js.Value {
+    return .{
+        .local = self.local,
+        .handle = @ptrCast(self.handle),
     };
 }

src/browser/js/BigInt.zig

@@ -0,0 +1,41 @@
+// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const js = @import("js.zig");
+const v8 = js.v8;
+
+const BigInt = @This();
+
+handle: *const v8.Integer,
+
+pub fn init(isolate: *v8.Isolate, val: anytype) BigInt {
+    const handle = switch (@TypeOf(val)) {
+        i8, i16, i32, i64, isize => v8.v8__BigInt__New(isolate, val).?,
+        u8, u16, u32, u64, usize => v8.v8__BigInt__NewFromUnsigned(isolate, val).?,
+        else => |T| @compileError("cannot create v8::BigInt from: " ++ @typeName(T)),
+    };
+    return .{ .handle = handle };
+}
+
+pub fn getInt64(self: BigInt) i64 {
+    return v8.v8__BigInt__Int64Value(self.handle, null);
+}
+
+pub fn getUint64(self: BigInt) u64 {
+    return v8.v8__BigInt__Uint64Value(self.handle, null);
+}

src/browser/js/Env.zig

@@ -18,20 +18,34 @@
 
 const std = @import("std");
 const js = @import("js.zig");
+const builtin = @import("builtin");
+
 const v8 = js.v8;
 
+const App = @import("../../App.zig");
 const log = @import("../../log.zig");
 
 const bridge = @import("bridge.zig");
 const Context = @import("Context.zig");
+const Isolate = @import("Isolate.zig");
 const Platform = @import("Platform.zig");
 const Snapshot = @import("Snapshot.zig");
 const Inspector = @import("Inspector.zig");
-const ExecutionWorld = @import("ExecutionWorld.zig");
+
+const Page = @import("../Page.zig");
+const Window = @import("../webapi/Window.zig");
 
 const JsApis = bridge.JsApis;
 const Allocator = std.mem.Allocator;
-const ArenaAllocator = std.heap.ArenaAllocator;
+const IS_DEBUG = builtin.mode == .Debug;
+
+fn initClassIds() void {
+    inline for (JsApis, 0..) |JsApi, i| {
+        JsApi.Meta.class_id = i;
+    }
+}
+
+var class_id_once = std.once(initClassIds);
 
 // The Env maps to a V8 isolate, which represents a isolated sandbox for
 // executing JavaScript. The Env is where we'll define our V8 <-> Zig bindings,
@@ -41,118 +55,400 @@ const ArenaAllocator = std.heap.ArenaAllocator;
 // The `types` parameter is a tuple of Zig structures we want to bind to V8.
 const Env = @This();
 
-allocator: Allocator,
+app: *App,
 
 platform: *const Platform,
 
 // the global isolate
-isolate: v8.Isolate,
+isolate: js.Isolate,
+
+contexts: [64]*Context,
+context_count: usize,
 
 // just kept around because we need to free it on deinit
 isolate_params: *v8.CreateParams,
 
 context_id: usize,
 
-// Dynamic slice to avoid circular dependency on JsApis.len at comptime
-templates: []v8.FunctionTemplate,
+// Global handles that need to be freed on deinit
+eternal_function_templates: []v8.Eternal,
+
+// Dynamic slice to avoid circular dependency on JsApis.len at comptime
+templates: []*const v8.FunctionTemplate,
+
+// Global template created once per isolate and reused across all contexts
+global_template: v8.Eternal,
+
+// Inspector associated with the Isolate. Exists when CDP is being used.
+inspector: ?*Inspector,
+
+// We can store data in a v8::Object's Private data bag. The keys are v8::Private
+// which an be created once per isolaet.
+private_symbols: PrivateSymbols,
+
+microtask_queues_are_running: bool,
+
+pub const InitOpts = struct {
+    with_inspector: bool = false,
+};
+
+pub fn init(app: *App, opts: InitOpts) !Env {
+    if (comptime IS_DEBUG) {
+        comptime {
+            // V8 requirement for any data using SetAlignedPointerInInternalField
+            const a = @alignOf(@import("TaggedOpaque.zig"));
+            std.debug.assert(a >= 2 and a % 2 == 0);
+        }
+    }
+
+    // Initialize class IDs once before any V8 work
+    class_id_once.call();
+
+    const allocator = app.allocator;
+    const snapshot = &app.snapshot;
 
-pub fn init(allocator: Allocator, platform: *const Platform, snapshot: *Snapshot) !Env {
     var params = try allocator.create(v8.CreateParams);
     errdefer allocator.destroy(params);
-    v8.c.v8__Isolate__CreateParams__CONSTRUCT(params);
+    v8.v8__Isolate__CreateParams__CONSTRUCT(params);
     params.snapshot_blob = @ptrCast(&snapshot.startup_data);
 
-    params.array_buffer_allocator = v8.createDefaultArrayBufferAllocator();
-    errdefer v8.destroyArrayBufferAllocator(params.array_buffer_allocator.?);
+    params.array_buffer_allocator = v8.v8__ArrayBuffer__Allocator__NewDefaultAllocator().?;
+    errdefer v8.v8__ArrayBuffer__Allocator__DELETE(params.array_buffer_allocator.?);
 
     params.external_references = &snapshot.external_references;
 
-    var isolate = v8.Isolate.init(params);
+    var isolate = js.Isolate.init(params);
     errdefer isolate.deinit();
+    const isolate_handle = isolate.handle;
 
-    // This is the callback that runs whenever a module is dynamically imported.
-    isolate.setHostImportModuleDynamicallyCallback(Context.dynamicModuleCallback);
-    isolate.setPromiseRejectCallback(promiseRejectCallback);
-    isolate.setMicrotasksPolicy(v8.c.kExplicit);
+    v8.v8__Isolate__SetHostImportModuleDynamicallyCallback(isolate_handle, Context.dynamicModuleCallback);
+    v8.v8__Isolate__SetPromiseRejectCallback(isolate_handle, promiseRejectCallback);
+    v8.v8__Isolate__SetMicrotasksPolicy(isolate_handle, v8.kExplicit);
+    v8.v8__Isolate__SetFatalErrorHandler(isolate_handle, fatalCallback);
+    v8.v8__Isolate__SetOOMErrorHandler(isolate_handle, oomCallback);
 
     isolate.enter();
     errdefer isolate.exit();
 
-    isolate.setHostInitializeImportMetaObjectCallback(Context.metaObjectCallback);
+    v8.v8__Isolate__SetHostInitializeImportMetaObjectCallback(isolate_handle, Context.metaObjectCallback);
 
-    // Allocate templates array dynamically to avoid comptime dependency on JsApis.len
-    const templates = try allocator.alloc(v8.FunctionTemplate, JsApis.len);
+    // Allocate arrays dynamically to avoid comptime dependency on JsApis.len
+    const eternal_function_templates = try allocator.alloc(v8.Eternal, JsApis.len);
+    errdefer allocator.free(eternal_function_templates);
+
+    const templates = try allocator.alloc(*const v8.FunctionTemplate, JsApis.len);
     errdefer allocator.free(templates);
 
+    var global_eternal: v8.Eternal = undefined;
+    var private_symbols: PrivateSymbols = undefined;
     {
-        var temp_scope: v8.HandleScope = undefined;
-        v8.HandleScope.init(&temp_scope, isolate);
+        var temp_scope: js.HandleScope = undefined;
+        temp_scope.init(isolate);
         defer temp_scope.deinit();
-        const context = v8.Context.init(isolate, null, null);
 
-        context.enter();
-        defer context.exit();
+        inline for (JsApis, 0..) |_, i| {
+            const data = v8.v8__Isolate__GetDataFromSnapshotOnce(isolate_handle, snapshot.data_start + i);
+            const function_handle: *const v8.FunctionTemplate = @ptrCast(data);
+            // Make function template eternal
+            v8.v8__Eternal__New(isolate_handle, @ptrCast(function_handle), &eternal_function_templates[i]);
 
-        inline for (JsApis, 0..) |JsApi, i| {
-            JsApi.Meta.class_id = i;
-            const data = context.getDataFromSnapshotOnce(snapshot.data_start + i);
-            const function = v8.FunctionTemplate{ .handle = @ptrCast(data) };
-            templates[i] = v8.Persistent(v8.FunctionTemplate).init(isolate, function).castToFunctionTemplate();
+            // Extract the local handle from the global for easy access
+            const eternal_ptr = v8.v8__Eternal__Get(&eternal_function_templates[i], isolate_handle);
+            templates[i] = @ptrCast(@alignCast(eternal_ptr.?));
         }
+
+        // Create global template once per isolate
+        const js_global = v8.v8__FunctionTemplate__New__DEFAULT(isolate_handle);
+        const window_name = v8.v8__String__NewFromUtf8(isolate_handle, "Window", v8.kNormal, 6);
+        v8.v8__FunctionTemplate__SetClassName(js_global, window_name);
+
+        // Find Window in JsApis by name (avoids circular import)
+        const window_index = comptime bridge.JsApiLookup.getId(Window.JsApi);
+        v8.v8__FunctionTemplate__Inherit(js_global, templates[window_index]);
+
+        const global_template_local = v8.v8__FunctionTemplate__InstanceTemplate(js_global).?;
+        v8.v8__ObjectTemplate__SetNamedHandler(global_template_local, &.{
+            .getter = bridge.unknownWindowPropertyCallback,
+            .setter = null,
+            .query = null,
+            .deleter = null,
+            .enumerator = null,
+            .definer = null,
+            .descriptor = null,
+            .data = null,
+            .flags = v8.kOnlyInterceptStrings | v8.kNonMasking,
+        });
+        // I don't 100% understand this. We actually set this up in the snapshot,
+        // but for the global instance, it doesn't work. SetIndexedHandler and
+        // SetNamedHandler are set on the Instance template, and that's the key
+        // difference. The context has its own global instance, so we need to set
+        // these back up directly on it. There might be a better way to do this.
+        v8.v8__ObjectTemplate__SetIndexedHandler(global_template_local, &.{
+            .getter = Window.JsApi.index.getter,
+            .setter = null,
+            .query = null,
+            .deleter = null,
+            .enumerator = null,
+            .definer = null,
+            .descriptor = null,
+            .data = null,
+            .flags = 0,
+        });
+        v8.v8__Eternal__New(isolate_handle, @ptrCast(global_template_local), &global_eternal);
+        private_symbols = PrivateSymbols.init(isolate_handle);
+    }
+
+    var inspector: ?*js.Inspector = null;
+    if (opts.with_inspector) {
+        inspector = try Inspector.init(allocator, isolate_handle);
     }
 
     return .{
+        .app = app,
         .context_id = 0,
+        .contexts = undefined,
+        .context_count = 0,
         .isolate = isolate,
-        .platform = platform,
-        .allocator = allocator,
+        .platform = &app.platform,
         .templates = templates,
         .isolate_params = params,
+        .inspector = inspector,
+        .global_template = global_eternal,
+        .private_symbols = private_symbols,
+        .microtask_queues_are_running = false,
+        .eternal_function_templates = eternal_function_templates,
     };
 }
 
 pub fn deinit(self: *Env) void {
+    if (comptime IS_DEBUG) {
+        std.debug.assert(self.context_count == 0);
+    }
+    for (self.contexts[0..self.context_count]) |ctx| {
+        ctx.deinit();
+    }
+
+    const allocator = self.app.allocator;
+    if (self.inspector) |i| {
+        i.deinit(allocator);
+    }
+
+    allocator.free(self.templates);
+    allocator.free(self.eternal_function_templates);
+    self.private_symbols.deinit();
+
     self.isolate.exit();
     self.isolate.deinit();
-    v8.destroyArrayBufferAllocator(self.isolate_params.array_buffer_allocator.?);
-    self.allocator.destroy(self.isolate_params);
-    self.allocator.free(self.templates);
+    v8.v8__ArrayBuffer__Allocator__DELETE(self.isolate_params.array_buffer_allocator.?);
+    allocator.destroy(self.isolate_params);
 }
 
-pub fn newInspector(self: *Env, arena: Allocator, ctx: anytype) !Inspector {
-    return Inspector.init(arena, self.isolate, ctx);
+pub fn createContext(self: *Env, page: *Page) !*Context {
+    const context_arena = try self.app.arena_pool.acquire();
+    errdefer self.app.arena_pool.release(context_arena);
+
+    const isolate = self.isolate;
+    var hs: js.HandleScope = undefined;
+    hs.init(isolate);
+    defer hs.deinit();
+
+    // Create a per-context microtask queue for isolation
+    const microtask_queue = v8.v8__MicrotaskQueue__New(isolate.handle, v8.kExplicit).?;
+    errdefer v8.v8__MicrotaskQueue__DELETE(microtask_queue);
+
+    // Get the global template that was created once per isolate
+    const global_template: *const v8.ObjectTemplate = @ptrCast(@alignCast(v8.v8__Eternal__Get(&self.global_template, isolate.handle).?));
+    v8.v8__ObjectTemplate__SetInternalFieldCount(global_template, comptime Snapshot.countInternalFields(Window.JsApi));
+
+    const v8_context = v8.v8__Context__New__Config(isolate.handle, &.{
+        .global_template = global_template,
+        .global_object = null,
+        .microtask_queue = microtask_queue,
+    }).?;
+
+    // Create the v8::Context and wrap it in a v8::Global
+    var context_global: v8.Global = undefined;
+    v8.v8__Global__New(isolate.handle, v8_context, &context_global);
+
+    // get the global object for the context, this maps to our Window
+    const global_obj = v8.v8__Context__Global(v8_context).?;
+    {
+        // Store our TAO inside the internal field of the global object. This
+        // maps the v8::Object -> Zig instance. Almost all objects have this, and
+        // it gets setup automatically as objects are created, but the Window
+        // object already exists in v8 (it's the global) so we manually create
+        // the mapping here.
+        const tao = try context_arena.create(@import("TaggedOpaque.zig"));
+        tao.* = .{
+            .value = @ptrCast(page.window),
+            .prototype_chain = (&Window.JsApi.Meta.prototype_chain).ptr,
+            .prototype_len = @intCast(Window.JsApi.Meta.prototype_chain.len),
+            .subtype = .node, // this probably isn't right, but it's what we've been doing all along
+        };
+        v8.v8__Object__SetAlignedPointerInInternalField(global_obj, 0, tao);
+    }
+    // our window wrapped in a v8::Global
+    var global_global: v8.Global = undefined;
+    v8.v8__Global__New(isolate.handle, global_obj, &global_global);
+
+    const context_id = self.context_id;
+    self.context_id = context_id + 1;
+
+    const context = try context_arena.create(Context);
+    context.* = .{
+        .env = self,
+        .page = page,
+        .id = context_id,
+        .isolate = isolate,
+        .arena = context_arena,
+        .handle = context_global,
+        .templates = self.templates,
+        .call_arena = page.call_arena,
+        .microtask_queue = microtask_queue,
+        .script_manager = &page._script_manager,
+        .scheduler = .init(context_arena),
+        .finalizer_callback_pool = std.heap.MemoryPool(Context.FinalizerCallback).init(self.app.allocator),
+    };
+    try context.identity_map.putNoClobber(context_arena, @intFromPtr(page.window), global_global);
+
+    // Store a pointer to our context inside the v8 context so that, given
+    // a v8 context, we can get our context out
+    v8.v8__Context__SetAlignedPointerInEmbedderData(v8_context, 1, @ptrCast(context));
+
+    const count = self.context_count;
+    if (count >= self.contexts.len) {
+        return error.TooManyContexts;
+    }
+    self.contexts[count] = context;
+    self.context_count = count + 1;
+
+    return context;
 }
 
-pub fn runMicrotasks(self: *const Env) void {
-    self.isolate.performMicrotasksCheckpoint();
+pub fn destroyContext(self: *Env, context: *Context) void {
+    for (self.contexts[0..self.context_count], 0..) |ctx, i| {
+        if (ctx == context) {
+            // Swap with last element and decrement count
+            self.context_count -= 1;
+            self.contexts[i] = self.contexts[self.context_count];
+            break;
+        }
+    } else {
+        if (comptime IS_DEBUG) {
+            @panic("Tried to remove unknown context");
+        }
+    }
+
+    const isolate = self.isolate;
+    if (self.inspector) |inspector| {
+        var hs: js.HandleScope = undefined;
+        hs.init(isolate);
+        defer hs.deinit();
+        inspector.contextDestroyed(@ptrCast(v8.v8__Global__Get(&context.handle, isolate.handle)));
+    }
+
+    context.deinit();
 }
 
-pub fn pumpMessageLoop(self: *const Env) bool {
-    return self.platform.inner.pumpMessageLoop(self.isolate, false);
+pub fn runMicrotasks(self: *Env) void {
+    if (self.microtask_queues_are_running == false) {
+        const v8_isolate = self.isolate.handle;
+
+        self.microtask_queues_are_running = true;
+        defer self.microtask_queues_are_running = false;
+
+        var i: usize = 0;
+        while (i < self.context_count) : (i += 1) {
+            const ctx = self.contexts[i];
+            v8.v8__MicrotaskQueue__PerformCheckpoint(ctx.microtask_queue, v8_isolate);
+        }
+    }
+}
+
+pub fn runMacrotasks(self: *Env) !?u64 {
+    var ms_to_next_task: ?u64 = null;
+    for (self.contexts[0..self.context_count]) |ctx| {
+        if (comptime builtin.is_test == false) {
+            // I hate this comptime check as much as you do. But we have tests
+            // which rely on short execution before shutdown. In real world, it's
+            // underterministic whether a timer will or won't run before the
+            // page shutsdown. But for tests, we need to run them to their end.
+            if (ctx.scheduler.hasReadyTasks() == false) {
+                continue;
+            }
+        }
+
+        var hs: js.HandleScope = undefined;
+        const entered = ctx.enter(&hs);
+        defer entered.exit();
+
+        const ms = (try ctx.scheduler.run()) orelse continue;
+        if (ms_to_next_task == null or ms < ms_to_next_task.?) {
+            ms_to_next_task = ms;
+        }
+    }
+    return ms_to_next_task;
+}
+
+pub fn pumpMessageLoop(self: *const Env) void {
+    var hs: v8.HandleScope = undefined;
+    v8.v8__HandleScope__CONSTRUCT(&hs, self.isolate.handle);
+    defer v8.v8__HandleScope__DESTRUCT(&hs);
+
+    const isolate = self.isolate.handle;
+    const platform = self.platform.handle;
+    while (v8.v8__Platform__PumpMessageLoop(platform, isolate, false)) {}
+}
+
+pub fn hasBackgroundTasks(self: *const Env) bool {
+    return v8.v8__Isolate__HasPendingBackgroundTasks(self.isolate.handle);
+}
+
+pub fn waitForBackgroundTasks(self: *Env) void {
+    var hs: v8.HandleScope = undefined;
+    v8.v8__HandleScope__CONSTRUCT(&hs, self.isolate.handle);
+    defer v8.v8__HandleScope__DESTRUCT(&hs);
+
+    const isolate = self.isolate.handle;
+    const platform = self.platform.handle;
+    while (v8.v8__Isolate__HasPendingBackgroundTasks(isolate)) {
+        _ = v8.v8__Platform__PumpMessageLoop(platform, isolate, true);
+        self.runMicrotasks();
+    }
 }
 
 pub fn runIdleTasks(self: *const Env) void {
-    return self.platform.inner.runIdleTasks(self.isolate, 1);
-}
-pub fn newExecutionWorld(self: *Env) !ExecutionWorld {
-    return .{
-        .env = self,
-        .context = null,
-        .context_arena = ArenaAllocator.init(self.allocator),
-    };
+    v8.v8__Platform__RunIdleTasks(self.platform.handle, self.isolate.handle, 1);
 }
 
 // V8 doesn't immediately free memory associated with
 // a Context, it's managed by the garbage collector. We use the
 // `lowMemoryNotification` call on the isolate to encourage v8 to free
 // any contexts which have been freed.
+// This GC is very aggressive. Use memoryPressureNotification for less
+// aggressive GC passes.
 pub fn lowMemoryNotification(self: *Env) void {
-    var handle_scope: v8.HandleScope = undefined;
-    v8.HandleScope.init(&handle_scope, self.isolate);
+    var handle_scope: js.HandleScope = undefined;
+    handle_scope.init(self.isolate);
     defer handle_scope.deinit();
     self.isolate.lowMemoryNotification();
 }
 
+// V8 doesn't immediately free memory associated with
+// a Context, it's managed by the garbage collector. We use the
+// `memoryPressureNotification` call on the isolate to encourage v8 to free
+// any contexts which have been freed.
+// The level indicates the aggressivity of the GC required:
+// moderate speeds up incremental GC
+// critical runs one full GC
+// For a more aggressive GC, use lowMemoryNotification.
+pub fn memoryPressureNotification(self: *Env, level: Isolate.MemoryPressureLevel) void {
+    var handle_scope: js.HandleScope = undefined;
+    handle_scope.init(self.isolate);
+    defer handle_scope.deinit();
+    self.isolate.memoryPressureNotification(level);
+}
+
 pub fn dumpMemoryStats(self: *Env) void {
     const stats = self.isolate.getHeapStatistics();
     std.debug.print(
@@ -174,20 +470,54 @@ pub fn dumpMemoryStats(self: *Env) void {
     , .{ stats.total_heap_size, stats.total_heap_size_executable, stats.total_physical_size, stats.total_available_size, stats.used_heap_size, stats.heap_size_limit, stats.malloced_memory, stats.external_memory, stats.peak_malloced_memory, stats.number_of_native_contexts, stats.number_of_detached_contexts, stats.total_global_handles_size, stats.used_global_handles_size, stats.does_zap_garbage });
 }
 
-fn promiseRejectCallback(v8_msg: v8.C_PromiseRejectMessage) callconv(.c) void {
-    const msg = v8.PromiseRejectMessage.initFromC(v8_msg);
-    const isolate = msg.getPromise().toObject().getIsolate();
-    const context = Context.fromIsolate(isolate);
+fn promiseRejectCallback(message_handle: v8.PromiseRejectMessage) callconv(.c) void {
+    const promise_handle = v8.v8__PromiseRejectMessage__GetPromise(&message_handle).?;
+    const v8_isolate = v8.v8__Object__GetIsolate(@ptrCast(promise_handle)).?;
+    const js_isolate = js.Isolate{ .handle = v8_isolate };
+    const ctx = Context.fromIsolate(js_isolate);
 
-    const value =
-        if (msg.getValue()) |v8_value|
-            context.valueToString(v8_value, .{}) catch |err| @errorName(err)
-        else
-            "no value";
+    const local = js.Local{
+        .ctx = ctx,
+        .isolate = js_isolate,
+        .handle = v8.v8__Isolate__GetCurrentContext(v8_isolate).?,
+        .call_arena = ctx.call_arena,
+    };
 
-    log.debug(.js, "unhandled rejection", .{
-        .value = value,
-        .stack = context.stackTrace() catch |err| @errorName(err) orelse "???",
-        .note = "This should be updated to call window.unhandledrejection",
-    });
+    const page = ctx.page;
+    page.window.unhandledPromiseRejection(.{
+        .local = &local,
+        .handle = &message_handle,
+    }, page) catch |err| {
+        log.warn(.browser, "unhandled rejection handler", .{ .err = err });
+    };
 }
+
+fn fatalCallback(c_location: [*c]const u8, c_message: [*c]const u8) callconv(.c) void {
+    const location = std.mem.span(c_location);
+    const message = std.mem.span(c_message);
+    log.fatal(.app, "V8 fatal callback", .{ .location = location, .message = message });
+    @import("../../crash_handler.zig").crash("Fatal V8 Error", .{ .location = location, .message = message }, @returnAddress());
+}
+
+fn oomCallback(c_location: [*c]const u8, details: ?*const v8.OOMDetails) callconv(.c) void {
+    const location = std.mem.span(c_location);
+    const detail = if (details) |d| std.mem.span(d.detail) else "";
+    log.fatal(.app, "V8 OOM", .{ .location = location, .detail = detail });
+    @import("../../crash_handler.zig").crash("V8 OOM", .{ .location = location, .detail = detail }, @returnAddress());
+}
+
+const PrivateSymbols = struct {
+    const Private = @import("Private.zig");
+
+    child_nodes: Private,
+
+    fn init(isolate: *v8.Isolate) PrivateSymbols {
+        return .{
+            .child_nodes = Private.init(isolate, "child_nodes"),
+        };
+    }
+
+    fn deinit(self: *PrivateSymbols) void {
+        self.child_nodes.deinit();
+    }
+};

src/browser/js/ExecutionWorld.zig

@@ -1,208 +0,0 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
-//
-// Francis Bouvier <francis@lightpanda.io>
-// Pierre Tachoire <pierre@lightpanda.io>
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-const std = @import("std");
-const IS_DEBUG = @import("builtin").mode == .Debug;
-
-const log = @import("../../log.zig");
-
-const js = @import("js.zig");
-const v8 = js.v8;
-
-const Env = @import("Env.zig");
-const Context = @import("Context.zig");
-
-const Page = @import("../Page.zig");
-
-const ArenaAllocator = std.heap.ArenaAllocator;
-
-const CONTEXT_ARENA_RETAIN = 1024 * 64;
-
-// ExecutionWorld closely models a JS World.
-// https://chromium.googlesource.com/chromium/src/+/master/third_party/blink/renderer/bindings/core/v8/V8BindingDesign.md#World
-// https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/scripting/ExecutionWorld
-const ExecutionWorld = @This();
-
-env: *Env,
-
-// Arena whose lifetime is for a single page load. Where
-// the call_arena lives for a single function call, the context_arena
-// lives for the lifetime of the entire page. The allocator will be
-// owned by the Context, but the arena itself is owned by the ExecutionWorld
-// so that we can re-use it from context to context.
-context_arena: ArenaAllocator,
-
-// Currently a context maps to a Browser's Page. Here though, it's only a
-// mechanism to organization page-specific memory. The ExecutionWorld
-// does all the work, but having all page-specific data structures
-// grouped together helps keep things clean.
-context: ?Context = null,
-
-// no init, must be initialized via env.newExecutionWorld()
-
-pub fn deinit(self: *ExecutionWorld) void {
-    if (self.context != null) {
-        self.removeContext();
-    }
-
-    self.context_arena.deinit();
-}
-
-// Only the top Context in the Main ExecutionWorld should hold a handle_scope.
-// A v8.HandleScope is like an arena. Once created, any "Local" that
-// v8 creates will be released (or at least, releasable by the v8 GC)
-// when the handle_scope is freed.
-// We also maintain our own "context_arena" which allows us to have
-// all page related memory easily managed.
-pub fn createContext(self: *ExecutionWorld, page: *Page, enter: bool) !*Context {
-    std.debug.assert(self.context == null);
-
-    const env = self.env;
-    const isolate = env.isolate;
-    const arena = self.context_arena.allocator();
-
-    var v8_context: v8.Context = blk: {
-        var temp_scope: v8.HandleScope = undefined;
-        v8.HandleScope.init(&temp_scope, isolate);
-        defer temp_scope.deinit();
-
-        // Creates a global template that inherits from Window.
-        const global_template = @import("Snapshot.zig").createGlobalTemplate(isolate, env.templates);
-
-        // Add the named property handler
-        global_template.setNamedProperty(v8.NamedPropertyHandlerConfiguration{
-            .getter = unknownPropertyCallback,
-            .flags = v8.PropertyHandlerFlags.NonMasking | v8.PropertyHandlerFlags.OnlyInterceptStrings,
-        }, null);
-
-        const context_local = v8.Context.init(isolate, global_template, null);
-        const v8_context = v8.Persistent(v8.Context).init(isolate, context_local).castToContext();
-        break :blk v8_context;
-    };
-
-    // For a Page we only create one HandleScope, it is stored in the main World (enter==true). A page can have multple contexts, 1 for each World.
-    // The main Context that enters and holds the HandleScope should therefore always be created first. Following other worlds for this page
-    // like isolated Worlds, will thereby place their objects on the main page's HandleScope. Note: In the furure the number of context will multiply multiple frames support
-    var handle_scope: ?v8.HandleScope = null;
-    if (enter) {
-        handle_scope = @as(v8.HandleScope, undefined);
-        v8.HandleScope.init(&handle_scope.?, isolate);
-        v8_context.enter();
-    }
-    errdefer if (enter) {
-        v8_context.exit();
-        handle_scope.?.deinit();
-    };
-
-    const context_id = env.context_id;
-    env.context_id = context_id + 1;
-
-    self.context = Context{
-        .page = page,
-        .id = context_id,
-        .isolate = isolate,
-        .v8_context = v8_context,
-        .templates = env.templates,
-        .handle_scope = handle_scope,
-        .script_manager = &page._script_manager,
-        .call_arena = page.call_arena,
-        .arena = arena,
-    };
-
-    var context = &self.context.?;
-    // Store a pointer to our context inside the v8 context so that, given
-    // a v8 context, we can get our context out
-    const data = isolate.initBigIntU64(@intCast(@intFromPtr(context)));
-    v8_context.setEmbedderData(1, data);
-
-    try context.setupGlobal();
-    return context;
-}
-
-pub fn removeContext(self: *ExecutionWorld) void {
-    // Force running the micro task to drain the queue before reseting the
-    // context arena.
-    // Tasks in the queue are relying to the arena memory could be present in
-    // the queue. Running them later could lead to invalid memory accesses.
-    self.env.runMicrotasks();
-
-    self.context.?.deinit();
-    self.context = null;
-    _ = self.context_arena.reset(.{ .retain_with_limit = CONTEXT_ARENA_RETAIN });
-}
-
-pub fn terminateExecution(self: *const ExecutionWorld) void {
-    self.env.isolate.terminateExecution();
-}
-
-pub fn resumeExecution(self: *const ExecutionWorld) void {
-    self.env.isolate.cancelTerminateExecution();
-}
-
-pub fn unknownPropertyCallback(c_name: ?*const v8.C_Name, raw_info: ?*const v8.C_PropertyCallbackInfo) callconv(.c) u8 {
-    const info = v8.PropertyCallbackInfo.initFromV8(raw_info);
-
-    const context = Context.fromIsolate(info.getIsolate());
-    const maybe_property: ?[]u8 = context.valueToString(.{ .handle = c_name.? }, .{}) catch null;
-
-    const ignored = std.StaticStringMap(void).initComptime(.{
-        .{ "process", {} },
-        .{ "ShadyDOM", {} },
-        .{ "ShadyCSS", {} },
-
-        .{ "litNonce", {} },
-        .{ "litHtmlVersions", {} },
-        .{ "litElementVersions", {} },
-        .{ "litHtmlPolyfillSupport", {} },
-        .{ "litElementHydrateSupport", {} },
-        .{ "litElementPolyfillSupport", {} },
-        .{ "reactiveElementVersions", {} },
-
-        .{ "recaptcha", {} },
-        .{ "grecaptcha", {} },
-        .{ "___grecaptcha_cfg", {} },
-        .{ "__recaptcha_api", {} },
-        .{ "__google_recaptcha_client", {} },
-
-        .{ "CLOSURE_FLAGS", {} },
-    });
-
-    if (maybe_property) |prop| {
-        if (!ignored.has(prop)) {
-            const page = context.page;
-            const document = page.document;
-
-            if (document.getElementById(prop, page)) |el| {
-                const js_value = context.zigValueToJs(el, .{}) catch {
-                    return v8.Intercepted.No;
-                };
-
-                info.getReturnValue().set(js_value);
-                return v8.Intercepted.Yes;
-            }
-
-            log.debug(.unknown_prop, "unknown global property", .{
-                .info = "but the property can exist in pure JS",
-                .stack = context.stackTrace() catch "???",
-                .property = prop,
-            });
-        }
-    }
-
-    return v8.Intercepted.No;
-}

src/browser/js/Function.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -20,101 +20,91 @@ const std = @import("std");
 const js = @import("js.zig");
 const v8 = js.v8;
 
-const PersistentFunction = v8.Persistent(v8.Function);
-
-const Allocator = std.mem.Allocator;
+const log = @import("../../log.zig");
 
 const Function = @This();
 
-id: usize,
-context: *js.Context,
-this: ?v8.Object = null,
-func: PersistentFunction,
+local: *const js.Local,
+this: ?*const v8.Object = null,
+handle: *const v8.Function,
 
 pub const Result = struct {
     stack: ?[]const u8,
     exception: []const u8,
 };
 
-pub fn getName(self: *const Function, allocator: Allocator) ![]const u8 {
-    const name = self.func.castToFunction().getName();
-    return self.context.valueToString(name, .{ .allocator = allocator });
-}
-
-pub fn setName(self: *const Function, name: []const u8) void {
-    const v8_name = v8.String.initUtf8(self.context.isolate, name);
-    self.func.castToFunction().setName(v8_name);
-}
-
 pub fn withThis(self: *const Function, value: anytype) !Function {
+    const local = self.local;
     const this_obj = if (@TypeOf(value) == js.Object)
-        value.js_obj
+        value.handle
     else
-        (try self.context.zigValueToJs(value, .{})).castTo(v8.Object);
+        (try local.zigValueToJs(value, .{})).handle;
 
     return .{
-        .id = self.id,
+        .local = local,
         .this = this_obj,
-        .func = self.func,
-        .context = self.context,
+        .handle = self.handle,
     };
 }
 
-pub fn newInstance(self: *const Function, result: *Result) !js.Object {
-    const context = self.context;
+pub fn newInstance(self: *const Function, caught: *js.TryCatch.Caught) !js.Object {
+    const local = self.local;
 
     var try_catch: js.TryCatch = undefined;
-    try_catch.init(context);
+    try_catch.init(local);
     defer try_catch.deinit();
 
     // This creates a new instance using this Function as a constructor.
-    // This returns a generic Object
-    const js_obj = self.func.castToFunction().initInstance(context.v8_context, &.{}) orelse {
-        if (try_catch.hasCaught()) {
-            const allocator = context.call_arena;
-            result.stack = try_catch.stack(allocator) catch null;
-            result.exception = (try_catch.exception(allocator) catch "???") orelse "???";
-        } else {
-            result.stack = null;
-            result.exception = "???";
-        }
+    // const c_args = @as(?[*]const ?*c.Value, @ptrCast(&.{}));
+    const handle = v8.v8__Function__NewInstance(self.handle, local.handle, 0, null) orelse {
+        caught.* = try_catch.caughtOrError(local.call_arena, error.Unknown);
         return error.JsConstructorFailed;
     };
 
     return .{
-        .context = context,
-        .js_obj = js_obj,
+        .local = local,
+        .handle = handle,
     };
 }
 
 pub fn call(self: *const Function, comptime T: type, args: anytype) !T {
-    return self.callWithThis(T, self.getThis(), args);
+    var caught: js.TryCatch.Caught = undefined;
+    return self._tryCallWithThis(T, self.getThis(), args, &caught, .{}) catch |err| {
+        log.warn(.js, "call caught", .{ .err = err, .caught = caught });
+        return err;
+    };
 }
 
-pub fn tryCall(self: *const Function, comptime T: type, args: anytype, result: *Result) !T {
-    return self.tryCallWithThis(T, self.getThis(), args, result);
-}
-
-pub fn tryCallWithThis(self: *const Function, comptime T: type, this: anytype, args: anytype, result: *Result) !T {
-    var try_catch: js.TryCatch = undefined;
-    try_catch.init(self.context);
-    defer try_catch.deinit();
-
-    return self.callWithThis(T, this, args) catch |err| {
-        if (try_catch.hasCaught()) {
-            const allocator = self.context.call_arena;
-            result.stack = try_catch.stack(allocator) catch null;
-            result.exception = (try_catch.exception(allocator) catch @errorName(err)) orelse @errorName(err);
-        } else {
-            result.stack = null;
-            result.exception = @errorName(err);
-        }
+pub fn callRethrow(self: *const Function, comptime T: type, args: anytype) !T {
+    var caught: js.TryCatch.Caught = undefined;
+    return self._tryCallWithThis(T, self.getThis(), args, &caught, .{ .rethrow = true }) catch |err| {
+        log.warn(.js, "call caught", .{ .err = err, .caught = caught });
         return err;
     };
 }
 
 pub fn callWithThis(self: *const Function, comptime T: type, this: anytype, args: anytype) !T {
-    const context = self.context;
+    var caught: js.TryCatch.Caught = undefined;
+    return self._tryCallWithThis(T, this, args, &caught, .{}) catch |err| {
+        log.warn(.js, "callWithThis caught", .{ .err = err, .caught = caught });
+        return err;
+    };
+}
+
+pub fn tryCall(self: *const Function, comptime T: type, args: anytype, caught: *js.TryCatch.Caught) !T {
+    return self._tryCallWithThis(T, self.getThis(), args, caught, .{});
+}
+
+pub fn tryCallWithThis(self: *const Function, comptime T: type, this: anytype, args: anytype, caught: *js.TryCatch.Caught) !T {
+    return self._tryCallWithThis(T, this, args, caught, .{});
+}
+
+const CallOpts = struct {
+    rethrow: bool = false,
+};
+fn _tryCallWithThis(self: *const Function, comptime T: type, this: anytype, args: anytype, caught: *js.TryCatch.Caught, comptime opts: CallOpts) !T {
+    caught.* = .{};
+    const local = self.local;
 
     // When we're calling a function from within JavaScript itself, this isn't
     // necessary. We're within a Caller instantiation, which will already have
@@ -125,65 +115,142 @@ pub fn callWithThis(self: *const Function, comptime T: type, this: anytype, args
     // need to increase the call_depth so that the call_arena remains valid for
     // the duration of the function call. If we don't do this, the call_arena
     // will be reset after each statement of the function which executes Zig code.
-    const call_depth = context.call_depth;
-    context.call_depth = call_depth + 1;
-    defer context.call_depth = call_depth;
+    const ctx = local.ctx;
+    const call_depth = ctx.call_depth;
+    ctx.call_depth = call_depth + 1;
+    defer ctx.call_depth = call_depth;
 
     const js_this = blk: {
-        if (@TypeOf(this) == v8.Object) {
+        if (@TypeOf(this) == js.Object) {
             break :blk this;
         }
-
-        if (@TypeOf(this) == js.Object) {
-            break :blk this.js_obj;
-        }
-        break :blk try context.zigValueToJs(this, .{});
+        break :blk try local.zigValueToJs(this, .{});
     };
 
     const aargs = if (comptime @typeInfo(@TypeOf(args)) == .null) struct {}{} else args;
 
-    const js_args: []const v8.Value = switch (@typeInfo(@TypeOf(aargs))) {
+    const js_args: []const *const v8.Value = switch (@typeInfo(@TypeOf(aargs))) {
         .@"struct" => |s| blk: {
             const fields = s.fields;
-            var js_args: [fields.len]v8.Value = undefined;
+            var js_args: [fields.len]*const v8.Value = undefined;
             inline for (fields, 0..) |f, i| {
-                js_args[i] = try context.zigValueToJs(@field(aargs, f.name), .{});
+                js_args[i] = (try local.zigValueToJs(@field(aargs, f.name), .{})).handle;
             }
-            const cargs: [fields.len]v8.Value = js_args;
+            const cargs: [fields.len]*const v8.Value = js_args;
             break :blk &cargs;
         },
         .pointer => blk: {
-            var values = try context.call_arena.alloc(v8.Value, args.len);
+            var values = try local.call_arena.alloc(*const v8.Value, args.len);
             for (args, 0..) |a, i| {
-                values[i] = try context.zigValueToJs(a, .{});
+                values[i] = (try local.zigValueToJs(a, .{})).handle;
             }
             break :blk values;
         },
         else => @compileError("JS Function called with invalid paremter type"),
     };
 
-    const result = self.func.castToFunction().call(context.v8_context, js_this, js_args);
-    if (result == null) {
-        // std.debug.print("CB ERR: {s}\n", .{self.src() catch "???"});
-        return error.JSExecCallback;
-    }
+    const c_args = @as(?[*]const ?*v8.Value, @ptrCast(js_args.ptr));
 
-    if (@typeInfo(T) == .void) return {};
-    return context.jsValueToZig(T, result.?);
+    var try_catch: js.TryCatch = undefined;
+    try_catch.init(local);
+    defer try_catch.deinit();
+
+    const handle = v8.v8__Function__Call(self.handle, local.handle, js_this.handle, @as(c_int, @intCast(js_args.len)), c_args) orelse {
+        if ((comptime opts.rethrow) and try_catch.hasCaught()) {
+            try_catch.rethrow();
+            return error.TryCatchRethrow;
+        }
+        caught.* = try_catch.caughtOrError(local.call_arena, error.JSExecCallback);
+        return error.JSExecCallback;
+    };
+
+    if (@typeInfo(T) == .void) {
+        return {};
+    }
+    return local.jsValueToZig(T, .{ .local = local, .handle = handle });
 }
 
-fn getThis(self: *const Function) v8.Object {
-    return self.this orelse self.context.v8_context.getGlobal();
+fn getThis(self: *const Function) js.Object {
+    const handle = if (self.this) |t| t else v8.v8__Context__Global(self.local.handle).?;
+    return .{
+        .local = self.local,
+        .handle = handle,
+    };
 }
 
 pub fn src(self: *const Function) ![]const u8 {
-    const value = self.func.castToFunction().toValue();
-    return self.context.valueToString(value, .{});
+    return self.local.valueToString(.{ .local = self.local, .handle = @ptrCast(self.handle) }, .{});
 }
 
 pub fn getPropertyValue(self: *const Function, name: []const u8) !?js.Value {
-    const func_obj = self.func.castToFunction().toObject();
-    const key = v8.String.initUtf8(self.context.isolate, name);
-    const value = func_obj.getValue(self.context.v8_context, key) catch return null;
-    return self.context.createValue(value);
+    const local = self.local;
+    const key = local.isolate.initStringHandle(name);
+    const handle = v8.v8__Object__Get(self.handle, self.local.handle, key) orelse {
+        return error.JsException;
+    };
+
+    return .{
+        .local = local,
+        .handle = handle,
+    };
+}
+
+pub fn persist(self: *const Function) !Global {
+    return self._persist(true);
+}
+
+pub fn temp(self: *const Function) !Temp {
+    return self._persist(false);
+}
+
+fn _persist(self: *const Function, comptime is_global: bool) !(if (is_global) Global else Temp) {
+    var ctx = self.local.ctx;
+
+    var global: v8.Global = undefined;
+    v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
+    if (comptime is_global) {
+        try ctx.global_functions.append(ctx.arena, global);
+    } else {
+        try ctx.global_functions_temp.put(ctx.arena, global.data_ptr, global);
+    }
+    return .{ .handle = global };
+}
+
+pub fn tempWithThis(self: *const Function, value: anytype) !Temp {
+    const with_this = try self.withThis(value);
+    return with_this.temp();
+}
+
+pub fn persistWithThis(self: *const Function, value: anytype) !Global {
+    const with_this = try self.withThis(value);
+    return with_this.persist();
+}
+
+pub const Temp = G(0);
+pub const Global = G(1);
+
+fn G(comptime discriminator: u8) type {
+    return struct {
+        handle: v8.Global,
+
+        // makes the types different (G(0) != G(1)), without taking up space
+        comptime _: u8 = discriminator,
+
+        const Self = @This();
+
+        pub fn deinit(self: *Self) void {
+            v8.v8__Global__Reset(&self.handle);
+        }
+
+        pub fn local(self: *const Self, l: *const js.Local) Function {
+            return .{
+                .local = l,
+                .handle = @ptrCast(v8.v8__Global__Get(&self.handle, l.isolate.handle)),
+            };
+        }
+
+        pub fn isEqual(self: *const Self, other: Function) bool {
+            return v8.v8__Global__IsEqual(&self.handle, other.handle);
+        }
+    };
 }

src/browser/js/HandleScope.zig

@@ -0,0 +1,40 @@
+// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const js = @import("js.zig");
+const v8 = js.v8;
+
+const HandleScope = @This();
+
+handle: v8.HandleScope,
+
+// V8 takes an address of the value that's passed in, so it needs to be stable.
+// We can't create the v8.HandleScope here, pass it to v8 and then return the
+// value, as v8 will then have taken the address of the function-scopped (and no
+// longer valid) local.
+pub fn init(self: *HandleScope, isolate: js.Isolate) void {
+    self.initWithIsolateHandle(isolate.handle);
+}
+
+pub fn initWithIsolateHandle(self: *HandleScope, isolate: *v8.Isolate) void {
+    v8.v8__HandleScope__CONSTRUCT(&self.handle, isolate);
+}
+
+pub fn deinit(self: *HandleScope) void {
+    v8.v8__HandleScope__DESTRUCT(&self.handle);
+}

src/browser/js/Inspector.zig

@@ -20,63 +20,79 @@ const std = @import("std");
 const js = @import("js.zig");
 const v8 = js.v8;
 
-const Context = @import("Context.zig");
+const TaggedOpaque = @import("TaggedOpaque.zig");
 
 const Allocator = std.mem.Allocator;
 
+const CONTEXT_GROUP_ID = 1;
+const CLIENT_TRUST_LEVEL = 1;
+const IS_DEBUG = @import("builtin").mode == .Debug;
+
+// Inspector exists for the lifetime of the Isolate/Env. 1 Isolate = 1 Inspector.
+// It combines the v8.Inspector and the v8.InspectorClientImpl. The v8.InspectorClientImpl
+// is our own implementation that fulfills the InspectorClient API, i.e. it's the
+// mechanism v8 provides to let us tweak how the inspector works. For example, it
+// Below, you'll find a few pub export fn v8_inspector__Client__IMPL__XYZ functions
+// which is our implementation of what the v8::Inspector requires of our Client
+// (not much at all)
 const Inspector = @This();
 
-pub const RemoteObject = v8.RemoteObject;
+unique_id: i64,
+isolate: *v8.Isolate,
+handle: *v8.Inspector,
+client: *v8.InspectorClientImpl,
+default_context: ?v8.Global,
+session: ?Session,
 
-isolate: v8.Isolate,
-inner: *v8.Inspector,
-session: v8.InspectorSession,
+pub fn init(allocator: Allocator, isolate: *v8.Isolate) !*Inspector {
+    const self = try allocator.create(Inspector);
+    errdefer allocator.destroy(self);
 
-// We expect allocator to be an arena
-pub fn init(allocator: Allocator, isolate: v8.Isolate, ctx: anytype) !Inspector {
-    const ContextT = @TypeOf(ctx);
-
-    const InspectorContainer = switch (@typeInfo(ContextT)) {
-        .@"struct" => ContextT,
-        .pointer => |ptr| ptr.child,
-        .void => NoopInspector,
-        else => @compileError("invalid context type"),
+    self.* = .{
+        .unique_id = 1,
+        .session = null,
+        .isolate = isolate,
+        .client = undefined,
+        .handle = undefined,
+        .default_context = null,
     };
 
-    // If necessary, turn a void context into something we can safely ptrCast
-    const safe_context: *anyopaque = if (ContextT == void) @ptrCast(@constCast(&{})) else ctx;
+    self.client = v8.v8_inspector__Client__IMPL__CREATE();
+    errdefer v8.v8_inspector__Client__IMPL__DELETE(self.client);
+    v8.v8_inspector__Client__IMPL__SET_DATA(self.client, self);
 
-    const channel = v8.InspectorChannel.init(
-        safe_context,
-        InspectorContainer.onInspectorResponse,
-        InspectorContainer.onInspectorEvent,
-        InspectorContainer.onRunMessageLoopOnPause,
-        InspectorContainer.onQuitMessageLoopOnPause,
-        isolate,
-    );
+    self.handle = v8.v8_inspector__Inspector__Create(isolate, self.client).?;
+    errdefer v8.v8_inspector__Inspector__DELETE(self.handle);
 
-    const client = v8.InspectorClient.init();
-
-    const inner = try allocator.create(v8.Inspector);
-    v8.Inspector.init(inner, client, channel, isolate);
-    return .{ .inner = inner, .isolate = isolate, .session = inner.connect() };
+    return self;
 }
 
-pub fn deinit(self: *const Inspector) void {
-    self.session.deinit();
-    self.inner.deinit();
+pub fn deinit(self: *const Inspector, allocator: Allocator) void {
+    var hs: v8.HandleScope = undefined;
+    v8.v8__HandleScope__CONSTRUCT(&hs, self.isolate);
+    defer v8.v8__HandleScope__DESTRUCT(&hs);
+
+    if (self.session) |*s| {
+        s.deinit();
+    }
+    v8.v8_inspector__Client__IMPL__DELETE(self.client);
+    v8.v8_inspector__Inspector__DELETE(self.handle);
+    allocator.destroy(self);
 }
 
-pub fn send(self: *const Inspector, msg: []const u8) void {
-    // Can't assume the main Context exists (with its HandleScope)
-    // available when doing this. Pages (and thus the HandleScope)
-    // comes and goes, but CDP can keep sending messages.
-    const isolate = self.isolate;
-    var temp_scope: v8.HandleScope = undefined;
-    v8.HandleScope.init(&temp_scope, isolate);
-    defer temp_scope.deinit();
+pub fn startSession(self: *Inspector, ctx: anytype) *Session {
+    if (comptime IS_DEBUG) {
+        std.debug.assert(self.session == null);
+    }
 
-    self.session.dispatchProtocolMessage(isolate, msg);
+    self.session = @as(Session, undefined);
+    Session.init(&self.session.?, self, ctx);
+    return &self.session.?;
+}
+
+pub fn stopSession(self: *Inspector) void {
+    self.session.?.deinit();
+    self.session = null;
 }
 
 // From CDP docs
@@ -88,75 +104,353 @@ pub fn send(self: *const Inspector, msg: []const u8) void {
 // {isDefault: boolean, type: 'default'|'isolated'|'worker', frameId: string}
 // - is_default_context: Whether the execution context is default, should match the auxData
 pub fn contextCreated(
-    self: *const Inspector,
-    context: *const Context,
+    self: *Inspector,
+    local: *const js.Local,
     name: []const u8,
     origin: []const u8,
-    aux_data: ?[]const u8,
+    aux_data: []const u8,
     is_default_context: bool,
 ) void {
-    self.inner.contextCreated(context.v8_context, name, origin, aux_data, is_default_context);
-}
-
-// Retrieves the RemoteObject for a given value.
-// The value is loaded through the ExecutionWorld's mapZigInstanceToJs function,
-// just like a method return value. Therefore, if we've mapped this
-// value before, we'll get the existing JS PersistedObject and if not
-// we'll create it and track it for cleanup when the context ends.
-pub fn getRemoteObject(
-    self: *const Inspector,
-    context: *Context,
-    group: []const u8,
-    value: anytype,
-) !RemoteObject {
-    const js_value = try context.zigValueToJs(value, .{});
-
-    // We do not want to expose this as a parameter for now
-    const generate_preview = false;
-    return self.session.wrapObject(
-        context.isolate,
-        context.v8_context,
-        js_value,
-        group,
-        generate_preview,
+    v8.v8_inspector__Inspector__ContextCreated(
+        self.handle,
+        name.ptr,
+        name.len,
+        origin.ptr,
+        origin.len,
+        aux_data.ptr,
+        aux_data.len,
+        CONTEXT_GROUP_ID,
+        local.handle,
     );
-}
 
-// Gets a value by object ID regardless of which context it is in.
-// Our TaggedAnyOpaque stores the "resolved" ptr value (the most specific _type,
-// e.g. we store the ptr to the Div not the EventTarget). But, this is asking for
-// the pointer to the Node, so we need to use the same resolution mechanism which
-// is used when we're calling a function to turn the Div into a Node, which is
-// what Context.typeTaggedAnyOpaque does.
-pub fn getNodePtr(self: *const Inspector, allocator: Allocator, object_id: []const u8) !*anyopaque {
-    const unwrapped = try self.session.unwrapObject(allocator, object_id);
-    // The values context and groupId are not used here
-    const js_val = unwrapped.value;
-    if (js_val.isObject() == false) {
-        return error.ObjectIdIsNotANode;
+    if (is_default_context) {
+        self.default_context = local.ctx.handle;
     }
-    const Node = @import("../webapi/Node.zig");
-    return Context.typeTaggedAnyOpaque(*Node, js_val.castTo(v8.Object)) catch {
-        return error.ObjectIdIsNotANode;
-    };
 }
 
-const NoopInspector = struct {
-    pub fn onInspectorResponse(_: *anyopaque, _: u32, _: []const u8) void {}
-    pub fn onInspectorEvent(_: *anyopaque, _: []const u8) void {}
-    pub fn onRunMessageLoopOnPause(_: *anyopaque, _: u32) void {}
-    pub fn onQuitMessageLoopOnPause(_: *anyopaque) void {}
+pub fn contextDestroyed(self: *Inspector, context: *const v8.Context) void {
+    v8.v8_inspector__Inspector__ContextDestroyed(self.handle, context);
+}
+
+pub fn resetContextGroup(self: *const Inspector) void {
+    var hs: v8.HandleScope = undefined;
+    v8.v8__HandleScope__CONSTRUCT(&hs, self.isolate);
+    defer v8.v8__HandleScope__DESTRUCT(&hs);
+
+    v8.v8_inspector__Inspector__ResetContextGroup(self.handle, CONTEXT_GROUP_ID);
+}
+
+pub const RemoteObject = struct {
+    handle: *v8.RemoteObject,
+
+    pub fn deinit(self: RemoteObject) void {
+        v8.v8_inspector__RemoteObject__DELETE(self.handle);
+    }
+
+    pub fn getType(self: RemoteObject, allocator: Allocator) ![]const u8 {
+        var ctype_: v8.CZigString = .{ .ptr = null, .len = 0 };
+        if (!v8.v8_inspector__RemoteObject__getType(self.handle, &allocator, &ctype_)) return error.V8AllocFailed;
+        return cZigStringToString(ctype_) orelse return error.InvalidType;
+    }
+
+    pub fn getSubtype(self: RemoteObject, allocator: Allocator) !?[]const u8 {
+        if (!v8.v8_inspector__RemoteObject__hasSubtype(self.handle)) return null;
+
+        var csubtype: v8.CZigString = .{ .ptr = null, .len = 0 };
+        if (!v8.v8_inspector__RemoteObject__getSubtype(self.handle, &allocator, &csubtype)) return error.V8AllocFailed;
+        return cZigStringToString(csubtype);
+    }
+
+    pub fn getClassName(self: RemoteObject, allocator: Allocator) !?[]const u8 {
+        if (!v8.v8_inspector__RemoteObject__hasClassName(self.handle)) return null;
+
+        var cclass_name: v8.CZigString = .{ .ptr = null, .len = 0 };
+        if (!v8.v8_inspector__RemoteObject__getClassName(self.handle, &allocator, &cclass_name)) return error.V8AllocFailed;
+        return cZigStringToString(cclass_name);
+    }
+
+    pub fn getDescription(self: RemoteObject, allocator: Allocator) !?[]const u8 {
+        if (!v8.v8_inspector__RemoteObject__hasDescription(self.handle)) return null;
+
+        var description: v8.CZigString = .{ .ptr = null, .len = 0 };
+        if (!v8.v8_inspector__RemoteObject__getDescription(self.handle, &allocator, &description)) return error.V8AllocFailed;
+        return cZigStringToString(description);
+    }
+
+    pub fn getObjectId(self: RemoteObject, allocator: Allocator) !?[]const u8 {
+        if (!v8.v8_inspector__RemoteObject__hasObjectId(self.handle)) return null;
+
+        var cobject_id: v8.CZigString = .{ .ptr = null, .len = 0 };
+        if (!v8.v8_inspector__RemoteObject__getObjectId(self.handle, &allocator, &cobject_id)) return error.V8AllocFailed;
+        return cZigStringToString(cobject_id);
+    }
 };
 
-pub fn getTaggedAnyOpaque(value: v8.Value) ?*js.TaggedAnyOpaque {
-    if (value.isObject() == false) {
+// Combines a v8::InspectorSession and a v8::InspectorChannelImpl. The
+// InspectorSession is for zig -> v8 (sending messages to the inspector). The
+// Channel is for v8 -> zig, getting events from the Inspector (that we'll pass
+// back ot some opaque context, i.e the CDP BrowserContext).
+// The channel callbacks are defined below, as:
+//   pub export fn v8_inspector__Channel__IMPL__XYZ
+pub const Session = struct {
+    inspector: *Inspector,
+    handle: *v8.InspectorSession,
+    channel: *v8.InspectorChannelImpl,
+
+    // callbacks
+    ctx: *anyopaque,
+    onNotif: *const fn (ctx: *anyopaque, msg: []const u8) void,
+    onResp: *const fn (ctx: *anyopaque, call_id: u32, msg: []const u8) void,
+
+    fn init(self: *Session, inspector: *Inspector, ctx: anytype) void {
+        const Container = @typeInfo(@TypeOf(ctx)).pointer.child;
+
+        const channel = v8.v8_inspector__Channel__IMPL__CREATE(inspector.isolate);
+        const handle = v8.v8_inspector__Inspector__Connect(
+            inspector.handle,
+            CONTEXT_GROUP_ID,
+            channel,
+            CLIENT_TRUST_LEVEL,
+        ).?;
+        v8.v8_inspector__Channel__IMPL__SET_DATA(channel, self);
+
+        self.* = .{
+            .ctx = ctx,
+            .handle = handle,
+            .channel = channel,
+            .inspector = inspector,
+            .onResp = Container.onInspectorResponse,
+            .onNotif = Container.onInspectorEvent,
+        };
+    }
+
+    fn deinit(self: *const Session) void {
+        v8.v8_inspector__Session__DELETE(self.handle);
+        v8.v8_inspector__Channel__IMPL__DELETE(self.channel);
+    }
+
+    pub fn send(self: *const Session, msg: []const u8) void {
+        const isolate = self.inspector.isolate;
+        var hs: v8.HandleScope = undefined;
+        v8.v8__HandleScope__CONSTRUCT(&hs, isolate);
+        defer v8.v8__HandleScope__DESTRUCT(&hs);
+
+        v8.v8_inspector__Session__dispatchProtocolMessage(
+            self.handle,
+            isolate,
+            msg.ptr,
+            msg.len,
+        );
+    }
+
+    // Gets a value by object ID regardless of which context it is in.
+    // Our TaggedOpaque stores the "resolved" ptr value (the most specific _type,
+    // e.g. we store the ptr to the Div not the EventTarget). But, this is asking for
+    // the pointer to the Node, so we need to use the same resolution mechanism which
+    // is used when we're calling a function to turn the Div into a Node, which is
+    // what TaggedOpaque.fromJS does.
+    pub fn getNodePtr(self: *const Session, allocator: Allocator, object_id: []const u8, local: *js.Local) !*anyopaque {
+        // just to indicate that the caller is responsible for ensuring there's a local environment
+        _ = local;
+
+        const unwrapped = try self.unwrapObject(allocator, object_id);
+        // The values context and groupId are not used here
+        const js_val = unwrapped.value;
+        if (!v8.v8__Value__IsObject(js_val)) {
+            return error.ObjectIdIsNotANode;
+        }
+
+        const Node = @import("../webapi/Node.zig");
+        // Cast to *const v8.Object for typeTaggedAnyOpaque
+        return TaggedOpaque.fromJS(*Node, @ptrCast(js_val)) catch return error.ObjectIdIsNotANode;
+    }
+
+    // Retrieves the RemoteObject for a given value.
+    // The value is loaded through the ExecutionWorld's mapZigInstanceToJs function,
+    // just like a method return value. Therefore, if we've mapped this
+    // value before, we'll get the existing js.Global(js.Object) and if not
+    // we'll create it and track it for cleanup when the context ends.
+    pub fn getRemoteObject(
+        self: *const Session,
+        local: *const js.Local,
+        group: []const u8,
+        value: anytype,
+    ) !RemoteObject {
+        const js_val = try local.zigValueToJs(value, .{});
+
+        // We do not want to expose this as a parameter for now
+        const generate_preview = false;
+        return self.wrapObject(
+            local.isolate.handle,
+            local.handle,
+            js_val.handle,
+            group,
+            generate_preview,
+        );
+    }
+
+    fn wrapObject(
+        self: Session,
+        isolate: *v8.Isolate,
+        ctx: *const v8.Context,
+        val: *const v8.Value,
+        grpname: []const u8,
+        generatepreview: bool,
+    ) !RemoteObject {
+        const remote_object = v8.v8_inspector__Session__wrapObject(
+            self.handle,
+            isolate,
+            ctx,
+            val,
+            grpname.ptr,
+            grpname.len,
+            generatepreview,
+        ).?;
+        return .{ .handle = remote_object };
+    }
+
+    fn unwrapObject(
+        self: Session,
+        allocator: Allocator,
+        object_id: []const u8,
+    ) !UnwrappedObject {
+        const in_object_id = v8.CZigString{
+            .ptr = object_id.ptr,
+            .len = object_id.len,
+        };
+        var out_error: v8.CZigString = .{ .ptr = null, .len = 0 };
+        var out_value_handle: ?*v8.Value = null;
+        var out_context_handle: ?*v8.Context = null;
+        var out_object_group: v8.CZigString = .{ .ptr = null, .len = 0 };
+
+        const result = v8.v8_inspector__Session__unwrapObject(
+            self.handle,
+            &allocator,
+            &out_error,
+            in_object_id,
+            &out_value_handle,
+            &out_context_handle,
+            &out_object_group,
+        );
+
+        if (!result) {
+            const error_str = cZigStringToString(out_error) orelse return error.UnwrapFailed;
+            std.log.err("unwrapObject failed: {s}", .{error_str});
+            return error.UnwrapFailed;
+        }
+
+        return .{
+            .value = out_value_handle.?,
+            .context = out_context_handle.?,
+            .object_group = cZigStringToString(out_object_group),
+        };
+    }
+};
+
+const UnwrappedObject = struct {
+    value: *const v8.Value,
+    context: *const v8.Context,
+    object_group: ?[]const u8,
+};
+
+pub fn getTaggedOpaque(value: *const v8.Value) ?*TaggedOpaque {
+    if (!v8.v8__Value__IsObject(value)) {
         return null;
     }
-    const obj = value.castTo(v8.Object);
-    if (obj.internalFieldCount() == 0) {
+    const internal_field_count = v8.v8__Object__InternalFieldCount(value);
+    if (internal_field_count == 0) {
         return null;
     }
 
-    const external_data = obj.getInternalField(0).castTo(v8.External).get().?;
-    return @ptrCast(@alignCast(external_data));
+    const tao_ptr = v8.v8__Object__GetAlignedPointerFromInternalField(value, 0).?;
+    return @ptrCast(@alignCast(tao_ptr));
+}
+
+fn cZigStringToString(s: v8.CZigString) ?[]const u8 {
+    if (s.ptr == null) return null;
+    return s.ptr[0..s.len];
+}
+
+// C export functions for Inspector callbacks
+pub export fn v8_inspector__Client__IMPL__generateUniqueId(
+    _: *v8.InspectorClientImpl,
+    data: *anyopaque,
+) callconv(.c) i64 {
+    const inspector: *Inspector = @ptrCast(@alignCast(data));
+    const unique_id = inspector.unique_id + 1;
+    inspector.unique_id = unique_id;
+    return unique_id;
+}
+
+pub export fn v8_inspector__Client__IMPL__runMessageLoopOnPause(
+    _: *v8.InspectorClientImpl,
+    data: *anyopaque,
+    context_group_id: c_int,
+) callconv(.c) void {
+    _ = data;
+    _ = context_group_id;
+}
+
+pub export fn v8_inspector__Client__IMPL__quitMessageLoopOnPause(
+    _: *v8.InspectorClientImpl,
+    data: *anyopaque,
+) callconv(.c) void {
+    _ = data;
+}
+
+pub export fn v8_inspector__Client__IMPL__runIfWaitingForDebugger(
+    _: *v8.InspectorClientImpl,
+    _: *anyopaque,
+    _: c_int,
+) callconv(.c) void {
+    // TODO
+}
+
+pub export fn v8_inspector__Client__IMPL__consoleAPIMessage(
+    _: *v8.InspectorClientImpl,
+    _: *anyopaque,
+    _: c_int,
+    _: v8.MessageErrorLevel,
+    _: *v8.StringView,
+    _: *v8.StringView,
+    _: c_uint,
+    _: c_uint,
+    _: *v8.StackTrace,
+) callconv(.c) void {}
+
+pub export fn v8_inspector__Client__IMPL__ensureDefaultContextInGroup(
+    _: *v8.InspectorClientImpl,
+    data: *anyopaque,
+) callconv(.c) ?*const v8.Context {
+    const inspector: *Inspector = @ptrCast(@alignCast(data));
+    const global_handle = inspector.default_context orelse return null;
+    return v8.v8__Global__Get(&global_handle, inspector.isolate);
+}
+
+pub export fn v8_inspector__Channel__IMPL__sendResponse(
+    _: *v8.InspectorChannelImpl,
+    data: *anyopaque,
+    call_id: c_int,
+    msg: [*c]u8,
+    length: usize,
+) callconv(.c) void {
+    const session: *Session = @ptrCast(@alignCast(data));
+    session.onResp(session.ctx, @intCast(call_id), msg[0..length]);
+}
+
+pub export fn v8_inspector__Channel__IMPL__sendNotification(
+    _: *v8.InspectorChannelImpl,
+    data: *anyopaque,
+    msg: [*c]u8,
+    length: usize,
+) callconv(.c) void {
+    const session: *Session = @ptrCast(@alignCast(data));
+    session.onNotif(session.ctx, msg[0..length]);
+}
+
+pub export fn v8_inspector__Channel__IMPL__flushProtocolNotifications(
+    _: *v8.InspectorChannelImpl,
+    _: *anyopaque,
+) callconv(.c) void {
+    // TODO
 }

src/browser/js/Integer.zig

@@ -19,22 +19,17 @@
 const std = @import("std");
 const js = @import("js.zig");
 
-// This only exists so that we know whether a function wants the opaque
-// JS argument (js.Object), or if it wants the receiver as an opaque
-// value.
-// js.Object is normally used when a method wants an opaque JS object
-// that it'll pass into a callback.
-// This is used when the function wants to do advanced manipulation
-// of the v8.Object bound to the instance. For example, postAttach is an
-// example of using This.
+const v8 = js.v8;
 
-const This = @This();
-obj: js.Object,
+const Integer = @This();
 
-pub fn setIndex(self: This, index: u32, value: anytype, opts: js.Object.SetOpts) !void {
-    return self.obj.setIndex(index, value, opts);
-}
-
-pub fn set(self: This, key: []const u8, value: anytype, opts: js.Object.SetOpts) !void {
-    return self.obj.set(key, value, opts);
+handle: *const v8.Integer,
+
+pub fn init(isolate: *v8.Isolate, value: anytype) Integer {
+    const handle = switch (@TypeOf(value)) {
+        i8, i16, i32 => v8.v8__Integer__New(isolate, value).?,
+        u8, u16, u32 => v8.v8__Integer__NewFromUnsigned(isolate, value).?,
+        else => |T| @compileError("cannot create v8::Integer from: " ++ @typeName(T)),
+    };
+    return .{ .handle = handle };
 }

src/browser/js/Isolate.zig

@@ -0,0 +1,116 @@
+// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const js = @import("js.zig");
+const v8 = js.v8;
+
+const Isolate = @This();
+
+handle: *v8.Isolate,
+
+pub fn init(params: *v8.CreateParams) Isolate {
+    return .{
+        .handle = v8.v8__Isolate__New(params).?,
+    };
+}
+
+pub fn deinit(self: Isolate) void {
+    v8.v8__Isolate__Dispose(self.handle);
+}
+
+pub fn enter(self: Isolate) void {
+    v8.v8__Isolate__Enter(self.handle);
+}
+
+pub fn exit(self: Isolate) void {
+    v8.v8__Isolate__Exit(self.handle);
+}
+
+pub fn lowMemoryNotification(self: Isolate) void {
+    v8.v8__Isolate__LowMemoryNotification(self.handle);
+}
+
+pub const MemoryPressureLevel = enum(u32) {
+    none = v8.kNone,
+    moderate = v8.kModerate,
+    critical = v8.kCritical,
+};
+
+pub fn memoryPressureNotification(self: Isolate, level: MemoryPressureLevel) void {
+    v8.v8__Isolate__MemoryPressureNotification(self.handle, @intFromEnum(level));
+}
+
+pub fn notifyContextDisposed(self: Isolate) void {
+    _ = v8.v8__Isolate__ContextDisposedNotification(self.handle);
+}
+
+pub fn getHeapStatistics(self: Isolate) v8.HeapStatistics {
+    var res: v8.HeapStatistics = undefined;
+    v8.v8__Isolate__GetHeapStatistics(self.handle, &res);
+    return res;
+}
+
+pub fn throwException(self: Isolate, value: *const v8.Value) *const v8.Value {
+    return v8.v8__Isolate__ThrowException(self.handle, value).?;
+}
+
+pub fn initStringHandle(self: Isolate, str: []const u8) *const v8.String {
+    return v8.v8__String__NewFromUtf8(self.handle, str.ptr, v8.kNormal, @as(c_int, @intCast(str.len))).?;
+}
+
+pub fn createError(self: Isolate, msg: []const u8) *const v8.Value {
+    const message = self.initStringHandle(msg);
+    return v8.v8__Exception__Error(message).?;
+}
+
+pub fn createTypeError(self: Isolate, msg: []const u8) *const v8.Value {
+    const message = self.initStringHandle(msg);
+    return v8.v8__Exception__TypeError(message).?;
+}
+
+pub fn initNull(self: Isolate) *const v8.Value {
+    return v8.v8__Null(self.handle).?;
+}
+
+pub fn initUndefined(self: Isolate) *const v8.Value {
+    return v8.v8__Undefined(self.handle).?;
+}
+
+pub fn initFalse(self: Isolate) *const v8.Value {
+    return v8.v8__False(self.handle).?;
+}
+
+pub fn initTrue(self: Isolate) *const v8.Value {
+    return v8.v8__True(self.handle).?;
+}
+
+pub fn initInteger(self: Isolate, val: anytype) js.Integer {
+    return js.Integer.init(self.handle, val);
+}
+
+pub fn initBigInt(self: Isolate, val: anytype) js.BigInt {
+    return js.BigInt.init(self.handle, val);
+}
+
+pub fn initNumber(self: Isolate, val: anytype) js.Number {
+    return js.Number.init(self.handle, val);
+}
+
+pub fn createExternal(self: Isolate, val: *anyopaque) *const v8.External {
+    return v8.v8__External__New(self.handle, val).?;
+}

src/browser/js/Module.zig

@@ -0,0 +1,137 @@
+// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const js = @import("js.zig");
+const v8 = js.v8;
+
+const Module = @This();
+
+local: *const js.Local,
+handle: *const v8.Module,
+
+pub const Status = enum(u32) {
+    kUninstantiated = v8.kUninstantiated,
+    kInstantiating = v8.kInstantiating,
+    kInstantiated = v8.kInstantiated,
+    kEvaluating = v8.kEvaluating,
+    kEvaluated = v8.kEvaluated,
+    kErrored = v8.kErrored,
+};
+
+pub fn getStatus(self: Module) Status {
+    return @enumFromInt(v8.v8__Module__GetStatus(self.handle));
+}
+
+pub fn getException(self: Module) js.Value {
+    return .{
+        .local = self.local,
+        .handle = v8.v8__Module__GetException(self.handle).?,
+    };
+}
+
+pub fn getModuleRequests(self: Module) Requests {
+    return .{
+        .context_handle = self.local.handle,
+        .handle = v8.v8__Module__GetModuleRequests(self.handle).?,
+    };
+}
+
+pub fn instantiate(self: Module, cb: v8.ResolveModuleCallback) !bool {
+    var out: v8.MaybeBool = undefined;
+    v8.v8__Module__InstantiateModule(self.handle, self.local.handle, cb, &out);
+    if (out.has_value) {
+        return out.value;
+    }
+    return error.JsException;
+}
+
+pub fn evaluate(self: Module) !js.Value {
+    const res = v8.v8__Module__Evaluate(self.handle, self.local.handle) orelse return error.JsException;
+
+    if (self.getStatus() == .kErrored) {
+        return error.JsException;
+    }
+
+    return .{
+        .local = self.local,
+        .handle = res,
+    };
+}
+
+pub fn getIdentityHash(self: Module) u32 {
+    return @bitCast(v8.v8__Module__GetIdentityHash(self.handle));
+}
+
+pub fn getModuleNamespace(self: Module) js.Value {
+    return .{
+        .local = self.local,
+        .handle = v8.v8__Module__GetModuleNamespace(self.handle).?,
+    };
+}
+
+pub fn getScriptId(self: Module) u32 {
+    return @intCast(v8.v8__Module__ScriptId(self.handle));
+}
+
+pub fn persist(self: Module) !Global {
+    var ctx = self.local.ctx;
+    var global: v8.Global = undefined;
+    v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
+    try ctx.global_modules.append(ctx.arena, global);
+    return .{ .handle = global };
+}
+
+pub const Global = struct {
+    handle: v8.Global,
+
+    pub fn deinit(self: *Global) void {
+        v8.v8__Global__Reset(&self.handle);
+    }
+
+    pub fn local(self: *const Global, l: *const js.Local) Module {
+        return .{
+            .local = l,
+            .handle = @ptrCast(v8.v8__Global__Get(&self.handle, l.isolate.handle)),
+        };
+    }
+
+    pub fn isEqual(self: *const Global, other: Module) bool {
+        return v8.v8__Global__IsEqual(&self.handle, other.handle);
+    }
+};
+
+const Requests = struct {
+    handle: *const v8.FixedArray,
+    context_handle: *const v8.Context,
+
+    pub fn len(self: Requests) usize {
+        return @intCast(v8.v8__FixedArray__Length(self.handle));
+    }
+
+    pub fn get(self: Requests, idx: usize) Request {
+        return .{ .handle = v8.v8__FixedArray__Get(self.handle, self.context_handle, @intCast(idx)).? };
+    }
+};
+
+const Request = struct {
+    handle: *const v8.ModuleRequest,
+
+    pub fn specifier(self: Request, local: *const js.Local) js.String {
+        return .{ .local = local, .handle = v8.v8__ModuleRequest__GetSpecifier(self.handle).? };
+    }
+};

src/browser/js/Number.zig

@@ -0,0 +1,31 @@
+// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+const js = @import("js.zig");
+
+const v8 = js.v8;
+
+const Number = @This();
+
+handle: *const v8.Number,
+
+pub fn init(isolate: *v8.Isolate, value: anytype) Number {
+    const handle = v8.v8__Number__New(isolate, value).?;
+    return .{ .handle = handle };
+}

src/browser/js/Object.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -22,103 +22,102 @@ const v8 = js.v8;
 
 const IS_DEBUG = @import("builtin").mode == .Debug;
 
-const Context = @import("Context.zig");
-const PersistentObject = v8.Persistent(v8.Object);
-
-const Allocator = std.mem.Allocator;
-
 const Object = @This();
-js_obj: v8.Object,
-context: *js.Context,
 
-pub fn getId(self: Object) u32 {
-    return self.js_obj.getIdentityHash();
+local: *const js.Local,
+handle: *const v8.Object,
+
+pub fn has(self: Object, key: anytype) bool {
+    const ctx = self.local.ctx;
+    const key_handle = if (@TypeOf(key) == *const v8.String) key else ctx.isolate.initStringHandle(key);
+
+    var out: v8.MaybeBool = undefined;
+    v8.v8__Object__Has(self.handle, self.local.handle, key_handle, &out);
+    if (out.has_value) {
+        return out.value;
+    }
+    return false;
 }
 
-pub const SetOpts = packed struct(u32) {
-    READ_ONLY: bool = false,
-    DONT_ENUM: bool = false,
-    DONT_DELETE: bool = false,
-    _: u29 = 0,
-};
-pub fn setIndex(self: Object, index: u32, value: anytype, opts: SetOpts) !void {
-    @setEvalBranchQuota(10000);
-    const key = switch (index) {
-        inline 0...20 => |i| std.fmt.comptimePrint("{d}", .{i}),
-        else => try std.fmt.allocPrint(self.context.arena, "{d}", .{index}),
+pub fn get(self: Object, key: anytype) !js.Value {
+    const ctx = self.local.ctx;
+
+    const key_handle = if (@TypeOf(key) == *const v8.String) key else ctx.isolate.initStringHandle(key);
+    const js_val_handle = v8.v8__Object__Get(self.handle, self.local.handle, key_handle) orelse return error.JsException;
+
+    return .{
+        .local = self.local,
+        .handle = js_val_handle,
     };
-    return self.set(key, value, opts);
 }
 
-pub fn set(self: Object, key: []const u8, value: anytype, opts: SetOpts) error{ FailedToSet, OutOfMemory }!void {
-    const context = self.context;
+pub fn set(self: Object, key: anytype, value: anytype, comptime opts: js.Caller.CallOpts) !bool {
+    const ctx = self.local.ctx;
 
-    const js_key = v8.String.initUtf8(context.isolate, key);
-    const js_value = try context.zigValueToJs(value, .{});
+    const js_value = try self.local.zigValueToJs(value, opts);
+    const key_handle = if (@TypeOf(key) == *const v8.String) key else ctx.isolate.initStringHandle(key);
 
-    const res = self.js_obj.defineOwnProperty(context.v8_context, js_key.toName(), js_value, @bitCast(opts)) orelse false;
-    if (!res) {
-        return error.FailedToSet;
+    var out: v8.MaybeBool = undefined;
+    v8.v8__Object__Set(self.handle, self.local.handle, key_handle, js_value.handle, &out);
+    return out.has_value;
+}
+
+pub fn defineOwnProperty(self: Object, name: []const u8, value: js.Value, attr: v8.PropertyAttribute) ?bool {
+    const ctx = self.local.ctx;
+    const name_handle = ctx.isolate.initStringHandle(name);
+
+    var out: v8.MaybeBool = undefined;
+    v8.v8__Object__DefineOwnProperty(self.handle, self.local.handle, @ptrCast(name_handle), value.handle, attr, &out);
+
+    if (out.has_value) {
+        return out.value;
+    } else {
+        return null;
     }
 }
 
-pub fn get(self: Object, key: []const u8) !js.Value {
-    const context = self.context;
-    const js_key = v8.String.initUtf8(context.isolate, key);
-    const js_val = try self.js_obj.getValue(context.v8_context, js_key);
-    return context.createValue(js_val);
-}
-
-pub fn isTruthy(self: Object) bool {
-    const js_value = self.js_obj.toValue();
-    return js_value.toBool(self.context.isolate);
-}
-
-pub fn toString(self: Object) ![]const u8 {
-    const js_value = self.js_obj.toValue();
-    return self.context.valueToString(js_value, .{});
+pub fn toValue(self: Object) js.Value {
+    return .{
+        .local = self.local,
+        .handle = @ptrCast(self.handle),
+    };
 }
 
 pub fn format(self: Object, writer: *std.Io.Writer) !void {
     if (comptime IS_DEBUG) {
-        return self.context.debugValue(self.js_obj.toValue(), writer);
+        return self.local.ctx.debugValue(self.toValue(), writer);
     }
     const str = self.toString() catch return error.WriteFailed;
     return writer.writeAll(str);
 }
 
-pub fn toJson(self: Object, allocator: Allocator) ![]u8 {
-    const json_string = try v8.Json.stringify(self.context.v8_context, self.js_obj.toValue(), null);
-    const str = try self.context.jsStringToZig(json_string, .{ .allocator = allocator });
-    return str;
-}
+pub fn persist(self: Object) !Global {
+    var ctx = self.local.ctx;
 
-pub fn persist(self: Object) !Object {
-    var context = self.context;
-    const js_obj = self.js_obj;
+    var global: v8.Global = undefined;
+    v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
 
-    const persisted = PersistentObject.init(context.isolate, js_obj);
-    try context.js_object_list.append(context.arena, persisted);
+    try ctx.global_objects.append(ctx.arena, global);
 
-    return .{
-        .context = context,
-        .js_obj = persisted.castToObject(),
-    };
+    return .{ .handle = global };
 }
 
 pub fn getFunction(self: Object, name: []const u8) !?js.Function {
     if (self.isNullOrUndefined()) {
         return null;
     }
-    const context = self.context;
+    const local = self.local;
 
-    const js_name = v8.String.initUtf8(context.isolate, name);
+    const js_name = local.isolate.initStringHandle(name);
+    const js_val_handle = v8.v8__Object__Get(self.handle, local.handle, js_name) orelse return error.JsException;
 
-    const js_value = try self.js_obj.getValue(context.v8_context, js_name.toName());
-    if (!js_value.isFunction()) {
+    if (v8.v8__Value__IsFunction(js_val_handle) == false) {
         return null;
     }
-    return try context.createFunction(js_value);
+    return .{
+        .local = local,
+        .handle = @ptrCast(js_val_handle),
+    };
 }
 
 pub fn callMethod(self: Object, comptime T: type, method_name: []const u8, args: anytype) !T {
@@ -126,41 +125,75 @@ pub fn callMethod(self: Object, comptime T: type, method_name: []const u8, args:
     return func.callWithThis(T, self, args);
 }
 
-pub fn isNull(self: Object) bool {
-    return self.js_obj.toValue().isNull();
-}
-
-pub fn isUndefined(self: Object) bool {
-    return self.js_obj.toValue().isUndefined();
-}
-
 pub fn isNullOrUndefined(self: Object) bool {
-    return self.js_obj.toValue().isNullOrUndefined();
+    return v8.v8__Value__IsNullOrUndefined(@ptrCast(self.handle));
 }
 
-pub fn nameIterator(self: Object) NameIterator {
-    const context = self.context;
-    const js_obj = self.js_obj;
-
-    const array = js_obj.getPropertyNames(context.v8_context);
-    const count = array.length();
+pub fn getOwnPropertyNames(self: Object) !js.Array {
+    const handle = v8.v8__Object__GetOwnPropertyNames(self.handle, self.local.handle) orelse {
+        // This is almost always a fatal error case. Either we're in some exception
+        // and things are messy, or we're shutting down, or someone has messed up
+        // the object (like some WPT tests do).
+        return error.TypeError;
+    };
 
     return .{
+        .local = self.local,
+        .handle = handle,
+    };
+}
+
+pub fn getPropertyNames(self: Object) js.Array {
+    const handle = v8.v8__Object__GetPropertyNames(self.handle, self.local.handle).?;
+    return .{
+        .local = self.local,
+        .handle = handle,
+    };
+}
+
+pub fn nameIterator(self: Object) !NameIterator {
+    const handle = v8.v8__Object__GetPropertyNames(self.handle, self.local.handle) orelse {
+        // see getOwnPropertyNames above
+        return error.TypeError;
+    };
+    const count = v8.v8__Array__Length(handle);
+
+    return .{
+        .local = self.local,
+        .handle = handle,
         .count = count,
-        .context = context,
-        .js_obj = array.castTo(v8.Object),
     };
 }
 
 pub fn toZig(self: Object, comptime T: type) !T {
-    return self.context.jsValueToZig(T, self.js_obj.toValue());
+    const js_value = js.Value{ .local = self.local, .handle = @ptrCast(self.handle) };
+    return self.local.jsValueToZig(T, js_value);
 }
 
+pub const Global = struct {
+    handle: v8.Global,
+
+    pub fn deinit(self: *Global) void {
+        v8.v8__Global__Reset(&self.handle);
+    }
+
+    pub fn local(self: *const Global, l: *const js.Local) Object {
+        return .{
+            .local = l,
+            .handle = @ptrCast(v8.v8__Global__Get(&self.handle, l.isolate.handle)),
+        };
+    }
+
+    pub fn isEqual(self: *const Global, other: Object) bool {
+        return v8.v8__Global__IsEqual(&self.handle, other.handle);
+    }
+};
+
 pub const NameIterator = struct {
     count: u32,
     idx: u32 = 0,
-    js_obj: v8.Object,
-    context: *const Context,
+    local: *const js.Local,
+    handle: *const v8.Array,
 
     pub fn next(self: *NameIterator) !?[]const u8 {
         const idx = self.idx;
@@ -169,8 +202,8 @@ pub const NameIterator = struct {
         }
         self.idx += 1;
 
-        const context = self.context;
-        const js_val = try self.js_obj.getAtIndex(context.v8_context, idx);
-        return try context.valueToString(js_val, .{});
+        const local = self.local;
+        const js_val_handle = v8.v8__Object__GetIndex(@ptrCast(self.handle), local.handle, idx) orelse return error.JsException;
+        return try js.Value.toStringSlice(.{ .local = local, .handle = js_val_handle });
     }
 };

src/browser/js/Platform.zig

@@ -20,20 +20,22 @@ const js = @import("js.zig");
 const v8 = js.v8;
 
 const Platform = @This();
-inner: v8.Platform,
+handle: *v8.Platform,
 
 pub fn init() !Platform {
-    if (v8.initV8ICU() == false) {
+    if (v8.v8__V8__InitializeICU() == false) {
         return error.FailedToInitializeICU;
     }
-    const platform = v8.Platform.initDefault(0, true);
-    v8.initV8Platform(platform);
-    v8.initV8();
-    return .{ .inner = platform };
+    // 0 - threadpool size, 0 == let v8 decide
+    // 1 - idle_task_support, 1 == enabled
+    const handle = v8.v8__Platform__NewDefaultPlatform(0, 1).?;
+    v8.v8__V8__InitializePlatform(handle);
+    v8.v8__V8__Initialize();
+    return .{ .handle = handle };
 }
 
 pub fn deinit(self: Platform) void {
-    _ = v8.deinitV8();
-    v8.deinitV8Platform();
-    self.inner.deinit();
+    _ = v8.v8__V8__Dispose();
+    v8.v8__V8__DisposePlatform();
+    v8.v8__Platform__DELETE(self.handle);
 }

src/browser/js/Private.zig

@@ -0,0 +1,42 @@
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const js = @import("js.zig");
+const v8 = js.v8;
+
+const Private = @This();
+
+// Unlike most types, we always store the Private as a Global. It makes more
+// sense for this type given how it's used.
+handle: v8.Global,
+
+pub fn init(isolate: *v8.Isolate, name: []const u8) Private {
+    const v8_name = v8.v8__String__NewFromUtf8(isolate, name.ptr, v8.kNormal, @intCast(name.len));
+    const private_handle = v8.v8__Private__New(isolate, v8_name);
+
+    var global: v8.Global = undefined;
+    v8.v8__Global__New(isolate, private_handle, &global);
+
+    return .{
+        .handle = global,
+    };
+}
+
+pub fn deinit(self: *Private) void {
+    v8.v8__Global__Reset(&self.handle);
+}

src/browser/js/Promise.zig

@@ -0,0 +1,95 @@
+// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const js = @import("js.zig");
+const v8 = js.v8;
+
+const Promise = @This();
+
+local: *const js.Local,
+handle: *const v8.Promise,
+
+pub fn toObject(self: Promise) js.Object {
+    return .{
+        .local = self.local,
+        .handle = @ptrCast(self.handle),
+    };
+}
+
+pub fn toValue(self: Promise) js.Value {
+    return .{
+        .local = self.local,
+        .handle = @ptrCast(self.handle),
+    };
+}
+
+pub fn thenAndCatch(self: Promise, on_fulfilled: js.Function, on_rejected: js.Function) !Promise {
+    if (v8.v8__Promise__Then2(self.handle, self.local.handle, on_fulfilled.handle, on_rejected.handle)) |handle| {
+        return .{
+            .local = self.local,
+            .handle = handle,
+        };
+    }
+    return error.PromiseChainFailed;
+}
+
+pub fn persist(self: Promise) !Global {
+    return self._persist(true);
+}
+
+pub fn temp(self: Promise) !Temp {
+    return self._persist(false);
+}
+
+fn _persist(self: *const Promise, comptime is_global: bool) !(if (is_global) Global else Temp) {
+    var ctx = self.local.ctx;
+
+    var global: v8.Global = undefined;
+    v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
+    if (comptime is_global) {
+        try ctx.global_promises.append(ctx.arena, global);
+    } else {
+        try ctx.global_promises_temp.put(ctx.arena, global.data_ptr, global);
+    }
+    return .{ .handle = global };
+}
+
+pub const Temp = G(0);
+pub const Global = G(1);
+
+fn G(comptime discriminator: u8) type {
+    return struct {
+        handle: v8.Global,
+
+        // makes the types different (G(0) != G(1)), without taking up space
+        comptime _: u8 = discriminator,
+
+        const Self = @This();
+
+        pub fn deinit(self: *Self) void {
+            v8.v8__Global__Reset(&self.handle);
+        }
+
+        pub fn local(self: *const Self, l: *const js.Local) Promise {
+            return .{
+                .local = l,
+                .handle = @ptrCast(v8.v8__Global__Get(&self.handle, l.isolate.handle)),
+            };
+        }
+    };
+}

src/browser/js/PromiseRejection.zig

@@ -0,0 +1,41 @@
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const js = @import("js.zig");
+const v8 = js.v8;
+
+const PromiseRejection = @This();
+
+local: *const js.Local,
+handle: *const v8.PromiseRejectMessage,
+
+pub fn promise(self: PromiseRejection) js.Promise {
+    return .{
+        .local = self.local,
+        .handle = v8.v8__PromiseRejectMessage__GetPromise(self.handle).?,
+    };
+}
+
+pub fn reason(self: PromiseRejection) ?js.Value {
+    const value_handle = v8.v8__PromiseRejectMessage__GetValue(self.handle) orelse return null;
+
+    return .{
+        .local = self.local,
+        .handle = value_handle,
+    };
+}

src/browser/js/PromiseResolver.zig

@@ -0,0 +1,99 @@
+// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const js = @import("js.zig");
+const v8 = js.v8;
+const log = @import("../../log.zig");
+
+const PromiseResolver = @This();
+
+local: *const js.Local,
+handle: *const v8.PromiseResolver,
+
+pub fn init(local: *const js.Local) PromiseResolver {
+    return .{
+        .local = local,
+        .handle = v8.v8__Promise__Resolver__New(local.handle).?,
+    };
+}
+
+pub fn promise(self: PromiseResolver) js.Promise {
+    return .{
+        .local = self.local,
+        .handle = v8.v8__Promise__Resolver__GetPromise(self.handle).?,
+    };
+}
+
+pub fn resolve(self: PromiseResolver, comptime source: []const u8, value: anytype) void {
+    self._resolve(value) catch |err| {
+        log.err(.bug, "resolve", .{ .source = source, .err = err, .persistent = false });
+    };
+}
+
+fn _resolve(self: PromiseResolver, value: anytype) !void {
+    const local = self.local;
+    const js_val = try local.zigValueToJs(value, .{});
+
+    var out: v8.MaybeBool = undefined;
+    v8.v8__Promise__Resolver__Resolve(self.handle, self.local.handle, js_val.handle, &out);
+    if (!out.has_value or !out.value) {
+        return error.FailedToResolvePromise;
+    }
+    local.runMicrotasks();
+}
+
+pub fn reject(self: PromiseResolver, comptime source: []const u8, value: anytype) void {
+    self._reject(value) catch |err| {
+        log.err(.bug, "reject", .{ .source = source, .err = err, .persistent = false });
+    };
+}
+
+fn _reject(self: PromiseResolver, value: anytype) !void {
+    const local = self.local;
+    const js_val = try local.zigValueToJs(value, .{});
+
+    var out: v8.MaybeBool = undefined;
+    v8.v8__Promise__Resolver__Reject(self.handle, local.handle, js_val.handle, &out);
+    if (!out.has_value or !out.value) {
+        return error.FailedToRejectPromise;
+    }
+    local.runMicrotasks();
+}
+
+pub fn persist(self: PromiseResolver) !Global {
+    var ctx = self.local.ctx;
+    var global: v8.Global = undefined;
+    v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
+    try ctx.global_promise_resolvers.append(ctx.arena, global);
+    return .{ .handle = global };
+}
+
+pub const Global = struct {
+    handle: v8.Global,
+
+    pub fn deinit(self: *Global) void {
+        v8.v8__Global__Reset(&self.handle);
+    }
+
+    pub fn local(self: *const Global, l: *const js.Local) PromiseResolver {
+        return .{
+            .local = l,
+            .handle = @ptrCast(v8.v8__Global__Get(&self.handle, l.isolate.handle)),
+        };
+    }
+};

src/browser/js/Scheduler.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -19,8 +19,8 @@
 const std = @import("std");
 const builtin = @import("builtin");
 
-const log = @import("../log.zig");
-const milliTimestamp = @import("../datetime.zig").milliTimestamp;
+const log = @import("../../log.zig");
+const milliTimestamp = @import("../../datetime.zig").milliTimestamp;
 
 const IS_DEBUG = builtin.mode == .Debug;
 
@@ -47,9 +47,15 @@ pub fn init(allocator: std.mem.Allocator) Scheduler {
     };
 }
 
+pub fn deinit(self: *Scheduler) void {
+    finalizeTasks(&self.low_priority);
+    finalizeTasks(&self.high_priority);
+}
+
 const AddOpts = struct {
     name: []const u8 = "",
     low_priority: bool = false,
+    finalizer: ?Finalizer = null,
 };
 pub fn add(self: *Scheduler, ctx: *anyopaque, cb: Callback, run_in_ms: u32, opts: AddOpts) !void {
     if (comptime IS_DEBUG) {
@@ -63,6 +69,7 @@ pub fn add(self: *Scheduler, ctx: *anyopaque, cb: Callback, run_in_ms: u32, opts
         .callback = cb,
         .sequence = seq,
         .name = opts.name,
+        .finalizer = opts.finalizer,
         .run_at = milliTimestamp(.monotonic) + run_in_ms,
     });
 }
@@ -72,6 +79,11 @@ pub fn run(self: *Scheduler) !?u64 {
     return self.runQueue(&self.high_priority);
 }
 
+pub fn hasReadyTasks(self: *Scheduler) bool {
+    const now = milliTimestamp(.monotonic);
+    return queueuHasReadyTask(&self.low_priority, now) or queueuHasReadyTask(&self.high_priority, now);
+}
+
 fn runQueue(self: *Scheduler, queue: *Queue) !?u64 {
     if (queue.count() == 0) {
         return null;
@@ -95,7 +107,9 @@ fn runQueue(self: *Scheduler, queue: *Queue) !?u64 {
 
         if (repeat_in_ms) |ms| {
             // Task cannot be repeated immediately, and they should know that
-            std.debug.assert(ms != 0);
+            if (comptime IS_DEBUG) {
+                std.debug.assert(ms != 0);
+            }
             task.run_at = now + ms;
             try self.low_priority.add(task);
         }
@@ -103,12 +117,28 @@ fn runQueue(self: *Scheduler, queue: *Queue) !?u64 {
     return null;
 }
 
+fn queueuHasReadyTask(queue: *Queue, now: u64) bool {
+    const task = queue.peek() orelse return false;
+    return task.run_at <= now;
+}
+
+fn finalizeTasks(queue: *Queue) void {
+    var it = queue.iterator();
+    while (it.next()) |t| {
+        if (t.finalizer) |func| {
+            func(t.ctx);
+        }
+    }
+}
+
 const Task = struct {
     run_at: u64,
     sequence: u64,
     ctx: *anyopaque,
     name: []const u8,
     callback: Callback,
+    finalizer: ?Finalizer,
 };
 
 const Callback = *const fn (ctx: *anyopaque) anyerror!?u32;
+const Finalizer = *const fn (ctx: *anyopaque) void;

src/browser/js/Snapshot.zig

@@ -22,7 +22,6 @@ const bridge = @import("bridge.zig");
 const log = @import("../../log.zig");
 
 const IS_DEBUG = @import("builtin").mode == .Debug;
-const Window = @import("../webapi/Window.zig");
 
 const v8 = js.v8;
 const JsApis = bridge.JsApis;
@@ -53,14 +52,14 @@ startup_data: v8.StartupData,
 external_references: [countExternalReferences()]isize,
 
 // Track whether this snapshot owns its data (was created in-process)
-// If false, the data points into embedded_snapshot_blob and should not be freed
+// If false, the data points into embedded_snapshot_blob and will not be freed
 owns_data: bool = false,
 
-pub fn load(allocator: Allocator) !Snapshot {
+pub fn load() !Snapshot {
     if (loadEmbedded()) |snapshot| {
         return snapshot;
     }
-    return create(allocator);
+    return create();
 }
 
 fn loadEmbedded() ?Snapshot {
@@ -75,7 +74,7 @@ fn loadEmbedded() ?Snapshot {
     const blob = embedded_snapshot_blob[@sizeOf(usize)..];
 
     const startup_data = v8.StartupData{ .data = blob.ptr, .raw_size = @intCast(blob.len) };
-    if (!v8.SnapshotCreator.startupDataIsValid(startup_data)) {
+    if (!v8.v8__StartupData__IsValid(startup_data)) {
         return null;
     }
 
@@ -87,10 +86,11 @@ fn loadEmbedded() ?Snapshot {
     };
 }
 
-pub fn deinit(self: Snapshot, allocator: Allocator) void {
+pub fn deinit(self: Snapshot) void {
     // Only free if we own the data (was created in-process)
     if (self.owns_data) {
-        allocator.free(self.startup_data.data[0..@intCast(self.startup_data.raw_size)]);
+        // V8 allocated this with `new char[]`, so we need to use the C++ delete[] operator
+        v8.v8__StartupData__DELETE(self.startup_data.data);
     }
 }
 
@@ -105,50 +105,39 @@ pub fn write(self: Snapshot, writer: *std.Io.Writer) !void {
 
 pub fn fromEmbedded(self: Snapshot) bool {
     // if the snapshot comes from the embedFile, then it'll be flagged as not
-    // owneing (aka, not needing to free) the data.
+    // owning (aka, not needing to free) the data.
     return self.owns_data == false;
 }
 
 fn isValid(self: Snapshot) bool {
-    return v8.SnapshotCreator.startupDataIsValid(self.startup_data);
+    return v8.v8__StartupData__IsValid(self.startup_data);
 }
 
-pub fn createGlobalTemplate(isolate: v8.Isolate, templates: []const v8.FunctionTemplate) v8.ObjectTemplate {
-    // Set up the global template to inherit from Window's template
-    // This way the global object gets all Window properties through inheritance
-    const js_global = v8.FunctionTemplate.initDefault(isolate);
-    js_global.setClassName(v8.String.initUtf8(isolate, "Window"));
-    // Find Window in JsApis by name (avoids circular import)
-    const window_index = comptime bridge.JsApiLookup.getId(Window.JsApi);
-    js_global.inherit(templates[window_index]);
-    return js_global.getInstanceTemplate();
-}
-
-pub fn create(allocator: Allocator) !Snapshot {
+pub fn create() !Snapshot {
     var external_references = collectExternalReferences();
 
-    var params = v8.initCreateParams();
-    params.array_buffer_allocator = v8.createDefaultArrayBufferAllocator();
-    defer v8.destroyArrayBufferAllocator(params.array_buffer_allocator.?);
+    var params: v8.CreateParams = undefined;
+    v8.v8__Isolate__CreateParams__CONSTRUCT(&params);
+    params.array_buffer_allocator = v8.v8__ArrayBuffer__Allocator__NewDefaultAllocator();
+    defer v8.v8__ArrayBuffer__Allocator__DELETE(params.array_buffer_allocator.?);
     params.external_references = @ptrCast(&external_references);
 
-    var snapshot_creator: v8.SnapshotCreator = undefined;
-    v8.SnapshotCreator.init(&snapshot_creator, &params);
-    defer snapshot_creator.deinit();
+    const snapshot_creator = v8.v8__SnapshotCreator__CREATE(&params);
+    defer v8.v8__SnapshotCreator__DESTRUCT(snapshot_creator);
 
     var data_start: usize = 0;
-    const isolate = snapshot_creator.getIsolate();
+    const isolate = v8.v8__SnapshotCreator__getIsolate(snapshot_creator).?;
 
     {
         // CreateBlob, which we'll call once everything is setup, MUST NOT
         // be called from an active HandleScope. Hence we have this scope to
         // clean it up before we call CreateBlob
         var handle_scope: v8.HandleScope = undefined;
-        v8.HandleScope.init(&handle_scope, isolate);
-        defer handle_scope.deinit();
+        v8.v8__HandleScope__CONSTRUCT(&handle_scope, isolate);
+        defer v8.v8__HandleScope__DESTRUCT(&handle_scope);
 
         // Create templates (constructors only) FIRST
-        var templates: [JsApis.len]v8.FunctionTemplate = undefined;
+        var templates: [JsApis.len]*v8.FunctionTemplate = undefined;
         inline for (JsApis, 0..) |JsApi, i| {
             @setEvalBranchQuota(10_000);
             templates[i] = generateConstructor(JsApi, isolate);
@@ -159,23 +148,21 @@ pub fn create(allocator: Allocator) !Snapshot {
         // This must come before attachClass so inheritance is set up first
         inline for (JsApis, 0..) |JsApi, i| {
             if (comptime protoIndexLookup(JsApi)) |proto_index| {
-                templates[i].inherit(templates[proto_index]);
+                v8.v8__FunctionTemplate__Inherit(templates[i], templates[proto_index]);
             }
         }
 
         // Set up the global template to inherit from Window's template
         // This way the global object gets all Window properties through inheritance
-        const global_template = createGlobalTemplate(isolate, templates[0..]);
-
-        const context = v8.Context.init(isolate, global_template, null);
-        context.enter();
-        defer context.exit();
+        const context = v8.v8__Context__New(isolate, null, null);
+        v8.v8__Context__Enter(context);
+        defer v8.v8__Context__Exit(context);
 
         // Add templates to context snapshot
         var last_data_index: usize = 0;
         inline for (JsApis, 0..) |_, i| {
             @setEvalBranchQuota(10_000);
-            const data_index = snapshot_creator.addDataWithContext(context, @ptrCast(templates[i].handle));
+            const data_index = v8.v8__SnapshotCreator__AddData(snapshot_creator, @ptrCast(templates[i]));
             if (i == 0) {
                 data_start = data_index;
                 last_data_index = data_index;
@@ -193,16 +180,18 @@ pub fn create(allocator: Allocator) !Snapshot {
         }
 
         // Realize all templates by getting their functions and attaching to global
-        const global_obj = context.getGlobal();
+        const global_obj = v8.v8__Context__Global(context);
 
         inline for (JsApis, 0..) |JsApi, i| {
-            const func = templates[i].getFunction(context);
+            const func = v8.v8__FunctionTemplate__GetFunction(templates[i], context);
 
             // Attach to global if it has a name
             if (@hasDecl(JsApi.Meta, "name")) {
                 if (@hasDecl(JsApi.Meta, "constructor_alias")) {
-                    const v8_class_name = v8.String.initUtf8(isolate, JsApi.Meta.constructor_alias);
-                    _ = global_obj.setValue(context, v8_class_name, func);
+                    const alias = JsApi.Meta.constructor_alias;
+                    const v8_class_name = v8.v8__String__NewFromUtf8(isolate, alias.ptr, v8.kNormal, @intCast(alias.len));
+                    var maybe_result: v8.MaybeBool = undefined;
+                    v8.v8__Object__Set(global_obj, context, v8_class_name, func, &maybe_result);
 
                     // @TODO: This is wrong. This name should be registered with the
                     // illegalConstructorCallback. I.e. new Image() is OK, but
@@ -210,11 +199,19 @@ pub fn create(allocator: Allocator) !Snapshot {
                     // But we _have_ to register the name, i.e. HTMLImageElement
                     // has to be registered so, for now, instead of creating another
                     // template, we just hook it into the constructor.
-                    const illegal_class_name = v8.String.initUtf8(isolate, JsApi.Meta.name);
-                    _ = global_obj.setValue(context, illegal_class_name, func);
+                    const name = JsApi.Meta.name;
+                    const illegal_class_name = v8.v8__String__NewFromUtf8(isolate, name.ptr, v8.kNormal, @intCast(name.len));
+                    var maybe_result2: v8.MaybeBool = undefined;
+                    v8.v8__Object__DefineOwnProperty(global_obj, context, illegal_class_name, func, 0, &maybe_result2);
                 } else {
-                    const v8_class_name = v8.String.initUtf8(isolate, JsApi.Meta.name);
-                    _ = global_obj.setValue(context, v8_class_name, func);
+                    const name = JsApi.Meta.name;
+                    const v8_class_name = v8.v8__String__NewFromUtf8(isolate, name.ptr, v8.kNormal, @intCast(name.len));
+                    var maybe_result: v8.MaybeBool = undefined;
+                    var properties: v8.PropertyAttribute = v8.None;
+                    if (@hasDecl(JsApi.Meta, "enumerable") and JsApi.Meta.enumerable == false) {
+                        properties |= v8.DontEnum;
+                    }
+                    v8.v8__Object__DefineOwnProperty(global_obj, context, v8_class_name, func, properties, &maybe_result);
                 }
             }
         }
@@ -222,8 +219,10 @@ pub fn create(allocator: Allocator) !Snapshot {
         {
             // If we want to overwrite the built-in console, we have to
             // delete the built-in one.
-            const console_key = v8.String.initUtf8(isolate, "console");
-            if (global_obj.deleteValue(context, console_key) == false) {
+            const console_key = v8.v8__String__NewFromUtf8(isolate, "console", v8.kNormal, 7);
+            var maybe_deleted: v8.MaybeBool = undefined;
+            v8.v8__Object__Delete(global_obj, context, console_key, &maybe_deleted);
+            if (maybe_deleted.value == false) {
                 return error.ConsoleDeleteError;
             }
         }
@@ -233,39 +232,63 @@ pub fn create(allocator: Allocator) !Snapshot {
         // TODO: see if newer V8 engines have a way around this.
         inline for (JsApis, 0..) |JsApi, i| {
             if (comptime protoIndexLookup(JsApi)) |proto_index| {
-                const proto_obj = templates[proto_index].getFunction(context).toObject();
-                const self_obj = templates[i].getFunction(context).toObject();
-                _ = self_obj.setPrototype(context, proto_obj);
+                const proto_func = v8.v8__FunctionTemplate__GetFunction(templates[proto_index], context);
+                const proto_obj: *const v8.Object = @ptrCast(proto_func);
+
+                const self_func = v8.v8__FunctionTemplate__GetFunction(templates[i], context);
+                const self_obj: *const v8.Object = @ptrCast(self_func);
+
+                var maybe_result: v8.MaybeBool = undefined;
+                v8.v8__Object__SetPrototype(self_obj, context, proto_obj, &maybe_result);
             }
         }
 
         {
             // Custom exception
             // TODO: this is an horrible hack, I can't figure out how to do this cleanly.
-            const code = v8.String.initUtf8(isolate, "DOMException.prototype.__proto__ = Error.prototype");
-            _ = try (try v8.Script.compile(context, code, null)).run(context);
+            const code_str = "DOMException.prototype.__proto__ = Error.prototype";
+            const code = v8.v8__String__NewFromUtf8(isolate, code_str.ptr, v8.kNormal, @intCast(code_str.len));
+            const script = v8.v8__Script__Compile(context, code, null) orelse return error.ScriptCompileFailed;
+            _ = v8.v8__Script__Run(script, context) orelse return error.ScriptRunFailed;
         }
 
-        snapshot_creator.setDefaultContext(context);
+        v8.v8__SnapshotCreator__setDefaultContext(snapshot_creator, context);
     }
 
-    const blob = snapshot_creator.createBlob(v8.FunctionCodeHandling.kKeep);
-    const owned = try allocator.dupe(u8, blob.data[0..@intCast(blob.raw_size)]);
+    const blob = v8.v8__SnapshotCreator__createBlob(snapshot_creator, v8.kKeep);
 
     return .{
         .owns_data = true,
         .data_start = data_start,
         .external_references = external_references,
-        .startup_data = .{ .data = owned.ptr, .raw_size = @intCast(owned.len) },
+        .startup_data = blob,
     };
 }
 
+// Helper to check if a JsApi has a NamedIndexed handler
+fn hasNamedIndexedGetter(comptime JsApi: type) bool {
+    const declarations = @typeInfo(JsApi).@"struct".decls;
+    inline for (declarations) |d| {
+        const value = @field(JsApi, d.name);
+        const T = @TypeOf(value);
+        if (T == bridge.NamedIndexed) {
+            return true;
+        }
+    }
+    return false;
+}
+
 // Count total callbacks needed for external_references array
 fn countExternalReferences() comptime_int {
     @setEvalBranchQuota(100_000);
 
-    // +1 for the illegal constructor callback
-    var count: comptime_int = 1;
+    var count: comptime_int = 0;
+
+    // +1 for the illegal constructor callback shared by various types
+    count += 1;
+
+    // +1 for the noop function shared by various types
+    count += 1;
 
     inline for (JsApis) |JsApi| {
         // Constructor (only if explicit)
@@ -285,13 +308,18 @@ fn countExternalReferences() comptime_int {
             const T = @TypeOf(value);
             if (T == bridge.Accessor) {
                 count += 1; // getter
-                if (value.setter != null) count += 1; // setter
+                if (value.setter != null) {
+                    count += 1;
+                }
             } else if (T == bridge.Function) {
                 count += 1;
             } else if (T == bridge.Iterator) {
                 count += 1;
             } else if (T == bridge.Indexed) {
                 count += 1;
+                if (value.enumerator != null) {
+                    count += 1;
+                }
             } else if (T == bridge.NamedIndexed) {
                 count += 1; // getter
                 if (value.setter != null) count += 1;
@@ -300,6 +328,15 @@ fn countExternalReferences() comptime_int {
         }
     }
 
+    // In debug mode, add unknown property callbacks for types without NamedIndexed
+    if (comptime IS_DEBUG) {
+        inline for (JsApis) |JsApi| {
+            if (!hasNamedIndexedGetter(JsApi)) {
+                count += 1;
+            }
+        }
+    }
+
     return count + 1; // +1 for null terminator
 }
 
@@ -310,6 +347,9 @@ fn collectExternalReferences() [countExternalReferences()]isize {
     references[idx] = @bitCast(@intFromPtr(&illegalConstructorCallback));
     idx += 1;
 
+    references[idx] = @bitCast(@intFromPtr(&bridge.Function.noopFunction));
+    idx += 1;
+
     inline for (JsApis) |JsApi| {
         if (@hasDecl(JsApi, "constructor")) {
             references[idx] = @bitCast(@intFromPtr(JsApi.constructor.func));
@@ -341,6 +381,10 @@ fn collectExternalReferences() [countExternalReferences()]isize {
             } else if (T == bridge.Indexed) {
                 references[idx] = @bitCast(@intFromPtr(value.getter));
                 idx += 1;
+                if (value.enumerator) |enumerator| {
+                    references[idx] = @bitCast(@intFromPtr(enumerator));
+                    idx += 1;
+                }
             } else if (T == bridge.NamedIndexed) {
                 references[idx] = @bitCast(@intFromPtr(value.getter));
                 idx += 1;
@@ -356,6 +400,16 @@ fn collectExternalReferences() [countExternalReferences()]isize {
         }
     }
 
+    // In debug mode, collect unknown property callbacks for types without NamedIndexed
+    if (comptime IS_DEBUG) {
+        inline for (JsApis) |JsApi| {
+            if (!hasNamedIndexedGetter(JsApi)) {
+                references[idx] = @bitCast(@intFromPtr(bridge.unknownObjectPropertyCallback(JsApi)));
+                idx += 1;
+            }
+        }
+    }
+
     return references;
 }
 
@@ -365,7 +419,7 @@ fn collectExternalReferences() [countExternalReferences()]isize {
 // via `new ClassName()` - but they could, for example, be created in
 // Zig and returned from a function call, which is why we need the
 // FunctionTemplate.
-fn generateConstructor(comptime JsApi: type, isolate: v8.Isolate) v8.FunctionTemplate {
+fn generateConstructor(comptime JsApi: type, isolate: *v8.Isolate) *v8.FunctionTemplate {
     const callback = blk: {
         if (@hasDecl(JsApi, "constructor")) {
             break :blk JsApi.constructor.func;
@@ -375,19 +429,66 @@ fn generateConstructor(comptime JsApi: type, isolate: v8.Isolate) v8.FunctionTem
         break :blk illegalConstructorCallback;
     };
 
-    const template = v8.FunctionTemplate.initCallback(isolate, callback);
-    if (!@hasDecl(JsApi.Meta, "empty_with_no_proto")) {
-        template.getInstanceTemplate().setInternalFieldCount(1);
+    const template = @constCast(v8.v8__FunctionTemplate__New__DEFAULT2(isolate, callback).?);
+    {
+        const internal_field_count = comptime countInternalFields(JsApi);
+        if (internal_field_count > 0) {
+            const instance_template = v8.v8__FunctionTemplate__InstanceTemplate(template);
+            v8.v8__ObjectTemplate__SetInternalFieldCount(instance_template, internal_field_count);
+        }
     }
-    const class_name = v8.String.initUtf8(isolate, if (@hasDecl(JsApi.Meta, "name")) JsApi.Meta.name else @typeName(JsApi));
-    template.setClassName(class_name);
+    const name_str = if (@hasDecl(JsApi.Meta, "name")) JsApi.Meta.name else @typeName(JsApi);
+    const class_name = v8.v8__String__NewFromUtf8(isolate, name_str.ptr, v8.kNormal, @intCast(name_str.len));
+    v8.v8__FunctionTemplate__SetClassName(template, class_name);
     return template;
 }
 
+pub fn countInternalFields(comptime JsApi: type) u8 {
+    var last_used_id = 0;
+    var cache_count: u8 = 0;
+
+    inline for (@typeInfo(JsApi).@"struct".decls) |d| {
+        const name: [:0]const u8 = d.name;
+        const value = @field(JsApi, name);
+        const definition = @TypeOf(value);
+
+        switch (definition) {
+            inline bridge.Accessor, bridge.Function => {
+                const cache = value.cache orelse continue;
+                if (cache != .internal) {
+                    continue;
+                }
+                // We assert that they are declared in-order. This isn't necessary
+                // but I don't want to do anything fancy to look for gaps or
+                // duplicates.
+                const internal_id = cache.internal;
+                if (internal_id != last_used_id + 1) {
+                    @compileError(@typeName(JsApi) ++ "." ++ name ++ " has a non-monotonic cache index");
+                }
+                last_used_id = internal_id;
+                cache_count += 1; // this is just last_used, but it's more explicit this way
+            },
+            else => {},
+        }
+    }
+
+    if (@hasDecl(JsApi.Meta, "empty_with_no_proto")) {
+        return cache_count;
+    }
+
+    // we need cache_count internal fields, + 1 for the TAO pointer (the v8 -> Zig)
+    // mapping) itself.
+    return cache_count + 1;
+}
+
 // Attaches JsApi members to the prototype template (normal case)
-fn attachClass(comptime JsApi: type, isolate: v8.Isolate, template: v8.FunctionTemplate) void {
-    const target = template.getPrototypeTemplate();
+fn attachClass(comptime JsApi: type, isolate: *v8.Isolate, template: *v8.FunctionTemplate) void {
+    const instance = v8.v8__FunctionTemplate__InstanceTemplate(template);
+    const prototype = v8.v8__FunctionTemplate__PrototypeTemplate(template);
+
     const declarations = @typeInfo(JsApi).@"struct".decls;
+    var has_named_index_getter = false;
+
     inline for (declarations) |d| {
         const name: [:0]const u8 = d.name;
         const value = @field(JsApi, name);
@@ -395,60 +496,84 @@ fn attachClass(comptime JsApi: type, isolate: v8.Isolate, template: v8.FunctionT
 
         switch (definition) {
             bridge.Accessor => {
-                const js_name = v8.String.initUtf8(isolate, name).toName();
-                const getter_callback = v8.FunctionTemplate.initCallback(isolate, value.getter);
+                const js_name = v8.v8__String__NewFromUtf8(isolate, name.ptr, v8.kNormal, @intCast(name.len));
+                const getter_callback = @constCast(v8.v8__FunctionTemplate__New__Config(isolate, &.{ .callback = value.getter }).?);
                 if (value.setter == null) {
                     if (value.static) {
-                        template.setAccessorGetter(js_name, getter_callback);
+                        v8.v8__Template__SetAccessorProperty__DEFAULT(@ptrCast(template), js_name, getter_callback);
                     } else {
-                        target.setAccessorGetter(js_name, getter_callback);
+                        v8.v8__ObjectTemplate__SetAccessorProperty__DEFAULT(prototype, js_name, getter_callback);
                     }
                 } else {
-                    std.debug.assert(value.static == false);
-                    const setter_callback = v8.FunctionTemplate.initCallback(isolate, value.setter);
-                    target.setAccessorGetterAndSetter(js_name, getter_callback, setter_callback);
+                    if (comptime IS_DEBUG) {
+                        std.debug.assert(value.static == false);
+                    }
+                    const setter_callback = @constCast(v8.v8__FunctionTemplate__New__Config(isolate, &.{ .callback = value.setter.? }).?);
+                    v8.v8__ObjectTemplate__SetAccessorProperty__DEFAULT2(prototype, js_name, getter_callback, setter_callback);
                 }
             },
             bridge.Function => {
-                const function_template = v8.FunctionTemplate.initCallback(isolate, value.func);
-                const js_name = v8.String.initUtf8(isolate, name).toName();
+                const function_template = @constCast(v8.v8__FunctionTemplate__New__Config(isolate, &.{ .callback = value.func, .length = value.arity }).?);
+                const js_name = v8.v8__String__NewFromUtf8(isolate, name.ptr, v8.kNormal, @intCast(name.len));
                 if (value.static) {
-                    template.set(js_name, function_template, v8.PropertyAttribute.None);
+                    v8.v8__Template__Set(@ptrCast(template), js_name, @ptrCast(function_template), v8.None);
                 } else {
-                    target.set(js_name, function_template, v8.PropertyAttribute.None);
+                    v8.v8__Template__Set(@ptrCast(prototype), js_name, @ptrCast(function_template), v8.None);
                 }
             },
             bridge.Indexed => {
-                const configuration = v8.IndexedPropertyHandlerConfiguration{
+                var configuration: v8.IndexedPropertyHandlerConfiguration = .{
                     .getter = value.getter,
+                    .enumerator = value.enumerator,
+                    .setter = null,
+                    .query = null,
+                    .deleter = null,
+                    .definer = null,
+                    .descriptor = null,
+                    .data = null,
+                    .flags = 0,
                 };
-                target.setIndexedProperty(configuration, null);
+                v8.v8__ObjectTemplate__SetIndexedHandler(instance, &configuration);
+            },
+            bridge.NamedIndexed => {
+                var configuration: v8.NamedPropertyHandlerConfiguration = .{
+                    .getter = value.getter,
+                    .setter = value.setter,
+                    .query = null,
+                    .deleter = value.deleter,
+                    .enumerator = null,
+                    .definer = null,
+                    .descriptor = null,
+                    .data = null,
+                    .flags = v8.kOnlyInterceptStrings | v8.kNonMasking,
+                };
+                v8.v8__ObjectTemplate__SetNamedHandler(instance, &configuration);
+                has_named_index_getter = true;
             },
-            bridge.NamedIndexed => template.getInstanceTemplate().setNamedProperty(.{
-                .getter = value.getter,
-                .setter = value.setter,
-                .deleter = value.deleter,
-                .flags = v8.PropertyHandlerFlags.OnlyInterceptStrings | v8.PropertyHandlerFlags.NonMasking,
-            }, null),
             bridge.Iterator => {
-                const function_template = v8.FunctionTemplate.initCallback(isolate, value.func);
+                const function_template = @constCast(v8.v8__FunctionTemplate__New__Config(isolate, &.{ .callback = value.func }).?);
                 const js_name = if (value.async)
-                    v8.Symbol.getAsyncIterator(isolate).toName()
+                    v8.v8__Symbol__GetAsyncIterator(isolate)
                 else
-                    v8.Symbol.getIterator(isolate).toName();
-                target.set(js_name, function_template, v8.PropertyAttribute.None);
+                    v8.v8__Symbol__GetIterator(isolate);
+                v8.v8__Template__Set(@ptrCast(prototype), js_name, @ptrCast(function_template), v8.None);
             },
             bridge.Property => {
-                const js_value = switch (value) {
-                    .int => |v| js.simpleZigValueToJs(isolate, v, true, false),
+                const js_value = switch (value.value) {
+                    .null => js.simpleZigValueToJs(.{ .handle = isolate }, null, true, false),
+                    inline .bool, .int, .float, .string => |v| js.simpleZigValueToJs(.{ .handle = isolate }, v, true, false),
                 };
+                const js_name = v8.v8__String__NewFromUtf8(isolate, name.ptr, v8.kNormal, @intCast(name.len));
 
-                const js_name = v8.String.initUtf8(isolate, name).toName();
-                // apply it both to the type itself
-                template.set(js_name, js_value, v8.PropertyAttribute.ReadOnly + v8.PropertyAttribute.DontDelete);
+                {
+                    const flags = if (value.readonly) v8.ReadOnly + v8.DontDelete else 0;
+                    v8.v8__Template__Set(@ptrCast(prototype), js_name, js_value, flags);
+                }
 
-                // and to instances of the type
-                target.set(js_name, js_value, v8.PropertyAttribute.ReadOnly + v8.PropertyAttribute.DontDelete);
+                if (value.template) {
+                    // apply it both to the type itself (e.g. Node.Elem)
+                    v8.v8__Template__Set(@ptrCast(template), js_name, js_value, v8.ReadOnly + v8.DontDelete);
+                }
             },
             bridge.Constructor => {}, // already handled in generateConstructor
             else => {},
@@ -456,15 +581,31 @@ fn attachClass(comptime JsApi: type, isolate: v8.Isolate, template: v8.FunctionT
     }
 
     if (@hasDecl(JsApi.Meta, "htmldda")) {
-        const instance_template = template.getInstanceTemplate();
-        instance_template.markAsUndetectable();
-        instance_template.setCallAsFunctionHandler(JsApi.Meta.callable.func);
+        v8.v8__ObjectTemplate__MarkAsUndetectable(instance);
+        v8.v8__ObjectTemplate__SetCallAsFunctionHandler(instance, JsApi.Meta.callable.func);
     }
 
     if (@hasDecl(JsApi.Meta, "name")) {
-        const js_name = v8.Symbol.getToStringTag(isolate).toName();
-        const instance_template = template.getInstanceTemplate();
-        instance_template.set(js_name, v8.String.initUtf8(isolate, JsApi.Meta.name), v8.PropertyAttribute.ReadOnly + v8.PropertyAttribute.DontDelete);
+        const js_name = v8.v8__Symbol__GetToStringTag(isolate);
+        const js_value = v8.v8__String__NewFromUtf8(isolate, JsApi.Meta.name.ptr, v8.kNormal, @intCast(JsApi.Meta.name.len));
+        v8.v8__Template__Set(@ptrCast(instance), js_name, js_value, v8.ReadOnly + v8.DontDelete);
+    }
+
+    if (comptime IS_DEBUG) {
+        if (!has_named_index_getter) {
+            var configuration: v8.NamedPropertyHandlerConfiguration = .{
+                .getter = bridge.unknownObjectPropertyCallback(JsApi),
+                .setter = null,
+                .query = null,
+                .deleter = null,
+                .enumerator = null,
+                .definer = null,
+                .descriptor = null,
+                .data = null,
+                .flags = v8.kOnlyInterceptStrings | v8.kNonMasking,
+            };
+            v8.v8__ObjectTemplate__SetNamedHandler(instance, &configuration);
+        }
     }
 }
 
@@ -482,10 +623,15 @@ fn protoIndexLookup(comptime JsApi: type) ?bridge.JsApiLookup.BackingInt {
 }
 
 // Shared illegal constructor callback for types without explicit constructors
-fn illegalConstructorCallback(raw_info: ?*const v8.C_FunctionCallbackInfo) callconv(.c) void {
-    const info = v8.FunctionCallbackInfo.initFromV8(raw_info);
-    const iso = info.getIsolate();
+fn illegalConstructorCallback(raw_info: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
+    const isolate = v8.v8__FunctionCallbackInfo__GetIsolate(raw_info);
     log.warn(.js, "Illegal constructor call", .{});
-    const js_exception = iso.throwException(js._createException(iso, "Illegal Constructor"));
-    info.getReturnValue().set(js_exception);
+
+    const message = v8.v8__String__NewFromUtf8(isolate, "Illegal Constructor", v8.kNormal, 19);
+    const js_exception = v8.v8__Exception__TypeError(message);
+
+    _ = v8.v8__Isolate__ThrowException(isolate, js_exception);
+    var return_value: v8.ReturnValue = undefined;
+    v8.v8__FunctionCallbackInfo__GetReturnValue(raw_info, &return_value);
+    v8.v8__ReturnValue__Set(return_value, js_exception);
 }

src/browser/js/String.zig

@@ -0,0 +1,111 @@
+// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+const js = @import("js.zig");
+const SSO = @import("../../string.zig").String;
+
+const Allocator = std.mem.Allocator;
+const IS_DEBUG = @import("builtin").mode == .Debug;
+
+const v8 = js.v8;
+
+const String = @This();
+
+local: *const js.Local,
+handle: *const v8.String,
+
+pub fn toSlice(self: String) ![]u8 {
+    return self._toSlice(false, self.local.call_arena);
+}
+pub fn toSliceZ(self: String) ![:0]u8 {
+    return self._toSlice(true, self.local.call_arena);
+}
+pub fn toSliceWithAlloc(self: String, allocator: Allocator) ![]u8 {
+    return self._toSlice(false, allocator);
+}
+fn _toSlice(self: String, comptime null_terminate: bool, allocator: Allocator) !(if (null_terminate) [:0]u8 else []u8) {
+    const local = self.local;
+    const handle = self.handle;
+    const isolate = local.isolate.handle;
+
+    const len = v8.v8__String__Utf8Length(handle, isolate);
+    const buf = try (if (comptime null_terminate) allocator.allocSentinel(u8, @intCast(len), 0) else allocator.alloc(u8, @intCast(len)));
+    const n = v8.v8__String__WriteUtf8(handle, isolate, buf.ptr, buf.len, v8.NO_NULL_TERMINATION | v8.REPLACE_INVALID_UTF8);
+    if (comptime IS_DEBUG) {
+        std.debug.assert(n == len);
+    }
+
+    return buf;
+}
+
+pub fn toSSO(self: String, comptime global: bool) !(if (global) SSO.Global else SSO) {
+    if (comptime global) {
+        return .{ .str = try self.toSSOWithAlloc(self.local.ctx.arena) };
+    }
+    return self.toSSOWithAlloc(self.local.call_arena);
+}
+pub fn toSSOWithAlloc(self: String, allocator: Allocator) !SSO {
+    const handle = self.handle;
+    const isolate = self.local.isolate.handle;
+
+    const len: usize = @intCast(v8.v8__String__Utf8Length(handle, isolate));
+
+    if (len <= 12) {
+        var content: [12]u8 = undefined;
+        const n = v8.v8__String__WriteUtf8(handle, isolate, &content[0], content.len, v8.NO_NULL_TERMINATION | v8.REPLACE_INVALID_UTF8);
+        if (comptime IS_DEBUG) {
+            std.debug.assert(n == len);
+        }
+        // Weird that we do this _after_, but we have to..I've seen weird issues
+        // in ReleaseMode where v8 won't write to content if it starts off zero
+        // initiated
+        @memset(content[len..], 0);
+        return .{ .len = @intCast(len), .payload = .{ .content = content } };
+    }
+
+    const buf = try allocator.alloc(u8, len);
+    const n = v8.v8__String__WriteUtf8(handle, isolate, buf.ptr, buf.len, v8.NO_NULL_TERMINATION | v8.REPLACE_INVALID_UTF8);
+    if (comptime IS_DEBUG) {
+        std.debug.assert(n == len);
+    }
+
+    var prefix: [4]u8 = @splat(0);
+    @memcpy(&prefix, buf[0..4]);
+
+    return .{
+        .len = @intCast(len),
+        .payload = .{ .heap = .{
+            .prefix = prefix,
+            .ptr = buf.ptr,
+        } },
+    };
+}
+
+pub fn format(self: String, writer: *std.Io.Writer) !void {
+    const local = self.local;
+    const handle = self.handle;
+    const isolate = local.isolate.handle;
+
+    var small: [1024]u8 = undefined;
+    const len = v8.v8__String__Utf8Length(handle, isolate);
+    var buf = if (len < 1024) &small else local.call_arena.alloc(u8, @intCast(len)) catch return error.WriteFailed;
+
+    const n = v8.v8__String__WriteUtf8(handle, isolate, buf.ptr, buf.len, v8.NO_NULL_TERMINATION | v8.REPLACE_INVALID_UTF8);
+    return writer.writeAll(buf[0..n]);
+}

src/browser/js/TaggedOpaque.zig

@@ -0,0 +1,129 @@
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const js = @import("js.zig");
+const v8 = js.v8;
+const bridge = js.bridge;
+
+// When we return a Zig object to V8, we put it on the heap and pass it into
+// v8 as an *anyopaque (i.e. void *). When V8 gives us back the value, say, as a
+// function parameter, we know what type it _should_ be.
+//
+// In a simple/perfect world, we could use this knowledge to cast the *anyopaque
+// to the parameter type:
+//   const arg: @typeInfo(@TypeOf(function)).@"fn".params[0] = @ptrCast(v8_data);
+//
+// But there are 2 reasons we can't do that.
+//
+// == Reason 1 ==
+// The JS code might pass the wrong type:
+//
+//   var cat = new Cat();
+//   cat.setOwner(new Cat());
+//
+// The zig_setOwner method expects the 2nd parameter to be an *Owner, but
+// the JS code passed a *Cat.
+//
+// To solve this issue, we tag every returned value so that we can check what
+// type it is. In the above case, we'd expect an *Owner, but the tag would tell
+// us that we got a *Cat. We use the type index in our Types lookup as the tag.
+//
+// == Reason 2 ==
+// Because of prototype inheritance, even "correct" code can be a challenge. For
+// example, say the above JavaScript is fixed:
+//
+//   var cat = new Cat();
+//   cat.setOwner(new Owner("Leto"));
+//
+// The issue is that setOwner might not expect an *Owner, but rather a
+// *Person, which is the prototype for Owner. Now our Zig code is expecting
+// a *Person, but it was (correctly) given an *Owner.
+// For this reason, we also store the prototype chain.
+const TaggedOpaque = @This();
+
+prototype_len: u16,
+prototype_chain: [*]const PrototypeChainEntry,
+
+// Ptr to the Zig instance. Between the context where it's called (i.e.
+// we have the comptime parameter info for all functions), and the index field
+// we can figure out what type this is.
+value: *anyopaque,
+
+// When we're asked to describe an object via the Inspector, we _must_ include
+// the proper subtype (and description) fields in the returned JSON.
+// V8 will give us a Value and ask us for the subtype. From the js.Value we
+// can get a js.Object, and from the js.Object, we can get out TaggedOpaque
+// which is where we store the subtype.
+subtype: ?bridge.SubType,
+
+pub const PrototypeChainEntry = struct {
+    index: bridge.JsApiLookup.BackingInt,
+    offset: u16, // offset to the _proto field
+};
+
+// Reverses the mapZigInstanceToJs, making sure that our TaggedOpaque
+// contains a ptr to the correct type.
+pub fn fromJS(comptime R: type, js_obj_handle: *const v8.Object) !R {
+    const ti = @typeInfo(R);
+    if (ti != .pointer) {
+        @compileError("non-pointer Zig parameter type: " ++ @typeName(R));
+    }
+
+    const T = ti.pointer.child;
+    const JsApi = bridge.Struct(T).JsApi;
+
+    if (@hasDecl(JsApi.Meta, "empty_with_no_proto")) {
+        // Empty structs aren't stored as TOAs and there's no data
+        // stored in the JSObject's IntenrnalField. Why bother when
+        // we can just return an empty struct here?
+        return @constCast(@as(*const T, &.{}));
+    }
+
+    const internal_field_count = v8.v8__Object__InternalFieldCount(js_obj_handle);
+    // if it isn't an empty struct, then the v8.Object should have an
+    // InternalFieldCount > 0, since our toa pointer should be embedded
+    // at index 0 of the internal field count.
+    if (internal_field_count == 0) {
+        return error.InvalidArgument;
+    }
+
+    if (!bridge.JsApiLookup.has(JsApi)) {
+        @compileError("unknown Zig type: " ++ @typeName(R));
+    }
+
+    const tao_ptr = v8.v8__Object__GetAlignedPointerFromInternalField(js_obj_handle, 0).?;
+    const tao: *TaggedOpaque = @ptrCast(@alignCast(tao_ptr));
+    const expected_type_index = bridge.JsApiLookup.getId(JsApi);
+
+    const prototype_chain = tao.prototype_chain[0..tao.prototype_len];
+    if (prototype_chain[0].index == expected_type_index) {
+        return @ptrCast(@alignCast(tao.value));
+    }
+
+    // Ok, let's walk up the chain
+    var ptr = @intFromPtr(tao.value);
+    for (prototype_chain[1..]) |proto| {
+        ptr += proto.offset; // the offset to the _proto field
+        const proto_ptr: **anyopaque = @ptrFromInt(ptr);
+        if (proto.index == expected_type_index) {
+            return @ptrCast(@alignCast(proto_ptr.*));
+        }
+        ptr = @intFromPtr(proto_ptr.*);
+    }
+    return error.InvalidArgument;
+}

src/browser/js/TryCatch.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -20,63 +20,131 @@ const std = @import("std");
 const js = @import("js.zig");
 const v8 = js.v8;
 
+const IS_DEBUG = @import("builtin").mode == .Debug;
+
 const Allocator = std.mem.Allocator;
 
 const TryCatch = @This();
 
-inner: v8.TryCatch,
-context: *const js.Context,
+handle: v8.TryCatch,
+local: *const js.Local,
 
-pub fn init(self: *TryCatch, context: *const js.Context) void {
-    self.context = context;
-    self.inner.init(context.isolate);
+pub fn init(self: *TryCatch, l: *const js.Local) void {
+    self.local = l;
+    v8.v8__TryCatch__CONSTRUCT(&self.handle, l.isolate.handle);
 }
 
 pub fn hasCaught(self: TryCatch) bool {
-    return self.inner.hasCaught();
+    return v8.v8__TryCatch__HasCaught(&self.handle);
 }
 
-// the caller needs to deinit the string returned
-pub fn exception(self: TryCatch, allocator: Allocator) !?[]const u8 {
-    const msg = self.inner.getException() orelse return null;
-    return try self.context.valueToString(msg, .{ .allocator = allocator });
-}
-
-// the caller needs to deinit the string returned
-pub fn stack(self: TryCatch, allocator: Allocator) !?[]const u8 {
-    const context = self.context;
-    const s = self.inner.getStackTrace(context.v8_context) orelse return null;
-    return try context.valueToString(s, .{ .allocator = allocator });
-}
-
-// the caller needs to deinit the string returned
-pub fn sourceLine(self: TryCatch, allocator: Allocator) !?[]const u8 {
-    const context = self.context;
-    const msg = self.inner.getMessage() orelse return null;
-    const sl = msg.getSourceLine(context.v8_context) orelse return null;
-    return try context.jsStringToZig(sl, .{ .allocator = allocator });
-}
-
-pub fn sourceLineNumber(self: TryCatch) ?u32 {
-    const context = self.context;
-    const msg = self.inner.getMessage() orelse return null;
-    return msg.getLineNumber(context.v8_context);
-}
-
-// a shorthand method to return either the entire stack message
-// or just the exception message
-// - in Debug mode return the stack if available
-// - otherwise return the exception if available
-// the caller needs to deinit the string returned
-pub fn err(self: TryCatch, allocator: Allocator) !?[]const u8 {
-    if (comptime @import("builtin").mode == .Debug) {
-        if (try self.stack(allocator)) |msg| {
-            return msg;
-        }
+pub fn rethrow(self: *TryCatch) void {
+    if (comptime IS_DEBUG) {
+        std.debug.assert(self.hasCaught());
     }
-    return try self.exception(allocator);
+    _ = v8.v8__TryCatch__ReThrow(&self.handle);
+}
+
+pub fn caught(self: TryCatch, allocator: Allocator) ?Caught {
+    if (self.hasCaught() == false) {
+        return null;
+    }
+
+    const l = self.local;
+    const line: ?u32 = blk: {
+        const handle = v8.v8__TryCatch__Message(&self.handle) orelse return null;
+        const line = v8.v8__Message__GetLineNumber(handle, l.handle);
+        break :blk if (line < 0) null else @intCast(line);
+    };
+
+    const exception: ?[]const u8 = blk: {
+        const handle = v8.v8__TryCatch__Exception(&self.handle) orelse break :blk null;
+        var js_val = js.Value{ .local = l, .handle = handle };
+
+        // If it's an Error object, try to get the message property
+        if (js_val.isObject()) {
+            const js_obj = js_val.toObject();
+            if (js_obj.has("message")) {
+                js_val = js_obj.get("message") catch break :blk null;
+            }
+        }
+
+        if (js_val.isString()) |js_str| {
+            break :blk js_str.toSliceWithAlloc(allocator) catch |err| @errorName(err);
+        }
+        break :blk null;
+    };
+
+    const stack: ?[]const u8 = blk: {
+        const handle = v8.v8__TryCatch__StackTrace(&self.handle, l.handle) orelse break :blk null;
+        var js_val = js.Value{ .local = l, .handle = handle };
+
+        // If it's an Error object, try to get the stack property
+        if (js_val.isObject()) {
+            const js_obj = js_val.toObject();
+            if (js_obj.has("stack")) {
+                js_val = js_obj.get("stack") catch break :blk null;
+            }
+        }
+
+        if (js_val.isString()) |js_str| {
+            break :blk js_str.toSliceWithAlloc(allocator) catch |err| @errorName(err);
+        }
+        break :blk null;
+    };
+
+    return .{
+        .line = line,
+        .stack = stack,
+        .caught = true,
+        .exception = exception,
+    };
+}
+
+pub fn caughtOrError(self: TryCatch, allocator: Allocator, err: anyerror) Caught {
+    return self.caught(allocator) orelse .{
+        .caught = false,
+        .line = null,
+        .stack = null,
+        .exception = @errorName(err),
+    };
 }
 
 pub fn deinit(self: *TryCatch) void {
-    self.inner.deinit();
+    v8.v8__TryCatch__DESTRUCT(&self.handle);
 }
+
+pub const Caught = struct {
+    line: ?u32 = null,
+    caught: bool = false,
+    stack: ?[]const u8 = null,
+    exception: ?[]const u8 = null,
+
+    pub fn format(self: Caught, writer: *std.Io.Writer) !void {
+        const separator = @import("../../log.zig").separator();
+        try writer.print("{s}exception: {?s}", .{ separator, self.exception });
+        try writer.print("{s}stack: {?s}", .{ separator, self.stack });
+        try writer.print("{s}line: {?d}", .{ separator, self.line });
+        try writer.print("{s}caught: {any}", .{ separator, self.caught });
+    }
+
+    pub fn logFmt(self: Caught, comptime prefix: []const u8, writer: anytype) !void {
+        try writer.write(prefix ++ ".exception", self.exception orelse "???");
+        try writer.write(prefix ++ ".stack", self.stack orelse "na");
+        try writer.write(prefix ++ ".line", self.line);
+        try writer.write(prefix ++ ".caught", self.caught);
+    }
+
+    pub fn jsonStringify(self: Caught, jw: anytype) !void {
+        try jw.beginObject();
+        try jw.objectField("exception");
+        try jw.write(self.exception);
+        try jw.objectField("stack");
+        try jw.write(self.stack);
+        try jw.objectField("line");
+        try jw.write(self.line);
+        try jw.objectField("caught");
+        try jw.write(self.caught);
+        try jw.endObject();
+    }
+};

src/browser/js/Value.zig

@@ -18,87 +18,323 @@
 
 const std = @import("std");
 const js = @import("js.zig");
+const SSO = @import("../../string.zig").String;
 
 const v8 = js.v8;
 
+const IS_DEBUG = @import("builtin").mode == .Debug;
+
 const Allocator = std.mem.Allocator;
 
-const PersistentValue = v8.Persistent(v8.Value);
-
 const Value = @This();
-js_val: v8.Value,
-context: *js.Context,
+
+local: *const js.Local,
+handle: *const v8.Value,
 
 pub fn isObject(self: Value) bool {
-    return self.js_val.isObject();
+    return v8.v8__Value__IsObject(self.handle);
 }
 
-pub fn isString(self: Value) bool {
-    return self.js_val.isString();
+pub fn isString(self: Value) ?js.String {
+    const handle = self.handle;
+    if (!v8.v8__Value__IsString(handle)) {
+        return null;
+    }
+    return .{ .local = self.local, .handle = @ptrCast(handle) };
 }
 
 pub fn isArray(self: Value) bool {
-    return self.js_val.isArray();
+    return v8.v8__Value__IsArray(self.handle);
+}
+
+pub fn isSymbol(self: Value) bool {
+    return v8.v8__Value__IsSymbol(self.handle);
+}
+
+pub fn isFunction(self: Value) bool {
+    return v8.v8__Value__IsFunction(self.handle);
 }
 
 pub fn isNull(self: Value) bool {
-    return self.js_val.isNull();
+    return v8.v8__Value__IsNull(self.handle);
 }
 
 pub fn isUndefined(self: Value) bool {
-    return self.js_val.isUndefined();
+    return v8.v8__Value__IsUndefined(self.handle);
 }
 
-pub fn toString(self: Value, allocator: Allocator) ![]const u8 {
-    return self.context.valueToString(self.js_val, .{ .allocator = allocator });
+pub fn isNullOrUndefined(self: Value) bool {
+    return v8.v8__Value__IsNullOrUndefined(self.handle);
 }
 
-pub fn fromJson(ctx: *js.Context, json: []const u8) !Value {
-    const json_string = v8.String.initUtf8(ctx.isolate, json);
-    const value = try v8.Json.parse(ctx.v8_context, json_string);
-    return Value{ .context = ctx, .js_val = value };
+pub fn isNumber(self: Value) bool {
+    return v8.v8__Value__IsNumber(self.handle);
 }
 
-pub fn persist(self: Value) !Value {
-    const js_val = self.js_val;
-    var context = self.context;
+pub fn isNumberObject(self: Value) bool {
+    return v8.v8__Value__IsNumberObject(self.handle);
+}
 
-    const persisted = PersistentValue.init(context.isolate, js_val);
-    try context.js_value_list.append(context.arena, persisted);
+pub fn isInt32(self: Value) bool {
+    return v8.v8__Value__IsInt32(self.handle);
+}
 
-    return Value{ .context = context, .js_val = persisted.toValue() };
+pub fn isUint32(self: Value) bool {
+    return v8.v8__Value__IsUint32(self.handle);
+}
+
+pub fn isBigInt(self: Value) bool {
+    return v8.v8__Value__IsBigInt(self.handle);
+}
+
+pub fn isBigIntObject(self: Value) bool {
+    return v8.v8__Value__IsBigIntObject(self.handle);
+}
+
+pub fn isBoolean(self: Value) bool {
+    return v8.v8__Value__IsBoolean(self.handle);
+}
+
+pub fn isBooleanObject(self: Value) bool {
+    return v8.v8__Value__IsBooleanObject(self.handle);
+}
+
+pub fn isTrue(self: Value) bool {
+    return v8.v8__Value__IsTrue(self.handle);
+}
+
+pub fn isFalse(self: Value) bool {
+    return v8.v8__Value__IsFalse(self.handle);
+}
+
+pub fn isTypedArray(self: Value) bool {
+    return v8.v8__Value__IsTypedArray(self.handle);
+}
+
+pub fn isArrayBufferView(self: Value) bool {
+    return v8.v8__Value__IsArrayBufferView(self.handle);
+}
+
+pub fn isArrayBuffer(self: Value) bool {
+    return v8.v8__Value__IsArrayBuffer(self.handle);
+}
+
+pub fn isUint8Array(self: Value) bool {
+    return v8.v8__Value__IsUint8Array(self.handle);
+}
+
+pub fn isUint8ClampedArray(self: Value) bool {
+    return v8.v8__Value__IsUint8ClampedArray(self.handle);
+}
+
+pub fn isInt8Array(self: Value) bool {
+    return v8.v8__Value__IsInt8Array(self.handle);
+}
+
+pub fn isUint16Array(self: Value) bool {
+    return v8.v8__Value__IsUint16Array(self.handle);
+}
+
+pub fn isInt16Array(self: Value) bool {
+    return v8.v8__Value__IsInt16Array(self.handle);
+}
+
+pub fn isUint32Array(self: Value) bool {
+    return v8.v8__Value__IsUint32Array(self.handle);
+}
+
+pub fn isInt32Array(self: Value) bool {
+    return v8.v8__Value__IsInt32Array(self.handle);
+}
+
+pub fn isBigUint64Array(self: Value) bool {
+    return v8.v8__Value__IsBigUint64Array(self.handle);
+}
+
+pub fn isBigInt64Array(self: Value) bool {
+    return v8.v8__Value__IsBigInt64Array(self.handle);
+}
+
+pub fn isPromise(self: Value) bool {
+    return v8.v8__Value__IsPromise(self.handle);
+}
+
+pub fn toBool(self: Value) bool {
+    return v8.v8__Value__BooleanValue(self.handle, self.local.isolate.handle);
+}
+
+pub fn typeOf(self: Value) js.String {
+    const str_handle = v8.v8__Value__TypeOf(self.handle, self.local.isolate.handle).?;
+    return js.String{ .local = self.local, .handle = str_handle };
+}
+
+pub fn toF32(self: Value) !f32 {
+    return @floatCast(try self.toF64());
+}
+
+pub fn toF64(self: Value) !f64 {
+    var maybe: v8.MaybeF64 = undefined;
+    v8.v8__Value__NumberValue(self.handle, self.local.handle, &maybe);
+    if (!maybe.has_value) {
+        return error.JsException;
+    }
+    return maybe.value;
+}
+
+pub fn toI32(self: Value) !i32 {
+    var maybe: v8.MaybeI32 = undefined;
+    v8.v8__Value__Int32Value(self.handle, self.local.handle, &maybe);
+    if (!maybe.has_value) {
+        return error.JsException;
+    }
+    return maybe.value;
+}
+
+pub fn toU32(self: Value) !u32 {
+    var maybe: v8.MaybeU32 = undefined;
+    v8.v8__Value__Uint32Value(self.handle, self.local.handle, &maybe);
+    if (!maybe.has_value) {
+        return error.JsException;
+    }
+    return maybe.value;
+}
+
+pub fn toPromise(self: Value) js.Promise {
+    if (comptime IS_DEBUG) {
+        std.debug.assert(self.isPromise());
+    }
+    return .{
+        .local = self.local,
+        .handle = @ptrCast(self.handle),
+    };
+}
+
+pub fn toString(self: Value) !js.String {
+    const l = self.local;
+    const value_handle: *const v8.Value = blk: {
+        if (self.isSymbol()) {
+            break :blk @ptrCast(v8.v8__Symbol__Description(@ptrCast(self.handle), l.isolate.handle).?);
+        }
+        break :blk self.handle;
+    };
+
+    const str_handle = v8.v8__Value__ToString(value_handle, l.handle) orelse return error.JsException;
+    return .{ .local = self.local, .handle = str_handle };
+}
+
+pub fn toSSO(self: Value, comptime global: bool) !(if (global) SSO.Global else SSO) {
+    return (try self.toString()).toSSO(global);
+}
+pub fn toSSOWithAlloc(self: Value, allocator: Allocator) !SSO {
+    return (try self.toString()).toSSOWithAlloc(allocator);
+}
+
+pub fn toStringSlice(self: Value) ![]u8 {
+    return (try self.toString()).toSlice();
+}
+pub fn toStringSliceZ(self: Value) ![:0]u8 {
+    return (try self.toString()).toSliceZ();
+}
+pub fn toStringSliceWithAlloc(self: Value, allocator: Allocator) ![]u8 {
+    return (try self.toString()).toSliceWithAlloc(allocator);
+}
+
+pub fn toJson(self: Value, allocator: Allocator) ![]u8 {
+    const local = self.local;
+    const str_handle = v8.v8__JSON__Stringify(local.handle, self.handle, null) orelse return error.JsException;
+    return js.String.toSliceWithAlloc(.{ .local = local, .handle = str_handle }, allocator);
+}
+
+pub fn persist(self: Value) !Global {
+    return self._persist(true);
+}
+
+pub fn temp(self: Value) !Temp {
+    return self._persist(false);
+}
+
+fn _persist(self: *const Value, comptime is_global: bool) !(if (is_global) Global else Temp) {
+    var ctx = self.local.ctx;
+
+    var global: v8.Global = undefined;
+    v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
+    if (comptime is_global) {
+        try ctx.global_values.append(ctx.arena, global);
+    } else {
+        try ctx.global_values_temp.put(ctx.arena, global.data_ptr, global);
+    }
+    return .{ .handle = global };
 }
 
 pub fn toZig(self: Value, comptime T: type) !T {
-    return self.context.jsValueToZig(T, self.js_val);
+    return self.local.jsValueToZig(T, self);
 }
 
 pub fn toObject(self: Value) js.Object {
+    if (comptime IS_DEBUG) {
+        std.debug.assert(self.isObject());
+    }
+
     return .{
-        .context = self.context,
-        .js_obj = self.js_val.castTo(v8.Object),
+        .local = self.local,
+        .handle = @ptrCast(self.handle),
     };
 }
 
 pub fn toArray(self: Value) js.Array {
+    if (comptime IS_DEBUG) {
+        std.debug.assert(self.isArray());
+    }
+
     return .{
-        .context = self.context,
-        .js_arr = self.js_val.castTo(v8.Array),
+        .local = self.local,
+        .handle = @ptrCast(self.handle),
     };
 }
 
-// pub const Value = struct {
-//     value: v8.Value,
-//     context: *const Context,
+pub fn toBigInt(self: Value) js.BigInt {
+    if (comptime IS_DEBUG) {
+        std.debug.assert(self.isBigInt());
+    }
 
-//     // the caller needs to deinit the string returned
-//     pub fn toString(self: Value, allocator: Allocator) ![]const u8 {
-//         return self.context.valueToString(self.value, .{ .allocator = allocator });
-//     }
+    return .{
+        .handle = @ptrCast(self.handle),
+    };
+}
 
-//     pub fn fromJson(ctx: *Context, json: []const u8) !Value {
-//         const json_string = v8.String.initUtf8(ctx.isolate, json);
-//         const value = try v8.Json.parse(ctx.v8_context, json_string);
-//         return Value{ .context = ctx, .value = value };
-//     }
-// };
+pub fn format(self: Value, writer: *std.Io.Writer) !void {
+    if (comptime IS_DEBUG) {
+        return self.local.debugValue(self, writer);
+    }
+    const js_str = self.toString() catch return error.WriteFailed;
+    return js_str.format(writer);
+}
+
+pub const Temp = G(0);
+pub const Global = G(1);
+
+fn G(comptime discriminator: u8) type {
+    return struct {
+        handle: v8.Global,
+
+        // makes the types different (G(0) != G(1)), without taking up space
+        comptime _: u8 = discriminator,
+
+        const Self = @This();
+
+        pub fn deinit(self: *Self) void {
+            v8.v8__Global__Reset(&self.handle);
+        }
+
+        pub fn local(self: *const Self, l: *const js.Local) Value {
+            return .{
+                .local = l,
+                .handle = @ptrCast(v8.v8__Global__Get(&self.handle, l.isolate.handle)),
+            };
+        }
+
+        pub fn isEqual(self: *const Self, other: Value) bool {
+            return v8.v8__Global__IsEqual(&self.handle, other.handle);
+        }
+    };
+}

src/browser/js/bridge.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -18,11 +18,16 @@
 
 const std = @import("std");
 const js = @import("js.zig");
+const lp = @import("lightpanda");
 const log = @import("../../log.zig");
+const Page = @import("../Page.zig");
 
 const v8 = js.v8;
 
 const Caller = @import("Caller.zig");
+const Context = @import("Context.zig");
+
+const IS_DEBUG = @import("builtin").mode == .Debug;
 
 pub fn Builder(comptime T: type) type {
     return struct {
@@ -33,16 +38,16 @@ pub fn Builder(comptime T: type) type {
             return Constructor.init(T, func, opts);
         }
 
-        pub fn accessor(comptime getter: anytype, comptime setter: anytype, comptime opts: Accessor.Opts) Accessor {
+        pub fn accessor(comptime getter: anytype, comptime setter: anytype, comptime opts: Caller.Function.Opts) Accessor {
             return Accessor.init(T, getter, setter, opts);
         }
 
-        pub fn function(comptime func: anytype, comptime opts: Function.Opts) Function {
+        pub fn function(comptime func: anytype, comptime opts: Caller.Function.Opts) Function {
             return Function.init(T, func, opts);
         }
 
-        pub fn indexed(comptime getter_func: anytype, comptime opts: Indexed.Opts) Indexed {
-            return Indexed.init(T, getter_func, opts);
+        pub fn indexed(comptime getter_func: anytype, comptime enumerator_func: anytype, comptime opts: Indexed.Opts) Indexed {
+            return Indexed.init(T, getter_func, enumerator_func, opts);
         }
 
         pub fn namedIndexed(comptime getter_func: anytype, setter_func: anytype, deleter_func: anytype, comptime opts: NamedIndexed.Opts) NamedIndexed {
@@ -57,16 +62,29 @@ pub fn Builder(comptime T: type) type {
             return Callable.init(T, func, opts);
         }
 
-        pub fn property(value: anytype) Property {
+        pub fn property(value: anytype, opts: Property.Opts) Property {
             switch (@typeInfo(@TypeOf(value))) {
-                .comptime_int, .int => return .{ .int = value },
+                .bool => return Property.init(.{ .bool = value }, opts),
+                .null => return Property.init(.null, opts),
+                .comptime_int, .int => return Property.init(.{ .int = value }, opts),
+                .comptime_float, .float => return Property.init(.{ .float = value }, opts),
+                .pointer => |ptr| switch (ptr.size) {
+                    .one => {
+                        const one_info = @typeInfo(ptr.child);
+                        if (one_info == .array and one_info.array.child == u8) {
+                            return Property.init(.{ .string = value }, opts);
+                        }
+                    },
+                    else => {},
+                },
                 else => {},
             }
             @compileError("Property for " ++ @typeName(@TypeOf(value)) ++ " hasn't been defined yet");
         }
 
-        pub fn prototypeChain() [prototypeChainLength(T)]js.PrototypeChainEntry {
-            var entries: [prototypeChainLength(T)]js.PrototypeChainEntry = undefined;
+        const PrototypeChainEntry = @import("TaggedOpaque.zig").PrototypeChainEntry;
+        pub fn prototypeChain() [prototypeChainLength(T)]PrototypeChainEntry {
+            var entries: [prototypeChainLength(T)]PrototypeChainEntry = undefined;
 
             entries[0] = .{ .offset = 0, .index = JsApiLookup.getId(T.JsApi) };
 
@@ -85,11 +103,39 @@ pub fn Builder(comptime T: type) type {
             }
             return entries;
         }
+
+        pub fn finalizer(comptime func: *const fn (self: *T, shutdown: bool, page: *Page) void) Finalizer {
+            return .{
+                .from_zig = struct {
+                    fn wrap(ptr: *anyopaque, page: *Page) void {
+                        func(@ptrCast(@alignCast(ptr)), true, page);
+                    }
+                }.wrap,
+
+                .from_v8 = struct {
+                    fn wrap(handle: ?*const v8.WeakCallbackInfo) callconv(.c) void {
+                        const ptr = v8.v8__WeakCallbackInfo__GetParameter(handle.?).?;
+                        const fc: *Context.FinalizerCallback = @ptrCast(@alignCast(ptr));
+
+                        const ctx = fc.ctx;
+                        const value_ptr = fc.ptr;
+                        if (ctx.finalizer_callbacks.contains(@intFromPtr(value_ptr))) {
+                            func(@ptrCast(@alignCast(value_ptr)), false, ctx.page);
+                            ctx.release(value_ptr);
+                        } else {
+                            // A bit weird, but v8 _requires_ that we release it
+                            // If we don't. We'll 100% crash.
+                            v8.v8__Global__Reset(&fc.global);
+                        }
+                    }
+                }.wrap,
+            };
+        }
     };
 }
 
 pub const Constructor = struct {
-    func: *const fn (?*const v8.C_FunctionCallbackInfo) callconv(.c) void,
+    func: *const fn (?*const v8.FunctionCallbackInfo) callconv(.c) void,
 
     const Opts = struct {
         dom_exception: bool = false,
@@ -97,12 +143,13 @@ pub const Constructor = struct {
 
     fn init(comptime T: type, comptime func: anytype, comptime opts: Opts) Constructor {
         return .{ .func = struct {
-            fn wrap(raw_info: ?*const v8.C_FunctionCallbackInfo) callconv(.c) void {
-                const info = v8.FunctionCallbackInfo.initFromV8(raw_info);
-                var caller = Caller.init(info);
+            fn wrap(handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
+                const v8_isolate = v8.v8__FunctionCallbackInfo__GetIsolate(handle).?;
+                var caller: Caller = undefined;
+                caller.init(v8_isolate);
                 defer caller.deinit();
 
-                caller.constructor(T, func, info, .{
+                caller.constructor(T, func, handle.?, .{
                     .dom_exception = opts.dom_exception,
                 });
             }
@@ -112,88 +159,67 @@ pub const Constructor = struct {
 
 pub const Function = struct {
     static: bool,
-    func: *const fn (?*const v8.C_FunctionCallbackInfo) callconv(.c) void,
+    arity: usize,
+    noop: bool = false,
+    cache: ?Caller.Function.Opts.Caching = null,
+    func: *const fn (?*const v8.FunctionCallbackInfo) callconv(.c) void,
 
-    const Opts = struct {
-        static: bool = false,
-        dom_exception: bool = false,
-        as_typed_array: bool = false,
-        null_as_undefined: bool = false,
-    };
-
-    fn init(comptime T: type, comptime func: anytype, comptime opts: Opts) Function {
+    fn init(comptime T: type, comptime func: anytype, comptime opts: Caller.Function.Opts) Function {
         return .{
+            .cache = opts.cache,
             .static = opts.static,
-            .func = struct {
-                fn wrap(raw_info: ?*const v8.C_FunctionCallbackInfo) callconv(.c) void {
-                    const info = v8.FunctionCallbackInfo.initFromV8(raw_info);
-                    var caller = Caller.init(info);
-                    defer caller.deinit();
-
-                    if (comptime opts.static) {
-                        caller.function(T, func, info, .{
-                            .dom_exception = opts.dom_exception,
-                            .as_typed_array = opts.as_typed_array,
-                            .null_as_undefined = opts.null_as_undefined,
-                        });
-                    } else {
-                        caller.method(T, func, info, .{
-                            .dom_exception = opts.dom_exception,
-                            .as_typed_array = opts.as_typed_array,
-                            .null_as_undefined = opts.null_as_undefined,
-                        });
-                    }
+            .arity = getArity(@TypeOf(func)),
+            .func = if (opts.noop) noopFunction else struct {
+                fn wrap(handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
+                    Caller.Function.call(T, handle.?, func, opts);
                 }
             }.wrap,
         };
     }
+
+    pub fn noopFunction(_: ?*const v8.FunctionCallbackInfo) callconv(.c) void {}
+
+    fn getArity(comptime T: type) usize {
+        var count: usize = 0;
+        var params = @typeInfo(T).@"fn".params;
+        for (params[1..]) |p| { // start at 1, skip self
+            const PT = p.type.?;
+            if (PT == *Page or PT == *const Page) {
+                break;
+            }
+            if (@typeInfo(PT) == .optional) {
+                break;
+            }
+            count += 1;
+        }
+        return count;
+    }
 };
 
 pub const Accessor = struct {
     static: bool = false,
-    getter: ?*const fn (?*const v8.C_FunctionCallbackInfo) callconv(.c) void = null,
-    setter: ?*const fn (?*const v8.C_FunctionCallbackInfo) callconv(.c) void = null,
+    cache: ?Caller.Function.Opts.Caching = null,
+    getter: ?*const fn (?*const v8.FunctionCallbackInfo) callconv(.c) void = null,
+    setter: ?*const fn (?*const v8.FunctionCallbackInfo) callconv(.c) void = null,
 
-    const Opts = struct {
-        static: bool = false,
-        cache: ?[]const u8 = null, // @ZIGDOM
-        as_typed_array: bool = false,
-        null_as_undefined: bool = false,
-    };
-
-    fn init(comptime T: type, comptime getter: anytype, comptime setter: anytype, comptime opts: Opts) Accessor {
+    fn init(comptime T: type, comptime getter: anytype, comptime setter: anytype, comptime opts: Caller.Function.Opts) Accessor {
         var accessor = Accessor{
+            .cache = opts.cache,
             .static = opts.static,
         };
 
         if (@typeInfo(@TypeOf(getter)) != .null) {
             accessor.getter = struct {
-                fn wrap(raw_info: ?*const v8.C_FunctionCallbackInfo) callconv(.c) void {
-                    const info = v8.FunctionCallbackInfo.initFromV8(raw_info);
-                    var caller = Caller.init(info);
-                    defer caller.deinit();
-
-                    caller.method(T, getter, info, .{
-                        .as_typed_array = opts.as_typed_array,
-                        .null_as_undefined = opts.null_as_undefined,
-                    });
+                fn wrap(handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
+                    Caller.Function.call(T, handle.?, getter, opts);
                 }
             }.wrap;
         }
 
         if (@typeInfo(@TypeOf(setter)) != .null) {
             accessor.setter = struct {
-                fn wrap(raw_info: ?*const v8.C_FunctionCallbackInfo) callconv(.c) void {
-                    const info = v8.FunctionCallbackInfo.initFromV8(raw_info);
-                    std.debug.assert(info.length() == 1);
-
-                    var caller = Caller.init(info);
-                    defer caller.deinit();
-
-                    caller.method(T, setter, info, .{
-                        .as_typed_array = opts.as_typed_array,
-                        .null_as_undefined = opts.null_as_undefined,
-                    });
+                fn wrap(handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
+                    Caller.Function.call(T, handle.?, setter, opts);
                 }
             }.wrap;
         }
@@ -203,32 +229,52 @@ pub const Accessor = struct {
 };
 
 pub const Indexed = struct {
-    getter: *const fn (idx: u32, raw_info: ?*const v8.C_PropertyCallbackInfo) callconv(.c) u8,
+    getter: *const fn (idx: u32, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8,
+    enumerator: ?*const fn (handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8,
 
     const Opts = struct {
         as_typed_array: bool = false,
         null_as_undefined: bool = false,
     };
 
-    fn init(comptime T: type, comptime getter: anytype, comptime opts: Opts) Indexed {
-        return .{ .getter = struct {
-            fn wrap(idx: u32, raw_info: ?*const v8.C_PropertyCallbackInfo) callconv(.c) u8 {
-                const info = v8.PropertyCallbackInfo.initFromV8(raw_info);
-                var caller = Caller.init(info);
-                defer caller.deinit();
-                return caller.getIndex(T, getter, idx, info, .{
-                    .as_typed_array = opts.as_typed_array,
-                    .null_as_undefined = opts.null_as_undefined,
-                });
-            }
-        }.wrap };
+    fn init(comptime T: type, comptime getter: anytype, comptime enumerator: anytype, comptime opts: Opts) Indexed {
+        var indexed = Indexed{
+            .enumerator = null,
+            .getter = struct {
+                fn wrap(idx: u32, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8 {
+                    const v8_isolate = v8.v8__PropertyCallbackInfo__GetIsolate(handle).?;
+                    var caller: Caller = undefined;
+                    caller.init(v8_isolate);
+                    defer caller.deinit();
+
+                    return caller.getIndex(T, getter, idx, handle.?, .{
+                        .as_typed_array = opts.as_typed_array,
+                        .null_as_undefined = opts.null_as_undefined,
+                    });
+                }
+            }.wrap,
+        };
+
+        if (@typeInfo(@TypeOf(enumerator)) != .null) {
+            indexed.enumerator = struct {
+                fn wrap(handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8 {
+                    const v8_isolate = v8.v8__PropertyCallbackInfo__GetIsolate(handle).?;
+                    var caller: Caller = undefined;
+                    caller.init(v8_isolate);
+                    defer caller.deinit();
+                    return caller.getEnumerator(T, enumerator, handle.?, .{});
+                }
+            }.wrap;
+        }
+
+        return indexed;
     }
 };
 
 pub const NamedIndexed = struct {
-    getter: *const fn (c_name: ?*const v8.C_Name, raw_info: ?*const v8.C_PropertyCallbackInfo) callconv(.c) u8,
-    setter: ?*const fn (c_name: ?*const v8.C_Name, c_value: ?*const v8.C_Value, raw_info: ?*const v8.C_PropertyCallbackInfo) callconv(.c) u8 = null,
-    deleter: ?*const fn (c_name: ?*const v8.C_Name, raw_info: ?*const v8.C_PropertyCallbackInfo) callconv(.c) u8 = null,
+    getter: *const fn (c_name: ?*const v8.Name, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8,
+    setter: ?*const fn (c_name: ?*const v8.Name, c_value: ?*const v8.Value, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8 = null,
+    deleter: ?*const fn (c_name: ?*const v8.Name, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8 = null,
 
     const Opts = struct {
         as_typed_array: bool = false,
@@ -237,11 +283,13 @@ pub const NamedIndexed = struct {
 
     fn init(comptime T: type, comptime getter: anytype, setter: anytype, deleter: anytype, comptime opts: Opts) NamedIndexed {
         const getter_fn = struct {
-            fn wrap(c_name: ?*const v8.C_Name, raw_info: ?*const v8.C_PropertyCallbackInfo) callconv(.c) u8 {
-                const info = v8.PropertyCallbackInfo.initFromV8(raw_info);
-                var caller = Caller.init(info);
+            fn wrap(c_name: ?*const v8.Name, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8 {
+                const v8_isolate = v8.v8__PropertyCallbackInfo__GetIsolate(handle).?;
+                var caller: Caller = undefined;
+                caller.init(v8_isolate);
                 defer caller.deinit();
-                return caller.getNamedIndex(T, getter, .{ .handle = c_name.? }, info, .{
+
+                return caller.getNamedIndex(T, getter, c_name.?, handle.?, .{
                     .as_typed_array = opts.as_typed_array,
                     .null_as_undefined = opts.null_as_undefined,
                 });
@@ -249,12 +297,13 @@ pub const NamedIndexed = struct {
         }.wrap;
 
         const setter_fn = if (@typeInfo(@TypeOf(setter)) == .null) null else struct {
-            fn wrap(c_name: ?*const v8.C_Name, c_value: ?*const v8.C_Value, raw_info: ?*const v8.C_PropertyCallbackInfo) callconv(.c) u8 {
-                const info = v8.PropertyCallbackInfo.initFromV8(raw_info);
-                var caller = Caller.init(info);
+            fn wrap(c_name: ?*const v8.Name, c_value: ?*const v8.Value, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8 {
+                const v8_isolate = v8.v8__PropertyCallbackInfo__GetIsolate(handle).?;
+                var caller: Caller = undefined;
+                caller.init(v8_isolate);
                 defer caller.deinit();
 
-                return caller.setNamedIndex(T, setter, .{ .handle = c_name.? }, .{ .handle = c_value.? }, info, .{
+                return caller.setNamedIndex(T, setter, c_name.?, c_value.?, handle.?, .{
                     .as_typed_array = opts.as_typed_array,
                     .null_as_undefined = opts.null_as_undefined,
                 });
@@ -262,12 +311,13 @@ pub const NamedIndexed = struct {
         }.wrap;
 
         const deleter_fn = if (@typeInfo(@TypeOf(deleter)) == .null) null else struct {
-            fn wrap(c_name: ?*const v8.C_Name, raw_info: ?*const v8.C_PropertyCallbackInfo) callconv(.c) u8 {
-                const info = v8.PropertyCallbackInfo.initFromV8(raw_info);
-                var caller = Caller.init(info);
+            fn wrap(c_name: ?*const v8.Name, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8 {
+                const v8_isolate = v8.v8__PropertyCallbackInfo__GetIsolate(handle).?;
+                var caller: Caller = undefined;
+                caller.init(v8_isolate);
                 defer caller.deinit();
 
-                return caller.deleteNamedIndex(T, deleter, .{ .handle = c_name.? }, info, .{
+                return caller.deleteNamedIndex(T, deleter, c_name.?, handle.?, .{
                     .as_typed_array = opts.as_typed_array,
                     .null_as_undefined = opts.null_as_undefined,
                 });
@@ -283,7 +333,7 @@ pub const NamedIndexed = struct {
 };
 
 pub const Iterator = struct {
-    func: *const fn (?*const v8.C_FunctionCallbackInfo) callconv(.c) void,
+    func: *const fn (?*const v8.FunctionCallbackInfo) callconv(.c) void,
     async: bool,
 
     const Opts = struct {
@@ -296,8 +346,8 @@ pub const Iterator = struct {
             return .{
                 .async = opts.async,
                 .func = struct {
-                    fn wrap(raw_info: ?*const v8.C_FunctionCallbackInfo) callconv(.c) void {
-                        const info = v8.FunctionCallbackInfo.initFromV8(raw_info);
+                    fn wrap(handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
+                        const info = Caller.FunctionCallbackInfo{ .handle = handle.? };
                         info.getReturnValue().set(info.getThis());
                     }
                 }.wrap,
@@ -307,11 +357,10 @@ pub const Iterator = struct {
         return .{
             .async = opts.async,
             .func = struct {
-                fn wrap(raw_info: ?*const v8.C_FunctionCallbackInfo) callconv(.c) void {
-                    const info = v8.FunctionCallbackInfo.initFromV8(raw_info);
-                    var caller = Caller.init(info);
-                    defer caller.deinit();
-                    caller.method(T, struct_or_func, info, .{});
+                fn wrap(handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
+                    return Caller.Function.call(T, handle.?, struct_or_func, .{
+                        .null_as_undefined = opts.null_as_undefined,
+                    });
                 }
             }.wrap,
         };
@@ -319,7 +368,7 @@ pub const Iterator = struct {
 };
 
 pub const Callable = struct {
-    func: *const fn (?*const v8.C_FunctionCallbackInfo) callconv(.c) void,
+    func: *const fn (?*const v8.FunctionCallbackInfo) callconv(.c) void,
 
     const Opts = struct {
         null_as_undefined: bool = false,
@@ -327,11 +376,8 @@ pub const Callable = struct {
 
     fn init(comptime T: type, comptime func: anytype, comptime opts: Opts) Callable {
         return .{ .func = struct {
-            fn wrap(raw_info: ?*const v8.C_FunctionCallbackInfo) callconv(.c) void {
-                const info = v8.FunctionCallbackInfo.initFromV8(raw_info);
-                var caller = Caller.init(info);
-                defer caller.deinit();
-                caller.method(T, func, info, .{
+            fn wrap(handle: ?*const v8.FunctionCallbackInfo) callconv(.c) void {
+                Caller.Function.call(T, handle.?, func, .{
                     .null_as_undefined = opts.null_as_undefined,
                 });
             }
@@ -339,10 +385,191 @@ pub const Callable = struct {
     }
 };
 
-pub const Property = union(enum) {
-    int: i64,
+pub const Property = struct {
+    value: Value,
+    template: bool,
+    readonly: bool,
+
+    const Value = union(enum) {
+        null,
+        int: i64,
+        float: f64,
+        bool: bool,
+        string: []const u8,
+    };
+
+    const Opts = struct {
+        template: bool,
+        readonly: bool = true,
+    };
+
+    fn init(value: Value, opts: Opts) Property {
+        return .{
+            .value = value,
+            .template = opts.template,
+            .readonly = opts.readonly,
+        };
+    }
 };
 
+const Finalizer = struct {
+    // The finalizer wrapper when called fro Zig. This is only called on
+    // Context.deinit
+    from_zig: *const fn (ctx: *anyopaque, page: *Page) void,
+
+    // The finalizer wrapper when called from V8. This may never be called
+    // (hence why we fallback to calling in Context.denit). If it is called,
+    // it is only ever called after we SetWeak on the Global.
+    from_v8: *const fn (?*const v8.WeakCallbackInfo) callconv(.c) void,
+};
+
+pub fn unknownWindowPropertyCallback(c_name: ?*const v8.Name, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8 {
+    const v8_isolate = v8.v8__PropertyCallbackInfo__GetIsolate(handle).?;
+    var caller: Caller = undefined;
+    caller.init(v8_isolate);
+    defer caller.deinit();
+
+    const local = &caller.local;
+
+    var hs: js.HandleScope = undefined;
+    hs.init(local.isolate);
+    defer hs.deinit();
+
+    const property: []const u8 = js.String.toSlice(.{ .local = local, .handle = @ptrCast(c_name.?) }) catch {
+        return 0;
+    };
+
+    const page = local.ctx.page;
+    const document = page.document;
+
+    if (document.getElementById(property, page)) |el| {
+        const js_val = local.zigValueToJs(el, .{}) catch return 0;
+        var pc = Caller.PropertyCallbackInfo{ .handle = handle.? };
+        pc.getReturnValue().set(js_val);
+        return 1;
+    }
+
+    if (comptime IS_DEBUG) {
+        if (std.mem.startsWith(u8, property, "__")) {
+            // some frameworks will extend built-in types using a __ prefix
+            // these should always be safe to ignore.
+            return 0;
+        }
+
+        const ignored = std.StaticStringMap(void).initComptime(.{
+            .{ "Deno", {} },
+            .{ "process", {} },
+            .{ "ShadyDOM", {} },
+            .{ "ShadyCSS", {} },
+
+            // a lot of sites seem to like having their own window.config.
+            .{ "config", {} },
+
+            .{ "litNonce", {} },
+            .{ "litHtmlVersions", {} },
+            .{ "litElementVersions", {} },
+            .{ "litHtmlPolyfillSupport", {} },
+            .{ "litElementHydrateSupport", {} },
+            .{ "litElementPolyfillSupport", {} },
+            .{ "reactiveElementVersions", {} },
+
+            .{ "recaptcha", {} },
+            .{ "grecaptcha", {} },
+            .{ "___grecaptcha_cfg", {} },
+            .{ "__recaptcha_api", {} },
+            .{ "__google_recaptcha_client", {} },
+
+            .{ "CLOSURE_FLAGS", {} },
+            .{ "__REACT_DEVTOOLS_GLOBAL_HOOK__", {} },
+            .{ "ApplePaySession", {} },
+        });
+        if (!ignored.has(property)) {
+            const key = std.fmt.bufPrint(&local.ctx.page.buf, "Window:{s}", .{property}) catch return 0;
+            logUnknownProperty(local, key) catch return 0;
+        }
+    }
+
+    // not intercepted
+    return 0;
+}
+
+// Only used for debugging
+pub fn unknownObjectPropertyCallback(comptime JsApi: type) *const fn (?*const v8.Name, ?*const v8.PropertyCallbackInfo) callconv(.c) u8 {
+    if (comptime !IS_DEBUG) {
+        @compileError("unknownObjectPropertyCallback should only be used in debug builds");
+    }
+
+    return struct {
+        fn wrap(c_name: ?*const v8.Name, handle: ?*const v8.PropertyCallbackInfo) callconv(.c) u8 {
+            const v8_isolate = v8.v8__PropertyCallbackInfo__GetIsolate(handle).?;
+
+            var caller: Caller = undefined;
+            caller.init(v8_isolate);
+            defer caller.deinit();
+
+            const local = &caller.local;
+
+            var hs: js.HandleScope = undefined;
+            hs.init(local.isolate);
+            defer hs.deinit();
+
+            const property: []const u8 = js.String.toSlice(.{ .local = local, .handle = @ptrCast(c_name.?) }) catch {
+                return 0;
+            };
+
+            if (std.mem.startsWith(u8, property, "__")) {
+                // some frameworks will extend built-in types using a __ prefix
+                // these should always be safe to ignore.
+                return 0;
+            }
+
+            if (std.mem.startsWith(u8, property, "jQuery")) {
+                return 0;
+            }
+
+            if (JsApi == @import("../webapi/cdata/Text.zig").JsApi or JsApi == @import("../webapi/cdata/Comment.zig").JsApi) {
+                if (std.mem.eql(u8, property, "tagName")) {
+                    // knockout does this, a lot.
+                    return 0;
+                }
+            }
+
+            if (JsApi == @import("../webapi/element/Html.zig").JsApi or JsApi == @import("../webapi/Element.zig").JsApi or JsApi == @import("../webapi/element/html/Custom.zig").JsApi) {
+                // react ?
+                if (std.mem.eql(u8, property, "props")) return 0;
+                if (std.mem.eql(u8, property, "hydrated")) return 0;
+                if (std.mem.eql(u8, property, "isHydrated")) return 0;
+            }
+
+            if (JsApi == @import("../webapi/Console.zig").JsApi) {
+                if (std.mem.eql(u8, property, "firebug")) return 0;
+            }
+
+            const ignored = std.StaticStringMap(void).initComptime(.{});
+            if (!ignored.has(property)) {
+                const key = std.fmt.bufPrint(&local.ctx.page.buf, "{s}:{s}", .{ if (@hasDecl(JsApi.Meta, "name")) JsApi.Meta.name else @typeName(JsApi), property }) catch return 0;
+                logUnknownProperty(local, key) catch return 0;
+            }
+            // not intercepted
+            return 0;
+        }
+    }.wrap;
+}
+
+fn logUnknownProperty(local: *const js.Local, key: []const u8) !void {
+    const ctx = local.ctx;
+    const gop = try ctx.unknown_properties.getOrPut(ctx.arena, key);
+    if (gop.found_existing) {
+        gop.value_ptr.count += 1;
+    } else {
+        gop.key_ptr.* = try ctx.arena.dupe(u8, key);
+        gop.value_ptr.* = .{
+            .count = 1,
+            .first_stack = try ctx.arena.dupe(u8, (try local.stackTrace()) orelse "???"),
+        };
+    }
+}
+
 // Given a Type, returns the length of the prototype chain, including self
 fn prototypeChainLength(comptime T: type) usize {
     var l: usize = 1;
@@ -503,6 +730,7 @@ pub const JsApis = flattenTypes(&.{
     @import("../webapi/css/CSSStyleRule.zig"),
     @import("../webapi/css/CSSStyleSheet.zig"),
     @import("../webapi/css/CSSStyleProperties.zig"),
+    @import("../webapi/css/FontFaceSet.zig"),
     @import("../webapi/css/MediaQueryList.zig"),
     @import("../webapi/css/StyleSheetList.zig"),
     @import("../webapi/Document.zig"),
@@ -529,16 +757,23 @@ pub const JsApis = flattenTypes(&.{
     @import("../webapi/element/Html.zig"),
     @import("../webapi/element/html/IFrame.zig"),
     @import("../webapi/element/html/Anchor.zig"),
+    @import("../webapi/element/html/Area.zig"),
     @import("../webapi/element/html/Audio.zig"),
+    @import("../webapi/element/html/Base.zig"),
     @import("../webapi/element/html/Body.zig"),
     @import("../webapi/element/html/BR.zig"),
     @import("../webapi/element/html/Button.zig"),
     @import("../webapi/element/html/Canvas.zig"),
     @import("../webapi/element/html/Custom.zig"),
     @import("../webapi/element/html/Data.zig"),
+    @import("../webapi/element/html/DataList.zig"),
     @import("../webapi/element/html/Dialog.zig"),
+    @import("../webapi/element/html/Directory.zig"),
+    @import("../webapi/element/html/DList.zig"),
     @import("../webapi/element/html/Div.zig"),
     @import("../webapi/element/html/Embed.zig"),
+    @import("../webapi/element/html/FieldSet.zig"),
+    @import("../webapi/element/html/Font.zig"),
     @import("../webapi/element/html/Form.zig"),
     @import("../webapi/element/html/Generic.zig"),
     @import("../webapi/element/html/Head.zig"),
@@ -547,20 +782,43 @@ pub const JsApis = flattenTypes(&.{
     @import("../webapi/element/html/Html.zig"),
     @import("../webapi/element/html/Image.zig"),
     @import("../webapi/element/html/Input.zig"),
+    @import("../webapi/element/html/Label.zig"),
+    @import("../webapi/element/html/Legend.zig"),
     @import("../webapi/element/html/LI.zig"),
     @import("../webapi/element/html/Link.zig"),
+    @import("../webapi/element/html/Map.zig"),
     @import("../webapi/element/html/Media.zig"),
     @import("../webapi/element/html/Meta.zig"),
+    @import("../webapi/element/html/Meter.zig"),
+    @import("../webapi/element/html/Mod.zig"),
+    @import("../webapi/element/html/Object.zig"),
     @import("../webapi/element/html/OL.zig"),
+    @import("../webapi/element/html/OptGroup.zig"),
     @import("../webapi/element/html/Option.zig"),
+    @import("../webapi/element/html/Output.zig"),
     @import("../webapi/element/html/Paragraph.zig"),
+    @import("../webapi/element/html/Picture.zig"),
+    @import("../webapi/element/html/Param.zig"),
+    @import("../webapi/element/html/Pre.zig"),
+    @import("../webapi/element/html/Progress.zig"),
+    @import("../webapi/element/html/Quote.zig"),
     @import("../webapi/element/html/Script.zig"),
     @import("../webapi/element/html/Select.zig"),
     @import("../webapi/element/html/Slot.zig"),
+    @import("../webapi/element/html/Source.zig"),
+    @import("../webapi/element/html/Span.zig"),
     @import("../webapi/element/html/Style.zig"),
+    @import("../webapi/element/html/Table.zig"),
+    @import("../webapi/element/html/TableCaption.zig"),
+    @import("../webapi/element/html/TableCell.zig"),
+    @import("../webapi/element/html/TableCol.zig"),
+    @import("../webapi/element/html/TableRow.zig"),
+    @import("../webapi/element/html/TableSection.zig"),
     @import("../webapi/element/html/Template.zig"),
     @import("../webapi/element/html/TextArea.zig"),
+    @import("../webapi/element/html/Time.zig"),
     @import("../webapi/element/html/Title.zig"),
+    @import("../webapi/element/html/Track.zig"),
     @import("../webapi/element/html/Video.zig"),
     @import("../webapi/element/html/UL.zig"),
     @import("../webapi/element/html/Unknown.zig"),
@@ -579,7 +837,12 @@ pub const JsApis = flattenTypes(&.{
     @import("../webapi/event/PopStateEvent.zig"),
     @import("../webapi/event/UIEvent.zig"),
     @import("../webapi/event/MouseEvent.zig"),
+    @import("../webapi/event/PointerEvent.zig"),
     @import("../webapi/event/KeyboardEvent.zig"),
+    @import("../webapi/event/FocusEvent.zig"),
+    @import("../webapi/event/WheelEvent.zig"),
+    @import("../webapi/event/TextEvent.zig"),
+    @import("../webapi/event/PromiseRejectionEvent.zig"),
     @import("../webapi/MessageChannel.zig"),
     @import("../webapi/MessagePort.zig"),
     @import("../webapi/media/MediaError.zig"),
@@ -604,6 +867,7 @@ pub const JsApis = flattenTypes(&.{
     @import("../webapi/URL.zig"),
     @import("../webapi/Window.zig"),
     @import("../webapi/Performance.zig"),
+    @import("../webapi/PluginArray.zig"),
     @import("../webapi/MutationObserver.zig"),
     @import("../webapi/IntersectionObserver.zig"),
     @import("../webapi/CustomElementRegistry.zig"),
@@ -611,10 +875,18 @@ pub const JsApis = flattenTypes(&.{
     @import("../webapi/IdleDeadline.zig"),
     @import("../webapi/Blob.zig"),
     @import("../webapi/File.zig"),
+    @import("../webapi/FileReader.zig"),
     @import("../webapi/Screen.zig"),
+    @import("../webapi/VisualViewport.zig"),
     @import("../webapi/PerformanceObserver.zig"),
     @import("../webapi/navigation/Navigation.zig"),
-    @import("../webapi/navigation/NavigationEventTarget.zig"),
     @import("../webapi/navigation/NavigationHistoryEntry.zig"),
     @import("../webapi/navigation/NavigationActivation.zig"),
+    @import("../webapi/canvas/CanvasRenderingContext2D.zig"),
+    @import("../webapi/canvas/WebGLRenderingContext.zig"),
+    @import("../webapi/canvas/OffscreenCanvas.zig"),
+    @import("../webapi/canvas/OffscreenCanvasRenderingContext2D.zig"),
+    @import("../webapi/SubtleCrypto.zig"),
+    @import("../webapi/Selection.zig"),
+    @import("../webapi/ImageData.zig"),
 });

src/browser/js/js.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -17,25 +17,34 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
-pub const v8 = @import("v8");
+pub const v8 = @import("v8").c;
 
-const log = @import("../../log.zig");
+const string = @import("../../string.zig");
 
 pub const Env = @import("Env.zig");
 pub const bridge = @import("bridge.zig");
-pub const ExecutionWorld = @import("ExecutionWorld.zig");
+pub const Caller = @import("Caller.zig");
 pub const Context = @import("Context.zig");
+pub const Local = @import("Local.zig");
 pub const Inspector = @import("Inspector.zig");
 pub const Snapshot = @import("Snapshot.zig");
 pub const Platform = @import("Platform.zig");
+pub const Isolate = @import("Isolate.zig");
+pub const HandleScope = @import("HandleScope.zig");
 
-// TODO: Is "This" really necessary?
-pub const This = @import("This.zig");
 pub const Value = @import("Value.zig");
 pub const Array = @import("Array.zig");
+pub const String = @import("String.zig");
 pub const Object = @import("Object.zig");
 pub const TryCatch = @import("TryCatch.zig");
 pub const Function = @import("Function.zig");
+pub const Promise = @import("Promise.zig");
+pub const Module = @import("Module.zig");
+pub const BigInt = @import("BigInt.zig");
+pub const Number = @import("Number.zig");
+pub const Integer = @import("Integer.zig");
+pub const PromiseResolver = @import("PromiseResolver.zig");
+pub const PromiseRejection = @import("PromiseRejection.zig");
 
 const Allocator = std.mem.Allocator;
 
@@ -68,246 +77,144 @@ pub const ArrayBuffer = struct {
     }
 };
 
-pub const PromiseResolver = struct {
-    context: *Context,
-    resolver: v8.PromiseResolver,
-
-    pub fn promise(self: PromiseResolver) Promise {
-        return self.resolver.getPromise();
-    }
-
-    pub fn resolve(self: PromiseResolver, comptime source: []const u8, value: anytype) void {
-        self._resolve(value) catch |err| {
-            log.err(.bug, "resolve", .{ .source = source, .err = err, .persistent = false });
-        };
-    }
-    fn _resolve(self: PromiseResolver, value: anytype) !void {
-        const context = self.context;
-        const js_value = try context.zigValueToJs(value, .{});
-
-        if (self.resolver.resolve(context.v8_context, js_value) == null) {
-            return error.FailedToResolvePromise;
-        }
-        self.context.runMicrotasks();
-    }
-
-    pub fn reject(self: PromiseResolver, comptime source: []const u8, value: anytype) void {
-        self._reject(value) catch |err| {
-            log.err(.bug, "reject", .{ .source = source, .err = err, .persistent = false });
-        };
-    }
-    fn _reject(self: PromiseResolver, value: anytype) !void {
-        const context = self.context;
-        const js_value = try context.zigValueToJs(value);
-
-        if (self.resolver.reject(context.v8_context, js_value) == null) {
-            return error.FailedToRejectPromise;
-        }
-        self.context.runMicrotasks();
-    }
+pub const ArrayType = enum(u8) {
+    int8,
+    uint8,
+    uint8_clamped,
+    int16,
+    uint16,
+    int32,
+    uint32,
+    float16,
+    float32,
+    float64,
 };
 
-pub const PersistentPromiseResolver = struct {
-    context: *Context,
-    resolver: v8.Persistent(v8.PromiseResolver),
+pub fn ArrayBufferRef(comptime kind: ArrayType) type {
+    return struct {
+        const Self = @This();
 
-    pub fn deinit(self: *PersistentPromiseResolver) void {
-        self.resolver.deinit();
-    }
-
-    pub fn promise(self: PersistentPromiseResolver) Promise {
-        return self.resolver.castToPromiseResolver().getPromise();
-    }
-
-    pub fn resolve(self: PersistentPromiseResolver, comptime source: []const u8, value: anytype) void {
-        self._resolve(value) catch |err| {
-            log.err(.bug, "resolve", .{ .source = source, .err = err, .persistent = true });
+        const BackingInt = switch (kind) {
+            .int8 => i8,
+            .uint8, .uint8_clamped => u8,
+            .int16 => i16,
+            .uint16 => u16,
+            .int32 => i32,
+            .uint32 => u32,
+            .float16 => f16,
+            .float32 => f32,
+            .float64 => f64,
         };
-    }
-    fn _resolve(self: PersistentPromiseResolver, value: anytype) !void {
-        const context = self.context;
-        const js_value = try context.zigValueToJs(value, .{});
-        defer context.runMicrotasks();
 
-        if (self.resolver.castToPromiseResolver().resolve(context.v8_context, js_value) == null) {
-            return error.FailedToResolvePromise;
-        }
-    }
+        local: *const Local,
+        handle: *const v8.Value,
 
-    pub fn reject(self: PersistentPromiseResolver, comptime source: []const u8, value: anytype) void {
-        self._reject(value) catch |err| {
-            log.err(.bug, "reject", .{ .source = source, .err = err, .persistent = true });
+        /// Persisted typed array.
+        pub const Global = struct {
+            handle: v8.Global,
+
+            pub fn deinit(self: *Global) void {
+                v8.v8__Global__Reset(&self.handle);
+            }
+
+            pub fn local(self: *const Global, l: *const Local) Self {
+                return .{ .local = l, .handle = v8.v8__Global__Get(&self.handle, l.isolate.handle).? };
+            }
         };
-    }
 
-    fn _reject(self: PersistentPromiseResolver, value: anytype) !void {
-        const context = self.context;
-        const js_value = try context.zigValueToJs(value, .{});
-        defer context.runMicrotasks();
+        pub fn init(local: *const Local, size: usize) Self {
+            const ctx = local.ctx;
+            const isolate = ctx.isolate;
+            const bits = switch (@typeInfo(BackingInt)) {
+                .int => |n| n.bits,
+                .float => |f| f.bits,
+                else => unreachable,
+            };
 
-        // resolver.reject will return null if the promise isn't pending
-        if (self.resolver.castToPromiseResolver().reject(context.v8_context, js_value) == null) {
-            return error.FailedToRejectPromise;
+            var array_buffer: *const v8.ArrayBuffer = undefined;
+            if (size == 0) {
+                array_buffer = v8.v8__ArrayBuffer__New(isolate.handle, 0).?;
+            } else {
+                const buffer_len = size * bits / 8;
+                const backing_store = v8.v8__ArrayBuffer__NewBackingStore(isolate.handle, buffer_len).?;
+                const backing_store_ptr = v8.v8__BackingStore__TO_SHARED_PTR(backing_store);
+                array_buffer = v8.v8__ArrayBuffer__New2(isolate.handle, &backing_store_ptr).?;
+            }
+
+            const handle: *const v8.Value = switch (comptime kind) {
+                .int8 => @ptrCast(v8.v8__Int8Array__New(array_buffer, 0, size).?),
+                .uint8 => @ptrCast(v8.v8__Uint8Array__New(array_buffer, 0, size).?),
+                .uint8_clamped => @ptrCast(v8.v8__Uint8ClampedArray__New(array_buffer, 0, size).?),
+                .int16 => @ptrCast(v8.v8__Int16Array__New(array_buffer, 0, size).?),
+                .uint16 => @ptrCast(v8.v8__Uint16Array__New(array_buffer, 0, size).?),
+                .int32 => @ptrCast(v8.v8__Int32Array__New(array_buffer, 0, size).?),
+                .uint32 => @ptrCast(v8.v8__Uint32Array__New(array_buffer, 0, size).?),
+                .float16 => @ptrCast(v8.v8__Float16Array__New(array_buffer, 0, size).?),
+                .float32 => @ptrCast(v8.v8__Float32Array__New(array_buffer, 0, size).?),
+                .float64 => @ptrCast(v8.v8__Float64Array__New(array_buffer, 0, size).?),
+            };
+
+            return .{ .local = local, .handle = handle };
         }
-    }
-};
 
-pub const Promise = v8.Promise;
+        pub fn persist(self: *const Self) !Global {
+            var ctx = self.local.ctx;
+            var global: v8.Global = undefined;
+            v8.v8__Global__New(ctx.isolate.handle, self.handle, &global);
+            try ctx.global_values.append(ctx.arena, global);
 
-// When doing jsValueToZig, string ([]const u8) are managed by the
-// call_arena. That means that if the API wants to persist the string
-// (which is relatively common), it needs to dupe it again.
-// If the parameter is an Env.String rather than a []const u8, then
-// the page's arena will be used (rather than the call arena).
-pub const String = struct {
-    string: []const u8,
+            return .{ .handle = global };
+        }
+    };
+}
+
+// If a WebAPI takes a []const u8, then we'll coerce any JS value to that string
+// so null -> "null". But if a WebAPI takes an optional string, ?[]const u8,
+// how should we handle null? If the parameter _isn't_ passed, then it's obvious
+// that it should be null, but what if `null` is passed? It's ambiguous, should
+// that be null, or "null"? It could depend on the api. So, `null` passed to
+// ?[]const u8 will be `null`. If you want it to be "null", use a `.js.NullableString`.
+pub const NullableString = struct {
+    value: []const u8,
 };
 
 pub const Exception = struct {
-    inner: v8.Value,
-    context: *const Context,
-
-    // the caller needs to deinit the string returned
-    pub fn exception(self: Exception, allocator: Allocator) ![]const u8 {
-        return self.context.valueToString(self.inner, .{ .allocator = allocator });
-    }
+    local: *const Local,
+    handle: *const v8.Value,
 };
 
-pub fn UndefinedOr(comptime T: type) type {
-    return union(enum) {
-        undefined: void,
-        value: T,
-    };
-}
-
-// An interface for types that want to have their jsScopeEnd function be
-// called when the call context ends
-const CallScopeEndCallback = struct {
-    ptr: *anyopaque,
-    callScopeEndFn: *const fn (ptr: *anyopaque) void,
-
-    fn init(ptr: anytype) CallScopeEndCallback {
-        const T = @TypeOf(ptr);
-        const ptr_info = @typeInfo(T);
-
-        const gen = struct {
-            pub fn callScopeEnd(pointer: *anyopaque) void {
-                const self: T = @ptrCast(@alignCast(pointer));
-                return ptr_info.pointer.child.jsCallScopeEnd(self);
-            }
-        };
-
-        return .{
-            .ptr = ptr,
-            .callScopeEndFn = gen.callScopeEnd,
-        };
-    }
-
-    pub fn callScopeEnd(self: CallScopeEndCallback) void {
-        self.callScopeEndFn(self.ptr);
-    }
-};
-
-// Callback called on global's property missing.
-// Return true to intercept the execution or false to let the call
-// continue the chain.
-pub const GlobalMissingCallback = struct {
-    ptr: *anyopaque,
-    missingFn: *const fn (ptr: *anyopaque, name: []const u8, ctx: *Context) bool,
-
-    pub fn init(ptr: anytype) GlobalMissingCallback {
-        const T = @TypeOf(ptr);
-        const ptr_info = @typeInfo(T);
-
-        const gen = struct {
-            pub fn missing(pointer: *anyopaque, name: []const u8, ctx: *Context) bool {
-                const self: T = @ptrCast(@alignCast(pointer));
-                return ptr_info.pointer.child.missing(self, name, ctx);
-            }
-        };
-
-        return .{
-            .ptr = ptr,
-            .missingFn = gen.missing,
-        };
-    }
-
-    pub fn missing(self: GlobalMissingCallback, name: []const u8, ctx: *Context) bool {
-        return self.missingFn(self.ptr, name, ctx);
-    }
-};
-
-// Attributes that return a primitive type are setup directly on the
-// FunctionTemplate when the Env is setup. More complex types need a v8.Context
-// and cannot be set directly on the FunctionTemplate.
-// We default to saying types are primitives because that's mostly what
-// we have. If we add a new complex type that isn't explictly handled here,
-// we'll get a compiler error in simpleZigValueToJs, and can then explicitly
-// add the type here.
-pub fn isComplexAttributeType(ti: std.builtin.Type) bool {
-    return switch (ti) {
-        .array => true,
-        else => false,
-    };
-}
-
 // These are simple types that we can convert to JS with only an isolate. This
 // is separated from the Caller's zigValueToJs to make it available when we
 // don't have a caller (i.e., when setting static attributes on types)
-pub fn simpleZigValueToJs(isolate: v8.Isolate, value: anytype, comptime fail: bool, comptime null_as_undefined: bool) if (fail) v8.Value else ?v8.Value {
+pub fn simpleZigValueToJs(isolate: Isolate, value: anytype, comptime fail: bool, comptime null_as_undefined: bool) if (fail) *const v8.Value else ?*const v8.Value {
     switch (@typeInfo(@TypeOf(value))) {
-        .void => return v8.initUndefined(isolate).toValue(),
-        .null => if (comptime null_as_undefined) return v8.initUndefined(isolate).toValue() else return v8.initNull(isolate).toValue(),
-        .bool => return v8.getValue(if (value) v8.initTrue(isolate) else v8.initFalse(isolate)),
-        .int => |n| switch (n.signedness) {
-            .signed => {
-                if (value > 0 and value <= 4_294_967_295) {
-                    return v8.Integer.initU32(isolate, @intCast(value)).toValue();
-                }
-                if (value >= -2_147_483_648 and value <= 2_147_483_647) {
-                    return v8.Integer.initI32(isolate, @intCast(value)).toValue();
-                }
-                if (comptime n.bits <= 64) {
-                    return v8.getValue(v8.BigInt.initI64(isolate, @intCast(value)));
-                }
-                @compileError(@typeName(value) ++ " is not supported");
-            },
-            .unsigned => {
-                if (value <= 4_294_967_295) {
-                    return v8.Integer.initU32(isolate, @intCast(value)).toValue();
-                }
-                if (comptime n.bits <= 64) {
-                    return v8.getValue(v8.BigInt.initU64(isolate, @intCast(value)));
-                }
-                @compileError(@typeName(value) ++ " is not supported");
-            },
+        .void => return isolate.initUndefined(),
+        .null => if (comptime null_as_undefined) return isolate.initUndefined() else return isolate.initNull(),
+        .bool => return if (value) isolate.initTrue() else isolate.initFalse(),
+        .int => |n| {
+            if (comptime n.bits <= 32) {
+                return @ptrCast(isolate.initInteger(value).handle);
+            }
+            if (value >= 0 and value <= 4_294_967_295) {
+                return @ptrCast(isolate.initInteger(@as(u32, @intCast(value))).handle);
+            }
+            return @ptrCast(isolate.initBigInt(value).handle);
         },
         .comptime_int => {
-            if (value >= 0) {
-                if (value <= 4_294_967_295) {
-                    return v8.Integer.initU32(isolate, @intCast(value)).toValue();
-                }
-                return v8.BigInt.initU64(isolate, @intCast(value)).toValue();
+            if (value > -2_147_483_648 and value <= 4_294_967_295) {
+                return @ptrCast(isolate.initInteger(value).handle);
             }
-            if (value >= -2_147_483_648) {
-                return v8.Integer.initI32(isolate, @intCast(value)).toValue();
-            }
-            return v8.BigInt.initI64(isolate, @intCast(value)).toValue();
-        },
-        .comptime_float => return v8.Number.init(isolate, value).toValue(),
-        .float => |f| switch (f.bits) {
-            64 => return v8.Number.init(isolate, value).toValue(),
-            32 => return v8.Number.init(isolate, @floatCast(value)).toValue(),
-            else => @compileError(@typeName(value) ++ " is not supported"),
+            return @ptrCast(isolate.initBigInt(value).handle);
         },
+        .float, .comptime_float => return @ptrCast(isolate.initNumber(value).handle),
         .pointer => |ptr| {
             if (ptr.size == .slice and ptr.child == u8) {
-                return v8.String.initUtf8(isolate, value).toValue();
+                return @ptrCast(isolate.initStringHandle(value));
             }
             if (ptr.size == .one) {
                 const one_info = @typeInfo(ptr.child);
                 if (one_info == .array and one_info.array.child == u8) {
-                    return v8.String.initUtf8(isolate, value).toValue();
+                    return @ptrCast(isolate.initStringHandle(value));
                 }
             }
         },
@@ -317,22 +224,23 @@ pub fn simpleZigValueToJs(isolate: v8.Isolate, value: anytype, comptime fail: bo
                 return simpleZigValueToJs(isolate, v, fail, null_as_undefined);
             }
             if (comptime null_as_undefined) {
-                return v8.initUndefined(isolate).toValue();
+                return isolate.initUndefined();
             }
-            return v8.initNull(isolate).toValue();
+            return isolate.initNull();
         },
         .@"struct" => {
             switch (@TypeOf(value)) {
+                string.String => return isolate.initStringHandle(value.str()),
                 ArrayBuffer => {
                     const values = value.values;
                     const len = values.len;
-                    var array_buffer: v8.ArrayBuffer = undefined;
-                    const backing_store = v8.BackingStore.init(isolate, len);
-                    const data: [*]u8 = @ptrCast(@alignCast(backing_store.getData()));
-                    @memcpy(data[0..len], @as([]const u8, @ptrCast(values))[0..len]);
-                    array_buffer = v8.ArrayBuffer.initWithBackingStore(isolate, &backing_store.toSharedPtr());
-
-                    return .{ .handle = array_buffer.handle };
+                    const backing_store = v8.v8__ArrayBuffer__NewBackingStore(isolate.handle, len);
+                    if (len > 0) {
+                        const data: [*]u8 = @ptrCast(@alignCast(v8.v8__BackingStore__Data(backing_store)));
+                        @memcpy(data[0..len], @as([]const u8, @ptrCast(values))[0..len]);
+                    }
+                    const backing_store_ptr = v8.v8__BackingStore__TO_SHARED_PTR(backing_store);
+                    return @ptrCast(v8.v8__ArrayBuffer__New2(isolate.handle, &backing_store_ptr).?);
                 },
                 // zig fmt: off
                 TypedArray(u8), TypedArray(u16), TypedArray(u32), TypedArray(u64),
@@ -349,37 +257,38 @@ pub fn simpleZigValueToJs(isolate: v8.Isolate, value: anytype, comptime fail: bo
                         else => @compileError("Invalid TypeArray type: " ++ @typeName(value_type)),
                     };
 
-                    var array_buffer: v8.ArrayBuffer = undefined;
+                    var array_buffer: *const v8.ArrayBuffer = undefined;
                     if (len == 0) {
-                        array_buffer = v8.ArrayBuffer.init(isolate, 0);
+                        array_buffer = v8.v8__ArrayBuffer__New(isolate.handle, 0).?;
                     } else {
                         const buffer_len = len * bits / 8;
-                        const backing_store = v8.BackingStore.init(isolate, buffer_len);
-                        const data: [*]u8 = @ptrCast(@alignCast(backing_store.getData()));
+                        const backing_store = v8.v8__ArrayBuffer__NewBackingStore(isolate.handle, buffer_len).?;
+                        const data: [*]u8 = @ptrCast(@alignCast(v8.v8__BackingStore__Data(backing_store)));
                         @memcpy(data[0..buffer_len], @as([]const u8, @ptrCast(values))[0..buffer_len]);
-                        array_buffer = v8.ArrayBuffer.initWithBackingStore(isolate, &backing_store.toSharedPtr());
+                        const backing_store_ptr = v8.v8__BackingStore__TO_SHARED_PTR(backing_store);
+                        array_buffer = v8.v8__ArrayBuffer__New2(isolate.handle, &backing_store_ptr).?;
                     }
 
                     switch (@typeInfo(value_type)) {
                         .int => |n| switch (n.signedness) {
                             .unsigned => switch (n.bits) {
-                                8 => return v8.Uint8Array.init(array_buffer, 0, len).toValue(),
-                                16 => return v8.Uint16Array.init(array_buffer, 0, len).toValue(),
-                                32 => return v8.Uint32Array.init(array_buffer, 0, len).toValue(),
-                                64 => return v8.BigUint64Array.init(array_buffer, 0, len).toValue(),
+                                8 => return @ptrCast(v8.v8__Uint8Array__New(array_buffer, 0, len).?),
+                                16 => return @ptrCast(v8.v8__Uint16Array__New(array_buffer, 0, len).?),
+                                32 => return @ptrCast(v8.v8__Uint32Array__New(array_buffer, 0, len).?),
+                                64 => return @ptrCast(v8.v8__BigUint64Array__New(array_buffer, 0, len).?),
                                 else => {},
                             },
                             .signed => switch (n.bits) {
-                                8 => return v8.Int8Array.init(array_buffer, 0, len).toValue(),
-                                16 => return v8.Int16Array.init(array_buffer, 0, len).toValue(),
-                                32 => return v8.Int32Array.init(array_buffer, 0, len).toValue(),
-                                64 => return v8.BigInt64Array.init(array_buffer, 0, len).toValue(),
+                                8 => return @ptrCast(v8.v8__Int8Array__New(array_buffer, 0, len).?),
+                                16 => return @ptrCast(v8.v8__Int16Array__New(array_buffer, 0, len).?),
+                                32 => return @ptrCast(v8.v8__Int32Array__New(array_buffer, 0, len).?),
+                                64 => return @ptrCast(v8.v8__BigInt64Array__New(array_buffer, 0, len).?),
                                 else => {},
                             },
                         },
                         .float => |f| switch (f.bits) {
-                            32 => return v8.Float32Array.init(array_buffer, 0, len).toValue(),
-                            64 => return v8.Float64Array.init(array_buffer, 0, len).toValue(),
+                            32 => return @ptrCast(v8.v8__Float32Array__New(array_buffer, 0, len).?),
+                            64 => return @ptrCast(v8.v8__Float64Array__New(array_buffer, 0, len).?),
                             else => {},
                         },
                         else => {},
@@ -388,6 +297,7 @@ pub fn simpleZigValueToJs(isolate: v8.Isolate, value: anytype, comptime fail: bo
                     // but this can never be valid.
                     @compileError("Invalid TypeArray type: " ++ @typeName(value_type));
                 },
+                inline String, BigInt, Integer, Number, Value, Object => return value.handle,
                 else => {},
             }
         },
@@ -406,76 +316,6 @@ pub fn simpleZigValueToJs(isolate: v8.Isolate, value: anytype, comptime fail: bo
     return null;
 }
 
-pub fn _createException(isolate: v8.Isolate, msg: []const u8) v8.Value {
-    return v8.Exception.initError(v8.String.initUtf8(isolate, msg));
-}
-
-pub fn classNameForStruct(comptime Struct: type) []const u8 {
-    if (@hasDecl(Struct, "js_name")) {
-        return Struct.js_name;
-    }
-    @setEvalBranchQuota(10_000);
-    const full_name = @typeName(Struct);
-    const last = std.mem.lastIndexOfScalar(u8, full_name, '.') orelse return full_name;
-    return full_name[last + 1 ..];
-}
-
-// When we return a Zig object to V8, we put it on the heap and pass it into
-// v8 as an *anyopaque (i.e. void *). When V8 gives us back the value, say, as a
-// function parameter, we know what type it _should_ be.
-//
-// In a simple/perfect world, we could use this knowledge to cast the *anyopaque
-// to the parameter type:
-//   const arg: @typeInfo(@TypeOf(function)).@"fn".params[0] = @ptrCast(v8_data);
-//
-// But there are 2 reasons we can't do that.
-//
-// == Reason 1 ==
-// The JS code might pass the wrong type:
-//
-//   var cat = new Cat();
-//   cat.setOwner(new Cat());
-//
-// The zig_setOwner method expects the 2nd parameter to be an *Owner, but
-// the JS code passed a *Cat.
-//
-// To solve this issue, we tag every returned value so that we can check what
-// type it is. In the above case, we'd expect an *Owner, but the tag would tell
-// us that we got a *Cat. We use the type index in our Types lookup as the tag.
-//
-// == Reason 2 ==
-// Because of prototype inheritance, even "correct" code can be a challenge. For
-// example, say the above JavaScript is fixed:
-//
-//   var cat = new Cat();
-//   cat.setOwner(new Owner("Leto"));
-//
-// The issue is that setOwner might not expect an *Owner, but rather a
-// *Person, which is the prototype for Owner. Now our Zig code is expecting
-// a *Person, but it was (correctly) given an *Owner.
-// For this reason, we also store the prototype chain.
-pub const TaggedAnyOpaque = struct {
-    prototype_len: u16,
-    prototype_chain: [*]const PrototypeChainEntry,
-
-    // Ptr to the Zig instance. Between the context where it's called (i.e.
-    // we have the comptime parameter info for all functions), and the index field
-    // we can figure out what type this is.
-    value: *anyopaque,
-
-    // When we're asked to describe an object via the Inspector, we _must_ include
-    // the proper subtype (and description) fields in the returned JSON.
-    // V8 will give us a Value and ask us for the subtype. From the v8.Value we
-    // can get a v8.Object, and from the v8.Object, we can get out TaggedAnyOpaque
-    // which is where we store the subtype.
-    subtype: ?bridge.SubType,
-};
-
-pub const PrototypeChainEntry = struct {
-    index: bridge.JsApiLookup.BackingInt,
-    offset: u16, // offset to the _proto field
-};
-
 // These are here, and not in Inspector.zig, because Inspector.zig isn't always
 // included (e.g. in the wpt build).
 
@@ -483,10 +323,10 @@ pub const PrototypeChainEntry = struct {
 // it'll call this function to gets its [optional] subtype - which, from V8's
 // point of view, is an arbitrary string.
 pub export fn v8_inspector__Client__IMPL__valueSubtype(
-    _: *v8.c.InspectorClientImpl,
-    c_value: *const v8.C_Value,
+    _: *v8.InspectorClientImpl,
+    c_value: *const v8.Value,
 ) callconv(.c) [*c]const u8 {
-    const external_entry = Inspector.getTaggedAnyOpaque(.{ .handle = c_value }) orelse return null;
+    const external_entry = Inspector.getTaggedOpaque(c_value) orelse return null;
     return if (external_entry.subtype) |st| @tagName(st) else null;
 }
 
@@ -495,19 +335,19 @@ pub export fn v8_inspector__Client__IMPL__valueSubtype(
 // present, even if it's empty. So if we have a subType for the value, we'll
 // put an empty description.
 pub export fn v8_inspector__Client__IMPL__descriptionForValueSubtype(
-    _: *v8.c.InspectorClientImpl,
-    v8_context: *const v8.C_Context,
-    c_value: *const v8.C_Value,
+    _: *v8.InspectorClientImpl,
+    v8_context: *const v8.Context,
+    c_value: *const v8.Value,
 ) callconv(.c) [*c]const u8 {
     _ = v8_context;
 
     // We _must_ include a non-null description in order for the subtype value
     // to be included. Besides that, I don't know if the value has any meaning
-    const external_entry = Inspector.getTaggedAnyOpaque(.{ .handle = c_value }) orelse return null;
+    const external_entry = Inspector.getTaggedOpaque(c_value) orelse return null;
     return if (external_entry.subtype == null) null else "";
 }
 
 test "TaggedAnyOpaque" {
     // If we grow this, fine, but it should be a conscious decision
-    try std.testing.expectEqual(24, @sizeOf(TaggedAnyOpaque));
+    try std.testing.expectEqual(24, @sizeOf(@import("TaggedOpaque.zig")));
 }

src/browser/markdown.zig

@@ -0,0 +1,607 @@
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+
+const Page = @import("Page.zig");
+const CData = @import("webapi/CData.zig");
+const Element = @import("webapi/Element.zig");
+const Node = @import("webapi/Node.zig");
+
+pub const Opts = struct {
+    // Options for future customization (e.g., dialect)
+};
+
+const State = struct {
+    const ListType = enum { ordered, unordered };
+    const ListState = struct {
+        type: ListType,
+        index: usize,
+    };
+
+    list_depth: usize = 0,
+    list_stack: [32]ListState = undefined,
+    pre_node: ?*Node = null,
+    in_code: bool = false,
+    in_table: bool = false,
+    table_row_index: usize = 0,
+    table_col_count: usize = 0,
+    last_char_was_newline: bool = true,
+};
+
+fn isBlock(tag: Element.Tag) bool {
+    return switch (tag) {
+        .p, .div, .section, .article, .main, .header, .footer, .nav, .aside, .h1, .h2, .h3, .h4, .h5, .h6, .ul, .ol, .blockquote, .pre, .table, .hr => true,
+        else => false,
+    };
+}
+
+fn shouldAddSpacing(tag: Element.Tag) bool {
+    return switch (tag) {
+        .p, .h1, .h2, .h3, .h4, .h5, .h6, .blockquote, .pre, .table => true,
+        else => false,
+    };
+}
+
+fn isLayoutBlock(tag: Element.Tag) bool {
+    return switch (tag) {
+        .main, .section, .article, .nav, .aside, .header, .footer, .div, .ul, .ol => true,
+        else => false,
+    };
+}
+
+fn isStandaloneAnchor(el: *Element) bool {
+    const node = el.asNode();
+    const parent = node.parentNode() orelse return false;
+    const parent_el = parent.is(Element) orelse return false;
+
+    if (!isLayoutBlock(parent_el.getTag())) return false;
+
+    var prev = node.previousSibling();
+    while (prev) |p| : (prev = p.previousSibling()) {
+        if (isSignificantText(p)) return false;
+        if (p.is(Element)) |pe| {
+            if (isVisibleElement(pe)) break;
+        }
+    }
+
+    var next = node.nextSibling();
+    while (next) |n| : (next = n.nextSibling()) {
+        if (isSignificantText(n)) return false;
+        if (n.is(Element)) |ne| {
+            if (isVisibleElement(ne)) break;
+        }
+    }
+
+    return true;
+}
+
+fn isSignificantText(node: *Node) bool {
+    const text = node.is(Node.CData.Text) orelse return false;
+    return !isAllWhitespace(text.getWholeText());
+}
+
+fn isVisibleElement(el: *Element) bool {
+    return switch (el.getTag()) {
+        .script, .style, .noscript, .template, .head, .meta, .link, .title, .svg => false,
+        else => true,
+    };
+}
+
+fn isAllWhitespace(text: []const u8) bool {
+    return for (text) |c| {
+        if (!std.ascii.isWhitespace(c)) break false;
+    } else true;
+}
+
+fn hasBlockDescendant(node: *Node) bool {
+    var it = node.childrenIterator();
+    return while (it.next()) |child| {
+        if (child.is(Element)) |el| {
+            if (isBlock(el.getTag())) break true;
+            if (hasBlockDescendant(child)) break true;
+        }
+    } else false;
+}
+
+fn ensureNewline(state: *State, writer: *std.Io.Writer) !void {
+    if (!state.last_char_was_newline) {
+        try writer.writeByte('\n');
+        state.last_char_was_newline = true;
+    }
+}
+
+pub fn dump(node: *Node, opts: Opts, writer: *std.Io.Writer, page: *Page) !void {
+    _ = opts;
+    var state = State{};
+    try render(node, &state, writer, page);
+    if (!state.last_char_was_newline) {
+        try writer.writeByte('\n');
+    }
+}
+
+fn render(node: *Node, state: *State, writer: *std.Io.Writer, page: *Page) error{WriteFailed}!void {
+    switch (node._type) {
+        .document, .document_fragment => {
+            try renderChildren(node, state, writer, page);
+        },
+        .element => |el| {
+            try renderElement(el, state, writer, page);
+        },
+        .cdata => |cd| {
+            if (node.is(Node.CData.Text)) |_| {
+                var text = cd.getData().str();
+                if (state.pre_node) |pre| {
+                    if (node.parentNode() == pre and node.nextSibling() == null) {
+                        text = std.mem.trimRight(u8, text, " \t\r\n");
+                    }
+                }
+                try renderText(text, state, writer);
+            }
+        },
+        else => {},
+    }
+}
+
+fn renderChildren(parent: *Node, state: *State, writer: *std.Io.Writer, page: *Page) !void {
+    var it = parent.childrenIterator();
+    while (it.next()) |child| {
+        try render(child, state, writer, page);
+    }
+}
+
+fn renderElement(el: *Element, state: *State, writer: *std.Io.Writer, page: *Page) !void {
+    const tag = el.getTag();
+
+    if (!isVisibleElement(el)) return;
+
+    // --- Opening Tag Logic ---
+
+    // Ensure block elements start on a new line (double newline for paragraphs etc)
+    if (isBlock(tag) and !state.in_table) {
+        try ensureNewline(state, writer);
+        if (shouldAddSpacing(tag)) {
+            try writer.writeByte('\n');
+        }
+    } else if (tag == .li or tag == .tr) {
+        try ensureNewline(state, writer);
+    }
+
+    // Prefixes
+    switch (tag) {
+        .h1 => try writer.writeAll("# "),
+        .h2 => try writer.writeAll("## "),
+        .h3 => try writer.writeAll("### "),
+        .h4 => try writer.writeAll("#### "),
+        .h5 => try writer.writeAll("##### "),
+        .h6 => try writer.writeAll("###### "),
+        .ul => {
+            if (state.list_depth < state.list_stack.len) {
+                state.list_stack[state.list_depth] = .{ .type = .unordered, .index = 0 };
+                state.list_depth += 1;
+            }
+        },
+        .ol => {
+            if (state.list_depth < state.list_stack.len) {
+                state.list_stack[state.list_depth] = .{ .type = .ordered, .index = 1 };
+                state.list_depth += 1;
+            }
+        },
+        .li => {
+            const indent = if (state.list_depth > 0) state.list_depth - 1 else 0;
+            for (0..indent) |_| try writer.writeAll("  ");
+
+            if (state.list_depth > 0 and state.list_stack[state.list_depth - 1].type == .ordered) {
+                const current_list = &state.list_stack[state.list_depth - 1];
+                try writer.print("{d}. ", .{current_list.index});
+                current_list.index += 1;
+            } else {
+                try writer.writeAll("- ");
+            }
+            state.last_char_was_newline = false;
+        },
+        .table => {
+            state.in_table = true;
+            state.table_row_index = 0;
+            state.table_col_count = 0;
+        },
+        .tr => {
+            state.table_col_count = 0;
+            try writer.writeByte('|');
+        },
+        .td, .th => {
+            // Note: leading pipe handled by previous cell closing or tr opening
+            state.last_char_was_newline = false;
+            try writer.writeByte(' ');
+        },
+        .blockquote => {
+            try writer.writeAll("> ");
+            state.last_char_was_newline = false;
+        },
+        .pre => {
+            try writer.writeAll("```\n");
+            state.pre_node = el.asNode();
+            state.last_char_was_newline = true;
+        },
+        .code => {
+            if (state.pre_node == null) {
+                try writer.writeByte('`');
+                state.in_code = true;
+                state.last_char_was_newline = false;
+            }
+        },
+        .b, .strong => {
+            try writer.writeAll("**");
+            state.last_char_was_newline = false;
+        },
+        .i, .em => {
+            try writer.writeAll("*");
+            state.last_char_was_newline = false;
+        },
+        .s, .del => {
+            try writer.writeAll("~~");
+            state.last_char_was_newline = false;
+        },
+        .hr => {
+            try writer.writeAll("---\n");
+            state.last_char_was_newline = true;
+            return;
+        },
+        .br => {
+            if (state.in_table) {
+                try writer.writeByte(' ');
+            } else {
+                try writer.writeByte('\n');
+                state.last_char_was_newline = true;
+            }
+            return;
+        },
+        .img => {
+            try writer.writeAll("![");
+            if (el.getAttributeSafe(comptime .wrap("alt"))) |alt| {
+                try escapeMarkdown(writer, alt);
+            }
+            try writer.writeAll("](");
+            if (el.getAttributeSafe(comptime .wrap("src"))) |src| {
+                try writer.writeAll(src);
+            }
+            try writer.writeAll(")");
+            state.last_char_was_newline = false;
+            return;
+        },
+        .anchor => {
+            const has_block = hasBlockDescendant(el.asNode());
+            if (has_block) {
+                try renderChildren(el.asNode(), state, writer, page);
+                if (el.getAttributeSafe(comptime .wrap("href"))) |href| {
+                    if (!state.last_char_was_newline) try writer.writeByte('\n');
+                    try writer.writeAll("([Link](");
+                    try writer.writeAll(href);
+                    try writer.writeAll("))\n");
+                    state.last_char_was_newline = true;
+                }
+                return;
+            }
+
+            if (isStandaloneAnchor(el)) {
+                if (!state.last_char_was_newline) try writer.writeByte('\n');
+                try writer.writeByte('[');
+                try renderChildren(el.asNode(), state, writer, page);
+                try writer.writeAll("](");
+                if (el.getAttributeSafe(comptime .wrap("href"))) |href| {
+                    try writer.writeAll(href);
+                }
+                try writer.writeAll(")\n");
+                state.last_char_was_newline = true;
+                return;
+            }
+
+            try writer.writeByte('[');
+            try renderChildren(el.asNode(), state, writer, page);
+            try writer.writeAll("](");
+            if (el.getAttributeSafe(comptime .wrap("href"))) |href| {
+                try writer.writeAll(href);
+            }
+            try writer.writeByte(')');
+            state.last_char_was_newline = false;
+            return;
+        },
+        .input => {
+            const type_attr = el.getAttributeSafe(comptime .wrap("type")) orelse return;
+            if (std.ascii.eqlIgnoreCase(type_attr, "checkbox")) {
+                const checked = el.getAttributeSafe(comptime .wrap("checked")) != null;
+                try writer.writeAll(if (checked) "[x] " else "[ ] ");
+                state.last_char_was_newline = false;
+            }
+            return;
+        },
+        else => {},
+    }
+
+    // --- Render Children ---
+    try renderChildren(el.asNode(), state, writer, page);
+
+    // --- Closing Tag Logic ---
+
+    // Suffixes
+    switch (tag) {
+        .pre => {
+            if (!state.last_char_was_newline) {
+                try writer.writeByte('\n');
+            }
+            try writer.writeAll("```\n");
+            state.pre_node = null;
+            state.last_char_was_newline = true;
+        },
+        .code => {
+            if (state.pre_node == null) {
+                try writer.writeByte('`');
+                state.in_code = false;
+                state.last_char_was_newline = false;
+            }
+        },
+        .b, .strong => {
+            try writer.writeAll("**");
+            state.last_char_was_newline = false;
+        },
+        .i, .em => {
+            try writer.writeAll("*");
+            state.last_char_was_newline = false;
+        },
+        .s, .del => {
+            try writer.writeAll("~~");
+            state.last_char_was_newline = false;
+        },
+        .blockquote => {},
+        .ul, .ol => {
+            if (state.list_depth > 0) state.list_depth -= 1;
+        },
+        .table => {
+            state.in_table = false;
+        },
+        .tr => {
+            try writer.writeByte('\n');
+            if (state.table_row_index == 0) {
+                try writer.writeByte('|');
+                for (0..state.table_col_count) |_| {
+                    try writer.writeAll("---|");
+                }
+                try writer.writeByte('\n');
+            }
+            state.table_row_index += 1;
+            state.last_char_was_newline = true;
+        },
+        .td, .th => {
+            try writer.writeAll(" |");
+            state.table_col_count += 1;
+            state.last_char_was_newline = false;
+        },
+        else => {},
+    }
+
+    // Post-block newlines
+    if (isBlock(tag) and !state.in_table) {
+        try ensureNewline(state, writer);
+    }
+}
+
+fn renderText(text: []const u8, state: *State, writer: *std.Io.Writer) !void {
+    if (text.len == 0) return;
+
+    if (state.pre_node) |_| {
+        try writer.writeAll(text);
+        state.last_char_was_newline = text[text.len - 1] == '\n';
+        return;
+    }
+
+    // Check for pure whitespace
+    if (isAllWhitespace(text)) {
+        if (!state.last_char_was_newline) {
+            try writer.writeByte(' ');
+        }
+        return;
+    }
+
+    // Collapse whitespace
+    var it = std.mem.tokenizeAny(u8, text, " \t\n\r");
+    var first = true;
+    while (it.next()) |word| {
+        if (!first or (!state.last_char_was_newline and std.ascii.isWhitespace(text[0]))) {
+            try writer.writeByte(' ');
+        }
+
+        try escapeMarkdown(writer, word);
+        state.last_char_was_newline = false;
+        first = false;
+    }
+
+    // Handle trailing whitespace from the original text
+    if (!first and !state.last_char_was_newline and std.ascii.isWhitespace(text[text.len - 1])) {
+        try writer.writeByte(' ');
+    }
+}
+
+fn escapeMarkdown(writer: *std.Io.Writer, text: []const u8) !void {
+    for (text) |c| {
+        switch (c) {
+            '\\', '`', '*', '_', '{', '}', '[', ']', '(', ')', '#', '+', '-', '!', '|' => {
+                try writer.writeByte('\\');
+                try writer.writeByte(c);
+            },
+            else => try writer.writeByte(c),
+        }
+    }
+}
+
+fn testMarkdownHTML(html: []const u8, expected: []const u8) !void {
+    const testing = @import("../testing.zig");
+    const page = try testing.test_session.createPage();
+    defer testing.test_session.removePage();
+    const doc = page.window._document;
+
+    const div = try doc.createElement("div", null, page);
+    try page.parseHtmlAsChildren(div.asNode(), html);
+
+    var aw: std.Io.Writer.Allocating = .init(testing.allocator);
+    defer aw.deinit();
+    try dump(div.asNode(), .{}, &aw.writer, page);
+
+    try testing.expectString(expected, aw.written());
+}
+
+test "browser.markdown: basic" {
+    try testMarkdownHTML("Hello world", "Hello world\n");
+}
+
+test "browser.markdown: whitespace" {
+    try testMarkdownHTML("<span>A</span> <span>B</span>", "A B\n");
+}
+
+test "browser.markdown: escaping" {
+    try testMarkdownHTML("<p># Not a header</p>", "\n\\# Not a header\n");
+}
+
+test "browser.markdown: strikethrough" {
+    try testMarkdownHTML("<s>deleted</s>", "~~deleted~~\n");
+}
+
+test "browser.markdown: task list" {
+    try testMarkdownHTML(
+        \\<input type="checkbox" checked><input type="checkbox">
+    , "[x] [ ] \n");
+}
+
+test "browser.markdown: ordered list" {
+    try testMarkdownHTML(
+        \\<ol><li>First</li><li>Second</li></ol>
+    , "1. First\n2. Second\n");
+}
+
+test "browser.markdown: table" {
+    try testMarkdownHTML(
+        \\<table><thead><tr><th>Head 1</th><th>Head 2</th></tr></thead>
+        \\<tbody><tr><td>Cell 1</td><td>Cell 2</td></tr></tbody></table>
+    ,
+        \\
+        \\| Head 1 | Head 2 |
+        \\|---|---|
+        \\| Cell 1 | Cell 2 |
+        \\
+    );
+}
+
+test "browser.markdown: nested lists" {
+    try testMarkdownHTML(
+        \\<ul><li>Parent<ul><li>Child</li></ul></li></ul>
+    ,
+        \\- Parent
+        \\  - Child
+        \\
+    );
+}
+
+test "browser.markdown: blockquote" {
+    try testMarkdownHTML("<blockquote>Hello world</blockquote>", "\n> Hello world\n");
+}
+
+test "browser.markdown: links" {
+    try testMarkdownHTML("<a href=\"https://lightpanda.io\">Lightpanda</a>", "[Lightpanda](https://lightpanda.io)\n");
+}
+
+test "browser.markdown: images" {
+    try testMarkdownHTML("<img src=\"logo.png\" alt=\"Logo\">", "![Logo](logo.png)\n");
+}
+
+test "browser.markdown: headings" {
+    try testMarkdownHTML("<h1>Title</h1><h2>Subtitle</h2>",
+        \\
+        \\# Title
+        \\
+        \\## Subtitle
+        \\
+    );
+}
+
+test "browser.markdown: code" {
+    try testMarkdownHTML(
+        \\<p>Use git push</p>
+        \\<pre><code>line 1
+        \\line 2</code></pre>
+    ,
+        \\
+        \\Use git push
+        \\
+        \\```
+        \\line 1
+        \\line 2
+        \\```
+        \\
+    );
+}
+
+test "browser.markdown: block link" {
+    try testMarkdownHTML(
+        \\<a href="https://example.com">
+        \\  <h3>Title</h3>
+        \\  <p>Description</p>
+        \\</a>
+    ,
+        \\
+        \\### Title
+        \\
+        \\Description
+        \\([Link](https://example.com))
+        \\
+    );
+}
+
+test "browser.markdown: inline link" {
+    try testMarkdownHTML(
+        \\<p>Visit <a href="https://example.com">Example</a>.</p>
+    ,
+        \\
+        \\Visit [Example](https://example.com).
+        \\
+    );
+}
+
+test "browser.markdown: standalone anchors" {
+    // Inside main, with whitespace between anchors -> treated as blocks
+    try testMarkdownHTML(
+        \\<main>
+        \\  <a href="1">Link 1</a>
+        \\  <a href="2">Link 2</a>
+        \\</main>
+    ,
+        \\[Link 1](1)
+        \\[Link 2](2)
+        \\
+    );
+}
+
+test "browser.markdown: mixed anchors in main" {
+    // Anchors surrounded by text should remain inline
+    try testMarkdownHTML(
+        \\<main>
+        \\  Welcome <a href="1">Link 1</a>.
+        \\</main>
+    ,
+        \\Welcome [Link 1](1). 
+        \\
+    );
+}

src/browser/parser/Parser.zig

@@ -17,12 +17,14 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 const std = @import("std");
+const lp = @import("lightpanda");
 const h5e = @import("html5ever.zig");
 
 const Page = @import("../Page.zig");
 const Node = @import("../webapi/Node.zig");
 const Element = @import("../webapi/Element.zig");
 const Allocator = std.mem.Allocator;
+const IS_DEBUG = @import("builtin").mode == .Debug;
 
 pub const ParsedNode = struct {
     node: *Node,
@@ -104,7 +106,7 @@ pub fn parseXML(self: *Parser, xml: []const u8) void {
         xml.len,
         &self.container,
         self,
-        createElementCallback,
+        createXMLElementCallback,
         getDataCallback,
         appendCallback,
         parseErrorCallback,
@@ -162,7 +164,7 @@ pub const Streaming = struct {
     }
 
     pub fn start(self: *Streaming) !void {
-        std.debug.assert(self.handle == null);
+        lp.assert(self.handle == null, "Parser.start non-null handle", .{});
 
         self.handle = h5e.html5ever_streaming_parser_create(
             &self.parser.container,
@@ -225,17 +227,26 @@ fn _popCallback(self: *Parser, node: *Node) !void {
 }
 
 fn createElementCallback(ctx: *anyopaque, data: *anyopaque, qname: h5e.QualName, attributes: h5e.AttributeIterator) callconv(.c) ?*anyopaque {
+    return _createElementCallbackWithDefaultnamespace(ctx, data, qname, attributes, .unknown);
+}
+
+fn createXMLElementCallback(ctx: *anyopaque, data: *anyopaque, qname: h5e.QualName, attributes: h5e.AttributeIterator) callconv(.c) ?*anyopaque {
+    return _createElementCallbackWithDefaultnamespace(ctx, data, qname, attributes, .xml);
+}
+
+fn _createElementCallbackWithDefaultnamespace(ctx: *anyopaque, data: *anyopaque, qname: h5e.QualName, attributes: h5e.AttributeIterator, default_namespace: Element.Namespace) ?*anyopaque {
     const self: *Parser = @ptrCast(@alignCast(ctx));
-    return self._createElementCallback(data, qname, attributes) catch |err| {
+    return self._createElementCallback(data, qname, attributes, default_namespace) catch |err| {
         self.err = .{ .err = err, .source = .create_element };
         return null;
     };
 }
-fn _createElementCallback(self: *Parser, data: *anyopaque, qname: h5e.QualName, attributes: h5e.AttributeIterator) !*anyopaque {
+fn _createElementCallback(self: *Parser, data: *anyopaque, qname: h5e.QualName, attributes: h5e.AttributeIterator, default_namespace: Element.Namespace) !*anyopaque {
     const page = self.page;
     const name = qname.local.slice();
-    const namespace = qname.ns.slice();
-    const node = try page.createElement(namespace, name, attributes);
+    const namespace_string = qname.ns.slice();
+    const namespace = if (namespace_string.len == 0) default_namespace else Element.Namespace.parse(namespace_string);
+    const node = try page.createElementNS(namespace, name, attributes);
 
     const pn = try self.arena.create(ParsedNode);
     pn.* = .{
@@ -348,7 +359,7 @@ fn getDataCallback(ctx: *anyopaque) callconv(.c) *anyopaque {
     const pn: *ParsedNode = @ptrCast(@alignCast(ctx));
     // For non-elements, data is null. But, we expect this to only ever
     // be called for elements.
-    std.debug.assert(pn.data != null);
+    lp.assert(pn.data != null, "Parser.getDataCallback null data", .{});
     return pn.data.?;
 }
 
@@ -363,6 +374,17 @@ fn _appendCallback(self: *Parser, parent: *Node, node_or_text: h5e.NodeOrText) !
     switch (node_or_text.toUnion()) {
         .node => |cpn| {
             const child = getNode(cpn);
+            if (child._parent) |previous_parent| {
+                // html5ever says this can't happen, but we might be screwing up
+                // the node on our side. We shouldn't be, but we're seeing this
+                // in the wild, and I'm not sure why. In debug, let's crash so
+                // we can try to figure it out. In release, let's disconnect
+                // the child first.
+                if (comptime IS_DEBUG) {
+                    unreachable;
+                }
+                self.page.removeNode(previous_parent, child, .{ .will_be_reconnected = parent.isConnected() });
+            }
             try self.page.appendNew(parent, .{ .node = child });
         },
         .text => |txt| try self.page.appendNew(parent, .{ .text = txt }),
@@ -399,7 +421,16 @@ fn appendBeforeSiblingCallback(ctx: *anyopaque, sibling_ref: *anyopaque, node_or
 fn _appendBeforeSiblingCallback(self: *Parser, sibling: *Node, node_or_text: h5e.NodeOrText) !void {
     const parent = sibling.parentNode() orelse return error.NoParent;
     const node: *Node = switch (node_or_text.toUnion()) {
-        .node => |cpn| getNode(cpn),
+        .node => |cpn| blk: {
+            const child = getNode(cpn);
+            if (child._parent) |previous_parent| {
+                // A custom element constructor may have inserted the node into the
+                // DOM before the parser officially places it (e.g. via foster
+                // parenting). Detach it first so insertNodeRelative's assertion holds.
+                self.page.removeNode(previous_parent, child, .{ .will_be_reconnected = parent.isConnected() });
+            }
+            break :blk child;
+        },
         .text => |txt| try self.page.createTextNode(txt),
     };
     try self.page.insertNodeRelative(parent, node, .{ .before = sibling }, .{});

src/browser/reflect.zig

@@ -1,4 +1,4 @@
-// Copyright (C) 2023-2025  Lightpanda (Selecy SAS)
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
 //
 // Francis Bouvier <francis@lightpanda.io>
 // Pierre Tachoire <pierre@lightpanda.io>
@@ -16,8 +16,6 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
-const std = @import("std");
-
 // Gets the Parent of child.
 // HtmlElement.of(script) -> *HTMLElement
 pub fn Struct(comptime T: type) type {
@@ -28,37 +26,3 @@ pub fn Struct(comptime T: type) type {
         else => unreachable,
     };
 }
-
-// Creates an enum of N enums. Doesn't perserve their underlying integer
-pub fn mergeEnums(comptime enums: []const type) type {
-    const field_count = blk: {
-        var count: usize = 0;
-        inline for (enums) |e| {
-            count += @typeInfo(e).@"enum".fields.len;
-        }
-        break :blk count;
-    };
-
-    var i: usize = 0;
-    var fields: [field_count]std.builtin.Type.EnumField = undefined;
-    for (enums) |e| {
-        for (@typeInfo(e).@"enum".fields) |f| {
-            fields[i] = .{
-                .name = f.name,
-                .value = i,
-            };
-            i += 1;
-        }
-    }
-
-    return @Type(.{ .@"enum" = .{
-        .decls = &.{},
-        .tag_type = blk: {
-            if (field_count <= std.math.maxInt(u8)) break :blk u8;
-            if (field_count <= std.math.maxInt(u16)) break :blk u16;
-            unreachable;
-        },
-        .fields = &fields,
-        .is_exhaustive = true,
-    } });
-}

src/browser/tests/animation/animation.html

@@ -3,13 +3,67 @@
 
 <script id=animation>
   let a1 = document.createElement('div').animate(null, null);
-  testing.expectEqual('finished', a1.playState);
+  testing.expectEqual('idle', a1.playState);
 
   let cb = [];
-  a1.ready.then(() => { cb.push('ready') });
   a1.finished.then((x) => {
-    cb.push('finished');
+    cb.push(a1.playState);
     cb.push(x == a1);
   });
-  testing.eventually(() => testing.expectEqual(['finished', true], cb));
+  a1.ready.then(() => {
+    cb.push(a1.playState);
+    a1.play();
+    cb.push(a1.playState);
+  });
+  testing.eventually(() => testing.expectEqual(['idle', 'running', 'finished', true], cb));
+</script>
+
+<script id=startTime>
+  let a2 = document.createElement('div').animate(null, null);
+  // startTime defaults to null
+  testing.expectEqual(null, a2.startTime);
+  // startTime is settable
+  a2.startTime = 42.5;
+  testing.expectEqual(42.5, a2.startTime);
+  // startTime can be reset to null
+  a2.startTime = null;
+  testing.expectEqual(null, a2.startTime);
+</script>
+
+<script id=onfinish>
+  let a3 = document.createElement('div').animate(null, null);
+  // onfinish defaults to null
+  testing.expectEqual(null, a3.onfinish);
+
+  let calls = [];
+  // onfinish callback should be scheduled and called asynchronously
+  a3.onfinish = function() { calls.push('finish'); };
+  a3.play();
+  testing.eventually(() => testing.expectEqual(['finish'], calls));
+</script>
+
+<script id=pause>
+  let a4 = document.createElement('div').animate(null, null);
+  let cb4 = [];
+  a4.finished.then((x) => { cb4.push(a4.playState) });
+  a4.ready.then(() => {
+    a4.play();
+    cb4.push(a4.playState)
+    a4.pause();
+    cb4.push(a4.playState)
+  });
+  testing.eventually(() => testing.expectEqual(['running', 'paused'], cb4));
+</script>
+
+<script id=finish>
+  let a5 = document.createElement('div').animate(null, null);
+  testing.expectEqual('idle', a5.playState);
+
+  let cb5 = [];
+  a5.finished.then((x) => { cb5.push(a5.playState) });
+  a5.ready.then(() => {
+    cb5.push(a5.playState);
+    a5.play();
+  });
+  testing.eventually(() => testing.expectEqual(['idle', 'finished'], cb5));
 </script>

src/browser/tests/canvas/canvas_rendering_context_2d.html

@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<script id=CanvasRenderingContext2D>
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("2d");
+  testing.expectEqual(true, ctx instanceof CanvasRenderingContext2D);
+  // We can't really test this but let's try to call it at least.
+  ctx.fillRect(0, 0, 0, 0);
+}
+</script>
+
+<script id=CanvasRenderingContext2D#fillStyle>
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("2d");
+
+  // Black by default.
+  testing.expectEqual(ctx.fillStyle, "#000000");
+  ctx.fillStyle = "red";
+  testing.expectEqual(ctx.fillStyle, "#ff0000");
+  ctx.fillStyle = "rebeccapurple";
+  testing.expectEqual(ctx.fillStyle, "#663399");
+  // No changes made if color is invalid.
+  ctx.fillStyle = "invalid-color";
+  testing.expectEqual(ctx.fillStyle, "#663399");
+  ctx.fillStyle = "#fc0";
+  testing.expectEqual(ctx.fillStyle, "#ffcc00");
+  ctx.fillStyle = "#ff0000";
+  testing.expectEqual(ctx.fillStyle, "#ff0000");
+  ctx.fillStyle = "#fF00000F";
+  testing.expectEqual(ctx.fillStyle, "rgba(255, 0, 0, 0.06)");
+}
+</script>
+
+<script id="CanvasRenderingContext2D#createImageData(width, height)">
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("2d");
+
+  const imageData = ctx.createImageData(100, 200);
+  testing.expectEqual(true, imageData instanceof ImageData);
+  testing.expectEqual(imageData.width, 100);
+  testing.expectEqual(imageData.height, 200);
+  testing.expectEqual(imageData.data.length, 100 * 200 * 4);
+  testing.expectEqual(true, imageData.data instanceof Uint8ClampedArray);
+
+  // All pixels should be initialized to 0.
+  testing.expectEqual(imageData.data[0], 0);
+  testing.expectEqual(imageData.data[1], 0);
+  testing.expectEqual(imageData.data[2], 0);
+  testing.expectEqual(imageData.data[3], 0);
+}
+</script>
+
+<script id="CanvasRenderingContext2D#createImageData(imageData)">
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("2d");
+
+  const source = ctx.createImageData(50, 75);
+  const imageData = ctx.createImageData(source);
+  testing.expectEqual(true, imageData instanceof ImageData);
+  testing.expectEqual(imageData.width, 50);
+  testing.expectEqual(imageData.height, 75);
+  testing.expectEqual(imageData.data.length, 50 * 75 * 4);
+}
+</script>
+
+<script id="CanvasRenderingContext2D#putImageData">
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("2d");
+
+  const imageData = ctx.createImageData(10, 10);
+  testing.expectEqual(true, imageData instanceof ImageData);
+  // Modify some pixel data.
+  imageData.data[0] = 255;
+  imageData.data[1] = 0;
+  imageData.data[2] = 0;
+  imageData.data[3] = 255;
+
+  // putImageData should not throw.
+  ctx.putImageData(imageData, 0, 0);
+  ctx.putImageData(imageData, 10, 20);
+  // With dirty rect parameters.
+  ctx.putImageData(imageData, 0, 0, 0, 0, 5, 5);
+}
+</script>
+
+
+<script id="getter">
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("2d");
+  testing.expectEqual('10px sans-serif', ctx.font);
+  ctx.font = 'bold 48px serif'
+  testing.expectEqual('bold 48px serif', ctx.font);
+
+}
+</script>

src/browser/tests/canvas/offscreen_canvas.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<script id=OffscreenCanvas>
+{
+  const canvas = new OffscreenCanvas(256, 256);
+  testing.expectEqual(true, canvas instanceof OffscreenCanvas);
+  testing.expectEqual(canvas.width, 256);
+  testing.expectEqual(canvas.height, 256);
+}
+</script>
+
+<script id=OffscreenCanvas#width>
+{
+  const canvas = new OffscreenCanvas(100, 200);
+  testing.expectEqual(canvas.width, 100);
+  canvas.width = 300;
+  testing.expectEqual(canvas.width, 300);
+}
+</script>
+
+<script id=OffscreenCanvas#height>
+{
+  const canvas = new OffscreenCanvas(100, 200);
+  testing.expectEqual(canvas.height, 200);
+  canvas.height = 400;
+  testing.expectEqual(canvas.height, 400);
+}
+</script>
+
+<script id=OffscreenCanvas#getContext>
+{
+  const canvas = new OffscreenCanvas(64, 64);
+  const ctx = canvas.getContext("2d");
+  testing.expectEqual(true, ctx instanceof OffscreenCanvasRenderingContext2D);
+  // We can't really test rendering but let's try to call it at least.
+  ctx.fillRect(0, 0, 10, 10);
+}
+</script>
+
+<script id=OffscreenCanvas#convertToBlob>
+{
+  const canvas = new OffscreenCanvas(64, 64);
+  const promise = canvas.convertToBlob();
+  testing.expectEqual(true, promise instanceof Promise);
+  // The promise should resolve to a Blob (even if empty)
+  promise.then(blob => {
+    testing.expectEqual(true, blob instanceof Blob);
+    testing.expectEqual(blob.size, 0); // Empty since no rendering
+  });
+}
+</script>
+
+<script id=HTMLCanvasElement#transferControlToOffscreen>
+{
+  const htmlCanvas = document.createElement("canvas");
+  htmlCanvas.width = 128;
+  htmlCanvas.height = 96;
+  const offscreen = htmlCanvas.transferControlToOffscreen();
+  testing.expectEqual(true, offscreen instanceof OffscreenCanvas);
+  testing.expectEqual(offscreen.width, 128);
+  testing.expectEqual(offscreen.height, 96);
+}
+</script>

src/browser/tests/canvas/webgl_rendering_context.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<script id=WebGLRenderingContext#getSupportedExtensions>
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("webgl");
+  testing.expectEqual(true, ctx instanceof WebGLRenderingContext);
+
+  const supportedExtensions = ctx.getSupportedExtensions();
+  // The order Chrome prefer.
+  const expectedExtensions = [
+      "ANGLE_instanced_arrays",
+      "EXT_blend_minmax",
+      "EXT_clip_control",
+      "EXT_color_buffer_half_float",
+      "EXT_depth_clamp",
+      "EXT_disjoint_timer_query",
+      "EXT_float_blend",
+      "EXT_frag_depth",
+      "EXT_polygon_offset_clamp",
+      "EXT_shader_texture_lod",
+      "EXT_texture_compression_bptc",
+      "EXT_texture_compression_rgtc",
+      "EXT_texture_filter_anisotropic",
+      "EXT_texture_mirror_clamp_to_edge",
+      "EXT_sRGB",
+      "KHR_parallel_shader_compile",
+      "OES_element_index_uint",
+      "OES_fbo_render_mipmap",
+      "OES_standard_derivatives",
+      "OES_texture_float",
+      "OES_texture_float_linear",
+      "OES_texture_half_float",
+      "OES_texture_half_float_linear",
+      "OES_vertex_array_object",
+      "WEBGL_blend_func_extended",
+      "WEBGL_color_buffer_float",
+      "WEBGL_compressed_texture_astc",
+      "WEBGL_compressed_texture_etc",
+      "WEBGL_compressed_texture_etc1",
+      "WEBGL_compressed_texture_pvrtc",
+      "WEBGL_compressed_texture_s3tc",
+      "WEBGL_compressed_texture_s3tc_srgb",
+      "WEBGL_debug_renderer_info",
+      "WEBGL_debug_shaders",
+      "WEBGL_depth_texture",
+      "WEBGL_draw_buffers",
+      "WEBGL_lose_context",
+      "WEBGL_multi_draw",
+      "WEBGL_polygon_mode"
+  ];
+
+  testing.expectEqual(expectedExtensions.length, supportedExtensions.length);
+  for (let i = 0; i < expectedExtensions.length; i++) {
+    testing.expectEqual(expectedExtensions[i], supportedExtensions[i]);
+  }
+}
+</script>
+
+<script id=WebGLRenderingCanvas#getExtension>
+// WEBGL_debug_renderer_info
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("webgl");
+  const rendererInfo = ctx.getExtension("WEBGL_debug_renderer_info");
+  testing.expectEqual(true, rendererInfo instanceof WEBGL_debug_renderer_info);
+
+  const { UNMASKED_VENDOR_WEBGL, UNMASKED_RENDERER_WEBGL } = rendererInfo;
+  testing.expectEqual(UNMASKED_VENDOR_WEBGL, 0x9245);
+  testing.expectEqual(UNMASKED_RENDERER_WEBGL, 0x9246);
+
+  testing.expectEqual("", ctx.getParameter(UNMASKED_VENDOR_WEBGL));
+  testing.expectEqual("", ctx.getParameter(UNMASKED_RENDERER_WEBGL));
+}
+
+// WEBGL_lose_context
+{
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("webgl");
+  const loseContext = ctx.getExtension("WEBGL_lose_context");
+  testing.expectEqual(true, loseContext instanceof WEBGL_lose_context);
+
+  loseContext.loseContext();
+  loseContext.restoreContext();
+}
+</script>

src/browser/tests/cdata/cdata_section.html

@@ -201,8 +201,8 @@ cdataClassName<!DOCTYPE html>
   root.appendChild(cdata);
   root.appendChild(elem2);
 
-  testing.expectEqual('LAST', cdata.nextElementSibling.tagName);
-  testing.expectEqual('FIRST', cdata.previousElementSibling.tagName);
+  testing.expectEqual('last', cdata.nextElementSibling.tagName);
+  testing.expectEqual('first', cdata.previousElementSibling.tagName);
 }
 </script>
 

src/browser/tests/cdata/comment.html

@@ -4,4 +4,6 @@
 <script id=comment>
   testing.expectEqual('', new Comment().data);
   testing.expectEqual('over 9000! ', new Comment('over 9000! ').data);
+
+  testing.expectEqual('null', new Comment(null).data);
 </script>

src/browser/tests/cdata/text.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <a id="link" href="foo" class="ok">OK</a>
 
-<script src="../../testing.js"></script>
+<script src="../testing.js"></script>
 <script id=text>
   let t = new Text('foo');
   testing.expectEqual('foo', t.data);
@@ -16,4 +16,7 @@
   let split = text.splitText('OK'.length);
   testing.expectEqual(' modified', split.data);
   testing.expectEqual('OK', text.data);
+
+    let x = new Text(null);
+    testing.expectEqual("null", x.data);
 </script>

src/browser/tests/cdp/dom3.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Test Page</title>
+</head>
+<body>
+    <h1>Test Page</h1>
+    <nav>
+        <a href="/page1" id="link1">First Link</a>
+        <a href="/page2" id="link2">Second Link</a>
+    </nav>
+    <form id="testForm" action="/submit" method="post">
+        <label for="username">Username:</label>
+        <input type="text" id="username" name="username" placeholder="Enter username">
+
+        <label for="email">Email:</label>
+        <input type="email" id="email" name="email" placeholder="Enter email">
+
+        <label for="password">Password:</label>
+        <input type="password" id="password" name="password">
+
+        <button type="submit">Submit</button>
+    </form>
+</body>
+</html>

src/browser/tests/console/console.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<script id="time">
+    // should not crash
+    console.time();
+    console.timeLog();
+    console.timeEnd();
+
+    console.time("test");
+    console.timeLog("test");
+    console.timeEnd("test");
+
+    testing.expectEqual(true, true);
+</script>
+
+<script id="count">
+    // should not crash
+    console.count();
+    console.count();
+    console.countReset();
+
+    console.count("test");
+    console.count("test");
+    console.countReset("test");
+
+    testing.expectEqual(true, true);
+</script>

src/browser/tests/crypto.html

@@ -16,41 +16,119 @@
     isRandom(ti8a)
   }
 
-  // {
-  //   let tu16a = new Uint16Array(100)
-  //   testing.expectEqual(tu16a, crypto.getRandomValues(tu16a))
-  //   isRandom(tu16a)
+  {
+    let tu16a = new Uint16Array(100)
+    testing.expectEqual(tu16a, crypto.getRandomValues(tu16a))
+    isRandom(tu16a)
 
-  //   let ti16a = new Int16Array(100)
-  //   testing.expectEqual(ti16a, crypto.getRandomValues(ti16a))
-  //   isRandom(ti16a)
-  // }
+    let ti16a = new Int16Array(100)
+    testing.expectEqual(ti16a, crypto.getRandomValues(ti16a))
+    isRandom(ti16a)
+  }
 
-  // {
-  //   let tu32a = new Uint32Array(100)
-  //   testing.expectEqual(tu32a, crypto.getRandomValues(tu32a))
-  //   isRandom(tu32a)
+  {
+    let tu32a = new Uint32Array(100)
+    testing.expectEqual(tu32a, crypto.getRandomValues(tu32a))
+    isRandom(tu32a)
 
-  //   let ti32a = new Int32Array(100)
-  //   testing.expectEqual(ti32a, crypto.getRandomValues(ti32a))
-  //   isRandom(ti32a)
-  // }
+    let ti32a = new Int32Array(100)
+    testing.expectEqual(ti32a, crypto.getRandomValues(ti32a))
+    isRandom(ti32a)
+  }
 
-  // {
-  //   let tu64a = new BigUint64Array(100)
-  //   testing.expectEqual(tu64a, crypto.getRandomValues(tu64a))
-  //   isRandom(tu64a)
+  {
+    let tu64a = new BigUint64Array(100)
+    testing.expectEqual(tu64a, crypto.getRandomValues(tu64a))
+    isRandom(tu64a)
 
-  //   let ti64a = new BigInt64Array(100)
-  //   testing.expectEqual(ti64a, crypto.getRandomValues(ti64a))
-  //   isRandom(ti64a)
-  // }
+    let ti64a = new BigInt64Array(100)
+    testing.expectEqual(ti64a, crypto.getRandomValues(ti64a))
+    isRandom(ti64a)
+  }
 </script>
 
-<!-- <script id="randomUUID">
+<script id="randomUUID">
   const uuid = crypto.randomUUID();
   testing.expectEqual('string', typeof uuid);
   testing.expectEqual(36, uuid.length);
   const regex = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
   testing.expectEqual(true, regex.test(uuid));
-</script> -->
+</script>
+
+<script id=SubtleCrypto>
+  testing.expectEqual(true, crypto.subtle instanceof SubtleCrypto);
+</script>
+
+<script id=sign-and-verify-hmac>
+  testing.async(async () => {
+    let key = await crypto.subtle.generateKey(
+      {
+        name: "HMAC",
+        hash: { name: "SHA-512" },
+      },
+      true,
+      ["sign", "verify"],
+    );
+
+    testing.expectEqual(true, key instanceof CryptoKey);
+
+    const raw = await crypto.subtle.exportKey("raw", key);
+    testing.expectEqual(128, raw.byteLength);
+
+    const encoder = new TextEncoder();
+
+    const signature = await crypto.subtle.sign(
+      "HMAC",
+      key,
+      encoder.encode("Hello, world!")
+    );
+
+    testing.expectEqual(true, signature instanceof ArrayBuffer);
+
+    const result = await window.crypto.subtle.verify(
+      { name: "HMAC" },
+      key,
+      signature,
+      encoder.encode("Hello, world!")
+    );
+
+    testing.expectEqual(true, result);
+  });
+</script>
+
+<script id=derive-shared-key-x25519>
+  testing.async(async () => {
+    const { privateKey, publicKey } = await crypto.subtle.generateKey(
+      { name: "X25519" },
+      true,
+      ["deriveBits"],
+    );
+
+    testing.expectEqual(true, privateKey instanceof CryptoKey);
+    testing.expectEqual(true, publicKey instanceof CryptoKey);
+
+    const sharedKey = await crypto.subtle.deriveBits(
+      {
+        name: "X25519",
+        public: publicKey,
+      },
+      privateKey,
+      128,
+    );
+
+    testing.expectEqual(16, sharedKey.byteLength);
+  });
+</script>
+
+<script id="digest">
+  testing.async(async () => {
+    async function hash(algo, data) {
+      const buffer = await window.crypto.subtle.digest(algo, new TextEncoder().encode(data));
+      return [...new Uint8Array(buffer)].map(x => x.toString(16).padStart(2, '0')).join('');
+    }
+    testing.expectEqual("a6a1e3375239f215f09a156df29c17c7d1ac6722", await hash('sha-1', 'over 9000'));
+    testing.expectEqual("1bc375bb92459685194dda18a4b835f4e2972ec1bde6d9ab3db53fcc584a6580", await hash('sha-256', 'over 9000'));
+    testing.expectEqual("a4260d64c2eea9fd30c1f895c5e48a26d817e19d3a700b61b3ce665864ff4b8e012bd357d345aa614c5f642dab865ea1", await hash('sha-384', 'over 9000'));
+    testing.expectEqual("6cad17e6f3f76680d6dd18ed043b75b4f6e1aa1d08b917294942e882fb6466c3510948c34af8b903ed0725b582b3b39c0e485ae2c1b7dfdb192ee38b79c782b6", await hash('sha-512', 'over 9000'));
+  });
+</script>

src/browser/tests/css.html

@@ -20,8 +20,10 @@
   {
     testing.expectEqual('\\30 abc', CSS.escape('0abc'));
     testing.expectEqual('\\31 23', CSS.escape('123'));
-    testing.expectEqual('\\-test', CSS.escape('-test'));
-    testing.expectEqual('\\--test', CSS.escape('--test'));
+    testing.expectEqual('\\-', CSS.escape('-'));
+    testing.expectEqual('-test', CSS.escape('-test'));
+    testing.expectEqual('--test', CSS.escape('--test'));
+    testing.expectEqual('-\\33 ', CSS.escape('-3'));
   }
 </script>
 
@@ -67,3 +69,11 @@
     testing.expectEqual(true, CSS.supports('z-index', '10'));
   }
 </script>
+
+<script id="escape_null_character">
+  {
+    testing.expectEqual('\uFFFD', CSS.escape('\x00'));
+    testing.expectEqual('test\uFFFDvalue', CSS.escape('test\x00value'));
+    testing.expectEqual('\uFFFDabc', CSS.escape('\x00abc'));
+  }
+</script>

src/browser/tests/css/font_face_set.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<script id="document_fonts_exists">
+{
+    testing.expectTrue(document.fonts !== undefined);
+    testing.expectTrue(document.fonts !== null);
+}
+</script>
+
+<script id="document_fonts_same_instance">
+{
+    // Should return same instance each time
+    const f1 = document.fonts;
+    const f2 = document.fonts;
+    testing.expectTrue(f1 === f2);
+}
+</script>
+
+<script id="document_fonts_status">
+{
+    testing.expectEqual('loaded', document.fonts.status);
+}
+</script>
+
+<script id="document_fonts_size">
+{
+    testing.expectEqual(0, document.fonts.size);
+}
+</script>
+
+<script id="document_fonts_ready_is_promise">
+{
+    const ready = document.fonts.ready;
+    testing.expectTrue(ready instanceof Promise);
+}
+</script>
+
+<script id="document_fonts_ready_resolves">
+{
+    let resolved = false;
+    document.fonts.ready.then(() => { resolved = true; });
+    // Promise resolution is async; just confirm .then() does not throw
+    testing.expectTrue(typeof document.fonts.ready.then === 'function');
+}
+</script>
+
+<script id="document_fonts_check">
+{
+    testing.expectTrue(document.fonts.check('16px sans-serif'));
+}
+</script>
+
+<script id="document_fonts_constructor_name">
+{
+    testing.expectEqual('FontFaceSet', document.fonts.constructor.name);
+}
+</script>

src/browser/tests/css/stylesheet.html

@@ -205,3 +205,54 @@
     testing.expectEqual('', style.getPropertyPriority('content'));
 }
 </script>
+
+<script id="CSSStyleDeclaration_style_syncs_to_attribute">
+{
+    // JS style modifications must be reflected in getAttribute.
+    const div = document.createElement('div');
+
+    // Named property assignment (element.style.X = ...)
+    div.style.opacity = '0';
+    testing.expectEqual('opacity: 0;', div.getAttribute('style'));
+
+    // Update existing property
+    div.style.opacity = '1';
+    testing.expectEqual('opacity: 1;', div.getAttribute('style'));
+
+    // Add a second property
+    div.style.color = 'red';
+    testing.expectTrue(div.getAttribute('style').includes('opacity: 1'));
+    testing.expectTrue(div.getAttribute('style').includes('color: red'));
+
+    // removeProperty syncs back
+    div.style.removeProperty('opacity');
+    testing.expectTrue(!div.getAttribute('style').includes('opacity'));
+    testing.expectTrue(div.getAttribute('style').includes('color: red'));
+
+    // setCssText syncs back
+    div.style.cssText = 'filter: blur(0px)';
+    testing.expectEqual('filter: blur(0px);', div.getAttribute('style'));
+
+    // setCssText with empty string clears attribute
+    div.style.cssText = '';
+    testing.expectEqual('', div.getAttribute('style'));
+}
+</script>
+
+<script id="CSSStyleDeclaration_outerHTML_reflects_style_changes">
+{
+    // outerHTML must reflect JS-modified styles (regression test for
+    // DOM serialization reading stale HTML-parsed attribute values).
+    const div = document.createElement('div');
+    div.setAttribute('style', 'filter:blur(10px);opacity:0');
+
+    div.style.filter = 'blur(0px)';
+    div.style.opacity = '1';
+
+    const html = div.outerHTML;
+    testing.expectTrue(html.includes('filter: blur(0px)'));
+    testing.expectTrue(html.includes('opacity: 1'));
+    testing.expectTrue(!html.includes('blur(10px)'));
+    testing.expectTrue(!html.includes('opacity:0'));
+}
+</script>

src/browser/tests/custom_elements/registry.html

@@ -119,3 +119,33 @@
 }
 </script>
 
+<script id="constructor_self_insert_foster_parent">
+{
+    // Regression: custom element constructor inserting itself (via appendChild) during
+    // innerHTML parsing. When the element is not valid table content, the HTML5 parser
+    // foster-parents it before the <table> via appendBeforeSiblingCallback. That callback
+    // previously didn't check for an existing _parent before calling insertNodeRelative,
+    // causing the "Page.insertNodeRelative parent" assertion to fire.
+    let constructorCalled = 0;
+    let container;
+
+    class CtorSelfInsert extends HTMLElement {
+        constructor() {
+            super();
+            constructorCalled++;
+            // Insert self into container so _parent is set before the parser
+            // officially places this element via appendBeforeSiblingCallback.
+            if (container) container.appendChild(this);
+        }
+    }
+    customElements.define('ctor-self-insert', CtorSelfInsert);
+
+    container = document.createElement('div');
+    // ctor-self-insert is not valid table content; the parser foster-parents it
+    // before the <table>, calling appendBeforeSiblingCallback(sibling=table, node=element).
+    // At that point the element already has _parent=container from the constructor.
+    container.innerHTML = '<table><ctor-self-insert></ctor-self-insert></table>';
+
+    testing.expectEqual(1, constructorCalled);
+}
+</script>

src/browser/tests/custom_elements/upgrade.html

@@ -27,329 +27,329 @@
     customElements.define('my-early', MyEarly);
     testing.expectEqual(true, early.upgraded);
     testing.expectEqual(1, constructorCalled);
-    testing.expectEqual(1, connectedCalled);
+    // testing.expectEqual(1, connectedCalled);
 }
 
-{
-    let order = [];
+// {
+//     let order = [];
 
-    class UpgradeParent extends HTMLElement {
-        constructor() {
-            super();
-            order.push('parent-constructor');
-        }
-
-        connectedCallback() {
-            order.push('parent-connected');
-        }
-    }
-
-    class UpgradeChild extends HTMLElement {
-        constructor() {
-            super();
-            order.push('child-constructor');
-        }
-
-        connectedCallback() {
-            order.push('child-connected');
-        }
-    }
+//     class UpgradeParent extends HTMLElement {
+//         constructor() {
+//             super();
+//             order.push('parent-constructor');
+//         }
+
+//         connectedCallback() {
+//             order.push('parent-connected');
+//         }
+//     }
+
+//     class UpgradeChild extends HTMLElement {
+//         constructor() {
+//             super();
+//             order.push('child-constructor');
+//         }
+
+//         connectedCallback() {
+//             order.push('child-connected');
+//         }
+//     }
 
-    const container = document.createElement('div');
-    container.innerHTML = '<upgrade-parent><upgrade-child></upgrade-child></upgrade-parent>';
-    document.body.appendChild(container);
-
-    testing.expectEqual(0, order.length);
+//     const container = document.createElement('div');
+//     container.innerHTML = '<upgrade-parent><upgrade-child></upgrade-child></upgrade-parent>';
+//     document.body.appendChild(container);
+
+//     testing.expectEqual(0, order.length);
 
-    customElements.define('upgrade-parent', UpgradeParent);
-    testing.expectEqual(2, order.length);
-    testing.expectEqual('parent-constructor', order[0]);
-    testing.expectEqual('parent-connected', order[1]);
-
-    customElements.define('upgrade-child', UpgradeChild);
-    testing.expectEqual(4, order.length);
-    testing.expectEqual('child-constructor', order[2]);
-    testing.expectEqual('child-connected', order[3]);
-}
+//     customElements.define('upgrade-parent', UpgradeParent);
+//     testing.expectEqual(2, order.length);
+//     testing.expectEqual('parent-constructor', order[0]);
+//     testing.expectEqual('parent-connected', order[1]);
+
+//     customElements.define('upgrade-child', UpgradeChild);
+//     testing.expectEqual(4, order.length);
+//     testing.expectEqual('child-constructor', order[2]);
+//     testing.expectEqual('child-connected', order[3]);
+// }
 
-{
-    let connectedCalled = 0;
+// {
+//     let connectedCalled = 0;
 
-    class DetachedUpgrade extends HTMLElement {
-        connectedCallback() {
-            connectedCalled++;
-        }
-    }
-
-    const container = document.createElement('div');
-    container.innerHTML = '<detached-upgrade></detached-upgrade>';
-
-    testing.expectEqual(0, connectedCalled);
-
-    customElements.define('detached-upgrade', DetachedUpgrade);
-    testing.expectEqual(0, connectedCalled);
-
-    document.body.appendChild(container);
-    testing.expectEqual(1, connectedCalled);
-}
-
-{
-    let constructorCalled = 0;
-    let connectedCalled = 0;
-
-    class ManualUpgrade extends HTMLElement {
-        constructor() {
-            super();
-            constructorCalled++;
-            this.manuallyUpgraded = true;
-        }
-
-        connectedCallback() {
-            connectedCalled++;
-        }
-    }
+//     class DetachedUpgrade extends HTMLElement {
+//         connectedCallback() {
+//             connectedCalled++;
+//         }
+//     }
+
+//     const container = document.createElement('div');
+//     container.innerHTML = '<detached-upgrade></detached-upgrade>';
+
+//     testing.expectEqual(0, connectedCalled);
+
+//     customElements.define('detached-upgrade', DetachedUpgrade);
+//     testing.expectEqual(0, connectedCalled);
+
+//     document.body.appendChild(container);
+//     testing.expectEqual(1, connectedCalled);
+// }
+
+// {
+//     let constructorCalled = 0;
+//     let connectedCalled = 0;
+
+//     class ManualUpgrade extends HTMLElement {
+//         constructor() {
+//             super();
+//             constructorCalled++;
+//             this.manuallyUpgraded = true;
+//         }
+
+//         connectedCallback() {
+//             connectedCalled++;
+//         }
+//     }
 
-    customElements.define('manual-upgrade', ManualUpgrade);
+//     customElements.define('manual-upgrade', ManualUpgrade);
 
-    const container = document.createElement('div');
-    container.innerHTML = '<manual-upgrade id="m1"><manual-upgrade id="m2"></manual-upgrade></manual-upgrade>';
+//     const container = document.createElement('div');
+//     container.innerHTML = '<manual-upgrade id="m1"><manual-upgrade id="m2"></manual-upgrade></manual-upgrade>';
 
-    testing.expectEqual(2, constructorCalled);
-    testing.expectEqual(0, connectedCalled);
+//     testing.expectEqual(2, constructorCalled);
+//     testing.expectEqual(0, connectedCalled);
 
-    customElements.upgrade(container);
+//     customElements.upgrade(container);
 
-    testing.expectEqual(2, constructorCalled);
-    testing.expectEqual(0, connectedCalled);
-
-    const m1 = container.querySelector('#m1');
-    const m2 = container.querySelector('#m2');
-    testing.expectEqual(true, m1.manuallyUpgraded);
-    testing.expectEqual(true, m2.manuallyUpgraded);
-
-    document.body.appendChild(container);
-    testing.expectEqual(2, connectedCalled);
-}
-
-{
-    let alreadyUpgradedCalled = 0;
-
-    class AlreadyUpgraded extends HTMLElement {
-        constructor() {
-            super();
-            alreadyUpgradedCalled++;
-        }
-    }
+//     testing.expectEqual(2, constructorCalled);
+//     testing.expectEqual(0, connectedCalled);
+
+//     const m1 = container.querySelector('#m1');
+//     const m2 = container.querySelector('#m2');
+//     testing.expectEqual(true, m1.manuallyUpgraded);
+//     testing.expectEqual(true, m2.manuallyUpgraded);
+
+//     document.body.appendChild(container);
+//     testing.expectEqual(2, connectedCalled);
+// }
+
+// {
+//     let alreadyUpgradedCalled = 0;
+
+//     class AlreadyUpgraded extends HTMLElement {
+//         constructor() {
+//             super();
+//             alreadyUpgradedCalled++;
+//         }
+//     }
 
-    const elem = document.createElement('div');
-    elem.innerHTML = '<already-upgraded></already-upgraded>';
-    document.body.appendChild(elem);
+//     const elem = document.createElement('div');
+//     elem.innerHTML = '<already-upgraded></already-upgraded>';
+//     document.body.appendChild(elem);
 
-    customElements.define('already-upgraded', AlreadyUpgraded);
-    testing.expectEqual(1, alreadyUpgradedCalled);
+//     customElements.define('already-upgraded', AlreadyUpgraded);
+//     testing.expectEqual(1, alreadyUpgradedCalled);
 
-    customElements.upgrade(elem);
-    testing.expectEqual(1, alreadyUpgradedCalled);
-}
+//     customElements.upgrade(elem);
+//     testing.expectEqual(1, alreadyUpgradedCalled);
+// }
 
-{
-    let attributeChangedCalls = [];
+// {
+//     let attributeChangedCalls = [];
 
-    class UpgradeWithAttrs extends HTMLElement {
-        static get observedAttributes() {
-            return ['data-foo', 'data-bar'];
-        }
+//     class UpgradeWithAttrs extends HTMLElement {
+//         static get observedAttributes() {
+//             return ['data-foo', 'data-bar'];
+//         }
 
-        attributeChangedCallback(name, oldValue, newValue) {
-            attributeChangedCalls.push({ name, oldValue, newValue });
-        }
-    }
+//         attributeChangedCallback(name, oldValue, newValue) {
+//             attributeChangedCalls.push({ name, oldValue, newValue });
+//         }
+//     }
 
-    const container = document.createElement('div');
-    container.innerHTML = '<upgrade-with-attrs data-foo="hello" data-bar="world"></upgrade-with-attrs>';
-    document.body.appendChild(container);
+//     const container = document.createElement('div');
+//     container.innerHTML = '<upgrade-with-attrs data-foo="hello" data-bar="world"></upgrade-with-attrs>';
+//     document.body.appendChild(container);
 
-    testing.expectEqual(0, attributeChangedCalls.length);
+//     testing.expectEqual(0, attributeChangedCalls.length);
 
-    customElements.define('upgrade-with-attrs', UpgradeWithAttrs);
+//     customElements.define('upgrade-with-attrs', UpgradeWithAttrs);
 
-    testing.expectEqual(2, attributeChangedCalls.length);
-    testing.expectEqual('data-foo', attributeChangedCalls[0].name);
-    testing.expectEqual(null, attributeChangedCalls[0].oldValue);
-    testing.expectEqual('hello', attributeChangedCalls[0].newValue);
-    testing.expectEqual('data-bar', attributeChangedCalls[1].name);
-    testing.expectEqual(null, attributeChangedCalls[1].oldValue);
-    testing.expectEqual('world', attributeChangedCalls[1].newValue);
-}
+//     testing.expectEqual(2, attributeChangedCalls.length);
+//     testing.expectEqual('data-foo', attributeChangedCalls[0].name);
+//     testing.expectEqual(null, attributeChangedCalls[0].oldValue);
+//     testing.expectEqual('hello', attributeChangedCalls[0].newValue);
+//     testing.expectEqual('data-bar', attributeChangedCalls[1].name);
+//     testing.expectEqual(null, attributeChangedCalls[1].oldValue);
+//     testing.expectEqual('world', attributeChangedCalls[1].newValue);
+// }
 
-{
-    let attributeChangedCalls = [];
-    let connectedCalls = 0;
+// {
+//     let attributeChangedCalls = [];
+//     let connectedCalls = 0;
 
-    class DetachedWithAttrs extends HTMLElement {
-        static get observedAttributes() {
-            return ['foo'];
-        }
+//     class DetachedWithAttrs extends HTMLElement {
+//         static get observedAttributes() {
+//             return ['foo'];
+//         }
 
-        attributeChangedCallback(name, oldValue, newValue) {
-            attributeChangedCalls.push({ name, oldValue, newValue });
-        }
+//         attributeChangedCallback(name, oldValue, newValue) {
+//             attributeChangedCalls.push({ name, oldValue, newValue });
+//         }
 
-        connectedCallback() {
-            connectedCalls++;
-        }
-    }
+//         connectedCallback() {
+//             connectedCalls++;
+//         }
+//     }
 
-    const container = document.createElement('div');
-    container.innerHTML = '<detached-with-attrs foo="bar"></detached-with-attrs>';
+//     const container = document.createElement('div');
+//     container.innerHTML = '<detached-with-attrs foo="bar"></detached-with-attrs>';
 
-    testing.expectEqual(0, attributeChangedCalls.length);
+//     testing.expectEqual(0, attributeChangedCalls.length);
 
-    customElements.define('detached-with-attrs', DetachedWithAttrs);
+//     customElements.define('detached-with-attrs', DetachedWithAttrs);
 
-    testing.expectEqual(0, attributeChangedCalls.length);
-    testing.expectEqual(0, connectedCalls);
+//     testing.expectEqual(0, attributeChangedCalls.length);
+//     testing.expectEqual(0, connectedCalls);
 
-    document.body.appendChild(container);
+//     document.body.appendChild(container);
 
-    testing.expectEqual(1, attributeChangedCalls.length);
-    testing.expectEqual('foo', attributeChangedCalls[0].name);
-    testing.expectEqual(null, attributeChangedCalls[0].oldValue);
-    testing.expectEqual('bar', attributeChangedCalls[0].newValue);
-    testing.expectEqual(1, connectedCalls);
-}
+//     testing.expectEqual(1, attributeChangedCalls.length);
+//     testing.expectEqual('foo', attributeChangedCalls[0].name);
+//     testing.expectEqual(null, attributeChangedCalls[0].oldValue);
+//     testing.expectEqual('bar', attributeChangedCalls[0].newValue);
+//     testing.expectEqual(1, connectedCalls);
+// }
 
-{
-    let attributeChangedCalls = [];
-    let constructorCalled = 0;
+// {
+//     let attributeChangedCalls = [];
+//     let constructorCalled = 0;
 
-    class ManualUpgradeWithAttrs extends HTMLElement {
-        static get observedAttributes() {
-            return ['x', 'y'];
-        }
+//     class ManualUpgradeWithAttrs extends HTMLElement {
+//         static get observedAttributes() {
+//             return ['x', 'y'];
+//         }
 
-        constructor() {
-            super();
-            constructorCalled++;
-        }
+//         constructor() {
+//             super();
+//             constructorCalled++;
+//         }
 
-        attributeChangedCallback(name, oldValue, newValue) {
-            attributeChangedCalls.push({ name, oldValue, newValue });
-        }
-    }
+//         attributeChangedCallback(name, oldValue, newValue) {
+//             attributeChangedCalls.push({ name, oldValue, newValue });
+//         }
+//     }
 
-    customElements.define('manual-upgrade-with-attrs', ManualUpgradeWithAttrs);
+//     customElements.define('manual-upgrade-with-attrs', ManualUpgradeWithAttrs);
 
-    const container = document.createElement('div');
-    container.innerHTML = '<manual-upgrade-with-attrs x="1" y="2"></manual-upgrade-with-attrs>';
+//     const container = document.createElement('div');
+//     container.innerHTML = '<manual-upgrade-with-attrs x="1" y="2"></manual-upgrade-with-attrs>';
 
-    testing.expectEqual(1, constructorCalled);
-    testing.expectEqual(2, attributeChangedCalls.length);
+//     testing.expectEqual(1, constructorCalled);
+//     testing.expectEqual(2, attributeChangedCalls.length);
 
-    const elem = container.querySelector('manual-upgrade-with-attrs');
-    elem.setAttribute('z', '3');
+//     const elem = container.querySelector('manual-upgrade-with-attrs');
+//     elem.setAttribute('z', '3');
 
-    customElements.upgrade(container);
+//     customElements.upgrade(container);
 
-    testing.expectEqual(1, constructorCalled);
-    testing.expectEqual(2, attributeChangedCalls.length);
-}
+//     testing.expectEqual(1, constructorCalled);
+//     testing.expectEqual(2, attributeChangedCalls.length);
+// }
 
-{
-    let attributeChangedCalls = [];
+// {
+//     let attributeChangedCalls = [];
 
-    class MixedAttrs extends HTMLElement {
-        static get observedAttributes() {
-            return ['watched'];
-        }
+//     class MixedAttrs extends HTMLElement {
+//         static get observedAttributes() {
+//             return ['watched'];
+//         }
 
-        attributeChangedCallback(name, oldValue, newValue) {
-            attributeChangedCalls.push({ name, oldValue, newValue });
-        }
-    }
+//         attributeChangedCallback(name, oldValue, newValue) {
+//             attributeChangedCalls.push({ name, oldValue, newValue });
+//         }
+//     }
 
-    const container = document.createElement('div');
-    container.innerHTML = '<mixed-attrs watched="yes" ignored="no" also-ignored="maybe"></mixed-attrs>';
-    document.body.appendChild(container);
+//     const container = document.createElement('div');
+//     container.innerHTML = '<mixed-attrs watched="yes" ignored="no" also-ignored="maybe"></mixed-attrs>';
+//     document.body.appendChild(container);
 
-    testing.expectEqual(0, attributeChangedCalls.length);
+//     testing.expectEqual(0, attributeChangedCalls.length);
 
-    customElements.define('mixed-attrs', MixedAttrs);
+//     customElements.define('mixed-attrs', MixedAttrs);
 
-    testing.expectEqual(1, attributeChangedCalls.length);
-    testing.expectEqual('watched', attributeChangedCalls[0].name);
-    testing.expectEqual('yes', attributeChangedCalls[0].newValue);
-}
+//     testing.expectEqual(1, attributeChangedCalls.length);
+//     testing.expectEqual('watched', attributeChangedCalls[0].name);
+//     testing.expectEqual('yes', attributeChangedCalls[0].newValue);
+// }
 
-{
-    let attributeChangedCalls = [];
+// {
+//     let attributeChangedCalls = [];
 
-    class EmptyAttr extends HTMLElement {
-        static get observedAttributes() {
-            return ['empty', 'non-empty'];
-        }
+//     class EmptyAttr extends HTMLElement {
+//         static get observedAttributes() {
+//             return ['empty', 'non-empty'];
+//         }
 
-        attributeChangedCallback(name, oldValue, newValue) {
-            attributeChangedCalls.push({ name, oldValue, newValue });
-        }
-    }
+//         attributeChangedCallback(name, oldValue, newValue) {
+//             attributeChangedCalls.push({ name, oldValue, newValue });
+//         }
+//     }
 
-    const container = document.createElement('div');
-    container.innerHTML = '<empty-attr empty="" non-empty="value"></empty-attr>';
-    document.body.appendChild(container);
+//     const container = document.createElement('div');
+//     container.innerHTML = '<empty-attr empty="" non-empty="value"></empty-attr>';
+//     document.body.appendChild(container);
 
-    customElements.define('empty-attr', EmptyAttr);
+//     customElements.define('empty-attr', EmptyAttr);
 
-    testing.expectEqual(2, attributeChangedCalls.length);
-    testing.expectEqual('empty', attributeChangedCalls[0].name);
-    testing.expectEqual('', attributeChangedCalls[0].newValue);
-    testing.expectEqual('non-empty', attributeChangedCalls[1].name);
-    testing.expectEqual('value', attributeChangedCalls[1].newValue);
-}
+//     testing.expectEqual(2, attributeChangedCalls.length);
+//     testing.expectEqual('empty', attributeChangedCalls[0].name);
+//     testing.expectEqual('', attributeChangedCalls[0].newValue);
+//     testing.expectEqual('non-empty', attributeChangedCalls[1].name);
+//     testing.expectEqual('value', attributeChangedCalls[1].newValue);
+// }
 
-{
-    let parentCalls = [];
-    let childCalls = [];
+// {
+//     let parentCalls = [];
+//     let childCalls = [];
 
-    class NestedParent extends HTMLElement {
-        static get observedAttributes() {
-            return ['parent-attr'];
-        }
+//     class NestedParent extends HTMLElement {
+//         static get observedAttributes() {
+//             return ['parent-attr'];
+//         }
 
-        attributeChangedCallback(name, oldValue, newValue) {
-            parentCalls.push({ name, oldValue, newValue });
-        }
-    }
+//         attributeChangedCallback(name, oldValue, newValue) {
+//             parentCalls.push({ name, oldValue, newValue });
+//         }
+//     }
 
-    class NestedChild extends HTMLElement {
-        static get observedAttributes() {
-            return ['child-attr'];
-        }
+//     class NestedChild extends HTMLElement {
+//         static get observedAttributes() {
+//             return ['child-attr'];
+//         }
 
-        attributeChangedCallback(name, oldValue, newValue) {
-            childCalls.push({ name, oldValue, newValue });
-        }
-    }
+//         attributeChangedCallback(name, oldValue, newValue) {
+//             childCalls.push({ name, oldValue, newValue });
+//         }
+//     }
 
-    const container = document.createElement('div');
-    container.innerHTML = '<nested-parent parent-attr="p"><nested-child child-attr="c"></nested-child></nested-parent>';
-    document.body.appendChild(container);
+//     const container = document.createElement('div');
+//     container.innerHTML = '<nested-parent parent-attr="p"><nested-child child-attr="c"></nested-child></nested-parent>';
+//     document.body.appendChild(container);
 
-    testing.expectEqual(0, parentCalls.length);
-    testing.expectEqual(0, childCalls.length);
+//     testing.expectEqual(0, parentCalls.length);
+//     testing.expectEqual(0, childCalls.length);
 
-    customElements.define('nested-parent', NestedParent);
+//     customElements.define('nested-parent', NestedParent);
 
-    testing.expectEqual(1, parentCalls.length);
-    testing.expectEqual('parent-attr', parentCalls[0].name);
-    testing.expectEqual('p', parentCalls[0].newValue);
-    testing.expectEqual(0, childCalls.length);
+//     testing.expectEqual(1, parentCalls.length);
+//     testing.expectEqual('parent-attr', parentCalls[0].name);
+//     testing.expectEqual('p', parentCalls[0].newValue);
+//     testing.expectEqual(0, childCalls.length);
 
-    customElements.define('nested-child', NestedChild);
+//     customElements.define('nested-child', NestedChild);
 
-    testing.expectEqual(1, parentCalls.length);
-    testing.expectEqual(1, childCalls.length);
-    testing.expectEqual('child-attr', childCalls[0].name);
-    testing.expectEqual('c', childCalls[0].newValue);
-}
+//     testing.expectEqual(1, parentCalls.length);
+//     testing.expectEqual(1, childCalls.length);
+//     testing.expectEqual('child-attr', childCalls[0].name);
+//     testing.expectEqual('c', childCalls[0].newValue);
+// }
 </script>

src/browser/tests/document/create_element.html

@@ -2,12 +2,18 @@
 <body></body>
 <script src="../testing.js"></script>
 <script id=createElement>
-  const div = document.createElement('div');
-  testing.expectEqual("DIV", div.tagName);
-  div.id = "hello";
+  testing.expectEqual(1, document.createElement.length);
+
+  const div1 = document.createElement('div');
+  testing.expectEqual(true, div1 instanceof HTMLDivElement);
+  testing.expectEqual("DIV", div1.tagName);
+  div1.id = "hello";
   testing.expectEqual(null, $('#hello'));
 
-  document.getElementsByTagName('body')[0].appendChild(div);
-  testing.expectEqual(div, $('#hello'));
+  const div2 = document.createElement('DIV');
+  testing.expectEqual(true, div2 instanceof HTMLDivElement);
+
+  document.getElementsByTagName('body')[0].appendChild(div1);
+  testing.expectEqual(div1, $('#hello'));
 </script>
 

src/browser/tests/document/create_element_ns.html

@@ -2,9 +2,17 @@
 <body></body>
 <script src="../testing.js"></script>
 <script id=createElementNS>
-  const htmlDiv = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
-  testing.expectEqual('DIV', htmlDiv.tagName);
-  testing.expectEqual('http://www.w3.org/1999/xhtml', htmlDiv.namespaceURI);
+  const htmlDiv1 = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
+  testing.expectEqual('DIV', htmlDiv1.tagName);
+  testing.expectEqual(true, htmlDiv1 instanceof HTMLDivElement);
+  testing.expectEqual('http://www.w3.org/1999/xhtml', htmlDiv1.namespaceURI);
+
+  // Per spec, createElementNS does NOT lowercase — 'DIV' != 'div', so this
+  // creates an HTMLUnknownElement, not an HTMLDivElement.
+  const htmlDiv2 = document.createElementNS('http://www.w3.org/1999/xhtml', 'DIV');
+  testing.expectEqual('DIV', htmlDiv2.tagName);
+  testing.expectEqual(false, htmlDiv2 instanceof HTMLDivElement);
+  testing.expectEqual('http://www.w3.org/1999/xhtml', htmlDiv2.namespaceURI);
 
   const svgRect = document.createElementNS('http://www.w3.org/2000/svg', 'RecT');
   testing.expectEqual('RecT', svgRect.tagName);
@@ -19,12 +27,13 @@
   testing.expectEqual('http://www.w3.org/XML/1998/namespace', xmlElement.namespaceURI);
 
   const nullNsElement = document.createElementNS(null, 'span');
-  testing.expectEqual('SPAN', nullNsElement.tagName);
-  testing.expectEqual('http://www.w3.org/1999/xhtml', nullNsElement.namespaceURI);
+  testing.expectEqual('span', nullNsElement.tagName);
+  testing.expectEqual(null, nullNsElement.namespaceURI);
 
   const unknownNsElement = document.createElementNS('http://example.com/unknown', 'custom');
-  testing.expectEqual('CUSTOM', unknownNsElement.tagName);
-  testing.expectEqual('http://www.w3.org/1999/xhtml', unknownNsElement.namespaceURI);
+  testing.expectEqual('custom', unknownNsElement.tagName);
+  // Should be http://example.com/unknown
+  testing.expectEqual('http://lightpanda.io/unsupported/namespace', unknownNsElement.namespaceURI);
 
   const regularDiv = document.createElement('div');
   testing.expectEqual('DIV', regularDiv.tagName);
@@ -36,5 +45,5 @@
   testing.expectEqual('te:ST', custom.tagName);
   testing.expectEqual('te', custom.prefix);
   testing.expectEqual('ST', custom.localName);
-  testing.expectEqual('http://www.w3.org/1999/xhtml', custom.namespaceURI); // Should be test
+  testing.expectEqual('http://lightpanda.io/unsupported/namespace', custom.namespaceURI); // Should be test
 </script>

src/browser/tests/document/document.html

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <head id="the_head">
+  <meta charset="UTF-8">
   <title>Test Document Title</title>
   <script src="../testing.js"></script>
 </head>
@@ -11,8 +12,12 @@
   testing.expectEqual(10, document.childNodes[0].nodeType);
   testing.expectEqual(null, document.parentNode);
   testing.expectEqual(undefined, document.getCurrentScript);
-  testing.expectEqual("http://127.0.0.1:9582/src/browser/tests/document/document.html", document.URL);
+  testing.expectEqual(testing.BASE_URL + 'document/document.html', document.URL);
   testing.expectEqual(window, document.defaultView);
+  testing.expectEqual(false, document.hidden);
+  testing.expectEqual("visible", document.visibilityState);
+  testing.expectEqual(false, document.prerendering);
+  testing.expectEqual(undefined, Document.prerendering);
 </script>
 
 <script id=headAndbody>
@@ -22,6 +27,7 @@
 
 <script id=documentElement>
   testing.expectEqual($('#the_body').parentNode, document.documentElement);
+  testing.expectEqual(document.documentElement, document.scrollingElement);
 </script>
 
 <script id=title>
@@ -51,7 +57,7 @@
   testing.expectEqual('CSS1Compat', document.compatMode);
   testing.expectEqual(document.URL, document.documentURI);
   testing.expectEqual('', document.referrer);
-  testing.expectEqual('127.0.0.1', document.domain);
+  testing.expectEqual(testing.HOST, document.domain);
 </script>
 
 <script id=programmatic_document_metadata>
@@ -64,7 +70,7 @@
   testing.expectEqual('CSS1Compat', doc.compatMode);
   testing.expectEqual('', doc.referrer);
   // Programmatic document should have empty domain (no URL/origin)
-  testing.expectEqual('127.0.0.1', doc.domain);
+  testing.expectEqual(testing.HOST, doc.domain);
 </script>
 
 <!-- Test anchors and links -->
@@ -171,15 +177,111 @@
   testing.expectEqual(initialLength, anchors.length);
 </script>
 
-<script id=cookie>
-  testing.expectEqual('', document.cookie);
-  document.cookie = 'name=Oeschger;';
-  document.cookie = 'favorite_food=tripe;';
+<script id=cookie_basic>
+  // Basic cookie operations
+  document.cookie = 'testbasic1=Oeschger';
+  testing.expectEqual(true, document.cookie.includes('testbasic1=Oeschger'));
 
-  testing.expectEqual('name=Oeschger; favorite_food=tripe', document.cookie);
-  // "" should be returned, but the framework overrules it atm
+  document.cookie = 'testbasic2=tripe';
+  testing.expectEqual(true, document.cookie.includes('testbasic1=Oeschger'));
+  testing.expectEqual(true, document.cookie.includes('testbasic2=tripe'));
+
+  // HttpOnly should be ignored from JavaScript
+  const beforeHttp = document.cookie;
   document.cookie = 'IgnoreMy=Ghost; HttpOnly';
-  testing.expectEqual('name=Oeschger; favorite_food=tripe', document.cookie);
+  testing.expectEqual(false, document.cookie.includes('IgnoreMy=Ghost'));
+
+  // Clean up
+  document.cookie = 'testbasic1=; Max-Age=0';
+  document.cookie = 'testbasic2=; Max-Age=0';
+</script>
+
+<script id=cookie_special_chars>
+  // Test special characters in cookie values
+  document.cookie = 'testspaces=hello world';
+  testing.expectEqual(true, document.cookie.includes('testspaces=hello world'));
+  document.cookie = 'testspaces=; Max-Age=0';
+
+  // Test various allowed special characters
+  document.cookie = 'testspecial=!#$%&\'()*+-./';
+  testing.expectEqual(true, document.cookie.includes('testspecial='));
+  document.cookie = 'testspecial=; Max-Age=0';
+
+  // Semicolon terminates the cookie value
+  document.cookie = 'testsemi=before;after';
+  testing.expectEqual(true, document.cookie.includes('testsemi=before'));
+  testing.expectEqual(false, document.cookie.includes('after'));
+  document.cookie = 'testsemi=; Max-Age=0';
+</script>
+
+<script id=cookie_empty_name>
+  // Cookie with empty name (just a value)
+  document.cookie = 'teststandalone';
+  testing.expectEqual(true, document.cookie.includes('teststandalone'));
+  document.cookie = 'teststandalone; Max-Age=0';
+</script>
+
+<script id=cookie_whitespace>
+  // Names and values should be trimmed
+  document.cookie = '  testtrim  =  trimmed_value  ';
+  testing.expectEqual(true, document.cookie.includes('testtrim=trimmed_value'));
+  document.cookie = 'testtrim=; Max-Age=0';
+</script>
+
+<script id=cookie_max_age>
+  // Max-Age=0 should immediately delete
+  document.cookie = 'testtemp0=value; Max-Age=0';
+  testing.expectEqual(false, document.cookie.includes('testtemp0=value'));
+
+  // Negative Max-Age should also delete
+  document.cookie = 'testinstant=value';
+  testing.expectEqual(true, document.cookie.includes('testinstant=value'));
+  document.cookie = 'testinstant=value; Max-Age=-1';
+  testing.expectEqual(false, document.cookie.includes('testinstant=value'));
+
+  // Positive Max-Age should keep cookie
+  document.cookie = 'testkept=value; Max-Age=3600';
+  testing.expectEqual(true, document.cookie.includes('testkept=value'));
+  document.cookie = 'testkept=; Max-Age=0';
+</script>
+
+<script id=cookie_overwrite>
+  // Setting a cookie with the same name should overwrite
+  document.cookie = 'testoverwrite=first';
+  testing.expectEqual(true, document.cookie.includes('testoverwrite=first'));
+
+  document.cookie = 'testoverwrite=second';
+  testing.expectEqual(true, document.cookie.includes('testoverwrite=second'));
+  testing.expectEqual(false, document.cookie.includes('testoverwrite=first'));
+
+  document.cookie = 'testoverwrite=; Max-Age=0';
+</script>
+
+<script id=cookie_path>
+  // Path attribute
+  document.cookie = 'testpath1=value; Path=/';
+  testing.expectEqual(true, document.cookie.includes('testpath1=value'));
+
+  // Different path cookie should coexist
+  document.cookie = 'testpath2=value2; Path=/src';
+  testing.expectEqual(true, document.cookie.includes('testpath1=value'));
+
+  document.cookie = 'testpath1=; Max-Age=0; Path=/';
+  document.cookie = 'testpath2=; Max-Age=0; Path=/src';
+</script>
+
+<script id=cookie_invalid_chars>
+  // Control characters (< 32 or > 126) should be rejected
+  const beforeBad = document.cookie;
+
+  document.cookie = 'testbad1\x00=value';
+  testing.expectEqual(false, document.cookie.includes('testbad1'));
+
+  document.cookie = 'testbad2\x1F=value';
+  testing.expectEqual(false, document.cookie.includes('testbad2'));
+
+  document.cookie = 'testbad3=val\x7F';
+  testing.expectEqual(false, document.cookie.includes('testbad3'));
 </script>
 
 <script id=createAttribute>

src/browser/tests/document/focus.html

@@ -81,6 +81,172 @@
 </script>
 
 
+<script id="focusin_focusout_events">
+{
+  const input1 = $('#input1');
+  const input2 = $('#input2');
+
+  if (document.activeElement) {
+    document.activeElement.blur();
+  }
+
+  let events = [];
+
+  input1.addEventListener('focus', () => events.push('focus1'));
+  input1.addEventListener('focusin', () => events.push('focusin1'));
+  input1.addEventListener('blur', () => events.push('blur1'));
+  input1.addEventListener('focusout', () => events.push('focusout1'));
+  input2.addEventListener('focus', () => events.push('focus2'));
+  input2.addEventListener('focusin', () => events.push('focusin2'));
+
+  // Focus input1 — should fire focus then focusin
+  input1.focus();
+  testing.expectEqual('focus1,focusin1', events.join(','));
+
+  // Focus input2 — should fire blur, focusout on input1, then focus, focusin on input2
+  events = [];
+  input2.focus();
+  testing.expectEqual('blur1,focusout1,focus2,focusin2', events.join(','));
+}
+</script>
+
+<script id="focusin_bubbles">
+{
+  const input1 = $('#input1');
+
+  if (document.activeElement) {
+    document.activeElement.blur();
+  }
+
+  let bodyFocusin = 0;
+  let bodyFocus = 0;
+
+  document.body.addEventListener('focusin', () => bodyFocusin++);
+  document.body.addEventListener('focus', () => bodyFocus++);
+
+  input1.focus();
+
+  // focusin should bubble to body, focus should not
+  testing.expectEqual(1, bodyFocusin);
+  testing.expectEqual(0, bodyFocus);
+}
+</script>
+
+<script id="focusout_bubbles">
+{
+  const input1 = $('#input1');
+
+  input1.focus();
+
+  let bodyFocusout = 0;
+  let bodyBlur = 0;
+
+  document.body.addEventListener('focusout', () => bodyFocusout++);
+  document.body.addEventListener('blur', () => bodyBlur++);
+
+  input1.blur();
+
+  // focusout should bubble to body, blur should not
+  testing.expectEqual(1, bodyFocusout);
+  testing.expectEqual(0, bodyBlur);
+}
+</script>
+
+<script id="focus_relatedTarget">
+{
+  const input1 = $('#input1');
+  const input2 = $('#input2');
+
+  if (document.activeElement) {
+    document.activeElement.blur();
+  }
+
+  let focusRelated = null;
+  let blurRelated = null;
+  let focusinRelated = null;
+  let focusoutRelated = null;
+
+  input1.addEventListener('blur', (e) => { blurRelated = e.relatedTarget; });
+  input1.addEventListener('focusout', (e) => { focusoutRelated = e.relatedTarget; });
+  input2.addEventListener('focus', (e) => { focusRelated = e.relatedTarget; });
+  input2.addEventListener('focusin', (e) => { focusinRelated = e.relatedTarget; });
+
+  input1.focus();
+  input2.focus();
+
+  // blur/focusout on input1 should have relatedTarget = input2 (gaining focus)
+  testing.expectEqual(input2, blurRelated);
+  testing.expectEqual(input2, focusoutRelated);
+
+  // focus/focusin on input2 should have relatedTarget = input1 (losing focus)
+  testing.expectEqual(input1, focusRelated);
+  testing.expectEqual(input1, focusinRelated);
+}
+</script>
+
+<script id="blur_relatedTarget_null">
+{
+  const btn = $('#btn1');
+
+  btn.focus();
+
+  let blurRelated = 'not_set';
+  btn.addEventListener('blur', (e) => { blurRelated = e.relatedTarget; });
+  btn.blur();
+
+  // blur without moving to another element should have relatedTarget = null
+  testing.expectEqual(null, blurRelated);
+}
+</script>
+
+<script id="focus_event_properties">
+{
+  const input1 = $('#input1');
+  const input2 = $('#input2');
+
+  if (document.activeElement) {
+    document.activeElement.blur();
+  }
+
+  let focusEvent = null;
+  let focusinEvent = null;
+  let blurEvent = null;
+  let focusoutEvent = null;
+
+  input1.addEventListener('blur', (e) => { blurEvent = e; });
+  input1.addEventListener('focusout', (e) => { focusoutEvent = e; });
+  input2.addEventListener('focus', (e) => { focusEvent = e; });
+  input2.addEventListener('focusin', (e) => { focusinEvent = e; });
+
+  input1.focus();
+  input2.focus();
+
+  // All four should be FocusEvent instances
+  testing.expectEqual(true, blurEvent instanceof FocusEvent);
+  testing.expectEqual(true, focusoutEvent instanceof FocusEvent);
+  testing.expectEqual(true, focusEvent instanceof FocusEvent);
+  testing.expectEqual(true, focusinEvent instanceof FocusEvent);
+
+  // All four should be composed per spec
+  testing.expectEqual(true, blurEvent.composed);
+  testing.expectEqual(true, focusoutEvent.composed);
+  testing.expectEqual(true, focusEvent.composed);
+  testing.expectEqual(true, focusinEvent.composed);
+
+  // None should be cancelable
+  testing.expectEqual(false, blurEvent.cancelable);
+  testing.expectEqual(false, focusoutEvent.cancelable);
+  testing.expectEqual(false, focusEvent.cancelable);
+  testing.expectEqual(false, focusinEvent.cancelable);
+
+  // blur/focus don't bubble, focusin/focusout do
+  testing.expectEqual(false, blurEvent.bubbles);
+  testing.expectEqual(true, focusoutEvent.bubbles);
+  testing.expectEqual(false, focusEvent.bubbles);
+  testing.expectEqual(true, focusinEvent.bubbles);
+}
+</script>
+
 <script id="focus_disconnected">
 {
   const focused = document.activeElement;
@@ -88,3 +254,68 @@
   testing.expectEqual(focused, document.activeElement);
 }
 </script>
+
+<script id="click_focuses_element">
+{
+  const input1 = $('#input1');
+  const input2 = $('#input2');
+
+  if (document.activeElement) {
+    document.activeElement.blur();
+  }
+
+  let focusCount = 0;
+  let blurCount = 0;
+
+  input1.addEventListener('focus', () => focusCount++);
+  input1.addEventListener('blur', () => blurCount++);
+  input2.addEventListener('focus', () => focusCount++);
+
+  // Click input1 — should focus it and fire focus event
+  input1.click();
+  testing.expectEqual(input1, document.activeElement);
+  testing.expectEqual(1, focusCount);
+  testing.expectEqual(0, blurCount);
+
+  // Click input2 — should move focus, fire blur on input1 and focus on input2
+  input2.click();
+  testing.expectEqual(input2, document.activeElement);
+  testing.expectEqual(2, focusCount);
+  testing.expectEqual(1, blurCount);
+}
+</script>
+
+<script id="click_focuses_button">
+{
+  const btn = $('#btn1');
+
+  if (document.activeElement) {
+    document.activeElement.blur();
+  }
+
+  btn.click();
+  testing.expectEqual(btn, document.activeElement);
+}
+</script>
+
+<script id="focus_disconnected_no_blur">
+{
+  const input1 = $('#input1');
+
+  if (document.activeElement) {
+    document.activeElement.blur();
+  }
+
+  input1.focus();
+  testing.expectEqual(input1, document.activeElement);
+
+  let blurCount = 0;
+  input1.addEventListener('blur', () => { blurCount++ });
+
+  // Focusing a disconnected element should be a no-op:
+  // blur must not fire on the currently focused element
+  document.createElement('a').focus();
+  testing.expectEqual(input1, document.activeElement);
+  testing.expectEqual(0, blurCount);
+}
+</script>

src/browser/tests/document/insert_adjacent_html.html

@@ -41,4 +41,53 @@
   testing.expectEqual("DIV", newElement.tagName);
   testing.expectEqual("after begin", newElement.innerText);
   testing.expectEqual("afterbegin", newElement.className);
+
+  const fuzzWrapper = document.createElement("div");
+  fuzzWrapper.id = "fuzz-wrapper";
+  document.body.appendChild(fuzzWrapper);
+
+  const fuzzCases = [
+    // These cases have no <body> element (or empty body), so nothing is inserted
+    { name: "empty string", html: "", expectElements: 0 },
+    { name: "comment only", html: "<!-- comment -->", expectElements: 0 },
+    { name: "doctype only", html: "<!DOCTYPE html>", expectElements: 0 },
+    { name: "full empty doc", html: "<!DOCTYPE html><html><head></head><body></body></html>", expectElements: 0 },
+
+    { name: "whitespace only", html: "   ", expectElements: 0 },
+    { name: "newlines only", html: "\n\n\n", expectElements: 0 },
+    { name: "just text", html: "plain text", expectElements: 0 },
+    // Head-only elements: Extracted from <head> container
+    { name: "empty meta", html: "<meta>", expectElements: 1 },
+    { name: "empty title", html: "<title></title>", expectElements: 1 },
+    { name: "empty head", html: "<head></head>", expectElements: 0 },  // Container with no children
+    { name: "empty body", html: "<body></body>", expectElements: 0 },  // Container with no children
+    { name: "empty html", html: "<html></html>", expectElements: 0 },  // Container with no children
+    { name: "meta only", html: "<meta charset='utf-8'>", expectElements: 1 },
+    { name: "title only", html: "<title>Test</title>", expectElements: 1 },
+    { name: "link only", html: "<link rel='stylesheet' href='test.css'>", expectElements: 1 },
+    { name: "meta and title", html: "<meta charset='utf-8'><title>Test</title>", expectElements: 2 },
+    { name: "script only", html: "<script>console.log('hi')<\/script>", expectElements: 1 },
+    { name: "style only", html: "<style>body { color: red; }<\/style>", expectElements: 1 },
+    { name: "unclosed div", html: "<div>content", expectElements: 1 },
+    { name: "unclosed span", html: "<span>text", expectElements: 1 },
+    { name: "invalid tag", html: "<notarealtag>content</notarealtag>", expectElements: 1 },
+    { name: "malformed", html: "<<div>>test<</div>>", expectElements: 1 },  // Parser handles it
+    { name: "just closing tag", html: "</div>", expectElements: 0 },
+    { name: "nested empty", html: "<div><div></div></div>", expectElements: 1 },
+    { name: "multiple top-level", html: "<span>1</span><span>2</span><span>3</span>", expectElements: 3 },
+    { name: "mixed text and elements", html: "Text before<b>bold</b>Text after", expectElements: 1 },
+    { name: "deeply nested", html: "<div><div><div><span>deep</span></div></div></div>", expectElements: 1 },
+  ];
+
+  fuzzCases.forEach((tc, idx) => {
+    fuzzWrapper.innerHTML = "";
+    fuzzWrapper.insertAdjacentHTML("beforeend", tc.html);
+    if (tc.expectElements !== fuzzWrapper.childElementCount) {
+      console.warn(`Fuzz idx: ${idx}`);
+      testing.expectEqual(tc.expectElements, fuzzWrapper.childElementCount);
+    }
+  });
+
+  // Clean up
+  document.body.removeChild(fuzzWrapper);
 </script>

src/browser/tests/document/query_selector.html

@@ -23,6 +23,7 @@
 <main>Main content</main>
 
 <script id=byId name="test1">
+  testing.expectEqual(1, document.querySelector.length);
   testing.expectError("SyntaxError: Syntax Error", () => document.querySelector(''));
   testing.withError((err) => {
     testing.expectEqual(12, err.code);
@@ -269,3 +270,36 @@
   testing.expectEqual('rect', document.querySelector('svg g rect').tagName);
 }
 </script>
+
+<script id=special>
+  testing.expectEqual(null, document.querySelector('\\'));
+
+  testing.expectEqual(null, document.querySelector('div\\'));
+  testing.expectEqual(null, document.querySelector('.test-class\\'));
+  testing.expectEqual(null, document.querySelector('#byId\\'));
+</script>
+
+<div class="café">Non-ASCII class 1</div>
+<div class="日本語">Non-ASCII class 2</div>
+<span id="niño">Non-ASCII ID 1</span>
+<p id="🎨">Non-ASCII ID 2</p>
+
+<script id=nonAsciiSelectors>
+  testing.expectEqual('Non-ASCII class 1', document.querySelector('.café').textContent);
+  testing.expectEqual('Non-ASCII class 2', document.querySelector('.日本語').textContent);
+
+  testing.expectEqual('Non-ASCII ID 1', document.querySelector('#niño').textContent);
+  testing.expectEqual('Non-ASCII ID 2', document.querySelector('#🎨').textContent);
+
+  testing.expectEqual('Non-ASCII class 1', document.querySelector('div.café').textContent);
+  testing.expectEqual('Non-ASCII ID 1', document.querySelector('span#niño').textContent);
+</script>
+
+<span id=".,:!">Punctuation test</span>
+
+<script id=escapedPunctuation>
+{
+  // Test escaped punctuation in ID selectors
+  testing.expectEqual('Punctuation test', document.querySelector('#\\.\\,\\:\\!').textContent);
+}
+</script>

src/browser/tests/document/query_selector_all.html

@@ -27,7 +27,9 @@
     testing.expectEqual(expected.length, result.length);
     testing.expectEqual(expected, Array.from(result).map((e) => e.textContent));
     testing.expectEqual(expected, Array.from(result.values()).map((e) => e.textContent));
+
     testing.expectEqual(expected.map((e, i) => i), Array.from(result.keys()));
+    testing.expectEqual(expected.map((e, i) => i.toString()), Object.keys(result));
   }
 </script>
 
@@ -376,3 +378,93 @@
 }
 </script>
 
+<form id="form-validity-test">
+  <input id="vi-required-empty" type="text" required>
+  <input id="vi-optional" type="text">
+  <input id="vi-hidden-required" type="hidden" required>
+  <fieldset id="vi-fieldset">
+    <input id="vi-nested-required" type="text" required>
+    <select id="vi-select-required" required>
+      <option value="">Pick one</option>
+      <option value="a">A</option>
+    </select>
+  </fieldset>
+</form>
+<input id="vi-checkbox" type="checkbox">
+
+<script id=invalidPseudo>
+{
+  // Inputs with required + empty value are :invalid
+  testing.expectEqual(true, document.getElementById('vi-required-empty').matches(':invalid'));
+  testing.expectEqual(false, document.getElementById('vi-required-empty').matches(':valid'));
+
+  // Inputs without required are :valid
+  testing.expectEqual(false, document.getElementById('vi-optional').matches(':invalid'));
+  testing.expectEqual(true, document.getElementById('vi-optional').matches(':valid'));
+
+  // hidden inputs are not candidates for constraint validation
+  testing.expectEqual(false, document.getElementById('vi-hidden-required').matches(':invalid'));
+  testing.expectEqual(false, document.getElementById('vi-hidden-required').matches(':valid'));
+
+  // select with required and empty selected value is :invalid
+  testing.expectEqual(true, document.getElementById('vi-select-required').matches(':invalid'));
+  testing.expectEqual(false, document.getElementById('vi-select-required').matches(':valid'));
+
+  // fieldset containing invalid controls is :invalid
+  testing.expectEqual(true, document.getElementById('vi-fieldset').matches(':invalid'));
+  testing.expectEqual(false, document.getElementById('vi-fieldset').matches(':valid'));
+
+  // form containing invalid controls is :invalid
+  testing.expectEqual(true, document.getElementById('form-validity-test').matches(':invalid'));
+  testing.expectEqual(false, document.getElementById('form-validity-test').matches(':valid'));
+}
+</script>
+
+<script id=validAfterValueSet>
+{
+  // After setting a value, a required input becomes :valid
+  const input = document.getElementById('vi-required-empty');
+  input.value = 'hello';
+  testing.expectEqual(false, input.matches(':invalid'));
+  testing.expectEqual(true, input.matches(':valid'));
+  input.value = '';
+}
+</script>
+
+<script id=indeterminatePseudo>
+{
+  const cb = document.getElementById('vi-checkbox');
+  testing.expectEqual(false, cb.matches(':indeterminate'));
+  cb.indeterminate = true;
+  testing.expectEqual(true, cb.matches(':indeterminate'));
+  cb.indeterminate = false;
+  testing.expectEqual(false, cb.matches(':indeterminate'));
+}
+</script>
+
+<script id=iterator_list_lifetime>
+  // This test is intended to ensure that a list remains alive as long as it
+  // must, i.e. as long as any iterator referencing the list is alive.
+  // This test depends on being able to force the v8 GC to cleanup, which
+  // we have no way of controlling. At worst, the test will pass without
+  // actually testing correct lifetime. But it was at least manually verified
+  // for me that this triggers plenty of GCs.
+  const expected = Array.from(document.querySelectorAll('*')).length;
+  {
+    let keys = [];
+
+    // Phase 1: Create many lists+iterators to fill up the arena pool
+    for (let i = 0; i < 1000; i++) {
+      let list = document.querySelectorAll('*');
+      keys.push(list.keys());
+
+      // Create an Event every iteration to compete for arenas
+      new Event('arena_compete');
+    }
+
+    for (let k of keys) {
+      const result = Array.from(k);
+      testing.expectEqual(expected, result.length);
+    }
+  }
+</script>

src/browser/tests/document/replace_children.html

@@ -0,0 +1,344 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<head>
+  <title>document.replaceChildren Tests</title>
+</head>
+<body>
+  <div id="test">Original content</div>
+</body>
+
+<script id=error_multiple_elements>
+  {
+    // Test that we cannot have more than one Element child
+    const doc = new Document();
+    const div1 = doc.createElement('div');
+    const div2 = doc.createElement('div');
+
+    testing.expectError('HierarchyRequest', () => {
+      doc.replaceChildren(div1, div2);
+    });
+  }
+</script>
+
+<script id=error_multiple_elements_via_fragment>
+  {
+    // Test that we cannot have more than one Element child via DocumentFragment
+    const doc = new Document();
+    const fragment = doc.createDocumentFragment();
+    fragment.appendChild(doc.createElement('div'));
+    fragment.appendChild(doc.createElement('span'));
+
+    testing.expectError('HierarchyRequest', () => {
+      doc.replaceChildren(fragment);
+    });
+  }
+</script>
+
+<script id=error_multiple_doctypes>
+  {
+    // Test that we cannot have more than one DocumentType child
+    const doc = new Document();
+    const doctype1 = doc.implementation.createDocumentType('html', '', '');
+    const doctype2 = doc.implementation.createDocumentType('html', '', '');
+
+    testing.expectError('HierarchyRequest', () => {
+      doc.replaceChildren(doctype1, doctype2);
+    });
+  }
+</script>
+
+<script id=error_text_node>
+  {
+    // Test that we cannot insert Text nodes directly into Document
+    const doc = new Document();
+
+    testing.expectError('HierarchyRequest', () => {
+      doc.replaceChildren('Just text');
+    });
+  }
+</script>
+
+<script id=error_text_with_element>
+  {
+    // Test that we cannot insert Text nodes even with valid Element
+    const doc = new Document();
+    const html = doc.createElement('html');
+
+    testing.expectError('HierarchyRequest', () => {
+      doc.replaceChildren('Text 1', html, 'Text 2');
+    });
+  }
+</script>
+
+<script id=error_append_multiple_elements>
+  {
+    // Test that append also validates
+    const doc = new Document();
+    doc.append(doc.createElement('html'));
+
+    const div = doc.createElement('div');
+    testing.expectError('HierarchyRequest', () => {
+      doc.append(div);
+    });
+  }
+</script>
+
+<script id=error_prepend_multiple_elements>
+  {
+    // Test that prepend also validates
+    const doc = new Document();
+    doc.prepend(doc.createElement('html'));
+
+    const div = doc.createElement('div');
+    testing.expectError('HierarchyRequest', () => {
+      doc.prepend(div);
+    });
+  }
+</script>
+
+<script id=error_append_text>
+  {
+    // Test that append rejects text nodes
+    const doc = new Document();
+
+    testing.expectError('HierarchyRequest', () => {
+      doc.append('text');
+    });
+  }
+</script>
+
+<script id=error_prepend_text>
+  {
+    // Test that prepend rejects text nodes
+    const doc = new Document();
+
+    testing.expectError('HierarchyRequest', () => {
+      doc.prepend('text');
+    });
+  }
+</script>
+
+<script id=replace_with_single_element>
+  {
+    const doc = new Document();
+    const html = doc.createElement('html');
+    html.id = 'replaced';
+    html.textContent = 'New content';
+
+    doc.replaceChildren(html);
+
+    testing.expectEqual(1, doc.childNodes.length);
+    testing.expectEqual(html, doc.firstChild);
+    testing.expectEqual('replaced', doc.firstChild.id);
+  }
+</script>
+
+<script id=replace_with_comments>
+  {
+    const doc = new Document();
+    const comment1 = doc.createComment('Comment 1');
+    const html = doc.createElement('html');
+    const comment2 = doc.createComment('Comment 2');
+
+    doc.replaceChildren(comment1, html, comment2);
+
+    testing.expectEqual(3, doc.childNodes.length);
+    testing.expectEqual('#comment', doc.firstChild.nodeName);
+    testing.expectEqual('Comment 1', doc.firstChild.textContent);
+    testing.expectEqual('html', doc.childNodes[1].nodeName);
+    testing.expectEqual('#comment', doc.lastChild.nodeName);
+    testing.expectEqual('Comment 2', doc.lastChild.textContent);
+  }
+</script>
+
+<script id=replace_with_empty>
+  {
+    const doc = new Document();
+    // First add some content
+    const div = doc.createElement('div');
+    doc.replaceChildren(div);
+    testing.expectEqual(1, doc.childNodes.length);
+
+    // Now replace with nothing
+    doc.replaceChildren();
+
+    testing.expectEqual(0, doc.childNodes.length);
+    testing.expectEqual(null, doc.firstChild);
+    testing.expectEqual(null, doc.lastChild);
+  }
+</script>
+
+<script id=replace_removes_old_children>
+  {
+    const doc = new Document();
+    const comment1 = doc.createComment('old');
+
+    doc.replaceChildren(comment1);
+    testing.expectEqual(1, doc.childNodes.length);
+    testing.expectEqual(doc, comment1.parentNode);
+
+    const html = doc.createElement('html');
+    html.id = 'new';
+
+    doc.replaceChildren(html);
+
+    // Old child should be removed
+    testing.expectEqual(null, comment1.parentNode);
+    testing.expectEqual(1, doc.childNodes.length);
+    testing.expectEqual('new', doc.firstChild.id);
+  }
+</script>
+
+<script id=replace_with_document_fragment_valid>
+  {
+    const doc = new Document();
+    const fragment = doc.createDocumentFragment();
+    const html = doc.createElement('html');
+    const comment = doc.createComment('comment');
+
+    fragment.appendChild(comment);
+    fragment.appendChild(html);
+
+    doc.replaceChildren(fragment);
+
+    // Fragment contents should be moved
+    testing.expectEqual(2, doc.childNodes.length);
+    testing.expectEqual('#comment', doc.firstChild.nodeName);
+    testing.expectEqual('html', doc.lastChild.nodeName);
+
+    // Fragment should be empty now
+    testing.expectEqual(0, fragment.childNodes.length);
+  }
+</script>
+
+<script id=replace_maintains_child_order>
+  {
+    const doc = new Document();
+    const nodes = [];
+
+    // Document can have: comment, processing instruction, doctype, element
+    nodes.push(doc.createComment('comment'));
+    nodes.push(doc.createElement('html'));
+
+    doc.replaceChildren(...nodes);
+
+    testing.expectEqual(2, doc.childNodes.length);
+    testing.expectEqual('#comment', doc.childNodes[0].nodeName);
+    testing.expectEqual('html', doc.childNodes[1].nodeName);
+  }
+</script>
+
+<script id=replace_with_nested_structure>
+  {
+    const doc = new Document();
+    const outer = doc.createElement('html');
+    outer.id = 'outer';
+    const middle = doc.createElement('body');
+    middle.id = 'middle';
+    const inner = doc.createElement('span');
+    inner.id = 'inner';
+    inner.textContent = 'Nested';
+
+    middle.appendChild(inner);
+    outer.appendChild(middle);
+
+    doc.replaceChildren(outer);
+
+    testing.expectEqual(1, doc.childNodes.length);
+    testing.expectEqual('outer', doc.firstChild.id);
+
+    const foundInner = doc.getElementById('inner');
+    testing.expectEqual(inner, foundInner);
+    testing.expectEqual('Nested', foundInner.textContent);
+  }
+</script>
+
+<script id=consecutive_replaces>
+  {
+    const doc = new Document();
+    const html1 = doc.createElement('html');
+    html1.id = 'first-replace';
+    doc.replaceChildren(html1);
+    testing.expectEqual('first-replace', doc.firstChild.id);
+
+    // Replace element with comments
+    const comment = doc.createComment('in between');
+    doc.replaceChildren(comment);
+    testing.expectEqual(1, doc.childNodes.length);
+    testing.expectEqual('#comment', doc.firstChild.nodeName);
+
+    // Replace comments with new element
+    const html2 = doc.createElement('html');
+    html2.id = 'second-replace';
+    doc.replaceChildren(html2);
+    testing.expectEqual('second-replace', doc.firstChild.id);
+    testing.expectEqual(1, doc.childNodes.length);
+
+    // First element should no longer be in document
+    testing.expectEqual(null, html1.parentNode);
+    testing.expectEqual(null, comment.parentNode);
+  }
+</script>
+
+<script id=replace_with_comments_only>
+  {
+    const doc = new Document();
+    const comment1 = doc.createComment('First');
+    const comment2 = doc.createComment('Second');
+
+    doc.replaceChildren(comment1, comment2);
+
+    testing.expectEqual(2, doc.childNodes.length);
+    testing.expectEqual('#comment', doc.firstChild.nodeName);
+    testing.expectEqual('First', doc.firstChild.textContent);
+    testing.expectEqual('#comment', doc.lastChild.nodeName);
+    testing.expectEqual('Second', doc.lastChild.textContent);
+  }
+</script>
+
+<script id=error_fragment_with_text>
+  {
+    // DocumentFragment with text should fail when inserted into Document
+    const doc = new Document();
+    const fragment = doc.createDocumentFragment();
+    fragment.appendChild(doc.createTextNode('text'));
+    fragment.appendChild(doc.createElement('html'));
+
+    testing.expectError('HierarchyRequest', () => {
+      doc.replaceChildren(fragment);
+    });
+  }
+</script>
+
+<script id=append_valid_nodes>
+  {
+    const doc = new Document();
+    const comment = doc.createComment('test');
+    const html = doc.createElement('html');
+
+    doc.append(comment);
+    testing.expectEqual(1, doc.childNodes.length);
+
+    doc.append(html);
+    testing.expectEqual(2, doc.childNodes.length);
+    testing.expectEqual('#comment', doc.firstChild.nodeName);
+    testing.expectEqual('html', doc.lastChild.nodeName);
+  }
+</script>
+
+<script id=prepend_valid_nodes>
+  {
+    const doc = new Document();
+    const html = doc.createElement('html');
+    const comment = doc.createComment('test');
+
+    doc.prepend(html);
+    testing.expectEqual(1, doc.childNodes.length);
+
+    doc.prepend(comment);
+    testing.expectEqual(2, doc.childNodes.length);
+    testing.expectEqual('#comment', doc.firstChild.nodeName);
+    testing.expectEqual('html', doc.lastChild.nodeName);
+  }
+</script>

src/browser/tests/domimplementation.html

@@ -108,6 +108,20 @@
   }
 </script>
 
+<script id=createHTMLDocument_nulll_title>
+  {
+    const impl = document.implementation;
+    const doc = impl.createHTMLDocument(null);
+
+    testing.expectEqual('null', doc.title);
+
+    // Should have title element in head
+    const titleElement = doc.head.querySelector('title');
+    testing.expectEqual(true, titleElement !== null);
+    testing.expectEqual('null', titleElement.textContent);
+  }
+</script>
+
 <script id=createHTMLDocument_structure>
   {
     const impl = document.implementation;
@@ -168,7 +182,7 @@
     const root = doc.documentElement;
     testing.expectEqual(true, root !== null);
     // TODO: XML documents should preserve case, but we currently uppercase
-    testing.expectEqual('ROOT', root.tagName);
+    testing.expectEqual('root', root.tagName);
   }
 </script>
 
@@ -206,10 +220,9 @@
     const doc = impl.createDocument('http://example.com', 'prefix:localName', null);
 
     const root = doc.documentElement;
-    // TODO: XML documents should preserve case, but we currently uppercase
-    testing.expectEqual('prefix:LOCALNAME', root.tagName);
-    // TODO: Custom namespaces are being overridden to XHTML namespace
-    testing.expectEqual('http://www.w3.org/1999/xhtml', root.namespaceURI);
+    testing.expectEqual('prefix:localName', root.tagName);
+    // TODO: Custom namespaces are being replaced with an empty value
+    testing.expectEqual('http://lightpanda.io/unsupported/namespace', root.namespaceURI);
   }
 </script>
 
@@ -224,8 +237,7 @@
     doc.documentElement.appendChild(child);
 
     testing.expectEqual(1, doc.documentElement.childNodes.length);
-    // TODO: XML documents should preserve case, but we currently uppercase
-    testing.expectEqual('CHILD', doc.documentElement.firstChild.tagName);
+    testing.expectEqual('child', doc.documentElement.firstChild.tagName);
     testing.expectEqual('Test', doc.documentElement.firstChild.textContent);
   }
 </script>

src/browser/tests/domparser.html

@@ -364,14 +364,14 @@
   ];
 
   for (const mime of mimes) {
-    const doc = parser.parseFromString(sampleXML, "text/xml");
+    const doc = parser.parseFromString(sampleXML, mime);
     const { firstChild: { childNodes, children: collection, tagName }, children } = doc;
     // doc.
     testing.expectEqual(true, doc instanceof XMLDocument);
     testing.expectEqual(1, children.length);
     // firstChild.
     // TODO: Modern browsers expect this in lowercase.
-    testing.expectEqual("CATALOG", tagName);
+    testing.expectEqual("catalog", tagName);
     testing.expectEqual(25, childNodes.length);
     testing.expectEqual(12, collection.length);
     // Check children of first child.
@@ -379,12 +379,12 @@
       const {children: elements, id} = collection.item(i);
       testing.expectEqual("bk" + (100 + i + 1), id);
       // TODO: Modern browsers expect these in lowercase.
-      testing.expectEqual("AUTHOR", elements.item(0).tagName);
-      testing.expectEqual("TITLE", elements.item(1).tagName);
-      testing.expectEqual("GENRE", elements.item(2).tagName);
-      testing.expectEqual("PRICE", elements.item(3).tagName);
-      testing.expectEqual("PUBLISH_DATE", elements.item(4).tagName);
-      testing.expectEqual("DESCRIPTION", elements.item(5).tagName);
+      testing.expectEqual("author", elements.item(0).tagName);
+      testing.expectEqual("title", elements.item(1).tagName);
+      testing.expectEqual("genre", elements.item(2).tagName);
+      testing.expectEqual("price", elements.item(3).tagName);
+      testing.expectEqual("publish_date", elements.item(4).tagName);
+      testing.expectEqual("description", elements.item(5).tagName);
     }
   }
 }

src/browser/tests/element/attributes.html

@@ -248,7 +248,7 @@
 }
 </script>
 
-<div id=legacy></a>
+<a id=legacy></a>
 <script id=legacy>
   {
     let a = document.getElementById('legacy').attributes;
@@ -266,3 +266,19 @@
     testing.expectEqual('abc123', a[0].value);
   }
 </script>
+
+<div id="nsa"></div>
+<script id=non-string-attr>
+  {
+    let nsa = document.getElementById('nsa');
+
+    nsa.setAttribute('int', 1);
+    testing.expectEqual('1', nsa.getAttribute('int'));
+
+    nsa.setAttribute('obj', {});
+    testing.expectEqual('[object Object]', nsa.getAttribute('obj'));
+
+    nsa.setAttribute('arr', []);
+    testing.expectEqual('', nsa.getAttribute('arr'));
+  }
+</script>

src/browser/tests/element/class_list.html

@@ -93,6 +93,29 @@
 }
 </script>
 
+<script id=replace_errors>
+{
+  const div = document.createElement('div');
+  div.className = 'foo bar';
+
+  testing.withError((err) => {
+    testing.expectEqual('SyntaxError', err.name);
+  }, () => div.classList.replace('', 'baz'));
+
+  testing.withError((err) => {
+    testing.expectEqual('SyntaxError', err.name);
+  }, () => div.classList.replace('foo', ''));
+
+  testing.withError((err) => {
+    testing.expectEqual('InvalidCharacterError', err.name);
+  }, () => div.classList.replace('foo bar', 'baz'));
+
+  testing.withError((err) => {
+    testing.expectEqual('InvalidCharacterError', err.name);
+  }, () => div.classList.replace('foo', 'bar baz'));
+}
+</script>
+
 <script id=item>
 {
   const div = document.createElement('div');
@@ -166,6 +189,29 @@
 }
 </script>
 
+<script id=classList_assignment>
+{
+  const div = document.createElement('div');
+
+  // Direct assignment should work (equivalent to classList.value = ...)
+  div.classList = 'foo bar baz';
+  testing.expectEqual('foo bar baz', div.className);
+  testing.expectEqual(3, div.classList.length);
+  testing.expectEqual(true, div.classList.contains('foo'));
+
+  // Assigning again should replace
+  div.classList = 'qux';
+  testing.expectEqual('qux', div.className);
+  testing.expectEqual(1, div.classList.length);
+  testing.expectEqual(false, div.classList.contains('foo'));
+
+  // Empty assignment
+  div.classList = '';
+  testing.expectEqual('', div.className);
+  testing.expectEqual(0, div.classList.length);
+}
+</script>
+
 <script id=errors>
 {
   const div = document.createElement('div');

src/browser/tests/element/css_style_properties.html

@@ -121,6 +121,29 @@
 }
 </script>
 
+<script id="propertyAssignment">
+{
+  const div = $('#test-div');
+  div.style.cssText = '';
+
+  // camelCase assignment
+  div.style.opacity = '0.5';
+  testing.expectEqual('0.5', div.style.opacity);
+
+  // bracket notation assignment
+  div.style['filter'] = 'blur(5px)';
+  testing.expectEqual('blur(5px)', div.style.filter);
+
+  // numeric value coerced to string
+  div.style.opacity = 1;
+  testing.expectEqual('1', div.style.opacity);
+
+  // assigning method names should be ignored (not intercepted)
+  div.style.setProperty('color', 'blue');
+  testing.expectEqual('blue', div.style.color);
+}
+</script>
+
 <script id="prototypeChainCheck">
 {
   const div = $('#test-div');
@@ -131,3 +154,11 @@
   testing.expectEqual(true, typeof div.style.getPropertyPriority === 'function');
 }
 </script>
+
+
+<div id=crash1 style="background-position: 5% .1em"></div>
+<script id="crash_case_1">
+{
+  testing.expectEqual('5% .1em', $('#crash1').style.backgroundPosition);
+}
+</script>

src/browser/tests/element/get_elements_by_tag_name_ns.html

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+
+<div id="container" xmlns="http://www.w3.org/1999/xhtml">
+  <div id="div1">div1</div>
+  <p id="p1">p1</p>
+  <div id="div2">div2</div>
+</div>
+
+<svg id="svgContainer" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
+  <circle id="circle1" cx="50" cy="50" r="40"/>
+  <rect id="rect1" x="10" y="10" width="30" height="30"/>
+  <circle id="circle2" cx="25" cy="25" r="10"/>
+</svg>
+
+<div id="mixed">
+  <div id="htmlDiv" xmlns="http://www.w3.org/1999/xhtml">HTML div</div>
+  <svg xmlns="http://www.w3.org/2000/svg">
+    <circle id="svgCircle" cx="10" cy="10" r="5"/>
+  </svg>
+</div>
+
+<script id=basic>
+{
+  const htmlNS = "http://www.w3.org/1999/xhtml";
+  const svgNS = "http://www.w3.org/2000/svg";
+
+  // Test HTML namespace
+  const htmlDivs = document.getElementsByTagNameNS(htmlNS, 'div');
+  testing.expectEqual(true, htmlDivs instanceof HTMLCollection);
+  testing.expectEqual(5, htmlDivs.length); // container, div1, div2, mixed, htmlDiv
+
+  const htmlPs = document.getElementsByTagNameNS(htmlNS, 'p');
+  testing.expectEqual(1, htmlPs.length);
+  testing.expectEqual('p1', htmlPs[0].id);
+}
+</script>
+
+<script id=svgNamespace>
+{
+  const svgNS = "http://www.w3.org/2000/svg";
+
+  const circles = document.getElementsByTagNameNS(svgNS, 'circle');
+  testing.expectEqual(3, circles.length); // circle1, circle2, svgCircle
+  testing.expectEqual('circle1', circles[0].id);
+  testing.expectEqual('circle2', circles[1].id);
+  testing.expectEqual('svgCircle', circles[2].id);
+
+  const rects = document.getElementsByTagNameNS(svgNS, 'rect');
+  testing.expectEqual(1, rects.length);
+  testing.expectEqual('rect1', rects[0].id);
+}
+</script>
+
+<script id=nullNamespace>
+{
+  // Null namespace should match elements with null namespace
+  const nullNsElements = document.getElementsByTagNameNS(null, 'div');
+  testing.expectEqual(0, nullNsElements.length); // Our divs are in HTML namespace
+}
+</script>
+
+<script id=wildcardNamespace>
+{
+  // Wildcard namespace "*" should match all namespaces
+  const allDivs = document.getElementsByTagNameNS('*', 'div');
+  testing.expectEqual(5, allDivs.length); // All divs regardless of namespace
+}
+</script>
+
+<script id=wildcardLocalName>
+{
+  const htmlNS = "http://www.w3.org/1999/xhtml";
+
+  // Wildcard local name should match all elements in that namespace
+  const allHtmlElements = document.getElementsByTagNameNS(htmlNS, '*');
+  testing.expectEqual(true, allHtmlElements.length > 0);
+}
+</script>
+
+<script id=caseSensitive>
+{
+  const htmlNS = "http://www.w3.org/1999/xhtml";
+
+  // getElementsByTagNameNS is case-sensitive for local names
+  const lowerDivs = document.getElementsByTagNameNS(htmlNS, 'div');
+  const upperDivs = document.getElementsByTagNameNS(htmlNS, 'DIV');
+
+  testing.expectEqual(5, lowerDivs.length);
+  testing.expectEqual(0, upperDivs.length); // Should be 0 because it's case-sensitive
+}
+</script>
+
+<script id=unknownNamespace>
+{
+  // Unknown namespace should still work
+  const unknownNs = document.getElementsByTagNameNS('http://example.com/unknown', 'div');
+  testing.expectEqual(0, unknownNs.length);
+}
+</script>
+
+<script id=emptyResult>
+{
+  const htmlNS = "http://www.w3.org/1999/xhtml";
+  const svgNS = "http://www.w3.org/2000/svg";
+
+  testing.expectEqual(0, document.getElementsByTagNameNS(htmlNS, 'nonexistent').length);
+  testing.expectEqual(0, document.getElementsByTagNameNS(svgNS, 'nonexistent').length);
+}
+</script>
+
+<script id=elementMethod>
+{
+  const htmlNS = "http://www.w3.org/1999/xhtml";
+  const container = document.getElementById('container');
+
+  // getElementsByTagNameNS on element should only search descendants
+  const divsInContainer = container.getElementsByTagNameNS(htmlNS, 'div');
+  testing.expectEqual(2, divsInContainer.length); // div1, div2 (not container itself)
+  testing.expectEqual('div1', divsInContainer[0].id);
+  testing.expectEqual('div2', divsInContainer[1].id);
+}
+</script>

src/browser/tests/element/html/anchor.html

@@ -11,11 +11,11 @@
 <script id=empty_href>
   testing.expectEqual('', $('#a0').href);
 
-  testing.expectEqual('http://127.0.0.1:9582/src/browser/tests/element/anchor1.html', $('#a1').href);
-  testing.expectEqual('http://127.0.0.1:9582/hello/world/anchor2.html', $('#a2').href);
+  testing.expectEqual(testing.BASE_URL + 'element/anchor1.html', $('#a1').href);
+  testing.expectEqual(testing.ORIGIN + 'hello/world/anchor2.html', $('#a2').href);
   testing.expectEqual('https://www.openmymind.net/Elixirs-With-Statement/', $('#a3').href);
 
-  testing.expectEqual('http://127.0.0.1:9582/src/browser/tests/element/html/foo', $('#link').href);
+  testing.expectEqual(testing.BASE_URL + 'element/html/foo', $('#link').href);
 </script>
 
 <script id=dynamic_anchor_defaults>
@@ -129,7 +129,7 @@
   testing.expectEqual('https://foo.bar/?q=bar#frag', link.href);
 
   link.href = 'foo';
-  testing.expectEqual('http://127.0.0.1:9582/src/browser/tests/element/html/foo', link.href);
+  testing.expectEqual(testing.BASE_URL + 'element/html/foo', link.href);
 
   testing.expectEqual('', link.type);
   link.type = 'text/html';
@@ -245,3 +245,11 @@
   testing.expectEqual('', b.toString());
 }
 </script>
+
+<script id=url_encode>
+  {
+    let a = document.createElement('a');
+    a.href = 'over 9000!';
+    testing.expectEqual(testing.BASE_URL + 'element/html/over%209000!', a.href);
+  }
+</script>

src/browser/tests/element/html/event_listeners.html

@@ -0,0 +1,537 @@
+<!DOCTYPE html>
+<script src="../../testing.js"></script>
+
+<!-- Test inline event listeners set via HTML attributes -->
+<div id="attr-click" onclick="window.x = 1"></div>
+<div id="attr-load" onload="window.x = 1"></div>
+<div id="attr-error" onerror="window.x = 1"></div>
+<div id="attr-focus" onfocus="window.x = 1"></div>
+<div id="attr-blur" onblur="window.x = 1"></div>
+<div id="attr-keydown" onkeydown="window.x = 1"></div>
+<div id="attr-mousedown" onmousedown="window.x = 1"></div>
+<div id="attr-submit" onsubmit="window.x = 1"></div>
+<div id="attr-wheel" onwheel="window.x = 1"></div>
+<div id="attr-scroll" onscroll="window.x = 1"></div>
+<div id="attr-contextmenu" oncontextmenu="window.x = 1"></div>
+<div id="no-listeners"></div>
+
+<script id="attr_listener_returns_function">
+{
+    // Inline listeners set via HTML attributes should return a function
+    testing.expectEqual('function', typeof $('#attr-click').onclick);
+    testing.expectEqual('function', typeof $('#attr-load').onload);
+    testing.expectEqual('function', typeof $('#attr-error').onerror);
+    testing.expectEqual('function', typeof $('#attr-focus').onfocus);
+    testing.expectEqual('function', typeof $('#attr-blur').onblur);
+    testing.expectEqual('function', typeof $('#attr-keydown').onkeydown);
+    testing.expectEqual('function', typeof $('#attr-mousedown').onmousedown);
+    testing.expectEqual('function', typeof $('#attr-submit').onsubmit);
+    testing.expectEqual('function', typeof $('#attr-wheel').onwheel);
+    testing.expectEqual('function', typeof $('#attr-scroll').onscroll);
+    testing.expectEqual('function', typeof $('#attr-contextmenu').oncontextmenu);
+}
+</script>
+
+<script id="no_attr_listener_returns_null">
+{
+    // Elements without inline listeners should return null
+    const div = $('#no-listeners');
+    testing.expectEqual(null, div.onclick);
+    testing.expectEqual(null, div.onload);
+    testing.expectEqual(null, div.onerror);
+    testing.expectEqual(null, div.onfocus);
+    testing.expectEqual(null, div.onblur);
+    testing.expectEqual(null, div.onkeydown);
+    testing.expectEqual(null, div.onmousedown);
+    testing.expectEqual(null, div.onsubmit);
+    testing.expectEqual(null, div.onwheel);
+    testing.expectEqual(null, div.onscroll);
+    testing.expectEqual(null, div.oncontextmenu);
+}
+</script>
+
+<script id="js_setter_getter">
+{
+    // Test setting and getting listeners via JavaScript property
+    const div = document.createElement('div');
+
+    // Initially null
+    testing.expectEqual(null, div.onclick);
+    testing.expectEqual(null, div.onload);
+    testing.expectEqual(null, div.onerror);
+
+    // Set listeners
+    const clickHandler = () => {};
+    const loadHandler = () => {};
+    const errorHandler = () => {};
+
+    div.onclick = clickHandler;
+    div.onload = loadHandler;
+    div.onerror = errorHandler;
+
+    // Verify they can be retrieved and are functions
+    testing.expectEqual('function', typeof div.onclick);
+    testing.expectEqual('function', typeof div.onload);
+    testing.expectEqual('function', typeof div.onerror);
+}
+</script>
+
+<script id="js_listener_invoke">
+{
+    // Test that JS-set listeners can be invoked directly
+    const div = document.createElement('div');
+    window.jsInvokeResult = 0;
+
+    div.onclick = () => { window.jsInvokeResult = 100; };
+    div.onclick();
+    testing.expectEqual(100, window.jsInvokeResult);
+
+    div.onload = () => { window.jsInvokeResult = 200; };
+    div.onload();
+    testing.expectEqual(200, window.jsInvokeResult);
+
+    div.onfocus = () => { window.jsInvokeResult = 300; };
+    div.onfocus();
+    testing.expectEqual(300, window.jsInvokeResult);
+}
+</script>
+
+<script id="js_listener_invoke_with_return">
+{
+    // Test that JS-set listeners return values when invoked
+    const div = document.createElement('div');
+
+    div.onclick = () => { return 'click-result'; };
+    testing.expectEqual('click-result', div.onclick());
+
+    div.onload = () => { return 42; };
+    testing.expectEqual(42, div.onload());
+
+    div.onfocus = () => { return { key: 'value' }; };
+    testing.expectEqual('value', div.onfocus().key);
+}
+</script>
+
+<script id="js_listener_invoke_with_args">
+{
+    // Test that JS-set listeners can receive arguments when invoked
+    const div = document.createElement('div');
+
+    div.onclick = (a, b) => { return a + b; };
+    testing.expectEqual(15, div.onclick(10, 5));
+
+    div.onload = (msg) => { return 'Hello, ' + msg; };
+    testing.expectEqual('Hello, World', div.onload('World'));
+}
+</script>
+
+<script id="js_setter_override">
+{
+    // Test that setting a new listener overrides the old one
+    const div = document.createElement('div');
+
+    const first = () => { return 1; };
+    const second = () => { return 2; };
+
+    div.onclick = first;
+    testing.expectEqual('function', typeof div.onclick);
+    testing.expectEqual(1, div.onclick());
+
+    div.onclick = second;
+    testing.expectEqual('function', typeof div.onclick);
+    testing.expectEqual(2, div.onclick());
+}
+</script>
+
+<script id="js_setter_null_clears_listener">
+{
+    // Setting an event handler property to null must silently clear it (not throw).
+    // Browsers also accept undefined and non-function values without throwing.
+    const div = document.createElement('div');
+
+    div.onload = () => 42;
+    testing.expectEqual('function', typeof div.onload);
+
+    // Setting to null removes the listener; getter returns null
+    div.onload = null;
+    testing.expectEqual(null, div.onload);
+
+    div.onerror = () => {};
+    div.onerror = null;
+    testing.expectEqual(null, div.onerror);
+
+    div.onclick = () => {};
+    div.onclick = null;
+    testing.expectEqual(null, div.onclick);
+}
+</script>
+
+<script id="different_event_types_independent">
+{
+    // Test that different event types are stored independently
+    const div = document.createElement('div');
+
+    const clickFn = () => {};
+    const focusFn = () => {};
+    const blurFn = () => {};
+
+    div.onclick = clickFn;
+    testing.expectEqual('function', typeof div.onclick);
+    testing.expectEqual(null, div.onfocus);
+    testing.expectEqual(null, div.onblur);
+
+    div.onfocus = focusFn;
+    testing.expectEqual('function', typeof div.onclick);
+    testing.expectEqual('function', typeof div.onfocus);
+    testing.expectEqual(null, div.onblur);
+
+    div.onblur = blurFn;
+    testing.expectEqual('function', typeof div.onclick);
+    testing.expectEqual('function', typeof div.onfocus);
+    testing.expectEqual('function', typeof div.onblur);
+}
+</script>
+
+<script id="keyboard_event_listeners">
+{
+    // Test keyboard event listener getters/setters
+    const div = document.createElement('div');
+
+    testing.expectEqual(null, div.onkeydown);
+    testing.expectEqual(null, div.onkeyup);
+    testing.expectEqual(null, div.onkeypress);
+
+    div.onkeydown = () => {};
+    div.onkeyup = () => {};
+    div.onkeypress = () => {};
+
+    testing.expectEqual('function', typeof div.onkeydown);
+    testing.expectEqual('function', typeof div.onkeyup);
+    testing.expectEqual('function', typeof div.onkeypress);
+}
+</script>
+
+<script id="mouse_event_listeners">
+{
+    // Test mouse event listener getters/setters
+    const div = document.createElement('div');
+
+    testing.expectEqual(null, div.onmousedown);
+    testing.expectEqual(null, div.onmouseup);
+    testing.expectEqual(null, div.onmousemove);
+    testing.expectEqual(null, div.onmouseover);
+    testing.expectEqual(null, div.onmouseout);
+    testing.expectEqual(null, div.ondblclick);
+
+    div.onmousedown = () => {};
+    div.onmouseup = () => {};
+    div.onmousemove = () => {};
+    div.onmouseover = () => {};
+    div.onmouseout = () => {};
+    div.ondblclick = () => {};
+
+    testing.expectEqual('function', typeof div.onmousedown);
+    testing.expectEqual('function', typeof div.onmouseup);
+    testing.expectEqual('function', typeof div.onmousemove);
+    testing.expectEqual('function', typeof div.onmouseover);
+    testing.expectEqual('function', typeof div.onmouseout);
+    testing.expectEqual('function', typeof div.ondblclick);
+}
+</script>
+
+<script id="pointer_event_listeners">
+{
+    // Test pointer event listener getters/setters
+    const div = document.createElement('div');
+
+    testing.expectEqual(null, div.onpointerdown);
+    testing.expectEqual(null, div.onpointerup);
+    testing.expectEqual(null, div.onpointermove);
+    testing.expectEqual(null, div.onpointerover);
+    testing.expectEqual(null, div.onpointerout);
+    testing.expectEqual(null, div.onpointerenter);
+    testing.expectEqual(null, div.onpointerleave);
+    testing.expectEqual(null, div.onpointercancel);
+
+    div.onpointerdown = () => {};
+    div.onpointerup = () => {};
+    div.onpointermove = () => {};
+    div.onpointerover = () => {};
+    div.onpointerout = () => {};
+    div.onpointerenter = () => {};
+    div.onpointerleave = () => {};
+    div.onpointercancel = () => {};
+
+    testing.expectEqual('function', typeof div.onpointerdown);
+    testing.expectEqual('function', typeof div.onpointerup);
+    testing.expectEqual('function', typeof div.onpointermove);
+    testing.expectEqual('function', typeof div.onpointerover);
+    testing.expectEqual('function', typeof div.onpointerout);
+    testing.expectEqual('function', typeof div.onpointerenter);
+    testing.expectEqual('function', typeof div.onpointerleave);
+    testing.expectEqual('function', typeof div.onpointercancel);
+}
+</script>
+
+<script id="form_event_listeners">
+{
+    // Test form event listener getters/setters
+    const form = document.createElement('form');
+
+    testing.expectEqual(null, form.onsubmit);
+    testing.expectEqual(null, form.onreset);
+    testing.expectEqual(null, form.onchange);
+    testing.expectEqual(null, form.oninput);
+    testing.expectEqual(null, form.oninvalid);
+
+    form.onsubmit = () => {};
+    form.onreset = () => {};
+    form.onchange = () => {};
+    form.oninput = () => {};
+    form.oninvalid = () => {};
+
+    testing.expectEqual('function', typeof form.onsubmit);
+    testing.expectEqual('function', typeof form.onreset);
+    testing.expectEqual('function', typeof form.onchange);
+    testing.expectEqual('function', typeof form.oninput);
+    testing.expectEqual('function', typeof form.oninvalid);
+}
+</script>
+
+<script id="drag_event_listeners">
+{
+    // Test drag event listener getters/setters
+    const div = document.createElement('div');
+
+    testing.expectEqual(null, div.ondrag);
+    testing.expectEqual(null, div.ondragstart);
+    testing.expectEqual(null, div.ondragend);
+    testing.expectEqual(null, div.ondragenter);
+    testing.expectEqual(null, div.ondragleave);
+    testing.expectEqual(null, div.ondragover);
+    testing.expectEqual(null, div.ondrop);
+
+    div.ondrag = () => {};
+    div.ondragstart = () => {};
+    div.ondragend = () => {};
+    div.ondragenter = () => {};
+    div.ondragleave = () => {};
+    div.ondragover = () => {};
+    div.ondrop = () => {};
+
+    testing.expectEqual('function', typeof div.ondrag);
+    testing.expectEqual('function', typeof div.ondragstart);
+    testing.expectEqual('function', typeof div.ondragend);
+    testing.expectEqual('function', typeof div.ondragenter);
+    testing.expectEqual('function', typeof div.ondragleave);
+    testing.expectEqual('function', typeof div.ondragover);
+    testing.expectEqual('function', typeof div.ondrop);
+}
+</script>
+
+<script id="clipboard_event_listeners">
+{
+    // Test clipboard event listener getters/setters
+    const div = document.createElement('div');
+
+    testing.expectEqual(null, div.oncopy);
+    testing.expectEqual(null, div.oncut);
+    testing.expectEqual(null, div.onpaste);
+
+    div.oncopy = () => {};
+    div.oncut = () => {};
+    div.onpaste = () => {};
+
+    testing.expectEqual('function', typeof div.oncopy);
+    testing.expectEqual('function', typeof div.oncut);
+    testing.expectEqual('function', typeof div.onpaste);
+}
+</script>
+
+<script id="scroll_event_listeners">
+{
+    // Test scroll event listener getters/setters
+    const div = document.createElement('div');
+
+    testing.expectEqual(null, div.onscroll);
+    testing.expectEqual(null, div.onscrollend);
+    testing.expectEqual(null, div.onresize);
+
+    div.onscroll = () => {};
+    div.onscrollend = () => {};
+    div.onresize = () => {};
+
+    testing.expectEqual('function', typeof div.onscroll);
+    testing.expectEqual('function', typeof div.onscrollend);
+    testing.expectEqual('function', typeof div.onresize);
+}
+</script>
+
+<script id="animation_event_listeners">
+{
+    // Test animation event listener getters/setters
+    const div = document.createElement('div');
+
+    testing.expectEqual(null, div.onanimationstart);
+    testing.expectEqual(null, div.onanimationend);
+    testing.expectEqual(null, div.onanimationiteration);
+    testing.expectEqual(null, div.onanimationcancel);
+
+    div.onanimationstart = () => {};
+    div.onanimationend = () => {};
+    div.onanimationiteration = () => {};
+    div.onanimationcancel = () => {};
+
+    testing.expectEqual('function', typeof div.onanimationstart);
+    testing.expectEqual('function', typeof div.onanimationend);
+    testing.expectEqual('function', typeof div.onanimationiteration);
+    testing.expectEqual('function', typeof div.onanimationcancel);
+}
+</script>
+
+<script id="transition_event_listeners">
+{
+    // Test transition event listener getters/setters
+    const div = document.createElement('div');
+
+    testing.expectEqual(null, div.ontransitionstart);
+    testing.expectEqual(null, div.ontransitionend);
+    testing.expectEqual(null, div.ontransitionrun);
+    testing.expectEqual(null, div.ontransitioncancel);
+
+    div.ontransitionstart = () => {};
+    div.ontransitionend = () => {};
+    div.ontransitionrun = () => {};
+    div.ontransitioncancel = () => {};
+
+    testing.expectEqual('function', typeof div.ontransitionstart);
+    testing.expectEqual('function', typeof div.ontransitionend);
+    testing.expectEqual('function', typeof div.ontransitionrun);
+    testing.expectEqual('function', typeof div.ontransitioncancel);
+}
+</script>
+
+<script id="misc_event_listeners">
+{
+    // Test miscellaneous event listener getters/setters
+    const div = document.createElement('div');
+
+    testing.expectEqual(null, div.onwheel);
+    testing.expectEqual(null, div.ontoggle);
+    testing.expectEqual(null, div.oncontextmenu);
+    testing.expectEqual(null, div.onselect);
+    testing.expectEqual(null, div.onabort);
+    testing.expectEqual(null, div.oncancel);
+    testing.expectEqual(null, div.onclose);
+
+    div.onwheel = () => {};
+    div.ontoggle = () => {};
+    div.oncontextmenu = () => {};
+    div.onselect = () => {};
+    div.onabort = () => {};
+    div.oncancel = () => {};
+    div.onclose = () => {};
+
+    testing.expectEqual('function', typeof div.onwheel);
+    testing.expectEqual('function', typeof div.ontoggle);
+    testing.expectEqual('function', typeof div.oncontextmenu);
+    testing.expectEqual('function', typeof div.onselect);
+    testing.expectEqual('function', typeof div.onabort);
+    testing.expectEqual('function', typeof div.oncancel);
+    testing.expectEqual('function', typeof div.onclose);
+}
+</script>
+
+<script id="media_event_listeners">
+{
+    // Test media event listener getters/setters
+    const div = document.createElement('div');
+
+    testing.expectEqual(null, div.onplay);
+    testing.expectEqual(null, div.onpause);
+    testing.expectEqual(null, div.onplaying);
+    testing.expectEqual(null, div.onended);
+    testing.expectEqual(null, div.onvolumechange);
+    testing.expectEqual(null, div.onwaiting);
+    testing.expectEqual(null, div.onseeking);
+    testing.expectEqual(null, div.onseeked);
+    testing.expectEqual(null, div.ontimeupdate);
+    testing.expectEqual(null, div.onloadstart);
+    testing.expectEqual(null, div.onprogress);
+    testing.expectEqual(null, div.onstalled);
+    testing.expectEqual(null, div.onsuspend);
+    testing.expectEqual(null, div.oncanplay);
+    testing.expectEqual(null, div.oncanplaythrough);
+    testing.expectEqual(null, div.ondurationchange);
+    testing.expectEqual(null, div.onemptied);
+    testing.expectEqual(null, div.onloadeddata);
+    testing.expectEqual(null, div.onloadedmetadata);
+    testing.expectEqual(null, div.onratechange);
+
+    div.onplay = () => {};
+    div.onpause = () => {};
+    div.onplaying = () => {};
+    div.onended = () => {};
+    div.onvolumechange = () => {};
+    div.onwaiting = () => {};
+    div.onseeking = () => {};
+    div.onseeked = () => {};
+    div.ontimeupdate = () => {};
+    div.onloadstart = () => {};
+    div.onprogress = () => {};
+    div.onstalled = () => {};
+    div.onsuspend = () => {};
+    div.oncanplay = () => {};
+    div.oncanplaythrough = () => {};
+    div.ondurationchange = () => {};
+    div.onemptied = () => {};
+    div.onloadeddata = () => {};
+    div.onloadedmetadata = () => {};
+    div.onratechange = () => {};
+
+    testing.expectEqual('function', typeof div.onplay);
+    testing.expectEqual('function', typeof div.onpause);
+    testing.expectEqual('function', typeof div.onplaying);
+    testing.expectEqual('function', typeof div.onended);
+    testing.expectEqual('function', typeof div.onvolumechange);
+    testing.expectEqual('function', typeof div.onwaiting);
+    testing.expectEqual('function', typeof div.onseeking);
+    testing.expectEqual('function', typeof div.onseeked);
+    testing.expectEqual('function', typeof div.ontimeupdate);
+    testing.expectEqual('function', typeof div.onloadstart);
+    testing.expectEqual('function', typeof div.onprogress);
+    testing.expectEqual('function', typeof div.onstalled);
+    testing.expectEqual('function', typeof div.onsuspend);
+    testing.expectEqual('function', typeof div.oncanplay);
+    testing.expectEqual('function', typeof div.oncanplaythrough);
+    testing.expectEqual('function', typeof div.ondurationchange);
+    testing.expectEqual('function', typeof div.onemptied);
+    testing.expectEqual('function', typeof div.onloadeddata);
+    testing.expectEqual('function', typeof div.onloadedmetadata);
+    testing.expectEqual('function', typeof div.onratechange);
+}
+</script>
+
+<img src="https://cdn.lightpanda.io/website/assets/images/docs/hn.png" />
+
+<script id="document-element-load">
+{
+  let asyncBlockDispatched = false;
+  const docElement = document.documentElement;
+
+  testing.async(async () => {
+    const result = await new Promise(resolve => {
+    // We should get this fired at capturing phase when a resource loaded.
+      docElement.addEventListener("load", e => {
+        testing.expectEqual(e.eventPhase, Event.CAPTURING_PHASE);
+        return resolve(true);
+      }, true);
+    });
+
+    asyncBlockDispatched = true;
+    testing.expectEqual(true, result);
+  });
+
+  testing.eventually(() => testing.expectEqual(true, asyncBlockDispatched));
+}
+</script>

src/browser/tests/element/html/fieldset.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<script src="../../testing.js"></script>
+
+<fieldset id="fs1" disabled name="group1">
+  <input type="text">
+</fieldset>
+<fieldset id="fs2">
+  <input type="text">
+</fieldset>
+
+<script id="disabled">
+  {
+    const fs1 = document.getElementById('fs1');
+    testing.expectEqual(true, fs1.disabled);
+
+    fs1.disabled = false;
+    testing.expectEqual(false, fs1.disabled);
+
+    const fs2 = document.getElementById('fs2');
+    testing.expectEqual(false, fs2.disabled);
+  }
+</script>
+
+<script id="name">
+  {
+    const fs1 = document.getElementById('fs1');
+    testing.expectEqual('group1', fs1.name);
+
+    fs1.name = 'updated';
+    testing.expectEqual('updated', fs1.name);
+
+    const fs2 = document.getElementById('fs2');
+    testing.expectEqual('', fs2.name);
+  }
+</script>

src/browser/tests/element/html/htmlelement-props.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<script src="../../testing.js"></script>
+
+<div id="d1" hidden>Hidden div</div>
+<div id="d2">Visible div</div>
+<input id="i1" tabindex="5">
+<div id="d3">No tabindex</div>
+
+<script id="hidden">
+  {
+    const d1 = document.getElementById('d1');
+    testing.expectEqual(true, d1.hidden);
+
+    d1.hidden = false;
+    testing.expectEqual(false, d1.hidden);
+
+    const d2 = document.getElementById('d2');
+    testing.expectEqual(false, d2.hidden);
+
+    d2.hidden = true;
+    testing.expectEqual(true, d2.hidden);
+  }
+</script>
+
+<script id="tabIndex">
+  {
+    const i1 = document.getElementById('i1');
+    testing.expectEqual(5, i1.tabIndex);
+
+    i1.tabIndex = 10;
+    testing.expectEqual(10, i1.tabIndex);
+
+    // Non-interactive elements default to -1
+    const d3 = document.getElementById('d3');
+    testing.expectEqual(-1, d3.tabIndex);
+
+    d3.tabIndex = 0;
+    testing.expectEqual(0, d3.tabIndex);
+
+    // Interactive elements default to 0 per spec
+    const input = document.createElement('input');
+    testing.expectEqual(0, input.tabIndex);
+
+    const button = document.createElement('button');
+    testing.expectEqual(0, button.tabIndex);
+
+    const a = document.createElement('a');
+    testing.expectEqual(0, a.tabIndex);
+
+    const select = document.createElement('select');
+    testing.expectEqual(0, select.tabIndex);
+
+    const textarea = document.createElement('textarea');
+    testing.expectEqual(0, textarea.tabIndex);
+  }
+</script>

src/browser/tests/element/html/image.html

@@ -32,12 +32,12 @@
 
     img.src = 'test.png';
     // src property returns resolved absolute URL
-    testing.expectEqual('http://127.0.0.1:9582/src/browser/tests/element/html/test.png', img.src);
+    testing.expectEqual(testing.BASE_URL + 'element/html/test.png', img.src);
     // getAttribute returns the raw attribute value
     testing.expectEqual('test.png', img.getAttribute('src'));
 
     img.src = '/absolute/path.png';
-    testing.expectEqual('http://127.0.0.1:9582/absolute/path.png', img.src);
+    testing.expectEqual(testing.ORIGIN + 'absolute/path.png', img.src);
     testing.expectEqual('/absolute/path.png', img.getAttribute('src'));
 
     img.src = 'https://example.com/image.png';
@@ -97,3 +97,79 @@
     testing.expectEqual('lazy', img.getAttribute('loading'));
 }
 </script>
+
+<script id="complete">
+{
+    // Image with no src is complete per spec
+    const img = document.createElement('img');
+    testing.expectEqual(true, img.complete);
+
+    // Image with src is also complete (headless browser, no actual fetch)
+    img.src = 'test.png';
+    testing.expectEqual(true, img.complete);
+
+    // Image constructor also complete
+    const img2 = new Image();
+    testing.expectEqual(true, img2.complete);
+}
+</script>
+
+<body></body>
+
+<script id="img-load-event">
+{
+  // An img fires a load event when src is set.
+  const img = document.createElement("img");
+  let result = false;
+  testing.async(async () => {
+    await new Promise(resolve => {
+      img.addEventListener("load", ({ bubbles, cancelBubble, cancelable, composed, isTrusted, target }) => {
+        testing.expectEqual(false, bubbles);
+        testing.expectEqual(false, cancelBubble);
+        testing.expectEqual(false, cancelable);
+        testing.expectEqual(false, composed);
+        testing.expectEqual(true, isTrusted);
+        testing.expectEqual(img, target);
+        result = true;
+        return resolve();
+      });
+      img.src = "https://cdn.lightpanda.io/website/assets/images/docs/hn.png";
+    });
+  });
+
+  testing.eventually(() => testing.expectEqual(true, result));
+}
+</script>
+
+<script id="img-no-load-without-src">
+{
+  // An img without src should not fire a load event.
+  let fired = false;
+  const img = document.createElement("img");
+  img.addEventListener("load", () => { fired = true; });
+  document.body.appendChild(img);
+  testing.eventually(() => testing.expectEqual(false, fired));
+}
+</script>
+
+<script id="lazy-src-set">
+{
+  // Append to DOM first, then set src — load should still fire.
+  const img = document.createElement("img");
+  let result = false;
+  img.onload = () => result = true;
+  document.body.appendChild(img);
+  img.src = "https://cdn.lightpanda.io/website/assets/images/docs/hn.png";
+
+  testing.eventually(() => testing.expectEqual(true, result));
+}
+</script>
+
+<script id=url_encode>
+  {
+    let img = document.createElement('img');
+    img.src = 'over 9000!?hello=world !';
+    testing.expectEqual('over 9000!?hello=world !', img.getAttribute('src'));
+    testing.expectEqual(testing.BASE_URL + 'element/html/over%209000!?hello=world%20!', img.src);
+  }
+</script>

src/browser/tests/element/html/input-attrs.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<script src="../../testing.js"></script>
+
+<input id="i1" placeholder="Enter name" min="0" max="100" step="5" autocomplete="email">
+<input id="i2" type="file" multiple>
+<input id="i3">
+
+<script id="placeholder">
+  {
+    const i1 = document.getElementById('i1');
+    testing.expectEqual('Enter name', i1.placeholder);
+
+    i1.placeholder = 'Updated';
+    testing.expectEqual('Updated', i1.placeholder);
+
+    const i3 = document.getElementById('i3');
+    testing.expectEqual('', i3.placeholder);
+  }
+</script>
+
+<script id="min">
+  {
+    const i1 = document.getElementById('i1');
+    testing.expectEqual('0', i1.min);
+
+    i1.min = '10';
+    testing.expectEqual('10', i1.min);
+
+    const i3 = document.getElementById('i3');
+    testing.expectEqual('', i3.min);
+  }
+</script>
+
+<script id="max">
+  {
+    const i1 = document.getElementById('i1');
+    testing.expectEqual('100', i1.max);
+
+    i1.max = '200';
+    testing.expectEqual('200', i1.max);
+
+    const i3 = document.getElementById('i3');
+    testing.expectEqual('', i3.max);
+  }
+</script>
+
+<script id="step">
+  {
+    const i1 = document.getElementById('i1');
+    testing.expectEqual('5', i1.step);
+
+    i1.step = '0.5';
+    testing.expectEqual('0.5', i1.step);
+
+    const i3 = document.getElementById('i3');
+    testing.expectEqual('', i3.step);
+  }
+</script>
+
+<script id="multiple">
+  {
+    const i2 = document.getElementById('i2');
+    testing.expectEqual(true, i2.multiple);
+
+    i2.multiple = false;
+    testing.expectEqual(false, i2.multiple);
+
+    const i3 = document.getElementById('i3');
+    testing.expectEqual(false, i3.multiple);
+
+    i3.multiple = true;
+    testing.expectEqual(true, i3.multiple);
+  }
+</script>
+
+<script id="autocomplete">
+  {
+    const i1 = document.getElementById('i1');
+    testing.expectEqual('email', i1.autocomplete);
+
+    i1.autocomplete = 'off';
+    testing.expectEqual('off', i1.autocomplete);
+
+    const i3 = document.getElementById('i3');
+    testing.expectEqual('', i3.autocomplete);
+  }
+</script>

src/browser/tests/element/html/input.html

@@ -46,7 +46,7 @@
     testing.expectEqual(5, input.maxLength);
     input.maxLength = 'banana';
     testing.expectEqual(0, input.maxLength);
-    testing.expectError('Error: NegativeValueNotAllowed', () => { input.maxLength = -45;});
+    testing.expectError('IndexSizeError: Index or size is negative or greater than the allowed amount', () => { input.maxLength = -45;});
 
     testing.expectEqual(20, input.size);
     input.size = 5;
@@ -57,9 +57,9 @@
 
     testing.expectEqual('', input.src);
     input.src = 'foo'
-    testing.expectEqual('http://127.0.0.1:9582/src/browser/tests/element/html/foo', input.src);
+    testing.expectEqual(testing.BASE_URL + 'element/html/foo', input.src);
     input.src = '-3'
-    testing.expectEqual('http://127.0.0.1:9582/src/browser/tests/element/html/-3', input.src);
+    testing.expectEqual(testing.BASE_URL + 'element/html/-3', input.src);
     input.src = ''
   }
 </script>
@@ -183,6 +183,82 @@
 }
 </script>
 
+<script id="selectionchange_event">
+  {
+    const input = document.createElement('input');
+    input.value = 'Hello World';
+    document.body.appendChild(input);
+
+    let eventCount = 0;
+    let lastEvent = null;
+    
+    input.addEventListener('selectionchange', (e) => {
+      eventCount++;
+      lastEvent = e;
+    });
+    
+    testing.expectEqual(0, eventCount);
+    
+    input.setSelectionRange(0, 5);
+    input.select();
+    input.selectionStart = 3;
+    input.selectionEnd = 8;
+
+    let bubbledToBody = false;
+    document.body.addEventListener('selectionchange', () => {
+      bubbledToBody = true;
+    });
+    input.setSelectionRange(1, 4);
+
+    testing.eventually(() => {
+      testing.expectEqual(5, eventCount);
+      testing.expectEqual('selectionchange', lastEvent.type);
+      testing.expectEqual(input, lastEvent.target);
+      testing.expectEqual(true, lastEvent.bubbles);
+      testing.expectEqual(false, lastEvent.cancelable);
+      testing.expectEqual(true, bubbledToBody);
+    });
+  }
+</script>
+
+<script id="select_event">
+  {
+    const input = document.createElement('input');
+    input.value = 'Hello World';
+    document.body.appendChild(input);
+
+    let eventCount = 0;
+    let lastEvent = null;
+
+    input.addEventListener('select', (e) => {
+      eventCount++;
+      lastEvent = e;
+    });
+
+    let onselectFired = false;
+    input.onselect = () => { onselectFired = true; };
+
+    let bubbledToBody = false;
+    document.body.addEventListener('select', () => {
+      bubbledToBody = true;
+    });
+
+    testing.expectEqual(0, eventCount);
+
+    input.select();
+
+    testing.eventually(() => {
+      testing.expectEqual(1, eventCount);
+      testing.expectEqual('select', lastEvent.type);
+      testing.expectEqual(input, lastEvent.target);
+      testing.expectEqual(true, lastEvent.bubbles);
+      testing.expectEqual(false, lastEvent.cancelable);
+      testing.expectEqual(true, bubbledToBody);
+      testing.expectEqual(true, onselectFired);
+    });
+  }
+</script>
+
 <script id="defaultChecked">
   testing.expectEqual(true, $('#check1').defaultChecked)
   testing.expectEqual(false, $('#check2').defaultChecked)