diff --git a/apps/example/babel.config.js b/apps/example/babel.config.js
index 77ed5950b..2fbb5703a 100644
--- a/apps/example/babel.config.js
+++ b/apps/example/babel.config.js
@@ -2,6 +2,8 @@ module.exports = {
   presets: ['module:@react-native/babel-preset'],
   plugins: [
     'react-native-reanimated/plugin',
-    "transform-inline-environment-variables",
+    'transform-inline-environment-variables',
+    '@babel/plugin-transform-class-static-block',
+    'unplugin-typegpu/babel',
   ],
 };
diff --git a/apps/example/package.json b/apps/example/package.json
index bc1e36625..071126535 100644
--- a/apps/example/package.json
+++ b/apps/example/package.json
@@ -25,6 +25,7 @@
     "@tensorflow/tfjs": "^4.22.0",
     "@tensorflow/tfjs-backend-webgpu": "^4.22.0",
     "@tensorflow/tfjs-vis": "^1.5.1",
+    "@typegpu/react": "^0.11.0",
     "async-mutex": "^0.5.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
     "fast-text-encoding": "^1.0.6",
@@ -40,7 +41,7 @@
     "react-native-worklets": "0.7.2",
     "teapot": "^1.0.0",
     "three": "0.172.0",
-    "typegpu": "^0.3.2",
+    "typegpu": "^0.11.4",
     "wgpu-matrix": "^3.0.2"
   },
   "devDependencies": {
@@ -66,7 +67,8 @@
     "prettier": "2.8.8",
     "react-native-test-app": "4.4.10",
     "react-test-renderer": "18.2.0",
-    "typescript": "5.0.4"
+    "typescript": "5.0.4",
+    "unplugin-typegpu": "https://pkg.pr.new/unplugin-typegpu@bbce6b7.tgz"
   },
   "engines": {
     "node": ">=18"
diff --git a/apps/example/src/ComputeBoids/ComputeBoids.tsx b/apps/example/src/ComputeBoids/ComputeBoids.tsx
index 5111978bd..104d7f6b8 100644
--- a/apps/example/src/ComputeBoids/ComputeBoids.tsx
+++ b/apps/example/src/ComputeBoids/ComputeBoids.tsx
@@ -1,24 +1,32 @@
-import React, { useCallback, useRef } from "react";
-import tgpu from "typegpu";
-import * as d from "typegpu/data";
+import React, { useCallback, useMemo, useRef } from "react";
+import type { TgpuBuffer } from "typegpu";
+import tgpu, { d, std } from "typegpu";
 import { StyleSheet, View, Text, Button } from "react-native";
 import { Canvas } from "react-native-wgpu";
+import {
+  useBindGroup,
+  useBuffer,
+  useConfigureContext,
+  useFrame,
+  useRoot,
+  useUniform,
+} from "@typegpu/react";
+
+function rotate(v: d.v2f, angle: number): d.v2f {
+  "use gpu";
+  let pos = d.vec2f(
+    v.x * std.cos(angle) - v.y * std.sin(angle),
+    v.x * std.sin(angle) + v.y * std.cos(angle),
+  );
+  return pos;
+}
 
-import { useWebGPU } from "../components/useWebGPU";
-import { toBeAssignedLater } from "../components/utils";
-
-import { renderCode, computeCode } from "./Shaders";
-
-type BoidsOptions = {
-  separationDistance: number;
-  separationStrength: number;
-  alignmentDistance: number;
-  alignmentStrength: number;
-  cohesionDistance: number;
-  cohesionStrength: number;
-};
+function getRotationFromVelocity(velocity: d.v2f): number {
+  "use gpu";
+  return -std.atan2(velocity.x, velocity.y);
+}
 
-const Parameters = d.struct({
+const PhysicsParams = d.struct({
   separationDistance: d.f32,
   separationStrength: d.f32,
   alignmentDistance: d.f32,
@@ -26,23 +34,23 @@ const Parameters = d.struct({
   cohesionDistance: d.f32,
   cohesionStrength: d.f32,
 });
+type PhysicsParams = d.InferGPU<typeof PhysicsParams>;
 
-const TriangleData = d.struct({
+const BoidData = d.struct({
   position: d.vec2f,
   velocity: d.vec2f,
 });
 
-const TriangleDataArray = (n: number) => d.arrayOf(TriangleData, n);
+const BoidDataArray = d.arrayOf(BoidData);
 
-const renderBindGroupLayout = tgpu.bindGroupLayout({
-  trianglePos: { storage: TriangleDataArray },
-  colorPalette: { uniform: d.vec3f },
+const renderLayout = tgpu.bindGroupLayout({
+  boids: { storage: BoidDataArray },
 });
 
-const computeBindGroupLayout = tgpu.bindGroupLayout({
-  currentTrianglePos: { storage: TriangleDataArray },
-  nextTrianglePos: { storage: TriangleDataArray, access: "mutable" },
-  params: { uniform: Parameters },
+const computeLayout = tgpu.bindGroupLayout({
+  params: { uniform: PhysicsParams },
+  currentBoids: { storage: BoidDataArray },
+  nextBoids: { storage: BoidDataArray, access: "mutable" },
 });
 
 const colorPresets = {
@@ -51,7 +59,7 @@ const colorPresets = {
   greyscale: d.vec3f(0, 0, 0),
   hotcold: d.vec3f(0, 3.14, 3.14),
 } as const;
-type ColorPresets = keyof typeof colorPresets;
+type ColorPreset = keyof typeof colorPresets;
 
 const presets = {
   default: {
@@ -88,206 +96,179 @@ const presets = {
   },
 } as const;
 
-export function ComputeBoids() {
-  const randomizePositions = useRef<() => void>(() => {});
-  const updateParams = useRef<(newOptions: BoidsOptions) => void>(() => {});
-  const updateColorPreset = useRef<(newColorPreset: ColorPresets) => void>(
-    () => {},
+const triangleSize = 0.03;
+
+const triangleVertices = tgpu.const(d.arrayOf(d.vec2f), [
+  d.vec2f(0, triangleSize),
+  d.vec2f(-triangleSize / 2, -triangleSize / 2),
+  d.vec2f(triangleSize / 2, -triangleSize / 2),
+]);
+
+const boidCount = 1000;
+
+function randomizeBoids(buffer: TgpuBuffer<ReturnType<typeof BoidDataArray>>) {
+  const data = Array.from({ length: boidCount }, () => ({
+    position: d.vec2f(Math.random() * 2 - 1, Math.random() * 2 - 1),
+    velocity: d.vec2f(Math.random() * 0.1 - 0.05, Math.random() * 0.1 - 0.05),
+  }));
+
+  buffer.write(data);
+}
+
+function simulate(boidIdx: number) {
+  "use gpu";
+  // eslint-disable-next-line prefer-destructuring
+  const params = computeLayout.$.params;
+  // eslint-disable-next-line prefer-destructuring
+  const currentBoids = computeLayout.$.currentBoids;
+
+  const instanceInfo = BoidData(currentBoids[boidIdx]);
+  let separation = d.vec2f();
+  let alignment = d.vec2f();
+  let alignmentCount = d.u32(0);
+  let cohesion = d.vec2f();
+  let cohesionCount = d.u32(0);
+
+  for (let i = 0; i < currentBoids.length; i++) {
+    if (i === boidIdx) {
+      continue;
+    }
+    const other = currentBoids[i];
+    const dist = std.distance(instanceInfo.position, other.position);
+    if (dist < params.separationDistance) {
+      separation = separation.add(instanceInfo.position.sub(other.position));
+    }
+    if (dist < params.alignmentDistance) {
+      alignment = alignment.add(other.velocity);
+      alignmentCount++;
+    }
+    if (dist < params.cohesionDistance) {
+      cohesion = cohesion.add(other.position);
+      cohesionCount++;
+    }
+  }
+  if (alignmentCount > 0) {
+    alignment = alignment.div(alignmentCount);
+  }
+  if (cohesionCount > 0) {
+    cohesion = cohesion.div(cohesionCount).sub(instanceInfo.position);
+  }
+  instanceInfo.velocity = instanceInfo.velocity.add(
+    separation
+      .mul(params.separationStrength)
+      .add(alignment.mul(params.alignmentStrength))
+      .add(cohesion.mul(params.cohesionStrength)),
   );
+  instanceInfo.velocity = std
+    .normalize(instanceInfo.velocity)
+    .mul(std.clamp(std.length(instanceInfo.velocity), 0.0, 0.01));
+
+  if (instanceInfo.position[0] > 1.0 + triangleSize) {
+    instanceInfo.position[0] = -1.0 - triangleSize;
+  }
+  if (instanceInfo.position[1] > 1.0 + triangleSize) {
+    instanceInfo.position[1] = -1.0 - triangleSize;
+  }
+  if (instanceInfo.position[0] < -1.0 - triangleSize) {
+    instanceInfo.position[0] = 1.0 + triangleSize;
+  }
+  if (instanceInfo.position[1] < -1.0 - triangleSize) {
+    instanceInfo.position[1] = 1.0 + triangleSize;
+  }
+  instanceInfo.position = instanceInfo.position.add(instanceInfo.velocity);
+  computeLayout.$.nextBoids[boidIdx] = BoidData(instanceInfo);
+}
 
-  const ref = useWebGPU(({ context, device, presentationFormat }) => {
-    const root = tgpu.initFromDevice({ device });
+export function ComputeBoids() {
+  const root = useRoot();
 
-    context.configure({
-      device,
-      format: presentationFormat,
-      alphaMode: "premultiplied",
-    });
+  const colorPalette = useUniform(d.vec3f, { initial: colorPresets.jeans });
+  const physicsParams = useUniform(PhysicsParams, { initial: presets.default });
 
-    const paramsBuffer = root
-      .createBuffer(Parameters, presets.default)
-      .$usage("uniform");
-
-    const triangleSize = 0.03;
-    const triangleVertexBuffer = root
-      .createBuffer(d.arrayOf(d.f32, 6), [
-        0.0,
-        triangleSize,
-        -triangleSize / 2,
-        -triangleSize / 2,
-        triangleSize / 2,
-        -triangleSize / 2,
-      ])
-      .$usage("vertex");
-
-    const triangleAmount = 1000;
-    const trianglePosBuffers = Array.from({ length: 2 }, () =>
-      root.createBuffer(TriangleDataArray(triangleAmount)).$usage("storage"),
-    );
-
-    randomizePositions.current = () => {
-      const positions = Array.from({ length: triangleAmount }, () => ({
-        position: d.vec2f(Math.random() * 2 - 1, Math.random() * 2 - 1),
-        velocity: d.vec2f(
-          Math.random() * 0.1 - 0.05,
-          Math.random() * 0.1 - 0.05,
-        ),
-      }));
-      trianglePosBuffers[0].write(positions);
-      trianglePosBuffers[1].write(positions);
-    };
-    randomizePositions.current();
-
-    const colorPaletteBuffer = root
-      .createBuffer(d.vec3f, colorPresets.plumTree)
-      .$usage("uniform");
-
-    updateColorPreset.current = (newColorPreset: ColorPresets) => {
-      colorPaletteBuffer.write(colorPresets[newColorPreset]);
-    };
-
-    updateParams.current = (newOptions: BoidsOptions) => {
-      paramsBuffer.write(newOptions);
-    };
-
-    const renderModule = device.createShaderModule({
-      code: tgpu.resolve({
-        template: renderCode,
-        externals: {
-          _EXT_: {
-            ...renderBindGroupLayout.bound,
-          },
-        },
-      }),
-    });
+  // Storing the state in two buffers, and swapping between which one is the input and which one is the output.
+  // Also known as "double-buffering"
+  const boidsA = useBuffer(BoidDataArray(boidCount), {
+    initial: randomizeBoids,
+  }).$usage("storage");
+  const boidsB = useBuffer(BoidDataArray(boidCount)).$usage("storage");
 
-    const computeModule = device.createShaderModule({
-      code: tgpu.resolve({
-        template: computeCode,
-        externals: {
-          _EXT_: {
-            ...computeBindGroupLayout.bound,
-          },
-        },
-      }),
-    });
+  const computePipeline = useMemo(() => {
+    return root.createGuardedComputePipeline(simulate);
+  }, [root]);
 
-    const pipeline = device.createRenderPipeline({
-      layout: device.createPipelineLayout({
-        bindGroupLayouts: [root.unwrap(renderBindGroupLayout)],
-      }),
-      vertex: {
-        module: renderModule,
-        buffers: [
-          {
-            arrayStride: 2 * 4,
-            attributes: [
-              {
-                shaderLocation: 0,
-                offset: 0,
-                format: "float32x2" as const,
-              },
-            ],
-          },
-        ],
-      },
-      fragment: {
-        module: renderModule,
-        targets: [
-          {
-            format: presentationFormat,
-          },
-        ],
+  const renderPipeline = useMemo(() => {
+    return root.createRenderPipeline({
+      vertex: ({ $instanceIndex: boidIdx, $vertexIndex: vi }) => {
+        "use gpu";
+        const boid = renderLayout.$.boids[boidIdx];
+
+        const angle = getRotationFromVelocity(boid.velocity);
+
+        const local = triangleVertices.$[vi];
+        const rotated = rotate(local, angle);
+        const pos = rotated.add(boid.position);
+
+        const color = std.sin(colorPalette.$.add(angle)).mul(0.45).add(0.45);
+
+        return {
+          $position: d.vec4f(pos, 0, 1),
+          color: color,
+        };
       },
-      primitive: {
-        topology: "triangle-list",
+      fragment: ({ color }) => {
+        "use gpu";
+        return d.vec4f(color, 1);
       },
     });
+  }, [root, colorPalette]);
 
-    const computePipeline = device.createComputePipeline({
-      layout: device.createPipelineLayout({
-        bindGroupLayouts: [root.unwrap(computeBindGroupLayout)],
-      }),
-      compute: {
-        module: computeModule,
-      },
-    });
+  const updateColorPreset = useCallback(
+    (preset: ColorPreset) => {
+      colorPalette.write(colorPresets[preset]);
+    },
+    [colorPalette],
+  );
 
-    const renderBindGroups = [0, 1].map((idx) =>
-      root.createBindGroup(renderBindGroupLayout, {
-        trianglePos: trianglePosBuffers[idx],
-        colorPalette: colorPaletteBuffer,
-      }),
-    );
-
-    const computeBindGroups = [0, 1].map((idx) =>
-      root.createBindGroup(computeBindGroupLayout, {
-        currentTrianglePos: trianglePosBuffers[idx],
-        nextTrianglePos: trianglePosBuffers[1 - idx],
-        params: paramsBuffer,
-      }),
-    );
-
-    const renderPassDescriptor: GPURenderPassDescriptor = {
-      colorAttachments: [
-        {
-          view: toBeAssignedLater(),
-          clearValue: [1, 1, 1, 1],
-          loadOp: "clear" as const,
-          storeOp: "store" as const,
-        },
-      ],
-    };
-
-    let even = false;
-    function frame() {
-      even = !even;
-      (
-        renderPassDescriptor.colorAttachments as [GPURenderPassColorAttachment]
-      )[0].view = context.getCurrentTexture().createView();
-
-      const commandEncoder = device.createCommandEncoder();
-      const computePass = commandEncoder.beginComputePass();
-      computePass.setPipeline(computePipeline);
-      computePass.setBindGroup(
-        0,
-        root.unwrap(even ? computeBindGroups[0] : computeBindGroups[1]),
-      );
-      computePass.dispatchWorkgroups(triangleAmount);
-      computePass.end();
-
-      const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
-      passEncoder.setPipeline(pipeline);
-      passEncoder.setVertexBuffer(0, triangleVertexBuffer.buffer);
-      passEncoder.setBindGroup(
-        0,
-        root.unwrap(even ? renderBindGroups[1] : renderBindGroups[0]),
-      );
-      passEncoder.draw(3, triangleAmount);
-      passEncoder.end();
-
-      device.queue.submit([commandEncoder.finish()]);
-    }
-    return frame;
+  const { ref, ctxRef } = useConfigureContext({ alphaMode: "premultiplied" });
+
+  const renderGroupA = useBindGroup(renderLayout, { boids: boidsA });
+  const renderGroupB = useBindGroup(renderLayout, { boids: boidsB });
+
+  const computeGroupA = useBindGroup(computeLayout, {
+    params: physicsParams.buffer,
+    currentBoids: boidsA,
+    nextBoids: boidsB,
+  });
+  const computeGroupB = useBindGroup(computeLayout, {
+    params: physicsParams.buffer,
+    currentBoids: boidsB,
+    nextBoids: boidsA,
   });
 
-  const randomizeHandler = useCallback(() => {
-    randomizePositions.current();
-  }, []);
+  // Used to swap between A and B variants of resources
+  const evenRef = useRef(false);
 
-  const handleChoosePreset = useCallback(
-    (params: BoidsOptions) => () => {
-      updateParams.current(params);
-    },
-    [],
-  );
+  const handleRandomize = useCallback(() => {
+    randomizeBoids(evenRef.current ? boidsB : boidsA);
+  }, [boidsA, boidsB]);
 
-  const colorPresetHandler = useCallback(
-    (preset: ColorPresets) => () => {
-      updateColorPreset.current(preset);
-    },
-    [],
-  );
+  useFrame(() => {
+    const ctx = ctxRef.current;
+    if (!ctx) return;
+
+    evenRef.current = !evenRef.current;
+
+    computePipeline
+      .with(evenRef.current ? computeGroupA : computeGroupB)
+      .dispatchThreads(boidCount);
+
+    renderPipeline
+      .with(evenRef.current ? renderGroupB : renderGroupA)
+      .withColorAttachment({ view: ctx })
+      .draw(3, boidCount);
+
+    ctx.present?.();
+  });
 
   return (
     <View style={style.container}>
@@ -295,21 +276,33 @@ export function ComputeBoids() {
       <View style={style.controls}>
         <View style={style.buttonRow}>
           <Text style={style.spanText}>randomize: </Text>
-          <Button title="🔀" onPress={randomizeHandler} />
+          <Button title="🔀" onPress={handleRandomize} />
         </View>
         <View style={style.buttonRow}>
           <Text style={style.spanText}>presets: </Text>
-          <Button title="🐦" onPress={handleChoosePreset(presets.default)} />
-          <Button title="🦟" onPress={handleChoosePreset(presets.mosquitos)} />
-          <Button title="💧" onPress={handleChoosePreset(presets.blobs)} />
-          <Button title="⚛️" onPress={handleChoosePreset(presets.particles)} />
+          <Button
+            title="🐦"
+            onPress={() => physicsParams.write(presets.default)}
+          />
+          <Button
+            title="🦟"
+            onPress={() => physicsParams.write(presets.mosquitos)}
+          />
+          <Button
+            title="💧"
+            onPress={() => physicsParams.write(presets.blobs)}
+          />
+          <Button
+            title="⚛️"
+            onPress={() => physicsParams.write(presets.particles)}
+          />
         </View>
         <View style={style.buttonRow}>
           <Text style={style.spanText}>colors: </Text>
-          <Button title="🟪🟩" onPress={colorPresetHandler("plumTree")} />
-          <Button title="🟦🟫" onPress={colorPresetHandler("jeans")} />
-          <Button title="⬛️⬜️" onPress={colorPresetHandler("greyscale")} />
-          <Button title="🟥🟦" onPress={colorPresetHandler("hotcold")} />
+          <Button title="🟪🟩" onPress={() => updateColorPreset("plumTree")} />
+          <Button title="🟦🟫" onPress={() => updateColorPreset("jeans")} />
+          <Button title="⬛️⬜️" onPress={() => updateColorPreset("greyscale")} />
+          <Button title="🟥🟦" onPress={() => updateColorPreset("hotcold")} />
         </View>
       </View>
     </View>
diff --git a/apps/example/src/ComputeBoids/Shaders.ts b/apps/example/src/ComputeBoids/Shaders.ts
deleted file mode 100644
index 9aa26b6b8..000000000
--- a/apps/example/src/ComputeBoids/Shaders.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-const triangleSize = 0.03;
-
-export const renderCode = /* wgsl */ `
-  fn rotate(v: vec2f, angle: f32) -> vec2f {
-    let pos = vec2(
-      (v.x * cos(angle)) - (v.y * sin(angle)),
-      (v.x * sin(angle)) + (v.y * cos(angle))
-    );
-    return pos;
-  };
-
-  fn getRotationFromVelocity(velocity: vec2f) -> f32 {
-    return -atan2(velocity.x, velocity.y);
-  };
-
-  struct VertexOutput {
-    @builtin(position) position : vec4f,
-    @location(1) color : vec4f,
-  };
-
-  @vertex
-  fn mainVert(@builtin(instance_index) ii: u32, @location(0) v: vec2f) -> VertexOutput {
-    let instanceInfo = _EXT_.trianglePos[ii];
-
-    let angle = getRotationFromVelocity(instanceInfo.velocity);
-    let rotated = rotate(v, angle);
-
-    let offset = instanceInfo.position;
-    let pos = vec4(rotated + offset, 0.0, 1.0);
-
-    let color = vec4(
-        sin(angle + _EXT_.colorPalette.r) * 0.45 + 0.45,
-        sin(angle + _EXT_.colorPalette.g) * 0.45 + 0.45,
-        sin(angle + _EXT_.colorPalette.b) * 0.45 + 0.45,
-        1.0);
-
-    return VertexOutput(pos, color);
-  }
-
-  @fragment
-  fn mainFrag(@location(1) color : vec4f) -> @location(0) vec4f {
-    return color;
-  }
-`;
-
-export const computeCode = /* wgsl */ `
-  @compute @workgroup_size(1)
-  fn mainCompute(@builtin(global_invocation_id) gid: vec3u) {
-    let index = gid.x;
-    var instanceInfo = _EXT_.currentTrianglePos[index];
-    var separation = vec2(0.0, 0.0);
-    var alignment = vec2(0.0, 0.0);
-    var alignmentCount = 0u;
-    var cohesion = vec2(0.0, 0.0);
-    var cohesionCount = 0u;
-    for (var i = 0u; i < arrayLength(&_EXT_.currentTrianglePos); i = i + 1) {
-      if (i == index) {
-        continue;
-      }
-      var other = _EXT_.currentTrianglePos[i];
-      var dist = distance(instanceInfo.position, other.position);
-      if (dist < _EXT_.params.separationDistance) {
-        separation += instanceInfo.position - other.position;
-      }
-      if (dist < _EXT_.params.alignmentDistance) {
-        alignment += other.velocity;
-        alignmentCount++;
-      }
-      if (dist < _EXT_.params.cohesionDistance) {
-        cohesion += other.position;
-        cohesionCount++;
-      }
-    };
-    if (alignmentCount > 0u) {
-      alignment = alignment / f32(alignmentCount);
-    }
-    if (cohesionCount > 0u) {
-      cohesion = (cohesion / f32(cohesionCount)) - instanceInfo.position;
-    }
-    instanceInfo.velocity +=
-      (separation * _EXT_.params.separationStrength)
-      + (alignment * _EXT_.params.alignmentStrength)
-      + (cohesion * _EXT_.params.cohesionStrength);
-    instanceInfo.velocity = normalize(instanceInfo.velocity) * clamp(length(instanceInfo.velocity), 0.0, 0.01);
-    let triangleSize = ${triangleSize};
-    if (instanceInfo.position[0] > 1.0 + triangleSize) {
-      instanceInfo.position[0] = -1.0 - triangleSize;
-    }
-    if (instanceInfo.position[1] > 1.0 + triangleSize) {
-      instanceInfo.position[1] = -1.0 - triangleSize;
-    }
-    if (instanceInfo.position[0] < -1.0 - triangleSize) {
-      instanceInfo.position[0] = 1.0 + triangleSize;
-    }
-    if (instanceInfo.position[1] < -1.0 - triangleSize) {
-      instanceInfo.position[1] = 1.0 + triangleSize;
-    }
-    instanceInfo.position += instanceInfo.velocity;
-    _EXT_.nextTrianglePos[index] = instanceInfo;
-  }
-`;
diff --git a/apps/example/src/GradientTiles/GradientTiles.tsx b/apps/example/src/GradientTiles/GradientTiles.tsx
index 3268cb7f4..e97b1ae06 100644
--- a/apps/example/src/GradientTiles/GradientTiles.tsx
+++ b/apps/example/src/GradientTiles/GradientTiles.tsx
@@ -1,132 +1,47 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-import { Button, PixelRatio, StyleSheet, Text, View } from "react-native";
-import type { CanvasRef } from "react-native-wgpu";
-import { Canvas, useDevice } from "react-native-wgpu";
-import * as d from "typegpu/data";
-import tgpu, { type TgpuBindGroup, type TgpuBuffer } from "typegpu";
-
-import { vertWGSL, fragWGSL } from "./gradientWgsl";
-
-const Span = d.struct({
-  x: d.u32,
-  y: d.u32,
-});
-
-const bindGroupLayout = tgpu.bindGroupLayout({
-  span: { uniform: Span },
-});
-
-interface RenderingState {
-  pipeline: GPURenderPipeline;
-  spanBuffer: TgpuBuffer<typeof Span>;
-  bindGroup: TgpuBindGroup<(typeof bindGroupLayout)["entries"]>;
-}
-
-function useRoot() {
-  const { device } = useDevice();
-
-  return useMemo(
-    () => (device ? tgpu.initFromDevice({ device }) : null),
-    [device],
-  );
-}
+import { useMemo, useState } from "react";
+import { Button, StyleSheet, Text, View } from "react-native";
+import { Canvas } from "react-native-wgpu";
+import { common, d, std } from "typegpu";
+import {
+  useConfigureContext,
+  useFrame,
+  useMirroredUniform,
+  useRoot,
+} from "@typegpu/react";
 
 export function GradientTiles() {
-  const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
-  const [state, setState] = useState<null | RenderingState>(null);
-  const [spanX, setSpanX] = useState(4);
-  const [spanY, setSpanY] = useState(4);
   const root = useRoot();
-  const { device = null } = root ?? {};
-  const ref = useRef<CanvasRef>(null);
 
-  useEffect(() => {
-    if (!device || !root || state !== null) {
-      return;
-    }
-    const context = ref.current?.getContext("webgpu")!;
-
-    const canvas = context.canvas as HTMLCanvasElement;
-    canvas.width = canvas.clientWidth * PixelRatio.get();
-    canvas.height = canvas.clientHeight * PixelRatio.get();
-    context.configure({
-      device,
-      format: presentationFormat,
-    });
-
-    const spanBuffer = root
-      .createBuffer(Span, { x: 10, y: 10 })
-      .$usage("uniform");
-
-    const shader = device.createShaderModule({
-      code: tgpu.resolve({
-        template: `${vertWGSL} ${fragWGSL}`,
-        externals: {
-          _EXT_: {
-            span: bindGroupLayout.bound.span,
-          },
-        },
-      }),
-    });
+  const [spanX, setSpanX] = useState(4);
+  const [spanY, setSpanY] = useState(4);
 
-    const pipeline = device.createRenderPipeline({
-      layout: device.createPipelineLayout({
-        bindGroupLayouts: [root.unwrap(bindGroupLayout)],
-      }),
-      vertex: {
-        module: shader,
+  // Mirroring React state on the GPU as a uniform
+  const span = useMirroredUniform(d.vec2u, d.vec2u(spanX, spanY));
+
+  const pipeline = useMemo(() => {
+    // Defining a full-screen shader
+    return root.createRenderPipeline({
+      vertex: common.fullScreenTriangle,
+      fragment: ({ uv }) => {
+        "use gpu";
+        const red = std.floor(uv.x * d.f32(span.$.x)) / d.f32(span.$.x);
+        const green = std.floor(uv.y * d.f32(span.$.y)) / d.f32(span.$.y);
+        return d.vec4f(red, green, 0.5, 1.0);
       },
-      fragment: {
-        module: shader,
-        targets: [
-          {
-            format: presentationFormat,
-          },
-        ],
-      },
-      primitive: {
-        topology: "triangle-strip",
-      },
-    });
-
-    const bindGroup = root.createBindGroup(bindGroupLayout, {
-      span: spanBuffer,
     });
+  }, [root, span]);
 
-    setState({ bindGroup, pipeline, spanBuffer });
-  }, [ref, device, root, presentationFormat, state]);
-
-  useEffect(() => {
-    if (!device || !root || !state) {
-      return;
-    }
-
-    const { bindGroup, pipeline, spanBuffer } = state;
-    const context = ref.current?.getContext("webgpu")!;
-    const textureView = context.getCurrentTexture().createView();
-    const renderPassDescriptor: GPURenderPassDescriptor = {
-      colorAttachments: [
-        {
-          view: textureView,
-          clearValue: [0, 0, 0, 0],
-          loadOp: "clear",
-          storeOp: "store",
-        },
-      ],
-    };
+  const { ref, ctxRef } = useConfigureContext();
 
-    spanBuffer.write({ x: spanX, y: spanY });
+  useFrame(() => {
+    const ctx = ctxRef.current;
+    if (!ctx) return;
 
-    const commandEncoder = device.createCommandEncoder();
-    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
-    passEncoder.setPipeline(pipeline);
-    passEncoder.setBindGroup(0, root.unwrap(bindGroup));
-    passEncoder.draw(4);
-    passEncoder.end();
+    // Drawing to the canvas each frame
+    pipeline.withColorAttachment({ view: ctx }).draw(3);
 
-    device.queue.submit([commandEncoder.finish()]);
-    context.present();
-  }, [ref, device, root, spanX, spanY, state]);
+    ctx.present?.();
+  });
 
   return (
     <View style={style.container}>
diff --git a/apps/example/src/GradientTiles/gradientWgsl.ts b/apps/example/src/GradientTiles/gradientWgsl.ts
deleted file mode 100644
index c08843bfa..000000000
--- a/apps/example/src/GradientTiles/gradientWgsl.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-export const vertWGSL = `
-struct Output {
-  @builtin(position) pos: vec4f,
-  @location(0) uv: vec2f,
-}
-
-@vertex
-fn vert(
-  @builtin(vertex_index) vertexIndex: u32,
-) -> Output {
-  var pos = array<vec2f, 4>(
-    vec2(1, 1), // top-right
-    vec2(-1, 1), // top-left
-    vec2(1, -1), // bottom-right
-    vec2(-1, -1) // bottom-left
-  );
-
-  var uv = array<vec2f, 4>(
-    vec2(1., 1.), // top-right
-    vec2(0., 1.), // top-left
-    vec2(1., 0.), // bottom-right
-    vec2(0., 0.) // bottom-left
-  );
-
-  var out: Output;
-  out.pos = vec4f(pos[vertexIndex], 0.0, 1.0);
-  out.uv = uv[vertexIndex];
-  return out;
-}`;
-
-export const fragWGSL = `
-@fragment
-fn frag(
-  @location(0) uv: vec2f,
-) -> @location(0) vec4f {
-  let red = floor(uv.x * f32(_EXT_.span.x)) / f32(_EXT_.span.x);
-  let green = floor(uv.y * f32(_EXT_.span.y)) / f32(_EXT_.span.y);
-  return vec4(red, green, 0.5, 1.0);
-}`;
diff --git a/apps/example/src/MNISTInference/Lib.ts b/apps/example/src/MNISTInference/Lib.ts
index 966875a41..b9c331cdb 100644
--- a/apps/example/src/MNISTInference/Lib.ts
+++ b/apps/example/src/MNISTInference/Lib.ts
@@ -1,25 +1,27 @@
-import tgpu, { type TgpuBuffer, type Storage } from "typegpu";
-import * as d from "typegpu/data";
+import type { TgpuBuffer, StorageFlag, TgpuRoot } from "typegpu";
+import tgpu, { d, std } from "typegpu";
 
 export const SIZE = 28;
 
 // Definitions for the network
 
+type FloatsStorageBuffer = TgpuBuffer<d.WgslArray<d.F32>> & StorageFlag;
+
 interface LayerData {
   shape: readonly [number] | readonly [number, number];
-  buffer: TgpuBuffer<d.TgpuArray<d.F32>> & Storage;
+  buffer: FloatsStorageBuffer;
 }
 
 interface Layer {
-  weights: TgpuBuffer<d.TgpuArray<d.F32>> & Storage;
-  biases: TgpuBuffer<d.TgpuArray<d.F32>> & Storage;
-  state: TgpuBuffer<d.TgpuArray<d.F32>> & Storage;
+  weights: FloatsStorageBuffer;
+  biases: FloatsStorageBuffer;
+  state: FloatsStorageBuffer;
 }
 
 export interface Network {
   layers: Layer[];
-  input: TgpuBuffer<d.TgpuArray<d.F32>> & Storage;
-  output: TgpuBuffer<d.TgpuArray<d.F32>> & Storage;
+  input: FloatsStorageBuffer;
+  output: FloatsStorageBuffer;
 
   inference(data: number[]): Promise<number[]>;
 }
@@ -35,7 +37,7 @@ export const centerData = (data: Uint8Array) => {
   const offsetX = Math.round(SIZE / 2 - x);
   const offsetY = Math.round(SIZE / 2 - y);
 
-  const newData = new Array(SIZE * SIZE).fill(0);
+  const newData = Array.from({ length: SIZE * SIZE }, () => 0);
   for (let i = 0; i < SIZE; i++) {
     for (let j = 0; j < SIZE; j++) {
       const index = i * SIZE + j;
@@ -49,16 +51,13 @@ export const centerData = (data: Uint8Array) => {
   return newData;
 };
 
-export const createDemo = async (device: GPUDevice) => {
-  const root = tgpu.initFromDevice({ device });
-
+export const createDemo = async (root: TgpuRoot) => {
   const ReadonlyFloats = {
-    storage: (n: number) => d.arrayOf(d.f32, n),
+    storage: d.arrayOf(d.f32),
     access: "readonly",
   } as const;
-
   const MutableFloats = {
-    storage: (n: number) => d.arrayOf(d.f32, n),
+    storage: d.arrayOf(d.f32),
     access: "mutable",
   } as const;
 
@@ -72,51 +71,24 @@ export const createDemo = async (device: GPUDevice) => {
     biases: ReadonlyFloats,
   });
 
-  // Shader code
-  const layerShader = tgpu.resolve({
-    template: /* wgsl */ `
-
-  fn relu(x: f32) -> f32 {
-    return max(0.0, x);
+  function relu(x: number): number {
+    "use gpu";
+    return std.max(0, x);
   }
 
-  @compute @workgroup_size(1)
-  fn main(@builtin(global_invocation_id) gid: vec3u) {
-    let inputSize = arrayLength( &_EXT_.input );
-
-    let i = gid.x;
+  const pipeline = root.createGuardedComputePipeline((i: number) => {
+    "use gpu";
+    const inputSize = ioLayout.$.input.length;
+    const weightsOffset = i * inputSize;
+    let sum = d.f32(0);
 
-    let weightsOffset = i * inputSize;
-    var sum = 0.0;
-
-    for (var j = 0u; j < inputSize; j = j + 1) {
-      sum = sum + _EXT_.input[j] * _EXT_.weights[weightsOffset + j];
+    for (let j = 0; j < inputSize; j++) {
+      sum +=
+        ioLayout.$.input[j] * weightsBiasesLayout.$.weights[weightsOffset + j];
     }
 
-    sum = sum + _EXT_.biases[i];
-    _EXT_.output[i] = relu(sum);
-  }
-`,
-    externals: {
-      _EXT_: {
-        ...ioLayout.bound,
-        ...weightsBiasesLayout.bound,
-      },
-    },
-  });
-
-  const pipeline = device.createComputePipeline({
-    layout: device.createPipelineLayout({
-      bindGroupLayouts: [
-        root.unwrap(ioLayout),
-        root.unwrap(weightsBiasesLayout),
-      ],
-    }),
-    compute: {
-      module: device.createShaderModule({
-        code: layerShader,
-      }),
-    },
+    sum += weightsBiasesLayout.$.biases[i];
+    ioLayout.$.output[i] = relu(sum);
   });
 
   /**
@@ -168,20 +140,16 @@ export const createDemo = async (device: GPUDevice) => {
           `Data length ${data.length} does not match input shape ${layers[0][0].shape[0]}`,
         );
       }
+
       input.write(data);
 
       // Run the network
-      const encoder = device.createCommandEncoder();
       for (let i = 0; i < buffers.length; i++) {
-        const pass = encoder.beginComputePass();
-        pass.setPipeline(pipeline);
-        pass.setBindGroup(0, root.unwrap(ioBindGroups[i]));
-        pass.setBindGroup(1, root.unwrap(weightsBindGroups[i]));
-        pass.dispatchWorkgroups(buffers[i].biases.dataType.elementCount); //.length
-        pass.end();
+        pipeline
+          .with(ioBindGroups[i])
+          .with(weightsBindGroups[i])
+          .dispatchThreads(buffers[i].biases.dataType.elementCount);
       }
-      device.queue.submit([encoder.finish()]);
-      await device.queue.onSubmittedWorkDone();
 
       // Read the output
       return await output.read();
@@ -235,7 +203,7 @@ export const createDemo = async (device: GPUDevice) => {
     }
 
     const buffer = root
-      .createBuffer(d.arrayOf(d.f32, data.length), [...data])
+      .createBuffer(d.arrayOf(d.f32, data.length), data)
       .$usage("storage");
 
     return {
@@ -265,15 +233,5 @@ export const createDemo = async (device: GPUDevice) => {
 
   // #endregion
 
-  // #region User Interface
-
-  // #endregion
-
-  // #region Resource cleanup
-
-  function onCleanup() {
-    root.destroy();
-  }
-  return { network, onCleanup };
-  // #endregion
+  return { network };
 };
diff --git a/apps/example/src/MNISTInference/MNISTInference.tsx b/apps/example/src/MNISTInference/MNISTInference.tsx
index 5076f679b..727a16fd6 100644
--- a/apps/example/src/MNISTInference/MNISTInference.tsx
+++ b/apps/example/src/MNISTInference/MNISTInference.tsx
@@ -1,3 +1,4 @@
+import { useRoot } from "@typegpu/react";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { Button, Dimensions, Platform, StyleSheet, View } from "react-native";
 import type { SkImage, SkSurface } from "@shopify/react-native-skia";
@@ -16,7 +17,6 @@ import {
 } from "@shopify/react-native-skia";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { runOnJS, runOnUI, useSharedValue } from "react-native-reanimated";
-import { useDevice } from "react-native-wgpu";
 
 import type { Network } from "./Lib";
 import { createDemo, centerData, SIZE } from "./Lib";
@@ -55,7 +55,7 @@ for (let i = 0; i <= SIZE; i++) {
 const f = 1 / cellSize;
 
 export function MNISTInference() {
-  const { device } = useDevice();
+  const root = useRoot();
   const network = useRef<Network>();
   const text = useSharedValue("");
   const path = useSharedValue(Skia.Path.Make());
@@ -102,15 +102,13 @@ export function MNISTInference() {
 
   useEffect(() => {
     (async () => {
-      if (device) {
-        const demo = await createDemo(device);
-        network.current = demo.network;
-      }
+      const demo = await createDemo(root);
+      network.current = demo.network;
       runOnUI(() => {
         surface.value = Skia.Surface.MakeOffscreen(SIZE, SIZE)!;
       })();
     })();
-  }, [device, network, surface]);
+  }, [root, network, surface]);
   return (
     <View style={style.container}>
       <Button
diff --git a/yarn.lock b/yarn.lock
index f6a59461c..36d8eeffc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16,6 +16,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/code-frame@npm:^7.29.0":
+  version: 7.29.0
+  resolution: "@babel/code-frame@npm:7.29.0"
+  dependencies:
+    "@babel/helper-validator-identifier": ^7.28.5
+    js-tokens: ^4.0.0
+    picocolors: ^1.1.1
+  checksum: 39f5b303757e4d63bbff8133e251094cd4f952b46e3fa9febc7368d907583911d6a1eded6090876dc1feeff5cf6e134fb19b706f8d58d26c5402cd50e5e1aeb2
+  languageName: node
+  linkType: hard
+
 "@babel/compat-data@npm:^7.20.5, @babel/compat-data@npm:^7.27.7, @babel/compat-data@npm:^7.28.6":
   version: 7.28.6
   resolution: "@babel/compat-data@npm:7.28.6"
@@ -73,6 +84,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:^7.29.0":
+  version: 7.29.1
+  resolution: "@babel/generator@npm:7.29.1"
+  dependencies:
+    "@babel/parser": ^7.29.0
+    "@babel/types": ^7.29.0
+    "@jridgewell/gen-mapping": ^0.3.12
+    "@jridgewell/trace-mapping": ^0.3.28
+    jsesc: ^3.0.2
+  checksum: d8e6863b2d04f684e65ad72731049ac7d754d3a3d1a67cdfc20807b109ba3180ed90d7ccef58ce5d38ded2eaeb71983a76c711eecb9b6266118262378f6c7226
+  languageName: node
+  linkType: hard
+
 "@babel/helper-annotate-as-pure@npm:^7.27.1, @babel/helper-annotate-as-pure@npm:^7.27.3":
   version: 7.27.3
   resolution: "@babel/helper-annotate-as-pure@npm:7.27.3"
@@ -294,6 +318,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/parser@npm:^7.28.5, @babel/parser@npm:^7.29.0":
+  version: 7.29.3
+  resolution: "@babel/parser@npm:7.29.3"
+  dependencies:
+    "@babel/types": ^7.29.0
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 046f46996bf4053b6e29f8a7f420f9e0a2878593c1c9a9914a36faca23fc544a307c78a0101ba3ae98936ade68bdde686a83e1ab2b74c2ebb80dc4a9df48476d
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:^7.28.5":
   version: 7.28.5
   resolution: "@babel/plugin-bugfix-firefox-class-in-computed-class-key@npm:7.28.5"
@@ -1684,6 +1719,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/traverse@npm:^7.29.0":
+  version: 7.29.0
+  resolution: "@babel/traverse@npm:7.29.0"
+  dependencies:
+    "@babel/code-frame": ^7.29.0
+    "@babel/generator": ^7.29.0
+    "@babel/helper-globals": ^7.28.0
+    "@babel/parser": ^7.29.0
+    "@babel/template": ^7.28.6
+    "@babel/types": ^7.29.0
+    debug: ^4.3.1
+  checksum: fbb5085aa525b5d4ecd9fe2f5885d88413fff6ad9c0fac244c37f96069b6d3af9ce825750cd16af1d97d26fa3d354b38dbbdb5f31430e0d99ed89660ab65430e
+  languageName: node
+  linkType: hard
+
 "@babel/types@npm:^7.0.0, @babel/types@npm:^7.20.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.24.7, @babel/types@npm:^7.25.2, @babel/types@npm:^7.27.1, @babel/types@npm:^7.27.3, @babel/types@npm:^7.28.2, @babel/types@npm:^7.28.5, @babel/types@npm:^7.28.6, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4":
   version: 7.28.6
   resolution: "@babel/types@npm:7.28.6"
@@ -1694,6 +1744,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.29.0":
+  version: 7.29.0
+  resolution: "@babel/types@npm:7.29.0"
+  dependencies:
+    "@babel/helper-string-parser": ^7.27.1
+    "@babel/helper-validator-identifier": ^7.28.5
+  checksum: 83f190438e94c22b2574aaeef7501830311ef266eaabfb06523409f64e2fe855e522951607085d71cad286719adef14e1ba37b671f334a7cd25b0f8506a01e0b
+  languageName: node
+  linkType: hard
+
 "@bcoe/v8-coverage@npm:^0.2.3":
   version: 0.2.3
   resolution: "@bcoe/v8-coverage@npm:0.2.3"
@@ -2462,7 +2522,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.5.0":
+"@jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.5.0, @jridgewell/sourcemap-codec@npm:^1.5.5":
   version: 1.5.5
   resolution: "@jridgewell/sourcemap-codec@npm:1.5.5"
   checksum: c2e36e67971f719a8a3a85ef5a5f580622437cc723c35d03ebd0c9c0b06418700ef006f58af742791f71f6a4fc68fcfaf1f6a74ec2f9a3332860e9373459dae7
@@ -4007,6 +4067,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@typegpu/react@npm:^0.11.0":
+  version: 0.11.0
+  resolution: "@typegpu/react@npm:0.11.0"
+  peerDependencies:
+    react: ^19.0.0
+    react-native: "*"
+    react-native-wgpu: "*"
+    typegpu: ^0.11.3
+  peerDependenciesMeta:
+    react-native:
+      optional: true
+    react-native-wgpu:
+      optional: true
+  checksum: b30080da12409be8a9ba4cb01afd5da436747d12abd136c44aaae8482ab425ba3f6c9c6091b6adcb8b108ab3fbbe3aeb40ad00e125e24dbff6170fce09fead80
+  languageName: node
+  linkType: hard
+
 "@types/babel__core@npm:^7.1.14":
   version: 7.20.5
   resolution: "@types/babel__core@npm:7.20.5"
@@ -4945,6 +5022,7 @@ __metadata:
     "@tensorflow/tfjs": ^4.22.0
     "@tensorflow/tfjs-backend-webgpu": ^4.22.0
     "@tensorflow/tfjs-vis": ^1.5.1
+    "@typegpu/react": ^0.11.0
     "@types/node": ^20.14.7
     "@types/react": 19.1.0
     "@types/react-dom": 19.1.0
@@ -4974,8 +5052,9 @@ __metadata:
     react-test-renderer: 18.2.0
     teapot: ^1.0.0
     three: 0.172.0
-    typegpu: ^0.3.2
+    typegpu: ^0.11.4
     typescript: 5.0.4
+    unplugin-typegpu: "https://pkg.pr.new/unplugin-typegpu@bbce6b7.tgz"
     wgpu-matrix: ^3.0.2
   languageName: unknown
   linkType: soft
@@ -5323,6 +5402,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ast-kit@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "ast-kit@npm:2.2.0"
+  dependencies:
+    "@babel/parser": ^7.28.5
+    pathe: ^2.0.3
+  checksum: 501d92fb4076c1e9b3b1c8cd487b33ddbfe568d15a76de43d6461d5d540536f34b16e5deccd30537b2e02ddaa115a45648c9ba1d095f0cd862dcc60af3f1fba6
+  languageName: node
+  linkType: hard
+
 "ast-types@npm:0.15.2":
   version: 0.15.2
   resolution: "ast-types@npm:0.15.2"
@@ -6921,6 +7010,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"defu@npm:^6.1.4":
+  version: 6.1.7
+  resolution: "defu@npm:6.1.7"
+  checksum: aeca3fc4a1e9f5a99c8b2cd3efa478dbbda1b344e3facfbe750e8b10d8ec48ede08560108f58363e9b8b8687d9ccb68faf0ba24833e267a0f1c0518c89fdabfe
+  languageName: node
+  linkType: hard
+
 "degenerator@npm:^5.0.0":
   version: 5.0.1
   resolution: "degenerator@npm:5.0.1"
@@ -10547,6 +10643,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"magic-string@npm:^0.30.21":
+  version: 0.30.21
+  resolution: "magic-string@npm:0.30.21"
+  dependencies:
+    "@jridgewell/sourcemap-codec": ^1.5.5
+  checksum: 4ff76a4e8d439431cf49f039658751ed351962d044e5955adc257489569bd676019c906b631f86319217689d04815d7d064ee3ff08ab82ae65b7655a7e82a414
+  languageName: node
+  linkType: hard
+
 "make-dir@npm:^2.0.0, make-dir@npm:^2.1.0":
   version: 2.1.0
   resolution: "make-dir@npm:2.1.0"
@@ -12249,6 +12354,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"pathe@npm:^2.0.3":
+  version: 2.0.3
+  resolution: "pathe@npm:2.0.3"
+  checksum: 0602bdd4acb54d91044e0c56f1fb63467ae7d44ab3afea1f797947b0eb2b4d1d91cf0d58d065fdb0a8ab0c4acbbd8d3a5b424983eaf10dd5285d37a16f6e3ee9
+  languageName: node
+  linkType: hard
+
 "pend@npm:~1.2.0":
   version: 1.2.0
   resolution: "pend@npm:1.2.0"
@@ -12277,6 +12389,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"picomatch@npm:^4.0.4":
+  version: 4.0.4
+  resolution: "picomatch@npm:4.0.4"
+  checksum: 76b387b5157951422fa6049a96bdd1695e39dd126cd99df34d343638dc5cdb8bcdc83fff288c23eddcf7c26657c35e3173d4d5f488c4f28b889b314472e0a662
+  languageName: node
+  linkType: hard
+
 "pify@npm:^4.0.1":
   version: 4.0.1
   resolution: "pify@npm:4.0.1"
@@ -14443,10 +14562,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tinyest@npm:~0.1.0-alpha.1":
-  version: 0.1.2
-  resolution: "tinyest@npm:0.1.2"
-  checksum: b40e8d444a5801ae813694a35cb843549d45afc26c3302c741ef2b95fbe9f393eb25403a5c6eed2ea05a25118ccbf372e3d996c87b3c5da363399afe60763302
+"tinyest-for-wgsl@npm:~0.3.2":
+  version: 0.3.2
+  resolution: "tinyest-for-wgsl@npm:0.3.2"
+  dependencies:
+    tinyest: ~0.3.1
+  checksum: 7548ec7dbb149c74e23ec8eed4278c929c554c08eacde9bfd560f657651db159fc367f809624b3164a70e5a847739a862fb9b87b26d046f7bd63e6f32453be3e
+  languageName: node
+  linkType: hard
+
+"tinyest@npm:~0.3.1":
+  version: 0.3.1
+  resolution: "tinyest@npm:0.3.1"
+  checksum: 8b66e4dc93efd81b0a1e8f034ed134342846e8741864865b361d54d50e5c101492f27f34319677164934ce555c639650d8a8571a139c7c245d866855c5362bb9
   languageName: node
   linkType: hard
 
@@ -14571,6 +14699,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tsover-runtime@npm:^0.0.6":
+  version: 0.0.6
+  resolution: "tsover-runtime@npm:0.0.6"
+  checksum: 6199d1ea2d59fc1b5f33ddad808037f430a15aac4ce7c4c0ff9b151b46b7ec9aa8cc4c3553a12bbaed9207c387f90c1022b484e7a17190890b2351477087b21c
+  languageName: node
+  linkType: hard
+
 "tsutils@npm:^3.21.0":
   version: 3.21.0
   resolution: "tsutils@npm:3.21.0"
@@ -14759,10 +14894,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typed-binary@npm:^4.3.1":
-  version: 4.3.2
-  resolution: "typed-binary@npm:4.3.2"
-  checksum: 7418fbb24f9f7afc1037be05dd6fd898e8ab807ad1d3561e8616dc96c822b0603ea86c8ee8a33c7347b58a4067558e194f16f793c43da708e1319bb9999090d9
+"typed-binary@npm:^4.3.3":
+  version: 4.3.3
+  resolution: "typed-binary@npm:4.3.3"
+  checksum: 26b9ff7e77a14edb91609f79b3a9e67f4d3ad86e46ad929ff87ded758e7cff3a782a3055187170bb38434e2c77b2c4ce0bfada19e9c70cb4f43ad23c4518a293
   languageName: node
   linkType: hard
 
@@ -14773,13 +14908,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"typegpu@npm:^0.3.2":
-  version: 0.3.4
-  resolution: "typegpu@npm:0.3.4"
+"typegpu@npm:^0.11.4":
+  version: 0.11.4
+  resolution: "typegpu@npm:0.11.4"
   dependencies:
-    tinyest: ~0.1.0-alpha.1
-    typed-binary: ^4.3.1
-  checksum: 83466e9b8f7937ddf16e733fa27e9109a0b90ed28a793af75c8f9ab7e217b277c4a6683eb690bb4ae465135c6615f14870fcb463ac2a57e22ad0c3474b6918a5
+    tinyest: ~0.3.1
+    tsover-runtime: ^0.0.6
+    typed-binary: ^4.3.3
+  checksum: 08971845cdac92b6e9894b539699162092eeca2106328498795b1c9e54b62b94517b4655c52ad8932100af2266fb489ae8e689ea4cb26f1d9d27d12a3e0a0fba
   languageName: node
   linkType: hard
 
@@ -14951,6 +15087,38 @@ __metadata:
   languageName: node
   linkType: hard
 
+"unplugin-typegpu@https://pkg.pr.new/unplugin-typegpu@bbce6b7.tgz":
+  version: 0.11.3
+  resolution: "unplugin-typegpu@https://pkg.pr.new/unplugin-typegpu@bbce6b7.tgz"
+  dependencies:
+    "@babel/parser": ^7.29.0
+    "@babel/traverse": ^7.29.0
+    "@babel/types": ^7.29.0
+    ast-kit: ^2.2.0
+    defu: ^6.1.4
+    magic-string: ^0.30.21
+    pathe: ^2.0.3
+    picomatch: ^4.0.4
+    tinyest: ~0.3.1
+    tinyest-for-wgsl: ~0.3.2
+    unplugin: ^3.0.0
+  peerDependencies:
+    typegpu: ^0.11.4
+  checksum: 4bdf98821cc206e8ded55bb15c463a346d55eef2cd8dcaeb66863fbdb379cafcc64270b30f35da6ba3eec2a57da8638690cbe2f49f0e1f7d6535a74864289cf8
+  languageName: node
+  linkType: hard
+
+"unplugin@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "unplugin@npm:3.0.0"
+  dependencies:
+    "@jridgewell/remapping": ^2.3.5
+    picomatch: ^4.0.3
+    webpack-virtual-modules: ^0.6.2
+  checksum: b25ad7d7f69848f5ad8094429eb50a5ecd5c038eeb04571658ad4fe1001159b7899c5a7f913af15ccd00108c47824ff9eb815dcb10b1c4e714d22084eaaa0f89
+  languageName: node
+  linkType: hard
+
 "unrs-resolver@npm:^1.6.2":
   version: 1.11.1
   resolution: "unrs-resolver@npm:1.11.1"
@@ -15751,6 +15919,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"webpack-virtual-modules@npm:^0.6.2":
+  version: 0.6.2
+  resolution: "webpack-virtual-modules@npm:0.6.2"
+  checksum: 7e8e1d63f35864c815420cc2f27da8561a1e028255040698a352717de0ba46d3b3faf16f06c1a1965217054c4c2894eb9af53a85451870e919b5707ce9c5822d
+  languageName: node
+  linkType: hard
+
 "wgpu-matrix@npm:^3.0.2":
   version: 3.4.0
   resolution: "wgpu-matrix@npm:3.4.0"