@vunk/plus 1.6.7 → 1.6.9

package/components/SendOutlined.mjs

@@ -1,4 +1,4 @@
-import { inject, ref, h, getCurrentInstance, nextTick, reactive, defineComponent, createVNode } from 'vue';
+import { inject, ref, getCurrentInstance, nextTick, h, reactive, defineComponent, createVNode } from 'vue';
 
 /**
  * Take input from [0, n] and return it as [0, 1]
@@ -1227,7 +1227,7 @@ Icon.getTwoToneColor = getTwoToneColor;
 Icon.setTwoToneColor = setTwoToneColor;
 
 // This icon file is generated automatically.
-var AudioMutedOutlined$1 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "defs", "attrs": {}, "children": [{ "tag": "style", "attrs": {} }] }, { "tag": "path", "attrs": { "d": "M682 455V311l-76 76v68c-.1 50.7-42 92.1-94 92a95.8 95.8 0 01-52-15l-54 55c29.1 22.4 65.9 36 106 36 93.8 0 170-75.1 170-168z" } }, { "tag": "path", "attrs": { "d": "M833 446h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254-63 0-120.7-23-165-61l-54 54a334.01 334.01 0 00179 81v102H326c-13.9 0-24.9 14.3-25 32v36c.1 4.4 2.9 8 6 8h408c3.2 0 6-3.6 6-8v-36c0-17.7-11-32-25-32H547V782c165.3-17.9 294-157.9 294-328 0-4.4-3.6-8-8-8zm13.1-377.7l-43.5-41.9a8 8 0 00-11.2.1l-129 129C634.3 101.2 577 64 511 64c-93.9 0-170 75.3-170 168v224c0 6.7.4 13.3 1.2 19.8l-68 68A252.33 252.33 0 01258 454c-.2-4.4-3.8-8-8-8h-60c-4.4 0-8 3.6-8 8 0 53 12.5 103 34.6 147.4l-137 137a8.03 8.03 0 000 11.3l42.7 42.7c3.1 3.1 8.2 3.1 11.3 0L846.2 79.8l.1-.1c3.1-3.2 3-8.3-.2-11.4zM417 401V232c0-50.6 41.9-92 94-92 46 0 84.1 32.3 92.3 74.7L417 401z" } }] }, "name": "audio-muted", "theme": "outlined" };
+var AudioMutedOutlined$2 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "defs", "attrs": {}, "children": [{ "tag": "style", "attrs": {} }] }, { "tag": "path", "attrs": { "d": "M682 455V311l-76 76v68c-.1 50.7-42 92.1-94 92a95.8 95.8 0 01-52-15l-54 55c29.1 22.4 65.9 36 106 36 93.8 0 170-75.1 170-168z" } }, { "tag": "path", "attrs": { "d": "M833 446h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254-63 0-120.7-23-165-61l-54 54a334.01 334.01 0 00179 81v102H326c-13.9 0-24.9 14.3-25 32v36c.1 4.4 2.9 8 6 8h408c3.2 0 6-3.6 6-8v-36c0-17.7-11-32-25-32H547V782c165.3-17.9 294-157.9 294-328 0-4.4-3.6-8-8-8zm13.1-377.7l-43.5-41.9a8 8 0 00-11.2.1l-129 129C634.3 101.2 577 64 511 64c-93.9 0-170 75.3-170 168v224c0 6.7.4 13.3 1.2 19.8l-68 68A252.33 252.33 0 01258 454c-.2-4.4-3.8-8-8-8h-60c-4.4 0-8 3.6-8 8 0 53 12.5 103 34.6 147.4l-137 137a8.03 8.03 0 000 11.3l42.7 42.7c3.1 3.1 8.2 3.1 11.3 0L846.2 79.8l.1-.1c3.1-3.2 3-8.3-.2-11.4zM417 401V232c0-50.6 41.9-92 94-92 46 0 84.1 32.3 92.3 74.7L417 401z" } }] }, "name": "audio-muted", "theme": "outlined" };
 
 function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$5(target, key, source[key]); }); } return target; }
 
@@ -1237,15 +1237,16 @@ var AudioMutedOutlined = function AudioMutedOutlined(props, context) {
   var p = _objectSpread$5({}, props, context.attrs);
 
   return createVNode(Icon, _objectSpread$5({}, p, {
-    "icon": AudioMutedOutlined$1
+    "icon": AudioMutedOutlined$2
   }), null);
 };
 
 AudioMutedOutlined.displayName = 'AudioMutedOutlined';
 AudioMutedOutlined.inheritAttrs = false;
+var AudioMutedOutlined$1 = AudioMutedOutlined;
 
 // This icon file is generated automatically.
-var AudioOutlined$1 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z" } }] }, "name": "audio", "theme": "outlined" };
+var AudioOutlined$2 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M842 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 140.3-113.7 254-254 254S258 594.3 258 454c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8 0 168.7 126.6 307.9 290 327.6V884H326.7c-13.7 0-24.7 14.3-24.7 32v36c0 4.4 2.8 8 6.2 8h407.6c3.4 0 6.2-3.6 6.2-8v-36c0-17.7-11-32-24.7-32H548V782.1c165.3-18 294-158 294-328.1zM512 624c93.9 0 170-75.2 170-168V232c0-92.8-76.1-168-170-168s-170 75.2-170 168v224c0 92.8 76.1 168 170 168zm-94-392c0-50.6 41.9-92 94-92s94 41.4 94 92v224c0 50.6-41.9 92-94 92s-94-41.4-94-92V232z" } }] }, "name": "audio", "theme": "outlined" };
 
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? Object(arguments[i]) : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty$4(target, key, source[key]); }); } return target; }
 
@@ -1255,12 +1256,13 @@ var AudioOutlined = function AudioOutlined(props, context) {
   var p = _objectSpread$4({}, props, context.attrs);
 
   return createVNode(Icon, _objectSpread$4({}, p, {
-    "icon": AudioOutlined$1
+    "icon": AudioOutlined$2
   }), null);
 };
 
 AudioOutlined.displayName = 'AudioOutlined';
 AudioOutlined.inheritAttrs = false;
+var AudioOutlined$1 = AudioOutlined;
 
 // This icon file is generated automatically.
 var CloseOutlined$1 = { "icon": { "tag": "svg", "attrs": { "fill-rule": "evenodd", "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z" } }] }, "name": "close", "theme": "outlined" };
@@ -1334,4 +1336,4 @@ var SendOutlined = function SendOutlined(props, context) {
 SendOutlined.displayName = 'SendOutlined';
 SendOutlined.inheritAttrs = false;
 
-export { AudioMutedOutlined as A, CloseOutlined as C, LinkOutlined as L, SendOutlined as S, AudioOutlined as a, CloudUploadOutlined as b };
+export { AudioMutedOutlined$1 as A, CloseOutlined as C, LinkOutlined as L, SendOutlined as S, CloudUploadOutlined as a, AudioOutlined$1 as b };

package/components/SharedSystems.mjs

@@ -1,4 +1,4 @@
-import { s as Shader, G as GpuProgram, u as GlProgram, v as TextureMatrix, k as UniformGroup, M as Matrix, x as DefaultBatcher, E as ExtensionType, e as extensions, y as BigPool, z as getGlobalBounds, F as Bounds, H as TexturePool, R as RendererType, I as FilterEffect, J as Sprite, t as Texture, S as STENCIL_MODES, h as CLEAR, w as warn, K as getAttributeInfoFromFormat, L as unsafeEvalSupported, b as Buffer, B as BufferUsage, i as CanvasSource, N as uid$1, j as TextureSource, O as Rectangle, Q as SystemRunner, a as EventEmitter, V as multiplyColors, W as UPDATE_VISIBLE, X as UPDATE_COLOR, Y as UPDATE_BLEND, C as Container, Z as Color, _ as getLocalBounds, P as Point, c as BindGroup, T as Ticker, D as DOMAdapter, $ as VERSION, a0 as deprecation, a1 as v8_0_0, a2 as RendererInitHook } from './index2.mjs';
+import { q as Shader, G as GpuProgram, t as GlProgram, u as TextureMatrix, k as UniformGroup, M as Matrix, E as ExtensionType, e as extensions, v as DefaultBatcher, x as BigPool, y as getGlobalBounds, z as TexturePool, R as RendererType, F as Bounds, H as FilterEffect, I as Sprite, s as Texture, S as STENCIL_MODES, h as CLEAR, w as warn, J as getAttributeInfoFromFormat, K as unsafeEvalSupported, b as Buffer, B as BufferUsage, i as CanvasSource, L as uid$1, j as TextureSource, N as Rectangle, O as SystemRunner, a as EventEmitter, C as Container, Q as multiplyColors, V as UPDATE_COLOR, W as UPDATE_BLEND, X as UPDATE_VISIBLE, Y as Color, Z as getLocalBounds, P as Point, c as BindGroup, T as Ticker, D as DOMAdapter, _ as VERSION, $ as deprecation, a0 as v8_0_0, a1 as RendererInitHook } from './index2.mjs';
 import { S as State, B as BatchableSprite, c as color32BitToUniform } from './colorToUniform.mjs';
 
 const _Filter = class _Filter extends Shader {
@@ -13,7 +13,6 @@ const _Filter = class _Filter extends Shader {
     /**
      * The gpu state the filter requires to render.
      * @internal
-     * @ignore
      */
     this._state = State.for2d();
     this.blendMode = options.blendMode;
@@ -71,10 +70,7 @@ const _Filter = class _Filter extends Shader {
     });
   }
 };
-/**
- * The default filter settings
- * @static
- */
+/** The default filter settings */
 _Filter.defaultOptions = {
   blendMode: "normal",
   resolution: 1,
@@ -162,7 +158,9 @@ const _BatcherPipe = class _BatcherPipe {
     let batchers = this._batchersByInstructionSet[instructionSet.uid];
     if (!batchers) {
       batchers = this._batchersByInstructionSet[instructionSet.uid] = /* @__PURE__ */ Object.create(null);
-      batchers.default || (batchers.default = new DefaultBatcher());
+      batchers.default || (batchers.default = new DefaultBatcher({
+        maxTextures: this.renderer.limits.maxBatchableTextures
+      }));
     }
     this._activeBatches = batchers;
     this._activeBatch = this._activeBatches.default;
@@ -267,7 +265,7 @@ const textureBit = {
             @group(2) @binding(0) var uTexture: texture_2d<f32>;
             @group(2) @binding(1) var uSampler: sampler;
 
-         
+
         `
     ),
     main: (
@@ -300,7 +298,7 @@ const textureBitGl = {
       `
         uniform sampler2D uTexture;
 
-         
+
         `
     ),
     main: (
@@ -721,11 +719,11 @@ GpuStencilModesToPixi[STENCIL_MODES.INVERSE_MASK_ACTIVE] = {
   stencilWriteMask: 0,
   stencilFront: {
     compare: "not-equal",
-    passOp: "replace"
+    passOp: "keep"
   },
   stencilBack: {
     compare: "not-equal",
-    passOp: "replace"
+    passOp: "keep"
   }
 };
 
@@ -1157,7 +1155,6 @@ const _RenderTarget = class _RenderTarget {
    * This will ensure a depthStencil texture is created for this render target.
    * Most likely called by the mask system to make sure we have stencil buffer added.
    * @internal
-   * @ignore
    */
   ensureDepthStencilTexture() {
     if (!this.depthStencilTexture) {
@@ -1482,7 +1479,7 @@ class RenderTargetSystem {
       renderTarget = new RenderTarget({
         colorTextures: [renderSurface]
       });
-      if (CanvasSource.test(renderSurface.source.resource)) {
+      if (renderSurface.source instanceof CanvasSource) {
         renderTarget.isRoot = true;
       }
       renderSurface.once("destroy", () => {
@@ -1529,25 +1526,21 @@ class BufferResource extends EventEmitter {
     /**
      * a resource type, used to identify how to handle it when its in a bind group / shader resource
      * @internal
-     * @ignore
      */
     this._resourceType = "bufferResource";
     /**
      * used internally to know if a uniform group was used in the last render pass
      * @internal
-     * @ignore
      */
     this._touched = 0;
     /**
      * the resource id used internally by the renderer to build bind group keys
      * @internal
-     * @ignore
      */
     this._resourceId = uid$1("resource");
     /**
      * A cheeky hint to the GL renderer to let it know this is a BufferResource
      * @internal
-     * @ignore
      */
     this._bufferResource = true;
     /**
@@ -1974,10 +1967,7 @@ RenderGroupSystem.extension = {
 
 class SpritePipe {
   constructor(renderer) {
-    this._gpuSpriteHash = /* @__PURE__ */ Object.create(null);
-    this._destroyRenderableBound = this.destroyRenderable.bind(this);
     this._renderer = renderer;
-    this._renderer.renderableGC.addManagedHash(this, "_gpuSpriteHash");
   }
   addRenderable(sprite, instructionSet) {
     const gpuSprite = this._getGpuSprite(sprite);
@@ -1986,7 +1976,7 @@ class SpritePipe {
     this._renderer.renderPipes.batch.addToBatch(gpuSprite, instructionSet);
   }
   updateRenderable(sprite) {
-    const gpuSprite = this._gpuSpriteHash[sprite.uid];
+    const gpuSprite = this._getGpuSprite(sprite);
     if (sprite.didViewUpdate)
       this._updateBatchableSprite(sprite, gpuSprite);
     gpuSprite._batcher.updateElement(gpuSprite);
@@ -1998,35 +1988,24 @@ class SpritePipe {
       sprite._texture
     );
   }
-  destroyRenderable(sprite) {
-    const batchableSprite = this._gpuSpriteHash[sprite.uid];
-    BigPool.return(batchableSprite);
-    this._gpuSpriteHash[sprite.uid] = null;
-    sprite.off("destroyed", this._destroyRenderableBound);
-  }
   _updateBatchableSprite(sprite, batchableSprite) {
     batchableSprite.bounds = sprite.visualBounds;
     batchableSprite.texture = sprite._texture;
   }
   _getGpuSprite(sprite) {
-    return this._gpuSpriteHash[sprite.uid] || this._initGPUSprite(sprite);
+    return sprite._gpuData[this._renderer.uid] || this._initGPUSprite(sprite);
   }
   _initGPUSprite(sprite) {
-    const batchableSprite = BigPool.get(BatchableSprite);
+    const batchableSprite = new BatchableSprite();
     batchableSprite.renderable = sprite;
     batchableSprite.transform = sprite.groupTransform;
     batchableSprite.texture = sprite._texture;
     batchableSprite.bounds = sprite.visualBounds;
     batchableSprite.roundPixels = this._renderer._roundPixels | sprite._roundPixels;
-    this._gpuSpriteHash[sprite.uid] = batchableSprite;
-    sprite.on("destroyed", this._destroyRenderableBound);
+    sprite._gpuData[this._renderer.uid] = batchableSprite;
     return batchableSprite;
   }
   destroy() {
-    for (const i in this._gpuSpriteHash) {
-      BigPool.return(this._gpuSpriteHash[i]);
-    }
-    this._gpuSpriteHash = null;
     this._renderer = null;
   }
 }
@@ -2063,6 +2042,12 @@ const _BackgroundSystem = class _BackgroundSystem {
     return this._backgroundColor;
   }
   set color(value) {
+    const incoming = Color.shared.setValue(value);
+    if (incoming.alpha < 1 && this._backgroundColor.alpha === 1) {
+      warn(
+        "Cannot set a transparent background on an opaque canvas. To enable transparency, set backgroundAlpha < 1 when initializing your Application."
+      );
+    }
     this._backgroundColor.setValue(value);
   }
   /** The background color alpha. Setting this to 0 will make the canvas transparent. */
@@ -2079,7 +2064,6 @@ const _BackgroundSystem = class _BackgroundSystem {
   /**
    * destroys the background system
    * @internal
-   * @ignore
    */
   destroy() {
   }
@@ -2190,7 +2174,6 @@ class BlendModePipe {
   /**
    * called when the instruction build process is starting this will reset internally to the default blend mode
    * @internal
-   * @ignore
    */
   buildStart() {
     this._isAdvanced = false;
@@ -2200,17 +2183,13 @@ class BlendModePipe {
    * active, we add the final render instructions added to the instruction set
    * @param instructionSet - The instruction set we are adding to
    * @internal
-   * @ignore
    */
   buildEnd(instructionSet) {
     if (this._isAdvanced) {
       this._endAdvancedBlendMode(instructionSet);
     }
   }
-  /**
-   * @internal
-   * @ignore
-   */
+  /** @internal */
   destroy() {
     this._renderer = null;
     this._renderableList = null;
@@ -2253,9 +2232,35 @@ const _ExtractSystem = class _ExtractSystem {
     };
   }
   /**
-   * Will return a HTML Image of the target
-   * @param options - The options for creating the image, or the target to extract
-   * @returns - HTML Image of the target
+   * Creates an HTMLImageElement from a display object or texture.
+   * @param options - Options for creating the image, or the target to extract
+   * @returns Promise that resolves with the generated HTMLImageElement
+   * @example
+   * ```ts
+   * // Basic usage with a sprite
+   * const sprite = new Sprite(texture);
+   * const image = await renderer.extract.image(sprite);
+   * document.body.appendChild(image);
+   *
+   * // Advanced usage with options
+   * const image = await renderer.extract.image({
+   *     target: container,
+   *     format: 'webp',
+   *     quality: 0.8,
+   *     frame: new Rectangle(0, 0, 100, 100),
+   *     resolution: 2,
+   *     clearColor: '#ff0000',
+   *     antialias: true
+   * });
+   *
+   * // Extract directly from a texture
+   * const texture = Texture.from('myTexture.png');
+   * const image = await renderer.extract.image(texture);
+   * ```
+   * @see {@link ExtractImageOptions} For detailed options
+   * @see {@link ExtractSystem.base64} For base64 string output
+   * @see {@link ExtractSystem.canvas} For canvas output
+   * @category rendering
    */
   async image(options) {
     const image = new Image();
@@ -2263,9 +2268,36 @@ const _ExtractSystem = class _ExtractSystem {
     return image;
   }
   /**
-   * Will return a base64 encoded string of this target. It works by calling
-   * `Extract.canvas` and then running toDataURL on that.
-   * @param options - The options for creating the image, or the target to extract
+   * Converts the target into a base64 encoded string.
+   *
+   * This method works by first creating
+   * a canvas using `Extract.canvas` and then converting it to a base64 string.
+   * @param options - The options for creating the base64 string, or the target to extract
+   * @returns Promise that resolves with the base64 encoded string
+   * @example
+   * ```ts
+   * // Basic usage with a sprite
+   * const sprite = new Sprite(texture);
+   * const base64 = await renderer.extract.base64(sprite);
+   * console.log(base64); // data:image/png;base64,...
+   *
+   * // Advanced usage with options
+   * const base64 = await renderer.extract.base64({
+   *     target: container,
+   *     format: 'webp',
+   *     quality: 0.8,
+   *     frame: new Rectangle(0, 0, 100, 100),
+   *     resolution: 2
+   * });
+   * ```
+   * @throws Will throw an error if the platform doesn't support any of:
+   * - ICanvas.toDataURL
+   * - ICanvas.toBlob
+   * - ICanvas.convertToBlob
+   * @see {@link ExtractImageOptions} For detailed options
+   * @see {@link ExtractSystem.canvas} For canvas output
+   * @see {@link ExtractSystem.image} For HTMLImage output
+   * @category rendering
    */
   async base64(options) {
     options = this._normalizeOptions(
@@ -2303,9 +2335,44 @@ const _ExtractSystem = class _ExtractSystem {
     throw new Error("Extract.base64() requires ICanvas.toDataURL, ICanvas.toBlob, or ICanvas.convertToBlob to be implemented");
   }
   /**
-   * Creates a Canvas element, renders this target to it and then returns it.
+   * Creates a Canvas element, renders the target to it and returns it.
+   * This method is useful for creating static images or when you need direct canvas access.
    * @param options - The options for creating the canvas, or the target to extract
-   * @returns - A Canvas element with the texture rendered on.
+   * @returns A Canvas element with the texture rendered on
+   * @example
+   * ```ts
+   * // Basic canvas extraction from a sprite
+   * const sprite = new Sprite(texture);
+   * const canvas = renderer.extract.canvas(sprite);
+   * document.body.appendChild(canvas);
+   *
+   * // Extract with custom region
+   * const canvas = renderer.extract.canvas({
+   *     target: container,
+   *     frame: new Rectangle(0, 0, 100, 100)
+   * });
+   *
+   * // Extract with high resolution
+   * const canvas = renderer.extract.canvas({
+   *     target: sprite,
+   *     resolution: 2,
+   *     clearColor: '#ff0000'
+   * });
+   *
+   * // Extract directly from a texture
+   * const texture = Texture.from('myTexture.png');
+   * const canvas = renderer.extract.canvas(texture);
+   *
+   * // Extract with anti-aliasing
+   * const canvas = renderer.extract.canvas({
+   *     target: graphics,
+   *     antialias: true
+   * });
+   * ```
+   * @see {@link ExtractOptions} For detailed options
+   * @see {@link ExtractSystem.image} For HTMLImage output
+   * @see {@link ExtractSystem.pixels} For raw pixel data
+   * @category rendering
    */
   canvas(options) {
     options = this._normalizeOptions(options);
@@ -2320,10 +2387,34 @@ const _ExtractSystem = class _ExtractSystem {
     return canvas;
   }
   /**
-   * Will return a one-dimensional array containing the pixel data of the entire texture in RGBA
-   * order, with integer values between 0 and 255 (included).
+   * Returns a one-dimensional array containing the pixel data of the entire texture in RGBA order,
+   * with integer values between 0 and 255 (inclusive).
+   * > [!NOE] The returned array is a flat Uint8Array where every 4 values represent RGBA
    * @param options - The options for extracting the image, or the target to extract
-   * @returns - One-dimensional array containing the pixel data of the entire texture
+   * @returns One-dimensional Uint8Array containing the pixel data in RGBA format
+   * @example
+   * ```ts
+   * // Basic pixel extraction
+   * const sprite = new Sprite(texture);
+   * const pixels = renderer.extract.pixels(sprite);
+   * console.log(pixels[0], pixels[1], pixels[2], pixels[3]); // R,G,B,A values
+   *
+   * // Extract with custom region
+   * const pixels = renderer.extract.pixels({
+   *     target: sprite,
+   *     frame: new Rectangle(0, 0, 100, 100)
+   * });
+   *
+   * // Extract with high resolution
+   * const pixels = renderer.extract.pixels({
+   *     target: sprite,
+   *     resolution: 2
+   * });
+   * ```
+   * @see {@link ExtractOptions} For detailed options
+   * @see {@link ExtractSystem.canvas} For canvas output
+   * @see {@link ExtractSystem.image} For image output
+   * @category rendering
    */
   pixels(options) {
     options = this._normalizeOptions(options);
@@ -2337,9 +2428,47 @@ const _ExtractSystem = class _ExtractSystem {
     return pixelInfo;
   }
   /**
-   * Will return a texture of the target
+   * Creates a texture from a display object or existing texture.
+   *
+   * This is useful for creating
+   * reusable textures from rendered content or making copies of existing textures.
+   * > [!NOTE] The returned texture should be destroyed when no longer needed
    * @param options - The options for creating the texture, or the target to extract
-   * @returns - A texture of the target
+   * @returns A new texture containing the extracted content
+   * @example
+   * ```ts
+   * // Basic texture extraction from a sprite
+   * const sprite = new Sprite(texture);
+   * const extractedTexture = renderer.extract.texture(sprite);
+   *
+   * // Extract with custom region
+   * const regionTexture = renderer.extract.texture({
+   *     target: container,
+   *     frame: new Rectangle(0, 0, 100, 100)
+   * });
+   *
+   * // Extract with high resolution
+   * const hiResTexture = renderer.extract.texture({
+   *     target: sprite,
+   *     resolution: 2,
+   *     clearColor: '#ff0000'
+   * });
+   *
+   * // Create a new sprite from extracted texture
+   * const newSprite = new Sprite(
+   *     renderer.extract.texture({
+   *         target: graphics,
+   *         antialias: true
+   *     })
+   * );
+   *
+   * // Clean up when done
+   * extractedTexture.destroy(true);
+   * ```
+   * @see {@link ExtractOptions} For detailed options
+   * @see {@link Texture} For texture management
+   * @see {@link GenerateTextureSystem} For texture generation
+   * @category rendering
    */
   texture(options) {
     options = this._normalizeOptions(options);
@@ -2348,8 +2477,48 @@ const _ExtractSystem = class _ExtractSystem {
     return this._renderer.textureGenerator.generateTexture(options);
   }
   /**
-   * Will extract a HTMLImage of the target and download it
+   * Extracts and downloads content from the renderer as an image file.
+   * This is a convenient way to save screenshots or export rendered content.
+   * > [!NOTE] The download will use PNG format regardless of the filename extension
    * @param options - The options for downloading and extracting the image, or the target to extract
+   * @example
+   * ```ts
+   * // Basic download with default filename
+   * const sprite = new Sprite(texture);
+   * renderer.extract.download(sprite); // Downloads as 'image.png'
+   *
+   * // Download with custom filename
+   * renderer.extract.download({
+   *     target: sprite,
+   *     filename: 'screenshot.png'
+   * });
+   *
+   * // Download with custom region
+   * renderer.extract.download({
+   *     target: container,
+   *     filename: 'region.png',
+   *     frame: new Rectangle(0, 0, 100, 100)
+   * });
+   *
+   * // Download with high resolution and background
+   * renderer.extract.download({
+   *     target: stage,
+   *     filename: 'hd-screenshot.png',
+   *     resolution: 2,
+   *     clearColor: '#ff0000'
+   * });
+   *
+   * // Download with anti-aliasing
+   * renderer.extract.download({
+   *     target: graphics,
+   *     filename: 'smooth.png',
+   *     antialias: true
+   * });
+   * ```
+   * @see {@link ExtractDownloadOptions} For detailed options
+   * @see {@link ExtractSystem.image} For creating images without download
+   * @see {@link ExtractSystem.canvas} For canvas output
+   * @category rendering
    */
   download(options) {
     options = this._normalizeOptions(options);
@@ -2363,7 +2532,19 @@ const _ExtractSystem = class _ExtractSystem {
   }
   /**
    * Logs the target to the console as an image. This is a useful way to debug what's happening in the renderer.
+   * The image will be displayed in the browser's console using CSS background images.
    * @param options - The options for logging the image, or the target to log
+   * @param options.width - The width of the logged image preview in the console (in pixels)
+   * @example
+   * ```ts
+   * // Basic usage
+   * const sprite = new Sprite(texture);
+   * renderer.extract.log(sprite);
+   * ```
+   * @see {@link ExtractSystem.canvas} For getting raw canvas output
+   * @see {@link ExtractSystem.pixels} For raw pixel data
+   * @category rendering
+   * @advanced
    */
   log(options) {
     const width = options.width ?? 200;
@@ -2391,11 +2572,20 @@ _ExtractSystem.extension = {
   ],
   name: "extract"
 };
-/** Default options for creating an image. */
+/**
+ * Default options for image extraction.
+ * @example
+ * ```ts
+ * // Customize default options
+ * ExtractSystem.defaultImageOptions.format = 'webp';
+ * ExtractSystem.defaultImageOptions.quality = 0.8;
+ *
+ * // Use defaults
+ * const image = await renderer.extract.image(sprite);
+ * ```
+ */
 _ExtractSystem.defaultImageOptions = {
-  /** The format of the image. */
   format: "png",
-  /** The quality of the image. */
   quality: 1
 };
 let ExtractSystem = _ExtractSystem;
@@ -2427,15 +2617,40 @@ class GenerateTextureSystem {
     this._renderer = renderer;
   }
   /**
-   * A Useful function that returns a texture of the display object that can then be used to create sprites
-   * This can be quite useful if your container is complicated and needs to be reused multiple times.
-   * @param {GenerateTextureOptions | Container} options - Generate texture options.
-   * @param {Container} [options.container] - If not given, the renderer's resolution is used.
-   * @param {Rectangle} options.region - The region of the container, that shall be rendered,
-   * @param {number} [options.resolution] - The resolution of the texture being generated.
-   *        if no region is specified, defaults to the local bounds of the container.
-   * @param {GenerateTextureSourceOptions} [options.textureSourceOptions] - Texture options for GPU.
-   * @returns a shiny new texture of the container passed in
+   * Creates a texture from a display object that can be used for creating sprites and other textures.
+   * This is particularly useful for optimizing performance when a complex container needs to be reused.
+   * @param options - Generate texture options or a container to convert to texture
+   * @returns A new RenderTexture containing the rendered display object
+   * @example
+   * ```ts
+   * // Basic usage with a container
+   * const container = new Container();
+   * container.addChild(
+   *     new Graphics()
+   *         .circle(0, 0, 50)
+   *         .fill('red')
+   * );
+   *
+   * const texture = renderer.textureGenerator.generateTexture(container);
+   *
+   * // Advanced usage with options
+   * const texture = renderer.textureGenerator.generateTexture({
+   *     target: container,
+   *     frame: new Rectangle(0, 0, 100, 100), // Specific region
+   *     resolution: 2,                        // High DPI
+   *     clearColor: '#ff0000',               // Red background
+   *     antialias: true                      // Smooth edges
+   * });
+   *
+   * // Create a sprite from the generated texture
+   * const sprite = new Sprite(texture);
+   *
+   * // Clean up when done
+   * texture.destroy(true);
+   * ```
+   * @see {@link GenerateTextureOptions} For detailed texture generation options
+   * @see {@link RenderTexture} For the type of texture created
+   * @category rendering
    */
   generateTexture(options) {
     if (options instanceof Container) {
@@ -2523,6 +2738,7 @@ class GlobalUniformSystem {
   }) {
     const renderTarget = this._renderer.renderTarget.renderTarget;
     const currentGlobalUniformData = this._stackIndex ? this._globalUniformDataStack[this._stackIndex - 1] : {
+      projectionData: renderTarget,
       worldTransformMatrix: new Matrix(),
       worldColor: 4294967295,
       offset: new Point()
@@ -2671,7 +2887,6 @@ class SchedulerSystem {
   /**
    * Destroys the scheduler system and removes all tasks.
    * @internal
-   * @ignore
    */
   destroy() {
     Ticker.system.remove(this._update, this);
@@ -3046,7 +3261,7 @@ _TextureGCSystem.defaultOptions = {
   textureGCActive: true,
   /**
    * @deprecated since 8.3.0
-   * @see {@link TextureGCSystem.textureGCMaxIdle}
+   * @see {@link TextureGCSystemOptions.textureGCMaxIdle}
    */
   textureGCAMaxIdle: null,
   /**
@@ -3066,7 +3281,7 @@ const _ViewSystem = class _ViewSystem {
   /**
    * Whether CSS dimensions of canvas view should be resized to screen dimensions automatically.
    * This is only supported for HTMLCanvasElement and will be ignored if the canvas is an OffscreenCanvas.
-   * @member {boolean}
+   * @type {boolean}
    */
   get autoDensity() {
     return this.texture.source.autoDensity;
@@ -3124,7 +3339,10 @@ const _ViewSystem = class _ViewSystem {
   /**
    * Destroys this System and optionally removes the canvas from the dom.
    * @param {options | false} options - The options for destroying the view, or "false".
-   * @param options.removeView - Whether to remove the view element from the DOM. Defaults to `false`.
+   * @example
+   * viewSystem.destroy();
+   * viewSystem.destroy(true);
+   * viewSystem.destroy({ removeView: true });
    */
   destroy(options = false) {
     const removeView = typeof options === "boolean" ? options : !!options?.removeView;