Upload folder using huggingface_hub

README.md

@@ -10,14 +10,13 @@ colorFrom: blue
 colorTo: yellow
 sdk: gradio
 pinned: false
-app_file: app.py
+app_file: space.py
 emoji: 👀
 sdk_version: 5.46.1
 ---
 
-
 # `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> 
+<a href="https://pypi.org/project/gradio_polygonannotator/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_polygonannotator"></a> <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
 
@@ -33,85 +32,434 @@ pip install gradio_polygonannotator
 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,
+            "id": "complex_header",
+            "coordinates": [
+                [150, 120],
+                [200, 100],
+                [350, 110],
+                [450, 95],
+                [600, 120],
+                [620, 180],
+                [580, 220],
+                [400, 240],
+                [250, 235],
+                [180, 200],
+                [140, 160],
+            ],
+            "color": "#FF0000",
+            "mask_opacity": 0.3,
+            "stroke_width": 1.2,
             "stroke_opacity": 0.8,
+            "selected_mask_opacity": 0.6,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Complex Header",
+            "display_font_size": 14,
+            "display_text_color": "#FFFFFF",
         },
         {
-            "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": "overlapping_ribbon",
+            "coordinates": [
+                [300, 150],
+                [550, 160],
+                [580, 200],
+                [650, 220],
+                [680, 280],
+                [620, 320],
+                [500, 340],
+                [350, 330],
+                [200, 310],
+                [180, 270],
+                [220, 220],
+                [280, 190],
+            ],
+            "color": "#00FF00",
+            "mask_opacity": 0.25,
+            "stroke_width": 1.5,
+            "stroke_opacity": 0.7,
+            "selected_mask_opacity": 0.5,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Overlapping Ribbon",
+            "display_font_size": 14,
+            "display_text_color": "#000000",
         },
         {
-            "id": "paragraph_2",
-            "coordinates": [[100, 650], [750, 650], [750, 950], [100, 950]],
-            "color": "#4ECDC4",
-            "mask_opacity": 0.15,
-            "stroke_width": 0.7,
+            "id": "irregular_content",
+            "coordinates": [
+                [120, 380],
+                [250, 350],
+                [400, 370],
+                [550, 390],
+                [720, 420],
+                [750, 500],
+                [780, 650],
+                [720, 800],
+                [650, 920],
+                [500, 950],
+                [300, 940],
+                [150, 900],
+                [80, 750],
+                [90, 600],
+                [110, 450],
+            ],
+            "color": "#0000FF",
+            "mask_opacity": 0.2,
+            "stroke_width": 0.8,
             "stroke_opacity": 0.6,
+            "selected_mask_opacity": 0.4,
+            "selected_stroke_opacity": 0.9,
+            "display_text": "Irregular Content",
+            "display_font_size": 14,
+            "display_text_color": "#FFFF00",
         },
         {
-            "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,
-        }
-    ]
+            "id": "star_shaped",
+            "coordinates": [
+                [400, 850],
+                [450, 900],
+                [520, 910],
+                [480, 970],
+                [500, 1040],
+                [400, 1000],
+                [300, 1040],
+                [320, 970],
+                [280, 910],
+                [350, 900],
+            ],
+            "color": "#FF00FF",
+            "mask_opacity": 0.35,
+            "stroke_width": 2.0,
+            "stroke_opacity": 0.9,
+            "selected_mask_opacity": 0.7,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Star Shape",
+            "display_font_size": 14,
+            "display_text_color": "#FFFFFF",
+        },
+        {
+            "id": "overlapping_triangle",
+            "coordinates": [
+                [480, 600],
+                [650, 750],
+                [720, 850],
+                [600, 920],
+                [450, 880],
+                [350, 800],
+                [380, 700],
+            ],
+            "color": "#FFAA00",
+            "mask_opacity": 0.28,
+            "stroke_width": 1.8,
+            "stroke_opacity": 0.75,
+            "selected_mask_opacity": 0.55,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Triangle",
+            "display_font_size": 14,
+            "display_text_color": "#000000",
+        },
+    ],
 }
 
-def handle_selection(data, evt: gr.SelectData):
-    """Handle polygon selection and display info"""
+polygon_table = [
+    ["complex_header", "Complex Header", "#FF0000", 0.3, 1.2, 0.8],
+    ["overlapping_ribbon", "Overlapping Ribbon", "#00FF00", 0.25, 1.5, 0.7],
+    ["irregular_content", "Irregular Content", "#0000FF", 0.2, 0.8, 0.6],
+    ["star_shaped", "Star Shape", "#FF00FF", 0.35, 2.0, 0.9],
+    ["overlapping_triangle", "Triangle", "#FFAA00", 0.28, 1.8, 0.75],
+]
+
+
+def process_viewer_selection(data, evt: gr.SelectData):
     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."
+
+        highlighted_table = []
+        for row in polygon_table:
+            if row[0] in selected_ids:
+                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)
+
+        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):
+    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]
+
+        updated_data = example_data.copy()
+        updated_data["selected_polygons"] = [polygon_id]
+
+        highlighted_table = []
+        for i, row in enumerate(polygon_table):
+            if i == evt.index[0]:
+                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)
+
+        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, highlighted_table
+
+    updated_data = example_data.copy()
+    updated_data["selected_polygons"] = []
+    return updated_data, "No polygons selected", polygon_table
+
+
+def clear_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):
+    if not polygon_id or polygon_id.strip() == "":
+        updated_data = example_data.copy()
+        updated_data["selected_polygons"] = []
+        return updated_data, "No polygons selected", polygon_table
+
+    polygon_ids = [id.strip() for id in polygon_id.split(",") if id.strip()]
+    valid_ids = [p["id"] for p in example_data["polygons"]]
+
+    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:
+        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
+
+    updated_data = example_data.copy()
+    updated_data["selected_polygons"] = valid_selected_ids
+
+    highlighted_table = []
+    for row in polygon_table:
+        if row[0] in valid_selected_ids:
+            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)
+
+    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
+
+
+def toggle_text_display(current_data, show_text):
+    if not current_data:
+        return current_data
+
+    updated_data = current_data.copy()
+    updated_data["polygons"] = []
+
+    for polygon in current_data.get("polygons", []):
+        updated_polygon = polygon.copy()
+        if not show_text:
+            updated_polygon["display_font_size"] = 0
+        else:
+            original_polygon = next(
+                (p for p in example_data["polygons"] if p["id"] == polygon["id"]), None
+            )
+            if original_polygon:
+                updated_polygon["display_text"] = original_polygon.get(
+                    "display_text", polygon["id"]
+                )
+                updated_polygon["display_font_size"] = original_polygon.get(
+                    "display_font_size", 14
+                )
+                updated_polygon["display_text_color"] = original_polygon.get(
+                    "display_text_color", "#000000"
+                )
+
+        updated_data["polygons"].append(updated_polygon)
+
+    return updated_data
+
 
 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.
+    # PolygonAnnotator - Advanced Interactive Demo
+
+    ## 🎮 Controls & Hotkeys
+
+    ### Selection
+    - **Click** on polygons or text labels to select/deselect
+    - **Ctrl/Cmd+Click** for multiple selection
+    - **Click dataframe rows** to select polygons
+    - **Enter polygon IDs** manually in the textbox
+
+    ### Navigation
+    - **Mouse Wheel** - Zoom in/out at cursor position
+    - **+/=** - Zoom in (10%)
+    - **-** - Zoom out (10%)
+    - **Ctrl/Cmd+0** - Reset view to original
+    - **Arrow Keys** - Pan view (↑↓←→)
+    - **Middle Mouse / Shift+Drag** - Pan view with mouse
+
+    ### Features
+    - **Clear button** to deselect all
+    - **Toggle text display** checkbox for polygon labels
     """)
 
     with gr.Row():
-        with gr.Column(scale=3):
-            annotator = PolygonAnnotator(
+        with gr.Column(scale=2):
+            poly_annotator = PolygonAnnotator(
                 value=example_data,
-                label="Document with Region Annotations",
+                label="Document with Interactive Polygon 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."
+                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)",
+                interactive=True,
             )
 
+            clear_button = gr.Button("🗑️ Clear All Selections", variant="secondary")
+
+            # Add text display toggle
+            with gr.Row():
+                show_text_checkbox = gr.Checkbox(
+                    label="Show Polygon Text",
+                    value=True,
+                    info="Toggle text display on polygons",
+                )
+
+            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
+            - **Text labels** with customizable colors and sizes
+
+            #### 🖱️ 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
+            6. **Text Toggle**: Show/hide polygon labels
+
+            #### 📝 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
+            - Toggle text display to see labels on polygons
+            """)
+
     # Handle selection events
-    annotator.select(
-        handle_selection,
-        inputs=[annotator],
-        outputs=[selected_info]
+    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, polygon_dataframe],
+    )
+
+    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],
+    )
+
+    # Handle text display toggle
+    show_text_checkbox.change(
+        toggle_text_display,
+        inputs=[poly_annotator, show_text_checkbox],
+        outputs=[poly_annotator],
     )
 
 if __name__ == "__main__":
@@ -143,7 +491,7 @@ 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>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -156,7 +504,7 @@ str | I18nData | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">Component label shown above the annotator.</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -169,7 +517,7 @@ 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>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -182,7 +530,7 @@ 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>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -195,7 +543,7 @@ bool | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">Whether to display the label.</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -208,7 +556,7 @@ bool
 
 </td>
 <td align="left"><code>True</code></td>
-<td align="left">Whether to show image download button.</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -221,7 +569,7 @@ int | str | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">Component height in pixels or CSS units.</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -234,7 +582,7 @@ int | str | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">Component width in pixels or CSS units.</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -247,7 +595,7 @@ bool
 
 </td>
 <td align="left"><code>True</code></td>
-<td align="left">Whether to wrap component in a container with padding.</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -260,7 +608,7 @@ int | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">Relative size compared to adjacent components.</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -273,7 +621,7 @@ int
 
 </td>
 <td align="left"><code>160</code></td>
-<td align="left">Minimum pixel width before wrapping.</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -286,7 +634,7 @@ bool | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">Whether users can interact with polygons (selection/deselection).</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -299,7 +647,7 @@ 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>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -312,7 +660,7 @@ str | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">HTML DOM id for CSS targeting.</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -325,7 +673,7 @@ list[str] | str | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">HTML DOM classes for CSS targeting.</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -338,7 +686,7 @@ bool
 
 </td>
 <td align="left"><code>True</code></td>
-<td align="left">Whether to render the component immediately.</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -351,7 +699,7 @@ 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>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -364,7 +712,7 @@ list[str] | str | None
 
 </td>
 <td align="left"><code>"value"</code></td>
-<td align="left">Parameters preserved across re-renders with same key.</td>
+<td align="left">None</td>
 </tr>
 </tbody></table>
 
@@ -389,12 +737,12 @@ The impact on the users predict function varies depending on whether the compone
 
 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.
+- **As output:** Is passed, the preprocessed input data sent to the user's function in the backend.
+- **As input:** Should return, the output data received by the component from the user's function in the backend.
 
  ```python
  def predict(
      value: dict | None
  ) -> dict | None:
      return value
- ```
+ ```

app.py

@@ -1,155 +1,263 @@
 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]],
+            "id": "complex_header",
+            "coordinates": [
+                [150, 120],
+                [200, 100],
+                [350, 110],
+                [450, 95],
+                [600, 120],
+                [620, 180],
+                [580, 220],
+                [400, 240],
+                [250, 235],
+                [180, 200],
+                [140, 160],
+            ],
             "color": "#FF0000",
-            "mask_opacity": 0.2,
-            "stroke_width": 0.7,
-            "stroke_opacity": 0.6,
-            "selected_mask_opacity": 0.5,
-            "selected_stroke_opacity": 1.0
+            "mask_opacity": 0.3,
+            "stroke_width": 1.2,
+            "stroke_opacity": 0.8,
+            "selected_mask_opacity": 0.6,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Complex Header",
+            "display_font_size": 14,
+            "display_text_color": "#FFFFFF",
         },
         {
-            "id": "salutation",
-            "coordinates": [[180, 280], [680, 280], [680, 340], [180, 340]],
+            "id": "overlapping_ribbon",
+            "coordinates": [
+                [300, 150],
+                [550, 160],
+                [580, 200],
+                [650, 220],
+                [680, 280],
+                [620, 320],
+                [500, 340],
+                [350, 330],
+                [200, 310],
+                [180, 270],
+                [220, 220],
+                [280, 190],
+            ],
             "color": "#00FF00",
+            "mask_opacity": 0.25,
+            "stroke_width": 1.5,
+            "stroke_opacity": 0.7,
+            "selected_mask_opacity": 0.5,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Overlapping Ribbon",
+            "display_font_size": 14,
+            "display_text_color": "#000000",
+        },
+        {
+            "id": "irregular_content",
+            "coordinates": [
+                [120, 380],
+                [250, 350],
+                [400, 370],
+                [550, 390],
+                [720, 420],
+                [750, 500],
+                [780, 650],
+                [720, 800],
+                [650, 920],
+                [500, 950],
+                [300, 940],
+                [150, 900],
+                [80, 750],
+                [90, 600],
+                [110, 450],
+            ],
+            "color": "#0000FF",
             "mask_opacity": 0.2,
-            "stroke_width": 1.0,
+            "stroke_width": 0.8,
             "stroke_opacity": 0.6,
             "selected_mask_opacity": 0.4,
-            "selected_stroke_opacity": 0.9
+            "selected_stroke_opacity": 0.9,
+            "display_text": "Irregular Content",
+            "display_font_size": 14,
+            "display_text_color": "#FFFF00",
         },
         {
-            "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": "star_shaped",
+            "coordinates": [
+                [400, 850],
+                [450, 900],
+                [520, 910],
+                [480, 970],
+                [500, 1040],
+                [400, 1000],
+                [300, 1040],
+                [320, 970],
+                [280, 910],
+                [350, 900],
+            ],
+            "color": "#FF00FF",
+            "mask_opacity": 0.35,
+            "stroke_width": 2.0,
+            "stroke_opacity": 0.9,
+            "selected_mask_opacity": 0.7,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Star Shape",
+            "display_font_size": 14,
+            "display_text_color": "#FFFFFF",
         },
         {
-            "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
-        }
-    ]
+            "id": "overlapping_triangle",
+            "coordinates": [
+                [480, 600],
+                [650, 750],
+                [720, 850],
+                [600, 920],
+                [450, 880],
+                [350, 800],
+                [380, 700],
+            ],
+            "color": "#FFAA00",
+            "mask_opacity": 0.28,
+            "stroke_width": 1.8,
+            "stroke_opacity": 0.75,
+            "selected_mask_opacity": 0.55,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Triangle",
+            "display_font_size": 14,
+            "display_text_color": "#000000",
+        },
+    ],
 }
 
-# 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]
+    ["complex_header", "Complex Header", "#FF0000", 0.3, 1.2, 0.8],
+    ["overlapping_ribbon", "Overlapping Ribbon", "#00FF00", 0.25, 1.5, 0.7],
+    ["irregular_content", "Irregular Content", "#0000FF", 0.2, 0.8, 0.6],
+    ["star_shaped", "Star Shape", "#FF00FF", 0.35, 2.0, 0.9],
+    ["overlapping_triangle", "Triangle", "#FFAA00", 0.28, 1.8, 0.75],
 ]
 
+
 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]} ←"]
+            if row[0] in selected_ids:
+                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)
+            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_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]
 
+        highlighted_table = []
+        for i, row in enumerate(polygon_table):
+            if i == evt.index[0]:
+                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)
+
         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
+        return updated_data, info_text, highlighted_table
 
-    # Deselection
     updated_data = example_data.copy()
     updated_data["selected_polygons"] = []
-    return updated_data, "No polygons selected"
+    return updated_data, "No polygons selected", polygon_table
+
 
 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]} ←"]
+        if row[0] in valid_selected_ids:
+            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)
+        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")
+            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)}")
@@ -157,16 +265,61 @@ def select_polygon_by_id(polygon_id):
     info_text = "\n".join(info_lines)
     return updated_data, info_text, highlighted_table
 
+
+def toggle_text_display(current_data, show_text):
+    if not current_data:
+        return current_data
+
+    updated_data = current_data.copy()
+    updated_data["polygons"] = []
+
+    for polygon in current_data.get("polygons", []):
+        updated_polygon = polygon.copy()
+        if not show_text:
+            updated_polygon["display_font_size"] = 0
+        else:
+            original_polygon = next(
+                (p for p in example_data["polygons"] if p["id"] == polygon["id"]), None
+            )
+            if original_polygon:
+                updated_polygon["display_text"] = original_polygon.get(
+                    "display_text", polygon["id"]
+                )
+                updated_polygon["display_font_size"] = original_polygon.get(
+                    "display_font_size", 14
+                )
+                updated_polygon["display_text_color"] = original_polygon.get(
+                    "display_text_color", "#000000"
+                )
+
+        updated_data["polygons"].append(updated_polygon)
+
+    return updated_data
+
+
 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
+    ## 🎮 Controls & Hotkeys
+
+    ### Selection
+    - **Click** on polygons or text labels to select/deselect
     - **Ctrl/Cmd+Click** for multiple selection
     - **Click dataframe rows** to select polygons
     - **Enter polygon IDs** manually in the textbox
+
+    ### Navigation
+    - **Mouse Wheel** - Zoom in/out at cursor position
+    - **+/=** - Zoom in (10%)
+    - **-** - Zoom out (10%)
+    - **Ctrl/Cmd+0** - Reset view to original
+    - **Arrow Keys** - Pan view (↑↓←→)
+    - **Middle Mouse / Shift+Drag** - Pan view with mouse
+
+    ### Features
     - **Clear button** to deselect all
+    - **Toggle text display** checkbox for polygon labels
     """)
 
     with gr.Row():
@@ -181,24 +334,31 @@ with gr.Blocks() as demo:
             selected_info = gr.Textbox(
                 label="Selected Polygon Information",
                 lines=5,
-                value="Click on a polygon to see its information"
+                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
+                interactive=True,
             )
 
             clear_button = gr.Button("🗑️ Clear All Selections", variant="secondary")
 
+            # Add text display toggle
+            with gr.Row():
+                show_text_checkbox = gr.Checkbox(
+                    label="Show Polygon Text",
+                    value=True,
+                    info="Toggle text display on polygons",
+                )
+
             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
+                    scale=3,
                 )
                 select_button = gr.Button("Select", variant="primary", scale=1)
 
@@ -210,6 +370,7 @@ with gr.Blocks() as demo:
             - Variable **stroke width** (0.5px to 1.5px)
             - Custom **stroke opacity** for borders
             - Enhanced appearance when selected
+            - **Text labels** with customizable colors and sizes
 
             #### 🖱️ Interaction Methods
             1. **Direct Click**: Click polygons in the viewer
@@ -217,6 +378,7 @@ with gr.Blocks() as demo:
             3. **Dataframe**: Click table rows
             4. **Text Input**: Type polygon IDs
             5. **Clear All**: Reset selection
+            6. **Text Toggle**: Show/hide polygon labels
 
             #### 📝 Polygon IDs
             - `date_line` - Red header area
@@ -229,37 +391,44 @@ with gr.Blocks() as demo:
             - Selected polygons have increased opacity
             - Use comma-separated IDs for batch selection
             - Click selected polygons to deselect them
+            - Toggle text display to see labels on polygons
             """)
 
     # Handle selection events
     poly_annotator.select(
         process_viewer_selection,
         inputs=[poly_annotator],
-        outputs=[selected_info, polygon_dataframe]
+        outputs=[selected_info, polygon_dataframe],
     )
 
     polygon_dataframe.select(
         process_dataframe_selection,
         inputs=[polygon_dataframe],
-        outputs=[poly_annotator, selected_info]
+        outputs=[poly_annotator, selected_info, polygon_dataframe],
     )
 
     clear_button.click(
-        clear_selection,
-        outputs=[poly_annotator, selected_info, polygon_dataframe]
+        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]
+        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]
+        outputs=[poly_annotator, selected_info, polygon_dataframe],
+    )
+
+    # Handle text display toggle
+    show_text_checkbox.change(
+        toggle_text_display,
+        inputs=[poly_annotator, show_text_checkbox],
+        outputs=[poly_annotator],
     )
 
 if __name__ == "__main__":

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;
+}

space.py

@@ -0,0 +1,557 @@
+
+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.', 'members': {'__init__': {'value': {'type': 'dict | None', 'default': 'None', 'description': None}, 'label': {'type': 'str | I18nData | None', 'default': 'None', 'description': None}, 'every': {'type': 'Timer | float | None', 'default': 'None', 'description': None}, 'inputs': {'type': 'Component | Sequence[Component] | set[Component] | None', 'default': 'None', 'description': None}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': None}, 'show_download_button': {'type': 'bool', 'default': 'True', 'description': None}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'container': {'type': 'bool', 'default': 'True', 'description': None}, 'scale': {'type': 'int | None', 'default': 'None', 'description': None}, 'min_width': {'type': 'int', 'default': '160', 'description': None}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': None}, 'visible': {'type': 'bool | Literal["hidden"]', 'default': 'True', 'description': None}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': None}, 'render': {'type': 'bool', 'default': 'True', 'description': None}, 'key': {'type': 'int | str | tuple[int | str, ...] | None', 'default': 'None', 'description': None}, 'preserved_by_key': {'type': 'list[str] | str | None', 'default': '"value"', 'description': None}}, 'postprocess': {'value': {'type': 'dict | None', 'description': "The output data received by the component from the user's function in the backend."}}, 'preprocess': {'return': {'type': 'dict | None', 'description': "The preprocessed input data sent to the user's function in the backend."}, '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;">
+<a href="https://pypi.org/project/gradio_polygonannotator/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_polygonannotator"></a> <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_data = {
+    "image": "https://images.unsplash.com/photo-1544816155-12df9643f363?w=800&h=1200",
+    "polygons": [
+        {
+            "id": "complex_header",
+            "coordinates": [
+                [150, 120],
+                [200, 100],
+                [350, 110],
+                [450, 95],
+                [600, 120],
+                [620, 180],
+                [580, 220],
+                [400, 240],
+                [250, 235],
+                [180, 200],
+                [140, 160],
+            ],
+            "color": "#FF0000",
+            "mask_opacity": 0.3,
+            "stroke_width": 1.2,
+            "stroke_opacity": 0.8,
+            "selected_mask_opacity": 0.6,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Complex Header",
+            "display_font_size": 14,
+            "display_text_color": "#FFFFFF",
+        },
+        {
+            "id": "overlapping_ribbon",
+            "coordinates": [
+                [300, 150],
+                [550, 160],
+                [580, 200],
+                [650, 220],
+                [680, 280],
+                [620, 320],
+                [500, 340],
+                [350, 330],
+                [200, 310],
+                [180, 270],
+                [220, 220],
+                [280, 190],
+            ],
+            "color": "#00FF00",
+            "mask_opacity": 0.25,
+            "stroke_width": 1.5,
+            "stroke_opacity": 0.7,
+            "selected_mask_opacity": 0.5,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Overlapping Ribbon",
+            "display_font_size": 14,
+            "display_text_color": "#000000",
+        },
+        {
+            "id": "irregular_content",
+            "coordinates": [
+                [120, 380],
+                [250, 350],
+                [400, 370],
+                [550, 390],
+                [720, 420],
+                [750, 500],
+                [780, 650],
+                [720, 800],
+                [650, 920],
+                [500, 950],
+                [300, 940],
+                [150, 900],
+                [80, 750],
+                [90, 600],
+                [110, 450],
+            ],
+            "color": "#0000FF",
+            "mask_opacity": 0.2,
+            "stroke_width": 0.8,
+            "stroke_opacity": 0.6,
+            "selected_mask_opacity": 0.4,
+            "selected_stroke_opacity": 0.9,
+            "display_text": "Irregular Content",
+            "display_font_size": 14,
+            "display_text_color": "#FFFF00",
+        },
+        {
+            "id": "star_shaped",
+            "coordinates": [
+                [400, 850],
+                [450, 900],
+                [520, 910],
+                [480, 970],
+                [500, 1040],
+                [400, 1000],
+                [300, 1040],
+                [320, 970],
+                [280, 910],
+                [350, 900],
+            ],
+            "color": "#FF00FF",
+            "mask_opacity": 0.35,
+            "stroke_width": 2.0,
+            "stroke_opacity": 0.9,
+            "selected_mask_opacity": 0.7,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Star Shape",
+            "display_font_size": 14,
+            "display_text_color": "#FFFFFF",
+        },
+        {
+            "id": "overlapping_triangle",
+            "coordinates": [
+                [480, 600],
+                [650, 750],
+                [720, 850],
+                [600, 920],
+                [450, 880],
+                [350, 800],
+                [380, 700],
+            ],
+            "color": "#FFAA00",
+            "mask_opacity": 0.28,
+            "stroke_width": 1.8,
+            "stroke_opacity": 0.75,
+            "selected_mask_opacity": 0.55,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Triangle",
+            "display_font_size": 14,
+            "display_text_color": "#000000",
+        },
+    ],
+}
+
+polygon_table = [
+    ["complex_header", "Complex Header", "#FF0000", 0.3, 1.2, 0.8],
+    ["overlapping_ribbon", "Overlapping Ribbon", "#00FF00", 0.25, 1.5, 0.7],
+    ["irregular_content", "Irregular Content", "#0000FF", 0.2, 0.8, 0.6],
+    ["star_shaped", "Star Shape", "#FF00FF", 0.35, 2.0, 0.9],
+    ["overlapping_triangle", "Triangle", "#FFAA00", 0.28, 1.8, 0.75],
+]
+
+
+def process_viewer_selection(data, evt: gr.SelectData):
+    if evt.value and data:
+        selected_ids = evt.value if isinstance(evt.value, list) else [evt.value]
+
+        highlighted_table = []
+        for row in polygon_table:
+            if row[0] in selected_ids:
+                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)
+
+        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):
+    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]
+
+        updated_data = example_data.copy()
+        updated_data["selected_polygons"] = [polygon_id]
+
+        highlighted_table = []
+        for i, row in enumerate(polygon_table):
+            if i == evt.index[0]:
+                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)
+
+        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, highlighted_table
+
+    updated_data = example_data.copy()
+    updated_data["selected_polygons"] = []
+    return updated_data, "No polygons selected", polygon_table
+
+
+def clear_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):
+    if not polygon_id or polygon_id.strip() == "":
+        updated_data = example_data.copy()
+        updated_data["selected_polygons"] = []
+        return updated_data, "No polygons selected", polygon_table
+
+    polygon_ids = [id.strip() for id in polygon_id.split(",") if id.strip()]
+    valid_ids = [p["id"] for p in example_data["polygons"]]
+
+    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:
+        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
+
+    updated_data = example_data.copy()
+    updated_data["selected_polygons"] = valid_selected_ids
+
+    highlighted_table = []
+    for row in polygon_table:
+        if row[0] in valid_selected_ids:
+            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)
+
+    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
+
+
+def toggle_text_display(current_data, show_text):
+    if not current_data:
+        return current_data
+
+    updated_data = current_data.copy()
+    updated_data["polygons"] = []
+
+    for polygon in current_data.get("polygons", []):
+        updated_polygon = polygon.copy()
+        if not show_text:
+            updated_polygon["display_font_size"] = 0
+        else:
+            original_polygon = next(
+                (p for p in example_data["polygons"] if p["id"] == polygon["id"]), None
+            )
+            if original_polygon:
+                updated_polygon["display_text"] = original_polygon.get(
+                    "display_text", polygon["id"]
+                )
+                updated_polygon["display_font_size"] = original_polygon.get(
+                    "display_font_size", 14
+                )
+                updated_polygon["display_text_color"] = original_polygon.get(
+                    "display_text_color", "#000000"
+                )
+
+        updated_data["polygons"].append(updated_polygon)
+
+    return updated_data
+
+
+with gr.Blocks() as demo:
+    gr.Markdown(\"\"\"
+    # PolygonAnnotator - Advanced Interactive Demo
+
+    ## 🎮 Controls & Hotkeys
+
+    ### Selection
+    - **Click** on polygons or text labels to select/deselect
+    - **Ctrl/Cmd+Click** for multiple selection
+    - **Click dataframe rows** to select polygons
+    - **Enter polygon IDs** manually in the textbox
+
+    ### Navigation
+    - **Mouse Wheel** - Zoom in/out at cursor position
+    - **+/=** - Zoom in (10%)
+    - **-** - Zoom out (10%)
+    - **Ctrl/Cmd+0** - Reset view to original
+    - **Arrow Keys** - Pan view (↑↓��→)
+    - **Middle Mouse / Shift+Drag** - Pan view with mouse
+
+    ### Features
+    - **Clear button** to deselect all
+    - **Toggle text display** checkbox for polygon labels
+    \"\"\")
+
+    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)",
+                interactive=True,
+            )
+
+            clear_button = gr.Button("🗑️ Clear All Selections", variant="secondary")
+
+            # Add text display toggle
+            with gr.Row():
+                show_text_checkbox = gr.Checkbox(
+                    label="Show Polygon Text",
+                    value=True,
+                    info="Toggle text display on polygons",
+                )
+
+            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
+            - **Text labels** with customizable colors and sizes
+
+            #### 🖱️ 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
+            6. **Text Toggle**: Show/hide polygon labels
+
+            #### 📝 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
+            - Toggle text display to see labels on polygons
+            \"\"\")
+
+    # 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, polygon_dataframe],
+    )
+
+    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],
+    )
+
+    # Handle text display toggle
+    show_text_checkbox.change(
+        toggle_text_display,
+        inputs=[poly_annotator, show_text_checkbox],
+        outputs=[poly_annotator],
+    )
+
+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, the preprocessed input data sent to the user's function in the backend.
+- **As output:** Should return, the output data received by the component from the user's function in the backend.
+
+ ```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/README.md

@@ -1,6 +1,22 @@
+---
+tags:
+- gradio-custom-component
+- Polygon
+- viewer
+- annotations
+title: gradio_polygonannotator
+short_description: Polygon viewer tool for Gradio
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+emoji: 👀
+sdk_version: 5.46.1
+---
 
 # `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> 
+<a href="https://pypi.org/project/gradio_polygonannotator/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_polygonannotator"></a> <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
 
@@ -16,85 +32,434 @@ pip install gradio_polygonannotator
 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,
+            "id": "complex_header",
+            "coordinates": [
+                [150, 120],
+                [200, 100],
+                [350, 110],
+                [450, 95],
+                [600, 120],
+                [620, 180],
+                [580, 220],
+                [400, 240],
+                [250, 235],
+                [180, 200],
+                [140, 160],
+            ],
+            "color": "#FF0000",
+            "mask_opacity": 0.3,
+            "stroke_width": 1.2,
             "stroke_opacity": 0.8,
+            "selected_mask_opacity": 0.6,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Complex Header",
+            "display_font_size": 14,
+            "display_text_color": "#FFFFFF",
         },
         {
-            "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": "overlapping_ribbon",
+            "coordinates": [
+                [300, 150],
+                [550, 160],
+                [580, 200],
+                [650, 220],
+                [680, 280],
+                [620, 320],
+                [500, 340],
+                [350, 330],
+                [200, 310],
+                [180, 270],
+                [220, 220],
+                [280, 190],
+            ],
+            "color": "#00FF00",
+            "mask_opacity": 0.25,
+            "stroke_width": 1.5,
+            "stroke_opacity": 0.7,
+            "selected_mask_opacity": 0.5,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Overlapping Ribbon",
+            "display_font_size": 14,
+            "display_text_color": "#000000",
         },
         {
-            "id": "paragraph_2",
-            "coordinates": [[100, 650], [750, 650], [750, 950], [100, 950]],
-            "color": "#4ECDC4",
-            "mask_opacity": 0.15,
-            "stroke_width": 0.7,
+            "id": "irregular_content",
+            "coordinates": [
+                [120, 380],
+                [250, 350],
+                [400, 370],
+                [550, 390],
+                [720, 420],
+                [750, 500],
+                [780, 650],
+                [720, 800],
+                [650, 920],
+                [500, 950],
+                [300, 940],
+                [150, 900],
+                [80, 750],
+                [90, 600],
+                [110, 450],
+            ],
+            "color": "#0000FF",
+            "mask_opacity": 0.2,
+            "stroke_width": 0.8,
             "stroke_opacity": 0.6,
+            "selected_mask_opacity": 0.4,
+            "selected_stroke_opacity": 0.9,
+            "display_text": "Irregular Content",
+            "display_font_size": 14,
+            "display_text_color": "#FFFF00",
         },
         {
-            "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,
-        }
-    ]
+            "id": "star_shaped",
+            "coordinates": [
+                [400, 850],
+                [450, 900],
+                [520, 910],
+                [480, 970],
+                [500, 1040],
+                [400, 1000],
+                [300, 1040],
+                [320, 970],
+                [280, 910],
+                [350, 900],
+            ],
+            "color": "#FF00FF",
+            "mask_opacity": 0.35,
+            "stroke_width": 2.0,
+            "stroke_opacity": 0.9,
+            "selected_mask_opacity": 0.7,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Star Shape",
+            "display_font_size": 14,
+            "display_text_color": "#FFFFFF",
+        },
+        {
+            "id": "overlapping_triangle",
+            "coordinates": [
+                [480, 600],
+                [650, 750],
+                [720, 850],
+                [600, 920],
+                [450, 880],
+                [350, 800],
+                [380, 700],
+            ],
+            "color": "#FFAA00",
+            "mask_opacity": 0.28,
+            "stroke_width": 1.8,
+            "stroke_opacity": 0.75,
+            "selected_mask_opacity": 0.55,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Triangle",
+            "display_font_size": 14,
+            "display_text_color": "#000000",
+        },
+    ],
 }
 
-def handle_selection(data, evt: gr.SelectData):
-    """Handle polygon selection and display info"""
+polygon_table = [
+    ["complex_header", "Complex Header", "#FF0000", 0.3, 1.2, 0.8],
+    ["overlapping_ribbon", "Overlapping Ribbon", "#00FF00", 0.25, 1.5, 0.7],
+    ["irregular_content", "Irregular Content", "#0000FF", 0.2, 0.8, 0.6],
+    ["star_shaped", "Star Shape", "#FF00FF", 0.35, 2.0, 0.9],
+    ["overlapping_triangle", "Triangle", "#FFAA00", 0.28, 1.8, 0.75],
+]
+
+
+def process_viewer_selection(data, evt: gr.SelectData):
     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."
+
+        highlighted_table = []
+        for row in polygon_table:
+            if row[0] in selected_ids:
+                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)
+
+        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):
+    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]
+
+        updated_data = example_data.copy()
+        updated_data["selected_polygons"] = [polygon_id]
+
+        highlighted_table = []
+        for i, row in enumerate(polygon_table):
+            if i == evt.index[0]:
+                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)
+
+        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, highlighted_table
+
+    updated_data = example_data.copy()
+    updated_data["selected_polygons"] = []
+    return updated_data, "No polygons selected", polygon_table
+
+
+def clear_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):
+    if not polygon_id or polygon_id.strip() == "":
+        updated_data = example_data.copy()
+        updated_data["selected_polygons"] = []
+        return updated_data, "No polygons selected", polygon_table
+
+    polygon_ids = [id.strip() for id in polygon_id.split(",") if id.strip()]
+    valid_ids = [p["id"] for p in example_data["polygons"]]
+
+    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:
+        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
+
+    updated_data = example_data.copy()
+    updated_data["selected_polygons"] = valid_selected_ids
+
+    highlighted_table = []
+    for row in polygon_table:
+        if row[0] in valid_selected_ids:
+            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)
+
+    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
+
+
+def toggle_text_display(current_data, show_text):
+    if not current_data:
+        return current_data
+
+    updated_data = current_data.copy()
+    updated_data["polygons"] = []
+
+    for polygon in current_data.get("polygons", []):
+        updated_polygon = polygon.copy()
+        if not show_text:
+            updated_polygon["display_font_size"] = 0
+        else:
+            original_polygon = next(
+                (p for p in example_data["polygons"] if p["id"] == polygon["id"]), None
+            )
+            if original_polygon:
+                updated_polygon["display_text"] = original_polygon.get(
+                    "display_text", polygon["id"]
+                )
+                updated_polygon["display_font_size"] = original_polygon.get(
+                    "display_font_size", 14
+                )
+                updated_polygon["display_text_color"] = original_polygon.get(
+                    "display_text_color", "#000000"
+                )
+
+        updated_data["polygons"].append(updated_polygon)
+
+    return updated_data
+
 
 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.
+    # PolygonAnnotator - Advanced Interactive Demo
+
+    ## 🎮 Controls & Hotkeys
+
+    ### Selection
+    - **Click** on polygons or text labels to select/deselect
+    - **Ctrl/Cmd+Click** for multiple selection
+    - **Click dataframe rows** to select polygons
+    - **Enter polygon IDs** manually in the textbox
+
+    ### Navigation
+    - **Mouse Wheel** - Zoom in/out at cursor position
+    - **+/=** - Zoom in (10%)
+    - **-** - Zoom out (10%)
+    - **Ctrl/Cmd+0** - Reset view to original
+    - **Arrow Keys** - Pan view (↑↓←→)
+    - **Middle Mouse / Shift+Drag** - Pan view with mouse
+
+    ### Features
+    - **Clear button** to deselect all
+    - **Toggle text display** checkbox for polygon labels
     """)
 
     with gr.Row():
-        with gr.Column(scale=3):
-            annotator = PolygonAnnotator(
+        with gr.Column(scale=2):
+            poly_annotator = PolygonAnnotator(
                 value=example_data,
-                label="Document with Region Annotations",
+                label="Document with Interactive Polygon 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."
+                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)",
+                interactive=True,
             )
 
+            clear_button = gr.Button("🗑️ Clear All Selections", variant="secondary")
+
+            # Add text display toggle
+            with gr.Row():
+                show_text_checkbox = gr.Checkbox(
+                    label="Show Polygon Text",
+                    value=True,
+                    info="Toggle text display on polygons",
+                )
+
+            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
+            - **Text labels** with customizable colors and sizes
+
+            #### 🖱️ 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
+            6. **Text Toggle**: Show/hide polygon labels
+
+            #### 📝 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
+            - Toggle text display to see labels on polygons
+            """)
+
     # Handle selection events
-    annotator.select(
-        handle_selection,
-        inputs=[annotator],
-        outputs=[selected_info]
+    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, polygon_dataframe],
+    )
+
+    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],
+    )
+
+    # Handle text display toggle
+    show_text_checkbox.change(
+        toggle_text_display,
+        inputs=[poly_annotator, show_text_checkbox],
+        outputs=[poly_annotator],
     )
 
 if __name__ == "__main__":
@@ -126,7 +491,7 @@ 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>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -139,7 +504,7 @@ str | I18nData | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">Component label shown above the annotator.</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -152,7 +517,7 @@ 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>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -165,7 +530,7 @@ 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>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -178,7 +543,7 @@ bool | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">Whether to display the label.</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -191,7 +556,7 @@ bool
 
 </td>
 <td align="left"><code>True</code></td>
-<td align="left">Whether to show image download button.</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -204,7 +569,7 @@ int | str | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">Component height in pixels or CSS units.</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -217,7 +582,7 @@ int | str | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">Component width in pixels or CSS units.</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -230,7 +595,7 @@ bool
 
 </td>
 <td align="left"><code>True</code></td>
-<td align="left">Whether to wrap component in a container with padding.</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -243,7 +608,7 @@ int | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">Relative size compared to adjacent components.</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -256,7 +621,7 @@ int
 
 </td>
 <td align="left"><code>160</code></td>
-<td align="left">Minimum pixel width before wrapping.</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -269,7 +634,7 @@ bool | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">Whether users can interact with polygons (selection/deselection).</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -282,7 +647,7 @@ 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>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -295,7 +660,7 @@ str | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">HTML DOM id for CSS targeting.</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -308,7 +673,7 @@ list[str] | str | None
 
 </td>
 <td align="left"><code>None</code></td>
-<td align="left">HTML DOM classes for CSS targeting.</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -321,7 +686,7 @@ bool
 
 </td>
 <td align="left"><code>True</code></td>
-<td align="left">Whether to render the component immediately.</td>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -334,7 +699,7 @@ 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>
+<td align="left">None</td>
 </tr>
 
 <tr>
@@ -347,7 +712,7 @@ list[str] | str | None
 
 </td>
 <td align="left"><code>"value"</code></td>
-<td align="left">Parameters preserved across re-renders with same key.</td>
+<td align="left">None</td>
 </tr>
 </tbody></table>
 
@@ -372,8 +737,8 @@ The impact on the users predict function varies depending on whether the compone
 
 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.
+- **As output:** Is passed, the preprocessed input data sent to the user's function in the backend.
+- **As input:** Should return, the output data received by the component from the user's function in the backend.
 
  ```python
  def predict(
@@ -381,4 +746,3 @@ The code snippet below is accurate in cases where the component is used as both
  ) -> dict | None:
      return value
  ```
- 

src/backend/gradio_polygonannotator/__init__.py

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

src/backend/gradio_polygonannotator/polygonannotator.py

@@ -18,34 +18,27 @@ if TYPE_CHECKING:
 
 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
+    coordinates: List[List[float]]
+    color: str
+    mask_opacity: Optional[float] = 0.2
+    stroke_width: Optional[float] = 0.7
+    stroke_opacity: Optional[float] = 0.6
+    selected_mask_opacity: Optional[float] = 0.5
+    selected_stroke_opacity: Optional[float] = 1.0
+    display_text: Optional[str] = None
+    display_font_size: Optional[float] = None
+    display_text_color: Optional[str] = "#000000"
 
 
 class PolygonAnnotatorData(GradioModel):
     image: FileData
     polygons: List[Polygon]
-    selected_polygons: Optional[List[str]] = None  # List of IDs of the currently selected polygons
+    selected_polygons: Optional[List[str]] = None
 
 
 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 = [
@@ -79,28 +72,6 @@ class PolygonAnnotator(Component):
         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
@@ -123,13 +94,6 @@ class PolygonAnnotator(Component):
         )
 
     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 {
@@ -143,33 +107,26 @@ class PolygonAnnotator(Component):
                     "stroke_width": p.stroke_width,
                     "stroke_opacity": p.stroke_opacity,
                     "selected_mask_opacity": p.selected_mask_opacity,
-                    "selected_stroke_opacity": p.selected_stroke_opacity
+                    "selected_stroke_opacity": p.selected_stroke_opacity,
+                    "display_text": p.display_text,
+                    "display_font_size": p.display_font_size,
+                    "display_text_color": p.display_text_color,
                 }
                 for p in payload.polygons
             ],
-            "selected_polygons": payload.selected_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(
@@ -177,18 +134,21 @@ class PolygonAnnotator(Component):
                     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
+                    mask_opacity=poly.get("mask_opacity", poly.get("opacity", 0.2)),
                     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)
+                    selected_stroke_opacity=poly.get("selected_stroke_opacity", 1.0),
+                    display_text=poly.get("display_text", None),
+                    display_font_size=poly.get("display_font_size", None),
+                    display_text_color=poly.get("display_text_color", "#000000"),
                 )
             )
 
         return PolygonAnnotatorData(
             image=image_data,
             polygons=polygons,
-            selected_polygons=value.get("selected_polygons")
+            selected_polygons=value.get("selected_polygons"),
         )
 
     def example_payload(self) -> Any:
@@ -203,9 +163,9 @@ class PolygonAnnotator(Component):
                     "color": "#FF0000",
                     "mask_opacity": 0.2,
                     "stroke_width": 0.7,
-                    "stroke_opacity": 0.6
+                    "stroke_opacity": 0.6,
                 }
-            ]
+            ],
         }
 
     def example_value(self) -> Any:
@@ -218,7 +178,7 @@ class PolygonAnnotator(Component):
                     "color": "#FF0000",
                     "mask_opacity": 0.2,
                     "stroke_width": 0.7,
-                    "stroke_opacity": 0.6
+                    "stroke_opacity": 0.6,
                 },
                 {
                     "id": "polygon2",
@@ -226,7 +186,7 @@ class PolygonAnnotator(Component):
                     "color": "#00FF00",
                     "mask_opacity": 0.2,
                     "stroke_width": 1,
-                    "stroke_opacity": 0.8
-                }
-            ]
+                    "stroke_opacity": 0.8,
+                },
+            ],
         }

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

@@ -0,0 +1,2766 @@
+import { q as He, G as ne, t as ie, u as ze, k as oe, M as v, v as le, E as u, e as O, x as S, y as We, z as F, F as b, R as L, H as ue, I as Ve, s as m, S as f, h as B, w as H, J, K as Ne, b as X, B as k, i as U, L 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-jQCzN2ap.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-DbjK-Gvj.js

@@ -0,0 +1,2643 @@
+import { E as d, B, w as m, D as S, J as K, t 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-jQCzN2ap.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 J, d as y, f as He, S as we, a as Ve } from "./SharedSystems-DOa2TyTQ.js";
+class Q {
+  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);
+  }
+}
+Q.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 Je {
+  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 Je(), this.adaptor.init(e, this);
+  }
+}
+he.extension = {
+  type: [d.WebGLSystem],
+  name: "renderTarget"
+};
+function Qe(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 J) {
+        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 Qe(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 J && 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 = [Q, 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-D3ZRw0IF.js

@@ -0,0 +1,1655 @@
+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, l as w, M as k, m as D, n as he, o as pe, p as H, q as z, s as R, A as le, R as fe, e as S } from "./Index-jQCzN2ap.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-DOa2TyTQ.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 = w.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 w.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: R.EMPTY._source,
+        uSampler: R.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 qe extends le {
+  constructor() {
+    const e = {
+      name: "webgpu",
+      type: fe.WEBGPU,
+      systems: ie,
+      renderPipes: ne,
+      renderPipeAdaptors: oe
+    };
+    super(e);
+  }
+}
+export {
+  qe as WebGPURenderer
+};

src/backend/gradio_polygonannotator/templates/component/browserAll-DD82MfdK.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-jQCzN2ap.js";
+import "./webworkerAll-BVEtD__r.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/index.js

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

src/demo/app.py

@@ -1,85 +1,434 @@
 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,
+            "id": "complex_header",
+            "coordinates": [
+                [150, 120],
+                [200, 100],
+                [350, 110],
+                [450, 95],
+                [600, 120],
+                [620, 180],
+                [580, 220],
+                [400, 240],
+                [250, 235],
+                [180, 200],
+                [140, 160],
+            ],
+            "color": "#FF0000",
+            "mask_opacity": 0.3,
+            "stroke_width": 1.2,
             "stroke_opacity": 0.8,
+            "selected_mask_opacity": 0.6,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Complex Header",
+            "display_font_size": 14,
+            "display_text_color": "#FFFFFF",
         },
         {
-            "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": "overlapping_ribbon",
+            "coordinates": [
+                [300, 150],
+                [550, 160],
+                [580, 200],
+                [650, 220],
+                [680, 280],
+                [620, 320],
+                [500, 340],
+                [350, 330],
+                [200, 310],
+                [180, 270],
+                [220, 220],
+                [280, 190],
+            ],
+            "color": "#00FF00",
+            "mask_opacity": 0.25,
+            "stroke_width": 1.5,
+            "stroke_opacity": 0.7,
+            "selected_mask_opacity": 0.5,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Overlapping Ribbon",
+            "display_font_size": 14,
+            "display_text_color": "#000000",
         },
         {
-            "id": "paragraph_2",
-            "coordinates": [[100, 650], [750, 650], [750, 950], [100, 950]],
-            "color": "#4ECDC4",
-            "mask_opacity": 0.15,
-            "stroke_width": 0.7,
+            "id": "irregular_content",
+            "coordinates": [
+                [120, 380],
+                [250, 350],
+                [400, 370],
+                [550, 390],
+                [720, 420],
+                [750, 500],
+                [780, 650],
+                [720, 800],
+                [650, 920],
+                [500, 950],
+                [300, 940],
+                [150, 900],
+                [80, 750],
+                [90, 600],
+                [110, 450],
+            ],
+            "color": "#0000FF",
+            "mask_opacity": 0.2,
+            "stroke_width": 0.8,
             "stroke_opacity": 0.6,
+            "selected_mask_opacity": 0.4,
+            "selected_stroke_opacity": 0.9,
+            "display_text": "Irregular Content",
+            "display_font_size": 14,
+            "display_text_color": "#FFFF00",
         },
         {
-            "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,
-        }
-    ]
+            "id": "star_shaped",
+            "coordinates": [
+                [400, 850],
+                [450, 900],
+                [520, 910],
+                [480, 970],
+                [500, 1040],
+                [400, 1000],
+                [300, 1040],
+                [320, 970],
+                [280, 910],
+                [350, 900],
+            ],
+            "color": "#FF00FF",
+            "mask_opacity": 0.35,
+            "stroke_width": 2.0,
+            "stroke_opacity": 0.9,
+            "selected_mask_opacity": 0.7,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Star Shape",
+            "display_font_size": 14,
+            "display_text_color": "#FFFFFF",
+        },
+        {
+            "id": "overlapping_triangle",
+            "coordinates": [
+                [480, 600],
+                [650, 750],
+                [720, 850],
+                [600, 920],
+                [450, 880],
+                [350, 800],
+                [380, 700],
+            ],
+            "color": "#FFAA00",
+            "mask_opacity": 0.28,
+            "stroke_width": 1.8,
+            "stroke_opacity": 0.75,
+            "selected_mask_opacity": 0.55,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Triangle",
+            "display_font_size": 14,
+            "display_text_color": "#000000",
+        },
+    ],
 }
 
-def handle_selection(data, evt: gr.SelectData):
-    """Handle polygon selection and display info"""
+polygon_table = [
+    ["complex_header", "Complex Header", "#FF0000", 0.3, 1.2, 0.8],
+    ["overlapping_ribbon", "Overlapping Ribbon", "#00FF00", 0.25, 1.5, 0.7],
+    ["irregular_content", "Irregular Content", "#0000FF", 0.2, 0.8, 0.6],
+    ["star_shaped", "Star Shape", "#FF00FF", 0.35, 2.0, 0.9],
+    ["overlapping_triangle", "Triangle", "#FFAA00", 0.28, 1.8, 0.75],
+]
+
+
+def process_viewer_selection(data, evt: gr.SelectData):
     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."
+
+        highlighted_table = []
+        for row in polygon_table:
+            if row[0] in selected_ids:
+                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)
+
+        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):
+    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]
+
+        updated_data = example_data.copy()
+        updated_data["selected_polygons"] = [polygon_id]
+
+        highlighted_table = []
+        for i, row in enumerate(polygon_table):
+            if i == evt.index[0]:
+                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)
+
+        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, highlighted_table
+
+    updated_data = example_data.copy()
+    updated_data["selected_polygons"] = []
+    return updated_data, "No polygons selected", polygon_table
+
+
+def clear_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):
+    if not polygon_id or polygon_id.strip() == "":
+        updated_data = example_data.copy()
+        updated_data["selected_polygons"] = []
+        return updated_data, "No polygons selected", polygon_table
+
+    polygon_ids = [id.strip() for id in polygon_id.split(",") if id.strip()]
+    valid_ids = [p["id"] for p in example_data["polygons"]]
+
+    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:
+        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
+
+    updated_data = example_data.copy()
+    updated_data["selected_polygons"] = valid_selected_ids
+
+    highlighted_table = []
+    for row in polygon_table:
+        if row[0] in valid_selected_ids:
+            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)
+
+    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
+
+
+def toggle_text_display(current_data, show_text):
+    if not current_data:
+        return current_data
+
+    updated_data = current_data.copy()
+    updated_data["polygons"] = []
+
+    for polygon in current_data.get("polygons", []):
+        updated_polygon = polygon.copy()
+        if not show_text:
+            updated_polygon["display_font_size"] = 0
+        else:
+            original_polygon = next(
+                (p for p in example_data["polygons"] if p["id"] == polygon["id"]), None
+            )
+            if original_polygon:
+                updated_polygon["display_text"] = original_polygon.get(
+                    "display_text", polygon["id"]
+                )
+                updated_polygon["display_font_size"] = original_polygon.get(
+                    "display_font_size", 14
+                )
+                updated_polygon["display_text_color"] = original_polygon.get(
+                    "display_text_color", "#000000"
+                )
+
+        updated_data["polygons"].append(updated_polygon)
+
+    return updated_data
+
 
 with gr.Blocks() as demo:
     gr.Markdown("""
-    # PolygonAnnotator - Interactive Polygon Selection
+    # PolygonAnnotator - Advanced Interactive Demo
+
+    ## 🎮 Controls & Hotkeys
+
+    ### Selection
+    - **Click** on polygons or text labels to select/deselect
+    - **Ctrl/Cmd+Click** for multiple selection
+    - **Click dataframe rows** to select polygons
+    - **Enter polygon IDs** manually in the textbox
+
+    ### Navigation
+    - **Mouse Wheel** - Zoom in/out at cursor position
+    - **+/=** - Zoom in (10%)
+    - **-** - Zoom out (10%)
+    - **Ctrl/Cmd+0** - Reset view to original
+    - **Arrow Keys** - Pan view (↑↓←→)
+    - **Middle Mouse / Shift+Drag** - Pan view with mouse
 
-    Click on polygons to select them. Use **Ctrl/Cmd+Click** for multiple selections.
-    Click selected polygons to deselect.
+    ### Features
+    - **Clear button** to deselect all
+    - **Toggle text display** checkbox for polygon labels
     """)
 
     with gr.Row():
-        with gr.Column(scale=3):
-            annotator = PolygonAnnotator(
+        with gr.Column(scale=2):
+            poly_annotator = PolygonAnnotator(
                 value=example_data,
-                label="Document with Region Annotations",
+                label="Document with Interactive Polygon 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."
+                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)",
+                interactive=True,
+            )
+
+            clear_button = gr.Button("🗑️ Clear All Selections", variant="secondary")
+
+            # Add text display toggle
+            with gr.Row():
+                show_text_checkbox = gr.Checkbox(
+                    label="Show Polygon Text",
+                    value=True,
+                    info="Toggle text display on polygons",
+                )
+
+            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
+            - **Text labels** with customizable colors and sizes
+
+            #### 🖱️ 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
+            6. **Text Toggle**: Show/hide polygon labels
+
+            #### 📝 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
+            - Toggle text display to see labels on polygons
+            """)
+
     # Handle selection events
-    annotator.select(
-        handle_selection,
-        inputs=[annotator],
-        outputs=[selected_info]
+    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, polygon_dataframe],
+    )
+
+    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],
+    )
+
+    # Handle text display toggle
+    show_text_checkbox.change(
+        toggle_text_display,
+        inputs=[poly_annotator, show_text_checkbox],
+        outputs=[poly_annotator],
     )
 
 if __name__ == "__main__":

src/demo/space.py

@@ -3,7 +3,7 @@ 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': []}}}
+_docs = {'PolygonAnnotator': {'description': 'Interactive polygon annotation component for visualizing and selecting polygon regions on images.', 'members': {'__init__': {'value': {'type': 'dict | None', 'default': 'None', 'description': None}, 'label': {'type': 'str | I18nData | None', 'default': 'None', 'description': None}, 'every': {'type': 'Timer | float | None', 'default': 'None', 'description': None}, 'inputs': {'type': 'Component | Sequence[Component] | set[Component] | None', 'default': 'None', 'description': None}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': None}, 'show_download_button': {'type': 'bool', 'default': 'True', 'description': None}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': None}, 'container': {'type': 'bool', 'default': 'True', 'description': None}, 'scale': {'type': 'int | None', 'default': 'None', 'description': None}, 'min_width': {'type': 'int', 'default': '160', 'description': None}, 'interactive': {'type': 'bool | None', 'default': 'None', 'description': None}, 'visible': {'type': 'bool | Literal["hidden"]', 'default': 'True', 'description': None}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': None}, 'render': {'type': 'bool', 'default': 'True', 'description': None}, 'key': {'type': 'int | str | tuple[int | str, ...] | None', 'default': 'None', 'description': None}, 'preserved_by_key': {'type': 'list[str] | str | None', 'default': '"value"', 'description': None}}, 'postprocess': {'value': {'type': 'dict | None', 'description': "The output data received by the component from the user's function in the backend."}}, 'preprocess': {'return': {'type': 'dict | None', 'description': "The preprocessed input data sent to the user's function in the backend."}, '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")
 
@@ -21,7 +21,7 @@ with gr.Blocks(
 # `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> 
+<a href="https://pypi.org/project/gradio_polygonannotator/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_polygonannotator"></a> <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
@@ -41,85 +41,434 @@ pip install gradio_polygonannotator
 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,
+            "id": "complex_header",
+            "coordinates": [
+                [150, 120],
+                [200, 100],
+                [350, 110],
+                [450, 95],
+                [600, 120],
+                [620, 180],
+                [580, 220],
+                [400, 240],
+                [250, 235],
+                [180, 200],
+                [140, 160],
+            ],
+            "color": "#FF0000",
+            "mask_opacity": 0.3,
+            "stroke_width": 1.2,
             "stroke_opacity": 0.8,
+            "selected_mask_opacity": 0.6,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Complex Header",
+            "display_font_size": 14,
+            "display_text_color": "#FFFFFF",
         },
         {
-            "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": "overlapping_ribbon",
+            "coordinates": [
+                [300, 150],
+                [550, 160],
+                [580, 200],
+                [650, 220],
+                [680, 280],
+                [620, 320],
+                [500, 340],
+                [350, 330],
+                [200, 310],
+                [180, 270],
+                [220, 220],
+                [280, 190],
+            ],
+            "color": "#00FF00",
+            "mask_opacity": 0.25,
+            "stroke_width": 1.5,
+            "stroke_opacity": 0.7,
+            "selected_mask_opacity": 0.5,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Overlapping Ribbon",
+            "display_font_size": 14,
+            "display_text_color": "#000000",
         },
         {
-            "id": "paragraph_2",
-            "coordinates": [[100, 650], [750, 650], [750, 950], [100, 950]],
-            "color": "#4ECDC4",
-            "mask_opacity": 0.15,
-            "stroke_width": 0.7,
+            "id": "irregular_content",
+            "coordinates": [
+                [120, 380],
+                [250, 350],
+                [400, 370],
+                [550, 390],
+                [720, 420],
+                [750, 500],
+                [780, 650],
+                [720, 800],
+                [650, 920],
+                [500, 950],
+                [300, 940],
+                [150, 900],
+                [80, 750],
+                [90, 600],
+                [110, 450],
+            ],
+            "color": "#0000FF",
+            "mask_opacity": 0.2,
+            "stroke_width": 0.8,
             "stroke_opacity": 0.6,
+            "selected_mask_opacity": 0.4,
+            "selected_stroke_opacity": 0.9,
+            "display_text": "Irregular Content",
+            "display_font_size": 14,
+            "display_text_color": "#FFFF00",
         },
         {
-            "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,
-        }
-    ]
+            "id": "star_shaped",
+            "coordinates": [
+                [400, 850],
+                [450, 900],
+                [520, 910],
+                [480, 970],
+                [500, 1040],
+                [400, 1000],
+                [300, 1040],
+                [320, 970],
+                [280, 910],
+                [350, 900],
+            ],
+            "color": "#FF00FF",
+            "mask_opacity": 0.35,
+            "stroke_width": 2.0,
+            "stroke_opacity": 0.9,
+            "selected_mask_opacity": 0.7,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Star Shape",
+            "display_font_size": 14,
+            "display_text_color": "#FFFFFF",
+        },
+        {
+            "id": "overlapping_triangle",
+            "coordinates": [
+                [480, 600],
+                [650, 750],
+                [720, 850],
+                [600, 920],
+                [450, 880],
+                [350, 800],
+                [380, 700],
+            ],
+            "color": "#FFAA00",
+            "mask_opacity": 0.28,
+            "stroke_width": 1.8,
+            "stroke_opacity": 0.75,
+            "selected_mask_opacity": 0.55,
+            "selected_stroke_opacity": 1.0,
+            "display_text": "Triangle",
+            "display_font_size": 14,
+            "display_text_color": "#000000",
+        },
+    ],
 }
 
-def handle_selection(data, evt: gr.SelectData):
-    \"\"\"Handle polygon selection and display info\"\"\"
+polygon_table = [
+    ["complex_header", "Complex Header", "#FF0000", 0.3, 1.2, 0.8],
+    ["overlapping_ribbon", "Overlapping Ribbon", "#00FF00", 0.25, 1.5, 0.7],
+    ["irregular_content", "Irregular Content", "#0000FF", 0.2, 0.8, 0.6],
+    ["star_shaped", "Star Shape", "#FF00FF", 0.35, 2.0, 0.9],
+    ["overlapping_triangle", "Triangle", "#FFAA00", 0.28, 1.8, 0.75],
+]
+
+
+def process_viewer_selection(data, evt: gr.SelectData):
     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."
+
+        highlighted_table = []
+        for row in polygon_table:
+            if row[0] in selected_ids:
+                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)
+
+        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):
+    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]
+
+        updated_data = example_data.copy()
+        updated_data["selected_polygons"] = [polygon_id]
+
+        highlighted_table = []
+        for i, row in enumerate(polygon_table):
+            if i == evt.index[0]:
+                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)
+
+        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, highlighted_table
+
+    updated_data = example_data.copy()
+    updated_data["selected_polygons"] = []
+    return updated_data, "No polygons selected", polygon_table
+
+
+def clear_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):
+    if not polygon_id or polygon_id.strip() == "":
+        updated_data = example_data.copy()
+        updated_data["selected_polygons"] = []
+        return updated_data, "No polygons selected", polygon_table
+
+    polygon_ids = [id.strip() for id in polygon_id.split(",") if id.strip()]
+    valid_ids = [p["id"] for p in example_data["polygons"]]
+
+    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:
+        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
+
+    updated_data = example_data.copy()
+    updated_data["selected_polygons"] = valid_selected_ids
+
+    highlighted_table = []
+    for row in polygon_table:
+        if row[0] in valid_selected_ids:
+            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)
+
+    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
+
+
+def toggle_text_display(current_data, show_text):
+    if not current_data:
+        return current_data
+
+    updated_data = current_data.copy()
+    updated_data["polygons"] = []
+
+    for polygon in current_data.get("polygons", []):
+        updated_polygon = polygon.copy()
+        if not show_text:
+            updated_polygon["display_font_size"] = 0
+        else:
+            original_polygon = next(
+                (p for p in example_data["polygons"] if p["id"] == polygon["id"]), None
+            )
+            if original_polygon:
+                updated_polygon["display_text"] = original_polygon.get(
+                    "display_text", polygon["id"]
+                )
+                updated_polygon["display_font_size"] = original_polygon.get(
+                    "display_font_size", 14
+                )
+                updated_polygon["display_text_color"] = original_polygon.get(
+                    "display_text_color", "#000000"
+                )
+
+        updated_data["polygons"].append(updated_polygon)
+
+    return updated_data
+
 
 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.
+    # PolygonAnnotator - Advanced Interactive Demo
+
+    ## 🎮 Controls & Hotkeys
+
+    ### Selection
+    - **Click** on polygons or text labels to select/deselect
+    - **Ctrl/Cmd+Click** for multiple selection
+    - **Click dataframe rows** to select polygons
+    - **Enter polygon IDs** manually in the textbox
+
+    ### Navigation
+    - **Mouse Wheel** - Zoom in/out at cursor position
+    - **+/=** - Zoom in (10%)
+    - **-** - Zoom out (10%)
+    - **Ctrl/Cmd+0** - Reset view to original
+    - **Arrow Keys** - Pan view (↑↓←→)
+    - **Middle Mouse / Shift+Drag** - Pan view with mouse
+
+    ### Features
+    - **Clear button** to deselect all
+    - **Toggle text display** checkbox for polygon labels
     \"\"\")
 
     with gr.Row():
-        with gr.Column(scale=3):
-            annotator = PolygonAnnotator(
+        with gr.Column(scale=2):
+            poly_annotator = PolygonAnnotator(
                 value=example_data,
-                label="Document with Region Annotations",
+                label="Document with Interactive Polygon 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."
+                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)",
+                interactive=True,
             )
 
+            clear_button = gr.Button("🗑️ Clear All Selections", variant="secondary")
+
+            # Add text display toggle
+            with gr.Row():
+                show_text_checkbox = gr.Checkbox(
+                    label="Show Polygon Text",
+                    value=True,
+                    info="Toggle text display on polygons",
+                )
+
+            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
+            - **Text labels** with customizable colors and sizes
+
+            #### 🖱️ 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
+            6. **Text Toggle**: Show/hide polygon labels
+
+            #### 📝 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
+            - Toggle text display to see labels on polygons
+            \"\"\")
+
     # Handle selection events
-    annotator.select(
-        handle_selection,
-        inputs=[annotator],
-        outputs=[selected_info]
+    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, polygon_dataframe],
+    )
+
+    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],
+    )
+
+    # Handle text display toggle
+    show_text_checkbox.change(
+        toggle_text_display,
+        inputs=[poly_annotator, show_text_checkbox],
+        outputs=[poly_annotator],
     )
 
 if __name__ == "__main__":
@@ -155,8 +504,8 @@ The impact on the users predict function varies depending on whether the compone
 
 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.
+- **As input:** Is passed, the preprocessed input data sent to the user's function in the backend.
+- **As output:** Should return, the output data received by the component from the user's function in the backend.
 
  ```python
 def predict(

src/frontend/Index.svelte

@@ -2,7 +2,15 @@
 
 <script lang="ts">
     import { onMount, onDestroy, tick } from "svelte";
-    import * as PIXI from "pixi.js";
+    import {
+        Application,
+        Container,
+        Graphics,
+        Text,
+        Sprite,
+        Texture,
+        TextStyle,
+    } from "pixi.js";
     import type { Gradio } from "@gradio/utils";
     import { Block, BlockLabel } from "@gradio/atoms";
     import { Image as ImageIcon } from "@gradio/icons";
@@ -24,6 +32,9 @@
             stroke_opacity?: number;
             selected_mask_opacity?: number;
             selected_stroke_opacity?: number;
+            display_text?: string | null;
+            display_font_size?: number | null;
+            display_text_color?: string;
         }>;
         selected_polygons?: string[] | null;
     } | null = null;
@@ -46,10 +57,20 @@
     }>;
 
     let canvasContainer: HTMLDivElement;
-    let app: PIXI.Application;
-    let imageSprite: PIXI.Sprite | null = null;
-    let polygonGraphics: Map<string, PIXI.Graphics> = new Map();
+    let app: Application;
+    let imageSprite: Sprite | null = null;
+    let polygonGraphics: Map<string, Graphics> = new Map();
+    let polygonTexts: Map<string, Text> = new Map();
+    let textContainer: Container | null = null;
     let selectedPolygonIds: string[] = [];
+    let viewportContainer: Container | null = null;
+    let isDragging = false;
+    let lastPointerPosition = { x: 0, y: 0 };
+    let initialScale = 1;
+    let initialPosition = { x: 0, y: 0 };
+    let minScale = 0.5;
+    let maxScale = 3;
+
     type ImageRect = {
         left: number;
         top: number;
@@ -60,6 +81,7 @@
         naturalWidth: number;
         naturalHeight: number;
     };
+
     let imageRect: ImageRect = {
         left: 0,
         top: 0,
@@ -94,20 +116,81 @@
 
             graphics.clear();
             if (newSelectedIds.includes(polygonId)) {
-                drawPolygonPath(graphics, polygon, imageSprite!, selectedMaskAlpha, strokeWidth, selectedStrokeAlpha);
+                drawPolygonPath(
+                    graphics,
+                    polygon,
+                    selectedMaskAlpha,
+                    strokeWidth,
+                    selectedStrokeAlpha,
+                );
             } else {
-                drawPolygonPath(graphics, polygon, imageSprite!, originalMaskAlpha, strokeWidth, originalStrokeAlpha);
+                drawPolygonPath(
+                    graphics,
+                    polygon,
+                    originalMaskAlpha,
+                    strokeWidth,
+                    originalStrokeAlpha,
+                );
             }
         });
     }
 
+    function handlePolygonSelection(polygonId: string, event: any) {
+        if (!value) return;
+
+        const isMultiSelect = event.ctrlKey || event.metaKey;
+
+        if (selectedPolygonIds.includes(polygonId)) {
+            const newSelectedIds = selectedPolygonIds.filter(
+                (id) => id !== polygonId,
+            );
+            updateSelection(newSelectedIds);
+            selectedPolygonIds = newSelectedIds;
+
+            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;
+        }
+
+        let newSelectedIds: string[];
+        if (isMultiSelect) {
+            newSelectedIds = [...selectedPolygonIds, polygonId];
+        } else {
+            newSelectedIds = [polygonId];
+        }
+
+        updateSelection(newSelectedIds);
+        selectedPolygonIds = newSelectedIds;
+
+        gradio.dispatch("select", {
+            index: value.polygons.findIndex(
+                (p) => p.id === polygonId,
+            ),
+            value: newSelectedIds,
+        });
+    }
+
     async function initPixiApp() {
         if (!canvasContainer) return;
 
         const containerWidth = canvasContainer.clientWidth || 800;
         const containerHeight = canvasContainer.clientHeight || 600;
 
-        app = new PIXI.Application();
+        app = new Application();
         await app.init({
             width: containerWidth,
             height: containerHeight,
@@ -121,13 +204,171 @@
 
         app.stage.eventMode = "static";
         app.stage.hitArea = app.screen;
+
+        viewportContainer = new Container();
+        viewportContainer.eventMode = "static";
+        app.stage.addChild(viewportContainer);
+
+        setupControls();
+    }
+
+    function setupControls() {
+        if (!app || !viewportContainer) return;
+
+        window.addEventListener("keydown", handleKeydown);
+
+        app.stage.on("pointerdown", (event) => {
+            if (event.button === 1 || (event.button === 0 && event.shiftKey)) {
+                isDragging = true;
+                lastPointerPosition = { x: event.global.x, y: event.global.y };
+                app.canvas.style.cursor = "grabbing";
+            }
+        });
+
+        app.stage.on("pointermove", (event) => {
+            if (isDragging && viewportContainer) {
+                const dx = event.global.x - lastPointerPosition.x;
+                const dy = event.global.y - lastPointerPosition.y;
+
+                viewportContainer.x += dx;
+                viewportContainer.y += dy;
+
+                lastPointerPosition = { x: event.global.x, y: event.global.y };
+            }
+        });
+
+        app.stage.on("pointerup", () => {
+            isDragging = false;
+            app.canvas.style.cursor = "default";
+        });
+
+        app.stage.on("pointerupoutside", () => {
+            isDragging = false;
+            app.canvas.style.cursor = "default";
+        });
+
+        app.canvas.addEventListener("wheel", handleWheel, { passive: false });
+    }
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (!viewportContainer) return;
+
+        switch(event.key) {
+            case "=":
+            case "+":
+                zoomIn();
+                event.preventDefault();
+                break;
+            case "-":
+            case "_":
+                zoomOut();
+                event.preventDefault();
+                break;
+            case "0":
+                if (event.ctrlKey || event.metaKey) {
+                    resetView();
+                    event.preventDefault();
+                }
+                break;
+            case "ArrowLeft":
+                viewportContainer!.x += 20;
+                event.preventDefault();
+                break;
+            case "ArrowRight":
+                viewportContainer!.x -= 20;
+                event.preventDefault();
+                break;
+            case "ArrowUp":
+                viewportContainer!.y += 20;
+                event.preventDefault();
+                break;
+            case "ArrowDown":
+                viewportContainer!.y -= 20;
+                event.preventDefault();
+                break;
+        }
+    }
+
+    function handleWheel(event: WheelEvent) {
+        if (!viewportContainer || !app) return;
+
+        event.preventDefault();
+
+        const delta = event.deltaY < 0 ? 1.05 : 0.95;
+        const newScale = viewportContainer!.scale.x * delta;
+
+        if (newScale >= minScale && newScale <= maxScale) {
+            const worldPos = {
+                x: (event.offsetX - viewportContainer!.x) / viewportContainer!.scale.x,
+                y: (event.offsetY - viewportContainer!.y) / viewportContainer!.scale.y,
+            };
+
+            viewportContainer!.scale.x = newScale;
+            viewportContainer!.scale.y = newScale;
+
+            viewportContainer!.x = event.offsetX - worldPos.x * newScale;
+            viewportContainer!.y = event.offsetY - worldPos.y * newScale;
+        }
+    }
+
+    function zoomIn() {
+        if (!viewportContainer || !app) return;
+
+        const newScale = Math.min(viewportContainer!.scale.x * 1.1, maxScale);
+        const center = { x: app.screen.width / 2, y: app.screen.height / 2 };
+
+        const worldPos = {
+            x: (center.x - viewportContainer!.x) / viewportContainer!.scale.x,
+            y: (center.y - viewportContainer!.y) / viewportContainer!.scale.y,
+        };
+
+        viewportContainer!.scale.x = newScale;
+        viewportContainer!.scale.y = newScale;
+
+        viewportContainer!.x = center.x - worldPos.x * newScale;
+        viewportContainer!.y = center.y - worldPos.y * newScale;
+    }
+
+    function zoomOut() {
+        if (!viewportContainer || !app) return;
+
+        const newScale = Math.max(viewportContainer!.scale.x * 0.9, minScale);
+        const center = { x: app.screen.width / 2, y: app.screen.height / 2 };
+
+        const worldPos = {
+            x: (center.x - viewportContainer!.x) / viewportContainer!.scale.x,
+            y: (center.y - viewportContainer!.y) / viewportContainer!.scale.y,
+        };
+
+        viewportContainer!.scale.x = newScale;
+        viewportContainer!.scale.y = newScale;
+
+        viewportContainer!.x = center.x - worldPos.x * newScale;
+        viewportContainer!.y = center.y - worldPos.y * newScale;
+    }
+
+    function resetView() {
+        if (!viewportContainer) return;
+
+        viewportContainer!.scale.x = initialScale;
+        viewportContainer!.scale.y = initialScale;
+        viewportContainer!.x = initialPosition.x;
+        viewportContainer!.y = initialPosition.y;
     }
 
     async function renderAnnotations() {
-        if (!app || !value) return;
+        if (!app || !value || !viewportContainer) return;
 
-        app.stage.removeChildren();
+        viewportContainer!.removeChildren();
         polygonGraphics.clear();
+        polygonTexts.forEach((text) => text.destroy());
+        polygonTexts.clear();
+
+        textContainer = new Container();
+        textContainer.zIndex = 1000;
+        viewportContainer!.sortableChildren = true;
+        viewportContainer!.addChild(textContainer);
+
         if (value.image) {
             let imageUrl = "";
 
@@ -157,8 +398,8 @@
                     );
 
                     const loadedImage = await imageLoadPromise;
-                    const texture = PIXI.Texture.from(loadedImage);
-                    imageSprite = new PIXI.Sprite(texture);
+                    const texture = Texture.from(loadedImage);
+                    imageSprite = new Sprite(texture);
 
                     const scaleX = app.screen.width / texture.width;
                     const scaleY = app.screen.height / texture.height;
@@ -183,9 +424,16 @@
                         naturalHeight: texture.height,
                     };
 
-                    app.stage.addChild(imageSprite);
+                    viewportContainer!.addChild(imageSprite);
+
+                    initialScale = 1;
+                    initialPosition.x = 0;
+                    initialPosition.y = 0;
+                    viewportContainer!.scale.x = 1;
+                    viewportContainer!.scale.y = 1;
+                    viewportContainer!.x = 0;
+                    viewportContainer!.y = 0;
                 } catch (error) {
-                    console.error("Failed to load image:", error);
                     return;
                 }
             }
@@ -193,7 +441,7 @@
 
         if (value.polygons && value.polygons.length > 0 && imageSprite) {
             value.polygons.forEach((polygon) => {
-                const graphics = new PIXI.Graphics();
+                const graphics = new Graphics();
 
                 let color = 0xff0000;
                 try {
@@ -202,36 +450,32 @@
                         color = parseInt(colorStr, 16);
                     }
                 } catch (e) {
-                    console.error("Error parsing color:", e);
+                    color = 0xff0000;
                 }
 
                 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 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)
+                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 });
+                    drawPolygonPath(
+                        graphics,
+                        polygon,
+                        initialMaskAlpha,
+                        strokeWidth,
+                        initialStrokeAlpha,
+                    );
                 }
 
                 graphics.eventMode = "static";
@@ -239,7 +483,10 @@
 
                 const originalMaskAlpha = polygonMaskOpacity;
                 const hoverMaskAlpha = Math.min(polygonMaskOpacity + 0.1, 1.0);
-                const hoverStrokeAlpha = Math.min(polygonStrokeOpacity + 0.2, 1.0);
+                const hoverStrokeAlpha = Math.min(
+                    polygonStrokeOpacity + 0.2,
+                    1.0,
+                );
 
                 graphics.on("pointerover", () => {
                     if (!selectedPolygonIds.includes(polygon.id)) {
@@ -247,7 +494,6 @@
                         drawPolygonPath(
                             graphics,
                             polygon,
-                            imageSprite!,
                             hoverMaskAlpha,
                             strokeWidth,
                             hoverStrokeAlpha,
@@ -261,7 +507,6 @@
                         drawPolygonPath(
                             graphics,
                             polygon,
-                            imageSprite!,
                             originalMaskAlpha,
                             strokeWidth,
                             polygonStrokeOpacity,
@@ -270,75 +515,75 @@
                 });
 
                 graphics.on("pointerdown", (event) => {
-                    // Check if Ctrl/Cmd key is held for multi-selection
-                    const isMultiSelect = event.ctrlKey || event.metaKey;
+                    handlePolygonSelection(polygon.id, event);
+                });
 
-                    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;
-                    }
+                viewportContainer!.addChild(graphics);
+                polygonGraphics.set(polygon.id, graphics);
 
-                    // Select polygon
-                    let newSelectedIds: string[];
-                    if (isMultiSelect) {
-                        // Add to existing selection
-                        newSelectedIds = [...selectedPolygonIds, polygon.id];
-                    } else {
-                        // Replace selection
-                        newSelectedIds = [polygon.id];
-                    }
+                if (polygon.display_text && polygon.display_font_size && polygon.display_font_size > 0) {
+                    const text = createPolygonText(polygon);
+                    const center = calculatePolygonCenter(polygon.coordinates);
+
+                    text.anchor.set(0.5, 0.5);
+                    text.x = center.x;
+                    text.y = center.y;
 
-                    updateSelection(newSelectedIds);
-                    selectedPolygonIds = newSelectedIds;
+                    text.eventMode = "static";
+                    text.cursor = "pointer";
 
-                    // Dispatch select event to Gradio
-                    gradio.dispatch("select", {
-                        index: value.polygons.findIndex(
-                            (p) => p.id === polygon.id,
-                        ),
-                        value: newSelectedIds,
+                    text.on("pointerdown", (event) => {
+                        handlePolygonSelection(polygon.id, event);
                     });
-                });
 
-                app.stage.addChild(graphics);
-                polygonGraphics.set(polygon.id, graphics);
+                    textContainer!.addChild(text);
+                    polygonTexts.set(polygon.id, text);
+                }
             });
         }
     }
 
+    function createPolygonText(polygon: any): Text {
+        const style = new TextStyle({
+            fontSize: polygon.display_font_size || 14,
+            fill: polygon.display_text_color || "#000000",
+            fontWeight: "bold",
+            align: "center"
+        });
+
+        return new Text({
+            text: polygon.display_text,
+            style: style
+        });
+    }
+
+    function calculatePolygonCenter(coordinates: number[][]): { x: number; y: number } {
+        const displayCoords = coordinates.map((coord) => [
+            (coord[0] / (imageRect.naturalWidth - 1)) * imageRect.width + imageRect.left,
+            (coord[1] / (imageRect.naturalHeight - 1)) * imageRect.height + imageRect.top,
+        ]);
+
+        let centerX = 0;
+        let centerY = 0;
+        displayCoords.forEach((coord) => {
+            centerX += coord[0];
+            centerY += coord[1];
+        });
+
+        return {
+            x: centerX / displayCoords.length,
+            y: centerY / displayCoords.length
+        };
+    }
+
     function drawPolygonPath(
-        graphics: PIXI.Graphics,
+        graphics: 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)) *
@@ -357,13 +602,16 @@
                     color = parseInt(colorStr, 16);
                 }
             } catch (e) {
-                console.error("Error parsing color in drawPolygonPath:", e);
+                color = 0xff0000;
             }
 
-            // Use Pixi.js 8 drawing API
             graphics.poly(displayCoords.flat());
             graphics.fill({ color: color, alpha: maskAlpha });
-            graphics.stroke({ width: strokeWidth, color: color, alpha: strokeAlpha });
+            graphics.stroke({
+                width: strokeWidth,
+                color: color,
+                alpha: strokeAlpha,
+            });
         }
     }
 
@@ -377,11 +625,12 @@
 
     onDestroy(() => {
         if (app) {
+            app.canvas.removeEventListener("wheel", handleWheel);
+            window.removeEventListener("keydown", handleKeydown);
             app.destroy(true, { children: true, texture: true });
         }
     });
 
-    // Handle canvas resize
     async function handleResize() {
         if (!canvasContainer || !app) return;
 
@@ -390,7 +639,6 @@
 
         if (newWidth !== app.screen.width || newHeight !== app.screen.height) {
             app.renderer.resize(newWidth, newHeight);
-            // Re-render annotations with updated canvas dimensions
             await renderAnnotations();
         }
     }

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_polygonannotator"
-version = "0.1.0"
+version = "0.2.0"
 description = "Interactive polygon annotation component for Gradio with multi-selection, hover effects, and customizable appearance"
 readme = "README.md"
 license = "Apache-2.0"