Upload folder using huggingface_hub

README.md

@@ -36,9 +36,9 @@ The **PropertySheet** component for Gradio allows you to automatically generate
 - **Theme-Aware**: Designed to look and feel native in all Gradio themes.
 - **Dynamic Updates**: Supports advanced patterns where changing one field (e.g., a model selector) can dynamically update the options of another field (e.g., a sampler dropdown).
 
-
 ## Installation
 
+
 ```bash
 pip install gradio_propertysheet
 ```
@@ -47,183 +47,117 @@ pip install gradio_propertysheet
 
 ```python
 import os
-from pathlib import Path
+import json
 import gradio as gr
 from dataclasses import dataclass, field, asdict
 from typing import Literal
 from gradio_propertysheet import PropertySheet
-from gradio_headinjector import HeadInjector
-
+from gradio_htmlinjector import HTMLInjector
 
-# --- 1. Dataclass Definitions ---
-
-# Dataclasses for the Original Sidebar Demo
+# --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
 class ModelSettings:
-    """Settings for loading models, VAEs, etc."""
     model_type: Literal["SD 1.5", "SDXL", "Pony", "Custom"] = field(default="SDXL", metadata={"component": "dropdown", "label": "Base Model"})
     custom_model_path: str = field(default="/path/to/default.safetensors", metadata={"label": "Custom Model Path", "interactive_if": {"field": "model_type", "value": "Custom"}})
     vae_path: str = field(default="", metadata={"label": "VAE Path (optional)"})
-
 @dataclass
 class SamplingSettings:
-    """Settings for the image sampling process."""
     sampler_name: Literal["Euler", "Euler a", "DPM++ 2M Karras", "UniPC"] = field(default="DPM++ 2M Karras", metadata={"component": "dropdown", "label": "Sampler"})
     steps: int = field(default=25, metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1})
     cfg_scale: float = field(default=7.0, metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5})
-
 @dataclass
 class RenderConfig:
-    """Main configuration object for rendering, grouping all settings."""
     seed: int = field(default=-1, metadata={"component": "number_integer", "label": "Seed (-1 for random)"})
     model: ModelSettings = field(default_factory=ModelSettings)
     sampling: SamplingSettings = field(default_factory=SamplingSettings)
-
 @dataclass
 class Lighting:
-    """Lighting settings for the environment."""
     sun_intensity: float = field(default=1.0, metadata={"component": "slider", "minimum": 0, "maximum": 5, "step": 0.1})
     color: str = field(default="#FFDDBB", metadata={"component": "colorpicker", "label": "Sun Color"})
-
 @dataclass
 class EnvironmentConfig:
-    """Main configuration for the environment."""
     background: Literal["Sky", "Color", "Image"] = field(default="Sky", metadata={"component": "dropdown"})
     lighting: Lighting = field(default_factory=Lighting)
-
-# Dataclasses for the Flyout Demo
 @dataclass
 class EulerSettings:
-    """Settings specific to the Euler sampler."""
     s_churn: float = field(default=0.0, metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01})
-
 @dataclass
 class DPM_Settings:
-    """Settings specific to DPM samplers."""
     karras_style: bool = field(default=True, metadata={"label": "Use Karras Sigma Schedule"})
 
-# --- 2. Data Mappings and Initial Instances ---
-
-# Data for Original Sidebar Demo
+# --- 2. Data Mappings and Initial Instances (unchanged) ---
 initial_render_config = RenderConfig()
 initial_env_config = EnvironmentConfig()
-
-# Data for Flyout Demo
 sampler_settings_map_py = {"Euler": EulerSettings(), "DPM++ 2M Karras": DPM_Settings(), "UniPC": None}
 model_settings_map_py = {"SDXL 1.0": DPM_Settings(), "Stable Diffusion 1.5": EulerSettings(), "Pony": None}
 
-# --- 3. CSS & JS Injection function ---
-
+# --- 3. CSS & JS Injection function (unchanged) ---
 def inject_assets():
     """
-    This function prepares the payload of CSS and JS code. It's called by the
-    demo.load() event listener when the Gradio app starts.
+    This function prepares the payload of CSS, JS, and Body HTML for injection.
     """
-    # Inline code
+    popup_html = """<div id="injected_flyout_container" class="flyout-sheet" style="display: none;"></div>"""
     css_code = ""
     js_code = ""
-
-    # Read from files
+    
     try:
-        with open("custom.css", "r", encoding="utf-8") as f:
+        with open("custom.css", "r", encoding="utf-8") as f: 
             css_code += f.read() + "\n"
-        with open("custom.js", "r", encoding="utf-8") as f:
+        with open("custom.js", "r", encoding="utf-8") as f: 
             js_code += f.read() + "\n"
     except FileNotFoundError as e:
         print(f"Warning: Could not read asset file: {e}")
-
-    return {"js": js_code, "css": css_code}
-
+    return {"js": js_code, "css": css_code, "body_html": popup_html}
 
 # --- 4. Gradio App Build ---
 with gr.Blocks(title="PropertySheet Demos") as demo:
-    head_injector = HeadInjector()
+    html_injector = HTMLInjector()
     gr.Markdown("# PropertySheet Component Demos")
     
+    with gr.Row():
+        # --- Flyout popup ---
+        with gr.Column(elem_id="flyout_panel_source", elem_classes=["flyout-source-hidden"]) as flyout_panel_source:
+            close_btn = gr.Button("×", elem_classes=["flyout-close-btn"])
+            flyout_sheet = PropertySheet(visible=True, container=False, label="Settings", show_group_name_only_one=False, disable_accordion=True)
+            
     with gr.Tabs():
-        with gr.TabItem("Original Sidebar Demo"):
+        with gr.TabItem("Original Sidebar Demo"):           
             gr.Markdown("An example of using the `PropertySheet` component as a traditional sidebar for settings.")
-            
             render_state = gr.State(value=initial_render_config)
             env_state = gr.State(value=initial_env_config)
             sidebar_visible = gr.State(False)
-            
             with gr.Row():
                 with gr.Column(scale=3):            
                     generate = gr.Button("Show Settings", variant="primary")
                     with gr.Row():
                         output_render_json = gr.JSON(label="Live Render State")
                         output_env_json = gr.JSON(label="Live Environment State")
-
                 with gr.Column(scale=1):
-                    render_sheet = PropertySheet(
-                        value=initial_render_config,
-                        label="Render Settings",
-                        width=400,
-                        height=550,
-                        visible=False,
-                        root_label="Generator"       
-                    )
-                    environment_sheet = PropertySheet(
-                        value=initial_env_config,
-                        label="Environment Settings",
-                        width=400,
-                        open=False,
-                        visible=False,
-                        root_label="General"              
-                    )
-
+                    render_sheet = PropertySheet(value=initial_render_config, label="Render Settings", width=400, height=550, visible=False, root_label="Generator")
+                    environment_sheet = PropertySheet(value=initial_env_config, label="Environment Settings", width=400, open=False, visible=False, root_label="General")
             def change_visibility(is_visible, render_cfg, env_cfg):
                 new_visibility = not is_visible
                 button_text = "Hide Settings" if new_visibility else "Show Settings"
-                return (
-                    new_visibility,
-                    gr.update(visible=new_visibility, value=render_cfg),
-                    gr.update(visible=new_visibility, value=env_cfg),
-                    gr.update(value=button_text)
-                )
-            
+                return (new_visibility, gr.update(visible=new_visibility, value=render_cfg), gr.update(visible=new_visibility, value=env_cfg), gr.update(value=button_text))
             def handle_render_change(updated_config: RenderConfig, current_state: RenderConfig):
-                if updated_config is None:
-                    return current_state, asdict(current_state), current_state
-                if updated_config.model.model_type != "Custom":
-                    updated_config.model.custom_model_path = "/path/to/default.safetensors"
+                if updated_config is None: return current_state, asdict(current_state), current_state
+                if updated_config.model.model_type != "Custom": updated_config.model.custom_model_path = "/path/to/default.safetensors"
                 return updated_config, asdict(updated_config), updated_config
-
             def handle_env_change(updated_config: EnvironmentConfig, current_state: EnvironmentConfig):
-                if updated_config is None:
-                    return current_state, asdict(current_state), current_state
+                if updated_config is None: return current_state, asdict(current_state), current_state
                 return updated_config, asdict(updated_config), current_state
-
-            generate.click(
-                fn=change_visibility,
-                inputs=[sidebar_visible, render_state, env_state],
-                outputs=[sidebar_visible, render_sheet, environment_sheet, generate]
-            )
-            
-            render_sheet.change(
-                fn=handle_render_change,
-                inputs=[render_sheet, render_state],
-                outputs=[render_sheet, output_render_json, render_state]
-            )
-            
-            environment_sheet.change(
-                fn=handle_env_change,
-                inputs=[environment_sheet, env_state],
-                outputs=[environment_sheet, output_env_json, env_state]
-            )
-           
-            demo.load(
-                fn=lambda r_cfg, e_cfg: (asdict(r_cfg), asdict(e_cfg)),
-                inputs=[render_state, env_state],
-                outputs=[output_render_json, output_env_json]
-            )
+            generate.click(fn=change_visibility, inputs=[sidebar_visible, render_state, env_state], outputs=[sidebar_visible, render_sheet, environment_sheet, generate])
+            render_sheet.change(fn=handle_render_change, inputs=[render_sheet, render_state], outputs=[render_sheet, output_render_json, render_state])
+            environment_sheet.change(fn=handle_env_change, inputs=[environment_sheet, env_state], outputs=[environment_sheet, output_env_json, env_state])
+            demo.load(fn=lambda r_cfg, e_cfg: (asdict(r_cfg), asdict(e_cfg)), inputs=[render_state, env_state], outputs=[output_render_json, output_env_json])
 
         with gr.TabItem("Flyout Popup Demo"):
             gr.Markdown("An example of attaching a `PropertySheet` as a flyout panel to other components.")
             
+            # --- State Management ---
             flyout_visible = gr.State(False)
             active_anchor_id = gr.State(None)
+            js_data_bridge = gr.Textbox(visible=False, elem_id="js_data_bridge")
 
             with gr.Column(elem_classes=["flyout-context-area"]):
                 with gr.Row(elem_classes=["fake-input-container", "no-border-dropdown"]):
@@ -234,54 +168,60 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
                     model_dd = gr.Dropdown(choices=list(model_settings_map_py.keys()), label="Model", value="SDXL 1.0", elem_id="model_dd", scale=10)
                     model_ear_btn = gr.Button("⚙️", elem_id="model_ear_btn", scale=1, elem_classes=["integrated-ear-btn"])
 
-                with gr.Column(visible=False, elem_id="flyout_panel", elem_classes=["flyout-sheet"]) as flyout_panel:
-                    with gr.Row(elem_classes=["close-btn-row"]):
-                        close_btn = gr.Button("×", elem_classes=["flyout-close-btn"])
-                    flyout_sheet = PropertySheet(visible=False, container=False, label="Settings", show_group_name_only_one=False, disable_accordion=True)
+              
 
+            # --- Event Logic ---
             def handle_flyout_toggle(is_vis, current_anchor, clicked_dropdown_id, settings_obj):
                 if is_vis and current_anchor == clicked_dropdown_id:
-                    return False, None, gr.update(visible=False), gr.update(visible=False, value=None)
+                    js_data = json.dumps({"isVisible": False, "anchorId": None})
+                    return False, None, gr.update(), gr.update(value=js_data)
                 else:
-                    return True, clicked_dropdown_id, gr.update(visible=True), gr.update(visible=True, value=settings_obj)
+                    js_data = json.dumps({"isVisible": True, "anchorId": clicked_dropdown_id})
+                    return True, clicked_dropdown_id, gr.update(value=settings_obj), gr.update(value=js_data)
 
             def update_ear_visibility(selection, settings_map):
                 has_settings = settings_map.get(selection) is not None
                 return gr.update(visible=has_settings)
 
             def on_flyout_change(updated_settings, active_id, sampler_val, model_val):
-                if updated_settings is None or active_id is None: return
+                if updated_settings is None or active_id is None: 
+                    return
                 if active_id == sampler_dd.elem_id:
                     sampler_settings_map_py[sampler_val] = updated_settings
                 elif active_id == model_dd.elem_id:
                     model_settings_map_py[model_val] = updated_settings
             
             def close_the_flyout():
-                return False, None, gr.update(visible=False), gr.update(visible=False, value=None)
+                js_data = json.dumps({"isVisible": False, "anchorId": None})
+                return False, None, gr.update(value=js_data)
+            
+            js_update_flyout = "(jsonData) => { update_flyout_from_state(jsonData); }"
                 
             sampler_dd.change(
                 fn=lambda sel: update_ear_visibility(sel, sampler_settings_map_py),
                 inputs=[sampler_dd],
                 outputs=[sampler_ear_btn]
-            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet])
+            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
             
             sampler_ear_btn.click(
                 fn=lambda is_vis, anchor, sel: handle_flyout_toggle(is_vis, anchor, sampler_dd.elem_id, sampler_settings_map_py.get(sel)),
                 inputs=[flyout_visible, active_anchor_id, sampler_dd],
-                outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet]
-            ).then(fn=None, inputs=None, outputs=None, js=f"() => position_flyout('{sampler_dd.elem_id}')")
+                outputs=[flyout_visible, active_anchor_id, flyout_sheet, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
 
             model_dd.change(
                 fn=lambda sel: update_ear_visibility(sel, model_settings_map_py),
                 inputs=[model_dd],
                 outputs=[model_ear_btn]
-            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet])
+            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
             
             model_ear_btn.click(
                 fn=lambda is_vis, anchor, sel: handle_flyout_toggle(is_vis, anchor, model_dd.elem_id, model_settings_map_py.get(sel)),
                 inputs=[flyout_visible, active_anchor_id, model_dd],
-                outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet]
-            ).then(fn=None, inputs=None, outputs=None, js=f"() => position_flyout('{model_dd.elem_id}')")
+                outputs=[flyout_visible, active_anchor_id, flyout_sheet, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
             
             flyout_sheet.change(
                 fn=on_flyout_change,
@@ -292,16 +232,24 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
             close_btn.click(
                 fn=close_the_flyout,
                 inputs=None,
-                outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet]
-            )
+                outputs=[flyout_visible, active_anchor_id, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
 
             def initial_flyout_setup(sampler_val, model_val):
                 return {
                     sampler_ear_btn: update_ear_visibility(sampler_val, sampler_settings_map_py),
                     model_ear_btn: update_ear_visibility(model_val, model_settings_map_py)
-                }            
-            demo.load(fn=inject_assets, inputs=None, outputs=[head_injector]
-                    ).then(fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn])
+                }
+            
+            # --- App Load ---
+            demo.load(
+                fn=inject_assets, inputs=None, outputs=[html_injector]
+            ).then(
+                fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn]
+            ).then(
+                fn=None, inputs=None, outputs=None,
+                js="() => { setTimeout(reparent_flyout, 200); }"
+            )
             
 if __name__ == "__main__":
     demo.launch()

app.py

@@ -1,181 +1,115 @@
 import os
-from pathlib import Path
+import json
 import gradio as gr
 from dataclasses import dataclass, field, asdict
 from typing import Literal
 from gradio_propertysheet import PropertySheet
-from gradio_headinjector import HeadInjector
+from gradio_htmlinjector import HTMLInjector
 
-
-# --- 1. Dataclass Definitions ---
-
-# Dataclasses for the Original Sidebar Demo
+# --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
 class ModelSettings:
-    """Settings for loading models, VAEs, etc."""
     model_type: Literal["SD 1.5", "SDXL", "Pony", "Custom"] = field(default="SDXL", metadata={"component": "dropdown", "label": "Base Model"})
     custom_model_path: str = field(default="/path/to/default.safetensors", metadata={"label": "Custom Model Path", "interactive_if": {"field": "model_type", "value": "Custom"}})
     vae_path: str = field(default="", metadata={"label": "VAE Path (optional)"})
-
 @dataclass
 class SamplingSettings:
-    """Settings for the image sampling process."""
     sampler_name: Literal["Euler", "Euler a", "DPM++ 2M Karras", "UniPC"] = field(default="DPM++ 2M Karras", metadata={"component": "dropdown", "label": "Sampler"})
     steps: int = field(default=25, metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1})
     cfg_scale: float = field(default=7.0, metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5})
-
 @dataclass
 class RenderConfig:
-    """Main configuration object for rendering, grouping all settings."""
     seed: int = field(default=-1, metadata={"component": "number_integer", "label": "Seed (-1 for random)"})
     model: ModelSettings = field(default_factory=ModelSettings)
     sampling: SamplingSettings = field(default_factory=SamplingSettings)
-
 @dataclass
 class Lighting:
-    """Lighting settings for the environment."""
     sun_intensity: float = field(default=1.0, metadata={"component": "slider", "minimum": 0, "maximum": 5, "step": 0.1})
     color: str = field(default="#FFDDBB", metadata={"component": "colorpicker", "label": "Sun Color"})
-
 @dataclass
 class EnvironmentConfig:
-    """Main configuration for the environment."""
     background: Literal["Sky", "Color", "Image"] = field(default="Sky", metadata={"component": "dropdown"})
     lighting: Lighting = field(default_factory=Lighting)
-
-# Dataclasses for the Flyout Demo
 @dataclass
 class EulerSettings:
-    """Settings specific to the Euler sampler."""
     s_churn: float = field(default=0.0, metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01})
-
 @dataclass
 class DPM_Settings:
-    """Settings specific to DPM samplers."""
     karras_style: bool = field(default=True, metadata={"label": "Use Karras Sigma Schedule"})
 
-# --- 2. Data Mappings and Initial Instances ---
-
-# Data for Original Sidebar Demo
+# --- 2. Data Mappings and Initial Instances (unchanged) ---
 initial_render_config = RenderConfig()
 initial_env_config = EnvironmentConfig()
-
-# Data for Flyout Demo
 sampler_settings_map_py = {"Euler": EulerSettings(), "DPM++ 2M Karras": DPM_Settings(), "UniPC": None}
 model_settings_map_py = {"SDXL 1.0": DPM_Settings(), "Stable Diffusion 1.5": EulerSettings(), "Pony": None}
 
-# --- 3. CSS & JS Injection function ---
-
+# --- 3. CSS & JS Injection function (unchanged) ---
 def inject_assets():
     """
-    This function prepares the payload of CSS and JS code. It's called by the
-    demo.load() event listener when the Gradio app starts.
+    This function prepares the payload of CSS, JS, and Body HTML for injection.
     """
-    # Inline code
+    popup_html = """<div id="injected_flyout_container" class="flyout-sheet" style="display: none;"></div>"""
     css_code = ""
     js_code = ""
-
-    # Read from files
+    
     try:
-        with open("custom.css", "r", encoding="utf-8") as f:
+        with open("custom.css", "r", encoding="utf-8") as f: 
             css_code += f.read() + "\n"
-        with open("custom.js", "r", encoding="utf-8") as f:
+        with open("custom.js", "r", encoding="utf-8") as f: 
             js_code += f.read() + "\n"
     except FileNotFoundError as e:
         print(f"Warning: Could not read asset file: {e}")
-
-    return {"js": js_code, "css": css_code}
-
+    return {"js": js_code, "css": css_code, "body_html": popup_html}
 
 # --- 4. Gradio App Build ---
 with gr.Blocks(title="PropertySheet Demos") as demo:
-    head_injector = HeadInjector()
+    html_injector = HTMLInjector()
     gr.Markdown("# PropertySheet Component Demos")
     
+    with gr.Row():
+        # --- Flyout popup ---
+        with gr.Column(elem_id="flyout_panel_source", elem_classes=["flyout-source-hidden"]) as flyout_panel_source:
+            close_btn = gr.Button("×", elem_classes=["flyout-close-btn"])
+            flyout_sheet = PropertySheet(visible=True, container=False, label="Settings", show_group_name_only_one=False, disable_accordion=True)
+            
     with gr.Tabs():
-        with gr.TabItem("Original Sidebar Demo"):
+        with gr.TabItem("Original Sidebar Demo"):           
             gr.Markdown("An example of using the `PropertySheet` component as a traditional sidebar for settings.")
-            
             render_state = gr.State(value=initial_render_config)
             env_state = gr.State(value=initial_env_config)
             sidebar_visible = gr.State(False)
-            
             with gr.Row():
                 with gr.Column(scale=3):            
                     generate = gr.Button("Show Settings", variant="primary")
                     with gr.Row():
                         output_render_json = gr.JSON(label="Live Render State")
                         output_env_json = gr.JSON(label="Live Environment State")
-
                 with gr.Column(scale=1):
-                    render_sheet = PropertySheet(
-                        value=initial_render_config,
-                        label="Render Settings",
-                        width=400,
-                        height=550,
-                        visible=False,
-                        root_label="Generator"       
-                    )
-                    environment_sheet = PropertySheet(
-                        value=initial_env_config,
-                        label="Environment Settings",
-                        width=400,
-                        open=False,
-                        visible=False,
-                        root_label="General"              
-                    )
-
+                    render_sheet = PropertySheet(value=initial_render_config, label="Render Settings", width=400, height=550, visible=False, root_label="Generator")
+                    environment_sheet = PropertySheet(value=initial_env_config, label="Environment Settings", width=400, open=False, visible=False, root_label="General")
             def change_visibility(is_visible, render_cfg, env_cfg):
                 new_visibility = not is_visible
                 button_text = "Hide Settings" if new_visibility else "Show Settings"
-                return (
-                    new_visibility,
-                    gr.update(visible=new_visibility, value=render_cfg),
-                    gr.update(visible=new_visibility, value=env_cfg),
-                    gr.update(value=button_text)
-                )
-            
+                return (new_visibility, gr.update(visible=new_visibility, value=render_cfg), gr.update(visible=new_visibility, value=env_cfg), gr.update(value=button_text))
             def handle_render_change(updated_config: RenderConfig, current_state: RenderConfig):
-                if updated_config is None:
-                    return current_state, asdict(current_state), current_state
-                if updated_config.model.model_type != "Custom":
-                    updated_config.model.custom_model_path = "/path/to/default.safetensors"
+                if updated_config is None: return current_state, asdict(current_state), current_state
+                if updated_config.model.model_type != "Custom": updated_config.model.custom_model_path = "/path/to/default.safetensors"
                 return updated_config, asdict(updated_config), updated_config
-
             def handle_env_change(updated_config: EnvironmentConfig, current_state: EnvironmentConfig):
-                if updated_config is None:
-                    return current_state, asdict(current_state), current_state
+                if updated_config is None: return current_state, asdict(current_state), current_state
                 return updated_config, asdict(updated_config), current_state
-
-            generate.click(
-                fn=change_visibility,
-                inputs=[sidebar_visible, render_state, env_state],
-                outputs=[sidebar_visible, render_sheet, environment_sheet, generate]
-            )
-            
-            render_sheet.change(
-                fn=handle_render_change,
-                inputs=[render_sheet, render_state],
-                outputs=[render_sheet, output_render_json, render_state]
-            )
-            
-            environment_sheet.change(
-                fn=handle_env_change,
-                inputs=[environment_sheet, env_state],
-                outputs=[environment_sheet, output_env_json, env_state]
-            )
-           
-            demo.load(
-                fn=lambda r_cfg, e_cfg: (asdict(r_cfg), asdict(e_cfg)),
-                inputs=[render_state, env_state],
-                outputs=[output_render_json, output_env_json]
-            )
+            generate.click(fn=change_visibility, inputs=[sidebar_visible, render_state, env_state], outputs=[sidebar_visible, render_sheet, environment_sheet, generate])
+            render_sheet.change(fn=handle_render_change, inputs=[render_sheet, render_state], outputs=[render_sheet, output_render_json, render_state])
+            environment_sheet.change(fn=handle_env_change, inputs=[environment_sheet, env_state], outputs=[environment_sheet, output_env_json, env_state])
+            demo.load(fn=lambda r_cfg, e_cfg: (asdict(r_cfg), asdict(e_cfg)), inputs=[render_state, env_state], outputs=[output_render_json, output_env_json])
 
         with gr.TabItem("Flyout Popup Demo"):
             gr.Markdown("An example of attaching a `PropertySheet` as a flyout panel to other components.")
             
+            # --- State Management ---
             flyout_visible = gr.State(False)
             active_anchor_id = gr.State(None)
+            js_data_bridge = gr.Textbox(visible=False, elem_id="js_data_bridge")
 
             with gr.Column(elem_classes=["flyout-context-area"]):
                 with gr.Row(elem_classes=["fake-input-container", "no-border-dropdown"]):
@@ -186,54 +120,60 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
                     model_dd = gr.Dropdown(choices=list(model_settings_map_py.keys()), label="Model", value="SDXL 1.0", elem_id="model_dd", scale=10)
                     model_ear_btn = gr.Button("⚙️", elem_id="model_ear_btn", scale=1, elem_classes=["integrated-ear-btn"])
 
-                with gr.Column(visible=False, elem_id="flyout_panel", elem_classes=["flyout-sheet"]) as flyout_panel:
-                    with gr.Row(elem_classes=["close-btn-row"]):
-                        close_btn = gr.Button("×", elem_classes=["flyout-close-btn"])
-                    flyout_sheet = PropertySheet(visible=False, container=False, label="Settings", show_group_name_only_one=False, disable_accordion=True)
+              
 
+            # --- Event Logic ---
             def handle_flyout_toggle(is_vis, current_anchor, clicked_dropdown_id, settings_obj):
                 if is_vis and current_anchor == clicked_dropdown_id:
-                    return False, None, gr.update(visible=False), gr.update(visible=False, value=None)
+                    js_data = json.dumps({"isVisible": False, "anchorId": None})
+                    return False, None, gr.update(), gr.update(value=js_data)
                 else:
-                    return True, clicked_dropdown_id, gr.update(visible=True), gr.update(visible=True, value=settings_obj)
+                    js_data = json.dumps({"isVisible": True, "anchorId": clicked_dropdown_id})
+                    return True, clicked_dropdown_id, gr.update(value=settings_obj), gr.update(value=js_data)
 
             def update_ear_visibility(selection, settings_map):
                 has_settings = settings_map.get(selection) is not None
                 return gr.update(visible=has_settings)
 
             def on_flyout_change(updated_settings, active_id, sampler_val, model_val):
-                if updated_settings is None or active_id is None: return
+                if updated_settings is None or active_id is None: 
+                    return
                 if active_id == sampler_dd.elem_id:
                     sampler_settings_map_py[sampler_val] = updated_settings
                 elif active_id == model_dd.elem_id:
                     model_settings_map_py[model_val] = updated_settings
             
             def close_the_flyout():
-                return False, None, gr.update(visible=False), gr.update(visible=False, value=None)
+                js_data = json.dumps({"isVisible": False, "anchorId": None})
+                return False, None, gr.update(value=js_data)
+            
+            js_update_flyout = "(jsonData) => { update_flyout_from_state(jsonData); }"
                 
             sampler_dd.change(
                 fn=lambda sel: update_ear_visibility(sel, sampler_settings_map_py),
                 inputs=[sampler_dd],
                 outputs=[sampler_ear_btn]
-            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet])
+            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
             
             sampler_ear_btn.click(
                 fn=lambda is_vis, anchor, sel: handle_flyout_toggle(is_vis, anchor, sampler_dd.elem_id, sampler_settings_map_py.get(sel)),
                 inputs=[flyout_visible, active_anchor_id, sampler_dd],
-                outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet]
-            ).then(fn=None, inputs=None, outputs=None, js=f"() => position_flyout('{sampler_dd.elem_id}')")
+                outputs=[flyout_visible, active_anchor_id, flyout_sheet, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
 
             model_dd.change(
                 fn=lambda sel: update_ear_visibility(sel, model_settings_map_py),
                 inputs=[model_dd],
                 outputs=[model_ear_btn]
-            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet])
+            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
             
             model_ear_btn.click(
                 fn=lambda is_vis, anchor, sel: handle_flyout_toggle(is_vis, anchor, model_dd.elem_id, model_settings_map_py.get(sel)),
                 inputs=[flyout_visible, active_anchor_id, model_dd],
-                outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet]
-            ).then(fn=None, inputs=None, outputs=None, js=f"() => position_flyout('{model_dd.elem_id}')")
+                outputs=[flyout_visible, active_anchor_id, flyout_sheet, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
             
             flyout_sheet.change(
                 fn=on_flyout_change,
@@ -244,16 +184,24 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
             close_btn.click(
                 fn=close_the_flyout,
                 inputs=None,
-                outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet]
-            )
+                outputs=[flyout_visible, active_anchor_id, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
 
             def initial_flyout_setup(sampler_val, model_val):
                 return {
                     sampler_ear_btn: update_ear_visibility(sampler_val, sampler_settings_map_py),
                     model_ear_btn: update_ear_visibility(model_val, model_settings_map_py)
-                }            
-            demo.load(fn=inject_assets, inputs=None, outputs=[head_injector]
-                    ).then(fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn])
+                }
+            
+            # --- App Load ---
+            demo.load(
+                fn=inject_assets, inputs=None, outputs=[html_injector]
+            ).then(
+                fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn]
+            ).then(
+                fn=None, inputs=None, outputs=None,
+                js="() => { setTimeout(reparent_flyout, 200); }"
+            )
             
 if __name__ == "__main__":
     demo.launch()

custom.css

@@ -1,12 +1,12 @@
-.flyout-context-area {    
-    position: relative !important;    
-    overflow: visible !important; 
+.flyout-context-area {
+    position: relative !important;
+    overflow: visible !important;
 }
 
-.flyout-sheet {    
-    position: absolute !important;
+.flyout-sheet {
+    position: fixed !important;
     flex-grow: 0 !important;
-    min-width: unset !important;    
+    min-width: unset !important;
     width: 350px !important;
     align-self: center !important;
     z-index: 1000;
@@ -20,7 +20,7 @@
 .fake-input-container {
     border: var(--input-border-width) solid var(--border-color-primary);
     border-radius: var(--input-radius);
-    background: var(--input-background-fill);
+    background: var(--block-background-fill) !important;
     padding: 0 !important;
     align-items: stretch !important;
     box-shadow: var(--input-shadow);
@@ -77,4 +77,8 @@
 
 .flyout-close-btn button:hover {
     color: var(--body-text-color) !important;
+}
+
+.flyout-source-hidden {
+    display: none !important;
 }

custom.js

@@ -1,20 +1,69 @@
-function position_flyout(anchorId)  {{
-    setTimeout(() => {{
-        const anchorRow = document.getElementById(anchorId).closest('.fake-input-container');
-        const flyoutElem = document.getElementById('flyout_panel');
+function reparent_flyout() {
+    //console.log("Attempting to reparent flyout...");
+    const source = document.getElementById('flyout_panel_source');
+    const target = document.getElementById('injected_flyout_container');
+    
+    if (source && target) {
+        while (source.firstChild) {
+            target.appendChild(source.firstChild);
+        }
+        source.remove();
+        //console.log("SUCCESS: Flyout panel has been reparented.");
+    } else {
+        console.error("ERROR: Reparenting failed. Source or target element not found.");
+    }
+}
+
+function position_flyout(anchorId) {
+    if (!anchorId) {
+         return; 
+    }
+    
+    const anchorElem = document.getElementById(anchorId);
+    const flyoutElem = document.getElementById('injected_flyout_container');
+    
+    if (anchorElem && flyoutElem) {
+        //console.log("JS: Positioning flyout relative to:", anchorId);
+        const anchorRect = anchorElem.getBoundingClientRect();
+        const flyoutWidth = flyoutElem.offsetWidth;
+        const flyoutHeight = flyoutElem.offsetHeight;
+
+        let topPosition = anchorRect.top + (anchorRect.height / 2) - (flyoutHeight / 2);
+        let leftPosition = anchorRect.left + (anchorRect.width / 2) - (flyoutWidth / 2);
         
-        if (anchorRow && flyoutElem && flyoutElem.style.display !== 'none') {{
-            const anchorRect = anchorRow.getBoundingClientRect();
-            const containerRect = anchorRow.closest('.flyout-context-area').getBoundingClientRect();
-            
-            const flyoutWidth = flyoutElem.offsetWidth;
-            const flyoutHeight = flyoutElem.offsetHeight;
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        if (leftPosition < 8) leftPosition = 8;
+        if (topPosition < 8) topPosition = 8;
+        if (leftPosition + flyoutWidth > windowWidth) leftPosition = windowWidth - flyoutWidth - 8;
+        if (topPosition + flyoutHeight > windowHeight) topPosition = windowHeight - flyoutHeight - 8;
+
+        flyoutElem.style.top = `${topPosition}px`;
+        flyoutElem.style.left = `${leftPosition}px`;
+    }
+}
+
+// This is the new main function called by Gradio's .then() event
+function update_flyout_from_state(jsonData) {
+    //console.log("JS: update_flyout_from_state() called with data:", jsonData);
+    
+    if (!jsonData) return;
+ 
+    const state = JSON.parse(jsonData);
+    const { isVisible, anchorId } = state;
+    const flyout = document.getElementById('injected_flyout_container');
+
+    if (!flyout) {
+        console.error("ERROR: Cannot update UI. Flyout container not found.");
+        return;
+    }
 
-            const topPosition = (anchorRect.top - containerRect.top) + (anchorRect.height / 2) - (flyoutHeight / 2);
-            const leftPosition = (anchorRect.left - containerRect.left) + (anchorRect.width / 2) - (flyoutWidth / 2);
+    //console.log("JS: Parsed state:", { isVisible, anchorId });
 
-            flyoutElem.style.top = `${{topPosition}}px`;
-            flyoutElem.style.left = `${{leftPosition}}px`;
-        }}
-    }}, 50);
-}};
+    if (isVisible) {
+        flyout.style.display = 'flex';
+        position_flyout(anchorId);
+    } else {
+        flyout.style.display = 'none';
+    }
+}

requirements.txt

@@ -1,2 +1,2 @@
 gradio_propertysheet
-gradio_headinjector==0.0.3
+gradio_htmlinjector

space.py

@@ -39,183 +39,117 @@ pip install gradio_propertysheet
 
 ```python
 import os
-from pathlib import Path
+import json
 import gradio as gr
 from dataclasses import dataclass, field, asdict
 from typing import Literal
 from gradio_propertysheet import PropertySheet
-from gradio_headinjector import HeadInjector
+from gradio_htmlinjector import HTMLInjector
 
-
-# --- 1. Dataclass Definitions ---
-
-# Dataclasses for the Original Sidebar Demo
+# --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
 class ModelSettings:
-    \"\"\"Settings for loading models, VAEs, etc.\"\"\"
     model_type: Literal["SD 1.5", "SDXL", "Pony", "Custom"] = field(default="SDXL", metadata={"component": "dropdown", "label": "Base Model"})
     custom_model_path: str = field(default="/path/to/default.safetensors", metadata={"label": "Custom Model Path", "interactive_if": {"field": "model_type", "value": "Custom"}})
     vae_path: str = field(default="", metadata={"label": "VAE Path (optional)"})
-
 @dataclass
 class SamplingSettings:
-    \"\"\"Settings for the image sampling process.\"\"\"
     sampler_name: Literal["Euler", "Euler a", "DPM++ 2M Karras", "UniPC"] = field(default="DPM++ 2M Karras", metadata={"component": "dropdown", "label": "Sampler"})
     steps: int = field(default=25, metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1})
     cfg_scale: float = field(default=7.0, metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5})
-
 @dataclass
 class RenderConfig:
-    \"\"\"Main configuration object for rendering, grouping all settings.\"\"\"
     seed: int = field(default=-1, metadata={"component": "number_integer", "label": "Seed (-1 for random)"})
     model: ModelSettings = field(default_factory=ModelSettings)
     sampling: SamplingSettings = field(default_factory=SamplingSettings)
-
 @dataclass
 class Lighting:
-    \"\"\"Lighting settings for the environment.\"\"\"
     sun_intensity: float = field(default=1.0, metadata={"component": "slider", "minimum": 0, "maximum": 5, "step": 0.1})
     color: str = field(default="#FFDDBB", metadata={"component": "colorpicker", "label": "Sun Color"})
-
 @dataclass
 class EnvironmentConfig:
-    \"\"\"Main configuration for the environment.\"\"\"
     background: Literal["Sky", "Color", "Image"] = field(default="Sky", metadata={"component": "dropdown"})
     lighting: Lighting = field(default_factory=Lighting)
-
-# Dataclasses for the Flyout Demo
 @dataclass
 class EulerSettings:
-    \"\"\"Settings specific to the Euler sampler.\"\"\"
     s_churn: float = field(default=0.0, metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01})
-
 @dataclass
 class DPM_Settings:
-    \"\"\"Settings specific to DPM samplers.\"\"\"
     karras_style: bool = field(default=True, metadata={"label": "Use Karras Sigma Schedule"})
 
-# --- 2. Data Mappings and Initial Instances ---
-
-# Data for Original Sidebar Demo
+# --- 2. Data Mappings and Initial Instances (unchanged) ---
 initial_render_config = RenderConfig()
 initial_env_config = EnvironmentConfig()
-
-# Data for Flyout Demo
 sampler_settings_map_py = {"Euler": EulerSettings(), "DPM++ 2M Karras": DPM_Settings(), "UniPC": None}
 model_settings_map_py = {"SDXL 1.0": DPM_Settings(), "Stable Diffusion 1.5": EulerSettings(), "Pony": None}
 
-# --- 3. CSS & JS Injection function ---
-
+# --- 3. CSS & JS Injection function (unchanged) ---
 def inject_assets():
     \"\"\"
-    This function prepares the payload of CSS and JS code. It's called by the
-    demo.load() event listener when the Gradio app starts.
+    This function prepares the payload of CSS, JS, and Body HTML for injection.
     \"\"\"
-    # Inline code
+    popup_html = \"\"\"<div id="injected_flyout_container" class="flyout-sheet" style="display: none;"></div>\"\"\"
     css_code = ""
     js_code = ""
-
-    # Read from files
+    
     try:
-        with open("custom.css", "r", encoding="utf-8") as f:
+        with open("custom.css", "r", encoding="utf-8") as f: 
             css_code += f.read() + "\n"
-        with open("custom.js", "r", encoding="utf-8") as f:
+        with open("custom.js", "r", encoding="utf-8") as f: 
             js_code += f.read() + "\n"
     except FileNotFoundError as e:
         print(f"Warning: Could not read asset file: {e}")
-
-    return {"js": js_code, "css": css_code}
-
+    return {"js": js_code, "css": css_code, "body_html": popup_html}
 
 # --- 4. Gradio App Build ---
 with gr.Blocks(title="PropertySheet Demos") as demo:
-    head_injector = HeadInjector()
+    html_injector = HTMLInjector()
     gr.Markdown("# PropertySheet Component Demos")
     
+    with gr.Row():
+        # --- Flyout popup ---
+        with gr.Column(elem_id="flyout_panel_source", elem_classes=["flyout-source-hidden"]) as flyout_panel_source:
+            close_btn = gr.Button("×", elem_classes=["flyout-close-btn"])
+            flyout_sheet = PropertySheet(visible=True, container=False, label="Settings", show_group_name_only_one=False, disable_accordion=True)
+            
     with gr.Tabs():
-        with gr.TabItem("Original Sidebar Demo"):
+        with gr.TabItem("Original Sidebar Demo"):           
             gr.Markdown("An example of using the `PropertySheet` component as a traditional sidebar for settings.")
-            
             render_state = gr.State(value=initial_render_config)
             env_state = gr.State(value=initial_env_config)
             sidebar_visible = gr.State(False)
-            
             with gr.Row():
                 with gr.Column(scale=3):            
                     generate = gr.Button("Show Settings", variant="primary")
                     with gr.Row():
                         output_render_json = gr.JSON(label="Live Render State")
                         output_env_json = gr.JSON(label="Live Environment State")
-
                 with gr.Column(scale=1):
-                    render_sheet = PropertySheet(
-                        value=initial_render_config,
-                        label="Render Settings",
-                        width=400,
-                        height=550,
-                        visible=False,
-                        root_label="Generator"       
-                    )
-                    environment_sheet = PropertySheet(
-                        value=initial_env_config,
-                        label="Environment Settings",
-                        width=400,
-                        open=False,
-                        visible=False,
-                        root_label="General"              
-                    )
-
+                    render_sheet = PropertySheet(value=initial_render_config, label="Render Settings", width=400, height=550, visible=False, root_label="Generator")
+                    environment_sheet = PropertySheet(value=initial_env_config, label="Environment Settings", width=400, open=False, visible=False, root_label="General")
             def change_visibility(is_visible, render_cfg, env_cfg):
                 new_visibility = not is_visible
                 button_text = "Hide Settings" if new_visibility else "Show Settings"
-                return (
-                    new_visibility,
-                    gr.update(visible=new_visibility, value=render_cfg),
-                    gr.update(visible=new_visibility, value=env_cfg),
-                    gr.update(value=button_text)
-                )
-            
+                return (new_visibility, gr.update(visible=new_visibility, value=render_cfg), gr.update(visible=new_visibility, value=env_cfg), gr.update(value=button_text))
             def handle_render_change(updated_config: RenderConfig, current_state: RenderConfig):
-                if updated_config is None:
-                    return current_state, asdict(current_state), current_state
-                if updated_config.model.model_type != "Custom":
-                    updated_config.model.custom_model_path = "/path/to/default.safetensors"
+                if updated_config is None: return current_state, asdict(current_state), current_state
+                if updated_config.model.model_type != "Custom": updated_config.model.custom_model_path = "/path/to/default.safetensors"
                 return updated_config, asdict(updated_config), updated_config
-
             def handle_env_change(updated_config: EnvironmentConfig, current_state: EnvironmentConfig):
-                if updated_config is None:
-                    return current_state, asdict(current_state), current_state
+                if updated_config is None: return current_state, asdict(current_state), current_state
                 return updated_config, asdict(updated_config), current_state
-
-            generate.click(
-                fn=change_visibility,
-                inputs=[sidebar_visible, render_state, env_state],
-                outputs=[sidebar_visible, render_sheet, environment_sheet, generate]
-            )
-            
-            render_sheet.change(
-                fn=handle_render_change,
-                inputs=[render_sheet, render_state],
-                outputs=[render_sheet, output_render_json, render_state]
-            )
-            
-            environment_sheet.change(
-                fn=handle_env_change,
-                inputs=[environment_sheet, env_state],
-                outputs=[environment_sheet, output_env_json, env_state]
-            )
-           
-            demo.load(
-                fn=lambda r_cfg, e_cfg: (asdict(r_cfg), asdict(e_cfg)),
-                inputs=[render_state, env_state],
-                outputs=[output_render_json, output_env_json]
-            )
+            generate.click(fn=change_visibility, inputs=[sidebar_visible, render_state, env_state], outputs=[sidebar_visible, render_sheet, environment_sheet, generate])
+            render_sheet.change(fn=handle_render_change, inputs=[render_sheet, render_state], outputs=[render_sheet, output_render_json, render_state])
+            environment_sheet.change(fn=handle_env_change, inputs=[environment_sheet, env_state], outputs=[environment_sheet, output_env_json, env_state])
+            demo.load(fn=lambda r_cfg, e_cfg: (asdict(r_cfg), asdict(e_cfg)), inputs=[render_state, env_state], outputs=[output_render_json, output_env_json])
 
         with gr.TabItem("Flyout Popup Demo"):
             gr.Markdown("An example of attaching a `PropertySheet` as a flyout panel to other components.")
             
+            # --- State Management ---
             flyout_visible = gr.State(False)
             active_anchor_id = gr.State(None)
+            js_data_bridge = gr.Textbox(visible=False, elem_id="js_data_bridge")
 
             with gr.Column(elem_classes=["flyout-context-area"]):
                 with gr.Row(elem_classes=["fake-input-container", "no-border-dropdown"]):
@@ -226,54 +160,60 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
                     model_dd = gr.Dropdown(choices=list(model_settings_map_py.keys()), label="Model", value="SDXL 1.0", elem_id="model_dd", scale=10)
                     model_ear_btn = gr.Button("⚙️", elem_id="model_ear_btn", scale=1, elem_classes=["integrated-ear-btn"])
 
-                with gr.Column(visible=False, elem_id="flyout_panel", elem_classes=["flyout-sheet"]) as flyout_panel:
-                    with gr.Row(elem_classes=["close-btn-row"]):
-                        close_btn = gr.Button("×", elem_classes=["flyout-close-btn"])
-                    flyout_sheet = PropertySheet(visible=False, container=False, label="Settings", show_group_name_only_one=False, disable_accordion=True)
+              
 
+            # --- Event Logic ---
             def handle_flyout_toggle(is_vis, current_anchor, clicked_dropdown_id, settings_obj):
                 if is_vis and current_anchor == clicked_dropdown_id:
-                    return False, None, gr.update(visible=False), gr.update(visible=False, value=None)
+                    js_data = json.dumps({"isVisible": False, "anchorId": None})
+                    return False, None, gr.update(), gr.update(value=js_data)
                 else:
-                    return True, clicked_dropdown_id, gr.update(visible=True), gr.update(visible=True, value=settings_obj)
+                    js_data = json.dumps({"isVisible": True, "anchorId": clicked_dropdown_id})
+                    return True, clicked_dropdown_id, gr.update(value=settings_obj), gr.update(value=js_data)
 
             def update_ear_visibility(selection, settings_map):
                 has_settings = settings_map.get(selection) is not None
                 return gr.update(visible=has_settings)
 
             def on_flyout_change(updated_settings, active_id, sampler_val, model_val):
-                if updated_settings is None or active_id is None: return
+                if updated_settings is None or active_id is None: 
+                    return
                 if active_id == sampler_dd.elem_id:
                     sampler_settings_map_py[sampler_val] = updated_settings
                 elif active_id == model_dd.elem_id:
                     model_settings_map_py[model_val] = updated_settings
             
             def close_the_flyout():
-                return False, None, gr.update(visible=False), gr.update(visible=False, value=None)
+                js_data = json.dumps({"isVisible": False, "anchorId": None})
+                return False, None, gr.update(value=js_data)
+            
+            js_update_flyout = "(jsonData) => { update_flyout_from_state(jsonData); }"
                 
             sampler_dd.change(
                 fn=lambda sel: update_ear_visibility(sel, sampler_settings_map_py),
                 inputs=[sampler_dd],
                 outputs=[sampler_ear_btn]
-            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet])
+            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
             
             sampler_ear_btn.click(
                 fn=lambda is_vis, anchor, sel: handle_flyout_toggle(is_vis, anchor, sampler_dd.elem_id, sampler_settings_map_py.get(sel)),
                 inputs=[flyout_visible, active_anchor_id, sampler_dd],
-                outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet]
-            ).then(fn=None, inputs=None, outputs=None, js=f"() => position_flyout('{sampler_dd.elem_id}')")
+                outputs=[flyout_visible, active_anchor_id, flyout_sheet, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
 
             model_dd.change(
                 fn=lambda sel: update_ear_visibility(sel, model_settings_map_py),
                 inputs=[model_dd],
                 outputs=[model_ear_btn]
-            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet])
+            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
             
             model_ear_btn.click(
                 fn=lambda is_vis, anchor, sel: handle_flyout_toggle(is_vis, anchor, model_dd.elem_id, model_settings_map_py.get(sel)),
                 inputs=[flyout_visible, active_anchor_id, model_dd],
-                outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet]
-            ).then(fn=None, inputs=None, outputs=None, js=f"() => position_flyout('{model_dd.elem_id}')")
+                outputs=[flyout_visible, active_anchor_id, flyout_sheet, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
             
             flyout_sheet.change(
                 fn=on_flyout_change,
@@ -284,16 +224,24 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
             close_btn.click(
                 fn=close_the_flyout,
                 inputs=None,
-                outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet]
-            )
+                outputs=[flyout_visible, active_anchor_id, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
 
             def initial_flyout_setup(sampler_val, model_val):
                 return {
                     sampler_ear_btn: update_ear_visibility(sampler_val, sampler_settings_map_py),
                     model_ear_btn: update_ear_visibility(model_val, model_settings_map_py)
-                }            
-            demo.load(fn=inject_assets, inputs=None, outputs=[head_injector]
-                    ).then(fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn])
+                }
+            
+            # --- App Load ---
+            demo.load(
+                fn=inject_assets, inputs=None, outputs=[html_injector]
+            ).then(
+                fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn]
+            ).then(
+                fn=None, inputs=None, outputs=None,
+                js="() => { setTimeout(reparent_flyout, 200); }"
+            )
             
 if __name__ == "__main__":
     demo.launch()

src/README.md

@@ -36,9 +36,9 @@ The **PropertySheet** component for Gradio allows you to automatically generate
 - **Theme-Aware**: Designed to look and feel native in all Gradio themes.
 - **Dynamic Updates**: Supports advanced patterns where changing one field (e.g., a model selector) can dynamically update the options of another field (e.g., a sampler dropdown).
 
-
 ## Installation
 
+
 ```bash
 pip install gradio_propertysheet
 ```
@@ -47,183 +47,117 @@ pip install gradio_propertysheet
 
 ```python
 import os
-from pathlib import Path
+import json
 import gradio as gr
 from dataclasses import dataclass, field, asdict
 from typing import Literal
 from gradio_propertysheet import PropertySheet
-from gradio_headinjector import HeadInjector
-
+from gradio_htmlinjector import HTMLInjector
 
-# --- 1. Dataclass Definitions ---
-
-# Dataclasses for the Original Sidebar Demo
+# --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
 class ModelSettings:
-    """Settings for loading models, VAEs, etc."""
     model_type: Literal["SD 1.5", "SDXL", "Pony", "Custom"] = field(default="SDXL", metadata={"component": "dropdown", "label": "Base Model"})
     custom_model_path: str = field(default="/path/to/default.safetensors", metadata={"label": "Custom Model Path", "interactive_if": {"field": "model_type", "value": "Custom"}})
     vae_path: str = field(default="", metadata={"label": "VAE Path (optional)"})
-
 @dataclass
 class SamplingSettings:
-    """Settings for the image sampling process."""
     sampler_name: Literal["Euler", "Euler a", "DPM++ 2M Karras", "UniPC"] = field(default="DPM++ 2M Karras", metadata={"component": "dropdown", "label": "Sampler"})
     steps: int = field(default=25, metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1})
     cfg_scale: float = field(default=7.0, metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5})
-
 @dataclass
 class RenderConfig:
-    """Main configuration object for rendering, grouping all settings."""
     seed: int = field(default=-1, metadata={"component": "number_integer", "label": "Seed (-1 for random)"})
     model: ModelSettings = field(default_factory=ModelSettings)
     sampling: SamplingSettings = field(default_factory=SamplingSettings)
-
 @dataclass
 class Lighting:
-    """Lighting settings for the environment."""
     sun_intensity: float = field(default=1.0, metadata={"component": "slider", "minimum": 0, "maximum": 5, "step": 0.1})
     color: str = field(default="#FFDDBB", metadata={"component": "colorpicker", "label": "Sun Color"})
-
 @dataclass
 class EnvironmentConfig:
-    """Main configuration for the environment."""
     background: Literal["Sky", "Color", "Image"] = field(default="Sky", metadata={"component": "dropdown"})
     lighting: Lighting = field(default_factory=Lighting)
-
-# Dataclasses for the Flyout Demo
 @dataclass
 class EulerSettings:
-    """Settings specific to the Euler sampler."""
     s_churn: float = field(default=0.0, metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01})
-
 @dataclass
 class DPM_Settings:
-    """Settings specific to DPM samplers."""
     karras_style: bool = field(default=True, metadata={"label": "Use Karras Sigma Schedule"})
 
-# --- 2. Data Mappings and Initial Instances ---
-
-# Data for Original Sidebar Demo
+# --- 2. Data Mappings and Initial Instances (unchanged) ---
 initial_render_config = RenderConfig()
 initial_env_config = EnvironmentConfig()
-
-# Data for Flyout Demo
 sampler_settings_map_py = {"Euler": EulerSettings(), "DPM++ 2M Karras": DPM_Settings(), "UniPC": None}
 model_settings_map_py = {"SDXL 1.0": DPM_Settings(), "Stable Diffusion 1.5": EulerSettings(), "Pony": None}
 
-# --- 3. CSS & JS Injection function ---
-
+# --- 3. CSS & JS Injection function (unchanged) ---
 def inject_assets():
     """
-    This function prepares the payload of CSS and JS code. It's called by the
-    demo.load() event listener when the Gradio app starts.
+    This function prepares the payload of CSS, JS, and Body HTML for injection.
     """
-    # Inline code
+    popup_html = """<div id="injected_flyout_container" class="flyout-sheet" style="display: none;"></div>"""
     css_code = ""
     js_code = ""
-
-    # Read from files
+    
     try:
-        with open("custom.css", "r", encoding="utf-8") as f:
+        with open("custom.css", "r", encoding="utf-8") as f: 
             css_code += f.read() + "\n"
-        with open("custom.js", "r", encoding="utf-8") as f:
+        with open("custom.js", "r", encoding="utf-8") as f: 
             js_code += f.read() + "\n"
     except FileNotFoundError as e:
         print(f"Warning: Could not read asset file: {e}")
-
-    return {"js": js_code, "css": css_code}
-
+    return {"js": js_code, "css": css_code, "body_html": popup_html}
 
 # --- 4. Gradio App Build ---
 with gr.Blocks(title="PropertySheet Demos") as demo:
-    head_injector = HeadInjector()
+    html_injector = HTMLInjector()
     gr.Markdown("# PropertySheet Component Demos")
     
+    with gr.Row():
+        # --- Flyout popup ---
+        with gr.Column(elem_id="flyout_panel_source", elem_classes=["flyout-source-hidden"]) as flyout_panel_source:
+            close_btn = gr.Button("×", elem_classes=["flyout-close-btn"])
+            flyout_sheet = PropertySheet(visible=True, container=False, label="Settings", show_group_name_only_one=False, disable_accordion=True)
+            
     with gr.Tabs():
-        with gr.TabItem("Original Sidebar Demo"):
+        with gr.TabItem("Original Sidebar Demo"):           
             gr.Markdown("An example of using the `PropertySheet` component as a traditional sidebar for settings.")
-            
             render_state = gr.State(value=initial_render_config)
             env_state = gr.State(value=initial_env_config)
             sidebar_visible = gr.State(False)
-            
             with gr.Row():
                 with gr.Column(scale=3):            
                     generate = gr.Button("Show Settings", variant="primary")
                     with gr.Row():
                         output_render_json = gr.JSON(label="Live Render State")
                         output_env_json = gr.JSON(label="Live Environment State")
-
                 with gr.Column(scale=1):
-                    render_sheet = PropertySheet(
-                        value=initial_render_config,
-                        label="Render Settings",
-                        width=400,
-                        height=550,
-                        visible=False,
-                        root_label="Generator"       
-                    )
-                    environment_sheet = PropertySheet(
-                        value=initial_env_config,
-                        label="Environment Settings",
-                        width=400,
-                        open=False,
-                        visible=False,
-                        root_label="General"              
-                    )
-
+                    render_sheet = PropertySheet(value=initial_render_config, label="Render Settings", width=400, height=550, visible=False, root_label="Generator")
+                    environment_sheet = PropertySheet(value=initial_env_config, label="Environment Settings", width=400, open=False, visible=False, root_label="General")
             def change_visibility(is_visible, render_cfg, env_cfg):
                 new_visibility = not is_visible
                 button_text = "Hide Settings" if new_visibility else "Show Settings"
-                return (
-                    new_visibility,
-                    gr.update(visible=new_visibility, value=render_cfg),
-                    gr.update(visible=new_visibility, value=env_cfg),
-                    gr.update(value=button_text)
-                )
-            
+                return (new_visibility, gr.update(visible=new_visibility, value=render_cfg), gr.update(visible=new_visibility, value=env_cfg), gr.update(value=button_text))
             def handle_render_change(updated_config: RenderConfig, current_state: RenderConfig):
-                if updated_config is None:
-                    return current_state, asdict(current_state), current_state
-                if updated_config.model.model_type != "Custom":
-                    updated_config.model.custom_model_path = "/path/to/default.safetensors"
+                if updated_config is None: return current_state, asdict(current_state), current_state
+                if updated_config.model.model_type != "Custom": updated_config.model.custom_model_path = "/path/to/default.safetensors"
                 return updated_config, asdict(updated_config), updated_config
-
             def handle_env_change(updated_config: EnvironmentConfig, current_state: EnvironmentConfig):
-                if updated_config is None:
-                    return current_state, asdict(current_state), current_state
+                if updated_config is None: return current_state, asdict(current_state), current_state
                 return updated_config, asdict(updated_config), current_state
-
-            generate.click(
-                fn=change_visibility,
-                inputs=[sidebar_visible, render_state, env_state],
-                outputs=[sidebar_visible, render_sheet, environment_sheet, generate]
-            )
-            
-            render_sheet.change(
-                fn=handle_render_change,
-                inputs=[render_sheet, render_state],
-                outputs=[render_sheet, output_render_json, render_state]
-            )
-            
-            environment_sheet.change(
-                fn=handle_env_change,
-                inputs=[environment_sheet, env_state],
-                outputs=[environment_sheet, output_env_json, env_state]
-            )
-           
-            demo.load(
-                fn=lambda r_cfg, e_cfg: (asdict(r_cfg), asdict(e_cfg)),
-                inputs=[render_state, env_state],
-                outputs=[output_render_json, output_env_json]
-            )
+            generate.click(fn=change_visibility, inputs=[sidebar_visible, render_state, env_state], outputs=[sidebar_visible, render_sheet, environment_sheet, generate])
+            render_sheet.change(fn=handle_render_change, inputs=[render_sheet, render_state], outputs=[render_sheet, output_render_json, render_state])
+            environment_sheet.change(fn=handle_env_change, inputs=[environment_sheet, env_state], outputs=[environment_sheet, output_env_json, env_state])
+            demo.load(fn=lambda r_cfg, e_cfg: (asdict(r_cfg), asdict(e_cfg)), inputs=[render_state, env_state], outputs=[output_render_json, output_env_json])
 
         with gr.TabItem("Flyout Popup Demo"):
             gr.Markdown("An example of attaching a `PropertySheet` as a flyout panel to other components.")
             
+            # --- State Management ---
             flyout_visible = gr.State(False)
             active_anchor_id = gr.State(None)
+            js_data_bridge = gr.Textbox(visible=False, elem_id="js_data_bridge")
 
             with gr.Column(elem_classes=["flyout-context-area"]):
                 with gr.Row(elem_classes=["fake-input-container", "no-border-dropdown"]):
@@ -234,54 +168,60 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
                     model_dd = gr.Dropdown(choices=list(model_settings_map_py.keys()), label="Model", value="SDXL 1.0", elem_id="model_dd", scale=10)
                     model_ear_btn = gr.Button("⚙️", elem_id="model_ear_btn", scale=1, elem_classes=["integrated-ear-btn"])
 
-                with gr.Column(visible=False, elem_id="flyout_panel", elem_classes=["flyout-sheet"]) as flyout_panel:
-                    with gr.Row(elem_classes=["close-btn-row"]):
-                        close_btn = gr.Button("×", elem_classes=["flyout-close-btn"])
-                    flyout_sheet = PropertySheet(visible=False, container=False, label="Settings", show_group_name_only_one=False, disable_accordion=True)
+              
 
+            # --- Event Logic ---
             def handle_flyout_toggle(is_vis, current_anchor, clicked_dropdown_id, settings_obj):
                 if is_vis and current_anchor == clicked_dropdown_id:
-                    return False, None, gr.update(visible=False), gr.update(visible=False, value=None)
+                    js_data = json.dumps({"isVisible": False, "anchorId": None})
+                    return False, None, gr.update(), gr.update(value=js_data)
                 else:
-                    return True, clicked_dropdown_id, gr.update(visible=True), gr.update(visible=True, value=settings_obj)
+                    js_data = json.dumps({"isVisible": True, "anchorId": clicked_dropdown_id})
+                    return True, clicked_dropdown_id, gr.update(value=settings_obj), gr.update(value=js_data)
 
             def update_ear_visibility(selection, settings_map):
                 has_settings = settings_map.get(selection) is not None
                 return gr.update(visible=has_settings)
 
             def on_flyout_change(updated_settings, active_id, sampler_val, model_val):
-                if updated_settings is None or active_id is None: return
+                if updated_settings is None or active_id is None: 
+                    return
                 if active_id == sampler_dd.elem_id:
                     sampler_settings_map_py[sampler_val] = updated_settings
                 elif active_id == model_dd.elem_id:
                     model_settings_map_py[model_val] = updated_settings
             
             def close_the_flyout():
-                return False, None, gr.update(visible=False), gr.update(visible=False, value=None)
+                js_data = json.dumps({"isVisible": False, "anchorId": None})
+                return False, None, gr.update(value=js_data)
+            
+            js_update_flyout = "(jsonData) => { update_flyout_from_state(jsonData); }"
                 
             sampler_dd.change(
                 fn=lambda sel: update_ear_visibility(sel, sampler_settings_map_py),
                 inputs=[sampler_dd],
                 outputs=[sampler_ear_btn]
-            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet])
+            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
             
             sampler_ear_btn.click(
                 fn=lambda is_vis, anchor, sel: handle_flyout_toggle(is_vis, anchor, sampler_dd.elem_id, sampler_settings_map_py.get(sel)),
                 inputs=[flyout_visible, active_anchor_id, sampler_dd],
-                outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet]
-            ).then(fn=None, inputs=None, outputs=None, js=f"() => position_flyout('{sampler_dd.elem_id}')")
+                outputs=[flyout_visible, active_anchor_id, flyout_sheet, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
 
             model_dd.change(
                 fn=lambda sel: update_ear_visibility(sel, model_settings_map_py),
                 inputs=[model_dd],
                 outputs=[model_ear_btn]
-            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet])
+            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
             
             model_ear_btn.click(
                 fn=lambda is_vis, anchor, sel: handle_flyout_toggle(is_vis, anchor, model_dd.elem_id, model_settings_map_py.get(sel)),
                 inputs=[flyout_visible, active_anchor_id, model_dd],
-                outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet]
-            ).then(fn=None, inputs=None, outputs=None, js=f"() => position_flyout('{model_dd.elem_id}')")
+                outputs=[flyout_visible, active_anchor_id, flyout_sheet, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
             
             flyout_sheet.change(
                 fn=on_flyout_change,
@@ -292,16 +232,24 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
             close_btn.click(
                 fn=close_the_flyout,
                 inputs=None,
-                outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet]
-            )
+                outputs=[flyout_visible, active_anchor_id, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
 
             def initial_flyout_setup(sampler_val, model_val):
                 return {
                     sampler_ear_btn: update_ear_visibility(sampler_val, sampler_settings_map_py),
                     model_ear_btn: update_ear_visibility(model_val, model_settings_map_py)
-                }            
-            demo.load(fn=inject_assets, inputs=None, outputs=[head_injector]
-                    ).then(fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn])
+                }
+            
+            # --- App Load ---
+            demo.load(
+                fn=inject_assets, inputs=None, outputs=[html_injector]
+            ).then(
+                fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn]
+            ).then(
+                fn=None, inputs=None, outputs=None,
+                js="() => { setTimeout(reparent_flyout, 200); }"
+            )
             
 if __name__ == "__main__":
     demo.launch()

src/custom.css

@@ -1,12 +1,12 @@
-.flyout-context-area {    
-    position: relative !important;    
-    overflow: visible !important; 
+.flyout-context-area {
+    position: relative !important;
+    overflow: visible !important;
 }
 
-.flyout-sheet {    
-    position: absolute !important;
+.flyout-sheet {
+    position: fixed !important;
     flex-grow: 0 !important;
-    min-width: unset !important;    
+    min-width: unset !important;
     width: 350px !important;
     align-self: center !important;
     z-index: 1000;
@@ -20,7 +20,7 @@
 .fake-input-container {
     border: var(--input-border-width) solid var(--border-color-primary);
     border-radius: var(--input-radius);
-    background: var(--input-background-fill);
+    background: var(--block-background-fill) !important;
     padding: 0 !important;
     align-items: stretch !important;
     box-shadow: var(--input-shadow);
@@ -77,4 +77,8 @@
 
 .flyout-close-btn button:hover {
     color: var(--body-text-color) !important;
+}
+
+.flyout-source-hidden {
+    display: none !important;
 }

src/custom.js

@@ -1,20 +1,69 @@
-function position_flyout(anchorId)  {{
-    setTimeout(() => {{
-        const anchorRow = document.getElementById(anchorId).closest('.fake-input-container');
-        const flyoutElem = document.getElementById('flyout_panel');
+function reparent_flyout() {
+    //console.log("Attempting to reparent flyout...");
+    const source = document.getElementById('flyout_panel_source');
+    const target = document.getElementById('injected_flyout_container');
+    
+    if (source && target) {
+        while (source.firstChild) {
+            target.appendChild(source.firstChild);
+        }
+        source.remove();
+        //console.log("SUCCESS: Flyout panel has been reparented.");
+    } else {
+        console.error("ERROR: Reparenting failed. Source or target element not found.");
+    }
+}
+
+function position_flyout(anchorId) {
+    if (!anchorId) {
+         return; 
+    }
+    
+    const anchorElem = document.getElementById(anchorId);
+    const flyoutElem = document.getElementById('injected_flyout_container');
+    
+    if (anchorElem && flyoutElem) {
+        //console.log("JS: Positioning flyout relative to:", anchorId);
+        const anchorRect = anchorElem.getBoundingClientRect();
+        const flyoutWidth = flyoutElem.offsetWidth;
+        const flyoutHeight = flyoutElem.offsetHeight;
+
+        let topPosition = anchorRect.top + (anchorRect.height / 2) - (flyoutHeight / 2);
+        let leftPosition = anchorRect.left + (anchorRect.width / 2) - (flyoutWidth / 2);
         
-        if (anchorRow && flyoutElem && flyoutElem.style.display !== 'none') {{
-            const anchorRect = anchorRow.getBoundingClientRect();
-            const containerRect = anchorRow.closest('.flyout-context-area').getBoundingClientRect();
-            
-            const flyoutWidth = flyoutElem.offsetWidth;
-            const flyoutHeight = flyoutElem.offsetHeight;
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        if (leftPosition < 8) leftPosition = 8;
+        if (topPosition < 8) topPosition = 8;
+        if (leftPosition + flyoutWidth > windowWidth) leftPosition = windowWidth - flyoutWidth - 8;
+        if (topPosition + flyoutHeight > windowHeight) topPosition = windowHeight - flyoutHeight - 8;
+
+        flyoutElem.style.top = `${topPosition}px`;
+        flyoutElem.style.left = `${leftPosition}px`;
+    }
+}
+
+// This is the new main function called by Gradio's .then() event
+function update_flyout_from_state(jsonData) {
+    //console.log("JS: update_flyout_from_state() called with data:", jsonData);
+    
+    if (!jsonData) return;
+ 
+    const state = JSON.parse(jsonData);
+    const { isVisible, anchorId } = state;
+    const flyout = document.getElementById('injected_flyout_container');
+
+    if (!flyout) {
+        console.error("ERROR: Cannot update UI. Flyout container not found.");
+        return;
+    }
 
-            const topPosition = (anchorRect.top - containerRect.top) + (anchorRect.height / 2) - (flyoutHeight / 2);
-            const leftPosition = (anchorRect.left - containerRect.left) + (anchorRect.width / 2) - (flyoutWidth / 2);
+    //console.log("JS: Parsed state:", { isVisible, anchorId });
 
-            flyoutElem.style.top = `${{topPosition}}px`;
-            flyoutElem.style.left = `${{leftPosition}}px`;
-        }}
-    }}, 50);
-}};
+    if (isVisible) {
+        flyout.style.display = 'flex';
+        position_flyout(anchorId);
+    } else {
+        flyout.style.display = 'none';
+    }
+}

src/demo/app.py

@@ -1,181 +1,115 @@
 import os
-from pathlib import Path
+import json
 import gradio as gr
 from dataclasses import dataclass, field, asdict
 from typing import Literal
 from gradio_propertysheet import PropertySheet
-from gradio_headinjector import HeadInjector
+from gradio_htmlinjector import HTMLInjector
 
-
-# --- 1. Dataclass Definitions ---
-
-# Dataclasses for the Original Sidebar Demo
+# --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
 class ModelSettings:
-    """Settings for loading models, VAEs, etc."""
     model_type: Literal["SD 1.5", "SDXL", "Pony", "Custom"] = field(default="SDXL", metadata={"component": "dropdown", "label": "Base Model"})
     custom_model_path: str = field(default="/path/to/default.safetensors", metadata={"label": "Custom Model Path", "interactive_if": {"field": "model_type", "value": "Custom"}})
     vae_path: str = field(default="", metadata={"label": "VAE Path (optional)"})
-
 @dataclass
 class SamplingSettings:
-    """Settings for the image sampling process."""
     sampler_name: Literal["Euler", "Euler a", "DPM++ 2M Karras", "UniPC"] = field(default="DPM++ 2M Karras", metadata={"component": "dropdown", "label": "Sampler"})
     steps: int = field(default=25, metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1})
     cfg_scale: float = field(default=7.0, metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5})
-
 @dataclass
 class RenderConfig:
-    """Main configuration object for rendering, grouping all settings."""
     seed: int = field(default=-1, metadata={"component": "number_integer", "label": "Seed (-1 for random)"})
     model: ModelSettings = field(default_factory=ModelSettings)
     sampling: SamplingSettings = field(default_factory=SamplingSettings)
-
 @dataclass
 class Lighting:
-    """Lighting settings for the environment."""
     sun_intensity: float = field(default=1.0, metadata={"component": "slider", "minimum": 0, "maximum": 5, "step": 0.1})
     color: str = field(default="#FFDDBB", metadata={"component": "colorpicker", "label": "Sun Color"})
-
 @dataclass
 class EnvironmentConfig:
-    """Main configuration for the environment."""
     background: Literal["Sky", "Color", "Image"] = field(default="Sky", metadata={"component": "dropdown"})
     lighting: Lighting = field(default_factory=Lighting)
-
-# Dataclasses for the Flyout Demo
 @dataclass
 class EulerSettings:
-    """Settings specific to the Euler sampler."""
     s_churn: float = field(default=0.0, metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01})
-
 @dataclass
 class DPM_Settings:
-    """Settings specific to DPM samplers."""
     karras_style: bool = field(default=True, metadata={"label": "Use Karras Sigma Schedule"})
 
-# --- 2. Data Mappings and Initial Instances ---
-
-# Data for Original Sidebar Demo
+# --- 2. Data Mappings and Initial Instances (unchanged) ---
 initial_render_config = RenderConfig()
 initial_env_config = EnvironmentConfig()
-
-# Data for Flyout Demo
 sampler_settings_map_py = {"Euler": EulerSettings(), "DPM++ 2M Karras": DPM_Settings(), "UniPC": None}
 model_settings_map_py = {"SDXL 1.0": DPM_Settings(), "Stable Diffusion 1.5": EulerSettings(), "Pony": None}
 
-# --- 3. CSS & JS Injection function ---
-
+# --- 3. CSS & JS Injection function (unchanged) ---
 def inject_assets():
     """
-    This function prepares the payload of CSS and JS code. It's called by the
-    demo.load() event listener when the Gradio app starts.
+    This function prepares the payload of CSS, JS, and Body HTML for injection.
     """
-    # Inline code
+    popup_html = """<div id="injected_flyout_container" class="flyout-sheet" style="display: none;"></div>"""
     css_code = ""
     js_code = ""
-
-    # Read from files
+    
     try:
-        with open("custom.css", "r", encoding="utf-8") as f:
+        with open("custom.css", "r", encoding="utf-8") as f: 
             css_code += f.read() + "\n"
-        with open("custom.js", "r", encoding="utf-8") as f:
+        with open("custom.js", "r", encoding="utf-8") as f: 
             js_code += f.read() + "\n"
     except FileNotFoundError as e:
         print(f"Warning: Could not read asset file: {e}")
-
-    return {"js": js_code, "css": css_code}
-
+    return {"js": js_code, "css": css_code, "body_html": popup_html}
 
 # --- 4. Gradio App Build ---
 with gr.Blocks(title="PropertySheet Demos") as demo:
-    head_injector = HeadInjector()
+    html_injector = HTMLInjector()
     gr.Markdown("# PropertySheet Component Demos")
     
+    with gr.Row():
+        # --- Flyout popup ---
+        with gr.Column(elem_id="flyout_panel_source", elem_classes=["flyout-source-hidden"]) as flyout_panel_source:
+            close_btn = gr.Button("×", elem_classes=["flyout-close-btn"])
+            flyout_sheet = PropertySheet(visible=True, container=False, label="Settings", show_group_name_only_one=False, disable_accordion=True)
+            
     with gr.Tabs():
-        with gr.TabItem("Original Sidebar Demo"):
+        with gr.TabItem("Original Sidebar Demo"):           
             gr.Markdown("An example of using the `PropertySheet` component as a traditional sidebar for settings.")
-            
             render_state = gr.State(value=initial_render_config)
             env_state = gr.State(value=initial_env_config)
             sidebar_visible = gr.State(False)
-            
             with gr.Row():
                 with gr.Column(scale=3):            
                     generate = gr.Button("Show Settings", variant="primary")
                     with gr.Row():
                         output_render_json = gr.JSON(label="Live Render State")
                         output_env_json = gr.JSON(label="Live Environment State")
-
                 with gr.Column(scale=1):
-                    render_sheet = PropertySheet(
-                        value=initial_render_config,
-                        label="Render Settings",
-                        width=400,
-                        height=550,
-                        visible=False,
-                        root_label="Generator"       
-                    )
-                    environment_sheet = PropertySheet(
-                        value=initial_env_config,
-                        label="Environment Settings",
-                        width=400,
-                        open=False,
-                        visible=False,
-                        root_label="General"              
-                    )
-
+                    render_sheet = PropertySheet(value=initial_render_config, label="Render Settings", width=400, height=550, visible=False, root_label="Generator")
+                    environment_sheet = PropertySheet(value=initial_env_config, label="Environment Settings", width=400, open=False, visible=False, root_label="General")
             def change_visibility(is_visible, render_cfg, env_cfg):
                 new_visibility = not is_visible
                 button_text = "Hide Settings" if new_visibility else "Show Settings"
-                return (
-                    new_visibility,
-                    gr.update(visible=new_visibility, value=render_cfg),
-                    gr.update(visible=new_visibility, value=env_cfg),
-                    gr.update(value=button_text)
-                )
-            
+                return (new_visibility, gr.update(visible=new_visibility, value=render_cfg), gr.update(visible=new_visibility, value=env_cfg), gr.update(value=button_text))
             def handle_render_change(updated_config: RenderConfig, current_state: RenderConfig):
-                if updated_config is None:
-                    return current_state, asdict(current_state), current_state
-                if updated_config.model.model_type != "Custom":
-                    updated_config.model.custom_model_path = "/path/to/default.safetensors"
+                if updated_config is None: return current_state, asdict(current_state), current_state
+                if updated_config.model.model_type != "Custom": updated_config.model.custom_model_path = "/path/to/default.safetensors"
                 return updated_config, asdict(updated_config), updated_config
-
             def handle_env_change(updated_config: EnvironmentConfig, current_state: EnvironmentConfig):
-                if updated_config is None:
-                    return current_state, asdict(current_state), current_state
+                if updated_config is None: return current_state, asdict(current_state), current_state
                 return updated_config, asdict(updated_config), current_state
-
-            generate.click(
-                fn=change_visibility,
-                inputs=[sidebar_visible, render_state, env_state],
-                outputs=[sidebar_visible, render_sheet, environment_sheet, generate]
-            )
-            
-            render_sheet.change(
-                fn=handle_render_change,
-                inputs=[render_sheet, render_state],
-                outputs=[render_sheet, output_render_json, render_state]
-            )
-            
-            environment_sheet.change(
-                fn=handle_env_change,
-                inputs=[environment_sheet, env_state],
-                outputs=[environment_sheet, output_env_json, env_state]
-            )
-           
-            demo.load(
-                fn=lambda r_cfg, e_cfg: (asdict(r_cfg), asdict(e_cfg)),
-                inputs=[render_state, env_state],
-                outputs=[output_render_json, output_env_json]
-            )
+            generate.click(fn=change_visibility, inputs=[sidebar_visible, render_state, env_state], outputs=[sidebar_visible, render_sheet, environment_sheet, generate])
+            render_sheet.change(fn=handle_render_change, inputs=[render_sheet, render_state], outputs=[render_sheet, output_render_json, render_state])
+            environment_sheet.change(fn=handle_env_change, inputs=[environment_sheet, env_state], outputs=[environment_sheet, output_env_json, env_state])
+            demo.load(fn=lambda r_cfg, e_cfg: (asdict(r_cfg), asdict(e_cfg)), inputs=[render_state, env_state], outputs=[output_render_json, output_env_json])
 
         with gr.TabItem("Flyout Popup Demo"):
             gr.Markdown("An example of attaching a `PropertySheet` as a flyout panel to other components.")
             
+            # --- State Management ---
             flyout_visible = gr.State(False)
             active_anchor_id = gr.State(None)
+            js_data_bridge = gr.Textbox(visible=False, elem_id="js_data_bridge")
 
             with gr.Column(elem_classes=["flyout-context-area"]):
                 with gr.Row(elem_classes=["fake-input-container", "no-border-dropdown"]):
@@ -186,54 +120,60 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
                     model_dd = gr.Dropdown(choices=list(model_settings_map_py.keys()), label="Model", value="SDXL 1.0", elem_id="model_dd", scale=10)
                     model_ear_btn = gr.Button("⚙️", elem_id="model_ear_btn", scale=1, elem_classes=["integrated-ear-btn"])
 
-                with gr.Column(visible=False, elem_id="flyout_panel", elem_classes=["flyout-sheet"]) as flyout_panel:
-                    with gr.Row(elem_classes=["close-btn-row"]):
-                        close_btn = gr.Button("×", elem_classes=["flyout-close-btn"])
-                    flyout_sheet = PropertySheet(visible=False, container=False, label="Settings", show_group_name_only_one=False, disable_accordion=True)
+              
 
+            # --- Event Logic ---
             def handle_flyout_toggle(is_vis, current_anchor, clicked_dropdown_id, settings_obj):
                 if is_vis and current_anchor == clicked_dropdown_id:
-                    return False, None, gr.update(visible=False), gr.update(visible=False, value=None)
+                    js_data = json.dumps({"isVisible": False, "anchorId": None})
+                    return False, None, gr.update(), gr.update(value=js_data)
                 else:
-                    return True, clicked_dropdown_id, gr.update(visible=True), gr.update(visible=True, value=settings_obj)
+                    js_data = json.dumps({"isVisible": True, "anchorId": clicked_dropdown_id})
+                    return True, clicked_dropdown_id, gr.update(value=settings_obj), gr.update(value=js_data)
 
             def update_ear_visibility(selection, settings_map):
                 has_settings = settings_map.get(selection) is not None
                 return gr.update(visible=has_settings)
 
             def on_flyout_change(updated_settings, active_id, sampler_val, model_val):
-                if updated_settings is None or active_id is None: return
+                if updated_settings is None or active_id is None: 
+                    return
                 if active_id == sampler_dd.elem_id:
                     sampler_settings_map_py[sampler_val] = updated_settings
                 elif active_id == model_dd.elem_id:
                     model_settings_map_py[model_val] = updated_settings
             
             def close_the_flyout():
-                return False, None, gr.update(visible=False), gr.update(visible=False, value=None)
+                js_data = json.dumps({"isVisible": False, "anchorId": None})
+                return False, None, gr.update(value=js_data)
+            
+            js_update_flyout = "(jsonData) => { update_flyout_from_state(jsonData); }"
                 
             sampler_dd.change(
                 fn=lambda sel: update_ear_visibility(sel, sampler_settings_map_py),
                 inputs=[sampler_dd],
                 outputs=[sampler_ear_btn]
-            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet])
+            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
             
             sampler_ear_btn.click(
                 fn=lambda is_vis, anchor, sel: handle_flyout_toggle(is_vis, anchor, sampler_dd.elem_id, sampler_settings_map_py.get(sel)),
                 inputs=[flyout_visible, active_anchor_id, sampler_dd],
-                outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet]
-            ).then(fn=None, inputs=None, outputs=None, js=f"() => position_flyout('{sampler_dd.elem_id}')")
+                outputs=[flyout_visible, active_anchor_id, flyout_sheet, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
 
             model_dd.change(
                 fn=lambda sel: update_ear_visibility(sel, model_settings_map_py),
                 inputs=[model_dd],
                 outputs=[model_ear_btn]
-            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet])
+            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
             
             model_ear_btn.click(
                 fn=lambda is_vis, anchor, sel: handle_flyout_toggle(is_vis, anchor, model_dd.elem_id, model_settings_map_py.get(sel)),
                 inputs=[flyout_visible, active_anchor_id, model_dd],
-                outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet]
-            ).then(fn=None, inputs=None, outputs=None, js=f"() => position_flyout('{model_dd.elem_id}')")
+                outputs=[flyout_visible, active_anchor_id, flyout_sheet, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
             
             flyout_sheet.change(
                 fn=on_flyout_change,
@@ -244,16 +184,24 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
             close_btn.click(
                 fn=close_the_flyout,
                 inputs=None,
-                outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet]
-            )
+                outputs=[flyout_visible, active_anchor_id, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
 
             def initial_flyout_setup(sampler_val, model_val):
                 return {
                     sampler_ear_btn: update_ear_visibility(sampler_val, sampler_settings_map_py),
                     model_ear_btn: update_ear_visibility(model_val, model_settings_map_py)
-                }            
-            demo.load(fn=inject_assets, inputs=None, outputs=[head_injector]
-                    ).then(fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn])
+                }
+            
+            # --- App Load ---
+            demo.load(
+                fn=inject_assets, inputs=None, outputs=[html_injector]
+            ).then(
+                fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn]
+            ).then(
+                fn=None, inputs=None, outputs=None,
+                js="() => { setTimeout(reparent_flyout, 200); }"
+            )
             
 if __name__ == "__main__":
     demo.launch()

src/demo/custom.css

@@ -1,12 +1,12 @@
-.flyout-context-area {    
-    position: relative !important;    
-    overflow: visible !important; 
+.flyout-context-area {
+    position: relative !important;
+    overflow: visible !important;
 }
 
-.flyout-sheet {    
-    position: absolute !important;
+.flyout-sheet {
+    position: fixed !important;
     flex-grow: 0 !important;
-    min-width: unset !important;    
+    min-width: unset !important;
     width: 350px !important;
     align-self: center !important;
     z-index: 1000;
@@ -20,7 +20,7 @@
 .fake-input-container {
     border: var(--input-border-width) solid var(--border-color-primary);
     border-radius: var(--input-radius);
-    background: var(--input-background-fill);
+    background: var(--block-background-fill) !important;
     padding: 0 !important;
     align-items: stretch !important;
     box-shadow: var(--input-shadow);
@@ -77,4 +77,8 @@
 
 .flyout-close-btn button:hover {
     color: var(--body-text-color) !important;
+}
+
+.flyout-source-hidden {
+    display: none !important;
 }

src/demo/custom.js

@@ -1,20 +1,69 @@
-function position_flyout(anchorId)  {{
-    setTimeout(() => {{
-        const anchorRow = document.getElementById(anchorId).closest('.fake-input-container');
-        const flyoutElem = document.getElementById('flyout_panel');
+function reparent_flyout() {
+    //console.log("Attempting to reparent flyout...");
+    const source = document.getElementById('flyout_panel_source');
+    const target = document.getElementById('injected_flyout_container');
+    
+    if (source && target) {
+        while (source.firstChild) {
+            target.appendChild(source.firstChild);
+        }
+        source.remove();
+        //console.log("SUCCESS: Flyout panel has been reparented.");
+    } else {
+        console.error("ERROR: Reparenting failed. Source or target element not found.");
+    }
+}
+
+function position_flyout(anchorId) {
+    if (!anchorId) {
+         return; 
+    }
+    
+    const anchorElem = document.getElementById(anchorId);
+    const flyoutElem = document.getElementById('injected_flyout_container');
+    
+    if (anchorElem && flyoutElem) {
+        //console.log("JS: Positioning flyout relative to:", anchorId);
+        const anchorRect = anchorElem.getBoundingClientRect();
+        const flyoutWidth = flyoutElem.offsetWidth;
+        const flyoutHeight = flyoutElem.offsetHeight;
+
+        let topPosition = anchorRect.top + (anchorRect.height / 2) - (flyoutHeight / 2);
+        let leftPosition = anchorRect.left + (anchorRect.width / 2) - (flyoutWidth / 2);
         
-        if (anchorRow && flyoutElem && flyoutElem.style.display !== 'none') {{
-            const anchorRect = anchorRow.getBoundingClientRect();
-            const containerRect = anchorRow.closest('.flyout-context-area').getBoundingClientRect();
-            
-            const flyoutWidth = flyoutElem.offsetWidth;
-            const flyoutHeight = flyoutElem.offsetHeight;
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        if (leftPosition < 8) leftPosition = 8;
+        if (topPosition < 8) topPosition = 8;
+        if (leftPosition + flyoutWidth > windowWidth) leftPosition = windowWidth - flyoutWidth - 8;
+        if (topPosition + flyoutHeight > windowHeight) topPosition = windowHeight - flyoutHeight - 8;
+
+        flyoutElem.style.top = `${topPosition}px`;
+        flyoutElem.style.left = `${leftPosition}px`;
+    }
+}
+
+// This is the new main function called by Gradio's .then() event
+function update_flyout_from_state(jsonData) {
+    //console.log("JS: update_flyout_from_state() called with data:", jsonData);
+    
+    if (!jsonData) return;
+ 
+    const state = JSON.parse(jsonData);
+    const { isVisible, anchorId } = state;
+    const flyout = document.getElementById('injected_flyout_container');
+
+    if (!flyout) {
+        console.error("ERROR: Cannot update UI. Flyout container not found.");
+        return;
+    }
 
-            const topPosition = (anchorRect.top - containerRect.top) + (anchorRect.height / 2) - (flyoutHeight / 2);
-            const leftPosition = (anchorRect.left - containerRect.left) + (anchorRect.width / 2) - (flyoutWidth / 2);
+    //console.log("JS: Parsed state:", { isVisible, anchorId });
 
-            flyoutElem.style.top = `${{topPosition}}px`;
-            flyoutElem.style.left = `${{leftPosition}}px`;
-        }}
-    }}, 50);
-}};
+    if (isVisible) {
+        flyout.style.display = 'flex';
+        position_flyout(anchorId);
+    } else {
+        flyout.style.display = 'none';
+    }
+}

src/demo/requirements.txt

@@ -1,2 +1,2 @@
 gradio_propertysheet
-gradio_headinjector==0.0.3
+gradio_htmlinjector

src/demo/space.py

@@ -39,183 +39,117 @@ pip install gradio_propertysheet
 
 ```python
 import os
-from pathlib import Path
+import json
 import gradio as gr
 from dataclasses import dataclass, field, asdict
 from typing import Literal
 from gradio_propertysheet import PropertySheet
-from gradio_headinjector import HeadInjector
+from gradio_htmlinjector import HTMLInjector
 
-
-# --- 1. Dataclass Definitions ---
-
-# Dataclasses for the Original Sidebar Demo
+# --- 1. Dataclass Definitions (unchanged) ---
 @dataclass
 class ModelSettings:
-    \"\"\"Settings for loading models, VAEs, etc.\"\"\"
     model_type: Literal["SD 1.5", "SDXL", "Pony", "Custom"] = field(default="SDXL", metadata={"component": "dropdown", "label": "Base Model"})
     custom_model_path: str = field(default="/path/to/default.safetensors", metadata={"label": "Custom Model Path", "interactive_if": {"field": "model_type", "value": "Custom"}})
     vae_path: str = field(default="", metadata={"label": "VAE Path (optional)"})
-
 @dataclass
 class SamplingSettings:
-    \"\"\"Settings for the image sampling process.\"\"\"
     sampler_name: Literal["Euler", "Euler a", "DPM++ 2M Karras", "UniPC"] = field(default="DPM++ 2M Karras", metadata={"component": "dropdown", "label": "Sampler"})
     steps: int = field(default=25, metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1})
     cfg_scale: float = field(default=7.0, metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5})
-
 @dataclass
 class RenderConfig:
-    \"\"\"Main configuration object for rendering, grouping all settings.\"\"\"
     seed: int = field(default=-1, metadata={"component": "number_integer", "label": "Seed (-1 for random)"})
     model: ModelSettings = field(default_factory=ModelSettings)
     sampling: SamplingSettings = field(default_factory=SamplingSettings)
-
 @dataclass
 class Lighting:
-    \"\"\"Lighting settings for the environment.\"\"\"
     sun_intensity: float = field(default=1.0, metadata={"component": "slider", "minimum": 0, "maximum": 5, "step": 0.1})
     color: str = field(default="#FFDDBB", metadata={"component": "colorpicker", "label": "Sun Color"})
-
 @dataclass
 class EnvironmentConfig:
-    \"\"\"Main configuration for the environment.\"\"\"
     background: Literal["Sky", "Color", "Image"] = field(default="Sky", metadata={"component": "dropdown"})
     lighting: Lighting = field(default_factory=Lighting)
-
-# Dataclasses for the Flyout Demo
 @dataclass
 class EulerSettings:
-    \"\"\"Settings specific to the Euler sampler.\"\"\"
     s_churn: float = field(default=0.0, metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01})
-
 @dataclass
 class DPM_Settings:
-    \"\"\"Settings specific to DPM samplers.\"\"\"
     karras_style: bool = field(default=True, metadata={"label": "Use Karras Sigma Schedule"})
 
-# --- 2. Data Mappings and Initial Instances ---
-
-# Data for Original Sidebar Demo
+# --- 2. Data Mappings and Initial Instances (unchanged) ---
 initial_render_config = RenderConfig()
 initial_env_config = EnvironmentConfig()
-
-# Data for Flyout Demo
 sampler_settings_map_py = {"Euler": EulerSettings(), "DPM++ 2M Karras": DPM_Settings(), "UniPC": None}
 model_settings_map_py = {"SDXL 1.0": DPM_Settings(), "Stable Diffusion 1.5": EulerSettings(), "Pony": None}
 
-# --- 3. CSS & JS Injection function ---
-
+# --- 3. CSS & JS Injection function (unchanged) ---
 def inject_assets():
     \"\"\"
-    This function prepares the payload of CSS and JS code. It's called by the
-    demo.load() event listener when the Gradio app starts.
+    This function prepares the payload of CSS, JS, and Body HTML for injection.
     \"\"\"
-    # Inline code
+    popup_html = \"\"\"<div id="injected_flyout_container" class="flyout-sheet" style="display: none;"></div>\"\"\"
     css_code = ""
     js_code = ""
-
-    # Read from files
+    
     try:
-        with open("custom.css", "r", encoding="utf-8") as f:
+        with open("custom.css", "r", encoding="utf-8") as f: 
             css_code += f.read() + "\n"
-        with open("custom.js", "r", encoding="utf-8") as f:
+        with open("custom.js", "r", encoding="utf-8") as f: 
             js_code += f.read() + "\n"
     except FileNotFoundError as e:
         print(f"Warning: Could not read asset file: {e}")
-
-    return {"js": js_code, "css": css_code}
-
+    return {"js": js_code, "css": css_code, "body_html": popup_html}
 
 # --- 4. Gradio App Build ---
 with gr.Blocks(title="PropertySheet Demos") as demo:
-    head_injector = HeadInjector()
+    html_injector = HTMLInjector()
     gr.Markdown("# PropertySheet Component Demos")
     
+    with gr.Row():
+        # --- Flyout popup ---
+        with gr.Column(elem_id="flyout_panel_source", elem_classes=["flyout-source-hidden"]) as flyout_panel_source:
+            close_btn = gr.Button("×", elem_classes=["flyout-close-btn"])
+            flyout_sheet = PropertySheet(visible=True, container=False, label="Settings", show_group_name_only_one=False, disable_accordion=True)
+            
     with gr.Tabs():
-        with gr.TabItem("Original Sidebar Demo"):
+        with gr.TabItem("Original Sidebar Demo"):           
             gr.Markdown("An example of using the `PropertySheet` component as a traditional sidebar for settings.")
-            
             render_state = gr.State(value=initial_render_config)
             env_state = gr.State(value=initial_env_config)
             sidebar_visible = gr.State(False)
-            
             with gr.Row():
                 with gr.Column(scale=3):            
                     generate = gr.Button("Show Settings", variant="primary")
                     with gr.Row():
                         output_render_json = gr.JSON(label="Live Render State")
                         output_env_json = gr.JSON(label="Live Environment State")
-
                 with gr.Column(scale=1):
-                    render_sheet = PropertySheet(
-                        value=initial_render_config,
-                        label="Render Settings",
-                        width=400,
-                        height=550,
-                        visible=False,
-                        root_label="Generator"       
-                    )
-                    environment_sheet = PropertySheet(
-                        value=initial_env_config,
-                        label="Environment Settings",
-                        width=400,
-                        open=False,
-                        visible=False,
-                        root_label="General"              
-                    )
-
+                    render_sheet = PropertySheet(value=initial_render_config, label="Render Settings", width=400, height=550, visible=False, root_label="Generator")
+                    environment_sheet = PropertySheet(value=initial_env_config, label="Environment Settings", width=400, open=False, visible=False, root_label="General")
             def change_visibility(is_visible, render_cfg, env_cfg):
                 new_visibility = not is_visible
                 button_text = "Hide Settings" if new_visibility else "Show Settings"
-                return (
-                    new_visibility,
-                    gr.update(visible=new_visibility, value=render_cfg),
-                    gr.update(visible=new_visibility, value=env_cfg),
-                    gr.update(value=button_text)
-                )
-            
+                return (new_visibility, gr.update(visible=new_visibility, value=render_cfg), gr.update(visible=new_visibility, value=env_cfg), gr.update(value=button_text))
             def handle_render_change(updated_config: RenderConfig, current_state: RenderConfig):
-                if updated_config is None:
-                    return current_state, asdict(current_state), current_state
-                if updated_config.model.model_type != "Custom":
-                    updated_config.model.custom_model_path = "/path/to/default.safetensors"
+                if updated_config is None: return current_state, asdict(current_state), current_state
+                if updated_config.model.model_type != "Custom": updated_config.model.custom_model_path = "/path/to/default.safetensors"
                 return updated_config, asdict(updated_config), updated_config
-
             def handle_env_change(updated_config: EnvironmentConfig, current_state: EnvironmentConfig):
-                if updated_config is None:
-                    return current_state, asdict(current_state), current_state
+                if updated_config is None: return current_state, asdict(current_state), current_state
                 return updated_config, asdict(updated_config), current_state
-
-            generate.click(
-                fn=change_visibility,
-                inputs=[sidebar_visible, render_state, env_state],
-                outputs=[sidebar_visible, render_sheet, environment_sheet, generate]
-            )
-            
-            render_sheet.change(
-                fn=handle_render_change,
-                inputs=[render_sheet, render_state],
-                outputs=[render_sheet, output_render_json, render_state]
-            )
-            
-            environment_sheet.change(
-                fn=handle_env_change,
-                inputs=[environment_sheet, env_state],
-                outputs=[environment_sheet, output_env_json, env_state]
-            )
-           
-            demo.load(
-                fn=lambda r_cfg, e_cfg: (asdict(r_cfg), asdict(e_cfg)),
-                inputs=[render_state, env_state],
-                outputs=[output_render_json, output_env_json]
-            )
+            generate.click(fn=change_visibility, inputs=[sidebar_visible, render_state, env_state], outputs=[sidebar_visible, render_sheet, environment_sheet, generate])
+            render_sheet.change(fn=handle_render_change, inputs=[render_sheet, render_state], outputs=[render_sheet, output_render_json, render_state])
+            environment_sheet.change(fn=handle_env_change, inputs=[environment_sheet, env_state], outputs=[environment_sheet, output_env_json, env_state])
+            demo.load(fn=lambda r_cfg, e_cfg: (asdict(r_cfg), asdict(e_cfg)), inputs=[render_state, env_state], outputs=[output_render_json, output_env_json])
 
         with gr.TabItem("Flyout Popup Demo"):
             gr.Markdown("An example of attaching a `PropertySheet` as a flyout panel to other components.")
             
+            # --- State Management ---
             flyout_visible = gr.State(False)
             active_anchor_id = gr.State(None)
+            js_data_bridge = gr.Textbox(visible=False, elem_id="js_data_bridge")
 
             with gr.Column(elem_classes=["flyout-context-area"]):
                 with gr.Row(elem_classes=["fake-input-container", "no-border-dropdown"]):
@@ -226,54 +160,60 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
                     model_dd = gr.Dropdown(choices=list(model_settings_map_py.keys()), label="Model", value="SDXL 1.0", elem_id="model_dd", scale=10)
                     model_ear_btn = gr.Button("⚙️", elem_id="model_ear_btn", scale=1, elem_classes=["integrated-ear-btn"])
 
-                with gr.Column(visible=False, elem_id="flyout_panel", elem_classes=["flyout-sheet"]) as flyout_panel:
-                    with gr.Row(elem_classes=["close-btn-row"]):
-                        close_btn = gr.Button("×", elem_classes=["flyout-close-btn"])
-                    flyout_sheet = PropertySheet(visible=False, container=False, label="Settings", show_group_name_only_one=False, disable_accordion=True)
+              
 
+            # --- Event Logic ---
             def handle_flyout_toggle(is_vis, current_anchor, clicked_dropdown_id, settings_obj):
                 if is_vis and current_anchor == clicked_dropdown_id:
-                    return False, None, gr.update(visible=False), gr.update(visible=False, value=None)
+                    js_data = json.dumps({"isVisible": False, "anchorId": None})
+                    return False, None, gr.update(), gr.update(value=js_data)
                 else:
-                    return True, clicked_dropdown_id, gr.update(visible=True), gr.update(visible=True, value=settings_obj)
+                    js_data = json.dumps({"isVisible": True, "anchorId": clicked_dropdown_id})
+                    return True, clicked_dropdown_id, gr.update(value=settings_obj), gr.update(value=js_data)
 
             def update_ear_visibility(selection, settings_map):
                 has_settings = settings_map.get(selection) is not None
                 return gr.update(visible=has_settings)
 
             def on_flyout_change(updated_settings, active_id, sampler_val, model_val):
-                if updated_settings is None or active_id is None: return
+                if updated_settings is None or active_id is None: 
+                    return
                 if active_id == sampler_dd.elem_id:
                     sampler_settings_map_py[sampler_val] = updated_settings
                 elif active_id == model_dd.elem_id:
                     model_settings_map_py[model_val] = updated_settings
             
             def close_the_flyout():
-                return False, None, gr.update(visible=False), gr.update(visible=False, value=None)
+                js_data = json.dumps({"isVisible": False, "anchorId": None})
+                return False, None, gr.update(value=js_data)
+            
+            js_update_flyout = "(jsonData) => { update_flyout_from_state(jsonData); }"
                 
             sampler_dd.change(
                 fn=lambda sel: update_ear_visibility(sel, sampler_settings_map_py),
                 inputs=[sampler_dd],
                 outputs=[sampler_ear_btn]
-            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet])
+            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
             
             sampler_ear_btn.click(
                 fn=lambda is_vis, anchor, sel: handle_flyout_toggle(is_vis, anchor, sampler_dd.elem_id, sampler_settings_map_py.get(sel)),
                 inputs=[flyout_visible, active_anchor_id, sampler_dd],
-                outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet]
-            ).then(fn=None, inputs=None, outputs=None, js=f"() => position_flyout('{sampler_dd.elem_id}')")
+                outputs=[flyout_visible, active_anchor_id, flyout_sheet, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
 
             model_dd.change(
                 fn=lambda sel: update_ear_visibility(sel, model_settings_map_py),
                 inputs=[model_dd],
                 outputs=[model_ear_btn]
-            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet])
+            ).then(fn=close_the_flyout, outputs=[flyout_visible, active_anchor_id, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
             
             model_ear_btn.click(
                 fn=lambda is_vis, anchor, sel: handle_flyout_toggle(is_vis, anchor, model_dd.elem_id, model_settings_map_py.get(sel)),
                 inputs=[flyout_visible, active_anchor_id, model_dd],
-                outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet]
-            ).then(fn=None, inputs=None, outputs=None, js=f"() => position_flyout('{model_dd.elem_id}')")
+                outputs=[flyout_visible, active_anchor_id, flyout_sheet, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
             
             flyout_sheet.change(
                 fn=on_flyout_change,
@@ -284,16 +224,24 @@ with gr.Blocks(title="PropertySheet Demos") as demo:
             close_btn.click(
                 fn=close_the_flyout,
                 inputs=None,
-                outputs=[flyout_visible, active_anchor_id, flyout_panel, flyout_sheet]
-            )
+                outputs=[flyout_visible, active_anchor_id, js_data_bridge]
+            ).then(fn=None, inputs=[js_data_bridge], js=js_update_flyout)
 
             def initial_flyout_setup(sampler_val, model_val):
                 return {
                     sampler_ear_btn: update_ear_visibility(sampler_val, sampler_settings_map_py),
                     model_ear_btn: update_ear_visibility(model_val, model_settings_map_py)
-                }            
-            demo.load(fn=inject_assets, inputs=None, outputs=[head_injector]
-                    ).then(fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn])
+                }
+            
+            # --- App Load ---
+            demo.load(
+                fn=inject_assets, inputs=None, outputs=[html_injector]
+            ).then(
+                fn=initial_flyout_setup, inputs=[sampler_dd, model_dd], outputs=[sampler_ear_btn, model_ear_btn]
+            ).then(
+                fn=None, inputs=None, outputs=None,
+                js="() => { setTimeout(reparent_flyout, 200); }"
+            )
             
 if __name__ == "__main__":
     demo.launch()

src/pyproject.toml

@@ -16,7 +16,7 @@ requires-python = ">=3.10"
 authors = [{ name = "Eliseu Silva", email = "[email protected]" }]
 keywords = ["gradio-custom-component", "gradio-template-Fallback"]
 # Add dependencies here
-dependencies = ["gradio>=4.0,<6.0", "gradio_headinjector>=0.0.4,<0.1.0"]
+dependencies = ["gradio>=4.0,<6.0"]
 classifiers = [
   'Development Status :: 3 - Alpha',
   'Operating System :: OS Independent',
@@ -48,4 +48,4 @@ dev = ["build", "twine"]
 artifacts = ["/backend/gradio_propertysheet/templates", "*.pyi", "/\\backend\\gradio_propertysheet\\templates"]
 
 [tool.hatch.build.targets.wheel]
-packages = ["/backend/gradio_propertysheet"]
+packages = ["/backend/gradio_propertysheet"]