@bloopjs/toodle 0.0.102 → 0.0.104

package/dist/mod.js

@@ -3611,7 +3611,7 @@ class SceneNode {
   #transform;
   #matrix = mat3.identity();
   #renderComponent = null;
-  #idealSize = null;
+  #size = null;
   #positionProxy;
   #scaleProxy;
   #cache = null;
@@ -3623,7 +3623,7 @@ class SceneNode {
     this.#transform = {
       position: opts?.position ?? { x: 0, y: 0 },
       scale: { x: 1, y: 1 },
-      size: opts?.idealSize ?? { width: 1, height: 1 },
+      size: opts?.size ?? { width: 1, height: 1 },
       rotation: opts?.rotationRadians ?? 0
     };
     if (opts?.scale)
@@ -3635,7 +3635,7 @@ class SceneNode {
     this.#layer = opts?.layer ?? null;
     this.#isActive = opts?.isActive ?? true;
     this.label = opts?.label ?? undefined;
-    this.#idealSize = opts?.idealSize ?? null;
+    this.#size = opts?.size ?? null;
     this.#key = opts?.key ?? null;
     for (const kid of opts?.kids ?? []) {
       this.add(kid);
@@ -3745,19 +3745,19 @@ class SceneNode {
     }
     this.setDirty();
   }
-  set idealSize(value) {
-    this.#idealSize = value;
+  set size(value) {
+    this.#size = value;
     this.setDirty();
   }
   get size() {
-    return this.#idealSize;
+    return this.#size;
   }
   get aspectRatio() {
-    if (!this.#idealSize) {
+    if (!this.#size) {
       console.warn("Attempted to get aspect ratio of a node with no ideal size");
       return 1;
     }
-    return this.#idealSize.width / this.#idealSize.height;
+    return this.#size.width / this.#size.height;
   }
   get isActive() {
     if (!this.#cache?.isActive) {
@@ -3964,7 +3964,7 @@ class QuadNode extends SceneNode {
   #writeInstance;
   constructor(options, matrixPool) {
     assert(options.shader, "QuadNode requires a shader to be explicitly provided");
-    assert(options.idealSize, "QuadNode requires an ideal size 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,
@@ -17570,8 +17570,8 @@ class TextNode extends SceneNode {
       throw new Error(`Text: ${text} exceeds ${shader.maxCharCount} characters. Try using fewer characters or increase the limit in Toodle.attach.`);
     }
     const em2px = shader.font.lineHeight / (opts.fontSize ?? DEFAULT_FONT_SIZE);
-    if (!opts.shrinkToFit && !opts.idealSize) {
-      opts.idealSize = { width: width / em2px, height: height / em2px };
+    if (!opts.shrinkToFit && !opts.size) {
+      opts.size = { width: width / em2px, height: height / em2px };
     }
     super({
       ...opts,
@@ -18088,6 +18088,276 @@ class Pool {
     this.#index = 0;
   }
 }
+// src/textures/Bundles.ts
+class Bundles {
+  #bundles = new Map;
+  #textures = new Map;
+  #atlasSize;
+  constructor(options = {}) {
+    this.#atlasSize = options.atlasSize ?? 4096;
+  }
+  async registerAtlasBundle(bundleId, opts) {
+    const atlases = [];
+    for (const atlas of opts.atlases) {
+      const jsonUrl = atlas.json ?? new URL(atlas.png.toString().replace(".png", ".json"), atlas.png.origin);
+      const pngUrl = atlas.png ?? new URL(atlas.json.toString().replace(".json", ".png"), atlas.json.origin);
+      const atlasDef = await (await fetch(jsonUrl)).json();
+      const bitmap = !opts.rg8 ? await this.#getBitmapFromUrl(pngUrl) : await createImageBitmap(new ImageData(1, 1));
+      let rg8Bytes;
+      if (opts.rg8) {
+        const rg8url = new URL(pngUrl.toString().replace(".png", ".rg8.gz"), pngUrl.origin);
+        rg8Bytes = await this.#fetchRg8Bytes(rg8url);
+      }
+      const cpuTextureAtlas = {
+        texture: bitmap,
+        rg8Bytes,
+        textureRegions: new Map,
+        width: opts.rg8 ? this.#atlasSize : bitmap.width,
+        height: opts.rg8 ? this.#atlasSize : bitmap.height
+      };
+      for (const [assetId, frame] of Object.entries(atlasDef.frames)) {
+        const textureRegion = this.#parsePixiFrame(frame, cpuTextureAtlas.width, cpuTextureAtlas.height);
+        cpuTextureAtlas.textureRegions.set(assetId, textureRegion);
+      }
+      atlases.push(cpuTextureAtlas);
+    }
+    this.#bundles.set(bundleId, {
+      atlases,
+      atlasIndices: [],
+      isLoaded: false
+    });
+    return bundleId;
+  }
+  registerDynamicBundle(bundleId, atlases) {
+    this.#bundles.set(bundleId, {
+      atlases,
+      atlasIndices: [],
+      isLoaded: false
+    });
+  }
+  hasBundle(bundleId) {
+    return this.#bundles.has(bundleId);
+  }
+  isBundleLoaded(bundleId) {
+    const bundle = this.#bundles.get(bundleId);
+    return bundle?.isLoaded ?? false;
+  }
+  getBundleAtlasIndices(bundleId) {
+    const bundle = this.#bundles.get(bundleId);
+    return bundle?.atlasIndices ?? [];
+  }
+  setBundleLoaded(bundleId, atlasIndices) {
+    const bundle = this.#bundles.get(bundleId);
+    if (!bundle) {
+      throw new Error(`Bundle ${bundleId} not found`);
+    }
+    bundle.atlasIndices = atlasIndices;
+    bundle.isLoaded = true;
+  }
+  markBundleLoaded(bundleId, atlasIndices) {
+    const bundle = this.#bundles.get(bundleId);
+    if (!bundle) {
+      throw new Error(`Bundle ${bundleId} not found`);
+    }
+    if (bundle.isLoaded) {
+      console.warn(`Bundle ${bundleId} is already loaded.`);
+      return;
+    }
+    const indices = atlasIndices ?? bundle.atlases.map(() => this.#getNextAtlasIndex());
+    if (indices.length !== bundle.atlases.length) {
+      throw new Error(`Expected ${bundle.atlases.length} atlas indices, got ${indices.length}`);
+    }
+    for (let i3 = 0;i3 < bundle.atlases.length; i3++) {
+      const atlas = bundle.atlases[i3];
+      const atlasIndex = indices[i3];
+      bundle.atlasIndices.push(atlasIndex);
+      for (const [id, region] of atlas.textureRegions) {
+        const coords = { ...region, atlasIndex };
+        const existing = this.#textures.get(id);
+        if (existing) {
+          existing.push(coords);
+        } else {
+          this.#textures.set(id, [coords]);
+        }
+      }
+    }
+    bundle.isLoaded = true;
+  }
+  unloadBundle(bundleId) {
+    const bundle = this.#bundles.get(bundleId);
+    if (!bundle) {
+      throw new Error(`Bundle ${bundleId} not found`);
+    }
+    if (!bundle.isLoaded) {
+      console.warn(`Bundle ${bundleId} is not loaded.`);
+      return;
+    }
+    for (const atlasIndex of bundle.atlasIndices) {
+      for (const [id, coords] of this.#textures.entries()) {
+        const indexToRemove = coords.findIndex((coord) => coord.atlasIndex === atlasIndex);
+        if (indexToRemove !== -1) {
+          coords.splice(indexToRemove, 1);
+        }
+        if (!coords.length) {
+          this.#textures.delete(id);
+        }
+      }
+    }
+    bundle.isLoaded = false;
+    bundle.atlasIndices = [];
+  }
+  get textures() {
+    return this.#textures;
+  }
+  get textureIds() {
+    return Array.from(this.#textures.keys());
+  }
+  getAtlasCoords(id) {
+    const coords = this.#textures.get(id);
+    if (!coords) {
+      throw new Error(`Texture ${id} not found. Have you registered and loaded a bundle containing this texture?`);
+    }
+    return coords;
+  }
+  setAtlasCoords(id, coords) {
+    const oldCoords = this.#textures.get(id);
+    if (!oldCoords)
+      return;
+    const indexToModify = oldCoords.findIndex((coord) => coord.atlasIndex === coords.atlasIndex);
+    if (indexToModify === -1)
+      return;
+    oldCoords[indexToModify] = coords;
+    this.#textures.set(id, oldCoords);
+  }
+  addTextureEntry(id, coords) {
+    const existing = this.#textures.get(id);
+    if (existing) {
+      existing.push(coords);
+    } else {
+      this.#textures.set(id, [coords]);
+    }
+  }
+  removeTextureEntriesForAtlas(atlasIndex) {
+    for (const [id, coords] of this.#textures.entries()) {
+      const indexToRemove = coords.findIndex((coord) => coord.atlasIndex === atlasIndex);
+      if (indexToRemove !== -1) {
+        coords.splice(indexToRemove, 1);
+      }
+      if (!coords.length) {
+        this.#textures.delete(id);
+      }
+    }
+  }
+  getTextureRegion(id) {
+    const coords = this.#textures.get(id);
+    if (!coords || coords.length === 0)
+      return;
+    const { atlasIndex: _3, ...region } = coords[0];
+    return region;
+  }
+  getTextureOffset(id) {
+    const coords = this.#textures.get(id);
+    if (!coords) {
+      throw new Error(`Texture ${id} not found. Have you registered and loaded a bundle containing this texture?`);
+    }
+    return coords[0].cropOffset;
+  }
+  getSize(id) {
+    const coords = this.getAtlasCoords(id);
+    const uvScale = coords[0].uvScale;
+    return {
+      width: uvScale.width * this.#atlasSize,
+      height: uvScale.height * this.#atlasSize
+    };
+  }
+  getCroppedSize(id) {
+    const coords = this.getAtlasCoords(id);
+    const uvScaleCropped = coords[0].uvScaleCropped;
+    if (uvScaleCropped) {
+      return {
+        width: uvScaleCropped.width * this.#atlasSize,
+        height: uvScaleCropped.height * this.#atlasSize
+      };
+    }
+    return this.getSize(id);
+  }
+  hasTexture(id) {
+    return this.#textures.has(id);
+  }
+  getRegisteredBundleIds() {
+    return Array.from(this.#bundles.keys());
+  }
+  getLoadedBundleIds() {
+    return Array.from(this.#bundles.entries()).filter(([, bundle]) => bundle.isLoaded).map(([id]) => id);
+  }
+  getBundleAtlases(bundleId) {
+    const bundle = this.#bundles.get(bundleId);
+    if (!bundle) {
+      throw new Error(`Bundle ${bundleId} not found`);
+    }
+    return bundle.atlases;
+  }
+  get atlasSize() {
+    return this.#atlasSize;
+  }
+  #parsePixiFrame(frame, atlasWidth, atlasHeight) {
+    const leftCrop = frame.spriteSourceSize.x;
+    const rightCrop = frame.sourceSize.w - frame.spriteSourceSize.x - frame.spriteSourceSize.w;
+    const topCrop = frame.spriteSourceSize.y;
+    const bottomCrop = frame.sourceSize.h - frame.spriteSourceSize.y - frame.spriteSourceSize.h;
+    return {
+      cropOffset: {
+        x: leftCrop - rightCrop,
+        y: bottomCrop - topCrop
+      },
+      originalSize: {
+        width: frame.sourceSize.w,
+        height: frame.sourceSize.h
+      },
+      uvOffset: {
+        x: frame.frame.x / atlasWidth,
+        y: frame.frame.y / atlasHeight
+      },
+      uvScale: {
+        width: frame.sourceSize.w / atlasWidth,
+        height: frame.sourceSize.h / atlasHeight
+      },
+      uvScaleCropped: {
+        width: frame.frame.w / atlasWidth,
+        height: frame.frame.h / atlasHeight
+      }
+    };
+  }
+  async#getBitmapFromUrl(url) {
+    const response = await fetch(url);
+    const blob = await response.blob();
+    return createImageBitmap(blob);
+  }
+  async#fetchRg8Bytes(url) {
+    const response = await fetch(url);
+    const enc = (response.headers.get("content-encoding") || "").toLowerCase();
+    if (enc.includes("gzip") || enc.includes("br") || enc.includes("deflate")) {
+      return new Uint8Array(await response.arrayBuffer());
+    }
+    if (!response.body) {
+      throw new Error("Response body of rg8 file is null");
+    }
+    const ds = new DecompressionStream("gzip");
+    const ab = await new Response(response.body.pipeThrough(ds)).arrayBuffer();
+    return new Uint8Array(ab);
+  }
+  #getNextAtlasIndex() {
+    let maxIndex = -1;
+    for (const bundle of this.#bundles.values()) {
+      for (const idx of bundle.atlasIndices) {
+        if (idx > maxIndex)
+          maxIndex = idx;
+      }
+    }
+    return maxIndex + 1;
+  }
+}
+
 // src/textures/pixel-scraping.wgsl.ts
 var pixel_scraping_wgsl_default = `
 // ==============================
@@ -18650,18 +18920,19 @@ async function textureToBitmap(device, texture, width, height) {
 // src/textures/AssetManager.ts
 class AssetManager {
   textureAtlas;
+  bundles;
   #device;
   #presentationFormat;
-  #bundles = new Map;
-  #textures = new Map;
   #fonts = new Map;
   #cropComputeShader;
   #limits;
   #availableIndices = new Set;
-  constructor(device, presentationFormat, limits, format = "rgba8unorm") {
+  constructor(device, presentationFormat, limits, options = {}) {
     this.#device = device;
     this.#presentationFormat = presentationFormat;
     this.#limits = limits;
+    this.bundles = options.bundles ?? new Bundles({ atlasSize: limits.textureSize });
+    const format = options.format ?? "rgba8unorm";
     this.textureAtlas = device.createTexture({
       label: "Asset Manager Atlas Texture",
       size: [
@@ -18694,16 +18965,16 @@ class AssetManager {
     return this.getSize(id);
   }
   isCropped(id) {
-    if (!this.#textures.has(id)) {
+    if (!this.bundles.hasTexture(id)) {
       throw new Error(`Texture ${id} not found in atlas. Have you called toodle.loadTextures with this id or toodle.loadBundle with a bundle that contains it?`);
     }
-    return this.#textures.get(id)[0].uvScaleCropped === undefined;
+    return this.bundles.getAtlasCoords(id)[0].uvScaleCropped === undefined;
   }
   get textures() {
-    return this.#textures;
+    return this.bundles.textures;
   }
   get textureIds() {
-    return Array.from(this.#textures.keys());
+    return this.bundles.textureIds;
   }
   async loadTextures(opts) {
     await Promise.all(Object.entries(opts).map(([id, url]) => this.loadTexture(id, url, opts)));
@@ -18730,7 +19001,7 @@ class AssetManager {
       },
       atlasIndex
     };
-    this.#textures.set(id, [coords]);
+    this.bundles.addTextureEntry(id, coords);
     this.#availableIndices.delete(atlasIndex);
     textureWrapper.texture.destroy();
     return { id, coords };
@@ -18741,38 +19012,39 @@ class AssetManager {
     } else {
       await this.#registerBundleFromAtlases(bundleId, opts);
     }
-    if (opts.autoLoad) {
+    const autoLoad = opts.autoLoad ?? true;
+    if (autoLoad) {
       await this.loadBundle(bundleId);
     }
     return bundleId;
   }
   async loadBundle(bundleId) {
-    const bundle = this.#bundles.get(bundleId);
-    if (!bundle) {
+    if (!this.bundles.hasBundle(bundleId)) {
       throw new Error(`Bundle ${bundleId} not found`);
     }
-    if (bundle.isLoaded) {
+    if (this.bundles.isBundleLoaded(bundleId)) {
       console.warn(`Bundle ${bundleId} is already loaded.`);
       return;
     }
-    for (const atlas of bundle.atlases) {
+    const atlases = this.bundles.getBundleAtlases(bundleId);
+    const atlasIndices = [];
+    for (const atlas of atlases) {
       const atlasIndex = await this.extra.loadAtlas(atlas);
-      bundle.atlasIndices.push(atlasIndex);
+      atlasIndices.push(atlasIndex);
     }
-    bundle.isLoaded = true;
+    this.bundles.setBundleLoaded(bundleId, atlasIndices);
   }
   async unloadBundle(bundleId) {
-    const bundle = this.#bundles.get(bundleId);
-    if (!bundle) {
+    if (!this.bundles.hasBundle(bundleId)) {
       throw new Error(`Bundle ${bundleId} not found`);
     }
-    if (!bundle.isLoaded) {
+    if (!this.bundles.isBundleLoaded(bundleId)) {
       console.warn(`Bundle ${bundleId} is not loaded.`);
       return;
     }
-    await Promise.all(bundle.atlasIndices.map((atlasIndex) => this.extra.unloadAtlas(atlasIndex)));
-    bundle.isLoaded = false;
-    bundle.atlasIndices = [];
+    const atlasIndices = this.bundles.getBundleAtlasIndices(bundleId);
+    await Promise.all(atlasIndices.map((atlasIndex) => this.extra.unloadAtlas(atlasIndex)));
+    this.bundles.unloadBundle(bundleId);
   }
   async loadFont(id, url, fallbackCharacter = "_") {
     const font = await MsdfFont.create(id, url);
@@ -18791,22 +19063,14 @@ class AssetManager {
   validateTextureReference(node) {
     if (!(node instanceof QuadNode) || node.isPrimitive || node instanceof JumboQuadNode)
       return;
-    const coords = this.#textures.get(node.textureId);
-    if (!coords || !coords.length) {
+    if (!this.bundles.hasTexture(node.textureId)) {
       throw new Error(`Node ${node.id} references an invalid texture ${node.textureId}.`);
     }
+    const coords = this.bundles.getAtlasCoords(node.textureId);
     if (coords.find((coord) => coord.atlasIndex === node.atlasCoords.atlasIndex))
       return;
     node.extra.setAtlasCoords(coords[0]);
   }
-  #addTexture(id, textureRegion, atlasIndex) {
-    this.#textures.set(id, [
-      {
-        ...textureRegion,
-        atlasIndex
-      }
-    ]);
-  }
   #createTextureFromImageBitmap(bitmap, name) {
     const texture = this.#device.createTexture({
       label: `${name} Intermediary Texture`,
@@ -18835,106 +19099,26 @@ class AssetManager {
       images.set(id, textureWrapper);
     }));
     const atlases = await packBitmapsToAtlas(images, this.#limits.textureSize, this.#device);
-    this.#bundles.set(bundleId, {
-      atlases,
-      atlasIndices: [],
-      isLoaded: false
-    });
+    this.bundles.registerDynamicBundle(bundleId, atlases);
   }
   async#registerBundleFromAtlases(bundleId, opts) {
-    const atlases = [];
-    for (const atlas of opts.atlases) {
-      const jsonUrl = atlas.json ?? new URL(atlas.png.toString().replace(".png", ".json"), atlas.png.origin);
-      const pngUrl = atlas.png ?? new URL(atlas.json.toString().replace(".json", ".png"), atlas.json.origin);
-      const atlasDef = await (await fetch(jsonUrl)).json();
-      const bitmap = !opts.rg8 ? await getBitmapFromUrl(pngUrl) : await createImageBitmap(new ImageData(1, 1));
-      let rg8Bytes;
-      if (opts.rg8) {
-        const rg8url = new URL(pngUrl.toString().replace(".png", ".rg8.gz"), pngUrl.origin);
-        const rgBytes = await fetch(rg8url).then(async (r3) => {
-          const enc = (r3.headers.get("content-encoding") || "").toLowerCase();
-          if (enc.includes("gzip") || enc.includes("br") || enc.includes("deflate")) {
-            return new Uint8Array(await r3.arrayBuffer());
-          }
-          assert(r3.body, "Response body of rg8 file is null");
-          const ds = new DecompressionStream("gzip");
-          const ab = await new Response(r3.body.pipeThrough(ds)).arrayBuffer();
-          return new Uint8Array(ab);
-        });
-        rg8Bytes = rgBytes;
-      }
-      const cpuTextureAtlas = {
-        texture: bitmap,
-        rg8Bytes,
-        textureRegions: new Map,
-        width: opts.rg8 ? this.#limits.textureSize : bitmap.width,
-        height: opts.rg8 ? this.#limits.textureSize : bitmap.height
-      };
-      for (const [assetId, frame] of Object.entries(atlasDef.frames)) {
-        const leftCrop = frame.spriteSourceSize.x;
-        const rightCrop = frame.sourceSize.w - frame.spriteSourceSize.x - frame.spriteSourceSize.w;
-        const topCrop = frame.spriteSourceSize.y;
-        const bottomCrop = frame.sourceSize.h - frame.spriteSourceSize.y - frame.spriteSourceSize.h;
-        cpuTextureAtlas.textureRegions.set(assetId, {
-          cropOffset: {
-            x: leftCrop - rightCrop,
-            y: bottomCrop - topCrop
-          },
-          originalSize: {
-            width: frame.sourceSize.w,
-            height: frame.sourceSize.h
-          },
-          uvOffset: {
-            x: frame.frame.x / cpuTextureAtlas.width,
-            y: frame.frame.y / cpuTextureAtlas.height
-          },
-          uvScale: {
-            width: frame.sourceSize.w / cpuTextureAtlas.width,
-            height: frame.sourceSize.h / cpuTextureAtlas.height
-          },
-          uvScaleCropped: {
-            width: frame.frame.w / cpuTextureAtlas.width,
-            height: frame.frame.h / cpuTextureAtlas.height
-          }
-        });
-      }
-      atlases.push(cpuTextureAtlas);
-    }
-    this.#bundles.set(bundleId, {
-      atlases,
-      atlasIndices: [],
-      isLoaded: false
-    });
+    await this.bundles.registerAtlasBundle(bundleId, opts);
   }
   extra = {
     getRegisteredBundleIds: () => {
-      return this.#bundles ? Array.from(this.#bundles.keys()) : [];
+      return this.bundles.getRegisteredBundleIds();
     },
     getLoadedBundleIds: () => {
-      return Array.from(this.#bundles.entries()).filter(([, value]) => value.isLoaded).map(([key]) => key);
+      return this.bundles.getLoadedBundleIds();
     },
     setAtlasCoords: (id, coords) => {
-      const oldCoords = this.#textures.get(id);
-      if (!oldCoords)
-        return;
-      const indexToModify = oldCoords.findIndex((coord) => coord.atlasIndex === coords.atlasIndex);
-      if (indexToModify === -1)
-        return;
-      oldCoords[indexToModify] = coords;
-      this.#textures.set(id, oldCoords);
+      this.bundles.setAtlasCoords(id, coords);
     },
     getAtlasCoords: (id) => {
-      if (!this.#textures.has(id)) {
-        throw new Error(`Texture ${id} not found in atlas. Have you called toodle.loadBundle with a bundle that contains this id (or toodle.loadTextures with this id as a key)?`);
-      }
-      return this.#textures.get(id) ?? [];
+      return this.bundles.getAtlasCoords(id);
     },
     getTextureOffset: (id) => {
-      const texture = this.#textures.get(id);
-      if (!texture) {
-        throw new Error(`Texture ${id} not found in atlas. Have you called toodle.loadTextures with this id or toodle.loadBundle with a bundle that contains it?`);
-      }
-      return texture[0].cropOffset;
+      return this.bundles.getTextureOffset(id);
     },
     getAtlasUsage: () => {
       return {
@@ -18971,25 +19155,13 @@ class AssetManager {
         }, [atlas.texture.width, atlas.texture.height, 1]);
       }
       for (const [id, region] of atlas.textureRegions) {
-        const existing = this.#textures.get(id);
-        if (existing) {
-          existing.push({ ...region, atlasIndex });
-        } else
-          this.#addTexture(id, region, atlasIndex);
+        this.bundles.addTextureEntry(id, { ...region, atlasIndex });
       }
       return atlasIndex;
     },
     unloadAtlas: async (atlasIndex) => {
       this.#availableIndices.add(atlasIndex);
-      for (const [id, coords] of this.#textures.entries()) {
-        const indexToModify = coords.findIndex((coord) => coord.atlasIndex === atlasIndex);
-        if (indexToModify !== -1) {
-          coords.splice(indexToModify, 1);
-        }
-        if (!coords.length) {
-          this.#textures.delete(id);
-        }
-      }
+      this.bundles.removeTextureEntriesForAtlas(atlasIndex);
     }
   };
   #wrapBitmapToTexture(bitmap, name = "Unknown") {
@@ -19230,7 +19402,7 @@ class Toodle {
   }
   Quad(assetId, options = {}) {
     const assetManager = options.assetManager ?? this.assets;
-    options.idealSize ??= assetManager.getSize(assetId);
+    options.size ??= assetManager.getSize(assetId);
     options.shader ??= this.#defaultQuadShader();
     options.atlasCoords ??= assetManager.extra.getAtlasCoords(assetId)[0];
     options.textureId ??= assetId;
@@ -19279,7 +19451,7 @@ class Toodle {
       width: originalSize.width,
       height: originalSize.height
     };
-    options.idealSize ??= {
+    options.size ??= {
       width: originalSize.width,
       height: originalSize.height
     };
@@ -19296,7 +19468,7 @@ class Toodle {
   }
   shapes = {
     Rect: (options = {}) => {
-      options.idealSize ??= { width: 1, height: 1 };
+      options.size ??= { width: 1, height: 1 };
       options.shader ??= this.#defaultQuadShader();
       options.atlasCoords ??= {
         atlasIndex: 1000,
@@ -19318,18 +19490,23 @@ class Toodle {
       }
       return quad;
     },
-    Circle: (options = {}) => {
-      options.idealSize ??= { width: 1, height: 1 };
-      options.shader ??= this.#defaultQuadShader();
-      options.atlasCoords ??= {
-        atlasIndex: 1001,
-        uvOffset: { x: 0, y: 0 },
-        uvScale: { width: 0, height: 0 },
-        cropOffset: { x: 0, y: 0 },
-        originalSize: { width: 1, height: 1 }
+    Circle: (options = { radius: 50 }) => {
+      const radius = options.radius ?? 50;
+      const diameter = radius * 2;
+      const quadOptions = {
+        ...options,
+        size: { width: diameter, height: diameter },
+        shader: options.shader ?? this.#defaultQuadShader(),
+        atlasCoords: options.atlasCoords ?? {
+          atlasIndex: 1001,
+          uvOffset: { x: 0, y: 0 },
+          uvScale: { width: 0, height: 0 },
+          cropOffset: { x: 0, y: 0 },
+          originalSize: { width: 1, height: 1 }
+        },
+        assetManager: this.assets
       };
-      options.assetManager = this.assets;
-      const quad = new QuadNode(options, this.#matrixPool);
+      const quad = new QuadNode(quadOptions, this.#matrixPool);
       if (options?.position) {
         quad.position = options.position;
       }
@@ -19358,7 +19535,7 @@ class Toodle {
           originalSize: { width: 1, height: 1 }
         },
         shader: options.shader ?? this.#defaultQuadShader(),
-        idealSize: { width: 1, height: 1 },
+        size: { width: 1, height: 1 },
         layer: options.layer,
         key: options.key,
         rotationRadians: angle,
@@ -19647,6 +19824,9 @@ __export(exports_mod7, {
 });
 // src/textures/mod.ts
 var exports_mod8 = {};
+__export(exports_mod8, {
+  Bundles: () => Bundles
+});
 export {
   exports_mod as Utils,
   Toodle,
@@ -19658,8 +19838,9 @@ export {
   exports_mod3 as GfxMath,
   DEFAULT_LIMITS,
   exports_mod2 as Colors,
+  Bundles,
   AssetManager
 };
 
-//# debugId=E4D2A9C0603A997464756E2164756E21
+//# debugId=70898D8E4A9F02C164756E2164756E21
 //# sourceMappingURL=mod.js.map