lighteningcards 2.1.0 → 2.1.2

package/dist/index.cjs.js

@@ -2959,8 +2959,8 @@ const _TextureStyle = class _TextureStyle extends EventEmitter {
     return this._sharedResourceId || this._generateResourceId();
   }
   update() {
-    this.emit("change", this);
     this._sharedResourceId = null;
+    this.emit("change", this);
   }
   _generateResourceId() {
     const bigKey = `${this.addressModeU}-${this.addressModeV}-${this.addressModeW}-${this.magFilter}-${this.minFilter}-${this.mipmapFilter}-${this.lodMinClamp}-${this.lodMaxClamp}-${this.compare}-${this._maxAnisotropy}`;
@@ -2989,6 +2989,10 @@ const _TextureSource = class _TextureSource extends EventEmitter {
   constructor(options = {}) {
     super();
     this.options = options;
+    /** @internal */
+    this._gpuData = /* @__PURE__ */ Object.create(null);
+    /** @internal */
+    this._gcLastUsed = -1;
     /** unique id for this Texture source */
     this.uid = uid$1("textureSource");
     /**
@@ -3184,8 +3188,8 @@ const _TextureSource = class _TextureSource extends EventEmitter {
   /** Destroys this texture source */
   destroy() {
     this.destroyed = true;
+    this.unload();
     this.emit("destroy", this);
-    this.emit("change", this);
     if (this._style) {
       this._style.destroy();
       this._style = null;
@@ -3202,6 +3206,10 @@ const _TextureSource = class _TextureSource extends EventEmitter {
     this._resourceId = uid$1("resource");
     this.emit("change", this);
     this.emit("unload", this);
+    for (const key in this._gpuData) {
+      this._gpuData[key]?.destroy?.();
+    }
+    this._gpuData = /* @__PURE__ */ Object.create(null);
   }
   /** the width of the resource. This is the REAL pure number, not accounting resolution   */
   get resourceWidth() {
@@ -3568,6 +3576,7 @@ class Texture extends EventEmitter {
    */
   destroy(destroySource = false) {
     if (this._source) {
+      this._source.off("resize", this.update, this);
       if (destroySource) {
         this._source.destroy();
         this._source = null;
@@ -5403,6 +5412,7 @@ class Pool {
       item = this._pool[--this._index];
     } else {
       item = new this._classType();
+      this._count++;
     }
     item.init?.(data);
     return item;
@@ -6860,6 +6870,13 @@ class Container extends EventEmitter {
     this.measurable = true;
     /** @private */
     this.isSimple = true;
+    /**
+     * The RenderLayer this container belongs to, if any.
+     * If it belongs to a RenderLayer, it will be rendered from the RenderLayer's position in the scene.
+     * @readonly
+     * @advanced
+     */
+    this.parentRenderLayer = null;
     // / /////////////Transform related props//////////////
     // used by the transform system to check if a container needs to be updated that frame
     // if the tick matches the current transform system tick, it is not updated again
@@ -7935,7 +7952,6 @@ extensions.mixin(
 );
 
 class ViewContainer extends Container {
-  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
   constructor(options) {
     super(options);
     /** @internal */
@@ -7948,8 +7964,13 @@ class ViewContainer extends Container {
     this._lastUsed = -1;
     /** @internal */
     this._gpuData = /* @__PURE__ */ Object.create(null);
+    /** If set to true, the resource will be garbage collected automatically when it is not used. */
+    this.autoGarbageCollect = true;
+    /** @internal */
+    this._gcLastUsed = -1;
     this._bounds = new Bounds(0, 1, 0, 0);
     this._boundsDirty = true;
+    this.autoGarbageCollect = options.autoGarbageCollect ?? true;
   }
   /**
    * The local bounds of the view in its own coordinate space.
@@ -8018,13 +8039,19 @@ class ViewContainer extends Container {
       renderGroup.onChildViewUpdate(this);
     }
   }
+  /** Unloads the GPU data from the view. */
+  unload() {
+    this.emit("unload", this);
+    for (const key in this._gpuData) {
+      this._gpuData[key]?.destroy();
+    }
+    this._gpuData = /* @__PURE__ */ Object.create(null);
+    this.onViewUpdate();
+  }
   destroy(options) {
+    this.unload();
     super.destroy(options);
     this._bounds = null;
-    for (const key in this._gpuData) {
-      this._gpuData[key].destroy?.();
-    }
-    this._gpuData = null;
   }
   /**
    * Collects renderables for the view container.
@@ -8216,7 +8243,6 @@ class Sprite extends ViewContainer {
     this._visualBounds = null;
     this._bounds = null;
     this._anchor = null;
-    this._gpuData = null;
   }
   /**
    * The anchor sets the origin point of the sprite. The default value is taken from the {@link Texture}
@@ -8429,6 +8455,8 @@ class AlphaMask {
     this.mask.measurable = false;
   }
   reset() {
+    if (this.mask === null)
+      return;
     this.mask.measurable = true;
     this.mask = null;
   }
@@ -8486,6 +8514,8 @@ class StencilMask {
     this.mask.measurable = false;
   }
   reset() {
+    if (this.mask === null)
+      return;
     this.mask.measurable = true;
     this.mask.includeInBuild = true;
     this.mask = null;
@@ -8742,7 +8772,6 @@ const _Ticker = class _Ticker {
      *
      * This is NOT in milliseconds - it's a scalar multiplier for frame-independent animations.
      * For actual milliseconds, use {@link Ticker#deltaMS}.
-     * @member {number}
      * @example
      * ```ts
      * // Frame-independent animation using deltaTime scalar
@@ -8758,7 +8787,6 @@ const _Ticker = class _Ticker {
      * Similar to performance.now() timestamp format.
      *
      * Used internally for calculating time deltas between frames.
-     * @member {number}
      * @example
      * ```ts
      * ticker.add((ticker) => {
@@ -10776,7 +10804,12 @@ class Resolver {
     const assetArray = convertToList(assets);
     assetArray.forEach((asset) => {
       const { src } = asset;
-      let { data, format, loadParser: userDefinedLoadParser, parser: userDefinedParser } = asset;
+      let {
+        data,
+        format,
+        loadParser: userDefinedLoadParser,
+        parser: userDefinedParser
+      } = asset;
       const srcsToUse = convertToList(src).map((src2) => {
         if (typeof src2 === "string") {
           return createStringVariations(src2);
@@ -10786,18 +10819,18 @@ class Resolver {
       const aliasesToUse = this.getAlias(asset);
       Array.isArray(aliasesToUse) ? aliasesToUse.forEach(keyCheck) : keyCheck(aliasesToUse);
       const resolvedAssets = [];
+      const parseUrl = (url) => {
+        const parser = this._parsers.find((p) => p.test(url));
+        return {
+          ...parser?.parse(url),
+          src: url
+        };
+      };
       srcsToUse.forEach((srcs) => {
         srcs.forEach((src2) => {
           let formattedAsset = {};
           if (typeof src2 !== "object") {
-            formattedAsset.src = src2;
-            for (let i = 0; i < this._parsers.length; i++) {
-              const parser = this._parsers[i];
-              if (parser.test(src2)) {
-                formattedAsset = parser.parse(src2);
-                break;
-              }
-            }
+            formattedAsset = parseUrl(src2);
           } else {
             data = src2.data ?? data;
             format = src2.format ?? format;
@@ -10806,7 +10839,7 @@ class Resolver {
               userDefinedParser = src2.parser ?? userDefinedParser;
             }
             formattedAsset = {
-              ...formattedAsset,
+              ...parseUrl(src2.src),
               ...src2
             };
           }
@@ -10818,7 +10851,8 @@ class Resolver {
             data,
             format,
             loadParser: userDefinedLoadParser,
-            parser: userDefinedParser
+            parser: userDefinedParser,
+            progressSize: asset.progressSize
           });
           resolvedAssets.push(formattedAsset);
         });
@@ -10978,7 +11012,7 @@ class Resolver {
     return `${url}${paramConnector}${this._defaultSearchParams}`;
   }
   _buildResolvedAsset(formattedAsset, data) {
-    const { aliases, data: assetData, loadParser, parser, format } = data;
+    const { aliases, data: assetData, loadParser, parser, format, progressSize } = data;
     if (this._basePath || this._rootPath) {
       formattedAsset.src = path.toAbsolute(formattedAsset.src, this._basePath, this._rootPath);
     }
@@ -10988,6 +11022,9 @@ class Resolver {
     formattedAsset.loadParser = loadParser ?? formattedAsset.loadParser;
     formattedAsset.parser = parser ?? formattedAsset.parser;
     formattedAsset.format = format ?? formattedAsset.format ?? getUrlExtension(formattedAsset.src);
+    if (progressSize !== void 0) {
+      formattedAsset.progressSize = progressSize;
+    }
     return formattedAsset;
   }
 }
@@ -11764,7 +11801,7 @@ const _AccessibilitySystem = class _AccessibilitySystem {
     /** This is the dom element that will sit over the PixiJS element. This is where the div overlays will go. */
     this._div = null;
     /** A simple pool for storing divs. */
-    this._pool = [];
+    this._pools = {};
     /** This is a tick used to check if an object is no longer being rendered. */
     this._renderId = 0;
     /** The array of currently active accessible items. */
@@ -11773,6 +11810,11 @@ const _AccessibilitySystem = class _AccessibilitySystem {
     this._androidUpdateCount = 0;
     /**  The frequency to update the div elements. */
     this._androidUpdateFrequency = 500;
+    // eslint-disable-next-line @typescript-eslint/prefer-readonly
+    this._isRunningTests = false;
+    /** Bound function references for proper event listener removal */
+    this._boundOnKeyDown = this._onKeyDown.bind(this);
+    this._boundOnMouseMove = this._onMouseMove.bind(this);
     this._hookDiv = null;
     if (_mobileInfo.tablet || _mobileInfo.phone) {
       this._createTouchHook();
@@ -11796,12 +11838,19 @@ const _AccessibilitySystem = class _AccessibilitySystem {
     return this._isMobileAccessibility;
   }
   /**
-   * The DOM element that will sit over the PixiJS element. This is where the div overlays will go.
+   * Button element for handling touch hooks.
    * @readonly
    */
   get hookDiv() {
     return this._hookDiv;
   }
+  /**
+   * The DOM element that will sit over the PixiJS element. This is where the div overlays will go.
+   * @readonly
+   */
+  get div() {
+    return this._div;
+  }
   /**
    * Creates the touch hooks.
    * @private
@@ -11858,12 +11907,10 @@ const _AccessibilitySystem = class _AccessibilitySystem {
       });
     }
     if (this._activateOnTab) {
-      this._onKeyDown = this._onKeyDown.bind(this);
-      globalThis.addEventListener("keydown", this._onKeyDown, false);
+      globalThis.addEventListener("keydown", this._boundOnKeyDown, false);
     }
     if (this._deactivateOnMouseMove) {
-      this._onMouseMove = this._onMouseMove.bind(this);
-      globalThis.document.addEventListener("mousemove", this._onMouseMove, true);
+      globalThis.document.addEventListener("mousemove", this._boundOnMouseMove, true);
     }
     const canvas = this._renderer.view.canvas;
     if (!canvas.parentNode) {
@@ -11896,27 +11943,31 @@ const _AccessibilitySystem = class _AccessibilitySystem {
       return;
     }
     this._isActive = false;
-    globalThis.document.removeEventListener("mousemove", this._onMouseMove, true);
+    globalThis.document.removeEventListener("mousemove", this._boundOnMouseMove, true);
     if (this._activateOnTab) {
-      globalThis.addEventListener("keydown", this._onKeyDown, false);
+      globalThis.addEventListener("keydown", this._boundOnKeyDown, false);
     }
     this._renderer.runners.postrender.remove(this);
     for (const child of this._children) {
-      if (child._accessibleDiv && child._accessibleDiv.parentNode) {
+      if (child._accessibleDiv?.parentNode) {
         child._accessibleDiv.parentNode.removeChild(child._accessibleDiv);
         child._accessibleDiv = null;
       }
       child._accessibleActive = false;
     }
-    this._pool.forEach((div) => {
-      if (div.parentNode) {
-        div.parentNode.removeChild(div);
-      }
-    });
-    if (this._div && this._div.parentNode) {
+    for (const accessibleType in this._pools) {
+      const pool = this._pools[accessibleType];
+      pool.forEach((div) => {
+        if (div.parentNode) {
+          div.parentNode.removeChild(div);
+        }
+      });
+      delete this._pools[accessibleType];
+    }
+    if (this._div?.parentNode) {
       this._div.parentNode.removeChild(this._div);
     }
-    this._pool = [];
+    this._pools = {};
     this._children = [];
   }
   /**
@@ -11958,9 +12009,6 @@ const _AccessibilitySystem = class _AccessibilitySystem {
     this._deactivateOnMouseMove = mergedOptions.accessibilityOptions.deactivateOnMouseMove;
     if (mergedOptions.accessibilityOptions.enabledByDefault) {
       this._activate();
-    } else if (this._activateOnTab) {
-      this._onKeyDown = this._onKeyDown.bind(this);
-      globalThis.addEventListener("keydown", this._onKeyDown, false);
     }
     this._renderer.runners.postrender.remove(this);
   }
@@ -11978,7 +12026,7 @@ const _AccessibilitySystem = class _AccessibilitySystem {
       return;
     }
     this._androidUpdateCount = now + this._androidUpdateFrequency;
-    if (!this._renderer.renderingToScreen || !this._renderer.view.canvas) {
+    if ((!this._renderer.renderingToScreen || !this._renderer.view.canvas) && !this._isRunningTests) {
       return;
     }
     const activeIds = /* @__PURE__ */ new Set();
@@ -11995,7 +12043,8 @@ const _AccessibilitySystem = class _AccessibilitySystem {
       if (!activeIds.has(i)) {
         if (child._accessibleDiv && child._accessibleDiv.parentNode) {
           child._accessibleDiv.parentNode.removeChild(child._accessibleDiv);
-          this._pool.push(child._accessibleDiv);
+          const pool = this._getPool(child.accessibleType);
+          pool.push(child._accessibleDiv);
           child._accessibleDiv = null;
         }
         child._accessibleActive = false;
@@ -12064,8 +12113,14 @@ const _AccessibilitySystem = class _AccessibilitySystem {
    * @param {Container} container - The child to make accessible.
    */
   _addChild(container) {
-    let div = this._pool.pop();
-    if (!div) {
+    const pool = this._getPool(container.accessibleType);
+    let div = pool.pop();
+    if (div) {
+      div.innerHTML = "";
+      div.removeAttribute("title");
+      div.removeAttribute("aria-label");
+      div.tabIndex = 0;
+    } else {
       if (container.accessibleType === "button") {
         div = document.createElement("button");
       } else {
@@ -12208,12 +12263,14 @@ const _AccessibilitySystem = class _AccessibilitySystem {
     this._canvasObserver?.destroy();
     this._canvasObserver = null;
     this._div = null;
-    this._pool = null;
+    this._pools = null;
     this._children = null;
     this._renderer = null;
-    if (this._activateOnTab) {
-      globalThis.removeEventListener("keydown", this._onKeyDown);
-    }
+    this._hookDiv = null;
+    globalThis.removeEventListener("keydown", this._boundOnKeyDown);
+    this._boundOnKeyDown = null;
+    globalThis.document.removeEventListener("mousemove", this._boundOnMouseMove, true);
+    this._boundOnMouseMove = null;
   }
   /**
    * Enables or disables the accessibility system.
@@ -12231,6 +12288,12 @@ const _AccessibilitySystem = class _AccessibilitySystem {
       this._deactivate();
     }
   }
+  _getPool(accessibleType) {
+    if (!this._pools[accessibleType]) {
+      this._pools[accessibleType] = [];
+    }
+    return this._pools[accessibleType];
+  }
 };
 /** @ignore */
 _AccessibilitySystem.extension = {
@@ -12957,12 +13020,14 @@ class BindGroup {
   /**
    * Used internally to 'touch' each resource, to ensure that the GC
    * knows that all resources in this bind group are still being used.
+   * @param now - The current time in milliseconds.
    * @param tick - The current tick.
    * @internal
    */
-  _touch(tick) {
+  _touch(now, tick) {
     const resources = this.resources;
     for (const i in resources) {
+      resources[i]._gcLastUsed = now;
       resources[i]._touched = tick;
     }
   }
@@ -13009,6 +13074,8 @@ class Shader extends EventEmitter {
      */
     this._uniformBindMap = /* @__PURE__ */ Object.create(null);
     this._ownedBindGroups = [];
+    /** @internal */
+    this._destroyed = false;
     let {
       gpuProgram,
       glProgram,
@@ -13136,6 +13203,9 @@ class Shader extends EventEmitter {
    * Make sure its not being used by other shaders!
    */
   destroy(destroyPrograms = false) {
+    if (this._destroyed)
+      return;
+    this._destroyed = true;
     this.emit("destroy", this);
     if (destroyPrograms) {
       this.gpuProgram?.destroy();
@@ -13350,6 +13420,9 @@ const _Filter = class _Filter extends Shader {
     this.blendRequired = options.blendRequired;
     this.clipToViewport = options.clipToViewport;
     this.addResource("uTexture", 0, 1);
+    if (options.blendRequired) {
+      this.addResource("uBackTexture", 0, 3);
+    }
   }
   /**
    * Applies the filter
@@ -14191,6 +14264,8 @@ const _AbstractRenderer = class _AbstractRenderer extends EventEmitter {
    */
   constructor(config) {
     super();
+    /** The current tick of the renderer. */
+    this.tick = 0;
     /** @internal */
     this.uid = uid$1("renderer");
     /** @internal */
@@ -14228,6 +14303,7 @@ const _AbstractRenderer = class _AbstractRenderer extends EventEmitter {
     this._initOptions = options;
   }
   render(args, deprecated) {
+    this.tick++;
     let options = args;
     if (options instanceof Container) {
       options = { container: options };
@@ -14403,12 +14479,12 @@ const _AbstractRenderer = class _AbstractRenderer extends EventEmitter {
   destroy(options = false) {
     this.runners.destroy.items.reverse();
     this.runners.destroy.emit(options);
-    Object.values(this.runners).forEach((runner) => {
-      runner.destroy();
-    });
     if (options === true || typeof options === "object" && options.releaseGlobalResources) {
       GlobalResourceRegistry.release();
     }
+    Object.values(this.runners).forEach((runner) => {
+      runner.destroy();
+    });
     this._systemsHash = null;
     this.renderPipes = null;
   }
@@ -14597,7 +14673,7 @@ async function autoDetectRenderer(options) {
   return renderer;
 }
 
-const VERSION = "8.13.2";
+const VERSION = "8.15.0";
 
 class ApplicationInitHook {
   static init() {
@@ -14671,6 +14747,7 @@ const _Application = class _Application {
    */
   async init(options) {
     options = { ...options };
+    this.stage || (this.stage = new Container());
     this.renderer = await autoDetectRenderer(options);
     _Application._plugins.forEach((plugin) => {
       plugin.init.call(this, options);
@@ -14836,6 +14913,7 @@ class ResizePlugin {
       this,
       "resizeTo",
       {
+        configurable: true,
         set(dom) {
           globalThis.removeEventListener("resize", this.queueResize);
           this._resizeTo = dom;
@@ -14915,6 +14993,7 @@ class TickerPlugin {
       this,
       "ticker",
       {
+        configurable: true,
         set(ticker) {
           if (this._ticker) {
             this._ticker.remove(this.render, this);
@@ -17840,13 +17919,15 @@ class ViewableBuffer {
   /** Destroys all buffer references. Do not use after calling this. */
   destroy() {
     this.rawBinaryData = null;
+    this.uint32View = null;
+    this.float32View = null;
+    this.uint16View = null;
     this._int8View = null;
     this._uint8View = null;
     this._int16View = null;
-    this.uint16View = null;
     this._int32View = null;
-    this.uint32View = null;
-    this.float32View = null;
+    this._float64Array = null;
+    this._bigUint64Array = null;
   }
   /**
    * Returns the size of the given type in bytes.
@@ -18309,13 +18390,24 @@ const _Batcher = class _Batcher {
       indexBuffer[index++] = indicesOffset + indices[i + indexOffset] - attributeOffset;
     }
   }
-  destroy() {
+  /**
+   * Destroys the batch and its resources.
+   * @param options - destruction options
+   * @param options.shader - whether to destroy the associated shader
+   */
+  destroy(options = {}) {
     if (this.batches === null)
       return;
-    for (let i = 0; i < this.batches.length; i++) {
+    for (let i = 0; i < this.batchIndex; i++) {
       returnBatchToPool(this.batches[i]);
     }
     this.batches = null;
+    this.geometry.destroy(true);
+    this.geometry = null;
+    if (options.shader) {
+      this.shader?.destroy();
+      this.shader = null;
+    }
     for (let i = 0; i < this._elements.length; i++) {
       if (this._elements[i])
         this._elements[i]._batch = null;
@@ -18371,6 +18463,12 @@ class Buffer extends EventEmitter {
      * emits when the buffer is destroyed. letting the renderer know that it needs to destroy the buffer on the GPU
      * @event destroy
      */
+    /** @internal */
+    this._gpuData = /* @__PURE__ */ Object.create(null);
+    /** @internal */
+    this._gcLastUsed = -1;
+    /** If set to true, the buffer will be garbage collected automatically when it is not used. */
+    this.autoGarbageCollect = true;
     /** a unique id for this uniform group used through the renderer */
     this.uid = uid$1("buffer");
     /**
@@ -18486,9 +18584,18 @@ class Buffer extends EventEmitter {
     this._updateID++;
     this.emit("update", this);
   }
+  /** Unloads the buffer from the GPU */
+  unload() {
+    this.emit("unload", this);
+    for (const key in this._gpuData) {
+      this._gpuData[key]?.destroy();
+    }
+    this._gpuData = /* @__PURE__ */ Object.create(null);
+  }
   /** Destroys the buffer */
   destroy() {
     this.destroyed = true;
+    this.unload();
     this.emit("destroy", this);
     this.emit("change", this);
     this._data = null;
@@ -18570,6 +18677,12 @@ class Geometry extends EventEmitter {
    */
   constructor(options = {}) {
     super();
+    /** @internal */
+    this._gpuData = /* @__PURE__ */ Object.create(null);
+    /** If set to true, the resource will be garbage collected automatically when it is not used. */
+    this.autoGarbageCollect = true;
+    /** @internal */
+    this._gcLastUsed = -1;
     /** The unique id of the geometry. */
     this.uid = uid$1("geometry");
     /**
@@ -18665,6 +18778,14 @@ class Geometry extends EventEmitter {
     this._boundsDirty = false;
     return getGeometryBounds(this, "aPosition", this._bounds);
   }
+  /** Unloads the geometry from the GPU. */
+  unload() {
+    this.emit("unload", this);
+    for (const key in this._gpuData) {
+      this._gpuData[key]?.destroy();
+    }
+    this._gpuData = /* @__PURE__ */ Object.create(null);
+  }
   /**
    * destroys the geometry.
    * @param destroyBuffers - destroy the buffers associated with this geometry
@@ -18675,6 +18796,8 @@ class Geometry extends EventEmitter {
     if (destroyBuffers) {
       this.buffers.forEach((buffer) => buffer.destroy());
     }
+    this.unload();
+    this.indexBuffer?.destroy();
     this.attributes = null;
     this.buffers = null;
     this.indexBuffer = null;
@@ -19350,6 +19473,7 @@ class DefaultShader extends Shader {
         batchSamplers: getBatchSamplersUniformGroup(maxTextures)
       }
     });
+    this.maxTextures = maxTextures;
   }
 }
 
@@ -19447,6 +19571,21 @@ const _DefaultBatcher = class _DefaultBatcher extends Batcher {
     uint32View[index + 22] = argb;
     uint32View[index + 23] = textureIdAndRound;
   }
+  /**
+   * Updates the maximum number of textures that can be used in the shader.
+   * @param maxTextures - The maximum number of textures that can be used in the shader.
+   * @internal
+   */
+  _updateMaxTextures(maxTextures) {
+    if (this.shader.maxTextures === maxTextures)
+      return;
+    defaultShader = new DefaultShader(maxTextures);
+    this.shader = defaultShader;
+  }
+  destroy() {
+    this.shader = null;
+    super.destroy();
+  }
 };
 /** @ignore */
 _DefaultBatcher.extension = {
@@ -19457,6 +19596,51 @@ _DefaultBatcher.extension = {
 };
 let DefaultBatcher = _DefaultBatcher;
 
+class GCManagedHash {
+  constructor(options) {
+    // Exposed directly for GC system access
+    this.items = /* @__PURE__ */ Object.create(null);
+    const { renderer, type, onUnload, priority, name } = options;
+    this._renderer = renderer;
+    renderer.gc.addResourceHash(this, "items", type, priority ?? 0);
+    this._onUnload = onUnload;
+    this.name = name;
+  }
+  /**
+   * Add an item to the hash. No-op if already added.
+   * @param item
+   * @returns true if the item was added, false if it was already in the hash
+   */
+  add(item) {
+    if (this.items[item.uid])
+      return false;
+    this.items[item.uid] = item;
+    item.once("unload", this.remove, this);
+    item._gcLastUsed = this._renderer.gc.now;
+    return true;
+  }
+  remove(item, ...args) {
+    if (!this.items[item.uid])
+      return;
+    const gpuData = item._gpuData[this._renderer.uid];
+    if (!gpuData)
+      return;
+    this._onUnload?.(item, ...args);
+    gpuData.destroy();
+    item._gpuData[this._renderer.uid] = null;
+    this.items[item.uid] = null;
+  }
+  removeAll(...args) {
+    Object.values(this.items).forEach((item) => item && this.remove(item, ...args));
+  }
+  destroy(...args) {
+    this.removeAll(...args);
+    this.items = /* @__PURE__ */ Object.create(null);
+    this._renderer = null;
+    this._onUnload = null;
+  }
+}
+
 function buildUvs(vertices, verticesStride, verticesOffset, uvs, uvsOffset, uvsStride, size, matrix = null) {
   let index = 0;
   verticesOffset *= verticesStride;
@@ -20424,15 +20608,36 @@ class GpuGraphicsContext {
       indices: []
     };
   }
+  reset() {
+    if (this.batches) {
+      this.batches.forEach((batch) => {
+        BigPool.return(batch);
+      });
+    }
+    if (this.graphicsData) {
+      BigPool.return(this.graphicsData);
+    }
+    this.isBatchable = false;
+    this.context = null;
+    this.batches.length = 0;
+    this.geometryData.indices.length = 0;
+    this.geometryData.vertices.length = 0;
+    this.geometryData.uvs.length = 0;
+    this.graphicsData = null;
+  }
+  destroy() {
+    this.reset();
+    this.batches = null;
+    this.geometryData = null;
+  }
 }
 class GraphicsContextRenderData {
   constructor() {
     this.instructions = new InstructionSet();
   }
-  init(maxTextures) {
-    this.batcher = new DefaultBatcher({
-      maxTextures
-    });
+  init(options) {
+    const maxTextures = options.maxTextures;
+    this.batcher ? this.batcher._updateMaxTextures(maxTextures) : this.batcher = new DefaultBatcher({ maxTextures });
     this.instructions.reset();
   }
   /**
@@ -20453,14 +20658,8 @@ class GraphicsContextRenderData {
 }
 const _GraphicsContextSystem = class _GraphicsContextSystem {
   constructor(renderer) {
-    // the root context batches, used to either make a batch or geometry
-    // all graphics use this as a base
-    this._gpuContextHash = {};
-    // used for non-batchable graphics
-    this._graphicsDataContextHash = /* @__PURE__ */ Object.create(null);
     this._renderer = renderer;
-    renderer.renderableGC.addManagedHash(this, "_gpuContextHash");
-    renderer.renderableGC.addManagedHash(this, "_graphicsDataContextHash");
+    this._managedContexts = new GCManagedHash({ renderer, type: "resource", name: "graphicsContext" });
   }
   /**
    * Runner init called, update the default options
@@ -20475,7 +20674,7 @@ const _GraphicsContextSystem = class _GraphicsContextSystem {
    * @internal
    */
   getContextRenderData(context) {
-    return this._graphicsDataContextHash[context.uid] || this._initContextRenderData(context);
+    return context._gpuData[this._renderer.uid].graphicsData || this._initContextRenderData(context);
   }
   /**
    * Updates the GPU context for a given GraphicsContext.
@@ -20485,12 +20684,11 @@ const _GraphicsContextSystem = class _GraphicsContextSystem {
    * @internal
    */
   updateGpuContext(context) {
-    let gpuContext = this._gpuContextHash[context.uid] || this._initContext(context);
-    if (context.dirty) {
-      if (gpuContext) {
-        this._cleanGraphicsContextData(context);
-      } else {
-        gpuContext = this._initContext(context);
+    const hasContext = !!context._gpuData[this._renderer.uid];
+    const gpuContext = context._gpuData[this._renderer.uid] || this._initContext(context);
+    if (context.dirty || !hasContext) {
+      if (hasContext) {
+        gpuContext.reset();
       }
       buildContextBatches(context, gpuContext);
       const batchMode = context.batchMode;
@@ -20513,13 +20711,15 @@ const _GraphicsContextSystem = class _GraphicsContextSystem {
    * @internal
    */
   getGpuContext(context) {
-    return this._gpuContextHash[context.uid] || this._initContext(context);
+    return context._gpuData[this._renderer.uid] || this._initContext(context);
   }
   _initContextRenderData(context) {
     const graphicsData = BigPool.get(GraphicsContextRenderData, {
       maxTextures: this._renderer.limits.maxBatchableTextures
     });
-    const { batches, geometryData } = this._gpuContextHash[context.uid];
+    const gpuContext = context._gpuData[this._renderer.uid];
+    const { batches, geometryData } = gpuContext;
+    gpuContext.graphicsData = graphicsData;
     const vertexSize = geometryData.vertices.length;
     const indexSize = geometryData.indices.length;
     for (let i = 0; i < batches.length; i++) {
@@ -20546,41 +20746,18 @@ const _GraphicsContextSystem = class _GraphicsContextSystem {
         this._renderer.limits.maxBatchableTextures
       );
     }
-    this._graphicsDataContextHash[context.uid] = graphicsData;
     return graphicsData;
   }
   _initContext(context) {
     const gpuContext = new GpuGraphicsContext();
     gpuContext.context = context;
-    this._gpuContextHash[context.uid] = gpuContext;
-    context.on("destroy", this.onGraphicsContextDestroy, this);
-    return this._gpuContextHash[context.uid];
-  }
-  onGraphicsContextDestroy(context) {
-    this._cleanGraphicsContextData(context);
-    context.off("destroy", this.onGraphicsContextDestroy, this);
-    this._gpuContextHash[context.uid] = null;
-  }
-  _cleanGraphicsContextData(context) {
-    const gpuContext = this._gpuContextHash[context.uid];
-    if (!gpuContext.isBatchable) {
-      if (this._graphicsDataContextHash[context.uid]) {
-        BigPool.return(this.getContextRenderData(context));
-        this._graphicsDataContextHash[context.uid] = null;
-      }
-    }
-    if (gpuContext.batches) {
-      gpuContext.batches.forEach((batch) => {
-        BigPool.return(batch);
-      });
-    }
+    context._gpuData[this._renderer.uid] = gpuContext;
+    this._managedContexts.add(context);
+    return gpuContext;
   }
   destroy() {
-    for (const i in this._gpuContextHash) {
-      if (this._gpuContextHash[i]) {
-        this.onGraphicsContextDestroy(this._gpuContextHash[i].context);
-      }
-    }
+    this._managedContexts.destroy();
+    this._renderer = null;
   }
 };
 /** @ignore */
@@ -22403,7 +22580,7 @@ function renderChildren(svg, session, fillStyle, strokeStyle) {
       break;
     case "polygon":
       pointsString = svg.getAttribute("points");
-      points = pointsString.match(/\d+/g).map((n) => parseInt(n, 10));
+      points = pointsString.match(/-?\d+/g).map((n) => parseInt(n, 10));
       session.context.poly(points, true);
       if (fillStyle)
         session.context.fill(fillStyle);
@@ -22412,7 +22589,7 @@ function renderChildren(svg, session, fillStyle, strokeStyle) {
       break;
     case "polyline":
       pointsString = svg.getAttribute("points");
-      points = pointsString.match(/\d+/g).map((n) => parseInt(n, 10));
+      points = pointsString.match(/-?\d+/g).map((n) => parseInt(n, 10));
       session.context.poly(points, false);
       if (strokeStyle)
         session.context.stroke(strokeStyle);
@@ -22522,6 +22699,12 @@ const tempMatrix$2 = new Matrix();
 const _GraphicsContext = class _GraphicsContext extends EventEmitter {
   constructor() {
     super(...arguments);
+    /** @internal */
+    this._gpuData = /* @__PURE__ */ Object.create(null);
+    /** If set to true, the resource will be garbage collected automatically when it is not used. */
+    this.autoGarbageCollect = true;
+    /** @internal */
+    this._gcLastUsed = -1;
     /**
      * unique id for this graphics context
      * @internal
@@ -22536,6 +22719,8 @@ const _GraphicsContext = class _GraphicsContext extends EventEmitter {
     this.batchMode = "auto";
     /** @internal */
     this.instructions = [];
+    /** Whether the graphics context has been destroyed. */
+    this.destroyed = false;
     this._activePath = new GraphicsPath();
     this._transform = new Matrix();
     this._fillStyle = { ..._GraphicsContext.defaultFillStyle };
@@ -22632,7 +22817,7 @@ const _GraphicsContext = class _GraphicsContext extends EventEmitter {
   fill(style, alpha) {
     let path;
     const lastInstruction = this.instructions[this.instructions.length - 1];
-    if (this._tick === 0 && lastInstruction && lastInstruction.action === "stroke") {
+    if (this._tick === 0 && lastInstruction?.action === "stroke") {
       path = lastInstruction.data.path;
     } else {
       path = this._activePath.clone();
@@ -22670,7 +22855,7 @@ const _GraphicsContext = class _GraphicsContext extends EventEmitter {
   stroke(style) {
     let path;
     const lastInstruction = this.instructions[this.instructions.length - 1];
-    if (this._tick === 0 && lastInstruction && lastInstruction.action === "fill") {
+    if (this._tick === 0 && lastInstruction?.action === "fill") {
       path = lastInstruction.data.path;
     } else {
       path = this._activePath.clone();
@@ -23252,6 +23437,14 @@ const _GraphicsContext = class _GraphicsContext extends EventEmitter {
     }
     return hasHit;
   }
+  /** Unloads the GPU data from the graphics context. */
+  unload() {
+    this.emit("unload", this);
+    for (const key in this._gpuData) {
+      this._gpuData[key]?.destroy();
+    }
+    this._gpuData = /* @__PURE__ */ Object.create(null);
+  }
   /**
    * Destroys the GraphicsData object.
    * @param options - Options parameter. A boolean will act as if all options
@@ -23262,8 +23455,12 @@ const _GraphicsContext = class _GraphicsContext extends EventEmitter {
    * context.destroy({ texture: true, textureSource: true });
    */
   destroy(options = false) {
+    if (this.destroyed)
+      return;
+    this.destroyed = true;
     this._stateStack.length = 0;
     this._transform = null;
+    this.unload();
     this.emit("destroy", this);
     this.removeAllListeners();
     const destroyTexture = typeof options === "boolean" ? options : options?.texture;
@@ -23362,6 +23559,8 @@ const _TextStyle = class _TextStyle extends EventEmitter {
     return this._align;
   }
   set align(value) {
+    if (this._align === value)
+      return;
     this._align = value;
     this.update();
   }
@@ -23370,6 +23569,8 @@ const _TextStyle = class _TextStyle extends EventEmitter {
     return this._breakWords;
   }
   set breakWords(value) {
+    if (this._breakWords === value)
+      return;
     this._breakWords = value;
     this.update();
   }
@@ -23378,6 +23579,8 @@ const _TextStyle = class _TextStyle extends EventEmitter {
     return this._dropShadow;
   }
   set dropShadow(value) {
+    if (this._dropShadow === value)
+      return;
     if (value !== null && typeof value === "object") {
       this._dropShadow = this._createProxy({ ..._TextStyle.defaultDropShadow, ...value });
     } else {
@@ -23390,6 +23593,8 @@ const _TextStyle = class _TextStyle extends EventEmitter {
     return this._fontFamily;
   }
   set fontFamily(value) {
+    if (this._fontFamily === value)
+      return;
     this._fontFamily = value;
     this.update();
   }
@@ -23398,6 +23603,8 @@ const _TextStyle = class _TextStyle extends EventEmitter {
     return this._fontSize;
   }
   set fontSize(value) {
+    if (this._fontSize === value)
+      return;
     if (typeof value === "string") {
       this._fontSize = parseInt(value, 10);
     } else {
@@ -23413,6 +23620,8 @@ const _TextStyle = class _TextStyle extends EventEmitter {
     return this._fontStyle;
   }
   set fontStyle(value) {
+    if (this._fontStyle === value)
+      return;
     this._fontStyle = value.toLowerCase();
     this.update();
   }
@@ -23424,6 +23633,8 @@ const _TextStyle = class _TextStyle extends EventEmitter {
     return this._fontVariant;
   }
   set fontVariant(value) {
+    if (this._fontVariant === value)
+      return;
     this._fontVariant = value;
     this.update();
   }
@@ -23435,6 +23646,8 @@ const _TextStyle = class _TextStyle extends EventEmitter {
     return this._fontWeight;
   }
   set fontWeight(value) {
+    if (this._fontWeight === value)
+      return;
     this._fontWeight = value;
     this.update();
   }
@@ -23443,6 +23656,8 @@ const _TextStyle = class _TextStyle extends EventEmitter {
     return this._leading;
   }
   set leading(value) {
+    if (this._leading === value)
+      return;
     this._leading = value;
     this.update();
   }
@@ -23451,6 +23666,8 @@ const _TextStyle = class _TextStyle extends EventEmitter {
     return this._letterSpacing;
   }
   set letterSpacing(value) {
+    if (this._letterSpacing === value)
+      return;
     this._letterSpacing = value;
     this.update();
   }
@@ -23459,6 +23676,8 @@ const _TextStyle = class _TextStyle extends EventEmitter {
     return this._lineHeight;
   }
   set lineHeight(value) {
+    if (this._lineHeight === value)
+      return;
     this._lineHeight = value;
     this.update();
   }
@@ -23471,6 +23690,8 @@ const _TextStyle = class _TextStyle extends EventEmitter {
     return this._padding;
   }
   set padding(value) {
+    if (this._padding === value)
+      return;
     this._padding = value;
     this.update();
   }
@@ -23484,6 +23705,8 @@ const _TextStyle = class _TextStyle extends EventEmitter {
     return this._filters;
   }
   set filters(value) {
+    if (this._filters === value)
+      return;
     this._filters = Object.freeze(value);
     this.update();
   }
@@ -23497,6 +23720,8 @@ const _TextStyle = class _TextStyle extends EventEmitter {
     return this._trim;
   }
   set trim(value) {
+    if (this._trim === value)
+      return;
     this._trim = value;
     this.update();
   }
@@ -23508,6 +23733,8 @@ const _TextStyle = class _TextStyle extends EventEmitter {
     return this._textBaseline;
   }
   set textBaseline(value) {
+    if (this._textBaseline === value)
+      return;
     this._textBaseline = value;
     this.update();
   }
@@ -23526,6 +23753,8 @@ const _TextStyle = class _TextStyle extends EventEmitter {
     return this._whiteSpace;
   }
   set whiteSpace(value) {
+    if (this._whiteSpace === value)
+      return;
     this._whiteSpace = value;
     this.update();
   }
@@ -23534,6 +23763,8 @@ const _TextStyle = class _TextStyle extends EventEmitter {
     return this._wordWrap;
   }
   set wordWrap(value) {
+    if (this._wordWrap === value)
+      return;
     this._wordWrap = value;
     this.update();
   }
@@ -23542,6 +23773,8 @@ const _TextStyle = class _TextStyle extends EventEmitter {
     return this._wordWrapWidth;
   }
   set wordWrapWidth(value) {
+    if (this._wordWrapWidth === value)
+      return;
     this._wordWrapWidth = value;
     this.update();
   }
@@ -23707,6 +23940,8 @@ const _TextStyle = class _TextStyle extends EventEmitter {
   _createProxy(value, cb) {
     return new Proxy(value, {
       set: (target, property, newValue) => {
+        if (target[property] === newValue)
+          return true;
         target[property] = newValue;
         cb?.(property, newValue);
         this.update();
@@ -24887,7 +25122,7 @@ const bitmapFontXMLParser = {
 
 const bitmapFontXMLStringParser = {
   test(data) {
-    if (typeof data === "string" && data.includes("<font>")) {
+    if (typeof data === "string" && data.match(/<font(\s|>)/)) {
       return bitmapFontXMLParser.test(DOMAdapter.get().parseXML(data));
     }
     return false;
@@ -25186,8 +25421,26 @@ const detectWebp = {
   remove: async (formats) => formats.filter((f) => f !== "webp")
 };
 
-class Loader {
+const _Loader = class _Loader {
   constructor() {
+    /**
+     * Options for loading assets with the loader.
+     * These options will be used as defaults for all load calls made with this loader instance.
+     * They can be overridden by passing options directly to the load method.
+     * @example
+     * ```ts
+     * // Create a loader with custom default options
+     * const loader = new Loader();
+     * loader.loadOptions = {
+     *   strategy: 'skip', // Default strategy to 'skip'
+     *   retryCount: 5,   // Default retry count to 5
+     *   retryDelay: 500, // Default retry delay to 500ms
+     * };
+     *
+     * // This load call will use the loader's default options
+     * await loader.load('image1.png');
+     */
+    this.loadOptions = { ..._Loader.defaultOptions };
     this._parsers = [];
     this._parsersValidated = false;
     /**
@@ -25264,10 +25517,12 @@ class Loader {
     })();
     return result;
   }
-  async load(assetsToLoadIn, onProgress) {
+  async load(assetsToLoadIn, onProgressOrOptions) {
     if (!this._parsersValidated) {
       this._validateParsers();
     }
+    const options = typeof onProgressOrOptions === "function" ? { ..._Loader.defaultOptions, ...this.loadOptions, onProgress: onProgressOrOptions } : { ..._Loader.defaultOptions, ...this.loadOptions, ...onProgressOrOptions || {} };
+    const { onProgress, onError, strategy, retryCount, retryDelay } = options;
     let count = 0;
     const assets = {};
     const singleAsset = isSingleItem(assetsToLoadIn);
@@ -25276,24 +25531,15 @@ class Loader {
       src: item,
       data: {}
     }));
-    const total = assetsToLoad.length;
+    const total = assetsToLoad.reduce((sum, asset) => sum + (asset.progressSize || 1), 0);
     const promises = assetsToLoad.map(async (asset) => {
       const url = path.toAbsolute(asset.src);
-      if (!assets[asset.src]) {
-        try {
-          if (!this.promiseCache[url]) {
-            this.promiseCache[url] = this._getLoadPromiseAndParser(url, asset);
-          }
-          assets[asset.src] = await this.promiseCache[url].promise;
-          if (onProgress)
-            onProgress(++count / total);
-        } catch (e) {
-          delete this.promiseCache[url];
-          delete assets[asset.src];
-          throw new Error(`[Loader.load] Failed to load ${url}.
-${e}`);
-        }
-      }
+      if (assets[asset.src])
+        return;
+      await this._loadAssetWithRetry(url, asset, { onProgress, onError, strategy, retryCount, retryDelay }, assets);
+      count += asset.progressSize || 1;
+      if (onProgress)
+        onProgress(count / total);
     });
     await Promise.all(promises);
     return singleAsset ? assets[assetsToLoad[0].src] : assets;
@@ -25341,7 +25587,65 @@ ${e}`);
       return hash;
     }, {});
   }
-}
+  async _loadAssetWithRetry(url, asset, options, assets) {
+    let attempt = 0;
+    const { onError, strategy, retryCount, retryDelay } = options;
+    const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+    while (true) {
+      try {
+        if (!this.promiseCache[url]) {
+          this.promiseCache[url] = this._getLoadPromiseAndParser(url, asset);
+        }
+        assets[asset.src] = await this.promiseCache[url].promise;
+        return;
+      } catch (e) {
+        delete this.promiseCache[url];
+        delete assets[asset.src];
+        attempt++;
+        const isLast = strategy !== "retry" || attempt > retryCount;
+        if (strategy === "retry" && !isLast) {
+          if (onError)
+            onError(e, asset);
+          await wait(retryDelay);
+          continue;
+        }
+        if (strategy === "skip") {
+          if (onError)
+            onError(e, asset);
+          return;
+        }
+        if (onError)
+          onError(e, asset);
+        const error = new Error(`[Loader.load] Failed to load ${url}.
+${e}`);
+        if (e instanceof Error && e.stack) {
+          error.stack = e.stack;
+        }
+        throw error;
+      }
+    }
+  }
+};
+/**
+ * Default options for loading assets
+ * @example
+ * ```ts
+ * // Change default load options globally
+ * Loader.defaultOptions = {
+ *   strategy: 'skip', // Change default strategy to 'skip'
+ *   retryCount: 5,   // Change default retry count to 5
+ *   retryDelay: 500, // Change default retry delay to 500ms
+ * };
+ * ```
+ */
+_Loader.defaultOptions = {
+  onProgress: void 0,
+  onError: void 0,
+  strategy: "throw",
+  retryCount: 3,
+  retryDelay: 250
+};
+let Loader = _Loader;
 
 function checkDataUrl(url, mimes) {
   if (Array.isArray(mimes)) {
@@ -25740,12 +26044,15 @@ class WorkerManagerClass {
    * @param data - Result data from the worker containing uuid, data, and optional error
    */
   _complete(data) {
+    if (!this._resolveHash[data.uuid]) {
+      return;
+    }
     if (data.error !== void 0) {
       this._resolveHash[data.uuid].reject(data.error);
     } else {
       this._resolveHash[data.uuid].resolve(data.data);
     }
-    this._resolveHash[data.uuid] = null;
+    delete this._resolveHash[data.uuid];
   }
   /**
    * Executes a task using the worker pool system.
@@ -25806,7 +26113,7 @@ class WorkerManagerClass {
     this._workerPool.forEach((worker) => worker.terminate());
     this._workerPool.length = 0;
     Object.values(this._resolveHash).forEach(({ reject }) => {
-      reject?.(new Error("WorkerManager destroyed"));
+      reject?.(new Error("WorkerManager has been reset before completion"));
     });
     this._resolveHash = {};
     this._queue.length = 0;
@@ -26145,6 +26452,12 @@ class AssetsClass {
     if (options.preferences) {
       this.setPreferences(options.preferences);
     }
+    if (options.loadOptions) {
+      this.loader.loadOptions = {
+        ...this.loader.loadOptions,
+        ...options.loadOptions
+      };
+    }
   }
   /**
    * Registers assets with the Assets resolver. This method maps keys (aliases) to asset sources,
@@ -26364,17 +26677,22 @@ class AssetsClass {
     const resolveResults = this.resolver.resolveBundle(bundleIds);
     const out = {};
     const keys = Object.keys(resolveResults);
-    let count = 0;
     let total = 0;
+    const counts = [];
     const _onProgress = () => {
-      onProgress?.(++count / total);
+      onProgress?.(counts.reduce((a, b) => a + b, 0) / total);
     };
-    const promises = keys.map((bundleId) => {
+    const promises = keys.map((bundleId, i) => {
       const resolveResult = resolveResults[bundleId];
       const values = Object.values(resolveResult);
       const totalAssetsToLoad = [...new Set(values.flat())];
-      total += totalAssetsToLoad.length;
-      return this._mapLoadToResolve(resolveResult, _onProgress).then((resolveResult2) => {
+      const progressSize = totalAssetsToLoad.reduce((sum, asset) => sum + (asset.progressSize || 1), 0);
+      counts.push(0);
+      total += progressSize;
+      return this._mapLoadToResolve(resolveResult, (e) => {
+        counts[i] = e * progressSize;
+        _onProgress();
+      }).then((resolveResult2) => {
         out[bundleId] = resolveResult2;
       });
     });
@@ -26526,12 +26844,12 @@ class AssetsClass {
   /**
    * helper function to map resolved assets back to loaded assets
    * @param resolveResults - the resolve results from the resolver
-   * @param onProgress - the progress callback
+   * @param progressOrLoadOptions - the progress callback or load options
    */
-  async _mapLoadToResolve(resolveResults, onProgress) {
+  async _mapLoadToResolve(resolveResults, progressOrLoadOptions) {
     const resolveArray = [...new Set(Object.values(resolveResults))];
     this._backgroundLoader.active = false;
-    const loadedAssets = await this.loader.load(resolveArray, onProgress);
+    const loadedAssets = await this.loader.load(resolveArray, progressOrLoadOptions);
     this._backgroundLoader.active = true;
     const out = {};
     resolveArray.forEach((resolveResult) => {
@@ -28816,6 +29134,31 @@ const FederatedContainer = {
   }
 };
 
+var vertex$2 = "in vec2 aPosition;\nout vec2 vTextureCoord;\n\nuniform vec4 uInputSize;\nuniform vec4 uOutputFrame;\nuniform vec4 uOutputTexture;\n\nvec4 filterVertexPosition( void )\n{\n    vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;\n    \n    position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;\n    position.y = position.y * (2.0*uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;\n\n    return vec4(position, 0.0, 1.0);\n}\n\nvec2 filterTextureCoord( void )\n{\n    return aPosition * (uOutputFrame.zw * uInputSize.zw);\n}\n\nvoid main(void)\n{\n    gl_Position = filterVertexPosition();\n    vTextureCoord = filterTextureCoord();\n}\n";
+
+var fragment$2 = "in vec2 vTextureCoord;\nout vec4 finalColor;\nuniform sampler2D uTexture;\nvoid main() {\n    finalColor = texture(uTexture, vTextureCoord);\n}\n";
+
+var source$1 = "struct GlobalFilterUniforms {\n  uInputSize: vec4<f32>,\n  uInputPixel: vec4<f32>,\n  uInputClamp: vec4<f32>,\n  uOutputFrame: vec4<f32>,\n  uGlobalFrame: vec4<f32>,\n  uOutputTexture: vec4<f32>,\n};\n\n@group(0) @binding(0) var <uniform> gfu: GlobalFilterUniforms;\n@group(0) @binding(1) var uTexture: texture_2d<f32>;\n@group(0) @binding(2) var uSampler: sampler;\n\nstruct VSOutput {\n  @builtin(position) position: vec4<f32>,\n  @location(0) uv: vec2<f32>\n};\n\nfn filterVertexPosition(aPosition: vec2<f32>) -> vec4<f32>\n{\n    var position = aPosition * gfu.uOutputFrame.zw + gfu.uOutputFrame.xy;\n\n    position.x = position.x * (2.0 / gfu.uOutputTexture.x) - 1.0;\n    position.y = position.y * (2.0 * gfu.uOutputTexture.z / gfu.uOutputTexture.y) - gfu.uOutputTexture.z;\n\n    return vec4(position, 0.0, 1.0);\n}\n\nfn filterTextureCoord(aPosition: vec2<f32>) -> vec2<f32>\n{\n    return aPosition * (gfu.uOutputFrame.zw * gfu.uInputSize.zw);\n}\n\n@vertex\nfn mainVertex(\n  @location(0) aPosition: vec2<f32>,\n) -> VSOutput {\n  return VSOutput(\n   filterVertexPosition(aPosition),\n   filterTextureCoord(aPosition)\n  );\n}\n\n@fragment\nfn mainFragment(\n  @location(0) uv: vec2<f32>,\n) -> @location(0) vec4<f32> {\n    return textureSample(uTexture, uSampler, uv);\n}\n";
+
+class PassthroughFilter extends Filter {
+  constructor() {
+    const gpuProgram = GpuProgram.from({
+      vertex: { source: source$1, entryPoint: "mainVertex" },
+      fragment: { source: source$1, entryPoint: "mainFragment" },
+      name: "passthrough-filter"
+    });
+    const glProgram = GlProgram.from({
+      vertex: vertex$2,
+      fragment: fragment$2,
+      name: "passthrough-filter"
+    });
+    super({
+      gpuProgram,
+      glProgram
+    });
+  }
+}
+
 class FilterPipe {
   constructor(renderer) {
     this._renderer = renderer;
@@ -28940,6 +29283,10 @@ class FilterData {
      * @type {{ x: number, y: number, width: number, height: number }}
      */
     this.globalFrame = { x: 0, y: 0, width: 0, height: 0 };
+    /** The first enabled filter index in the current filter list. */
+    this.firstEnabledIndex = -1;
+    /** The last enabled filter index in the current filter list. */
+    this.lastEnabledIndex = -1;
   }
 }
 class FilterSystem {
@@ -28980,7 +29327,7 @@ class FilterSystem {
     const colorTextureSource = renderer.renderTarget.renderTarget.colorTexture.source;
     const rootResolution = colorTextureSource.resolution;
     const rootAntialias = colorTextureSource.antialias;
-    if (filters.length === 0) {
+    if (filters.every((filter) => !filter.enabled)) {
       filterData.skip = true;
       return;
     }
@@ -29043,7 +29390,7 @@ class FilterSystem {
     const colorTextureSource = texture.source;
     const rootResolution = colorTextureSource.resolution;
     const rootAntialias = colorTextureSource.antialias;
-    if (filters.length === 0) {
+    if (filters.every((filter) => !filter.enabled)) {
       filterData.skip = true;
       return texture;
     }
@@ -29150,7 +29497,8 @@ class FilterSystem {
       offsetY = offset.y;
     }
     this._updateFilterUniforms(input, output, filterData, offsetX, offsetY, resolution, isFinalTarget, clear);
-    this._setupBindGroupsAndRender(filter, input, renderer);
+    const filterToApply = filter.enabled ? filter : this._getPassthroughFilter();
+    this._setupBindGroupsAndRender(filterToApply, input, renderer);
   }
   /**
    * Multiply _input normalized coordinates_ to this matrix to get _sprite texture normalized coordinates_.
@@ -29185,6 +29533,12 @@ class FilterSystem {
     return mappedMatrix;
   }
   destroy() {
+    this._passthroughFilter?.destroy(true);
+    this._passthroughFilter = null;
+  }
+  _getPassthroughFilter() {
+    this._passthroughFilter ?? (this._passthroughFilter = new PassthroughFilter());
+    return this._passthroughFilter;
   }
   /**
    * Sets up the bind groups and renders the filter.
@@ -29370,10 +29724,12 @@ class FilterSystem {
     const inputTexture = filterData.inputTexture;
     const bounds = filterData.bounds;
     const filters = filterData.filters;
+    const firstEnabled = filterData.firstEnabledIndex;
+    const lastEnabled = filterData.lastEnabledIndex;
     this._globalFilterBindGroup.setResource(inputTexture.source.style, 2);
     this._globalFilterBindGroup.setResource(filterData.backTexture.source, 3);
-    if (filters.length === 1) {
-      filters[0].apply(this, inputTexture, filterData.outputRenderSurface, clear);
+    if (firstEnabled === lastEnabled) {
+      filters[firstEnabled].apply(this, inputTexture, filterData.outputRenderSurface, clear);
     } else {
       let flip = filterData.inputTexture;
       const tempTexture = TexturePool.getOptimalTexture(
@@ -29383,15 +29739,16 @@ class FilterSystem {
         false
       );
       let flop = tempTexture;
-      let i = 0;
-      for (i = 0; i < filters.length - 1; ++i) {
+      for (let i = firstEnabled; i < lastEnabled; i++) {
         const filter = filters[i];
+        if (!filter.enabled)
+          continue;
         filter.apply(this, flip, flop, true);
         const t = flip;
         flip = flop;
         flop = t;
       }
-      filters[i].apply(this, flip, filterData.outputRenderSurface, clear);
+      filters[lastEnabled].apply(this, flip, filterData.outputRenderSurface, clear);
       TexturePool.returnTexture(tempTexture);
     }
   }
@@ -29405,8 +29762,15 @@ class FilterSystem {
     let blendRequired = false;
     let enabled = false;
     let clipToViewport = true;
+    let firstEnabledIndex = -1;
+    let lastEnabledIndex = -1;
     for (let i = 0; i < filters.length; i++) {
       const filter = filters[i];
+      if (!filter.enabled)
+        continue;
+      if (firstEnabledIndex === -1)
+        firstEnabledIndex = i;
+      lastEnabledIndex = i;
       resolution = Math.min(resolution, filter.resolution === "inherit" ? rootResolution : filter.resolution);
       padding += filter.padding;
       if (filter.antialias === "off") {
@@ -29427,7 +29791,7 @@ class FilterSystem {
         enabled = false;
         break;
       }
-      enabled = filter.enabled || enabled;
+      enabled = true;
       blendRequired || (blendRequired = filter.blendRequired);
     }
     if (!enabled) {
@@ -29445,6 +29809,8 @@ class FilterSystem {
     filterData.antialias = antialias;
     filterData.resolution = resolution;
     filterData.blendRequired = blendRequired;
+    filterData.firstEnabledIndex = firstEnabledIndex;
+    filterData.lastEnabledIndex = lastEnabledIndex;
   }
   _popFilterData() {
     this._filterStackIndex--;
@@ -29558,11 +29924,11 @@ class Graphics extends ViewContainer {
     /** @internal */
     this.renderPipeId = "graphics";
     if (!context) {
-      this._context = this._ownedContext = new GraphicsContext();
+      this.context = this._ownedContext = new GraphicsContext();
+      this.context.autoGarbageCollect = this.autoGarbageCollect;
     } else {
-      this._context = context;
+      this.context = context;
     }
-    this._context.on("update", this.onViewUpdate, this);
     this.didViewUpdate = true;
     this.allowChildren = false;
     this.roundPixels = roundPixels ?? false;
@@ -29570,9 +29936,13 @@ class Graphics extends ViewContainer {
   set context(context) {
     if (context === this._context)
       return;
-    this._context.off("update", this.onViewUpdate, this);
+    if (this._context) {
+      this._context.off("update", this.onViewUpdate, this);
+      this._context.off("unload", this.unload, this);
+    }
     this._context = context;
     this._context.on("update", this.onViewUpdate, this);
+    this._context.on("unload", this.unload, this);
     this.onViewUpdate();
   }
   /**
@@ -29686,6 +30056,14 @@ class Graphics extends ViewContainer {
     this._context = null;
     super.destroy(options);
   }
+  /**
+   * @param now - The current time in milliseconds.
+   * @internal
+   */
+  _onTouch(now) {
+    this._gcLastUsed = now;
+    this._context._gcLastUsed = now;
+  }
   _callContextMethod(method, args) {
     this.context[method](...args);
     return this;
@@ -31802,7 +32180,7 @@ class GpuBatchAdaptor {
       tempState,
       batch.topology
     );
-    batch.bindGroup._touch(renderer.textureGC.count);
+    batch.bindGroup._touch(renderer.gc.now, renderer.tick);
     encoder.setPipeline(pipeline);
     encoder.renderPassEncoder.setBindGroup(1, gpuBindGroup);
     encoder.renderPassEncoder.drawIndexed(batch.size, 1, batch.start);
@@ -32408,6 +32786,14 @@ class GlBuffer {
     this.byteLength = -1;
     this.type = type;
   }
+  destroy() {
+    this.buffer = null;
+    this.updateID = -1;
+    this.byteLength = -1;
+    this.type = -1;
+    this._lastBindBaseLocation = -1;
+    this._lastBindCallId = -1;
+  }
 }
 
 class GlBufferSystem {
@@ -32415,30 +32801,35 @@ class GlBufferSystem {
    * @param {Renderer} renderer - The renderer this System works for.
    */
   constructor(renderer) {
-    this._gpuBuffers = /* @__PURE__ */ Object.create(null);
     /** Cache keeping track of the base bound buffer bases */
     this._boundBufferBases = /* @__PURE__ */ Object.create(null);
     this._minBaseLocation = 0;
     this._nextBindBaseIndex = this._minBaseLocation;
     this._bindCallId = 0;
     this._renderer = renderer;
-    this._renderer.renderableGC.addManagedHash(this, "_gpuBuffers");
+    this._managedBuffers = new GCManagedHash({
+      renderer,
+      type: "resource",
+      onUnload: this.onBufferUnload.bind(this),
+      name: "glBuffer"
+    });
   }
   /** @ignore */
   destroy() {
+    this._managedBuffers.destroy();
     this._renderer = null;
     this._gl = null;
-    this._gpuBuffers = null;
-    this._boundBufferBases = null;
+    this._boundBufferBases = {};
   }
   /** Sets up the renderer context and necessary buffers. */
   contextChange() {
     this._gl = this._renderer.gl;
-    this._gpuBuffers = /* @__PURE__ */ Object.create(null);
+    this.destroyAll(true);
     this._maxBindings = this._renderer.limits.maxUniformBindings;
   }
   getGlBuffer(buffer) {
-    return this._gpuBuffers[buffer.uid] || this.createGLBuffer(buffer);
+    buffer._gcLastUsed = this._renderer.gc.now;
+    return buffer._gpuData[this._renderer.uid] || this.createGLBuffer(buffer);
   }
   /**
    * This binds specified buffer. On first run, it will create the webGL buffers for the context too
@@ -32553,26 +32944,19 @@ class GlBufferSystem {
     }
     return glBuffer;
   }
-  /** dispose all WebGL resources of all managed buffers */
-  destroyAll() {
-    const gl = this._gl;
-    for (const id in this._gpuBuffers) {
-      gl.deleteBuffer(this._gpuBuffers[id].buffer);
-    }
-    this._gpuBuffers = /* @__PURE__ */ Object.create(null);
-  }
   /**
-   * Disposes buffer
-   * @param {Buffer} buffer - buffer with data
-   * @param {boolean} [contextLost=false] - If context was lost, we suppress deleteVertexArray
+   * dispose all WebGL resources of all managed buffers
+   * @param contextLost
    */
-  onBufferDestroy(buffer, contextLost) {
-    const glBuffer = this._gpuBuffers[buffer.uid];
-    const gl = this._gl;
-    if (!contextLost) {
-      gl.deleteBuffer(glBuffer.buffer);
-    }
-    this._gpuBuffers[buffer.uid] = null;
+  destroyAll(contextLost = false) {
+    this._managedBuffers.removeAll(contextLost);
+  }
+  onBufferUnload(buffer, contextLost = false) {
+    const glBuffer = buffer._gpuData[this._renderer.uid];
+    if (!glBuffer)
+      return;
+    if (!contextLost)
+      this._gl.deleteBuffer(glBuffer.buffer);
   }
   /**
    * creates and attaches a GLBuffer object tied to the current context.
@@ -32588,8 +32972,8 @@ class GlBufferSystem {
       type = BUFFER_TYPE.UNIFORM_BUFFER;
     }
     const glBuffer = new GlBuffer(gl.createBuffer(), type);
-    this._gpuBuffers[buffer.uid] = glBuffer;
-    buffer.on("destroy", this.onBufferDestroy, this);
+    buffer._gpuData[this._renderer.uid] = glBuffer;
+    this._managedBuffers.add(buffer);
     return glBuffer;
   }
   resetState() {
@@ -33001,16 +33385,28 @@ const topologyToGlMap = {
   "triangle-list": 4,
   "triangle-strip": 5
 };
+class GlGeometryGpuData {
+  constructor() {
+    this.vaoCache = /* @__PURE__ */ Object.create(null);
+  }
+  destroy() {
+    this.vaoCache = /* @__PURE__ */ Object.create(null);
+  }
+}
 class GlGeometrySystem {
   /** @param renderer - The renderer this System works for. */
   constructor(renderer) {
-    this._geometryVaoHash = /* @__PURE__ */ Object.create(null);
     this._renderer = renderer;
     this._activeGeometry = null;
     this._activeVao = null;
     this.hasVao = true;
     this.hasInstance = true;
-    this._renderer.renderableGC.addManagedHash(this, "_geometryVaoHash");
+    this._managedGeometries = new GCManagedHash({
+      renderer,
+      type: "resource",
+      onUnload: this.onGeometryUnload.bind(this),
+      name: "glGeometry"
+    });
   }
   /** Sets up the renderer context and necessary buffers. */
   contextChange() {
@@ -33018,6 +33414,7 @@ class GlGeometrySystem {
     if (!this._renderer.context.supports.vertexArrayObject) {
       throw new Error("[PixiJS] Vertex Array Objects are not supported on this device");
     }
+    this.destroyAll(true);
     const nativeVaoExtension = this._renderer.context.extensions.vertexArrayObject;
     if (nativeVaoExtension) {
       gl.createVertexArray = () => nativeVaoExtension.createVertexArrayOES();
@@ -33036,7 +33433,6 @@ class GlGeometrySystem {
     }
     this._activeGeometry = null;
     this._activeVao = null;
-    this._geometryVaoHash = /* @__PURE__ */ Object.create(null);
   }
   /**
    * Binds geometry so that is can be drawn. Creating a Vao if required
@@ -33065,6 +33461,7 @@ class GlGeometrySystem {
       const buffer = geometry.buffers[i];
       bufferSystem.updateBuffer(buffer);
     }
+    geometry._gcLastUsed = this._renderer.gc.now;
   }
   /**
    * Check compatibility between a geometry and a program
@@ -33098,7 +33495,7 @@ class GlGeometrySystem {
     return strings.join("-");
   }
   getVao(geometry, program) {
-    return this._geometryVaoHash[geometry.uid]?.[program._key] || this.initGeometryVao(geometry, program);
+    return geometry._gpuData[this._renderer.uid]?.vaoCache[program._key] || this.initGeometryVao(geometry, program);
   }
   /**
    * Creates or gets Vao with the same structure as the geometry and stores it on the geometry.
@@ -33114,11 +33511,10 @@ class GlGeometrySystem {
     this._renderer.shader._getProgramData(program);
     this.checkCompatibility(geometry, program);
     const signature = this.getSignature(geometry, program);
-    if (!this._geometryVaoHash[geometry.uid]) {
-      this._geometryVaoHash[geometry.uid] = /* @__PURE__ */ Object.create(null);
-      geometry.on("destroy", this.onGeometryDestroy, this);
-    }
-    const vaoObjectHash = this._geometryVaoHash[geometry.uid];
+    const gpuData = new GlGeometryGpuData();
+    geometry._gpuData[this._renderer.uid] = gpuData;
+    this._managedGeometries.add(geometry);
+    const vaoObjectHash = gpuData.vaoCache;
     let vao = vaoObjectHash[signature];
     if (vao) {
       vaoObjectHash[program._key] = vao;
@@ -33138,24 +33534,18 @@ class GlGeometrySystem {
     gl.bindVertexArray(null);
     return vao;
   }
-  /**
-   * Disposes geometry.
-   * @param geometry - Geometry with buffers. Only VAO will be disposed
-   * @param [contextLost=false] - If context was lost, we suppress deleteVertexArray
-   */
-  onGeometryDestroy(geometry, contextLost) {
-    const vaoObjectHash = this._geometryVaoHash[geometry.uid];
-    const gl = this.gl;
-    if (vaoObjectHash) {
-      if (contextLost) {
-        for (const i in vaoObjectHash) {
-          if (this._activeVao !== vaoObjectHash[i]) {
-            this.unbind();
-          }
-          gl.deleteVertexArray(vaoObjectHash[i]);
+  onGeometryUnload(geometry, contextLost = false) {
+    const gpuData = geometry._gpuData[this._renderer.uid];
+    if (!gpuData)
+      return;
+    const vaoCache = gpuData.vaoCache;
+    if (!contextLost) {
+      for (const i in vaoCache) {
+        if (this._activeVao !== vaoCache[i]) {
+          this.resetState();
         }
+        this.gl.deleteVertexArray(vaoCache[i]);
       }
-      this._geometryVaoHash[geometry.uid] = null;
     }
   }
   /**
@@ -33163,19 +33553,7 @@ class GlGeometrySystem {
    * @param [contextLost=false] - If context was lost, we suppress `gl.delete` calls
    */
   destroyAll(contextLost = false) {
-    const gl = this.gl;
-    for (const i in this._geometryVaoHash) {
-      if (contextLost) {
-        for (const j in this._geometryVaoHash[i]) {
-          const vaoObjectHash = this._geometryVaoHash[i];
-          if (this._activeVao !== vaoObjectHash) {
-            this.unbind();
-          }
-          gl.deleteVertexArray(vaoObjectHash[j]);
-        }
-      }
-      this._geometryVaoHash[i] = null;
-    }
+    this._managedGeometries.removeAll(contextLost);
   }
   /**
    * Activate vertex array object.
@@ -33252,12 +33630,12 @@ class GlGeometrySystem {
     if (geometry.indexBuffer) {
       const byteSize = geometry.indexBuffer.data.BYTES_PER_ELEMENT;
       const glType = byteSize === 2 ? gl.UNSIGNED_SHORT : gl.UNSIGNED_INT;
-      if (instanceCount > 1) {
+      if (instanceCount !== 1) {
         gl.drawElementsInstanced(glTopology, size || geometry.indexBuffer.data.length, glType, (start || 0) * byteSize, instanceCount);
       } else {
         gl.drawElements(glTopology, size || geometry.indexBuffer.data.length, glType, (start || 0) * byteSize);
       }
-    } else if (instanceCount > 1) {
+    } else if (instanceCount !== 1) {
       gl.drawArraysInstanced(glTopology, start || 0, size || geometry.getSize(), instanceCount);
     } else {
       gl.drawArrays(glTopology, start || 0, size || geometry.getSize());
@@ -33271,11 +33649,11 @@ class GlGeometrySystem {
     this._activeGeometry = null;
   }
   destroy() {
+    this._managedGeometries.destroy();
     this._renderer = null;
     this.gl = null;
     this._activeVao = null;
     this._activeGeometry = null;
-    this._geometryVaoHash = null;
   }
 }
 /** @ignore */
@@ -34076,6 +34454,11 @@ class GlRenderTargetAdaptor {
   contextChange() {
     this._clearColorCache = [0, 0, 0, 0];
     this._viewPortCache = new Rectangle();
+    const gl = this._renderer.gl;
+    this._drawBuffersCache = [];
+    for (let i = 1; i <= 16; i++) {
+      this._drawBuffersCache[i] = Array.from({ length: i }, (_, j) => gl.COLOR_ATTACHMENT0 + j);
+    }
   }
   copyToTexture(sourceRenderSurfaceTexture, destinationTexture, originSrc, size, originDest) {
     const renderTargetSystem = this._renderTargetSystem;
@@ -34103,13 +34486,16 @@ class GlRenderTargetAdaptor {
     const gpuRenderTarget = renderTargetSystem.getGpuRenderTarget(renderTarget);
     let viewPortY = viewport.y;
     if (renderTarget.isRoot) {
-      viewPortY = source.pixelHeight - viewport.height;
+      viewPortY = source.pixelHeight - viewport.height - viewport.y;
     }
     renderTarget.colorTextures.forEach((texture) => {
       this._renderer.texture.unbind(texture);
     });
     const gl = this._renderer.gl;
     gl.bindFramebuffer(gl.FRAMEBUFFER, gpuRenderTarget.framebuffer);
+    if (renderTarget.colorTextures.length > 1) {
+      this._setDrawBuffers(renderTarget, gl);
+    }
     const viewPortCache = this._viewPortCache;
     if (viewPortCache.x !== viewport.x || viewPortCache.y !== viewPortY || viewPortCache.width !== viewport.width || viewPortCache.height !== viewport.height) {
       viewPortCache.x = viewport.x;
@@ -34223,7 +34609,8 @@ class GlRenderTargetAdaptor {
     gl.bindFramebuffer(gl.FRAMEBUFFER, resolveTargetFramebuffer);
     glRenderTarget.width = renderTarget.colorTexture.source.pixelWidth;
     glRenderTarget.height = renderTarget.colorTexture.source.pixelHeight;
-    renderTarget.colorTextures.forEach((colorTexture, i) => {
+    const colorTextures = renderTarget.colorTextures;
+    colorTextures.forEach((colorTexture, i) => {
       const source = colorTexture.source;
       if (source.antialias) {
         if (renderer.context.supports.msaa) {
@@ -34357,6 +34744,20 @@ class GlRenderTargetAdaptor {
       );
     }
   }
+  _setDrawBuffers(renderTarget, gl) {
+    const count = renderTarget.colorTextures.length;
+    const bufferArray = this._drawBuffersCache[count];
+    if (this._renderer.context.webGLVersion === 1) {
+      const ext = this._renderer.context.extensions.drawBuffers;
+      if (!ext) {
+        warn("[RenderTexture] This WebGL1 context does not support rendering to multiple targets");
+      } else {
+        ext.drawBuffersWEBGL(bufferArray);
+      }
+    } else {
+      gl.drawBuffers(bufferArray);
+    }
+  }
 }
 
 function calculateProjection(pm, x, y, width, height, flipY) {
@@ -34901,6 +35302,7 @@ class BufferResource extends EventEmitter {
     }
     this.emit("change", this);
     this.buffer = null;
+    this.removeAllListeners();
   }
 }
 
@@ -35315,7 +35717,6 @@ class GlShaderSystem {
     this._programDataHash = /* @__PURE__ */ Object.create(null);
     this._shaderSyncFunctions = /* @__PURE__ */ Object.create(null);
     this._renderer = renderer;
-    this._renderer.renderableGC.addManagedHash(this, "_programDataHash");
   }
   contextChange(gl) {
     this._gl = gl;
@@ -35402,9 +35803,7 @@ class GlShaderSystem {
   }
   destroy() {
     for (const key of Object.keys(this._programDataHash)) {
-      const programData = this._programDataHash[key];
-      programData.destroy();
-      this._programDataHash[key] = null;
+      this._programDataHash[key].destroy();
     }
     this._programDataHash = null;
     this._shaderSyncFunctions = null;
@@ -35948,6 +36347,8 @@ class GlTexture {
     this.format = GL_FORMATS.RGBA;
     this.samplerType = 0;
   }
+  destroy() {
+  }
 }
 
 const glUploadBufferImageResource = {
@@ -36487,8 +36888,6 @@ function mapFormatToGlType(gl) {
 const BYTES_PER_PIXEL = 4;
 class GlTextureSystem {
   constructor(renderer) {
-    this.managedTextures = [];
-    this._glTextures = /* @__PURE__ */ Object.create(null);
     this._glSamplers = /* @__PURE__ */ Object.create(null);
     this._boundTextures = [];
     this._activeTextureLocation = -1;
@@ -36503,8 +36902,18 @@ class GlTextureSystem {
     // TODO - separate samplers will be a cool thing to add, but not right now!
     this._useSeparateSamplers = false;
     this._renderer = renderer;
-    this._renderer.renderableGC.addManagedHash(this, "_glTextures");
-    this._renderer.renderableGC.addManagedHash(this, "_glSamplers");
+    this._managedTextures = new GCManagedHash({
+      renderer,
+      type: "resource",
+      onUnload: this.onSourceUnload.bind(this),
+      name: "glTexture"
+    });
+  }
+  /**
+   * @deprecated since 8.15.0
+   */
+  get managedTextures() {
+    return Object.values(this._managedTextures.items);
   }
   contextChange(gl) {
     this._gl = gl;
@@ -36513,7 +36922,7 @@ class GlTextureSystem {
       this._mapFormatToType = mapFormatToGlType(gl);
       this._mapFormatToFormat = mapFormatToGlFormat(gl);
     }
-    this._glTextures = /* @__PURE__ */ Object.create(null);
+    this._managedTextures.removeAll(true);
     this._glSamplers = /* @__PURE__ */ Object.create(null);
     this._boundSamplers = /* @__PURE__ */ Object.create(null);
     this._premultiplyAlpha = false;
@@ -36545,7 +36954,7 @@ class GlTextureSystem {
   }
   bindSource(source, location = 0) {
     const gl = this._gl;
-    source._touched = this._renderer.textureGC.count;
+    source._gcLastUsed = this._renderer.gc.now;
     if (this._boundTextures[location] !== source) {
       this._boundTextures[location] = source;
       this._activateLocation(location);
@@ -36596,15 +37005,13 @@ class GlTextureSystem {
       const biggestDimension = Math.max(source.width, source.height);
       source.mipLevelCount = Math.floor(Math.log2(biggestDimension)) + 1;
     }
-    this._glTextures[source.uid] = glTexture;
-    if (!this.managedTextures.includes(source)) {
+    source._gpuData[this._renderer.uid] = glTexture;
+    const added = this._managedTextures.add(source);
+    if (added) {
       source.on("update", this.onSourceUpdate, this);
       source.on("resize", this.onSourceUpdate, this);
       source.on("styleChange", this.onStyleChange, this);
-      source.on("destroy", this.onSourceDestroy, this);
-      source.on("unload", this.onSourceUnload, this);
       source.on("updateMipmaps", this.onUpdateMipmaps, this);
-      this.managedTextures.push(source);
     }
     this.onSourceUpdate(source);
     this.updateStyle(source, false);
@@ -36630,13 +37037,18 @@ class GlTextureSystem {
       firstCreation
     );
   }
-  onSourceUnload(source) {
-    const glTexture = this._glTextures[source.uid];
+  onSourceUnload(source, contextLost = false) {
+    const glTexture = source._gpuData[this._renderer.uid];
     if (!glTexture)
       return;
-    this.unbind(source);
-    this._glTextures[source.uid] = null;
-    this._gl.deleteTexture(glTexture.texture);
+    if (!contextLost) {
+      this.unbind(source);
+      this._gl.deleteTexture(glTexture.texture);
+    }
+    source.off("update", this.onSourceUpdate, this);
+    source.off("resize", this.onSourceUpdate, this);
+    source.off("styleChange", this.onStyleChange, this);
+    source.off("updateMipmaps", this.onUpdateMipmaps, this);
   }
   onSourceUpdate(source) {
     const gl = this._gl;
@@ -36651,7 +37063,17 @@ class GlTextureSystem {
     if (this._uploads[source.uploadMethodId]) {
       this._uploads[source.uploadMethodId].upload(source, glTexture, gl, this._renderer.context.webGLVersion);
     } else {
-      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, source.pixelWidth, source.pixelHeight, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
+      gl.texImage2D(
+        gl.TEXTURE_2D,
+        0,
+        glTexture.internalFormat,
+        source.pixelWidth,
+        source.pixelHeight,
+        0,
+        glTexture.format,
+        glTexture.type,
+        null
+      );
     }
     if (source.autoGenerateMipmaps && source.mipLevelCount > 1) {
       this.onUpdateMipmaps(source, false);
@@ -36663,16 +37085,6 @@ class GlTextureSystem {
     const glTexture = this.getGlSource(source);
     this._gl.generateMipmap(glTexture.target);
   }
-  onSourceDestroy(source) {
-    source.off("destroy", this.onSourceDestroy, this);
-    source.off("update", this.onSourceUpdate, this);
-    source.off("resize", this.onSourceUpdate, this);
-    source.off("unload", this.onSourceUnload, this);
-    source.off("styleChange", this.onStyleChange, this);
-    source.off("updateMipmaps", this.onUpdateMipmaps, this);
-    this.managedTextures.splice(this.managedTextures.indexOf(source), 1);
-    this.onSourceUnload(source);
-  }
   _initSampler(style) {
     const gl = this._gl;
     const glSampler = this._gl.createSampler();
@@ -36693,7 +37105,8 @@ class GlTextureSystem {
     return this._glSamplers[sampler._resourceId] || this._initSampler(sampler);
   }
   getGlSource(source) {
-    return this._glTextures[source.uid] || this._initSource(source);
+    source._gcLastUsed = this._renderer.gc.now;
+    return source._gpuData[this._renderer.uid] || this._initSource(source);
   }
   generateCanvas(texture) {
     const { pixels, width, height } = this.getPixels(texture);
@@ -36731,9 +37144,7 @@ class GlTextureSystem {
     return { pixels: new Uint8ClampedArray(pixels.buffer), width, height };
   }
   destroy() {
-    this.managedTextures.slice().forEach((source) => this.onSourceDestroy(source));
-    this.managedTextures = null;
-    this._glTextures = null;
+    this._managedTextures.destroy();
     this._glSamplers = null;
     this._boundTextures = null;
     this._boundSamplers = null;
@@ -36937,6 +37348,7 @@ class BatchableSprite {
     this.bounds = null;
   }
   destroy() {
+    this.reset();
   }
 }
 
@@ -37149,9 +37561,9 @@ function updateColorBlendVisibility(container, parent, updateFlags) {
 }
 
 function validateRenderables(renderGroup, renderPipes) {
-  const { list, index } = renderGroup.childrenRenderablesToUpdate;
+  const { list } = renderGroup.childrenRenderablesToUpdate;
   let rebuildRequired = false;
-  for (let i = 0; i < index; i++) {
+  for (let i = 0; i < renderGroup.childrenRenderablesToUpdate.index; i++) {
     const container = list[i];
     const renderable = container;
     const pipe = renderPipes[renderable.renderPipeId];
@@ -37963,9 +38375,19 @@ _ExtractSystem.defaultImageOptions = {
 let ExtractSystem = _ExtractSystem;
 
 class RenderTexture extends Texture {
+  /**
+   * Creates a RenderTexture. Pass `dynamic: true` in options to allow resizing after creation.
+   * @param options - Options for the RenderTexture, including width, height, and dynamic.
+   * @returns A new RenderTexture instance.
+   * @example
+   * const rt = RenderTexture.create({ width: 100, height: 100, dynamic: true });
+   * rt.resize(500, 500);
+   */
   static create(options) {
+    const { dynamic, ...rest } = options;
     return new RenderTexture({
-      source: new TextureSource(options)
+      source: new TextureSource(rest),
+      dynamic: dynamic ?? false
     });
   }
   /**
@@ -38076,6 +38498,278 @@ GenerateTextureSystem.extension = {
   name: "textureGenerator"
 };
 
+const _GCSystem = class _GCSystem {
+  /**
+   * Creates a new GCSystem instance.
+   * @param renderer - The renderer this garbage collection system works for
+   */
+  constructor(renderer) {
+    /** Array of resources being tracked for garbage collection */
+    this._managedResources = [];
+    this._managedResourceHashes = [];
+    this._ready = false;
+    this._renderer = renderer;
+  }
+  /**
+   * Initializes the garbage collection system with the provided options.
+   * @param options - Configuration options
+   */
+  init(options) {
+    options = { ..._GCSystem.defaultOptions, ...options };
+    this.maxUnusedTime = options.gcMaxUnusedTime;
+    this._frequency = options.gcFrequency;
+    this.enabled = options.gcActive;
+    this.now = performance.now();
+  }
+  /**
+   * Gets whether the garbage collection system is currently enabled.
+   * @returns True if GC is enabled, false otherwise
+   */
+  get enabled() {
+    return !!this._handler;
+  }
+  /**
+   * Enables or disables the garbage collection system.
+   * When enabled, schedules periodic cleanup of resources.
+   * When disabled, cancels all scheduled cleanups.
+   */
+  set enabled(value) {
+    if (this.enabled === value)
+      return;
+    if (value) {
+      this._handler = this._renderer.scheduler.repeat(
+        () => {
+          this._ready = true;
+        },
+        this._frequency,
+        false
+      );
+    } else {
+      this._renderer.scheduler.cancel(this._handler);
+      this._handler = 0;
+    }
+  }
+  /**
+   * Called before rendering. Updates the current timestamp.
+   * @param options - The render options
+   * @param options.container - The container to render
+   */
+  prerender({ container }) {
+    this.now = performance.now();
+    container.renderGroup.gcTick = this._renderer.tick++;
+    this._updateInstructionGCTick(container.renderGroup, container.renderGroup.gcTick);
+  }
+  /** Performs garbage collection after rendering. */
+  postrender() {
+    if (!this._ready || !this.enabled)
+      return;
+    this.run();
+    this._ready = false;
+  }
+  /**
+   * Updates the GC tick counter for a render group and its children.
+   * @param renderGroup - The render group to update
+   * @param gcTick - The new tick value
+   */
+  _updateInstructionGCTick(renderGroup, gcTick) {
+    renderGroup.instructionSet.gcTick = gcTick;
+    for (const child of renderGroup.renderGroupChildren) {
+      this._updateInstructionGCTick(child, gcTick);
+    }
+  }
+  /**
+   * Registers a resource for garbage collection tracking.
+   * @param resource - The resource to track
+   * @param type - The type of resource to track
+   */
+  addResource(resource, type) {
+    if (resource._gcLastUsed !== -1) {
+      resource._gcLastUsed = this.now;
+      resource._onTouch?.(this.now);
+      return;
+    }
+    const index = this._managedResources.length;
+    resource._gcData = {
+      index,
+      type
+    };
+    resource._gcLastUsed = this.now;
+    resource._onTouch?.(this.now);
+    resource.once("unload", this.removeResource, this);
+    this._managedResources.push(resource);
+  }
+  /**
+   * Removes a resource from garbage collection tracking.
+   * Call this when manually destroying a resource.
+   * @param resource - The resource to stop tracking
+   */
+  removeResource(resource) {
+    const gcData = resource._gcData;
+    if (!gcData)
+      return;
+    const index = gcData.index;
+    const last = this._managedResources.length - 1;
+    if (index !== last) {
+      const lastResource = this._managedResources[last];
+      this._managedResources[index] = lastResource;
+      lastResource._gcData.index = index;
+    }
+    this._managedResources.length--;
+    resource._gcData = null;
+    resource._gcLastUsed = -1;
+  }
+  /**
+   * Registers a hash-based resource collection for garbage collection tracking.
+   * Resources in the hash will be automatically tracked and cleaned up when unused.
+   * @param context - The object containing the hash property
+   * @param hash - The property name on context that holds the resource hash
+   * @param type - The type of resources in the hash ('resource' or 'renderable')
+   * @param priority - Processing priority (lower values are processed first)
+   */
+  addResourceHash(context, hash, type, priority = 0) {
+    this._managedResourceHashes.push({
+      context,
+      hash,
+      type,
+      priority
+    });
+    this._managedResourceHashes.sort((a, b) => a.priority - b.priority);
+  }
+  /**
+   * Performs garbage collection by cleaning up unused resources.
+   * Removes resources that haven't been used for longer than maxUnusedTime.
+   */
+  run() {
+    const now = performance.now();
+    const managedResourceHashes = this._managedResourceHashes;
+    for (const hashEntry of managedResourceHashes) {
+      this.runOnHash(hashEntry, now);
+    }
+    let writeIndex = 0;
+    for (let i = 0; i < this._managedResources.length; i++) {
+      const resource = this._managedResources[i];
+      writeIndex = this.runOnResource(resource, now, writeIndex);
+    }
+    this._managedResources.length = writeIndex;
+  }
+  updateRenderableGCTick(renderable, now) {
+    const renderGroup = renderable.renderGroup ?? renderable.parentRenderGroup;
+    const currentTick = renderGroup?.instructionSet?.gcTick ?? -1;
+    if ((renderGroup?.gcTick ?? 0) === currentTick) {
+      renderable._gcLastUsed = now;
+      renderable._onTouch?.(now);
+    }
+  }
+  runOnResource(resource, now, writeIndex) {
+    const gcData = resource._gcData;
+    if (gcData.type === "renderable") {
+      this.updateRenderableGCTick(resource, now);
+    }
+    const isRecentlyUsed = now - resource._gcLastUsed < this.maxUnusedTime;
+    if (isRecentlyUsed || !resource.autoGarbageCollect) {
+      this._managedResources[writeIndex] = resource;
+      gcData.index = writeIndex;
+      writeIndex++;
+    } else {
+      resource.unload();
+      resource._gcData = null;
+      resource._gcLastUsed = -1;
+      resource.off("unload", this.removeResource, this);
+    }
+    return writeIndex;
+  }
+  /**
+   * Creates a clone of the hash, copying all non-null entries up to (but not including) the stop key.
+   * @param hashValue - The original hash to clone from
+   * @param stopKey - The key to stop at (exclusive)
+   * @returns A new hash object with copied entries
+   */
+  _createHashClone(hashValue, stopKey) {
+    const hashClone = /* @__PURE__ */ Object.create(null);
+    for (const k in hashValue) {
+      if (k === stopKey)
+        break;
+      if (hashValue[k] !== null)
+        hashClone[k] = hashValue[k];
+    }
+    return hashClone;
+  }
+  runOnHash(hashEntry, now) {
+    const { context, hash, type } = hashEntry;
+    const hashValue = context[hash];
+    let hashClone = null;
+    let nullCount = 0;
+    for (const key in hashValue) {
+      const resource = hashValue[key];
+      if (resource === null) {
+        nullCount++;
+        if (nullCount === 1e4 && !hashClone) {
+          hashClone = this._createHashClone(hashValue, key);
+        }
+        continue;
+      }
+      if (resource._gcLastUsed === -1) {
+        resource._gcLastUsed = now;
+        resource._onTouch?.(now);
+        if (hashClone)
+          hashClone[key] = resource;
+        continue;
+      }
+      if (type === "renderable") {
+        this.updateRenderableGCTick(resource, now);
+      }
+      const isRecentlyUsed = now - resource._gcLastUsed < this.maxUnusedTime;
+      if (!isRecentlyUsed && resource.autoGarbageCollect) {
+        if (!hashClone) {
+          if (nullCount + 1 !== 1e4) {
+            hashValue[key] = null;
+            nullCount++;
+          } else {
+            hashClone = this._createHashClone(hashValue, key);
+          }
+        }
+        resource.unload();
+        resource._gcData = null;
+        resource._gcLastUsed = -1;
+      } else if (hashClone) {
+        hashClone[key] = resource;
+      }
+    }
+    if (hashClone) {
+      context[hash] = hashClone;
+    }
+  }
+  /** Cleans up the garbage collection system. Disables GC and removes all tracked resources. */
+  destroy() {
+    this.enabled = false;
+    this._managedResources.forEach((resource) => {
+      resource.off("unload", this.removeResource, this);
+    });
+    this._managedResources.length = 0;
+    this._managedResourceHashes.length = 0;
+    this._renderer = null;
+  }
+};
+/** @ignore */
+_GCSystem.extension = {
+  type: [
+    ExtensionType.WebGLSystem,
+    ExtensionType.WebGPUSystem
+  ],
+  name: "gc",
+  priority: 0
+};
+/** Default options for the GCSystem */
+_GCSystem.defaultOptions = {
+  /** Enable/disable the garbage collector */
+  gcActive: true,
+  /** Time in ms before an unused resource is collected (default 1 minute) */
+  gcMaxUnusedTime: 6e4,
+  /** How often to run garbage collection in ms (default 30 seconds) */
+  gcFrequency: 3e4
+};
+let GCSystem = _GCSystem;
+
 function color32BitToUniform(abgr, out, offset) {
   const alpha = (abgr >> 24 & 255) / 255;
   out[offset++] = (abgr & 255) / 255 * alpha;
@@ -38582,48 +39276,86 @@ _RenderableGCSystem.defaultOptions = {
 let RenderableGCSystem = _RenderableGCSystem;
 
 const _TextureGCSystem = class _TextureGCSystem {
+  /**
+   * Frame count since started.
+   * @readonly
+   * @deprecated since 8.15.0
+   */
+  get count() {
+    return this._renderer.tick;
+  }
+  /**
+   * Frame count since last garbage collection.
+   * @readonly
+   * @deprecated since 8.15.0
+   */
+  get checkCount() {
+    return this._checkCount;
+  }
+  set checkCount(value) {
+    deprecation("8.15.0", "TextureGCSystem.run is deprecated, please use the GCSystem instead.");
+    this._checkCount = value;
+  }
+  /**
+   * Maximum idle frames before a texture is destroyed by garbage collection.
+   * @see TextureGCSystem.defaultMaxIdle
+   * @deprecated since 8.15.0
+   */
+  get maxIdle() {
+    return this._renderer.gc.maxUnusedTime / 1e3 * 60;
+  }
+  set maxIdle(value) {
+    deprecation("8.15.0", "TextureGCSystem.run is deprecated, please use the GCSystem instead.");
+    this._renderer.gc.maxUnusedTime = value / 60 * 1e3;
+  }
+  /**
+   * Frames between two garbage collections.
+   * @see TextureGCSystem.defaultCheckCountMax
+   * @deprecated since 8.15.0
+   */
+  // eslint-disable-next-line dot-notation
+  get checkCountMax() {
+    return Math.floor(this._renderer.gc["_frequency"] / 1e3);
+  }
+  set checkCountMax(_value) {
+    deprecation("8.15.0", "TextureGCSystem.run is deprecated, please use the GCSystem instead.");
+  }
+  /**
+   * Current garbage collection mode.
+   * @see TextureGCSystem.defaultMode
+   * @deprecated since 8.15.0
+   */
+  get active() {
+    return this._renderer.gc.enabled;
+  }
+  set active(value) {
+    deprecation("8.15.0", "TextureGCSystem.run is deprecated, please use the GCSystem instead.");
+    this._renderer.gc.enabled = value;
+  }
   /** @param renderer - The renderer this System works for. */
   constructor(renderer) {
     this._renderer = renderer;
-    this.count = 0;
-    this.checkCount = 0;
+    this._checkCount = 0;
   }
   init(options) {
-    options = { ..._TextureGCSystem.defaultOptions, ...options };
-    this.checkCountMax = options.textureGCCheckCountMax;
-    this.maxIdle = options.textureGCAMaxIdle ?? options.textureGCMaxIdle;
-    this.active = options.textureGCActive;
-  }
-  /**
-   * Checks to see when the last time a texture was used.
-   * If the texture has not been used for a specified amount of time, it will be removed from the GPU.
-   */
-  postrender() {
-    if (!this._renderer.renderingToScreen) {
-      return;
+    if (options.textureGCActive !== _TextureGCSystem.defaultOptions.textureGCActive) {
+      this.active = options.textureGCActive;
     }
-    this.count++;
-    if (!this.active)
-      return;
-    this.checkCount++;
-    if (this.checkCount > this.checkCountMax) {
-      this.checkCount = 0;
-      this.run();
+    if (options.textureGCMaxIdle !== _TextureGCSystem.defaultOptions.textureGCMaxIdle) {
+      this.maxIdle = options.textureGCMaxIdle;
+    }
+    if (options.textureGCCheckCountMax !== _TextureGCSystem.defaultOptions.textureGCCheckCountMax) {
+      this.checkCountMax = options.textureGCCheckCountMax;
     }
   }
   /**
    * Checks to see when the last time a texture was used.
    * If the texture has not been used for a specified amount of time, it will be removed from the GPU.
+   * @deprecated since 8.15.0
    */
   run() {
-    const managedTextures = this._renderer.texture.managedTextures;
-    for (let i = 0; i < managedTextures.length; i++) {
-      const texture = managedTextures[i];
-      if (texture.autoGarbageCollect && texture.resource && texture._touched > -1 && this.count - texture._touched > this.maxIdle) {
-        texture._touched = -1;
-        texture.unload();
-      }
-    }
+    deprecation("8.15.0", "TextureGCSystem.run is deprecated, please use the GCSystem instead.");
+    this._renderer.gc.run();
   }
   destroy() {
     this._renderer = null;
@@ -38637,7 +39369,10 @@ _TextureGCSystem.extension = {
   ],
   name: "textureGC"
 };
-/** default options for the TextureGCSystem */
+/**
+ * Default options for the TextureGCSystem
+ * @deprecated since 8.15.0
+ */
 _TextureGCSystem.defaultOptions = {
   /**
    * If set to true, this will enable the garbage collector on the GPU.
@@ -38778,6 +39513,7 @@ const SharedSystems = [
   HelloSystem,
   ViewSystem,
   RenderGroupSystem,
+  GCSystem,
   TextureGCSystem,
   GenerateTextureSystem,
   ExtractSystem,
@@ -38844,7 +39580,6 @@ class BindGroupSystem {
   constructor(renderer) {
     this._hash = /* @__PURE__ */ Object.create(null);
     this._renderer = renderer;
-    this._renderer.renderableGC.addManagedHash(this, "_hash");
   }
   contextChange(gpu) {
     this._gpu = gpu;
@@ -38890,7 +39625,7 @@ class BindGroupSystem {
         gpuResource = renderer.texture.getGpuSampler(sampler);
       } else if (resource._resourceType === "textureSource") {
         const texture = resource;
-        gpuResource = renderer.texture.getGpuSource(texture).createView({});
+        gpuResource = renderer.texture.getGpuSource(texture).createView();
       }
       entries.push({
         binding: groupLayout[j],
@@ -38906,9 +39641,6 @@ class BindGroupSystem {
     return gpuBindGroup;
   }
   destroy() {
-    for (const key of Object.keys(this._hash)) {
-      this._hash[key] = null;
-    }
     this._hash = null;
     this._renderer = null;
   }
@@ -38921,20 +39653,34 @@ BindGroupSystem.extension = {
   name: "bindGroup"
 };
 
+class GpuBufferData {
+  constructor(gpuBuffer) {
+    this.gpuBuffer = gpuBuffer;
+  }
+  destroy() {
+    this.gpuBuffer.destroy();
+    this.gpuBuffer = null;
+  }
+}
 class GpuBufferSystem {
   constructor(renderer) {
-    this._gpuBuffers = /* @__PURE__ */ Object.create(null);
-    this._managedBuffers = [];
-    renderer.renderableGC.addManagedHash(this, "_gpuBuffers");
+    this._renderer = renderer;
+    this._managedBuffers = new GCManagedHash({
+      renderer,
+      type: "resource",
+      onUnload: this.onBufferUnload.bind(this),
+      name: "gpuBuffer"
+    });
   }
   contextChange(gpu) {
     this._gpu = gpu;
   }
   getGPUBuffer(buffer) {
-    return this._gpuBuffers[buffer.uid] || this.createGPUBuffer(buffer);
+    buffer._gcLastUsed = this._renderer.gc.now;
+    return buffer._gpuData[this._renderer.uid]?.gpuBuffer || this.createGPUBuffer(buffer);
   }
   updateBuffer(buffer) {
-    const gpuBuffer = this._gpuBuffers[buffer.uid] || this.createGPUBuffer(buffer);
+    const gpuBuffer = this.getGPUBuffer(buffer);
     const data = buffer.data;
     if (buffer._updateID && data) {
       buffer._updateID = 0;
@@ -38951,53 +39697,36 @@ class GpuBufferSystem {
   }
   /** dispose all WebGL resources of all managed buffers */
   destroyAll() {
-    for (const id in this._gpuBuffers) {
-      this._gpuBuffers[id].destroy();
-    }
-    this._gpuBuffers = {};
+    this._managedBuffers.removeAll();
+  }
+  onBufferUnload(buffer) {
+    buffer.off("update", this.updateBuffer, this);
+    buffer.off("change", this.onBufferChange, this);
   }
   createGPUBuffer(buffer) {
-    if (!this._gpuBuffers[buffer.uid]) {
-      buffer.on("update", this.updateBuffer, this);
-      buffer.on("change", this.onBufferChange, this);
-      buffer.on("destroy", this.onBufferDestroy, this);
-      this._managedBuffers.push(buffer);
-    }
     const gpuBuffer = this._gpu.device.createBuffer(buffer.descriptor);
     buffer._updateID = 0;
+    buffer._resourceId = uid$1("resource");
     if (buffer.data) {
       fastCopy(buffer.data.buffer, gpuBuffer.getMappedRange());
       gpuBuffer.unmap();
     }
-    this._gpuBuffers[buffer.uid] = gpuBuffer;
+    buffer._gpuData[this._renderer.uid] = new GpuBufferData(gpuBuffer);
+    if (this._managedBuffers.add(buffer)) {
+      buffer.on("update", this.updateBuffer, this);
+      buffer.on("change", this.onBufferChange, this);
+    }
     return gpuBuffer;
   }
   onBufferChange(buffer) {
-    const gpuBuffer = this._gpuBuffers[buffer.uid];
-    gpuBuffer.destroy();
+    this._managedBuffers.remove(buffer);
     buffer._updateID = 0;
-    this._gpuBuffers[buffer.uid] = this.createGPUBuffer(buffer);
-  }
-  /**
-   * Disposes buffer
-   * @param buffer - buffer with data
-   */
-  onBufferDestroy(buffer) {
-    this._managedBuffers.splice(this._managedBuffers.indexOf(buffer), 1);
-    this._destroyBuffer(buffer);
+    this.createGPUBuffer(buffer);
   }
   destroy() {
-    this._managedBuffers.forEach((buffer) => this._destroyBuffer(buffer));
-    this._managedBuffers = null;
-    this._gpuBuffers = null;
-  }
-  _destroyBuffer(buffer) {
-    const gpuBuffer = this._gpuBuffers[buffer.uid];
-    gpuBuffer.destroy();
-    buffer.off("update", this.updateBuffer, this);
-    buffer.off("change", this.onBufferChange, this);
-    buffer.off("destroy", this.onBufferDestroy, this);
-    this._gpuBuffers[buffer.uid] = null;
+    this._managedBuffers.destroy();
+    this._renderer = null;
+    this._gpu = null;
   }
 }
 /** @ignore */
@@ -39194,7 +39923,7 @@ class GpuEncoderSystem {
     if (this._boundBindGroup[index] === bindGroup)
       return;
     this._boundBindGroup[index] = bindGroup;
-    bindGroup._touch(this._renderer.textureGC.count);
+    bindGroup._touch(this._renderer.gc.now, this._renderer.tick);
     const gpuBindGroup = this._renderer.bindGroup.getBindGroup(bindGroup, program, index);
     this.renderPassEncoder.setBindGroup(index, gpuBindGroup);
   }
@@ -39480,7 +40209,6 @@ class GpuUniformBatchPipe {
     this._bindGroups = [];
     this._bufferResources = [];
     this._renderer = renderer;
-    this._renderer.renderableGC.addManagedHash(this, "_bindGroupHash");
     this._batchBuffer = new UboBatch({ minUniformOffsetAlignment });
     const totalBuffers = 256 / minUniformOffsetAlignment;
     for (let i = 0; i < totalBuffers; i++) {
@@ -39498,9 +40226,7 @@ class GpuUniformBatchPipe {
     this._resetBindGroups();
   }
   _resetBindGroups() {
-    for (const i in this._bindGroupHash) {
-      this._bindGroupHash[i] = null;
-    }
+    this._bindGroupHash = /* @__PURE__ */ Object.create(null);
     this._batchBuffer.clear();
   }
   // just works for single bind groups for now
@@ -39583,7 +40309,6 @@ class GpuUniformBatchPipe {
     }
     this._bufferResources = null;
     this._batchBuffer.destroy();
-    this._bindGroupHash = null;
     this._renderer = null;
   }
 }
@@ -39605,8 +40330,8 @@ const topologyStringToId = {
 function getGraphicsStateKey(geometryLayout, shaderKey, state, blendMode, topology) {
   return geometryLayout << 24 | shaderKey << 16 | state << 10 | blendMode << 5 | topology;
 }
-function getGlobalStateKey(stencilStateId, multiSampleCount, colorMask, renderTarget) {
-  return colorMask << 6 | stencilStateId << 3 | renderTarget << 1 | multiSampleCount;
+function getGlobalStateKey(stencilStateId, multiSampleCount, colorMask, renderTarget, colorTargetCount) {
+  return colorMask << 8 | stencilStateId << 5 | renderTarget << 3 | colorTargetCount << 1 | multiSampleCount;
 }
 class PipelineSystem {
   constructor(renderer) {
@@ -39617,6 +40342,7 @@ class PipelineSystem {
     this._pipeStateCaches = /* @__PURE__ */ Object.create(null);
     this._colorMask = 15;
     this._multisampleCount = 1;
+    this._colorTargetCount = 1;
     this._renderer = renderer;
   }
   contextChange(gpu) {
@@ -39633,6 +40359,7 @@ class PipelineSystem {
   setRenderTarget(renderTarget) {
     this._multisampleCount = renderTarget.msaaSamples;
     this._depthStencilAttachment = renderTarget.descriptor.depthStencilAttachment ? 1 : 0;
+    this._colorTargetCount = renderTarget.colorTargetCount;
     this._updatePipeHash();
   }
   setColorMask(colorMask) {
@@ -39673,8 +40400,11 @@ class PipelineSystem {
   _createPipeline(geometry, program, state, topology) {
     const device = this._gpu.device;
     const buffers = this._createVertexBufferLayouts(geometry, program);
-    const blendModes = this._renderer.state.getColorTargets(state);
-    blendModes[0].writeMask = this._stencilMode === STENCIL_MODES.RENDERING_MASK_ADD ? 0 : this._colorMask;
+    const blendModes = this._renderer.state.getColorTargets(state, this._colorTargetCount);
+    const writeMask = this._stencilMode === STENCIL_MODES.RENDERING_MASK_ADD ? 0 : this._colorMask;
+    for (let i = 0; i < blendModes.length; i++) {
+      blendModes[i].writeMask = writeMask;
+    }
     const layout = this._renderer.shader.getProgramData(program).pipeline;
     const descriptor = {
       // TODO later check if its helpful to create..
@@ -39818,7 +40548,8 @@ class PipelineSystem {
       this._stencilMode,
       this._multisampleCount,
       this._colorMask,
-      this._depthStencilAttachment
+      this._depthStencilAttachment,
+      this._colorTargetCount
     );
     if (!this._pipeStateCaches[key]) {
       this._pipeStateCaches[key] = /* @__PURE__ */ Object.create(null);
@@ -39978,6 +40709,7 @@ class GpuRenderTargetAdaptor {
   initGpuRenderTarget(renderTarget) {
     renderTarget.isRoot = true;
     const gpuRenderTarget = new GpuRenderTarget();
+    gpuRenderTarget.colorTargetCount = renderTarget.colorTextures.length;
     renderTarget.colorTextures.forEach((colorTexture, i) => {
       if (colorTexture instanceof CanvasSource) {
         const context = colorTexture.resource.getContext(
@@ -40250,16 +40982,20 @@ class GpuStateSystem {
   /**
    * Gets the blend mode data for the current state
    * @param state - The state to get the blend mode from
+   * @param count - The number of color targets to create
    */
-  getColorTargets(state) {
+  getColorTargets(state, count) {
     const blend = GpuBlendModesToPixi[state.blendMode] || GpuBlendModesToPixi.normal;
-    return [
-      {
-        format: "bgra8unorm",
-        writeMask: 0,
-        blend
-      }
-    ];
+    const targets = [];
+    const target = {
+      format: "bgra8unorm",
+      writeMask: 0,
+      blend
+    };
+    for (let i = 0; i < count; i++) {
+      targets[i] = target;
+    }
+    return targets;
   }
   destroy() {
     this.gpu = null;
@@ -40285,7 +41021,7 @@ const gpuUploadBufferImageResource = {
       {
         offset: 0,
         rowsPerImage: source.pixelHeight,
-        bytesPerRow: source.pixelHeight * bytesPerPixel
+        bytesPerRow: source.pixelWidth * bytesPerPixel
       },
       {
         width: source.pixelWidth,
@@ -40524,13 +41260,22 @@ class GpuMipmapGenerator {
   }
 }
 
+class GPUTextureGpuData {
+  constructor(gpuTexture) {
+    this.textureView = null;
+    this.gpuTexture = gpuTexture;
+  }
+  /** Destroys this GPU data instance. */
+  destroy() {
+    this.gpuTexture.destroy();
+    this.textureView = null;
+    this.gpuTexture = null;
+  }
+}
 class GpuTextureSystem {
   constructor(renderer) {
-    this.managedTextures = [];
-    this._gpuSources = /* @__PURE__ */ Object.create(null);
     this._gpuSamplers = /* @__PURE__ */ Object.create(null);
     this._bindGroupHash = /* @__PURE__ */ Object.create(null);
-    this._textureViewHash = /* @__PURE__ */ Object.create(null);
     this._uploads = {
       image: gpuUploadImageResource,
       buffer: gpuUploadBufferImageResource,
@@ -40538,10 +41283,19 @@ class GpuTextureSystem {
       compressed: gpuUploadCompressedTextureResource
     };
     this._renderer = renderer;
-    renderer.renderableGC.addManagedHash(this, "_gpuSources");
-    renderer.renderableGC.addManagedHash(this, "_gpuSamplers");
     renderer.renderableGC.addManagedHash(this, "_bindGroupHash");
-    renderer.renderableGC.addManagedHash(this, "_textureViewHash");
+    this._managedTextures = new GCManagedHash({
+      renderer,
+      type: "resource",
+      onUnload: this.onSourceUnload.bind(this),
+      name: "gpuTextureSource"
+    });
+  }
+  /**
+   * @deprecated since 8.15.0
+   */
+  get managedTextures() {
+    return Object.values(this._managedTextures.items);
   }
   contextChange(gpu) {
     this._gpu = gpu;
@@ -40552,10 +41306,7 @@ class GpuTextureSystem {
    * @returns The initialized texture source.
    */
   initSource(source) {
-    if (this._gpuSources[source.uid]) {
-      return this._gpuSources[source.uid];
-    }
-    return this._initSource(source);
+    return source._gpuData[this._renderer.uid]?.gpuTexture || this._initSource(source);
   }
   _initSource(source) {
     if (source.autoGenerateMipmaps) {
@@ -40579,14 +41330,13 @@ class GpuTextureSystem {
       dimension: source.dimension,
       usage
     };
-    const gpuTexture = this._gpuSources[source.uid] = this._gpu.device.createTexture(textureDescriptor);
-    if (!this.managedTextures.includes(source)) {
+    const gpuTexture = this._gpu.device.createTexture(textureDescriptor);
+    source._gpuData[this._renderer.uid] = new GPUTextureGpuData(gpuTexture);
+    const added = this._managedTextures.add(source);
+    if (added) {
       source.on("update", this.onSourceUpdate, this);
       source.on("resize", this.onSourceResize, this);
-      source.on("destroy", this.onSourceDestroy, this);
-      source.on("unload", this.onSourceUnload, this);
       source.on("updateMipmaps", this.onUpdateMipmaps, this);
-      this.managedTextures.push(source);
     }
     this.onSourceUpdate(source);
     return gpuTexture;
@@ -40602,13 +41352,6 @@ class GpuTextureSystem {
       this.onUpdateMipmaps(source);
     }
   }
-  onSourceUnload(source) {
-    const gpuTexture = this._gpuSources[source.uid];
-    if (gpuTexture) {
-      this._gpuSources[source.uid] = null;
-      gpuTexture.destroy();
-    }
-  }
   onUpdateMipmaps(source) {
     if (!this._mipmapGenerator) {
       this._mipmapGenerator = new GpuMipmapGenerator(this._gpu.device);
@@ -40616,23 +41359,21 @@ class GpuTextureSystem {
     const gpuTexture = this.getGpuSource(source);
     this._mipmapGenerator.generateMipmap(gpuTexture);
   }
-  onSourceDestroy(source) {
+  onSourceUnload(source) {
     source.off("update", this.onSourceUpdate, this);
-    source.off("unload", this.onSourceUnload, this);
-    source.off("destroy", this.onSourceDestroy, this);
     source.off("resize", this.onSourceResize, this);
     source.off("updateMipmaps", this.onUpdateMipmaps, this);
-    this.managedTextures.splice(this.managedTextures.indexOf(source), 1);
-    this.onSourceUnload(source);
   }
   onSourceResize(source) {
-    const gpuTexture = this._gpuSources[source.uid];
+    source._gcLastUsed = this._renderer.gc.now;
+    const gpuData = source._gpuData[this._renderer.uid];
+    const gpuTexture = gpuData?.gpuTexture;
     if (!gpuTexture) {
       this.initSource(source);
     } else if (gpuTexture.width !== source.pixelWidth || gpuTexture.height !== source.pixelHeight) {
-      this._textureViewHash[source.uid] = null;
+      gpuData.destroy();
       this._bindGroupHash[source.uid] = null;
-      this.onSourceUnload(source);
+      source._gpuData[this._renderer.uid] = null;
       this.initSource(source);
     }
   }
@@ -40644,7 +41385,8 @@ class GpuTextureSystem {
     return this._gpuSamplers[sampler._resourceId] || this._initSampler(sampler);
   }
   getGpuSource(source) {
-    return this._gpuSources[source.uid] || this.initSource(source);
+    source._gcLastUsed = this._renderer.gc.now;
+    return source._gpuData[this._renderer.uid]?.gpuTexture || this.initSource(source);
   }
   /**
    * this returns s bind group for a specific texture, the bind group contains
@@ -40656,7 +41398,7 @@ class GpuTextureSystem {
    * @returns the bind group for the texture
    */
   getTextureBindGroup(texture) {
-    return this._bindGroupHash[texture.uid] ?? this._createTextureBindGroup(texture);
+    return this._bindGroupHash[texture.uid] || this._createTextureBindGroup(texture);
   }
   _createTextureBindGroup(texture) {
     const source = texture.source;
@@ -40671,11 +41413,15 @@ class GpuTextureSystem {
   }
   getTextureView(texture) {
     const source = texture.source;
-    return this._textureViewHash[source.uid] ?? this._createTextureView(source);
-  }
-  _createTextureView(texture) {
-    this._textureViewHash[texture.uid] = this.getGpuSource(texture).createView();
-    return this._textureViewHash[texture.uid];
+    source._gcLastUsed = this._renderer.gc.now;
+    let gpuData = source._gpuData[this._renderer.uid];
+    let textureView = null;
+    if (!gpuData) {
+      this.initSource(source);
+      gpuData = source._gpuData[this._renderer.uid];
+    }
+    textureView = gpuData.textureView || gpuData.gpuTexture.createView();
+    return textureView;
   }
   generateCanvas(texture) {
     const renderer = this._renderer;
@@ -40717,20 +41463,17 @@ class GpuTextureSystem {
     return { pixels, width, height };
   }
   destroy() {
-    this.managedTextures.slice().forEach((source) => this.onSourceDestroy(source));
-    this.managedTextures = null;
+    this._managedTextures.destroy();
     for (const k of Object.keys(this._bindGroupHash)) {
       const key = Number(k);
       const bindGroup = this._bindGroupHash[key];
       bindGroup?.destroy();
-      this._bindGroupHash[key] = null;
     }
+    this._renderer = null;
     this._gpu = null;
     this._mipmapGenerator = null;
-    this._gpuSources = null;
-    this._bindGroupHash = null;
-    this._textureViewHash = null;
     this._gpuSamplers = null;
+    this._bindGroupHash = null;
   }
 }
 /** @ignore */
@@ -40947,6 +41690,7 @@ class GraphicsPipe {
     this.renderer = renderer;
     this._adaptor = adaptor;
     this.renderer.runners.contextChange.add(this);
+    this._managedGraphics = new GCManagedHash({ renderer, type: "renderable", priority: -1, name: "graphics" });
   }
   contextChange() {
     this._adaptor.contextChange(this.renderer);
@@ -41023,6 +41767,7 @@ class GraphicsPipe {
   _initGpuDataForRenderable(graphics) {
     const gpuData = new GraphicsGpuData();
     graphics._gpuData[this.renderer.uid] = gpuData;
+    this._managedGraphics.add(graphics);
     return gpuData;
   }
   _updateBatchesForRenderable(graphics, gpuData) {
@@ -41038,6 +41783,7 @@ class GraphicsPipe {
     });
   }
   destroy() {
+    this._managedGraphics.destroy();
     this.renderer = null;
     this._adaptor.destroy();
     this._adaptor = null;
@@ -41610,6 +42356,7 @@ class ParticleContainerPipe {
     this.adaptor = adaptor;
     this.defaultShader = new ParticleShader();
     this.state = State.for2d();
+    this._managedContainers = new GCManagedHash({ renderer, type: "renderable", name: "particleContainer" });
   }
   validateRenderable(_renderable) {
     return false;
@@ -41626,6 +42373,7 @@ class ParticleContainerPipe {
       size: renderable.particleChildren.length,
       properties: renderable._properties
     });
+    this._managedContainers.add(renderable);
     return renderable._gpuData[this.renderer.uid];
   }
   updateRenderable(_renderable) {
@@ -41657,6 +42405,7 @@ class ParticleContainerPipe {
   }
   /** Destroys the ParticleRenderer. */
   destroy() {
+    this._managedContainers.destroy();
     this.renderer = null;
     if (this.defaultShader) {
       this.defaultShader.destroy();
@@ -41799,6 +42548,7 @@ class NineSliceSpriteGpuData extends BatchableMesh {
 class NineSliceSpritePipe {
   constructor(renderer) {
     this._renderer = renderer;
+    this._managedSprites = new GCManagedHash({ renderer, type: "renderable", name: "nineSliceSprite" });
   }
   addRenderable(sprite, instructionSet) {
     const gpuSprite = this._getGpuSprite(sprite);
@@ -41833,12 +42583,14 @@ class NineSliceSpritePipe {
     batchableMesh.transform = sprite.groupTransform;
     batchableMesh.texture = sprite._texture;
     batchableMesh.roundPixels = this._renderer._roundPixels | sprite._roundPixels;
+    this._managedSprites.add(sprite);
     if (!sprite.didViewUpdate) {
       this._updateBatchableSprite(sprite, batchableMesh);
     }
     return gpuData;
   }
   destroy() {
+    this._managedSprites.destroy();
     this._renderer = null;
   }
 }
@@ -42121,6 +42873,7 @@ class TilingSpritePipe {
   constructor(renderer) {
     this._state = State.default2d;
     this._renderer = renderer;
+    this._managedTilingSprites = new GCManagedHash({ renderer, type: "renderable", name: "tilingSprite" });
   }
   validateRenderable(renderable) {
     const tilingSpriteData = this._getTilingSpriteData(renderable);
@@ -42205,6 +42958,7 @@ class TilingSpritePipe {
     const gpuData = new TilingSpriteGpuData();
     gpuData.renderable = tilingSprite;
     tilingSprite._gpuData[this._renderer.uid] = gpuData;
+    this._managedTilingSprites.add(tilingSprite);
     return gpuData;
   }
   _updateBatchableMesh(tilingSprite) {
@@ -42219,6 +42973,7 @@ class TilingSpritePipe {
     setPositions(tilingSprite, geometry.positions);
   }
   destroy() {
+    this._managedTilingSprites.destroy();
     this._renderer = null;
   }
   _updateCanBatch(tilingSprite) {
@@ -42465,6 +43220,7 @@ class BitmapTextGraphics extends Graphics {
 class BitmapTextPipe {
   constructor(renderer) {
     this._renderer = renderer;
+    this._managedBitmapTexts = new GCManagedHash({ renderer, type: "renderable", priority: -2, name: "bitmapText" });
   }
   validateRenderable(bitmapText) {
     const graphicsRenderable = this._getGpuBitmapText(bitmapText);
@@ -42550,6 +43306,7 @@ class BitmapTextPipe {
     const proxyRenderable = new BitmapTextGraphics();
     bitmapText._gpuData[this._renderer.uid] = proxyRenderable;
     this._updateContext(bitmapText, proxyRenderable);
+    this._managedBitmapTexts.add(bitmapText);
     return proxyRenderable;
   }
   _updateDistanceField(bitmapText) {
@@ -42565,7 +43322,9 @@ class BitmapTextPipe {
     context.customShader.resources.localUniforms.uniforms.uDistance = distance;
   }
   destroy() {
+    this._managedBitmapTexts.destroy();
     this._renderer = null;
+    this._managedBitmapTexts = null;
   }
 }
 /** @ignore */
@@ -42590,31 +43349,17 @@ function syncWithProxy(container, proxy) {
 }
 
 class BatchableHTMLText extends BatchableSprite {
-  /**
-   * Creates an instance of BatchableHTMLText.
-   * @param renderer - The renderer instance to be used.
-   */
-  constructor(renderer) {
-    super();
+  constructor() {
+    super(...arguments);
     this.generatingTexture = false;
     this.currentKey = "--";
-    this._renderer = renderer;
-    renderer.runners.resolutionChange.add(this);
-  }
-  /** Handles resolution changes for the HTML text. If the text has auto resolution enabled, it triggers a view update. */
-  resolutionChange() {
-    const text = this.renderable;
-    if (text._autoResolution) {
-      text.onViewUpdate();
-    }
   }
   /** Destroys the BatchableHTMLText instance. Returns the texture promise to the renderer and cleans up references. */
   destroy() {
-    const { htmlText } = this._renderer;
-    htmlText.getReferenceCount(this.currentKey) === null ? htmlText.returnTexturePromise(this.texturePromise) : htmlText.decreaseReferenceCount(this.currentKey);
-    this._renderer.runners.resolutionChange.remove(this);
     this.texturePromise = null;
-    this._renderer = null;
+    this.generatingTexture = false;
+    this.currentKey = "--";
+    super.destroy();
   }
 }
 
@@ -42633,6 +43378,21 @@ function updateTextBounds(batchableSprite, text) {
 class HTMLTextPipe {
   constructor(renderer) {
     this._renderer = renderer;
+    renderer.runners.resolutionChange.add(this);
+    this._managedTexts = new GCManagedHash({
+      renderer,
+      type: "renderable",
+      onUnload: this.onTextUnload.bind(this),
+      name: "htmlText"
+    });
+  }
+  resolutionChange() {
+    for (const key in this._managedTexts.items) {
+      const text = this._managedTexts.items[key];
+      if (text?._autoResolution) {
+        text.onViewUpdate();
+      }
+    }
   }
   validateRenderable(htmlText) {
     const gpuText = this._getGpuText(htmlText);
@@ -42690,7 +43450,7 @@ class HTMLTextPipe {
     return htmlText._gpuData[this._renderer.uid] || this.initGpuText(htmlText);
   }
   initGpuText(htmlText) {
-    const batchableHTMLText = new BatchableHTMLText(this._renderer);
+    const batchableHTMLText = new BatchableHTMLText();
     batchableHTMLText.renderable = htmlText;
     batchableHTMLText.transform = htmlText.groupTransform;
     batchableHTMLText.texture = Texture.EMPTY;
@@ -42698,9 +43458,18 @@ class HTMLTextPipe {
     batchableHTMLText.roundPixels = this._renderer._roundPixels | htmlText._roundPixels;
     htmlText._resolution = htmlText._autoResolution ? this._renderer.resolution : htmlText.resolution;
     htmlText._gpuData[this._renderer.uid] = batchableHTMLText;
+    this._managedTexts.add(htmlText);
     return batchableHTMLText;
   }
+  onTextUnload(text) {
+    const gpuData = text._gpuData[this._renderer.uid];
+    if (!gpuData)
+      return;
+    const { htmlText } = this._renderer;
+    htmlText.getReferenceCount(gpuData.currentKey) === null ? htmlText.returnTexturePromise(gpuData.texturePromise) : htmlText.decreaseReferenceCount(gpuData.currentKey);
+  }
   destroy() {
+    this._managedTexts.destroy();
     this._renderer = null;
   }
 }
@@ -43008,34 +43777,26 @@ HTMLTextSystem.extension = {
 };
 
 class BatchableText extends BatchableSprite {
+}
+
+class CanvasTextPipe {
   constructor(renderer) {
-    super();
     this._renderer = renderer;
     renderer.runners.resolutionChange.add(this);
+    this._managedTexts = new GCManagedHash({
+      renderer,
+      type: "renderable",
+      onUnload: this.onTextUnload.bind(this),
+      name: "canvasText"
+    });
   }
   resolutionChange() {
-    const text = this.renderable;
-    if (text._autoResolution) {
-      text.onViewUpdate();
+    for (const key in this._managedTexts.items) {
+      const text = this._managedTexts.items[key];
+      if (text?._autoResolution)
+        text.onViewUpdate();
     }
   }
-  destroy() {
-    const { canvasText } = this._renderer;
-    const refCount = canvasText.getReferenceCount(this.currentKey);
-    if (refCount > 0) {
-      canvasText.decreaseReferenceCount(this.currentKey);
-    } else if (this.texture) {
-      canvasText.returnTexture(this.texture);
-    }
-    this._renderer.runners.resolutionChange.remove(this);
-    this._renderer = null;
-  }
-}
-
-class CanvasTextPipe {
-  constructor(renderer) {
-    this._renderer = renderer;
-  }
   validateRenderable(text) {
     const gpuText = this._getGpuText(text);
     const newKey = text.styleKey;
@@ -43051,6 +43812,7 @@ class CanvasTextPipe {
         this._updateGpuText(text);
       }
       text._didTextUpdate = false;
+      updateTextBounds(batchableText, text);
     }
     this._renderer.renderPipes.batch.addToBatch(batchableText, instructionSet);
   }
@@ -43066,22 +43828,35 @@ class CanvasTextPipe {
     text._resolution = text._autoResolution ? this._renderer.resolution : text.resolution;
     batchableText.texture = this._renderer.canvasText.getManagedTexture(text);
     batchableText.currentKey = text.styleKey;
-    updateTextBounds(batchableText, text);
   }
   _getGpuText(text) {
     return text._gpuData[this._renderer.uid] || this.initGpuText(text);
   }
   initGpuText(text) {
-    const batchableText = new BatchableText(this._renderer);
+    const batchableText = new BatchableText();
     batchableText.currentKey = "--";
     batchableText.renderable = text;
     batchableText.transform = text.groupTransform;
     batchableText.bounds = { minX: 0, maxX: 1, minY: 0, maxY: 0 };
     batchableText.roundPixels = this._renderer._roundPixels | text._roundPixels;
     text._gpuData[this._renderer.uid] = batchableText;
+    this._managedTexts.add(text);
     return batchableText;
   }
+  onTextUnload(text) {
+    const gpuData = text._gpuData[this._renderer.uid];
+    if (!gpuData)
+      return;
+    const { canvasText } = this._renderer;
+    const refCount = canvasText.getReferenceCount(gpuData.currentKey);
+    if (refCount > 0) {
+      canvasText.decreaseReferenceCount(gpuData.currentKey);
+    } else if (gpuData.texture) {
+      canvasText.returnTexture(gpuData.texture);
+    }
+  }
   destroy() {
+    this._managedTexts.destroy();
     this._renderer = null;
   }
 }
@@ -43422,12 +44197,6 @@ const useLightening = () => {
         animatedSprite.scale.set(spriteScale);
         animatedSprite.anchor.set(0.5);
         animatedSprite.allowChildren = true;
-
-        // Position horizontally, centered
-        const totalWidth = (numCards - 1) * spacing;
-        animatedSprite.x = -totalWidth / 2 + i * spacing;
-        animatedSprite.y = 0; // Centered in container
-
         animatedSprite.play();
 
         // Add multiplier text
@@ -43450,16 +44219,22 @@ const useLightening = () => {
 
         // Suit icon
         let suit_url = "";
-        switch ((_card$suit = card.suit) === null || _card$suit === void 0 ? void 0 : _card$suit.toLowerCase()) {
+        const suit = (_card$suit = card.suit) === null || _card$suit === void 0 ? void 0 : _card$suit.toLowerCase();
+        switch (suit) {
           case "hearts":
+          case "heart":
             suit_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/SuitHearts.svg/60px-SuitHearts.svg.png";
             break;
           case "clubs":
+          case "club":
             suit_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/SuitClubs.svg/60px-SuitClubs.svg.png";
             break;
           case "diamonds":
+          case "diamond":
             suit_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/SuitDiamonds.svg/60px-SuitDiamonds.svg.png";
             break;
+          case "spades":
+          case "spade":
           default:
             suit_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/SuitSpades.svg/60px-SuitSpades.svg.png";
             break;
@@ -43469,21 +44244,56 @@ const useLightening = () => {
         const card_suit_tex = await Assets.load(suit_url);
         const card_suit_sprite = new Sprite(card_suit_tex);
         card_suit_sprite.anchor.set(0.5);
-        card_suit_sprite.scale.set(1.2);
-        card_suit_sprite.position.set(0, 35);
-        animatedSprite.addChild(card_suit_sprite);
-        return animatedSprite;
+        card_suit_sprite.scale.set(1.0);
+
+        // Create white card-like background with rounded corners for suit symbol
+        const suit_bg = new Graphics();
+        const bgWidth = 95;
+        const bgHeight = 95;
+        const cornerRadius = 10;
+        suit_bg.roundRect(-bgWidth / 2, -bgHeight / 2, bgWidth, bgHeight, cornerRadius);
+        suit_bg.fill(0xffffff);
+        suit_bg.stroke({
+          color: 0xffd700,
+          width: 2
+        });
+
+        // Create container for suit symbol with background
+        const suitContainer = new Container();
+        suitContainer.addChild(suit_bg);
+        suitContainer.addChild(card_suit_sprite);
+        suitContainer.position.set(0, 35);
+        animatedSprite.addChild(suitContainer);
+
+        // Create container for this card with background
+        const cardContainer = new Container();
+
+        // Load and add background sprite for this card
+        try {
+          const bg_tex = await Assets.load("/card_bg.svg");
+          const bg_sprite = new Sprite(bg_tex);
+          bg_sprite.scale.set(window.innerWidth < 768 ? 0.65 : 0.75);
+          bg_sprite.anchor.set(0.5);
+          bg_sprite.x = 0;
+          bg_sprite.y = 0;
+          cardContainer.addChild(bg_sprite);
+        } catch (bgError) {
+          // Background is optional, continue without it
+          console.log("Background not found for card, continuing without it");
+        }
+
+        // Add the animated sprite on top of background
+        cardContainer.addChild(animatedSprite);
+
+        // Position the card container horizontally, centered
+        const totalWidth = (numCards - 1) * spacing;
+        cardContainer.x = -totalWidth / 2 + i * spacing;
+        cardContainer.y = 0;
+        return cardContainer;
       });
 
       // After all sprites are loaded, add them to the container and stage
       Promise.all(spritePromises).then(async sprites => {
-        const bg_tex = await Assets.load("/card_bg.svg");
-        const bg_sprite = new Sprite(bg_tex);
-        bg_sprite.scale.set(window.innerWidth < 768 ? 0.65 : 0.75);
-        bg_sprite.anchor.set(0.5);
-        bg_sprite.x = 0;
-        bg_sprite.y = 0;
-        cardsContainer.addChild(bg_sprite);
         cardsContainer.label = "card_container";
         sprites.forEach(sprite => cardsContainer.addChild(sprite));
         cardsContainer.x = this.appRef.current.renderer.width / 2;
@@ -43611,12 +44421,6 @@ const useLighteningStart = () => {
         animatedSprite.scale.set(spriteScale);
         animatedSprite.anchor.set(0.5);
         animatedSprite.allowChildren = true;
-
-        // Position horizontally, centered
-        const totalWidth = (numCards - 1) * spacing;
-        animatedSprite.x = -totalWidth / 2 + i * spacing;
-        animatedSprite.y = 0; // Centered in container
-
         animatedSprite.play();
 
         // Add multiplier text
@@ -43639,16 +44443,22 @@ const useLighteningStart = () => {
 
         // Suit icon
         let suit_url = "";
-        switch ((_card$suit = card.suit) === null || _card$suit === void 0 ? void 0 : _card$suit.toLowerCase()) {
+        const suit = (_card$suit = card.suit) === null || _card$suit === void 0 ? void 0 : _card$suit.toLowerCase();
+        switch (suit) {
           case "hearts":
+          case "heart":
             suit_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/SuitHearts.svg/60px-SuitHearts.svg.png";
             break;
           case "clubs":
+          case "club":
             suit_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/SuitClubs.svg/60px-SuitClubs.svg.png";
             break;
           case "diamonds":
+          case "diamond":
             suit_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/SuitDiamonds.svg/60px-SuitDiamonds.svg.png";
             break;
+          case "spades":
+          case "spade":
           default:
             suit_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/SuitSpades.svg/60px-SuitSpades.svg.png";
             break;
@@ -43658,21 +44468,56 @@ const useLighteningStart = () => {
         const card_suit_tex = await Assets.load(suit_url);
         const card_suit_sprite = new Sprite(card_suit_tex);
         card_suit_sprite.anchor.set(0.5);
-        card_suit_sprite.scale.set(1.2);
-        card_suit_sprite.position.set(0, 35);
-        animatedSprite.addChild(card_suit_sprite);
-        return animatedSprite;
+        card_suit_sprite.scale.set(1.0);
+
+        // Create white card-like background with rounded corners for suit symbol
+        const suit_bg = new Graphics();
+        const bgWidth = 95;
+        const bgHeight = 95;
+        const cornerRadius = 10;
+        suit_bg.roundRect(-bgWidth / 2, -bgHeight / 2, bgWidth, bgHeight, cornerRadius);
+        suit_bg.fill(0xffffff);
+        suit_bg.stroke({
+          color: 0xffd700,
+          width: 2
+        });
+
+        // Create container for suit symbol with background
+        const suitContainer = new Container();
+        suitContainer.addChild(suit_bg);
+        suitContainer.addChild(card_suit_sprite);
+        suitContainer.position.set(0, 35);
+        animatedSprite.addChild(suitContainer);
+
+        // Create container for this card with background
+        const cardContainer = new Container();
+
+        // Load and add background sprite for this card
+        try {
+          const bg_tex = await Assets.load("/card_bg.svg");
+          const bg_sprite = new Sprite(bg_tex);
+          bg_sprite.scale.set(window.innerWidth < 768 ? 0.65 : 0.75);
+          bg_sprite.anchor.set(0.5);
+          bg_sprite.x = 0;
+          bg_sprite.y = 0;
+          cardContainer.addChild(bg_sprite);
+        } catch (bgError) {
+          // Background is optional, continue without it
+          console.log("Background not found for card, continuing without it");
+        }
+
+        // Add the animated sprite on top of background
+        cardContainer.addChild(animatedSprite);
+
+        // Position the card container horizontally, centered
+        const totalWidth = (numCards - 1) * spacing;
+        cardContainer.x = -totalWidth / 2 + i * spacing;
+        cardContainer.y = 0;
+        return cardContainer;
       });
 
       // After all sprites are loaded, add them to the container and stage
       Promise.all(spritePromises).then(async sprites => {
-        const bg_tex = await Assets.load("/card_bg.svg");
-        const bg_sprite = new Sprite(bg_tex);
-        bg_sprite.scale.set(window.innerWidth < 768 ? 0.65 : 0.75);
-        bg_sprite.anchor.set(0.5);
-        bg_sprite.x = 0;
-        bg_sprite.y = 0;
-        cardsContainer.addChild(bg_sprite);
         cardsContainer.label = "card_container";
         sprites.forEach(sprite => cardsContainer.addChild(sprite));
         // Center the container in the canvas
@@ -43687,6 +44532,540 @@ const useLighteningStart = () => {
   };
 };
 
+/**
+ * Generates SVG code for a baccarat card
+ * @param {string} rank - The card rank (e.g., "A", "K", "Q", "J", "10", "9", etc.)
+ * @param {string} suit - The card suit (e.g., "hearts", "diamonds", "clubs", "spades")
+ * @param {number} width - Card width (default: 200)
+ * @param {number} height - Card height (default: 280)
+ * @returns {string} SVG code as a string
+ */
+const generateBaccaratCardSVG = (rank, suit, width = 200, height = 280) => {
+  // Format rank for display
+  const formatRank = r => {
+    if (!r) return "";
+    const rankUpper = r.toUpperCase();
+    const rankMap = {
+      ACE: "A",
+      KING: "K",
+      QUEEN: "Q",
+      JACK: "J",
+      JOKER: "J"
+    };
+    return rankMap[rankUpper] || r;
+  };
+  const displayRank = formatRank(rank);
+  const suitLower = (suit || "").toLowerCase();
+
+  // Get suit symbol/color
+  const getSuitInfo = s => {
+    switch (s) {
+      case "hearts":
+      case "heart":
+        return {
+          symbol: "♥",
+          color: "#DC143C"
+        };
+      case "diamonds":
+      case "diamond":
+        return {
+          symbol: "♦",
+          color: "#DC143C"
+        };
+      case "clubs":
+      case "club":
+        return {
+          symbol: "♣",
+          color: "#000000"
+        };
+      case "spades":
+      case "spade":
+        return {
+          symbol: "♠",
+          color: "#000000"
+        };
+      default:
+        return {
+          symbol: "♠",
+          color: "#000000"
+        };
+    }
+  };
+  const suitInfo = getSuitInfo(suitLower);
+  const cornerRadius = 12; // Rounded corners
+  const padding = 12; // Padding for corner elements
+
+  // Font sizes - set to 86 pixels to match the example size
+  const rankFontSize = 86; // Fixed size: 86 pixels
+  const suitFontSize = 86; // Fixed size: 86 pixels
+
+  return `
+    <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <!-- Glow effect for border -->
+        <filter id="glow">
+          <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+          <feMerge>
+            <feMergeNode in="coloredBlur"/>
+            <feMergeNode in="SourceGraphic"/>
+          </feMerge>
+        </filter>
+      </defs>
+      <!-- Card background with rounded corners - transparent background -->
+      <rect 
+        x="0" 
+        y="0" 
+        width="${width}" 
+        height="${height}" 
+        rx="${cornerRadius}" 
+        ry="${cornerRadius}" 
+        fill="none"
+        stroke="#D4AF37"
+        stroke-width="3"
+        filter="url(#glow)"
+      />
+      
+      <!-- Inner border for card frame effect -->
+      <rect 
+        x="2" 
+        y="2" 
+        width="${width - 4}" 
+        height="${height - 4}" 
+        rx="${cornerRadius - 2}" 
+        ry="${cornerRadius - 2}" 
+        fill="none"
+        stroke="#F5E6D3"
+        stroke-width="1"
+      />
+      
+      <!-- Rank at top left corner -->
+      <text 
+        x="${padding}" 
+        y="${padding + rankFontSize * 0.8}" 
+        font-family="Arial, sans-serif" 
+        font-size="${rankFontSize}" 
+        font-weight="bold" 
+        fill="#FFFFFF" 
+        text-anchor="start" 
+        dominant-baseline="hanging"
+        stroke="#000000"
+        stroke-width="1.5"
+      >
+        ${displayRank}
+      </text>
+      
+      <!-- Rank at bottom right corner (inverted) -->
+      <text 
+        x="${width - padding}" 
+        y="${height - padding}" 
+        font-family="Arial, sans-serif" 
+        font-size="${rankFontSize}" 
+        font-weight="bold" 
+        fill="#FFFFFF" 
+        text-anchor="end" 
+        dominant-baseline="baseline"
+        stroke="#000000"
+        stroke-width="1.5"
+        transform="rotate(180 ${width - padding} ${height - padding})"
+      >
+        ${displayRank}
+      </text>
+      
+      <!-- Suit at top right corner -->
+      <text 
+        x="${width - padding}" 
+        y="${padding + suitFontSize * 0.8}" 
+        font-family="Arial, sans-serif" 
+        font-size="${suitFontSize}" 
+        font-weight="bold" 
+        fill="${suitInfo.color}" 
+        text-anchor="end" 
+        dominant-baseline="hanging"
+        stroke="#000000"
+        stroke-width="1"
+      >
+        ${suitInfo.symbol}
+      </text>
+      
+      <!-- Suit at bottom left corner (inverted) -->
+      <text 
+        x="${padding}" 
+        y="${height - padding}" 
+        font-family="Arial, sans-serif" 
+        font-size="${suitFontSize}" 
+        font-weight="bold" 
+        fill="${suitInfo.color}" 
+        text-anchor="start" 
+        dominant-baseline="baseline"
+        stroke="#000000"
+        stroke-width="1"
+        transform="rotate(180 ${padding} ${height - padding})"
+      >
+        ${suitInfo.symbol}
+      </text>
+    </svg>
+  `.trim();
+};
+
+const useBaccaratCard = () => {
+  class BaccaratCard {
+    constructor(cards, appRef) {
+      this.cards = cards;
+      this.appRef = appRef;
+      this.initiateAnimation();
+    }
+    async initiateAnimation() {
+      // Validate cards array
+      if (!this.cards || !Array.isArray(this.cards) || this.cards.length === 0) {
+        console.warn("BaccaratCard: No cards provided or cards array is empty");
+        return;
+      }
+
+      // Create a container to hold all cards
+      const cardsContainer = new Container();
+
+      // Calculate layout: arrange cards horizontally, centered
+      const numCards = this.cards.length;
+      // Smaller SVG dimensions to fit within card_bg.svg
+      const cardWidth = 120;
+      const cardHeight = 160;
+      const spacing = 77.6 * 0.5 + 20; // space between cards (match other hooks)
+      const rowSpacing = 200; // Vertical spacing between rows
+      // Scale for the card_bg.svg background
+      const bgScale = window.innerWidth < 768 ? 0.65 : 0.75;
+      // Smaller scale for the baccarat SVG to fit within the frame
+      const cardScale = window.innerWidth < 768 ? 0.25 : 0.3;
+
+      // Load background texture once for all cards
+      let bgTexture;
+      try {
+        bgTexture = await Assets.load("/card_bg.svg");
+      } catch (bgError) {
+        console.log("Background not found, continuing without it");
+      }
+
+      // Create SVG cards with individual backgrounds
+      const cardPromises = this.cards.map(async (card, i) => {
+        try {
+          var _card$multiplier;
+          // Generate SVG for this card (without multiplier)
+          const svgString = generateBaccaratCardSVG(card.rank, card.suit, cardWidth, cardHeight);
+
+          // Convert SVG string to data URL
+          const svgDataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
+
+          // Create texture from data URL using Image
+          const img = new Image();
+          img.src = svgDataUrl;
+          await new Promise((resolve, reject) => {
+            img.onload = resolve;
+            img.onerror = reject;
+          });
+
+          // Create texture from the loaded image
+          const cardTexture = Texture.from(img);
+          const cardSprite = new Sprite(cardTexture);
+
+          // Create container for this card with background
+          const cardContainer = new Container();
+
+          // Add background sprite if available (card_bg.svg frame)
+          let bg_sprite = null;
+          if (bgTexture) {
+            bg_sprite = new Sprite(bgTexture);
+            bg_sprite.scale.set(bgScale);
+            bg_sprite.anchor.set(0.5);
+            bg_sprite.x = 0;
+            bg_sprite.y = 0;
+            cardContainer.addChild(bg_sprite);
+          }
+
+          // Add the card sprite on top of background (smaller, fits within frame)
+          // Position it downward in the frame
+          cardSprite.scale.set(cardScale);
+          cardSprite.anchor.set(0.5);
+          cardSprite.x = 0;
+          // Move card sprite downward
+          if (bg_sprite) {
+            const bgHeight = bg_sprite.height;
+            cardSprite.y = bgHeight * 0.1; // Move down from center
+          } else {
+            cardSprite.y = cardHeight * cardScale * 0.15; // Fallback position
+          }
+          cardContainer.addChild(cardSprite);
+
+          // Add multiplier text separately at top center with small font size
+          const multiplier = (_card$multiplier = card.multiplier) !== null && _card$multiplier !== void 0 ? _card$multiplier : card.multplier;
+          if (multiplier !== null && multiplier !== undefined) {
+            const multiplierText = new Text({
+              text: `${multiplier}x`,
+              style: {
+                fontFamily: "Arial, sans-serif",
+                fontSize: 14,
+                // Small font size
+                fontWeight: "bold",
+                fill: "#D4AF37",
+                // Golden color
+                align: "center",
+                stroke: "#000000",
+                strokeThickness: 1
+              }
+            });
+            multiplierText.anchor.set(0.5);
+            // Position at very top center of the card container
+            multiplierText.x = 0;
+            if (bg_sprite) {
+              // Use the sprite's scaled height to position at the very top
+              const bgHeight = bg_sprite.height;
+              multiplierText.y = -bgHeight / 2 + 8; // Closer to the top edge
+            } else {
+              // Fallback if no background
+              multiplierText.y = -cardHeight * cardScale / 2 + 5;
+            }
+            cardContainer.addChild(multiplierText);
+          }
+
+          // Calculate multi-row layout for 5 cards: 3 in first row, 2 in second row
+          let rowIndex = 0;
+          let colIndex = i;
+          let cardsInRow = numCards;
+          if (numCards === 5) {
+            // First 3 cards in row 0, remaining 2 in row 1
+            if (i < 3) {
+              rowIndex = 0;
+              colIndex = i;
+              cardsInRow = 3;
+            } else {
+              rowIndex = 1;
+              colIndex = i - 3;
+              cardsInRow = 2;
+            }
+          }
+
+          // Calculate horizontal position within the row
+          const rowWidth = (cardsInRow - 1) * spacing;
+          cardContainer.x = -rowWidth / 2 + colIndex * spacing;
+
+          // Calculate vertical position based on row
+          cardContainer.y = rowIndex * rowSpacing;
+          return cardContainer;
+        } catch (error) {
+          console.error(`Error creating baccarat card ${i}:`, error);
+          return null;
+        }
+      });
+
+      // After all cards are loaded, add them to the container and stage
+      Promise.all(cardPromises).then(async sprites => {
+        // Filter out any null sprites (from failed card creation)
+        const validSprites = sprites.filter(sprite => sprite !== null);
+        if (validSprites.length === 0) {
+          console.error("BaccaratCard: No valid cards were created");
+          return;
+        }
+        try {
+          cardsContainer.label = "baccarat_card_container";
+          validSprites.forEach(sprite => cardsContainer.addChild(sprite));
+
+          // Center the container in the canvas
+          cardsContainer.x = this.appRef.current.renderer.width / 2;
+          // Adjust vertical centering for multi-row layout
+          const verticalOffset = numCards === 5 ? -rowSpacing / 2 : 0;
+          cardsContainer.y = this.appRef.current.renderer.height / 2 + verticalOffset;
+          this.appRef.current.stage.addChild(cardsContainer);
+        } catch (error) {
+          console.error("Error adding cards to stage:", error);
+        }
+      }).catch(error => {
+        console.error("Error in card promises:", error);
+      });
+    }
+  }
+  return {
+    BaccaratCard
+  };
+};
+
+const useBaccaratCardStart = () => {
+  class BaccaratCardStart {
+    constructor(cards, appRef) {
+      this.cards = cards;
+      this.appRef = appRef;
+      this.initiateAnimation();
+    }
+    async initiateAnimation() {
+      // Validate cards array
+      if (!this.cards || !Array.isArray(this.cards) || this.cards.length === 0) {
+        console.warn("BaccaratCardStart: No cards provided or cards array is empty");
+        return;
+      }
+
+      // Create a container to hold all cards
+      const cardsContainer = new Container();
+
+      // Calculate layout: arrange cards horizontally, centered
+      const numCards = this.cards.length;
+      // Smaller SVG dimensions to fit within card_bg.svg
+      const cardWidth = 120;
+      const cardHeight = 160;
+      const spacing = 77.6 * 0.5 + 20; // space between cards (match other hooks)
+      const rowSpacing = 200; // Vertical spacing between rows
+      // Scale for the card_bg.svg background
+      const bgScale = window.innerWidth < 768 ? 0.65 : 0.75;
+      // Smaller scale for the baccarat SVG to fit within the frame
+      const cardScale = window.innerWidth < 768 ? 0.25 : 0.3;
+
+      // Load background texture once for all cards
+      let bgTexture;
+      try {
+        bgTexture = await Assets.load("/card_bg.svg");
+      } catch (bgError) {
+        console.log("Background not found, continuing without it");
+      }
+
+      // Create SVG cards with individual backgrounds
+      const cardPromises = this.cards.map(async (card, i) => {
+        try {
+          var _card$multiplier;
+          // Generate SVG for this card (without multiplier)
+          const svgString = generateBaccaratCardSVG(card.rank, card.suit, cardWidth, cardHeight);
+
+          // Convert SVG string to data URL
+          const svgDataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
+
+          // Create texture from data URL using Image
+          const img = new Image();
+          img.src = svgDataUrl;
+          await new Promise((resolve, reject) => {
+            img.onload = resolve;
+            img.onerror = reject;
+          });
+
+          // Create texture from the loaded image
+          const cardTexture = Texture.from(img);
+          const cardSprite = new Sprite(cardTexture);
+          cardSprite.label = "starting_baccarat_card";
+
+          // Create container for this card with background
+          const cardContainer = new Container();
+
+          // Add background sprite if available (card_bg.svg frame)
+          let bg_sprite = null;
+          if (bgTexture) {
+            bg_sprite = new Sprite(bgTexture);
+            bg_sprite.scale.set(bgScale);
+            bg_sprite.anchor.set(0.5);
+            bg_sprite.x = 0;
+            bg_sprite.y = 0;
+            cardContainer.addChild(bg_sprite);
+          }
+
+          // Add the card sprite on top of background (smaller, fits within frame)
+          // Position it downward in the frame
+          cardSprite.scale.set(cardScale);
+          cardSprite.anchor.set(0.5);
+          cardSprite.x = 0;
+          // Move card sprite downward
+          if (bg_sprite) {
+            const bgHeight = bg_sprite.height;
+            cardSprite.y = bgHeight * 0.1; // Move down from center
+          } else {
+            cardSprite.y = cardHeight * cardScale * 0.15; // Fallback position
+          }
+          cardContainer.addChild(cardSprite);
+
+          // Add multiplier text separately at top center with small font size
+          const multiplier = (_card$multiplier = card.multiplier) !== null && _card$multiplier !== void 0 ? _card$multiplier : card.multplier;
+          if (multiplier !== null && multiplier !== undefined) {
+            const multiplierText = new Text({
+              text: `${multiplier}x`,
+              style: {
+                fontFamily: "Arial, sans-serif",
+                fontSize: 14,
+                // Small font size
+                fontWeight: "bold",
+                fill: "#D4AF37",
+                // Golden color
+                align: "center",
+                stroke: "#000000",
+                strokeThickness: 1
+              }
+            });
+            multiplierText.anchor.set(0.5);
+            // Position at very top center of the card container
+            multiplierText.x = 0;
+            if (bg_sprite) {
+              // Use the sprite's scaled height to position at the very top
+              const bgHeight = bg_sprite.height;
+              multiplierText.y = -bgHeight / 2 + 8; // Closer to the top edge
+            } else {
+              // Fallback if no background
+              multiplierText.y = -cardHeight * cardScale / 2 + 5;
+            }
+            cardContainer.addChild(multiplierText);
+          }
+
+          // Calculate multi-row layout for 5 cards: 3 in first row, 2 in second row
+          let rowIndex = 0;
+          let colIndex = i;
+          let cardsInRow = numCards;
+          if (numCards === 5) {
+            // First 3 cards in row 0, remaining 2 in row 1
+            if (i < 3) {
+              rowIndex = 0;
+              colIndex = i;
+              cardsInRow = 3;
+            } else {
+              rowIndex = 1;
+              colIndex = i - 3;
+              cardsInRow = 2;
+            }
+          }
+
+          // Calculate horizontal position within the row
+          const rowWidth = (cardsInRow - 1) * spacing;
+          cardContainer.x = -rowWidth / 2 + colIndex * spacing;
+
+          // Calculate vertical position based on row
+          cardContainer.y = rowIndex * rowSpacing;
+          return cardContainer;
+        } catch (error) {
+          console.error(`Error creating baccarat card ${i}:`, error);
+          return null;
+        }
+      });
+
+      // After all cards are loaded, add them to the container and stage
+      Promise.all(cardPromises).then(async sprites => {
+        // Filter out any null sprites (from failed card creation)
+        const validSprites = sprites.filter(sprite => sprite !== null);
+        if (validSprites.length === 0) {
+          console.error("BaccaratCardStart: No valid cards were created");
+          return;
+        }
+        try {
+          cardsContainer.label = "baccarat_card_start_container";
+          validSprites.forEach(sprite => cardsContainer.addChild(sprite));
+
+          // Center the container in the canvas
+          cardsContainer.x = this.appRef.current.renderer.width / 2;
+          // Adjust vertical centering for multi-row layout
+          const verticalOffset = numCards === 5 ? -rowSpacing / 2 : 0;
+          cardsContainer.y = this.appRef.current.renderer.height / 2 + verticalOffset;
+          this.appRef.current.stage.addChild(cardsContainer);
+        } catch (error) {
+          console.error("Error adding cards to stage:", error);
+        }
+      }).catch(error => {
+        console.error("Error in card promises:", error);
+      });
+    }
+  }
+  return {
+    BaccaratCardStart
+  };
+};
+
 // CSS is provided separately via the style field in package.json
 
 const thunder_left = "https://babylonbetst.evo-games.com/frontend/evo/mini/images/lightnings.f9848fb7.webp";
@@ -43696,7 +45075,9 @@ const border_start = "https://babylonbetst.evo-games.com/frontend/evo/mini/image
 const border_loop = "https://babylonbetst.evo-games.com/frontend/evo/mini/images/borderloop.c55570cc.webp";
 const LighteningCard = ({
   roundStatus,
-  cards
+  cards,
+  showRank = false,
+  gameType
 }) => {
   const containerRef = React.useRef(null);
   const appRef = React.useRef(null);
@@ -43715,6 +45096,12 @@ const LighteningCard = ({
   const {
     LighteningStart
   } = useLighteningStart();
+  const {
+    BaccaratCard
+  } = useBaccaratCard();
+  const {
+    BaccaratCardStart
+  } = useBaccaratCardStart();
   const initiatePixiApplication = async () => {
     appRef.current = new Application();
     await appRef.current.init({
@@ -43729,8 +45116,28 @@ const LighteningCard = ({
     ["NO_MORE_BETS", "LIGHTNING", "NEW_CARD", "ROUND_END", "BETTING_STARTED"].includes(roundStatus) && new LeftThunder(thunder_left, appRef);
     ["NO_MORE_BETS", "LIGHTNING", "NEW_CARD", "ROUND_END", "BETTING_STARTED"].includes(roundStatus) && new RightThunder(thunder_right, appRef);
     ["NO_MORE_BETS", "NEW_CARD", "ROUND_END", "BETTING_STARTED"].includes(roundStatus) && new MiddleThunder(thunder_middle, appRef);
-    ["LIGHTNING"].includes(roundStatus) && new LighteningStart(cards, border_start, appRef);
-    ["NEW_CARD", "ROUND_END", "BETTING_STARTED"].includes(roundStatus) && new Lightening(cards, border_loop, appRef);
+
+    // Debug logging
+    console.log("LighteningCard render:", {
+      roundStatus,
+      showRank,
+      gameType,
+      cardsCount: (cards === null || cards === void 0 ? void 0 : cards.length) || 0,
+      cards: cards
+    });
+
+    // Check if this is baccarat game - use SVG cards
+    // Use baccarat SVG cards when gameType is baccarat OR when showRank is true (baccarat-style display)
+    const isBaccarat = (gameType === null || gameType === void 0 ? void 0 : gameType.toLowerCase()) === "baccarat" || showRank === true;
+    if (isBaccarat) {
+      // Use baccarat SVG cards (no PNGs, uses SVG suit symbols)
+      ["LIGHTNING"].includes(roundStatus) && new BaccaratCardStart(cards, appRef);
+      ["NEW_CARD", "ROUND_END", "BETTING_STARTED"].includes(roundStatus) && new BaccaratCard(cards, appRef);
+    } else {
+      // Use suit-only display (with PNG suit images)
+      ["LIGHTNING"].includes(roundStatus) && new LighteningStart(cards, border_start, appRef);
+      ["NEW_CARD", "ROUND_END", "BETTING_STARTED"].includes(roundStatus) && new Lightening(cards, border_loop, appRef);
+    }
   };
   React.useEffect(() => {
     if (!containerRef.current) return;
@@ -43743,7 +45150,7 @@ const LighteningCard = ({
         appRef.current = null;
       }
     };
-  }, [roundStatus]);
+  }, [roundStatus, showRank, cards, gameType]);
   return /*#__PURE__*/React.createElement("div", {
     className: "lightening-card",
     ref: containerRef
@@ -43756,12 +45163,17 @@ LighteningCard.propTypes = {
     rank: PropTypes.string,
     suit: PropTypes.string
   })),
+  showRank: PropTypes.bool,
+  // If true, displays rank at center and suit at top-left. If false, displays suit only.
+  gameType: PropTypes.string,
+  // Game type (e.g., "baccarat") - if "baccarat", uses SVG cards
   assetPath: PropTypes.string,
   // Path to the animation asset
   onAnimationReady: PropTypes.func // Callback when animation is ready
 };
 LighteningCard.defaultProps = {
-  cards: []
+  cards: [],
+  showRank: false // Default to suit-only display
 };
 
 extensions.add(AccessibilitySystem);