@bloopjs/toodle 0.1.7 → 0.1.8

package/dist/mod.js

@@ -1,3 +1,14 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+
 // src/limits.ts
 var DEFAULT_LIMITS = {
   instanceCount: 1024 * 2,
@@ -3434,6 +3445,18 @@ var {
   vec4: vec4n
 } = wgpuMatrixAPI(ZeroArray, Array, Array, Array, Array, Array);
 
+// src/backends/mod.ts
+var exports_mod = {};
+__export(exports_mod, {
+  isWebGPUAvailable: () => isWebGPUAvailable,
+  isWebGL2Available: () => isWebGL2Available,
+  detectBackend: () => detectBackend,
+  defaultGLSLFragmentShader: () => defaultFragmentShader,
+  WebGPUBackend: () => WebGPUBackend,
+  WebGLBackend: () => WebGLBackend,
+  PostProcessDefaults: () => PostProcessDefaults
+});
+
 // src/backends/detection.ts
 async function detectBackend() {
   if (typeof navigator !== "undefined" && "gpu" in navigator) {
@@ -3446,13 +3469,21 @@ async function detectBackend() {
   }
   return "webgl2";
 }
-// src/utils/assert.ts
-function assert(condition, message) {
-  if (!condition) {
-    throw new Error(message);
+function isWebGPUAvailable() {
+  return typeof navigator !== "undefined" && "gpu" in navigator;
+}
+function isWebGL2Available() {
+  if (typeof document === "undefined") {
+    return false;
+  }
+  try {
+    const canvas = document.createElement("canvas");
+    const gl = canvas.getContext("webgl2");
+    return gl !== null;
+  } catch {
+    return false;
   }
 }
-
 // src/backends/webgl2/glsl/quad.glsl.ts
 var vertexShader = `#version 300 es
 precision highp float;
@@ -3557,6 +3588,13 @@ void main() {
   }
 }
 `;
+var defaultFragmentShader = fragmentShader;
+// src/utils/assert.ts
+function assert(condition, message) {
+  if (!condition) {
+    throw new Error(message);
+  }
+}
 
 // src/backends/webgl2/WebGLQuadShader.ts
 var INSTANCE_FLOATS = 28;
@@ -3716,7 +3754,7 @@ class WebGLQuadShader {
 }
 
 // src/backends/webgl2/WebGLBackend.ts
-class WebGLBackend2 {
+class WebGLBackend {
   type = "webgl2";
   limits;
   atlasSize;
@@ -3746,7 +3784,7 @@ class WebGLBackend2 {
       ...DEFAULT_LIMITS,
       ...options.limits
     };
-    const backend = new WebGLBackend2(gl, canvas, limits);
+    const backend = new WebGLBackend(gl, canvas, limits);
     backend.createTextureAtlas("default", {
       format: options.format ?? "rgba8unorm",
       layers: limits.textureArrayLayers,
@@ -3835,6 +3873,58 @@ class WebGLBackend2 {
     return this.getTextureAtlas("default")?.format ?? "rgba8unorm";
   }
 }
+// src/backends/webgpu/postprocess/mod.ts
+var PostProcessDefaults = {
+  sampler(device) {
+    return device.createSampler({
+      label: "toodle post process sampler",
+      magFilter: "linear",
+      minFilter: "linear",
+      mipmapFilter: "linear",
+      addressModeU: "clamp-to-edge",
+      addressModeV: "clamp-to-edge"
+    });
+  },
+  vertexBufferLayout(_device) {
+    return {
+      arrayStride: 4 * 4,
+      attributes: [{ shaderLocation: 0, offset: 0, format: "float32x2" }]
+    };
+  },
+  vertexShader(device) {
+    return device.createShaderModule({
+      label: "toodle post process vertex shader",
+      code: `
+  struct VertexOut {
+    @builtin(position) position: vec4<f32>,
+    @location(0) uv: vec2<f32>,
+  };
+
+  const enginePosLookup = array(vec2f(-1, 1), vec2f(-1, -1), vec2f(1, 1), vec2f(1, -1));
+  const engineUvLookup = array(vec2f(0, 0), vec2f(0, 1), vec2f(1, 0), vec2f(1, 1));
+
+  @vertex
+  fn vs_main(@builtin(vertex_index) vertexIndex: u32) -> VertexOut {
+    var out: VertexOut;
+    out.position = vec4(enginePosLookup[vertexIndex], 0.0, 1.0);
+    out.uv = engineUvLookup[vertexIndex];
+    return out;
+  }
+      `
+    });
+  },
+  pipelineDescriptor(device) {
+    return {
+      label: "toodle post process pipeline descriptor",
+      layout: "auto",
+      primitive: { topology: "triangle-strip" },
+      vertex: {
+        buffers: [PostProcessDefaults.vertexBufferLayout(device)],
+        module: PostProcessDefaults.vertexShader(device)
+      }
+    };
+  }
+};
 // node_modules/webgpu-utils/dist/1.x/webgpu-utils.module.js
 var roundUpToMultipleOf = (v, multiple) => ((v + multiple - 1) / multiple | 0) * multiple;
 function keysOf(obj) {
@@ -16941,7 +17031,7 @@ function convertBlendMode(mode) {
 }
 
 // src/backends/webgpu/WebGPUBackend.ts
-class WebGPUBackend2 {
+class WebGPUBackend {
   type = "webgpu";
   limits;
   atlasSize;
@@ -16986,7 +17076,7 @@ class WebGPUBackend2 {
       ...DEFAULT_LIMITS,
       ...options.limits
     };
-    const backend = new WebGPUBackend2(device, context, presentationFormat, limits, canvas);
+    const backend = new WebGPUBackend(device, context, presentationFormat, limits, canvas);
     backend.createTextureAtlas("default", {
       format: options.format ?? "rgba8unorm",
       layers: limits.textureArrayLayers,
@@ -17131,1037 +17221,755 @@ class WebGPUBackend2 {
     return this.#renderPass;
   }
 }
-// src/math/matrix.ts
-function createProjectionMatrix(resolution, dst) {
-  const { width, height } = resolution;
-  return mat3.scaling([2 / width, 2 / height], dst);
-}
-function createViewMatrix(camera, target) {
-  const matrix = mat3.identity(target);
-  mat3.scale(matrix, [camera.zoom, camera.zoom], matrix);
-  mat3.rotate(matrix, camera.rotationRadians, matrix);
-  mat3.translate(matrix, [-camera.x, -camera.y], matrix);
-  return matrix;
-}
-function createModelMatrix(transform, base) {
-  mat3.translate(base, [transform.position.x, transform.position.y], base);
-  mat3.rotate(base, transform.rotation, base);
-  mat3.scale(base, [transform.scale.x, transform.scale.y], base);
-  return base;
-}
-function convertScreenToWorld(screenCoordinates, camera, projectionMatrix, resolution) {
-  const inverseViewProjectionMatrix = mat3.mul(mat3.inverse(camera.matrix), mat3.inverse(projectionMatrix));
-  const normalizedDeviceCoordinates = {
-    x: 2 * screenCoordinates.x / resolution.width - 1,
-    y: 1 - 2 * screenCoordinates.y / resolution.height
-  };
-  return transformPoint(normalizedDeviceCoordinates, inverseViewProjectionMatrix);
-}
-function convertWorldToScreen(worldCoordinates, camera, projectionMatrix, resolution) {
-  const viewProjectionMatrix = mat3.mul(projectionMatrix, camera.matrix);
-  const ndcPoint = transformPoint(worldCoordinates, viewProjectionMatrix);
-  return {
-    x: (ndcPoint.x + 1) * resolution.width / 2,
-    y: (1 - ndcPoint.y) * resolution.height / 2
-  };
-}
-function transformPoint(point, matrix) {
-  const result = vec2.transformMat3([point.x, point.y], matrix);
-  return {
-    x: result[0],
-    y: result[1]
-  };
-}
-
-// src/scene/Batcher.ts
-class Batcher {
-  nodes = [];
-  layers = [];
-  pipelines = [];
-  enqueue(node) {
-    if (node.renderComponent && node.isActive) {
-      this.nodes.push(node);
-      const z3 = node.layer;
-      const layer = this.#findOrCreateLayer(z3);
-      const pipeline = this.#findOrCreatePipeline(layer, node.renderComponent.shader);
-      pipeline.nodes.push(node);
-    }
-    for (const kid of node.kids) {
-      this.enqueue(kid);
-    }
-  }
-  flush() {
-    this.nodes = [];
-    this.layers = [];
-    this.pipelines = [];
+// src/backends/webgl2/WebGLFontPipeline.ts
+class WebGLFontPipeline {
+  font;
+  fontTexture;
+  charDataTexture;
+  textBufferTexture;
+  maxCharCount;
+  lineHeight;
+  #gl;
+  constructor(gl, font, fontTexture, charDataTexture, textBufferTexture, maxCharCount) {
+    this.#gl = gl;
+    this.font = font;
+    this.fontTexture = fontTexture;
+    this.charDataTexture = charDataTexture;
+    this.textBufferTexture = textBufferTexture;
+    this.maxCharCount = maxCharCount;
+    this.lineHeight = font.lineHeight;
   }
-  #findOrCreateLayer(z3) {
-    let layer = this.layers.find((l3) => l3.z === z3);
-    if (!layer) {
-      layer = { z: z3, pipelines: [] };
-      this.layers.push(layer);
-      this.layers.sort((a3, b3) => a3.z - b3.z);
+  static create(gl, font, maxCharCount) {
+    const fontTexture = gl.createTexture();
+    assert(fontTexture, "Failed to create font texture");
+    gl.bindTexture(gl.TEXTURE_2D, fontTexture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, font.imageBitmap);
+    const charDataTexture = gl.createTexture();
+    assert(charDataTexture, "Failed to create char data texture");
+    gl.bindTexture(gl.TEXTURE_2D, charDataTexture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    const charCount = font.charCount;
+    const charTextureWidth = charCount * 2;
+    const charTextureData = new Float32Array(charTextureWidth * 4);
+    for (let i3 = 0;i3 < charCount; i3++) {
+      const srcOffset = i3 * 8;
+      const dstOffset0 = i3 * 2 * 4;
+      const dstOffset1 = (i3 * 2 + 1) * 4;
+      charTextureData[dstOffset0] = font.charBuffer[srcOffset];
+      charTextureData[dstOffset0 + 1] = font.charBuffer[srcOffset + 1];
+      charTextureData[dstOffset0 + 2] = font.charBuffer[srcOffset + 2];
+      charTextureData[dstOffset0 + 3] = font.charBuffer[srcOffset + 3];
+      charTextureData[dstOffset1] = font.charBuffer[srcOffset + 4];
+      charTextureData[dstOffset1 + 1] = font.charBuffer[srcOffset + 5];
+      charTextureData[dstOffset1 + 2] = font.charBuffer[srcOffset + 6];
+      charTextureData[dstOffset1 + 3] = font.charBuffer[srcOffset + 7];
     }
-    return layer;
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, charTextureWidth, 1, 0, gl.RGBA, gl.FLOAT, charTextureData);
+    const textBufferTexture = gl.createTexture();
+    assert(textBufferTexture, "Failed to create text buffer texture");
+    gl.bindTexture(gl.TEXTURE_2D, textBufferTexture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, maxCharCount, 1, 0, gl.RGBA, gl.FLOAT, null);
+    gl.bindTexture(gl.TEXTURE_2D, null);
+    return new WebGLFontPipeline(gl, font, fontTexture, charDataTexture, textBufferTexture, maxCharCount);
   }
-  #findOrCreatePipeline(layer, shader) {
-    let pipeline = layer.pipelines.find((p3) => p3.shader === shader);
-    if (!pipeline) {
-      pipeline = { shader, nodes: [] };
-      layer.pipelines.push(pipeline);
-      this.pipelines.push(pipeline);
-    }
-    return pipeline;
+  updateTextBuffer(data, glyphCount) {
+    const gl = this.#gl;
+    gl.bindTexture(gl.TEXTURE_2D, this.textBufferTexture);
+    gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, glyphCount, 1, gl.RGBA, gl.FLOAT, data);
+  }
+  destroy() {
+    const gl = this.#gl;
+    gl.deleteTexture(this.fontTexture);
+    gl.deleteTexture(this.charDataTexture);
+    gl.deleteTexture(this.textBufferTexture);
   }
 }
 
-// src/math/angle.ts
-function deg2rad(degrees) {
-  return degrees * (Math.PI / 180);
-}
-function rad2deg(radians) {
-  return radians * (180 / Math.PI);
-}
-
-// src/scene/Camera.ts
-class Camera {
-  #position = { x: 0, y: 0 };
-  #zoom = 1;
-  #rotation = 0;
-  #isDirty = true;
-  #matrix = mat3.create();
-  get zoom() {
-    return this.#zoom;
-  }
-  set zoom(value) {
-    this.#zoom = value;
-    this.setDirty();
-  }
-  get rotation() {
-    return rad2deg(this.#rotation);
-  }
-  set rotation(value) {
-    this.#rotation = deg2rad(value);
-    this.setDirty();
-  }
-  get rotationRadians() {
-    return this.#rotation;
-  }
-  set rotationRadians(value) {
-    this.#rotation = value;
-    this.setDirty();
-  }
-  get x() {
-    return this.#position.x;
-  }
-  get y() {
-    return this.#position.y;
-  }
-  set x(value) {
-    this.#position.x = value;
-    this.setDirty();
-  }
-  set y(value) {
-    this.#position.y = value;
-    this.setDirty();
-  }
-  get matrix() {
-    if (this.#isDirty) {
-      this.#isDirty = false;
-      this.#matrix = createViewMatrix(this, this.#matrix);
-    }
-    return this.#matrix;
-  }
-  setDirty() {
-    this.#isDirty = true;
+// src/utils/error.ts
+var warnings = new Map;
+function warnOnce(key, msg) {
+  if (warnings.has(key)) {
+    return;
   }
+  warnings.set(key, true);
+  console.warn(msg ?? key);
 }
 
-// src/scene/SceneNode.ts
-class SceneNode {
-  static nextId = 1;
+// src/text/MsdfFont.ts
+class MsdfFont {
   id;
-  label;
-  #isActive = true;
-  #layer = null;
-  #parent = null;
-  #key = null;
-  #kids = [];
-  #transform;
-  #matrix = mat3.identity();
-  #renderComponent = null;
-  #size = null;
-  #positionProxy;
-  #scaleProxy;
-  #cache = null;
-  constructor(opts) {
-    this.id = opts?.id ?? SceneNode.nextId++;
-    if (opts?.rotation && opts?.rotationRadians) {
-      throw new Error(`Cannot set both rotation and rotationRadians for node ${opts?.label ?? this.id}`);
-    }
-    this.#transform = {
-      position: opts?.position ?? { x: 0, y: 0 },
-      scale: { x: 1, y: 1 },
-      size: opts?.size ?? { width: 1, height: 1 },
-      rotation: opts?.rotationRadians ?? 0
-    };
-    if (opts?.scale)
-      this.scale = opts.scale;
-    if (opts?.rotation)
-      this.rotation = opts.rotation;
-    this.#matrix = mat3.identity();
-    this.#renderComponent = opts?.render ?? null;
-    this.#layer = opts?.layer ?? null;
-    this.#isActive = opts?.isActive ?? true;
-    this.label = opts?.label ?? undefined;
-    this.#size = opts?.size ?? null;
-    this.#key = opts?.key ?? null;
-    for (const kid of opts?.kids ?? []) {
-      this.add(kid);
-    }
-    const self = this;
-    this.#positionProxy = {
-      get x() {
-        return self.#transform.position.x;
-      },
-      set x(value) {
-        self.#transform.position.x = value;
-        self.setDirty();
-      },
-      get y() {
-        return self.#transform.position.y;
-      },
-      set y(value) {
-        self.#transform.position.y = value;
-        self.setDirty();
-      }
-    };
-    this.#scaleProxy = {
-      get x() {
-        return self.#transform.scale.x;
-      },
-      set x(value) {
-        self.#transform.scale.x = value;
-        self.setDirty();
-      },
-      get y() {
-        return self.#transform.scale.y;
-      },
-      set y(value) {
-        self.#transform.scale.y = value;
-        self.setDirty();
+  json;
+  imageBitmap;
+  name;
+  charset;
+  charCount;
+  lineHeight;
+  charBuffer;
+  #kernings;
+  #chars;
+  #fallbackCharCode;
+  constructor(id, json, imageBitmap) {
+    this.id = id;
+    this.json = json;
+    this.imageBitmap = imageBitmap;
+    const charArray = Object.values(json.chars);
+    this.charCount = charArray.length;
+    this.lineHeight = json.common.lineHeight;
+    this.charset = json.info.charset;
+    this.name = json.info.face;
+    this.#kernings = new Map;
+    if (json.kernings) {
+      for (const kearning of json.kernings) {
+        let charKerning = this.#kernings.get(kearning.first);
+        if (!charKerning) {
+          charKerning = new Map;
+          this.#kernings.set(kearning.first, charKerning);
+        }
+        charKerning.set(kearning.second, kearning.amount);
       }
-    };
-  }
-  add(kid, index) {
-    kid.#parent = this;
-    if (index === undefined) {
-      this.#kids.push(kid);
-    } else {
-      this.#kids.splice(index, 0, kid);
     }
-    kid.setDirty();
-    return kid;
-  }
-  get kids() {
-    return this.#kids;
-  }
-  get children() {
-    return this.#kids;
-  }
-  get transform() {
-    return this.#transform;
-  }
-  get key() {
-    return this.#key ?? "";
-  }
-  get parent() {
-    return this.#parent;
-  }
-  set position(value) {
-    this.#transform.position = value;
-    this.setDirty();
-  }
-  get position() {
-    return this.#positionProxy;
-  }
-  set x(value) {
-    this.#transform.position.x = value;
-    this.setDirty();
-  }
-  get x() {
-    return this.#transform.position.x;
-  }
-  set y(value) {
-    this.#transform.position.y = value;
-    this.setDirty();
-  }
-  get y() {
-    return this.#transform.position.y;
-  }
-  set rotation(value) {
-    this.#transform.rotation = deg2rad(value);
-    this.setDirty();
-  }
-  get rotation() {
-    return rad2deg(this.#transform.rotation);
-  }
-  get rotationRadians() {
-    return this.#transform.rotation;
-  }
-  set rotationRadians(value) {
-    this.#transform.rotation = value;
-    this.setDirty();
-  }
-  get scale() {
-    return this.#scaleProxy;
-  }
-  set scale(value) {
-    if (typeof value === "number") {
-      this.#transform.scale = { x: value, y: value };
-    } else {
-      this.#transform.scale = value;
+    this.#chars = new Map;
+    const charCount = Object.values(json.chars).length;
+    this.charBuffer = new Float32Array(charCount * 8);
+    let offset = 0;
+    const u3 = 1 / json.common.scaleW;
+    const v3 = 1 / json.common.scaleH;
+    for (const [i3, char] of json.chars.entries()) {
+      this.#chars.set(char.id, char);
+      this.#chars.get(char.id).charIndex = i3;
+      this.charBuffer[offset] = char.x * u3;
+      this.charBuffer[offset + 1] = char.y * v3;
+      this.charBuffer[offset + 2] = char.width * u3;
+      this.charBuffer[offset + 3] = char.height * v3;
+      this.charBuffer[offset + 4] = char.width;
+      this.charBuffer[offset + 5] = char.height;
+      this.charBuffer[offset + 6] = char.xoffset;
+      this.charBuffer[offset + 7] = -char.yoffset;
+      offset += 8;
     }
-    this.setDirty();
-  }
-  set size(value) {
-    this.#size = value;
-    this.setDirty();
   }
-  get size() {
-    return this.#size;
-  }
-  get aspectRatio() {
-    if (!this.#size) {
-      console.warn("Attempted to get aspect ratio of a node with no ideal size");
-      return 1;
+  getChar(charCode) {
+    const char = this.#chars.get(charCode);
+    if (!char) {
+      const fallbackCharacter = this.#chars.get(this.#fallbackCharCode ?? this.#chars.keys().toArray()[0]);
+      warnOnce(`unknown_char_${this.name}`, `Couldn't find character ${charCode} in characters for font ${this.name} -- defaulting to first available character "${fallbackCharacter.char}"`);
+      return fallbackCharacter;
     }
-    return this.#size.width / this.#size.height;
+    return char;
   }
-  get isActive() {
-    if (!this.#cache?.isActive) {
-      this.#cache ??= {};
-      let parent = this;
-      let isActive = this.#isActive;
-      while (isActive && parent.#parent) {
-        parent = parent.#parent;
-        isActive = isActive && parent.#isActive;
+  getXAdvance(charCode, nextCharCode = -1) {
+    const char = this.getChar(charCode);
+    if (nextCharCode >= 0) {
+      const kerning = this.#kernings.get(charCode);
+      if (kerning) {
+        return char.xadvance + (kerning.get(nextCharCode) ?? 0);
       }
-      this.#cache.isActive = isActive;
     }
-    return this.#cache.isActive;
-  }
-  set isActive(value) {
-    this.#isActive = value;
-    this.setDirty();
+    return char.xadvance;
   }
-  get layer() {
-    if (this.#layer != null) {
-      return this.#layer;
+  static async create(id, fontJsonUrl) {
+    const response = await fetch(fontJsonUrl);
+    const json = await response.json();
+    const i3 = fontJsonUrl.href.lastIndexOf("/");
+    const baseUrl = i3 !== -1 ? fontJsonUrl.href.substring(0, i3 + 1) : undefined;
+    if (json.pages.length < 1) {
+      throw new Error(`Can't create an msdf font without a reference to the page url in the json`);
     }
-    if (!this.#cache?.layer) {
-      this.#cache ??= {};
-      let parent = this;
-      while (parent.#parent) {
-        parent = parent.#parent;
-        if (parent.hasExplicitLayer) {
-          this.#cache.layer = parent.#layer;
-          return this.#cache.layer;
-        }
-      }
-      this.#cache.layer = 0;
+    if (json.pages.length > 1) {
+      throw new Error(`Can't create an msdf font with more than one page`);
     }
-    return this.#cache.layer;
-  }
-  get hasExplicitLayer() {
-    return this.#layer != null;
-  }
-  set layer(value) {
-    this.#layer = value;
-    this.setDirty();
+    const textureUrl = baseUrl + json.pages[0];
+    const textureResponse = await fetch(textureUrl);
+    const bitmap = await createImageBitmap(await textureResponse.blob());
+    return new MsdfFont(id, json, bitmap);
   }
-  get renderComponent() {
-    return this.#renderComponent;
-  }
-  get matrix() {
-    if (!this.#cache?.matrix) {
-      this.#cache ??= {};
-      if (this.#parent) {
-        mat3.clone(this.#parent.matrix, this.#matrix);
-      } else {
-        mat3.identity(this.#matrix);
-      }
-      this.#cache.matrix = createModelMatrix(this.transform, this.#matrix);
+  set fallbackCharacter(character) {
+    const charCode = character.charCodeAt(0);
+    if (this.#chars.has(charCode)) {
+      this.#fallbackCharCode = charCode;
+    } else {
+      const fallbackCode = this.#chars.keys().toArray()[0];
+      console.warn(`${character} character does not exist in font ${this.name} defaulting to "${this.#chars.get(fallbackCode)?.char}".`);
+      this.#fallbackCharCode = fallbackCode;
     }
-    return this.#cache.matrix;
   }
-  get bounds() {
-    if (!this.#cache?.bounds) {
-      this.#cache ??= {};
-      const height = this.size?.height ?? 0;
-      const width = this.size?.width ?? 0;
-      const corners = [
-        vec2.transformMat3([-width / 2, height / 2], this.matrix),
-        vec2.transformMat3([width / 2, height / 2], this.matrix),
-        vec2.transformMat3([-width / 2, -height / 2], this.matrix),
-        vec2.transformMat3([width / 2, -height / 2], this.matrix)
-      ];
-      const center = vec2.transformMat3([0, 0], this.matrix);
-      const xValues = corners.map((c3) => c3[0]);
-      const yValues = corners.map((c3) => c3[1]);
-      this.#cache.bounds = {
-        x: center[0],
-        y: center[1],
-        left: Math.min(xValues[0], xValues[1], xValues[2], xValues[3]),
-        right: Math.max(xValues[0], xValues[1], xValues[2], xValues[3]),
-        top: Math.max(yValues[0], yValues[1], yValues[2], yValues[3]),
-        bottom: Math.min(yValues[0], yValues[1], yValues[2], yValues[3])
-      };
-    }
-    return this.#cache.bounds;
+}
+
+// src/text/shaping.ts
+var TAB_SPACES = 4;
+function shapeText(font, text, blockSize, fontSize, formatting, textArray, initialFloatOffset = 0, debug = false) {
+  let offset = initialFloatOffset;
+  const measurements = measureText(font, text, formatting.wordWrap);
+  const alignment = formatting.align || "left";
+  const em2px = fontSize / font.lineHeight;
+  const hackHasExplicitBlock = blockSize.width !== measurements.width;
+  let debugData = null;
+  if (debug) {
+    debugData = [];
   }
-  setBounds(bounds) {
-    if (bounds.left !== undefined)
-      this.left = bounds.left;
-    if (bounds.right !== undefined)
-      this.right = bounds.right;
-    if (bounds.top !== undefined)
-      this.top = bounds.top;
-    if (bounds.bottom !== undefined)
-      this.bottom = bounds.bottom;
-    if (bounds.x !== undefined)
-      this.centerX = bounds.x;
-    if (bounds.y !== undefined)
-      this.centerY = bounds.y;
-    return this;
+  for (const word of measurements.words) {
+    for (const glyph of word.glyphs) {
+      let lineOffset = 0;
+      if (alignment === "center") {
+        lineOffset = measurements.width * -0.5 - (measurements.width - measurements.lineWidths[glyph.line]) * -0.5;
+      } else if (alignment === "right") {
+        const blockSizeEm = blockSize.width / em2px;
+        const delta = measurements.width - measurements.lineWidths[glyph.line];
+        lineOffset = (hackHasExplicitBlock ? blockSizeEm / 2 : measurements.width / 2) - measurements.width + delta;
+      } else if (alignment === "left") {
+        const blockSizeEm = blockSize.width / em2px;
+        lineOffset = hackHasExplicitBlock ? -blockSizeEm / 2 : -measurements.width / 2;
+      }
+      if (debug && debugData) {
+        debugData.push({
+          line: glyph.line,
+          word: word.glyphs.map((g3) => g3.char.char).join(""),
+          glyph: glyph.char.char,
+          startX: word.startX,
+          glyphX: glyph.offset[0],
+          advance: glyph.char.xadvance,
+          lineOffset,
+          startY: word.startY,
+          glyphY: glyph.offset[1]
+        });
+      }
+      textArray[offset] = word.startX + glyph.offset[0] + lineOffset;
+      textArray[offset + 1] = word.startY + glyph.offset[1];
+      textArray[offset + 2] = glyph.char.charIndex;
+      offset += 4;
+    }
   }
-  set left(value) {
-    this.#adjustWorldPosition([value - this.bounds.left, 0]);
+  if (debug && debugData) {
+    console.table(debugData);
   }
-  set bottom(value) {
-    this.#adjustWorldPosition([0, value - this.bounds.bottom]);
+}
+function measureText(font, text, wordWrap) {
+  let maxWidth = 0;
+  const lineWidths = [];
+  let textOffsetX = 0;
+  let textOffsetY = 0;
+  let line = 0;
+  let printedCharCount = 0;
+  let nextCharCode = text.charCodeAt(0);
+  let word = { glyphs: [], width: 0, startX: 0, startY: 0 };
+  const words = [];
+  for (let i3 = 0;i3 < text.length; i3++) {
+    const isLastLetter = i3 === text.length - 1;
+    const charCode = nextCharCode;
+    nextCharCode = i3 < text.length - 1 ? text.charCodeAt(i3 + 1) : -1;
+    switch (charCode) {
+      case 9 /* HorizontalTab */:
+        insertSpaces(TAB_SPACES);
+        break;
+      case 10 /* Newline */:
+        flushLine();
+        flushWord();
+        break;
+      case 13 /* CarriageReturn */:
+        break;
+      case 32 /* Space */:
+        insertSpaces(1);
+        break;
+      default: {
+        const advance = font.getXAdvance(charCode, nextCharCode);
+        if (wordWrap && wordWrap.breakOn === "character" && textOffsetX + advance > wordWrap.emWidth) {
+          if (word.startX === 0) {
+            flushWord();
+          } else {
+            lineWidths.push(textOffsetX - word.width);
+            line++;
+            maxWidth = Math.max(maxWidth, textOffsetX);
+            textOffsetX = word.width;
+            textOffsetY -= font.lineHeight;
+            word.startX = 0;
+            word.startY = textOffsetY;
+            word.glyphs.forEach((g3) => {
+              g3.line = line;
+            });
+          }
+        }
+        word.glyphs.push({
+          char: font.getChar(charCode),
+          offset: [word.width, 0],
+          line
+        });
+        if (isLastLetter) {
+          flushWord();
+        }
+        word.width += advance;
+        textOffsetX += advance;
+      }
+    }
   }
-  set top(value) {
-    this.#adjustWorldPosition([0, value - this.bounds.top]);
+  lineWidths.push(textOffsetX);
+  maxWidth = Math.max(maxWidth, textOffsetX);
+  const lineCount = lineWidths.length;
+  return {
+    width: maxWidth,
+    height: lineCount * font.lineHeight,
+    lineWidths,
+    lineCount,
+    printedCharCount,
+    words
+  };
+  function flushWord() {
+    printedCharCount += word.glyphs.length;
+    words.push(word);
+    word = {
+      glyphs: [],
+      width: 0,
+      startX: textOffsetX,
+      startY: textOffsetY
+    };
   }
-  set right(value) {
-    this.#adjustWorldPosition([value - this.bounds.right, 0]);
+  function flushLine() {
+    lineWidths.push(textOffsetX);
+    line++;
+    maxWidth = Math.max(maxWidth, textOffsetX);
+    textOffsetX = 0;
+    textOffsetY -= font.lineHeight;
   }
-  set centerX(value) {
-    this.#adjustWorldPosition([value - this.bounds.x, 0]);
+  function insertSpaces(spaces) {
+    if (spaces < 1)
+      spaces = 1;
+    textOffsetX += font.getXAdvance(32 /* Space */) * spaces;
+    if (wordWrap?.breakOn === "word" && textOffsetX >= wordWrap.emWidth) {
+      flushLine();
+    }
+    flushWord();
   }
-  set centerY(value) {
-    this.#adjustWorldPosition([0, value - this.bounds.y]);
+}
+function findLargestFontSize(font, text, size, formatting) {
+  if (!formatting.fontSize) {
+    throw new Error("fontSize is required for shrinkToFit");
   }
-  delete() {
-    this.#parent?.remove(this);
-    for (const child of this.#kids) {
-      child.delete();
-    }
-    this.#kids = [];
-    this.#isActive = false;
-    this.#layer = null;
-    this.#renderComponent = null;
+  if (!formatting.shrinkToFit) {
+    throw new Error("shrinkToFit is required for findLargestFontSize");
   }
-  remove(kid) {
-    const childIndex = this.#kids.findIndex((child) => child.id === kid.id);
-    if (childIndex <= -1) {
-      throw new Error(`${kid.label ?? kid.id} is not a child of ${this.label ?? this.id}`);
+  const minSize = formatting.shrinkToFit.minFontSize;
+  const maxSize = formatting.shrinkToFit.maxFontSize ?? formatting.fontSize;
+  const maxLines = formatting.shrinkToFit.maxLines ?? Number.POSITIVE_INFINITY;
+  const threshold = 0.5;
+  let low = minSize;
+  let high = maxSize;
+  while (high - low > threshold) {
+    const testSize = (low + high) / 2;
+    const testMeasure = measureText(font, text, formatting.wordWrap);
+    const padding = formatting.shrinkToFit.padding ?? 0;
+    const scaledWidth = testMeasure.width * (testSize / font.lineHeight);
+    const scaledHeight = testMeasure.height * (testSize / font.lineHeight);
+    const fitsWidth = scaledWidth <= size.width - size.width * padding;
+    const fitsHeight = scaledHeight <= size.height - size.height * padding;
+    const fitsLines = testMeasure.lineCount <= maxLines;
+    if (fitsWidth && fitsHeight && fitsLines) {
+      low = testSize;
+    } else {
+      high = testSize;
     }
-    this.#kids.splice(childIndex, 1);
-    kid.#parent = null;
-    kid.setDirty();
-  }
-  #adjustWorldPosition(delta) {
-    const inverseMatrix = mat3.inverse(this.#parent?.matrix ?? mat3.identity());
-    inverseMatrix[8] = inverseMatrix[9] = 0;
-    const localDelta = vec2.transformMat3(delta, inverseMatrix);
-    this.#transform.position.x += localDelta[0];
-    this.#transform.position.y += localDelta[1];
-    this.setDirty();
-  }
-  setDirty() {
-    this.#cache = null;
-    this.#kids.forEach((kid) => kid.setDirty());
-  }
-  static parse(json) {
-    const obj = JSON.parse(json, reviver);
-    return new SceneNode(obj);
-  }
-  toJSON() {
-    return {
-      id: this.id,
-      label: this.label,
-      transform: this.#transform,
-      layer: this.#layer,
-      isActive: this.#isActive,
-      kids: this.#kids,
-      render: this.#renderComponent
-    };
   }
+  return low;
 }
-function reviver(key, value) {
-  if (key === "kids") {
-    return value.map((kid) => new SceneNode(kid));
-  }
-  if (Array.isArray(value) && value.every((v3) => typeof v3 === "number")) {
-    if (value.length === 2) {
-      return value;
-    }
-    if (value.length === 3) {
-      return value;
-    }
-    if (value.length === 4) {
-      return value;
-    }
-  }
-  return value;
+
+// src/math/angle.ts
+function deg2rad(degrees) {
+  return degrees * (Math.PI / 180);
+}
+function rad2deg(radians) {
+  return radians * (180 / Math.PI);
 }
 
-// src/scene/QuadNode.ts
-var PRIMITIVE_TEXTURE = "__primitive__";
-var RESERVED_PRIMITIVE_INDEX_START = 1000;
-var CIRCLE_INDEX = 1001;
-var DEFAULT_REGION = {
-  x: 0,
-  y: 0,
-  width: 0,
-  height: 0
-};
+// src/math/matrix.ts
+function createProjectionMatrix(resolution, dst) {
+  const { width, height } = resolution;
+  return mat3.scaling([2 / width, 2 / height], dst);
+}
+function createViewMatrix(camera, target) {
+  const matrix = mat3.identity(target);
+  mat3.scale(matrix, [camera.zoom, camera.zoom], matrix);
+  mat3.rotate(matrix, camera.rotationRadians, matrix);
+  mat3.translate(matrix, [-camera.x, -camera.y], matrix);
+  return matrix;
+}
+function createModelMatrix(transform, base) {
+  mat3.translate(base, [transform.position.x, transform.position.y], base);
+  mat3.rotate(base, transform.rotation, base);
+  mat3.scale(base, [transform.scale.x, transform.scale.y], base);
+  return base;
+}
+function convertScreenToWorld(screenCoordinates, camera, projectionMatrix, resolution) {
+  const inverseViewProjectionMatrix = mat3.mul(mat3.inverse(camera.matrix), mat3.inverse(projectionMatrix));
+  const normalizedDeviceCoordinates = {
+    x: 2 * screenCoordinates.x / resolution.width - 1,
+    y: 1 - 2 * screenCoordinates.y / resolution.height
+  };
+  return transformPoint(normalizedDeviceCoordinates, inverseViewProjectionMatrix);
+}
+function convertWorldToScreen(worldCoordinates, camera, projectionMatrix, resolution) {
+  const viewProjectionMatrix = mat3.mul(projectionMatrix, camera.matrix);
+  const ndcPoint = transformPoint(worldCoordinates, viewProjectionMatrix);
+  return {
+    x: (ndcPoint.x + 1) * resolution.width / 2,
+    y: (1 - ndcPoint.y) * resolution.height / 2
+  };
+}
+function transformPoint(point, matrix) {
+  const result = vec2.transformMat3([point.x, point.y], matrix);
+  return {
+    x: result[0],
+    y: result[1]
+  };
+}
 
-class QuadNode extends SceneNode {
-  assetManager;
-  #color;
-  #atlasCoords;
-  #region;
-  #matrixPool;
-  #flip;
-  #cropOffset;
-  #cropRatio;
-  #atlasSize;
-  #textureId;
-  #writeInstance;
-  constructor(options, matrixPool) {
-    assert(options.shader, "QuadNode requires a shader to be explicitly provided");
-    assert(options.size, "QuadNode requires a size to be explicitly provided");
-    assert(options.atlasCoords, "QuadNode requires atlas coords to be explicitly provided");
-    options.render ??= {
-      shader: options.shader,
-      writeInstance: writeQuadInstance
+// src/scene/SceneNode.ts
+class SceneNode {
+  static nextId = 1;
+  id;
+  label;
+  #isActive = true;
+  #layer = null;
+  #parent = null;
+  #key = null;
+  #kids = [];
+  #transform;
+  #matrix = mat3.identity();
+  #renderComponent = null;
+  #size = null;
+  #positionProxy;
+  #scaleProxy;
+  #cache = null;
+  constructor(opts) {
+    this.id = opts?.id ?? SceneNode.nextId++;
+    if (opts?.rotation && opts?.rotationRadians) {
+      throw new Error(`Cannot set both rotation and rotationRadians for node ${opts?.label ?? this.id}`);
+    }
+    this.#transform = {
+      position: opts?.position ?? { x: 0, y: 0 },
+      scale: { x: 1, y: 1 },
+      size: opts?.size ?? { width: 1, height: 1 },
+      rotation: opts?.rotationRadians ?? 0
     };
-    super(options);
-    assert(options.assetManager, "QuadNode requires an asset manager");
-    this.assetManager = options.assetManager;
-    if (options.atlasCoords && options.atlasCoords.atlasIndex >= RESERVED_PRIMITIVE_INDEX_START) {
-      this.#textureId = PRIMITIVE_TEXTURE;
-      this.#region = DEFAULT_REGION;
-      this.#atlasSize = DEFAULT_REGION;
-    } else {
-      assert(options.textureId, "QuadNode requires texture id to be explicitly provided");
-      this.#textureId = options.textureId;
-      assert(options.region, "QuadNode requires a region to be explicitly provided");
-      this.#region = options.region;
-      assert(options.atlasSize, "QuadNode requires atlas size to be explicitly provided");
-      this.#atlasSize = options.atlasSize;
+    if (opts?.scale)
+      this.scale = opts.scale;
+    if (opts?.rotation)
+      this.rotation = opts.rotation;
+    this.#matrix = mat3.identity();
+    this.#renderComponent = opts?.render ?? null;
+    this.#layer = opts?.layer ?? null;
+    this.#isActive = opts?.isActive ?? true;
+    this.label = opts?.label ?? undefined;
+    this.#size = opts?.size ?? null;
+    this.#key = opts?.key ?? null;
+    for (const kid of opts?.kids ?? []) {
+      this.add(kid);
     }
-    this.#atlasCoords = options.atlasCoords;
-    this.#color = options.color ?? { r: 1, g: 1, b: 1, a: 1 };
-    this.#matrixPool = matrixPool;
-    this.#flip = { x: options.flipX ? -1 : 1, y: options.flipY ? -1 : 1 };
-    this.#cropOffset = options.cropOffset ?? { x: 0, y: 0 };
-    this.#cropRatio = !this.#atlasCoords.uvScaleCropped ? { width: 1, height: 1 } : {
-      width: this.#atlasCoords.uvScaleCropped.width / this.#atlasCoords.uvScale.width,
-      height: this.#atlasCoords.uvScaleCropped.height / this.#atlasCoords.uvScale.height
+    const self = this;
+    this.#positionProxy = {
+      get x() {
+        return self.#transform.position.x;
+      },
+      set x(value) {
+        self.#transform.position.x = value;
+        self.setDirty();
+      },
+      get y() {
+        return self.#transform.position.y;
+      },
+      set y(value) {
+        self.#transform.position.y = value;
+        self.setDirty();
+      }
+    };
+    this.#scaleProxy = {
+      get x() {
+        return self.#transform.scale.x;
+      },
+      set x(value) {
+        self.#transform.scale.x = value;
+        self.setDirty();
+      },
+      get y() {
+        return self.#transform.scale.y;
+      },
+      set y(value) {
+        self.#transform.scale.y = value;
+        self.setDirty();
+      }
     };
-    this.#writeInstance = options.writeInstance;
-  }
-  get color() {
-    return this.#color;
-  }
-  set color(value) {
-    this.#color = value;
   }
-  get size() {
-    const size = super.size;
-    if (!size) {
-      throw new Error("QuadNode requires a size");
+  add(kid, index) {
+    kid.#parent = this;
+    if (index === undefined) {
+      this.#kids.push(kid);
+    } else {
+      this.#kids.splice(index, 0, kid);
     }
-    return size;
+    kid.setDirty();
+    return kid;
   }
-  set size(val) {
-    super.size = val;
+  get kids() {
+    return this.#kids;
   }
-  get matrixWithSize() {
-    const matrix = mat3.clone(this.matrix, this.#matrixPool.get());
-    mat3.scale(matrix, [this.size.width * this.#flip.x, this.size.height * this.#flip.y], matrix);
-    return matrix;
+  get children() {
+    return this.#kids;
   }
-  get atlasCoords() {
-    return this.#atlasCoords;
+  get transform() {
+    return this.#transform;
   }
-  get region() {
-    return this.#region;
+  get key() {
+    return this.#key ?? "";
   }
-  get writeInstance() {
-    return this.#writeInstance;
+  get parent() {
+    return this.#parent;
   }
-  get flipX() {
-    return this.#flip.x === -1;
+  set position(value) {
+    this.#transform.position = value;
+    this.setDirty();
   }
-  set flipX(value) {
-    this.#flip.x = value ? -1 : 1;
+  get position() {
+    return this.#positionProxy;
+  }
+  set x(value) {
+    this.#transform.position.x = value;
     this.setDirty();
   }
-  get flipY() {
-    return this.#flip.y === -1;
+  get x() {
+    return this.#transform.position.x;
   }
-  set flipY(value) {
-    this.#flip.y = value ? -1 : 1;
+  set y(value) {
+    this.#transform.position.y = value;
     this.setDirty();
   }
-  get cropOffset() {
-    return this.#cropOffset;
+  get y() {
+    return this.#transform.position.y;
   }
-  set cropOffset(value) {
-    this.#cropOffset = value;
+  set rotation(value) {
+    this.#transform.rotation = deg2rad(value);
+    this.setDirty();
   }
-  get textureId() {
-    return this.#textureId;
+  get rotation() {
+    return rad2deg(this.#transform.rotation);
   }
-  get isPrimitive() {
-    return this.#textureId === PRIMITIVE_TEXTURE;
+  get rotationRadians() {
+    return this.#transform.rotation;
   }
-  get isCircle() {
-    return this.#atlasCoords.atlasIndex === CIRCLE_INDEX;
+  set rotationRadians(value) {
+    this.#transform.rotation = value;
+    this.setDirty();
   }
-  extra = {
-    setAtlasCoords: (value) => {
-      this.#atlasCoords = value;
-    },
-    cropRatio: () => {
-      return this.#cropRatio;
-    },
-    atlasSize: () => {
-      return this.#atlasSize;
+  get scale() {
+    return this.#scaleProxy;
+  }
+  set scale(value) {
+    if (typeof value === "number") {
+      this.#transform.scale = { x: value, y: value };
+    } else {
+      this.#transform.scale = value;
     }
-  };
-}
-function writeQuadInstance(node, array, offset) {
-  if (!(node instanceof QuadNode)) {
-    throw new Error("QuadNode.writeInstance can only be called on QuadNodes");
+    this.setDirty();
   }
-  array.set(node.matrixWithSize, offset);
-  array.set([node.color.r, node.color.g, node.color.b, node.color.a], offset + 12);
-  const region = node.region;
-  if (node.textureId === PRIMITIVE_TEXTURE) {
-    array.set([
-      node.atlasCoords.uvOffset.x,
-      node.atlasCoords.uvOffset.y,
-      node.atlasCoords.uvScale.width,
-      node.atlasCoords.uvScale.height
-    ], offset + 16);
-  } else {
-    const atlasSize = node.extra.atlasSize();
-    array.set([
-      node.atlasCoords.uvOffset.x + region.x / atlasSize.width,
-      node.atlasCoords.uvOffset.y + region.y / atlasSize.height,
-      region.width / atlasSize.width,
-      region.height / atlasSize.height
-    ], offset + 16);
+  set size(value) {
+    this.#size = value;
+    this.setDirty();
   }
-  array.set([
-    node.cropOffset.x / 2 / (node.atlasCoords.originalSize.width || 1),
-    node.cropOffset.y / 2 / (node.atlasCoords.originalSize.height || 1),
-    node.extra.cropRatio().width,
-    node.extra.cropRatio().height
-  ], offset + 20);
-  new DataView(array.buffer).setUint32(array.byteOffset + (offset + 24) * Float32Array.BYTES_PER_ELEMENT, node.atlasCoords.atlasIndex, true);
-  node.writeInstance?.(array, offset + 28);
-  return 1;
-}
-
-// src/scene/JumboQuadNode.ts
-var MAT3_SIZE = 12;
-var VEC4F_SIZE = 4;
-
-class JumboQuadNode extends QuadNode {
-  #tiles;
-  #matrixPool;
-  constructor(options, matrixPool) {
-    assert(options.shader, "JumboQuadNode requires a shader to be explicitly provided");
-    assert(options.tiles && options.tiles.length > 0, "JumboQuadNode requires at least one tile to be provided");
-    options.render ??= {
-      shader: options.shader,
-      writeInstance: writeJumboQuadInstance
-    };
-    super({
-      ...options,
-      atlasCoords: options.tiles[0].atlasCoords
-    }, matrixPool);
-    this.#matrixPool = matrixPool;
-    this.#tiles = [];
-    for (const tile of options.tiles) {
-      assert(tile.atlasCoords, "JumboQuadNode requires atlas coords to be provided");
-      assert(tile.size, "JumboQuadNode requires a size to be provided");
-      this.#tiles.push({
-        textureId: tile.textureId,
-        offset: tile.offset,
-        size: tile.size,
-        atlasCoords: tile.atlasCoords
-      });
+  get size() {
+    return this.#size;
+  }
+  get aspectRatio() {
+    if (!this.#size) {
+      console.warn("Attempted to get aspect ratio of a node with no ideal size");
+      return 1;
     }
+    return this.#size.width / this.#size.height;
   }
-  get atlasCoords() {
-    throw new Error("JumboQuadNode does not have a single atlas coords");
+  get isActive() {
+    if (!this.#cache?.isActive) {
+      this.#cache ??= {};
+      let parent = this;
+      let isActive = this.#isActive;
+      while (isActive && parent.#parent) {
+        parent = parent.#parent;
+        isActive = isActive && parent.#isActive;
+      }
+      this.#cache.isActive = isActive;
+    }
+    return this.#cache.isActive;
   }
-  get tiles() {
-    return this.#tiles;
+  set isActive(value) {
+    this.#isActive = value;
+    this.setDirty();
   }
-  getTileMatrix(tile) {
-    const matrix = mat3.clone(this.matrix, this.#matrixPool.get());
-    const originalSize = {
-      width: Math.max(...this.#tiles.map((t3) => t3.offset.x + t3.size.width)),
-      height: Math.max(...this.#tiles.map((t3) => t3.offset.y + t3.size.height))
-    };
-    const proportionalSize = {
-      width: this.size.width / originalSize.width,
-      height: this.size.height / originalSize.height
-    };
-    const centerOffset = {
-      x: tile.offset.x + tile.size.width / 2 - originalSize.width / 2,
-      y: -(tile.offset.y + tile.size.height / 2 - originalSize.height / 2)
-    };
-    mat3.translate(matrix, [
-      centerOffset.x * proportionalSize.width,
-      centerOffset.y * proportionalSize.height
-    ], matrix);
-    mat3.scale(matrix, [
-      tile.size.width * proportionalSize.width * (this.flipX ? -1 : 1),
-      tile.size.height * proportionalSize.height * (this.flipY ? -1 : 1)
-    ], matrix);
-    return matrix;
+  get layer() {
+    if (this.#layer != null) {
+      return this.#layer;
+    }
+    if (!this.#cache?.layer) {
+      this.#cache ??= {};
+      let parent = this;
+      while (parent.#parent) {
+        parent = parent.#parent;
+        if (parent.hasExplicitLayer) {
+          this.#cache.layer = parent.#layer;
+          return this.#cache.layer;
+        }
+      }
+      this.#cache.layer = 0;
+    }
+    return this.#cache.layer;
   }
-}
-function writeJumboQuadInstance(node, array, offset) {
-  if (!(node instanceof JumboQuadNode)) {
-    throw new Error("JumboQuadNode.writeJumboQuadInstance can only be called on JumboQuadNodes");
+  get hasExplicitLayer() {
+    return this.#layer != null;
   }
-  let tileOffset = 0;
-  for (const tile of node.tiles) {
-    const coord = tile.atlasCoords;
-    const matrix = node.getTileMatrix(tile);
-    array.set(matrix, offset + tileOffset);
-    tileOffset += MAT3_SIZE;
-    array.set([node.color.r, node.color.g, node.color.b, node.color.a], offset + tileOffset);
-    tileOffset += VEC4F_SIZE;
-    array.set([
-      coord.uvOffset.x,
-      coord.uvOffset.y,
-      coord.uvScale.width,
-      coord.uvScale.height
-    ], offset + tileOffset);
-    tileOffset += VEC4F_SIZE;
-    const cropRatio = !coord.uvScaleCropped ? { width: 1, height: 1 } : {
-      width: coord.uvScaleCropped.width / coord.uvScale.width,
-      height: coord.uvScaleCropped.height / coord.uvScale.height
-    };
-    array.set([
-      tile.atlasCoords.cropOffset.x / 2 / (tile.atlasCoords.originalSize.width || 1),
-      tile.atlasCoords.cropOffset.y / 2 / (tile.atlasCoords.originalSize.height || 1),
-      cropRatio.width,
-      cropRatio.height
-    ], offset + tileOffset);
-    tileOffset += VEC4F_SIZE;
-    new DataView(array.buffer).setUint32(array.byteOffset + (offset + tileOffset) * Float32Array.BYTES_PER_ELEMENT, coord.atlasIndex, true);
-    tileOffset += VEC4F_SIZE;
+  set layer(value) {
+    this.#layer = value;
+    this.setDirty();
   }
-  node.writeInstance?.(array, offset + tileOffset);
-  return node.tiles.length;
-}
-
-// src/utils/error.ts
-var warnings = new Map;
-function warnOnce(key, msg) {
-  if (warnings.has(key)) {
-    return;
+  get renderComponent() {
+    return this.#renderComponent;
   }
-  warnings.set(key, true);
-  console.warn(msg ?? key);
-}
-
-// src/text/MsdfFont.ts
-class MsdfFont {
-  id;
-  json;
-  imageBitmap;
-  name;
-  charset;
-  charCount;
-  lineHeight;
-  charBuffer;
-  #kernings;
-  #chars;
-  #fallbackCharCode;
-  constructor(id, json, imageBitmap) {
-    this.id = id;
-    this.json = json;
-    this.imageBitmap = imageBitmap;
-    const charArray = Object.values(json.chars);
-    this.charCount = charArray.length;
-    this.lineHeight = json.common.lineHeight;
-    this.charset = json.info.charset;
-    this.name = json.info.face;
-    this.#kernings = new Map;
-    if (json.kernings) {
-      for (const kearning of json.kernings) {
-        let charKerning = this.#kernings.get(kearning.first);
-        if (!charKerning) {
-          charKerning = new Map;
-          this.#kernings.set(kearning.first, charKerning);
-        }
-        charKerning.set(kearning.second, kearning.amount);
+  get matrix() {
+    if (!this.#cache?.matrix) {
+      this.#cache ??= {};
+      if (this.#parent) {
+        mat3.clone(this.#parent.matrix, this.#matrix);
+      } else {
+        mat3.identity(this.#matrix);
       }
+      this.#cache.matrix = createModelMatrix(this.transform, this.#matrix);
     }
-    this.#chars = new Map;
-    const charCount = Object.values(json.chars).length;
-    this.charBuffer = new Float32Array(charCount * 8);
-    let offset = 0;
-    const u3 = 1 / json.common.scaleW;
-    const v3 = 1 / json.common.scaleH;
-    for (const [i3, char] of json.chars.entries()) {
-      this.#chars.set(char.id, char);
-      this.#chars.get(char.id).charIndex = i3;
-      this.charBuffer[offset] = char.x * u3;
-      this.charBuffer[offset + 1] = char.y * v3;
-      this.charBuffer[offset + 2] = char.width * u3;
-      this.charBuffer[offset + 3] = char.height * v3;
-      this.charBuffer[offset + 4] = char.width;
-      this.charBuffer[offset + 5] = char.height;
-      this.charBuffer[offset + 6] = char.xoffset;
-      this.charBuffer[offset + 7] = -char.yoffset;
-      offset += 8;
-    }
+    return this.#cache.matrix;
   }
-  getChar(charCode) {
-    const char = this.#chars.get(charCode);
-    if (!char) {
-      const fallbackCharacter = this.#chars.get(this.#fallbackCharCode ?? this.#chars.keys().toArray()[0]);
-      warnOnce(`unknown_char_${this.name}`, `Couldn't find character ${charCode} in characters for font ${this.name} -- defaulting to first available character "${fallbackCharacter.char}"`);
-      return fallbackCharacter;
+  get bounds() {
+    if (!this.#cache?.bounds) {
+      this.#cache ??= {};
+      const height = this.size?.height ?? 0;
+      const width = this.size?.width ?? 0;
+      const corners = [
+        vec2.transformMat3([-width / 2, height / 2], this.matrix),
+        vec2.transformMat3([width / 2, height / 2], this.matrix),
+        vec2.transformMat3([-width / 2, -height / 2], this.matrix),
+        vec2.transformMat3([width / 2, -height / 2], this.matrix)
+      ];
+      const center = vec2.transformMat3([0, 0], this.matrix);
+      const xValues = corners.map((c3) => c3[0]);
+      const yValues = corners.map((c3) => c3[1]);
+      this.#cache.bounds = {
+        x: center[0],
+        y: center[1],
+        left: Math.min(xValues[0], xValues[1], xValues[2], xValues[3]),
+        right: Math.max(xValues[0], xValues[1], xValues[2], xValues[3]),
+        top: Math.max(yValues[0], yValues[1], yValues[2], yValues[3]),
+        bottom: Math.min(yValues[0], yValues[1], yValues[2], yValues[3])
+      };
     }
-    return char;
+    return this.#cache.bounds;
   }
-  getXAdvance(charCode, nextCharCode = -1) {
-    const char = this.getChar(charCode);
-    if (nextCharCode >= 0) {
-      const kerning = this.#kernings.get(charCode);
-      if (kerning) {
-        return char.xadvance + (kerning.get(nextCharCode) ?? 0);
-      }
-    }
-    return char.xadvance;
+  setBounds(bounds) {
+    if (bounds.left !== undefined)
+      this.left = bounds.left;
+    if (bounds.right !== undefined)
+      this.right = bounds.right;
+    if (bounds.top !== undefined)
+      this.top = bounds.top;
+    if (bounds.bottom !== undefined)
+      this.bottom = bounds.bottom;
+    if (bounds.x !== undefined)
+      this.centerX = bounds.x;
+    if (bounds.y !== undefined)
+      this.centerY = bounds.y;
+    return this;
   }
-  static async create(id, fontJsonUrl) {
-    const response = await fetch(fontJsonUrl);
-    const json = await response.json();
-    const i3 = fontJsonUrl.href.lastIndexOf("/");
-    const baseUrl = i3 !== -1 ? fontJsonUrl.href.substring(0, i3 + 1) : undefined;
-    if (json.pages.length < 1) {
-      throw new Error(`Can't create an msdf font without a reference to the page url in the json`);
-    }
-    if (json.pages.length > 1) {
-      throw new Error(`Can't create an msdf font with more than one page`);
+  set left(value) {
+    this.#adjustWorldPosition([value - this.bounds.left, 0]);
+  }
+  set bottom(value) {
+    this.#adjustWorldPosition([0, value - this.bounds.bottom]);
+  }
+  set top(value) {
+    this.#adjustWorldPosition([0, value - this.bounds.top]);
+  }
+  set right(value) {
+    this.#adjustWorldPosition([value - this.bounds.right, 0]);
+  }
+  set centerX(value) {
+    this.#adjustWorldPosition([value - this.bounds.x, 0]);
+  }
+  set centerY(value) {
+    this.#adjustWorldPosition([0, value - this.bounds.y]);
+  }
+  delete() {
+    this.#parent?.remove(this);
+    for (const child of this.#kids) {
+      child.delete();
     }
-    const textureUrl = baseUrl + json.pages[0];
-    const textureResponse = await fetch(textureUrl);
-    const bitmap = await createImageBitmap(await textureResponse.blob());
-    return new MsdfFont(id, json, bitmap);
+    this.#kids = [];
+    this.#isActive = false;
+    this.#layer = null;
+    this.#renderComponent = null;
   }
-  set fallbackCharacter(character) {
-    const charCode = character.charCodeAt(0);
-    if (this.#chars.has(charCode)) {
-      this.#fallbackCharCode = charCode;
-    } else {
-      const fallbackCode = this.#chars.keys().toArray()[0];
-      console.warn(`${character} character does not exist in font ${this.name} defaulting to "${this.#chars.get(fallbackCode)?.char}".`);
-      this.#fallbackCharCode = fallbackCode;
+  remove(kid) {
+    const childIndex = this.#kids.findIndex((child) => child.id === kid.id);
+    if (childIndex <= -1) {
+      throw new Error(`${kid.label ?? kid.id} is not a child of ${this.label ?? this.id}`);
     }
+    this.#kids.splice(childIndex, 1);
+    kid.#parent = null;
+    kid.setDirty();
+  }
+  #adjustWorldPosition(delta) {
+    const inverseMatrix = mat3.inverse(this.#parent?.matrix ?? mat3.identity());
+    inverseMatrix[8] = inverseMatrix[9] = 0;
+    const localDelta = vec2.transformMat3(delta, inverseMatrix);
+    this.#transform.position.x += localDelta[0];
+    this.#transform.position.y += localDelta[1];
+    this.setDirty();
+  }
+  setDirty() {
+    this.#cache = null;
+    this.#kids.forEach((kid) => kid.setDirty());
+  }
+  static parse(json) {
+    const obj = JSON.parse(json, reviver);
+    return new SceneNode(obj);
+  }
+  toJSON() {
+    return {
+      id: this.id,
+      label: this.label,
+      transform: this.#transform,
+      layer: this.#layer,
+      isActive: this.#isActive,
+      kids: this.#kids,
+      render: this.#renderComponent
+    };
   }
 }
-
-// src/text/shaping.ts
-var TAB_SPACES = 4;
-function shapeText(font, text, blockSize, fontSize, formatting, textArray, initialFloatOffset = 0, debug = false) {
-  let offset = initialFloatOffset;
-  const measurements = measureText(font, text, formatting.wordWrap);
-  const alignment = formatting.align || "left";
-  const em2px = fontSize / font.lineHeight;
-  const hackHasExplicitBlock = blockSize.width !== measurements.width;
-  let debugData = null;
-  if (debug) {
-    debugData = [];
+function reviver(key, value) {
+  if (key === "kids") {
+    return value.map((kid) => new SceneNode(kid));
   }
-  for (const word of measurements.words) {
-    for (const glyph of word.glyphs) {
-      let lineOffset = 0;
-      if (alignment === "center") {
-        lineOffset = measurements.width * -0.5 - (measurements.width - measurements.lineWidths[glyph.line]) * -0.5;
-      } else if (alignment === "right") {
-        const blockSizeEm = blockSize.width / em2px;
-        const delta = measurements.width - measurements.lineWidths[glyph.line];
-        lineOffset = (hackHasExplicitBlock ? blockSizeEm / 2 : measurements.width / 2) - measurements.width + delta;
-      } else if (alignment === "left") {
-        const blockSizeEm = blockSize.width / em2px;
-        lineOffset = hackHasExplicitBlock ? -blockSizeEm / 2 : -measurements.width / 2;
-      }
-      if (debug && debugData) {
-        debugData.push({
-          line: glyph.line,
-          word: word.glyphs.map((g3) => g3.char.char).join(""),
-          glyph: glyph.char.char,
-          startX: word.startX,
-          glyphX: glyph.offset[0],
-          advance: glyph.char.xadvance,
-          lineOffset,
-          startY: word.startY,
-          glyphY: glyph.offset[1]
-        });
-      }
-      textArray[offset] = word.startX + glyph.offset[0] + lineOffset;
-      textArray[offset + 1] = word.startY + glyph.offset[1];
-      textArray[offset + 2] = glyph.char.charIndex;
-      offset += 4;
+  if (Array.isArray(value) && value.every((v3) => typeof v3 === "number")) {
+    if (value.length === 2) {
+      return value;
+    }
+    if (value.length === 3) {
+      return value;
+    }
+    if (value.length === 4) {
+      return value;
     }
   }
-  if (debug && debugData) {
-    console.table(debugData);
-  }
-}
-function measureText(font, text, wordWrap) {
-  let maxWidth = 0;
-  const lineWidths = [];
-  let textOffsetX = 0;
-  let textOffsetY = 0;
-  let line = 0;
-  let printedCharCount = 0;
-  let nextCharCode = text.charCodeAt(0);
-  let word = { glyphs: [], width: 0, startX: 0, startY: 0 };
-  const words = [];
-  for (let i3 = 0;i3 < text.length; i3++) {
-    const isLastLetter = i3 === text.length - 1;
-    const charCode = nextCharCode;
-    nextCharCode = i3 < text.length - 1 ? text.charCodeAt(i3 + 1) : -1;
-    switch (charCode) {
-      case 9 /* HorizontalTab */:
-        insertSpaces(TAB_SPACES);
-        break;
-      case 10 /* Newline */:
-        flushLine();
-        flushWord();
-        break;
-      case 13 /* CarriageReturn */:
-        break;
-      case 32 /* Space */:
-        insertSpaces(1);
-        break;
-      default: {
-        const advance = font.getXAdvance(charCode, nextCharCode);
-        if (wordWrap && wordWrap.breakOn === "character" && textOffsetX + advance > wordWrap.emWidth) {
-          if (word.startX === 0) {
-            flushWord();
-          } else {
-            lineWidths.push(textOffsetX - word.width);
-            line++;
-            maxWidth = Math.max(maxWidth, textOffsetX);
-            textOffsetX = word.width;
-            textOffsetY -= font.lineHeight;
-            word.startX = 0;
-            word.startY = textOffsetY;
-            word.glyphs.forEach((g3) => {
-              g3.line = line;
-            });
-          }
-        }
-        word.glyphs.push({
-          char: font.getChar(charCode),
-          offset: [word.width, 0],
-          line
-        });
-        if (isLastLetter) {
-          flushWord();
-        }
-        word.width += advance;
-        textOffsetX += advance;
-      }
-    }
-  }
-  lineWidths.push(textOffsetX);
-  maxWidth = Math.max(maxWidth, textOffsetX);
-  const lineCount = lineWidths.length;
-  return {
-    width: maxWidth,
-    height: lineCount * font.lineHeight,
-    lineWidths,
-    lineCount,
-    printedCharCount,
-    words
-  };
-  function flushWord() {
-    printedCharCount += word.glyphs.length;
-    words.push(word);
-    word = {
-      glyphs: [],
-      width: 0,
-      startX: textOffsetX,
-      startY: textOffsetY
-    };
-  }
-  function flushLine() {
-    lineWidths.push(textOffsetX);
-    line++;
-    maxWidth = Math.max(maxWidth, textOffsetX);
-    textOffsetX = 0;
-    textOffsetY -= font.lineHeight;
-  }
-  function insertSpaces(spaces) {
-    if (spaces < 1)
-      spaces = 1;
-    textOffsetX += font.getXAdvance(32 /* Space */) * spaces;
-    if (wordWrap?.breakOn === "word" && textOffsetX >= wordWrap.emWidth) {
-      flushLine();
-    }
-    flushWord();
-  }
-}
-function findLargestFontSize(font, text, size, formatting) {
-  if (!formatting.fontSize) {
-    throw new Error("fontSize is required for shrinkToFit");
-  }
-  if (!formatting.shrinkToFit) {
-    throw new Error("shrinkToFit is required for findLargestFontSize");
-  }
-  const minSize = formatting.shrinkToFit.minFontSize;
-  const maxSize = formatting.shrinkToFit.maxFontSize ?? formatting.fontSize;
-  const maxLines = formatting.shrinkToFit.maxLines ?? Number.POSITIVE_INFINITY;
-  const threshold = 0.5;
-  let low = minSize;
-  let high = maxSize;
-  while (high - low > threshold) {
-    const testSize = (low + high) / 2;
-    const testMeasure = measureText(font, text, formatting.wordWrap);
-    const padding = formatting.shrinkToFit.padding ?? 0;
-    const scaledWidth = testMeasure.width * (testSize / font.lineHeight);
-    const scaledHeight = testMeasure.height * (testSize / font.lineHeight);
-    const fitsWidth = scaledWidth <= size.width - size.width * padding;
-    const fitsHeight = scaledHeight <= size.height - size.height * padding;
-    const fitsLines = testMeasure.lineCount <= maxLines;
-    if (fitsWidth && fitsHeight && fitsLines) {
-      low = testSize;
-    } else {
-      high = testSize;
-    }
-  }
-  return low;
+  return value;
 }
 
 // src/scene/TextNode.ts
@@ -18222,81 +18030,6 @@ class TextNode extends SceneNode {
   }
 }
 
-// src/backends/webgl2/WebGLFontPipeline.ts
-class WebGLFontPipeline2 {
-  font;
-  fontTexture;
-  charDataTexture;
-  textBufferTexture;
-  maxCharCount;
-  lineHeight;
-  #gl;
-  constructor(gl, font, fontTexture, charDataTexture, textBufferTexture, maxCharCount) {
-    this.#gl = gl;
-    this.font = font;
-    this.fontTexture = fontTexture;
-    this.charDataTexture = charDataTexture;
-    this.textBufferTexture = textBufferTexture;
-    this.maxCharCount = maxCharCount;
-    this.lineHeight = font.lineHeight;
-  }
-  static create(gl, font, maxCharCount) {
-    const fontTexture = gl.createTexture();
-    assert(fontTexture, "Failed to create font texture");
-    gl.bindTexture(gl.TEXTURE_2D, fontTexture);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, font.imageBitmap);
-    const charDataTexture = gl.createTexture();
-    assert(charDataTexture, "Failed to create char data texture");
-    gl.bindTexture(gl.TEXTURE_2D, charDataTexture);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-    const charCount = font.charCount;
-    const charTextureWidth = charCount * 2;
-    const charTextureData = new Float32Array(charTextureWidth * 4);
-    for (let i3 = 0;i3 < charCount; i3++) {
-      const srcOffset = i3 * 8;
-      const dstOffset0 = i3 * 2 * 4;
-      const dstOffset1 = (i3 * 2 + 1) * 4;
-      charTextureData[dstOffset0] = font.charBuffer[srcOffset];
-      charTextureData[dstOffset0 + 1] = font.charBuffer[srcOffset + 1];
-      charTextureData[dstOffset0 + 2] = font.charBuffer[srcOffset + 2];
-      charTextureData[dstOffset0 + 3] = font.charBuffer[srcOffset + 3];
-      charTextureData[dstOffset1] = font.charBuffer[srcOffset + 4];
-      charTextureData[dstOffset1 + 1] = font.charBuffer[srcOffset + 5];
-      charTextureData[dstOffset1 + 2] = font.charBuffer[srcOffset + 6];
-      charTextureData[dstOffset1 + 3] = font.charBuffer[srcOffset + 7];
-    }
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, charTextureWidth, 1, 0, gl.RGBA, gl.FLOAT, charTextureData);
-    const textBufferTexture = gl.createTexture();
-    assert(textBufferTexture, "Failed to create text buffer texture");
-    gl.bindTexture(gl.TEXTURE_2D, textBufferTexture);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, maxCharCount, 1, 0, gl.RGBA, gl.FLOAT, null);
-    gl.bindTexture(gl.TEXTURE_2D, null);
-    return new WebGLFontPipeline2(gl, font, fontTexture, charDataTexture, textBufferTexture, maxCharCount);
-  }
-  updateTextBuffer(data, glyphCount) {
-    const gl = this.#gl;
-    gl.bindTexture(gl.TEXTURE_2D, this.textBufferTexture);
-    gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, glyphCount, 1, gl.RGBA, gl.FLOAT, data);
-  }
-  destroy() {
-    const gl = this.#gl;
-    gl.deleteTexture(this.fontTexture);
-    gl.deleteTexture(this.charDataTexture);
-    gl.deleteTexture(this.textBufferTexture);
-  }
-}
-
 // src/backends/webgl2/glsl/text.glsl.ts
 var vertexShader2 = `#version 300 es
 precision highp float;
@@ -18421,7 +18154,7 @@ void main() {
 `;
 
 // src/backends/webgl2/WebGLTextShader.ts
-class WebGLTextShader2 {
+class WebGLTextShader {
   label = "text";
   code = fragmentShader2;
   font;
@@ -18743,7 +18476,7 @@ fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
 `;
 
 // src/backends/webgpu/FontPipeline.ts
-class FontPipeline2 {
+class FontPipeline {
   pipeline;
   font;
   fontBindGroup;
@@ -18806,7 +18539,7 @@ class FontPipeline2 {
         }
       ]
     });
-    return new FontPipeline2(pipeline, font, fontBindGroup, maxCharCount);
+    return new FontPipeline(pipeline, font, fontBindGroup, maxCharCount);
   }
 }
 function pipelinePromise(device, colorFormat, label) {
@@ -18852,70 +18585,550 @@ function pipelinePromise(device, colorFormat, label) {
     }
   });
 }
-if (typeof GPUShaderStage === "undefined") {
-  globalThis.GPUShaderStage = {
-    VERTEX: 1,
-    FRAGMENT: 2,
-    COMPUTE: 4
-  };
+if (typeof GPUShaderStage === "undefined") {
+  globalThis.GPUShaderStage = {
+    VERTEX: 1,
+    FRAGMENT: 2,
+    COMPUTE: 4
+  };
+}
+var fontBindGroupLayout = {
+  label: "MSDF font group layout",
+  entries: [
+    {
+      binding: 0,
+      visibility: GPUShaderStage.FRAGMENT,
+      texture: {}
+    },
+    {
+      binding: 1,
+      visibility: GPUShaderStage.FRAGMENT,
+      sampler: {}
+    },
+    {
+      binding: 2,
+      visibility: GPUShaderStage.VERTEX,
+      buffer: { type: "read-only-storage" }
+    },
+    {
+      binding: 3,
+      visibility: GPUShaderStage.VERTEX,
+      buffer: {}
+    }
+  ]
+};
+var engineUniformBindGroupLayout = {
+  label: "Uniform bind group",
+  entries: [
+    {
+      binding: 0,
+      visibility: GPUShaderStage.VERTEX,
+      buffer: {}
+    }
+  ]
+};
+var sampler = {
+  label: "MSDF text sampler",
+  minFilter: "linear",
+  magFilter: "linear",
+  mipmapFilter: "linear",
+  maxAnisotropy: 16
+};
+var textUniformBindGroupLayout = {
+  label: "MSDF text block uniform",
+  entries: [
+    {
+      binding: 0,
+      visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+      buffer: { type: "read-only-storage" }
+    },
+    {
+      binding: 1,
+      visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
+      buffer: { type: "read-only-storage" }
+    }
+  ]
+};
+// src/backends/webgpu/WebGPUTextShader.ts
+var deets = new _t2(text_wgsl_default);
+var struct = deets.structs.find((s3) => s3.name === "TextBlockDescriptor");
+if (!struct) {
+  throw new Error("FormattedText struct not found");
+}
+var textDescriptorInstanceSize = struct.size;
+
+class WebGPUTextShader {
+  label = "text";
+  code = text_wgsl_default;
+  #backend;
+  #pipeline;
+  #bindGroups = [];
+  #font;
+  #maxCharCount;
+  #engineUniformsBuffer;
+  #descriptorBuffer;
+  #textBlockBuffer;
+  #cpuDescriptorBuffer;
+  #cpuTextBlockBuffer;
+  #instanceIndex = 0;
+  #textBlockOffset = 0;
+  constructor(backend, pipeline, font, _colorFormat, instanceCount) {
+    this.#backend = backend;
+    const device = backend.device;
+    this.#font = font;
+    this.#pipeline = pipeline.pipeline;
+    this.#maxCharCount = pipeline.maxCharCount;
+    this.#descriptorBuffer = device.createBuffer({
+      label: "msdf text descriptor buffer",
+      size: textDescriptorInstanceSize * instanceCount,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+    });
+    this.#cpuDescriptorBuffer = new Float32Array(instanceCount * textDescriptorInstanceSize / Float32Array.BYTES_PER_ELEMENT);
+    this.#cpuTextBlockBuffer = new Float32Array(instanceCount * this.maxCharCount * 4);
+    this.#engineUniformsBuffer = device.createBuffer({
+      label: "msdf view projection matrix",
+      size: Float32Array.BYTES_PER_ELEMENT * 12,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    this.#textBlockBuffer = device.createBuffer({
+      label: "msdf text buffer",
+      size: instanceCount * this.maxCharCount * 4 * Float32Array.BYTES_PER_ELEMENT,
+      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
+    });
+    this.#bindGroups.push(pipeline.fontBindGroup);
+    this.#bindGroups.push(device.createBindGroup({
+      label: "msdf text bind group",
+      layout: pipeline.pipeline.getBindGroupLayout(1),
+      entries: [
+        {
+          binding: 0,
+          resource: { buffer: this.#descriptorBuffer }
+        },
+        {
+          binding: 1,
+          resource: { buffer: this.#textBlockBuffer }
+        }
+      ]
+    }));
+    const engineUniformsBindGroup = device.createBindGroup({
+      label: "msdf text uniforms bind group",
+      layout: pipeline.pipeline.getBindGroupLayout(2),
+      entries: [
+        {
+          binding: 0,
+          resource: { buffer: this.#engineUniformsBuffer }
+        }
+      ]
+    });
+    this.#bindGroups.push(engineUniformsBindGroup);
+  }
+  startFrame(uniform) {
+    const device = this.#backend.device;
+    device.queue.writeBuffer(this.#engineUniformsBuffer, 0, uniform.viewProjectionMatrix);
+    this.#instanceIndex = 0;
+    this.#textBlockOffset = 0;
+  }
+  processBatch(nodes) {
+    if (nodes.length === 0)
+      return 0;
+    const renderPass = this.#backend.renderPass;
+    renderPass.setPipeline(this.#pipeline);
+    for (let i3 = 0;i3 < this.#bindGroups.length; i3++) {
+      renderPass.setBindGroup(i3, this.#bindGroups[i3]);
+    }
+    for (const node of nodes) {
+      if (!(node instanceof TextNode)) {
+        console.error(node);
+        throw new Error(`Tried to use WebGPUTextShader on something that isn't a TextNode: ${node}`);
+      }
+      const text = node.text;
+      const formatting = node.formatting;
+      const measurements = measureText(this.#font, text, formatting.wordWrap);
+      const textBlockSize = 4 * text.length;
+      const textDescriptorOffset = this.#instanceIndex * textDescriptorInstanceSize / Float32Array.BYTES_PER_ELEMENT;
+      this.#cpuDescriptorBuffer.set(node.matrix, textDescriptorOffset);
+      this.#cpuDescriptorBuffer.set([node.tint.r, node.tint.g, node.tint.b, node.tint.a], textDescriptorOffset + 12);
+      const size = node.size ?? measurements;
+      const fontSize = formatting.shrinkToFit ? findLargestFontSize(this.#font, text, size, formatting) : formatting.fontSize;
+      const actualFontSize = fontSize || DEFAULT_FONT_SIZE;
+      this.#cpuDescriptorBuffer[textDescriptorOffset + 16] = actualFontSize;
+      this.#cpuDescriptorBuffer[textDescriptorOffset + 17] = formatting.align === "center" ? 0 : measurements.width;
+      this.#cpuDescriptorBuffer[textDescriptorOffset + 18] = measurements.height;
+      this.#cpuDescriptorBuffer[textDescriptorOffset + 19] = this.#textBlockOffset / 4;
+      shapeText(this.#font, text, size, actualFontSize, formatting, this.#cpuTextBlockBuffer, this.#textBlockOffset);
+      this.#backend.device.queue.writeBuffer(this.#descriptorBuffer, textDescriptorOffset * Float32Array.BYTES_PER_ELEMENT, this.#cpuDescriptorBuffer, textDescriptorOffset, textDescriptorInstanceSize / Float32Array.BYTES_PER_ELEMENT);
+      this.#backend.device.queue.writeBuffer(this.#textBlockBuffer, this.#textBlockOffset * Float32Array.BYTES_PER_ELEMENT, this.#cpuTextBlockBuffer, this.#textBlockOffset, textBlockSize);
+      this.#textBlockOffset += textBlockSize;
+      renderPass.draw(4, measurements.printedCharCount, 4 * this.#instanceIndex, 0);
+      this.#instanceIndex++;
+    }
+    return nodes.length;
+  }
+  endFrame() {}
+  get font() {
+    return this.#font;
+  }
+  get maxCharCount() {
+    return this.#maxCharCount;
+  }
+}
+
+// src/scene/Batcher.ts
+class Batcher {
+  nodes = [];
+  layers = [];
+  pipelines = [];
+  enqueue(node) {
+    if (node.renderComponent && node.isActive) {
+      this.nodes.push(node);
+      const z3 = node.layer;
+      const layer = this.#findOrCreateLayer(z3);
+      const pipeline = this.#findOrCreatePipeline(layer, node.renderComponent.shader);
+      pipeline.nodes.push(node);
+    }
+    for (const kid of node.kids) {
+      this.enqueue(kid);
+    }
+  }
+  flush() {
+    this.nodes = [];
+    this.layers = [];
+    this.pipelines = [];
+  }
+  #findOrCreateLayer(z3) {
+    let layer = this.layers.find((l3) => l3.z === z3);
+    if (!layer) {
+      layer = { z: z3, pipelines: [] };
+      this.layers.push(layer);
+      this.layers.sort((a3, b3) => a3.z - b3.z);
+    }
+    return layer;
+  }
+  #findOrCreatePipeline(layer, shader) {
+    let pipeline = layer.pipelines.find((p3) => p3.shader === shader);
+    if (!pipeline) {
+      pipeline = { shader, nodes: [] };
+      layer.pipelines.push(pipeline);
+      this.pipelines.push(pipeline);
+    }
+    return pipeline;
+  }
+}
+
+// src/scene/Camera.ts
+class Camera {
+  #position = { x: 0, y: 0 };
+  #zoom = 1;
+  #rotation = 0;
+  #isDirty = true;
+  #matrix = mat3.create();
+  get zoom() {
+    return this.#zoom;
+  }
+  set zoom(value) {
+    this.#zoom = value;
+    this.setDirty();
+  }
+  get rotation() {
+    return rad2deg(this.#rotation);
+  }
+  set rotation(value) {
+    this.#rotation = deg2rad(value);
+    this.setDirty();
+  }
+  get rotationRadians() {
+    return this.#rotation;
+  }
+  set rotationRadians(value) {
+    this.#rotation = value;
+    this.setDirty();
+  }
+  get x() {
+    return this.#position.x;
+  }
+  get y() {
+    return this.#position.y;
+  }
+  set x(value) {
+    this.#position.x = value;
+    this.setDirty();
+  }
+  set y(value) {
+    this.#position.y = value;
+    this.setDirty();
+  }
+  get matrix() {
+    if (this.#isDirty) {
+      this.#isDirty = false;
+      this.#matrix = createViewMatrix(this, this.#matrix);
+    }
+    return this.#matrix;
+  }
+  setDirty() {
+    this.#isDirty = true;
+  }
+}
+
+// src/scene/QuadNode.ts
+var PRIMITIVE_TEXTURE = "__primitive__";
+var RESERVED_PRIMITIVE_INDEX_START = 1000;
+var CIRCLE_INDEX = 1001;
+var DEFAULT_REGION = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0
+};
+
+class QuadNode extends SceneNode {
+  assetManager;
+  #color;
+  #atlasCoords;
+  #region;
+  #matrixPool;
+  #flip;
+  #cropOffset;
+  #cropRatio;
+  #atlasSize;
+  #textureId;
+  #writeInstance;
+  constructor(options, matrixPool) {
+    assert(options.shader, "QuadNode requires a shader to be explicitly provided");
+    assert(options.size, "QuadNode requires a size to be explicitly provided");
+    assert(options.atlasCoords, "QuadNode requires atlas coords to be explicitly provided");
+    options.render ??= {
+      shader: options.shader,
+      writeInstance: writeQuadInstance
+    };
+    super(options);
+    assert(options.assetManager, "QuadNode requires an asset manager");
+    this.assetManager = options.assetManager;
+    if (options.atlasCoords && options.atlasCoords.atlasIndex >= RESERVED_PRIMITIVE_INDEX_START) {
+      this.#textureId = PRIMITIVE_TEXTURE;
+      this.#region = DEFAULT_REGION;
+      this.#atlasSize = DEFAULT_REGION;
+    } else {
+      assert(options.textureId, "QuadNode requires texture id to be explicitly provided");
+      this.#textureId = options.textureId;
+      assert(options.region, "QuadNode requires a region to be explicitly provided");
+      this.#region = options.region;
+      assert(options.atlasSize, "QuadNode requires atlas size to be explicitly provided");
+      this.#atlasSize = options.atlasSize;
+    }
+    this.#atlasCoords = options.atlasCoords;
+    this.#color = options.color ?? { r: 1, g: 1, b: 1, a: 1 };
+    this.#matrixPool = matrixPool;
+    this.#flip = { x: options.flipX ? -1 : 1, y: options.flipY ? -1 : 1 };
+    this.#cropOffset = options.cropOffset ?? { x: 0, y: 0 };
+    this.#cropRatio = !this.#atlasCoords.uvScaleCropped ? { width: 1, height: 1 } : {
+      width: this.#atlasCoords.uvScaleCropped.width / this.#atlasCoords.uvScale.width,
+      height: this.#atlasCoords.uvScaleCropped.height / this.#atlasCoords.uvScale.height
+    };
+    this.#writeInstance = options.writeInstance;
+  }
+  get color() {
+    return this.#color;
+  }
+  set color(value) {
+    this.#color = value;
+  }
+  get size() {
+    const size = super.size;
+    if (!size) {
+      throw new Error("QuadNode requires a size");
+    }
+    return size;
+  }
+  set size(val) {
+    super.size = val;
+  }
+  get matrixWithSize() {
+    const matrix = mat3.clone(this.matrix, this.#matrixPool.get());
+    mat3.scale(matrix, [this.size.width * this.#flip.x, this.size.height * this.#flip.y], matrix);
+    return matrix;
+  }
+  get atlasCoords() {
+    return this.#atlasCoords;
+  }
+  get region() {
+    return this.#region;
+  }
+  get writeInstance() {
+    return this.#writeInstance;
+  }
+  get flipX() {
+    return this.#flip.x === -1;
+  }
+  set flipX(value) {
+    this.#flip.x = value ? -1 : 1;
+    this.setDirty();
+  }
+  get flipY() {
+    return this.#flip.y === -1;
+  }
+  set flipY(value) {
+    this.#flip.y = value ? -1 : 1;
+    this.setDirty();
+  }
+  get cropOffset() {
+    return this.#cropOffset;
+  }
+  set cropOffset(value) {
+    this.#cropOffset = value;
+  }
+  get textureId() {
+    return this.#textureId;
+  }
+  get isPrimitive() {
+    return this.#textureId === PRIMITIVE_TEXTURE;
+  }
+  get isCircle() {
+    return this.#atlasCoords.atlasIndex === CIRCLE_INDEX;
+  }
+  extra = {
+    setAtlasCoords: (value) => {
+      this.#atlasCoords = value;
+    },
+    cropRatio: () => {
+      return this.#cropRatio;
+    },
+    atlasSize: () => {
+      return this.#atlasSize;
+    }
+  };
+}
+function writeQuadInstance(node, array, offset) {
+  if (!(node instanceof QuadNode)) {
+    throw new Error("QuadNode.writeInstance can only be called on QuadNodes");
+  }
+  array.set(node.matrixWithSize, offset);
+  array.set([node.color.r, node.color.g, node.color.b, node.color.a], offset + 12);
+  const region = node.region;
+  if (node.textureId === PRIMITIVE_TEXTURE) {
+    array.set([
+      node.atlasCoords.uvOffset.x,
+      node.atlasCoords.uvOffset.y,
+      node.atlasCoords.uvScale.width,
+      node.atlasCoords.uvScale.height
+    ], offset + 16);
+  } else {
+    const atlasSize = node.extra.atlasSize();
+    array.set([
+      node.atlasCoords.uvOffset.x + region.x / atlasSize.width,
+      node.atlasCoords.uvOffset.y + region.y / atlasSize.height,
+      region.width / atlasSize.width,
+      region.height / atlasSize.height
+    ], offset + 16);
+  }
+  array.set([
+    node.cropOffset.x / 2 / (node.atlasCoords.originalSize.width || 1),
+    node.cropOffset.y / 2 / (node.atlasCoords.originalSize.height || 1),
+    node.extra.cropRatio().width,
+    node.extra.cropRatio().height
+  ], offset + 20);
+  new DataView(array.buffer).setUint32(array.byteOffset + (offset + 24) * Float32Array.BYTES_PER_ELEMENT, node.atlasCoords.atlasIndex, true);
+  node.writeInstance?.(array, offset + 28);
+  return 1;
+}
+
+// src/scene/JumboQuadNode.ts
+var MAT3_SIZE = 12;
+var VEC4F_SIZE = 4;
+
+class JumboQuadNode extends QuadNode {
+  #tiles;
+  #matrixPool;
+  constructor(options, matrixPool) {
+    assert(options.shader, "JumboQuadNode requires a shader to be explicitly provided");
+    assert(options.tiles && options.tiles.length > 0, "JumboQuadNode requires at least one tile to be provided");
+    options.render ??= {
+      shader: options.shader,
+      writeInstance: writeJumboQuadInstance
+    };
+    super({
+      ...options,
+      atlasCoords: options.tiles[0].atlasCoords
+    }, matrixPool);
+    this.#matrixPool = matrixPool;
+    this.#tiles = [];
+    for (const tile of options.tiles) {
+      assert(tile.atlasCoords, "JumboQuadNode requires atlas coords to be provided");
+      assert(tile.size, "JumboQuadNode requires a size to be provided");
+      this.#tiles.push({
+        textureId: tile.textureId,
+        offset: tile.offset,
+        size: tile.size,
+        atlasCoords: tile.atlasCoords
+      });
+    }
+  }
+  get atlasCoords() {
+    throw new Error("JumboQuadNode does not have a single atlas coords");
+  }
+  get tiles() {
+    return this.#tiles;
+  }
+  getTileMatrix(tile) {
+    const matrix = mat3.clone(this.matrix, this.#matrixPool.get());
+    const originalSize = {
+      width: Math.max(...this.#tiles.map((t3) => t3.offset.x + t3.size.width)),
+      height: Math.max(...this.#tiles.map((t3) => t3.offset.y + t3.size.height))
+    };
+    const proportionalSize = {
+      width: this.size.width / originalSize.width,
+      height: this.size.height / originalSize.height
+    };
+    const centerOffset = {
+      x: tile.offset.x + tile.size.width / 2 - originalSize.width / 2,
+      y: -(tile.offset.y + tile.size.height / 2 - originalSize.height / 2)
+    };
+    mat3.translate(matrix, [
+      centerOffset.x * proportionalSize.width,
+      centerOffset.y * proportionalSize.height
+    ], matrix);
+    mat3.scale(matrix, [
+      tile.size.width * proportionalSize.width * (this.flipX ? -1 : 1),
+      tile.size.height * proportionalSize.height * (this.flipY ? -1 : 1)
+    ], matrix);
+    return matrix;
+  }
+}
+function writeJumboQuadInstance(node, array, offset) {
+  if (!(node instanceof JumboQuadNode)) {
+    throw new Error("JumboQuadNode.writeJumboQuadInstance can only be called on JumboQuadNodes");
+  }
+  let tileOffset = 0;
+  for (const tile of node.tiles) {
+    const coord = tile.atlasCoords;
+    const matrix = node.getTileMatrix(tile);
+    array.set(matrix, offset + tileOffset);
+    tileOffset += MAT3_SIZE;
+    array.set([node.color.r, node.color.g, node.color.b, node.color.a], offset + tileOffset);
+    tileOffset += VEC4F_SIZE;
+    array.set([
+      coord.uvOffset.x,
+      coord.uvOffset.y,
+      coord.uvScale.width,
+      coord.uvScale.height
+    ], offset + tileOffset);
+    tileOffset += VEC4F_SIZE;
+    const cropRatio = !coord.uvScaleCropped ? { width: 1, height: 1 } : {
+      width: coord.uvScaleCropped.width / coord.uvScale.width,
+      height: coord.uvScaleCropped.height / coord.uvScale.height
+    };
+    array.set([
+      tile.atlasCoords.cropOffset.x / 2 / (tile.atlasCoords.originalSize.width || 1),
+      tile.atlasCoords.cropOffset.y / 2 / (tile.atlasCoords.originalSize.height || 1),
+      cropRatio.width,
+      cropRatio.height
+    ], offset + tileOffset);
+    tileOffset += VEC4F_SIZE;
+    new DataView(array.buffer).setUint32(array.byteOffset + (offset + tileOffset) * Float32Array.BYTES_PER_ELEMENT, coord.atlasIndex, true);
+    tileOffset += VEC4F_SIZE;
+  }
+  node.writeInstance?.(array, offset + tileOffset);
+  return node.tiles.length;
 }
-var fontBindGroupLayout = {
-  label: "MSDF font group layout",
-  entries: [
-    {
-      binding: 0,
-      visibility: GPUShaderStage.FRAGMENT,
-      texture: {}
-    },
-    {
-      binding: 1,
-      visibility: GPUShaderStage.FRAGMENT,
-      sampler: {}
-    },
-    {
-      binding: 2,
-      visibility: GPUShaderStage.VERTEX,
-      buffer: { type: "read-only-storage" }
-    },
-    {
-      binding: 3,
-      visibility: GPUShaderStage.VERTEX,
-      buffer: {}
-    }
-  ]
-};
-var engineUniformBindGroupLayout = {
-  label: "Uniform bind group",
-  entries: [
-    {
-      binding: 0,
-      visibility: GPUShaderStage.VERTEX,
-      buffer: {}
-    }
-  ]
-};
-var sampler = {
-  label: "MSDF text sampler",
-  minFilter: "linear",
-  magFilter: "linear",
-  mipmapFilter: "linear",
-  maxAnisotropy: 16
-};
-var textUniformBindGroupLayout = {
-  label: "MSDF text block uniform",
-  entries: [
-    {
-      binding: 0,
-      visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-      buffer: { type: "read-only-storage" }
-    },
-    {
-      binding: 1,
-      visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
-      buffer: { type: "read-only-storage" }
-    }
-  ]
-};
 
 // src/backends/webgpu/wgsl/pixel-scraping.wgsl.ts
 var pixel_scraping_wgsl_default = `
@@ -19290,130 +19503,6 @@ function createPipelines(device, label) {
   };
 }
 
-// src/backends/webgpu/WebGPUTextShader.ts
-var deets = new _t2(text_wgsl_default);
-var struct = deets.structs.find((s3) => s3.name === "TextBlockDescriptor");
-if (!struct) {
-  throw new Error("FormattedText struct not found");
-}
-var textDescriptorInstanceSize = struct.size;
-
-class WebGPUTextShader2 {
-  label = "text";
-  code = text_wgsl_default;
-  #backend;
-  #pipeline;
-  #bindGroups = [];
-  #font;
-  #maxCharCount;
-  #engineUniformsBuffer;
-  #descriptorBuffer;
-  #textBlockBuffer;
-  #cpuDescriptorBuffer;
-  #cpuTextBlockBuffer;
-  #instanceIndex = 0;
-  #textBlockOffset = 0;
-  constructor(backend, pipeline, font, _colorFormat, instanceCount) {
-    this.#backend = backend;
-    const device = backend.device;
-    this.#font = font;
-    this.#pipeline = pipeline.pipeline;
-    this.#maxCharCount = pipeline.maxCharCount;
-    this.#descriptorBuffer = device.createBuffer({
-      label: "msdf text descriptor buffer",
-      size: textDescriptorInstanceSize * instanceCount,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-    });
-    this.#cpuDescriptorBuffer = new Float32Array(instanceCount * textDescriptorInstanceSize / Float32Array.BYTES_PER_ELEMENT);
-    this.#cpuTextBlockBuffer = new Float32Array(instanceCount * this.maxCharCount * 4);
-    this.#engineUniformsBuffer = device.createBuffer({
-      label: "msdf view projection matrix",
-      size: Float32Array.BYTES_PER_ELEMENT * 12,
-      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
-    });
-    this.#textBlockBuffer = device.createBuffer({
-      label: "msdf text buffer",
-      size: instanceCount * this.maxCharCount * 4 * Float32Array.BYTES_PER_ELEMENT,
-      usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST
-    });
-    this.#bindGroups.push(pipeline.fontBindGroup);
-    this.#bindGroups.push(device.createBindGroup({
-      label: "msdf text bind group",
-      layout: pipeline.pipeline.getBindGroupLayout(1),
-      entries: [
-        {
-          binding: 0,
-          resource: { buffer: this.#descriptorBuffer }
-        },
-        {
-          binding: 1,
-          resource: { buffer: this.#textBlockBuffer }
-        }
-      ]
-    }));
-    const engineUniformsBindGroup = device.createBindGroup({
-      label: "msdf text uniforms bind group",
-      layout: pipeline.pipeline.getBindGroupLayout(2),
-      entries: [
-        {
-          binding: 0,
-          resource: { buffer: this.#engineUniformsBuffer }
-        }
-      ]
-    });
-    this.#bindGroups.push(engineUniformsBindGroup);
-  }
-  startFrame(uniform) {
-    const device = this.#backend.device;
-    device.queue.writeBuffer(this.#engineUniformsBuffer, 0, uniform.viewProjectionMatrix);
-    this.#instanceIndex = 0;
-    this.#textBlockOffset = 0;
-  }
-  processBatch(nodes) {
-    if (nodes.length === 0)
-      return 0;
-    const renderPass = this.#backend.renderPass;
-    renderPass.setPipeline(this.#pipeline);
-    for (let i3 = 0;i3 < this.#bindGroups.length; i3++) {
-      renderPass.setBindGroup(i3, this.#bindGroups[i3]);
-    }
-    for (const node of nodes) {
-      if (!(node instanceof TextNode)) {
-        console.error(node);
-        throw new Error(`Tried to use WebGPUTextShader on something that isn't a TextNode: ${node}`);
-      }
-      const text = node.text;
-      const formatting = node.formatting;
-      const measurements = measureText(this.#font, text, formatting.wordWrap);
-      const textBlockSize = 4 * text.length;
-      const textDescriptorOffset = this.#instanceIndex * textDescriptorInstanceSize / Float32Array.BYTES_PER_ELEMENT;
-      this.#cpuDescriptorBuffer.set(node.matrix, textDescriptorOffset);
-      this.#cpuDescriptorBuffer.set([node.tint.r, node.tint.g, node.tint.b, node.tint.a], textDescriptorOffset + 12);
-      const size = node.size ?? measurements;
-      const fontSize = formatting.shrinkToFit ? findLargestFontSize(this.#font, text, size, formatting) : formatting.fontSize;
-      const actualFontSize = fontSize || DEFAULT_FONT_SIZE;
-      this.#cpuDescriptorBuffer[textDescriptorOffset + 16] = actualFontSize;
-      this.#cpuDescriptorBuffer[textDescriptorOffset + 17] = formatting.align === "center" ? 0 : measurements.width;
-      this.#cpuDescriptorBuffer[textDescriptorOffset + 18] = measurements.height;
-      this.#cpuDescriptorBuffer[textDescriptorOffset + 19] = this.#textBlockOffset / 4;
-      shapeText(this.#font, text, size, actualFontSize, formatting, this.#cpuTextBlockBuffer, this.#textBlockOffset);
-      this.#backend.device.queue.writeBuffer(this.#descriptorBuffer, textDescriptorOffset * Float32Array.BYTES_PER_ELEMENT, this.#cpuDescriptorBuffer, textDescriptorOffset, textDescriptorInstanceSize / Float32Array.BYTES_PER_ELEMENT);
-      this.#backend.device.queue.writeBuffer(this.#textBlockBuffer, this.#textBlockOffset * Float32Array.BYTES_PER_ELEMENT, this.#cpuTextBlockBuffer, this.#textBlockOffset, textBlockSize);
-      this.#textBlockOffset += textBlockSize;
-      renderPass.draw(4, measurements.printedCharCount, 4 * this.#instanceIndex, 0);
-      this.#instanceIndex++;
-    }
-    return nodes.length;
-  }
-  endFrame() {}
-  get font() {
-    return this.#font;
-  }
-  get maxCharCount() {
-    return this.#maxCharCount;
-  }
-}
-
 // src/textures/Bundles.ts
 class Bundles {
   #bundles = new Map;
@@ -20088,13 +20177,13 @@ class AssetManager {
       const webgpuBackend = this.#backend;
       const device = webgpuBackend.device;
       const presentationFormat = webgpuBackend.presentationFormat;
-      const fontPipeline = await FontPipeline2.create(device, font, presentationFormat, limits.maxTextLength);
-      const textShader = new WebGPUTextShader2(webgpuBackend, fontPipeline, font, presentationFormat, limits.instanceCount);
+      const fontPipeline = await FontPipeline.create(device, font, presentationFormat, limits.maxTextLength);
+      const textShader = new WebGPUTextShader(webgpuBackend, fontPipeline, font, presentationFormat, limits.instanceCount);
       this.#fonts.set(id, textShader);
     } else {
       const webglBackend = this.#backend;
-      const fontPipeline = WebGLFontPipeline2.create(webglBackend.gl, font, limits.maxTextLength);
-      const textShader = new WebGLTextShader2(webglBackend, fontPipeline);
+      const fontPipeline = WebGLFontPipeline.create(webglBackend.gl, font, limits.maxTextLength);
+      const textShader = new WebGLTextShader(webglBackend, fontPipeline);
       this.#fonts.set(id, textShader);
     }
     return id;
@@ -20237,6 +20326,13 @@ class AssetManager {
   }
 }
 
+// src/utils/mod.ts
+var exports_mod2 = {};
+__export(exports_mod2, {
+  assert: () => assert,
+  Pool: () => Pool
+});
+
 // src/utils/pool.ts
 class Pool {
   #items = [];
@@ -20258,7 +20354,6 @@ class Pool {
     this.#index = 0;
   }
 }
-
 // src/Toodle.ts
 class Toodle {
   assets;
@@ -20595,11 +20690,11 @@ class Toodle {
     }
     let backend;
     if (backendType === "webgpu") {
-      backend = await WebGPUBackend2.create(canvas, {
+      backend = await WebGPUBackend.create(canvas, {
         limits: options?.limits
       });
     } else {
-      backend = await WebGLBackend2.create(canvas, {
+      backend = await WebGLBackend.create(canvas, {
         limits: options?.limits
       });
     }
@@ -20617,20 +20712,204 @@ class Toodle {
     return this.#backend;
   }
 }
+// src/colors/mod.ts
+var exports_mod3 = {};
+__export(exports_mod3, {
+  web: () => web
+});
+var web = Object.freeze({
+  aliceBlue: { r: 0.941176, g: 0.972549, b: 1, a: 1 },
+  antiqueWhite: { r: 0.980392, g: 0.921569, b: 0.843137, a: 1 },
+  aqua: { r: 0, g: 1, b: 1, a: 1 },
+  aquamarine: { r: 0.498039, g: 1, b: 0.831373, a: 1 },
+  azure: { r: 0.941176, g: 1, b: 1, a: 1 },
+  beige: { r: 0.960784, g: 0.960784, b: 0.862745, a: 1 },
+  bisque: { r: 1, g: 0.894118, b: 0.768627, a: 1 },
+  black: { r: 0, g: 0, b: 0, a: 1 },
+  blanchedAlmond: { r: 1, g: 0.921569, b: 0.803922, a: 1 },
+  blue: { r: 0, g: 0, b: 1, a: 1 },
+  blueViolet: { r: 0.541176, g: 0.168627, b: 0.886275, a: 1 },
+  brown: { r: 0.647059, g: 0.164706, b: 0.164706, a: 1 },
+  burlywood: { r: 0.870588, g: 0.721569, b: 0.529412, a: 1 },
+  cadetBlue: { r: 0.372549, g: 0.619608, b: 0.627451, a: 1 },
+  chartreuse: { r: 0.498039, g: 1, b: 0, a: 1 },
+  chocolate: { r: 0.823529, g: 0.411765, b: 0.117647, a: 1 },
+  coral: { r: 1, g: 0.498039, b: 0.313726, a: 1 },
+  cornflowerBlue: { r: 0.392157, g: 0.584314, b: 0.929412, a: 1 },
+  cornsilk: { r: 1, g: 0.972549, b: 0.862745, a: 1 },
+  crimson: { r: 0.862745, g: 0.0784314, b: 0.235294, a: 1 },
+  cyan: { r: 0, g: 1, b: 1, a: 1 },
+  darkBlue: { r: 0, g: 0, b: 0.545098, a: 1 },
+  darkCyan: { r: 0, g: 0.545098, b: 0.545098, a: 1 },
+  darkGoldenrod: { r: 0.721569, g: 0.52549, b: 0.0431373, a: 1 },
+  darkGray: { r: 0.662745, g: 0.662745, b: 0.662745, a: 1 },
+  darkGreen: { r: 0, g: 0.392157, b: 0, a: 1 },
+  darkKhaki: { r: 0.741176, g: 0.717647, b: 0.419608, a: 1 },
+  darkMagenta: { r: 0.545098, g: 0, b: 0.545098, a: 1 },
+  darkOliveGreen: { r: 0.333333, g: 0.419608, b: 0.184314, a: 1 },
+  darkOrange: { r: 1, g: 0.54902, b: 0, a: 1 },
+  darkOrchid: { r: 0.6, g: 0.196078, b: 0.8, a: 1 },
+  darkRed: { r: 0.545098, g: 0, b: 0, a: 1 },
+  darkSalmon: { r: 0.913725, g: 0.588235, b: 0.478431, a: 1 },
+  darkSeaGreen: { r: 0.560784, g: 0.737255, b: 0.560784, a: 1 },
+  darkSlateBlue: { r: 0.282353, g: 0.239216, b: 0.545098, a: 1 },
+  darkSlateGray: { r: 0.184314, g: 0.309804, b: 0.309804, a: 1 },
+  darkTurquoise: { r: 0, g: 0.807843, b: 0.819608, a: 1 },
+  darkViolet: { r: 0.580392, g: 0, b: 0.827451, a: 1 },
+  deepPink: { r: 1, g: 0.0784314, b: 0.576471, a: 1 },
+  deepSkyBlue: { r: 0, g: 0.74902, b: 1, a: 1 },
+  dimGray: { r: 0.411765, g: 0.411765, b: 0.411765, a: 1 },
+  dodgerBlue: { r: 0.117647, g: 0.564706, b: 1, a: 1 },
+  firebrick: { r: 0.698039, g: 0.133333, b: 0.133333, a: 1 },
+  floralWhite: { r: 1, g: 0.980392, b: 0.941176, a: 1 },
+  forestGreen: { r: 0.133333, g: 0.545098, b: 0.133333, a: 1 },
+  fuchsia: { r: 1, g: 0, b: 1, a: 1 },
+  gainsboro: { r: 0.862745, g: 0.862745, b: 0.862745, a: 1 },
+  ghostWhite: { r: 0.972549, g: 0.972549, b: 1, a: 1 },
+  gold: { r: 1, g: 0.843137, b: 0, a: 1 },
+  goldenrod: { r: 0.854902, g: 0.647059, b: 0.12549, a: 1 },
+  gray: { r: 0.745098, g: 0.745098, b: 0.745098, a: 1 },
+  green: { r: 0, g: 1, b: 0, a: 1 },
+  greenYellow: { r: 0.678431, g: 1, b: 0.184314, a: 1 },
+  honeydew: { r: 0.941176, g: 1, b: 0.941176, a: 1 },
+  hotPink: { r: 1, g: 0.411765, b: 0.705882, a: 1 },
+  indigo: { r: 0.294118, g: 0, b: 0.509804, a: 1 },
+  ivory: { r: 1, g: 1, b: 0.941176, a: 1 },
+  khaki: { r: 0.941176, g: 0.901961, b: 0.54902, a: 1 },
+  lavender: { r: 0.901961, g: 0.901961, b: 0.980392, a: 1 },
+  lavenderBlush: { r: 1, g: 0.941176, b: 0.960784, a: 1 },
+  lawnGreen: { r: 0.486275, g: 0.988235, b: 0, a: 1 },
+  lemonChiffon: { r: 1, g: 0.980392, b: 0.803922, a: 1 },
+  lightBlue: { r: 0.678431, g: 0.847059, b: 0.901961, a: 1 },
+  lightCoral: { r: 0.941176, g: 0.501961, b: 0.501961, a: 1 },
+  lightCyan: { r: 0.878431, g: 1, b: 1, a: 1 },
+  lightGoldenrod: { r: 0.980392, g: 0.980392, b: 0.823529, a: 1 },
+  lightGray: { r: 0.827451, g: 0.827451, b: 0.827451, a: 1 },
+  lightGreen: { r: 0.564706, g: 0.933333, b: 0.564706, a: 1 },
+  lightPink: { r: 1, g: 0.713726, b: 0.756863, a: 1 },
+  lightSalmon: { r: 1, g: 0.627451, b: 0.478431, a: 1 },
+  lightSeaGreen: { r: 0.12549, g: 0.698039, b: 0.666667, a: 1 },
+  lightSkyBlue: { r: 0.529412, g: 0.807843, b: 0.980392, a: 1 },
+  lightSlateGray: { r: 0.466667, g: 0.533333, b: 0.6, a: 1 },
+  lightSteelBlue: { r: 0.690196, g: 0.768627, b: 0.870588, a: 1 },
+  lightYellow: { r: 1, g: 1, b: 0.878431, a: 1 },
+  lime: { r: 0, g: 1, b: 0, a: 1 },
+  limeGreen: { r: 0.196078, g: 0.803922, b: 0.196078, a: 1 },
+  linen: { r: 0.980392, g: 0.941176, b: 0.901961, a: 1 },
+  magenta: { r: 1, g: 0, b: 1, a: 1 },
+  maroon: { r: 0.690196, g: 0.188235, b: 0.376471, a: 1 },
+  mediumAquamarine: { r: 0.4, g: 0.803922, b: 0.666667, a: 1 },
+  mediumBlue: { r: 0, g: 0, b: 0.803922, a: 1 },
+  mediumOrchid: { r: 0.729412, g: 0.333333, b: 0.827451, a: 1 },
+  mediumPurple: { r: 0.576471, g: 0.439216, b: 0.858824, a: 1 },
+  mediumSeaGreen: { r: 0.235294, g: 0.701961, b: 0.443137, a: 1 },
+  mediumSlateBlue: { r: 0.482353, g: 0.407843, b: 0.933333, a: 1 },
+  mediumSpringGreen: { r: 0, g: 0.980392, b: 0.603922, a: 1 },
+  mediumTurquoise: { r: 0.282353, g: 0.819608, b: 0.8, a: 1 },
+  mediumVioletRed: { r: 0.780392, g: 0.0823529, b: 0.521569, a: 1 },
+  midnightBlue: { r: 0.0980392, g: 0.0980392, b: 0.439216, a: 1 },
+  mintCream: { r: 0.960784, g: 1, b: 0.980392, a: 1 },
+  mistyRose: { r: 1, g: 0.894118, b: 0.882353, a: 1 },
+  moccasin: { r: 1, g: 0.894118, b: 0.709804, a: 1 },
+  navyBlue: { r: 0, g: 0, b: 0.501961, a: 1 },
+  oldLace: { r: 0.992157, g: 0.960784, b: 0.901961, a: 1 },
+  olive: { r: 0.501961, g: 0.501961, b: 0, a: 1 },
+  oliveDrab: { r: 0.419608, g: 0.556863, b: 0.137255, a: 1 },
+  orange: { r: 1, g: 0.647059, b: 0, a: 1 },
+  orangeRed: { r: 1, g: 0.270588, b: 0, a: 1 },
+  orchid: { r: 0.854902, g: 0.439216, b: 0.839216, a: 1 },
+  paleGoldenrod: { r: 0.933333, g: 0.909804, b: 0.666667, a: 1 },
+  paleGreen: { r: 0.596078, g: 0.984314, b: 0.596078, a: 1 },
+  paleTurquoise: { r: 0.686275, g: 0.933333, b: 0.933333, a: 1 },
+  paleVioletRed: { r: 0.858824, g: 0.439216, b: 0.576471, a: 1 },
+  papayaWhip: { r: 1, g: 0.937255, b: 0.835294, a: 1 },
+  peachPuff: { r: 1, g: 0.854902, b: 0.72549, a: 1 },
+  peru: { r: 0.803922, g: 0.521569, b: 0.247059, a: 1 },
+  pink: { r: 1, g: 0.752941, b: 0.796078, a: 1 },
+  plum: { r: 0.866667, g: 0.627451, b: 0.866667, a: 1 },
+  powderBlue: { r: 0.690196, g: 0.878431, b: 0.901961, a: 1 },
+  purple: { r: 0.627451, g: 0.12549, b: 0.941176, a: 1 },
+  rebeccaPurple: { r: 0.4, g: 0.2, b: 0.6, a: 1 },
+  red: { r: 1, g: 0, b: 0, a: 1 },
+  rosyBrown: { r: 0.737255, g: 0.560784, b: 0.560784, a: 1 },
+  royalBlue: { r: 0.254902, g: 0.411765, b: 0.882353, a: 1 },
+  saddleBrown: { r: 0.545098, g: 0.270588, b: 0.0745098, a: 1 },
+  salmon: { r: 0.980392, g: 0.501961, b: 0.447059, a: 1 },
+  sandyBrown: { r: 0.956863, g: 0.643137, b: 0.376471, a: 1 },
+  seaGreen: { r: 0.180392, g: 0.545098, b: 0.341176, a: 1 },
+  seashell: { r: 1, g: 0.960784, b: 0.933333, a: 1 },
+  sienna: { r: 0.627451, g: 0.321569, b: 0.176471, a: 1 },
+  silver: { r: 0.752941, g: 0.752941, b: 0.752941, a: 1 },
+  skyBlue: { r: 0.529412, g: 0.807843, b: 0.921569, a: 1 },
+  slateBlue: { r: 0.415686, g: 0.352941, b: 0.803922, a: 1 },
+  slateGray: { r: 0.439216, g: 0.501961, b: 0.564706, a: 1 },
+  snow: { r: 1, g: 0.980392, b: 0.980392, a: 1 },
+  springGreen: { r: 0, g: 1, b: 0.498039, a: 1 },
+  steelBlue: { r: 0.27451, g: 0.509804, b: 0.705882, a: 1 },
+  tan: { r: 0.823529, g: 0.705882, b: 0.54902, a: 1 },
+  teal: { r: 0, g: 0.501961, b: 0.501961, a: 1 },
+  thistle: { r: 0.847059, g: 0.74902, b: 0.847059, a: 1 },
+  tomato: { r: 1, g: 0.388235, b: 0.278431, a: 1 },
+  transparent: { r: 1, g: 1, b: 1, a: 0 },
+  turquoise: { r: 0.25098, g: 0.878431, b: 0.815686, a: 1 },
+  violet: { r: 0.933333, g: 0.509804, b: 0.933333, a: 1 },
+  webGray: { r: 0.501961, g: 0.501961, b: 0.501961, a: 1 },
+  webGreen: { r: 0, g: 0.501961, b: 0, a: 1 },
+  webMaroon: { r: 0.501961, g: 0, b: 0, a: 1 },
+  webPurple: { r: 0.501961, g: 0, b: 0.501961, a: 1 },
+  wheat: { r: 0.960784, g: 0.870588, b: 0.701961, a: 1 },
+  white: { r: 1, g: 1, b: 1, a: 1 },
+  whiteSmoke: { r: 0.960784, g: 0.960784, b: 0.960784, a: 1 },
+  yellow: { r: 1, g: 1, b: 0, a: 1 },
+  yellowGreen: { r: 0.603922, g: 0.803922, b: 0.196078, a: 1 }
+});
+// src/math/mod.ts
+var exports_mod4 = {};
+__export(exports_mod4, {
+  transformPoint: () => transformPoint,
+  rad2deg: () => rad2deg,
+  deg2rad: () => deg2rad,
+  createViewMatrix: () => createViewMatrix,
+  createProjectionMatrix: () => createProjectionMatrix,
+  createModelMatrix: () => createModelMatrix,
+  convertWorldToScreen: () => convertWorldToScreen,
+  convertScreenToWorld: () => convertScreenToWorld
+});
+// src/scene/mod.ts
+var exports_mod5 = {};
+__export(exports_mod5, {
+  TextNode: () => TextNode,
+  SceneNode: () => SceneNode,
+  QuadNode: () => QuadNode,
+  DEFAULT_FONT_SIZE: () => DEFAULT_FONT_SIZE,
+  Camera: () => Camera
+});
+// src/screen/mod.ts
+var exports_mod6 = {};
+// src/text/mod.ts
+var exports_mod7 = {};
+__export(exports_mod7, {
+  TextShader: () => WebGPUTextShader
+});
+// src/textures/mod.ts
+var exports_mod8 = {};
+__export(exports_mod8, {
+  Bundles: () => Bundles
+});
 export {
-  Utils,
+  exports_mod2 as Utils,
   Toodle,
-  Textures,
-  Text,
-  Screen,
-  Scene,
-  GfxMath,
+  exports_mod8 as Textures,
+  exports_mod7 as Text,
+  exports_mod6 as Screen,
+  exports_mod5 as Scene,
+  exports_mod4 as GfxMath,
   DEFAULT_LIMITS,
-  Colors,
-  Bundles2 as Bundles,
-  Backends,
-  AssetManager2 as AssetManager
+  exports_mod3 as Colors,
+  Bundles,
+  exports_mod as Backends,
+  AssetManager
 };
 
-//# debugId=F5D1111C12CFF04864756E2164756E21
+//# debugId=18E70D7AC0F5250F64756E2164756E21
 //# sourceMappingURL=mod.js.map