From 2fd2d671eb301f42f22267832fbb8655c4bec004 Mon Sep 17 00:00:00 2001
From: Stefnotch <brandmairstefan@gmail.com>
Date: Sat, 25 Oct 2025 19:44:20 +0200
Subject: [PATCH 01/10] Add shader debug labels

---
 README.md | 28 ++++++++++++++++++++++------
 1 file changed, 22 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 1197569..a32de04 100644
--- a/README.md
+++ b/README.md
@@ -157,7 +157,8 @@ async initializePipelines() {
         layout: "auto", 
         compute: {
             module: this.device.createShaderModule({
-                code: SHADERS.add
+                code: SHADERS.add,
+                label: "add"
             }),
         }
     });
@@ -361,7 +362,10 @@ async initializePipelines() {
     this.aggregatePipeline = this.device.createComputePipeline({
         layout: "auto",
         compute: {
-            module: this.device.createShaderModule({ code: SHADERS.aggregate }),
+            module: this.device.createShaderModule({ 
+                code: SHADERS.aggregate,
+                label: "aggregrate" 
+            }),
         }
     });
 }
@@ -533,7 +537,10 @@ First, for the pipeline:
 
 ```javascript
 async initializePipelines() {
-    const imageShaderModule = this.device.createShaderModule({ code: SHADERS.image });
+    const imageShaderModule = this.device.createShaderModule({ 
+        code: SHADERS.image,
+        label: "image"
+    });
     this.imageRenderPipeline = this.device.createRenderPipeline({
         layout: "auto",
         vertex: {
@@ -803,7 +810,10 @@ Now that we have all the buffers set up, we can proceed to creating our **pipeli
 ```javascript
 async initializePipelines() {
     ...
-    const markersShaderModule = this.device.createShaderModule({ code: SHADERS.markers });
+    const markersShaderModule = this.device.createShaderModule({ 
+        code: SHADERS.markers,
+        label: "markers"
+    });
     this.markersRenderPipeline = this.device.createRenderPipeline({
         layout: "auto",
         vertex: {
@@ -1140,7 +1150,10 @@ async initializePipelines() {
     const pipelineDescriptor = {
         layout: this.heatmapComputePipelineLayout,
         compute: {
-            module: this.device.createShaderModule({ code: SHADERS.heatmapCompute }),
+            module: this.device.createShaderModule({ 
+                code: SHADERS.heatmapCompute,
+                label: "heatmapCompute"
+            }),
             entryPoint: "" // Set below for each pipeline
         }
     };
@@ -1312,7 +1325,10 @@ With the shader created, we go back to Javascript and introduce our new **pipeli
 ```javascript
 async initializePipelines() {
     ...
-    const heatmapRenderShaderModule = this.device.createShaderModule({ code: SHADERS.heatmapRender });
+    const heatmapRenderShaderModule = this.device.createShaderModule({ 
+        code: SHADERS.heatmapRender,
+        label: "heatmapRender"
+    });
     this.heatmapRenderPipeline = this.device.createRenderPipeline({
         layout: "auto",
         vertex: {

From 447fc872cd6d400284e7ab1118e7169a8522b9b7 Mon Sep 17 00:00:00 2001
From: Stefnotch <brandmairstefan@gmail.com>
Date: Sat, 25 Oct 2025 20:10:34 +0200
Subject: [PATCH 02/10] Move files to standard structure

---
 .gitignore                     |  24 ++++++
 index.html                     |   6 +-
 jsconfig.json                  |  10 ---
 loader.js => src/loader.js     |   0
 tree.js => src/tree.js         |   0
 tutorial.js => src/tutorial.js | 144 ++++++++++++++++-----------------
 types.js => src/types.js       |   0
 tsconfig.json                  |  28 +++++++
 8 files changed, 127 insertions(+), 85 deletions(-)
 create mode 100644 .gitignore
 delete mode 100644 jsconfig.json
 rename loader.js => src/loader.js (100%)
 rename tree.js => src/tree.js (100%)
 rename tutorial.js => src/tutorial.js (94%)
 rename types.js => src/types.js (100%)
 create mode 100644 tsconfig.json

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/index.html b/index.html
index 3fd12c3..92308e1 100644
--- a/index.html
+++ b/index.html
@@ -19,8 +19,8 @@
 
 <!-- Util -->
 <script src="lib/mipmap.js"></script>
-<script src="tree.js"></script>
-<script src="loader.js"></script>
+<script src="src/tree.js"></script>
+<script src="src/loader.js"></script>
 
 <!-- Shaders -->
 <script src="shaders/add.js"></script>
@@ -31,7 +31,7 @@
 <script src="shaders/heatmapRender.js"></script>
 
 <!-- Tutorial -->
-<script src="tutorial.js"></script>
+<script src="src/tutorial.js"></script>
 
 <script>
     window.addEventListener("load", () => {
diff --git a/jsconfig.json b/jsconfig.json
deleted file mode 100644
index b4cb5a2..0000000
--- a/jsconfig.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-    "compilerOptions": {
-        "module": "ESNext",
-        "target": "ES2020",
-        "types": ["./lib/webgpu.d.ts"],
-        "checkJs": true,
-        "noImplicitAny": true,
-    },
-    "include": ["./*.js"],
-}
\ No newline at end of file
diff --git a/loader.js b/src/loader.js
similarity index 100%
rename from loader.js
rename to src/loader.js
diff --git a/tree.js b/src/tree.js
similarity index 100%
rename from tree.js
rename to src/tree.js
diff --git a/tutorial.js b/src/tutorial.js
similarity index 94%
rename from tutorial.js
rename to src/tutorial.js
index bbaeec5..36e36d8 100644
--- a/tutorial.js
+++ b/src/tutorial.js
@@ -1,73 +1,73 @@
-class Tutorial {
-
-    async start() {
-        await this.initializeWebGPU();
-        await this.initializeBuffers();
-        await this.initializeTextures();
-        await this.initializeLayouts();
-        await this.initializePipelines();
-        await this.initializeBindGroups();
-        await this.initializeAttachments();
-        await this.initializeGUI();
-        await this.render();
-    }
-
-    /**
-     * @param {any} gui 
-     * @param {HTMLCanvasElement} canvas 
-     */
-    constructor(gui, canvas) {
-        this.gui = gui;
-        this.canvas = canvas;
-    }
-
-    // From here on, it is up to you to implement the tutorial
-    // ----------------------------------------------------------------------------------------------------
-
-    async initializeWebGPU() {
-
-    }
-
-    async initializeBuffers() {
-
-    }
-
-    async initializeTextures() {
-        
-    }
-
-    async initializeLayouts() {
-        
-    }
-
-    async initializePipelines() {
-
-    }
-
-    async initializeBindGroups() {
-
-    }
-
-    async initializeAttachments() {
-        
-    }
-
-    async initializeGUI() {
-
-    }
-
-    /**
-     * @template {Float32Array | Uint32Array | Int32Array} T
-     * @param {GPUBuffer} gpuBuffer
-     * @param {T} outputArray
-     * @returns {Promise<T>}
-     */
-    async readBuffer(gpuBuffer, outputArray) {
-        
-    }
-
-    async render() {
-
-    }
-
+class Tutorial {
+
+    async start() {
+        await this.initializeWebGPU();
+        await this.initializeBuffers();
+        await this.initializeTextures();
+        await this.initializeLayouts();
+        await this.initializePipelines();
+        await this.initializeBindGroups();
+        await this.initializeAttachments();
+        await this.initializeGUI();
+        await this.render();
+    }
+
+    /**
+     * @param {any} gui 
+     * @param {HTMLCanvasElement} canvas 
+     */
+    constructor(gui, canvas) {
+        this.gui = gui;
+        this.canvas = canvas;
+    }
+
+    // From here on, it is up to you to implement the tutorial
+    // ----------------------------------------------------------------------------------------------------
+
+    async initializeWebGPU() {
+
+    }
+
+    async initializeBuffers() {
+
+    }
+
+    async initializeTextures() {
+        
+    }
+
+    async initializeLayouts() {
+        
+    }
+
+    async initializePipelines() {
+
+    }
+
+    async initializeBindGroups() {
+
+    }
+
+    async initializeAttachments() {
+        
+    }
+
+    async initializeGUI() {
+
+    }
+
+    /**
+     * @template {Float32Array | Uint32Array | Int32Array} T
+     * @param {GPUBuffer} gpuBuffer
+     * @param {T} outputArray
+     * @returns {Promise<T>}
+     */
+    async readBuffer(gpuBuffer, outputArray) {
+        
+    }
+
+    async render() {
+
+    }
+
 }
\ No newline at end of file
diff --git a/types.js b/src/types.js
similarity index 100%
rename from types.js
rename to src/types.js
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..84b3d20
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client", "./lib/webgpu.d.ts"],
+    "skipLibCheck": true,
+    "allowJs": true,
+    "checkJs": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    //"strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

From b35535815409e5719a579cbe1403f59e2ac677b3 Mon Sep 17 00:00:00 2001
From: Stefnotch <brandmairstefan@gmail.com>
Date: Sat, 25 Oct 2025 20:17:14 +0200
Subject: [PATCH 03/10] Add vite via npm

---
 README.md         |  20 +-
 package-lock.json | 856 ++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  18 +
 3 files changed, 889 insertions(+), 5 deletions(-)
 create mode 100644 package-lock.json
 create mode 100644 package.json

diff --git a/README.md b/README.md
index a32de04..986e146 100644
--- a/README.md
+++ b/README.md
@@ -27,13 +27,23 @@ WebGPU-capable browsers:
   - Enable the flags listed here: [https://github.com/gpuweb/gpuweb/wiki/Implementation-Status#chromium-chrome-edge-etc](https://github.com/gpuweb/gpuweb/wiki/Implementation-Status#chromium-chrome-edge-etc)
 - MacOS: Chrome or Safari (macOS Tahoe 26 or later)
 
-First steps:
+### Local Development
+
+This assumes that you have [Node.js](https://nodejs.org/en), git and a code editor.
+
 - Clone this repository (`git clone https://github.com/Welko/rtvis-webgpu-tutorial`)
-- Open `index.html` on your favorite WebGPU-capable browser (no server needed). On Windows, your URL will look something like `file:///C:/Projects/rtvis-webgpu-tutorial/index.html`
-- Open `tutorial.js` in your favorite IDE. All your Javascript code will go there.
-- If you want a smoother workflow, we recommend using a [live server](https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server)
+- Open `src/tutorial.js` in your favorite IDE. All your Javascript code will go there.
+- Open a terminal and navigate to this folder.
+- Run `npm ci` to install the development server
+- Run `npm run start` and start developing
+
+### Online Development (alternative)
+
+If you do not have Node.js installed, you can ... TODO: fill this out
+
+
+### Resources
 
-Other resources:
 - [Tutorial slides](slides.pdf)
 - [WebGPU Fundamentals](https://webgpufundamentals.org/)
 - [WebGPU Shading Language (WGSL) Tutorial](https://webgpufundamentals.org/webgpu/lessons/webgpu-wgsl.html)
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..e1e9c82
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,856 @@
+{
+  "name": "rtvis-webgpu-tutorial",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "rtvis-webgpu-tutorial",
+      "version": "0.0.0",
+      "devDependencies": {
+        "vite": "npm:rolldown-vite@7.1.19"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.6.0.tgz",
+      "integrity": "sha512-zq/ay+9fNIJJtJiZxdTnXS20PllcYMX3OE23ESc4HK/bdYu3cOWYVhsOhVnXALfU/uqJIxn5NBPd9z4v+SfoSg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.1.0",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.6.0.tgz",
+      "integrity": "sha512-obtUmAHTMjll499P+D9A3axeJFlhdjOWdKUNs/U6QIGT7V5RjcUW1xToAzjvmgTSQhDbYn/NwfTRoJcQ2rNBxA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.1.0.tgz",
+      "integrity": "sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.0.7.tgz",
+      "integrity": "sha512-SeDnOO0Tk7Okiq6DbXmmBODgOAb9dp9gjlphokTUxmt8U3liIP1ZsozBahH69j/RJv+Rfs6IwUKHTgQYJ/HBAw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.5.0",
+        "@emnapi/runtime": "^1.5.0",
+        "@tybys/wasm-util": "^0.10.1"
+      }
+    },
+    "node_modules/@oxc-project/runtime": {
+      "version": "0.95.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/runtime/-/runtime-0.95.0.tgz",
+      "integrity": "sha512-qJS5pNepwMGnafO9ayKGz7rfPQgUBuunHpnP1//9Qa0zK3oT3t1EhT+I+pV9MUA+ZKez//OFqxCxf1vijCKb2Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.95.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.95.0.tgz",
+      "integrity": "sha512-vACy7vhpMPhjEJhULNxrdR0D943TkA/MigMpJCHmBHvMXxRStRi/dPtTlfQ3uDwWSzRpT8z+7ImjZVf8JWBocQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.0.0-beta.44",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-beta.44.tgz",
+      "integrity": "sha512-g9ejDOehJFhxC1DIXQuZQ9bKv4lRDioOTL42cJjFjqKPl1L7DVb9QQQE1FxokGEIMr6FezLipxwnzOXWe7DNPg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.0.0-beta.44",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-beta.44.tgz",
+      "integrity": "sha512-PxAW1PXLPmCzfhfKIS53kwpjLGTUdIfX4Ht+l9mj05C3lYCGaGowcNsYi2rdxWH24vSTmeK+ajDNRmmmrK0M7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.0.0-beta.44",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-beta.44.tgz",
+      "integrity": "sha512-/CtQqs1oO9uSb5Ju60rZvsdjE7Pzn8EK2ISAdl2jedjMzeD/4neNyCbwyJOAPzU+GIQTZVyrFZJX+t7HXR1R/g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.0.0-beta.44",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-beta.44.tgz",
+      "integrity": "sha512-V5Q5W9c4+2GJ4QabmjmVV6alY97zhC/MZBaLkDtHwGy3qwzbM4DYgXUbun/0a8AH5hGhuU27tUIlYz6ZBlvgOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.0.0-beta.44",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-beta.44.tgz",
+      "integrity": "sha512-X6adjkHeFqKsTU0FXdNN9HY4LDozPqIfHcnXovE5RkYLWIjMWuc489mIZ6iyhrMbCqMUla9IOsh5dvXSGT9o9A==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.0.0-beta.44",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-beta.44.tgz",
+      "integrity": "sha512-kRRKGZI4DXWa6ANFr3dLA85aSVkwPdgXaRjfanwY84tfc3LncDiIjyWCb042e3ckPzYhHSZ3LmisO+cdOIYL6Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.0.0-beta.44",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-beta.44.tgz",
+      "integrity": "sha512-hMtiN9xX1NhxXBa2U3Up4XkVcsVp2h73yYtMDY59z9CDLEZLrik9RVLhBL5QtoX4zZKJ8HZKJtWuGYvtmkCbIQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.0.0-beta.44",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-beta.44.tgz",
+      "integrity": "sha512-rd1LzbpXQuR8MTG43JB9VyXDjG7ogSJbIkBpZEHJ8oMKzL6j47kQT5BpIXrg3b5UVygW9QCI2fpFdMocT5Kudg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.0.0-beta.44",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-beta.44.tgz",
+      "integrity": "sha512-qI2IiPqmPRW25exXkuQr3TlweCDc05YvvbSDRPCuPsWkwb70dTiSoXn8iFxT4PWqTi71wWHg1Wyta9PlVhX5VA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.0.0-beta.44",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0-beta.44.tgz",
+      "integrity": "sha512-+vHvEc1pL5iJRFlldLC8mjm6P4Qciyfh2bh5ZI6yxDQKbYhCHRKNURaKz1mFcwxhVL5YMYsLyaqM3qizVif9MQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi": {
+      "version": "1.0.0-beta.44",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0-beta.44.tgz",
+      "integrity": "sha512-XSgLxRrtFj6RpTeMYmmQDAwHjKseYGKUn5LPiIdW4Cq+f5SBSStL2ToBDxkbdxKPEbCZptnLPQ/nfKcAxrC8Xg==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@napi-rs/wasm-runtime": "^1.0.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.0.0-beta.44",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-beta.44.tgz",
+      "integrity": "sha512-cF1LJdDIX02cJrFrX3wwQ6IzFM7I74BYeKFkzdcIA4QZ0+2WA7/NsKIgjvrunupepWb1Y6PFWdRlHSaz5AW1Wg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-ia32-msvc": {
+      "version": "1.0.0-beta.44",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-1.0.0-beta.44.tgz",
+      "integrity": "sha512-5uaJonDafhHiMn+iEh7qUp3QQ4Gihv3lEOxKfN8Vwadpy0e+5o28DWI42DpJ9YBYMrVy4JOWJ/3etB/sptpUwA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.0.0-beta.44",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-beta.44.tgz",
+      "integrity": "sha512-vsqhWAFJkkmgfBN/lkLCWTXF1PuPhMjfnAyru48KvF7mVh2+K7WkKYHezF3Fjz4X/mPScOcIv+g6cf6wnI6eWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.44",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.44.tgz",
+      "integrity": "sha512-g6eW7Zwnr2c5RADIoqziHoVs6b3W5QTQ4+qbpfjbkMJ9x+8Og211VW/oot2dj9dVwaK/UyC6Yo+02gV+wWQVNg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
+      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.30.2",
+        "lightningcss-darwin-arm64": "1.30.2",
+        "lightningcss-darwin-x64": "1.30.2",
+        "lightningcss-freebsd-x64": "1.30.2",
+        "lightningcss-linux-arm-gnueabihf": "1.30.2",
+        "lightningcss-linux-arm64-gnu": "1.30.2",
+        "lightningcss-linux-arm64-musl": "1.30.2",
+        "lightningcss-linux-x64-gnu": "1.30.2",
+        "lightningcss-linux-x64-musl": "1.30.2",
+        "lightningcss-win32-arm64-msvc": "1.30.2",
+        "lightningcss-win32-x64-msvc": "1.30.2"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/rolldown": {
+      "version": "1.0.0-beta.44",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-beta.44.tgz",
+      "integrity": "sha512-gcqgyCi3g93Fhr49PKvymE8PoaGS0sf6ajQrsYaQ8o5de6aUEbD6rJZiJbhOfpcqOnycgsAsUNPYri1h25NgsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.95.0",
+        "@rolldown/pluginutils": "1.0.0-beta.44"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.0.0-beta.44",
+        "@rolldown/binding-darwin-arm64": "1.0.0-beta.44",
+        "@rolldown/binding-darwin-x64": "1.0.0-beta.44",
+        "@rolldown/binding-freebsd-x64": "1.0.0-beta.44",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-beta.44",
+        "@rolldown/binding-linux-arm64-gnu": "1.0.0-beta.44",
+        "@rolldown/binding-linux-arm64-musl": "1.0.0-beta.44",
+        "@rolldown/binding-linux-x64-gnu": "1.0.0-beta.44",
+        "@rolldown/binding-linux-x64-musl": "1.0.0-beta.44",
+        "@rolldown/binding-openharmony-arm64": "1.0.0-beta.44",
+        "@rolldown/binding-wasm32-wasi": "1.0.0-beta.44",
+        "@rolldown/binding-win32-arm64-msvc": "1.0.0-beta.44",
+        "@rolldown/binding-win32-ia32-msvc": "1.0.0-beta.44",
+        "@rolldown/binding-win32-x64-msvc": "1.0.0-beta.44"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD",
+      "optional": true
+    },
+    "node_modules/vite": {
+      "name": "rolldown-vite",
+      "version": "7.1.19",
+      "resolved": "https://registry.npmjs.org/rolldown-vite/-/rolldown-vite-7.1.19.tgz",
+      "integrity": "sha512-4TRFlbv0F8zE0EbaSAuzHEGlBRRTSaMd3QP8Qz0VTeSb6Z+kpCXSAw2k2QimTuDCJSxdYItcjZjWXtn0j6ksTg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/runtime": "0.95.0",
+        "fdir": "^6.5.0",
+        "lightningcss": "^1.30.2",
+        "picomatch": "^4.0.3",
+        "postcss": "^8.5.6",
+        "rolldown": "1.0.0-beta.44",
+        "tinyglobby": "^0.2.15"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "esbuild": "^0.25.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..ba34a06
--- /dev/null
+++ b/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "rtvis-webgpu-tutorial",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "vite --open",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "vite": "npm:rolldown-vite@7.1.19"
+  },
+  "overrides": {
+    "vite": "npm:rolldown-vite@7.1.19"
+  }
+}

From d72e65689efaaa7077f376015dea2496ea7701b6 Mon Sep 17 00:00:00 2001
From: Stefnotch <brandmairstefan@gmail.com>
Date: Sat, 25 Oct 2025 20:25:35 +0200
Subject: [PATCH 04/10] Add webgpu types via npm

---
 lib/mipmap.js     |    4 -
 lib/webgpu.d.ts   | 3196 ---------------------------------------------
 package-lock.json |    8 +
 package.json      |    1 +
 tsconfig.json     |    2 +-
 5 files changed, 10 insertions(+), 3201 deletions(-)
 delete mode 100644 lib/mipmap.js
 delete mode 100644 lib/webgpu.d.ts

diff --git a/lib/mipmap.js b/lib/mipmap.js
deleted file mode 100644
index 6684f6c..0000000
--- a/lib/mipmap.js
+++ /dev/null
@@ -1,4 +0,0 @@
-// This file was compiled and minified from the following sources:
-// - https://github.com/greggman/webgpu-utils/blob/dev/src/generate-mipmap.ts
-// - https://github.com/greggman/webgpu-utils/blob/dev/src/typed-arrays.ts
-(()=>{"use strict";var e={d:(r,n)=>{for(var t in n)e.o(n,t)&&!e.o(r,t)&&Object.defineProperty(r,t,{enumerable:!0,get:n[t]})},o:(e,r)=>Object.prototype.hasOwnProperty.call(e,r),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},r={};e.r(r),e.d(r,{generateMipmap:()=>u,isTypedArray:()=>n,normalizeGPUExtent3D:()=>t,numMipLevels:()=>a});const n=e=>e&&"number"==typeof e.length&&e.buffer instanceof ArrayBuffer&&"number"==typeof e.byteLength;function t(e){return Array.isArray(e)||n(e)?[...e,1,1].slice(0,3):function(e){return[e.width,e.height||1,e.depthOrArrayLayers||1]}(e)}function a(e,r){const n=t(e),a=Math.max(...n.slice(0,"3d"===r?3:2));return 1+Math.log2(a)|0}const o=new WeakMap;function u(e,r,n){let t=o.get(e);t||(t={pipelineByFormatAndView:{},moduleByViewType:{}},o.set(e,t));let{sampler:a,uniformBuffer:u,uniformValues:i}=t;const{pipelineByFormatAndView:s,moduleByViewType:f}=t;n=n||function(e){switch(e.dimension){case"1d":return"1d";case"3d":return"3d";default:return e.depthOrArrayLayers>1?"2d-array":"2d"}}(r);let l=f[n];if(!l){const r=function(e){let r,n;switch(e){case"2d":r="texture_2d<f32>",n="textureSample(ourTexture, ourSampler, fsInput.texcoord)";break;case"2d-array":r="texture_2d_array<f32>",n="\n          textureSample(\n              ourTexture,\n              ourSampler,\n              fsInput.texcoord,\n              uni.layer)";break;case"cube":r="texture_cube<f32>",n="\n          textureSample(\n              ourTexture,\n              ourSampler,\n              faceMat[uni.layer] * vec3f(fract(fsInput.texcoord), 1))";break;case"cube-array":r="texture_cube_array<f32>",n="\n          textureSample(\n              ourTexture,\n              ourSampler,\n              faceMat[uni.layer] * vec3f(fract(fsInput.texcoord), 1), uni.layer)";break;default:throw new Error(`unsupported view: ${e}`)}return`\n        const faceMat = array(\n          mat3x3f( 0,  0,  -2,  0, -2,   0,  1,  1,   1),   // pos-x\n          mat3x3f( 0,  0,   2,  0, -2,   0, -1,  1,  -1),   // neg-x\n          mat3x3f( 2,  0,   0,  0,  0,   2, -1,  1,  -1),   // pos-y\n          mat3x3f( 2,  0,   0,  0,  0,  -2, -1, -1,   1),   // neg-y\n          mat3x3f( 2,  0,   0,  0, -2,   0, -1,  1,   1),   // pos-z\n          mat3x3f(-2,  0,   0,  0, -2,   0,  1,  1,  -1));  // neg-z\n\n        struct VSOutput {\n          @builtin(position) position: vec4f,\n          @location(0) texcoord: vec2f,\n        };\n\n        @vertex fn vs(\n          @builtin(vertex_index) vertexIndex : u32\n        ) -> VSOutput {\n          var pos = array<vec2f, 3>(\n            vec2f(-1.0, -1.0),\n            vec2f(-1.0,  3.0),\n            vec2f( 3.0, -1.0),\n          );\n\n          var vsOutput: VSOutput;\n          let xy = pos[vertexIndex];\n          vsOutput.position = vec4f(xy, 0.0, 1.0);\n          vsOutput.texcoord = xy * vec2f(0.5, -0.5) + vec2f(0.5);\n          return vsOutput;\n        }\n\n        struct Uniforms {\n          layer: u32,\n        };\n\n        @group(0) @binding(0) var ourSampler: sampler;\n        @group(0) @binding(1) var ourTexture: ${r};\n        @group(0) @binding(2) var<uniform> uni: Uniforms;\n\n        @fragment fn fs(fsInput: VSOutput) -> @location(0) vec4f {\n          _ = uni.layer; // make sure this is used so all pipelines have the same bindings\n          return ${n};\n        }\n      `}(n);l=e.createShaderModule({label:`mip level generation for ${n}`,code:r}),f[n]=l}a||(a=e.createSampler({minFilter:"linear",magFilter:"linear"}),u=e.createBuffer({size:16,usage:GPUBufferUsage.UNIFORM|GPUBufferUsage.COPY_DST}),i=new Uint32Array(1),Object.assign(t,{sampler:a,uniformBuffer:u,uniformValues:i}));const c=`${r.format}.${n}`;s[c]||(s[c]=e.createRenderPipeline({label:`mip level generator pipeline for ${n}`,layout:"auto",vertex:{module:l,entryPoint:"vs"},fragment:{module:l,entryPoint:"fs",targets:[{format:r.format}]}}));const p=s[c];for(let t=1;t<r.mipLevelCount;++t)for(let o=0;o<r.depthOrArrayLayers;++o){i[0]=o,e.queue.writeBuffer(u,0,i);const s=e.createBindGroup({layout:p.getBindGroupLayout(0),entries:[{binding:0,resource:a},{binding:1,resource:r.createView({dimension:n,baseMipLevel:t-1,mipLevelCount:1})},{binding:2,resource:{buffer:u}}]}),f={label:"mip gen renderPass",colorAttachments:[{view:r.createView({dimension:"2d",baseMipLevel:t,mipLevelCount:1,baseArrayLayer:o,arrayLayerCount:1}),loadOp:"clear",storeOp:"store"}]},l=e.createCommandEncoder({label:"mip gen encoder"}),c=l.beginRenderPass(f);c.setPipeline(p),c.setBindGroup(0,s),c.draw(3),c.end();const d=l.finish();e.queue.submit([d])}}window.MIPMAP=r})();
\ No newline at end of file
diff --git a/lib/webgpu.d.ts b/lib/webgpu.d.ts
deleted file mode 100644
index 3492a75..0000000
--- a/lib/webgpu.d.ts
+++ /dev/null
@@ -1,3196 +0,0 @@
-// *********************************************************************************************
-// This file is manually-edited by diffing against an autogenerated file. See README.md.
-// *********************************************************************************************
-
-// *********************************************************************************************
-// Manually-written
-// *********************************************************************************************
-
-interface HTMLCanvasElement {
-    getContext(
-      contextId:
-        | "webgpu"
-    ): GPUCanvasContext | null;
-  }
-  
-  interface OffscreenCanvas {
-    getContext(
-      contextId:
-        | "webgpu"
-    ): GPUCanvasContext | null;
-  }
-  
-  // Defined as an empty interface here to prevent errors when using these types in a worker.
-  interface HTMLVideoElement {}
-  
-  type GPUOrigin2DStrict =
-  
-      | Iterable<GPUIntegerCoordinate>
-      | GPUOrigin2DDictStrict;
-  
-  interface GPUOrigin2DDictStrict
-    extends GPUOrigin2DDict {
-    /** @deprecated Does not exist for GPUOrigin2D. */
-    z?: undefined;
-  }
-  
-  type GPUExtent3DStrict =
-  
-      | Iterable<GPUIntegerCoordinate>
-      | GPUExtent3DDictStrict;
-  
-  // GPUExtent3DDictStrict is defined to help developers catch a common class of errors.
-  // This interface defines depth as an undefined, which will cause a type check failure if someone
-  // attempts to set depth rather than depthOrArrayLayers on a GPUExtent3D (an easy mistake to make.)
-  interface GPUExtent3DDictStrict
-    extends GPUExtent3DDict {
-    /** @deprecated The correct name is `depthOrArrayLayers`. */
-    depth?: undefined;
-  }
-  
-  // *********************************************************************************************
-  // Semi-auto-generated (by manual diff with autogenerated types)
-  // *********************************************************************************************
-  
-  type GPUBindingResource =
-  
-      | GPUSampler
-      | GPUTextureView
-      | GPUBufferBinding
-      | GPUExternalTexture;
-  type GPUBufferDynamicOffset =
-    number;
-  type GPUBufferUsageFlags =
-    number;
-  type GPUColor =
-  
-      | Iterable<number>
-      | GPUColorDict;
-  type GPUColorWriteFlags =
-    number;
-  type GPUDepthBias =
-    number;
-  type GPUExtent3D =
-  
-      | Iterable<GPUIntegerCoordinate>
-      | GPUExtent3DDict;
-  type GPUFlagsConstant =
-    number;
-  type GPUImageCopyExternalImageSource =
-  
-      | ImageBitmap
-      | ImageData
-      | HTMLImageElement
-      | HTMLVideoElement
-      | VideoFrame
-      | HTMLCanvasElement
-      | OffscreenCanvas;
-  type GPUIndex32 =
-    number;
-  type GPUIntegerCoordinate =
-    number;
-  type GPUIntegerCoordinateOut =
-    number;
-  type GPUMapModeFlags =
-    number;
-  type GPUOrigin2D =
-  
-      | Iterable<GPUIntegerCoordinate>
-      | GPUOrigin2DDict;
-  type GPUOrigin3D =
-  
-      | Iterable<GPUIntegerCoordinate>
-      | GPUOrigin3DDict;
-  type GPUPipelineConstantValue =
-    number;
-  type GPUSampleMask =
-    number;
-  type GPUShaderStageFlags =
-    number;
-  type GPUSignedOffset32 =
-    number;
-  type GPUSize32 =
-    number;
-  type GPUSize32Out =
-    number;
-  type GPUSize64 =
-    number;
-  type GPUSize64Out =
-    number;
-  type GPUStencilValue =
-    number;
-  type GPUTextureUsageFlags =
-    number;
-  type GPUAddressMode =
-  
-      | "clamp-to-edge"
-      | "repeat"
-      | "mirror-repeat";
-  type GPUAutoLayoutMode =
-    "auto";
-  type GPUBlendFactor =
-  
-      | "zero"
-      | "one"
-      | "src"
-      | "one-minus-src"
-      | "src-alpha"
-      | "one-minus-src-alpha"
-      | "dst"
-      | "one-minus-dst"
-      | "dst-alpha"
-      | "one-minus-dst-alpha"
-      | "src-alpha-saturated"
-      | "constant"
-      | "one-minus-constant"
-      | "src1"
-      | "one-minus-src1"
-      | "src1-alpha"
-      | "one-minus-src1-alpha";
-  type GPUBlendOperation =
-  
-      | "add"
-      | "subtract"
-      | "reverse-subtract"
-      | "min"
-      | "max";
-  type GPUBufferBindingType =
-  
-      | "uniform"
-      | "storage"
-      | "read-only-storage";
-  type GPUBufferMapState =
-  
-      | "unmapped"
-      | "pending"
-      | "mapped";
-  type GPUCanvasAlphaMode =
-  
-      | "opaque"
-      | "premultiplied";
-  type GPUCanvasToneMappingMode =
-  
-      | "standard"
-      | "extended";
-  type GPUCompareFunction =
-  
-      | "never"
-      | "less"
-      | "equal"
-      | "less-equal"
-      | "greater"
-      | "not-equal"
-      | "greater-equal"
-      | "always";
-  type GPUCompilationMessageType =
-  
-      | "error"
-      | "warning"
-      | "info";
-  type GPUCullMode =
-  
-      | "none"
-      | "front"
-      | "back";
-  type GPUDeviceLostReason =
-  
-      | "unknown"
-      | "destroyed";
-  type GPUErrorFilter =
-  
-      | "validation"
-      | "out-of-memory"
-      | "internal";
-  type GPUFeatureName =
-  
-      | "depth-clip-control"
-      | "depth32float-stencil8"
-      | "texture-compression-bc"
-      | "texture-compression-bc-sliced-3d"
-      | "texture-compression-etc2"
-      | "texture-compression-astc"
-      | "texture-compression-astc-sliced-3d"
-      | "timestamp-query"
-      | "indirect-first-instance"
-      | "shader-f16"
-      | "rg11b10ufloat-renderable"
-      | "bgra8unorm-storage"
-      | "float32-filterable"
-      | "clip-distances"
-      | "dual-source-blending";
-  type GPUFilterMode =
-  
-      | "nearest"
-      | "linear";
-  type GPUFrontFace =
-  
-      | "ccw"
-      | "cw";
-  type GPUIndexFormat =
-  
-      | "uint16"
-      | "uint32";
-  type GPULoadOp =
-  
-      | "load"
-      | "clear";
-  type GPUMipmapFilterMode =
-  
-      | "nearest"
-      | "linear";
-  type GPUPipelineErrorReason =
-  
-      | "validation"
-      | "internal";
-  type GPUPowerPreference =
-  
-      | "low-power"
-      | "high-performance";
-  type GPUPrimitiveTopology =
-  
-      | "point-list"
-      | "line-list"
-      | "line-strip"
-      | "triangle-list"
-      | "triangle-strip";
-  type GPUQueryType =
-  
-      | "occlusion"
-      | "timestamp";
-  type GPUSamplerBindingType =
-  
-      | "filtering"
-      | "non-filtering"
-      | "comparison";
-  type GPUStencilOperation =
-  
-      | "keep"
-      | "zero"
-      | "replace"
-      | "invert"
-      | "increment-clamp"
-      | "decrement-clamp"
-      | "increment-wrap"
-      | "decrement-wrap";
-  type GPUStorageTextureAccess =
-  
-      | "write-only"
-      | "read-only"
-      | "read-write";
-  type GPUStoreOp =
-  
-      | "store"
-      | "discard";
-  type GPUTextureAspect =
-  
-      | "all"
-      | "stencil-only"
-      | "depth-only";
-  type GPUTextureDimension =
-  
-      | "1d"
-      | "2d"
-      | "3d";
-  type GPUTextureFormat =
-  
-      | "r8unorm"
-      | "r8snorm"
-      | "r8uint"
-      | "r8sint"
-      | "r16uint"
-      | "r16sint"
-      | "r16float"
-      | "rg8unorm"
-      | "rg8snorm"
-      | "rg8uint"
-      | "rg8sint"
-      | "r32uint"
-      | "r32sint"
-      | "r32float"
-      | "rg16uint"
-      | "rg16sint"
-      | "rg16float"
-      | "rgba8unorm"
-      | "rgba8unorm-srgb"
-      | "rgba8snorm"
-      | "rgba8uint"
-      | "rgba8sint"
-      | "bgra8unorm"
-      | "bgra8unorm-srgb"
-      | "rgb9e5ufloat"
-      | "rgb10a2uint"
-      | "rgb10a2unorm"
-      | "rg11b10ufloat"
-      | "rg32uint"
-      | "rg32sint"
-      | "rg32float"
-      | "rgba16uint"
-      | "rgba16sint"
-      | "rgba16float"
-      | "rgba32uint"
-      | "rgba32sint"
-      | "rgba32float"
-      | "stencil8"
-      | "depth16unorm"
-      | "depth24plus"
-      | "depth24plus-stencil8"
-      | "depth32float"
-      | "depth32float-stencil8"
-      | "bc1-rgba-unorm"
-      | "bc1-rgba-unorm-srgb"
-      | "bc2-rgba-unorm"
-      | "bc2-rgba-unorm-srgb"
-      | "bc3-rgba-unorm"
-      | "bc3-rgba-unorm-srgb"
-      | "bc4-r-unorm"
-      | "bc4-r-snorm"
-      | "bc5-rg-unorm"
-      | "bc5-rg-snorm"
-      | "bc6h-rgb-ufloat"
-      | "bc6h-rgb-float"
-      | "bc7-rgba-unorm"
-      | "bc7-rgba-unorm-srgb"
-      | "etc2-rgb8unorm"
-      | "etc2-rgb8unorm-srgb"
-      | "etc2-rgb8a1unorm"
-      | "etc2-rgb8a1unorm-srgb"
-      | "etc2-rgba8unorm"
-      | "etc2-rgba8unorm-srgb"
-      | "eac-r11unorm"
-      | "eac-r11snorm"
-      | "eac-rg11unorm"
-      | "eac-rg11snorm"
-      | "astc-4x4-unorm"
-      | "astc-4x4-unorm-srgb"
-      | "astc-5x4-unorm"
-      | "astc-5x4-unorm-srgb"
-      | "astc-5x5-unorm"
-      | "astc-5x5-unorm-srgb"
-      | "astc-6x5-unorm"
-      | "astc-6x5-unorm-srgb"
-      | "astc-6x6-unorm"
-      | "astc-6x6-unorm-srgb"
-      | "astc-8x5-unorm"
-      | "astc-8x5-unorm-srgb"
-      | "astc-8x6-unorm"
-      | "astc-8x6-unorm-srgb"
-      | "astc-8x8-unorm"
-      | "astc-8x8-unorm-srgb"
-      | "astc-10x5-unorm"
-      | "astc-10x5-unorm-srgb"
-      | "astc-10x6-unorm"
-      | "astc-10x6-unorm-srgb"
-      | "astc-10x8-unorm"
-      | "astc-10x8-unorm-srgb"
-      | "astc-10x10-unorm"
-      | "astc-10x10-unorm-srgb"
-      | "astc-12x10-unorm"
-      | "astc-12x10-unorm-srgb"
-      | "astc-12x12-unorm"
-      | "astc-12x12-unorm-srgb";
-  type GPUTextureSampleType =
-  
-      | "float"
-      | "unfilterable-float"
-      | "depth"
-      | "sint"
-      | "uint";
-  type GPUTextureViewDimension =
-  
-      | "1d"
-      | "2d"
-      | "2d-array"
-      | "cube"
-      | "cube-array"
-      | "3d";
-  type GPUVertexFormat =
-  
-      | "uint8x2"
-      | "uint8x4"
-      | "sint8x2"
-      | "sint8x4"
-      | "unorm8x2"
-      | "unorm8x4"
-      | "snorm8x2"
-      | "snorm8x4"
-      | "uint16x2"
-      | "uint16x4"
-      | "sint16x2"
-      | "sint16x4"
-      | "unorm16x2"
-      | "unorm16x4"
-      | "snorm16x2"
-      | "snorm16x4"
-      | "float16x2"
-      | "float16x4"
-      | "float32"
-      | "float32x2"
-      | "float32x3"
-      | "float32x4"
-      | "uint32"
-      | "uint32x2"
-      | "uint32x3"
-      | "uint32x4"
-      | "sint32"
-      | "sint32x2"
-      | "sint32x3"
-      | "sint32x4"
-      | "unorm10-10-10-2";
-  type GPUVertexStepMode =
-  
-      | "vertex"
-      | "instance";
-  
-  interface GPUBindGroupDescriptor
-    extends GPUObjectDescriptorBase {
-    /**
-     * The {@link GPUBindGroupLayout} the entries of this bind group will conform to.
-     */
-    layout: GPUBindGroupLayout;
-    /**
-     * A list of entries describing the resources to expose to the shader for each binding
-     * described by the {@link GPUBindGroupDescriptor#layout}.
-     */
-    entries: Iterable<GPUBindGroupEntry>;
-  }
-  
-  interface GPUBindGroupEntry {
-    /**
-     * A unique identifier for a resource binding within the {@link GPUBindGroup}, corresponding to a
-     * {@link GPUBindGroupLayoutEntry#binding|GPUBindGroupLayoutEntry.binding} and a @binding
-     * attribute in the {@link GPUShaderModule}.
-     */
-    binding: GPUIndex32;
-    /**
-     * The resource to bind, which may be a {@link GPUSampler}, {@link GPUTextureView},
-     * {@link GPUExternalTexture}, or {@link GPUBufferBinding}.
-     */
-    resource: GPUBindingResource;
-  }
-  
-  interface GPUBindGroupLayoutDescriptor
-    extends GPUObjectDescriptorBase {
-    /**
-     * A list of entries describing the shader resource bindings for a bind group.
-     */
-    entries: Iterable<GPUBindGroupLayoutEntry>;
-  }
-  
-  interface GPUBindGroupLayoutEntry {
-    /**
-     * A unique identifier for a resource binding within the {@link GPUBindGroupLayout}, corresponding
-     * to a {@link GPUBindGroupEntry#binding|GPUBindGroupEntry.binding} and a @binding
-     * attribute in the {@link GPUShaderModule}.
-     */
-    binding: GPUIndex32;
-    /**
-     * A bitset of the members of {@link GPUShaderStage}.
-     * Each set bit indicates that a {@link GPUBindGroupLayoutEntry}'s resource
-     * will be accessible from the associated shader stage.
-     */
-    visibility: GPUShaderStageFlags;
-    /**
-     * When map/exist|provided, indicates the binding resource type for this {@link GPUBindGroupLayoutEntry}
-     * is {@link GPUBufferBinding}.
-     */
-    buffer?: GPUBufferBindingLayout;
-    /**
-     * When map/exist|provided, indicates the binding resource type for this {@link GPUBindGroupLayoutEntry}
-     * is {@link GPUSampler}.
-     */
-    sampler?: GPUSamplerBindingLayout;
-    /**
-     * When map/exist|provided, indicates the binding resource type for this {@link GPUBindGroupLayoutEntry}
-     * is {@link GPUTextureView}.
-     */
-    texture?: GPUTextureBindingLayout;
-    /**
-     * When map/exist|provided, indicates the binding resource type for this {@link GPUBindGroupLayoutEntry}
-     * is {@link GPUTextureView}.
-     */
-    storageTexture?: GPUStorageTextureBindingLayout;
-    /**
-     * When map/exist|provided, indicates the binding resource type for this {@link GPUBindGroupLayoutEntry}
-     * is {@link GPUExternalTexture}.
-     */
-    externalTexture?: GPUExternalTextureBindingLayout;
-  }
-  
-  interface GPUBlendComponent {
-    /**
-     * Defines the {@link GPUBlendOperation} used to calculate the values written to the target
-     * attachment components.
-     */
-    operation?: GPUBlendOperation;
-    /**
-     * Defines the {@link GPUBlendFactor} operation to be performed on values from the fragment shader.
-     */
-    srcFactor?: GPUBlendFactor;
-    /**
-     * Defines the {@link GPUBlendFactor} operation to be performed on values from the target attachment.
-     */
-    dstFactor?: GPUBlendFactor;
-  }
-  
-  interface GPUBlendState {
-    /**
-     * Defines the blending behavior of the corresponding render target for color channels.
-     */
-    color: GPUBlendComponent;
-    /**
-     * Defines the blending behavior of the corresponding render target for the alpha channel.
-     */
-    alpha: GPUBlendComponent;
-  }
-  
-  interface GPUBufferBinding {
-    /**
-     * The {@link GPUBuffer} to bind.
-     */
-    buffer: GPUBuffer;
-    /**
-     * The offset, in bytes, from the beginning of {@link GPUBufferBinding#buffer} to the
-     * beginning of the range exposed to the shader by the buffer binding.
-     */
-    offset?: GPUSize64;
-    /**
-     * The size, in bytes, of the buffer binding.
-     * If not map/exist|provided, specifies the range starting at
-     * {@link GPUBufferBinding#offset} and ending at the end of {@link GPUBufferBinding#buffer}.
-     */
-    size?: GPUSize64;
-  }
-  
-  interface GPUBufferBindingLayout {
-    /**
-     * Indicates the type required for buffers bound to this bindings.
-     */
-    type?: GPUBufferBindingType;
-    /**
-     * Indicates whether this binding requires a dynamic offset.
-     */
-    hasDynamicOffset?: boolean;
-    /**
-     * Indicates the minimum {@link GPUBufferBinding#size} of a buffer binding used with this bind point.
-     * Bindings are always validated against this size in {@link GPUDevice#createBindGroup}.
-     * If this *is not* `0`, pipeline creation additionally [$validating shader binding|validates$]
-     * that this value &ge; the minimum buffer binding size of the variable.
-     * If this *is* `0`, it is ignored by pipeline creation, and instead draw/dispatch commands
-     * [$Validate encoder bind groups|validate$] that each binding in the {@link GPUBindGroup}
-     * satisfies the minimum buffer binding size of the variable.
-     * Note:
-     * Similar execution-time validation is theoretically possible for other
-     * binding-related fields specified for early validation, like
-     * {@link GPUTextureBindingLayout#sampleType} and {@link GPUStorageTextureBindingLayout#format},
-     * which currently can only be validated in pipeline creation.
-     * However, such execution-time validation could be costly or unnecessarily complex, so it is
-     * available only for {@link GPUBufferBindingLayout#minBindingSize} which is expected to have the
-     * most ergonomic impact.
-     */
-    minBindingSize?: GPUSize64;
-  }
-  
-  interface GPUBufferDescriptor
-    extends GPUObjectDescriptorBase {
-    /**
-     * The size of the buffer in bytes.
-     */
-    size: GPUSize64;
-    /**
-     * The allowed usages for the buffer.
-     */
-    usage: GPUBufferUsageFlags;
-    /**
-     * If `true` creates the buffer in an already mapped state, allowing
-     * {@link GPUBuffer#getMappedRange} to be called immediately. It is valid to set
-     * {@link GPUBufferDescriptor#mappedAtCreation} to `true` even if {@link GPUBufferDescriptor#usage}
-     * does not contain {@link GPUBufferUsage#MAP_READ} or {@link GPUBufferUsage#MAP_WRITE}. This can be
-     * used to set the buffer's initial data.
-     * Guarantees that even if the buffer creation eventually fails, it will still appear as if the
-     * mapped range can be written/read to until it is unmapped.
-     */
-    mappedAtCreation?: boolean;
-  }
-  
-  interface GPUCanvasConfiguration {
-    /**
-     * The {@link GPUDevice} that textures returned by {@link GPUCanvasContext#getCurrentTexture} will be
-     * compatible with.
-     */
-    device: GPUDevice;
-    /**
-     * The format that textures returned by {@link GPUCanvasContext#getCurrentTexture} will have.
-     * Must be one of the Supported context formats.
-     */
-    format: GPUTextureFormat;
-    /**
-     * The usage that textures returned by {@link GPUCanvasContext#getCurrentTexture} will have.
-     * {@link GPUTextureUsage#RENDER_ATTACHMENT} is the default, but is not automatically included
-     * if the usage is explicitly set. Be sure to include {@link GPUTextureUsage#RENDER_ATTACHMENT}
-     * when setting a custom usage if you wish to use textures returned by
-     * {@link GPUCanvasContext#getCurrentTexture} as color targets for a render pass.
-     */
-    usage?: GPUTextureUsageFlags;
-    /**
-     * The formats that views created from textures returned by
-     * {@link GPUCanvasContext#getCurrentTexture} may use.
-     */
-    viewFormats?: Iterable<GPUTextureFormat>;
-    /**
-     * The color space that values written into textures returned by
-     * {@link GPUCanvasContext#getCurrentTexture} should be displayed with.
-     */
-    colorSpace?: PredefinedColorSpace;
-    /**
-     * The tone mapping determines how the content of textures returned by
-     * {@link GPUCanvasContext#getCurrentTexture} are to be displayed.
-     */
-    toneMapping?: GPUCanvasToneMapping;
-    /**
-     * Determines the effect that alpha values will have on the content of textures returned by
-     * {@link GPUCanvasContext#getCurrentTexture} when read, displayed, or used as an image source.
-     */
-    alphaMode?: GPUCanvasAlphaMode;
-  }
-  
-  type GPUCanvasConfigurationOut =
-    Required<GPUCanvasConfiguration> & {
-      viewFormats: GPUTextureFormat[];
-    };
-  
-  interface GPUCanvasToneMapping {
-    mode?: GPUCanvasToneMappingMode;
-  }
-  
-  interface GPUColorDict {
-    /**
-     * The red channel value.
-     */
-    r: number;
-    /**
-     * The green channel value.
-     */
-    g: number;
-    /**
-     * The blue channel value.
-     */
-    b: number;
-    /**
-     * The alpha channel value.
-     */
-    a: number;
-  }
-  
-  interface GPUColorTargetState {
-    /**
-     * The {@link GPUTextureFormat} of this color target. The pipeline will only be compatible with
-     * {@link GPURenderPassEncoder}s which use a {@link GPUTextureView} of this format in the
-     * corresponding color attachment.
-     */
-    format: GPUTextureFormat;
-    /**
-     * The blending behavior for this color target. If left undefined, disables blending for this
-     * color target.
-     */
-    blend?: GPUBlendState;
-    /**
-     * Bitmask controlling which channels are are written to when drawing to this color target.
-     */
-    writeMask?: GPUColorWriteFlags;
-  }
-  
-  type GPUCommandBufferDescriptor =
-    GPUObjectDescriptorBase;
-  type GPUCommandEncoderDescriptor =
-    GPUObjectDescriptorBase;
-  
-  interface GPUComputePassDescriptor
-    extends GPUObjectDescriptorBase {
-    /**
-     * Defines which timestamp values will be written for this pass, and where to write them to.
-     */
-    timestampWrites?: GPUComputePassTimestampWrites;
-  }
-  
-  interface GPUComputePassTimestampWrites {
-    /**
-     * The {@link GPUQuerySet}, of type {@link GPUQueryType#"timestamp"}, that the query results will be
-     * written to.
-     */
-    querySet: GPUQuerySet;
-    /**
-     * If defined, indicates the query index in {@link GPURenderPassTimestampWrites#querySet} into
-     * which the timestamp at the beginning of the compute pass will be written.
-     */
-    beginningOfPassWriteIndex?: GPUSize32;
-    /**
-     * If defined, indicates the query index in {@link GPURenderPassTimestampWrites#querySet} into
-     * which the timestamp at the end of the compute pass will be written.
-     */
-    endOfPassWriteIndex?: GPUSize32;
-  }
-  
-  interface GPUComputePipelineDescriptor
-    extends GPUPipelineDescriptorBase {
-    /**
-     * Describes the compute shader entry point of the pipeline.
-     */
-    compute: GPUProgrammableStage;
-  }
-  
-  interface GPUDepthStencilState {
-    /**
-     * The {@link GPUTextureViewDescriptor#format} of {@link GPURenderPassDescriptor#depthStencilAttachment}
-     * this {@link GPURenderPipeline} will be compatible with.
-     */
-    format: GPUTextureFormat;
-    /**
-     * Indicates if this {@link GPURenderPipeline} can modify
-     * {@link GPURenderPassDescriptor#depthStencilAttachment} depth values.
-     */
-    depthWriteEnabled?: boolean;
-    /**
-     * The comparison operation used to test fragment depths against
-     * {@link GPURenderPassDescriptor#depthStencilAttachment} depth values.
-     */
-    depthCompare?: GPUCompareFunction;
-    /**
-     * Defines how stencil comparisons and operations are performed for front-facing primitives.
-     */
-    stencilFront?: GPUStencilFaceState;
-    /**
-     * Defines how stencil comparisons and operations are performed for back-facing primitives.
-     */
-    stencilBack?: GPUStencilFaceState;
-    /**
-     * Bitmask controlling which {@link GPURenderPassDescriptor#depthStencilAttachment} stencil value
-     * bits are read when performing stencil comparison tests.
-     */
-    stencilReadMask?: GPUStencilValue;
-    /**
-     * Bitmask controlling which {@link GPURenderPassDescriptor#depthStencilAttachment} stencil value
-     * bits are written to when performing stencil operations.
-     */
-    stencilWriteMask?: GPUStencilValue;
-    /**
-     * Constant depth bias added to each triangle fragment. See [$biased fragment depth$] for details.
-     */
-    depthBias?: GPUDepthBias;
-    /**
-     * Depth bias that scales with the triangle fragment’s slope. See [$biased fragment depth$] for details.
-     */
-    depthBiasSlopeScale?: number;
-    /**
-     * The maximum depth bias of a triangle fragment. See [$biased fragment depth$] for details.
-     */
-    depthBiasClamp?: number;
-  }
-  
-  interface GPUDeviceDescriptor
-    extends GPUObjectDescriptorBase {
-    /**
-     * Specifies the features that are required by the device request.
-     * The request will fail if the adapter cannot provide these features.
-     * Exactly the specified set of features, and no more or less, will be allowed in validation
-     * of API calls on the resulting device.
-     */
-    requiredFeatures?: Iterable<GPUFeatureName>;
-    /**
-     * Specifies the limits that are required by the device request.
-     * The request will fail if the adapter cannot provide these limits.
-     * Each key with a non-`undefined` value must be the name of a member of supported limits.
-     * API calls on the resulting device perform validation according to the exact limits of the
-     * device (not the adapter; see [[#limits]]).
-     * <!-- If we ever need limit types other than GPUSize32/GPUSize64, we can change the value
-     * type to `double` or `any` in the future and write out the type conversion explicitly (by
-     * reference to WebIDL spec). Or change the entire type to `any` and add back a `dictionary
-     * GPULimits` and define the conversion of the whole object by reference to WebIDL. -->
-     */
-    requiredLimits?: Record<
-      string,
-      | GPUSize64
-      | undefined
-    >;
-    /**
-     * The descriptor for the default {@link GPUQueue}.
-     */
-    defaultQueue?: GPUQueueDescriptor;
-  }
-  
-  interface GPUExtent3DDict {
-    /**
-     * The width of the extent.
-     */
-    width: GPUIntegerCoordinate;
-    /**
-     * The height of the extent.
-     */
-    height?: GPUIntegerCoordinate;
-    /**
-     * The depth of the extent or the number of array layers it contains.
-     * If used with a {@link GPUTexture} with a {@link GPUTextureDimension} of {@link GPUTextureDimension#"3d"}
-     * defines the depth of the texture. If used with a {@link GPUTexture} with a {@link GPUTextureDimension}
-     * of {@link GPUTextureDimension#"2d"} defines the number of array layers in the texture.
-     */
-    depthOrArrayLayers?: GPUIntegerCoordinate;
-  }
-  
-  interface GPUExternalTextureBindingLayout {}
-  
-  interface GPUExternalTextureDescriptor
-    extends GPUObjectDescriptorBase {
-    /**
-     * The video source to import the external texture from. Source size is determined as described
-     * by the external source dimensions table.
-     */
-    source:
-      | HTMLVideoElement
-      | VideoFrame;
-    /**
-     * The color space the image contents of {@link GPUExternalTextureDescriptor#source} will be
-     * converted into when reading.
-     */
-    colorSpace?: PredefinedColorSpace;
-  }
-  
-  interface GPUFragmentState
-    extends GPUProgrammableStage {
-    /**
-     * A list of {@link GPUColorTargetState} defining the formats and behaviors of the color targets
-     * this pipeline writes to.
-     */
-    targets: Iterable<GPUColorTargetState | null>;
-  }
-  
-  interface GPUImageCopyBuffer
-    extends GPUImageDataLayout {
-    /**
-     * A buffer which either contains image data to be copied or will store the image data being
-     * copied, depending on the method it is being passed to.
-     */
-    buffer: GPUBuffer;
-  }
-  
-  interface GPUImageCopyExternalImage {
-    /**
-     * The source of the image copy. The copy source data is captured at the moment that
-     * {@link GPUQueue#copyExternalImageToTexture} is issued. Source size is determined as described
-     * by the external source dimensions table.
-     */
-    source: GPUImageCopyExternalImageSource;
-    /**
-     * Defines the origin of the copy - the minimum (top-left) corner of the source sub-region to copy from.
-     * Together with `copySize`, defines the full copy sub-region.
-     */
-    origin?: GPUOrigin2DStrict;
-    /**
-     * Describes whether the source image is vertically flipped, or not.
-     * If this option is set to `true`, the copy is flipped vertically: the bottom row of the source
-     * region is copied into the first row of the destination region, and so on.
-     * The {@link GPUImageCopyExternalImage#origin} option is still relative to the top-left corner
-     * of the source image, increasing downward.
-     */
-    flipY?: boolean;
-  }
-  
-  interface GPUImageCopyTexture {
-    /**
-     * Texture to copy to/from.
-     */
-    texture: GPUTexture;
-    /**
-     * Mip-map level of the {@link GPUImageCopyTexture#texture} to copy to/from.
-     */
-    mipLevel?: GPUIntegerCoordinate;
-    /**
-     * Defines the origin of the copy - the minimum corner of the texture sub-region to copy to/from.
-     * Together with `copySize`, defines the full copy sub-region.
-     */
-    origin?: GPUOrigin3D;
-    /**
-     * Defines which aspects of the {@link GPUImageCopyTexture#texture} to copy to/from.
-     */
-    aspect?: GPUTextureAspect;
-  }
-  
-  interface GPUImageCopyTextureTagged
-    extends GPUImageCopyTexture {
-    /**
-     * Describes the color space and encoding used to encode data into the destination texture.
-     * This [[#color-space-conversions|may result]] in values outside of the range [0, 1]
-     * being written to the target texture, if its format can represent them.
-     * Otherwise, the results are clamped to the target texture format's range.
-     * Note:
-     * If {@link GPUImageCopyTextureTagged#colorSpace} matches the source image,
-     * conversion may not be necessary. See [[#color-space-conversion-elision]].
-     */
-    colorSpace?: PredefinedColorSpace;
-    /**
-     * Describes whether the data written into the texture should have its RGB channels
-     * premultiplied by the alpha channel, or not.
-     * If this option is set to `true` and the {@link GPUImageCopyExternalImage#source} is also
-     * premultiplied, the source RGB values must be preserved even if they exceed their
-     * corresponding alpha values.
-     * Note:
-     * If {@link GPUImageCopyTextureTagged#premultipliedAlpha} matches the source image,
-     * conversion may not be necessary. See [[#color-space-conversion-elision]].
-     */
-    premultipliedAlpha?: boolean;
-  }
-  
-  interface GPUImageDataLayout {
-    /**
-     * The offset, in bytes, from the beginning of the image data source (such as a
-     * {@link GPUImageCopyBuffer#buffer|GPUImageCopyBuffer.buffer}) to the start of the image data
-     * within that source.
-     */
-    offset?: GPUSize64;
-    /**
-     * The stride, in bytes, between the beginning of each texel block row and the subsequent
-     * texel block row.
-     * Required if there are multiple texel block rows (i.e. the copy height or depth is more
-     * than one block).
-     */
-    bytesPerRow?: GPUSize32;
-    /**
-     * Number of texel block rows per single texel image of the texture.
-     * {@link GPUImageDataLayout#rowsPerImage} &times;
-     * {@link GPUImageDataLayout#bytesPerRow} is the stride, in bytes, between the beginning of each
-     * texel image of data and the subsequent texel image.
-     * Required if there are multiple texel images (i.e. the copy depth is more than one).
-     */
-    rowsPerImage?: GPUSize32;
-  }
-  
-  interface GPUMultisampleState {
-    /**
-     * Number of samples per pixel. This {@link GPURenderPipeline} will be compatible only
-     * with attachment textures ({@link GPURenderPassDescriptor#colorAttachments}
-     * and {@link GPURenderPassDescriptor#depthStencilAttachment})
-     * with matching {@link GPUTextureDescriptor#sampleCount}s.
-     */
-    count?: GPUSize32;
-    /**
-     * Mask determining which samples are written to.
-     */
-    mask?: GPUSampleMask;
-    /**
-     * When `true` indicates that a fragment's alpha channel should be used to generate a sample
-     * coverage mask.
-     */
-    alphaToCoverageEnabled?: boolean;
-  }
-  
-  interface GPUObjectDescriptorBase {
-    /**
-     * The initial value of {@link GPUObjectBase#label|GPUObjectBase.label}.
-     */
-    label?: string;
-  }
-  
-  interface GPUOrigin2DDict {
-    x?: GPUIntegerCoordinate;
-    y?: GPUIntegerCoordinate;
-  }
-  
-  interface GPUOrigin3DDict {
-    x?: GPUIntegerCoordinate;
-    y?: GPUIntegerCoordinate;
-    z?: GPUIntegerCoordinate;
-  }
-  
-  interface GPUPipelineDescriptorBase
-    extends GPUObjectDescriptorBase {
-    /**
-     * The {@link GPUPipelineLayout} for this pipeline, or {@link GPUAutoLayoutMode#"auto"} to generate
-     * the pipeline layout automatically.
-     * Note: If {@link GPUAutoLayoutMode#"auto"} is used the pipeline cannot share {@link GPUBindGroup}s
-     * with any other pipelines.
-     */
-    layout:
-      | GPUPipelineLayout
-      | GPUAutoLayoutMode;
-  }
-  
-  interface GPUPipelineErrorInit {
-    reason: GPUPipelineErrorReason;
-  }
-  
-  interface GPUPipelineLayoutDescriptor
-    extends GPUObjectDescriptorBase {
-    /**
-     * A list of {@link GPUBindGroupLayout}s the pipeline will use. Each element corresponds to a
-     * @group attribute in the {@link GPUShaderModule}, with the `N`th element corresponding with
-     * `@group(N)`.
-     */
-    bindGroupLayouts: Iterable<GPUBindGroupLayout>;
-  }
-  
-  interface GPUPrimitiveState {
-    /**
-     * The type of primitive to be constructed from the vertex inputs.
-     */
-    topology?: GPUPrimitiveTopology;
-    /**
-     * For pipelines with strip topologies
-     * ({@link GPUPrimitiveTopology#"line-strip"} or {@link GPUPrimitiveTopology#"triangle-strip"}),
-     * this determines the index buffer format and primitive restart value
-     * ({@link GPUIndexFormat#"uint16"}/`0xFFFF` or {@link GPUIndexFormat#"uint32"}/`0xFFFFFFFF`).
-     * It is not allowed on pipelines with non-strip topologies.
-     * Note: Some implementations require knowledge of the primitive restart value to compile
-     * pipeline state objects.
-     * To use a strip-topology pipeline with an indexed draw call
-     * ({@link GPURenderCommandsMixin#drawIndexed()} or {@link GPURenderCommandsMixin#drawIndexedIndirect}),
-     * this must be set, and it must match the index buffer format used with the draw call
-     * (set in {@link GPURenderCommandsMixin#setIndexBuffer}).
-     * See [[#primitive-assembly]] for additional details.
-     */
-    stripIndexFormat?: GPUIndexFormat;
-    /**
-     * Defines which polygons are considered front-facing.
-     */
-    frontFace?: GPUFrontFace;
-    /**
-     * Defines which polygon orientation will be culled, if any.
-     */
-    cullMode?: GPUCullMode;
-    /**
-     * If true, indicates that depth clipping is disabled.
-     * Requires the {@link GPUFeatureName#"depth-clip-control"} feature to be enabled.
-     */
-    unclippedDepth?: boolean;
-  }
-  
-  interface GPUProgrammableStage {
-    /**
-     * The {@link GPUShaderModule} containing the code that this programmable stage will execute.
-     */
-    module: GPUShaderModule;
-    /**
-     * The name of the function in {@link GPUProgrammableStage#module} that this stage will use to
-     * perform its work.
-     * NOTE: Since the {@link GPUProgrammableStage#entryPoint} dictionary member is
-     * not required, methods which consume a {@link GPUProgrammableStage} must use the
-     * "[$get the entry point$]" algorithm to determine which entry point
-     * it refers to.
-     */
-    entryPoint?: string;
-    /**
-     * Specifies the values of pipeline-overridable constants in the shader module
-     * {@link GPUProgrammableStage#module}.
-     * Each such pipeline-overridable constant is uniquely identified by a single
-     * pipeline-overridable constant identifier string, representing the pipeline
-     * constant ID of the constant if its declaration specifies one, and otherwise the
-     * constant's identifier name.
-     * The key of each key-value pair must equal the
-     * pipeline-overridable constant identifier string|identifier string
-     * of one such constant, with the comparison performed
-     * according to the rules for WGSL identifier comparison.
-     * When the pipeline is executed, that constant will have the specified value.
-     * Values are specified as <dfn typedef for="">GPUPipelineConstantValue</dfn>, which is a {@link double}.
-     * They are converted [$to WGSL type$] of the pipeline-overridable constant (`bool`/`i32`/`u32`/`f32`/`f16`).
-     * If conversion fails, a validation error is generated.
-     */
-    constants?: Record<
-      string,
-      GPUPipelineConstantValue
-    >;
-  }
-  
-  interface GPUQuerySetDescriptor
-    extends GPUObjectDescriptorBase {
-    /**
-     * The type of queries managed by {@link GPUQuerySet}.
-     */
-    type: GPUQueryType;
-    /**
-     * The number of queries managed by {@link GPUQuerySet}.
-     */
-    count: GPUSize32;
-  }
-  
-  type GPUQueueDescriptor =
-    GPUObjectDescriptorBase;
-  type GPURenderBundleDescriptor =
-    GPUObjectDescriptorBase;
-  
-  interface GPURenderBundleEncoderDescriptor
-    extends GPURenderPassLayout {
-    /**
-     * If `true`, indicates that the render bundle does not modify the depth component of the
-     * {@link GPURenderPassDepthStencilAttachment} of any render pass the render bundle is executed
-     * in.
-     * See read-only depth-stencil.
-     */
-    depthReadOnly?: boolean;
-    /**
-     * If `true`, indicates that the render bundle does not modify the stencil component of the
-     * {@link GPURenderPassDepthStencilAttachment} of any render pass the render bundle is executed
-     * in.
-     * See read-only depth-stencil.
-     */
-    stencilReadOnly?: boolean;
-  }
-  
-  interface GPURenderPassColorAttachment {
-    /**
-     * A {@link GPUTextureView} describing the texture subresource that will be output to for this
-     * color attachment.
-     */
-    view: GPUTextureView;
-    /**
-     * Indicates the depth slice index of {@link GPUTextureViewDimension#"3d"} {@link GPURenderPassColorAttachment#view}
-     * that will be output to for this color attachment.
-     */
-    depthSlice?: GPUIntegerCoordinate;
-    /**
-     * A {@link GPUTextureView} describing the texture subresource that will receive the resolved
-     * output for this color attachment if {@link GPURenderPassColorAttachment#view} is
-     * multisampled.
-     */
-    resolveTarget?: GPUTextureView;
-    /**
-     * Indicates the value to clear {@link GPURenderPassColorAttachment#view} to prior to executing the
-     * render pass. If not map/exist|provided, defaults to `{r: 0, g: 0, b: 0, a: 0}`. Ignored
-     * if {@link GPURenderPassColorAttachment#loadOp} is not {@link GPULoadOp#"clear"}.
-     * The components of {@link GPURenderPassColorAttachment#clearValue} are all double values.
-     * They are converted [$to a texel value of texture format$] matching the render attachment.
-     * If conversion fails, a validation error is generated.
-     */
-    clearValue?: GPUColor;
-    /**
-     * Indicates the load operation to perform on {@link GPURenderPassColorAttachment#view} prior to
-     * executing the render pass.
-     * Note: It is recommended to prefer clearing; see {@link GPULoadOp#"clear"} for details.
-     */
-    loadOp: GPULoadOp;
-    /**
-     * The store operation to perform on {@link GPURenderPassColorAttachment#view}
-     * after executing the render pass.
-     */
-    storeOp: GPUStoreOp;
-  }
-  
-  interface GPURenderPassDepthStencilAttachment {
-    /**
-     * A {@link GPUTextureView} describing the texture subresource that will be output to
-     * and read from for this depth/stencil attachment.
-     */
-    view: GPUTextureView;
-    /**
-     * Indicates the value to clear {@link GPURenderPassDepthStencilAttachment#view}'s depth component
-     * to prior to executing the render pass. Ignored if {@link GPURenderPassDepthStencilAttachment#depthLoadOp}
-     * is not {@link GPULoadOp#"clear"}. Must be between 0.0 and 1.0, inclusive.
-     * <!-- POSTV1(unrestricted-depth): unless unrestricted depth is enabled -->
-     */
-    depthClearValue?: number;
-    /**
-     * Indicates the load operation to perform on {@link GPURenderPassDepthStencilAttachment#view}'s
-     * depth component prior to executing the render pass.
-     * Note: It is recommended to prefer clearing; see {@link GPULoadOp#"clear"} for details.
-     */
-    depthLoadOp?: GPULoadOp;
-    /**
-     * The store operation to perform on {@link GPURenderPassDepthStencilAttachment#view}'s
-     * depth component after executing the render pass.
-     */
-    depthStoreOp?: GPUStoreOp;
-    /**
-     * Indicates that the depth component of {@link GPURenderPassDepthStencilAttachment#view}
-     * is read only.
-     */
-    depthReadOnly?: boolean;
-    /**
-     * Indicates the value to clear {@link GPURenderPassDepthStencilAttachment#view}'s stencil component
-     * to prior to executing the render pass. Ignored if {@link GPURenderPassDepthStencilAttachment#stencilLoadOp}
-     * is not {@link GPULoadOp#"clear"}.
-     * The value will be converted to the type of the stencil aspect of `view` by taking the same
-     * number of LSBs as the number of bits in the stencil aspect of one texel block|texel of `view`.
-     */
-    stencilClearValue?: GPUStencilValue;
-    /**
-     * Indicates the load operation to perform on {@link GPURenderPassDepthStencilAttachment#view}'s
-     * stencil component prior to executing the render pass.
-     * Note: It is recommended to prefer clearing; see {@link GPULoadOp#"clear"} for details.
-     */
-    stencilLoadOp?: GPULoadOp;
-    /**
-     * The store operation to perform on {@link GPURenderPassDepthStencilAttachment#view}'s
-     * stencil component after executing the render pass.
-     */
-    stencilStoreOp?: GPUStoreOp;
-    /**
-     * Indicates that the stencil component of {@link GPURenderPassDepthStencilAttachment#view}
-     * is read only.
-     */
-    stencilReadOnly?: boolean;
-  }
-  
-  interface GPURenderPassDescriptor
-    extends GPUObjectDescriptorBase {
-    /**
-     * The set of {@link GPURenderPassColorAttachment} values in this sequence defines which
-     * color attachments will be output to when executing this render pass.
-     * Due to compatible usage list|usage compatibility, no color attachment
-     * may alias another attachment or any resource used inside the render pass.
-     */
-    colorAttachments: Iterable<GPURenderPassColorAttachment | null>;
-    /**
-     * The {@link GPURenderPassDepthStencilAttachment} value that defines the depth/stencil
-     * attachment that will be output to and tested against when executing this render pass.
-     * Due to compatible usage list|usage compatibility, no writable depth/stencil attachment
-     * may alias another attachment or any resource used inside the render pass.
-     */
-    depthStencilAttachment?: GPURenderPassDepthStencilAttachment;
-    /**
-     * The {@link GPUQuerySet} value defines where the occlusion query results will be stored for this pass.
-     */
-    occlusionQuerySet?: GPUQuerySet;
-    /**
-     * Defines which timestamp values will be written for this pass, and where to write them to.
-     */
-    timestampWrites?: GPURenderPassTimestampWrites;
-    /**
-     * The maximum number of draw calls that will be done in the render pass. Used by some
-     * implementations to size work injected before the render pass. Keeping the default value
-     * is a good default, unless it is known that more draw calls will be done.
-     */
-    maxDrawCount?: GPUSize64;
-  }
-  
-  interface GPURenderPassLayout
-    extends GPUObjectDescriptorBase {
-    /**
-     * A list of the {@link GPUTextureFormat}s of the color attachments for this pass or bundle.
-     */
-    colorFormats: Iterable<GPUTextureFormat | null>;
-    /**
-     * The {@link GPUTextureFormat} of the depth/stencil attachment for this pass or bundle.
-     */
-    depthStencilFormat?: GPUTextureFormat;
-    /**
-     * Number of samples per pixel in the attachments for this pass or bundle.
-     */
-    sampleCount?: GPUSize32;
-  }
-  
-  interface GPURenderPassTimestampWrites {
-    /**
-     * The {@link GPUQuerySet}, of type {@link GPUQueryType#"timestamp"}, that the query results will be
-     * written to.
-     */
-    querySet: GPUQuerySet;
-    /**
-     * If defined, indicates the query index in {@link GPURenderPassTimestampWrites#querySet} into
-     * which the timestamp at the beginning of the render pass will be written.
-     */
-    beginningOfPassWriteIndex?: GPUSize32;
-    /**
-     * If defined, indicates the query index in {@link GPURenderPassTimestampWrites#querySet} into
-     * which the timestamp at the end of the render pass will be written.
-     */
-    endOfPassWriteIndex?: GPUSize32;
-  }
-  
-  interface GPURenderPipelineDescriptor
-    extends GPUPipelineDescriptorBase {
-    /**
-     * Describes the vertex shader entry point of the pipeline and its input buffer layouts.
-     */
-    vertex: GPUVertexState;
-    /**
-     * Describes the primitive-related properties of the pipeline.
-     */
-    primitive?: GPUPrimitiveState;
-    /**
-     * Describes the optional depth-stencil properties, including the testing, operations, and bias.
-     */
-    depthStencil?: GPUDepthStencilState;
-    /**
-     * Describes the multi-sampling properties of the pipeline.
-     */
-    multisample?: GPUMultisampleState;
-    /**
-     * Describes the fragment shader entry point of the pipeline and its output colors. If
-     * not map/exist|provided, the [[#no-color-output]] mode is enabled.
-     */
-    fragment?: GPUFragmentState;
-  }
-  
-  interface GPURequestAdapterOptions {
-    featureLevel?: string;
-    /**
-     * Optionally provides a hint indicating what class of adapter should be selected from
-     * the system's available adapters.
-     * The value of this hint may influence which adapter is chosen, but it must not
-     * influence whether an adapter is returned or not.
-     * Note:
-     * The primary utility of this hint is to influence which GPU is used in a multi-GPU system.
-     * For instance, some laptops have a low-power integrated GPU and a high-performance
-     * discrete GPU. This hint may also affect the power configuration of the selected GPU to
-     * match the requested power preference.
-     * Note:
-     * Depending on the exact hardware configuration, such as battery status and attached displays
-     * or removable GPUs, the user agent may select different adapters given the same power
-     * preference.
-     * Typically, given the same hardware configuration and state and
-     * `powerPreference`, the user agent is likely to select the same adapter.
-     */
-    powerPreference?: GPUPowerPreference;
-    /**
-     * When set to `true` indicates that only a fallback adapter may be returned. If the user
-     * agent does not support a fallback adapter, will cause {@link GPU#requestAdapter} to
-     * resolve to `null`.
-     * Note:
-     * {@link GPU#requestAdapter} may still return a fallback adapter if
-     * {@link GPURequestAdapterOptions#forceFallbackAdapter} is set to `false` and either no
-     * other appropriate adapter is available or the user agent chooses to return a
-     * fallback adapter. Developers that wish to prevent their applications from running on
-     * fallback adapters should check the {@link GPUAdapter}.{@link GPUAdapter#isFallbackAdapter}
-     * attribute prior to requesting a {@link GPUDevice}.
-     */
-    forceFallbackAdapter?: boolean;
-  }
-  
-  interface GPUSamplerBindingLayout {
-    /**
-     * Indicates the required type of a sampler bound to this bindings.
-     */
-    type?: GPUSamplerBindingType;
-  }
-  
-  interface GPUSamplerDescriptor
-    extends GPUObjectDescriptorBase {
-    /**
-     */
-    addressModeU?: GPUAddressMode;
-    /**
-     */
-    addressModeV?: GPUAddressMode;
-    /**
-     * Specifies the {{GPUAddressMode|address modes}} for the texture width, height, and depth
-     * coordinates, respectively.
-     */
-    addressModeW?: GPUAddressMode;
-    /**
-     * Specifies the sampling behavior when the sampled area is smaller than or equal to one
-     * texel.
-     */
-    magFilter?: GPUFilterMode;
-    /**
-     * Specifies the sampling behavior when the sampled area is larger than one texel.
-     */
-    minFilter?: GPUFilterMode;
-    /**
-     * Specifies behavior for sampling between mipmap levels.
-     */
-    mipmapFilter?: GPUMipmapFilterMode;
-    /**
-     */
-    lodMinClamp?: number;
-    /**
-     * Specifies the minimum and maximum levels of detail, respectively, used internally when
-     * sampling a texture.
-     */
-    lodMaxClamp?: number;
-    /**
-     * When provided the sampler will be a comparison sampler with the specified
-     * {@link GPUCompareFunction}.
-     * Note: Comparison samplers may use filtering, but the sampling results will be
-     * implementation-dependent and may differ from the normal filtering rules.
-     */
-    compare?: GPUCompareFunction;
-    /**
-     * Specifies the maximum anisotropy value clamp used by the sampler. Anisotropic filtering is
-     * enabled when {@link GPUSamplerDescriptor#maxAnisotropy} is &gt; 1 and the implementation supports it.
-     * Anisotropic filtering improves the image quality of textures sampled at oblique viewing
-     * angles. Higher {@link GPUSamplerDescriptor#maxAnisotropy} values indicate the maximum ratio of
-     * anisotropy supported when filtering.
-     * <div class=note heading>
-     * Most implementations support {@link GPUSamplerDescriptor#maxAnisotropy} values in range
-     * between 1 and 16, inclusive. The used value of {@link GPUSamplerDescriptor#maxAnisotropy}
-     * will be clamped to the maximum value that the platform supports.
-     * The precise filtering behavior is implementation-dependent.
-     * </div>
-     */
-    maxAnisotropy?: number;
-  }
-  
-  interface GPUShaderModuleCompilationHint {
-    entryPoint: string;
-    /**
-     * A {@link GPUPipelineLayout} that the {@link GPUShaderModule} may be used with in a future
-     * {@link GPUDevice#createComputePipeline()} or {@link GPUDevice#createRenderPipeline} call.
-     * If set to {@link GPUAutoLayoutMode#"auto"} the layout will be the [$default pipeline layout$]
-     * for the entry point associated with this hint will be used.
-     */
-    layout?:
-      | GPUPipelineLayout
-      | GPUAutoLayoutMode;
-  }
-  
-  interface GPUShaderModuleDescriptor
-    extends GPUObjectDescriptorBase {
-    /**
-     * The <a href="https://gpuweb.github.io/gpuweb/wgsl/">WGSL</a> source code for the shader
-     * module.
-     */
-    code: string;
-    /**
-     * A list of {@link GPUShaderModuleCompilationHint}s.
-     * Any hint provided by an application **should** contain information about one entry point of
-     * a pipeline that will eventually be created from the entry point.
-     * Implementations **should** use any information present in the {@link GPUShaderModuleCompilationHint}
-     * to perform as much compilation as is possible within {@link GPUDevice#createShaderModule}.
-     * Aside from type-checking, these hints are not validated in any way.
-     * <div class=note heading>
-     * Supplying information in {@link GPUShaderModuleDescriptor#compilationHints} does not have any
-     * observable effect, other than performance. It may be detrimental to performance to
-     * provide hints for pipelines that never end up being created.
-     * Because a single shader module can hold multiple entry points, and multiple pipelines
-     * can be created from a single shader module, it can be more performant for an
-     * implementation to do as much compilation as possible once in
-     * {@link GPUDevice#createShaderModule} rather than multiple times in the multiple calls to
-     * {@link GPUDevice#createComputePipeline()} or {@link GPUDevice#createRenderPipeline}.
-     * Hints are only applied to the entry points they explicitly name.
-     * Unlike {@link GPUProgrammableStage#entryPoint|GPUProgrammableStage.entryPoint},
-     * there is no default, even if only one entry point is present in the module.
-     * </div>
-     * Note:
-     * Hints are not validated in an observable way, but user agents **may** surface identifiable
-     * errors (like unknown entry point names or incompatible pipeline layouts) to developers,
-     * for example in the browser developer console.
-     */
-    compilationHints?: Array<GPUShaderModuleCompilationHint>;
-  }
-  
-  interface GPUStencilFaceState {
-    /**
-     * The {@link GPUCompareFunction} used when testing the {@link RenderState#[[stencilReference]]} value
-     * against the fragment's {@link GPURenderPassDescriptor#depthStencilAttachment} stencil values.
-     */
-    compare?: GPUCompareFunction;
-    /**
-     * The {@link GPUStencilOperation} performed if the fragment stencil comparison test described by
-     * {@link GPUStencilFaceState#compare} fails.
-     */
-    failOp?: GPUStencilOperation;
-    /**
-     * The {@link GPUStencilOperation} performed if the fragment depth comparison described by
-     * {@link GPUDepthStencilState#depthCompare} fails.
-     */
-    depthFailOp?: GPUStencilOperation;
-    /**
-     * The {@link GPUStencilOperation} performed if the fragment stencil comparison test described by
-     * {@link GPUStencilFaceState#compare} passes.
-     */
-    passOp?: GPUStencilOperation;
-  }
-  
-  interface GPUStorageTextureBindingLayout {
-    /**
-     * The access mode for this binding, indicating readability and writability.
-     */
-    access?: GPUStorageTextureAccess;
-    /**
-     * The required {@link GPUTextureViewDescriptor#format} of texture views bound to this binding.
-     */
-    format: GPUTextureFormat;
-    /**
-     * Indicates the required {@link GPUTextureViewDescriptor#dimension} for texture views bound to
-     * this binding.
-     */
-    viewDimension?: GPUTextureViewDimension;
-  }
-  
-  interface GPUTextureBindingLayout {
-    /**
-     * Indicates the type required for texture views bound to this binding.
-     */
-    sampleType?: GPUTextureSampleType;
-    /**
-     * Indicates the required {@link GPUTextureViewDescriptor#dimension} for texture views bound to
-     * this binding.
-     */
-    viewDimension?: GPUTextureViewDimension;
-    /**
-     * Indicates whether or not texture views bound to this binding must be multisampled.
-     */
-    multisampled?: boolean;
-  }
-  
-  interface GPUTextureDescriptor
-    extends GPUObjectDescriptorBase {
-    /**
-     * The width, height, and depth or layer count of the texture.
-     */
-    size: GPUExtent3DStrict;
-    /**
-     * The number of mip levels the texture will contain.
-     */
-    mipLevelCount?: GPUIntegerCoordinate;
-    /**
-     * The sample count of the texture. A {@link GPUTextureDescriptor#sampleCount} &gt; `1` indicates
-     * a multisampled texture.
-     */
-    sampleCount?: GPUSize32;
-    /**
-     * Whether the texture is one-dimensional, an array of two-dimensional layers, or three-dimensional.
-     */
-    dimension?: GPUTextureDimension;
-    /**
-     * The format of the texture.
-     */
-    format: GPUTextureFormat;
-    /**
-     * The allowed usages for the texture.
-     */
-    usage: GPUTextureUsageFlags;
-    /**
-     * Specifies what view {@link GPUTextureViewDescriptor#format} values will be allowed when calling
-     * {@link GPUTexture#createView} on this texture (in addition to the texture's actual
-     * {@link GPUTextureDescriptor#format}).
-     * <div class=note heading>
-     * Adding a format to this list may have a significant performance impact, so it is best
-     * to avoid adding formats unnecessarily.
-     * The actual performance impact is highly dependent on the target system; developers must
-     * test various systems to find out the impact on their particular application.
-     * For example, on some systems any texture with a {@link GPUTextureDescriptor#format} or
-     * {@link GPUTextureDescriptor#viewFormats} entry including
-     * {@link GPUTextureFormat#"rgba8unorm-srgb"} will perform less optimally than a
-     * {@link GPUTextureFormat#"rgba8unorm"} texture which does not.
-     * Similar caveats exist for other formats and pairs of formats on other systems.
-     * </div>
-     * Formats in this list must be texture view format compatible with the texture format.
-     * <div algorithm data-timeline=const>
-     * Two {@link GPUTextureFormat}s `format` and `viewFormat` are <dfn dfn for="">texture view format compatible</dfn> if:
-     * - `format` equals `viewFormat`, or
-     * - `format` and `viewFormat` differ only in whether they are `srgb` formats (have the `-srgb` suffix).
-     * </div>
-     */
-    viewFormats?: Iterable<GPUTextureFormat>;
-  }
-  
-  interface GPUTextureViewDescriptor
-    extends GPUObjectDescriptorBase {
-    /**
-     * The format of the texture view. Must be either the {@link GPUTextureDescriptor#format} of the
-     * texture or one of the {@link GPUTextureDescriptor#viewFormats} specified during its creation.
-     */
-    format?: GPUTextureFormat;
-    /**
-     * The dimension to view the texture as.
-     */
-    dimension?: GPUTextureViewDimension;
-    /**
-     * The allowed {@link GPUTextureUsage|usage(s)} for the texture view. Must be a subset of the
-     * {@link GPUTexture#usage} flags of the texture. If 0, defaults to the full set of
-     * {@link GPUTexture#usage} flags of the texture.
-     * Note: If the view's {@link GPUTextureViewDescriptor#format} doesn't support all of the
-     * texture's {@link GPUTextureDescriptor#usage}s, the default will fail,
-     * and the view's {@link GPUTextureViewDescriptor#usage} must be specified explicitly.
-     */
-    usage?: GPUTextureUsageFlags;
-    /**
-     * Which {@link GPUTextureAspect|aspect(s)} of the texture are accessible to the texture view.
-     */
-    aspect?: GPUTextureAspect;
-    /**
-     * The first (most detailed) mipmap level accessible to the texture view.
-     */
-    baseMipLevel?: GPUIntegerCoordinate;
-    /**
-     * How many mipmap levels, starting with {@link GPUTextureViewDescriptor#baseMipLevel}, are accessible to
-     * the texture view.
-     */
-    mipLevelCount?: GPUIntegerCoordinate;
-    /**
-     * The index of the first array layer accessible to the texture view.
-     */
-    baseArrayLayer?: GPUIntegerCoordinate;
-    /**
-     * How many array layers, starting with {@link GPUTextureViewDescriptor#baseArrayLayer}, are accessible
-     * to the texture view.
-     */
-    arrayLayerCount?: GPUIntegerCoordinate;
-  }
-  
-  interface GPUUncapturedErrorEventInit
-    extends EventInit {
-    error: GPUError;
-  }
-  
-  interface GPUVertexAttribute {
-    /**
-     * The {@link GPUVertexFormat} of the attribute.
-     */
-    format: GPUVertexFormat;
-    /**
-     * The offset, in bytes, from the beginning of the element to the data for the attribute.
-     */
-    offset: GPUSize64;
-    /**
-     * The numeric location associated with this attribute, which will correspond with a
-     * <a href="https://gpuweb.github.io/gpuweb/wgsl/#input-output-locations">"@location" attribute</a>
-     * declared in the {@link GPURenderPipelineDescriptor#vertex}.{@link GPUProgrammableStage#module|module}.
-     */
-    shaderLocation: GPUIndex32;
-  }
-  
-  interface GPUVertexBufferLayout {
-    /**
-     * The stride, in bytes, between elements of this array.
-     */
-    arrayStride: GPUSize64;
-    /**
-     * Whether each element of this array represents per-vertex data or per-instance data
-     */
-    stepMode?: GPUVertexStepMode;
-    /**
-     * An array defining the layout of the vertex attributes within each element.
-     */
-    attributes: Iterable<GPUVertexAttribute>;
-  }
-  
-  interface GPUVertexState
-    extends GPUProgrammableStage {
-    /**
-     * A list of {@link GPUVertexBufferLayout}s, each defining the layout of vertex attribute data in a
-     * vertex buffer used by this pipeline.
-     */
-    buffers?: Iterable<GPUVertexBufferLayout | null>;
-  }
-  
-  interface GPUBindingCommandsMixin {
-    /**
-     * Sets the current {@link GPUBindGroup} for the given index.
-     * @param index - The index to set the bind group at.
-     * @param bindGroup - Bind group to use for subsequent render or compute commands.
-     * 	<!--The overload appears to be confusing bikeshed, and it ends up expecting this to
-     * 	define the arguments for the 5-arg variant of the method, despite the "for"
-     * 	explicitly pointing at the 3-arg variant. See
-     * @param https - //github.com/plinss/widlparser/issues/56 and
-     * @param https - //github.com/tabatkins/bikeshed/issues/1740 -->
-     * @param dynamicOffsets - Array containing buffer offsets in bytes for each entry in
-     * 	`bindGroup` marked as {@link GPUBindGroupLayoutEntry#buffer}.{@link GPUBufferBindingLayout#hasDynamicOffset}.-->
-     */
-    setBindGroup(
-      index: GPUIndex32,
-      bindGroup: GPUBindGroup | null,
-      dynamicOffsets?: Iterable<GPUBufferDynamicOffset>
-    ): undefined;
-    /**
-     * Sets the current {@link GPUBindGroup} for the given index, specifying dynamic offsets as a subset
-     * of a {@link Uint32Array}.
-     * @param index - The index to set the bind group at.
-     * @param bindGroup - Bind group to use for subsequent render or compute commands.
-     * @param dynamicOffsetsData - Array containing buffer offsets in bytes for each entry in
-     * 	`bindGroup` marked as {@link GPUBindGroupLayoutEntry#buffer}.{@link GPUBufferBindingLayout#hasDynamicOffset}.
-     * @param dynamicOffsetsDataStart - Offset in elements into `dynamicOffsetsData` where the
-     * 	buffer offset data begins.
-     * @param dynamicOffsetsDataLength - Number of buffer offsets to read from `dynamicOffsetsData`.
-     */
-    setBindGroup(
-      index: GPUIndex32,
-      bindGroup: GPUBindGroup | null,
-      dynamicOffsetsData: Uint32Array,
-      dynamicOffsetsDataStart: GPUSize64,
-      dynamicOffsetsDataLength: GPUSize32
-    ): undefined;
-  }
-  
-  interface GPUCommandsMixin {}
-  
-  interface GPUDebugCommandsMixin {
-    /**
-     * Begins a labeled debug group containing subsequent commands.
-     * @param groupLabel - The label for the command group.
-     */
-    pushDebugGroup(
-      groupLabel: string
-    ): undefined;
-    /**
-     * Ends the labeled debug group most recently started by {@link GPUDebugCommandsMixin#pushDebugGroup}.
-     */
-    popDebugGroup(): undefined;
-    /**
-     * Marks a point in a stream of commands with a label.
-     * @param markerLabel - The label to insert.
-     */
-    insertDebugMarker(
-      markerLabel: string
-    ): undefined;
-  }
-  
-  interface GPUObjectBase {
-    label: string;
-  }
-  
-  interface GPUPipelineBase {
-    /**
-     * Gets a {@link GPUBindGroupLayout} that is compatible with the {@link GPUPipelineBase}'s
-     * {@link GPUBindGroupLayout} at `index`.
-     * @param index - Index into the pipeline layout's {@link GPUPipelineLayout#[[bindGroupLayouts]]}
-     * 	sequence.
-     */
-    getBindGroupLayout(
-      index: number
-    ): GPUBindGroupLayout;
-  }
-  
-  interface GPURenderCommandsMixin {
-    /**
-     * Sets the current {@link GPURenderPipeline}.
-     * @param pipeline - The render pipeline to use for subsequent drawing commands.
-     */
-    setPipeline(
-      pipeline: GPURenderPipeline
-    ): undefined;
-    /**
-     * Sets the current index buffer.
-     * @param buffer - Buffer containing index data to use for subsequent drawing commands.
-     * @param indexFormat - Format of the index data contained in `buffer`.
-     * @param offset - Offset in bytes into `buffer` where the index data begins. Defaults to `0`.
-     * @param size - Size in bytes of the index data in `buffer`.
-     * 	Defaults to the size of the buffer minus the offset.
-     */
-    setIndexBuffer(
-      buffer: GPUBuffer,
-      indexFormat: GPUIndexFormat,
-      offset?: GPUSize64,
-      size?: GPUSize64
-    ): undefined;
-    /**
-     * Sets the current vertex buffer for the given slot.
-     * @param slot - The vertex buffer slot to set the vertex buffer for.
-     * @param buffer - Buffer containing vertex data to use for subsequent drawing commands.
-     * @param offset - Offset in bytes into `buffer` where the vertex data begins. Defaults to `0`.
-     * @param size - Size in bytes of the vertex data in `buffer`.
-     * 	Defaults to the size of the buffer minus the offset.
-     */
-    setVertexBuffer(
-      slot: GPUIndex32,
-      buffer: GPUBuffer | null,
-      offset?: GPUSize64,
-      size?: GPUSize64
-    ): undefined;
-    /**
-     * Draws primitives.
-     * See [[#rendering-operations]] for the detailed specification.
-     * @param vertexCount - The number of vertices to draw.
-     * @param instanceCount - The number of instances to draw.
-     * @param firstVertex - Offset into the vertex buffers, in vertices, to begin drawing from.
-     * @param firstInstance - First instance to draw.
-     */
-    draw(
-      vertexCount: GPUSize32,
-      instanceCount?: GPUSize32,
-      firstVertex?: GPUSize32,
-      firstInstance?: GPUSize32
-    ): undefined;
-    /**
-     * Draws indexed primitives.
-     * See [[#rendering-operations]] for the detailed specification.
-     * @param indexCount - The number of indices to draw.
-     * @param instanceCount - The number of instances to draw.
-     * @param firstIndex - Offset into the index buffer, in indices, begin drawing from.
-     * @param baseVertex - Added to each index value before indexing into the vertex buffers.
-     * @param firstInstance - First instance to draw.
-     */
-    drawIndexed(
-      indexCount: GPUSize32,
-      instanceCount?: GPUSize32,
-      firstIndex?: GPUSize32,
-      baseVertex?: GPUSignedOffset32,
-      firstInstance?: GPUSize32
-    ): undefined;
-    /**
-     * Draws primitives using parameters read from a {@link GPUBuffer}.
-     * See [[#rendering-operations]] for the detailed specification.
-     * packed block of **four 32-bit unsigned integer values (16 bytes total)**, given in the same
-     * order as the arguments for {@link GPURenderEncoderBase#draw}. For example:
-     * @param indirectBuffer - Buffer containing the indirect draw parameters.
-     * @param indirectOffset - Offset in bytes into `indirectBuffer` where the drawing data begins.
-     */
-    drawIndirect(
-      indirectBuffer: GPUBuffer,
-      indirectOffset: GPUSize64
-    ): undefined;
-    /**
-     * Draws indexed primitives using parameters read from a {@link GPUBuffer}.
-     * See [[#rendering-operations]] for the detailed specification.
-     * tightly packed block of **five 32-bit unsigned integer values (20 bytes total)**, given in
-     * the same order as the arguments for {@link GPURenderEncoderBase#drawIndexed}. For example:
-     * @param indirectBuffer - Buffer containing the indirect drawIndexed parameters.
-     * @param indirectOffset - Offset in bytes into `indirectBuffer` where the drawing data begins.
-     */
-    drawIndexedIndirect(
-      indirectBuffer: GPUBuffer,
-      indirectOffset: GPUSize64
-    ): undefined;
-  }
-  
-  interface NavigatorGPU {
-    /**
-     * A global singleton providing top-level entry points like {@link GPU#requestAdapter}.
-     */
-    readonly gpu: GPU;
-  }
-  
-  interface GPU {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPU";
-    /**
-     * Requests an adapter from the user agent.
-     * The user agent chooses whether to return an adapter, and, if so,
-     * chooses according to the provided options.
-     * @param options - Criteria used to select the adapter.
-     */
-    requestAdapter(
-      options?: GPURequestAdapterOptions
-    ): Promise<GPUAdapter | null>;
-    /**
-     * Returns an optimal {@link GPUTextureFormat} for displaying 8-bit depth, standard dynamic range
-     * content on this system. Must only return {@link GPUTextureFormat#"rgba8unorm"} or
-     * {@link GPUTextureFormat#"bgra8unorm"}.
-     * The returned value can be passed as the {@link GPUCanvasConfiguration#format} to
-     * {@link GPUCanvasContext#configure} calls on a {@link GPUCanvasContext} to ensure the associated
-     * canvas is able to display its contents efficiently.
-     * Note: Canvases which are not displayed to the screen may or may not benefit from using this
-     * format.
-     */
-    getPreferredCanvasFormat(): GPUTextureFormat;
-    readonly wgslLanguageFeatures: WGSLLanguageFeatures;
-  }
-  
-  declare var GPU: {
-    prototype: GPU;
-    new (): never;
-  };
-  
-  interface GPUAdapter {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUAdapter";
-    /**
-     * The set of values in `this`.{@link GPUAdapter#[[adapter]]}.{@link adapter#[[features]]}.
-     */
-    readonly features: GPUSupportedFeatures;
-    /**
-     * The limits in `this`.{@link GPUAdapter#[[adapter]]}.{@link adapter#[[limits]]}.
-     */
-    readonly limits: GPUSupportedLimits;
-    /**
-     * Information about the physical adapter underlying this {@link GPUAdapter}.
-     * For a given {@link GPUAdapter}, the {@link GPUAdapterInfo} values exposed are constant over time.
-     * The same object is returned each time. To create that object for the first time:
-     * <div algorithm=GPUAdapter.info>
-     * <div data-timeline=content>
-     * **Called on:** {@link GPUAdapter} `this`.
-     * **Returns:** {@link GPUAdapterInfo}
-     * Content timeline steps:
-     * 1. Return a [$new adapter info$] for `this.adapter`.
-     * </div>
-     * </div>
-     */
-    readonly info: GPUAdapterInfo;
-    /**
-     * Returns the value of {@link GPUAdapter#[[adapter]]}.{@link adapter#[[fallback]]}.
-     */
-    readonly isFallbackAdapter: boolean;
-    /**
-     * Requests a device from the adapter.
-     * This is a one-time action: if a device is returned successfully,
-     * the adapter becomes {@link adapter#[[state]]} "consumed".
-     * @param descriptor - Description of the {@link GPUDevice} to request.
-     */
-    requestDevice(
-      descriptor?: GPUDeviceDescriptor
-    ): Promise<GPUDevice>;
-  }
-  
-  declare var GPUAdapter: {
-    prototype: GPUAdapter;
-    new (): never;
-  };
-  
-  interface GPUAdapterInfo {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUAdapterInfo";
-    /**
-     * The name of the vendor of the adapter, if available. Empty string otherwise.
-     */
-    readonly vendor: string;
-    /**
-     * The name of the family or class of GPUs the adapter belongs to, if available. Empty
-     * string otherwise.
-     */
-    readonly architecture: string;
-    /**
-     * A vendor-specific identifier for the adapter, if available. Empty string otherwise.
-     * Note: This is a value that represents the type of adapter. For example, it may be a
-     * [PCI device ID](https://pcisig.com/). It does not uniquely identify a given piece of
-     * hardware like a serial number.
-     */
-    readonly device: string;
-    /**
-     * A human readable string describing the adapter as reported by the driver, if available.
-     * Empty string otherwise.
-     * Note: Because no formatting is applied to {@link GPUAdapterInfo#description} attempting to parse
-     * this value is not recommended. Applications which change their behavior based on the
-     * {@link GPUAdapterInfo}, such as applying workarounds for known driver issues, should rely on the
-     * other fields when possible.
-     */
-    readonly description: string;
-  }
-  
-  declare var GPUAdapterInfo: {
-    prototype: GPUAdapterInfo;
-    new (): never;
-  };
-  
-  interface GPUBindGroup
-    extends GPUObjectBase {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUBindGroup";
-  }
-  
-  declare var GPUBindGroup: {
-    prototype: GPUBindGroup;
-    new (): never;
-  };
-  
-  interface GPUBindGroupLayout
-    extends GPUObjectBase {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUBindGroupLayout";
-  }
-  
-  declare var GPUBindGroupLayout: {
-    prototype: GPUBindGroupLayout;
-    new (): never;
-  };
-  
-  interface GPUBuffer
-    extends GPUObjectBase {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUBuffer";
-    readonly size: GPUSize64Out;
-    readonly usage: GPUFlagsConstant;
-    readonly mapState: GPUBufferMapState;
-    /**
-     * Maps the given range of the {@link GPUBuffer} and resolves the returned {@link Promise} when the
-     * {@link GPUBuffer}'s content is ready to be accessed with {@link GPUBuffer#getMappedRange}.
-     * The resolution of the returned {@link Promise} **only** indicates that the buffer has been mapped.
-     * It does not guarantee the completion of any other operations visible to the content timeline,
-     * and in particular does not imply that any other {@link Promise} returned from
-     * {@link GPUQueue#onSubmittedWorkDone()} or {@link GPUBuffer#mapAsync} on other {@link GPUBuffer}s
-     * have resolved.
-     * The resolution of the {@link Promise} returned from {@link GPUQueue#onSubmittedWorkDone}
-     * **does** imply the completion of
-     * {@link GPUBuffer#mapAsync} calls made prior to that call,
-     * on {@link GPUBuffer}s last used exclusively on that queue.
-     * @param mode - Whether the buffer should be mapped for reading or writing.
-     * @param offset - Offset in bytes into the buffer to the start of the range to map.
-     * @param size - Size in bytes of the range to map.
-     */
-    mapAsync(
-      mode: GPUMapModeFlags,
-      offset?: GPUSize64,
-      size?: GPUSize64
-    ): Promise<undefined>;
-    /**
-     * Returns an {@link ArrayBuffer} with the contents of the {@link GPUBuffer} in the given mapped range.
-     * @param offset - Offset in bytes into the buffer to return buffer contents from.
-     * @param size - Size in bytes of the {@link ArrayBuffer} to return.
-     */
-    getMappedRange(
-      offset?: GPUSize64,
-      size?: GPUSize64
-    ): ArrayBuffer;
-    /**
-     * Unmaps the mapped range of the {@link GPUBuffer} and makes its contents available for use by the
-     * GPU again.
-     */
-    unmap(): undefined;
-    /**
-     * Destroys the {@link GPUBuffer}.
-     * Note: It is valid to destroy a buffer multiple times.
-     * Note: Since no further operations can be enqueued using this buffer, implementations can
-     * free resource allocations, including mapped memory that was just unmapped.
-     */
-    destroy(): undefined;
-  }
-  
-  declare var GPUBuffer: {
-    prototype: GPUBuffer;
-    new (): never;
-  };
-  
-  interface GPUCanvasContext {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUCanvasContext";
-    /**
-     * The canvas this context was created from.
-     */
-    readonly canvas:
-      | HTMLCanvasElement
-      | OffscreenCanvas;
-    /**
-     * Configures the context for this canvas.
-     * This clears the drawing buffer to transparent black (in [$Replace the drawing buffer$]).
-     * @param configuration - Desired configuration for the context.
-     */
-    configure(
-      configuration: GPUCanvasConfiguration
-    ): undefined;
-    /**
-     * Removes the context configuration. Destroys any textures produced while configured.
-     */
-    unconfigure(): undefined;
-    /**
-     * Returns the context configuration.
-     */
-    getConfiguration(): GPUCanvasConfigurationOut | null;
-    /**
-     * Get the {@link GPUTexture} that will be composited to the document by the {@link GPUCanvasContext}
-     * next.
-     * Note: The same {@link GPUTexture} object will be returned by every
-     * call to {@link GPUCanvasContext#getCurrentTexture} until "[$Expire the current texture$]"
-     * runs, even if that {@link GPUTexture} is destroyed, failed validation, or failed to allocate.
-     */
-    getCurrentTexture(): GPUTexture;
-  }
-  
-  declare var GPUCanvasContext: {
-    prototype: GPUCanvasContext;
-    new (): never;
-  };
-  
-  interface GPUCommandBuffer
-    extends GPUObjectBase {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUCommandBuffer";
-  }
-  
-  declare var GPUCommandBuffer: {
-    prototype: GPUCommandBuffer;
-    new (): never;
-  };
-  
-  interface GPUCommandEncoder
-    extends GPUObjectBase,
-      GPUCommandsMixin,
-      GPUDebugCommandsMixin {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUCommandEncoder";
-    /**
-     * Begins encoding a render pass described by `descriptor`.
-     * @param descriptor - Description of the {@link GPURenderPassEncoder} to create.
-     */
-    beginRenderPass(
-      descriptor: GPURenderPassDescriptor
-    ): GPURenderPassEncoder;
-    beginComputePass(
-      descriptor?: GPUComputePassDescriptor
-    ): GPUComputePassEncoder;
-    /**
-     * Encode a command into the {@link GPUCommandEncoder} that copies data from a sub-region of a
-     * {@link GPUBuffer} to a sub-region of another {@link GPUBuffer}.
-     * @param source - The {@link GPUBuffer} to copy from.
-     * @param sourceOffset - Offset in bytes into `source` to begin copying from.
-     * @param destination - The {@link GPUBuffer} to copy to.
-     * @param destinationOffset - Offset in bytes into `destination` to place the copied data.
-     * @param size - Bytes to copy.
-     */
-    copyBufferToBuffer(
-      source: GPUBuffer,
-      sourceOffset: GPUSize64,
-      destination: GPUBuffer,
-      destinationOffset: GPUSize64,
-      size: GPUSize64
-    ): undefined;
-    /**
-     * Encode a command into the {@link GPUCommandEncoder} that copies data from a sub-region of a
-     * {@link GPUBuffer} to a sub-region of one or multiple continuous texture subresources.
-     * @param source - Combined with `copySize`, defines the region of the source buffer.
-     * @param destination - Combined with `copySize`, defines the region of the destination texture subresource.
-     * 	`copySize`:
-     */
-    copyBufferToTexture(
-      source: GPUImageCopyBuffer,
-      destination: GPUImageCopyTexture,
-      copySize: GPUExtent3DStrict
-    ): undefined;
-    /**
-     * Encode a command into the {@link GPUCommandEncoder} that copies data from a sub-region of one or
-     * multiple continuous texture subresources to a sub-region of a {@link GPUBuffer}.
-     * @param source - Combined with `copySize`, defines the region of the source texture subresources.
-     * @param destination - Combined with `copySize`, defines the region of the destination buffer.
-     * 	`copySize`:
-     */
-    copyTextureToBuffer(
-      source: GPUImageCopyTexture,
-      destination: GPUImageCopyBuffer,
-      copySize: GPUExtent3DStrict
-    ): undefined;
-    /**
-     * Encode a command into the {@link GPUCommandEncoder} that copies data from a sub-region of one
-     * or multiple contiguous texture subresources to another sub-region of one or
-     * multiple continuous texture subresources.
-     * @param source - Combined with `copySize`, defines the region of the source texture subresources.
-     * @param destination - Combined with `copySize`, defines the region of the destination texture subresources.
-     * 	`copySize`:
-     */
-    copyTextureToTexture(
-      source: GPUImageCopyTexture,
-      destination: GPUImageCopyTexture,
-      copySize: GPUExtent3DStrict
-    ): undefined;
-    /**
-     * Encode a command into the {@link GPUCommandEncoder} that fills a sub-region of a
-     * {@link GPUBuffer} with zeros.
-     * @param buffer - The {@link GPUBuffer} to clear.
-     * @param offset - Offset in bytes into `buffer` where the sub-region to clear begins.
-     * @param size - Size in bytes of the sub-region to clear. Defaults to the size of the buffer minus `offset`.
-     */
-    clearBuffer(
-      buffer: GPUBuffer,
-      offset?: GPUSize64,
-      size?: GPUSize64
-    ): undefined;
-    /**
-     * Resolves query results from a {@link GPUQuerySet} out into a range of a {@link GPUBuffer}.
-     * 	querySet:
-     * 	firstQuery:
-     * 	queryCount:
-     * 	destination:
-     * 	destinationOffset:
-     */
-    resolveQuerySet(
-      querySet: GPUQuerySet,
-      firstQuery: GPUSize32,
-      queryCount: GPUSize32,
-      destination: GPUBuffer,
-      destinationOffset: GPUSize64
-    ): undefined;
-    /**
-     * Completes recording of the commands sequence and returns a corresponding {@link GPUCommandBuffer}.
-     * 	descriptor:
-     */
-    finish(
-      descriptor?: GPUCommandBufferDescriptor
-    ): GPUCommandBuffer;
-  }
-  
-  declare var GPUCommandEncoder: {
-    prototype: GPUCommandEncoder;
-    new (): never;
-  };
-  
-  interface GPUCompilationInfo {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUCompilationInfo";
-    readonly messages: ReadonlyArray<GPUCompilationMessage>;
-  }
-  
-  declare var GPUCompilationInfo: {
-    prototype: GPUCompilationInfo;
-    new (): never;
-  };
-  
-  interface GPUCompilationMessage {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUCompilationMessage";
-    /**
-     * The human-readable, localizable text for this compilation message.
-     * Note: The {@link GPUCompilationMessage#message} should follow the best practices for language
-     * and direction information. This includes making use of any future standards which may
-     * emerge regarding the reporting of string language and direction metadata.
-     * <p class="note editorial"><span class=marker>Editorial note:</span>
-     * At the time of this writing, no language/direction recommendation is available that provides
-     * compatibility and consistency with legacy APIs, but when there is, adopt it formally.
-     */
-    readonly message: string;
-    /**
-     * The severity level of the message.
-     * If the {@link GPUCompilationMessage#type} is {@link GPUCompilationMessageType#"error"}, it
-     * corresponds to a shader-creation error.
-     */
-    readonly type: GPUCompilationMessageType;
-    /**
-     * The line number in the shader {@link GPUShaderModuleDescriptor#code} the
-     * {@link GPUCompilationMessage#message} corresponds to. Value is one-based, such that a lineNum of
-     * `1` indicates the first line of the shader {@link GPUShaderModuleDescriptor#code}. Lines are
-     * delimited by line breaks.
-     * If the {@link GPUCompilationMessage#message} corresponds to a substring this points to
-     * the line on which the substring begins. Must be `0` if the {@link GPUCompilationMessage#message}
-     * does not correspond to any specific point in the shader {@link GPUShaderModuleDescriptor#code}.
-     */
-    readonly lineNum: number;
-    /**
-     * The offset, in UTF-16 code units, from the beginning of line {@link GPUCompilationMessage#lineNum}
-     * of the shader {@link GPUShaderModuleDescriptor#code} to the point or beginning of the substring
-     * that the {@link GPUCompilationMessage#message} corresponds to. Value is one-based, such that a
-     * {@link GPUCompilationMessage#linePos} of `1` indicates the first code unit of the line.
-     * If {@link GPUCompilationMessage#message} corresponds to a substring this points to the
-     * first UTF-16 code unit of the substring. Must be `0` if the {@link GPUCompilationMessage#message}
-     * does not correspond to any specific point in the shader {@link GPUShaderModuleDescriptor#code}.
-     */
-    readonly linePos: number;
-    /**
-     * The offset from the beginning of the shader {@link GPUShaderModuleDescriptor#code} in UTF-16
-     * code units to the point or beginning of the substring that {@link GPUCompilationMessage#message}
-     * corresponds to. Must reference the same position as {@link GPUCompilationMessage#lineNum} and
-     * {@link GPUCompilationMessage#linePos}. Must be `0` if the {@link GPUCompilationMessage#message}
-     * does not correspond to any specific point in the shader {@link GPUShaderModuleDescriptor#code}.
-     */
-    readonly offset: number;
-    /**
-     * The number of UTF-16 code units in the substring that {@link GPUCompilationMessage#message}
-     * corresponds to. If the message does not correspond with a substring then
-     * {@link GPUCompilationMessage#length} must be 0.
-     */
-    readonly length: number;
-  }
-  
-  declare var GPUCompilationMessage: {
-    prototype: GPUCompilationMessage;
-    new (): never;
-  };
-  
-  interface GPUComputePassEncoder
-    extends GPUObjectBase,
-      GPUCommandsMixin,
-      GPUDebugCommandsMixin,
-      GPUBindingCommandsMixin {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUComputePassEncoder";
-    /**
-     * Sets the current {@link GPUComputePipeline}.
-     * @param pipeline - The compute pipeline to use for subsequent dispatch commands.
-     */
-    setPipeline(
-      pipeline: GPUComputePipeline
-    ): undefined;
-    /**
-     * Dispatch work to be performed with the current {@link GPUComputePipeline}.
-     * See [[#computing-operations]] for the detailed specification.
-     * @param workgroupCountX - X dimension of the grid of workgroups to dispatch.
-     * @param workgroupCountY - Y dimension of the grid of workgroups to dispatch.
-     * @param workgroupCountZ - Z dimension of the grid of workgroups to dispatch.
-     */
-    dispatchWorkgroups(
-      workgroupCountX: GPUSize32,
-      workgroupCountY?: GPUSize32,
-      workgroupCountZ?: GPUSize32
-    ): undefined;
-    /**
-     * Dispatch work to be performed with the current {@link GPUComputePipeline} using parameters read
-     * from a {@link GPUBuffer}.
-     * See [[#computing-operations]] for the detailed specification.
-     * packed block of **three 32-bit unsigned integer values (12 bytes total)**,
-     * given in the same order as the arguments for {@link GPUComputePassEncoder#dispatchWorkgroups}.
-     * For example:
-     * @param indirectBuffer - Buffer containing the indirect dispatch parameters.
-     * @param indirectOffset - Offset in bytes into `indirectBuffer` where the dispatch data begins.
-     */
-    dispatchWorkgroupsIndirect(
-      indirectBuffer: GPUBuffer,
-      indirectOffset: GPUSize64
-    ): undefined;
-    /**
-     * Completes recording of the compute pass commands sequence.
-     */
-    end(): undefined;
-  }
-  
-  declare var GPUComputePassEncoder: {
-    prototype: GPUComputePassEncoder;
-    new (): never;
-  };
-  
-  interface GPUComputePipeline
-    extends GPUObjectBase,
-      GPUPipelineBase {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUComputePipeline";
-  }
-  
-  declare var GPUComputePipeline: {
-    prototype: GPUComputePipeline;
-    new (): never;
-  };
-  
-  interface GPUDevice
-    extends EventTarget,
-      GPUObjectBase {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUDevice";
-    /**
-     * A set containing the {@link GPUFeatureName} values of the features
-     * supported by the device (i.e. the ones with which it was created).
-     */
-    readonly features: GPUSupportedFeatures;
-    /**
-     * Exposes the limits supported by the device
-     * (which are exactly the ones with which it was created).
-     */
-    readonly limits: GPUSupportedLimits;
-    /**
-     * The primary {@link GPUQueue} for this device.
-     */
-    readonly queue: GPUQueue;
-    /**
-     * Destroys the device, preventing further operations on it.
-     * Outstanding asynchronous operations will fail.
-     * Note: It is valid to destroy a device multiple times.
-     */
-    destroy(): undefined;
-    /**
-     * Creates a {@link GPUBuffer}.
-     * @param descriptor - Description of the {@link GPUBuffer} to create.
-     */
-    createBuffer(
-      descriptor: GPUBufferDescriptor
-    ): GPUBuffer;
-    /**
-     * Creates a {@link GPUTexture}.
-     * @param descriptor - Description of the {@link GPUTexture} to create.
-     */
-    createTexture(
-      descriptor: GPUTextureDescriptor
-    ): GPUTexture;
-    /**
-     * Creates a {@link GPUSampler}.
-     * @param descriptor - Description of the {@link GPUSampler} to create.
-     */
-    createSampler(
-      descriptor?: GPUSamplerDescriptor
-    ): GPUSampler;
-    /**
-     * Creates a {@link GPUExternalTexture} wrapping the provided image source.
-     * @param descriptor - Provides the external image source object (and any creation options).
-     */
-    importExternalTexture(
-      descriptor: GPUExternalTextureDescriptor
-    ): GPUExternalTexture;
-    /**
-     * Creates a {@link GPUBindGroupLayout}.
-     * @param descriptor - Description of the {@link GPUBindGroupLayout} to create.
-     */
-    createBindGroupLayout(
-      descriptor: GPUBindGroupLayoutDescriptor
-    ): GPUBindGroupLayout;
-    /**
-     * Creates a {@link GPUPipelineLayout}.
-     * @param descriptor - Description of the {@link GPUPipelineLayout} to create.
-     */
-    createPipelineLayout(
-      descriptor: GPUPipelineLayoutDescriptor
-    ): GPUPipelineLayout;
-    /**
-     * Creates a {@link GPUBindGroup}.
-     * @param descriptor - Description of the {@link GPUBindGroup} to create.
-     */
-    createBindGroup(
-      descriptor: GPUBindGroupDescriptor
-    ): GPUBindGroup;
-    /**
-     * Creates a {@link GPUShaderModule}.
-     * @param descriptor - Description of the {@link GPUShaderModule} to create.
-     */
-    createShaderModule(
-      descriptor: GPUShaderModuleDescriptor
-    ): GPUShaderModule;
-    /**
-     * Creates a {@link GPUComputePipeline} using immediate pipeline creation.
-     * @param descriptor - Description of the {@link GPUComputePipeline} to create.
-     */
-    createComputePipeline(
-      descriptor: GPUComputePipelineDescriptor
-    ): GPUComputePipeline;
-    /**
-     * Creates a {@link GPURenderPipeline} using immediate pipeline creation.
-     * @param descriptor - Description of the {@link GPURenderPipeline} to create.
-     */
-    createRenderPipeline(
-      descriptor: GPURenderPipelineDescriptor
-    ): GPURenderPipeline;
-    /**
-     * Creates a {@link GPUComputePipeline} using async pipeline creation.
-     * The returned {@link Promise} resolves when the created pipeline
-     * is ready to be used without additional delay.
-     * If pipeline creation fails, the returned {@link Promise} rejects with an {@link GPUPipelineError}.
-     * (A {@link GPUError} is not dispatched to the device.)
-     * Note: Use of this method is preferred whenever possible, as it prevents blocking the
-     * queue timeline work on pipeline compilation.
-     * @param descriptor - Description of the {@link GPUComputePipeline} to create.
-     */
-    createComputePipelineAsync(
-      descriptor: GPUComputePipelineDescriptor
-    ): Promise<GPUComputePipeline>;
-    /**
-     * Creates a {@link GPURenderPipeline} using async pipeline creation.
-     * The returned {@link Promise} resolves when the created pipeline
-     * is ready to be used without additional delay.
-     * If pipeline creation fails, the returned {@link Promise} rejects with an {@link GPUPipelineError}.
-     * (A {@link GPUError} is not dispatched to the device.)
-     * Note: Use of this method is preferred whenever possible, as it prevents blocking the
-     * queue timeline work on pipeline compilation.
-     * @param descriptor - Description of the {@link GPURenderPipeline} to create.
-     */
-    createRenderPipelineAsync(
-      descriptor: GPURenderPipelineDescriptor
-    ): Promise<GPURenderPipeline>;
-    /**
-     * Creates a {@link GPUCommandEncoder}.
-     * @param descriptor - Description of the {@link GPUCommandEncoder} to create.
-     */
-    createCommandEncoder(
-      descriptor?: GPUCommandEncoderDescriptor
-    ): GPUCommandEncoder;
-    /**
-     * Creates a {@link GPURenderBundleEncoder}.
-     * @param descriptor - Description of the {@link GPURenderBundleEncoder} to create.
-     */
-    createRenderBundleEncoder(
-      descriptor: GPURenderBundleEncoderDescriptor
-    ): GPURenderBundleEncoder;
-    /**
-     * Creates a {@link GPUQuerySet}.
-     * @param descriptor - Description of the {@link GPUQuerySet} to create.
-     */
-    createQuerySet(
-      descriptor: GPUQuerySetDescriptor
-    ): GPUQuerySet;
-    /**
-     * A slot-backed attribute holding a promise which is created with the device, remains
-     * pending for the lifetime of the device, then resolves when the device is lost.
-     * Upon initialization, it is set to a new promise.
-     */
-    readonly lost: Promise<GPUDeviceLostInfo>;
-    /**
-     * Pushes a new GPU error scope onto the {@link GPUDevice#[[errorScopeStack]]} for `this`.
-     * @param filter - Which class of errors this error scope observes.
-     */
-    pushErrorScope(
-      filter: GPUErrorFilter
-    ): undefined;
-    /**
-     * Pops a GPU error scope off the {@link GPUDevice#[[errorScopeStack]]} for `this`
-     * and resolves to **any** {@link GPUError} observed by the error scope, or `null` if none.
-     * There is no guarantee of the ordering of promise resolution.
-     */
-    popErrorScope(): Promise<GPUError | null>;
-    /**
-     * An event handler IDL attribute for the {@link GPUDevice#uncapturederror} event type.
-     */
-    onuncapturederror:
-      | ((
-          this: GPUDevice,
-          ev: GPUUncapturedErrorEvent
-        ) => any)
-      | null;
-  }
-  
-  declare var GPUDevice: {
-    prototype: GPUDevice;
-    new (): never;
-  };
-  
-  interface GPUDeviceLostInfo {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUDeviceLostInfo";
-    readonly reason: GPUDeviceLostReason;
-    readonly message: string;
-  }
-  
-  declare var GPUDeviceLostInfo: {
-    prototype: GPUDeviceLostInfo;
-    new (): never;
-  };
-  
-  interface GPUError {
-    /**
-     * A human-readable, localizable text message providing information about the error that
-     * occurred.
-     * Note: This message is generally intended for application developers to debug their
-     * applications and capture information for debug reports, not to be surfaced to end-users.
-     * Note: User agents should not include potentially machine-parsable details in this message,
-     * such as free system memory on {@link GPUErrorFilter#"out-of-memory"} or other details about the
-     * conditions under which memory was exhausted.
-     * Note: The {@link GPUError#message} should follow the best practices for language and
-     * direction information. This includes making use of any future standards which may emerge
-     * regarding the reporting of string language and direction metadata.
-     * <p class="note editorial"><span class=marker>Editorial note:</span>
-     * At the time of this writing, no language/direction recommendation is available that provides
-     * compatibility and consistency with legacy APIs, but when there is, adopt it formally.
-     */
-    readonly message: string;
-  }
-  
-  declare var GPUError: {
-    prototype: GPUError;
-    new (): never;
-  };
-  
-  interface GPUExternalTexture
-    extends GPUObjectBase {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUExternalTexture";
-  }
-  
-  declare var GPUExternalTexture: {
-    prototype: GPUExternalTexture;
-    new (): never;
-  };
-  
-  interface GPUInternalError
-    extends GPUError {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUInternalError";
-  }
-  
-  declare var GPUInternalError: {
-    prototype: GPUInternalError;
-    new (
-      message: string
-    ): GPUInternalError;
-  };
-  
-  interface GPUOutOfMemoryError
-    extends GPUError {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUOutOfMemoryError";
-  }
-  
-  declare var GPUOutOfMemoryError: {
-    prototype: GPUOutOfMemoryError;
-    new (
-      message: string
-    ): GPUOutOfMemoryError;
-  };
-  
-  interface GPUPipelineError
-    extends DOMException {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUPipelineError";
-    /**
-     * A read-only slot-backed attribute exposing the type of error encountered in pipeline creation
-     * as a <dfn enum for="">GPUPipelineErrorReason</dfn>:
-     * <ul dfn-type=enum-value dfn-for=GPUPipelineErrorReason>
-     * - <dfn>"validation"</dfn>: A [$validation error$].
-     * - <dfn>"internal"</dfn>: An [$internal error$].
-     * </ul>
-     */
-    readonly reason: GPUPipelineErrorReason;
-  }
-  
-  declare var GPUPipelineError: {
-    prototype: GPUPipelineError;
-    new (
-      message:
-        | string
-        | undefined,
-      options: GPUPipelineErrorInit
-    ): GPUPipelineError;
-  };
-  
-  interface GPUPipelineLayout
-    extends GPUObjectBase {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUPipelineLayout";
-  }
-  
-  declare var GPUPipelineLayout: {
-    prototype: GPUPipelineLayout;
-    new (): never;
-  };
-  
-  interface GPUQuerySet
-    extends GPUObjectBase {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUQuerySet";
-    /**
-     * Destroys the {@link GPUQuerySet}.
-     */
-    destroy(): undefined;
-    /**
-     * The type of the queries managed by this {@link GPUQuerySet}.
-     */
-    readonly type: GPUQueryType;
-    /**
-     * The number of queries managed by this {@link GPUQuerySet}.
-     */
-    readonly count: GPUSize32Out;
-  }
-  
-  declare var GPUQuerySet: {
-    prototype: GPUQuerySet;
-    new (): never;
-  };
-  
-  interface GPUQueue
-    extends GPUObjectBase {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUQueue";
-    /**
-     * Schedules the execution of the command buffers by the GPU on this queue.
-     * Submitted command buffers cannot be used again.
-     * 	`commandBuffers`:
-     */
-    submit(
-      commandBuffers: Iterable<GPUCommandBuffer>
-    ): undefined;
-    /**
-     * Returns a {@link Promise} that resolves once this queue finishes processing all the work submitted
-     * up to this moment.
-     * Resolution of this {@link Promise} implies the completion of
-     * {@link GPUBuffer#mapAsync} calls made prior to that call,
-     * on {@link GPUBuffer}s last used exclusively on that queue.
-     */
-    onSubmittedWorkDone(): Promise<undefined>;
-    /**
-     * Issues a write operation of the provided data into a {@link GPUBuffer}.
-     * @param buffer - The buffer to write to.
-     * @param bufferOffset - Offset in bytes into `buffer` to begin writing at.
-     * @param data - Data to write into `buffer`.
-     * @param dataOffset - Offset in into `data` to begin writing from. Given in elements if
-     * 	`data` is a `TypedArray` and bytes otherwise.
-     * @param size - Size of content to write from `data` to `buffer`. Given in elements if
-     * 	`data` is a `TypedArray` and bytes otherwise.
-     */
-    writeBuffer(
-      buffer: GPUBuffer,
-      bufferOffset: GPUSize64,
-      data:
-        | BufferSource
-        | SharedArrayBuffer,
-      dataOffset?: GPUSize64,
-      size?: GPUSize64
-    ): undefined;
-    /**
-     * Issues a write operation of the provided data into a {@link GPUTexture}.
-     * @param destination - The texture subresource and origin to write to.
-     * @param data - Data to write into `destination`.
-     * @param dataLayout - Layout of the content in `data`.
-     * @param size - Extents of the content to write from `data` to `destination`.
-     */
-    writeTexture(
-      destination: GPUImageCopyTexture,
-      data:
-        | BufferSource
-        | SharedArrayBuffer,
-      dataLayout: GPUImageDataLayout,
-      size: GPUExtent3DStrict
-    ): undefined;
-    /**
-     * Issues a copy operation of the contents of a platform image/canvas
-     * into the destination texture.
-     * This operation performs [[#color-space-conversions|color encoding]] into the destination
-     * encoding according to the parameters of {@link GPUImageCopyTextureTagged}.
-     * Copying into a `-srgb` texture results in the same texture bytes, not the same decoded
-     * values, as copying into the corresponding non-`-srgb` format.
-     * Thus, after a copy operation, sampling the destination texture has
-     * different results depending on whether its format is `-srgb`, all else unchanged.
-     * <!-- POSTV1(srgb-linear): If added, explain here how it interacts. -->
-     * @param source - source image and origin to copy to `destination`.
-     * @param destination - The texture subresource and origin to write to, and its encoding metadata.
-     * @param copySize - Extents of the content to write from `source` to `destination`.
-     */
-    copyExternalImageToTexture(
-      source: GPUImageCopyExternalImage,
-      destination: GPUImageCopyTextureTagged,
-      copySize: GPUExtent3DStrict
-    ): undefined;
-  }
-  
-  declare var GPUQueue: {
-    prototype: GPUQueue;
-    new (): never;
-  };
-  
-  interface GPURenderBundle
-    extends GPUObjectBase {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPURenderBundle";
-  }
-  
-  declare var GPURenderBundle: {
-    prototype: GPURenderBundle;
-    new (): never;
-  };
-  
-  interface GPURenderBundleEncoder
-    extends GPUObjectBase,
-      GPUCommandsMixin,
-      GPUDebugCommandsMixin,
-      GPUBindingCommandsMixin,
-      GPURenderCommandsMixin {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPURenderBundleEncoder";
-    /**
-     * Completes recording of the render bundle commands sequence.
-     * 	descriptor:
-     */
-    finish(
-      descriptor?: GPURenderBundleDescriptor
-    ): GPURenderBundle;
-  }
-  
-  declare var GPURenderBundleEncoder: {
-    prototype: GPURenderBundleEncoder;
-    new (): never;
-  };
-  
-  interface GPURenderPassEncoder
-    extends GPUObjectBase,
-      GPUCommandsMixin,
-      GPUDebugCommandsMixin,
-      GPUBindingCommandsMixin,
-      GPURenderCommandsMixin {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPURenderPassEncoder";
-    /**
-     * Sets the viewport used during the rasterization stage to linearly map from
-     * NDC|normalized device coordinates to viewport coordinates.
-     * @param x - Minimum X value of the viewport in pixels.
-     * @param y - Minimum Y value of the viewport in pixels.
-     * @param width - Width of the viewport in pixels.
-     * @param height - Height of the viewport in pixels.
-     * @param minDepth - Minimum depth value of the viewport.
-     * @param maxDepth - Maximum depth value of the viewport.
-     */
-    setViewport(
-      x: number,
-      y: number,
-      width: number,
-      height: number,
-      minDepth: number,
-      maxDepth: number
-    ): undefined;
-    /**
-     * Sets the scissor rectangle used during the rasterization stage.
-     * After transformation into viewport coordinates any fragments which fall outside the scissor
-     * rectangle will be discarded.
-     * @param x - Minimum X value of the scissor rectangle in pixels.
-     * @param y - Minimum Y value of the scissor rectangle in pixels.
-     * @param width - Width of the scissor rectangle in pixels.
-     * @param height - Height of the scissor rectangle in pixels.
-     */
-    setScissorRect(
-      x: GPUIntegerCoordinate,
-      y: GPUIntegerCoordinate,
-      width: GPUIntegerCoordinate,
-      height: GPUIntegerCoordinate
-    ): undefined;
-    /**
-     * Sets the constant blend color and alpha values used with {@link GPUBlendFactor#"constant"}
-     * and {@link GPUBlendFactor#"one-minus-constant"} {@link GPUBlendFactor}s.
-     * @param color - The color to use when blending.
-     */
-    setBlendConstant(
-      color: GPUColor
-    ): undefined;
-    /**
-     * Sets the {@link RenderState#[[stencilReference]]} value used during stencil tests with
-     * the {@link GPUStencilOperation#"replace"} {@link GPUStencilOperation}.
-     * @param reference - The new stencil reference value.
-     */
-    setStencilReference(
-      reference: GPUStencilValue
-    ): undefined;
-    /**
-     * @param queryIndex - The index of the query in the query set.
-     */
-    beginOcclusionQuery(
-      queryIndex: GPUSize32
-    ): undefined;
-    /**
-     */
-    endOcclusionQuery(): undefined;
-    /**
-     * Executes the commands previously recorded into the given {@link GPURenderBundle}s as part of
-     * this render pass.
-     * When a {@link GPURenderBundle} is executed, it does not inherit the render pass's pipeline, bind
-     * groups, or vertex and index buffers. After a {@link GPURenderBundle} has executed, the render
-     * pass's pipeline, bind group, and vertex/index buffer state is cleared
-     * (to the initial, empty values).
-     * Note: The state is cleared, not restored to the previous state.
-     * This occurs even if zero {@link GPURenderBundle|GPURenderBundles} are executed.
-     * @param bundles - List of render bundles to execute.
-     */
-    executeBundles(
-      bundles: Iterable<GPURenderBundle>
-    ): undefined;
-    /**
-     * Completes recording of the render pass commands sequence.
-     */
-    end(): undefined;
-  }
-  
-  declare var GPURenderPassEncoder: {
-    prototype: GPURenderPassEncoder;
-    new (): never;
-  };
-  
-  interface GPURenderPipeline
-    extends GPUObjectBase,
-      GPUPipelineBase {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPURenderPipeline";
-  }
-  
-  declare var GPURenderPipeline: {
-    prototype: GPURenderPipeline;
-    new (): never;
-  };
-  
-  interface GPUSampler
-    extends GPUObjectBase {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUSampler";
-  }
-  
-  declare var GPUSampler: {
-    prototype: GPUSampler;
-    new (): never;
-  };
-  
-  interface GPUShaderModule
-    extends GPUObjectBase {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUShaderModule";
-    /**
-     * Returns any messages generated during the {@link GPUShaderModule}'s compilation.
-     * The locations, order, and contents of messages are implementation-defined
-     * In particular, messages may not be ordered by {@link GPUCompilationMessage#lineNum}.
-     */
-    getCompilationInfo(): Promise<GPUCompilationInfo>;
-  }
-  
-  declare var GPUShaderModule: {
-    prototype: GPUShaderModule;
-    new (): never;
-  };
-  
-  type GPUSupportedFeatures =
-    ReadonlySet<string>;
-  
-  interface GPUSupportedLimits {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUSupportedLimits";
-    readonly maxTextureDimension1D: number;
-    readonly maxTextureDimension2D: number;
-    readonly maxTextureDimension3D: number;
-    readonly maxTextureArrayLayers: number;
-    readonly maxBindGroups: number;
-    readonly maxBindGroupsPlusVertexBuffers: number;
-    readonly maxBindingsPerBindGroup: number;
-    readonly maxDynamicUniformBuffersPerPipelineLayout: number;
-    readonly maxDynamicStorageBuffersPerPipelineLayout: number;
-    readonly maxSampledTexturesPerShaderStage: number;
-    readonly maxSamplersPerShaderStage: number;
-    readonly maxStorageBuffersPerShaderStage: number;
-    readonly maxStorageTexturesPerShaderStage: number;
-    readonly maxUniformBuffersPerShaderStage: number;
-    readonly maxUniformBufferBindingSize: number;
-    readonly maxStorageBufferBindingSize: number;
-    readonly minUniformBufferOffsetAlignment: number;
-    readonly minStorageBufferOffsetAlignment: number;
-    readonly maxVertexBuffers: number;
-    readonly maxBufferSize: number;
-    readonly maxVertexAttributes: number;
-    readonly maxVertexBufferArrayStride: number;
-    readonly maxInterStageShaderVariables: number;
-    readonly maxColorAttachments: number;
-    readonly maxColorAttachmentBytesPerSample: number;
-    readonly maxComputeWorkgroupStorageSize: number;
-    readonly maxComputeInvocationsPerWorkgroup: number;
-    readonly maxComputeWorkgroupSizeX: number;
-    readonly maxComputeWorkgroupSizeY: number;
-    readonly maxComputeWorkgroupSizeZ: number;
-    readonly maxComputeWorkgroupsPerDimension: number;
-  }
-  
-  declare var GPUSupportedLimits: {
-    prototype: GPUSupportedLimits;
-  };
-  
-  interface GPUTexture
-    extends GPUObjectBase {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUTexture";
-    /**
-     * Creates a {@link GPUTextureView}.
-     * @param descriptor - Description of the {@link GPUTextureView} to create.
-     */
-    createView(
-      descriptor?: GPUTextureViewDescriptor
-    ): GPUTextureView;
-    /**
-     * Destroys the {@link GPUTexture}.
-     */
-    destroy(): undefined;
-    /**
-     * The width of this {@link GPUTexture}.
-     */
-    readonly width: GPUIntegerCoordinateOut;
-    /**
-     * The height of this {@link GPUTexture}.
-     */
-    readonly height: GPUIntegerCoordinateOut;
-    /**
-     * The depth or layer count of this {@link GPUTexture}.
-     */
-    readonly depthOrArrayLayers: GPUIntegerCoordinateOut;
-    /**
-     * The number of mip levels of this {@link GPUTexture}.
-     */
-    readonly mipLevelCount: GPUIntegerCoordinateOut;
-    /**
-     * The number of sample count of this {@link GPUTexture}.
-     */
-    readonly sampleCount: GPUSize32Out;
-    /**
-     * The dimension of the set of texel for each of this {@link GPUTexture}'s subresources.
-     */
-    readonly dimension: GPUTextureDimension;
-    /**
-     * The format of this {@link GPUTexture}.
-     */
-    readonly format: GPUTextureFormat;
-    /**
-     * The allowed usages for this {@link GPUTexture}.
-     */
-    readonly usage: GPUFlagsConstant;
-  }
-  
-  declare var GPUTexture: {
-    prototype: GPUTexture;
-    new (): never;
-  };
-  
-  interface GPUTextureView
-    extends GPUObjectBase {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUTextureView";
-  }
-  
-  declare var GPUTextureView: {
-    prototype: GPUTextureView;
-    new (): never;
-  };
-  
-  interface GPUUncapturedErrorEvent
-    extends Event {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUUncapturedErrorEvent";
-    /**
-     * A slot-backed attribute holding an object representing the error that was uncaptured.
-     * This has the same type as errors returned by {@link GPUDevice#popErrorScope}.
-     */
-    readonly error: GPUError;
-  }
-  
-  declare var GPUUncapturedErrorEvent: {
-    prototype: GPUUncapturedErrorEvent;
-    new (
-      type: string,
-      gpuUncapturedErrorEventInitDict: GPUUncapturedErrorEventInit
-    ): GPUUncapturedErrorEvent;
-  };
-  
-  interface GPUValidationError
-    extends GPUError {
-    /**
-     * Nominal type branding.
-     * https://github.com/microsoft/TypeScript/pull/33038
-     * @internal
-     */
-    readonly __brand: "GPUValidationError";
-  }
-  
-  declare var GPUValidationError: {
-    prototype: GPUValidationError;
-    new (
-      message: string
-    ): GPUValidationError;
-  };
-  
-  type WGSLLanguageFeatures =
-    ReadonlySet<string>;
-  
-  interface Navigator
-    extends NavigatorGPU {}
-  
-  interface WorkerNavigator
-    extends NavigatorGPU {}
-  
-  declare var GPUBufferUsage: {
-    readonly MAP_READ: GPUFlagsConstant;
-    readonly MAP_WRITE: GPUFlagsConstant;
-    readonly COPY_SRC: GPUFlagsConstant;
-    readonly COPY_DST: GPUFlagsConstant;
-    readonly INDEX: GPUFlagsConstant;
-    readonly VERTEX: GPUFlagsConstant;
-    readonly UNIFORM: GPUFlagsConstant;
-    readonly STORAGE: GPUFlagsConstant;
-    readonly INDIRECT: GPUFlagsConstant;
-    readonly QUERY_RESOLVE: GPUFlagsConstant;
-  };
-  
-  declare var GPUColorWrite: {
-    readonly RED: GPUFlagsConstant;
-    readonly GREEN: GPUFlagsConstant;
-    readonly BLUE: GPUFlagsConstant;
-    readonly ALPHA: GPUFlagsConstant;
-    readonly ALL: GPUFlagsConstant;
-  };
-  
-  declare var GPUMapMode: {
-    readonly READ: GPUFlagsConstant;
-    readonly WRITE: GPUFlagsConstant;
-  };
-  
-  declare var GPUShaderStage: {
-    readonly VERTEX: GPUFlagsConstant;
-    readonly FRAGMENT: GPUFlagsConstant;
-    readonly COMPUTE: GPUFlagsConstant;
-  };
-  
-  declare var GPUTextureUsage: {
-    readonly COPY_SRC: GPUFlagsConstant;
-    readonly COPY_DST: GPUFlagsConstant;
-    readonly TEXTURE_BINDING: GPUFlagsConstant;
-    readonly STORAGE_BINDING: GPUFlagsConstant;
-    readonly RENDER_ATTACHMENT: GPUFlagsConstant;
-  };
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index e1e9c82..f3d3afb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "rtvis-webgpu-tutorial",
       "version": "0.0.0",
       "devDependencies": {
+        "@webgpu/types": "^0.1.66",
         "vite": "npm:rolldown-vite@7.1.19"
       }
     },
@@ -334,6 +335,13 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@webgpu/types": {
+      "version": "0.1.66",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.66.tgz",
+      "integrity": "sha512-YA2hLrwLpDsRueNDXIMqN9NTzD6bCDkuXbOSe0heS+f8YE8usA6Gbv1prj81pzVHrbaAma7zObnIC+I6/sXJgA==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
diff --git a/package.json b/package.json
index ba34a06..ac0cb65 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
+    "@webgpu/types": "^0.1.66",
     "vite": "npm:rolldown-vite@7.1.19"
   },
   "overrides": {
diff --git a/tsconfig.json b/tsconfig.json
index 84b3d20..aba9a85 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,7 +4,7 @@
     "useDefineForClassFields": true,
     "module": "ESNext",
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "types": ["vite/client", "./lib/webgpu.d.ts"],
+    "types": ["vite/client", "@webgpu/types"],
     "skipLibCheck": true,
     "allowJs": true,
     "checkJs": true,

From ddbc0f787ce979434ccd16be848e80bef62d9d3a Mon Sep 17 00:00:00 2001
From: Stefnotch <brandmairstefan@gmail.com>
Date: Sat, 25 Oct 2025 20:48:07 +0200
Subject: [PATCH 05/10] Switch to import statements

---
 index.html      |  7 ++-----
 src/loader.js   |  4 +++-
 src/tree.js     |  2 +-
 src/tutorial.js |  6 ++++--
 src/types.js    | 17 -----------------
 src/types.ts    | 12 ++++++++++++
 tasks/task0.js  |  6 ++++--
 tasks/task1.js  |  4 +++-
 tasks/task2.js  |  4 +++-
 tasks/task3.js  |  4 +++-
 tasks/task4.js  |  4 +++-
 tasks/task5.js  |  4 +++-
 tsconfig.json   |  6 +++++-
 vite.config.ts  |  7 +++++++
 14 files changed, 53 insertions(+), 34 deletions(-)
 delete mode 100644 src/types.js
 create mode 100644 src/types.ts
 create mode 100644 vite.config.ts

diff --git a/index.html b/index.html
index 92308e1..cdc77e4 100644
--- a/index.html
+++ b/index.html
@@ -19,8 +19,6 @@
 
 <!-- Util -->
 <script src="lib/mipmap.js"></script>
-<script src="src/tree.js"></script>
-<script src="src/loader.js"></script>
 
 <!-- Shaders -->
 <script src="shaders/add.js"></script>
@@ -30,10 +28,9 @@
 <script src="shaders/heatmapCompute.js"></script>
 <script src="shaders/heatmapRender.js"></script>
 
-<!-- Tutorial -->
-<script src="src/tutorial.js"></script>
+<script type="module">
+    import { Tutorial } from "./src/tutorial.js";
 
-<script>
     window.addEventListener("load", () => {
         // Initialize GUI
         const gui = new dat.GUI({ name: document.title });
diff --git a/src/loader.js b/src/loader.js
index bdffe96..3b6cd36 100644
--- a/src/loader.js
+++ b/src/loader.js
@@ -1,4 +1,6 @@
-const LOADER = {
+import { TreeStore } from "./tree";
+
+export const LOADER = {
 
 serverUrl: "https://raw.githubusercontent.com/Welko/rtvis-webgpu-tutorial/main",
 
diff --git a/src/tree.js b/src/tree.js
index e949ec9..73348a6 100644
--- a/src/tree.js
+++ b/src/tree.js
@@ -1,4 +1,4 @@
-class TreeStore {
+export class TreeStore {
 
     /**
      * @type {number}
diff --git a/src/tutorial.js b/src/tutorial.js
index 36e36d8..b50b12f 100644
--- a/src/tutorial.js
+++ b/src/tutorial.js
@@ -1,4 +1,6 @@
-class Tutorial {
+import { LOADER } from "@/src/loader";
+
+export class Tutorial {
 
     async start() {
         await this.initializeWebGPU();
@@ -63,7 +65,7 @@ class Tutorial {
      * @returns {Promise<T>}
      */
     async readBuffer(gpuBuffer, outputArray) {
-        
+        return null;
     }
 
     async render() {
diff --git a/src/types.js b/src/types.js
deleted file mode 100644
index a73d723..0000000
--- a/src/types.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/// <reference path="./loader.js" />
-/// <reference path="./tree.js" />
-
-/**
- * @typedef Shaders
- * @property {string} add
- * @property {string} aggregate
- * @property {string} heatmapCompute
- * @property {string} heatmapRender
- * @property {string} image
- * @property {string} markers
- */
-
-/**
- * @type {Shaders}
- */
-let SHADERS;
\ No newline at end of file
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..4603df7
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,12 @@
+interface Shaders {
+  add: string;
+  aggregate: string;
+  heatmapCompute: string;
+  heatmapRender: string;
+  image: string;
+  markers: string;
+}
+
+declare global {
+  let SHADERS: Shaders;
+}
diff --git a/tasks/task0.js b/tasks/task0.js
index bf9fedb..6625990 100644
--- a/tasks/task0.js
+++ b/tasks/task0.js
@@ -1,4 +1,6 @@
-class Tutorial {
+import { LOADER } from "@/src/loader";
+
+export class Tutorial {
 
     async start() {
         await this.initializeWebGPU();
@@ -71,7 +73,7 @@ class Tutorial {
      * @returns {Promise<T>}
      */
     async readBuffer(gpuBuffer, outputArray) {
-        
+        return null;
     }
 
     async render() {
diff --git a/tasks/task1.js b/tasks/task1.js
index dd59216..97fb3aa 100644
--- a/tasks/task1.js
+++ b/tasks/task1.js
@@ -1,4 +1,6 @@
-class Tutorial {
+import { LOADER } from "@/src/loader";
+
+export class Tutorial {
 
     async start() {
         await this.initializeWebGPU();
diff --git a/tasks/task2.js b/tasks/task2.js
index 1bcd3af..318fd32 100644
--- a/tasks/task2.js
+++ b/tasks/task2.js
@@ -1,4 +1,6 @@
-class Tutorial {
+import { LOADER } from "@/src/loader";
+
+export class Tutorial {
 
     async start() {
         await this.initializeWebGPU();
diff --git a/tasks/task3.js b/tasks/task3.js
index 0919c29..76c9cb0 100644
--- a/tasks/task3.js
+++ b/tasks/task3.js
@@ -1,4 +1,6 @@
-class Tutorial {
+import { LOADER } from "@/src/loader";
+
+export class Tutorial {
 
     async start() {
         await this.initializeWebGPU();
diff --git a/tasks/task4.js b/tasks/task4.js
index 78feba1..3783172 100644
--- a/tasks/task4.js
+++ b/tasks/task4.js
@@ -1,4 +1,6 @@
-class Tutorial {
+import { LOADER } from "@/src/loader";
+
+export class Tutorial {
 
     async start() {
         await this.initializeWebGPU();
diff --git a/tasks/task5.js b/tasks/task5.js
index 8f92478..140531d 100644
--- a/tasks/task5.js
+++ b/tasks/task5.js
@@ -1,4 +1,6 @@
-class Tutorial {
+import { LOADER } from "@/src/loader";
+
+export class Tutorial {
 
     async start() {
         await this.initializeWebGPU();
diff --git a/tsconfig.json b/tsconfig.json
index aba9a85..a3fb012 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,6 +9,10 @@
     "allowJs": true,
     "checkJs": true,
 
+    "paths": {
+      "@/*": ["./*"]
+    },
+
     /* Bundler mode */
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
@@ -24,5 +28,5 @@
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true
   },
-  "include": ["src"]
+  "include": ["src", "tasks"]
 }
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..2aa856d
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  resolve: {
+    tsconfigPaths:true
+  },
+});
\ No newline at end of file

From ea094d0a9875abb80a88a830e61ebc29ecc7a1ed Mon Sep 17 00:00:00 2001
From: Stefnotch <brandmairstefan@gmail.com>
Date: Sat, 25 Oct 2025 21:01:07 +0200
Subject: [PATCH 06/10] Change shaders to .wgsl

---
 index.html                                        | 11 -----------
 shaders/add.js                                    |  6 ------
 src/shaders.js                                    | 15 +++++++++++++++
 src/shaders/add.wgsl                              |  2 ++
 .../aggregate.js => src/shaders/aggregate.wgsl    |  7 +------
 .../shaders/heatmapCompute.wgsl                   |  5 -----
 .../image.js => src/shaders/heatmapRender.wgsl    |  5 -----
 .../heatmapRender.js => src/shaders/image.wgsl    |  5 -----
 shaders/markers.js => src/shaders/markers.wgsl    |  5 -----
 src/tutorial.js                                   |  1 +
 src/types.ts                                      | 12 ------------
 tasks/shaders.js                                  | 15 +++++++++++++++
 tasks/shaders/{add.js => add.wgsl}                |  5 -----
 tasks/shaders/{aggregate.js => aggregate.wgsl}    |  5 -----
 .../{heatmapCompute.js => heatmapCompute.wgsl}    |  5 -----
 .../{heatmapRender.js => heatmapRender.wgsl}      |  5 -----
 tasks/shaders/{image.js => image.wgsl}            |  5 -----
 tasks/shaders/{markers.js => markers.wgsl}        |  5 -----
 tasks/shaders/shaders.js                          | 15 +++++++++++++++
 tasks/task0.js                                    |  1 +
 tasks/task1.js                                    |  1 +
 tasks/task2.js                                    |  1 +
 tasks/task3.js                                    |  1 +
 tasks/task4.js                                    |  1 +
 tasks/task5.js                                    |  1 +
 25 files changed, 55 insertions(+), 85 deletions(-)
 delete mode 100644 shaders/add.js
 create mode 100644 src/shaders.js
 create mode 100644 src/shaders/add.wgsl
 rename shaders/aggregate.js => src/shaders/aggregate.wgsl (90%)
 rename shaders/heatmapCompute.js => src/shaders/heatmapCompute.wgsl (83%)
 rename shaders/image.js => src/shaders/heatmapRender.wgsl (78%)
 rename shaders/heatmapRender.js => src/shaders/image.wgsl (76%)
 rename shaders/markers.js => src/shaders/markers.wgsl (87%)
 delete mode 100644 src/types.ts
 create mode 100644 tasks/shaders.js
 rename tasks/shaders/{add.js => add.wgsl} (77%)
 rename tasks/shaders/{aggregate.js => aggregate.wgsl} (89%)
 rename tasks/shaders/{heatmapCompute.js => heatmapCompute.wgsl} (96%)
 rename tasks/shaders/{heatmapRender.js => heatmapRender.wgsl} (96%)
 rename tasks/shaders/{image.js => image.wgsl} (92%)
 rename tasks/shaders/{markers.js => markers.wgsl} (96%)
 create mode 100644 tasks/shaders/shaders.js

diff --git a/index.html b/index.html
index cdc77e4..c6b9a75 100644
--- a/index.html
+++ b/index.html
@@ -17,17 +17,6 @@
 <!-- GUI -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
 
-<!-- Util -->
-<script src="lib/mipmap.js"></script>
-
-<!-- Shaders -->
-<script src="shaders/add.js"></script>
-<script src="shaders/aggregate.js"></script>
-<script src="shaders/image.js"></script>
-<script src="shaders/markers.js"></script>
-<script src="shaders/heatmapCompute.js"></script>
-<script src="shaders/heatmapRender.js"></script>
-
 <script type="module">
     import { Tutorial } from "./src/tutorial.js";
 
diff --git a/shaders/add.js b/shaders/add.js
deleted file mode 100644
index 7a8d13f..0000000
--- a/shaders/add.js
+++ /dev/null
@@ -1,6 +0,0 @@
-window.SHADERS = Object.assign(window.SHADERS || {}, {
-    add: /* wgsl */ `
-
-// Your code here :)
-
-`});
\ No newline at end of file
diff --git a/src/shaders.js b/src/shaders.js
new file mode 100644
index 0000000..3547fa4
--- /dev/null
+++ b/src/shaders.js
@@ -0,0 +1,15 @@
+import add from "./shaders/add.wgsl?raw";
+import aggregate from "./shaders/aggregate.wgsl?raw";
+import image from "./shaders/image.wgsl?raw";
+import markers from "./shaders/markers.wgsl?raw";
+import heatmapCompute from "./shaders/heatmapCompute.wgsl?raw";
+import heatmapRender from "./shaders/heatmapRender.wgsl?raw";
+
+export const SHADERS = {
+  add,
+  aggregate,
+  image,
+  markers,
+  heatmapCompute,
+  heatmapRender,
+};
\ No newline at end of file
diff --git a/src/shaders/add.wgsl b/src/shaders/add.wgsl
new file mode 100644
index 0000000..08b88f6
--- /dev/null
+++ b/src/shaders/add.wgsl
@@ -0,0 +1,2 @@
+// Your code here :)
+
diff --git a/shaders/aggregate.js b/src/shaders/aggregate.wgsl
similarity index 90%
rename from shaders/aggregate.js
rename to src/shaders/aggregate.wgsl
index f359212..67d8884 100644
--- a/shaders/aggregate.js
+++ b/src/shaders/aggregate.wgsl
@@ -1,6 +1,3 @@
-window.SHADERS = Object.assign(window.SHADERS || {}, {
-    aggregate: /* wgsl */ `
-
 struct TreeInfo {
     treeHeightCategory: u32,
     crownDiameterCategory: u32,
@@ -28,6 +25,4 @@ fn main(@builtin(global_invocation_id) globalId: vec3u) {
     }
     
     // Your code here :)
-}
-
-`});
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/shaders/heatmapCompute.js b/src/shaders/heatmapCompute.wgsl
similarity index 83%
rename from shaders/heatmapCompute.js
rename to src/shaders/heatmapCompute.wgsl
index 7334e92..a127490 100644
--- a/shaders/heatmapCompute.js
+++ b/src/shaders/heatmapCompute.wgsl
@@ -1,6 +1,3 @@
-window.SHADERS = Object.assign(window.SHADERS || {}, {
-    heatmapCompute: /* wgsl */ `
-
 fn latLonToXY(lat: f32, lon: f32) -> vec2f {
     // Since our map area is kiiiiinda small, a linear mapping is okay
     return vec2f(
@@ -16,5 +13,3 @@ fn xyToCellIndex(xy: vec2f) -> u32 {
 }
 
 // Your code here :)
-
-`});
\ No newline at end of file
diff --git a/shaders/image.js b/src/shaders/heatmapRender.wgsl
similarity index 78%
rename from shaders/image.js
rename to src/shaders/heatmapRender.wgsl
index 6942035..19a8bb2 100644
--- a/shaders/image.js
+++ b/src/shaders/heatmapRender.wgsl
@@ -1,6 +1,3 @@
-window.SHADERS = Object.assign(window.SHADERS || {}, {
-    image: /* wgsl */ `
-
 const VERTICES = array<vec2f, 6>(
     vec2f(-1, -1),
     vec2f(-1, 1),
@@ -20,5 +17,3 @@ const UVS = array<vec2f, 6>(
 );
 
 // Your code here :)
-
-`});
\ No newline at end of file
diff --git a/shaders/heatmapRender.js b/src/shaders/image.wgsl
similarity index 76%
rename from shaders/heatmapRender.js
rename to src/shaders/image.wgsl
index c14c1e8..19a8bb2 100644
--- a/shaders/heatmapRender.js
+++ b/src/shaders/image.wgsl
@@ -1,6 +1,3 @@
-window.SHADERS = Object.assign(window.SHADERS || {}, {
-    heatmapRender: /* wgsl */ `
-
 const VERTICES = array<vec2f, 6>(
     vec2f(-1, -1),
     vec2f(-1, 1),
@@ -20,5 +17,3 @@ const UVS = array<vec2f, 6>(
 );
 
 // Your code here :)
-
-`});
\ No newline at end of file
diff --git a/shaders/markers.js b/src/shaders/markers.wgsl
similarity index 87%
rename from shaders/markers.js
rename to src/shaders/markers.wgsl
index f514034..321e97f 100644
--- a/shaders/markers.js
+++ b/src/shaders/markers.wgsl
@@ -1,6 +1,3 @@
-window.SHADERS = Object.assign(window.SHADERS || {}, {
-    markers: /* wgsl */ `
-
 const VERTICES = array<vec2f, 6>(
     vec2f(-1, -1),
     vec2f(-1, 1),
@@ -28,5 +25,3 @@ fn latLonToXY(lat: f32, lon: f32) -> vec2f {
 }
 
 // Your code here :)
-
-`});
\ No newline at end of file
diff --git a/src/tutorial.js b/src/tutorial.js
index b50b12f..e30bae2 100644
--- a/src/tutorial.js
+++ b/src/tutorial.js
@@ -1,4 +1,5 @@
 import { LOADER } from "@/src/loader";
+import { SHADERS } from "./shaders";
 
 export class Tutorial {
 
diff --git a/src/types.ts b/src/types.ts
deleted file mode 100644
index 4603df7..0000000
--- a/src/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-interface Shaders {
-  add: string;
-  aggregate: string;
-  heatmapCompute: string;
-  heatmapRender: string;
-  image: string;
-  markers: string;
-}
-
-declare global {
-  let SHADERS: Shaders;
-}
diff --git a/tasks/shaders.js b/tasks/shaders.js
new file mode 100644
index 0000000..3547fa4
--- /dev/null
+++ b/tasks/shaders.js
@@ -0,0 +1,15 @@
+import add from "./shaders/add.wgsl?raw";
+import aggregate from "./shaders/aggregate.wgsl?raw";
+import image from "./shaders/image.wgsl?raw";
+import markers from "./shaders/markers.wgsl?raw";
+import heatmapCompute from "./shaders/heatmapCompute.wgsl?raw";
+import heatmapRender from "./shaders/heatmapRender.wgsl?raw";
+
+export const SHADERS = {
+  add,
+  aggregate,
+  image,
+  markers,
+  heatmapCompute,
+  heatmapRender,
+};
\ No newline at end of file
diff --git a/tasks/shaders/add.js b/tasks/shaders/add.wgsl
similarity index 77%
rename from tasks/shaders/add.js
rename to tasks/shaders/add.wgsl
index 2ef43d8..5f0dfca 100644
--- a/tasks/shaders/add.js
+++ b/tasks/shaders/add.wgsl
@@ -1,6 +1,3 @@
-window.SHADERS = Object.assign(window.SHADERS || {}, {
-    add: /* wgsl */ `
-
 @group(0) @binding(0) var<storage, read_write> data : array<u32>;
 
 const addend: u32 = 100u;
@@ -13,5 +10,3 @@ fn main(@builtin(global_invocation_id) globalId: vec3u) {
     }
     data[globalId.x] += addend;
 }
-
-`});
\ No newline at end of file
diff --git a/tasks/shaders/aggregate.js b/tasks/shaders/aggregate.wgsl
similarity index 89%
rename from tasks/shaders/aggregate.js
rename to tasks/shaders/aggregate.wgsl
index 610a690..009cabe 100644
--- a/tasks/shaders/aggregate.js
+++ b/tasks/shaders/aggregate.wgsl
@@ -1,6 +1,3 @@
-window.SHADERS = Object.assign(window.SHADERS || {}, {
-    aggregate: /* wgsl */ `
-
 struct TreeInfo {
     treeHeightCategory: u32,
     crownDiameterCategory: u32,
@@ -28,5 +25,3 @@ fn main(@builtin(global_invocation_id) globalId: vec3u) {
     let districtNumber = treeInfo.districtNumber;
     atomicAdd(&aggregatedValues.districtNumberOccurrences[districtNumber - 1], 1);
 }
-
-`});
\ No newline at end of file
diff --git a/tasks/shaders/heatmapCompute.js b/tasks/shaders/heatmapCompute.wgsl
similarity index 96%
rename from tasks/shaders/heatmapCompute.js
rename to tasks/shaders/heatmapCompute.wgsl
index b170517..699c459 100644
--- a/tasks/shaders/heatmapCompute.js
+++ b/tasks/shaders/heatmapCompute.wgsl
@@ -1,6 +1,3 @@
-window.SHADERS = Object.assign(window.SHADERS || {}, {
-    heatmapCompute: /* wgsl */ `
-
 struct TreeCoordinates {
     lat: f32,
     lon: f32,
@@ -107,5 +104,3 @@ fn clear(@builtin(global_invocation_id) globalId: vec3u) {
     // Clear tree count
     atomicStore(&cells[cellIndex].treeCount, 0);
 }
-
-`});
\ No newline at end of file
diff --git a/tasks/shaders/heatmapRender.js b/tasks/shaders/heatmapRender.wgsl
similarity index 96%
rename from tasks/shaders/heatmapRender.js
rename to tasks/shaders/heatmapRender.wgsl
index 290fbfd..54056ce 100644
--- a/tasks/shaders/heatmapRender.js
+++ b/tasks/shaders/heatmapRender.wgsl
@@ -1,6 +1,3 @@
-window.SHADERS = Object.assign(window.SHADERS || {}, {
-    heatmapRender: /* wgsl */ `
-
 struct VertexInput {
     @builtin(vertex_index) vertexIndex: u32,
 };
@@ -110,5 +107,3 @@ fn fragment(input : FragmentInput) -> FragmentOutput {
         input.color,
     );
 }
-
-`});
\ No newline at end of file
diff --git a/tasks/shaders/image.js b/tasks/shaders/image.wgsl
similarity index 92%
rename from tasks/shaders/image.js
rename to tasks/shaders/image.wgsl
index 5df0aa1..a9b46d3 100644
--- a/tasks/shaders/image.js
+++ b/tasks/shaders/image.wgsl
@@ -1,6 +1,3 @@
-window.SHADERS = Object.assign(window.SHADERS || {}, {
-    image: /* wgsl */ `
-
 const VERTICES = array<vec2f, 6>(
     vec2f(-1, -1),
     vec2f(-1, 1),
@@ -53,5 +50,3 @@ fn fragment(input : FragmentInput) -> FragmentOutput {
         textureSample(texture, linearSampler, input.uv),
     );
 }
-
-`});
\ No newline at end of file
diff --git a/tasks/shaders/markers.js b/tasks/shaders/markers.wgsl
similarity index 96%
rename from tasks/shaders/markers.js
rename to tasks/shaders/markers.wgsl
index f59bf1d..9e70e3c 100644
--- a/tasks/shaders/markers.js
+++ b/tasks/shaders/markers.wgsl
@@ -1,6 +1,3 @@
-window.SHADERS = Object.assign(window.SHADERS || {}, {
-    markers: /* wgsl */ `
-
 struct VertexInput {
     @builtin(vertex_index) vertexIndex: u32,
 };
@@ -116,5 +113,3 @@ fn fragment(input : FragmentInput) -> FragmentOutput {
         input.color,
     );
 }
-
-`});
\ No newline at end of file
diff --git a/tasks/shaders/shaders.js b/tasks/shaders/shaders.js
new file mode 100644
index 0000000..426e177
--- /dev/null
+++ b/tasks/shaders/shaders.js
@@ -0,0 +1,15 @@
+import add from "./add.wgsl?raw";
+import aggregate from "./aggregate.wgsl?raw";
+import image from "./image.wgsl?raw";
+import markers from "./markers.wgsl?raw";
+import heatmapCompute from "./heatmapCompute.wgsl?raw";
+import heatmapRender from "./heatmapRender.wgsl?raw";
+
+export const SHADERS = {
+  add,
+  aggregate,
+  image,
+  markers,
+  heatmapCompute,
+  heatmapRender,
+};
\ No newline at end of file
diff --git a/tasks/task0.js b/tasks/task0.js
index 6625990..f2f55e1 100644
--- a/tasks/task0.js
+++ b/tasks/task0.js
@@ -1,4 +1,5 @@
 import { LOADER } from "@/src/loader";
+import { SHADERS } from "./shaders";
 
 export class Tutorial {
 
diff --git a/tasks/task1.js b/tasks/task1.js
index 97fb3aa..5b4a970 100644
--- a/tasks/task1.js
+++ b/tasks/task1.js
@@ -1,4 +1,5 @@
 import { LOADER } from "@/src/loader";
+import { SHADERS } from "./shaders";
 
 export class Tutorial {
 
diff --git a/tasks/task2.js b/tasks/task2.js
index 318fd32..2767327 100644
--- a/tasks/task2.js
+++ b/tasks/task2.js
@@ -1,4 +1,5 @@
 import { LOADER } from "@/src/loader";
+import { SHADERS } from "./shaders";
 
 export class Tutorial {
 
diff --git a/tasks/task3.js b/tasks/task3.js
index 76c9cb0..50c1f25 100644
--- a/tasks/task3.js
+++ b/tasks/task3.js
@@ -1,4 +1,5 @@
 import { LOADER } from "@/src/loader";
+import { SHADERS } from "./shaders";
 
 export class Tutorial {
 
diff --git a/tasks/task4.js b/tasks/task4.js
index 3783172..9678b40 100644
--- a/tasks/task4.js
+++ b/tasks/task4.js
@@ -1,4 +1,5 @@
 import { LOADER } from "@/src/loader";
+import { SHADERS } from "./shaders";
 
 export class Tutorial {
 
diff --git a/tasks/task5.js b/tasks/task5.js
index 140531d..a6af52c 100644
--- a/tasks/task5.js
+++ b/tasks/task5.js
@@ -1,4 +1,5 @@
 import { LOADER } from "@/src/loader";
+import { SHADERS } from "./shaders";
 
 export class Tutorial {
 

From aaa678c288da3d500410084df95929db8e1739cd Mon Sep 17 00:00:00 2001
From: Stefnotch <brandmairstefan@gmail.com>
Date: Sat, 25 Oct 2025 21:12:27 +0200
Subject: [PATCH 07/10] Load from local server

---
 {data => public/data}/BAUMKATOGD-100.csv    |   0
 {data => public/data}/BAUMKATOGD-219378.csv |   0
 {map => public/map}/vienna-height.png       | Bin
 {map => public/map}/vienna-outdoors.png     | Bin
 {map => public/map}/vienna-satellite.png    | Bin
 {map => public/map}/vienna-streets.png      | Bin
 {map => public/map}/vienna.json             |   0
 src/loader.js                               |   2 +-
 8 files changed, 1 insertion(+), 1 deletion(-)
 rename {data => public/data}/BAUMKATOGD-100.csv (100%)
 rename {data => public/data}/BAUMKATOGD-219378.csv (100%)
 rename {map => public/map}/vienna-height.png (100%)
 rename {map => public/map}/vienna-outdoors.png (100%)
 rename {map => public/map}/vienna-satellite.png (100%)
 rename {map => public/map}/vienna-streets.png (100%)
 rename {map => public/map}/vienna.json (100%)

diff --git a/data/BAUMKATOGD-100.csv b/public/data/BAUMKATOGD-100.csv
similarity index 100%
rename from data/BAUMKATOGD-100.csv
rename to public/data/BAUMKATOGD-100.csv
diff --git a/data/BAUMKATOGD-219378.csv b/public/data/BAUMKATOGD-219378.csv
similarity index 100%
rename from data/BAUMKATOGD-219378.csv
rename to public/data/BAUMKATOGD-219378.csv
diff --git a/map/vienna-height.png b/public/map/vienna-height.png
similarity index 100%
rename from map/vienna-height.png
rename to public/map/vienna-height.png
diff --git a/map/vienna-outdoors.png b/public/map/vienna-outdoors.png
similarity index 100%
rename from map/vienna-outdoors.png
rename to public/map/vienna-outdoors.png
diff --git a/map/vienna-satellite.png b/public/map/vienna-satellite.png
similarity index 100%
rename from map/vienna-satellite.png
rename to public/map/vienna-satellite.png
diff --git a/map/vienna-streets.png b/public/map/vienna-streets.png
similarity index 100%
rename from map/vienna-streets.png
rename to public/map/vienna-streets.png
diff --git a/map/vienna.json b/public/map/vienna.json
similarity index 100%
rename from map/vienna.json
rename to public/map/vienna.json
diff --git a/src/loader.js b/src/loader.js
index 3b6cd36..34567d2 100644
--- a/src/loader.js
+++ b/src/loader.js
@@ -2,7 +2,7 @@ import { TreeStore } from "./tree";
 
 export const LOADER = {
 
-serverUrl: "https://raw.githubusercontent.com/Welko/rtvis-webgpu-tutorial/main",
+serverUrl: ".",
 
 /**
  * @param {string} url 

From 7a9f49c954d196e38f6f41d53010d95d4fa7e672 Mon Sep 17 00:00:00 2001
From: Stefnotch <brandmairstefan@gmail.com>
Date: Sat, 25 Oct 2025 21:23:19 +0200
Subject: [PATCH 08/10] Update readme instructions

---
 README.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 986e146..47786bf 100644
--- a/README.md
+++ b/README.md
@@ -106,7 +106,7 @@ async initializeBuffers() {
 
 This is the data that we want to process on the GPU through a compute shader.
 
-Open the compute shader `shaders/add.js`. Note that this is a Javascript file. The shader code is written as a string and stored in the `window` object with the key `add`.
+Open the compute shader `src/shaders/add.js`. Note that this is a Javascript file. The shader code is written as a string and stored in the `window` object with the key `add`.
 
 The programming language of WebGPU shaders is `wgsl`. If you are using Visual Studio Code, we recommend you install the extension [WGSL Literal](https://marketplace.visualstudio.com/items?itemName=ggsimm.wgsl-literal).
 
@@ -325,7 +325,7 @@ If we now refresh the page, you'll notice that the first 64 values of our buffer
 
 However, now we do something more interesting than that. We can now use this data to count the number of trees for each district in Vienna. For a large number of trees, it is much faster to do this on the GPU in parallel rather than on the CPU. For that, we write a new shader.
 
-Open `shaders/aggregate.js`. 
+Open `src/shaders/aggregate.js`. 
 
 Note that some things are already set up for you. Most importantly, our buffer bindings:
 
@@ -487,7 +487,7 @@ For loading large 3D models, it can be beneficial to create a **vertex buffer**,
 
 Since we only render one quad (6 triangles with `triangle-list`), we hard-code the vertex and UV positions in the shader.
 
-Open `shaders/image.js`.
+Open `src/shaders/image.js`.
 
 This time, you will find only the definitions of our vertices and UVs.
 
@@ -666,7 +666,7 @@ async initializeBuffers() {
 
 With this data now available, we move on to this task's shaders.
 
-Open `shaders/markers.js`.
+Open `src/shaders/markers.js`.
 
 Our vertices and UVs are there again, together with the function `latLonToXY`, that converts latitude and longitude coordinates into XY coordinates in the range [0,1].
 
@@ -967,7 +967,7 @@ For the final task, we will combine compute and render passes to produce a heatm
 
 This will require the compute shader to go through each tree, find out in which cell of our heatmap grid it is contained, and then increment the cell's count by one. When rendering the grid cells, this value must then be mapped to a color. To do that, we must also find out what is the largest value stored among all grid cells.
 
-Open `shaders/heatmapCompute.js`.
+Open `src/shaders/heatmapCompute.js`.
 
 You will find the definitions of two functions. We already know `latLonToXY`. The other function, `xyToCellIndex`, converts the XY coordinate of a tree into the index of a cell in our grid.
 
@@ -1232,7 +1232,7 @@ async render() {
 
 Now that we're done with the computation of the heatmap, we move on to displaying it.
 
-Open `shaders/heatmapRender.js`;
+Open `src/shaders/heatmapRender.js`;
 
 You will find the familiar vertices and UVs we saw before. That is because we are using the exact same technique we used to render the tree markers, where each grid cell will be rendered as a quad.
 
@@ -1428,7 +1428,7 @@ async initializeBindGroups() {
 }
 ```
 
-Open `shaders/heatmapRender.js`.
+Open `src/shaders/heatmapRender.js`.
 
 Remove the `// Dummy value for now` section and instead calculate a color value based on the tree count.
 

From 5e4849394492dee646cdafad12bba5cb8b5527f8 Mon Sep 17 00:00:00 2001
From: Stefnotch <brandmairstefan@gmail.com>
Date: Sat, 25 Oct 2025 21:24:01 +0200
Subject: [PATCH 09/10] Replace unmaintained dat.gui with lil-gui

---
 index.html        | 7 ++++---
 package-lock.json | 9 +++++++++
 package.json      | 3 +++
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index c6b9a75..54c2bd0 100644
--- a/index.html
+++ b/index.html
@@ -15,14 +15,15 @@
 <body>
 
 <!-- GUI -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
-
 <script type="module">
     import { Tutorial } from "./src/tutorial.js";
+    import GUI from 'lil-gui'; 
+
+    const gui = new GUI();
 
     window.addEventListener("load", () => {
         // Initialize GUI
-        const gui = new dat.GUI({ name: document.title });
+        const gui = new GUI({ name: document.title });
 
         // Initialize canvas
         const canvas = document.createElement("canvas");
diff --git a/package-lock.json b/package-lock.json
index f3d3afb..140759d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,9 @@
     "": {
       "name": "rtvis-webgpu-tutorial",
       "version": "0.0.0",
+      "dependencies": {
+        "lil-gui": "^0.21.0"
+      },
       "devDependencies": {
         "@webgpu/types": "^0.1.66",
         "vite": "npm:rolldown-vite@7.1.19"
@@ -646,6 +649,12 @@
         "url": "https://opencollective.com/parcel"
       }
     },
+    "node_modules/lil-gui": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/lil-gui/-/lil-gui-0.21.0.tgz",
+      "integrity": "sha512-tpvxN7v1GvE/Tv+GRopfOp0W7fVEjF4PltkuX8vOCIfim22rD1ztvfkoEMcv9lzQeuNUSeIrUmUjBwmlW/oUew==",
+      "license": "MIT"
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
diff --git a/package.json b/package.json
index ac0cb65..24128e6 100644
--- a/package.json
+++ b/package.json
@@ -15,5 +15,8 @@
   },
   "overrides": {
     "vite": "npm:rolldown-vite@7.1.19"
+  },
+  "dependencies": {
+    "lil-gui": "^0.21.0"
   }
 }

From 330cb688d595fb61e2f543ed6016afe51af597e8 Mon Sep 17 00:00:00 2001
From: Stefnotch <brandmairstefan@gmail.com>
Date: Sat, 25 Oct 2025 22:15:07 +0200
Subject: [PATCH 10/10] Add stackblitz description

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 47786bf..e30dff7 100644
--- a/README.md
+++ b/README.md
@@ -39,8 +39,9 @@ This assumes that you have [Node.js](https://nodejs.org/en), git and a code edit
 
 ### Online Development (alternative)
 
-If you do not have Node.js installed, you can ... TODO: fill this out
+If you do not have Node.js installed, you can [edit this project online on Stackblitz](https://stackblitz.com/~/github.com/Welko/rtvis-webgpu-tutorial/). 
 
+**Make sure to download it at the end of the tutorial**
 
 ### Resources