Upload folder using huggingface_hub

.gitignore

@@ -0,0 +1,13 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/
+.venv

.python-version

@@ -0,0 +1 @@
+3.12

README.md

@@ -1,12 +1,384 @@
----
-title: Gradio Polygonannotator
-emoji: 🐠
-colorFrom: green
-colorTo: red
-sdk: gradio
-sdk_version: 5.46.1
-app_file: app.py
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+# `gradio_polygonannotator`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.1.0%20-%20orange"> <a href="https://github.com/yourusername/gradio-polygonannotator/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> 
+
+Interactive polygon annotation component for Gradio with multi-selection, hover effects, and customizable appearance
+
+## Installation
+
+```bash
+pip install gradio_polygonannotator
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_polygonannotator import PolygonAnnotator
+
+# Example with document regions
+example_data = {
+    "image": "https://images.unsplash.com/photo-1544816155-12df9643f363?w=800&h=1200",
+    "polygons": [
+        {
+            "id": "title",
+            "coordinates": [[180, 150], [580, 150], [580, 200], [180, 200]],
+            "color": "#FF6B6B",
+            "mask_opacity": 0.15,
+            "stroke_width": 1.0,
+            "stroke_opacity": 0.8,
+        },
+        {
+            "id": "paragraph_1",
+            "coordinates": [[100, 400], [750, 400], [750, 600], [100, 600]],
+            "color": "#4ECDC4",
+            "mask_opacity": 0.15,
+            "stroke_width": 0.7,
+            "stroke_opacity": 0.6,
+        },
+        {
+            "id": "paragraph_2",
+            "coordinates": [[100, 650], [750, 650], [750, 950], [100, 950]],
+            "color": "#4ECDC4",
+            "mask_opacity": 0.15,
+            "stroke_width": 0.7,
+            "stroke_opacity": 0.6,
+        },
+        {
+            "id": "signature",
+            "coordinates": [[400, 1020], [650, 1020], [650, 1080], [400, 1080]],
+            "color": "#FFE66D",
+            "mask_opacity": 0.2,
+            "stroke_width": 1.5,
+            "stroke_opacity": 0.8,
+        }
+    ]
+}
+
+def handle_selection(data, evt: gr.SelectData):
+    """Handle polygon selection and display info"""
+    if evt.value and data:
+        selected_ids = evt.value if isinstance(evt.value, list) else [evt.value]
+        info = f"Selected {len(selected_ids)} polygon(s):\n"
+        for poly_id in selected_ids:
+            polygon = next((p for p in data["polygons"] if p["id"] == poly_id), None)
+            if polygon:
+                info += f"• {poly_id}\n"
+        return info
+    return "Click on polygons to select them. Use Ctrl/Cmd+Click for multi-selection."
+
+with gr.Blocks() as demo:
+    gr.Markdown("""
+    # PolygonAnnotator - Interactive Polygon Selection
+
+    Click on polygons to select them. Use **Ctrl/Cmd+Click** for multiple selections.
+    Click selected polygons to deselect.
+    """)
+
+    with gr.Row():
+        with gr.Column(scale=3):
+            annotator = PolygonAnnotator(
+                value=example_data,
+                label="Document with Region Annotations",
+                height=600,
+            )
+
+        with gr.Column(scale=1):
+            selected_info = gr.Textbox(
+                label="Selected Regions",
+                lines=6,
+                value="Click on polygons to select them. Use Ctrl/Cmd+Click for multi-selection."
+            )
+
+    # Handle selection events
+    annotator.select(
+        handle_selection,
+        inputs=[annotator],
+        outputs=[selected_info]
+    )
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `PolygonAnnotator`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+dict | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Dictionary containing 'image' (FileData), 'polygons' (list with id, coordinates, color, opacities),</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | I18nData | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Component label shown above the annotator.</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Timer | float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Continuously calls `value` to recalculate it if `value` is a function.</td>
+</tr>
+
+<tr>
+<td align="left"><code>inputs</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Component | Sequence[Component] | set[Component] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Components used as inputs to calculate `value` if it's a function.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Whether to display the label.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_download_button</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">Whether to show image download button.</td>
+</tr>
+
+<tr>
+<td align="left"><code>height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Component height in pixels or CSS units.</td>
+</tr>
+
+<tr>
+<td align="left"><code>width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Component width in pixels or CSS units.</td>
+</tr>
+
+<tr>
+<td align="left"><code>container</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">Whether to wrap component in a container with padding.</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Relative size compared to adjacent components.</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">Minimum pixel width before wrapping.</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Whether users can interact with polygons (selection/deselection).</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | Literal["hidden"]
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">Whether component is visible ("hidden" keeps it in DOM but invisible).</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">HTML DOM id for CSS targeting.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">HTML DOM classes for CSS targeting.</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">Whether to render the component immediately.</td>
+</tr>
+
+<tr>
+<td align="left"><code>key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | tuple[int | str, ...] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Key for maintaining component identity across re-renders.</td>
+</tr>
+
+<tr>
+<td align="left"><code>preserved_by_key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>"value"</code></td>
+<td align="left">Parameters preserved across re-renders with same key.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `clear` | This listener is triggered when the user clears the PolygonAnnotator using the clear button for the component. |
+| `change` | Triggered when the value of the PolygonAnnotator changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
+| `upload` | This listener is triggered when the user uploads a file into the PolygonAnnotator. |
+| `select` | Event listener for when the user selects or deselects the PolygonAnnotator. Uses event data gradio.SelectData to carry `value` referring to the label of the PolygonAnnotator, and `selected` to refer to state of the PolygonAnnotator. See EventData documentation on how to use this event data |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As output:** Is passed, dictionary with image path, polygon data including coordinates, colors, opacities,.
+- **As input:** Should return, dictionary containing 'image' (file path or URL), 'polygons' (list of polygon dictionaries.
+
+ ```python
+ def predict(
+     value: dict | None
+ ) -> dict | None:
+     return value
+ ```
+ 

app.py

@@ -0,0 +1,266 @@
+import gradio as gr
+from gradio_polygonannotator import PolygonAnnotator
+from typing import Literal
+
+example_data = {
+    "image": "https://images.unsplash.com/photo-1544816155-12df9643f363?w=800&h=1200",
+    "polygons": [
+        {
+            "id": "date_line",
+            "coordinates": [[180, 150], [580, 150], [580, 200], [180, 200]],
+            "color": "#FF0000",
+            "mask_opacity": 0.2,
+            "stroke_width": 0.7,
+            "stroke_opacity": 0.6,
+            "selected_mask_opacity": 0.5,
+            "selected_stroke_opacity": 1.0
+        },
+        {
+            "id": "salutation",
+            "coordinates": [[180, 280], [680, 280], [680, 340], [180, 340]],
+            "color": "#00FF00",
+            "mask_opacity": 0.2,
+            "stroke_width": 1.0,
+            "stroke_opacity": 0.6,
+            "selected_mask_opacity": 0.4,
+            "selected_stroke_opacity": 0.9
+        },
+        {
+            "id": "main_text_block",
+            "coordinates": [[100, 400], [750, 400], [750, 950], [100, 950]],
+            "color": "#0000FF",
+            "mask_opacity": 0.15,
+            "stroke_width": 0.5,
+            "stroke_opacity": 0.5,
+            "selected_mask_opacity": 0.4,
+            "selected_stroke_opacity": 0.8
+        },
+        {
+            "id": "closing_signature",
+            "coordinates": [[400, 1020], [650, 1020], [650, 1080], [400, 1080]],
+            "color": "#FFFF00",
+            "mask_opacity": 0.25,
+            "stroke_width": 1.5,
+            "stroke_opacity": 0.7,
+            "selected_mask_opacity": 0.6,
+            "selected_stroke_opacity": 1.0
+        }
+    ]
+}
+
+# Create dataframe data from polygon information
+polygon_table = [
+    ["date_line", "Date Line", "#FF0000", 0.2, 0.7, 0.6],
+    ["salutation", "Salutation", "#00FF00", 0.2, 1.0, 0.6],
+    ["main_text_block", "Main Text Block", "#0000FF", 0.15, 0.5, 0.5],
+    ["closing_signature", "Closing/Signature", "#FFFF00", 0.25, 1.5, 0.7]
+]
+
+def process_viewer_selection(data, evt: gr.SelectData):
+    """Handle polygon selection from viewer and update dataframe selection"""
+    if evt.value and data:
+        selected_ids = evt.value if isinstance(evt.value, list) else [evt.value]
+
+        # Create highlighted dataframe data
+        highlighted_table = []
+        for row in polygon_table:
+            if row[0] in selected_ids:  # If this is a selected row
+                # Add highlighting markers to the selected row
+                highlighted_row = [f"→ {row[0]} ←", f"→ {row[1]} ←", f"→ {row[2]} ←", f"→ {row[3]} ←", f"→ {row[4]} ←", f"→ {row[5]} ←"]
+                highlighted_table.append(highlighted_row)
+            else:
+                highlighted_table.append(row)
+
+        # Create info text for all selected polygons
+        info_lines = [f"Selected {len(selected_ids)} polygon(s):"]
+        for selected_id in selected_ids:
+            selected_polygon = next((p for p in data["polygons"] if p["id"] == selected_id), None)
+            if selected_polygon:
+                info_lines.append(f"• {selected_id}: {selected_polygon['color']}, mask: {selected_polygon.get('mask_opacity', 0.2)}, stroke: {selected_polygon.get('stroke_width', 0.7)}px")
+
+        info_text = "\n".join(info_lines)
+        return info_text, highlighted_table
+
+    return "No polygons selected", polygon_table
+
+def process_dataframe_selection(selected_data, evt: gr.SelectData):
+    """Handle row selection from dataframe and update viewer selection"""
+    if evt.index is not None and evt.index[0] < len(polygon_table):
+        selected_row = polygon_table[evt.index[0]]
+        polygon_id = selected_row[0]
+
+        # Update the viewer data with the selected polygon
+        updated_data = example_data.copy()
+        updated_data["selected_polygons"] = [polygon_id]
+
+        info_text = f"Selected polygon: {polygon_id}\nName: {selected_row[1]}\nColor: {selected_row[2]}\nMask Opacity: {selected_row[3]}\nStroke Width: {selected_row[4]}\nStroke Opacity: {selected_row[5]}"
+        return updated_data, info_text
+
+    # Deselection
+    updated_data = example_data.copy()
+    updated_data["selected_polygons"] = []
+    return updated_data, "No polygons selected"
+
+def clear_selection():
+    """Clear polygon selection"""
+    updated_data = example_data.copy()
+    updated_data["selected_polygons"] = []
+    return updated_data, "No polygons selected", polygon_table
+
+def select_polygon_by_id(polygon_id):
+    """Select polygon by ID from textbox input"""
+    if not polygon_id or polygon_id.strip() == "":
+        # Empty input - clear selection
+        updated_data = example_data.copy()
+        updated_data["selected_polygons"] = []
+        return updated_data, "No polygons selected", polygon_table
+
+    # Handle multiple IDs (comma-separated)
+    polygon_ids = [id.strip() for id in polygon_id.split(",") if id.strip()]
+    valid_ids = [p["id"] for p in example_data["polygons"]]
+
+    # Filter to only valid IDs
+    valid_selected_ids = [id for id in polygon_ids if id in valid_ids]
+    invalid_ids = [id for id in polygon_ids if id not in valid_ids]
+
+    if not valid_selected_ids:
+        # No valid IDs
+        updated_data = example_data.copy()
+        updated_data["selected_polygons"] = []
+        error_msg = f"Invalid polygon ID(s): {', '.join(invalid_ids)}. Valid IDs: {', '.join(valid_ids)}"
+        return updated_data, error_msg, polygon_table
+
+    # Valid IDs - select polygons
+    updated_data = example_data.copy()
+    updated_data["selected_polygons"] = valid_selected_ids
+
+    # Create highlighted dataframe data
+    highlighted_table = []
+    for row in polygon_table:
+        if row[0] in valid_selected_ids:  # If this is a selected row
+            # Add highlighting markers to the selected row
+            highlighted_row = [f"→ {row[0]} ←", f"→ {row[1]} ←", f"→ {row[2]} ←", f"→ {row[3]} ←", f"→ {row[4]} ←", f"→ {row[5]} ←"]
+            highlighted_table.append(highlighted_row)
+        else:
+            highlighted_table.append(row)
+
+    # Create info text
+    info_lines = [f"Selected {len(valid_selected_ids)} polygon(s):"]
+    for selected_id in valid_selected_ids:
+        selected_polygon = next((p for p in example_data["polygons"] if p["id"] == selected_id), None)
+        if selected_polygon:
+            info_lines.append(f"• {selected_id}: {selected_polygon['color']}, mask: {selected_polygon.get('mask_opacity', 0.2)}, stroke: {selected_polygon.get('stroke_width', 0.7)}px")
+
+    if invalid_ids:
+        info_lines.append(f"\nInvalid IDs: {', '.join(invalid_ids)}")
+
+    info_text = "\n".join(info_lines)
+    return updated_data, info_text, highlighted_table
+
+with gr.Blocks() as demo:
+    gr.Markdown("""
+    # PolygonAnnotator - Advanced Interactive Demo
+
+    This demo showcases all the features of the PolygonAnnotator component:
+    - **Click** on polygons to select/deselect them
+    - **Ctrl/Cmd+Click** for multiple selection
+    - **Click dataframe rows** to select polygons
+    - **Enter polygon IDs** manually in the textbox
+    - **Clear button** to deselect all
+    """)
+
+    with gr.Row():
+        with gr.Column(scale=2):
+            poly_annotator = PolygonAnnotator(
+                value=example_data,
+                label="Document with Interactive Polygon Annotations",
+                height=600,
+            )
+
+        with gr.Column(scale=1):
+            selected_info = gr.Textbox(
+                label="Selected Polygon Information",
+                lines=5,
+                value="Click on a polygon to see its information"
+            )
+
+            polygon_dataframe = gr.Dataframe(
+                value=polygon_table,
+                headers=["ID", "Name", "Color", "Mask", "Stroke W", "Stroke O"],
+                label="Polygon Data (Click rows to select)",
+                datatype=[Literal["str", "str", "str", "number", "number", "number"]],
+                interactive=True
+            )
+
+            clear_button = gr.Button("🗑️ Clear All Selections", variant="secondary")
+
+            with gr.Row():
+                polygon_id_input = gr.Textbox(
+                    label="Select by Polygon ID(s)",
+                    placeholder="Enter single ID or comma-separated IDs (e.g., 'date_line' or 'date_line, salutation')",
+                    scale=3
+                )
+                select_button = gr.Button("Select", variant="primary", scale=1)
+
+            gr.Markdown("""
+            ### Features Demonstrated
+
+            #### 🎨 Visual Customization
+            - Different **mask opacity** for each polygon fill
+            - Variable **stroke width** (0.5px to 1.5px)
+            - Custom **stroke opacity** for borders
+            - Enhanced appearance when selected
+
+            #### 🖱️ Interaction Methods
+            1. **Direct Click**: Click polygons in the viewer
+            2. **Multi-Selection**: Ctrl/Cmd+Click for multiple
+            3. **Dataframe**: Click table rows
+            4. **Text Input**: Type polygon IDs
+            5. **Clear All**: Reset selection
+
+            #### 📝 Polygon IDs
+            - `date_line` - Red header area
+            - `salutation` - Green greeting section
+            - `main_text_block` - Blue main content
+            - `closing_signature` - Yellow signature area
+
+            #### 💡 Tips
+            - Hover over polygons for visual feedback
+            - Selected polygons have increased opacity
+            - Use comma-separated IDs for batch selection
+            - Click selected polygons to deselect them
+            """)
+
+    # Handle selection events
+    poly_annotator.select(
+        process_viewer_selection,
+        inputs=[poly_annotator],
+        outputs=[selected_info, polygon_dataframe]
+    )
+
+    polygon_dataframe.select(
+        process_dataframe_selection,
+        inputs=[polygon_dataframe],
+        outputs=[poly_annotator, selected_info]
+    )
+
+    clear_button.click(
+        clear_selection,
+        outputs=[poly_annotator, selected_info, polygon_dataframe]
+    )
+
+    select_button.click(
+        select_polygon_by_id,
+        inputs=[polygon_id_input],
+        outputs=[poly_annotator, selected_info, polygon_dataframe]
+    )
+
+    # Also allow Enter key in textbox
+    polygon_id_input.submit(
+        select_polygon_by_id,
+        inputs=[polygon_id_input],
+        outputs=[poly_annotator, selected_info, polygon_dataframe]
+    )
+
+if __name__ == "__main__":
+    demo.launch()

backend/gradio_polygonannotator/__init__.py

@@ -0,0 +1,4 @@
+
+from .polygonannotator import PolygonAnnotator
+
+__all__ = ['PolygonAnnotator']

backend/gradio_polygonannotator/polygonannotator.py

@@ -0,0 +1,232 @@
+"""gr.PolygonAnnotator() component for interactive polygon annotations."""
+
+from __future__ import annotations
+
+from collections.abc import Sequence
+from typing import TYPE_CHECKING, Any, Literal, List, Optional
+
+from gradio_client import handle_file
+
+from gradio.components.base import Component
+from gradio.data_classes import FileData, GradioModel
+from gradio.events import Events
+from gradio.i18n import I18nData
+
+if TYPE_CHECKING:
+    from gradio.components import Timer
+
+
+class Polygon(GradioModel):
+    id: str
+    coordinates: List[List[float]]  # [[x1,y1], [x2,y2], ...]
+    color: str  # hex color like "#FF0000"
+    mask_opacity: Optional[float] = 0.2  # fill opacity from 0.0 to 1.0, default 0.2
+    stroke_width: Optional[float] = 0.7  # stroke width in pixels, default 0.7
+    stroke_opacity: Optional[float] = 0.6  # stroke opacity from 0.0 to 1.0, default 0.6
+    selected_mask_opacity: Optional[float] = 0.5  # mask opacity when selected, default 0.5
+    selected_stroke_opacity: Optional[float] = 1.0  # stroke opacity when selected, default 1.0
+
+
+class PolygonAnnotatorData(GradioModel):
+    image: FileData
+    polygons: List[Polygon]
+    selected_polygons: Optional[List[str]] = None  # List of IDs of the currently selected polygons
+
+
+class PolygonAnnotator(Component):
+    """
+    Interactive polygon annotation component for visualizing and selecting polygon regions on images.
+
+    The PolygonAnnotator displays an image with customizable polygon overlays that users can interact with.
+    Features include multi-selection with Ctrl/Cmd+click, hover effects, and customizable appearance including
+    stroke width, opacity settings for both fill and stroke, with separate settings for selected states.
+
+    Perfect for:
+    - Document layout analysis and region selection
+    - Image segmentation visualization
+    - Interactive annotation review and editing
+    - Object detection result visualization
+    """
+
+    EVENTS = [
+        Events.clear,
+        Events.change,
+        Events.upload,
+        Events.select,
+    ]
+
+    data_model = PolygonAnnotatorData
+
+    def __init__(
+        self,
+        value: dict | None = None,
+        *,
+        label: str | I18nData | None = None,
+        every: Timer | float | None = None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        show_label: bool | None = None,
+        show_download_button: bool = True,
+        height: int | str | None = None,
+        width: int | str | None = None,
+        container: bool = True,
+        scale: int | None = None,
+        min_width: int = 160,
+        interactive: bool | None = None,
+        visible: bool | Literal["hidden"] = True,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+        key: int | str | tuple[int | str, ...] | None = None,
+        preserved_by_key: list[str] | str | None = "value",
+    ):
+        """
+        Parameters:
+            value: Dictionary containing 'image' (FileData), 'polygons' (list with id, coordinates, color, opacities),
+                and optionally 'selected_polygons' (list of selected IDs).
+            label: Component label shown above the annotator.
+            every: Continuously calls `value` to recalculate it if `value` is a function.
+            inputs: Components used as inputs to calculate `value` if it's a function.
+            show_label: Whether to display the label.
+            show_download_button: Whether to show image download button.
+            height: Component height in pixels or CSS units.
+            width: Component width in pixels or CSS units.
+            container: Whether to wrap component in a container with padding.
+            scale: Relative size compared to adjacent components.
+            min_width: Minimum pixel width before wrapping.
+            interactive: Whether users can interact with polygons (selection/deselection).
+            visible: Whether component is visible ("hidden" keeps it in DOM but invisible).
+            elem_id: HTML DOM id for CSS targeting.
+            elem_classes: HTML DOM classes for CSS targeting.
+            render: Whether to render the component immediately.
+            key: Key for maintaining component identity across re-renders.
+            preserved_by_key: Parameters preserved across re-renders with same key.
+        """
+        self.show_download_button = show_download_button
+        self.height = height
+        self.width = width
+        super().__init__(
+            label=label,
+            every=every,
+            inputs=inputs,
+            show_label=show_label,
+            container=container,
+            scale=scale,
+            min_width=min_width,
+            interactive=interactive,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+            key=key,
+            preserved_by_key=preserved_by_key,
+            value=value,
+        )
+
+    def preprocess(self, payload: PolygonAnnotatorData | None) -> dict | None:
+        """
+        Parameters:
+            payload: The component data containing image and polygon annotations.
+        Returns:
+            Dictionary with image path, polygon data including coordinates, colors, opacities,
+            and the list of currently selected polygon IDs.
+        """
+        if payload is None:
+            return None
+        return {
+            "image": payload.image.path,
+            "polygons": [
+                {
+                    "id": p.id,
+                    "coordinates": p.coordinates,
+                    "color": p.color,
+                    "mask_opacity": p.mask_opacity,
+                    "stroke_width": p.stroke_width,
+                    "stroke_opacity": p.stroke_opacity,
+                    "selected_mask_opacity": p.selected_mask_opacity,
+                    "selected_stroke_opacity": p.selected_stroke_opacity
+                }
+                for p in payload.polygons
+            ],
+            "selected_polygons": payload.selected_polygons
+        }
+
+    def postprocess(self, value: dict | None) -> PolygonAnnotatorData | None:
+        """
+        Parameters:
+            value: Dictionary containing 'image' (file path or URL), 'polygons' (list of polygon dictionaries
+                   with id, coordinates, color, mask_opacity, stroke_width, stroke_opacity, and selection opacity settings),
+                   and optionally 'selected_polygons' (list of selected polygon IDs).
+        Returns:
+            Processed component data ready for display.
+        """
+        if value is None:
+            return None
+
+        # Handle the image path
+        image_path = value.get("image")
+        if isinstance(image_path, str):
+            image_data = FileData(path=image_path)
+        else:
+            return None
+
+        # Handle polygons
+        polygons = []
+        for poly in value.get("polygons", []):
+            polygons.append(
+                Polygon(
+                    id=poly["id"],
+                    coordinates=poly["coordinates"],
+                    color=poly.get("color", "#FF0000"),
+                    mask_opacity=poly.get("mask_opacity", poly.get("opacity", 0.2)),  # Support old 'opacity' key for backwards compatibility
+                    stroke_width=poly.get("stroke_width", 0.7),
+                    stroke_opacity=poly.get("stroke_opacity", 0.6),
+                    selected_mask_opacity=poly.get("selected_mask_opacity", 0.5),
+                    selected_stroke_opacity=poly.get("selected_stroke_opacity", 1.0)
+                )
+            )
+
+        return PolygonAnnotatorData(
+            image=image_data,
+            polygons=polygons,
+            selected_polygons=value.get("selected_polygons")
+        )
+
+    def example_payload(self) -> Any:
+        return {
+            "image": handle_file(
+                "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png"
+            ),
+            "polygons": [
+                {
+                    "id": "polygon1",
+                    "coordinates": [[50, 50], [150, 50], [150, 150], [50, 150]],
+                    "color": "#FF0000",
+                    "mask_opacity": 0.2,
+                    "stroke_width": 0.7,
+                    "stroke_opacity": 0.6
+                }
+            ]
+        }
+
+    def example_value(self) -> Any:
+        return {
+            "image": "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png",
+            "polygons": [
+                {
+                    "id": "polygon1",
+                    "coordinates": [[50, 50], [150, 50], [150, 150], [50, 150]],
+                    "color": "#FF0000",
+                    "mask_opacity": 0.2,
+                    "stroke_width": 0.7,
+                    "stroke_opacity": 0.6
+                },
+                {
+                    "id": "polygon2",
+                    "coordinates": [[200, 100], [300, 100], [250, 200]],
+                    "color": "#00FF00",
+                    "mask_opacity": 0.2,
+                    "stroke_width": 1,
+                    "stroke_opacity": 0.8
+                }
+            ]
+        }

demo/app.py

@@ -0,0 +1,86 @@
+import gradio as gr
+from gradio_polygonannotator import PolygonAnnotator
+
+# Example with document regions
+example_data = {
+    "image": "https://images.unsplash.com/photo-1544816155-12df9643f363?w=800&h=1200",
+    "polygons": [
+        {
+            "id": "title",
+            "coordinates": [[180, 150], [580, 150], [580, 200], [180, 200]],
+            "color": "#FF6B6B",
+            "mask_opacity": 0.15,
+            "stroke_width": 1.0,
+            "stroke_opacity": 0.8,
+        },
+        {
+            "id": "paragraph_1",
+            "coordinates": [[100, 400], [750, 400], [750, 600], [100, 600]],
+            "color": "#4ECDC4",
+            "mask_opacity": 0.15,
+            "stroke_width": 0.7,
+            "stroke_opacity": 0.6,
+        },
+        {
+            "id": "paragraph_2",
+            "coordinates": [[100, 650], [750, 650], [750, 950], [100, 950]],
+            "color": "#4ECDC4",
+            "mask_opacity": 0.15,
+            "stroke_width": 0.7,
+            "stroke_opacity": 0.6,
+        },
+        {
+            "id": "signature",
+            "coordinates": [[400, 1020], [650, 1020], [650, 1080], [400, 1080]],
+            "color": "#FFE66D",
+            "mask_opacity": 0.2,
+            "stroke_width": 1.5,
+            "stroke_opacity": 0.8,
+        }
+    ]
+}
+
+def handle_selection(data, evt: gr.SelectData):
+    """Handle polygon selection and display info"""
+    if evt.value and data:
+        selected_ids = evt.value if isinstance(evt.value, list) else [evt.value]
+        info = f"Selected {len(selected_ids)} polygon(s):\n"
+        for poly_id in selected_ids:
+            polygon = next((p for p in data["polygons"] if p["id"] == poly_id), None)
+            if polygon:
+                info += f"• {poly_id}\n"
+        return info
+    return "Click on polygons to select them. Use Ctrl/Cmd+Click for multi-selection."
+
+with gr.Blocks() as demo:
+    gr.Markdown("""
+    # PolygonAnnotator - Interactive Polygon Selection
+
+    Click on polygons to select them. Use **Ctrl/Cmd+Click** for multiple selections.
+    Click selected polygons to deselect.
+    """)
+
+    with gr.Row():
+        with gr.Column(scale=3):
+            annotator = PolygonAnnotator(
+                value=example_data,
+                label="Document with Region Annotations",
+                height=600,
+            )
+
+        with gr.Column(scale=1):
+            selected_info = gr.Textbox(
+                label="Selected Regions",
+                lines=6,
+                value="Click on polygons to select them. Use Ctrl/Cmd+Click for multi-selection."
+            )
+
+    # Handle selection events
+    annotator.select(
+        handle_selection,
+        inputs=[annotator],
+        outputs=[selected_info]
+    )
+
+if __name__ == "__main__":
+    demo.launch()

demo/css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

demo/space.py

@@ -0,0 +1,208 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'PolygonAnnotator': {'description': 'Interactive polygon annotation component for visualizing and selecting polygon regions on images.\n\nThe PolygonAnnotator displays an image with customizable polygon overlays that users can interact with.\nFeatures include multi-selection with Ctrl/Cmd+click, hover effects, and customizable appearance including\nstroke width, opacity settings for both fill and stroke, with separate settings for selected states.\n\nPerfect for:\n- Document layout analysis and region selection\n- Image segmentation visualization\n- Interactive annotation review and editing\n- Object detection result visualization', 'members': {'__init__': {'value': {'type': 'dict | None', 'default': 'None', 'description': "Dictionary containing 'image' (FileData), 'polygons' (list with id, coordinates, color, opacities),"}, 'label': {'type': 'str | I18nData | None', 'default': 'None', 'description': 'Component label shown above the annotator.'}, 'every': {'type': 'Timer | float | None', 'default': 'None', 'description': 'Continuously calls `value` to recalculate it if `value` is a function.'}, 'inputs': {'type': 'Component | Sequence[Component] | set[Component] | None', 'default': 'None', 'description': "Components used as inputs to calculate `value` if it's a function."}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'Whether to display the label.'}, 'show_download_button': {'type': 'bool', 'default': 'True', 'description': 'Whether to show image download button.'}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': 'Component height in pixels or CSS units.'}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': 'Component width in pixels or CSS units.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'Whether to wrap component in a container with padding.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'Relative size compared to adjacent components.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'Minimum pixel width before wrapping.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'Whether users can interact with polygons (selection/deselection).'}, 'visible': {'type': 'bool | Literal["hidden"]', 'default': 'True', 'description': 'Whether component is visible ("hidden" keeps it in DOM but invisible).'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'HTML DOM id for CSS targeting.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'HTML DOM classes for CSS targeting.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'Whether to render the component immediately.'}, 'key': {'type': 'int | str | tuple[int | str, ...] | None', 'default': 'None', 'description': 'Key for maintaining component identity across re-renders.'}, 'preserved_by_key': {'type': 'list[str] | str | None', 'default': '"value"', 'description': 'Parameters preserved across re-renders with same key.'}}, 'postprocess': {'value': {'type': 'dict | None', 'description': "Dictionary containing 'image' (file path or URL), 'polygons' (list of polygon dictionaries"}}, 'preprocess': {'return': {'type': 'dict | None', 'description': 'Dictionary with image path, polygon data including coordinates, colors, opacities,'}, 'value': None}}, 'events': {'clear': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clears the PolygonAnnotator using the clear button for the component.'}, 'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the PolygonAnnotator changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'upload': {'type': None, 'default': None, 'description': 'This listener is triggered when the user uploads a file into the PolygonAnnotator.'}, 'select': {'type': None, 'default': None, 'description': 'Event listener for when the user selects or deselects the PolygonAnnotator. Uses event data gradio.SelectData to carry `value` referring to the label of the PolygonAnnotator, and `selected` to refer to state of the PolygonAnnotator. See EventData documentation on how to use this event data'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'PolygonAnnotator': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_polygonannotator`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.1.0%20-%20orange"> <a href="https://github.com/yourusername/gradio-polygonannotator/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> 
+</div>
+
+Interactive polygon annotation component for Gradio with multi-selection, hover effects, and customizable appearance
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_polygonannotator
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_polygonannotator import PolygonAnnotator
+
+# Example with document regions
+example_data = {
+    "image": "https://images.unsplash.com/photo-1544816155-12df9643f363?w=800&h=1200",
+    "polygons": [
+        {
+            "id": "title",
+            "coordinates": [[180, 150], [580, 150], [580, 200], [180, 200]],
+            "color": "#FF6B6B",
+            "mask_opacity": 0.15,
+            "stroke_width": 1.0,
+            "stroke_opacity": 0.8,
+        },
+        {
+            "id": "paragraph_1",
+            "coordinates": [[100, 400], [750, 400], [750, 600], [100, 600]],
+            "color": "#4ECDC4",
+            "mask_opacity": 0.15,
+            "stroke_width": 0.7,
+            "stroke_opacity": 0.6,
+        },
+        {
+            "id": "paragraph_2",
+            "coordinates": [[100, 650], [750, 650], [750, 950], [100, 950]],
+            "color": "#4ECDC4",
+            "mask_opacity": 0.15,
+            "stroke_width": 0.7,
+            "stroke_opacity": 0.6,
+        },
+        {
+            "id": "signature",
+            "coordinates": [[400, 1020], [650, 1020], [650, 1080], [400, 1080]],
+            "color": "#FFE66D",
+            "mask_opacity": 0.2,
+            "stroke_width": 1.5,
+            "stroke_opacity": 0.8,
+        }
+    ]
+}
+
+def handle_selection(data, evt: gr.SelectData):
+    \"\"\"Handle polygon selection and display info\"\"\"
+    if evt.value and data:
+        selected_ids = evt.value if isinstance(evt.value, list) else [evt.value]
+        info = f"Selected {len(selected_ids)} polygon(s):\n"
+        for poly_id in selected_ids:
+            polygon = next((p for p in data["polygons"] if p["id"] == poly_id), None)
+            if polygon:
+                info += f"• {poly_id}\n"
+        return info
+    return "Click on polygons to select them. Use Ctrl/Cmd+Click for multi-selection."
+
+with gr.Blocks() as demo:
+    gr.Markdown(\"\"\"
+    # PolygonAnnotator - Interactive Polygon Selection
+
+    Click on polygons to select them. Use **Ctrl/Cmd+Click** for multiple selections.
+    Click selected polygons to deselect.
+    \"\"\")
+
+    with gr.Row():
+        with gr.Column(scale=3):
+            annotator = PolygonAnnotator(
+                value=example_data,
+                label="Document with Region Annotations",
+                height=600,
+            )
+
+        with gr.Column(scale=1):
+            selected_info = gr.Textbox(
+                label="Selected Regions",
+                lines=6,
+                value="Click on polygons to select them. Use Ctrl/Cmd+Click for multi-selection."
+            )
+
+    # Handle selection events
+    annotator.select(
+        handle_selection,
+        inputs=[annotator],
+        outputs=[selected_info]
+    )
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `PolygonAnnotator`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["PolygonAnnotator"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["PolygonAnnotator"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As input:** Is passed, dictionary with image path, polygon data including coordinates, colors, opacities,.
+- **As output:** Should return, dictionary containing 'image' (file path or URL), 'polygons' (list of polygon dictionaries.
+
+ ```python
+def predict(
+    value: dict | None
+) -> dict | None:
+    return value
+```
+""", elem_classes=["md-custom", "PolygonAnnotator-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          PolygonAnnotator: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

frontend/Example.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import type { FileData } from "@gradio/client";
+
+	export let value: null | { image: FileData; polygons: Array<{id: string, coordinates: number[][], color: string}> };
+	export let type: "gallery" | "table";
+	export let selected = false;
+	export const index: number = 0;
+</script>
+
+{#if value?.image}
+	<div
+		class="container"
+		class:table={type === "table"}
+		class:gallery={type === "gallery"}
+		class:selected
+	>
+		<img src={value.image.url || value.image.path} alt="" />
+		{#if value.polygons && value.polygons.length > 0}
+			<div class="polygon-count">
+				{value.polygons.length} polygon{value.polygons.length !== 1 ? 's' : ''}
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.container :global(img) {
+		width: 100%;
+		height: 100%;
+	}
+
+	.container.selected {
+		border-color: var(--border-color-accent);
+	}
+
+	.container.table {
+		margin: 0 auto;
+		border: 2px solid var(--border-color-primary);
+		border-radius: var(--radius-lg);
+		overflow: hidden;
+		width: var(--size-20);
+		height: var(--size-20);
+		object-fit: cover;
+	}
+
+	.container.gallery {
+		height: var(--size-20);
+		max-height: var(--size-20);
+		object-fit: cover;
+	}
+	.container img {
+		object-fit: cover;
+	}
+
+	.polygon-count {
+		position: absolute;
+		bottom: 4px;
+		right: 4px;
+		background: rgba(0, 0, 0, 0.7);
+		color: white;
+		padding: 2px 6px;
+		border-radius: 3px;
+		font-size: 11px;
+		font-weight: 500;
+	}
+
+	.container {
+		position: relative;
+	}
+</style>

frontend/Index.svelte

@@ -0,0 +1,465 @@
+<svelte:options accessors={true} />
+
+<script lang="ts">
+    import { onMount, onDestroy, tick } from "svelte";
+    import * as PIXI from "pixi.js";
+    import type { Gradio } from "@gradio/utils";
+    import { Block, BlockLabel } from "@gradio/atoms";
+    import { Image as ImageIcon } from "@gradio/icons";
+    import { StatusTracker } from "@gradio/statustracker";
+    import type { LoadingStatus } from "@gradio/statustracker";
+    import type { FileData } from "@gradio/client";
+
+    export let elem_id = "";
+    export let elem_classes: string[] = [];
+    export let visible: boolean | "hidden" = true;
+    export let value: {
+        image: FileData;
+        polygons: Array<{
+            id: string;
+            coordinates: number[][];
+            color: string;
+            mask_opacity?: number;
+            stroke_width?: number;
+            stroke_opacity?: number;
+            selected_mask_opacity?: number;
+            selected_stroke_opacity?: number;
+        }>;
+        selected_polygons?: string[] | null;
+    } | null = null;
+    export let label: string;
+    export let show_label: boolean;
+    export let height: number | string | undefined = undefined;
+    export let width: number | string | undefined = undefined;
+    export let container = true;
+    export let scale: number | null = null;
+    export let min_width: number | undefined = undefined;
+    export let loading_status: LoadingStatus;
+    export let root: string;
+
+    export let gradio: Gradio<{
+        change: never;
+        upload: never;
+        clear: never;
+        select: { index: number | null; value: any };
+        clear_status: LoadingStatus;
+    }>;
+
+    let canvasContainer: HTMLDivElement;
+    let app: PIXI.Application;
+    let imageSprite: PIXI.Sprite | null = null;
+    let polygonGraphics: Map<string, PIXI.Graphics> = new Map();
+    let selectedPolygonIds: string[] = [];
+    type ImageRect = {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
+        naturalWidth: number;
+        naturalHeight: number;
+    };
+    let imageRect: ImageRect = {
+        left: 0,
+        top: 0,
+        right: 1,
+        bottom: 1,
+        width: 1,
+        height: 1,
+        naturalWidth: 2,
+        naturalHeight: 2,
+    };
+
+    $: (value, handleValueChange());
+
+    async function handleValueChange() {
+        if (!app || !value) return;
+        selectedPolygonIds = value.selected_polygons || [];
+        await renderAnnotations();
+    }
+
+    function updateSelection(newSelectedIds: string[]) {
+        if (!value || !imageSprite) return;
+
+        polygonGraphics.forEach((graphics, polygonId) => {
+            const polygon = value.polygons.find((p) => p.id === polygonId);
+            if (!polygon) return;
+
+            const originalMaskAlpha = polygon.mask_opacity ?? 0.2;
+            const selectedMaskAlpha = polygon.selected_mask_opacity ?? 0.5;
+            const originalStrokeAlpha = polygon.stroke_opacity ?? 0.6;
+            const selectedStrokeAlpha = polygon.selected_stroke_opacity ?? 1.0;
+            const strokeWidth = polygon.stroke_width ?? 0.7;
+
+            graphics.clear();
+            if (newSelectedIds.includes(polygonId)) {
+                drawPolygonPath(graphics, polygon, imageSprite!, selectedMaskAlpha, strokeWidth, selectedStrokeAlpha);
+            } else {
+                drawPolygonPath(graphics, polygon, imageSprite!, originalMaskAlpha, strokeWidth, originalStrokeAlpha);
+            }
+        });
+    }
+
+    async function initPixiApp() {
+        if (!canvasContainer) return;
+
+        const containerWidth = canvasContainer.clientWidth || 800;
+        const containerHeight = canvasContainer.clientHeight || 600;
+
+        app = new PIXI.Application();
+        await app.init({
+            width: containerWidth,
+            height: containerHeight,
+            backgroundColor: 0xf0f0f0,
+            antialias: true,
+            resolution: window.devicePixelRatio || 1,
+            autoDensity: true,
+        });
+
+        canvasContainer.appendChild(app.canvas as HTMLCanvasElement);
+
+        app.stage.eventMode = "static";
+        app.stage.hitArea = app.screen;
+    }
+
+    async function renderAnnotations() {
+        if (!app || !value) return;
+
+        app.stage.removeChildren();
+        polygonGraphics.clear();
+        if (value.image) {
+            let imageUrl = "";
+
+            if (typeof value.image === "string") {
+                imageUrl = value.image;
+            } else if (value.image.url) {
+                imageUrl = value.image.url;
+            } else if (value.image.path) {
+                if (root && !value.image.path.startsWith("http")) {
+                    imageUrl = `${root}/file=${value.image.path}`;
+                } else {
+                    imageUrl = value.image.path;
+                }
+            }
+
+            if (imageUrl) {
+                try {
+                    const img = new Image();
+                    img.crossOrigin = "anonymous";
+
+                    const imageLoadPromise = new Promise<HTMLImageElement>(
+                        (resolve, reject) => {
+                            img.onload = () => resolve(img);
+                            img.onerror = reject;
+                            img.src = imageUrl;
+                        },
+                    );
+
+                    const loadedImage = await imageLoadPromise;
+                    const texture = PIXI.Texture.from(loadedImage);
+                    imageSprite = new PIXI.Sprite(texture);
+
+                    const scaleX = app.screen.width / texture.width;
+                    const scaleY = app.screen.height / texture.height;
+                    const scale = Math.min(scaleX, scaleY);
+
+                    imageSprite.scale.set(scale);
+
+                    const displayWidth = texture.width * scale;
+                    const displayHeight = texture.height * scale;
+
+                    imageSprite.x = (app.screen.width - displayWidth) / 2;
+                    imageSprite.y = (app.screen.height - displayHeight) / 2;
+
+                    imageRect = {
+                        left: imageSprite.x,
+                        top: imageSprite.y,
+                        right: imageSprite.x + displayWidth,
+                        bottom: imageSprite.y + displayHeight,
+                        width: displayWidth,
+                        height: displayHeight,
+                        naturalWidth: texture.width,
+                        naturalHeight: texture.height,
+                    };
+
+                    app.stage.addChild(imageSprite);
+                } catch (error) {
+                    console.error("Failed to load image:", error);
+                    return;
+                }
+            }
+        }
+
+        if (value.polygons && value.polygons.length > 0 && imageSprite) {
+            value.polygons.forEach((polygon) => {
+                const graphics = new PIXI.Graphics();
+
+                let color = 0xff0000;
+                try {
+                    if (polygon.color) {
+                        const colorStr = polygon.color.replace("#", "");
+                        color = parseInt(colorStr, 16);
+                    }
+                } catch (e) {
+                    console.error("Error parsing color:", e);
+                }
+
+                const polygonMaskOpacity = polygon.mask_opacity ?? 0.2;
+                const selectedMaskAlpha = polygon.selected_mask_opacity ?? 0.5;
+                const polygonStrokeOpacity = polygon.stroke_opacity ?? 0.6;
+                const selectedStrokeAlpha = polygon.selected_stroke_opacity ?? 1.0;
+                const strokeWidth = polygon.stroke_width ?? 0.7;
+                const initialMaskAlpha = selectedPolygonIds.includes(polygon.id)
+                    ? selectedMaskAlpha
+                    : polygonMaskOpacity;
+                const initialStrokeAlpha = selectedPolygonIds.includes(polygon.id)
+                    ? selectedStrokeAlpha
+                    : polygonStrokeOpacity;
+
+                if (polygon.coordinates && polygon.coordinates.length > 0) {
+                    const displayCoords = polygon.coordinates.map((coord) => {
+                        return [
+                            (coord[0] / (imageRect.naturalWidth - 1)) *
+                                imageRect.width +
+                                imageRect.left,
+                            (coord[1] / (imageRect.naturalHeight - 1)) *
+                                imageRect.height +
+                                imageRect.top,
+                        ];
+                    });
+
+                    graphics.poly(displayCoords.flat());
+                    graphics.fill({ color: color, alpha: initialMaskAlpha });
+                    graphics.stroke({ width: strokeWidth, color: color, alpha: initialStrokeAlpha });
+                }
+
+                graphics.eventMode = "static";
+                graphics.cursor = "pointer";
+
+                const originalMaskAlpha = polygonMaskOpacity;
+                const hoverMaskAlpha = Math.min(polygonMaskOpacity + 0.1, 1.0);
+                const hoverStrokeAlpha = Math.min(polygonStrokeOpacity + 0.2, 1.0);
+
+                graphics.on("pointerover", () => {
+                    if (!selectedPolygonIds.includes(polygon.id)) {
+                        graphics.clear();
+                        drawPolygonPath(
+                            graphics,
+                            polygon,
+                            imageSprite!,
+                            hoverMaskAlpha,
+                            strokeWidth,
+                            hoverStrokeAlpha,
+                        );
+                    }
+                });
+
+                graphics.on("pointerout", () => {
+                    if (!selectedPolygonIds.includes(polygon.id)) {
+                        graphics.clear();
+                        drawPolygonPath(
+                            graphics,
+                            polygon,
+                            imageSprite!,
+                            originalMaskAlpha,
+                            strokeWidth,
+                            polygonStrokeOpacity,
+                        );
+                    }
+                });
+
+                graphics.on("pointerdown", (event) => {
+                    // Check if Ctrl/Cmd key is held for multi-selection
+                    const isMultiSelect = event.ctrlKey || event.metaKey;
+
+                    if (selectedPolygonIds.includes(polygon.id)) {
+                        // Deselect this polygon
+                        const newSelectedIds = selectedPolygonIds.filter(
+                            (id) => id !== polygon.id,
+                        );
+                        updateSelection(newSelectedIds);
+                        selectedPolygonIds = newSelectedIds;
+
+                        // Dispatch deselection event to Gradio
+                        gradio.dispatch("select", {
+                            index:
+                                newSelectedIds.length > 0
+                                    ? value.polygons.findIndex(
+                                          (p) =>
+                                              p.id ===
+                                              newSelectedIds[
+                                                  newSelectedIds.length - 1
+                                              ],
+                                      )
+                                    : null,
+                            value:
+                                newSelectedIds.length > 0
+                                    ? newSelectedIds
+                                    : null,
+                        });
+                        return;
+                    }
+
+                    // Select polygon
+                    let newSelectedIds: string[];
+                    if (isMultiSelect) {
+                        // Add to existing selection
+                        newSelectedIds = [...selectedPolygonIds, polygon.id];
+                    } else {
+                        // Replace selection
+                        newSelectedIds = [polygon.id];
+                    }
+
+                    updateSelection(newSelectedIds);
+                    selectedPolygonIds = newSelectedIds;
+
+                    // Dispatch select event to Gradio
+                    gradio.dispatch("select", {
+                        index: value.polygons.findIndex(
+                            (p) => p.id === polygon.id,
+                        ),
+                        value: newSelectedIds,
+                    });
+                });
+
+                app.stage.addChild(graphics);
+                polygonGraphics.set(polygon.id, graphics);
+            });
+        }
+    }
+
+    function drawPolygonPath(
+        graphics: PIXI.Graphics,
+        polygon: any,
+        imageSprite: PIXI.Sprite,
+        maskAlpha: number = 0.2,
+        strokeWidth: number = 0.7,
+        strokeAlpha: number = 0.6,
+    ) {
+        if (polygon.coordinates && polygon.coordinates.length > 0) {
+            // Transform coordinates from natural image space to display space
+            const displayCoords = polygon.coordinates.map((coord: number[]) => {
+                return [
+                    (coord[0] / (imageRect.naturalWidth - 1)) *
+                        imageRect.width +
+                        imageRect.left,
+                    (coord[1] / (imageRect.naturalHeight - 1)) *
+                        imageRect.height +
+                        imageRect.top,
+                ];
+            });
+
+            let color = 0xff0000;
+            try {
+                if (polygon.color) {
+                    const colorStr = polygon.color.replace("#", "");
+                    color = parseInt(colorStr, 16);
+                }
+            } catch (e) {
+                console.error("Error parsing color in drawPolygonPath:", e);
+            }
+
+            // Use Pixi.js 8 drawing API
+            graphics.poly(displayCoords.flat());
+            graphics.fill({ color: color, alpha: maskAlpha });
+            graphics.stroke({ width: strokeWidth, color: color, alpha: strokeAlpha });
+        }
+    }
+
+    onMount(async () => {
+        await tick();
+        await initPixiApp();
+        if (value) {
+            await renderAnnotations();
+        }
+    });
+
+    onDestroy(() => {
+        if (app) {
+            app.destroy(true, { children: true, texture: true });
+        }
+    });
+
+    // Handle canvas resize
+    async function handleResize() {
+        if (!canvasContainer || !app) return;
+
+        const newWidth = canvasContainer.clientWidth;
+        const newHeight = canvasContainer.clientHeight;
+
+        if (newWidth !== app.screen.width || newHeight !== app.screen.height) {
+            app.renderer.resize(newWidth, newHeight);
+            // Re-render annotations with updated canvas dimensions
+            await renderAnnotations();
+        }
+    }
+
+    $: if (canvasContainer) {
+        handleResize();
+    }
+
+    $: (value, gradio.dispatch("change"));
+</script>
+
+<Block
+    {visible}
+    variant={"solid"}
+    padding={false}
+    {elem_id}
+    {elem_classes}
+    allow_overflow={false}
+    {container}
+    {scale}
+    {min_width}
+    {height}
+    {width}
+>
+    <StatusTracker
+        autoscroll={gradio.autoscroll}
+        i18n={gradio.i18n}
+        {...loading_status}
+        on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+    />
+
+    <BlockLabel
+        {show_label}
+        Icon={ImageIcon}
+        label={label || "Image Annotations"}
+    />
+
+    <div class="container">
+        <div class="canvas-container" bind:this={canvasContainer} />
+    </div>
+</Block>
+
+<style>
+    .container {
+        display: flex;
+        position: relative;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+    }
+
+    .canvas-container {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        min-height: 400px;
+        overflow: hidden;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #f0f0f0;
+    }
+
+    :global(.canvas-container canvas) {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+    }
+</style>

frontend/gradio.config.js

@@ -0,0 +1,9 @@
+export default {
+  plugins: [],
+  svelte: {
+    preprocess: [],
+  },
+  build: {
+    target: "modules",
+  },
+};

frontend/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "gradio_annoviewer",
+  "version": "0.9.0",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "dependencies": {
+    "@gradio/atoms": "0.18.0",
+    "@gradio/client": "1.19.0",
+    "@gradio/icons": "0.14.0",
+    "@gradio/statustracker": "0.11.1",
+    "@gradio/upload": "0.17.0",
+    "@gradio/utils": "0.10.2",
+    "cropperjs": "^1.5.12",
+    "lazy-brush": "^1.0.1",
+    "pixi.js": "^8.0.0",
+    "resize-observer-polyfill": "^1.5.1"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.14.0"
+  },
+  "main_changeset": true,
+  "main": "./Index.svelte",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
+    "./base": {
+      "gradio": "./shared/ImagePreview.svelte",
+      "svelte": "./dist/shared/ImagePreview.svelte",
+      "types": "./dist/shared/ImagePreview.svelte.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/simpleimage"
+  }
+}

frontend/shared/ClearImage.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { IconButton, IconButtonWrapper } from "@gradio/atoms";
+	import { Clear } from "@gradio/icons";
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<IconButtonWrapper>
+	<IconButton
+		Icon={Clear}
+		label="Remove Image"
+		on:click={(event) => {
+			dispatch("remove_image");
+			event.stopPropagation();
+		}}
+	/>
+</IconButtonWrapper>

frontend/shared/ImagePreview.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import {
+		BlockLabel,
+		Empty,
+		IconButton,
+		IconButtonWrapper,
+		DownloadLink
+	} from "@gradio/atoms";
+	import { Download } from "@gradio/icons";
+
+	import { Image as ImageIcon } from "@gradio/icons";
+	import { type FileData } from "@gradio/client";
+	import type { I18nFormatter } from "@gradio/utils";
+
+	export let value: null | FileData;
+	export let label: string | undefined = undefined;
+	export let show_label: boolean;
+	export let show_download_button = true;
+	export let selectable = false;
+	export let i18n: I18nFormatter;
+</script>
+
+<BlockLabel
+	{show_label}
+	Icon={ImageIcon}
+	label={label || i18n("image.image")}
+/>
+{#if value === null || !value.url}
+	<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
+{:else}
+	<IconButtonWrapper>
+		{#if show_download_button}
+			<DownloadLink href={value.url} download={value.orig_name || "image"}>
+				<IconButton Icon={Download} label={i18n("common.download")} />
+			</DownloadLink>
+		{/if}
+	</IconButtonWrapper>
+	<button>
+		<div class:selectable class="image-container">
+			<img src={value.url} alt="" loading="lazy" />
+		</div>
+	</button>
+{/if}
+
+<style>
+	.image-container {
+		height: 100%;
+	}
+	.image-container :global(img),
+	button {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: scale-down;
+		display: block;
+		border-radius: var(--radius-lg);
+	}
+
+	.selectable {
+		cursor: crosshair;
+	}
+</style>

frontend/shared/ImageUploader.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { BlockLabel } from "@gradio/atoms";
+	import { Image as ImageIcon } from "@gradio/icons";
+
+	import { Upload } from "@gradio/upload";
+	import type { FileData, Client } from "@gradio/client";
+	import ClearImage from "./ClearImage.svelte";
+
+	export let value: null | FileData;
+	export let label: string | undefined = undefined;
+	export let show_label: boolean;
+	export let root: string;
+	export let upload: Client["upload"];
+	export let stream_handler: Client["stream"];
+
+	let upload_component: Upload;
+	let uploading = false;
+
+	function handle_upload({ detail }: CustomEvent<FileData>): void {
+		value = detail;
+		dispatch("upload");
+	}
+	$: if (uploading) value = null;
+
+	const dispatch = createEventDispatcher<{
+		change?: never;
+		clear?: never;
+		drag: boolean;
+		upload?: never;
+	}>();
+
+	let dragging = false;
+	$: dispatch("drag", dragging);
+</script>
+
+<BlockLabel {show_label} Icon={ImageIcon} label={label || "Image"} />
+
+<div data-testid="image" class="image-container">
+	{#if value?.url}
+		<ClearImage
+			on:remove_image={() => {
+				value = null;
+				dispatch("clear");
+			}}
+		/>
+	{/if}
+	<div class="upload-container">
+		<Upload
+			{upload}
+			{stream_handler}
+			hidden={value !== null}
+			bind:this={upload_component}
+			bind:uploading
+			bind:dragging
+			filetype="image/*"
+			on:load={handle_upload}
+			on:error
+			{root}
+		>
+			{#if value === null}
+				<slot />
+			{/if}
+		</Upload>
+		{#if value !== null}
+			<div class="image-frame">
+				<img src={value.url} alt={value.alt_text} />
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.image-frame :global(img) {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: scale-down;
+	}
+
+	.image-frame {
+		width: 100%;
+		height: 100%;
+	}
+
+	.upload-container {
+		height: 100%;
+		flex-shrink: 1;
+		max-height: 100%;
+	}
+
+	.image-container {
+		display: flex;
+		height: 100%;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		max-height: 100%;
+	}
+</style>

frontend/tsconfig.json

@@ -0,0 +1,14 @@
+{
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"verbatimModuleSyntax": true
+	},
+	"exclude": ["node_modules", "dist", "./gradio.config.js"]
+}

pyproject.toml

@@ -0,0 +1,59 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_polygonannotator"
+version = "0.1.0"
+description = "Interactive polygon annotation component for Gradio with multi-selection, hover effects, and customizable appearance"
+readme = "README.md"
+license = "Apache-2.0"
+requires-python = ">=3.8"
+authors = [{ name = "Borg93", email = "[email protected]" }]
+keywords = [
+  "gradio-custom-component",
+  "polygon-annotation",
+  "image-annotation",
+  "interactive-visualization",
+  "document-analysis"
+]
+# Add dependencies here
+dependencies = [
+    "gradio>=4.0,<6.0",
+]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  'Operating System :: OS Independent',
+  'Programming Language :: Python :: 3',
+  'Programming Language :: Python :: 3 :: Only',
+  'Programming Language :: Python :: 3.8',
+  'Programming Language :: Python :: 3.9',
+  'Programming Language :: Python :: 3.10',
+  'Programming Language :: Python :: 3.11',
+  'Topic :: Scientific/Engineering',
+  'Topic :: Scientific/Engineering :: Artificial Intelligence',
+  'Topic :: Scientific/Engineering :: Visualization',
+]
+
+# The repository and space URLs are optional, but recommended.
+# Adding a repository URL will create a badge in the auto-generated README that links to the repository.
+# Adding a space URL will create a badge in the auto-generated README that links to the space.
+# This will make it easy for people to find your deployed demo or source code when they
+# encounter your project in the wild.
+
+[project.urls]
+repository = "https://github.com/yourusername/gradio-polygonannotator"
+# space = "https://huggingface.co/spaces/yourusername/polygonannotator-demo"
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_polygonannotator/templates", "*.pyi"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_polygonannotator"]

src/.gitignore

@@ -0,0 +1,13 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/
+.venv

src/.python-version

@@ -0,0 +1 @@
+3.12

src/README.md

@@ -0,0 +1,384 @@
+
+# `gradio_polygonannotator`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.1.0%20-%20orange"> <a href="https://github.com/yourusername/gradio-polygonannotator/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> 
+
+Interactive polygon annotation component for Gradio with multi-selection, hover effects, and customizable appearance
+
+## Installation
+
+```bash
+pip install gradio_polygonannotator
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_polygonannotator import PolygonAnnotator
+
+# Example with document regions
+example_data = {
+    "image": "https://images.unsplash.com/photo-1544816155-12df9643f363?w=800&h=1200",
+    "polygons": [
+        {
+            "id": "title",
+            "coordinates": [[180, 150], [580, 150], [580, 200], [180, 200]],
+            "color": "#FF6B6B",
+            "mask_opacity": 0.15,
+            "stroke_width": 1.0,
+            "stroke_opacity": 0.8,
+        },
+        {
+            "id": "paragraph_1",
+            "coordinates": [[100, 400], [750, 400], [750, 600], [100, 600]],
+            "color": "#4ECDC4",
+            "mask_opacity": 0.15,
+            "stroke_width": 0.7,
+            "stroke_opacity": 0.6,
+        },
+        {
+            "id": "paragraph_2",
+            "coordinates": [[100, 650], [750, 650], [750, 950], [100, 950]],
+            "color": "#4ECDC4",
+            "mask_opacity": 0.15,
+            "stroke_width": 0.7,
+            "stroke_opacity": 0.6,
+        },
+        {
+            "id": "signature",
+            "coordinates": [[400, 1020], [650, 1020], [650, 1080], [400, 1080]],
+            "color": "#FFE66D",
+            "mask_opacity": 0.2,
+            "stroke_width": 1.5,
+            "stroke_opacity": 0.8,
+        }
+    ]
+}
+
+def handle_selection(data, evt: gr.SelectData):
+    """Handle polygon selection and display info"""
+    if evt.value and data:
+        selected_ids = evt.value if isinstance(evt.value, list) else [evt.value]
+        info = f"Selected {len(selected_ids)} polygon(s):\n"
+        for poly_id in selected_ids:
+            polygon = next((p for p in data["polygons"] if p["id"] == poly_id), None)
+            if polygon:
+                info += f"• {poly_id}\n"
+        return info
+    return "Click on polygons to select them. Use Ctrl/Cmd+Click for multi-selection."
+
+with gr.Blocks() as demo:
+    gr.Markdown("""
+    # PolygonAnnotator - Interactive Polygon Selection
+
+    Click on polygons to select them. Use **Ctrl/Cmd+Click** for multiple selections.
+    Click selected polygons to deselect.
+    """)
+
+    with gr.Row():
+        with gr.Column(scale=3):
+            annotator = PolygonAnnotator(
+                value=example_data,
+                label="Document with Region Annotations",
+                height=600,
+            )
+
+        with gr.Column(scale=1):
+            selected_info = gr.Textbox(
+                label="Selected Regions",
+                lines=6,
+                value="Click on polygons to select them. Use Ctrl/Cmd+Click for multi-selection."
+            )
+
+    # Handle selection events
+    annotator.select(
+        handle_selection,
+        inputs=[annotator],
+        outputs=[selected_info]
+    )
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `PolygonAnnotator`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+dict | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Dictionary containing 'image' (FileData), 'polygons' (list with id, coordinates, color, opacities),</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | I18nData | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Component label shown above the annotator.</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Timer | float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Continuously calls `value` to recalculate it if `value` is a function.</td>
+</tr>
+
+<tr>
+<td align="left"><code>inputs</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Component | Sequence[Component] | set[Component] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Components used as inputs to calculate `value` if it's a function.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Whether to display the label.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_download_button</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">Whether to show image download button.</td>
+</tr>
+
+<tr>
+<td align="left"><code>height</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Component height in pixels or CSS units.</td>
+</tr>
+
+<tr>
+<td align="left"><code>width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Component width in pixels or CSS units.</td>
+</tr>
+
+<tr>
+<td align="left"><code>container</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">Whether to wrap component in a container with padding.</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Relative size compared to adjacent components.</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">Minimum pixel width before wrapping.</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Whether users can interact with polygons (selection/deselection).</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | Literal["hidden"]
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">Whether component is visible ("hidden" keeps it in DOM but invisible).</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">HTML DOM id for CSS targeting.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">HTML DOM classes for CSS targeting.</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">Whether to render the component immediately.</td>
+</tr>
+
+<tr>
+<td align="left"><code>key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | tuple[int | str, ...] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Key for maintaining component identity across re-renders.</td>
+</tr>
+
+<tr>
+<td align="left"><code>preserved_by_key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>"value"</code></td>
+<td align="left">Parameters preserved across re-renders with same key.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `clear` | This listener is triggered when the user clears the PolygonAnnotator using the clear button for the component. |
+| `change` | Triggered when the value of the PolygonAnnotator changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
+| `upload` | This listener is triggered when the user uploads a file into the PolygonAnnotator. |
+| `select` | Event listener for when the user selects or deselects the PolygonAnnotator. Uses event data gradio.SelectData to carry `value` referring to the label of the PolygonAnnotator, and `selected` to refer to state of the PolygonAnnotator. See EventData documentation on how to use this event data |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As output:** Is passed, dictionary with image path, polygon data including coordinates, colors, opacities,.
+- **As input:** Should return, dictionary containing 'image' (file path or URL), 'polygons' (list of polygon dictionaries.
+
+ ```python
+ def predict(
+     value: dict | None
+ ) -> dict | None:
+     return value
+ ```
+ 

src/app.py

@@ -0,0 +1,266 @@
+import gradio as gr
+from gradio_polygonannotator import PolygonAnnotator
+from typing import Literal
+
+example_data = {
+    "image": "https://images.unsplash.com/photo-1544816155-12df9643f363?w=800&h=1200",
+    "polygons": [
+        {
+            "id": "date_line",
+            "coordinates": [[180, 150], [580, 150], [580, 200], [180, 200]],
+            "color": "#FF0000",
+            "mask_opacity": 0.2,
+            "stroke_width": 0.7,
+            "stroke_opacity": 0.6,
+            "selected_mask_opacity": 0.5,
+            "selected_stroke_opacity": 1.0
+        },
+        {
+            "id": "salutation",
+            "coordinates": [[180, 280], [680, 280], [680, 340], [180, 340]],
+            "color": "#00FF00",
+            "mask_opacity": 0.2,
+            "stroke_width": 1.0,
+            "stroke_opacity": 0.6,
+            "selected_mask_opacity": 0.4,
+            "selected_stroke_opacity": 0.9
+        },
+        {
+            "id": "main_text_block",
+            "coordinates": [[100, 400], [750, 400], [750, 950], [100, 950]],
+            "color": "#0000FF",
+            "mask_opacity": 0.15,
+            "stroke_width": 0.5,
+            "stroke_opacity": 0.5,
+            "selected_mask_opacity": 0.4,
+            "selected_stroke_opacity": 0.8
+        },
+        {
+            "id": "closing_signature",
+            "coordinates": [[400, 1020], [650, 1020], [650, 1080], [400, 1080]],
+            "color": "#FFFF00",
+            "mask_opacity": 0.25,
+            "stroke_width": 1.5,
+            "stroke_opacity": 0.7,
+            "selected_mask_opacity": 0.6,
+            "selected_stroke_opacity": 1.0
+        }
+    ]
+}
+
+# Create dataframe data from polygon information
+polygon_table = [
+    ["date_line", "Date Line", "#FF0000", 0.2, 0.7, 0.6],
+    ["salutation", "Salutation", "#00FF00", 0.2, 1.0, 0.6],
+    ["main_text_block", "Main Text Block", "#0000FF", 0.15, 0.5, 0.5],
+    ["closing_signature", "Closing/Signature", "#FFFF00", 0.25, 1.5, 0.7]
+]
+
+def process_viewer_selection(data, evt: gr.SelectData):
+    """Handle polygon selection from viewer and update dataframe selection"""
+    if evt.value and data:
+        selected_ids = evt.value if isinstance(evt.value, list) else [evt.value]
+
+        # Create highlighted dataframe data
+        highlighted_table = []
+        for row in polygon_table:
+            if row[0] in selected_ids:  # If this is a selected row
+                # Add highlighting markers to the selected row
+                highlighted_row = [f"→ {row[0]} ←", f"→ {row[1]} ←", f"→ {row[2]} ←", f"→ {row[3]} ←", f"→ {row[4]} ←", f"→ {row[5]} ←"]
+                highlighted_table.append(highlighted_row)
+            else:
+                highlighted_table.append(row)
+
+        # Create info text for all selected polygons
+        info_lines = [f"Selected {len(selected_ids)} polygon(s):"]
+        for selected_id in selected_ids:
+            selected_polygon = next((p for p in data["polygons"] if p["id"] == selected_id), None)
+            if selected_polygon:
+                info_lines.append(f"• {selected_id}: {selected_polygon['color']}, mask: {selected_polygon.get('mask_opacity', 0.2)}, stroke: {selected_polygon.get('stroke_width', 0.7)}px")
+
+        info_text = "\n".join(info_lines)
+        return info_text, highlighted_table
+
+    return "No polygons selected", polygon_table
+
+def process_dataframe_selection(selected_data, evt: gr.SelectData):
+    """Handle row selection from dataframe and update viewer selection"""
+    if evt.index is not None and evt.index[0] < len(polygon_table):
+        selected_row = polygon_table[evt.index[0]]
+        polygon_id = selected_row[0]
+
+        # Update the viewer data with the selected polygon
+        updated_data = example_data.copy()
+        updated_data["selected_polygons"] = [polygon_id]
+
+        info_text = f"Selected polygon: {polygon_id}\nName: {selected_row[1]}\nColor: {selected_row[2]}\nMask Opacity: {selected_row[3]}\nStroke Width: {selected_row[4]}\nStroke Opacity: {selected_row[5]}"
+        return updated_data, info_text
+
+    # Deselection
+    updated_data = example_data.copy()
+    updated_data["selected_polygons"] = []
+    return updated_data, "No polygons selected"
+
+def clear_selection():
+    """Clear polygon selection"""
+    updated_data = example_data.copy()
+    updated_data["selected_polygons"] = []
+    return updated_data, "No polygons selected", polygon_table
+
+def select_polygon_by_id(polygon_id):
+    """Select polygon by ID from textbox input"""
+    if not polygon_id or polygon_id.strip() == "":
+        # Empty input - clear selection
+        updated_data = example_data.copy()
+        updated_data["selected_polygons"] = []
+        return updated_data, "No polygons selected", polygon_table
+
+    # Handle multiple IDs (comma-separated)
+    polygon_ids = [id.strip() for id in polygon_id.split(",") if id.strip()]
+    valid_ids = [p["id"] for p in example_data["polygons"]]
+
+    # Filter to only valid IDs
+    valid_selected_ids = [id for id in polygon_ids if id in valid_ids]
+    invalid_ids = [id for id in polygon_ids if id not in valid_ids]
+
+    if not valid_selected_ids:
+        # No valid IDs
+        updated_data = example_data.copy()
+        updated_data["selected_polygons"] = []
+        error_msg = f"Invalid polygon ID(s): {', '.join(invalid_ids)}. Valid IDs: {', '.join(valid_ids)}"
+        return updated_data, error_msg, polygon_table
+
+    # Valid IDs - select polygons
+    updated_data = example_data.copy()
+    updated_data["selected_polygons"] = valid_selected_ids
+
+    # Create highlighted dataframe data
+    highlighted_table = []
+    for row in polygon_table:
+        if row[0] in valid_selected_ids:  # If this is a selected row
+            # Add highlighting markers to the selected row
+            highlighted_row = [f"→ {row[0]} ←", f"→ {row[1]} ←", f"→ {row[2]} ←", f"→ {row[3]} ←", f"→ {row[4]} ←", f"→ {row[5]} ←"]
+            highlighted_table.append(highlighted_row)
+        else:
+            highlighted_table.append(row)
+
+    # Create info text
+    info_lines = [f"Selected {len(valid_selected_ids)} polygon(s):"]
+    for selected_id in valid_selected_ids:
+        selected_polygon = next((p for p in example_data["polygons"] if p["id"] == selected_id), None)
+        if selected_polygon:
+            info_lines.append(f"• {selected_id}: {selected_polygon['color']}, mask: {selected_polygon.get('mask_opacity', 0.2)}, stroke: {selected_polygon.get('stroke_width', 0.7)}px")
+
+    if invalid_ids:
+        info_lines.append(f"\nInvalid IDs: {', '.join(invalid_ids)}")
+
+    info_text = "\n".join(info_lines)
+    return updated_data, info_text, highlighted_table
+
+with gr.Blocks() as demo:
+    gr.Markdown("""
+    # PolygonAnnotator - Advanced Interactive Demo
+
+    This demo showcases all the features of the PolygonAnnotator component:
+    - **Click** on polygons to select/deselect them
+    - **Ctrl/Cmd+Click** for multiple selection
+    - **Click dataframe rows** to select polygons
+    - **Enter polygon IDs** manually in the textbox
+    - **Clear button** to deselect all
+    """)
+
+    with gr.Row():
+        with gr.Column(scale=2):
+            poly_annotator = PolygonAnnotator(
+                value=example_data,
+                label="Document with Interactive Polygon Annotations",
+                height=600,
+            )
+
+        with gr.Column(scale=1):
+            selected_info = gr.Textbox(
+                label="Selected Polygon Information",
+                lines=5,
+                value="Click on a polygon to see its information"
+            )
+
+            polygon_dataframe = gr.Dataframe(
+                value=polygon_table,
+                headers=["ID", "Name", "Color", "Mask", "Stroke W", "Stroke O"],
+                label="Polygon Data (Click rows to select)",
+                datatype=[Literal["str", "str", "str", "number", "number", "number"]],
+                interactive=True
+            )
+
+            clear_button = gr.Button("🗑️ Clear All Selections", variant="secondary")
+
+            with gr.Row():
+                polygon_id_input = gr.Textbox(
+                    label="Select by Polygon ID(s)",
+                    placeholder="Enter single ID or comma-separated IDs (e.g., 'date_line' or 'date_line, salutation')",
+                    scale=3
+                )
+                select_button = gr.Button("Select", variant="primary", scale=1)
+
+            gr.Markdown("""
+            ### Features Demonstrated
+
+            #### 🎨 Visual Customization
+            - Different **mask opacity** for each polygon fill
+            - Variable **stroke width** (0.5px to 1.5px)
+            - Custom **stroke opacity** for borders
+            - Enhanced appearance when selected
+
+            #### 🖱️ Interaction Methods
+            1. **Direct Click**: Click polygons in the viewer
+            2. **Multi-Selection**: Ctrl/Cmd+Click for multiple
+            3. **Dataframe**: Click table rows
+            4. **Text Input**: Type polygon IDs
+            5. **Clear All**: Reset selection
+
+            #### 📝 Polygon IDs
+            - `date_line` - Red header area
+            - `salutation` - Green greeting section
+            - `main_text_block` - Blue main content
+            - `closing_signature` - Yellow signature area
+
+            #### 💡 Tips
+            - Hover over polygons for visual feedback
+            - Selected polygons have increased opacity
+            - Use comma-separated IDs for batch selection
+            - Click selected polygons to deselect them
+            """)
+
+    # Handle selection events
+    poly_annotator.select(
+        process_viewer_selection,
+        inputs=[poly_annotator],
+        outputs=[selected_info, polygon_dataframe]
+    )
+
+    polygon_dataframe.select(
+        process_dataframe_selection,
+        inputs=[polygon_dataframe],
+        outputs=[poly_annotator, selected_info]
+    )
+
+    clear_button.click(
+        clear_selection,
+        outputs=[poly_annotator, selected_info, polygon_dataframe]
+    )
+
+    select_button.click(
+        select_polygon_by_id,
+        inputs=[polygon_id_input],
+        outputs=[poly_annotator, selected_info, polygon_dataframe]
+    )
+
+    # Also allow Enter key in textbox
+    polygon_id_input.submit(
+        select_polygon_by_id,
+        inputs=[polygon_id_input],
+        outputs=[poly_annotator, selected_info, polygon_dataframe]
+    )
+
+if __name__ == "__main__":
+    demo.launch()

src/backend/gradio_polygonannotator/__init__.py

@@ -0,0 +1,4 @@
+
+from .polygonannotator import PolygonAnnotator
+
+__all__ = ['PolygonAnnotator']

src/backend/gradio_polygonannotator/polygonannotator.py

@@ -0,0 +1,232 @@
+"""gr.PolygonAnnotator() component for interactive polygon annotations."""
+
+from __future__ import annotations
+
+from collections.abc import Sequence
+from typing import TYPE_CHECKING, Any, Literal, List, Optional
+
+from gradio_client import handle_file
+
+from gradio.components.base import Component
+from gradio.data_classes import FileData, GradioModel
+from gradio.events import Events
+from gradio.i18n import I18nData
+
+if TYPE_CHECKING:
+    from gradio.components import Timer
+
+
+class Polygon(GradioModel):
+    id: str
+    coordinates: List[List[float]]  # [[x1,y1], [x2,y2], ...]
+    color: str  # hex color like "#FF0000"
+    mask_opacity: Optional[float] = 0.2  # fill opacity from 0.0 to 1.0, default 0.2
+    stroke_width: Optional[float] = 0.7  # stroke width in pixels, default 0.7
+    stroke_opacity: Optional[float] = 0.6  # stroke opacity from 0.0 to 1.0, default 0.6
+    selected_mask_opacity: Optional[float] = 0.5  # mask opacity when selected, default 0.5
+    selected_stroke_opacity: Optional[float] = 1.0  # stroke opacity when selected, default 1.0
+
+
+class PolygonAnnotatorData(GradioModel):
+    image: FileData
+    polygons: List[Polygon]
+    selected_polygons: Optional[List[str]] = None  # List of IDs of the currently selected polygons
+
+
+class PolygonAnnotator(Component):
+    """
+    Interactive polygon annotation component for visualizing and selecting polygon regions on images.
+
+    The PolygonAnnotator displays an image with customizable polygon overlays that users can interact with.
+    Features include multi-selection with Ctrl/Cmd+click, hover effects, and customizable appearance including
+    stroke width, opacity settings for both fill and stroke, with separate settings for selected states.
+
+    Perfect for:
+    - Document layout analysis and region selection
+    - Image segmentation visualization
+    - Interactive annotation review and editing
+    - Object detection result visualization
+    """
+
+    EVENTS = [
+        Events.clear,
+        Events.change,
+        Events.upload,
+        Events.select,
+    ]
+
+    data_model = PolygonAnnotatorData
+
+    def __init__(
+        self,
+        value: dict | None = None,
+        *,
+        label: str | I18nData | None = None,
+        every: Timer | float | None = None,
+        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        show_label: bool | None = None,
+        show_download_button: bool = True,
+        height: int | str | None = None,
+        width: int | str | None = None,
+        container: bool = True,
+        scale: int | None = None,
+        min_width: int = 160,
+        interactive: bool | None = None,
+        visible: bool | Literal["hidden"] = True,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+        key: int | str | tuple[int | str, ...] | None = None,
+        preserved_by_key: list[str] | str | None = "value",
+    ):
+        """
+        Parameters:
+            value: Dictionary containing 'image' (FileData), 'polygons' (list with id, coordinates, color, opacities),
+                and optionally 'selected_polygons' (list of selected IDs).
+            label: Component label shown above the annotator.
+            every: Continuously calls `value` to recalculate it if `value` is a function.
+            inputs: Components used as inputs to calculate `value` if it's a function.
+            show_label: Whether to display the label.
+            show_download_button: Whether to show image download button.
+            height: Component height in pixels or CSS units.
+            width: Component width in pixels or CSS units.
+            container: Whether to wrap component in a container with padding.
+            scale: Relative size compared to adjacent components.
+            min_width: Minimum pixel width before wrapping.
+            interactive: Whether users can interact with polygons (selection/deselection).
+            visible: Whether component is visible ("hidden" keeps it in DOM but invisible).
+            elem_id: HTML DOM id for CSS targeting.
+            elem_classes: HTML DOM classes for CSS targeting.
+            render: Whether to render the component immediately.
+            key: Key for maintaining component identity across re-renders.
+            preserved_by_key: Parameters preserved across re-renders with same key.
+        """
+        self.show_download_button = show_download_button
+        self.height = height
+        self.width = width
+        super().__init__(
+            label=label,
+            every=every,
+            inputs=inputs,
+            show_label=show_label,
+            container=container,
+            scale=scale,
+            min_width=min_width,
+            interactive=interactive,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+            key=key,
+            preserved_by_key=preserved_by_key,
+            value=value,
+        )
+
+    def preprocess(self, payload: PolygonAnnotatorData | None) -> dict | None:
+        """
+        Parameters:
+            payload: The component data containing image and polygon annotations.
+        Returns:
+            Dictionary with image path, polygon data including coordinates, colors, opacities,
+            and the list of currently selected polygon IDs.
+        """
+        if payload is None:
+            return None
+        return {
+            "image": payload.image.path,
+            "polygons": [
+                {
+                    "id": p.id,
+                    "coordinates": p.coordinates,
+                    "color": p.color,
+                    "mask_opacity": p.mask_opacity,
+                    "stroke_width": p.stroke_width,
+                    "stroke_opacity": p.stroke_opacity,
+                    "selected_mask_opacity": p.selected_mask_opacity,
+                    "selected_stroke_opacity": p.selected_stroke_opacity
+                }
+                for p in payload.polygons
+            ],
+            "selected_polygons": payload.selected_polygons
+        }
+
+    def postprocess(self, value: dict | None) -> PolygonAnnotatorData | None:
+        """
+        Parameters:
+            value: Dictionary containing 'image' (file path or URL), 'polygons' (list of polygon dictionaries
+                   with id, coordinates, color, mask_opacity, stroke_width, stroke_opacity, and selection opacity settings),
+                   and optionally 'selected_polygons' (list of selected polygon IDs).
+        Returns:
+            Processed component data ready for display.
+        """
+        if value is None:
+            return None
+
+        # Handle the image path
+        image_path = value.get("image")
+        if isinstance(image_path, str):
+            image_data = FileData(path=image_path)
+        else:
+            return None
+
+        # Handle polygons
+        polygons = []
+        for poly in value.get("polygons", []):
+            polygons.append(
+                Polygon(
+                    id=poly["id"],
+                    coordinates=poly["coordinates"],
+                    color=poly.get("color", "#FF0000"),
+                    mask_opacity=poly.get("mask_opacity", poly.get("opacity", 0.2)),  # Support old 'opacity' key for backwards compatibility
+                    stroke_width=poly.get("stroke_width", 0.7),
+                    stroke_opacity=poly.get("stroke_opacity", 0.6),
+                    selected_mask_opacity=poly.get("selected_mask_opacity", 0.5),
+                    selected_stroke_opacity=poly.get("selected_stroke_opacity", 1.0)
+                )
+            )
+
+        return PolygonAnnotatorData(
+            image=image_data,
+            polygons=polygons,
+            selected_polygons=value.get("selected_polygons")
+        )
+
+    def example_payload(self) -> Any:
+        return {
+            "image": handle_file(
+                "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png"
+            ),
+            "polygons": [
+                {
+                    "id": "polygon1",
+                    "coordinates": [[50, 50], [150, 50], [150, 150], [50, 150]],
+                    "color": "#FF0000",
+                    "mask_opacity": 0.2,
+                    "stroke_width": 0.7,
+                    "stroke_opacity": 0.6
+                }
+            ]
+        }
+
+    def example_value(self) -> Any:
+        return {
+            "image": "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png",
+            "polygons": [
+                {
+                    "id": "polygon1",
+                    "coordinates": [[50, 50], [150, 50], [150, 150], [50, 150]],
+                    "color": "#FF0000",
+                    "mask_opacity": 0.2,
+                    "stroke_width": 0.7,
+                    "stroke_opacity": 0.6
+                },
+                {
+                    "id": "polygon2",
+                    "coordinates": [[200, 100], [300, 100], [250, 200]],
+                    "color": "#00FF00",
+                    "mask_opacity": 0.2,
+                    "stroke_width": 1,
+                    "stroke_opacity": 0.8
+                }
+            ]
+        }

src/backend/gradio_polygonannotator/templates/component/CanvasPool-CO7699qB.js

@@ -0,0 +1,47 @@
+import { D as n, n as c, G as r } from "./Index-Ct_1BCRd.js";
+class l {
+  constructor(a) {
+    this._canvasPool = /* @__PURE__ */ Object.create(null), this.canvasOptions = a || {}, this.enableFullScreen = !1;
+  }
+  /**
+   * Creates texture with params that were specified in pool constructor.
+   * @param pixelWidth - Width of texture in pixels.
+   * @param pixelHeight - Height of texture in pixels.
+   */
+  _createCanvasAndContext(a, s) {
+    const t = n.get().createCanvas();
+    t.width = a, t.height = s;
+    const e = t.getContext("2d");
+    return { canvas: t, context: e };
+  }
+  /**
+   * Gets a Power-of-Two render texture or fullScreen texture
+   * @param minWidth - The minimum width of the render texture.
+   * @param minHeight - The minimum height of the render texture.
+   * @param resolution - The resolution of the render texture.
+   * @returns The new render texture.
+   */
+  getOptimalCanvasAndContext(a, s, t = 1) {
+    a = Math.ceil(a * t - 1e-6), s = Math.ceil(s * t - 1e-6), a = c(a), s = c(s);
+    const e = (a << 17) + (s << 1);
+    this._canvasPool[e] || (this._canvasPool[e] = []);
+    let o = this._canvasPool[e].pop();
+    return o || (o = this._createCanvasAndContext(a, s)), o;
+  }
+  /**
+   * Place a render texture back into the pool.
+   * @param canvasAndContext
+   */
+  returnCanvasAndContext(a) {
+    const s = a.canvas, { width: t, height: e } = s, o = (t << 17) + (e << 1);
+    a.context.resetTransform(), a.context.clearRect(0, 0, t, e), this._canvasPool[o].push(a);
+  }
+  clear() {
+    this._canvasPool = {};
+  }
+}
+const v = new l();
+r.register(v);
+export {
+  v as C
+};

src/backend/gradio_polygonannotator/templates/component/SharedSystems-DVDwWST4.js

@@ -0,0 +1,2766 @@
+import { q as He, t as ne, u as ie, v as ze, k as oe, M as v, x as le, E as u, e as O, y as S, z as We, F, H as b, R as L, I as ue, J as Ve, s as m, S as f, h as B, w as H, K as J, L as Ne, b as X, B as k, i as U, G as je, N as M, j as T, O as w, Q as $e, a as qe, V as de, W as ce, X as he, Y as fe, C as P, Z as Ke, _ as A, $ as Q, D as z, a0 as Ye, P as Je, c as Xe, T as Z, a1 as ee, a2 as Qe, a3 as Ze, a4 as et } from "./Index-Ct_1BCRd.js";
+import { S as pe, B as me, c as tt } from "./colorToUniform-zJcCVLeu.js";
+const ve = class I extends He {
+  /**
+   * @param options - The optional parameters of this filter.
+   */
+  constructor(e) {
+    e = { ...I.defaultOptions, ...e }, super(e), this.enabled = !0, this._state = pe.for2d(), this.blendMode = e.blendMode, this.padding = e.padding, typeof e.antialias == "boolean" ? this.antialias = e.antialias ? "on" : "off" : this.antialias = e.antialias, this.resolution = e.resolution, this.blendRequired = e.blendRequired, this.clipToViewport = e.clipToViewport, this.addResource("uTexture", 0, 1);
+  }
+  /**
+   * Applies the filter
+   * @param filterManager - The renderer to retrieve the filter from
+   * @param input - The input render target.
+   * @param output - The target to output to.
+   * @param clearMode - Should the output be cleared before rendering to it
+   */
+  apply(e, t, r, s) {
+    e.applyFilter(this, t, r, s);
+  }
+  /**
+   * Get the blend mode of the filter.
+   * @default "normal"
+   */
+  get blendMode() {
+    return this._state.blendMode;
+  }
+  /** Sets the blend mode of the filter. */
+  set blendMode(e) {
+    this._state.blendMode = e;
+  }
+  /**
+   * A short hand function to create a filter based of a vertex and fragment shader src.
+   * @param options
+   * @returns A shiny new PixiJS filter!
+   */
+  static from(e) {
+    const { gpu: t, gl: r, ...s } = e;
+    let a, i;
+    return t && (a = ne.from(t)), r && (i = ie.from(r)), new I({
+      gpuProgram: a,
+      glProgram: i,
+      ...s
+    });
+  }
+};
+ve.defaultOptions = {
+  blendMode: "normal",
+  resolution: 1,
+  padding: 0,
+  antialias: "off",
+  blendRequired: !1,
+  clipToViewport: !0
+};
+let rt = ve;
+var st = `in vec2 vMaskCoord;
+in vec2 vTextureCoord;
+
+uniform sampler2D uTexture;
+uniform sampler2D uMaskTexture;
+
+uniform float uAlpha;
+uniform vec4 uMaskClamp;
+uniform float uInverse;
+
+out vec4 finalColor;
+
+void main(void)
+{
+    float clip = step(3.5,
+        step(uMaskClamp.x, vMaskCoord.x) +
+        step(uMaskClamp.y, vMaskCoord.y) +
+        step(vMaskCoord.x, uMaskClamp.z) +
+        step(vMaskCoord.y, uMaskClamp.w));
+
+    // TODO look into why this is needed
+    float npmAlpha = uAlpha;
+    vec4 original = texture(uTexture, vTextureCoord);
+    vec4 masky = texture(uMaskTexture, vMaskCoord);
+    float alphaMul = 1.0 - npmAlpha * (1.0 - masky.a);
+
+    float a = alphaMul * masky.r * npmAlpha * clip;
+
+    if (uInverse == 1.0) {
+        a = 1.0 - a;
+    }
+
+    finalColor = original * a;
+}
+`, at = `in vec2 aPosition;
+
+out vec2 vTextureCoord;
+out vec2 vMaskCoord;
+
+
+uniform vec4 uInputSize;
+uniform vec4 uOutputFrame;
+uniform vec4 uOutputTexture;
+uniform mat3 uFilterMatrix;
+
+vec4 filterVertexPosition(  vec2 aPosition )
+{
+    vec2 position = aPosition * uOutputFrame.zw + uOutputFrame.xy;
+       
+    position.x = position.x * (2.0 / uOutputTexture.x) - 1.0;
+    position.y = position.y * (2.0*uOutputTexture.z / uOutputTexture.y) - uOutputTexture.z;
+
+    return vec4(position, 0.0, 1.0);
+}
+
+vec2 filterTextureCoord(  vec2 aPosition )
+{
+    return aPosition * (uOutputFrame.zw * uInputSize.zw);
+}
+
+vec2 getFilterCoord( vec2 aPosition )
+{
+    return  ( uFilterMatrix * vec3( filterTextureCoord(aPosition), 1.0)  ).xy;
+}   
+
+void main(void)
+{
+    gl_Position = filterVertexPosition(aPosition);
+    vTextureCoord = filterTextureCoord(aPosition);
+    vMaskCoord = getFilterCoord(aPosition);
+}
+`, te = `struct GlobalFilterUniforms {
+  uInputSize:vec4<f32>,
+  uInputPixel:vec4<f32>,
+  uInputClamp:vec4<f32>,
+  uOutputFrame:vec4<f32>,
+  uGlobalFrame:vec4<f32>,
+  uOutputTexture:vec4<f32>,
+};
+
+struct MaskUniforms {
+  uFilterMatrix:mat3x3<f32>,
+  uMaskClamp:vec4<f32>,
+  uAlpha:f32,
+  uInverse:f32,
+};
+
+@group(0) @binding(0) var<uniform> gfu: GlobalFilterUniforms;
+@group(0) @binding(1) var uTexture: texture_2d<f32>;
+@group(0) @binding(2) var uSampler : sampler;
+
+@group(1) @binding(0) var<uniform> filterUniforms : MaskUniforms;
+@group(1) @binding(1) var uMaskTexture: texture_2d<f32>;
+
+struct VSOutput {
+    @builtin(position) position: vec4<f32>,
+    @location(0) uv : vec2<f32>,
+    @location(1) filterUv : vec2<f32>,
+};
+
+fn filterVertexPosition(aPosition:vec2<f32>) -> vec4<f32>
+{
+    var position = aPosition * gfu.uOutputFrame.zw + gfu.uOutputFrame.xy;
+
+    position.x = position.x * (2.0 / gfu.uOutputTexture.x) - 1.0;
+    position.y = position.y * (2.0*gfu.uOutputTexture.z / gfu.uOutputTexture.y) - gfu.uOutputTexture.z;
+
+    return vec4(position, 0.0, 1.0);
+}
+
+fn filterTextureCoord( aPosition:vec2<f32> ) -> vec2<f32>
+{
+    return aPosition * (gfu.uOutputFrame.zw * gfu.uInputSize.zw);
+}
+
+fn globalTextureCoord( aPosition:vec2<f32> ) -> vec2<f32>
+{
+  return  (aPosition.xy / gfu.uGlobalFrame.zw) + (gfu.uGlobalFrame.xy / gfu.uGlobalFrame.zw);
+}
+
+fn getFilterCoord(aPosition:vec2<f32> ) -> vec2<f32>
+{
+  return ( filterUniforms.uFilterMatrix * vec3( filterTextureCoord(aPosition), 1.0)  ).xy;
+}
+
+fn getSize() -> vec2<f32>
+{
+  return gfu.uGlobalFrame.zw;
+}
+
+@vertex
+fn mainVertex(
+  @location(0) aPosition : vec2<f32>,
+) -> VSOutput {
+  return VSOutput(
+   filterVertexPosition(aPosition),
+   filterTextureCoord(aPosition),
+   getFilterCoord(aPosition)
+  );
+}
+
+@fragment
+fn mainFragment(
+  @location(0) uv: vec2<f32>,
+  @location(1) filterUv: vec2<f32>,
+  @builtin(position) position: vec4<f32>
+) -> @location(0) vec4<f32> {
+
+    var maskClamp = filterUniforms.uMaskClamp;
+    var uAlpha = filterUniforms.uAlpha;
+
+    var clip = step(3.5,
+      step(maskClamp.x, filterUv.x) +
+      step(maskClamp.y, filterUv.y) +
+      step(filterUv.x, maskClamp.z) +
+      step(filterUv.y, maskClamp.w));
+
+    var mask = textureSample(uMaskTexture, uSampler, filterUv);
+    var source = textureSample(uTexture, uSampler, uv);
+    var alphaMul = 1.0 - uAlpha * (1.0 - mask.a);
+
+    var a: f32 = alphaMul * mask.r * uAlpha * clip;
+
+    if (filterUniforms.uInverse == 1.0) {
+        a = 1.0 - a;
+    }
+
+    return source * a;
+}
+`;
+class nt extends rt {
+  constructor(e) {
+    const { sprite: t, ...r } = e, s = new ze(t.texture), a = new oe({
+      uFilterMatrix: { value: new v(), type: "mat3x3<f32>" },
+      uMaskClamp: { value: s.uClampFrame, type: "vec4<f32>" },
+      uAlpha: { value: 1, type: "f32" },
+      uInverse: { value: e.inverse ? 1 : 0, type: "f32" }
+    }), i = ne.from({
+      vertex: {
+        source: te,
+        entryPoint: "mainVertex"
+      },
+      fragment: {
+        source: te,
+        entryPoint: "mainFragment"
+      }
+    }), o = ie.from({
+      vertex: at,
+      fragment: st,
+      name: "mask-filter"
+    });
+    super({
+      ...r,
+      gpuProgram: i,
+      glProgram: o,
+      clipToViewport: !1,
+      resources: {
+        filterUniforms: a,
+        uMaskTexture: t.texture.source
+      }
+    }), this.sprite = t, this._textureMatrix = s;
+  }
+  set inverse(e) {
+    this.resources.filterUniforms.uniforms.uInverse = e ? 1 : 0;
+  }
+  get inverse() {
+    return this.resources.filterUniforms.uniforms.uInverse === 1;
+  }
+  apply(e, t, r, s) {
+    this._textureMatrix.texture = this.sprite.texture, e.calculateSpriteMatrix(
+      this.resources.filterUniforms.uniforms.uFilterMatrix,
+      this.sprite
+    ).prepend(this._textureMatrix.mapCoord), this.resources.uMaskTexture = this.sprite.texture.source, e.applyFilter(this, t, r, s);
+  }
+}
+const W = class ge {
+  constructor(e, t) {
+    var r, s;
+    this.state = pe.for2d(), this._batchersByInstructionSet = /* @__PURE__ */ Object.create(null), this._activeBatches = /* @__PURE__ */ Object.create(null), this.renderer = e, this._adaptor = t, (s = (r = this._adaptor).init) == null || s.call(r, this);
+  }
+  static getBatcher(e) {
+    return new this._availableBatchers[e]();
+  }
+  buildStart(e) {
+    let t = this._batchersByInstructionSet[e.uid];
+    t || (t = this._batchersByInstructionSet[e.uid] = /* @__PURE__ */ Object.create(null), t.default || (t.default = new le({
+      maxTextures: this.renderer.limits.maxBatchableTextures
+    }))), this._activeBatches = t, this._activeBatch = this._activeBatches.default;
+    for (const r in this._activeBatches)
+      this._activeBatches[r].begin();
+  }
+  addToBatch(e, t) {
+    if (this._activeBatch.name !== e.batcherName) {
+      this._activeBatch.break(t);
+      let r = this._activeBatches[e.batcherName];
+      r || (r = this._activeBatches[e.batcherName] = ge.getBatcher(e.batcherName), r.begin()), this._activeBatch = r;
+    }
+    this._activeBatch.add(e);
+  }
+  break(e) {
+    this._activeBatch.break(e);
+  }
+  buildEnd(e) {
+    this._activeBatch.break(e);
+    const t = this._activeBatches;
+    for (const r in t) {
+      const s = t[r], a = s.geometry;
+      a.indexBuffer.setDataWithSize(s.indexBuffer, s.indexSize, !0), a.buffers[0].setDataWithSize(s.attributeBuffer.float32View, s.attributeSize, !1);
+    }
+  }
+  upload(e) {
+    const t = this._batchersByInstructionSet[e.uid];
+    for (const r in t) {
+      const s = t[r], a = s.geometry;
+      s.dirty && (s.dirty = !1, a.buffers[0].update(s.attributeSize * 4));
+    }
+  }
+  execute(e) {
+    if (e.action === "startBatch") {
+      const t = e.batcher, r = t.geometry, s = t.shader;
+      this._adaptor.start(this, r, s);
+    }
+    this._adaptor.execute(this, e);
+  }
+  destroy() {
+    this.state = null, this.renderer = null, this._adaptor = null;
+    for (const e in this._activeBatches)
+      this._activeBatches[e].destroy();
+    this._activeBatches = null;
+  }
+};
+W.extension = {
+  type: [
+    u.WebGLPipes,
+    u.WebGPUPipes,
+    u.CanvasPipes
+  ],
+  name: "batch"
+};
+W._availableBatchers = /* @__PURE__ */ Object.create(null);
+let xe = W;
+O.handleByMap(u.Batcher, xe._availableBatchers);
+O.add(le);
+const It = {
+  name: "texture-bit",
+  vertex: {
+    header: (
+      /* wgsl */
+      `
+
+        struct TextureUniforms {
+            uTextureMatrix:mat3x3<f32>,
+        }
+
+        @group(2) @binding(2) var<uniform> textureUniforms : TextureUniforms;
+        `
+    ),
+    main: (
+      /* wgsl */
+      `
+            uv = (textureUniforms.uTextureMatrix * vec3(uv, 1.0)).xy;
+        `
+    )
+  },
+  fragment: {
+    header: (
+      /* wgsl */
+      `
+            @group(2) @binding(0) var uTexture: texture_2d<f32>;
+            @group(2) @binding(1) var uSampler: sampler;
+
+
+        `
+    ),
+    main: (
+      /* wgsl */
+      `
+            outColor = textureSample(uTexture, uSampler, vUV);
+        `
+    )
+  }
+}, Gt = {
+  name: "texture-bit",
+  vertex: {
+    header: (
+      /* glsl */
+      `
+            uniform mat3 uTextureMatrix;
+        `
+    ),
+    main: (
+      /* glsl */
+      `
+            uv = (uTextureMatrix * vec3(uv, 1.0)).xy;
+        `
+    )
+  },
+  fragment: {
+    header: (
+      /* glsl */
+      `
+        uniform sampler2D uTexture;
+
+
+        `
+    ),
+    main: (
+      /* glsl */
+      `
+            outColor = texture(uTexture, vUV);
+        `
+    )
+  }
+}, it = new F();
+class ot extends ue {
+  constructor() {
+    super(), this.filters = [new nt({
+      sprite: new Ve(m.EMPTY),
+      inverse: !1,
+      resolution: "inherit",
+      antialias: "inherit"
+    })];
+  }
+  get sprite() {
+    return this.filters[0].sprite;
+  }
+  set sprite(e) {
+    this.filters[0].sprite = e;
+  }
+  get inverse() {
+    return this.filters[0].inverse;
+  }
+  set inverse(e) {
+    this.filters[0].inverse = e;
+  }
+}
+class _e {
+  constructor(e) {
+    this._activeMaskStage = [], this._renderer = e;
+  }
+  push(e, t, r) {
+    const s = this._renderer;
+    if (s.renderPipes.batch.break(r), r.add({
+      renderPipeId: "alphaMask",
+      action: "pushMaskBegin",
+      mask: e,
+      inverse: t._maskOptions.inverse,
+      canBundle: !1,
+      maskedContainer: t
+    }), e.inverse = t._maskOptions.inverse, e.renderMaskToTexture) {
+      const a = e.mask;
+      a.includeInBuild = !0, a.collectRenderables(
+        r,
+        s,
+        null
+      ), a.includeInBuild = !1;
+    }
+    s.renderPipes.batch.break(r), r.add({
+      renderPipeId: "alphaMask",
+      action: "pushMaskEnd",
+      mask: e,
+      maskedContainer: t,
+      inverse: t._maskOptions.inverse,
+      canBundle: !1
+    });
+  }
+  pop(e, t, r) {
+    this._renderer.renderPipes.batch.break(r), r.add({
+      renderPipeId: "alphaMask",
+      action: "popMaskEnd",
+      mask: e,
+      inverse: t._maskOptions.inverse,
+      canBundle: !1
+    });
+  }
+  execute(e) {
+    const t = this._renderer, r = e.mask.renderMaskToTexture;
+    if (e.action === "pushMaskBegin") {
+      const s = S.get(ot);
+      if (s.inverse = e.inverse, r) {
+        e.mask.mask.measurable = !0;
+        const a = We(e.mask.mask, !0, it);
+        e.mask.mask.measurable = !1, a.ceil();
+        const i = t.renderTarget.renderTarget.colorTexture.source, o = b.getOptimalTexture(
+          a.width,
+          a.height,
+          i._resolution,
+          i.antialias
+        );
+        t.renderTarget.push(o, !0), t.globalUniforms.push({
+          offset: a,
+          worldColor: 4294967295
+        });
+        const l = s.sprite;
+        l.texture = o, l.worldTransform.tx = a.minX, l.worldTransform.ty = a.minY, this._activeMaskStage.push({
+          filterEffect: s,
+          maskedContainer: e.maskedContainer,
+          filterTexture: o
+        });
+      } else
+        s.sprite = e.mask.mask, this._activeMaskStage.push({
+          filterEffect: s,
+          maskedContainer: e.maskedContainer
+        });
+    } else if (e.action === "pushMaskEnd") {
+      const s = this._activeMaskStage[this._activeMaskStage.length - 1];
+      r && (t.type === L.WEBGL && t.renderTarget.finishRenderPass(), t.renderTarget.pop(), t.globalUniforms.pop()), t.filter.push({
+        renderPipeId: "filter",
+        action: "pushFilter",
+        container: s.maskedContainer,
+        filterEffect: s.filterEffect,
+        canBundle: !1
+      });
+    } else if (e.action === "popMaskEnd") {
+      t.filter.pop();
+      const s = this._activeMaskStage.pop();
+      r && b.returnTexture(s.filterTexture), S.return(s.filterEffect);
+    }
+  }
+  destroy() {
+    this._renderer = null, this._activeMaskStage = null;
+  }
+}
+_e.extension = {
+  type: [
+    u.WebGLPipes,
+    u.WebGPUPipes,
+    u.CanvasPipes
+  ],
+  name: "alphaMask"
+};
+class be {
+  constructor(e) {
+    this._colorStack = [], this._colorStackIndex = 0, this._currentColor = 0, this._renderer = e;
+  }
+  buildStart() {
+    this._colorStack[0] = 15, this._colorStackIndex = 1, this._currentColor = 15;
+  }
+  push(e, t, r) {
+    this._renderer.renderPipes.batch.break(r);
+    const a = this._colorStack;
+    a[this._colorStackIndex] = a[this._colorStackIndex - 1] & e.mask;
+    const i = this._colorStack[this._colorStackIndex];
+    i !== this._currentColor && (this._currentColor = i, r.add({
+      renderPipeId: "colorMask",
+      colorMask: i,
+      canBundle: !1
+    })), this._colorStackIndex++;
+  }
+  pop(e, t, r) {
+    this._renderer.renderPipes.batch.break(r);
+    const a = this._colorStack;
+    this._colorStackIndex--;
+    const i = a[this._colorStackIndex - 1];
+    i !== this._currentColor && (this._currentColor = i, r.add({
+      renderPipeId: "colorMask",
+      colorMask: i,
+      canBundle: !1
+    }));
+  }
+  execute(e) {
+    this._renderer.colorMask.setMask(e.colorMask);
+  }
+  destroy() {
+    this._renderer = null, this._colorStack = null;
+  }
+}
+be.extension = {
+  type: [
+    u.WebGLPipes,
+    u.WebGPUPipes,
+    u.CanvasPipes
+  ],
+  name: "colorMask"
+};
+class Te {
+  constructor(e) {
+    this._maskStackHash = {}, this._maskHash = /* @__PURE__ */ new WeakMap(), this._renderer = e;
+  }
+  push(e, t, r) {
+    var s;
+    const a = e, i = this._renderer;
+    i.renderPipes.batch.break(r), i.renderPipes.blendMode.setBlendMode(a.mask, "none", r), r.add({
+      renderPipeId: "stencilMask",
+      action: "pushMaskBegin",
+      mask: e,
+      inverse: t._maskOptions.inverse,
+      canBundle: !1
+    });
+    const o = a.mask;
+    o.includeInBuild = !0, this._maskHash.has(a) || this._maskHash.set(a, {
+      instructionsStart: 0,
+      instructionsLength: 0
+    });
+    const l = this._maskHash.get(a);
+    l.instructionsStart = r.instructionSize, o.collectRenderables(
+      r,
+      i,
+      null
+    ), o.includeInBuild = !1, i.renderPipes.batch.break(r), r.add({
+      renderPipeId: "stencilMask",
+      action: "pushMaskEnd",
+      mask: e,
+      inverse: t._maskOptions.inverse,
+      canBundle: !1
+    });
+    const d = r.instructionSize - l.instructionsStart - 1;
+    l.instructionsLength = d;
+    const c = i.renderTarget.renderTarget.uid;
+    (s = this._maskStackHash)[c] ?? (s[c] = 0);
+  }
+  pop(e, t, r) {
+    const s = e, a = this._renderer;
+    a.renderPipes.batch.break(r), a.renderPipes.blendMode.setBlendMode(s.mask, "none", r), r.add({
+      renderPipeId: "stencilMask",
+      action: "popMaskBegin",
+      inverse: t._maskOptions.inverse,
+      canBundle: !1
+    });
+    const i = this._maskHash.get(e);
+    for (let o = 0; o < i.instructionsLength; o++)
+      r.instructions[r.instructionSize++] = r.instructions[i.instructionsStart++];
+    r.add({
+      renderPipeId: "stencilMask",
+      action: "popMaskEnd",
+      canBundle: !1
+    });
+  }
+  execute(e) {
+    var t;
+    const r = this._renderer, s = r.renderTarget.renderTarget.uid;
+    let a = (t = this._maskStackHash)[s] ?? (t[s] = 0);
+    e.action === "pushMaskBegin" ? (r.renderTarget.ensureDepthStencil(), r.stencil.setStencilMode(f.RENDERING_MASK_ADD, a), a++, r.colorMask.setMask(0)) : e.action === "pushMaskEnd" ? (e.inverse ? r.stencil.setStencilMode(f.INVERSE_MASK_ACTIVE, a) : r.stencil.setStencilMode(f.MASK_ACTIVE, a), r.colorMask.setMask(15)) : e.action === "popMaskBegin" ? (r.colorMask.setMask(0), a !== 0 ? r.stencil.setStencilMode(f.RENDERING_MASK_REMOVE, a) : (r.renderTarget.clear(null, B.STENCIL), r.stencil.setStencilMode(f.DISABLED, a)), a--) : e.action === "popMaskEnd" && (e.inverse ? r.stencil.setStencilMode(f.INVERSE_MASK_ACTIVE, a) : r.stencil.setStencilMode(f.MASK_ACTIVE, a), r.colorMask.setMask(15)), this._maskStackHash[s] = a;
+  }
+  destroy() {
+    this._renderer = null, this._maskStackHash = null, this._maskHash = null;
+  }
+}
+Te.extension = {
+  type: [
+    u.WebGLPipes,
+    u.WebGPUPipes,
+    u.CanvasPipes
+  ],
+  name: "stencilMask"
+};
+function Et(n, e) {
+  for (const t in n.attributes) {
+    const r = n.attributes[t], s = e[t];
+    s ? (r.format ?? (r.format = s.format), r.offset ?? (r.offset = s.offset), r.instance ?? (r.instance = s.instance)) : H(`Attribute ${t} is not present in the shader, but is present in the geometry. Unable to infer attribute details.`);
+  }
+  lt(n);
+}
+function lt(n) {
+  const { buffers: e, attributes: t } = n, r = {}, s = {};
+  for (const a in e) {
+    const i = e[a];
+    r[i.uid] = 0, s[i.uid] = 0;
+  }
+  for (const a in t) {
+    const i = t[a];
+    r[i.buffer.uid] += J(i.format).stride;
+  }
+  for (const a in t) {
+    const i = t[a];
+    i.stride ?? (i.stride = r[i.buffer.uid]), i.start ?? (i.start = s[i.buffer.uid]), s[i.buffer.uid] += J(i.format).stride;
+  }
+}
+const _ = [];
+_[f.NONE] = void 0;
+_[f.DISABLED] = {
+  stencilWriteMask: 0,
+  stencilReadMask: 0
+};
+_[f.RENDERING_MASK_ADD] = {
+  stencilFront: {
+    compare: "equal",
+    passOp: "increment-clamp"
+  },
+  stencilBack: {
+    compare: "equal",
+    passOp: "increment-clamp"
+  }
+};
+_[f.RENDERING_MASK_REMOVE] = {
+  stencilFront: {
+    compare: "equal",
+    passOp: "decrement-clamp"
+  },
+  stencilBack: {
+    compare: "equal",
+    passOp: "decrement-clamp"
+  }
+};
+_[f.MASK_ACTIVE] = {
+  stencilWriteMask: 0,
+  stencilFront: {
+    compare: "equal",
+    passOp: "keep"
+  },
+  stencilBack: {
+    compare: "equal",
+    passOp: "keep"
+  }
+};
+_[f.INVERSE_MASK_ACTIVE] = {
+  stencilWriteMask: 0,
+  stencilFront: {
+    compare: "not-equal",
+    passOp: "keep"
+  },
+  stencilBack: {
+    compare: "not-equal",
+    passOp: "keep"
+  }
+};
+class Dt {
+  constructor(e) {
+    this._syncFunctionHash = /* @__PURE__ */ Object.create(null), this._adaptor = e, this._systemCheck();
+  }
+  /**
+   * Overridable function by `pixi.js/unsafe-eval` to silence
+   * throwing an error if platform doesn't support unsafe-evals.
+   * @private
+   */
+  _systemCheck() {
+    if (!Ne())
+      throw new Error("Current environment does not allow unsafe-eval, please use pixi.js/unsafe-eval module to enable support.");
+  }
+  ensureUniformGroup(e) {
+    const t = this.getUniformGroupData(e);
+    e.buffer || (e.buffer = new X({
+      data: new Float32Array(t.layout.size / 4),
+      usage: k.UNIFORM | k.COPY_DST
+    }));
+  }
+  getUniformGroupData(e) {
+    return this._syncFunctionHash[e._signature] || this._initUniformGroup(e);
+  }
+  _initUniformGroup(e) {
+    const t = e._signature;
+    let r = this._syncFunctionHash[t];
+    if (!r) {
+      const s = Object.keys(e.uniformStructures).map((o) => e.uniformStructures[o]), a = this._adaptor.createUboElements(s), i = this._generateUboSync(a.uboElements);
+      r = this._syncFunctionHash[t] = {
+        layout: a,
+        syncFunction: i
+      };
+    }
+    return this._syncFunctionHash[t];
+  }
+  _generateUboSync(e) {
+    return this._adaptor.generateUboSync(e);
+  }
+  syncUniformGroup(e, t, r) {
+    const s = this.getUniformGroupData(e);
+    e.buffer || (e.buffer = new X({
+      data: new Float32Array(s.layout.size / 4),
+      usage: k.UNIFORM | k.COPY_DST
+    }));
+    let a = null;
+    return t || (t = e.buffer.data, a = e.buffer.dataInt32), r || (r = 0), s.syncFunction(e.uniforms, t, a, r), !0;
+  }
+  updateUniformGroup(e) {
+    if (e.isStatic && !e._dirtyId)
+      return !1;
+    e._dirtyId = 0;
+    const t = this.syncUniformGroup(e);
+    return e.buffer.update(), t;
+  }
+  destroy() {
+    this._syncFunctionHash = null;
+  }
+}
+const C = [
+  // uploading pixi matrix object to mat3
+  {
+    type: "mat3x3<f32>",
+    test: (n) => n.value.a !== void 0,
+    ubo: `
+            var matrix = uv[name].toArray(true);
+            data[offset] = matrix[0];
+            data[offset + 1] = matrix[1];
+            data[offset + 2] = matrix[2];
+            data[offset + 4] = matrix[3];
+            data[offset + 5] = matrix[4];
+            data[offset + 6] = matrix[5];
+            data[offset + 8] = matrix[6];
+            data[offset + 9] = matrix[7];
+            data[offset + 10] = matrix[8];
+        `,
+    uniform: `
+            gl.uniformMatrix3fv(ud[name].location, false, uv[name].toArray(true));
+        `
+  },
+  // uploading a pixi rectangle as a vec4
+  {
+    type: "vec4<f32>",
+    test: (n) => n.type === "vec4<f32>" && n.size === 1 && n.value.width !== void 0,
+    ubo: `
+            v = uv[name];
+            data[offset] = v.x;
+            data[offset + 1] = v.y;
+            data[offset + 2] = v.width;
+            data[offset + 3] = v.height;
+        `,
+    uniform: `
+            cv = ud[name].value;
+            v = uv[name];
+            if (cv[0] !== v.x || cv[1] !== v.y || cv[2] !== v.width || cv[3] !== v.height) {
+                cv[0] = v.x;
+                cv[1] = v.y;
+                cv[2] = v.width;
+                cv[3] = v.height;
+                gl.uniform4f(ud[name].location, v.x, v.y, v.width, v.height);
+            }
+        `
+  },
+  // uploading a pixi point as a vec2
+  {
+    type: "vec2<f32>",
+    test: (n) => n.type === "vec2<f32>" && n.size === 1 && n.value.x !== void 0,
+    ubo: `
+            v = uv[name];
+            data[offset] = v.x;
+            data[offset + 1] = v.y;
+        `,
+    uniform: `
+            cv = ud[name].value;
+            v = uv[name];
+            if (cv[0] !== v.x || cv[1] !== v.y) {
+                cv[0] = v.x;
+                cv[1] = v.y;
+                gl.uniform2f(ud[name].location, v.x, v.y);
+            }
+        `
+  },
+  // uploading a pixi color as a vec4
+  {
+    type: "vec4<f32>",
+    test: (n) => n.type === "vec4<f32>" && n.size === 1 && n.value.red !== void 0,
+    ubo: `
+            v = uv[name];
+            data[offset] = v.red;
+            data[offset + 1] = v.green;
+            data[offset + 2] = v.blue;
+            data[offset + 3] = v.alpha;
+        `,
+    uniform: `
+            cv = ud[name].value;
+            v = uv[name];
+            if (cv[0] !== v.red || cv[1] !== v.green || cv[2] !== v.blue || cv[3] !== v.alpha) {
+                cv[0] = v.red;
+                cv[1] = v.green;
+                cv[2] = v.blue;
+                cv[3] = v.alpha;
+                gl.uniform4f(ud[name].location, v.red, v.green, v.blue, v.alpha);
+            }
+        `
+  },
+  // uploading a pixi color as a vec3
+  {
+    type: "vec3<f32>",
+    test: (n) => n.type === "vec3<f32>" && n.size === 1 && n.value.red !== void 0,
+    ubo: `
+            v = uv[name];
+            data[offset] = v.red;
+            data[offset + 1] = v.green;
+            data[offset + 2] = v.blue;
+        `,
+    uniform: `
+            cv = ud[name].value;
+            v = uv[name];
+            if (cv[0] !== v.red || cv[1] !== v.green || cv[2] !== v.blue) {
+                cv[0] = v.red;
+                cv[1] = v.green;
+                cv[2] = v.blue;
+                gl.uniform3f(ud[name].location, v.red, v.green, v.blue);
+            }
+        `
+  }
+];
+function Ot(n, e, t, r) {
+  const s = [`
+        var v = null;
+        var v2 = null;
+        var t = 0;
+        var index = 0;
+        var name = null;
+        var arrayOffset = null;
+    `];
+  let a = 0;
+  for (let o = 0; o < n.length; o++) {
+    const l = n[o], d = l.data.name;
+    let c = !1, h = 0;
+    for (let p = 0; p < C.length; p++)
+      if (C[p].test(l.data)) {
+        h = l.offset / 4, s.push(
+          `name = "${d}";`,
+          `offset += ${h - a};`,
+          C[p][e] || C[p].ubo
+        ), c = !0;
+        break;
+      }
+    if (!c)
+      if (l.data.size > 1)
+        h = l.offset / 4, s.push(t(l, h - a));
+      else {
+        const p = r[l.data.type];
+        h = l.offset / 4, s.push(
+          /* wgsl */
+          `
+                    v = uv.${d};
+                    offset += ${h - a};
+                    ${p};
+                `
+        );
+      }
+    a = h;
+  }
+  const i = s.join(`
+`);
+  return new Function(
+    "uv",
+    "data",
+    "dataInt32",
+    "offset",
+    i
+  );
+}
+function g(n, e) {
+  return `
+        for (let i = 0; i < ${n * e}; i++) {
+            data[offset + (((i / ${n})|0) * 4) + (i % ${n})] = v[i];
+        }
+    `;
+}
+const ut = {
+  f32: `
+        data[offset] = v;`,
+  i32: `
+        dataInt32[offset] = v;`,
+  "vec2<f32>": `
+        data[offset] = v[0];
+        data[offset + 1] = v[1];`,
+  "vec3<f32>": `
+        data[offset] = v[0];
+        data[offset + 1] = v[1];
+        data[offset + 2] = v[2];`,
+  "vec4<f32>": `
+        data[offset] = v[0];
+        data[offset + 1] = v[1];
+        data[offset + 2] = v[2];
+        data[offset + 3] = v[3];`,
+  "vec2<i32>": `
+        dataInt32[offset] = v[0];
+        dataInt32[offset + 1] = v[1];`,
+  "vec3<i32>": `
+        dataInt32[offset] = v[0];
+        dataInt32[offset + 1] = v[1];
+        dataInt32[offset + 2] = v[2];`,
+  "vec4<i32>": `
+        dataInt32[offset] = v[0];
+        dataInt32[offset + 1] = v[1];
+        dataInt32[offset + 2] = v[2];
+        dataInt32[offset + 3] = v[3];`,
+  "mat2x2<f32>": `
+        data[offset] = v[0];
+        data[offset + 1] = v[1];
+        data[offset + 4] = v[2];
+        data[offset + 5] = v[3];`,
+  "mat3x3<f32>": `
+        data[offset] = v[0];
+        data[offset + 1] = v[1];
+        data[offset + 2] = v[2];
+        data[offset + 4] = v[3];
+        data[offset + 5] = v[4];
+        data[offset + 6] = v[5];
+        data[offset + 8] = v[6];
+        data[offset + 9] = v[7];
+        data[offset + 10] = v[8];`,
+  "mat4x4<f32>": `
+        for (let i = 0; i < 16; i++) {
+            data[offset + i] = v[i];
+        }`,
+  "mat3x2<f32>": g(3, 2),
+  "mat4x2<f32>": g(4, 2),
+  "mat2x3<f32>": g(2, 3),
+  "mat4x3<f32>": g(4, 3),
+  "mat2x4<f32>": g(2, 4),
+  "mat3x4<f32>": g(3, 4)
+}, Ft = {
+  ...ut,
+  "mat2x2<f32>": `
+        data[offset] = v[0];
+        data[offset + 1] = v[1];
+        data[offset + 2] = v[2];
+        data[offset + 3] = v[3];
+    `
+};
+function dt(n, e, t, r, s, a) {
+  const i = a ? 1 : -1;
+  return n.identity(), n.a = 1 / r * 2, n.d = i * (1 / s * 2), n.tx = -1 - e * n.a, n.ty = -i - t * n.d, n;
+}
+const x = /* @__PURE__ */ new Map();
+je.register(x);
+function ye(n, e) {
+  if (!x.has(n)) {
+    const t = new m({
+      source: new U({
+        resource: n,
+        ...e
+      })
+    }), r = () => {
+      x.get(n) === t && x.delete(n);
+    };
+    t.once("destroy", r), t.source.once("destroy", r), x.set(n, t);
+  }
+  return x.get(n);
+}
+function ct(n) {
+  const e = n.colorTexture.source.resource;
+  return globalThis.HTMLCanvasElement && e instanceof HTMLCanvasElement && document.body.contains(e);
+}
+const ke = class Ce {
+  /**
+   * @param [descriptor] - Options for creating a render target.
+   */
+  constructor(e = {}) {
+    if (this.uid = M("renderTarget"), this.colorTextures = [], this.dirtyId = 0, this.isRoot = !1, this._size = new Float32Array(2), this._managedColorTextures = !1, e = { ...Ce.defaultOptions, ...e }, this.stencil = e.stencil, this.depth = e.depth, this.isRoot = e.isRoot, typeof e.colorTextures == "number") {
+      this._managedColorTextures = !0;
+      for (let t = 0; t < e.colorTextures; t++)
+        this.colorTextures.push(
+          new T({
+            width: e.width,
+            height: e.height,
+            resolution: e.resolution,
+            antialias: e.antialias
+          })
+        );
+    } else {
+      this.colorTextures = [...e.colorTextures.map((r) => r.source)];
+      const t = this.colorTexture.source;
+      this.resize(t.width, t.height, t._resolution);
+    }
+    this.colorTexture.source.on("resize", this.onSourceResize, this), (e.depthStencilTexture || this.stencil) && (e.depthStencilTexture instanceof m || e.depthStencilTexture instanceof T ? this.depthStencilTexture = e.depthStencilTexture.source : this.ensureDepthStencilTexture());
+  }
+  get size() {
+    const e = this._size;
+    return e[0] = this.pixelWidth, e[1] = this.pixelHeight, e;
+  }
+  get width() {
+    return this.colorTexture.source.width;
+  }
+  get height() {
+    return this.colorTexture.source.height;
+  }
+  get pixelWidth() {
+    return this.colorTexture.source.pixelWidth;
+  }
+  get pixelHeight() {
+    return this.colorTexture.source.pixelHeight;
+  }
+  get resolution() {
+    return this.colorTexture.source._resolution;
+  }
+  get colorTexture() {
+    return this.colorTextures[0];
+  }
+  onSourceResize(e) {
+    this.resize(e.width, e.height, e._resolution, !0);
+  }
+  /**
+   * 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
+   */
+  ensureDepthStencilTexture() {
+    this.depthStencilTexture || (this.depthStencilTexture = new T({
+      width: this.width,
+      height: this.height,
+      resolution: this.resolution,
+      format: "depth24plus-stencil8",
+      autoGenerateMipmaps: !1,
+      antialias: !1,
+      mipLevelCount: 1
+      // sampleCount: handled by the render target system..
+    }));
+  }
+  resize(e, t, r = this.resolution, s = !1) {
+    this.dirtyId++, this.colorTextures.forEach((a, i) => {
+      s && i === 0 || a.source.resize(e, t, r);
+    }), this.depthStencilTexture && this.depthStencilTexture.source.resize(e, t, r);
+  }
+  destroy() {
+    this.colorTexture.source.off("resize", this.onSourceResize, this), this._managedColorTextures && this.colorTextures.forEach((e) => {
+      e.destroy();
+    }), this.depthStencilTexture && (this.depthStencilTexture.destroy(), delete this.depthStencilTexture);
+  }
+};
+ke.defaultOptions = {
+  /** the width of the RenderTarget */
+  width: 0,
+  /** the height of the RenderTarget */
+  height: 0,
+  /** the resolution of the RenderTarget */
+  resolution: 1,
+  /** an array of textures, or a number indicating how many color textures there should be */
+  colorTextures: 1,
+  /** should this render target have a stencil buffer? */
+  stencil: !1,
+  /** should this render target have a depth buffer? */
+  depth: !1,
+  /** should this render target be antialiased? */
+  antialias: !1,
+  // save on perf by default!
+  /** is this a root element, true if this is gl context owners render target */
+  isRoot: !1
+};
+let G = ke;
+class Lt {
+  constructor(e) {
+    this.rootViewPort = new w(), this.viewport = new w(), this.onRenderTargetChange = new $e("onRenderTargetChange"), this.projectionMatrix = new v(), this.defaultClearColor = [0, 0, 0, 0], this._renderSurfaceToRenderTargetHash = /* @__PURE__ */ new Map(), this._gpuRenderTargetHash = /* @__PURE__ */ Object.create(null), this._renderTargetStack = [], this._renderer = e, e.renderableGC.addManagedHash(this, "_gpuRenderTargetHash");
+  }
+  /** called when dev wants to finish a render pass */
+  finishRenderPass() {
+    this.adaptor.finishRenderPass(this.renderTarget);
+  }
+  /**
+   * called when the renderer starts to render a scene.
+   * @param options
+   * @param options.target - the render target to render to
+   * @param options.clear - the clear mode to use. Can be true or a CLEAR number 'COLOR | DEPTH | STENCIL' 0b111
+   * @param options.clearColor - the color to clear to
+   * @param options.frame - the frame to render to
+   */
+  renderStart({
+    target: e,
+    clear: t,
+    clearColor: r,
+    frame: s
+  }) {
+    var a, i;
+    this._renderTargetStack.length = 0, this.push(
+      e,
+      t,
+      r,
+      s
+    ), this.rootViewPort.copyFrom(this.viewport), this.rootRenderTarget = this.renderTarget, this.renderingToScreen = ct(this.rootRenderTarget), (i = (a = this.adaptor).prerender) == null || i.call(a, this.rootRenderTarget);
+  }
+  postrender() {
+    var e, t;
+    (t = (e = this.adaptor).postrender) == null || t.call(e, this.rootRenderTarget);
+  }
+  /**
+   * Binding a render surface! This is the main function of the render target system.
+   * It will take the RenderSurface (which can be a texture, canvas, or render target) and bind it to the renderer.
+   * Once bound all draw calls will be rendered to the render surface.
+   *
+   * If a frame is not provide and the render surface is a texture, the frame of the texture will be used.
+   * @param renderSurface - the render surface to bind
+   * @param clear - the clear mode to use. Can be true or a CLEAR number 'COLOR | DEPTH | STENCIL' 0b111
+   * @param clearColor - the color to clear to
+   * @param frame - the frame to render to
+   * @returns the render target that was bound
+   */
+  bind(e, t = !0, r, s) {
+    const a = this.getRenderTarget(e), i = this.renderTarget !== a;
+    this.renderTarget = a, this.renderSurface = e;
+    const o = this.getGpuRenderTarget(a);
+    (a.pixelWidth !== o.width || a.pixelHeight !== o.height) && (this.adaptor.resizeGpuRenderTarget(a), o.width = a.pixelWidth, o.height = a.pixelHeight);
+    const l = a.colorTexture, d = this.viewport, c = l.pixelWidth, h = l.pixelHeight;
+    if (!s && e instanceof m && (s = e.frame), s) {
+      const p = l._resolution;
+      d.x = s.x * p + 0.5 | 0, d.y = s.y * p + 0.5 | 0, d.width = s.width * p + 0.5 | 0, d.height = s.height * p + 0.5 | 0;
+    } else
+      d.x = 0, d.y = 0, d.width = c, d.height = h;
+    return dt(
+      this.projectionMatrix,
+      0,
+      0,
+      d.width / l.resolution,
+      d.height / l.resolution,
+      !a.isRoot
+    ), this.adaptor.startRenderPass(a, t, r, d), i && this.onRenderTargetChange.emit(a), a;
+  }
+  clear(e, t = B.ALL, r) {
+    t && (e && (e = this.getRenderTarget(e)), this.adaptor.clear(
+      e || this.renderTarget,
+      t,
+      r,
+      this.viewport
+    ));
+  }
+  contextChange() {
+    this._gpuRenderTargetHash = /* @__PURE__ */ Object.create(null);
+  }
+  /**
+   * Push a render surface to the renderer. This will bind the render surface to the renderer,
+   * @param renderSurface - the render surface to push
+   * @param clear - the clear mode to use. Can be true or a CLEAR number 'COLOR | DEPTH | STENCIL' 0b111
+   * @param clearColor - the color to clear to
+   * @param frame - the frame to use when rendering to the render surface
+   */
+  push(e, t = B.ALL, r, s) {
+    const a = this.bind(e, t, r, s);
+    return this._renderTargetStack.push({
+      renderTarget: a,
+      frame: s
+    }), a;
+  }
+  /** Pops the current render target from the renderer and restores the previous render target. */
+  pop() {
+    this._renderTargetStack.pop();
+    const e = this._renderTargetStack[this._renderTargetStack.length - 1];
+    this.bind(e.renderTarget, !1, null, e.frame);
+  }
+  /**
+   * Gets the render target from the provide render surface. Eg if its a texture,
+   * it will return the render target for the texture.
+   * If its a render target, it will return the same render target.
+   * @param renderSurface - the render surface to get the render target for
+   * @returns the render target for the render surface
+   */
+  getRenderTarget(e) {
+    return e.isTexture && (e = e.source), this._renderSurfaceToRenderTargetHash.get(e) ?? this._initRenderTarget(e);
+  }
+  /**
+   * Copies a render surface to another texture.
+   *
+   * NOTE:
+   * for sourceRenderSurfaceTexture, The render target must be something that is written too by the renderer
+   *
+   * The following is not valid:
+   * @example
+   * const canvas = document.createElement('canvas')
+   * canvas.width = 200;
+   * canvas.height = 200;
+   *
+   * const ctx = canvas2.getContext('2d')!
+   * ctx.fillStyle = 'red'
+   * ctx.fillRect(0, 0, 200, 200);
+   *
+   * const texture = RenderTexture.create({
+   *   width: 200,
+   *   height: 200,
+   * })
+   * const renderTarget = renderer.renderTarget.getRenderTarget(canvas2);
+   *
+   * renderer.renderTarget.copyToTexture(renderTarget,texture, {x:0,y:0},{width:200,height:200},{x:0,y:0});
+   *
+   * The best way to copy a canvas is to create a texture from it. Then render with that.
+   *
+   * Parsing in a RenderTarget canvas context (with a 2d context)
+   * @param sourceRenderSurfaceTexture - the render surface to copy from
+   * @param destinationTexture - the texture to copy to
+   * @param originSrc - the origin of the copy
+   * @param originSrc.x - the x origin of the copy
+   * @param originSrc.y - the y origin of the copy
+   * @param size - the size of the copy
+   * @param size.width - the width of the copy
+   * @param size.height - the height of the copy
+   * @param originDest - the destination origin (top left to paste from!)
+   * @param originDest.x - the x origin of the paste
+   * @param originDest.y - the y origin of the paste
+   */
+  copyToTexture(e, t, r, s, a) {
+    r.x < 0 && (s.width += r.x, a.x -= r.x, r.x = 0), r.y < 0 && (s.height += r.y, a.y -= r.y, r.y = 0);
+    const { pixelWidth: i, pixelHeight: o } = e;
+    return s.width = Math.min(s.width, i - r.x), s.height = Math.min(s.height, o - r.y), this.adaptor.copyToTexture(
+      e,
+      t,
+      r,
+      s,
+      a
+    );
+  }
+  /**
+   * ensures that we have a depth stencil buffer available to render to
+   * This is used by the mask system to make sure we have a stencil buffer.
+   */
+  ensureDepthStencil() {
+    this.renderTarget.stencil || (this.renderTarget.stencil = !0, this.adaptor.startRenderPass(this.renderTarget, !1, null, this.viewport));
+  }
+  /** nukes the render target system */
+  destroy() {
+    this._renderer = null, this._renderSurfaceToRenderTargetHash.forEach((e, t) => {
+      e !== t && e.destroy();
+    }), this._renderSurfaceToRenderTargetHash.clear(), this._gpuRenderTargetHash = /* @__PURE__ */ Object.create(null);
+  }
+  _initRenderTarget(e) {
+    let t = null;
+    return U.test(e) && (e = ye(e).source), e instanceof G ? t = e : e instanceof T && (t = new G({
+      colorTextures: [e]
+    }), e.source instanceof U && (t.isRoot = !0), e.once("destroy", () => {
+      t.destroy(), this._renderSurfaceToRenderTargetHash.delete(e);
+      const r = this._gpuRenderTargetHash[t.uid];
+      r && (this._gpuRenderTargetHash[t.uid] = null, this.adaptor.destroyGpuRenderTarget(r));
+    })), this._renderSurfaceToRenderTargetHash.set(e, t), t;
+  }
+  getGpuRenderTarget(e) {
+    return this._gpuRenderTargetHash[e.uid] || (this._gpuRenderTargetHash[e.uid] = this.adaptor.initGpuRenderTarget(e));
+  }
+  resetState() {
+    this.renderTarget = null, this.renderSurface = null;
+  }
+}
+class Ht extends qe {
+  /**
+   * Create a new Buffer Resource.
+   * @param options - The options for the buffer resource
+   * @param options.buffer - The underlying buffer that this resource is using
+   * @param options.offset - The offset of the buffer this resource is using.
+   * If not provided, then it will use the offset of the buffer.
+   * @param options.size - The size of the buffer this resource is using.
+   * If not provided, then it will use the size of the buffer.
+   */
+  constructor({ buffer: e, offset: t, size: r }) {
+    super(), this.uid = M("buffer"), this._resourceType = "bufferResource", this._touched = 0, this._resourceId = M("resource"), this._bufferResource = !0, this.destroyed = !1, this.buffer = e, this.offset = t | 0, this.size = r, this.buffer.on("change", this.onBufferChange, this);
+  }
+  onBufferChange() {
+    this._resourceId = M("resource"), this.emit("change", this);
+  }
+  /**
+   * Destroys this resource. Make sure the underlying buffer is not used anywhere else
+   * if you want to destroy it as well, or code will explode
+   * @param destroyBuffer - Should the underlying buffer be destroyed as well?
+   */
+  destroy(e = !1) {
+    this.destroyed = !0, e && this.buffer.destroy(), this.emit("change", this), this.buffer = null;
+  }
+}
+class Me {
+  constructor(e) {
+    this._renderer = e;
+  }
+  updateRenderable() {
+  }
+  destroyRenderable() {
+  }
+  validateRenderable() {
+    return !1;
+  }
+  addRenderable(e, t) {
+    this._renderer.renderPipes.batch.break(t), t.add(e);
+  }
+  execute(e) {
+    e.isRenderable && e.render(this._renderer);
+  }
+  destroy() {
+    this._renderer = null;
+  }
+}
+Me.extension = {
+  type: [
+    u.WebGLPipes,
+    u.WebGPUPipes,
+    u.CanvasPipes
+  ],
+  name: "customRender"
+};
+function E(n, e) {
+  const t = n.instructionSet, r = t.instructions;
+  for (let s = 0; s < t.instructionSize; s++) {
+    const a = r[s];
+    e[a.renderPipeId].execute(a);
+  }
+}
+const ht = new v();
+class Se {
+  constructor(e) {
+    this._renderer = e;
+  }
+  addRenderGroup(e, t) {
+    e.isCachedAsTexture ? this._addRenderableCacheAsTexture(e, t) : this._addRenderableDirect(e, t);
+  }
+  execute(e) {
+    e.isRenderable && (e.isCachedAsTexture ? this._executeCacheAsTexture(e) : this._executeDirect(e));
+  }
+  destroy() {
+    this._renderer = null;
+  }
+  _addRenderableDirect(e, t) {
+    this._renderer.renderPipes.batch.break(t), e._batchableRenderGroup && (S.return(e._batchableRenderGroup), e._batchableRenderGroup = null), t.add(e);
+  }
+  _addRenderableCacheAsTexture(e, t) {
+    const r = e._batchableRenderGroup ?? (e._batchableRenderGroup = S.get(me));
+    r.renderable = e.root, r.transform = e.root.relativeGroupTransform, r.texture = e.texture, r.bounds = e._textureBounds, t.add(e), this._renderer.renderPipes.blendMode.pushBlendMode(e, e.root.groupBlendMode, t), this._renderer.renderPipes.batch.addToBatch(r, t), this._renderer.renderPipes.blendMode.popBlendMode(t);
+  }
+  _executeCacheAsTexture(e) {
+    if (e.textureNeedsUpdate) {
+      e.textureNeedsUpdate = !1;
+      const t = ht.identity().translate(
+        -e._textureBounds.x,
+        -e._textureBounds.y
+      );
+      this._renderer.renderTarget.push(e.texture, !0, null, e.texture.frame), this._renderer.globalUniforms.push({
+        worldTransformMatrix: t,
+        worldColor: 4294967295,
+        offset: { x: 0, y: 0 }
+      }), E(e, this._renderer.renderPipes), this._renderer.renderTarget.finishRenderPass(), this._renderer.renderTarget.pop(), this._renderer.globalUniforms.pop();
+    }
+    e._batchableRenderGroup._batcher.updateElement(e._batchableRenderGroup), e._batchableRenderGroup._batcher.geometry.buffers[0].update();
+  }
+  _executeDirect(e) {
+    this._renderer.globalUniforms.push({
+      worldTransformMatrix: e.inverseParentTextureTransform,
+      worldColor: e.worldColorAlpha
+    }), E(e, this._renderer.renderPipes), this._renderer.globalUniforms.pop();
+  }
+}
+Se.extension = {
+  type: [
+    u.WebGLPipes,
+    u.WebGPUPipes,
+    u.CanvasPipes
+  ],
+  name: "renderGroup"
+};
+function D(n, e) {
+  e || (e = 0);
+  for (let t = e; t < n.length && n[t]; t++)
+    n[t] = null;
+}
+const ft = new P(), re = ce | he | fe;
+function we(n, e = !1) {
+  pt(n);
+  const t = n.childrenToUpdate, r = n.updateTick++;
+  for (const s in t) {
+    const a = Number(s), i = t[s], o = i.list, l = i.index;
+    for (let d = 0; d < l; d++) {
+      const c = o[d];
+      c.parentRenderGroup === n && c.relativeRenderGroupDepth === a && Pe(c, r, 0);
+    }
+    D(o, l), i.index = 0;
+  }
+  if (e)
+    for (let s = 0; s < n.renderGroupChildren.length; s++)
+      we(n.renderGroupChildren[s], e);
+}
+function pt(n) {
+  const e = n.root;
+  let t;
+  if (n.renderGroupParent) {
+    const r = n.renderGroupParent;
+    n.worldTransform.appendFrom(
+      e.relativeGroupTransform,
+      r.worldTransform
+    ), n.worldColor = de(
+      e.groupColor,
+      r.worldColor
+    ), t = e.groupAlpha * r.worldAlpha;
+  } else
+    n.worldTransform.copyFrom(e.localTransform), n.worldColor = e.localColor, t = e.localAlpha;
+  t = t < 0 ? 0 : t > 1 ? 1 : t, n.worldAlpha = t, n.worldColorAlpha = n.worldColor + ((t * 255 | 0) << 24);
+}
+function Pe(n, e, t) {
+  if (e === n.updateTick)
+    return;
+  n.updateTick = e, n.didChange = !1;
+  const r = n.localTransform;
+  n.updateLocalTransform();
+  const s = n.parent;
+  if (s && !s.renderGroup ? (t |= n._updateFlags, n.relativeGroupTransform.appendFrom(
+    r,
+    s.relativeGroupTransform
+  ), t & re && se(n, s, t)) : (t = n._updateFlags, n.relativeGroupTransform.copyFrom(r), t & re && se(n, ft, t)), !n.renderGroup) {
+    const a = n.children, i = a.length;
+    for (let d = 0; d < i; d++)
+      Pe(a[d], e, t);
+    const o = n.parentRenderGroup, l = n;
+    l.renderPipeId && !o.structureDidChange && o.updateRenderable(l);
+  }
+}
+function se(n, e, t) {
+  if (t & he) {
+    n.groupColor = de(
+      n.localColor,
+      e.groupColor
+    );
+    let r = n.localAlpha * e.groupAlpha;
+    r = r < 0 ? 0 : r > 1 ? 1 : r, n.groupAlpha = r, n.groupColorAlpha = n.groupColor + ((r * 255 | 0) << 24);
+  }
+  t & fe && (n.groupBlendMode = n.localBlendMode === "inherit" ? e.groupBlendMode : n.localBlendMode), t & ce && (n.globalDisplayStatus = n.localDisplayStatus & e.globalDisplayStatus), n._updateFlags = 0;
+}
+function mt(n, e) {
+  const { list: t, index: r } = n.childrenRenderablesToUpdate;
+  let s = !1;
+  for (let a = 0; a < r; a++) {
+    const i = t[a];
+    if (s = e[i.renderPipeId].validateRenderable(i), s)
+      break;
+  }
+  return n.structureDidChange = s, s;
+}
+const vt = new v();
+class Re {
+  constructor(e) {
+    this._renderer = e;
+  }
+  render({ container: e, transform: t }) {
+    const r = e.parent, s = e.renderGroup.renderGroupParent;
+    e.parent = null, e.renderGroup.renderGroupParent = null;
+    const a = this._renderer, i = vt;
+    t && (i.copyFrom(e.renderGroup.localTransform), e.renderGroup.localTransform.copyFrom(t));
+    const o = a.renderPipes;
+    this._updateCachedRenderGroups(e.renderGroup, null), this._updateRenderGroups(e.renderGroup), a.globalUniforms.start({
+      worldTransformMatrix: t ? e.renderGroup.localTransform : e.renderGroup.worldTransform,
+      worldColor: e.renderGroup.worldColorAlpha
+    }), E(e.renderGroup, o), o.uniformBatch && o.uniformBatch.renderEnd(), t && e.renderGroup.localTransform.copyFrom(i), e.parent = r, e.renderGroup.renderGroupParent = s;
+  }
+  destroy() {
+    this._renderer = null;
+  }
+  _updateCachedRenderGroups(e, t) {
+    if (e._parentCacheAsTextureRenderGroup = t, e.isCachedAsTexture) {
+      if (!e.textureNeedsUpdate)
+        return;
+      t = e;
+    }
+    for (let r = e.renderGroupChildren.length - 1; r >= 0; r--)
+      this._updateCachedRenderGroups(e.renderGroupChildren[r], t);
+    if (e.invalidateMatrices(), e.isCachedAsTexture) {
+      if (e.textureNeedsUpdate) {
+        const r = e.root.getLocalBounds();
+        r.ceil();
+        const s = e.texture;
+        e.texture && b.returnTexture(e.texture, !0);
+        const a = this._renderer, i = e.textureOptions.resolution || a.view.resolution, o = e.textureOptions.antialias ?? a.view.antialias, l = e.textureOptions.scaleMode ?? "linear", d = b.getOptimalTexture(
+          r.width,
+          r.height,
+          i,
+          o
+        );
+        d._source.style = new Ke({ scaleMode: l }), e.texture = d, e._textureBounds || (e._textureBounds = new F()), e._textureBounds.copyFrom(r), s !== e.texture && e.renderGroupParent && (e.renderGroupParent.structureDidChange = !0);
+      }
+    } else e.texture && (b.returnTexture(e.texture, !0), e.texture = null);
+  }
+  _updateRenderGroups(e) {
+    const t = this._renderer, r = t.renderPipes;
+    if (e.runOnRender(t), e.instructionSet.renderPipes = r, e.structureDidChange ? D(e.childrenRenderablesToUpdate.list, 0) : mt(e, r), we(e), e.structureDidChange ? (e.structureDidChange = !1, this._buildInstructions(e, t)) : this._updateRenderables(e), e.childrenRenderablesToUpdate.index = 0, t.renderPipes.batch.upload(e.instructionSet), !(e.isCachedAsTexture && !e.textureNeedsUpdate))
+      for (let s = 0; s < e.renderGroupChildren.length; s++)
+        this._updateRenderGroups(e.renderGroupChildren[s]);
+  }
+  _updateRenderables(e) {
+    const { list: t, index: r } = e.childrenRenderablesToUpdate;
+    for (let s = 0; s < r; s++) {
+      const a = t[s];
+      a.didViewUpdate && e.updateRenderable(a);
+    }
+    D(t, r);
+  }
+  _buildInstructions(e, t) {
+    const r = e.root, s = e.instructionSet;
+    s.reset();
+    const a = t.renderPipes ? t : t.batch.renderer, i = a.renderPipes;
+    i.batch.buildStart(s), i.blendMode.buildStart(), i.colorMask.buildStart(), r.sortableChildren && r.sortChildren(), r.collectRenderablesWithEffects(s, a, null), i.batch.buildEnd(s), i.blendMode.buildEnd(s);
+  }
+}
+Re.extension = {
+  type: [
+    u.WebGLSystem,
+    u.WebGPUSystem,
+    u.CanvasSystem
+  ],
+  name: "renderGroup"
+};
+class Be {
+  constructor(e) {
+    this._renderer = e;
+  }
+  addRenderable(e, t) {
+    const r = this._getGpuSprite(e);
+    e.didViewUpdate && this._updateBatchableSprite(e, r), this._renderer.renderPipes.batch.addToBatch(r, t);
+  }
+  updateRenderable(e) {
+    const t = this._getGpuSprite(e);
+    e.didViewUpdate && this._updateBatchableSprite(e, t), t._batcher.updateElement(t);
+  }
+  validateRenderable(e) {
+    const t = this._getGpuSprite(e);
+    return !t._batcher.checkAndUpdateTexture(
+      t,
+      e._texture
+    );
+  }
+  _updateBatchableSprite(e, t) {
+    t.bounds = e.visualBounds, t.texture = e._texture;
+  }
+  _getGpuSprite(e) {
+    return e._gpuData[this._renderer.uid] || this._initGPUSprite(e);
+  }
+  _initGPUSprite(e) {
+    const t = new me();
+    return t.renderable = e, t.transform = e.groupTransform, t.texture = e._texture, t.bounds = e.visualBounds, t.roundPixels = this._renderer._roundPixels | e._roundPixels, e._gpuData[this._renderer.uid] = t, t;
+  }
+  destroy() {
+    this._renderer = null;
+  }
+}
+Be.extension = {
+  type: [
+    u.WebGLPipes,
+    u.WebGPUPipes,
+    u.CanvasPipes
+  ],
+  name: "sprite"
+};
+const V = class Ue {
+  constructor() {
+    this.clearBeforeRender = !0, this._backgroundColor = new A(0), this.color = this._backgroundColor, this.alpha = 1;
+  }
+  /**
+   * initiates the background system
+   * @param options - the options for the background colors
+   */
+  init(e) {
+    e = { ...Ue.defaultOptions, ...e }, this.clearBeforeRender = e.clearBeforeRender, this.color = e.background || e.backgroundColor || this._backgroundColor, this.alpha = e.backgroundAlpha, this._backgroundColor.setAlpha(e.backgroundAlpha);
+  }
+  /** The background color to fill if not transparent */
+  get color() {
+    return this._backgroundColor;
+  }
+  set color(e) {
+    A.shared.setValue(e).alpha < 1 && this._backgroundColor.alpha === 1 && H(
+      "Cannot set a transparent background on an opaque canvas. To enable transparency, set backgroundAlpha < 1 when initializing your Application."
+    ), this._backgroundColor.setValue(e);
+  }
+  /** The background color alpha. Setting this to 0 will make the canvas transparent. */
+  get alpha() {
+    return this._backgroundColor.alpha;
+  }
+  set alpha(e) {
+    this._backgroundColor.setAlpha(e);
+  }
+  /** The background color as an [R, G, B, A] array. */
+  get colorRgba() {
+    return this._backgroundColor.toArray();
+  }
+  /**
+   * destroys the background system
+   * @internal
+   */
+  destroy() {
+  }
+};
+V.extension = {
+  type: [
+    u.WebGLSystem,
+    u.WebGPUSystem,
+    u.CanvasSystem
+  ],
+  name: "background",
+  priority: 0
+};
+V.defaultOptions = {
+  /**
+   * {@link WebGLOptions.backgroundAlpha}
+   * @default 1
+   */
+  backgroundAlpha: 1,
+  /**
+   * {@link WebGLOptions.backgroundColor}
+   * @default 0x000000
+   */
+  backgroundColor: 0,
+  /**
+   * {@link WebGLOptions.clearBeforeRender}
+   * @default true
+   */
+  clearBeforeRender: !0
+};
+let gt = V;
+const y = {};
+O.handle(u.BlendMode, (n) => {
+  if (!n.name)
+    throw new Error("BlendMode extension must have a name property");
+  y[n.name] = n.ref;
+}, (n) => {
+  delete y[n.name];
+});
+class Ae {
+  constructor(e) {
+    this._blendModeStack = [], this._isAdvanced = !1, this._filterHash = /* @__PURE__ */ Object.create(null), this._renderer = e, this._renderer.runners.prerender.add(this);
+  }
+  prerender() {
+    this._activeBlendMode = "normal", this._isAdvanced = !1;
+  }
+  /**
+   * Push a blend mode onto the internal stack and apply it to the instruction set if needed.
+   * @param renderable - The renderable or {@link RenderGroup} associated with the change.
+   * @param blendMode - The blend mode to activate.
+   * @param instructionSet - The instruction set being built.
+   */
+  pushBlendMode(e, t, r) {
+    this._blendModeStack.push(t), this.setBlendMode(e, t, r);
+  }
+  /**
+   * Pop the last blend mode from the stack and apply the new top-of-stack mode.
+   * @param instructionSet - The instruction set being built.
+   */
+  popBlendMode(e) {
+    this._blendModeStack.pop();
+    const t = this._blendModeStack[this._activeBlendMode.length - 1] ?? "normal";
+    this.setBlendMode(null, t, e);
+  }
+  /**
+   * Ensure a blend mode switch is added to the instruction set when the mode changes.
+   * If an advanced blend mode is active, subsequent renderables will be collected so they can be
+   * rendered within a single filter pass.
+   * @param renderable - The renderable or {@link RenderGroup} to associate with the change, or null when unwinding.
+   * @param blendMode - The target blend mode.
+   * @param instructionSet - The instruction set being built.
+   */
+  setBlendMode(e, t, r) {
+    var a;
+    const s = e instanceof Q;
+    if (this._activeBlendMode === t) {
+      this._isAdvanced && e && !s && ((a = this._renderableList) == null || a.push(e));
+      return;
+    }
+    this._isAdvanced && this._endAdvancedBlendMode(r), this._activeBlendMode = t, e && (this._isAdvanced = !!y[t], this._isAdvanced && this._beginAdvancedBlendMode(e, r));
+  }
+  _beginAdvancedBlendMode(e, t) {
+    this._renderer.renderPipes.batch.break(t);
+    const r = this._activeBlendMode;
+    if (!y[r]) {
+      H(`Unable to assign BlendMode: '${r}'. You may want to include: import 'pixi.js/advanced-blend-modes'`);
+      return;
+    }
+    const s = this._ensureFilterEffect(r), a = e instanceof Q, i = {
+      renderPipeId: "filter",
+      action: "pushFilter",
+      filterEffect: s,
+      renderables: a ? null : [e],
+      container: a ? e.root : null,
+      canBundle: !1
+    };
+    this._renderableList = i.renderables, t.add(i);
+  }
+  _ensureFilterEffect(e) {
+    let t = this._filterHash[e];
+    return t || (t = this._filterHash[e] = new ue(), t.filters = [new y[e]()]), t;
+  }
+  _endAdvancedBlendMode(e) {
+    this._isAdvanced = !1, this._renderableList = null, this._renderer.renderPipes.batch.break(e), e.add({
+      renderPipeId: "filter",
+      action: "popFilter",
+      canBundle: !1
+    });
+  }
+  /**
+   * called when the instruction build process is starting this will reset internally to the default blend mode
+   * @internal
+   */
+  buildStart() {
+    this._isAdvanced = !1;
+  }
+  /**
+   * called when the instruction build process is finished, ensuring that if there is an advanced blend mode
+   * active, we add the final render instructions added to the instruction set
+   * @param instructionSet - The instruction set we are adding to
+   * @internal
+   */
+  buildEnd(e) {
+    this._isAdvanced && this._endAdvancedBlendMode(e);
+  }
+  /** @internal */
+  destroy() {
+    this._renderer = null, this._renderableList = null;
+    for (const e in this._filterHash)
+      this._filterHash[e].destroy();
+    this._filterHash = null;
+  }
+}
+Ae.extension = {
+  type: [
+    u.WebGLPipes,
+    u.WebGPUPipes,
+    u.CanvasPipes
+  ],
+  name: "blendMode"
+};
+const R = {
+  png: "image/png",
+  jpg: "image/jpeg",
+  webp: "image/webp"
+}, N = class Ie {
+  /** @param renderer - The renderer this System works for. */
+  constructor(e) {
+    this._renderer = e;
+  }
+  _normalizeOptions(e, t = {}) {
+    return e instanceof P || e instanceof m ? {
+      target: e,
+      ...t
+    } : {
+      ...t,
+      ...e
+    };
+  }
+  /**
+   * Creates an IImage 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 IImage
+   * @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
+   * @see {@link ImageLike} For the image interface
+   * @category rendering
+   */
+  async image(e) {
+    const t = z.get().createImage();
+    return t.src = await this.base64(e), t;
+  }
+  /**
+   * 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(e) {
+    e = this._normalizeOptions(
+      e,
+      Ie.defaultImageOptions
+    );
+    const { format: t, quality: r } = e, s = this.canvas(e);
+    if (s.toBlob !== void 0)
+      return new Promise((a, i) => {
+        s.toBlob((o) => {
+          if (!o) {
+            i(new Error("ICanvas.toBlob failed!"));
+            return;
+          }
+          const l = new FileReader();
+          l.onload = () => a(l.result), l.onerror = i, l.readAsDataURL(o);
+        }, R[t], r);
+      });
+    if (s.toDataURL !== void 0)
+      return s.toDataURL(R[t], r);
+    if (s.convertToBlob !== void 0) {
+      const a = await s.convertToBlob({ type: R[t], quality: r });
+      return new Promise((i, o) => {
+        const l = new FileReader();
+        l.onload = () => i(l.result), l.onerror = o, l.readAsDataURL(a);
+      });
+    }
+    throw new Error("Extract.base64() requires ICanvas.toDataURL, ICanvas.toBlob, or ICanvas.convertToBlob to be implemented");
+  }
+  /**
+   * 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
+   * @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(e) {
+    e = this._normalizeOptions(e);
+    const t = e.target, r = this._renderer;
+    if (t instanceof m)
+      return r.texture.generateCanvas(t);
+    const s = r.textureGenerator.generateTexture(e), a = r.texture.generateCanvas(s);
+    return s.destroy(!0), a;
+  }
+  /**
+   * 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 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(e) {
+    e = this._normalizeOptions(e);
+    const t = e.target, r = this._renderer, s = t instanceof m ? t : r.textureGenerator.generateTexture(e), a = r.texture.getPixels(s);
+    return t instanceof P && s.destroy(!0), a;
+  }
+  /**
+   * 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 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(e) {
+    return e = this._normalizeOptions(e), e.target instanceof m ? e.target : this._renderer.textureGenerator.generateTexture(e);
+  }
+  /**
+   * 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(e) {
+    e = this._normalizeOptions(e);
+    const t = this.canvas(e), r = document.createElement("a");
+    r.download = e.filename ?? "image.png", r.href = t.toDataURL("image/png"), document.body.appendChild(r), r.click(), document.body.removeChild(r);
+  }
+  /**
+   * 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(e) {
+    const t = e.width ?? 200;
+    e = this._normalizeOptions(e);
+    const r = this.canvas(e), s = r.toDataURL();
+    console.log(`[Pixi Texture] ${r.width}px ${r.height}px`);
+    const a = [
+      "font-size: 1px;",
+      `padding: ${t}px 300px;`,
+      `background: url(${s}) no-repeat;`,
+      "background-size: contain;"
+    ].join(" ");
+    console.log("%c ", a);
+  }
+  destroy() {
+    this._renderer = null;
+  }
+};
+N.extension = {
+  type: [
+    u.WebGLSystem,
+    u.WebGPUSystem
+  ],
+  name: "extract"
+};
+N.defaultImageOptions = {
+  format: "png",
+  quality: 1
+};
+let xt = N;
+class j extends m {
+  static create(e) {
+    return new j({
+      source: new T(e)
+    });
+  }
+  /**
+   * Resizes the render texture.
+   * @param width - The new width of the render texture.
+   * @param height - The new height of the render texture.
+   * @param resolution - The new resolution of the render texture.
+   * @returns This texture.
+   */
+  resize(e, t, r) {
+    return this.source.resize(e, t, r), this;
+  }
+}
+const _t = new w(), bt = new F(), Tt = [0, 0, 0, 0];
+class Ge {
+  constructor(e) {
+    this._renderer = e;
+  }
+  /**
+   * 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(e) {
+    var d;
+    e instanceof P && (e = {
+      target: e,
+      frame: void 0,
+      textureSourceOptions: {},
+      resolution: void 0
+    });
+    const t = e.resolution || this._renderer.resolution, r = e.antialias || this._renderer.view.antialias, s = e.target;
+    let a = e.clearColor;
+    a ? a = Array.isArray(a) && a.length === 4 ? a : A.shared.setValue(a).toArray() : a = Tt;
+    const i = ((d = e.frame) == null ? void 0 : d.copyTo(_t)) || Ye(s, bt).rectangle;
+    i.width = Math.max(i.width, 1 / t) | 0, i.height = Math.max(i.height, 1 / t) | 0;
+    const o = j.create({
+      ...e.textureSourceOptions,
+      width: i.width,
+      height: i.height,
+      resolution: t,
+      antialias: r
+    }), l = v.shared.translate(-i.x, -i.y);
+    return this._renderer.render({
+      container: s,
+      transform: l,
+      target: o,
+      clearColor: a
+    }), o.source.updateMipmaps(), o;
+  }
+  destroy() {
+    this._renderer = null;
+  }
+}
+Ge.extension = {
+  type: [
+    u.WebGLSystem,
+    u.WebGPUSystem
+  ],
+  name: "textureGenerator"
+};
+class Ee {
+  constructor(e) {
+    this._stackIndex = 0, this._globalUniformDataStack = [], this._uniformsPool = [], this._activeUniforms = [], this._bindGroupPool = [], this._activeBindGroups = [], this._renderer = e;
+  }
+  reset() {
+    this._stackIndex = 0;
+    for (let e = 0; e < this._activeUniforms.length; e++)
+      this._uniformsPool.push(this._activeUniforms[e]);
+    for (let e = 0; e < this._activeBindGroups.length; e++)
+      this._bindGroupPool.push(this._activeBindGroups[e]);
+    this._activeUniforms.length = 0, this._activeBindGroups.length = 0;
+  }
+  start(e) {
+    this.reset(), this.push(e);
+  }
+  bind({
+    size: e,
+    projectionMatrix: t,
+    worldTransformMatrix: r,
+    worldColor: s,
+    offset: a
+  }) {
+    const i = this._renderer.renderTarget.renderTarget, o = this._stackIndex ? this._globalUniformDataStack[this._stackIndex - 1] : {
+      worldTransformMatrix: new v(),
+      worldColor: 4294967295,
+      offset: new Je()
+    }, l = {
+      projectionMatrix: t || this._renderer.renderTarget.projectionMatrix,
+      resolution: e || i.size,
+      worldTransformMatrix: r || o.worldTransformMatrix,
+      worldColor: s || o.worldColor,
+      offset: a || o.offset,
+      bindGroup: null
+    }, d = this._uniformsPool.pop() || this._createUniforms();
+    this._activeUniforms.push(d);
+    const c = d.uniforms;
+    c.uProjectionMatrix = l.projectionMatrix, c.uResolution = l.resolution, c.uWorldTransformMatrix.copyFrom(l.worldTransformMatrix), c.uWorldTransformMatrix.tx -= l.offset.x, c.uWorldTransformMatrix.ty -= l.offset.y, tt(
+      l.worldColor,
+      c.uWorldColorAlpha,
+      0
+    ), d.update();
+    let h;
+    this._renderer.renderPipes.uniformBatch ? h = this._renderer.renderPipes.uniformBatch.getUniformBindGroup(d, !1) : (h = this._bindGroupPool.pop() || new Xe(), this._activeBindGroups.push(h), h.setResource(d, 0)), l.bindGroup = h, this._currentGlobalUniformData = l;
+  }
+  push(e) {
+    this.bind(e), this._globalUniformDataStack[this._stackIndex++] = this._currentGlobalUniformData;
+  }
+  pop() {
+    this._currentGlobalUniformData = this._globalUniformDataStack[--this._stackIndex - 1], this._renderer.type === L.WEBGL && this._currentGlobalUniformData.bindGroup.resources[0].update();
+  }
+  get bindGroup() {
+    return this._currentGlobalUniformData.bindGroup;
+  }
+  get globalUniformData() {
+    return this._currentGlobalUniformData;
+  }
+  get uniformGroup() {
+    return this._currentGlobalUniformData.bindGroup.resources[0];
+  }
+  _createUniforms() {
+    return new oe({
+      uProjectionMatrix: { value: new v(), type: "mat3x3<f32>" },
+      uWorldTransformMatrix: { value: new v(), type: "mat3x3<f32>" },
+      // TODO - someone smart - set this to be a unorm8x4 rather than a vec4<f32>
+      uWorldColorAlpha: { value: new Float32Array(4), type: "vec4<f32>" },
+      uResolution: { value: [0, 0], type: "vec2<f32>" }
+    }, {
+      isStatic: !0
+    });
+  }
+  destroy() {
+    this._renderer = null, this._globalUniformDataStack.length = 0, this._uniformsPool.length = 0, this._activeUniforms.length = 0, this._bindGroupPool.length = 0, this._activeBindGroups.length = 0, this._currentGlobalUniformData = null;
+  }
+}
+Ee.extension = {
+  type: [
+    u.WebGLSystem,
+    u.WebGPUSystem,
+    u.CanvasSystem
+  ],
+  name: "globalUniforms"
+};
+let yt = 1;
+class De {
+  constructor() {
+    this._tasks = [], this._offset = 0;
+  }
+  /** Initializes the scheduler system and starts the ticker. */
+  init() {
+    Z.system.add(this._update, this);
+  }
+  /**
+   * Schedules a repeating task.
+   * @param func - The function to execute.
+   * @param duration - The interval duration in milliseconds.
+   * @param useOffset - this will spread out tasks so that they do not all run at the same time
+   * @returns The unique identifier for the scheduled task.
+   */
+  repeat(e, t, r = !0) {
+    const s = yt++;
+    let a = 0;
+    return r && (this._offset += 1e3, a = this._offset), this._tasks.push({
+      func: e,
+      duration: t,
+      start: performance.now(),
+      offset: a,
+      last: performance.now(),
+      repeat: !0,
+      id: s
+    }), s;
+  }
+  /**
+   * Cancels a scheduled task.
+   * @param id - The unique identifier of the task to cancel.
+   */
+  cancel(e) {
+    for (let t = 0; t < this._tasks.length; t++)
+      if (this._tasks[t].id === e) {
+        this._tasks.splice(t, 1);
+        return;
+      }
+  }
+  /**
+   * Updates and executes the scheduled tasks.
+   * @private
+   */
+  _update() {
+    const e = performance.now();
+    for (let t = 0; t < this._tasks.length; t++) {
+      const r = this._tasks[t];
+      if (e - r.offset - r.last >= r.duration) {
+        const s = e - r.start;
+        r.func(s), r.last = e;
+      }
+    }
+  }
+  /**
+   * Destroys the scheduler system and removes all tasks.
+   * @internal
+   */
+  destroy() {
+    Z.system.remove(this._update, this), this._tasks.length = 0;
+  }
+}
+De.extension = {
+  type: [
+    u.WebGLSystem,
+    u.WebGPUSystem,
+    u.CanvasSystem
+  ],
+  name: "scheduler",
+  priority: 0
+};
+let ae = !1;
+function kt(n) {
+  if (!ae) {
+    if (z.get().getNavigator().userAgent.toLowerCase().indexOf("chrome") > -1) {
+      const e = [
+        `%c  %c  %c  %c  %c PixiJS %c v${ee} (${n}) http://www.pixijs.com/
+
+`,
+        "background: #E72264; padding:5px 0;",
+        "background: #6CA2EA; padding:5px 0;",
+        "background: #B5D33D; padding:5px 0;",
+        "background: #FED23F; padding:5px 0;",
+        "color: #FFFFFF; background: #E72264; padding:5px 0;",
+        "color: #E72264; background: #FFFFFF; padding:5px 0;"
+      ];
+      globalThis.console.log(...e);
+    } else globalThis.console && globalThis.console.log(`PixiJS ${ee} - ${n} - http://www.pixijs.com/`);
+    ae = !0;
+  }
+}
+class $ {
+  constructor(e) {
+    this._renderer = e;
+  }
+  /**
+   * It all starts here! This initiates every system, passing in the options for any system by name.
+   * @param options - the config for the renderer and all its systems
+   */
+  init(e) {
+    if (e.hello) {
+      let t = this._renderer.name;
+      this._renderer.type === L.WEBGL && (t += ` ${this._renderer.context.webGLVersion}`), kt(t);
+    }
+  }
+}
+$.extension = {
+  type: [
+    u.WebGLSystem,
+    u.WebGPUSystem,
+    u.CanvasSystem
+  ],
+  name: "hello",
+  priority: -2
+};
+$.defaultOptions = {
+  /** {@link WebGLOptions.hello} */
+  hello: !1
+};
+function Ct(n) {
+  let e = !1;
+  for (const r in n)
+    if (n[r] == null) {
+      e = !0;
+      break;
+    }
+  if (!e)
+    return n;
+  const t = /* @__PURE__ */ Object.create(null);
+  for (const r in n) {
+    const s = n[r];
+    s && (t[r] = s);
+  }
+  return t;
+}
+function Mt(n) {
+  let e = 0;
+  for (let t = 0; t < n.length; t++)
+    n[t] == null ? e++ : n[t - e] = n[t];
+  return n.length -= e, n;
+}
+let St = 0;
+const q = class Oe {
+  /**
+   * Creates a new RenderableGCSystem instance.
+   * @param renderer - The renderer this garbage collection system works for
+   */
+  constructor(e) {
+    this._managedRenderables = [], this._managedHashes = [], this._managedArrays = [], this._renderer = e;
+  }
+  /**
+   * Initializes the garbage collection system with the provided options.
+   * @param options - Configuration options for the renderer
+   */
+  init(e) {
+    e = { ...Oe.defaultOptions, ...e }, this.maxUnusedTime = e.renderableGCMaxUnusedTime, this._frequency = e.renderableGCFrequency, this.enabled = e.renderableGCActive;
+  }
+  /**
+   * 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(e) {
+    this.enabled !== e && (e ? (this._handler = this._renderer.scheduler.repeat(
+      () => this.run(),
+      this._frequency,
+      !1
+    ), this._hashHandler = this._renderer.scheduler.repeat(
+      () => {
+        for (const t of this._managedHashes)
+          t.context[t.hash] = Ct(t.context[t.hash]);
+      },
+      this._frequency
+    ), this._arrayHandler = this._renderer.scheduler.repeat(
+      () => {
+        for (const t of this._managedArrays)
+          Mt(t.context[t.hash]);
+      },
+      this._frequency
+    )) : (this._renderer.scheduler.cancel(this._handler), this._renderer.scheduler.cancel(this._hashHandler), this._renderer.scheduler.cancel(this._arrayHandler)));
+  }
+  /**
+   * Adds a hash table to be managed by the garbage collector.
+   * @param context - The object containing the hash table
+   * @param hash - The property name of the hash table
+   */
+  addManagedHash(e, t) {
+    this._managedHashes.push({ context: e, hash: t });
+  }
+  /**
+   * Adds an array to be managed by the garbage collector.
+   * @param context - The object containing the array
+   * @param hash - The property name of the array
+   */
+  addManagedArray(e, t) {
+    this._managedArrays.push({ context: e, hash: t });
+  }
+  /**
+   * Updates the GC timestamp and tracking before rendering.
+   * @param options - The render options
+   * @param options.container - The container to render
+   */
+  prerender({
+    container: e
+  }) {
+    this._now = performance.now(), e.renderGroup.gcTick = St++, this._updateInstructionGCTick(e.renderGroup, e.renderGroup.gcTick);
+  }
+  /**
+   * Starts tracking a renderable for garbage collection.
+   * @param renderable - The renderable to track
+   */
+  addRenderable(e) {
+    this.enabled && (e._lastUsed === -1 && (this._managedRenderables.push(e), e.once("destroyed", this._removeRenderable, this)), e._lastUsed = this._now);
+  }
+  /**
+   * Performs garbage collection by cleaning up unused renderables.
+   * Removes renderables that haven't been used for longer than maxUnusedTime.
+   */
+  run() {
+    var a;
+    const e = this._now, t = this._managedRenderables, r = this._renderer.renderPipes;
+    let s = 0;
+    for (let i = 0; i < t.length; i++) {
+      const o = t[i];
+      if (o === null) {
+        s++;
+        continue;
+      }
+      const l = o.renderGroup ?? o.parentRenderGroup, d = ((a = l == null ? void 0 : l.instructionSet) == null ? void 0 : a.gcTick) ?? -1;
+      if (((l == null ? void 0 : l.gcTick) ?? 0) === d && (o._lastUsed = e), e - o._lastUsed > this.maxUnusedTime) {
+        if (!o.destroyed) {
+          const c = r;
+          l && (l.structureDidChange = !0), c[o.renderPipeId].destroyRenderable(o);
+        }
+        o._lastUsed = -1, s++, o.off("destroyed", this._removeRenderable, this);
+      } else
+        t[i - s] = o;
+    }
+    t.length -= s;
+  }
+  /** Cleans up the garbage collection system. Disables GC and removes all tracked resources. */
+  destroy() {
+    this.enabled = !1, this._renderer = null, this._managedRenderables.length = 0, this._managedHashes.length = 0, this._managedArrays.length = 0;
+  }
+  /**
+   * Removes a renderable from being tracked when it's destroyed.
+   * @param renderable - The renderable to stop tracking
+   */
+  _removeRenderable(e) {
+    const t = this._managedRenderables.indexOf(e);
+    t >= 0 && (e.off("destroyed", this._removeRenderable, this), this._managedRenderables[t] = null);
+  }
+  /**
+   * 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(e, t) {
+    e.instructionSet.gcTick = t;
+    for (const r of e.renderGroupChildren)
+      this._updateInstructionGCTick(r, t);
+  }
+};
+q.extension = {
+  type: [
+    u.WebGLSystem,
+    u.WebGPUSystem
+  ],
+  name: "renderableGC",
+  priority: 0
+};
+q.defaultOptions = {
+  /** Enable/disable the garbage collector */
+  renderableGCActive: !0,
+  /** Time in ms before an unused resource is collected (default 1 minute) */
+  renderableGCMaxUnusedTime: 6e4,
+  /** How often to run garbage collection in ms (default 30 seconds) */
+  renderableGCFrequency: 3e4
+};
+let wt = q;
+const K = class Fe {
+  /** @param renderer - The renderer this System works for. */
+  constructor(e) {
+    this._renderer = e, this.count = 0, this.checkCount = 0;
+  }
+  init(e) {
+    e = { ...Fe.defaultOptions, ...e }, this.checkCountMax = e.textureGCCheckCountMax, this.maxIdle = e.textureGCAMaxIdle ?? e.textureGCMaxIdle, this.active = e.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() {
+    this._renderer.renderingToScreen && (this.count++, this.active && (this.checkCount++, this.checkCount > this.checkCountMax && (this.checkCount = 0, this.run())));
+  }
+  /**
+   * 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.
+   */
+  run() {
+    const e = this._renderer.texture.managedTextures;
+    for (let t = 0; t < e.length; t++) {
+      const r = e[t];
+      r.autoGarbageCollect && r.resource && r._touched > -1 && this.count - r._touched > this.maxIdle && (r._touched = -1, r.unload());
+    }
+  }
+  destroy() {
+    this._renderer = null;
+  }
+};
+K.extension = {
+  type: [
+    u.WebGLSystem,
+    u.WebGPUSystem
+  ],
+  name: "textureGC"
+};
+K.defaultOptions = {
+  /**
+   * If set to true, this will enable the garbage collector on the GPU.
+   * @default true
+   */
+  textureGCActive: !0,
+  /**
+   * @deprecated since 8.3.0
+   * @see {@link TextureGCSystemOptions.textureGCMaxIdle}
+   */
+  textureGCAMaxIdle: null,
+  /**
+   * The maximum idle frames before a texture is destroyed by garbage collection.
+   * @default 60 * 60
+   */
+  textureGCMaxIdle: 60 * 60,
+  /**
+   * Frames between two garbage collections.
+   * @default 600
+   */
+  textureGCCheckCountMax: 600
+};
+let Pt = K;
+const Y = class Le {
+  /**
+   * 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.
+   * @type {boolean}
+   */
+  get autoDensity() {
+    return this.texture.source.autoDensity;
+  }
+  set autoDensity(e) {
+    this.texture.source.autoDensity = e;
+  }
+  /** The resolution / device pixel ratio of the renderer. */
+  get resolution() {
+    return this.texture.source._resolution;
+  }
+  set resolution(e) {
+    this.texture.source.resize(
+      this.texture.source.width,
+      this.texture.source.height,
+      e
+    );
+  }
+  /**
+   * initiates the view system
+   * @param options - the options for the view
+   */
+  init(e) {
+    e = {
+      ...Le.defaultOptions,
+      ...e
+    }, e.view && (Qe(Ze, "ViewSystem.view has been renamed to ViewSystem.canvas"), e.canvas = e.view), this.screen = new w(0, 0, e.width, e.height), this.canvas = e.canvas || z.get().createCanvas(), this.antialias = !!e.antialias, this.texture = ye(this.canvas, e), this.renderTarget = new G({
+      colorTextures: [this.texture],
+      depth: !!e.depth,
+      isRoot: !0
+    }), this.texture.source.transparent = e.backgroundAlpha < 1, this.resolution = e.resolution;
+  }
+  /**
+   * Resizes the screen and canvas to the specified dimensions.
+   * @param desiredScreenWidth - The new width of the screen.
+   * @param desiredScreenHeight - The new height of the screen.
+   * @param resolution
+   */
+  resize(e, t, r) {
+    this.texture.source.resize(e, t, r), this.screen.width = this.texture.frame.width, this.screen.height = this.texture.frame.height;
+  }
+  /**
+   * Destroys this System and optionally removes the canvas from the dom.
+   * @param {options | false} options - The options for destroying the view, or "false".
+   * @example
+   * viewSystem.destroy();
+   * viewSystem.destroy(true);
+   * viewSystem.destroy({ removeView: true });
+   */
+  destroy(e = !1) {
+    (typeof e == "boolean" ? e : !!(e != null && e.removeView)) && this.canvas.parentNode && this.canvas.parentNode.removeChild(this.canvas), this.texture.destroy();
+  }
+};
+Y.extension = {
+  type: [
+    u.WebGLSystem,
+    u.WebGPUSystem,
+    u.CanvasSystem
+  ],
+  name: "view",
+  priority: 0
+};
+Y.defaultOptions = {
+  /**
+   * {@link WebGLOptions.width}
+   * @default 800
+   */
+  width: 800,
+  /**
+   * {@link WebGLOptions.height}
+   * @default 600
+   */
+  height: 600,
+  /**
+   * {@link WebGLOptions.autoDensity}
+   * @default false
+   */
+  autoDensity: !1,
+  /**
+   * {@link WebGLOptions.antialias}
+   * @default false
+   */
+  antialias: !1
+};
+let Rt = Y;
+const zt = [
+  gt,
+  Ee,
+  $,
+  Rt,
+  Re,
+  Pt,
+  Ge,
+  xt,
+  et,
+  wt,
+  De
+], Wt = [
+  Ae,
+  xe,
+  Be,
+  Se,
+  _e,
+  Te,
+  be,
+  Me
+];
+export {
+  Ht as B,
+  _ as G,
+  Lt as R,
+  zt as S,
+  Dt as U,
+  Wt as a,
+  ut as b,
+  Ot as c,
+  C as d,
+  Et as e,
+  Gt as f,
+  It as t,
+  Ft as u
+};

src/backend/gradio_polygonannotator/templates/component/WebGLRenderer-DDL2mbll.js

@@ -0,0 +1,2643 @@
+import { E as d, B, w as m, D as S, K, u as Be, q as U, s as b, a5 as Ae, j as $, a6 as Ne, S as p, O as H, i as A, h as N, k as F, M as z, a7 as Y, a8 as ye, a9 as Ce, aa as q, ab as Ie, A as De, R as Ge, e as T } from "./Index-Ct_1BCRd.js";
+import { S as O, b as Z } from "./colorToUniform-zJcCVLeu.js";
+import { e as Ue, G as Fe, c as Oe, b as Pe, U as Me, R as Le, B as Q, d as y, f as He, S as we, a as Ve } from "./SharedSystems-DVDwWST4.js";
+class J {
+  constructor() {
+    this._tempState = O.for2d(), this._didUploadHash = {};
+  }
+  init(e) {
+    e.renderer.runners.contextChange.add(this);
+  }
+  contextChange() {
+    this._didUploadHash = {};
+  }
+  start(e, r, s) {
+    const n = e.renderer, i = this._didUploadHash[s.uid];
+    n.shader.bind(s, i), i || (this._didUploadHash[s.uid] = !0), n.shader.updateUniformGroup(n.globalUniforms.uniformGroup), n.geometry.bind(r, s.glProgram);
+  }
+  execute(e, r) {
+    const s = e.renderer;
+    this._tempState.blendMode = r.blendMode, s.state.set(this._tempState);
+    const n = r.textures.textures;
+    for (let i = 0; i < r.textures.count; i++)
+      s.texture.bind(n[i], i);
+    s.geometry.draw(r.topology, r.size, r.start);
+  }
+}
+J.extension = {
+  type: [
+    d.WebGLPipesAdaptor
+  ],
+  name: "batch"
+};
+var x = /* @__PURE__ */ ((t) => (t[t.ELEMENT_ARRAY_BUFFER = 34963] = "ELEMENT_ARRAY_BUFFER", t[t.ARRAY_BUFFER = 34962] = "ARRAY_BUFFER", t[t.UNIFORM_BUFFER = 35345] = "UNIFORM_BUFFER", t))(x || {});
+class ke {
+  constructor(e, r) {
+    this._lastBindBaseLocation = -1, this._lastBindCallId = -1, this.buffer = e || null, this.updateID = -1, this.byteLength = -1, this.type = r;
+  }
+}
+class ee {
+  /**
+   * @param {Renderer} renderer - The renderer this System works for.
+   */
+  constructor(e) {
+    this._gpuBuffers = /* @__PURE__ */ Object.create(null), this._boundBufferBases = /* @__PURE__ */ Object.create(null), this._minBaseLocation = 0, this._nextBindBaseIndex = this._minBaseLocation, this._bindCallId = 0, this._renderer = e, this._renderer.renderableGC.addManagedHash(this, "_gpuBuffers");
+  }
+  /** @ignore */
+  destroy() {
+    this._renderer = null, this._gl = null, this._gpuBuffers = null, this._boundBufferBases = null;
+  }
+  /** Sets up the renderer context and necessary buffers. */
+  contextChange() {
+    this._gl = this._renderer.gl, this._gpuBuffers = /* @__PURE__ */ Object.create(null), this._maxBindings = this._renderer.limits.maxUniformBindings;
+  }
+  getGlBuffer(e) {
+    return this._gpuBuffers[e.uid] || this.createGLBuffer(e);
+  }
+  /**
+   * This binds specified buffer. On first run, it will create the webGL buffers for the context too
+   * @param buffer - the buffer to bind to the renderer
+   */
+  bind(e) {
+    const { _gl: r } = this, s = this.getGlBuffer(e);
+    r.bindBuffer(s.type, s.buffer);
+  }
+  /**
+   * Binds an uniform buffer to at the given index.
+   *
+   * A cache is used so a buffer will not be bound again if already bound.
+   * @param glBuffer - the buffer to bind
+   * @param index - the base index to bind it to.
+   */
+  bindBufferBase(e, r) {
+    const { _gl: s } = this;
+    this._boundBufferBases[r] !== e && (this._boundBufferBases[r] = e, e._lastBindBaseLocation = r, s.bindBufferBase(s.UNIFORM_BUFFER, r, e.buffer));
+  }
+  nextBindBase(e) {
+    this._bindCallId++, this._minBaseLocation = 0, e && (this._boundBufferBases[0] = null, this._minBaseLocation = 1, this._nextBindBaseIndex < 1 && (this._nextBindBaseIndex = 1));
+  }
+  freeLocationForBufferBase(e) {
+    let r = this.getLastBindBaseLocation(e);
+    if (r >= this._minBaseLocation)
+      return e._lastBindCallId = this._bindCallId, r;
+    let s = 0, n = this._nextBindBaseIndex;
+    for (; s < 2; ) {
+      n >= this._maxBindings && (n = this._minBaseLocation, s++);
+      const i = this._boundBufferBases[n];
+      if (i && i._lastBindCallId === this._bindCallId) {
+        n++;
+        continue;
+      }
+      break;
+    }
+    return r = n, this._nextBindBaseIndex = n + 1, s >= 2 ? -1 : (e._lastBindCallId = this._bindCallId, this._boundBufferBases[r] = null, r);
+  }
+  getLastBindBaseLocation(e) {
+    const r = e._lastBindBaseLocation;
+    return this._boundBufferBases[r] === e ? r : -1;
+  }
+  /**
+   * Binds a buffer whilst also binding its range.
+   * This will make the buffer start from the offset supplied rather than 0 when it is read.
+   * @param glBuffer - the buffer to bind
+   * @param index - the base index to bind at, defaults to 0
+   * @param offset - the offset to bind at (this is blocks of 256). 0 = 0, 1 = 256, 2 = 512 etc
+   * @param size - the size to bind at (this is blocks of 256).
+   */
+  bindBufferRange(e, r, s, n) {
+    const { _gl: i } = this;
+    s || (s = 0), r || (r = 0), this._boundBufferBases[r] = null, i.bindBufferRange(i.UNIFORM_BUFFER, r || 0, e.buffer, s * 256, n || 256);
+  }
+  /**
+   * Will ensure the data in the buffer is uploaded to the GPU.
+   * @param {Buffer} buffer - the buffer to update
+   */
+  updateBuffer(e) {
+    const { _gl: r } = this, s = this.getGlBuffer(e);
+    if (e._updateID === s.updateID)
+      return s;
+    s.updateID = e._updateID, r.bindBuffer(s.type, s.buffer);
+    const n = e.data, i = e.descriptor.usage & B.STATIC ? r.STATIC_DRAW : r.DYNAMIC_DRAW;
+    return n ? s.byteLength >= n.byteLength ? r.bufferSubData(s.type, 0, n, 0, e._updateSize / n.BYTES_PER_ELEMENT) : (s.byteLength = n.byteLength, r.bufferData(s.type, n, i)) : (s.byteLength = e.descriptor.size, r.bufferData(s.type, s.byteLength, i)), s;
+  }
+  /** dispose all WebGL resources of all managed buffers */
+  destroyAll() {
+    const e = this._gl;
+    for (const r in this._gpuBuffers)
+      e.deleteBuffer(this._gpuBuffers[r].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
+   */
+  onBufferDestroy(e, r) {
+    const s = this._gpuBuffers[e.uid], n = this._gl;
+    r || n.deleteBuffer(s.buffer), this._gpuBuffers[e.uid] = null;
+  }
+  /**
+   * creates and attaches a GLBuffer object tied to the current context.
+   * @param buffer
+   * @protected
+   */
+  createGLBuffer(e) {
+    const { _gl: r } = this;
+    let s = x.ARRAY_BUFFER;
+    e.descriptor.usage & B.INDEX ? s = x.ELEMENT_ARRAY_BUFFER : e.descriptor.usage & B.UNIFORM && (s = x.UNIFORM_BUFFER);
+    const n = new ke(r.createBuffer(), s);
+    return this._gpuBuffers[e.uid] = n, e.on("destroy", this.onBufferDestroy, this), n;
+  }
+  resetState() {
+    this._boundBufferBases = /* @__PURE__ */ Object.create(null);
+  }
+}
+ee.extension = {
+  type: [
+    d.WebGLSystem
+  ],
+  name: "buffer"
+};
+const P = class te {
+  /** @param renderer - The renderer this System works for. */
+  constructor(e) {
+    this.supports = {
+      /** Support for 32-bit indices buffer. */
+      uint32Indices: !0,
+      /** Support for UniformBufferObjects */
+      uniformBufferObject: !0,
+      /** Support for VertexArrayObjects */
+      vertexArrayObject: !0,
+      /** Support for SRGB texture format */
+      srgbTextures: !0,
+      /** Support for wrapping modes if a texture is non-power of two */
+      nonPowOf2wrapping: !0,
+      /** Support for MSAA (antialiasing of dynamic textures) */
+      msaa: !0,
+      /** Support for mipmaps if a texture is non-power of two */
+      nonPowOf2mipmaps: !0
+    }, this._renderer = e, this.extensions = /* @__PURE__ */ Object.create(null), this.handleContextLost = this.handleContextLost.bind(this), this.handleContextRestored = this.handleContextRestored.bind(this);
+  }
+  /**
+   * `true` if the context is lost
+   * @readonly
+   */
+  get isLost() {
+    return !this.gl || this.gl.isContextLost();
+  }
+  /**
+   * Handles the context change event.
+   * @param {WebGLRenderingContext} gl - New WebGL context.
+   */
+  contextChange(e) {
+    this.gl = e, this._renderer.gl = e;
+  }
+  init(e) {
+    e = { ...te.defaultOptions, ...e };
+    let r = this.multiView = e.multiView;
+    if (e.context && r && (m("Renderer created with both a context and multiview enabled. Disabling multiView as both cannot work together."), r = !1), r ? this.canvas = S.get().createCanvas(this._renderer.canvas.width, this._renderer.canvas.height) : this.canvas = this._renderer.view.canvas, e.context)
+      this.initFromContext(e.context);
+    else {
+      const s = this._renderer.background.alpha < 1, n = e.premultipliedAlpha ?? !0, i = e.antialias && !this._renderer.backBuffer.useBackBuffer;
+      this.createContext(e.preferWebGLVersion, {
+        alpha: s,
+        premultipliedAlpha: n,
+        antialias: i,
+        stencil: !0,
+        preserveDrawingBuffer: e.preserveDrawingBuffer,
+        powerPreference: e.powerPreference ?? "default"
+      });
+    }
+  }
+  ensureCanvasSize(e) {
+    if (!this.multiView) {
+      e !== this.canvas && m("multiView is disabled, but targetCanvas is not the main canvas");
+      return;
+    }
+    const { canvas: r } = this;
+    (r.width < e.width || r.height < e.height) && (r.width = Math.max(e.width, e.width), r.height = Math.max(e.height, e.height));
+  }
+  /**
+   * Initializes the context.
+   * @protected
+   * @param {WebGLRenderingContext} gl - WebGL context
+   */
+  initFromContext(e) {
+    this.gl = e, this.webGLVersion = e instanceof S.get().getWebGLRenderingContext() ? 1 : 2, this.getExtensions(), this.validateContext(e), this._renderer.runners.contextChange.emit(e);
+    const r = this._renderer.view.canvas;
+    r.addEventListener("webglcontextlost", this.handleContextLost, !1), r.addEventListener("webglcontextrestored", this.handleContextRestored, !1);
+  }
+  /**
+   * Initialize from context options
+   * @protected
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext
+   * @param preferWebGLVersion
+   * @param {object} options - context attributes
+   */
+  createContext(e, r) {
+    let s;
+    const n = this.canvas;
+    if (e === 2 && (s = n.getContext("webgl2", r)), !s && (s = n.getContext("webgl", r), !s))
+      throw new Error("This browser does not support WebGL. Try using the canvas renderer");
+    this.gl = s, this.initFromContext(this.gl);
+  }
+  /** Auto-populate the {@link GlContextSystem.extensions extensions}. */
+  getExtensions() {
+    const { gl: e } = this, r = {
+      anisotropicFiltering: e.getExtension("EXT_texture_filter_anisotropic"),
+      floatTextureLinear: e.getExtension("OES_texture_float_linear"),
+      s3tc: e.getExtension("WEBGL_compressed_texture_s3tc"),
+      s3tc_sRGB: e.getExtension("WEBGL_compressed_texture_s3tc_srgb"),
+      // eslint-disable-line camelcase
+      etc: e.getExtension("WEBGL_compressed_texture_etc"),
+      etc1: e.getExtension("WEBGL_compressed_texture_etc1"),
+      pvrtc: e.getExtension("WEBGL_compressed_texture_pvrtc") || e.getExtension("WEBKIT_WEBGL_compressed_texture_pvrtc"),
+      atc: e.getExtension("WEBGL_compressed_texture_atc"),
+      astc: e.getExtension("WEBGL_compressed_texture_astc"),
+      bptc: e.getExtension("EXT_texture_compression_bptc"),
+      rgtc: e.getExtension("EXT_texture_compression_rgtc"),
+      loseContext: e.getExtension("WEBGL_lose_context")
+    };
+    if (this.webGLVersion === 1)
+      this.extensions = {
+        ...r,
+        drawBuffers: e.getExtension("WEBGL_draw_buffers"),
+        depthTexture: e.getExtension("WEBGL_depth_texture"),
+        vertexArrayObject: e.getExtension("OES_vertex_array_object") || e.getExtension("MOZ_OES_vertex_array_object") || e.getExtension("WEBKIT_OES_vertex_array_object"),
+        uint32ElementIndex: e.getExtension("OES_element_index_uint"),
+        // Floats and half-floats
+        floatTexture: e.getExtension("OES_texture_float"),
+        floatTextureLinear: e.getExtension("OES_texture_float_linear"),
+        textureHalfFloat: e.getExtension("OES_texture_half_float"),
+        textureHalfFloatLinear: e.getExtension("OES_texture_half_float_linear"),
+        vertexAttribDivisorANGLE: e.getExtension("ANGLE_instanced_arrays"),
+        srgb: e.getExtension("EXT_sRGB")
+      };
+    else {
+      this.extensions = {
+        ...r,
+        colorBufferFloat: e.getExtension("EXT_color_buffer_float")
+      };
+      const s = e.getExtension("WEBGL_provoking_vertex");
+      s && s.provokingVertexWEBGL(s.FIRST_VERTEX_CONVENTION_WEBGL);
+    }
+  }
+  /**
+   * Handles a lost webgl context
+   * @param {WebGLContextEvent} event - The context lost event.
+   */
+  handleContextLost(e) {
+    e.preventDefault(), this._contextLossForced && (this._contextLossForced = !1, setTimeout(() => {
+      var r;
+      this.gl.isContextLost() && ((r = this.extensions.loseContext) == null || r.restoreContext());
+    }, 0));
+  }
+  /** Handles a restored webgl context. */
+  handleContextRestored() {
+    this.getExtensions(), this._renderer.runners.contextChange.emit(this.gl);
+  }
+  destroy() {
+    var r;
+    const e = this._renderer.view.canvas;
+    this._renderer = null, e.removeEventListener("webglcontextlost", this.handleContextLost), e.removeEventListener("webglcontextrestored", this.handleContextRestored), this.gl.useProgram(null), (r = this.extensions.loseContext) == null || r.loseContext();
+  }
+  /**
+   * this function can be called to force a webGL context loss
+   * this will release all resources on the GPU.
+   * Useful if you need to put Pixi to sleep, and save some GPU memory
+   *
+   * As soon as render is called - all resources will be created again.
+   */
+  forceContextLoss() {
+    var e;
+    (e = this.extensions.loseContext) == null || e.loseContext(), this._contextLossForced = !0;
+  }
+  /**
+   * Validate context.
+   * @param {WebGLRenderingContext} gl - Render context.
+   */
+  validateContext(e) {
+    const r = e.getContextAttributes();
+    r && !r.stencil && m("Provided WebGL context does not have a stencil buffer, masks may not render correctly");
+    const s = this.supports, n = this.webGLVersion === 2, i = this.extensions;
+    s.uint32Indices = n || !!i.uint32ElementIndex, s.uniformBufferObject = n, s.vertexArrayObject = n || !!i.vertexArrayObject, s.srgbTextures = n || !!i.srgb, s.nonPowOf2wrapping = n, s.nonPowOf2mipmaps = n, s.msaa = n, s.uint32Indices || m("Provided WebGL context does not support 32 index buffer, large scenes may not render correctly");
+  }
+};
+P.extension = {
+  type: [
+    d.WebGLSystem
+  ],
+  name: "context"
+};
+P.defaultOptions = {
+  /**
+   * {@link WebGLOptions.context}
+   * @default null
+   */
+  context: null,
+  /**
+   * {@link WebGLOptions.premultipliedAlpha}
+   * @default true
+   */
+  premultipliedAlpha: !0,
+  /**
+   * {@link WebGLOptions.preserveDrawingBuffer}
+   * @default false
+   */
+  preserveDrawingBuffer: !1,
+  /**
+   * {@link WebGLOptions.powerPreference}
+   * @default default
+   */
+  powerPreference: void 0,
+  /**
+   * {@link WebGLOptions.webGLVersion}
+   * @default 2
+   */
+  preferWebGLVersion: 2,
+  /**
+   * {@link WebGLOptions.multiView}
+   * @default false
+   */
+  multiView: !1
+};
+let Xe = P;
+var D = /* @__PURE__ */ ((t) => (t[t.RGBA = 6408] = "RGBA", t[t.RGB = 6407] = "RGB", t[t.RG = 33319] = "RG", t[t.RED = 6403] = "RED", t[t.RGBA_INTEGER = 36249] = "RGBA_INTEGER", t[t.RGB_INTEGER = 36248] = "RGB_INTEGER", t[t.RG_INTEGER = 33320] = "RG_INTEGER", t[t.RED_INTEGER = 36244] = "RED_INTEGER", t[t.ALPHA = 6406] = "ALPHA", t[t.LUMINANCE = 6409] = "LUMINANCE", t[t.LUMINANCE_ALPHA = 6410] = "LUMINANCE_ALPHA", t[t.DEPTH_COMPONENT = 6402] = "DEPTH_COMPONENT", t[t.DEPTH_STENCIL = 34041] = "DEPTH_STENCIL", t))(D || {}), re = /* @__PURE__ */ ((t) => (t[t.TEXTURE_2D = 3553] = "TEXTURE_2D", t[t.TEXTURE_CUBE_MAP = 34067] = "TEXTURE_CUBE_MAP", t[t.TEXTURE_2D_ARRAY = 35866] = "TEXTURE_2D_ARRAY", t[t.TEXTURE_CUBE_MAP_POSITIVE_X = 34069] = "TEXTURE_CUBE_MAP_POSITIVE_X", t[t.TEXTURE_CUBE_MAP_NEGATIVE_X = 34070] = "TEXTURE_CUBE_MAP_NEGATIVE_X", t[t.TEXTURE_CUBE_MAP_POSITIVE_Y = 34071] = "TEXTURE_CUBE_MAP_POSITIVE_Y", t[t.TEXTURE_CUBE_MAP_NEGATIVE_Y = 34072] = "TEXTURE_CUBE_MAP_NEGATIVE_Y", t[t.TEXTURE_CUBE_MAP_POSITIVE_Z = 34073] = "TEXTURE_CUBE_MAP_POSITIVE_Z", t[t.TEXTURE_CUBE_MAP_NEGATIVE_Z = 34074] = "TEXTURE_CUBE_MAP_NEGATIVE_Z", t))(re || {}), h = /* @__PURE__ */ ((t) => (t[t.UNSIGNED_BYTE = 5121] = "UNSIGNED_BYTE", t[t.UNSIGNED_SHORT = 5123] = "UNSIGNED_SHORT", t[t.UNSIGNED_SHORT_5_6_5 = 33635] = "UNSIGNED_SHORT_5_6_5", t[t.UNSIGNED_SHORT_4_4_4_4 = 32819] = "UNSIGNED_SHORT_4_4_4_4", t[t.UNSIGNED_SHORT_5_5_5_1 = 32820] = "UNSIGNED_SHORT_5_5_5_1", t[t.UNSIGNED_INT = 5125] = "UNSIGNED_INT", t[t.UNSIGNED_INT_10F_11F_11F_REV = 35899] = "UNSIGNED_INT_10F_11F_11F_REV", t[t.UNSIGNED_INT_2_10_10_10_REV = 33640] = "UNSIGNED_INT_2_10_10_10_REV", t[t.UNSIGNED_INT_24_8 = 34042] = "UNSIGNED_INT_24_8", t[t.UNSIGNED_INT_5_9_9_9_REV = 35902] = "UNSIGNED_INT_5_9_9_9_REV", t[t.BYTE = 5120] = "BYTE", t[t.SHORT = 5122] = "SHORT", t[t.INT = 5124] = "INT", t[t.FLOAT = 5126] = "FLOAT", t[t.FLOAT_32_UNSIGNED_INT_24_8_REV = 36269] = "FLOAT_32_UNSIGNED_INT_24_8_REV", t[t.HALF_FLOAT = 36193] = "HALF_FLOAT", t))(h || {});
+const w = {
+  uint8x2: h.UNSIGNED_BYTE,
+  uint8x4: h.UNSIGNED_BYTE,
+  sint8x2: h.BYTE,
+  sint8x4: h.BYTE,
+  unorm8x2: h.UNSIGNED_BYTE,
+  unorm8x4: h.UNSIGNED_BYTE,
+  snorm8x2: h.BYTE,
+  snorm8x4: h.BYTE,
+  uint16x2: h.UNSIGNED_SHORT,
+  uint16x4: h.UNSIGNED_SHORT,
+  sint16x2: h.SHORT,
+  sint16x4: h.SHORT,
+  unorm16x2: h.UNSIGNED_SHORT,
+  unorm16x4: h.UNSIGNED_SHORT,
+  snorm16x2: h.SHORT,
+  snorm16x4: h.SHORT,
+  float16x2: h.HALF_FLOAT,
+  float16x4: h.HALF_FLOAT,
+  float32: h.FLOAT,
+  float32x2: h.FLOAT,
+  float32x3: h.FLOAT,
+  float32x4: h.FLOAT,
+  uint32: h.UNSIGNED_INT,
+  uint32x2: h.UNSIGNED_INT,
+  uint32x3: h.UNSIGNED_INT,
+  uint32x4: h.UNSIGNED_INT,
+  sint32: h.INT,
+  sint32x2: h.INT,
+  sint32x3: h.INT,
+  sint32x4: h.INT
+};
+function We(t) {
+  return w[t] ?? w.float32;
+}
+const je = {
+  "point-list": 0,
+  "line-list": 1,
+  "line-strip": 3,
+  "triangle-list": 4,
+  "triangle-strip": 5
+};
+class se {
+  /** @param renderer - The renderer this System works for. */
+  constructor(e) {
+    this._geometryVaoHash = /* @__PURE__ */ Object.create(null), this._renderer = e, this._activeGeometry = null, this._activeVao = null, this.hasVao = !0, this.hasInstance = !0, this._renderer.renderableGC.addManagedHash(this, "_geometryVaoHash");
+  }
+  /** Sets up the renderer context and necessary buffers. */
+  contextChange() {
+    const e = this.gl = this._renderer.gl;
+    if (!this._renderer.context.supports.vertexArrayObject)
+      throw new Error("[PixiJS] Vertex Array Objects are not supported on this device");
+    const r = this._renderer.context.extensions.vertexArrayObject;
+    r && (e.createVertexArray = () => r.createVertexArrayOES(), e.bindVertexArray = (n) => r.bindVertexArrayOES(n), e.deleteVertexArray = (n) => r.deleteVertexArrayOES(n));
+    const s = this._renderer.context.extensions.vertexAttribDivisorANGLE;
+    s && (e.drawArraysInstanced = (n, i, a, o) => {
+      s.drawArraysInstancedANGLE(n, i, a, o);
+    }, e.drawElementsInstanced = (n, i, a, o, c) => {
+      s.drawElementsInstancedANGLE(n, i, a, o, c);
+    }, e.vertexAttribDivisor = (n, i) => s.vertexAttribDivisorANGLE(n, i)), 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
+   * @param geometry - Instance of geometry to bind.
+   * @param program - Instance of program to use vao for.
+   */
+  bind(e, r) {
+    const s = this.gl;
+    this._activeGeometry = e;
+    const n = this.getVao(e, r);
+    this._activeVao !== n && (this._activeVao = n, s.bindVertexArray(n)), this.updateBuffers();
+  }
+  /** Reset and unbind any active VAO and geometry. */
+  resetState() {
+    this.unbind();
+  }
+  /** Update buffers of the currently bound geometry. */
+  updateBuffers() {
+    const e = this._activeGeometry, r = this._renderer.buffer;
+    for (let s = 0; s < e.buffers.length; s++) {
+      const n = e.buffers[s];
+      r.updateBuffer(n);
+    }
+  }
+  /**
+   * Check compatibility between a geometry and a program
+   * @param geometry - Geometry instance.
+   * @param program - Program instance.
+   */
+  checkCompatibility(e, r) {
+    const s = e.attributes, n = r._attributeData;
+    for (const i in n)
+      if (!s[i])
+        throw new Error(`shader and geometry incompatible, geometry missing the "${i}" attribute`);
+  }
+  /**
+   * Takes a geometry and program and generates a unique signature for them.
+   * @param geometry - To get signature from.
+   * @param program - To test geometry against.
+   * @returns - Unique signature of the geometry and program
+   */
+  getSignature(e, r) {
+    const s = e.attributes, n = r._attributeData, i = ["g", e.uid];
+    for (const a in s)
+      n[a] && i.push(a, n[a].location);
+    return i.join("-");
+  }
+  getVao(e, r) {
+    var s;
+    return ((s = this._geometryVaoHash[e.uid]) == null ? void 0 : s[r._key]) || this.initGeometryVao(e, r);
+  }
+  /**
+   * Creates or gets Vao with the same structure as the geometry and stores it on the geometry.
+   * If vao is created, it is bound automatically. We use a shader to infer what and how to set up the
+   * attribute locations.
+   * @param geometry - Instance of geometry to to generate Vao for.
+   * @param program
+   * @param _incRefCount - Increment refCount of all geometry buffers.
+   */
+  initGeometryVao(e, r, s = !0) {
+    const n = this._renderer.gl, i = this._renderer.buffer;
+    this._renderer.shader._getProgramData(r), this.checkCompatibility(e, r);
+    const a = this.getSignature(e, r);
+    this._geometryVaoHash[e.uid] || (this._geometryVaoHash[e.uid] = /* @__PURE__ */ Object.create(null), e.on("destroy", this.onGeometryDestroy, this));
+    const o = this._geometryVaoHash[e.uid];
+    let c = o[a];
+    if (c)
+      return o[r._key] = c, c;
+    Ue(e, r._attributeData);
+    const u = e.buffers;
+    c = n.createVertexArray(), n.bindVertexArray(c);
+    for (let _ = 0; _ < u.length; _++) {
+      const f = u[_];
+      i.bind(f);
+    }
+    return this.activateVao(e, r), o[r._key] = c, o[a] = c, n.bindVertexArray(null), c;
+  }
+  /**
+   * Disposes geometry.
+   * @param geometry - Geometry with buffers. Only VAO will be disposed
+   * @param [contextLost=false] - If context was lost, we suppress deleteVertexArray
+   */
+  onGeometryDestroy(e, r) {
+    const s = this._geometryVaoHash[e.uid], n = this.gl;
+    if (s) {
+      if (r)
+        for (const i in s)
+          this._activeVao !== s[i] && this.unbind(), n.deleteVertexArray(s[i]);
+      this._geometryVaoHash[e.uid] = null;
+    }
+  }
+  /**
+   * Dispose all WebGL resources of all managed geometries.
+   * @param [contextLost=false] - If context was lost, we suppress `gl.delete` calls
+   */
+  destroyAll(e = !1) {
+    const r = this.gl;
+    for (const s in this._geometryVaoHash) {
+      if (e)
+        for (const n in this._geometryVaoHash[s]) {
+          const i = this._geometryVaoHash[s];
+          this._activeVao !== i && this.unbind(), r.deleteVertexArray(i[n]);
+        }
+      this._geometryVaoHash[s] = null;
+    }
+  }
+  /**
+   * Activate vertex array object.
+   * @param geometry - Geometry instance.
+   * @param program - Shader program instance.
+   */
+  activateVao(e, r) {
+    var o;
+    const s = this._renderer.gl, n = this._renderer.buffer, i = e.attributes;
+    e.indexBuffer && n.bind(e.indexBuffer);
+    let a = null;
+    for (const c in i) {
+      const u = i[c], _ = u.buffer, f = n.getGlBuffer(_), l = r._attributeData[c];
+      if (l) {
+        a !== f && (n.bind(_), a = f);
+        const E = l.location;
+        s.enableVertexAttribArray(E);
+        const v = K(u.format), L = We(u.format);
+        if (((o = l.format) == null ? void 0 : o.substring(1, 4)) === "int" ? s.vertexAttribIPointer(
+          E,
+          v.size,
+          L,
+          u.stride,
+          u.offset
+        ) : s.vertexAttribPointer(
+          E,
+          v.size,
+          L,
+          v.normalised,
+          u.stride,
+          u.offset
+        ), u.instance)
+          if (this.hasInstance) {
+            const ve = u.divisor ?? 1;
+            s.vertexAttribDivisor(E, ve);
+          } else
+            throw new Error("geometry error, GPU Instancing is not supported on this device");
+      }
+    }
+  }
+  /**
+   * Draws the currently bound geometry.
+   * @param topology - The type primitive to render.
+   * @param size - The number of elements to be rendered. If not specified, all vertices after the
+   *  starting vertex will be drawn.
+   * @param start - The starting vertex in the geometry to start drawing from. If not specified,
+   *  drawing will start from the first vertex.
+   * @param instanceCount - The number of instances of the set of elements to execute. If not specified,
+   *  all instances will be drawn.
+   * @returns This instance of the geometry system.
+   */
+  draw(e, r, s, n) {
+    const { gl: i } = this._renderer, a = this._activeGeometry, o = je[e || a.topology];
+    if (n ?? (n = a.instanceCount), a.indexBuffer) {
+      const c = a.indexBuffer.data.BYTES_PER_ELEMENT, u = c === 2 ? i.UNSIGNED_SHORT : i.UNSIGNED_INT;
+      n > 1 ? i.drawElementsInstanced(o, r || a.indexBuffer.data.length, u, (s || 0) * c, n) : i.drawElements(o, r || a.indexBuffer.data.length, u, (s || 0) * c);
+    } else n > 1 ? i.drawArraysInstanced(o, s || 0, r || a.getSize(), n) : i.drawArrays(o, s || 0, r || a.getSize());
+    return this;
+  }
+  /** Unbind/reset everything. */
+  unbind() {
+    this.gl.bindVertexArray(null), this._activeVao = null, this._activeGeometry = null;
+  }
+  destroy() {
+    this._renderer = null, this.gl = null, this._activeVao = null, this._activeGeometry = null, this._geometryVaoHash = null;
+  }
+}
+se.extension = {
+  type: [
+    d.WebGLSystem
+  ],
+  name: "geometry"
+};
+const Ke = new Ae({
+  attributes: {
+    aPosition: [
+      -1,
+      -1,
+      // Bottom left corner
+      3,
+      -1,
+      // Bottom right corner, extending beyond right edge
+      -1,
+      3
+      // Top left corner, extending beyond top edge
+    ]
+  }
+}), M = class ne {
+  constructor(e) {
+    this.useBackBuffer = !1, this._useBackBufferThisRender = !1, this._renderer = e;
+  }
+  init(e = {}) {
+    const { useBackBuffer: r, antialias: s } = { ...ne.defaultOptions, ...e };
+    this.useBackBuffer = r, this._antialias = s, this._renderer.context.supports.msaa || (m("antialiasing, is not supported on when using the back buffer"), this._antialias = !1), this._state = O.for2d();
+    const n = new Be({
+      vertex: `
+                attribute vec2 aPosition;
+                out vec2 vUv;
+
+                void main() {
+                    gl_Position = vec4(aPosition, 0.0, 1.0);
+
+                    vUv = (aPosition + 1.0) / 2.0;
+
+                    // flip dem UVs
+                    vUv.y = 1.0 - vUv.y;
+                }`,
+      fragment: `
+                in vec2 vUv;
+                out vec4 finalColor;
+
+                uniform sampler2D uTexture;
+
+                void main() {
+                    finalColor = texture(uTexture, vUv);
+                }`,
+      name: "big-triangle"
+    });
+    this._bigTriangleShader = new U({
+      glProgram: n,
+      resources: {
+        uTexture: b.WHITE.source
+      }
+    });
+  }
+  /**
+   * This is called before the RenderTargetSystem is started. This is where
+   * we replace the target with the back buffer if required.
+   * @param options - The options for this render.
+   */
+  renderStart(e) {
+    const r = this._renderer.renderTarget.getRenderTarget(e.target);
+    if (this._useBackBufferThisRender = this.useBackBuffer && !!r.isRoot, this._useBackBufferThisRender) {
+      const s = this._renderer.renderTarget.getRenderTarget(e.target);
+      this._targetTexture = s.colorTexture, e.target = this._getBackBufferTexture(s.colorTexture);
+    }
+  }
+  renderEnd() {
+    this._presentBackBuffer();
+  }
+  _presentBackBuffer() {
+    const e = this._renderer;
+    e.renderTarget.finishRenderPass(), this._useBackBufferThisRender && (e.renderTarget.bind(this._targetTexture, !1), this._bigTriangleShader.resources.uTexture = this._backBufferTexture.source, e.encoder.draw({
+      geometry: Ke,
+      shader: this._bigTriangleShader,
+      state: this._state
+    }));
+  }
+  _getBackBufferTexture(e) {
+    return this._backBufferTexture = this._backBufferTexture || new b({
+      source: new $({
+        width: e.width,
+        height: e.height,
+        resolution: e._resolution,
+        antialias: this._antialias
+      })
+    }), this._backBufferTexture.source.resize(
+      e.width,
+      e.height,
+      e._resolution
+    ), this._backBufferTexture;
+  }
+  /** destroys the back buffer */
+  destroy() {
+    this._backBufferTexture && (this._backBufferTexture.destroy(), this._backBufferTexture = null);
+  }
+};
+M.extension = {
+  type: [
+    d.WebGLSystem
+  ],
+  name: "backBuffer",
+  priority: 1
+};
+M.defaultOptions = {
+  /** if true will use the back buffer where required */
+  useBackBuffer: !1
+};
+let $e = M;
+class ie {
+  constructor(e) {
+    this._colorMaskCache = 15, this._renderer = e;
+  }
+  setMask(e) {
+    this._colorMaskCache !== e && (this._colorMaskCache = e, this._renderer.gl.colorMask(
+      !!(e & 8),
+      !!(e & 4),
+      !!(e & 2),
+      !!(e & 1)
+    ));
+  }
+}
+ie.extension = {
+  type: [
+    d.WebGLSystem
+  ],
+  name: "colorMask"
+};
+class ae {
+  constructor(e) {
+    this.commandFinished = Promise.resolve(), this._renderer = e;
+  }
+  setGeometry(e, r) {
+    this._renderer.geometry.bind(e, r.glProgram);
+  }
+  finishRenderPass() {
+  }
+  draw(e) {
+    const r = this._renderer, { geometry: s, shader: n, state: i, skipSync: a, topology: o, size: c, start: u, instanceCount: _ } = e;
+    r.shader.bind(n, a), r.geometry.bind(s, r.shader._activeProgram), i && r.state.set(i), r.geometry.draw(o, c, u, _ ?? s.instanceCount);
+  }
+  destroy() {
+    this._renderer = null;
+  }
+}
+ae.extension = {
+  type: [
+    d.WebGLSystem
+  ],
+  name: "encoder"
+};
+class oe {
+  constructor(e) {
+    this._renderer = e;
+  }
+  contextChange() {
+    const e = this._renderer.gl;
+    this.maxTextures = e.getParameter(e.MAX_TEXTURE_IMAGE_UNITS), this.maxBatchableTextures = Ne(this.maxTextures, e);
+    const r = this._renderer.context.webGLVersion === 2;
+    this.maxUniformBindings = r ? e.getParameter(e.MAX_UNIFORM_BUFFER_BINDINGS) : 0;
+  }
+  destroy() {
+  }
+}
+oe.extension = {
+  type: [
+    d.WebGLSystem
+  ],
+  name: "limits"
+};
+class ze {
+  constructor() {
+    this.width = -1, this.height = -1, this.msaa = !1, this.msaaRenderBuffer = [];
+  }
+}
+class ce {
+  constructor(e) {
+    this._stencilCache = {
+      enabled: !1,
+      stencilReference: 0,
+      stencilMode: p.NONE
+    }, this._renderTargetStencilState = /* @__PURE__ */ Object.create(null), e.renderTarget.onRenderTargetChange.add(this);
+  }
+  contextChange(e) {
+    this._gl = e, this._comparisonFuncMapping = {
+      always: e.ALWAYS,
+      never: e.NEVER,
+      equal: e.EQUAL,
+      "not-equal": e.NOTEQUAL,
+      less: e.LESS,
+      "less-equal": e.LEQUAL,
+      greater: e.GREATER,
+      "greater-equal": e.GEQUAL
+    }, this._stencilOpsMapping = {
+      keep: e.KEEP,
+      zero: e.ZERO,
+      replace: e.REPLACE,
+      invert: e.INVERT,
+      "increment-clamp": e.INCR,
+      "decrement-clamp": e.DECR,
+      "increment-wrap": e.INCR_WRAP,
+      "decrement-wrap": e.DECR_WRAP
+    }, this.resetState();
+  }
+  onRenderTargetChange(e) {
+    if (this._activeRenderTarget === e)
+      return;
+    this._activeRenderTarget = e;
+    let r = this._renderTargetStencilState[e.uid];
+    r || (r = this._renderTargetStencilState[e.uid] = {
+      stencilMode: p.DISABLED,
+      stencilReference: 0
+    }), this.setStencilMode(r.stencilMode, r.stencilReference);
+  }
+  resetState() {
+    this._stencilCache.enabled = !1, this._stencilCache.stencilMode = p.NONE, this._stencilCache.stencilReference = 0;
+  }
+  setStencilMode(e, r) {
+    const s = this._renderTargetStencilState[this._activeRenderTarget.uid], n = this._gl, i = Fe[e], a = this._stencilCache;
+    if (s.stencilMode = e, s.stencilReference = r, e === p.DISABLED) {
+      this._stencilCache.enabled && (this._stencilCache.enabled = !1, n.disable(n.STENCIL_TEST));
+      return;
+    }
+    this._stencilCache.enabled || (this._stencilCache.enabled = !0, n.enable(n.STENCIL_TEST)), (e !== a.stencilMode || a.stencilReference !== r) && (a.stencilMode = e, a.stencilReference = r, n.stencilFunc(this._comparisonFuncMapping[i.stencilBack.compare], r, 255), n.stencilOp(n.KEEP, n.KEEP, this._stencilOpsMapping[i.stencilBack.passOp]));
+  }
+}
+ce.extension = {
+  type: [
+    d.WebGLSystem
+  ],
+  name: "stencil"
+};
+const ue = {
+  f32: 4,
+  i32: 4,
+  "vec2<f32>": 8,
+  "vec3<f32>": 12,
+  "vec4<f32>": 16,
+  "vec2<i32>": 8,
+  "vec3<i32>": 12,
+  "vec4<i32>": 16,
+  "mat2x2<f32>": 16 * 2,
+  "mat3x3<f32>": 16 * 3,
+  "mat4x4<f32>": 16 * 4
+  // TODO - not essential for now but support these in the future
+  // int:      4,
+  // ivec2:    8,
+  // ivec3:    12,
+  // ivec4:    16,
+  // uint:     4,
+  // uvec2:    8,
+  // uvec3:    12,
+  // uvec4:    16,
+  // bool:     4,
+  // bvec2:    8,
+  // bvec3:    12,
+  // bvec4:    16,
+  // mat2:     16 * 2,
+  // mat3:     16 * 3,
+  // mat4:     16 * 4,
+};
+function Ye(t) {
+  const e = t.map((i) => ({
+    data: i,
+    offset: 0,
+    size: 0
+  })), r = 16;
+  let s = 0, n = 0;
+  for (let i = 0; i < e.length; i++) {
+    const a = e[i];
+    if (s = ue[a.data.type], !s)
+      throw new Error(`Unknown type ${a.data.type}`);
+    a.data.size > 1 && (s = Math.max(s, r) * a.data.size);
+    const o = s === 12 ? 16 : s;
+    a.size = s;
+    const c = n % r;
+    c > 0 && r - c < o ? n += (r - c) % 16 : n += (s - c % s) % s, a.offset = n, n += s;
+  }
+  return n = Math.ceil(n / 16) * 16, { uboElements: e, size: n };
+}
+function qe(t, e) {
+  const r = Math.max(ue[t.data.type] / 16, 1), s = t.data.value.length / t.data.size, n = (4 - s % 4) % 4, i = t.data.type.indexOf("i32") >= 0 ? "dataInt32" : "data";
+  return `
+        v = uv.${t.data.name};
+        offset += ${e};
+
+        arrayOffset = offset;
+
+        t = 0;
+
+        for(var i=0; i < ${t.data.size * r}; i++)
+        {
+            for(var j = 0; j < ${s}; j++)
+            {
+                ${i}[arrayOffset++] = v[t++];
+            }
+            ${n !== 0 ? `arrayOffset += ${n};` : ""}
+        }
+    `;
+}
+function Ze(t) {
+  return Oe(
+    t,
+    "uboStd40",
+    qe,
+    Pe
+  );
+}
+class _e extends Me {
+  constructor() {
+    super({
+      createUboElements: Ye,
+      generateUboSync: Ze
+    });
+  }
+}
+_e.extension = {
+  type: [d.WebGLSystem],
+  name: "ubo"
+};
+class Qe {
+  constructor() {
+    this._clearColorCache = [0, 0, 0, 0], this._viewPortCache = new H();
+  }
+  init(e, r) {
+    this._renderer = e, this._renderTargetSystem = r, e.runners.contextChange.add(this);
+  }
+  contextChange() {
+    this._clearColorCache = [0, 0, 0, 0], this._viewPortCache = new H();
+  }
+  copyToTexture(e, r, s, n, i) {
+    const a = this._renderTargetSystem, o = this._renderer, c = a.getGpuRenderTarget(e), u = o.gl;
+    return this.finishRenderPass(e), u.bindFramebuffer(u.FRAMEBUFFER, c.resolveTargetFramebuffer), o.texture.bind(r, 0), u.copyTexSubImage2D(
+      u.TEXTURE_2D,
+      0,
+      i.x,
+      i.y,
+      s.x,
+      s.y,
+      n.width,
+      n.height
+    ), r;
+  }
+  startRenderPass(e, r = !0, s, n) {
+    const i = this._renderTargetSystem, a = e.colorTexture, o = i.getGpuRenderTarget(e);
+    let c = n.y;
+    e.isRoot && (c = a.pixelHeight - n.height), e.colorTextures.forEach((f) => {
+      this._renderer.texture.unbind(f);
+    });
+    const u = this._renderer.gl;
+    u.bindFramebuffer(u.FRAMEBUFFER, o.framebuffer);
+    const _ = this._viewPortCache;
+    (_.x !== n.x || _.y !== c || _.width !== n.width || _.height !== n.height) && (_.x = n.x, _.y = c, _.width = n.width, _.height = n.height, u.viewport(
+      n.x,
+      c,
+      n.width,
+      n.height
+    )), !o.depthStencilRenderBuffer && (e.stencil || e.depth) && this._initStencil(o), this.clear(e, r, s);
+  }
+  finishRenderPass(e) {
+    const s = this._renderTargetSystem.getGpuRenderTarget(e);
+    if (!s.msaa)
+      return;
+    const n = this._renderer.gl;
+    n.bindFramebuffer(n.FRAMEBUFFER, s.resolveTargetFramebuffer), n.bindFramebuffer(n.READ_FRAMEBUFFER, s.framebuffer), n.blitFramebuffer(
+      0,
+      0,
+      s.width,
+      s.height,
+      0,
+      0,
+      s.width,
+      s.height,
+      n.COLOR_BUFFER_BIT,
+      n.NEAREST
+    ), n.bindFramebuffer(n.FRAMEBUFFER, s.framebuffer);
+  }
+  initGpuRenderTarget(e) {
+    const s = this._renderer.gl, n = new ze();
+    return e.colorTexture instanceof A ? (this._renderer.context.ensureCanvasSize(e.colorTexture.resource), n.framebuffer = null, n) : (this._initColor(e, n), s.bindFramebuffer(s.FRAMEBUFFER, null), n);
+  }
+  destroyGpuRenderTarget(e) {
+    const r = this._renderer.gl;
+    e.framebuffer && (r.deleteFramebuffer(e.framebuffer), e.framebuffer = null), e.resolveTargetFramebuffer && (r.deleteFramebuffer(e.resolveTargetFramebuffer), e.resolveTargetFramebuffer = null), e.depthStencilRenderBuffer && (r.deleteRenderbuffer(e.depthStencilRenderBuffer), e.depthStencilRenderBuffer = null), e.msaaRenderBuffer.forEach((s) => {
+      r.deleteRenderbuffer(s);
+    }), e.msaaRenderBuffer = null;
+  }
+  clear(e, r, s) {
+    if (!r)
+      return;
+    const n = this._renderTargetSystem;
+    typeof r == "boolean" && (r = r ? N.ALL : N.NONE);
+    const i = this._renderer.gl;
+    if (r & N.COLOR) {
+      s ?? (s = n.defaultClearColor);
+      const a = this._clearColorCache, o = s;
+      (a[0] !== o[0] || a[1] !== o[1] || a[2] !== o[2] || a[3] !== o[3]) && (a[0] = o[0], a[1] = o[1], a[2] = o[2], a[3] = o[3], i.clearColor(o[0], o[1], o[2], o[3]));
+    }
+    i.clear(r);
+  }
+  resizeGpuRenderTarget(e) {
+    if (e.isRoot)
+      return;
+    const s = this._renderTargetSystem.getGpuRenderTarget(e);
+    this._resizeColor(e, s), (e.stencil || e.depth) && this._resizeStencil(s);
+  }
+  _initColor(e, r) {
+    const s = this._renderer, n = s.gl, i = n.createFramebuffer();
+    if (r.resolveTargetFramebuffer = i, n.bindFramebuffer(n.FRAMEBUFFER, i), r.width = e.colorTexture.source.pixelWidth, r.height = e.colorTexture.source.pixelHeight, e.colorTextures.forEach((a, o) => {
+      const c = a.source;
+      c.antialias && (s.context.supports.msaa ? r.msaa = !0 : m("[RenderTexture] Antialiasing on textures is not supported in WebGL1")), s.texture.bindSource(c, 0);
+      const _ = s.texture.getGlSource(c).texture;
+      n.framebufferTexture2D(
+        n.FRAMEBUFFER,
+        n.COLOR_ATTACHMENT0 + o,
+        3553,
+        // texture.target,
+        _,
+        0
+      );
+    }), r.msaa) {
+      const a = n.createFramebuffer();
+      r.framebuffer = a, n.bindFramebuffer(n.FRAMEBUFFER, a), e.colorTextures.forEach((o, c) => {
+        const u = n.createRenderbuffer();
+        r.msaaRenderBuffer[c] = u;
+      });
+    } else
+      r.framebuffer = i;
+    this._resizeColor(e, r);
+  }
+  _resizeColor(e, r) {
+    const s = e.colorTexture.source;
+    if (r.width = s.pixelWidth, r.height = s.pixelHeight, e.colorTextures.forEach((n, i) => {
+      i !== 0 && n.source.resize(s.width, s.height, s._resolution);
+    }), r.msaa) {
+      const n = this._renderer, i = n.gl, a = r.framebuffer;
+      i.bindFramebuffer(i.FRAMEBUFFER, a), e.colorTextures.forEach((o, c) => {
+        const u = o.source;
+        n.texture.bindSource(u, 0);
+        const f = n.texture.getGlSource(u).internalFormat, l = r.msaaRenderBuffer[c];
+        i.bindRenderbuffer(
+          i.RENDERBUFFER,
+          l
+        ), i.renderbufferStorageMultisample(
+          i.RENDERBUFFER,
+          4,
+          f,
+          u.pixelWidth,
+          u.pixelHeight
+        ), i.framebufferRenderbuffer(
+          i.FRAMEBUFFER,
+          i.COLOR_ATTACHMENT0 + c,
+          i.RENDERBUFFER,
+          l
+        );
+      });
+    }
+  }
+  _initStencil(e) {
+    if (e.framebuffer === null)
+      return;
+    const r = this._renderer.gl, s = r.createRenderbuffer();
+    e.depthStencilRenderBuffer = s, r.bindRenderbuffer(
+      r.RENDERBUFFER,
+      s
+    ), r.framebufferRenderbuffer(
+      r.FRAMEBUFFER,
+      r.DEPTH_STENCIL_ATTACHMENT,
+      r.RENDERBUFFER,
+      s
+    ), this._resizeStencil(e);
+  }
+  _resizeStencil(e) {
+    const r = this._renderer.gl;
+    r.bindRenderbuffer(
+      r.RENDERBUFFER,
+      e.depthStencilRenderBuffer
+    ), e.msaa ? r.renderbufferStorageMultisample(
+      r.RENDERBUFFER,
+      4,
+      r.DEPTH24_STENCIL8,
+      e.width,
+      e.height
+    ) : r.renderbufferStorage(
+      r.RENDERBUFFER,
+      this._renderer.context.webGLVersion === 2 ? r.DEPTH24_STENCIL8 : r.DEPTH_STENCIL,
+      e.width,
+      e.height
+    );
+  }
+  prerender(e) {
+    const r = e.colorTexture.resource;
+    this._renderer.context.multiView && A.test(r) && this._renderer.context.ensureCanvasSize(r);
+  }
+  postrender(e) {
+    if (this._renderer.context.multiView && A.test(e.colorTexture.resource)) {
+      const r = this._renderer.context.canvas, s = e.colorTexture;
+      s.context2D.drawImage(
+        r,
+        0,
+        s.pixelHeight - r.height
+      );
+    }
+  }
+}
+class he extends Le {
+  constructor(e) {
+    super(e), this.adaptor = new Qe(), this.adaptor.init(e, this);
+  }
+}
+he.extension = {
+  type: [d.WebGLSystem],
+  name: "renderTarget"
+};
+function Je(t, e) {
+  const r = [], s = [`
+        var g = s.groups;
+        var sS = r.shader;
+        var p = s.glProgram;
+        var ugS = r.uniformGroup;
+        var resources;
+    `];
+  let n = !1, i = 0;
+  const a = e._getProgramData(t.glProgram);
+  for (const c in t.groups) {
+    const u = t.groups[c];
+    r.push(`
+            resources = g[${c}].resources;
+        `);
+    for (const _ in u.resources) {
+      const f = u.resources[_];
+      if (f instanceof F)
+        if (f.ubo) {
+          const l = t._uniformBindMap[c][Number(_)];
+          r.push(`
+                        sS.bindUniformBlock(
+                            resources[${_}],
+                            '${l}',
+                            ${t.glProgram._uniformBlockData[l].index}
+                        );
+                    `);
+        } else
+          r.push(`
+                        ugS.updateUniformGroup(resources[${_}], p, sD);
+                    `);
+      else if (f instanceof Q) {
+        const l = t._uniformBindMap[c][Number(_)];
+        r.push(`
+                    sS.bindUniformBlock(
+                        resources[${_}],
+                        '${l}',
+                        ${t.glProgram._uniformBlockData[l].index}
+                    );
+                `);
+      } else if (f instanceof $) {
+        const l = t._uniformBindMap[c][_], E = a.uniformData[l];
+        E && (n || (n = !0, s.push(`
+                        var tS = r.texture;
+                        `)), e._gl.uniform1i(E.location, i), r.push(`
+                        tS.bind(resources[${_}], ${i});
+                    `), i++);
+      }
+    }
+  }
+  const o = [...s, ...r].join(`
+`);
+  return new Function("r", "s", "sD", o);
+}
+class et {
+  /**
+   * Makes a new Pixi program.
+   * @param program - webgl program
+   * @param uniformData - uniforms
+   */
+  constructor(e, r) {
+    this.program = e, this.uniformData = r, this.uniformGroups = {}, this.uniformDirtyGroups = {}, this.uniformBlockBindings = {};
+  }
+  /** Destroys this program. */
+  destroy() {
+    this.uniformData = null, this.uniformGroups = null, this.uniformDirtyGroups = null, this.uniformBlockBindings = null, this.program = null;
+  }
+}
+function V(t, e, r) {
+  const s = t.createShader(e);
+  return t.shaderSource(s, r), t.compileShader(s), s;
+}
+function C(t) {
+  const e = new Array(t);
+  for (let r = 0; r < e.length; r++)
+    e[r] = !1;
+  return e;
+}
+function fe(t, e) {
+  switch (t) {
+    case "float":
+      return 0;
+    case "vec2":
+      return new Float32Array(2 * e);
+    case "vec3":
+      return new Float32Array(3 * e);
+    case "vec4":
+      return new Float32Array(4 * e);
+    case "int":
+    case "uint":
+    case "sampler2D":
+    case "sampler2DArray":
+      return 0;
+    case "ivec2":
+      return new Int32Array(2 * e);
+    case "ivec3":
+      return new Int32Array(3 * e);
+    case "ivec4":
+      return new Int32Array(4 * e);
+    case "uvec2":
+      return new Uint32Array(2 * e);
+    case "uvec3":
+      return new Uint32Array(3 * e);
+    case "uvec4":
+      return new Uint32Array(4 * e);
+    case "bool":
+      return !1;
+    case "bvec2":
+      return C(2 * e);
+    case "bvec3":
+      return C(3 * e);
+    case "bvec4":
+      return C(4 * e);
+    case "mat2":
+      return new Float32Array([
+        1,
+        0,
+        0,
+        1
+      ]);
+    case "mat3":
+      return new Float32Array([
+        1,
+        0,
+        0,
+        0,
+        1,
+        0,
+        0,
+        0,
+        1
+      ]);
+    case "mat4":
+      return new Float32Array([
+        1,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        0,
+        0,
+        0,
+        1,
+        0,
+        0,
+        0,
+        0,
+        1
+      ]);
+  }
+  return null;
+}
+let g = null;
+const k = {
+  FLOAT: "float",
+  FLOAT_VEC2: "vec2",
+  FLOAT_VEC3: "vec3",
+  FLOAT_VEC4: "vec4",
+  INT: "int",
+  INT_VEC2: "ivec2",
+  INT_VEC3: "ivec3",
+  INT_VEC4: "ivec4",
+  UNSIGNED_INT: "uint",
+  UNSIGNED_INT_VEC2: "uvec2",
+  UNSIGNED_INT_VEC3: "uvec3",
+  UNSIGNED_INT_VEC4: "uvec4",
+  BOOL: "bool",
+  BOOL_VEC2: "bvec2",
+  BOOL_VEC3: "bvec3",
+  BOOL_VEC4: "bvec4",
+  FLOAT_MAT2: "mat2",
+  FLOAT_MAT3: "mat3",
+  FLOAT_MAT4: "mat4",
+  SAMPLER_2D: "sampler2D",
+  INT_SAMPLER_2D: "sampler2D",
+  UNSIGNED_INT_SAMPLER_2D: "sampler2D",
+  SAMPLER_CUBE: "samplerCube",
+  INT_SAMPLER_CUBE: "samplerCube",
+  UNSIGNED_INT_SAMPLER_CUBE: "samplerCube",
+  SAMPLER_2D_ARRAY: "sampler2DArray",
+  INT_SAMPLER_2D_ARRAY: "sampler2DArray",
+  UNSIGNED_INT_SAMPLER_2D_ARRAY: "sampler2DArray"
+}, tt = {
+  float: "float32",
+  vec2: "float32x2",
+  vec3: "float32x3",
+  vec4: "float32x4",
+  int: "sint32",
+  ivec2: "sint32x2",
+  ivec3: "sint32x3",
+  ivec4: "sint32x4",
+  uint: "uint32",
+  uvec2: "uint32x2",
+  uvec3: "uint32x3",
+  uvec4: "uint32x4",
+  bool: "uint32",
+  bvec2: "uint32x2",
+  bvec3: "uint32x3",
+  bvec4: "uint32x4"
+};
+function le(t, e) {
+  if (!g) {
+    const r = Object.keys(k);
+    g = {};
+    for (let s = 0; s < r.length; ++s) {
+      const n = r[s];
+      g[t[n]] = k[n];
+    }
+  }
+  return g[e];
+}
+function rt(t, e) {
+  const r = le(t, e);
+  return tt[r] || "float32";
+}
+function st(t, e, r = !1) {
+  const s = {}, n = e.getProgramParameter(t, e.ACTIVE_ATTRIBUTES);
+  for (let a = 0; a < n; a++) {
+    const o = e.getActiveAttrib(t, a);
+    if (o.name.startsWith("gl_"))
+      continue;
+    const c = rt(e, o.type);
+    s[o.name] = {
+      location: 0,
+      // set further down..
+      format: c,
+      stride: K(c).stride,
+      offset: 0,
+      instance: !1,
+      start: 0
+    };
+  }
+  const i = Object.keys(s);
+  if (r) {
+    i.sort((a, o) => a > o ? 1 : -1);
+    for (let a = 0; a < i.length; a++)
+      s[i[a]].location = a, e.bindAttribLocation(t, a, i[a]);
+    e.linkProgram(t);
+  } else
+    for (let a = 0; a < i.length; a++)
+      s[i[a]].location = e.getAttribLocation(t, i[a]);
+  return s;
+}
+function nt(t, e) {
+  if (!e.ACTIVE_UNIFORM_BLOCKS)
+    return {};
+  const r = {}, s = e.getProgramParameter(t, e.ACTIVE_UNIFORM_BLOCKS);
+  for (let n = 0; n < s; n++) {
+    const i = e.getActiveUniformBlockName(t, n), a = e.getUniformBlockIndex(t, i), o = e.getActiveUniformBlockParameter(t, n, e.UNIFORM_BLOCK_DATA_SIZE);
+    r[i] = {
+      name: i,
+      index: a,
+      size: o
+    };
+  }
+  return r;
+}
+function it(t, e) {
+  const r = {}, s = e.getProgramParameter(t, e.ACTIVE_UNIFORMS);
+  for (let n = 0; n < s; n++) {
+    const i = e.getActiveUniform(t, n), a = i.name.replace(/\[.*?\]$/, ""), o = !!i.name.match(/\[.*?\]$/), c = le(e, i.type);
+    r[a] = {
+      name: a,
+      index: n,
+      type: c,
+      size: i.size,
+      isArray: o,
+      value: fe(c, i.size)
+    };
+  }
+  return r;
+}
+function X(t, e) {
+  const r = t.getShaderSource(e).split(`
+`).map((u, _) => `${_}: ${u}`), s = t.getShaderInfoLog(e), n = s.split(`
+`), i = {}, a = n.map((u) => parseFloat(u.replace(/^ERROR\: 0\:([\d]+)\:.*$/, "$1"))).filter((u) => u && !i[u] ? (i[u] = !0, !0) : !1), o = [""];
+  a.forEach((u) => {
+    r[u - 1] = `%c${r[u - 1]}%c`, o.push("background: #FF0000; color:#FFFFFF; font-size: 10px", "font-size: 10px");
+  });
+  const c = r.join(`
+`);
+  o[0] = c, console.error(s), console.groupCollapsed("click to view full shader code"), console.warn(...o), console.groupEnd();
+}
+function at(t, e, r, s) {
+  t.getProgramParameter(e, t.LINK_STATUS) || (t.getShaderParameter(r, t.COMPILE_STATUS) || X(t, r), t.getShaderParameter(s, t.COMPILE_STATUS) || X(t, s), console.error("PixiJS Error: Could not initialize shader."), t.getProgramInfoLog(e) !== "" && console.warn("PixiJS Warning: gl.getProgramInfoLog()", t.getProgramInfoLog(e)));
+}
+function ot(t, e) {
+  const r = V(t, t.VERTEX_SHADER, e.vertex), s = V(t, t.FRAGMENT_SHADER, e.fragment), n = t.createProgram();
+  t.attachShader(n, r), t.attachShader(n, s);
+  const i = e.transformFeedbackVaryings;
+  i && (typeof t.transformFeedbackVaryings != "function" ? m("TransformFeedback is not supported but TransformFeedbackVaryings are given.") : t.transformFeedbackVaryings(
+    n,
+    i.names,
+    i.bufferMode === "separate" ? t.SEPARATE_ATTRIBS : t.INTERLEAVED_ATTRIBS
+  )), t.linkProgram(n), t.getProgramParameter(n, t.LINK_STATUS) || at(t, n, r, s), e._attributeData = st(
+    n,
+    t,
+    !/^[ \t]*#[ \t]*version[ \t]+300[ \t]+es[ \t]*$/m.test(e.vertex)
+  ), e._uniformData = it(n, t), e._uniformBlockData = nt(n, t), t.deleteShader(r), t.deleteShader(s);
+  const a = {};
+  for (const c in e._uniformData) {
+    const u = e._uniformData[c];
+    a[c] = {
+      location: t.getUniformLocation(n, c),
+      value: fe(u.type, u.size)
+    };
+  }
+  return new et(n, a);
+}
+const R = {
+  textureCount: 0,
+  blockIndex: 0
+};
+class de {
+  constructor(e) {
+    this._activeProgram = null, this._programDataHash = /* @__PURE__ */ Object.create(null), this._shaderSyncFunctions = /* @__PURE__ */ Object.create(null), this._renderer = e, this._renderer.renderableGC.addManagedHash(this, "_programDataHash");
+  }
+  contextChange(e) {
+    this._gl = e, this._programDataHash = /* @__PURE__ */ Object.create(null), this._shaderSyncFunctions = /* @__PURE__ */ Object.create(null), this._activeProgram = null;
+  }
+  /**
+   * Changes the current shader to the one given in parameter.
+   * @param shader - the new shader
+   * @param skipSync - false if the shader should automatically sync its uniforms.
+   * @returns the glProgram that belongs to the shader.
+   */
+  bind(e, r) {
+    if (this._setProgram(e.glProgram), r)
+      return;
+    R.textureCount = 0, R.blockIndex = 0;
+    let s = this._shaderSyncFunctions[e.glProgram._key];
+    s || (s = this._shaderSyncFunctions[e.glProgram._key] = this._generateShaderSync(e, this)), this._renderer.buffer.nextBindBase(!!e.glProgram.transformFeedbackVaryings), s(this._renderer, e, R);
+  }
+  /**
+   * Updates the uniform group.
+   * @param uniformGroup - the uniform group to update
+   */
+  updateUniformGroup(e) {
+    this._renderer.uniformGroup.updateUniformGroup(e, this._activeProgram, R);
+  }
+  /**
+   * Binds a uniform block to the shader.
+   * @param uniformGroup - the uniform group to bind
+   * @param name - the name of the uniform block
+   * @param index - the index of the uniform block
+   */
+  bindUniformBlock(e, r, s = 0) {
+    const n = this._renderer.buffer, i = this._getProgramData(this._activeProgram), a = e._bufferResource;
+    a || this._renderer.ubo.updateUniformGroup(e);
+    const o = e.buffer, c = n.updateBuffer(o), u = n.freeLocationForBufferBase(c);
+    if (a) {
+      const { offset: f, size: l } = e;
+      f === 0 && l === o.data.byteLength ? n.bindBufferBase(c, u) : n.bindBufferRange(c, u, f);
+    } else n.getLastBindBaseLocation(c) !== u && n.bindBufferBase(c, u);
+    const _ = this._activeProgram._uniformBlockData[r].index;
+    i.uniformBlockBindings[s] !== u && (i.uniformBlockBindings[s] = u, this._renderer.gl.uniformBlockBinding(i.program, _, u));
+  }
+  _setProgram(e) {
+    if (this._activeProgram === e)
+      return;
+    this._activeProgram = e;
+    const r = this._getProgramData(e);
+    this._gl.useProgram(r.program);
+  }
+  /**
+   * @param program - the program to get the data for
+   * @internal
+   */
+  _getProgramData(e) {
+    return this._programDataHash[e._key] || this._createProgramData(e);
+  }
+  _createProgramData(e) {
+    const r = e._key;
+    return this._programDataHash[r] = ot(this._gl, e), this._programDataHash[r];
+  }
+  destroy() {
+    for (const e of Object.keys(this._programDataHash))
+      this._programDataHash[e].destroy(), this._programDataHash[e] = null;
+    this._programDataHash = null, this._shaderSyncFunctions = null, this._activeProgram = null, this._renderer = null, this._gl = null;
+  }
+  /**
+   * Creates a function that can be executed that will sync the shader as efficiently as possible.
+   * Overridden by the unsafe eval package if you don't want eval used in your project.
+   * @param shader - the shader to generate the sync function for
+   * @param shaderSystem - the shader system to use
+   * @returns - the generated sync function
+   * @ignore
+   */
+  _generateShaderSync(e, r) {
+    return Je(e, r);
+  }
+  resetState() {
+    this._activeProgram = null;
+  }
+}
+de.extension = {
+  type: [
+    d.WebGLSystem
+  ],
+  name: "shader"
+};
+const ct = {
+  f32: `if (cv !== v) {
+            cu.value = v;
+            gl.uniform1f(location, v);
+        }`,
+  "vec2<f32>": `if (cv[0] !== v[0] || cv[1] !== v[1]) {
+            cv[0] = v[0];
+            cv[1] = v[1];
+            gl.uniform2f(location, v[0], v[1]);
+        }`,
+  "vec3<f32>": `if (cv[0] !== v[0] || cv[1] !== v[1] || cv[2] !== v[2]) {
+            cv[0] = v[0];
+            cv[1] = v[1];
+            cv[2] = v[2];
+            gl.uniform3f(location, v[0], v[1], v[2]);
+        }`,
+  "vec4<f32>": `if (cv[0] !== v[0] || cv[1] !== v[1] || cv[2] !== v[2] || cv[3] !== v[3]) {
+            cv[0] = v[0];
+            cv[1] = v[1];
+            cv[2] = v[2];
+            cv[3] = v[3];
+            gl.uniform4f(location, v[0], v[1], v[2], v[3]);
+        }`,
+  i32: `if (cv !== v) {
+            cu.value = v;
+            gl.uniform1i(location, v);
+        }`,
+  "vec2<i32>": `if (cv[0] !== v[0] || cv[1] !== v[1]) {
+            cv[0] = v[0];
+            cv[1] = v[1];
+            gl.uniform2i(location, v[0], v[1]);
+        }`,
+  "vec3<i32>": `if (cv[0] !== v[0] || cv[1] !== v[1] || cv[2] !== v[2]) {
+            cv[0] = v[0];
+            cv[1] = v[1];
+            cv[2] = v[2];
+            gl.uniform3i(location, v[0], v[1], v[2]);
+        }`,
+  "vec4<i32>": `if (cv[0] !== v[0] || cv[1] !== v[1] || cv[2] !== v[2] || cv[3] !== v[3]) {
+            cv[0] = v[0];
+            cv[1] = v[1];
+            cv[2] = v[2];
+            cv[3] = v[3];
+            gl.uniform4i(location, v[0], v[1], v[2], v[3]);
+        }`,
+  u32: `if (cv !== v) {
+            cu.value = v;
+            gl.uniform1ui(location, v);
+        }`,
+  "vec2<u32>": `if (cv[0] !== v[0] || cv[1] !== v[1]) {
+            cv[0] = v[0];
+            cv[1] = v[1];
+            gl.uniform2ui(location, v[0], v[1]);
+        }`,
+  "vec3<u32>": `if (cv[0] !== v[0] || cv[1] !== v[1] || cv[2] !== v[2]) {
+            cv[0] = v[0];
+            cv[1] = v[1];
+            cv[2] = v[2];
+            gl.uniform3ui(location, v[0], v[1], v[2]);
+        }`,
+  "vec4<u32>": `if (cv[0] !== v[0] || cv[1] !== v[1] || cv[2] !== v[2] || cv[3] !== v[3]) {
+            cv[0] = v[0];
+            cv[1] = v[1];
+            cv[2] = v[2];
+            cv[3] = v[3];
+            gl.uniform4ui(location, v[0], v[1], v[2], v[3]);
+        }`,
+  bool: `if (cv !== v) {
+            cu.value = v;
+            gl.uniform1i(location, v);
+        }`,
+  "vec2<bool>": `if (cv[0] !== v[0] || cv[1] !== v[1]) {
+            cv[0] = v[0];
+            cv[1] = v[1];
+            gl.uniform2i(location, v[0], v[1]);
+        }`,
+  "vec3<bool>": `if (cv[0] !== v[0] || cv[1] !== v[1] || cv[2] !== v[2]) {
+            cv[0] = v[0];
+            cv[1] = v[1];
+            cv[2] = v[2];
+            gl.uniform3i(location, v[0], v[1], v[2]);
+        }`,
+  "vec4<bool>": `if (cv[0] !== v[0] || cv[1] !== v[1] || cv[2] !== v[2] || cv[3] !== v[3]) {
+            cv[0] = v[0];
+            cv[1] = v[1];
+            cv[2] = v[2];
+            cv[3] = v[3];
+            gl.uniform4i(location, v[0], v[1], v[2], v[3]);
+        }`,
+  "mat2x2<f32>": "gl.uniformMatrix2fv(location, false, v);",
+  "mat3x3<f32>": "gl.uniformMatrix3fv(location, false, v);",
+  "mat4x4<f32>": "gl.uniformMatrix4fv(location, false, v);"
+}, ut = {
+  f32: "gl.uniform1fv(location, v);",
+  "vec2<f32>": "gl.uniform2fv(location, v);",
+  "vec3<f32>": "gl.uniform3fv(location, v);",
+  "vec4<f32>": "gl.uniform4fv(location, v);",
+  "mat2x2<f32>": "gl.uniformMatrix2fv(location, false, v);",
+  "mat3x3<f32>": "gl.uniformMatrix3fv(location, false, v);",
+  "mat4x4<f32>": "gl.uniformMatrix4fv(location, false, v);",
+  i32: "gl.uniform1iv(location, v);",
+  "vec2<i32>": "gl.uniform2iv(location, v);",
+  "vec3<i32>": "gl.uniform3iv(location, v);",
+  "vec4<i32>": "gl.uniform4iv(location, v);",
+  u32: "gl.uniform1iv(location, v);",
+  "vec2<u32>": "gl.uniform2iv(location, v);",
+  "vec3<u32>": "gl.uniform3iv(location, v);",
+  "vec4<u32>": "gl.uniform4iv(location, v);",
+  bool: "gl.uniform1iv(location, v);",
+  "vec2<bool>": "gl.uniform2iv(location, v);",
+  "vec3<bool>": "gl.uniform3iv(location, v);",
+  "vec4<bool>": "gl.uniform4iv(location, v);"
+};
+function _t(t, e) {
+  const r = [`
+        var v = null;
+        var cv = null;
+        var cu = null;
+        var t = 0;
+        var gl = renderer.gl;
+        var name = null;
+    `];
+  for (const s in t.uniforms) {
+    if (!e[s]) {
+      t.uniforms[s] instanceof F ? t.uniforms[s].ubo ? r.push(`
+                        renderer.shader.bindUniformBlock(uv.${s}, "${s}");
+                    `) : r.push(`
+                        renderer.shader.updateUniformGroup(uv.${s});
+                    `) : t.uniforms[s] instanceof Q && r.push(`
+                        renderer.shader.bindBufferResource(uv.${s}, "${s}");
+                    `);
+      continue;
+    }
+    const n = t.uniformStructures[s];
+    let i = !1;
+    for (let a = 0; a < y.length; a++) {
+      const o = y[a];
+      if (n.type === o.type && o.test(n)) {
+        r.push(`name = "${s}";`, y[a].uniform), i = !0;
+        break;
+      }
+    }
+    if (!i) {
+      const o = (n.size === 1 ? ct : ut)[n.type].replace("location", `ud["${s}"].location`);
+      r.push(`
+            cu = ud["${s}"];
+            cv = cu.value;
+            v = uv["${s}"];
+            ${o};`);
+    }
+  }
+  return new Function("ud", "uv", "renderer", "syncData", r.join(`
+`));
+}
+class me {
+  /** @param renderer - The renderer this System works for. */
+  constructor(e) {
+    this._cache = {}, this._uniformGroupSyncHash = {}, this._renderer = e, this.gl = null, this._cache = {};
+  }
+  contextChange(e) {
+    this.gl = e;
+  }
+  /**
+   * Uploads the uniforms values to the currently bound shader.
+   * @param group - the uniforms values that be applied to the current shader
+   * @param program
+   * @param syncData
+   * @param syncData.textureCount
+   */
+  updateUniformGroup(e, r, s) {
+    const n = this._renderer.shader._getProgramData(r);
+    (!e.isStatic || e._dirtyId !== n.uniformDirtyGroups[e.uid]) && (n.uniformDirtyGroups[e.uid] = e._dirtyId, this._getUniformSyncFunction(e, r)(n.uniformData, e.uniforms, this._renderer, s));
+  }
+  /**
+   * Overridable by the pixi.js/unsafe-eval package to use static syncUniforms instead.
+   * @param group
+   * @param program
+   */
+  _getUniformSyncFunction(e, r) {
+    var s;
+    return ((s = this._uniformGroupSyncHash[e._signature]) == null ? void 0 : s[r._key]) || this._createUniformSyncFunction(e, r);
+  }
+  _createUniformSyncFunction(e, r) {
+    const s = this._uniformGroupSyncHash[e._signature] || (this._uniformGroupSyncHash[e._signature] = {}), n = this._getSignature(e, r._uniformData, "u");
+    return this._cache[n] || (this._cache[n] = this._generateUniformsSync(e, r._uniformData)), s[r._key] = this._cache[n], s[r._key];
+  }
+  _generateUniformsSync(e, r) {
+    return _t(e, r);
+  }
+  /**
+   * Takes a uniform group and data and generates a unique signature for them.
+   * @param group - The uniform group to get signature of
+   * @param group.uniforms
+   * @param uniformData - Uniform information generated by the shader
+   * @param preFix
+   * @returns Unique signature of the uniform group
+   */
+  _getSignature(e, r, s) {
+    const n = e.uniforms, i = [`${s}-`];
+    for (const a in n)
+      i.push(a), r[a] && i.push(r[a].type);
+    return i.join("-");
+  }
+  /** Destroys this System and removes all its textures. */
+  destroy() {
+    this._renderer = null, this._cache = null;
+  }
+}
+me.extension = {
+  type: [
+    d.WebGLSystem
+  ],
+  name: "uniformGroup"
+};
+function ht(t) {
+  const e = {};
+  if (e.normal = [t.ONE, t.ONE_MINUS_SRC_ALPHA], e.add = [t.ONE, t.ONE], e.multiply = [t.DST_COLOR, t.ONE_MINUS_SRC_ALPHA, t.ONE, t.ONE_MINUS_SRC_ALPHA], e.screen = [t.ONE, t.ONE_MINUS_SRC_COLOR, t.ONE, t.ONE_MINUS_SRC_ALPHA], e.none = [0, 0], e["normal-npm"] = [t.SRC_ALPHA, t.ONE_MINUS_SRC_ALPHA, t.ONE, t.ONE_MINUS_SRC_ALPHA], e["add-npm"] = [t.SRC_ALPHA, t.ONE, t.ONE, t.ONE], e["screen-npm"] = [t.SRC_ALPHA, t.ONE_MINUS_SRC_COLOR, t.ONE, t.ONE_MINUS_SRC_ALPHA], e.erase = [t.ZERO, t.ONE_MINUS_SRC_ALPHA], !(t instanceof S.get().getWebGLRenderingContext()))
+    e.min = [t.ONE, t.ONE, t.ONE, t.ONE, t.MIN, t.MIN], e.max = [t.ONE, t.ONE, t.ONE, t.ONE, t.MAX, t.MAX];
+  else {
+    const s = t.getExtension("EXT_blend_minmax");
+    s && (e.min = [t.ONE, t.ONE, t.ONE, t.ONE, s.MIN_EXT, s.MIN_EXT], e.max = [t.ONE, t.ONE, t.ONE, t.ONE, s.MAX_EXT, s.MAX_EXT]);
+  }
+  return e;
+}
+const ft = 0, lt = 1, dt = 2, mt = 3, Et = 4, bt = 5, Ee = class G {
+  constructor(e) {
+    this._invertFrontFace = !1, this.gl = null, this.stateId = 0, this.polygonOffset = 0, this.blendMode = "none", this._blendEq = !1, this.map = [], this.map[ft] = this.setBlend, this.map[lt] = this.setOffset, this.map[dt] = this.setCullFace, this.map[mt] = this.setDepthTest, this.map[Et] = this.setFrontFace, this.map[bt] = this.setDepthMask, this.checks = [], this.defaultState = O.for2d(), e.renderTarget.onRenderTargetChange.add(this);
+  }
+  onRenderTargetChange(e) {
+    this._invertFrontFace = !e.isRoot, this._cullFace ? this.setFrontFace(this._frontFace) : this._frontFaceDirty = !0;
+  }
+  contextChange(e) {
+    this.gl = e, this.blendModesMap = ht(e), this.resetState();
+  }
+  /**
+   * Sets the current state
+   * @param {*} state - The state to set.
+   */
+  set(e) {
+    if (e || (e = this.defaultState), this.stateId !== e.data) {
+      let r = this.stateId ^ e.data, s = 0;
+      for (; r; )
+        r & 1 && this.map[s].call(this, !!(e.data & 1 << s)), r >>= 1, s++;
+      this.stateId = e.data;
+    }
+    for (let r = 0; r < this.checks.length; r++)
+      this.checks[r](this, e);
+  }
+  /**
+   * Sets the state, when previous state is unknown.
+   * @param {*} state - The state to set
+   */
+  forceState(e) {
+    e || (e = this.defaultState);
+    for (let r = 0; r < this.map.length; r++)
+      this.map[r].call(this, !!(e.data & 1 << r));
+    for (let r = 0; r < this.checks.length; r++)
+      this.checks[r](this, e);
+    this.stateId = e.data;
+  }
+  /**
+   * Sets whether to enable or disable blending.
+   * @param value - Turn on or off WebGl blending.
+   */
+  setBlend(e) {
+    this._updateCheck(G._checkBlendMode, e), this.gl[e ? "enable" : "disable"](this.gl.BLEND);
+  }
+  /**
+   * Sets whether to enable or disable polygon offset fill.
+   * @param value - Turn on or off webgl polygon offset testing.
+   */
+  setOffset(e) {
+    this._updateCheck(G._checkPolygonOffset, e), this.gl[e ? "enable" : "disable"](this.gl.POLYGON_OFFSET_FILL);
+  }
+  /**
+   * Sets whether to enable or disable depth test.
+   * @param value - Turn on or off webgl depth testing.
+   */
+  setDepthTest(e) {
+    this.gl[e ? "enable" : "disable"](this.gl.DEPTH_TEST);
+  }
+  /**
+   * Sets whether to enable or disable depth mask.
+   * @param value - Turn on or off webgl depth mask.
+   */
+  setDepthMask(e) {
+    this.gl.depthMask(e);
+  }
+  /**
+   * Sets whether to enable or disable cull face.
+   * @param {boolean} value - Turn on or off webgl cull face.
+   */
+  setCullFace(e) {
+    this._cullFace = e, this.gl[e ? "enable" : "disable"](this.gl.CULL_FACE), this._cullFace && this._frontFaceDirty && this.setFrontFace(this._frontFace);
+  }
+  /**
+   * Sets the gl front face.
+   * @param {boolean} value - true is clockwise and false is counter-clockwise
+   */
+  setFrontFace(e) {
+    this._frontFace = e, this._frontFaceDirty = !1;
+    const r = this._invertFrontFace ? !e : e;
+    this._glFrontFace !== r && (this._glFrontFace = r, this.gl.frontFace(this.gl[r ? "CW" : "CCW"]));
+  }
+  /**
+   * Sets the blend mode.
+   * @param {number} value - The blend mode to set to.
+   */
+  setBlendMode(e) {
+    if (this.blendModesMap[e] || (e = "normal"), e === this.blendMode)
+      return;
+    this.blendMode = e;
+    const r = this.blendModesMap[e], s = this.gl;
+    r.length === 2 ? s.blendFunc(r[0], r[1]) : s.blendFuncSeparate(r[0], r[1], r[2], r[3]), r.length === 6 ? (this._blendEq = !0, s.blendEquationSeparate(r[4], r[5])) : this._blendEq && (this._blendEq = !1, s.blendEquationSeparate(s.FUNC_ADD, s.FUNC_ADD));
+  }
+  /**
+   * Sets the polygon offset.
+   * @param {number} value - the polygon offset
+   * @param {number} scale - the polygon offset scale
+   */
+  setPolygonOffset(e, r) {
+    this.gl.polygonOffset(e, r);
+  }
+  /** Resets all the logic and disables the VAOs. */
+  resetState() {
+    this._glFrontFace = !1, this._frontFace = !1, this._cullFace = !1, this._frontFaceDirty = !1, this._invertFrontFace = !1, this.gl.frontFace(this.gl.CCW), this.gl.pixelStorei(this.gl.UNPACK_FLIP_Y_WEBGL, !1), this.forceState(this.defaultState), this._blendEq = !0, this.blendMode = "", this.setBlendMode("normal");
+  }
+  /**
+   * Checks to see which updates should be checked based on which settings have been activated.
+   *
+   * For example, if blend is enabled then we should check the blend modes each time the state is changed
+   * or if polygon fill is activated then we need to check if the polygon offset changes.
+   * The idea is that we only check what we have too.
+   * @param func - the checking function to add or remove
+   * @param value - should the check function be added or removed.
+   */
+  _updateCheck(e, r) {
+    const s = this.checks.indexOf(e);
+    r && s === -1 ? this.checks.push(e) : !r && s !== -1 && this.checks.splice(s, 1);
+  }
+  /**
+   * A private little wrapper function that we call to check the blend mode.
+   * @param system - the System to perform the state check on
+   * @param state - the state that the blendMode will pulled from
+   */
+  static _checkBlendMode(e, r) {
+    e.setBlendMode(r.blendMode);
+  }
+  /**
+   * A private little wrapper function that we call to check the polygon offset.
+   * @param system - the System to perform the state check on
+   * @param state - the state that the blendMode will pulled from
+   */
+  static _checkPolygonOffset(e, r) {
+    e.setPolygonOffset(1, r.polygonOffset);
+  }
+  /** @ignore */
+  destroy() {
+    this.gl = null, this.checks.length = 0;
+  }
+};
+Ee.extension = {
+  type: [
+    d.WebGLSystem
+  ],
+  name: "state"
+};
+let St = Ee;
+class pt {
+  constructor(e) {
+    this.target = re.TEXTURE_2D, this.texture = e, this.width = -1, this.height = -1, this.type = h.UNSIGNED_BYTE, this.internalFormat = D.RGBA, this.format = D.RGBA, this.samplerType = 0;
+  }
+}
+const gt = {
+  id: "buffer",
+  upload(t, e, r) {
+    e.width === t.width || e.height === t.height ? r.texSubImage2D(
+      r.TEXTURE_2D,
+      0,
+      0,
+      0,
+      t.width,
+      t.height,
+      e.format,
+      e.type,
+      t.resource
+    ) : r.texImage2D(
+      e.target,
+      0,
+      e.internalFormat,
+      t.width,
+      t.height,
+      0,
+      e.format,
+      e.type,
+      t.resource
+    ), e.width = t.width, e.height = t.height;
+  }
+}, Rt = {
+  "bc1-rgba-unorm": !0,
+  "bc1-rgba-unorm-srgb": !0,
+  "bc2-rgba-unorm": !0,
+  "bc2-rgba-unorm-srgb": !0,
+  "bc3-rgba-unorm": !0,
+  "bc3-rgba-unorm-srgb": !0,
+  "bc4-r-unorm": !0,
+  "bc4-r-snorm": !0,
+  "bc5-rg-unorm": !0,
+  "bc5-rg-snorm": !0,
+  "bc6h-rgb-ufloat": !0,
+  "bc6h-rgb-float": !0,
+  "bc7-rgba-unorm": !0,
+  "bc7-rgba-unorm-srgb": !0,
+  // ETC2 compressed formats usable if "texture-compression-etc2" is both
+  // supported by the device/user agent and enabled in requestDevice.
+  "etc2-rgb8unorm": !0,
+  "etc2-rgb8unorm-srgb": !0,
+  "etc2-rgb8a1unorm": !0,
+  "etc2-rgb8a1unorm-srgb": !0,
+  "etc2-rgba8unorm": !0,
+  "etc2-rgba8unorm-srgb": !0,
+  "eac-r11unorm": !0,
+  "eac-r11snorm": !0,
+  "eac-rg11unorm": !0,
+  "eac-rg11snorm": !0,
+  // ASTC compressed formats usable if "texture-compression-astc" is both
+  // supported by the device/user agent and enabled in requestDevice.
+  "astc-4x4-unorm": !0,
+  "astc-4x4-unorm-srgb": !0,
+  "astc-5x4-unorm": !0,
+  "astc-5x4-unorm-srgb": !0,
+  "astc-5x5-unorm": !0,
+  "astc-5x5-unorm-srgb": !0,
+  "astc-6x5-unorm": !0,
+  "astc-6x5-unorm-srgb": !0,
+  "astc-6x6-unorm": !0,
+  "astc-6x6-unorm-srgb": !0,
+  "astc-8x5-unorm": !0,
+  "astc-8x5-unorm-srgb": !0,
+  "astc-8x6-unorm": !0,
+  "astc-8x6-unorm-srgb": !0,
+  "astc-8x8-unorm": !0,
+  "astc-8x8-unorm-srgb": !0,
+  "astc-10x5-unorm": !0,
+  "astc-10x5-unorm-srgb": !0,
+  "astc-10x6-unorm": !0,
+  "astc-10x6-unorm-srgb": !0,
+  "astc-10x8-unorm": !0,
+  "astc-10x8-unorm-srgb": !0,
+  "astc-10x10-unorm": !0,
+  "astc-10x10-unorm-srgb": !0,
+  "astc-12x10-unorm": !0,
+  "astc-12x10-unorm-srgb": !0,
+  "astc-12x12-unorm": !0,
+  "astc-12x12-unorm-srgb": !0
+}, xt = {
+  id: "compressed",
+  upload(t, e, r) {
+    r.pixelStorei(r.UNPACK_ALIGNMENT, 4);
+    let s = t.pixelWidth, n = t.pixelHeight;
+    const i = !!Rt[t.format];
+    for (let a = 0; a < t.resource.length; a++) {
+      const o = t.resource[a];
+      i ? r.compressedTexImage2D(
+        r.TEXTURE_2D,
+        a,
+        e.internalFormat,
+        s,
+        n,
+        0,
+        o
+      ) : r.texImage2D(
+        r.TEXTURE_2D,
+        a,
+        e.internalFormat,
+        s,
+        n,
+        0,
+        e.format,
+        e.type,
+        o
+      ), s = Math.max(s >> 1, 1), n = Math.max(n >> 1, 1);
+    }
+  }
+}, be = {
+  id: "image",
+  upload(t, e, r, s) {
+    const n = e.width, i = e.height, a = t.pixelWidth, o = t.pixelHeight, c = t.resourceWidth, u = t.resourceHeight;
+    c < a || u < o ? ((n !== a || i !== o) && r.texImage2D(
+      e.target,
+      0,
+      e.internalFormat,
+      a,
+      o,
+      0,
+      e.format,
+      e.type,
+      null
+    ), s === 2 ? r.texSubImage2D(
+      r.TEXTURE_2D,
+      0,
+      0,
+      0,
+      c,
+      u,
+      e.format,
+      e.type,
+      t.resource
+    ) : r.texSubImage2D(
+      r.TEXTURE_2D,
+      0,
+      0,
+      0,
+      e.format,
+      e.type,
+      t.resource
+    )) : n === a && i === o ? r.texSubImage2D(
+      r.TEXTURE_2D,
+      0,
+      0,
+      0,
+      e.format,
+      e.type,
+      t.resource
+    ) : s === 2 ? r.texImage2D(
+      e.target,
+      0,
+      e.internalFormat,
+      a,
+      o,
+      0,
+      e.format,
+      e.type,
+      t.resource
+    ) : r.texImage2D(
+      e.target,
+      0,
+      e.internalFormat,
+      e.format,
+      e.type,
+      t.resource
+    ), e.width = a, e.height = o;
+  }
+}, Tt = {
+  id: "video",
+  upload(t, e, r, s) {
+    if (!t.isValid) {
+      r.texImage2D(
+        e.target,
+        0,
+        e.internalFormat,
+        1,
+        1,
+        0,
+        e.format,
+        e.type,
+        null
+      );
+      return;
+    }
+    be.upload(t, e, r, s);
+  }
+}, W = {
+  linear: 9729,
+  nearest: 9728
+}, vt = {
+  linear: {
+    linear: 9987,
+    nearest: 9985
+  },
+  nearest: {
+    linear: 9986,
+    nearest: 9984
+  }
+}, I = {
+  "clamp-to-edge": 33071,
+  repeat: 10497,
+  "mirror-repeat": 33648
+}, Bt = {
+  never: 512,
+  less: 513,
+  equal: 514,
+  "less-equal": 515,
+  greater: 516,
+  "not-equal": 517,
+  "greater-equal": 518,
+  always: 519
+};
+function j(t, e, r, s, n, i, a, o) {
+  const c = i;
+  if (!o || t.addressModeU !== "repeat" || t.addressModeV !== "repeat" || t.addressModeW !== "repeat") {
+    const u = I[a ? "clamp-to-edge" : t.addressModeU], _ = I[a ? "clamp-to-edge" : t.addressModeV], f = I[a ? "clamp-to-edge" : t.addressModeW];
+    e[n](c, e.TEXTURE_WRAP_S, u), e[n](c, e.TEXTURE_WRAP_T, _), e.TEXTURE_WRAP_R && e[n](c, e.TEXTURE_WRAP_R, f);
+  }
+  if ((!o || t.magFilter !== "linear") && e[n](c, e.TEXTURE_MAG_FILTER, W[t.magFilter]), r) {
+    if (!o || t.mipmapFilter !== "linear") {
+      const u = vt[t.minFilter][t.mipmapFilter];
+      e[n](c, e.TEXTURE_MIN_FILTER, u);
+    }
+  } else
+    e[n](c, e.TEXTURE_MIN_FILTER, W[t.minFilter]);
+  if (s && t.maxAnisotropy > 1) {
+    const u = Math.min(t.maxAnisotropy, e.getParameter(s.MAX_TEXTURE_MAX_ANISOTROPY_EXT));
+    e[n](c, s.TEXTURE_MAX_ANISOTROPY_EXT, u);
+  }
+  t.compare && e[n](c, e.TEXTURE_COMPARE_FUNC, Bt[t.compare]);
+}
+function At(t) {
+  return {
+    // 8-bit formats
+    r8unorm: t.RED,
+    r8snorm: t.RED,
+    r8uint: t.RED,
+    r8sint: t.RED,
+    // 16-bit formats
+    r16uint: t.RED,
+    r16sint: t.RED,
+    r16float: t.RED,
+    rg8unorm: t.RG,
+    rg8snorm: t.RG,
+    rg8uint: t.RG,
+    rg8sint: t.RG,
+    // 32-bit formats
+    r32uint: t.RED,
+    r32sint: t.RED,
+    r32float: t.RED,
+    rg16uint: t.RG,
+    rg16sint: t.RG,
+    rg16float: t.RG,
+    rgba8unorm: t.RGBA,
+    "rgba8unorm-srgb": t.RGBA,
+    // Packed 32-bit formats
+    rgba8snorm: t.RGBA,
+    rgba8uint: t.RGBA,
+    rgba8sint: t.RGBA,
+    bgra8unorm: t.RGBA,
+    "bgra8unorm-srgb": t.RGBA,
+    rgb9e5ufloat: t.RGB,
+    rgb10a2unorm: t.RGBA,
+    rg11b10ufloat: t.RGB,
+    // 64-bit formats
+    rg32uint: t.RG,
+    rg32sint: t.RG,
+    rg32float: t.RG,
+    rgba16uint: t.RGBA,
+    rgba16sint: t.RGBA,
+    rgba16float: t.RGBA,
+    // 128-bit formats
+    rgba32uint: t.RGBA,
+    rgba32sint: t.RGBA,
+    rgba32float: t.RGBA,
+    // Depth/stencil formats
+    stencil8: t.STENCIL_INDEX8,
+    depth16unorm: t.DEPTH_COMPONENT,
+    depth24plus: t.DEPTH_COMPONENT,
+    "depth24plus-stencil8": t.DEPTH_STENCIL,
+    depth32float: t.DEPTH_COMPONENT,
+    "depth32float-stencil8": t.DEPTH_STENCIL
+  };
+}
+function Nt(t, e) {
+  let r = {}, s = t.RGBA;
+  return t instanceof S.get().getWebGLRenderingContext() ? e.srgb && (r = {
+    "rgba8unorm-srgb": e.srgb.SRGB8_ALPHA8_EXT,
+    "bgra8unorm-srgb": e.srgb.SRGB8_ALPHA8_EXT
+  }) : (r = {
+    "rgba8unorm-srgb": t.SRGB8_ALPHA8,
+    "bgra8unorm-srgb": t.SRGB8_ALPHA8
+  }, s = t.RGBA8), {
+    // 8-bit formats
+    r8unorm: t.R8,
+    r8snorm: t.R8_SNORM,
+    r8uint: t.R8UI,
+    r8sint: t.R8I,
+    // 16-bit formats
+    r16uint: t.R16UI,
+    r16sint: t.R16I,
+    r16float: t.R16F,
+    rg8unorm: t.RG8,
+    rg8snorm: t.RG8_SNORM,
+    rg8uint: t.RG8UI,
+    rg8sint: t.RG8I,
+    // 32-bit formats
+    r32uint: t.R32UI,
+    r32sint: t.R32I,
+    r32float: t.R32F,
+    rg16uint: t.RG16UI,
+    rg16sint: t.RG16I,
+    rg16float: t.RG16F,
+    rgba8unorm: t.RGBA,
+    ...r,
+    // Packed 32-bit formats
+    rgba8snorm: t.RGBA8_SNORM,
+    rgba8uint: t.RGBA8UI,
+    rgba8sint: t.RGBA8I,
+    bgra8unorm: s,
+    rgb9e5ufloat: t.RGB9_E5,
+    rgb10a2unorm: t.RGB10_A2,
+    rg11b10ufloat: t.R11F_G11F_B10F,
+    // 64-bit formats
+    rg32uint: t.RG32UI,
+    rg32sint: t.RG32I,
+    rg32float: t.RG32F,
+    rgba16uint: t.RGBA16UI,
+    rgba16sint: t.RGBA16I,
+    rgba16float: t.RGBA16F,
+    // 128-bit formats
+    rgba32uint: t.RGBA32UI,
+    rgba32sint: t.RGBA32I,
+    rgba32float: t.RGBA32F,
+    // Depth/stencil formats
+    stencil8: t.STENCIL_INDEX8,
+    depth16unorm: t.DEPTH_COMPONENT16,
+    depth24plus: t.DEPTH_COMPONENT24,
+    "depth24plus-stencil8": t.DEPTH24_STENCIL8,
+    depth32float: t.DEPTH_COMPONENT32F,
+    "depth32float-stencil8": t.DEPTH32F_STENCIL8,
+    // Compressed formats
+    ...e.s3tc ? {
+      "bc1-rgba-unorm": e.s3tc.COMPRESSED_RGBA_S3TC_DXT1_EXT,
+      "bc2-rgba-unorm": e.s3tc.COMPRESSED_RGBA_S3TC_DXT3_EXT,
+      "bc3-rgba-unorm": e.s3tc.COMPRESSED_RGBA_S3TC_DXT5_EXT
+    } : {},
+    ...e.s3tc_sRGB ? {
+      "bc1-rgba-unorm-srgb": e.s3tc_sRGB.COMPRESSED_SRGB_ALPHA_S3TC_DXT1_EXT,
+      "bc2-rgba-unorm-srgb": e.s3tc_sRGB.COMPRESSED_SRGB_ALPHA_S3TC_DXT3_EXT,
+      "bc3-rgba-unorm-srgb": e.s3tc_sRGB.COMPRESSED_SRGB_ALPHA_S3TC_DXT5_EXT
+    } : {},
+    ...e.rgtc ? {
+      "bc4-r-unorm": e.rgtc.COMPRESSED_RED_RGTC1_EXT,
+      "bc4-r-snorm": e.rgtc.COMPRESSED_SIGNED_RED_RGTC1_EXT,
+      "bc5-rg-unorm": e.rgtc.COMPRESSED_RED_GREEN_RGTC2_EXT,
+      "bc5-rg-snorm": e.rgtc.COMPRESSED_SIGNED_RED_GREEN_RGTC2_EXT
+    } : {},
+    ...e.bptc ? {
+      "bc6h-rgb-float": e.bptc.COMPRESSED_RGB_BPTC_SIGNED_FLOAT_EXT,
+      "bc6h-rgb-ufloat": e.bptc.COMPRESSED_RGB_BPTC_UNSIGNED_FLOAT_EXT,
+      "bc7-rgba-unorm": e.bptc.COMPRESSED_RGBA_BPTC_UNORM_EXT,
+      "bc7-rgba-unorm-srgb": e.bptc.COMPRESSED_SRGB_ALPHA_BPTC_UNORM_EXT
+    } : {},
+    ...e.etc ? {
+      "etc2-rgb8unorm": e.etc.COMPRESSED_RGB8_ETC2,
+      "etc2-rgb8unorm-srgb": e.etc.COMPRESSED_SRGB8_ETC2,
+      "etc2-rgb8a1unorm": e.etc.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2,
+      "etc2-rgb8a1unorm-srgb": e.etc.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2,
+      "etc2-rgba8unorm": e.etc.COMPRESSED_RGBA8_ETC2_EAC,
+      "etc2-rgba8unorm-srgb": e.etc.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC,
+      "eac-r11unorm": e.etc.COMPRESSED_R11_EAC,
+      // 'eac-r11snorm'
+      "eac-rg11unorm": e.etc.COMPRESSED_SIGNED_RG11_EAC
+      // 'eac-rg11snorm'
+    } : {},
+    ...e.astc ? {
+      "astc-4x4-unorm": e.astc.COMPRESSED_RGBA_ASTC_4x4_KHR,
+      "astc-4x4-unorm-srgb": e.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_4x4_KHR,
+      "astc-5x4-unorm": e.astc.COMPRESSED_RGBA_ASTC_5x4_KHR,
+      "astc-5x4-unorm-srgb": e.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_5x4_KHR,
+      "astc-5x5-unorm": e.astc.COMPRESSED_RGBA_ASTC_5x5_KHR,
+      "astc-5x5-unorm-srgb": e.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_5x5_KHR,
+      "astc-6x5-unorm": e.astc.COMPRESSED_RGBA_ASTC_6x5_KHR,
+      "astc-6x5-unorm-srgb": e.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_6x5_KHR,
+      "astc-6x6-unorm": e.astc.COMPRESSED_RGBA_ASTC_6x6_KHR,
+      "astc-6x6-unorm-srgb": e.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_6x6_KHR,
+      "astc-8x5-unorm": e.astc.COMPRESSED_RGBA_ASTC_8x5_KHR,
+      "astc-8x5-unorm-srgb": e.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_8x5_KHR,
+      "astc-8x6-unorm": e.astc.COMPRESSED_RGBA_ASTC_8x6_KHR,
+      "astc-8x6-unorm-srgb": e.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_8x6_KHR,
+      "astc-8x8-unorm": e.astc.COMPRESSED_RGBA_ASTC_8x8_KHR,
+      "astc-8x8-unorm-srgb": e.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_8x8_KHR,
+      "astc-10x5-unorm": e.astc.COMPRESSED_RGBA_ASTC_10x5_KHR,
+      "astc-10x5-unorm-srgb": e.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_10x5_KHR,
+      "astc-10x6-unorm": e.astc.COMPRESSED_RGBA_ASTC_10x6_KHR,
+      "astc-10x6-unorm-srgb": e.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_10x6_KHR,
+      "astc-10x8-unorm": e.astc.COMPRESSED_RGBA_ASTC_10x8_KHR,
+      "astc-10x8-unorm-srgb": e.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_10x8_KHR,
+      "astc-10x10-unorm": e.astc.COMPRESSED_RGBA_ASTC_10x10_KHR,
+      "astc-10x10-unorm-srgb": e.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_10x10_KHR,
+      "astc-12x10-unorm": e.astc.COMPRESSED_RGBA_ASTC_12x10_KHR,
+      "astc-12x10-unorm-srgb": e.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_12x10_KHR,
+      "astc-12x12-unorm": e.astc.COMPRESSED_RGBA_ASTC_12x12_KHR,
+      "astc-12x12-unorm-srgb": e.astc.COMPRESSED_SRGB8_ALPHA8_ASTC_12x12_KHR
+    } : {}
+  };
+}
+function yt(t) {
+  return {
+    // 8-bit formats
+    r8unorm: t.UNSIGNED_BYTE,
+    r8snorm: t.BYTE,
+    r8uint: t.UNSIGNED_BYTE,
+    r8sint: t.BYTE,
+    // 16-bit formats
+    r16uint: t.UNSIGNED_SHORT,
+    r16sint: t.SHORT,
+    r16float: t.HALF_FLOAT,
+    rg8unorm: t.UNSIGNED_BYTE,
+    rg8snorm: t.BYTE,
+    rg8uint: t.UNSIGNED_BYTE,
+    rg8sint: t.BYTE,
+    // 32-bit formats
+    r32uint: t.UNSIGNED_INT,
+    r32sint: t.INT,
+    r32float: t.FLOAT,
+    rg16uint: t.UNSIGNED_SHORT,
+    rg16sint: t.SHORT,
+    rg16float: t.HALF_FLOAT,
+    rgba8unorm: t.UNSIGNED_BYTE,
+    "rgba8unorm-srgb": t.UNSIGNED_BYTE,
+    // Packed 32-bit formats
+    rgba8snorm: t.BYTE,
+    rgba8uint: t.UNSIGNED_BYTE,
+    rgba8sint: t.BYTE,
+    bgra8unorm: t.UNSIGNED_BYTE,
+    "bgra8unorm-srgb": t.UNSIGNED_BYTE,
+    rgb9e5ufloat: t.UNSIGNED_INT_5_9_9_9_REV,
+    rgb10a2unorm: t.UNSIGNED_INT_2_10_10_10_REV,
+    rg11b10ufloat: t.UNSIGNED_INT_10F_11F_11F_REV,
+    // 64-bit formats
+    rg32uint: t.UNSIGNED_INT,
+    rg32sint: t.INT,
+    rg32float: t.FLOAT,
+    rgba16uint: t.UNSIGNED_SHORT,
+    rgba16sint: t.SHORT,
+    rgba16float: t.HALF_FLOAT,
+    // 128-bit formats
+    rgba32uint: t.UNSIGNED_INT,
+    rgba32sint: t.INT,
+    rgba32float: t.FLOAT,
+    // Depth/stencil formats
+    stencil8: t.UNSIGNED_BYTE,
+    depth16unorm: t.UNSIGNED_SHORT,
+    depth24plus: t.UNSIGNED_INT,
+    "depth24plus-stencil8": t.UNSIGNED_INT_24_8,
+    depth32float: t.FLOAT,
+    "depth32float-stencil8": t.FLOAT_32_UNSIGNED_INT_24_8_REV
+  };
+}
+const Ct = 4;
+class Se {
+  constructor(e) {
+    this.managedTextures = [], this._glTextures = /* @__PURE__ */ Object.create(null), this._glSamplers = /* @__PURE__ */ Object.create(null), this._boundTextures = [], this._activeTextureLocation = -1, this._boundSamplers = /* @__PURE__ */ Object.create(null), this._uploads = {
+      image: be,
+      buffer: gt,
+      video: Tt,
+      compressed: xt
+    }, this._premultiplyAlpha = !1, this._useSeparateSamplers = !1, this._renderer = e, this._renderer.renderableGC.addManagedHash(this, "_glTextures"), this._renderer.renderableGC.addManagedHash(this, "_glSamplers");
+  }
+  contextChange(e) {
+    this._gl = e, this._mapFormatToInternalFormat || (this._mapFormatToInternalFormat = Nt(e, this._renderer.context.extensions), this._mapFormatToType = yt(e), this._mapFormatToFormat = At(e)), this._glTextures = /* @__PURE__ */ Object.create(null), this._glSamplers = /* @__PURE__ */ Object.create(null), this._boundSamplers = /* @__PURE__ */ Object.create(null), this._premultiplyAlpha = !1;
+    for (let r = 0; r < 16; r++)
+      this.bind(b.EMPTY, r);
+  }
+  /**
+   * Initializes a texture source, if it has already been initialized nothing will happen.
+   * @param source - The texture source to initialize.
+   * @returns The initialized texture source.
+   */
+  initSource(e) {
+    this.bind(e);
+  }
+  bind(e, r = 0) {
+    const s = e.source;
+    e ? (this.bindSource(s, r), this._useSeparateSamplers && this._bindSampler(s.style, r)) : (this.bindSource(null, r), this._useSeparateSamplers && this._bindSampler(null, r));
+  }
+  bindSource(e, r = 0) {
+    const s = this._gl;
+    if (e._touched = this._renderer.textureGC.count, this._boundTextures[r] !== e) {
+      this._boundTextures[r] = e, this._activateLocation(r), e || (e = b.EMPTY.source);
+      const n = this.getGlSource(e);
+      s.bindTexture(n.target, n.texture);
+    }
+  }
+  _bindSampler(e, r = 0) {
+    const s = this._gl;
+    if (!e) {
+      this._boundSamplers[r] = null, s.bindSampler(r, null);
+      return;
+    }
+    const n = this._getGlSampler(e);
+    this._boundSamplers[r] !== n && (this._boundSamplers[r] = n, s.bindSampler(r, n));
+  }
+  unbind(e) {
+    const r = e.source, s = this._boundTextures, n = this._gl;
+    for (let i = 0; i < s.length; i++)
+      if (s[i] === r) {
+        this._activateLocation(i);
+        const a = this.getGlSource(r);
+        n.bindTexture(a.target, null), s[i] = null;
+      }
+  }
+  _activateLocation(e) {
+    this._activeTextureLocation !== e && (this._activeTextureLocation = e, this._gl.activeTexture(this._gl.TEXTURE0 + e));
+  }
+  _initSource(e) {
+    const r = this._gl, s = new pt(r.createTexture());
+    if (s.type = this._mapFormatToType[e.format], s.internalFormat = this._mapFormatToInternalFormat[e.format], s.format = this._mapFormatToFormat[e.format], e.autoGenerateMipmaps && (this._renderer.context.supports.nonPowOf2mipmaps || e.isPowerOfTwo)) {
+      const n = Math.max(e.width, e.height);
+      e.mipLevelCount = Math.floor(Math.log2(n)) + 1;
+    }
+    return this._glTextures[e.uid] = s, this.managedTextures.includes(e) || (e.on("update", this.onSourceUpdate, this), e.on("resize", this.onSourceUpdate, this), e.on("styleChange", this.onStyleChange, this), e.on("destroy", this.onSourceDestroy, this), e.on("unload", this.onSourceUnload, this), e.on("updateMipmaps", this.onUpdateMipmaps, this), this.managedTextures.push(e)), this.onSourceUpdate(e), this.updateStyle(e, !1), s;
+  }
+  onStyleChange(e) {
+    this.updateStyle(e, !1);
+  }
+  updateStyle(e, r) {
+    const s = this._gl, n = this.getGlSource(e);
+    s.bindTexture(s.TEXTURE_2D, n.texture), this._boundTextures[this._activeTextureLocation] = e, j(
+      e.style,
+      s,
+      e.mipLevelCount > 1,
+      this._renderer.context.extensions.anisotropicFiltering,
+      "texParameteri",
+      s.TEXTURE_2D,
+      // will force a clamp to edge if the texture is not a power of two
+      !this._renderer.context.supports.nonPowOf2wrapping && !e.isPowerOfTwo,
+      r
+    );
+  }
+  onSourceUnload(e) {
+    const r = this._glTextures[e.uid];
+    r && (this.unbind(e), this._glTextures[e.uid] = null, this._gl.deleteTexture(r.texture));
+  }
+  onSourceUpdate(e) {
+    const r = this._gl, s = this.getGlSource(e);
+    r.bindTexture(r.TEXTURE_2D, s.texture), this._boundTextures[this._activeTextureLocation] = e;
+    const n = e.alphaMode === "premultiply-alpha-on-upload";
+    this._premultiplyAlpha !== n && (this._premultiplyAlpha = n, r.pixelStorei(r.UNPACK_PREMULTIPLY_ALPHA_WEBGL, n)), this._uploads[e.uploadMethodId] ? this._uploads[e.uploadMethodId].upload(e, s, r, this._renderer.context.webGLVersion) : r.texImage2D(r.TEXTURE_2D, 0, r.RGBA, e.pixelWidth, e.pixelHeight, 0, r.RGBA, r.UNSIGNED_BYTE, null), e.autoGenerateMipmaps && e.mipLevelCount > 1 && this.onUpdateMipmaps(e, !1);
+  }
+  onUpdateMipmaps(e, r = !0) {
+    r && this.bindSource(e, 0);
+    const s = this.getGlSource(e);
+    this._gl.generateMipmap(s.target);
+  }
+  onSourceDestroy(e) {
+    e.off("destroy", this.onSourceDestroy, this), e.off("update", this.onSourceUpdate, this), e.off("resize", this.onSourceUpdate, this), e.off("unload", this.onSourceUnload, this), e.off("styleChange", this.onStyleChange, this), e.off("updateMipmaps", this.onUpdateMipmaps, this), this.managedTextures.splice(this.managedTextures.indexOf(e), 1), this.onSourceUnload(e);
+  }
+  _initSampler(e) {
+    const r = this._gl, s = this._gl.createSampler();
+    return this._glSamplers[e._resourceId] = s, j(
+      e,
+      r,
+      this._boundTextures[this._activeTextureLocation].mipLevelCount > 1,
+      this._renderer.context.extensions.anisotropicFiltering,
+      "samplerParameteri",
+      s,
+      !1,
+      !0
+    ), this._glSamplers[e._resourceId];
+  }
+  _getGlSampler(e) {
+    return this._glSamplers[e._resourceId] || this._initSampler(e);
+  }
+  getGlSource(e) {
+    return this._glTextures[e.uid] || this._initSource(e);
+  }
+  generateCanvas(e) {
+    const { pixels: r, width: s, height: n } = this.getPixels(e), i = S.get().createCanvas();
+    i.width = s, i.height = n;
+    const a = i.getContext("2d");
+    if (a) {
+      const o = a.createImageData(s, n);
+      o.data.set(r), a.putImageData(o, 0, 0);
+    }
+    return i;
+  }
+  getPixels(e) {
+    const r = e.source.resolution, s = e.frame, n = Math.max(Math.round(s.width * r), 1), i = Math.max(Math.round(s.height * r), 1), a = new Uint8Array(Ct * n * i), o = this._renderer, c = o.renderTarget.getRenderTarget(e), u = o.renderTarget.getGpuRenderTarget(c), _ = o.gl;
+    return _.bindFramebuffer(_.FRAMEBUFFER, u.resolveTargetFramebuffer), _.readPixels(
+      Math.round(s.x * r),
+      Math.round(s.y * r),
+      n,
+      i,
+      _.RGBA,
+      _.UNSIGNED_BYTE,
+      a
+    ), { pixels: new Uint8ClampedArray(a.buffer), width: n, height: i };
+  }
+  destroy() {
+    this.managedTextures.slice().forEach((e) => this.onSourceDestroy(e)), this.managedTextures = null, this._glTextures = null, this._glSamplers = null, this._boundTextures = null, this._boundSamplers = null, this._mapFormatToInternalFormat = null, this._mapFormatToType = null, this._mapFormatToFormat = null, this._uploads = null, this._renderer = null;
+  }
+  resetState() {
+    this._activeTextureLocation = -1, this._boundTextures.fill(b.EMPTY.source), this._boundSamplers = /* @__PURE__ */ Object.create(null);
+    const e = this._gl;
+    this._premultiplyAlpha = !1, e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL, this._premultiplyAlpha);
+  }
+}
+Se.extension = {
+  type: [
+    d.WebGLSystem
+  ],
+  name: "texture"
+};
+class pe {
+  contextChange(e) {
+    const r = new F({
+      uColor: { value: new Float32Array([1, 1, 1, 1]), type: "vec4<f32>" },
+      uTransformMatrix: { value: new z(), type: "mat3x3<f32>" },
+      uRound: { value: 0, type: "f32" }
+    }), s = e.limits.maxBatchableTextures, n = Y({
+      name: "graphics",
+      bits: [
+        ye,
+        Ce(s),
+        Z,
+        q
+      ]
+    });
+    this.shader = new U({
+      glProgram: n,
+      resources: {
+        localUniforms: r,
+        batchSamplers: Ie(s)
+      }
+    });
+  }
+  execute(e, r) {
+    const s = r.context, n = s.customShader || this.shader, i = e.renderer, a = i.graphicsContext, {
+      batcher: o,
+      instructions: c
+    } = a.getContextRenderData(s);
+    n.groups[0] = i.globalUniforms.bindGroup, i.state.set(e.state), i.shader.bind(n), i.geometry.bind(o.geometry, n.glProgram);
+    const u = c.instructions;
+    for (let _ = 0; _ < c.instructionSize; _++) {
+      const f = u[_];
+      if (f.size) {
+        for (let l = 0; l < f.textures.count; l++)
+          i.texture.bind(f.textures.textures[l], l);
+        i.geometry.draw(f.topology, f.size, f.start);
+      }
+    }
+  }
+  destroy() {
+    this.shader.destroy(!0), this.shader = null;
+  }
+}
+pe.extension = {
+  type: [
+    d.WebGLPipesAdaptor
+  ],
+  name: "graphics"
+};
+class ge {
+  init() {
+    const e = Y({
+      name: "mesh",
+      bits: [
+        Z,
+        He,
+        q
+      ]
+    });
+    this._shader = new U({
+      glProgram: e,
+      resources: {
+        uTexture: b.EMPTY.source,
+        textureUniforms: {
+          uTextureMatrix: { type: "mat3x3<f32>", value: new z() }
+        }
+      }
+    });
+  }
+  execute(e, r) {
+    const s = e.renderer;
+    let n = r._shader;
+    if (n) {
+      if (!n.glProgram) {
+        m("Mesh shader has no glProgram", r.shader);
+        return;
+      }
+    } else {
+      n = this._shader;
+      const i = r.texture, a = i.source;
+      n.resources.uTexture = a, n.resources.uSampler = a.style, n.resources.textureUniforms.uniforms.uTextureMatrix = i.textureMatrix.mapCoord;
+    }
+    n.groups[100] = s.globalUniforms.bindGroup, n.groups[101] = e.localUniformsBindGroup, s.encoder.draw({
+      geometry: r._geometry,
+      shader: n,
+      state: r.state
+    });
+  }
+  destroy() {
+    this._shader.destroy(!0), this._shader = null;
+  }
+}
+ge.extension = {
+  type: [
+    d.WebGLPipesAdaptor
+  ],
+  name: "mesh"
+};
+const It = [
+  ...we,
+  _e,
+  $e,
+  Xe,
+  oe,
+  ee,
+  Se,
+  he,
+  se,
+  me,
+  de,
+  ae,
+  St,
+  ce,
+  ie
+], Dt = [...Ve], Gt = [J, ge, pe], Re = [], xe = [], Te = [];
+T.handleByNamedList(d.WebGLSystem, Re);
+T.handleByNamedList(d.WebGLPipes, xe);
+T.handleByNamedList(d.WebGLPipesAdaptor, Te);
+T.add(...It, ...Dt, ...Gt);
+class Pt extends De {
+  constructor() {
+    const e = {
+      name: "webgl",
+      type: Ge.WEBGL,
+      systems: Re,
+      renderPipes: xe,
+      renderPipeAdaptors: Te
+    };
+    super(e);
+  }
+}
+export {
+  Pt as WebGLRenderer
+};

src/backend/gradio_polygonannotator/templates/component/WebGPURenderer-scPngJ2c.js

@@ -0,0 +1,1656 @@
+import { g as E, E as p, f as ae, D as B, S as C, B as T, b as ue, c as L, d as M, w as v, h as y, i as ce, j as de, k as A, M as k, l as D, m as he, o as pe, p as H, q as z, s as w, A as le, R as fe, e as S } from "./Index-Ct_1BCRd.js";
+import { S as F, l as ge, a as me } from "./colorToUniform-zJcCVLeu.js";
+import { c as _e, u as be, U as ye, B as xe, G as Ge, e as Be, R as Se, t as Pe, S as Te, a as Ce } from "./SharedSystems-DVDwWST4.js";
+import { C as R } from "./CanvasPool-CO7699qB.js";
+const x = F.for2d();
+class O {
+  start(e, t, r) {
+    const s = e.renderer, i = s.encoder, n = r.gpuProgram;
+    this._shader = r, this._geometry = t, i.setGeometry(t, n), x.blendMode = "normal", s.pipeline.getPipeline(
+      t,
+      n,
+      x
+    );
+    const o = s.globalUniforms.bindGroup;
+    i.resetBindGroup(1), i.setBindGroup(0, o, n);
+  }
+  execute(e, t) {
+    const r = this._shader.gpuProgram, s = e.renderer, i = s.encoder;
+    if (!t.bindGroup) {
+      const u = t.textures;
+      t.bindGroup = E(
+        u.textures,
+        u.count,
+        s.limits.maxBatchableTextures
+      );
+    }
+    x.blendMode = t.blendMode;
+    const n = s.bindGroup.getBindGroup(
+      t.bindGroup,
+      r,
+      1
+    ), o = s.pipeline.getPipeline(
+      this._geometry,
+      r,
+      x,
+      t.topology
+    );
+    t.bindGroup._touch(s.textureGC.count), i.setPipeline(o), i.renderPassEncoder.setBindGroup(1, n), i.renderPassEncoder.drawIndexed(t.size, 1, t.start);
+  }
+}
+O.extension = {
+  type: [
+    p.WebGPUPipesAdaptor
+  ],
+  name: "batch"
+};
+class I {
+  constructor(e) {
+    this._hash = /* @__PURE__ */ Object.create(null), this._renderer = e, this._renderer.renderableGC.addManagedHash(this, "_hash");
+  }
+  contextChange(e) {
+    this._gpu = e;
+  }
+  getBindGroup(e, t, r) {
+    return e._updateKey(), this._hash[e._key] || this._createBindGroup(e, t, r);
+  }
+  _createBindGroup(e, t, r) {
+    const s = this._gpu.device, i = t.layout[r], n = [], o = this._renderer;
+    for (const l in i) {
+      const h = e.resources[l] ?? e.resources[i[l]];
+      let f;
+      if (h._resourceType === "uniformGroup") {
+        const d = h;
+        o.ubo.updateUniformGroup(d);
+        const _ = d.buffer;
+        f = {
+          buffer: o.buffer.getGPUBuffer(_),
+          offset: 0,
+          size: _.descriptor.size
+        };
+      } else if (h._resourceType === "buffer") {
+        const d = h;
+        f = {
+          buffer: o.buffer.getGPUBuffer(d),
+          offset: 0,
+          size: d.descriptor.size
+        };
+      } else if (h._resourceType === "bufferResource") {
+        const d = h;
+        f = {
+          buffer: o.buffer.getGPUBuffer(d.buffer),
+          offset: d.offset,
+          size: d.size
+        };
+      } else if (h._resourceType === "textureSampler") {
+        const d = h;
+        f = o.texture.getGpuSampler(d);
+      } else if (h._resourceType === "textureSource") {
+        const d = h;
+        f = o.texture.getGpuSource(d).createView({});
+      }
+      n.push({
+        binding: i[l],
+        resource: f
+      });
+    }
+    const u = o.shader.getProgramData(t).bindGroups[r], c = s.createBindGroup({
+      layout: u,
+      entries: n
+    });
+    return this._hash[e._key] = c, c;
+  }
+  destroy() {
+    for (const e of Object.keys(this._hash))
+      this._hash[e] = null;
+    this._hash = null, this._renderer = null;
+  }
+}
+I.extension = {
+  type: [
+    p.WebGPUSystem
+  ],
+  name: "bindGroup"
+};
+class W {
+  constructor(e) {
+    this._gpuBuffers = /* @__PURE__ */ Object.create(null), this._managedBuffers = [], e.renderableGC.addManagedHash(this, "_gpuBuffers");
+  }
+  contextChange(e) {
+    this._gpu = e;
+  }
+  getGPUBuffer(e) {
+    return this._gpuBuffers[e.uid] || this.createGPUBuffer(e);
+  }
+  updateBuffer(e) {
+    const t = this._gpuBuffers[e.uid] || this.createGPUBuffer(e), r = e.data;
+    return e._updateID && r && (e._updateID = 0, this._gpu.device.queue.writeBuffer(
+      t,
+      0,
+      r.buffer,
+      0,
+      // round to the nearest 4 bytes
+      (e._updateSize || r.byteLength) + 3 & -4
+    )), t;
+  }
+  /** dispose all WebGL resources of all managed buffers */
+  destroyAll() {
+    for (const e in this._gpuBuffers)
+      this._gpuBuffers[e].destroy();
+    this._gpuBuffers = {};
+  }
+  createGPUBuffer(e) {
+    this._gpuBuffers[e.uid] || (e.on("update", this.updateBuffer, this), e.on("change", this.onBufferChange, this), e.on("destroy", this.onBufferDestroy, this), this._managedBuffers.push(e));
+    const t = this._gpu.device.createBuffer(e.descriptor);
+    return e._updateID = 0, e.data && (ae(e.data.buffer, t.getMappedRange()), t.unmap()), this._gpuBuffers[e.uid] = t, t;
+  }
+  onBufferChange(e) {
+    this._gpuBuffers[e.uid].destroy(), e._updateID = 0, this._gpuBuffers[e.uid] = this.createGPUBuffer(e);
+  }
+  /**
+   * Disposes buffer
+   * @param buffer - buffer with data
+   */
+  onBufferDestroy(e) {
+    this._managedBuffers.splice(this._managedBuffers.indexOf(e), 1), this._destroyBuffer(e);
+  }
+  destroy() {
+    this._managedBuffers.forEach((e) => this._destroyBuffer(e)), this._managedBuffers = null, this._gpuBuffers = null;
+  }
+  _destroyBuffer(e) {
+    this._gpuBuffers[e.uid].destroy(), e.off("update", this.updateBuffer, this), e.off("change", this.onBufferChange, this), e.off("destroy", this.onBufferDestroy, this), this._gpuBuffers[e.uid] = null;
+  }
+}
+W.extension = {
+  type: [
+    p.WebGPUSystem
+  ],
+  name: "buffer"
+};
+class ve {
+  constructor({ minUniformOffsetAlignment: e }) {
+    this._minUniformOffsetAlignment = 256, this.byteIndex = 0, this._minUniformOffsetAlignment = e, this.data = new Float32Array(65535);
+  }
+  clear() {
+    this.byteIndex = 0;
+  }
+  addEmptyGroup(e) {
+    if (e > this._minUniformOffsetAlignment / 4)
+      throw new Error(`UniformBufferBatch: array is too large: ${e * 4}`);
+    const t = this.byteIndex;
+    let r = t + e * 4;
+    if (r = Math.ceil(r / this._minUniformOffsetAlignment) * this._minUniformOffsetAlignment, r > this.data.length * 4)
+      throw new Error("UniformBufferBatch: ubo batch got too big");
+    return this.byteIndex = r, t;
+  }
+  addGroup(e) {
+    const t = this.addEmptyGroup(e.length);
+    for (let r = 0; r < e.length; r++)
+      this.data[t / 4 + r] = e[r];
+    return t;
+  }
+  destroy() {
+    this.data = null;
+  }
+}
+class V {
+  constructor(e) {
+    this._colorMaskCache = 15, this._renderer = e;
+  }
+  setMask(e) {
+    this._colorMaskCache !== e && (this._colorMaskCache = e, this._renderer.pipeline.setColorMask(e));
+  }
+  destroy() {
+    this._renderer = null, this._colorMaskCache = null;
+  }
+}
+V.extension = {
+  type: [
+    p.WebGPUSystem
+  ],
+  name: "colorMask"
+};
+class U {
+  /**
+   * @param {WebGPURenderer} renderer - The renderer this System works for.
+   */
+  constructor(e) {
+    this._renderer = e;
+  }
+  async init(e) {
+    return this._initPromise ? this._initPromise : (this._initPromise = (e.gpu ? Promise.resolve(e.gpu) : this._createDeviceAndAdaptor(e)).then((t) => {
+      this.gpu = t, this._renderer.runners.contextChange.emit(this.gpu);
+    }), this._initPromise);
+  }
+  /**
+   * Handle the context change event
+   * @param gpu
+   */
+  contextChange(e) {
+    this._renderer.gpu = e;
+  }
+  /**
+   * Helper class to create a WebGL Context
+   * @param {object} options - An options object that gets passed in to the canvas element containing the
+   *    context attributes
+   * @see https://developer.mozilla.org/en/docs/Web/API/HTMLCanvasElement/getContext
+   * @returns {WebGLRenderingContext} the WebGL context
+   */
+  async _createDeviceAndAdaptor(e) {
+    const t = await B.get().getNavigator().gpu.requestAdapter({
+      powerPreference: e.powerPreference,
+      forceFallbackAdapter: e.forceFallbackAdapter
+    }), r = [
+      "texture-compression-bc",
+      "texture-compression-astc",
+      "texture-compression-etc2"
+    ].filter((i) => t.features.has(i)), s = await t.requestDevice({
+      requiredFeatures: r
+    });
+    return { adapter: t, device: s };
+  }
+  destroy() {
+    this.gpu = null, this._renderer = null;
+  }
+}
+U.extension = {
+  type: [
+    p.WebGPUSystem
+  ],
+  name: "device"
+};
+U.defaultOptions = {
+  /**
+   * {@link WebGPUOptions.powerPreference}
+   * @default default
+   */
+  powerPreference: void 0,
+  /**
+   * Force the use of the fallback adapter
+   * @default false
+   */
+  forceFallbackAdapter: !1
+};
+class N {
+  constructor(e) {
+    this._boundBindGroup = /* @__PURE__ */ Object.create(null), this._boundVertexBuffer = /* @__PURE__ */ Object.create(null), this._renderer = e;
+  }
+  renderStart() {
+    this.commandFinished = new Promise((e) => {
+      this._resolveCommandFinished = e;
+    }), this.commandEncoder = this._renderer.gpu.device.createCommandEncoder();
+  }
+  beginRenderPass(e) {
+    this.endRenderPass(), this._clearCache(), this.renderPassEncoder = this.commandEncoder.beginRenderPass(e.descriptor);
+  }
+  endRenderPass() {
+    this.renderPassEncoder && this.renderPassEncoder.end(), this.renderPassEncoder = null;
+  }
+  setViewport(e) {
+    this.renderPassEncoder.setViewport(e.x, e.y, e.width, e.height, 0, 1);
+  }
+  setPipelineFromGeometryProgramAndState(e, t, r, s) {
+    const i = this._renderer.pipeline.getPipeline(e, t, r, s);
+    this.setPipeline(i);
+  }
+  setPipeline(e) {
+    this._boundPipeline !== e && (this._boundPipeline = e, this.renderPassEncoder.setPipeline(e));
+  }
+  _setVertexBuffer(e, t) {
+    this._boundVertexBuffer[e] !== t && (this._boundVertexBuffer[e] = t, this.renderPassEncoder.setVertexBuffer(e, this._renderer.buffer.updateBuffer(t)));
+  }
+  _setIndexBuffer(e) {
+    if (this._boundIndexBuffer === e)
+      return;
+    this._boundIndexBuffer = e;
+    const t = e.data.BYTES_PER_ELEMENT === 2 ? "uint16" : "uint32";
+    this.renderPassEncoder.setIndexBuffer(this._renderer.buffer.updateBuffer(e), t);
+  }
+  resetBindGroup(e) {
+    this._boundBindGroup[e] = null;
+  }
+  setBindGroup(e, t, r) {
+    if (this._boundBindGroup[e] === t)
+      return;
+    this._boundBindGroup[e] = t, t._touch(this._renderer.textureGC.count);
+    const s = this._renderer.bindGroup.getBindGroup(t, r, e);
+    this.renderPassEncoder.setBindGroup(e, s);
+  }
+  setGeometry(e, t) {
+    const r = this._renderer.pipeline.getBufferNamesToBind(e, t);
+    for (const s in r)
+      this._setVertexBuffer(parseInt(s, 10), e.attributes[r[s]].buffer);
+    e.indexBuffer && this._setIndexBuffer(e.indexBuffer);
+  }
+  _setShaderBindGroups(e, t) {
+    for (const r in e.groups) {
+      const s = e.groups[r];
+      t || this._syncBindGroup(s), this.setBindGroup(r, s, e.gpuProgram);
+    }
+  }
+  _syncBindGroup(e) {
+    for (const t in e.resources) {
+      const r = e.resources[t];
+      r.isUniformGroup && this._renderer.ubo.updateUniformGroup(r);
+    }
+  }
+  draw(e) {
+    const { geometry: t, shader: r, state: s, topology: i, size: n, start: o, instanceCount: u, skipSync: c } = e;
+    this.setPipelineFromGeometryProgramAndState(t, r.gpuProgram, s, i), this.setGeometry(t, r.gpuProgram), this._setShaderBindGroups(r, c), t.indexBuffer ? this.renderPassEncoder.drawIndexed(
+      n || t.indexBuffer.data.length,
+      u ?? t.instanceCount,
+      o || 0
+    ) : this.renderPassEncoder.draw(n || t.getSize(), u ?? t.instanceCount, o || 0);
+  }
+  finishRenderPass() {
+    this.renderPassEncoder && (this.renderPassEncoder.end(), this.renderPassEncoder = null);
+  }
+  postrender() {
+    this.finishRenderPass(), this._gpu.device.queue.submit([this.commandEncoder.finish()]), this._resolveCommandFinished(), this.commandEncoder = null;
+  }
+  // restores a render pass if finishRenderPass was called
+  // not optimised as really used for debugging!
+  // used when we want to stop drawing and log a texture..
+  restoreRenderPass() {
+    const e = this._renderer.renderTarget.adaptor.getDescriptor(
+      this._renderer.renderTarget.renderTarget,
+      !1,
+      [0, 0, 0, 1]
+    );
+    this.renderPassEncoder = this.commandEncoder.beginRenderPass(e);
+    const t = this._boundPipeline, r = { ...this._boundVertexBuffer }, s = this._boundIndexBuffer, i = { ...this._boundBindGroup };
+    this._clearCache();
+    const n = this._renderer.renderTarget.viewport;
+    this.renderPassEncoder.setViewport(n.x, n.y, n.width, n.height, 0, 1), this.setPipeline(t);
+    for (const o in r)
+      this._setVertexBuffer(o, r[o]);
+    for (const o in i)
+      this.setBindGroup(o, i[o], null);
+    this._setIndexBuffer(s);
+  }
+  _clearCache() {
+    for (let e = 0; e < 16; e++)
+      this._boundBindGroup[e] = null, this._boundVertexBuffer[e] = null;
+    this._boundIndexBuffer = null, this._boundPipeline = null;
+  }
+  destroy() {
+    this._renderer = null, this._gpu = null, this._boundBindGroup = null, this._boundVertexBuffer = null, this._boundIndexBuffer = null, this._boundPipeline = null;
+  }
+  contextChange(e) {
+    this._gpu = e;
+  }
+}
+N.extension = {
+  type: [p.WebGPUSystem],
+  name: "encoder",
+  priority: 1
+};
+class j {
+  constructor(e) {
+    this._renderer = e;
+  }
+  contextChange() {
+    this.maxTextures = this._renderer.device.gpu.device.limits.maxSampledTexturesPerShaderStage, this.maxBatchableTextures = this.maxTextures;
+  }
+  destroy() {
+  }
+}
+j.extension = {
+  type: [
+    p.WebGPUSystem
+  ],
+  name: "limits"
+};
+class K {
+  constructor(e) {
+    this._renderTargetStencilState = /* @__PURE__ */ Object.create(null), this._renderer = e, e.renderTarget.onRenderTargetChange.add(this);
+  }
+  onRenderTargetChange(e) {
+    let t = this._renderTargetStencilState[e.uid];
+    t || (t = this._renderTargetStencilState[e.uid] = {
+      stencilMode: C.DISABLED,
+      stencilReference: 0
+    }), this._activeRenderTarget = e, this.setStencilMode(t.stencilMode, t.stencilReference);
+  }
+  setStencilMode(e, t) {
+    const r = this._renderTargetStencilState[this._activeRenderTarget.uid];
+    r.stencilMode = e, r.stencilReference = t;
+    const s = this._renderer;
+    s.pipeline.setStencilMode(e), s.encoder.renderPassEncoder.setStencilReference(t);
+  }
+  destroy() {
+    this._renderer.renderTarget.onRenderTargetChange.remove(this), this._renderer = null, this._activeRenderTarget = null, this._renderTargetStencilState = null;
+  }
+}
+K.extension = {
+  type: [
+    p.WebGPUSystem
+  ],
+  name: "stencil"
+};
+const G = {
+  i32: { align: 4, size: 4 },
+  u32: { align: 4, size: 4 },
+  f32: { align: 4, size: 4 },
+  f16: { align: 2, size: 2 },
+  "vec2<i32>": { align: 8, size: 8 },
+  "vec2<u32>": { align: 8, size: 8 },
+  "vec2<f32>": { align: 8, size: 8 },
+  "vec2<f16>": { align: 4, size: 4 },
+  "vec3<i32>": { align: 16, size: 12 },
+  "vec3<u32>": { align: 16, size: 12 },
+  "vec3<f32>": { align: 16, size: 12 },
+  "vec3<f16>": { align: 8, size: 6 },
+  "vec4<i32>": { align: 16, size: 16 },
+  "vec4<u32>": { align: 16, size: 16 },
+  "vec4<f32>": { align: 16, size: 16 },
+  "vec4<f16>": { align: 8, size: 8 },
+  "mat2x2<f32>": { align: 8, size: 16 },
+  "mat2x2<f16>": { align: 4, size: 8 },
+  "mat3x2<f32>": { align: 8, size: 24 },
+  "mat3x2<f16>": { align: 4, size: 12 },
+  "mat4x2<f32>": { align: 8, size: 32 },
+  "mat4x2<f16>": { align: 4, size: 16 },
+  "mat2x3<f32>": { align: 16, size: 32 },
+  "mat2x3<f16>": { align: 8, size: 16 },
+  "mat3x3<f32>": { align: 16, size: 48 },
+  "mat3x3<f16>": { align: 8, size: 24 },
+  "mat4x3<f32>": { align: 16, size: 64 },
+  "mat4x3<f16>": { align: 8, size: 32 },
+  "mat2x4<f32>": { align: 16, size: 32 },
+  "mat2x4<f16>": { align: 8, size: 16 },
+  "mat3x4<f32>": { align: 16, size: 48 },
+  "mat3x4<f16>": { align: 8, size: 24 },
+  "mat4x4<f32>": { align: 16, size: 64 },
+  "mat4x4<f16>": { align: 8, size: 32 }
+};
+function Ue(a) {
+  const e = a.map((r) => ({
+    data: r,
+    offset: 0,
+    size: 0
+  }));
+  let t = 0;
+  for (let r = 0; r < e.length; r++) {
+    const s = e[r];
+    let i = G[s.data.type].size;
+    const n = G[s.data.type].align;
+    if (!G[s.data.type])
+      throw new Error(`[Pixi.js] WebGPU UniformBuffer: Unknown type ${s.data.type}`);
+    s.data.size > 1 && (i = Math.max(i, n) * s.data.size), t = Math.ceil(t / n) * n, s.size = i, s.offset = t, t += i;
+  }
+  return t = Math.ceil(t / 16) * 16, { uboElements: e, size: t };
+}
+function Me(a, e) {
+  const { size: t, align: r } = G[a.data.type], s = (r - t) / 4, i = a.data.type.indexOf("i32") >= 0 ? "dataInt32" : "data";
+  return `
+         v = uv.${a.data.name};
+         ${e !== 0 ? `offset += ${e};` : ""}
+
+         arrayOffset = offset;
+
+         t = 0;
+
+         for(var i=0; i < ${a.data.size * (t / 4)}; i++)
+         {
+             for(var j = 0; j < ${t / 4}; j++)
+             {
+                 ${i}[arrayOffset++] = v[t++];
+             }
+             ${s !== 0 ? `arrayOffset += ${s};` : ""}
+         }
+     `;
+}
+function we(a) {
+  return _e(
+    a,
+    "uboWgsl",
+    Me,
+    be
+  );
+}
+class q extends ye {
+  constructor() {
+    super({
+      createUboElements: Ue,
+      generateUboSync: we
+    });
+  }
+}
+q.extension = {
+  type: [p.WebGPUSystem],
+  name: "ubo"
+};
+const b = 128;
+class Y {
+  constructor(e) {
+    this._bindGroupHash = /* @__PURE__ */ Object.create(null), this._buffers = [], this._bindGroups = [], this._bufferResources = [], this._renderer = e, this._renderer.renderableGC.addManagedHash(this, "_bindGroupHash"), this._batchBuffer = new ve({ minUniformOffsetAlignment: b });
+    const t = 256 / b;
+    for (let r = 0; r < t; r++) {
+      let s = T.UNIFORM | T.COPY_DST;
+      r === 0 && (s |= T.COPY_SRC), this._buffers.push(new ue({
+        data: this._batchBuffer.data,
+        usage: s
+      }));
+    }
+  }
+  renderEnd() {
+    this._uploadBindGroups(), this._resetBindGroups();
+  }
+  _resetBindGroups() {
+    for (const e in this._bindGroupHash)
+      this._bindGroupHash[e] = null;
+    this._batchBuffer.clear();
+  }
+  // just works for single bind groups for now
+  getUniformBindGroup(e, t) {
+    if (!t && this._bindGroupHash[e.uid])
+      return this._bindGroupHash[e.uid];
+    this._renderer.ubo.ensureUniformGroup(e);
+    const r = e.buffer.data, s = this._batchBuffer.addEmptyGroup(r.length);
+    return this._renderer.ubo.syncUniformGroup(e, this._batchBuffer.data, s / 4), this._bindGroupHash[e.uid] = this._getBindGroup(s / b), this._bindGroupHash[e.uid];
+  }
+  getUboResource(e) {
+    this._renderer.ubo.updateUniformGroup(e);
+    const t = e.buffer.data, r = this._batchBuffer.addGroup(t);
+    return this._getBufferResource(r / b);
+  }
+  getArrayBindGroup(e) {
+    const t = this._batchBuffer.addGroup(e);
+    return this._getBindGroup(t / b);
+  }
+  getArrayBufferResource(e) {
+    const r = this._batchBuffer.addGroup(e) / b;
+    return this._getBufferResource(r);
+  }
+  _getBufferResource(e) {
+    if (!this._bufferResources[e]) {
+      const t = this._buffers[e % 2];
+      this._bufferResources[e] = new xe({
+        buffer: t,
+        offset: (e / 2 | 0) * 256,
+        size: b
+      });
+    }
+    return this._bufferResources[e];
+  }
+  _getBindGroup(e) {
+    if (!this._bindGroups[e]) {
+      const t = new L({
+        0: this._getBufferResource(e)
+      });
+      this._bindGroups[e] = t;
+    }
+    return this._bindGroups[e];
+  }
+  _uploadBindGroups() {
+    const e = this._renderer.buffer, t = this._buffers[0];
+    t.update(this._batchBuffer.byteIndex), e.updateBuffer(t);
+    const r = this._renderer.gpu.device.createCommandEncoder();
+    for (let s = 1; s < this._buffers.length; s++) {
+      const i = this._buffers[s];
+      r.copyBufferToBuffer(
+        e.getGPUBuffer(t),
+        b,
+        e.getGPUBuffer(i),
+        0,
+        this._batchBuffer.byteIndex
+      );
+    }
+    this._renderer.gpu.device.queue.submit([r.finish()]);
+  }
+  destroy() {
+    var e;
+    for (let t = 0; t < this._bindGroups.length; t++)
+      (e = this._bindGroups[t]) == null || e.destroy();
+    this._bindGroups = null, this._bindGroupHash = null;
+    for (let t = 0; t < this._buffers.length; t++)
+      this._buffers[t].destroy();
+    this._buffers = null;
+    for (let t = 0; t < this._bufferResources.length; t++)
+      this._bufferResources[t].destroy();
+    this._bufferResources = null, this._batchBuffer.destroy(), this._bindGroupHash = null, this._renderer = null;
+  }
+}
+Y.extension = {
+  type: [
+    p.WebGPUPipes
+  ],
+  name: "uniformBatch"
+};
+const Re = {
+  "point-list": 0,
+  "line-list": 1,
+  "line-strip": 2,
+  "triangle-list": 3,
+  "triangle-strip": 4
+};
+function Ee(a, e, t, r, s) {
+  return a << 24 | e << 16 | t << 10 | r << 5 | s;
+}
+function Le(a, e, t, r) {
+  return t << 6 | a << 3 | r << 1 | e;
+}
+class $ {
+  constructor(e) {
+    this._moduleCache = /* @__PURE__ */ Object.create(null), this._bufferLayoutsCache = /* @__PURE__ */ Object.create(null), this._bindingNamesCache = /* @__PURE__ */ Object.create(null), this._pipeCache = /* @__PURE__ */ Object.create(null), this._pipeStateCaches = /* @__PURE__ */ Object.create(null), this._colorMask = 15, this._multisampleCount = 1, this._renderer = e;
+  }
+  contextChange(e) {
+    this._gpu = e, this.setStencilMode(C.DISABLED), this._updatePipeHash();
+  }
+  setMultisampleCount(e) {
+    this._multisampleCount !== e && (this._multisampleCount = e, this._updatePipeHash());
+  }
+  setRenderTarget(e) {
+    this._multisampleCount = e.msaaSamples, this._depthStencilAttachment = e.descriptor.depthStencilAttachment ? 1 : 0, this._updatePipeHash();
+  }
+  setColorMask(e) {
+    this._colorMask !== e && (this._colorMask = e, this._updatePipeHash());
+  }
+  setStencilMode(e) {
+    this._stencilMode !== e && (this._stencilMode = e, this._stencilState = Ge[e], this._updatePipeHash());
+  }
+  setPipeline(e, t, r, s) {
+    const i = this.getPipeline(e, t, r);
+    s.setPipeline(i);
+  }
+  getPipeline(e, t, r, s) {
+    e._layoutKey || (Be(e, t.attributeData), this._generateBufferKey(e)), s || (s = e.topology);
+    const i = Ee(
+      e._layoutKey,
+      t._layoutKey,
+      r.data,
+      r._blendModeId,
+      Re[s]
+    );
+    return this._pipeCache[i] ? this._pipeCache[i] : (this._pipeCache[i] = this._createPipeline(e, t, r, s), this._pipeCache[i]);
+  }
+  _createPipeline(e, t, r, s) {
+    const i = this._gpu.device, n = this._createVertexBufferLayouts(e, t), o = this._renderer.state.getColorTargets(r);
+    o[0].writeMask = this._stencilMode === C.RENDERING_MASK_ADD ? 0 : this._colorMask;
+    const u = this._renderer.shader.getProgramData(t).pipeline, c = {
+      // TODO later check if its helpful to create..
+      // layout,
+      vertex: {
+        module: this._getModule(t.vertex.source),
+        entryPoint: t.vertex.entryPoint,
+        // geometry..
+        buffers: n
+      },
+      fragment: {
+        module: this._getModule(t.fragment.source),
+        entryPoint: t.fragment.entryPoint,
+        targets: o
+      },
+      primitive: {
+        topology: s,
+        cullMode: r.cullMode
+      },
+      layout: u,
+      multisample: {
+        count: this._multisampleCount
+      },
+      // depthStencil,
+      label: "PIXI Pipeline"
+    };
+    return this._depthStencilAttachment && (c.depthStencil = {
+      ...this._stencilState,
+      format: "depth24plus-stencil8",
+      depthWriteEnabled: r.depthTest,
+      depthCompare: r.depthTest ? "less" : "always"
+    }), i.createRenderPipeline(c);
+  }
+  _getModule(e) {
+    return this._moduleCache[e] || this._createModule(e);
+  }
+  _createModule(e) {
+    const t = this._gpu.device;
+    return this._moduleCache[e] = t.createShaderModule({
+      code: e
+    }), this._moduleCache[e];
+  }
+  _generateBufferKey(e) {
+    const t = [];
+    let r = 0;
+    const s = Object.keys(e.attributes).sort();
+    for (let n = 0; n < s.length; n++) {
+      const o = e.attributes[s[n]];
+      t[r++] = o.offset, t[r++] = o.format, t[r++] = o.stride, t[r++] = o.instance;
+    }
+    const i = t.join("|");
+    return e._layoutKey = M(i, "geometry"), e._layoutKey;
+  }
+  _generateAttributeLocationsKey(e) {
+    const t = [];
+    let r = 0;
+    const s = Object.keys(e.attributeData).sort();
+    for (let n = 0; n < s.length; n++) {
+      const o = e.attributeData[s[n]];
+      t[r++] = o.location;
+    }
+    const i = t.join("|");
+    return e._attributeLocationsKey = M(i, "programAttributes"), e._attributeLocationsKey;
+  }
+  /**
+   * Returns a hash of buffer names mapped to bind locations.
+   * This is used to bind the correct buffer to the correct location in the shader.
+   * @param geometry - The geometry where to get the buffer names
+   * @param program - The program where to get the buffer names
+   * @returns An object of buffer names mapped to the bind location.
+   */
+  getBufferNamesToBind(e, t) {
+    const r = e._layoutKey << 16 | t._attributeLocationsKey;
+    if (this._bindingNamesCache[r])
+      return this._bindingNamesCache[r];
+    const s = this._createVertexBufferLayouts(e, t), i = /* @__PURE__ */ Object.create(null), n = t.attributeData;
+    for (let o = 0; o < s.length; o++) {
+      const c = Object.values(s[o].attributes)[0].shaderLocation;
+      for (const l in n)
+        if (n[l].location === c) {
+          i[o] = l;
+          break;
+        }
+    }
+    return this._bindingNamesCache[r] = i, i;
+  }
+  _createVertexBufferLayouts(e, t) {
+    t._attributeLocationsKey || this._generateAttributeLocationsKey(t);
+    const r = e._layoutKey << 16 | t._attributeLocationsKey;
+    if (this._bufferLayoutsCache[r])
+      return this._bufferLayoutsCache[r];
+    const s = [];
+    return e.buffers.forEach((i) => {
+      const n = {
+        arrayStride: 0,
+        stepMode: "vertex",
+        attributes: []
+      }, o = n.attributes;
+      for (const u in t.attributeData) {
+        const c = e.attributes[u];
+        (c.divisor ?? 1) !== 1 && v(`Attribute ${u} has an invalid divisor value of '${c.divisor}'. WebGPU only supports a divisor value of 1`), c.buffer === i && (n.arrayStride = c.stride, n.stepMode = c.instance ? "instance" : "vertex", o.push({
+          shaderLocation: t.attributeData[u].location,
+          offset: c.offset,
+          format: c.format
+        }));
+      }
+      o.length && s.push(n);
+    }), this._bufferLayoutsCache[r] = s, s;
+  }
+  _updatePipeHash() {
+    const e = Le(
+      this._stencilMode,
+      this._multisampleCount,
+      this._colorMask,
+      this._depthStencilAttachment
+    );
+    this._pipeStateCaches[e] || (this._pipeStateCaches[e] = /* @__PURE__ */ Object.create(null)), this._pipeCache = this._pipeStateCaches[e];
+  }
+  destroy() {
+    this._renderer = null, this._bufferLayoutsCache = null;
+  }
+}
+$.extension = {
+  type: [p.WebGPUSystem],
+  name: "pipeline"
+};
+class Ae {
+  constructor() {
+    this.contexts = [], this.msaaTextures = [], this.msaaSamples = 1;
+  }
+}
+class ke {
+  init(e, t) {
+    this._renderer = e, this._renderTargetSystem = t;
+  }
+  copyToTexture(e, t, r, s, i) {
+    const n = this._renderer, o = this._getGpuColorTexture(
+      e
+    ), u = n.texture.getGpuSource(
+      t.source
+    );
+    return n.encoder.commandEncoder.copyTextureToTexture(
+      {
+        texture: o,
+        origin: r
+      },
+      {
+        texture: u,
+        origin: i
+      },
+      s
+    ), t;
+  }
+  startRenderPass(e, t = !0, r, s) {
+    const n = this._renderTargetSystem.getGpuRenderTarget(e), o = this.getDescriptor(e, t, r);
+    n.descriptor = o, this._renderer.pipeline.setRenderTarget(n), this._renderer.encoder.beginRenderPass(n), this._renderer.encoder.setViewport(s);
+  }
+  finishRenderPass() {
+    this._renderer.encoder.endRenderPass();
+  }
+  /**
+   * returns the gpu texture for the first color texture in the render target
+   * mainly used by the filter manager to get copy the texture for blending
+   * @param renderTarget
+   * @returns a gpu texture
+   */
+  _getGpuColorTexture(e) {
+    const t = this._renderTargetSystem.getGpuRenderTarget(e);
+    return t.contexts[0] ? t.contexts[0].getCurrentTexture() : this._renderer.texture.getGpuSource(
+      e.colorTextures[0].source
+    );
+  }
+  getDescriptor(e, t, r) {
+    typeof t == "boolean" && (t = t ? y.ALL : y.NONE);
+    const s = this._renderTargetSystem, i = s.getGpuRenderTarget(e), n = e.colorTextures.map(
+      (c, l) => {
+        const h = i.contexts[l];
+        let f, d;
+        h ? f = h.getCurrentTexture().createView() : f = this._renderer.texture.getGpuSource(c).createView({
+          mipLevelCount: 1
+        }), i.msaaTextures[l] && (d = f, f = this._renderer.texture.getTextureView(
+          i.msaaTextures[l]
+        ));
+        const _ = t & y.COLOR ? "clear" : "load";
+        return r ?? (r = s.defaultClearColor), {
+          view: f,
+          resolveTarget: d,
+          clearValue: r,
+          storeOp: "store",
+          loadOp: _
+        };
+      }
+    );
+    let o;
+    if ((e.stencil || e.depth) && !e.depthStencilTexture && (e.ensureDepthStencilTexture(), e.depthStencilTexture.source.sampleCount = i.msaa ? 4 : 1), e.depthStencilTexture) {
+      const c = t & y.STENCIL ? "clear" : "load", l = t & y.DEPTH ? "clear" : "load";
+      o = {
+        view: this._renderer.texture.getGpuSource(e.depthStencilTexture.source).createView(),
+        stencilStoreOp: "store",
+        stencilLoadOp: c,
+        depthClearValue: 1,
+        depthLoadOp: l,
+        depthStoreOp: "store"
+      };
+    }
+    return {
+      colorAttachments: n,
+      depthStencilAttachment: o
+    };
+  }
+  clear(e, t = !0, r, s) {
+    if (!t)
+      return;
+    const { gpu: i, encoder: n } = this._renderer, o = i.device;
+    if (n.commandEncoder === null) {
+      const c = o.createCommandEncoder(), l = this.getDescriptor(e, t, r), h = c.beginRenderPass(l);
+      h.setViewport(s.x, s.y, s.width, s.height, 0, 1), h.end();
+      const f = c.finish();
+      o.queue.submit([f]);
+    } else
+      this.startRenderPass(e, t, r, s);
+  }
+  initGpuRenderTarget(e) {
+    e.isRoot = !0;
+    const t = new Ae();
+    return e.colorTextures.forEach((r, s) => {
+      if (r instanceof ce) {
+        const i = r.resource.getContext(
+          "webgpu"
+        ), n = r.transparent ? "premultiplied" : "opaque";
+        try {
+          i.configure({
+            device: this._renderer.gpu.device,
+            usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_SRC,
+            format: "bgra8unorm",
+            alphaMode: n
+          });
+        } catch (o) {
+          console.error(o);
+        }
+        t.contexts[s] = i;
+      }
+      if (t.msaa = r.source.antialias, r.source.antialias) {
+        const i = new de({
+          width: 0,
+          height: 0,
+          sampleCount: 4
+        });
+        t.msaaTextures[s] = i;
+      }
+    }), t.msaa && (t.msaaSamples = 4, e.depthStencilTexture && (e.depthStencilTexture.source.sampleCount = 4)), t;
+  }
+  destroyGpuRenderTarget(e) {
+    e.contexts.forEach((t) => {
+      t.unconfigure();
+    }), e.msaaTextures.forEach((t) => {
+      t.destroy();
+    }), e.msaaTextures.length = 0, e.contexts.length = 0;
+  }
+  ensureDepthStencilTexture(e) {
+    const t = this._renderTargetSystem.getGpuRenderTarget(e);
+    e.depthStencilTexture && t.msaa && (e.depthStencilTexture.source.sampleCount = 4);
+  }
+  resizeGpuRenderTarget(e) {
+    const t = this._renderTargetSystem.getGpuRenderTarget(e);
+    t.width = e.width, t.height = e.height, t.msaa && e.colorTextures.forEach((r, s) => {
+      const i = t.msaaTextures[s];
+      i == null || i.resize(
+        r.source.width,
+        r.source.height,
+        r.source._resolution
+      );
+    });
+  }
+}
+class X extends Se {
+  constructor(e) {
+    super(e), this.adaptor = new ke(), this.adaptor.init(e, this);
+  }
+}
+X.extension = {
+  type: [p.WebGPUSystem],
+  name: "renderTarget"
+};
+class Z {
+  constructor() {
+    this._gpuProgramData = /* @__PURE__ */ Object.create(null);
+  }
+  contextChange(e) {
+    this._gpu = e;
+  }
+  getProgramData(e) {
+    return this._gpuProgramData[e._layoutKey] || this._createGPUProgramData(e);
+  }
+  _createGPUProgramData(e) {
+    const t = this._gpu.device, r = e.gpuLayout.map((i) => t.createBindGroupLayout({ entries: i })), s = { bindGroupLayouts: r };
+    return this._gpuProgramData[e._layoutKey] = {
+      bindGroups: r,
+      pipeline: t.createPipelineLayout(s)
+    }, this._gpuProgramData[e._layoutKey];
+  }
+  destroy() {
+    this._gpu = null, this._gpuProgramData = null;
+  }
+}
+Z.extension = {
+  type: [
+    p.WebGPUSystem
+  ],
+  name: "shader"
+};
+const g = {};
+g.normal = {
+  alpha: {
+    srcFactor: "one",
+    dstFactor: "one-minus-src-alpha",
+    operation: "add"
+  },
+  color: {
+    srcFactor: "one",
+    dstFactor: "one-minus-src-alpha",
+    operation: "add"
+  }
+};
+g.add = {
+  alpha: {
+    srcFactor: "src-alpha",
+    dstFactor: "one-minus-src-alpha",
+    operation: "add"
+  },
+  color: {
+    srcFactor: "one",
+    dstFactor: "one",
+    operation: "add"
+  }
+};
+g.multiply = {
+  alpha: {
+    srcFactor: "one",
+    dstFactor: "one-minus-src-alpha",
+    operation: "add"
+  },
+  color: {
+    srcFactor: "dst",
+    dstFactor: "one-minus-src-alpha",
+    operation: "add"
+  }
+};
+g.screen = {
+  alpha: {
+    srcFactor: "one",
+    dstFactor: "one-minus-src-alpha",
+    operation: "add"
+  },
+  color: {
+    srcFactor: "one",
+    dstFactor: "one-minus-src",
+    operation: "add"
+  }
+};
+g.overlay = {
+  alpha: {
+    srcFactor: "one",
+    dstFactor: "one-minus-src-alpha",
+    operation: "add"
+  },
+  color: {
+    srcFactor: "one",
+    dstFactor: "one-minus-src",
+    operation: "add"
+  }
+};
+g.none = {
+  alpha: {
+    srcFactor: "one",
+    dstFactor: "one-minus-src-alpha",
+    operation: "add"
+  },
+  color: {
+    srcFactor: "zero",
+    dstFactor: "zero",
+    operation: "add"
+  }
+};
+g["normal-npm"] = {
+  alpha: {
+    srcFactor: "one",
+    dstFactor: "one-minus-src-alpha",
+    operation: "add"
+  },
+  color: {
+    srcFactor: "src-alpha",
+    dstFactor: "one-minus-src-alpha",
+    operation: "add"
+  }
+};
+g["add-npm"] = {
+  alpha: {
+    srcFactor: "one",
+    dstFactor: "one",
+    operation: "add"
+  },
+  color: {
+    srcFactor: "src-alpha",
+    dstFactor: "one",
+    operation: "add"
+  }
+};
+g["screen-npm"] = {
+  alpha: {
+    srcFactor: "one",
+    dstFactor: "one-minus-src-alpha",
+    operation: "add"
+  },
+  color: {
+    srcFactor: "src-alpha",
+    dstFactor: "one-minus-src",
+    operation: "add"
+  }
+};
+g.erase = {
+  alpha: {
+    srcFactor: "zero",
+    dstFactor: "one-minus-src-alpha",
+    operation: "add"
+  },
+  color: {
+    srcFactor: "zero",
+    dstFactor: "one-minus-src",
+    operation: "add"
+  }
+};
+g.min = {
+  alpha: {
+    srcFactor: "one",
+    dstFactor: "one",
+    operation: "min"
+  },
+  color: {
+    srcFactor: "one",
+    dstFactor: "one",
+    operation: "min"
+  }
+};
+g.max = {
+  alpha: {
+    srcFactor: "one",
+    dstFactor: "one",
+    operation: "max"
+  },
+  color: {
+    srcFactor: "one",
+    dstFactor: "one",
+    operation: "max"
+  }
+};
+class J {
+  constructor() {
+    this.defaultState = new F(), this.defaultState.blend = !0;
+  }
+  contextChange(e) {
+    this.gpu = e;
+  }
+  /**
+   * Gets the blend mode data for the current state
+   * @param state - The state to get the blend mode from
+   */
+  getColorTargets(e) {
+    return [
+      {
+        format: "bgra8unorm",
+        writeMask: 0,
+        blend: g[e.blendMode] || g.normal
+      }
+    ];
+  }
+  destroy() {
+    this.gpu = null;
+  }
+}
+J.extension = {
+  type: [
+    p.WebGPUSystem
+  ],
+  name: "state"
+};
+const De = {
+  type: "image",
+  upload(a, e, t) {
+    const r = a.resource, s = (a.pixelWidth | 0) * (a.pixelHeight | 0), i = r.byteLength / s;
+    t.device.queue.writeTexture(
+      { texture: e },
+      r,
+      {
+        offset: 0,
+        rowsPerImage: a.pixelHeight,
+        bytesPerRow: a.pixelHeight * i
+      },
+      {
+        width: a.pixelWidth,
+        height: a.pixelHeight,
+        depthOrArrayLayers: 1
+      }
+    );
+  }
+}, Q = {
+  "bc1-rgba-unorm": { blockBytes: 8, blockWidth: 4, blockHeight: 4 },
+  "bc2-rgba-unorm": { blockBytes: 16, blockWidth: 4, blockHeight: 4 },
+  "bc3-rgba-unorm": { blockBytes: 16, blockWidth: 4, blockHeight: 4 },
+  "bc7-rgba-unorm": { blockBytes: 16, blockWidth: 4, blockHeight: 4 },
+  "etc1-rgb-unorm": { blockBytes: 8, blockWidth: 4, blockHeight: 4 },
+  "etc2-rgba8unorm": { blockBytes: 16, blockWidth: 4, blockHeight: 4 },
+  "astc-4x4-unorm": { blockBytes: 16, blockWidth: 4, blockHeight: 4 }
+}, He = { blockBytes: 4, blockWidth: 1, blockHeight: 1 }, ze = {
+  type: "compressed",
+  upload(a, e, t) {
+    let r = a.pixelWidth, s = a.pixelHeight;
+    const i = Q[a.format] || He;
+    for (let n = 0; n < a.resource.length; n++) {
+      const o = a.resource[n], u = Math.ceil(r / i.blockWidth) * i.blockBytes;
+      t.device.queue.writeTexture(
+        {
+          texture: e,
+          mipLevel: n
+        },
+        o,
+        {
+          offset: 0,
+          bytesPerRow: u
+        },
+        {
+          width: Math.ceil(r / i.blockWidth) * i.blockWidth,
+          height: Math.ceil(s / i.blockHeight) * i.blockHeight,
+          depthOrArrayLayers: 1
+        }
+      ), r = Math.max(r >> 1, 1), s = Math.max(s >> 1, 1);
+    }
+  }
+}, ee = {
+  type: "image",
+  upload(a, e, t) {
+    const r = a.resource;
+    if (!r)
+      return;
+    if (globalThis.HTMLImageElement && r instanceof HTMLImageElement) {
+      const o = B.get().createCanvas(r.width, r.height);
+      o.getContext("2d").drawImage(r, 0, 0, r.width, r.height), a.resource = o, v("ImageSource: Image element passed, converting to canvas and replacing resource.");
+    }
+    const s = Math.min(e.width, a.resourceWidth || a.pixelWidth), i = Math.min(e.height, a.resourceHeight || a.pixelHeight), n = a.alphaMode === "premultiply-alpha-on-upload";
+    t.device.queue.copyExternalImageToTexture(
+      { source: r },
+      { texture: e, premultipliedAlpha: n },
+      {
+        width: s,
+        height: i
+      }
+    );
+  }
+}, Fe = {
+  type: "video",
+  upload(a, e, t) {
+    ee.upload(a, e, t);
+  }
+};
+class Oe {
+  constructor(e) {
+    this.device = e, this.sampler = e.createSampler({ minFilter: "linear" }), this.pipelines = {};
+  }
+  _getMipmapPipeline(e) {
+    let t = this.pipelines[e];
+    return t || (this.mipmapShaderModule || (this.mipmapShaderModule = this.device.createShaderModule({
+      code: (
+        /* wgsl */
+        `
+                        var<private> pos : array<vec2<f32>, 3> = array<vec2<f32>, 3>(
+                        vec2<f32>(-1.0, -1.0), vec2<f32>(-1.0, 3.0), vec2<f32>(3.0, -1.0));
+
+                        struct VertexOutput {
+                        @builtin(position) position : vec4<f32>,
+                        @location(0) texCoord : vec2<f32>,
+                        };
+
+                        @vertex
+                        fn vertexMain(@builtin(vertex_index) vertexIndex : u32) -> VertexOutput {
+                        var output : VertexOutput;
+                        output.texCoord = pos[vertexIndex] * vec2<f32>(0.5, -0.5) + vec2<f32>(0.5);
+                        output.position = vec4<f32>(pos[vertexIndex], 0.0, 1.0);
+                        return output;
+                        }
+
+                        @group(0) @binding(0) var imgSampler : sampler;
+                        @group(0) @binding(1) var img : texture_2d<f32>;
+
+                        @fragment
+                        fn fragmentMain(@location(0) texCoord : vec2<f32>) -> @location(0) vec4<f32> {
+                        return textureSample(img, imgSampler, texCoord);
+                        }
+                    `
+      )
+    })), t = this.device.createRenderPipeline({
+      layout: "auto",
+      vertex: {
+        module: this.mipmapShaderModule,
+        entryPoint: "vertexMain"
+      },
+      fragment: {
+        module: this.mipmapShaderModule,
+        entryPoint: "fragmentMain",
+        targets: [{ format: e }]
+      }
+    }), this.pipelines[e] = t), t;
+  }
+  /**
+   * Generates mipmaps for the given GPUTexture from the data in level 0.
+   * @param {module:External.GPUTexture} texture - Texture to generate mipmaps for.
+   * @returns {module:External.GPUTexture} - The originally passed texture
+   */
+  generateMipmap(e) {
+    const t = this._getMipmapPipeline(e.format);
+    if (e.dimension === "3d" || e.dimension === "1d")
+      throw new Error("Generating mipmaps for non-2d textures is currently unsupported!");
+    let r = e;
+    const s = e.depthOrArrayLayers || 1, i = e.usage & GPUTextureUsage.RENDER_ATTACHMENT;
+    if (!i) {
+      const u = {
+        size: {
+          width: Math.ceil(e.width / 2),
+          height: Math.ceil(e.height / 2),
+          depthOrArrayLayers: s
+        },
+        format: e.format,
+        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_SRC | GPUTextureUsage.RENDER_ATTACHMENT,
+        mipLevelCount: e.mipLevelCount - 1
+      };
+      r = this.device.createTexture(u);
+    }
+    const n = this.device.createCommandEncoder({}), o = t.getBindGroupLayout(0);
+    for (let u = 0; u < s; ++u) {
+      let c = e.createView({
+        baseMipLevel: 0,
+        mipLevelCount: 1,
+        dimension: "2d",
+        baseArrayLayer: u,
+        arrayLayerCount: 1
+      }), l = i ? 1 : 0;
+      for (let h = 1; h < e.mipLevelCount; ++h) {
+        const f = r.createView({
+          baseMipLevel: l++,
+          mipLevelCount: 1,
+          dimension: "2d",
+          baseArrayLayer: u,
+          arrayLayerCount: 1
+        }), d = n.beginRenderPass({
+          colorAttachments: [{
+            view: f,
+            storeOp: "store",
+            loadOp: "clear",
+            clearValue: { r: 0, g: 0, b: 0, a: 0 }
+          }]
+        }), _ = this.device.createBindGroup({
+          layout: o,
+          entries: [{
+            binding: 0,
+            resource: this.sampler
+          }, {
+            binding: 1,
+            resource: c
+          }]
+        });
+        d.setPipeline(t), d.setBindGroup(0, _), d.draw(3, 1, 0, 0), d.end(), c = f;
+      }
+    }
+    if (!i) {
+      const u = {
+        width: Math.ceil(e.width / 2),
+        height: Math.ceil(e.height / 2),
+        depthOrArrayLayers: s
+      };
+      for (let c = 1; c < e.mipLevelCount; ++c)
+        n.copyTextureToTexture({
+          texture: r,
+          mipLevel: c - 1
+        }, {
+          texture: e,
+          mipLevel: c
+        }, u), u.width = Math.ceil(u.width / 2), u.height = Math.ceil(u.height / 2);
+    }
+    return this.device.queue.submit([n.finish()]), i || r.destroy(), e;
+  }
+}
+class te {
+  constructor(e) {
+    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: ee,
+      buffer: De,
+      video: Fe,
+      compressed: ze
+    }, this._renderer = e, e.renderableGC.addManagedHash(this, "_gpuSources"), e.renderableGC.addManagedHash(this, "_gpuSamplers"), e.renderableGC.addManagedHash(this, "_bindGroupHash"), e.renderableGC.addManagedHash(this, "_textureViewHash");
+  }
+  contextChange(e) {
+    this._gpu = e;
+  }
+  /**
+   * Initializes a texture source, if it has already been initialized nothing will happen.
+   * @param source - The texture source to initialize.
+   * @returns The initialized texture source.
+   */
+  initSource(e) {
+    return this._gpuSources[e.uid] ? this._gpuSources[e.uid] : this._initSource(e);
+  }
+  _initSource(e) {
+    if (e.autoGenerateMipmaps) {
+      const u = Math.max(e.pixelWidth, e.pixelHeight);
+      e.mipLevelCount = Math.floor(Math.log2(u)) + 1;
+    }
+    let t = GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST;
+    e.uploadMethodId !== "compressed" && (t |= GPUTextureUsage.RENDER_ATTACHMENT, t |= GPUTextureUsage.COPY_SRC);
+    const r = Q[e.format] || { blockWidth: 1, blockHeight: 1 }, s = Math.ceil(e.pixelWidth / r.blockWidth) * r.blockWidth, i = Math.ceil(e.pixelHeight / r.blockHeight) * r.blockHeight, n = {
+      label: e.label,
+      size: { width: s, height: i },
+      format: e.format,
+      sampleCount: e.sampleCount,
+      mipLevelCount: e.mipLevelCount,
+      dimension: e.dimension,
+      usage: t
+    }, o = this._gpuSources[e.uid] = this._gpu.device.createTexture(n);
+    return this.managedTextures.includes(e) || (e.on("update", this.onSourceUpdate, this), e.on("resize", this.onSourceResize, this), e.on("destroy", this.onSourceDestroy, this), e.on("unload", this.onSourceUnload, this), e.on("updateMipmaps", this.onUpdateMipmaps, this), this.managedTextures.push(e)), this.onSourceUpdate(e), o;
+  }
+  onSourceUpdate(e) {
+    const t = this.getGpuSource(e);
+    t && (this._uploads[e.uploadMethodId] && this._uploads[e.uploadMethodId].upload(e, t, this._gpu), e.autoGenerateMipmaps && e.mipLevelCount > 1 && this.onUpdateMipmaps(e));
+  }
+  onSourceUnload(e) {
+    const t = this._gpuSources[e.uid];
+    t && (this._gpuSources[e.uid] = null, t.destroy());
+  }
+  onUpdateMipmaps(e) {
+    this._mipmapGenerator || (this._mipmapGenerator = new Oe(this._gpu.device));
+    const t = this.getGpuSource(e);
+    this._mipmapGenerator.generateMipmap(t);
+  }
+  onSourceDestroy(e) {
+    e.off("update", this.onSourceUpdate, this), e.off("unload", this.onSourceUnload, this), e.off("destroy", this.onSourceDestroy, this), e.off("resize", this.onSourceResize, this), e.off("updateMipmaps", this.onUpdateMipmaps, this), this.managedTextures.splice(this.managedTextures.indexOf(e), 1), this.onSourceUnload(e);
+  }
+  onSourceResize(e) {
+    const t = this._gpuSources[e.uid];
+    t ? (t.width !== e.pixelWidth || t.height !== e.pixelHeight) && (this._textureViewHash[e.uid] = null, this._bindGroupHash[e.uid] = null, this.onSourceUnload(e), this.initSource(e)) : this.initSource(e);
+  }
+  _initSampler(e) {
+    return this._gpuSamplers[e._resourceId] = this._gpu.device.createSampler(e), this._gpuSamplers[e._resourceId];
+  }
+  getGpuSampler(e) {
+    return this._gpuSamplers[e._resourceId] || this._initSampler(e);
+  }
+  getGpuSource(e) {
+    return this._gpuSources[e.uid] || this.initSource(e);
+  }
+  /**
+   * this returns s bind group for a specific texture, the bind group contains
+   * - the texture source
+   * - the texture style
+   * - the texture matrix
+   * This is cached so the bind group should only be created once per texture
+   * @param texture - the texture you want the bindgroup for
+   * @returns the bind group for the texture
+   */
+  getTextureBindGroup(e) {
+    return this._bindGroupHash[e.uid] ?? this._createTextureBindGroup(e);
+  }
+  _createTextureBindGroup(e) {
+    const t = e.source;
+    return this._bindGroupHash[e.uid] = new L({
+      0: t,
+      1: t.style,
+      2: new A({
+        uTextureMatrix: { type: "mat3x3<f32>", value: e.textureMatrix.mapCoord }
+      })
+    }), this._bindGroupHash[e.uid];
+  }
+  getTextureView(e) {
+    const t = e.source;
+    return this._textureViewHash[t.uid] ?? this._createTextureView(t);
+  }
+  _createTextureView(e) {
+    return this._textureViewHash[e.uid] = this.getGpuSource(e).createView(), this._textureViewHash[e.uid];
+  }
+  generateCanvas(e) {
+    const t = this._renderer, r = t.gpu.device.createCommandEncoder(), s = B.get().createCanvas();
+    s.width = e.source.pixelWidth, s.height = e.source.pixelHeight;
+    const i = s.getContext("webgpu");
+    return i.configure({
+      device: t.gpu.device,
+      usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.COPY_SRC,
+      format: B.get().getNavigator().gpu.getPreferredCanvasFormat(),
+      alphaMode: "premultiplied"
+    }), r.copyTextureToTexture({
+      texture: t.texture.getGpuSource(e.source),
+      origin: {
+        x: 0,
+        y: 0
+      }
+    }, {
+      texture: i.getCurrentTexture()
+    }, {
+      width: s.width,
+      height: s.height
+    }), t.gpu.device.queue.submit([r.finish()]), s;
+  }
+  getPixels(e) {
+    const t = this.generateCanvas(e), r = R.getOptimalCanvasAndContext(t.width, t.height), s = r.context;
+    s.drawImage(t, 0, 0);
+    const { width: i, height: n } = t, o = s.getImageData(0, 0, i, n), u = new Uint8ClampedArray(o.data.buffer);
+    return R.returnCanvasAndContext(r), { pixels: u, width: i, height: n };
+  }
+  destroy() {
+    this.managedTextures.slice().forEach((e) => this.onSourceDestroy(e)), this.managedTextures = null;
+    for (const e of Object.keys(this._bindGroupHash)) {
+      const t = Number(e), r = this._bindGroupHash[t];
+      r == null || r.destroy(), this._bindGroupHash[t] = null;
+    }
+    this._gpu = null, this._mipmapGenerator = null, this._gpuSources = null, this._bindGroupHash = null, this._textureViewHash = null, this._gpuSamplers = null;
+  }
+}
+te.extension = {
+  type: [
+    p.WebGPUSystem
+  ],
+  name: "texture"
+};
+class re {
+  constructor() {
+    this._maxTextures = 0;
+  }
+  contextChange(e) {
+    const t = new A({
+      uTransformMatrix: { value: new k(), type: "mat3x3<f32>" },
+      uColor: { value: new Float32Array([1, 1, 1, 1]), type: "vec4<f32>" },
+      uRound: { value: 0, type: "f32" }
+    });
+    this._maxTextures = e.limits.maxBatchableTextures;
+    const r = D({
+      name: "graphics",
+      bits: [
+        he,
+        pe(this._maxTextures),
+        ge,
+        H
+      ]
+    });
+    this.shader = new z({
+      gpuProgram: r,
+      resources: {
+        // added on the fly!
+        localUniforms: t
+      }
+    });
+  }
+  execute(e, t) {
+    const r = t.context, s = r.customShader || this.shader, i = e.renderer, n = i.graphicsContext, {
+      batcher: o,
+      instructions: u
+    } = n.getContextRenderData(r), c = i.encoder;
+    c.setGeometry(o.geometry, s.gpuProgram);
+    const l = i.globalUniforms.bindGroup;
+    c.setBindGroup(0, l, s.gpuProgram);
+    const h = i.renderPipes.uniformBatch.getUniformBindGroup(s.resources.localUniforms, !0);
+    c.setBindGroup(2, h, s.gpuProgram);
+    const f = u.instructions;
+    let d = null;
+    for (let _ = 0; _ < u.instructionSize; _++) {
+      const m = f[_];
+      if (m.topology !== d && (d = m.topology, c.setPipelineFromGeometryProgramAndState(
+        o.geometry,
+        s.gpuProgram,
+        e.state,
+        m.topology
+      )), s.groups[1] = m.bindGroup, !m.gpuBindGroup) {
+        const P = m.textures;
+        m.bindGroup = E(
+          P.textures,
+          P.count,
+          this._maxTextures
+        ), m.gpuBindGroup = i.bindGroup.getBindGroup(
+          m.bindGroup,
+          s.gpuProgram,
+          1
+        );
+      }
+      c.setBindGroup(1, m.bindGroup, s.gpuProgram), c.renderPassEncoder.drawIndexed(m.size, 1, m.start);
+    }
+  }
+  destroy() {
+    this.shader.destroy(!0), this.shader = null;
+  }
+}
+re.extension = {
+  type: [
+    p.WebGPUPipesAdaptor
+  ],
+  name: "graphics"
+};
+class se {
+  init() {
+    const e = D({
+      name: "mesh",
+      bits: [
+        me,
+        Pe,
+        H
+      ]
+    });
+    this._shader = new z({
+      gpuProgram: e,
+      resources: {
+        uTexture: w.EMPTY._source,
+        uSampler: w.EMPTY._source.style,
+        textureUniforms: {
+          uTextureMatrix: { type: "mat3x3<f32>", value: new k() }
+        }
+      }
+    });
+  }
+  execute(e, t) {
+    const r = e.renderer;
+    let s = t._shader;
+    if (!s)
+      s = this._shader, s.groups[2] = r.texture.getTextureBindGroup(t.texture);
+    else if (!s.gpuProgram) {
+      v("Mesh shader has no gpuProgram", t.shader);
+      return;
+    }
+    const i = s.gpuProgram;
+    if (i.autoAssignGlobalUniforms && (s.groups[0] = r.globalUniforms.bindGroup), i.autoAssignLocalUniforms) {
+      const n = e.localUniforms;
+      s.groups[1] = r.renderPipes.uniformBatch.getUniformBindGroup(n, !0);
+    }
+    r.encoder.draw({
+      geometry: t._geometry,
+      shader: s,
+      state: t.state
+    });
+  }
+  destroy() {
+    this._shader.destroy(!0), this._shader = null;
+  }
+}
+se.extension = {
+  type: [
+    p.WebGPUPipesAdaptor
+  ],
+  name: "mesh"
+};
+const Ie = [
+  ...Te,
+  q,
+  N,
+  U,
+  j,
+  W,
+  te,
+  X,
+  Z,
+  J,
+  $,
+  V,
+  K,
+  I
+], We = [...Ce, Y], Ve = [O, se, re], ie = [], ne = [], oe = [];
+S.handleByNamedList(p.WebGPUSystem, ie);
+S.handleByNamedList(p.WebGPUPipes, ne);
+S.handleByNamedList(p.WebGPUPipesAdaptor, oe);
+S.add(...Ie, ...We, ...Ve);
+class Ye extends le {
+  constructor() {
+    const e = {
+      name: "webgpu",
+      type: fe.WEBGPU,
+      systems: ie,
+      renderPipes: ne,
+      renderPipeAdaptors: oe
+    };
+    super(e);
+  }
+}
+export {
+  Ye as WebGPURenderer
+};

src/backend/gradio_polygonannotator/templates/component/browserAll-CBYXns0T.js

@@ -0,0 +1,1869 @@
+import { T as A, U as Z, P as g, r as te, E as b, a as ie, w as y, e as w, C as V } from "./Index-Ct_1BCRd.js";
+import "./webworkerAll-FY7_jo4S.js";
+class q {
+  constructor(e) {
+    this._lastTransform = "", this._observer = null, this._tickerAttached = !1, this.updateTranslation = () => {
+      if (!this._canvas)
+        return;
+      const t = this._canvas.getBoundingClientRect(), i = this._canvas.width, n = this._canvas.height, s = t.width / i * this._renderer.resolution, o = t.height / n * this._renderer.resolution, r = t.left, l = t.top, d = `translate(${r}px, ${l}px) scale(${s}, ${o})`;
+      d !== this._lastTransform && (this._domElement.style.transform = d, this._lastTransform = d);
+    }, this._domElement = e.domElement, this._renderer = e.renderer, !(globalThis.OffscreenCanvas && this._renderer.canvas instanceof OffscreenCanvas) && (this._canvas = this._renderer.canvas, this._attachObserver());
+  }
+  /** The canvas element that this CanvasObserver is associated with. */
+  get canvas() {
+    return this._canvas;
+  }
+  /** Attaches the DOM element to the canvas parent if it is not already attached. */
+  ensureAttached() {
+    !this._domElement.parentNode && this._canvas.parentNode && (this._canvas.parentNode.appendChild(this._domElement), this.updateTranslation());
+  }
+  /** Sets up a ResizeObserver if available. This ensures that the DOM element is kept in sync with the canvas size . */
+  _attachObserver() {
+    "ResizeObserver" in globalThis ? (this._observer && (this._observer.disconnect(), this._observer = null), this._observer = new ResizeObserver((e) => {
+      for (const t of e) {
+        if (t.target !== this._canvas)
+          continue;
+        const i = this.canvas.width, n = this.canvas.height, s = t.contentRect.width / i * this._renderer.resolution, o = t.contentRect.height / n * this._renderer.resolution;
+        (this._lastScaleX !== s || this._lastScaleY !== o) && (this.updateTranslation(), this._lastScaleX = s, this._lastScaleY = o);
+      }
+    }), this._observer.observe(this._canvas)) : this._tickerAttached || A.shared.add(this.updateTranslation, this, Z.HIGH);
+  }
+  /** Destroys the CanvasObserver instance, cleaning up observers and Ticker. */
+  destroy() {
+    this._observer ? (this._observer.disconnect(), this._observer = null) : this._tickerAttached && A.shared.remove(this.updateTranslation), this._domElement = null, this._renderer = null, this._canvas = null, this._tickerAttached = !1, this._lastTransform = "", this._lastScaleX = null, this._lastScaleY = null;
+  }
+}
+class M {
+  /**
+   * @param manager - The event boundary which manages this event. Propagation can only occur
+   *  within the boundary's jurisdiction.
+   */
+  constructor(e) {
+    this.bubbles = !0, this.cancelBubble = !0, this.cancelable = !1, this.composed = !1, this.defaultPrevented = !1, this.eventPhase = M.prototype.NONE, this.propagationStopped = !1, this.propagationImmediatelyStopped = !1, this.layer = new g(), this.page = new g(), this.NONE = 0, this.CAPTURING_PHASE = 1, this.AT_TARGET = 2, this.BUBBLING_PHASE = 3, this.manager = e;
+  }
+  /** @readonly */
+  get layerX() {
+    return this.layer.x;
+  }
+  /** @readonly */
+  get layerY() {
+    return this.layer.y;
+  }
+  /** @readonly */
+  get pageX() {
+    return this.page.x;
+  }
+  /** @readonly */
+  get pageY() {
+    return this.page.y;
+  }
+  /**
+   * Fallback for the deprecated `InteractionEvent.data`.
+   * @deprecated since 7.0.0
+   */
+  get data() {
+    return this;
+  }
+  /**
+   * The propagation path for this event. Alias for {@link EventBoundary.propagationPath}.
+   * @advanced
+   */
+  composedPath() {
+    return this.manager && (!this.path || this.path[this.path.length - 1] !== this.target) && (this.path = this.target ? this.manager.propagationPath(this.target) : []), this.path;
+  }
+  /**
+   * Unimplemented method included for implementing the DOM interface `Event`. It will throw an `Error`.
+   * @deprecated
+   * @ignore
+   * @param _type
+   * @param _bubbles
+   * @param _cancelable
+   */
+  initEvent(e, t, i) {
+    throw new Error("initEvent() is a legacy DOM API. It is not implemented in the Federated Events API.");
+  }
+  /**
+   * Unimplemented method included for implementing the DOM interface `UIEvent`. It will throw an `Error`.
+   * @ignore
+   * @deprecated
+   * @param _typeArg
+   * @param _bubblesArg
+   * @param _cancelableArg
+   * @param _viewArg
+   * @param _detailArg
+   */
+  initUIEvent(e, t, i, n, s) {
+    throw new Error("initUIEvent() is a legacy DOM API. It is not implemented in the Federated Events API.");
+  }
+  /**
+   * Prevent default behavior of both PixiJS and the user agent.
+   * @example
+   * ```ts
+   * sprite.on('click', (event) => {
+   *     // Prevent both browser's default click behavior
+   *     // and PixiJS's default handling
+   *     event.preventDefault();
+   *
+   *     // Custom handling
+   *     customClickHandler();
+   * });
+   * ```
+   * @remarks
+   * - Only works if the native event is cancelable
+   * - Does not stop event propagation
+   */
+  preventDefault() {
+    this.nativeEvent instanceof Event && this.nativeEvent.cancelable && this.nativeEvent.preventDefault(), this.defaultPrevented = !0;
+  }
+  /**
+   * Stop this event from propagating to any additional listeners, including those
+   * on the current target and any following targets in the propagation path.
+   * @example
+   * ```ts
+   * container.on('pointerdown', (event) => {
+   *     // Stop all further event handling
+   *     event.stopImmediatePropagation();
+   *
+   *     // These handlers won't be called:
+   *     // - Other pointerdown listeners on this container
+   *     // - Any pointerdown listeners on parent containers
+   * });
+   * ```
+   * @remarks
+   * - Immediately stops all event propagation
+   * - Prevents other listeners on same target from being called
+   * - More aggressive than stopPropagation()
+   */
+  stopImmediatePropagation() {
+    this.propagationImmediatelyStopped = !0;
+  }
+  /**
+   * Stop this event from propagating to the next target in the propagation path.
+   * The rest of the listeners on the current target will still be notified.
+   * @example
+   * ```ts
+   * child.on('pointermove', (event) => {
+   *     // Handle event on child
+   *     updateChild();
+   *
+   *     // Prevent parent handlers from being called
+   *     event.stopPropagation();
+   * });
+   *
+   * // This won't be called if child handles the event
+   * parent.on('pointermove', (event) => {
+   *     updateParent();
+   * });
+   * ```
+   * @remarks
+   * - Stops event bubbling to parent containers
+   * - Does not prevent other listeners on same target
+   * - Less aggressive than stopImmediatePropagation()
+   */
+  stopPropagation() {
+    this.propagationStopped = !0;
+  }
+}
+var I = /iPhone/i, C = /iPod/i, L = /iPad/i, U = /\biOS-universal(?:.+)Mac\b/i, k = /\bAndroid(?:.+)Mobile\b/i, R = /Android/i, E = /(?:SD4930UR|\bSilk(?:.+)Mobile\b)/i, O = /Silk/i, m = /Windows Phone/i, X = /\bWindows(?:.+)ARM\b/i, Y = /BlackBerry/i, H = /BB10/i, F = /Opera Mini/i, N = /\b(CriOS|Chrome)(?:.+)Mobile/i, $ = /Mobile(?:.+)Firefox\b/i, K = function(a) {
+  return typeof a < "u" && a.platform === "MacIntel" && typeof a.maxTouchPoints == "number" && a.maxTouchPoints > 1 && typeof MSStream > "u";
+};
+function ne(a) {
+  return function(e) {
+    return e.test(a);
+  };
+}
+function G(a) {
+  var e = {
+    userAgent: "",
+    platform: "",
+    maxTouchPoints: 0
+  };
+  !a && typeof navigator < "u" ? e = {
+    userAgent: navigator.userAgent,
+    platform: navigator.platform,
+    maxTouchPoints: navigator.maxTouchPoints || 0
+  } : typeof a == "string" ? e.userAgent = a : a && a.userAgent && (e = {
+    userAgent: a.userAgent,
+    platform: a.platform,
+    maxTouchPoints: a.maxTouchPoints || 0
+  });
+  var t = e.userAgent, i = t.split("[FBAN");
+  typeof i[1] < "u" && (t = i[0]), i = t.split("Twitter"), typeof i[1] < "u" && (t = i[0]);
+  var n = ne(t), s = {
+    apple: {
+      phone: n(I) && !n(m),
+      ipod: n(C),
+      tablet: !n(I) && (n(L) || K(e)) && !n(m),
+      universal: n(U),
+      device: (n(I) || n(C) || n(L) || n(U) || K(e)) && !n(m)
+    },
+    amazon: {
+      phone: n(E),
+      tablet: !n(E) && n(O),
+      device: n(E) || n(O)
+    },
+    android: {
+      phone: !n(m) && n(E) || !n(m) && n(k),
+      tablet: !n(m) && !n(E) && !n(k) && (n(O) || n(R)),
+      device: !n(m) && (n(E) || n(O) || n(k) || n(R)) || n(/\bokhttp\b/i)
+    },
+    windows: {
+      phone: n(m),
+      tablet: n(X),
+      device: n(m) || n(X)
+    },
+    other: {
+      blackberry: n(Y),
+      blackberry10: n(H),
+      opera: n(F),
+      firefox: n($),
+      chrome: n(N),
+      device: n(Y) || n(H) || n(F) || n($) || n(N)
+    },
+    any: !1,
+    phone: !1,
+    tablet: !1
+  };
+  return s.any = s.apple.device || s.android.device || s.windows.device || s.other.device, s.phone = s.apple.phone || s.android.phone || s.windows.phone, s.tablet = s.apple.tablet || s.android.tablet || s.windows.tablet, s;
+}
+const se = G.default ?? G, oe = se(globalThis.navigator), re = 9, W = 100, ae = 0, he = 0, j = 2, z = 1, le = -1e3, ce = -1e3, de = 2, S = class J {
+  // eslint-disable-next-line jsdoc/require-param
+  /**
+   * @param {WebGLRenderer|WebGPURenderer} renderer - A reference to the current renderer
+   */
+  constructor(e, t = oe) {
+    this._mobileInfo = t, this.debug = !1, this._activateOnTab = !0, this._deactivateOnMouseMove = !0, this._isActive = !1, this._isMobileAccessibility = !1, this._div = null, this._pool = [], this._renderId = 0, this._children = [], this._androidUpdateCount = 0, this._androidUpdateFrequency = 500, this._hookDiv = null, (t.tablet || t.phone) && this._createTouchHook(), this._renderer = e;
+  }
+  /**
+   * Value of `true` if accessibility is currently active and accessibility layers are showing.
+   * @type {boolean}
+   * @readonly
+   */
+  get isActive() {
+    return this._isActive;
+  }
+  /**
+   * Value of `true` if accessibility is enabled for touch devices.
+   * @type {boolean}
+   * @readonly
+   */
+  get isMobileAccessibility() {
+    return this._isMobileAccessibility;
+  }
+  /**
+   * The DOM element that will sit over the PixiJS element. This is where the div overlays will go.
+   * @readonly
+   */
+  get hookDiv() {
+    return this._hookDiv;
+  }
+  /**
+   * Creates the touch hooks.
+   * @private
+   */
+  _createTouchHook() {
+    const e = document.createElement("button");
+    e.style.width = `${z}px`, e.style.height = `${z}px`, e.style.position = "absolute", e.style.top = `${le}px`, e.style.left = `${ce}px`, e.style.zIndex = de.toString(), e.style.backgroundColor = "#FF0000", e.title = "select to enable accessibility for this content", e.addEventListener("focus", () => {
+      this._isMobileAccessibility = !0, this._activate(), this._destroyTouchHook();
+    }), document.body.appendChild(e), this._hookDiv = e;
+  }
+  /**
+   * Destroys the touch hooks.
+   * @private
+   */
+  _destroyTouchHook() {
+    this._hookDiv && (document.body.removeChild(this._hookDiv), this._hookDiv = null);
+  }
+  /**
+   * Activating will cause the Accessibility layer to be shown.
+   * This is called when a user presses the tab key.
+   * @private
+   */
+  _activate() {
+    if (this._isActive)
+      return;
+    this._isActive = !0, this._div || (this._div = document.createElement("div"), this._div.style.position = "absolute", this._div.style.top = `${ae}px`, this._div.style.left = `${he}px`, this._div.style.pointerEvents = "none", this._div.style.zIndex = j.toString(), this._canvasObserver = new q({
+      domElement: this._div,
+      renderer: this._renderer
+    })), this._activateOnTab && (this._onKeyDown = this._onKeyDown.bind(this), globalThis.addEventListener("keydown", this._onKeyDown, !1)), this._deactivateOnMouseMove && (this._onMouseMove = this._onMouseMove.bind(this), globalThis.document.addEventListener("mousemove", this._onMouseMove, !0));
+    const e = this._renderer.view.canvas;
+    if (e.parentNode)
+      this._canvasObserver.ensureAttached(), this._initAccessibilitySetup();
+    else {
+      const t = new MutationObserver(() => {
+        e.parentNode && (t.disconnect(), this._canvasObserver.ensureAttached(), this._initAccessibilitySetup());
+      });
+      t.observe(document.body, { childList: !0, subtree: !0 });
+    }
+  }
+  // New method to handle initialization after div is ready
+  _initAccessibilitySetup() {
+    this._renderer.runners.postrender.add(this), this._renderer.lastObjectRendered && this._updateAccessibleObjects(this._renderer.lastObjectRendered);
+  }
+  /**
+   * Deactivates the accessibility system. Removes listeners and accessibility elements.
+   * @private
+   */
+  _deactivate() {
+    if (!(!this._isActive || this._isMobileAccessibility)) {
+      this._isActive = !1, globalThis.document.removeEventListener("mousemove", this._onMouseMove, !0), this._activateOnTab && globalThis.addEventListener("keydown", this._onKeyDown, !1), this._renderer.runners.postrender.remove(this);
+      for (const e of this._children)
+        e._accessibleDiv && e._accessibleDiv.parentNode && (e._accessibleDiv.parentNode.removeChild(e._accessibleDiv), e._accessibleDiv = null), e._accessibleActive = !1;
+      this._pool.forEach((e) => {
+        e.parentNode && e.parentNode.removeChild(e);
+      }), this._div && this._div.parentNode && this._div.parentNode.removeChild(this._div), this._pool = [], this._children = [];
+    }
+  }
+  /**
+   * This recursive function will run through the scene graph and add any new accessible objects to the DOM layer.
+   * @private
+   * @param {Container} container - The Container to check.
+   */
+  _updateAccessibleObjects(e) {
+    if (!e.visible || !e.accessibleChildren)
+      return;
+    e.accessible && (e._accessibleActive || this._addChild(e), e._renderId = this._renderId);
+    const t = e.children;
+    if (t)
+      for (let i = 0; i < t.length; i++)
+        this._updateAccessibleObjects(t[i]);
+  }
+  /**
+   * Runner init called, view is available at this point.
+   * @ignore
+   */
+  init(e) {
+    const i = {
+      accessibilityOptions: {
+        ...J.defaultOptions,
+        ...(e == null ? void 0 : e.accessibilityOptions) || {}
+      }
+    };
+    this.debug = i.accessibilityOptions.debug, this._activateOnTab = i.accessibilityOptions.activateOnTab, this._deactivateOnMouseMove = i.accessibilityOptions.deactivateOnMouseMove, i.accessibilityOptions.enabledByDefault ? this._activate() : this._activateOnTab && (this._onKeyDown = this._onKeyDown.bind(this), globalThis.addEventListener("keydown", this._onKeyDown, !1)), this._renderer.runners.postrender.remove(this);
+  }
+  /**
+   * Updates the accessibility layer during rendering.
+   * - Removes divs for containers no longer in the scene
+   * - Updates the position and dimensions of the root div
+   * - Updates positions of active accessibility divs
+   * Only fires while the accessibility system is active.
+   * @ignore
+   */
+  postrender() {
+    const e = performance.now();
+    if (this._mobileInfo.android.device && e < this._androidUpdateCount || (this._androidUpdateCount = e + this._androidUpdateFrequency, !this._renderer.renderingToScreen || !this._renderer.view.canvas))
+      return;
+    const t = /* @__PURE__ */ new Set();
+    if (this._renderer.lastObjectRendered) {
+      this._updateAccessibleObjects(this._renderer.lastObjectRendered);
+      for (const i of this._children)
+        i._renderId === this._renderId && t.add(this._children.indexOf(i));
+    }
+    for (let i = this._children.length - 1; i >= 0; i--) {
+      const n = this._children[i];
+      t.has(i) || (n._accessibleDiv && n._accessibleDiv.parentNode && (n._accessibleDiv.parentNode.removeChild(n._accessibleDiv), this._pool.push(n._accessibleDiv), n._accessibleDiv = null), n._accessibleActive = !1, te(this._children, i, 1));
+    }
+    this._renderer.renderingToScreen && this._canvasObserver.ensureAttached();
+    for (let i = 0; i < this._children.length; i++) {
+      const n = this._children[i];
+      if (!n._accessibleActive || !n._accessibleDiv)
+        continue;
+      const s = n._accessibleDiv, o = n.hitArea || n.getBounds().rectangle;
+      if (n.hitArea) {
+        const r = n.worldTransform;
+        s.style.left = `${r.tx + o.x * r.a}px`, s.style.top = `${r.ty + o.y * r.d}px`, s.style.width = `${o.width * r.a}px`, s.style.height = `${o.height * r.d}px`;
+      } else
+        this._capHitArea(o), s.style.left = `${o.x}px`, s.style.top = `${o.y}px`, s.style.width = `${o.width}px`, s.style.height = `${o.height}px`;
+    }
+    this._renderId++;
+  }
+  /**
+   * private function that will visually add the information to the
+   * accessibility div
+   * @param {HTMLElement} div -
+   */
+  _updateDebugHTML(e) {
+    e.innerHTML = `type: ${e.type}</br> title : ${e.title}</br> tabIndex: ${e.tabIndex}`;
+  }
+  /**
+   * Adjust the hit area based on the bounds of a display object
+   * @param {Rectangle} hitArea - Bounds of the child
+   */
+  _capHitArea(e) {
+    e.x < 0 && (e.width += e.x, e.x = 0), e.y < 0 && (e.height += e.y, e.y = 0);
+    const { width: t, height: i } = this._renderer;
+    e.x + e.width > t && (e.width = t - e.x), e.y + e.height > i && (e.height = i - e.y);
+  }
+  /**
+   * Creates or reuses a div element for a Container and adds it to the accessibility layer.
+   * Sets up ARIA attributes, event listeners, and positioning based on the container's properties.
+   * @private
+   * @param {Container} container - The child to make accessible.
+   */
+  _addChild(e) {
+    let t = this._pool.pop();
+    t || (e.accessibleType === "button" ? t = document.createElement("button") : (t = document.createElement(e.accessibleType), t.style.cssText = `
+                        color: transparent;
+                        pointer-events: none;
+                        padding: 0;
+                        margin: 0;
+                        border: 0;
+                        outline: 0;
+                        background: transparent;
+                        box-sizing: border-box;
+                        user-select: none;
+                        -webkit-user-select: none;
+                        -moz-user-select: none;
+                        -ms-user-select: none;
+                    `, e.accessibleText && (t.innerText = e.accessibleText)), t.style.width = `${W}px`, t.style.height = `${W}px`, t.style.backgroundColor = this.debug ? "rgba(255,255,255,0.5)" : "transparent", t.style.position = "absolute", t.style.zIndex = j.toString(), t.style.borderStyle = "none", navigator.userAgent.toLowerCase().includes("chrome") ? t.setAttribute("aria-live", "off") : t.setAttribute("aria-live", "polite"), navigator.userAgent.match(/rv:.*Gecko\//) ? t.setAttribute("aria-relevant", "additions") : t.setAttribute("aria-relevant", "text"), t.addEventListener("click", this._onClick.bind(this)), t.addEventListener("focus", this._onFocus.bind(this)), t.addEventListener("focusout", this._onFocusOut.bind(this))), t.style.pointerEvents = e.accessiblePointerEvents, t.type = e.accessibleType, e.accessibleTitle && e.accessibleTitle !== null ? t.title = e.accessibleTitle : (!e.accessibleHint || e.accessibleHint === null) && (t.title = `container ${e.tabIndex}`), e.accessibleHint && e.accessibleHint !== null && t.setAttribute("aria-label", e.accessibleHint), e.interactive ? t.tabIndex = e.tabIndex : t.tabIndex = 0, this.debug && this._updateDebugHTML(t), e._accessibleActive = !0, e._accessibleDiv = t, t.container = e, this._children.push(e), this._div.appendChild(e._accessibleDiv);
+  }
+  /**
+   * Dispatch events with the EventSystem.
+   * @param e
+   * @param type
+   * @private
+   */
+  _dispatchEvent(e, t) {
+    const { container: i } = e.target, n = this._renderer.events.rootBoundary, s = Object.assign(new M(n), { target: i });
+    n.rootTarget = this._renderer.lastObjectRendered, t.forEach((o) => n.dispatchEvent(s, o));
+  }
+  /**
+   * Maps the div button press to pixi's EventSystem (click)
+   * @private
+   * @param {MouseEvent} e - The click event.
+   */
+  _onClick(e) {
+    this._dispatchEvent(e, ["click", "pointertap", "tap"]);
+  }
+  /**
+   * Maps the div focus events to pixi's EventSystem (mouseover)
+   * @private
+   * @param {FocusEvent} e - The focus event.
+   */
+  _onFocus(e) {
+    e.target.getAttribute("aria-live") || e.target.setAttribute("aria-live", "assertive"), this._dispatchEvent(e, ["mouseover"]);
+  }
+  /**
+   * Maps the div focus events to pixi's EventSystem (mouseout)
+   * @private
+   * @param {FocusEvent} e - The focusout event.
+   */
+  _onFocusOut(e) {
+    e.target.getAttribute("aria-live") || e.target.setAttribute("aria-live", "polite"), this._dispatchEvent(e, ["mouseout"]);
+  }
+  /**
+   * Is called when a key is pressed
+   * @private
+   * @param {KeyboardEvent} e - The keydown event.
+   */
+  _onKeyDown(e) {
+    e.keyCode !== re || !this._activateOnTab || this._activate();
+  }
+  /**
+   * Is called when the mouse moves across the renderer element
+   * @private
+   * @param {MouseEvent} e - The mouse event.
+   */
+  _onMouseMove(e) {
+    e.movementX === 0 && e.movementY === 0 || this._deactivate();
+  }
+  /**
+   * Destroys the accessibility system. Removes all elements and listeners.
+   * > [!IMPORTANT] This is typically called automatically when the {@link Application} is destroyed.
+   * > A typically user should not need to call this method directly.
+   */
+  destroy() {
+    var e;
+    this._deactivate(), this._destroyTouchHook(), (e = this._canvasObserver) == null || e.destroy(), this._canvasObserver = null, this._div = null, this._pool = null, this._children = null, this._renderer = null, this._activateOnTab && globalThis.removeEventListener("keydown", this._onKeyDown);
+  }
+  /**
+   * Enables or disables the accessibility system.
+   * @param enabled - Whether to enable or disable accessibility.
+   * @example
+   * ```js
+   * app.renderer.accessibility.setAccessibilityEnabled(true); // Enable accessibility
+   * app.renderer.accessibility.setAccessibilityEnabled(false); // Disable accessibility
+   * ```
+   */
+  setAccessibilityEnabled(e) {
+    e ? this._activate() : this._deactivate();
+  }
+};
+S.extension = {
+  type: [
+    b.WebGLSystem,
+    b.WebGPUSystem
+  ],
+  name: "accessibility"
+};
+S.defaultOptions = {
+  /**
+   * Whether to enable accessibility features on initialization
+   * @default false
+   */
+  enabledByDefault: !1,
+  /**
+   * Whether to visually show the accessibility divs for debugging
+   * @default false
+   */
+  debug: !1,
+  /**
+   * Whether to activate accessibility when tab key is pressed
+   * @default true
+   */
+  activateOnTab: !0,
+  /**
+   * Whether to deactivate accessibility when mouse moves
+   * @default true
+   */
+  deactivateOnMouseMove: !0
+};
+let ue = S;
+const pe = {
+  accessible: !1,
+  accessibleTitle: null,
+  accessibleHint: null,
+  tabIndex: 0,
+  accessibleType: "button",
+  accessibleText: null,
+  accessiblePointerEvents: "auto",
+  accessibleChildren: !0,
+  _accessibleActive: !1,
+  _accessibleDiv: null,
+  _renderId: -1
+};
+class Q {
+  /**
+   * Constructor for the DOMPipe class.
+   * @param renderer - The renderer instance that this DOMPipe will be associated with.
+   */
+  constructor(e) {
+    this._attachedDomElements = [], this._renderer = e, this._renderer.runners.postrender.add(this), this._renderer.runners.init.add(this), this._domElement = document.createElement("div"), this._domElement.style.position = "absolute", this._domElement.style.top = "0", this._domElement.style.left = "0", this._domElement.style.pointerEvents = "none", this._domElement.style.zIndex = "1000";
+  }
+  /** Initializes the DOMPipe, setting up the main DOM element and adding it to the document body. */
+  init() {
+    this._canvasObserver = new q({
+      domElement: this._domElement,
+      renderer: this._renderer
+    });
+  }
+  /**
+   * Adds a renderable DOM container to the list of attached elements.
+   * @param domContainer - The DOM container to be added.
+   * @param _instructionSet - The instruction set (unused).
+   */
+  addRenderable(e, t) {
+    this._attachedDomElements.includes(e) || this._attachedDomElements.push(e);
+  }
+  /**
+   * Updates a renderable DOM container.
+   * @param _domContainer - The DOM container to be updated (unused).
+   */
+  updateRenderable(e) {
+  }
+  /**
+   * Validates a renderable DOM container.
+   * @param _domContainer - The DOM container to be validated (unused).
+   * @returns Always returns true as validation is not required.
+   */
+  validateRenderable(e) {
+    return !0;
+  }
+  /** Handles the post-rendering process, ensuring DOM elements are correctly positioned and visible. */
+  postrender() {
+    const e = this._attachedDomElements;
+    if (e.length === 0) {
+      this._domElement.remove();
+      return;
+    }
+    this._canvasObserver.ensureAttached();
+    for (let t = 0; t < e.length; t++) {
+      const i = e[t], n = i.element;
+      if (!i.parent || i.globalDisplayStatus < 7)
+        n == null || n.remove(), e.splice(t, 1), t--;
+      else {
+        this._domElement.contains(n) || (n.style.position = "absolute", n.style.pointerEvents = "auto", this._domElement.appendChild(n));
+        const s = i.worldTransform, o = i._anchor, r = i.width * o.x, l = i.height * o.y;
+        n.style.transformOrigin = `${r}px ${l}px`, n.style.transform = `matrix(${s.a}, ${s.b}, ${s.c}, ${s.d}, ${s.tx - r}, ${s.ty - l})`, n.style.opacity = i.groupAlpha.toString();
+      }
+    }
+  }
+  /** Destroys the DOMPipe, removing all attached DOM elements and cleaning up resources. */
+  destroy() {
+    var e;
+    this._renderer.runners.postrender.remove(this);
+    for (let t = 0; t < this._attachedDomElements.length; t++)
+      (e = this._attachedDomElements[t].element) == null || e.remove();
+    this._attachedDomElements.length = 0, this._domElement.remove(), this._canvasObserver.destroy(), this._renderer = null;
+  }
+}
+Q.extension = {
+  type: [
+    b.WebGLPipes,
+    b.WebGPUPipes,
+    b.CanvasPipes
+  ],
+  name: "dom"
+};
+class ve {
+  constructor() {
+    this.interactionFrequency = 10, this._deltaTime = 0, this._didMove = !1, this._tickerAdded = !1, this._pauseUpdate = !0;
+  }
+  /**
+   * Initializes the event ticker.
+   * @param events - The event system.
+   */
+  init(e) {
+    this.removeTickerListener(), this.events = e, this.interactionFrequency = 10, this._deltaTime = 0, this._didMove = !1, this._tickerAdded = !1, this._pauseUpdate = !0;
+  }
+  /** Whether to pause the update checks or not. */
+  get pauseUpdate() {
+    return this._pauseUpdate;
+  }
+  set pauseUpdate(e) {
+    this._pauseUpdate = e;
+  }
+  /** Adds the ticker listener. */
+  addTickerListener() {
+    this._tickerAdded || !this.domElement || (A.system.add(this._tickerUpdate, this, Z.INTERACTION), this._tickerAdded = !0);
+  }
+  /** Removes the ticker listener. */
+  removeTickerListener() {
+    this._tickerAdded && (A.system.remove(this._tickerUpdate, this), this._tickerAdded = !1);
+  }
+  /** Sets flag to not fire extra events when the user has already moved there mouse */
+  pointerMoved() {
+    this._didMove = !0;
+  }
+  /** Updates the state of interactive objects. */
+  _update() {
+    if (!this.domElement || this._pauseUpdate)
+      return;
+    if (this._didMove) {
+      this._didMove = !1;
+      return;
+    }
+    const e = this.events._rootPointerEvent;
+    this.events.supportsTouchEvents && e.pointerType === "touch" || globalThis.document.dispatchEvent(this.events.supportsPointerEvents ? new PointerEvent("pointermove", {
+      clientX: e.clientX,
+      clientY: e.clientY,
+      pointerType: e.pointerType,
+      pointerId: e.pointerId
+    }) : new MouseEvent("mousemove", {
+      clientX: e.clientX,
+      clientY: e.clientY
+    }));
+  }
+  /**
+   * Updates the state of interactive objects if at least {@link interactionFrequency}
+   * milliseconds have passed since the last invocation.
+   *
+   * Invoked by a throttled ticker update from {@link Ticker.system}.
+   * @param ticker - The throttled ticker.
+   */
+  _tickerUpdate(e) {
+    this._deltaTime += e.deltaTime, !(this._deltaTime < this.interactionFrequency) && (this._deltaTime = 0, this._update());
+  }
+  /** Destroys the event ticker. */
+  destroy() {
+    this.removeTickerListener(), this.events = null, this.domElement = null, this._deltaTime = 0, this._didMove = !1, this._tickerAdded = !1, this._pauseUpdate = !0;
+  }
+}
+const _ = new ve();
+class D extends M {
+  constructor() {
+    super(...arguments), this.client = new g(), this.movement = new g(), this.offset = new g(), this.global = new g(), this.screen = new g();
+  }
+  /** @readonly */
+  get clientX() {
+    return this.client.x;
+  }
+  /** @readonly */
+  get clientY() {
+    return this.client.y;
+  }
+  /**
+   * Alias for {@link FederatedMouseEvent.clientX this.clientX}.
+   * @readonly
+   */
+  get x() {
+    return this.clientX;
+  }
+  /**
+   * Alias for {@link FederatedMouseEvent.clientY this.clientY}.
+   * @readonly
+   */
+  get y() {
+    return this.clientY;
+  }
+  /** @readonly */
+  get movementX() {
+    return this.movement.x;
+  }
+  /** @readonly */
+  get movementY() {
+    return this.movement.y;
+  }
+  /** @readonly */
+  get offsetX() {
+    return this.offset.x;
+  }
+  /** @readonly */
+  get offsetY() {
+    return this.offset.y;
+  }
+  /** @readonly */
+  get globalX() {
+    return this.global.x;
+  }
+  /** @readonly */
+  get globalY() {
+    return this.global.y;
+  }
+  /**
+   * The pointer coordinates in the renderer's screen. Alias for `screen.x`.
+   * @readonly
+   */
+  get screenX() {
+    return this.screen.x;
+  }
+  /**
+   * The pointer coordinates in the renderer's screen. Alias for `screen.y`.
+   * @readonly
+   */
+  get screenY() {
+    return this.screen.y;
+  }
+  /**
+   * Converts global coordinates into container-local coordinates.
+   *
+   * This method transforms coordinates from world space to a container's local space,
+   * useful for precise positioning and hit testing.
+   * @param container - The Container to get local coordinates for
+   * @param point - Optional Point object to store the result. If not provided, a new Point will be created
+   * @param globalPos - Optional custom global coordinates. If not provided, the event's global position is used
+   * @returns The local coordinates as a Point object
+   * @example
+   * ```ts
+   * // Basic usage - get local coordinates relative to a container
+   * sprite.on('pointermove', (event: FederatedMouseEvent) => {
+   *     // Get position relative to the sprite
+   *     const localPos = event.getLocalPosition(sprite);
+   *     console.log('Local position:', localPos.x, localPos.y);
+   * });
+   * // Using custom global coordinates
+   * const customGlobal = new Point(100, 100);
+   * sprite.on('pointermove', (event: FederatedMouseEvent) => {
+   *     // Transform custom coordinates
+   *     const localPos = event.getLocalPosition(sprite, undefined, customGlobal);
+   *     console.log('Custom local position:', localPos.x, localPos.y);
+   * });
+   * ```
+   * @see {@link Container.worldTransform} For the transformation matrix
+   * @see {@link Point} For the point class used to store coordinates
+   */
+  getLocalPosition(e, t, i) {
+    return e.worldTransform.applyInverse(i || this.global, t);
+  }
+  /**
+   * Whether the modifier key was pressed when this event natively occurred.
+   * @param key - The modifier key.
+   */
+  getModifierState(e) {
+    return "getModifierState" in this.nativeEvent && this.nativeEvent.getModifierState(e);
+  }
+  /**
+   * Not supported.
+   * @param _typeArg
+   * @param _canBubbleArg
+   * @param _cancelableArg
+   * @param _viewArg
+   * @param _detailArg
+   * @param _screenXArg
+   * @param _screenYArg
+   * @param _clientXArg
+   * @param _clientYArg
+   * @param _ctrlKeyArg
+   * @param _altKeyArg
+   * @param _shiftKeyArg
+   * @param _metaKeyArg
+   * @param _buttonArg
+   * @param _relatedTargetArg
+   * @deprecated since 7.0.0
+   * @ignore
+   */
+  // eslint-disable-next-line max-params
+  initMouseEvent(e, t, i, n, s, o, r, l, d, p, u, h, v, c, Ee) {
+    throw new Error("Method not implemented.");
+  }
+}
+class f extends D {
+  constructor() {
+    super(...arguments), this.width = 0, this.height = 0, this.isPrimary = !1;
+  }
+  /**
+   * Only included for completeness for now
+   * @ignore
+   */
+  getCoalescedEvents() {
+    return this.type === "pointermove" || this.type === "mousemove" || this.type === "touchmove" ? [this] : [];
+  }
+  /**
+   * Only included for completeness for now
+   * @ignore
+   */
+  getPredictedEvents() {
+    throw new Error("getPredictedEvents is not supported!");
+  }
+}
+class T extends D {
+  constructor() {
+    super(...arguments), this.DOM_DELTA_PIXEL = 0, this.DOM_DELTA_LINE = 1, this.DOM_DELTA_PAGE = 2;
+  }
+}
+T.DOM_DELTA_PIXEL = 0;
+T.DOM_DELTA_LINE = 1;
+T.DOM_DELTA_PAGE = 2;
+const fe = 2048, me = new g(), P = new g();
+class _e {
+  /**
+   * @param rootTarget - The holder of the event boundary.
+   */
+  constructor(e) {
+    this.dispatch = new ie(), this.moveOnAll = !1, this.enableGlobalMoveEvents = !0, this.mappingState = {
+      trackingData: {}
+    }, this.eventPool = /* @__PURE__ */ new Map(), this._allInteractiveElements = [], this._hitElements = [], this._isPointerMoveEvent = !1, this.rootTarget = e, this.hitPruneFn = this.hitPruneFn.bind(this), this.hitTestFn = this.hitTestFn.bind(this), this.mapPointerDown = this.mapPointerDown.bind(this), this.mapPointerMove = this.mapPointerMove.bind(this), this.mapPointerOut = this.mapPointerOut.bind(this), this.mapPointerOver = this.mapPointerOver.bind(this), this.mapPointerUp = this.mapPointerUp.bind(this), this.mapPointerUpOutside = this.mapPointerUpOutside.bind(this), this.mapWheel = this.mapWheel.bind(this), this.mappingTable = {}, this.addEventMapping("pointerdown", this.mapPointerDown), this.addEventMapping("pointermove", this.mapPointerMove), this.addEventMapping("pointerout", this.mapPointerOut), this.addEventMapping("pointerleave", this.mapPointerOut), this.addEventMapping("pointerover", this.mapPointerOver), this.addEventMapping("pointerup", this.mapPointerUp), this.addEventMapping("pointerupoutside", this.mapPointerUpOutside), this.addEventMapping("wheel", this.mapWheel);
+  }
+  /**
+   * Adds an event mapping for the event `type` handled by `fn`.
+   *
+   * Event mappings can be used to implement additional or custom events. They take an event
+   * coming from the upstream scene (or directly from the {@link EventSystem}) and dispatch new downstream events
+   * generally trickling down and bubbling up to {@link EventBoundary.rootTarget this.rootTarget}.
+   *
+   * To modify the semantics of existing events, the built-in mapping methods of EventBoundary should be overridden
+   * instead.
+   * @param type - The type of upstream event to map.
+   * @param fn - The mapping method. The context of this function must be bound manually, if desired.
+   */
+  addEventMapping(e, t) {
+    this.mappingTable[e] || (this.mappingTable[e] = []), this.mappingTable[e].push({
+      fn: t,
+      priority: 0
+    }), this.mappingTable[e].sort((i, n) => i.priority - n.priority);
+  }
+  /**
+   * Dispatches the given event
+   * @param e - The event to dispatch.
+   * @param type - The type of event to dispatch. Defaults to `e.type`.
+   */
+  dispatchEvent(e, t) {
+    e.propagationStopped = !1, e.propagationImmediatelyStopped = !1, this.propagate(e, t), this.dispatch.emit(t || e.type, e);
+  }
+  /**
+   * Maps the given upstream event through the event boundary and propagates it downstream.
+   * @param e - The event to map.
+   */
+  mapEvent(e) {
+    if (!this.rootTarget)
+      return;
+    const t = this.mappingTable[e.type];
+    if (t)
+      for (let i = 0, n = t.length; i < n; i++)
+        t[i].fn(e);
+    else
+      y(`[EventBoundary]: Event mapping not defined for ${e.type}`);
+  }
+  /**
+   * Finds the Container that is the target of a event at the given coordinates.
+   *
+   * The passed (x,y) coordinates are in the world space above this event boundary.
+   * @param x - The x coordinate of the event.
+   * @param y - The y coordinate of the event.
+   */
+  hitTest(e, t) {
+    _.pauseUpdate = !0;
+    const n = this._isPointerMoveEvent && this.enableGlobalMoveEvents ? "hitTestMoveRecursive" : "hitTestRecursive", s = this[n](
+      this.rootTarget,
+      this.rootTarget.eventMode,
+      me.set(e, t),
+      this.hitTestFn,
+      this.hitPruneFn
+    );
+    return s && s[0];
+  }
+  /**
+   * Propagate the passed event from from {@link EventBoundary.rootTarget this.rootTarget} to its
+   * target `e.target`.
+   * @param e - The event to propagate.
+   * @param type - The type of event to propagate. Defaults to `e.type`.
+   */
+  propagate(e, t) {
+    if (!e.target)
+      return;
+    const i = e.composedPath();
+    e.eventPhase = e.CAPTURING_PHASE;
+    for (let n = 0, s = i.length - 1; n < s; n++)
+      if (e.currentTarget = i[n], this.notifyTarget(e, t), e.propagationStopped || e.propagationImmediatelyStopped)
+        return;
+    if (e.eventPhase = e.AT_TARGET, e.currentTarget = e.target, this.notifyTarget(e, t), !(e.propagationStopped || e.propagationImmediatelyStopped)) {
+      e.eventPhase = e.BUBBLING_PHASE;
+      for (let n = i.length - 2; n >= 0; n--)
+        if (e.currentTarget = i[n], this.notifyTarget(e, t), e.propagationStopped || e.propagationImmediatelyStopped)
+          return;
+    }
+  }
+  /**
+   * Emits the event `e` to all interactive containers. The event is propagated in the bubbling phase always.
+   *
+   * This is used in the `globalpointermove` event.
+   * @param e - The emitted event.
+   * @param type - The listeners to notify.
+   * @param targets - The targets to notify.
+   */
+  all(e, t, i = this._allInteractiveElements) {
+    if (i.length === 0)
+      return;
+    e.eventPhase = e.BUBBLING_PHASE;
+    const n = Array.isArray(t) ? t : [t];
+    for (let s = i.length - 1; s >= 0; s--)
+      n.forEach((o) => {
+        e.currentTarget = i[s], this.notifyTarget(e, o);
+      });
+  }
+  /**
+   * Finds the propagation path from {@link EventBoundary.rootTarget rootTarget} to the passed
+   * `target`. The last element in the path is `target`.
+   * @param target - The target to find the propagation path to.
+   */
+  propagationPath(e) {
+    const t = [e];
+    for (let i = 0; i < fe && e !== this.rootTarget && e.parent; i++) {
+      if (!e.parent)
+        throw new Error("Cannot find propagation path to disconnected target");
+      t.push(e.parent), e = e.parent;
+    }
+    return t.reverse(), t;
+  }
+  hitTestMoveRecursive(e, t, i, n, s, o = !1) {
+    let r = !1;
+    if (this._interactivePrune(e))
+      return null;
+    if ((e.eventMode === "dynamic" || t === "dynamic") && (_.pauseUpdate = !1), e.interactiveChildren && e.children) {
+      const p = e.children;
+      for (let u = p.length - 1; u >= 0; u--) {
+        const h = p[u], v = this.hitTestMoveRecursive(
+          h,
+          this._isInteractive(t) ? t : h.eventMode,
+          i,
+          n,
+          s,
+          o || s(e, i)
+        );
+        if (v) {
+          if (v.length > 0 && !v[v.length - 1].parent)
+            continue;
+          const c = e.isInteractive();
+          (v.length > 0 || c) && (c && this._allInteractiveElements.push(e), v.push(e)), this._hitElements.length === 0 && (this._hitElements = v), r = !0;
+        }
+      }
+    }
+    const l = this._isInteractive(t), d = e.isInteractive();
+    return d && d && this._allInteractiveElements.push(e), o || this._hitElements.length > 0 ? null : r ? this._hitElements : l && !s(e, i) && n(e, i) ? d ? [e] : [] : null;
+  }
+  /**
+   * Recursive implementation for {@link EventBoundary.hitTest hitTest}.
+   * @param currentTarget - The Container that is to be hit tested.
+   * @param eventMode - The event mode for the `currentTarget` or one of its parents.
+   * @param location - The location that is being tested for overlap.
+   * @param testFn - Callback that determines whether the target passes hit testing. This callback
+   *  can assume that `pruneFn` failed to prune the container.
+   * @param pruneFn - Callback that determiness whether the target and all of its children
+   *  cannot pass the hit test. It is used as a preliminary optimization to prune entire subtrees
+   *  of the scene graph.
+   * @returns An array holding the hit testing target and all its ancestors in order. The first element
+   *  is the target itself and the last is {@link EventBoundary.rootTarget rootTarget}. This is the opposite
+   *  order w.r.t. the propagation path. If no hit testing target is found, null is returned.
+   */
+  hitTestRecursive(e, t, i, n, s) {
+    if (this._interactivePrune(e) || s(e, i))
+      return null;
+    if ((e.eventMode === "dynamic" || t === "dynamic") && (_.pauseUpdate = !1), e.interactiveChildren && e.children) {
+      const l = e.children, d = i;
+      for (let p = l.length - 1; p >= 0; p--) {
+        const u = l[p], h = this.hitTestRecursive(
+          u,
+          this._isInteractive(t) ? t : u.eventMode,
+          d,
+          n,
+          s
+        );
+        if (h) {
+          if (h.length > 0 && !h[h.length - 1].parent)
+            continue;
+          const v = e.isInteractive();
+          return (h.length > 0 || v) && h.push(e), h;
+        }
+      }
+    }
+    const o = this._isInteractive(t), r = e.isInteractive();
+    return o && n(e, i) ? r ? [e] : [] : null;
+  }
+  _isInteractive(e) {
+    return e === "static" || e === "dynamic";
+  }
+  _interactivePrune(e) {
+    return !e || !e.visible || !e.renderable || !e.measurable || e.eventMode === "none" || e.eventMode === "passive" && !e.interactiveChildren;
+  }
+  /**
+   * Checks whether the container or any of its children cannot pass the hit test at all.
+   *
+   * {@link EventBoundary}'s implementation uses the {@link Container.hitArea hitArea}
+   * and {@link Container._maskEffect} for pruning.
+   * @param container - The container to prune.
+   * @param location - The location to test for overlap.
+   */
+  hitPruneFn(e, t) {
+    if (e.hitArea && (e.worldTransform.applyInverse(t, P), !e.hitArea.contains(P.x, P.y)))
+      return !0;
+    if (e.effects && e.effects.length)
+      for (let i = 0; i < e.effects.length; i++) {
+        const n = e.effects[i];
+        if (n.containsPoint && !n.containsPoint(t, this.hitTestFn))
+          return !0;
+      }
+    return !1;
+  }
+  /**
+   * Checks whether the container passes hit testing for the given location.
+   * @param container - The container to test.
+   * @param location - The location to test for overlap.
+   * @returns - Whether `container` passes hit testing for `location`.
+   */
+  hitTestFn(e, t) {
+    return e.hitArea ? !0 : e != null && e.containsPoint ? (e.worldTransform.applyInverse(t, P), e.containsPoint(P)) : !1;
+  }
+  /**
+   * Notify all the listeners to the event's `currentTarget`.
+   *
+   * If the `currentTarget` contains the property `on<type>`, then it is called here,
+   * simulating the behavior from version 6.x and prior.
+   * @param e - The event passed to the target.
+   * @param type - The type of event to notify. Defaults to `e.type`.
+   */
+  notifyTarget(e, t) {
+    var s, o;
+    if (!e.currentTarget.isInteractive())
+      return;
+    t ?? (t = e.type);
+    const i = `on${t}`;
+    (o = (s = e.currentTarget)[i]) == null || o.call(s, e);
+    const n = e.eventPhase === e.CAPTURING_PHASE || e.eventPhase === e.AT_TARGET ? `${t}capture` : t;
+    this._notifyListeners(e, n), e.eventPhase === e.AT_TARGET && this._notifyListeners(e, t);
+  }
+  /**
+   * Maps the upstream `pointerdown` events to a downstream `pointerdown` event.
+   *
+   * `touchstart`, `rightdown`, `mousedown` events are also dispatched for specific pointer types.
+   * @param from - The upstream `pointerdown` event.
+   */
+  mapPointerDown(e) {
+    if (!(e instanceof f)) {
+      y("EventBoundary cannot map a non-pointer event as a pointer event");
+      return;
+    }
+    const t = this.createPointerEvent(e);
+    if (this.dispatchEvent(t, "pointerdown"), t.pointerType === "touch")
+      this.dispatchEvent(t, "touchstart");
+    else if (t.pointerType === "mouse" || t.pointerType === "pen") {
+      const n = t.button === 2;
+      this.dispatchEvent(t, n ? "rightdown" : "mousedown");
+    }
+    const i = this.trackingData(e.pointerId);
+    i.pressTargetsByButton[e.button] = t.composedPath(), this.freeEvent(t);
+  }
+  /**
+   * Maps the upstream `pointermove` to downstream `pointerout`, `pointerover`, and `pointermove` events, in that order.
+   *
+   * The tracking data for the specific pointer has an updated `overTarget`. `mouseout`, `mouseover`,
+   * `mousemove`, and `touchmove` events are fired as well for specific pointer types.
+   * @param from - The upstream `pointermove` event.
+   */
+  mapPointerMove(e) {
+    var l, d;
+    if (!(e instanceof f)) {
+      y("EventBoundary cannot map a non-pointer event as a pointer event");
+      return;
+    }
+    this._allInteractiveElements.length = 0, this._hitElements.length = 0, this._isPointerMoveEvent = !0;
+    const t = this.createPointerEvent(e);
+    this._isPointerMoveEvent = !1;
+    const i = t.pointerType === "mouse" || t.pointerType === "pen", n = this.trackingData(e.pointerId), s = this.findMountedTarget(n.overTargets);
+    if (((l = n.overTargets) == null ? void 0 : l.length) > 0 && s !== t.target) {
+      const p = e.type === "mousemove" ? "mouseout" : "pointerout", u = this.createPointerEvent(e, p, s);
+      if (this.dispatchEvent(u, "pointerout"), i && this.dispatchEvent(u, "mouseout"), !t.composedPath().includes(s)) {
+        const h = this.createPointerEvent(e, "pointerleave", s);
+        for (h.eventPhase = h.AT_TARGET; h.target && !t.composedPath().includes(h.target); )
+          h.currentTarget = h.target, this.notifyTarget(h), i && this.notifyTarget(h, "mouseleave"), h.target = h.target.parent;
+        this.freeEvent(h);
+      }
+      this.freeEvent(u);
+    }
+    if (s !== t.target) {
+      const p = e.type === "mousemove" ? "mouseover" : "pointerover", u = this.clonePointerEvent(t, p);
+      this.dispatchEvent(u, "pointerover"), i && this.dispatchEvent(u, "mouseover");
+      let h = s == null ? void 0 : s.parent;
+      for (; h && h !== this.rootTarget.parent && h !== t.target; )
+        h = h.parent;
+      if (!h || h === this.rootTarget.parent) {
+        const c = this.clonePointerEvent(t, "pointerenter");
+        for (c.eventPhase = c.AT_TARGET; c.target && c.target !== s && c.target !== this.rootTarget.parent; )
+          c.currentTarget = c.target, this.notifyTarget(c), i && this.notifyTarget(c, "mouseenter"), c.target = c.target.parent;
+        this.freeEvent(c);
+      }
+      this.freeEvent(u);
+    }
+    const o = [], r = this.enableGlobalMoveEvents ?? !0;
+    this.moveOnAll ? o.push("pointermove") : this.dispatchEvent(t, "pointermove"), r && o.push("globalpointermove"), t.pointerType === "touch" && (this.moveOnAll ? o.splice(1, 0, "touchmove") : this.dispatchEvent(t, "touchmove"), r && o.push("globaltouchmove")), i && (this.moveOnAll ? o.splice(1, 0, "mousemove") : this.dispatchEvent(t, "mousemove"), r && o.push("globalmousemove"), this.cursor = (d = t.target) == null ? void 0 : d.cursor), o.length > 0 && this.all(t, o), this._allInteractiveElements.length = 0, this._hitElements.length = 0, n.overTargets = t.composedPath(), this.freeEvent(t);
+  }
+  /**
+   * Maps the upstream `pointerover` to downstream `pointerover` and `pointerenter` events, in that order.
+   *
+   * The tracking data for the specific pointer gets a new `overTarget`.
+   * @param from - The upstream `pointerover` event.
+   */
+  mapPointerOver(e) {
+    var o;
+    if (!(e instanceof f)) {
+      y("EventBoundary cannot map a non-pointer event as a pointer event");
+      return;
+    }
+    const t = this.trackingData(e.pointerId), i = this.createPointerEvent(e), n = i.pointerType === "mouse" || i.pointerType === "pen";
+    this.dispatchEvent(i, "pointerover"), n && this.dispatchEvent(i, "mouseover"), i.pointerType === "mouse" && (this.cursor = (o = i.target) == null ? void 0 : o.cursor);
+    const s = this.clonePointerEvent(i, "pointerenter");
+    for (s.eventPhase = s.AT_TARGET; s.target && s.target !== this.rootTarget.parent; )
+      s.currentTarget = s.target, this.notifyTarget(s), n && this.notifyTarget(s, "mouseenter"), s.target = s.target.parent;
+    t.overTargets = i.composedPath(), this.freeEvent(i), this.freeEvent(s);
+  }
+  /**
+   * Maps the upstream `pointerout` to downstream `pointerout`, `pointerleave` events, in that order.
+   *
+   * The tracking data for the specific pointer is cleared of a `overTarget`.
+   * @param from - The upstream `pointerout` event.
+   */
+  mapPointerOut(e) {
+    if (!(e instanceof f)) {
+      y("EventBoundary cannot map a non-pointer event as a pointer event");
+      return;
+    }
+    const t = this.trackingData(e.pointerId);
+    if (t.overTargets) {
+      const i = e.pointerType === "mouse" || e.pointerType === "pen", n = this.findMountedTarget(t.overTargets), s = this.createPointerEvent(e, "pointerout", n);
+      this.dispatchEvent(s), i && this.dispatchEvent(s, "mouseout");
+      const o = this.createPointerEvent(e, "pointerleave", n);
+      for (o.eventPhase = o.AT_TARGET; o.target && o.target !== this.rootTarget.parent; )
+        o.currentTarget = o.target, this.notifyTarget(o), i && this.notifyTarget(o, "mouseleave"), o.target = o.target.parent;
+      t.overTargets = null, this.freeEvent(s), this.freeEvent(o);
+    }
+    this.cursor = null;
+  }
+  /**
+   * Maps the upstream `pointerup` event to downstream `pointerup`, `pointerupoutside`,
+   * and `click`/`rightclick`/`pointertap` events, in that order.
+   *
+   * The `pointerupoutside` event bubbles from the original `pointerdown` target to the most specific
+   * ancestor of the `pointerdown` and `pointerup` targets, which is also the `click` event's target. `touchend`,
+   * `rightup`, `mouseup`, `touchendoutside`, `rightupoutside`, `mouseupoutside`, and `tap` are fired as well for
+   * specific pointer types.
+   * @param from - The upstream `pointerup` event.
+   */
+  mapPointerUp(e) {
+    if (!(e instanceof f)) {
+      y("EventBoundary cannot map a non-pointer event as a pointer event");
+      return;
+    }
+    const t = performance.now(), i = this.createPointerEvent(e);
+    if (this.dispatchEvent(i, "pointerup"), i.pointerType === "touch")
+      this.dispatchEvent(i, "touchend");
+    else if (i.pointerType === "mouse" || i.pointerType === "pen") {
+      const r = i.button === 2;
+      this.dispatchEvent(i, r ? "rightup" : "mouseup");
+    }
+    const n = this.trackingData(e.pointerId), s = this.findMountedTarget(n.pressTargetsByButton[e.button]);
+    let o = s;
+    if (s && !i.composedPath().includes(s)) {
+      let r = s;
+      for (; r && !i.composedPath().includes(r); ) {
+        if (i.currentTarget = r, this.notifyTarget(i, "pointerupoutside"), i.pointerType === "touch")
+          this.notifyTarget(i, "touchendoutside");
+        else if (i.pointerType === "mouse" || i.pointerType === "pen") {
+          const l = i.button === 2;
+          this.notifyTarget(i, l ? "rightupoutside" : "mouseupoutside");
+        }
+        r = r.parent;
+      }
+      delete n.pressTargetsByButton[e.button], o = r;
+    }
+    if (o) {
+      const r = this.clonePointerEvent(i, "click");
+      r.target = o, r.path = null, n.clicksByButton[e.button] || (n.clicksByButton[e.button] = {
+        clickCount: 0,
+        target: r.target,
+        timeStamp: t
+      });
+      const l = n.clicksByButton[e.button];
+      if (l.target === r.target && t - l.timeStamp < 200 ? ++l.clickCount : l.clickCount = 1, l.target = r.target, l.timeStamp = t, r.detail = l.clickCount, r.pointerType === "mouse") {
+        const d = r.button === 2;
+        this.dispatchEvent(r, d ? "rightclick" : "click");
+      } else r.pointerType === "touch" && this.dispatchEvent(r, "tap");
+      this.dispatchEvent(r, "pointertap"), this.freeEvent(r);
+    }
+    this.freeEvent(i);
+  }
+  /**
+   * Maps the upstream `pointerupoutside` event to a downstream `pointerupoutside` event, bubbling from the original
+   * `pointerdown` target to `rootTarget`.
+   *
+   * (The most specific ancestor of the `pointerdown` event and the `pointerup` event must the
+   * `{@link EventBoundary}'s root because the `pointerup` event occurred outside of the boundary.)
+   *
+   * `touchendoutside`, `mouseupoutside`, and `rightupoutside` events are fired as well for specific pointer
+   * types. The tracking data for the specific pointer is cleared of a `pressTarget`.
+   * @param from - The upstream `pointerupoutside` event.
+   */
+  mapPointerUpOutside(e) {
+    if (!(e instanceof f)) {
+      y("EventBoundary cannot map a non-pointer event as a pointer event");
+      return;
+    }
+    const t = this.trackingData(e.pointerId), i = this.findMountedTarget(t.pressTargetsByButton[e.button]), n = this.createPointerEvent(e);
+    if (i) {
+      let s = i;
+      for (; s; )
+        n.currentTarget = s, this.notifyTarget(n, "pointerupoutside"), n.pointerType === "touch" ? this.notifyTarget(n, "touchendoutside") : (n.pointerType === "mouse" || n.pointerType === "pen") && this.notifyTarget(n, n.button === 2 ? "rightupoutside" : "mouseupoutside"), s = s.parent;
+      delete t.pressTargetsByButton[e.button];
+    }
+    this.freeEvent(n);
+  }
+  /**
+   * Maps the upstream `wheel` event to a downstream `wheel` event.
+   * @param from - The upstream `wheel` event.
+   */
+  mapWheel(e) {
+    if (!(e instanceof T)) {
+      y("EventBoundary cannot map a non-wheel event as a wheel event");
+      return;
+    }
+    const t = this.createWheelEvent(e);
+    this.dispatchEvent(t), this.freeEvent(t);
+  }
+  /**
+   * Finds the most specific event-target in the given propagation path that is still mounted in the scene graph.
+   *
+   * This is used to find the correct `pointerup` and `pointerout` target in the case that the original `pointerdown`
+   * or `pointerover` target was unmounted from the scene graph.
+   * @param propagationPath - The propagation path was valid in the past.
+   * @returns - The most specific event-target still mounted at the same location in the scene graph.
+   */
+  findMountedTarget(e) {
+    if (!e)
+      return null;
+    let t = e[0];
+    for (let i = 1; i < e.length && e[i].parent === t; i++)
+      t = e[i];
+    return t;
+  }
+  /**
+   * Creates an event whose `originalEvent` is `from`, with an optional `type` and `target` override.
+   *
+   * The event is allocated using {@link EventBoundary#allocateEvent this.allocateEvent}.
+   * @param from - The `originalEvent` for the returned event.
+   * @param [type=from.type] - The type of the returned event.
+   * @param target - The target of the returned event.
+   */
+  createPointerEvent(e, t, i) {
+    const n = this.allocateEvent(f);
+    return this.copyPointerData(e, n), this.copyMouseData(e, n), this.copyData(e, n), n.nativeEvent = e.nativeEvent, n.originalEvent = e, n.target = i ?? this.hitTest(n.global.x, n.global.y) ?? this._hitElements[0], typeof t == "string" && (n.type = t), n;
+  }
+  /**
+   * Creates a wheel event whose `originalEvent` is `from`.
+   *
+   * The event is allocated using {@link EventBoundary#allocateEvent this.allocateEvent}.
+   * @param from - The upstream wheel event.
+   */
+  createWheelEvent(e) {
+    const t = this.allocateEvent(T);
+    return this.copyWheelData(e, t), this.copyMouseData(e, t), this.copyData(e, t), t.nativeEvent = e.nativeEvent, t.originalEvent = e, t.target = this.hitTest(t.global.x, t.global.y), t;
+  }
+  /**
+   * Clones the event `from`, with an optional `type` override.
+   *
+   * The event is allocated using {@link EventBoundary#allocateEvent this.allocateEvent}.
+   * @param from - The event to clone.
+   * @param [type=from.type] - The type of the returned event.
+   */
+  clonePointerEvent(e, t) {
+    const i = this.allocateEvent(f);
+    return i.nativeEvent = e.nativeEvent, i.originalEvent = e.originalEvent, this.copyPointerData(e, i), this.copyMouseData(e, i), this.copyData(e, i), i.target = e.target, i.path = e.composedPath().slice(), i.type = t ?? i.type, i;
+  }
+  /**
+   * Copies wheel {@link FederatedWheelEvent} data from `from` into `to`.
+   *
+   * The following properties are copied:
+   * + deltaMode
+   * + deltaX
+   * + deltaY
+   * + deltaZ
+   * @param from - The event to copy data from.
+   * @param to - The event to copy data into.
+   */
+  copyWheelData(e, t) {
+    t.deltaMode = e.deltaMode, t.deltaX = e.deltaX, t.deltaY = e.deltaY, t.deltaZ = e.deltaZ;
+  }
+  /**
+   * Copies pointer {@link FederatedPointerEvent} data from `from` into `to`.
+   *
+   * The following properties are copied:
+   * + pointerId
+   * + width
+   * + height
+   * + isPrimary
+   * + pointerType
+   * + pressure
+   * + tangentialPressure
+   * + tiltX
+   * + tiltY
+   * @param from - The event to copy data from.
+   * @param to - The event to copy data into.
+   */
+  copyPointerData(e, t) {
+    e instanceof f && t instanceof f && (t.pointerId = e.pointerId, t.width = e.width, t.height = e.height, t.isPrimary = e.isPrimary, t.pointerType = e.pointerType, t.pressure = e.pressure, t.tangentialPressure = e.tangentialPressure, t.tiltX = e.tiltX, t.tiltY = e.tiltY, t.twist = e.twist);
+  }
+  /**
+   * Copies mouse {@link FederatedMouseEvent} data from `from` to `to`.
+   *
+   * The following properties are copied:
+   * + altKey
+   * + button
+   * + buttons
+   * + clientX
+   * + clientY
+   * + metaKey
+   * + movementX
+   * + movementY
+   * + pageX
+   * + pageY
+   * + x
+   * + y
+   * + screen
+   * + shiftKey
+   * + global
+   * @param from - The event to copy data from.
+   * @param to - The event to copy data into.
+   */
+  copyMouseData(e, t) {
+    e instanceof D && t instanceof D && (t.altKey = e.altKey, t.button = e.button, t.buttons = e.buttons, t.client.copyFrom(e.client), t.ctrlKey = e.ctrlKey, t.metaKey = e.metaKey, t.movement.copyFrom(e.movement), t.screen.copyFrom(e.screen), t.shiftKey = e.shiftKey, t.global.copyFrom(e.global));
+  }
+  /**
+   * Copies base {@link FederatedEvent} data from `from` into `to`.
+   *
+   * The following properties are copied:
+   * + isTrusted
+   * + srcElement
+   * + timeStamp
+   * + type
+   * @param from - The event to copy data from.
+   * @param to - The event to copy data into.
+   */
+  copyData(e, t) {
+    t.isTrusted = e.isTrusted, t.srcElement = e.srcElement, t.timeStamp = performance.now(), t.type = e.type, t.detail = e.detail, t.view = e.view, t.which = e.which, t.layer.copyFrom(e.layer), t.page.copyFrom(e.page);
+  }
+  /**
+   * @param id - The pointer ID.
+   * @returns The tracking data stored for the given pointer. If no data exists, a blank
+   *  state will be created.
+   */
+  trackingData(e) {
+    return this.mappingState.trackingData[e] || (this.mappingState.trackingData[e] = {
+      pressTargetsByButton: {},
+      clicksByButton: {},
+      overTarget: null
+    }), this.mappingState.trackingData[e];
+  }
+  /**
+   * Allocate a specific type of event from {@link EventBoundary#eventPool this.eventPool}.
+   *
+   * This allocation is constructor-agnostic, as long as it only takes one argument - this event
+   * boundary.
+   * @param constructor - The event's constructor.
+   * @returns An event of the given type.
+   */
+  allocateEvent(e) {
+    this.eventPool.has(e) || this.eventPool.set(e, []);
+    const t = this.eventPool.get(e).pop() || new e(this);
+    return t.eventPhase = t.NONE, t.currentTarget = null, t.defaultPrevented = !1, t.path = null, t.target = null, t;
+  }
+  /**
+   * Frees the event and puts it back into the event pool.
+   *
+   * It is illegal to reuse the event until it is allocated again, using `this.allocateEvent`.
+   *
+   * It is also advised that events not allocated from {@link EventBoundary#allocateEvent this.allocateEvent}
+   * not be freed. This is because of the possibility that the same event is freed twice, which can cause
+   * it to be allocated twice & result in overwriting.
+   * @param event - The event to be freed.
+   * @throws Error if the event is managed by another event boundary.
+   */
+  freeEvent(e) {
+    if (e.manager !== this)
+      throw new Error("It is illegal to free an event not managed by this EventBoundary!");
+    const t = e.constructor;
+    this.eventPool.has(t) || this.eventPool.set(t, []), this.eventPool.get(t).push(e);
+  }
+  /**
+   * Similar to {@link EventEmitter.emit}, except it stops if the `propagationImmediatelyStopped` flag
+   * is set on the event.
+   * @param e - The event to call each listener with.
+   * @param type - The event key.
+   */
+  _notifyListeners(e, t) {
+    const i = e.currentTarget._events[t];
+    if (i)
+      if ("fn" in i)
+        i.once && e.currentTarget.removeListener(t, i.fn, void 0, !0), i.fn.call(i.context, e);
+      else
+        for (let n = 0, s = i.length; n < s && !e.propagationImmediatelyStopped; n++)
+          i[n].once && e.currentTarget.removeListener(t, i[n].fn, void 0, !0), i[n].fn.call(i[n].context, e);
+  }
+}
+const ge = 1, ye = {
+  touchstart: "pointerdown",
+  touchend: "pointerup",
+  touchendoutside: "pointerupoutside",
+  touchmove: "pointermove",
+  touchcancel: "pointercancel"
+}, B = class x {
+  /**
+   * @param {Renderer} renderer
+   */
+  constructor(e) {
+    this.supportsTouchEvents = "ontouchstart" in globalThis, this.supportsPointerEvents = !!globalThis.PointerEvent, this.domElement = null, this.resolution = 1, this.renderer = e, this.rootBoundary = new _e(null), _.init(this), this.autoPreventDefault = !0, this._eventsAdded = !1, this._rootPointerEvent = new f(null), this._rootWheelEvent = new T(null), this.cursorStyles = {
+      default: "inherit",
+      pointer: "pointer"
+    }, this.features = new Proxy({ ...x.defaultEventFeatures }, {
+      set: (t, i, n) => (i === "globalMove" && (this.rootBoundary.enableGlobalMoveEvents = n), t[i] = n, !0)
+    }), this._onPointerDown = this._onPointerDown.bind(this), this._onPointerMove = this._onPointerMove.bind(this), this._onPointerUp = this._onPointerUp.bind(this), this._onPointerOverOut = this._onPointerOverOut.bind(this), this.onWheel = this.onWheel.bind(this);
+  }
+  /**
+   * The default interaction mode for all display objects.
+   * @see Container.eventMode
+   * @type {EventMode}
+   * @readonly
+   * @since 7.2.0
+   */
+  static get defaultEventMode() {
+    return this._defaultEventMode;
+  }
+  /**
+   * Runner init called, view is available at this point.
+   * @ignore
+   */
+  init(e) {
+    const { canvas: t, resolution: i } = this.renderer;
+    this.setTargetElement(t), this.resolution = i, x._defaultEventMode = e.eventMode ?? "passive", Object.assign(this.features, e.eventFeatures ?? {}), this.rootBoundary.enableGlobalMoveEvents = this.features.globalMove;
+  }
+  /**
+   * Handle changing resolution.
+   * @ignore
+   */
+  resolutionChange(e) {
+    this.resolution = e;
+  }
+  /** Destroys all event listeners and detaches the renderer. */
+  destroy() {
+    _.destroy(), this.setTargetElement(null), this.renderer = null, this._currentCursor = null;
+  }
+  /**
+   * Sets the current cursor mode, handling any callbacks or CSS style changes.
+   * The cursor can be a CSS cursor string, a custom callback function, or a key from the cursorStyles dictionary.
+   * @param mode - Cursor mode to set. Can be:
+   * - A CSS cursor string (e.g., 'pointer', 'grab')
+   * - A key from the cursorStyles dictionary
+   * - null/undefined to reset to default
+   * @example
+   * ```ts
+   * // Using predefined cursor styles
+   * app.renderer.events.setCursor('pointer');    // Set standard pointer cursor
+   * app.renderer.events.setCursor('grab');       // Set grab cursor
+   * app.renderer.events.setCursor(null);         // Reset to default
+   *
+   * // Using custom cursor styles
+   * app.renderer.events.cursorStyles.custom = 'url("cursor.png"), auto';
+   * app.renderer.events.setCursor('custom');     // Apply custom cursor
+   *
+   * // Using callback-based cursor
+   * app.renderer.events.cursorStyles.dynamic = (mode) => {
+   *     document.body.style.cursor = mode === 'hover' ? 'pointer' : 'default';
+   * };
+   * app.renderer.events.setCursor('dynamic');    // Trigger cursor callback
+   * ```
+   * @remarks
+   * - Has no effect on OffscreenCanvas except for callback-based cursors
+   * - Caches current cursor to avoid unnecessary DOM updates
+   * - Supports CSS cursor values, style objects, and callback functions
+   * @see {@link EventSystem.cursorStyles} For defining custom cursor styles
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/cursor} MDN Cursor Reference
+   */
+  setCursor(e) {
+    e || (e = "default");
+    let t = !0;
+    if (globalThis.OffscreenCanvas && this.domElement instanceof OffscreenCanvas && (t = !1), this._currentCursor === e)
+      return;
+    this._currentCursor = e;
+    const i = this.cursorStyles[e];
+    if (i)
+      switch (typeof i) {
+        case "string":
+          t && (this.domElement.style.cursor = i);
+          break;
+        case "function":
+          i(e);
+          break;
+        case "object":
+          t && Object.assign(this.domElement.style, i);
+          break;
+      }
+    else t && typeof e == "string" && !Object.prototype.hasOwnProperty.call(this.cursorStyles, e) && (this.domElement.style.cursor = e);
+  }
+  /**
+   * The global pointer event instance containing the most recent pointer state.
+   * This is useful for accessing pointer information without listening to events.
+   * @example
+   * ```ts
+   * // Access current pointer position at any time
+   * const eventSystem = app.renderer.events;
+   * const pointer = eventSystem.pointer;
+   *
+   * // Get global coordinates
+   * console.log('Position:', pointer.global.x, pointer.global.y);
+   *
+   * // Check button state
+   * console.log('Buttons pressed:', pointer.buttons);
+   *
+   * // Get pointer type and pressure
+   * console.log('Type:', pointer.pointerType);
+   * console.log('Pressure:', pointer.pressure);
+   * ```
+   * @readonly
+   * @since 7.2.0
+   * @see {@link FederatedPointerEvent} For all available pointer properties
+   */
+  get pointer() {
+    return this._rootPointerEvent;
+  }
+  /**
+   * Event handler for pointer down events on {@link EventSystem#domElement this.domElement}.
+   * @param nativeEvent - The native mouse/pointer/touch event.
+   */
+  _onPointerDown(e) {
+    if (!this.features.click)
+      return;
+    this.rootBoundary.rootTarget = this.renderer.lastObjectRendered;
+    const t = this._normalizeToPointerData(e);
+    this.autoPreventDefault && t[0].isNormalized && (e.cancelable || !("cancelable" in e)) && e.preventDefault();
+    for (let i = 0, n = t.length; i < n; i++) {
+      const s = t[i], o = this._bootstrapEvent(this._rootPointerEvent, s);
+      this.rootBoundary.mapEvent(o);
+    }
+    this.setCursor(this.rootBoundary.cursor);
+  }
+  /**
+   * Event handler for pointer move events on on {@link EventSystem#domElement this.domElement}.
+   * @param nativeEvent - The native mouse/pointer/touch events.
+   */
+  _onPointerMove(e) {
+    if (!this.features.move)
+      return;
+    this.rootBoundary.rootTarget = this.renderer.lastObjectRendered, _.pointerMoved();
+    const t = this._normalizeToPointerData(e);
+    for (let i = 0, n = t.length; i < n; i++) {
+      const s = this._bootstrapEvent(this._rootPointerEvent, t[i]);
+      this.rootBoundary.mapEvent(s);
+    }
+    this.setCursor(this.rootBoundary.cursor);
+  }
+  /**
+   * Event handler for pointer up events on {@link EventSystem#domElement this.domElement}.
+   * @param nativeEvent - The native mouse/pointer/touch event.
+   */
+  _onPointerUp(e) {
+    if (!this.features.click)
+      return;
+    this.rootBoundary.rootTarget = this.renderer.lastObjectRendered;
+    let t = e.target;
+    e.composedPath && e.composedPath().length > 0 && (t = e.composedPath()[0]);
+    const i = t !== this.domElement ? "outside" : "", n = this._normalizeToPointerData(e);
+    for (let s = 0, o = n.length; s < o; s++) {
+      const r = this._bootstrapEvent(this._rootPointerEvent, n[s]);
+      r.type += i, this.rootBoundary.mapEvent(r);
+    }
+    this.setCursor(this.rootBoundary.cursor);
+  }
+  /**
+   * Event handler for pointer over & out events on {@link EventSystem#domElement this.domElement}.
+   * @param nativeEvent - The native mouse/pointer/touch event.
+   */
+  _onPointerOverOut(e) {
+    if (!this.features.click)
+      return;
+    this.rootBoundary.rootTarget = this.renderer.lastObjectRendered;
+    const t = this._normalizeToPointerData(e);
+    for (let i = 0, n = t.length; i < n; i++) {
+      const s = this._bootstrapEvent(this._rootPointerEvent, t[i]);
+      this.rootBoundary.mapEvent(s);
+    }
+    this.setCursor(this.rootBoundary.cursor);
+  }
+  /**
+   * Passive handler for `wheel` events on {@link EventSystem.domElement this.domElement}.
+   * @param nativeEvent - The native wheel event.
+   */
+  onWheel(e) {
+    if (!this.features.wheel)
+      return;
+    const t = this.normalizeWheelEvent(e);
+    this.rootBoundary.rootTarget = this.renderer.lastObjectRendered, this.rootBoundary.mapEvent(t);
+  }
+  /**
+   * Sets the {@link EventSystem#domElement domElement} and binds event listeners.
+   * This method manages the DOM event bindings for the event system, allowing you to
+   * change or remove the target element that receives input events.
+   * > [!IMPORTANT] This will default to the canvas element of the renderer, so you
+   * > should not need to call this unless you are using a custom element.
+   * @param element - The new DOM element to bind events to, or null to remove all event bindings
+   * @example
+   * ```ts
+   * // Set a new canvas element as the target
+   * const canvas = document.createElement('canvas');
+   * app.renderer.events.setTargetElement(canvas);
+   *
+   * // Remove all event bindings
+   * app.renderer.events.setTargetElement(null);
+   *
+   * // Switch to a different canvas
+   * const newCanvas = document.querySelector('#game-canvas');
+   * app.renderer.events.setTargetElement(newCanvas);
+   * ```
+   * @remarks
+   * - Automatically removes event listeners from previous element
+   * - Required for the event system to function
+   * - Safe to call multiple times
+   * @see {@link EventSystem#domElement} The current DOM element
+   * @see {@link EventsTicker} For the ticker system that tracks pointer movement
+   */
+  setTargetElement(e) {
+    this._removeEvents(), this.domElement = e, _.domElement = e, this._addEvents();
+  }
+  /** Register event listeners on {@link Renderer#domElement this.domElement}. */
+  _addEvents() {
+    if (this._eventsAdded || !this.domElement)
+      return;
+    _.addTickerListener();
+    const e = this.domElement.style;
+    e && (globalThis.navigator.msPointerEnabled ? (e.msContentZooming = "none", e.msTouchAction = "none") : this.supportsPointerEvents && (e.touchAction = "none")), this.supportsPointerEvents ? (globalThis.document.addEventListener("pointermove", this._onPointerMove, !0), this.domElement.addEventListener("pointerdown", this._onPointerDown, !0), this.domElement.addEventListener("pointerleave", this._onPointerOverOut, !0), this.domElement.addEventListener("pointerover", this._onPointerOverOut, !0), globalThis.addEventListener("pointerup", this._onPointerUp, !0)) : (globalThis.document.addEventListener("mousemove", this._onPointerMove, !0), this.domElement.addEventListener("mousedown", this._onPointerDown, !0), this.domElement.addEventListener("mouseout", this._onPointerOverOut, !0), this.domElement.addEventListener("mouseover", this._onPointerOverOut, !0), globalThis.addEventListener("mouseup", this._onPointerUp, !0), this.supportsTouchEvents && (this.domElement.addEventListener("touchstart", this._onPointerDown, !0), this.domElement.addEventListener("touchend", this._onPointerUp, !0), this.domElement.addEventListener("touchmove", this._onPointerMove, !0))), this.domElement.addEventListener("wheel", this.onWheel, {
+      passive: !0,
+      capture: !0
+    }), this._eventsAdded = !0;
+  }
+  /** Unregister event listeners on {@link EventSystem#domElement this.domElement}. */
+  _removeEvents() {
+    if (!this._eventsAdded || !this.domElement)
+      return;
+    _.removeTickerListener();
+    const e = this.domElement.style;
+    e && (globalThis.navigator.msPointerEnabled ? (e.msContentZooming = "", e.msTouchAction = "") : this.supportsPointerEvents && (e.touchAction = "")), this.supportsPointerEvents ? (globalThis.document.removeEventListener("pointermove", this._onPointerMove, !0), this.domElement.removeEventListener("pointerdown", this._onPointerDown, !0), this.domElement.removeEventListener("pointerleave", this._onPointerOverOut, !0), this.domElement.removeEventListener("pointerover", this._onPointerOverOut, !0), globalThis.removeEventListener("pointerup", this._onPointerUp, !0)) : (globalThis.document.removeEventListener("mousemove", this._onPointerMove, !0), this.domElement.removeEventListener("mousedown", this._onPointerDown, !0), this.domElement.removeEventListener("mouseout", this._onPointerOverOut, !0), this.domElement.removeEventListener("mouseover", this._onPointerOverOut, !0), globalThis.removeEventListener("mouseup", this._onPointerUp, !0), this.supportsTouchEvents && (this.domElement.removeEventListener("touchstart", this._onPointerDown, !0), this.domElement.removeEventListener("touchend", this._onPointerUp, !0), this.domElement.removeEventListener("touchmove", this._onPointerMove, !0))), this.domElement.removeEventListener("wheel", this.onWheel, !0), this.domElement = null, this._eventsAdded = !1;
+  }
+  /**
+   * Maps coordinates from DOM/screen space into PixiJS normalized coordinates.
+   * This takes into account the current scale, position, and resolution of the DOM element.
+   * @param point - The point to store the mapped coordinates in
+   * @param x - The x coordinate in DOM/client space
+   * @param y - The y coordinate in DOM/client space
+   * @example
+   * ```ts
+   * // Map mouse coordinates to PixiJS space
+   * const point = new Point();
+   * app.renderer.events.mapPositionToPoint(
+   *     point,
+   *     event.clientX,
+   *     event.clientY
+   * );
+   * console.log('Mapped position:', point.x, point.y);
+   *
+   * // Using with pointer events
+   * sprite.on('pointermove', (event) => {
+   *     // event.global already contains mapped coordinates
+   *     console.log('Global:', event.global.x, event.global.y);
+   *
+   *     // Map to local coordinates
+   *     const local = event.getLocalPosition(sprite);
+   *     console.log('Local:', local.x, local.y);
+   * });
+   * ```
+   * @remarks
+   * - Accounts for element scaling and positioning
+   * - Adjusts for device pixel ratio/resolution
+   */
+  mapPositionToPoint(e, t, i) {
+    const n = this.domElement.isConnected ? this.domElement.getBoundingClientRect() : {
+      width: this.domElement.width,
+      height: this.domElement.height,
+      left: 0,
+      top: 0
+    }, s = 1 / this.resolution;
+    e.x = (t - n.left) * (this.domElement.width / n.width) * s, e.y = (i - n.top) * (this.domElement.height / n.height) * s;
+  }
+  /**
+   * Ensures that the original event object contains all data that a regular pointer event would have
+   * @param event - The original event data from a touch or mouse event
+   * @returns An array containing a single normalized pointer event, in the case of a pointer
+   *  or mouse event, or a multiple normalized pointer events if there are multiple changed touches
+   */
+  _normalizeToPointerData(e) {
+    const t = [];
+    if (this.supportsTouchEvents && e instanceof TouchEvent)
+      for (let i = 0, n = e.changedTouches.length; i < n; i++) {
+        const s = e.changedTouches[i];
+        typeof s.button > "u" && (s.button = 0), typeof s.buttons > "u" && (s.buttons = 1), typeof s.isPrimary > "u" && (s.isPrimary = e.touches.length === 1 && e.type === "touchstart"), typeof s.width > "u" && (s.width = s.radiusX || 1), typeof s.height > "u" && (s.height = s.radiusY || 1), typeof s.tiltX > "u" && (s.tiltX = 0), typeof s.tiltY > "u" && (s.tiltY = 0), typeof s.pointerType > "u" && (s.pointerType = "touch"), typeof s.pointerId > "u" && (s.pointerId = s.identifier || 0), typeof s.pressure > "u" && (s.pressure = s.force || 0.5), typeof s.twist > "u" && (s.twist = 0), typeof s.tangentialPressure > "u" && (s.tangentialPressure = 0), typeof s.layerX > "u" && (s.layerX = s.offsetX = s.clientX), typeof s.layerY > "u" && (s.layerY = s.offsetY = s.clientY), s.isNormalized = !0, s.type = e.type, t.push(s);
+      }
+    else if (!globalThis.MouseEvent || e instanceof MouseEvent && (!this.supportsPointerEvents || !(e instanceof globalThis.PointerEvent))) {
+      const i = e;
+      typeof i.isPrimary > "u" && (i.isPrimary = !0), typeof i.width > "u" && (i.width = 1), typeof i.height > "u" && (i.height = 1), typeof i.tiltX > "u" && (i.tiltX = 0), typeof i.tiltY > "u" && (i.tiltY = 0), typeof i.pointerType > "u" && (i.pointerType = "mouse"), typeof i.pointerId > "u" && (i.pointerId = ge), typeof i.pressure > "u" && (i.pressure = 0.5), typeof i.twist > "u" && (i.twist = 0), typeof i.tangentialPressure > "u" && (i.tangentialPressure = 0), i.isNormalized = !0, t.push(i);
+    } else
+      t.push(e);
+    return t;
+  }
+  /**
+   * Normalizes the native {@link https://w3c.github.io/uievents/#interface-wheelevent WheelEvent}.
+   *
+   * The returned {@link FederatedWheelEvent} is a shared instance. It will not persist across
+   * multiple native wheel events.
+   * @param nativeEvent - The native wheel event that occurred on the canvas.
+   * @returns A federated wheel event.
+   */
+  normalizeWheelEvent(e) {
+    const t = this._rootWheelEvent;
+    return this._transferMouseData(t, e), t.deltaX = e.deltaX, t.deltaY = e.deltaY, t.deltaZ = e.deltaZ, t.deltaMode = e.deltaMode, this.mapPositionToPoint(t.screen, e.clientX, e.clientY), t.global.copyFrom(t.screen), t.offset.copyFrom(t.screen), t.nativeEvent = e, t.type = e.type, t;
+  }
+  /**
+   * Normalizes the `nativeEvent` into a federateed {@link FederatedPointerEvent}.
+   * @param event
+   * @param nativeEvent
+   */
+  _bootstrapEvent(e, t) {
+    return e.originalEvent = null, e.nativeEvent = t, e.pointerId = t.pointerId, e.width = t.width, e.height = t.height, e.isPrimary = t.isPrimary, e.pointerType = t.pointerType, e.pressure = t.pressure, e.tangentialPressure = t.tangentialPressure, e.tiltX = t.tiltX, e.tiltY = t.tiltY, e.twist = t.twist, this._transferMouseData(e, t), this.mapPositionToPoint(e.screen, t.clientX, t.clientY), e.global.copyFrom(e.screen), e.offset.copyFrom(e.screen), e.isTrusted = t.isTrusted, e.type === "pointerleave" && (e.type = "pointerout"), e.type.startsWith("mouse") && (e.type = e.type.replace("mouse", "pointer")), e.type.startsWith("touch") && (e.type = ye[e.type] || e.type), e;
+  }
+  /**
+   * Transfers base & mouse event data from the `nativeEvent` to the federated event.
+   * @param event
+   * @param nativeEvent
+   */
+  _transferMouseData(e, t) {
+    e.isTrusted = t.isTrusted, e.srcElement = t.srcElement, e.timeStamp = performance.now(), e.type = t.type, e.altKey = t.altKey, e.button = t.button, e.buttons = t.buttons, e.client.x = t.clientX, e.client.y = t.clientY, e.ctrlKey = t.ctrlKey, e.metaKey = t.metaKey, e.movement.x = t.movementX, e.movement.y = t.movementY, e.page.x = t.pageX, e.page.y = t.pageY, e.relatedTarget = null, e.shiftKey = t.shiftKey;
+  }
+};
+B.extension = {
+  name: "events",
+  type: [
+    b.WebGLSystem,
+    b.CanvasSystem,
+    b.WebGPUSystem
+  ],
+  priority: -1
+};
+B.defaultEventFeatures = {
+  /** Enables pointer events associated with pointer movement. */
+  move: !0,
+  /** Enables global pointer move events. */
+  globalMove: !0,
+  /** Enables pointer events associated with clicking. */
+  click: !0,
+  /** Enables wheel events. */
+  wheel: !0
+};
+let ee = B;
+const be = {
+  onclick: null,
+  onmousedown: null,
+  onmouseenter: null,
+  onmouseleave: null,
+  onmousemove: null,
+  onglobalmousemove: null,
+  onmouseout: null,
+  onmouseover: null,
+  onmouseup: null,
+  onmouseupoutside: null,
+  onpointercancel: null,
+  onpointerdown: null,
+  onpointerenter: null,
+  onpointerleave: null,
+  onpointermove: null,
+  onglobalpointermove: null,
+  onpointerout: null,
+  onpointerover: null,
+  onpointertap: null,
+  onpointerup: null,
+  onpointerupoutside: null,
+  onrightclick: null,
+  onrightdown: null,
+  onrightup: null,
+  onrightupoutside: null,
+  ontap: null,
+  ontouchcancel: null,
+  ontouchend: null,
+  ontouchendoutside: null,
+  ontouchmove: null,
+  onglobaltouchmove: null,
+  ontouchstart: null,
+  onwheel: null,
+  get interactive() {
+    return this.eventMode === "dynamic" || this.eventMode === "static";
+  },
+  set interactive(a) {
+    this.eventMode = a ? "static" : "passive";
+  },
+  _internalEventMode: void 0,
+  get eventMode() {
+    return this._internalEventMode ?? ee.defaultEventMode;
+  },
+  set eventMode(a) {
+    this._internalEventMode = a;
+  },
+  isInteractive() {
+    return this.eventMode === "static" || this.eventMode === "dynamic";
+  },
+  interactiveChildren: !0,
+  hitArea: null,
+  addEventListener(a, e, t) {
+    const i = typeof t == "boolean" && t || typeof t == "object" && t.capture, n = typeof t == "object" ? t.signal : void 0, s = typeof t == "object" ? t.once === !0 : !1, o = typeof e == "function" ? void 0 : e;
+    a = i ? `${a}capture` : a;
+    const r = typeof e == "function" ? e : e.handleEvent, l = this;
+    n && n.addEventListener("abort", () => {
+      l.off(a, r, o);
+    }), s ? l.once(a, r, o) : l.on(a, r, o);
+  },
+  removeEventListener(a, e, t) {
+    const i = typeof t == "boolean" && t || typeof t == "object" && t.capture, n = typeof e == "function" ? void 0 : e;
+    a = i ? `${a}capture` : a, e = typeof e == "function" ? e : e.handleEvent, this.off(a, e, n);
+  },
+  dispatchEvent(a) {
+    if (!(a instanceof M))
+      throw new Error("Container cannot propagate events outside of the Federated Events API");
+    return a.defaultPrevented = !1, a.path = null, a.target = this, a.manager.dispatchEvent(a), !a.defaultPrevented;
+  }
+};
+w.add(ue);
+w.mixin(V, pe);
+w.add(ee);
+w.mixin(V, be);
+w.add(Q);

src/backend/gradio_polygonannotator/templates/component/colorToUniform-zJcCVLeu.js

@@ -0,0 +1,220 @@
+const f = {
+  normal: 0,
+  add: 1,
+  multiply: 2,
+  screen: 3,
+  overlay: 4,
+  erase: 5,
+  "normal-npm": 6,
+  "add-npm": 7,
+  "screen-npm": 8,
+  min: 9,
+  max: 10
+}, n = 0, i = 1, r = 2, a = 3, l = 4, d = 5, h = class u {
+  constructor() {
+    this.data = 0, this.blendMode = "normal", this.polygonOffset = 0, this.blend = !0, this.depthMask = !0;
+  }
+  /**
+   * Activates blending of the computed fragment color values.
+   * @default true
+   */
+  get blend() {
+    return !!(this.data & 1 << n);
+  }
+  set blend(t) {
+    !!(this.data & 1 << n) !== t && (this.data ^= 1 << n);
+  }
+  /**
+   * Activates adding an offset to depth values of polygon's fragments
+   * @default false
+   */
+  get offsets() {
+    return !!(this.data & 1 << i);
+  }
+  set offsets(t) {
+    !!(this.data & 1 << i) !== t && (this.data ^= 1 << i);
+  }
+  /** The culling settings for this state none - No culling back - Back face culling front - Front face culling */
+  set cullMode(t) {
+    if (t === "none") {
+      this.culling = !1;
+      return;
+    }
+    this.culling = !0, this.clockwiseFrontFace = t === "front";
+  }
+  get cullMode() {
+    return this.culling ? this.clockwiseFrontFace ? "front" : "back" : "none";
+  }
+  /**
+   * Activates culling of polygons.
+   * @default false
+   */
+  get culling() {
+    return !!(this.data & 1 << r);
+  }
+  set culling(t) {
+    !!(this.data & 1 << r) !== t && (this.data ^= 1 << r);
+  }
+  /**
+   * Activates depth comparisons and updates to the depth buffer.
+   * @default false
+   */
+  get depthTest() {
+    return !!(this.data & 1 << a);
+  }
+  set depthTest(t) {
+    !!(this.data & 1 << a) !== t && (this.data ^= 1 << a);
+  }
+  /**
+   * Enables or disables writing to the depth buffer.
+   * @default true
+   */
+  get depthMask() {
+    return !!(this.data & 1 << d);
+  }
+  set depthMask(t) {
+    !!(this.data & 1 << d) !== t && (this.data ^= 1 << d);
+  }
+  /**
+   * Specifies whether or not front or back-facing polygons can be culled.
+   * @default false
+   */
+  get clockwiseFrontFace() {
+    return !!(this.data & 1 << l);
+  }
+  set clockwiseFrontFace(t) {
+    !!(this.data & 1 << l) !== t && (this.data ^= 1 << l);
+  }
+  /**
+   * The blend mode to be applied when this state is set. Apply a value of `normal` to reset the blend mode.
+   * Setting this mode to anything other than NO_BLEND will automatically switch blending on.
+   * @default 'normal'
+   */
+  get blendMode() {
+    return this._blendMode;
+  }
+  set blendMode(t) {
+    this.blend = t !== "none", this._blendMode = t, this._blendModeId = f[t] || 0;
+  }
+  /**
+   * The polygon offset. Setting this property to anything other than 0 will automatically enable polygon offset fill.
+   * @default 0
+   */
+  get polygonOffset() {
+    return this._polygonOffset;
+  }
+  set polygonOffset(t) {
+    this.offsets = !!t, this._polygonOffset = t;
+  }
+  toString() {
+    return `[pixi.js/core:State blendMode=${this.blendMode} clockwiseFrontFace=${this.clockwiseFrontFace} culling=${this.culling} depthMask=${this.depthMask} polygonOffset=${this.polygonOffset}]`;
+  }
+  /**
+   * A quickly getting an instance of a State that is configured for 2d rendering.
+   * @returns a new State with values set for 2d rendering
+   */
+  static for2d() {
+    const t = new u();
+    return t.depthTest = !1, t.blend = !0, t;
+  }
+};
+h.default2d = h.for2d();
+let m = h;
+const c = {
+  name: "local-uniform-bit",
+  vertex: {
+    header: (
+      /* wgsl */
+      `
+
+            struct LocalUniforms {
+                uTransformMatrix:mat3x3<f32>,
+                uColor:vec4<f32>,
+                uRound:f32,
+            }
+
+            @group(1) @binding(0) var<uniform> localUniforms : LocalUniforms;
+        `
+    ),
+    main: (
+      /* wgsl */
+      `
+            vColor *= localUniforms.uColor;
+            modelMatrix *= localUniforms.uTransformMatrix;
+        `
+    ),
+    end: (
+      /* wgsl */
+      `
+            if(localUniforms.uRound == 1)
+            {
+                vPosition = vec4(roundPixels(vPosition.xy, globalUniforms.uResolution), vPosition.zw);
+            }
+        `
+    )
+  }
+}, g = {
+  ...c,
+  vertex: {
+    ...c.vertex,
+    // replace the group!
+    header: c.vertex.header.replace("group(1)", "group(2)")
+  }
+}, p = {
+  name: "local-uniform-bit",
+  vertex: {
+    header: (
+      /* glsl */
+      `
+
+            uniform mat3 uTransformMatrix;
+            uniform vec4 uColor;
+            uniform float uRound;
+        `
+    ),
+    main: (
+      /* glsl */
+      `
+            vColor *= uColor;
+            modelMatrix = uTransformMatrix;
+        `
+    ),
+    end: (
+      /* glsl */
+      `
+            if(uRound == 1.)
+            {
+                gl_Position.xy = roundPixels(gl_Position.xy, uResolution);
+            }
+        `
+    )
+  }
+};
+class b {
+  constructor() {
+    this.batcherName = "default", this.topology = "triangle-list", this.attributeSize = 4, this.indexSize = 6, this.packAsQuad = !0, this.roundPixels = 0, this._attributeStart = 0, this._batcher = null, this._batch = null;
+  }
+  get blendMode() {
+    return this.renderable.groupBlendMode;
+  }
+  get color() {
+    return this.renderable.groupColorAlpha;
+  }
+  reset() {
+    this.renderable = null, this.texture = null, this._batcher = null, this._batch = null, this.bounds = null;
+  }
+  destroy() {
+  }
+}
+function M(e, t, o) {
+  const s = (e >> 24 & 255) / 255;
+  t[o++] = (e & 255) / 255 * s, t[o++] = (e >> 8 & 255) / 255 * s, t[o++] = (e >> 16 & 255) / 255 * s, t[o++] = s;
+}
+export {
+  b as B,
+  m as S,
+  c as a,
+  p as b,
+  M as c,
+  g as l
+};

src/backend/gradio_polygonannotator/templates/component/index.js

@@ -0,0 +1,4 @@
+import { ap as f } from "./Index-Ct_1BCRd.js";
+export {
+  f as default
+};

src/backend/gradio_polygonannotator/templates/component/style.css

@@ -0,0 +1 @@
+.block.svelte-239wnu{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.fullscreen.svelte-239wnu{border-radius:0}.auto-margin.svelte-239wnu{margin-left:auto;margin-right:auto}.block.border_focus.svelte-239wnu{border-color:var(--color-accent)}.block.border_contrast.svelte-239wnu{border-color:var(--body-text-color)}.padded.svelte-239wnu{padding:var(--block-padding)}.hidden.svelte-239wnu{display:none}.flex.svelte-239wnu{display:flex;flex-direction:column}.hide-container.svelte-239wnu:not(.fullscreen){margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}.resize-handle.svelte-239wnu{position:absolute;bottom:0;right:0;width:10px;height:10px;fill:var(--block-border-color);cursor:nwse-resize}.fullscreen.svelte-239wnu{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;overflow:auto}.animating.svelte-239wnu{animation:svelte-239wnu-pop-out .1s ease-out forwards}@keyframes svelte-239wnu-pop-out{0%{position:fixed;top:var(--start-top);left:var(--start-left);width:var(--start-width);height:var(--start-height);z-index:100}to{position:fixed;top:0vh;left:0vw;width:100vw;height:100vh;z-index:1000}}.placeholder.svelte-239wnu{border-radius:var(--block-radius);border-width:var(--block-border-width);border-color:var(--block-border-color);border-style:dashed}Tables */ table,tr,td,th{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding:var(--spacing-xl)}.md code,.md pre{background:none;font-family:var(--font-mono);font-size:var(--text-sm);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;hyphens:none}.md pre[class*=language-]::selection,.md pre[class*=language-] ::selection,.md code[class*=language-]::selection,.md code[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}.md pre{padding:1em;margin:.5em 0;overflow:auto;position:relative;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);box-shadow:none;border:none;border-radius:var(--radius-md);background:var(--code-background-fill);padding:var(--spacing-xxl);font-family:var(--font-mono);text-shadow:none;border-radius:var(--radius-sm);white-space:nowrap;display:block;white-space:pre}.md :not(pre)>code{padding:.1em;border-radius:var(--radius-xs);white-space:normal;background:var(--code-background-fill);border:1px solid var(--panel-border-color);padding:var(--spacing-xxs) var(--spacing-xs)}.md .token.comment,.md .token.prolog,.md .token.doctype,.md .token.cdata{color:#708090}.md .token.punctuation{color:#999}.md .token.namespace{opacity:.7}.md .token.property,.md .token.tag,.md .token.boolean,.md .token.number,.md .token.constant,.md .token.symbol,.md .token.deleted{color:#905}.md .token.selector,.md .token.attr-name,.md .token.string,.md .token.char,.md .token.builtin,.md .token.inserted{color:#690}.md .token.atrule,.md .token.attr-value,.md .token.keyword{color:#07a}.md .token.function,.md .token.class-name{color:#dd4a68}.md .token.regex,.md .token.important,.md .token.variable{color:#e90}.md .token.important,.md .token.bold{font-weight:700}.md .token.italic{font-style:italic}.md .token.entity{cursor:help}.dark .md .token.comment,.dark .md .token.prolog,.dark .md .token.cdata{color:#5c6370}.dark .md .token.doctype,.dark .md .token.punctuation,.dark .md .token.entity{color:#abb2bf}.dark .md .token.attr-name,.dark .md .token.class-name,.dark .md .token.boolean,.dark .md .token.constant,.dark .md .token.number,.dark .md .token.atrule{color:#d19a66}.dark .md .token.keyword{color:#c678dd}.dark .md .token.property,.dark .md .token.tag,.dark .md .token.symbol,.dark .md .token.deleted,.dark .md .token.important{color:#e06c75}.dark .md .token.selector,.dark .md .token.string,.dark .md .token.char,.dark .md .token.builtin,.dark .md .token.inserted,.dark .md .token.regex,.dark .md .token.attr-value,.dark .md .token.attr-value>.token.punctuation{color:#98c379}.dark .md .token.variable,.dark .md .token.operator,.dark .md .token.function{color:#61afef}.dark .md .token.url{color:#56b6c2}span.svelte-1m32c2s div[class*=code_wrap]{position:relative}span.svelte-1m32c2s span.katex{font-size:var(--text-lg);direction:ltr}span.svelte-1m32c2s div[class*=code_wrap]>button{z-index:1;cursor:pointer;border-bottom-left-radius:var(--radius-sm);padding:var(--spacing-md);width:25px;height:25px;position:absolute;right:0}span.svelte-1m32c2s .check{opacity:0;z-index:var(--layer-top);transition:opacity .2s;background:var(--code-background-fill);color:var(--body-text-color);position:absolute;top:var(--size-1-5);left:var(--size-1-5)}span.svelte-1m32c2s p:not(:first-child){margin-top:var(--spacing-xxl)}span.svelte-1m32c2s .md-header-anchor{margin-left:-25px;padding-right:8px;line-height:1;color:var(--body-text-color-subdued);opacity:0}span.svelte-1m32c2s h1:hover .md-header-anchor,span.svelte-1m32c2s h2:hover .md-header-anchor,span.svelte-1m32c2s h3:hover .md-header-anchor,span.svelte-1m32c2s h4:hover .md-header-anchor,span.svelte-1m32c2s h5:hover .md-header-anchor,span.svelte-1m32c2s h6:hover .md-header-anchor{opacity:1}span.md.svelte-1m32c2s .md-header-anchor>svg{color:var(--body-text-color-subdued)}span.svelte-1m32c2s table{word-break:break-word}div.svelte-17qq50w>.md.prose{font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}div.svelte-17qq50w>.md.prose *{color:var(--block-info-text-color)}div.svelte-17qq50w{margin-bottom:var(--spacing-md)}span.has-info.svelte-zgrq3{margin-bottom:var(--spacing-xs)}span.svelte-zgrq3:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-zgrq3{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}span[dir=rtl].svelte-zgrq3{display:block}.hide.svelte-zgrq3{margin:0;height:0}label.svelte-igqdol.svelte-igqdol{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-igqdol.svelte-igqdol{border-top-left-radius:0}label.float.svelte-igqdol.svelte-igqdol{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-igqdol.svelte-igqdol:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-igqdol.svelte-igqdol{display:none}span.svelte-igqdol.svelte-igqdol{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-igqdol.svelte-igqdol{box-shadow:none;border-width:0;background:transparent;overflow:visible}label[dir=rtl].svelte-igqdol.svelte-igqdol{border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-right:none;border-bottom-left-radius:var(--block-radius);border-bottom-right-radius:var(--block-label-radius);border-top-left-radius:var(--block-label-radius)}label[dir=rtl].svelte-igqdol span.svelte-igqdol{margin-left:var(--size-2);margin-right:0}.unstyled-link.svelte-151nsdd{all:unset;cursor:pointer}button.svelte-y0enk4{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-xs);color:var(--block-label-text-color);border:1px solid var(--border-color);padding:var(--spacing-xxs)}button.svelte-y0enk4:hover{background-color:var(--background-fill-secondary)}button[disabled].svelte-y0enk4{opacity:.5;box-shadow:none}button[disabled].svelte-y0enk4:hover{cursor:not-allowed}.padded.svelte-y0enk4{background:var(--bg-color)}button.svelte-y0enk4:hover,button.highlight.svelte-y0enk4{cursor:pointer;color:var(--color-accent)}.padded.svelte-y0enk4:hover{color:var(--block-label-text-color)}span.svelte-y0enk4{padding:0 1px;font-size:10px}div.svelte-y0enk4{display:flex;align-items:center;justify-content:center;transition:filter .2s ease-in-out}.x-small.svelte-y0enk4{width:10px;height:10px}.small.svelte-y0enk4{width:14px;height:14px}.medium.svelte-y0enk4{width:20px;height:20px}.large.svelte-y0enk4{width:22px;height:22px}.pending.svelte-y0enk4{animation:svelte-y0enk4-flash .5s infinite}@keyframes svelte-y0enk4-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-y0enk4{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6,.dropdown-arrow.svelte-ihhdbf{fill:currentColor}.circle.svelte-ihhdbf{fill:currentColor;opacity:.1}svg.svelte-pb9pol{animation:svelte-pb9pol-spin 1.5s linear infinite}@keyframes svelte-pb9pol-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h2.svelte-1xg7h5n{font-size:var(--text-xl)!important}p.svelte-1xg7h5n,h2.svelte-1xg7h5n{white-space:pre-line}.wrap.svelte-1xg7h5n{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3);text-align:center;margin:auto var(--spacing-lg)}.or.svelte-1xg7h5n{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-1xg7h5n{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-1xg7h5n{font-size:var(--text-lg)}}.hovered.svelte-1xg7h5n{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-15ls1gu{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:100%;margin-left:auto;margin-right:auto;height:var(--size-10)}.icon.svelte-15ls1gu{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-15ls1gu{color:var(--color-accent)}.icon.svelte-15ls1gu:hover,.icon.svelte-15ls1gu:focus{color:var(--color-accent)}.icon-button-wrapper.svelte-1h0hs6p{display:flex;flex-direction:row;align-items:center;justify-content:center;z-index:var(--layer-2);gap:var(--spacing-sm);box-shadow:var(--shadow-drop);border:1px solid var(--border-color-primary);background:var(--block-background-fill);padding:var(--spacing-xxs)}.icon-button-wrapper.hide-top-corner.svelte-1h0hs6p{border-top:none;border-right:none;border-radius:var(--block-label-right-radius)}.icon-button-wrapper.display-top-corner.svelte-1h0hs6p{border-radius:var(--radius-sm) 0 0 var(--radius-sm);top:var(--spacing-sm);right:-1px}.icon-button-wrapper.svelte-1h0hs6p:not(.top-panel){border:1px solid var(--border-color-primary);border-radius:var(--radius-sm)}.top-panel.svelte-1h0hs6p{position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);margin:0}.icon-button-wrapper.svelte-1h0hs6p button{margin:var(--spacing-xxs);border-radius:var(--radius-xs);position:relative}.icon-button-wrapper.svelte-1h0hs6p a.download-link:not(:last-child),.icon-button-wrapper.svelte-1h0hs6p button:not(:last-child){margin-right:var(--spacing-xxs)}.icon-button-wrapper.svelte-1h0hs6p a.download-link:not(:last-child):not(.no-border *):after,.icon-button-wrapper.svelte-1h0hs6p button:not(:last-child):not(.no-border *):after{content:"";position:absolute;right:-4.5px;top:15%;height:70%;width:1px;background-color:var(--border-color-primary)}.icon-button-wrapper.svelte-1h0hs6p>*{height:100%}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-vusapu.svelte-vusapu{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-3);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);overflow:hidden;pointer-events:none}.wrap.center.svelte-vusapu.svelte-vusapu{top:0;right:0;left:0}.wrap.default.svelte-vusapu.svelte-vusapu{top:0;right:0;bottom:0;left:0}.hide.svelte-vusapu.svelte-vusapu{opacity:0;pointer-events:none}.generating.svelte-vusapu.svelte-vusapu{animation:svelte-vusapu-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-vusapu-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-vusapu.svelte-vusapu{background:none}@keyframes svelte-vusapu-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-vusapu-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-vusapu.svelte-vusapu{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-vusapu.svelte-vusapu{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-vusapu.svelte-vusapu{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-vusapu.svelte-vusapu{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-vusapu.svelte-vusapu{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-vusapu.svelte-vusapu{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-vusapu.svelte-vusapu{position:absolute;bottom:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-vusapu.svelte-vusapu{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-vusapu.svelte-vusapu{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.validation-error.svelte-vusapu.svelte-vusapu{pointer-events:auto;color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font);position:absolute;background:var(--error-background-fill);top:0;right:0;z-index:var(--layer-3);padding:var(--size-1) var(--size-2);font-size:var(--text-md);text-align:center;border-bottom-left-radius:var(--radius-sm);border-bottom:1px solid var(--error-border-color);border-left:1px solid var(--error-border-color);display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-xl)}.minimal.svelte-vusapu.svelte-vusapu{pointer-events:none}.minimal.svelte-vusapu .progress-text.svelte-vusapu{background:var(--block-background-fill)}.border.svelte-vusapu.svelte-vusapu{border:1px solid var(--border-color-primary)}.clear-status.svelte-vusapu.svelte-vusapu{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-syezpc{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-syezpc{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-syezpc{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-syezpc{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-syezpc{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-syezpc{border:1px solid var(--color-grey-700);background:var(--color-grey-50)}.dark .toast-body.info.svelte-syezpc{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-body.success.svelte-syezpc{border:1px solid var(--color-green-700);background:var(--color-green-50)}.dark .toast-body.success.svelte-syezpc{border:1px solid var(--color-green-500);background-color:var(--color-grey-950)}.toast-title.svelte-syezpc{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm)}.toast-title.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-title.error.svelte-syezpc{color:var(--color-red-50)}.toast-title.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-syezpc{color:var(--color-yellow-50)}.toast-title.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-title.info.svelte-syezpc{color:var(--color-grey-50)}.toast-title.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-title.success.svelte-syezpc{color:var(--color-green-50)}.toast-close.svelte-syezpc{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-close.error.svelte-syezpc{color:var(--color-red-500)}.toast-close.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-syezpc{color:var(--color-yellow-500)}.toast-close.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-close.info.svelte-syezpc{color:var(--color-grey-500)}.toast-close.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-close.success.svelte-syezpc{color:var(--color-green-500)}.toast-text.svelte-syezpc{font-size:var(--text-lg);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}.toast-text.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-text.error.svelte-syezpc{color:var(--color-red-50)}.toast-text.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-syezpc{color:var(--color-yellow-50)}.toast-text.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-text.info.svelte-syezpc{color:var(--color-grey-50)}.toast-text.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-text.success.svelte-syezpc{color:var(--color-green-50)}.toast-details.svelte-syezpc{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-syezpc{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-syezpc{color:var(--color-red-700)}.dark .toast-icon.error.svelte-syezpc{color:var(--color-red-500)}.toast-icon.warning.svelte-syezpc{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-syezpc{color:var(--color-yellow-500)}.toast-icon.info.svelte-syezpc{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-syezpc{color:var(--color-grey-500)}.toast-icon.success.svelte-syezpc{color:var(--color-green-700)}.dark .toast-icon.success.svelte-syezpc{color:var(--color-green-500)}@keyframes svelte-syezpc-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-syezpc{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-syezpc-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-syezpc{background:var(--color-red-700)}.dark .timer.error.svelte-syezpc{background:var(--color-red-500)}.timer.warning.svelte-syezpc{background:var(--color-yellow-700)}.dark .timer.warning.svelte-syezpc{background:var(--color-yellow-500)}.timer.info.svelte-syezpc{background:var(--color-grey-700)}.dark .timer.info.svelte-syezpc{background:var(--color-grey-500)}.timer.success.svelte-syezpc{background:var(--color-green-700)}.dark .timer.success.svelte-syezpc{background:var(--color-green-500)}.hidden.svelte-syezpc{display:none}.toast-text.svelte-syezpc a{text-decoration:underline}.toast-wrap.svelte-je2isz{--toast-top:var(--size-4);display:flex;position:fixed;top:calc(var(--toast-top) + var(--size-4));right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-je2isz{width:calc(var(--size-96) + var(--size-10))}}.streaming-bar.svelte-ga0jj6{position:absolute;bottom:0;left:0;right:0;height:4px;background-color:var(--primary-600);animation:svelte-ga0jj6-countdown linear forwards;z-index:1}@keyframes svelte-ga0jj6-countdown{0%{transform:translate(0)}to{transform:translate(-100%)}}.container.svelte-1i532j3{display:flex;position:relative;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%}.canvas-container.svelte-1i532j3{position:relative;width:100%;height:100%;min-height:400px;overflow:hidden;display:flex;justify-content:center;align-items:center;background-color:#f0f0f0}.canvas-container canvas{display:block;width:100%;height:100%;object-fit:contain}

src/backend/gradio_polygonannotator/templates/example/index.js

@@ -0,0 +1,171 @@
+const {
+  SvelteComponent: q,
+  append_hydration: u,
+  attr: c,
+  children: I,
+  claim_element: h,
+  claim_space: D,
+  claim_text: _,
+  detach: g,
+  element: m,
+  empty: v,
+  init: V,
+  insert_hydration: p,
+  noop: y,
+  safe_not_equal: C,
+  set_data: b,
+  space: G,
+  src_url_equal: k,
+  text: d,
+  toggle_class: r
+} = window.__gradio__svelte__internal;
+function w(a) {
+  let e, l, o, s, t = (
+    /*value*/
+    a[0].polygons && /*value*/
+    a[0].polygons.length > 0 && E(a)
+  );
+  return {
+    c() {
+      e = m("div"), l = m("img"), s = G(), t && t.c(), this.h();
+    },
+    l(n) {
+      e = h(n, "DIV", { class: !0 });
+      var i = I(e);
+      l = h(i, "IMG", { src: !0, alt: !0, class: !0 }), s = D(i), t && t.l(i), i.forEach(g), this.h();
+    },
+    h() {
+      k(l.src, o = /*value*/
+      a[0].image.url || /*value*/
+      a[0].image.path) || c(l, "src", o), c(l, "alt", ""), c(l, "class", "svelte-84dw5"), c(e, "class", "container svelte-84dw5"), r(
+        e,
+        "table",
+        /*type*/
+        a[1] === "table"
+      ), r(
+        e,
+        "gallery",
+        /*type*/
+        a[1] === "gallery"
+      ), r(
+        e,
+        "selected",
+        /*selected*/
+        a[2]
+      );
+    },
+    m(n, i) {
+      p(n, e, i), u(e, l), u(e, s), t && t.m(e, null);
+    },
+    p(n, i) {
+      i & /*value*/
+      1 && !k(l.src, o = /*value*/
+      n[0].image.url || /*value*/
+      n[0].image.path) && c(l, "src", o), /*value*/
+      n[0].polygons && /*value*/
+      n[0].polygons.length > 0 ? t ? t.p(n, i) : (t = E(n), t.c(), t.m(e, null)) : t && (t.d(1), t = null), i & /*type*/
+      2 && r(
+        e,
+        "table",
+        /*type*/
+        n[1] === "table"
+      ), i & /*type*/
+      2 && r(
+        e,
+        "gallery",
+        /*type*/
+        n[1] === "gallery"
+      ), i & /*selected*/
+      4 && r(
+        e,
+        "selected",
+        /*selected*/
+        n[2]
+      );
+    },
+    d(n) {
+      n && g(e), t && t.d();
+    }
+  };
+}
+function E(a) {
+  let e, l = (
+    /*value*/
+    a[0].polygons.length + ""
+  ), o, s, t = (
+    /*value*/
+    a[0].polygons.length !== 1 ? "s" : ""
+  ), n;
+  return {
+    c() {
+      e = m("div"), o = d(l), s = d(" polygon"), n = d(t), this.h();
+    },
+    l(i) {
+      e = h(i, "DIV", { class: !0 });
+      var f = I(e);
+      o = _(f, l), s = _(f, " polygon"), n = _(f, t), f.forEach(g), this.h();
+    },
+    h() {
+      c(e, "class", "polygon-count svelte-84dw5");
+    },
+    m(i, f) {
+      p(i, e, f), u(e, o), u(e, s), u(e, n);
+    },
+    p(i, f) {
+      f & /*value*/
+      1 && l !== (l = /*value*/
+      i[0].polygons.length + "") && b(o, l), f & /*value*/
+      1 && t !== (t = /*value*/
+      i[0].polygons.length !== 1 ? "s" : "") && b(n, t);
+    },
+    d(i) {
+      i && g(e);
+    }
+  };
+}
+function M(a) {
+  var o;
+  let e, l = (
+    /*value*/
+    ((o = a[0]) == null ? void 0 : o.image) && w(a)
+  );
+  return {
+    c() {
+      l && l.c(), e = v();
+    },
+    l(s) {
+      l && l.l(s), e = v();
+    },
+    m(s, t) {
+      l && l.m(s, t), p(s, e, t);
+    },
+    p(s, [t]) {
+      var n;
+      /*value*/
+      (n = s[0]) != null && n.image ? l ? l.p(s, t) : (l = w(s), l.c(), l.m(e.parentNode, e)) : l && (l.d(1), l = null);
+    },
+    i: y,
+    o: y,
+    d(s) {
+      s && g(e), l && l.d(s);
+    }
+  };
+}
+function N(a, e, l) {
+  let { value: o } = e, { type: s } = e, { selected: t = !1 } = e;
+  const n = 0;
+  return a.$$set = (i) => {
+    "value" in i && l(0, o = i.value), "type" in i && l(1, s = i.type), "selected" in i && l(2, t = i.selected);
+  }, [o, s, t, n];
+}
+class S extends q {
+  constructor(e) {
+    super(), V(this, e, N, M, C, { value: 0, type: 1, selected: 2, index: 3 });
+  }
+  get index() {
+    return this.$$.ctx[3];
+  }
+}
+export {
+  S as default
+};

src/backend/gradio_polygonannotator/templates/example/style.css

@@ -0,0 +1 @@
+.container.svelte-84dw5 img{width:100%;height:100%}.container.selected.svelte-84dw5.svelte-84dw5{border-color:var(--border-color-accent)}.container.table.svelte-84dw5.svelte-84dw5{margin:0 auto;border:2px solid var(--border-color-primary);border-radius:var(--radius-lg);overflow:hidden;width:var(--size-20);height:var(--size-20);object-fit:cover}.container.gallery.svelte-84dw5.svelte-84dw5{height:var(--size-20);max-height:var(--size-20);object-fit:cover}.container.svelte-84dw5 img.svelte-84dw5{object-fit:cover}.polygon-count.svelte-84dw5.svelte-84dw5{position:absolute;bottom:4px;right:4px;background:#000000b3;color:#fff;padding:2px 6px;border-radius:3px;font-size:11px;font-weight:500}.container.svelte-84dw5.svelte-84dw5{position:relative}

src/demo/app.py

@@ -0,0 +1,86 @@
+import gradio as gr
+from gradio_polygonannotator import PolygonAnnotator
+
+# Example with document regions
+example_data = {
+    "image": "https://images.unsplash.com/photo-1544816155-12df9643f363?w=800&h=1200",
+    "polygons": [
+        {
+            "id": "title",
+            "coordinates": [[180, 150], [580, 150], [580, 200], [180, 200]],
+            "color": "#FF6B6B",
+            "mask_opacity": 0.15,
+            "stroke_width": 1.0,
+            "stroke_opacity": 0.8,
+        },
+        {
+            "id": "paragraph_1",
+            "coordinates": [[100, 400], [750, 400], [750, 600], [100, 600]],
+            "color": "#4ECDC4",
+            "mask_opacity": 0.15,
+            "stroke_width": 0.7,
+            "stroke_opacity": 0.6,
+        },
+        {
+            "id": "paragraph_2",
+            "coordinates": [[100, 650], [750, 650], [750, 950], [100, 950]],
+            "color": "#4ECDC4",
+            "mask_opacity": 0.15,
+            "stroke_width": 0.7,
+            "stroke_opacity": 0.6,
+        },
+        {
+            "id": "signature",
+            "coordinates": [[400, 1020], [650, 1020], [650, 1080], [400, 1080]],
+            "color": "#FFE66D",
+            "mask_opacity": 0.2,
+            "stroke_width": 1.5,
+            "stroke_opacity": 0.8,
+        }
+    ]
+}
+
+def handle_selection(data, evt: gr.SelectData):
+    """Handle polygon selection and display info"""
+    if evt.value and data:
+        selected_ids = evt.value if isinstance(evt.value, list) else [evt.value]
+        info = f"Selected {len(selected_ids)} polygon(s):\n"
+        for poly_id in selected_ids:
+            polygon = next((p for p in data["polygons"] if p["id"] == poly_id), None)
+            if polygon:
+                info += f"• {poly_id}\n"
+        return info
+    return "Click on polygons to select them. Use Ctrl/Cmd+Click for multi-selection."
+
+with gr.Blocks() as demo:
+    gr.Markdown("""
+    # PolygonAnnotator - Interactive Polygon Selection
+
+    Click on polygons to select them. Use **Ctrl/Cmd+Click** for multiple selections.
+    Click selected polygons to deselect.
+    """)
+
+    with gr.Row():
+        with gr.Column(scale=3):
+            annotator = PolygonAnnotator(
+                value=example_data,
+                label="Document with Region Annotations",
+                height=600,
+            )
+
+        with gr.Column(scale=1):
+            selected_info = gr.Textbox(
+                label="Selected Regions",
+                lines=6,
+                value="Click on polygons to select them. Use Ctrl/Cmd+Click for multi-selection."
+            )
+
+    # Handle selection events
+    annotator.select(
+        handle_selection,
+        inputs=[annotator],
+        outputs=[selected_info]
+    )
+
+if __name__ == "__main__":
+    demo.launch()

src/demo/css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

src/demo/space.py

@@ -0,0 +1,208 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'PolygonAnnotator': {'description': 'Interactive polygon annotation component for visualizing and selecting polygon regions on images.\n\nThe PolygonAnnotator displays an image with customizable polygon overlays that users can interact with.\nFeatures include multi-selection with Ctrl/Cmd+click, hover effects, and customizable appearance including\nstroke width, opacity settings for both fill and stroke, with separate settings for selected states.\n\nPerfect for:\n- Document layout analysis and region selection\n- Image segmentation visualization\n- Interactive annotation review and editing\n- Object detection result visualization', 'members': {'__init__': {'value': {'type': 'dict | None', 'default': 'None', 'description': "Dictionary containing 'image' (FileData), 'polygons' (list with id, coordinates, color, opacities),"}, 'label': {'type': 'str | I18nData | None', 'default': 'None', 'description': 'Component label shown above the annotator.'}, 'every': {'type': 'Timer | float | None', 'default': 'None', 'description': 'Continuously calls `value` to recalculate it if `value` is a function.'}, 'inputs': {'type': 'Component | Sequence[Component] | set[Component] | None', 'default': 'None', 'description': "Components used as inputs to calculate `value` if it's a function."}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'Whether to display the label.'}, 'show_download_button': {'type': 'bool', 'default': 'True', 'description': 'Whether to show image download button.'}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': 'Component height in pixels or CSS units.'}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': 'Component width in pixels or CSS units.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'Whether to wrap component in a container with padding.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'Relative size compared to adjacent components.'}, 'min_width': {'type': 'int', 'default': '160', 'description': 'Minimum pixel width before wrapping.'}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': 'Whether users can interact with polygons (selection/deselection).'}, 'visible': {'type': 'bool | Literal["hidden"]', 'default': 'True', 'description': 'Whether component is visible ("hidden" keeps it in DOM but invisible).'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'HTML DOM id for CSS targeting.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'HTML DOM classes for CSS targeting.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'Whether to render the component immediately.'}, 'key': {'type': 'int | str | tuple[int | str, ...] | None', 'default': 'None', 'description': 'Key for maintaining component identity across re-renders.'}, 'preserved_by_key': {'type': 'list[str] | str | None', 'default': '"value"', 'description': 'Parameters preserved across re-renders with same key.'}}, 'postprocess': {'value': {'type': 'dict | None', 'description': "Dictionary containing 'image' (file path or URL), 'polygons' (list of polygon dictionaries"}}, 'preprocess': {'return': {'type': 'dict | None', 'description': 'Dictionary with image path, polygon data including coordinates, colors, opacities,'}, 'value': None}}, 'events': {'clear': {'type': None, 'default': None, 'description': 'This listener is triggered when the user clears the PolygonAnnotator using the clear button for the component.'}, 'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the PolygonAnnotator changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'upload': {'type': None, 'default': None, 'description': 'This listener is triggered when the user uploads a file into the PolygonAnnotator.'}, 'select': {'type': None, 'default': None, 'description': 'Event listener for when the user selects or deselects the PolygonAnnotator. Uses event data gradio.SelectData to carry `value` referring to the label of the PolygonAnnotator, and `selected` to refer to state of the PolygonAnnotator. See EventData documentation on how to use this event data'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'PolygonAnnotator': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_polygonannotator`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.1.0%20-%20orange"> <a href="https://github.com/yourusername/gradio-polygonannotator/issues" target="_blank"><img alt="Static Badge" src="https://img.shields.io/badge/Issues-white?logo=github&logoColor=black"></a> 
+</div>
+
+Interactive polygon annotation component for Gradio with multi-selection, hover effects, and customizable appearance
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_polygonannotator
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_polygonannotator import PolygonAnnotator
+
+# Example with document regions
+example_data = {
+    "image": "https://images.unsplash.com/photo-1544816155-12df9643f363?w=800&h=1200",
+    "polygons": [
+        {
+            "id": "title",
+            "coordinates": [[180, 150], [580, 150], [580, 200], [180, 200]],
+            "color": "#FF6B6B",
+            "mask_opacity": 0.15,
+            "stroke_width": 1.0,
+            "stroke_opacity": 0.8,
+        },
+        {
+            "id": "paragraph_1",
+            "coordinates": [[100, 400], [750, 400], [750, 600], [100, 600]],
+            "color": "#4ECDC4",
+            "mask_opacity": 0.15,
+            "stroke_width": 0.7,
+            "stroke_opacity": 0.6,
+        },
+        {
+            "id": "paragraph_2",
+            "coordinates": [[100, 650], [750, 650], [750, 950], [100, 950]],
+            "color": "#4ECDC4",
+            "mask_opacity": 0.15,
+            "stroke_width": 0.7,
+            "stroke_opacity": 0.6,
+        },
+        {
+            "id": "signature",
+            "coordinates": [[400, 1020], [650, 1020], [650, 1080], [400, 1080]],
+            "color": "#FFE66D",
+            "mask_opacity": 0.2,
+            "stroke_width": 1.5,
+            "stroke_opacity": 0.8,
+        }
+    ]
+}
+
+def handle_selection(data, evt: gr.SelectData):
+    \"\"\"Handle polygon selection and display info\"\"\"
+    if evt.value and data:
+        selected_ids = evt.value if isinstance(evt.value, list) else [evt.value]
+        info = f"Selected {len(selected_ids)} polygon(s):\n"
+        for poly_id in selected_ids:
+            polygon = next((p for p in data["polygons"] if p["id"] == poly_id), None)
+            if polygon:
+                info += f"• {poly_id}\n"
+        return info
+    return "Click on polygons to select them. Use Ctrl/Cmd+Click for multi-selection."
+
+with gr.Blocks() as demo:
+    gr.Markdown(\"\"\"
+    # PolygonAnnotator - Interactive Polygon Selection
+
+    Click on polygons to select them. Use **Ctrl/Cmd+Click** for multiple selections.
+    Click selected polygons to deselect.
+    \"\"\")
+
+    with gr.Row():
+        with gr.Column(scale=3):
+            annotator = PolygonAnnotator(
+                value=example_data,
+                label="Document with Region Annotations",
+                height=600,
+            )
+
+        with gr.Column(scale=1):
+            selected_info = gr.Textbox(
+                label="Selected Regions",
+                lines=6,
+                value="Click on polygons to select them. Use Ctrl/Cmd+Click for multi-selection."
+            )
+
+    # Handle selection events
+    annotator.select(
+        handle_selection,
+        inputs=[annotator],
+        outputs=[selected_info]
+    )
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `PolygonAnnotator`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["PolygonAnnotator"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["PolygonAnnotator"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As input:** Is passed, dictionary with image path, polygon data including coordinates, colors, opacities,.
+- **As output:** Should return, dictionary containing 'image' (file path or URL), 'polygons' (list of polygon dictionaries.
+
+ ```python
+def predict(
+    value: dict | None
+) -> dict | None:
+    return value
+```
+""", elem_classes=["md-custom", "PolygonAnnotator-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          PolygonAnnotator: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/frontend/Example.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import type { FileData } from "@gradio/client";
+
+	export let value: null | { image: FileData; polygons: Array<{id: string, coordinates: number[][], color: string}> };
+	export let type: "gallery" | "table";
+	export let selected = false;
+	export const index: number = 0;
+</script>
+
+{#if value?.image}
+	<div
+		class="container"
+		class:table={type === "table"}
+		class:gallery={type === "gallery"}
+		class:selected
+	>
+		<img src={value.image.url || value.image.path} alt="" />
+		{#if value.polygons && value.polygons.length > 0}
+			<div class="polygon-count">
+				{value.polygons.length} polygon{value.polygons.length !== 1 ? 's' : ''}
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.container :global(img) {
+		width: 100%;
+		height: 100%;
+	}
+
+	.container.selected {
+		border-color: var(--border-color-accent);
+	}
+
+	.container.table {
+		margin: 0 auto;
+		border: 2px solid var(--border-color-primary);
+		border-radius: var(--radius-lg);
+		overflow: hidden;
+		width: var(--size-20);
+		height: var(--size-20);
+		object-fit: cover;
+	}
+
+	.container.gallery {
+		height: var(--size-20);
+		max-height: var(--size-20);
+		object-fit: cover;
+	}
+	.container img {
+		object-fit: cover;
+	}
+
+	.polygon-count {
+		position: absolute;
+		bottom: 4px;
+		right: 4px;
+		background: rgba(0, 0, 0, 0.7);
+		color: white;
+		padding: 2px 6px;
+		border-radius: 3px;
+		font-size: 11px;
+		font-weight: 500;
+	}
+
+	.container {
+		position: relative;
+	}
+</style>

src/frontend/Index.svelte

@@ -0,0 +1,465 @@
+<svelte:options accessors={true} />
+
+<script lang="ts">
+    import { onMount, onDestroy, tick } from "svelte";
+    import * as PIXI from "pixi.js";
+    import type { Gradio } from "@gradio/utils";
+    import { Block, BlockLabel } from "@gradio/atoms";
+    import { Image as ImageIcon } from "@gradio/icons";
+    import { StatusTracker } from "@gradio/statustracker";
+    import type { LoadingStatus } from "@gradio/statustracker";
+    import type { FileData } from "@gradio/client";
+
+    export let elem_id = "";
+    export let elem_classes: string[] = [];
+    export let visible: boolean | "hidden" = true;
+    export let value: {
+        image: FileData;
+        polygons: Array<{
+            id: string;
+            coordinates: number[][];
+            color: string;
+            mask_opacity?: number;
+            stroke_width?: number;
+            stroke_opacity?: number;
+            selected_mask_opacity?: number;
+            selected_stroke_opacity?: number;
+        }>;
+        selected_polygons?: string[] | null;
+    } | null = null;
+    export let label: string;
+    export let show_label: boolean;
+    export let height: number | string | undefined = undefined;
+    export let width: number | string | undefined = undefined;
+    export let container = true;
+    export let scale: number | null = null;
+    export let min_width: number | undefined = undefined;
+    export let loading_status: LoadingStatus;
+    export let root: string;
+
+    export let gradio: Gradio<{
+        change: never;
+        upload: never;
+        clear: never;
+        select: { index: number | null; value: any };
+        clear_status: LoadingStatus;
+    }>;
+
+    let canvasContainer: HTMLDivElement;
+    let app: PIXI.Application;
+    let imageSprite: PIXI.Sprite | null = null;
+    let polygonGraphics: Map<string, PIXI.Graphics> = new Map();
+    let selectedPolygonIds: string[] = [];
+    type ImageRect = {
+        left: number;
+        top: number;
+        right: number;
+        bottom: number;
+        width: number;
+        height: number;
+        naturalWidth: number;
+        naturalHeight: number;
+    };
+    let imageRect: ImageRect = {
+        left: 0,
+        top: 0,
+        right: 1,
+        bottom: 1,
+        width: 1,
+        height: 1,
+        naturalWidth: 2,
+        naturalHeight: 2,
+    };
+
+    $: (value, handleValueChange());
+
+    async function handleValueChange() {
+        if (!app || !value) return;
+        selectedPolygonIds = value.selected_polygons || [];
+        await renderAnnotations();
+    }
+
+    function updateSelection(newSelectedIds: string[]) {
+        if (!value || !imageSprite) return;
+
+        polygonGraphics.forEach((graphics, polygonId) => {
+            const polygon = value.polygons.find((p) => p.id === polygonId);
+            if (!polygon) return;
+
+            const originalMaskAlpha = polygon.mask_opacity ?? 0.2;
+            const selectedMaskAlpha = polygon.selected_mask_opacity ?? 0.5;
+            const originalStrokeAlpha = polygon.stroke_opacity ?? 0.6;
+            const selectedStrokeAlpha = polygon.selected_stroke_opacity ?? 1.0;
+            const strokeWidth = polygon.stroke_width ?? 0.7;
+
+            graphics.clear();
+            if (newSelectedIds.includes(polygonId)) {
+                drawPolygonPath(graphics, polygon, imageSprite!, selectedMaskAlpha, strokeWidth, selectedStrokeAlpha);
+            } else {
+                drawPolygonPath(graphics, polygon, imageSprite!, originalMaskAlpha, strokeWidth, originalStrokeAlpha);
+            }
+        });
+    }
+
+    async function initPixiApp() {
+        if (!canvasContainer) return;
+
+        const containerWidth = canvasContainer.clientWidth || 800;
+        const containerHeight = canvasContainer.clientHeight || 600;
+
+        app = new PIXI.Application();
+        await app.init({
+            width: containerWidth,
+            height: containerHeight,
+            backgroundColor: 0xf0f0f0,
+            antialias: true,
+            resolution: window.devicePixelRatio || 1,
+            autoDensity: true,
+        });
+
+        canvasContainer.appendChild(app.canvas as HTMLCanvasElement);
+
+        app.stage.eventMode = "static";
+        app.stage.hitArea = app.screen;
+    }
+
+    async function renderAnnotations() {
+        if (!app || !value) return;
+
+        app.stage.removeChildren();
+        polygonGraphics.clear();
+        if (value.image) {
+            let imageUrl = "";
+
+            if (typeof value.image === "string") {
+                imageUrl = value.image;
+            } else if (value.image.url) {
+                imageUrl = value.image.url;
+            } else if (value.image.path) {
+                if (root && !value.image.path.startsWith("http")) {
+                    imageUrl = `${root}/file=${value.image.path}`;
+                } else {
+                    imageUrl = value.image.path;
+                }
+            }
+
+            if (imageUrl) {
+                try {
+                    const img = new Image();
+                    img.crossOrigin = "anonymous";
+
+                    const imageLoadPromise = new Promise<HTMLImageElement>(
+                        (resolve, reject) => {
+                            img.onload = () => resolve(img);
+                            img.onerror = reject;
+                            img.src = imageUrl;
+                        },
+                    );
+
+                    const loadedImage = await imageLoadPromise;
+                    const texture = PIXI.Texture.from(loadedImage);
+                    imageSprite = new PIXI.Sprite(texture);
+
+                    const scaleX = app.screen.width / texture.width;
+                    const scaleY = app.screen.height / texture.height;
+                    const scale = Math.min(scaleX, scaleY);
+
+                    imageSprite.scale.set(scale);
+
+                    const displayWidth = texture.width * scale;
+                    const displayHeight = texture.height * scale;
+
+                    imageSprite.x = (app.screen.width - displayWidth) / 2;
+                    imageSprite.y = (app.screen.height - displayHeight) / 2;
+
+                    imageRect = {
+                        left: imageSprite.x,
+                        top: imageSprite.y,
+                        right: imageSprite.x + displayWidth,
+                        bottom: imageSprite.y + displayHeight,
+                        width: displayWidth,
+                        height: displayHeight,
+                        naturalWidth: texture.width,
+                        naturalHeight: texture.height,
+                    };
+
+                    app.stage.addChild(imageSprite);
+                } catch (error) {
+                    console.error("Failed to load image:", error);
+                    return;
+                }
+            }
+        }
+
+        if (value.polygons && value.polygons.length > 0 && imageSprite) {
+            value.polygons.forEach((polygon) => {
+                const graphics = new PIXI.Graphics();
+
+                let color = 0xff0000;
+                try {
+                    if (polygon.color) {
+                        const colorStr = polygon.color.replace("#", "");
+                        color = parseInt(colorStr, 16);
+                    }
+                } catch (e) {
+                    console.error("Error parsing color:", e);
+                }
+
+                const polygonMaskOpacity = polygon.mask_opacity ?? 0.2;
+                const selectedMaskAlpha = polygon.selected_mask_opacity ?? 0.5;
+                const polygonStrokeOpacity = polygon.stroke_opacity ?? 0.6;
+                const selectedStrokeAlpha = polygon.selected_stroke_opacity ?? 1.0;
+                const strokeWidth = polygon.stroke_width ?? 0.7;
+                const initialMaskAlpha = selectedPolygonIds.includes(polygon.id)
+                    ? selectedMaskAlpha
+                    : polygonMaskOpacity;
+                const initialStrokeAlpha = selectedPolygonIds.includes(polygon.id)
+                    ? selectedStrokeAlpha
+                    : polygonStrokeOpacity;
+
+                if (polygon.coordinates && polygon.coordinates.length > 0) {
+                    const displayCoords = polygon.coordinates.map((coord) => {
+                        return [
+                            (coord[0] / (imageRect.naturalWidth - 1)) *
+                                imageRect.width +
+                                imageRect.left,
+                            (coord[1] / (imageRect.naturalHeight - 1)) *
+                                imageRect.height +
+                                imageRect.top,
+                        ];
+                    });
+
+                    graphics.poly(displayCoords.flat());
+                    graphics.fill({ color: color, alpha: initialMaskAlpha });
+                    graphics.stroke({ width: strokeWidth, color: color, alpha: initialStrokeAlpha });
+                }
+
+                graphics.eventMode = "static";
+                graphics.cursor = "pointer";
+
+                const originalMaskAlpha = polygonMaskOpacity;
+                const hoverMaskAlpha = Math.min(polygonMaskOpacity + 0.1, 1.0);
+                const hoverStrokeAlpha = Math.min(polygonStrokeOpacity + 0.2, 1.0);
+
+                graphics.on("pointerover", () => {
+                    if (!selectedPolygonIds.includes(polygon.id)) {
+                        graphics.clear();
+                        drawPolygonPath(
+                            graphics,
+                            polygon,
+                            imageSprite!,
+                            hoverMaskAlpha,
+                            strokeWidth,
+                            hoverStrokeAlpha,
+                        );
+                    }
+                });
+
+                graphics.on("pointerout", () => {
+                    if (!selectedPolygonIds.includes(polygon.id)) {
+                        graphics.clear();
+                        drawPolygonPath(
+                            graphics,
+                            polygon,
+                            imageSprite!,
+                            originalMaskAlpha,
+                            strokeWidth,
+                            polygonStrokeOpacity,
+                        );
+                    }
+                });
+
+                graphics.on("pointerdown", (event) => {
+                    // Check if Ctrl/Cmd key is held for multi-selection
+                    const isMultiSelect = event.ctrlKey || event.metaKey;
+
+                    if (selectedPolygonIds.includes(polygon.id)) {
+                        // Deselect this polygon
+                        const newSelectedIds = selectedPolygonIds.filter(
+                            (id) => id !== polygon.id,
+                        );
+                        updateSelection(newSelectedIds);
+                        selectedPolygonIds = newSelectedIds;
+
+                        // Dispatch deselection event to Gradio
+                        gradio.dispatch("select", {
+                            index:
+                                newSelectedIds.length > 0
+                                    ? value.polygons.findIndex(
+                                          (p) =>
+                                              p.id ===
+                                              newSelectedIds[
+                                                  newSelectedIds.length - 1
+                                              ],
+                                      )
+                                    : null,
+                            value:
+                                newSelectedIds.length > 0
+                                    ? newSelectedIds
+                                    : null,
+                        });
+                        return;
+                    }
+
+                    // Select polygon
+                    let newSelectedIds: string[];
+                    if (isMultiSelect) {
+                        // Add to existing selection
+                        newSelectedIds = [...selectedPolygonIds, polygon.id];
+                    } else {
+                        // Replace selection
+                        newSelectedIds = [polygon.id];
+                    }
+
+                    updateSelection(newSelectedIds);
+                    selectedPolygonIds = newSelectedIds;
+
+                    // Dispatch select event to Gradio
+                    gradio.dispatch("select", {
+                        index: value.polygons.findIndex(
+                            (p) => p.id === polygon.id,
+                        ),
+                        value: newSelectedIds,
+                    });
+                });
+
+                app.stage.addChild(graphics);
+                polygonGraphics.set(polygon.id, graphics);
+            });
+        }
+    }
+
+    function drawPolygonPath(
+        graphics: PIXI.Graphics,
+        polygon: any,
+        imageSprite: PIXI.Sprite,
+        maskAlpha: number = 0.2,
+        strokeWidth: number = 0.7,
+        strokeAlpha: number = 0.6,
+    ) {
+        if (polygon.coordinates && polygon.coordinates.length > 0) {
+            // Transform coordinates from natural image space to display space
+            const displayCoords = polygon.coordinates.map((coord: number[]) => {
+                return [
+                    (coord[0] / (imageRect.naturalWidth - 1)) *
+                        imageRect.width +
+                        imageRect.left,
+                    (coord[1] / (imageRect.naturalHeight - 1)) *
+                        imageRect.height +
+                        imageRect.top,
+                ];
+            });
+
+            let color = 0xff0000;
+            try {
+                if (polygon.color) {
+                    const colorStr = polygon.color.replace("#", "");
+                    color = parseInt(colorStr, 16);
+                }
+            } catch (e) {
+                console.error("Error parsing color in drawPolygonPath:", e);
+            }
+
+            // Use Pixi.js 8 drawing API
+            graphics.poly(displayCoords.flat());
+            graphics.fill({ color: color, alpha: maskAlpha });
+            graphics.stroke({ width: strokeWidth, color: color, alpha: strokeAlpha });
+        }
+    }
+
+    onMount(async () => {
+        await tick();
+        await initPixiApp();
+        if (value) {
+            await renderAnnotations();
+        }
+    });
+
+    onDestroy(() => {
+        if (app) {
+            app.destroy(true, { children: true, texture: true });
+        }
+    });
+
+    // Handle canvas resize
+    async function handleResize() {
+        if (!canvasContainer || !app) return;
+
+        const newWidth = canvasContainer.clientWidth;
+        const newHeight = canvasContainer.clientHeight;
+
+        if (newWidth !== app.screen.width || newHeight !== app.screen.height) {
+            app.renderer.resize(newWidth, newHeight);
+            // Re-render annotations with updated canvas dimensions
+            await renderAnnotations();
+        }
+    }
+
+    $: if (canvasContainer) {
+        handleResize();
+    }
+
+    $: (value, gradio.dispatch("change"));
+</script>
+
+<Block
+    {visible}
+    variant={"solid"}
+    padding={false}
+    {elem_id}
+    {elem_classes}
+    allow_overflow={false}
+    {container}
+    {scale}
+    {min_width}
+    {height}
+    {width}
+>
+    <StatusTracker
+        autoscroll={gradio.autoscroll}
+        i18n={gradio.i18n}
+        {...loading_status}
+        on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+    />
+
+    <BlockLabel
+        {show_label}
+        Icon={ImageIcon}
+        label={label || "Image Annotations"}
+    />
+
+    <div class="container">
+        <div class="canvas-container" bind:this={canvasContainer} />
+    </div>
+</Block>
+
+<style>
+    .container {
+        display: flex;
+        position: relative;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+    }
+
+    .canvas-container {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        min-height: 400px;
+        overflow: hidden;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #f0f0f0;
+    }
+
+    :global(.canvas-container canvas) {
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+    }
+</style>

src/frontend/gradio.config.js

@@ -0,0 +1,9 @@
+export default {
+  plugins: [],
+  svelte: {
+    preprocess: [],
+  },
+  build: {
+    target: "modules",
+  },
+};

src/frontend/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "gradio_annoviewer",
+  "version": "0.9.0",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "dependencies": {
+    "@gradio/atoms": "0.18.0",
+    "@gradio/client": "1.19.0",
+    "@gradio/icons": "0.14.0",
+    "@gradio/statustracker": "0.11.1",
+    "@gradio/upload": "0.17.0",
+    "@gradio/utils": "0.10.2",
+    "cropperjs": "^1.5.12",
+    "lazy-brush": "^1.0.1",
+    "pixi.js": "^8.0.0",
+    "resize-observer-polyfill": "^1.5.1"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.14.0"
+  },
+  "main_changeset": true,
+  "main": "./Index.svelte",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
+    "./base": {
+      "gradio": "./shared/ImagePreview.svelte",
+      "svelte": "./dist/shared/ImagePreview.svelte",
+      "types": "./dist/shared/ImagePreview.svelte.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/simpleimage"
+  }
+}

src/frontend/shared/ClearImage.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { IconButton, IconButtonWrapper } from "@gradio/atoms";
+	import { Clear } from "@gradio/icons";
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<IconButtonWrapper>
+	<IconButton
+		Icon={Clear}
+		label="Remove Image"
+		on:click={(event) => {
+			dispatch("remove_image");
+			event.stopPropagation();
+		}}
+	/>
+</IconButtonWrapper>

src/frontend/shared/ImagePreview.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import {
+		BlockLabel,
+		Empty,
+		IconButton,
+		IconButtonWrapper,
+		DownloadLink
+	} from "@gradio/atoms";
+	import { Download } from "@gradio/icons";
+
+	import { Image as ImageIcon } from "@gradio/icons";
+	import { type FileData } from "@gradio/client";
+	import type { I18nFormatter } from "@gradio/utils";
+
+	export let value: null | FileData;
+	export let label: string | undefined = undefined;
+	export let show_label: boolean;
+	export let show_download_button = true;
+	export let selectable = false;
+	export let i18n: I18nFormatter;
+</script>
+
+<BlockLabel
+	{show_label}
+	Icon={ImageIcon}
+	label={label || i18n("image.image")}
+/>
+{#if value === null || !value.url}
+	<Empty unpadded_box={true} size="large"><ImageIcon /></Empty>
+{:else}
+	<IconButtonWrapper>
+		{#if show_download_button}
+			<DownloadLink href={value.url} download={value.orig_name || "image"}>
+				<IconButton Icon={Download} label={i18n("common.download")} />
+			</DownloadLink>
+		{/if}
+	</IconButtonWrapper>
+	<button>
+		<div class:selectable class="image-container">
+			<img src={value.url} alt="" loading="lazy" />
+		</div>
+	</button>
+{/if}
+
+<style>
+	.image-container {
+		height: 100%;
+	}
+	.image-container :global(img),
+	button {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: scale-down;
+		display: block;
+		border-radius: var(--radius-lg);
+	}
+
+	.selectable {
+		cursor: crosshair;
+	}
+</style>

src/frontend/shared/ImageUploader.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { BlockLabel } from "@gradio/atoms";
+	import { Image as ImageIcon } from "@gradio/icons";
+
+	import { Upload } from "@gradio/upload";
+	import type { FileData, Client } from "@gradio/client";
+	import ClearImage from "./ClearImage.svelte";
+
+	export let value: null | FileData;
+	export let label: string | undefined = undefined;
+	export let show_label: boolean;
+	export let root: string;
+	export let upload: Client["upload"];
+	export let stream_handler: Client["stream"];
+
+	let upload_component: Upload;
+	let uploading = false;
+
+	function handle_upload({ detail }: CustomEvent<FileData>): void {
+		value = detail;
+		dispatch("upload");
+	}
+	$: if (uploading) value = null;
+
+	const dispatch = createEventDispatcher<{
+		change?: never;
+		clear?: never;
+		drag: boolean;
+		upload?: never;
+	}>();
+
+	let dragging = false;
+	$: dispatch("drag", dragging);
+</script>
+
+<BlockLabel {show_label} Icon={ImageIcon} label={label || "Image"} />
+
+<div data-testid="image" class="image-container">
+	{#if value?.url}
+		<ClearImage
+			on:remove_image={() => {
+				value = null;
+				dispatch("clear");
+			}}
+		/>
+	{/if}
+	<div class="upload-container">
+		<Upload
+			{upload}
+			{stream_handler}
+			hidden={value !== null}
+			bind:this={upload_component}
+			bind:uploading
+			bind:dragging
+			filetype="image/*"
+			on:load={handle_upload}
+			on:error
+			{root}
+		>
+			{#if value === null}
+				<slot />
+			{/if}
+		</Upload>
+		{#if value !== null}
+			<div class="image-frame">
+				<img src={value.url} alt={value.alt_text} />
+			</div>
+		{/if}
+	</div>
+</div>
+
+<style>
+	.image-frame :global(img) {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: scale-down;
+	}
+
+	.image-frame {
+		width: 100%;
+		height: 100%;
+	}
+
+	.upload-container {
+		height: 100%;
+		flex-shrink: 1;
+		max-height: 100%;
+	}
+
+	.image-container {
+		display: flex;
+		height: 100%;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		max-height: 100%;
+	}
+</style>