Upload folder using huggingface_hub

README.md

@@ -10,7 +10,7 @@ app_file: space.py
 ---
 
 # `gradio_propertysheet`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20blue"> <a href="https://huggingface.co/spaces/gradio/gradio_propertysheet"><img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Demo-blue"></a><p><span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_propertysheet'>Component GitHub Code</a></span></p>
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.2%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_propertysheet"><img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Demo-blue"></a><p><span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_propertysheet'>Component GitHub Code</a></span></p>
 
 The **PropertySheet** component for Gradio allows you to automatically generate a complete and interactive settings panel from a standard Python `dataclass`. It's designed to bring the power of IDE-like property editors directly into your Gradio applications.
 
@@ -50,115 +50,55 @@ from dataclasses import dataclass, field, asdict
 from typing import Literal
 from gradio_propertysheet import PropertySheet
 
-# --- Main Configuration Dataclasses for the "Render Settings" Sheet ---
+# --- Configuration Data Models ---
+# These dataclasses define the structure for all settings panels.
 @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)"}
-    )
+    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", "help": "The algorithm for the diffusion process."}
-    )
-    steps: int = field(
-        default=25,
-        metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1, "label": "Sampling Steps", "help": "More steps can improve quality."}
-    )
-    cfg_scale: float = field(
-        default=7.0,
-        metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5, "label": "CFG Scale", "help": "How strongly the prompt is adhered to."}
-    )
+    sampler_name: Literal["Euler", "Euler a", "DPM++ 2M Karras", "UniPC"] = field(default="DPM++ 2M Karras", metadata={"component": "dropdown", "label": "Sampler", "help": "The algorithm for the diffusion process."})
+    steps: int = field(default=25, metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1, "label": "Sampling Steps", "help": "More steps can improve quality."})
+    cfg_scale: float = field(default=7.0, metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5, "label": "CFG Scale", "help": "How strongly the prompt is adhered to."})
 
 @dataclass
 class ImageSettings:
     """Settings for image dimensions."""
-    width: int = field(
-        default=1024,
-        metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Width"}
-    )
-    height: int = field(
-        default=1024,
-        metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Height"}
-    )
+    width: int = field(default=1024, metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Width"})
+    height: int = field(default=1024, metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Height"})
 
 @dataclass
 class PostprocessingSettings:
     """Settings for image post-processing effects."""
-    restore_faces: bool = field(
-        default=True,
-        metadata={"label": "Restore Faces", "help": "Use a secondary model to fix distorted faces."}
-    )
-    enable_hr: bool = field(
-        default=False,
-        metadata={"label": "Hires. fix", "help": "Enable a second pass at a higher resolution."}
-    )
-    denoising_strength: float = field(
-        default=0.45,
-        metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01, "label": "Denoising Strength", "interactive_if": {"field": "enable_hr", "value": True}}
-    )
+    restore_faces: bool = field(default=True, metadata={"label": "Restore Faces", "help": "Use a secondary model to fix distorted faces."})
+    enable_hr: bool = field(default=False, metadata={"label": "Hires. fix", "help": "Enable a second pass at a higher resolution."})
+    denoising_strength: float = field(default=0.45, metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01, "label": "Denoising Strength", "interactive_if": {"field": "enable_hr", "value": True}})
 
 @dataclass
 class AdvancedSettings:
     """Advanced and rarely changed settings."""
-    clip_skip: int = field(
-        default=2,
-        metadata={"component": "slider", "minimum": 1, "maximum": 12, "step": 1, "label": "CLIP Skip", "help": "Skip final layers of the text encoder."}
-    )
-    noise_schedule: Literal["Default", "Karras", "Exponential"] = field(
-        default="Karras",
-        metadata={"component": "dropdown", "label": "Noise Schedule"}
-    )
-    do_not_scale_cond_uncond: bool = field(
-        default=False,
-        metadata={"label": "Do not scale cond/uncond"}
-    )
-    s_churn: int = field(
-        default=1,
-        metadata={"component": "number_integer", "minimum": 1, "maximum": 12, "label": "S_churn", "help": "S_churn value for generation."}
-    )
+    clip_skip: int = field(default=2, metadata={"component": "slider", "minimum": 1, "maximum": 12, "step": 1, "label": "CLIP Skip", "help": "Skip final layers of the text encoder."})
+    noise_schedule: Literal["Default", "Karras", "Exponential"] = field(default="Karras", metadata={"component": "dropdown", "label": "Noise Schedule"})
+    do_not_scale_cond_uncond: bool = field(default=False, metadata={"label": "Do not scale cond/uncond"})
+    s_churn: int = field(default=1, metadata={"component": "number_integer", "minimum": 1, "maximum": 12, "label": "S_churn", "help": "S_churn value for generation."})
 
 @dataclass
 class ScriptSettings:
     """Settings for automation scripts like X/Y/Z plots."""
-    script_name: Literal["None", "Prompt matrix", "X/Y/Z plot"] = field(
-        default="None",
-        metadata={"component": "dropdown", "label": "Script"}
-    )
-    x_values: str = field(
-        default="-1, 10, 20",
-        metadata={"label": "X axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}}
-    )
-    y_values: str = field(
-        default="",
-        metadata={"label": "Y axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}}
-    )
+    script_name: Literal["None", "Prompt matrix", "X/Y/Z plot"] = field(default="None", metadata={"component": "dropdown", "label": "Script"})
+    x_values: str = field(default="-1, 10, 20", metadata={"label": "X axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}})
+    y_values: str = field(default="", metadata={"label": "Y axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}})
 
 @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)", "help": "The random seed for generation."}
-    )
-    batch_size: int = field(
-        default=1,
-        metadata={"component": "slider", "minimum": 1, "maximum": 8, "step": 1, "label": "Batch Size"}
-    )
-    # Nested groups
+    seed: int = field(default=-1, metadata={"component": "number_integer", "label": "Seed (-1 for random)", "help": "The random seed for generation."})
+    batch_size: int = field(default=1, metadata={"component": "slider", "minimum": 1, "maximum": 8, "step": 1, "label": "Batch Size"})
     model: ModelSettings = field(default_factory=ModelSettings)
     sampling: SamplingSettings = field(default_factory=SamplingSettings)
     image: ImageSettings = field(default_factory=ImageSettings)
@@ -166,7 +106,6 @@ class RenderConfig:
     scripts: ScriptSettings = field(default_factory=ScriptSettings)
     advanced: AdvancedSettings = field(default_factory=AdvancedSettings)
 
-
 @dataclass
 class Lighting:
     """Lighting settings for the environment."""
@@ -180,8 +119,8 @@ class EnvironmentConfig:
     background: Literal["Sky", "Color", "Image"] = field(default="Sky", metadata={"component": "dropdown"})
     lighting: Lighting = field(default_factory=Lighting)
 
-
 # --- Initial Instances ---
+# Create default instances of the configuration objects.
 initial_render_config = RenderConfig()
 initial_env_config = EnvironmentConfig()
 
@@ -191,66 +130,118 @@ with gr.Blocks(title="PropertySheet Demo") as demo:
     gr.Markdown("An example of a realistic application layout using the `PropertySheet` component as a sidebar for settings.")
     gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_propertysheet'>Component GitHub Code</a></span>")
     
+    # --- Persistent State Management ---
+    # Use gr.State to hold the application's data. This is the "single source of truth".
+    render_state = gr.State(value=initial_render_config)
+    env_state = gr.State(value=initial_env_config)
+    
     with gr.Row():
-        # Main content area on the left
-        with gr.Column(scale=3):
-            #gr.Image(label="Main Viewport", height=500, value=None)
-            gr.Textbox(label="AI Prompt", lines=3, placeholder="Enter your prompt here...")
-            gr.Button("Generate", variant="primary")
+        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")
 
-        # Sidebar with Property Sheets on the right
         with gr.Column(scale=1):
             render_sheet = PropertySheet(
-                value=initial_render_config, 
+                value=initial_render_config,
                 label="Render Settings",
                 width=400,
-                height=550  # Set a fixed height to demonstrate internal scrolling
+                height=550,
+                visible=False           
             )
             environment_sheet = PropertySheet(
                 value=initial_env_config,
                 label="Environment Settings",
                 width=400,
-                open=False  # Start collapsed to show the accordion feature
+                open=False,
+                visible=False                
             )
 
     # --- Event Handlers ---
-    def handle_render_change(updated_config: RenderConfig | None):
-        """Callback to process changes from the Render Settings sheet."""
+    def change_visibility(render_config, env_config):
+        """
+        Handles the visibility toggle for the property sheets.
+        NOTE: This approach of modifying the component object's attribute directly
+        is not reliable for tracking state changes in Gradio. A gr.State object is
+        the recommended way to manage UI state like visibility.
+        """
+        if render_sheet.visible != environment_sheet.visible:
+            render_sheet.visible = False
+            environment_sheet.visible = False
+        
+        if render_sheet.visible == False and environment_sheet.visible == False:
+            render_sheet.visible = True
+            environment_sheet.visible = True
+            return (
+                gr.update(visible=True, value=render_config),
+                gr.update(visible=True, value=env_config),
+                gr.update(value="Hide Settings")
+            )
+        else:
+            render_sheet.visible = False
+            environment_sheet.visible = False
+            return (
+                gr.update(visible=False, value=render_config),
+                gr.update(visible=False, value=env_config),
+                gr.update(value="Show Settings")
+            )
+    
+    def handle_render_change(updated_config: RenderConfig | None, current_state: RenderConfig):
+        """Processes updates from the render PropertySheet and syncs the state."""
         if updated_config is None:
-            return initial_render_config, asdict(initial_render_config)
+            return current_state, asdict(current_state), current_state
         
-        # Example of business logic: reset custom path if not in custom mode
+        # Example of applying business logic
         if updated_config.model.model_type != "Custom":
             updated_config.model.custom_model_path = "/path/to/default.safetensors"
-            
-        return updated_config, asdict(updated_config)
+        
+        return updated_config, asdict(updated_config), updated_config
 
-    def handle_env_change(updated_config: EnvironmentConfig | None):
-        """Callback to process changes from the Environment Settings sheet."""
+    def handle_env_change(updated_config: EnvironmentConfig | None, current_state: EnvironmentConfig):
+        """Processes updates from the environment PropertySheet and syncs the state."""
         if updated_config is None:
-            return initial_env_config, asdict(initial_env_config)
-        return updated_config, asdict(updated_config)
-
+            return current_state, asdict(current_state), current_state
+        return updated_config, asdict(updated_config), updated_config
+
+    # --- Event Listeners ---
+    # Toggle the property sheets' visibility on button click.
+    generate.click(
+        fn=change_visibility,
+        inputs=[render_state, env_state],
+        outputs=[render_sheet, environment_sheet, generate]
+    )
+    
+    # Syncs changes from the UI back to the state and JSON display.
     render_sheet.change(
         fn=handle_render_change,
-        inputs=[render_sheet],
-        outputs=[render_sheet, output_render_json]
+        inputs=[render_sheet, render_state],
+        outputs=[render_sheet, output_render_json, render_state]
     )
+    
+    # Syncs changes from the UI back to the state and JSON display.
     environment_sheet.change(
         fn=handle_env_change,
-        inputs=[environment_sheet],
-        outputs=[environment_sheet, output_env_json]
+        inputs=[environment_sheet, env_state],
+        outputs=[environment_sheet, output_env_json, env_state]
     )
    
-    # Load initial state into JSON viewers on app load
+    # Load initial data into JSON displays on app start.
     demo.load(
         fn=lambda: (asdict(initial_render_config), asdict(initial_env_config)),
         outputs=[output_render_json, output_env_json]
     )
 
+    # Ensure components are populated with state values on load/reload.
+    demo.load(
+        fn=lambda render_config, env_config: (
+            gr.update(value=render_config),
+            gr.update(value=env_config)
+        ),
+        inputs=[render_state, env_state],
+        outputs=[render_sheet, environment_sheet]
+    )
+
 if __name__ == "__main__":
     demo.launch()
 ```
@@ -418,10 +409,10 @@ list[str] | str | None
 
 | name | description |
 |:-----|:------------|
-| `change` | Triggered when a value is changed and committed (e.g., on slider release, or after unfocusing a textbox). |
-| `input` | Triggered on every keystroke or slider movement. |
-| `expand` | Triggered when the main accordion is opened. |
-| `collapse` | Triggered when the main accordion is closed. |
+| `change` |  |
+| `input` |  |
+| `expand` |  |
+| `collapse` |  |
 
 
 
@@ -434,7 +425,8 @@ The impact on the users predict function varies depending on whether the compone
 
 The code snippet below is accurate in cases where the component is used as both an input and an output.
 
-
+- **As output:** Is passed, a new, updated instance of the dataclass.
+- **As input:** Should return, the dataclass instance to process.
 
  ```python
  def predict(
@@ -442,4 +434,4 @@ The code snippet below is accurate in cases where the component is used as both
  ) -> Any:
      return value
  ```
-```
+ 

app.py

@@ -3,115 +3,55 @@ from dataclasses import dataclass, field, asdict
 from typing import Literal
 from gradio_propertysheet import PropertySheet
 
-# --- Main Configuration Dataclasses for the "Render Settings" Sheet ---
+# --- Configuration Data Models ---
+# These dataclasses define the structure for all settings panels.
 @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)"}
-    )
+    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", "help": "The algorithm for the diffusion process."}
-    )
-    steps: int = field(
-        default=25,
-        metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1, "label": "Sampling Steps", "help": "More steps can improve quality."}
-    )
-    cfg_scale: float = field(
-        default=7.0,
-        metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5, "label": "CFG Scale", "help": "How strongly the prompt is adhered to."}
-    )
+    sampler_name: Literal["Euler", "Euler a", "DPM++ 2M Karras", "UniPC"] = field(default="DPM++ 2M Karras", metadata={"component": "dropdown", "label": "Sampler", "help": "The algorithm for the diffusion process."})
+    steps: int = field(default=25, metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1, "label": "Sampling Steps", "help": "More steps can improve quality."})
+    cfg_scale: float = field(default=7.0, metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5, "label": "CFG Scale", "help": "How strongly the prompt is adhered to."})
 
 @dataclass
 class ImageSettings:
     """Settings for image dimensions."""
-    width: int = field(
-        default=1024,
-        metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Width"}
-    )
-    height: int = field(
-        default=1024,
-        metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Height"}
-    )
+    width: int = field(default=1024, metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Width"})
+    height: int = field(default=1024, metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Height"})
 
 @dataclass
 class PostprocessingSettings:
     """Settings for image post-processing effects."""
-    restore_faces: bool = field(
-        default=True,
-        metadata={"label": "Restore Faces", "help": "Use a secondary model to fix distorted faces."}
-    )
-    enable_hr: bool = field(
-        default=False,
-        metadata={"label": "Hires. fix", "help": "Enable a second pass at a higher resolution."}
-    )
-    denoising_strength: float = field(
-        default=0.45,
-        metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01, "label": "Denoising Strength", "interactive_if": {"field": "enable_hr", "value": True}}
-    )
+    restore_faces: bool = field(default=True, metadata={"label": "Restore Faces", "help": "Use a secondary model to fix distorted faces."})
+    enable_hr: bool = field(default=False, metadata={"label": "Hires. fix", "help": "Enable a second pass at a higher resolution."})
+    denoising_strength: float = field(default=0.45, metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01, "label": "Denoising Strength", "interactive_if": {"field": "enable_hr", "value": True}})
 
 @dataclass
 class AdvancedSettings:
     """Advanced and rarely changed settings."""
-    clip_skip: int = field(
-        default=2,
-        metadata={"component": "slider", "minimum": 1, "maximum": 12, "step": 1, "label": "CLIP Skip", "help": "Skip final layers of the text encoder."}
-    )
-    noise_schedule: Literal["Default", "Karras", "Exponential"] = field(
-        default="Karras",
-        metadata={"component": "dropdown", "label": "Noise Schedule"}
-    )
-    do_not_scale_cond_uncond: bool = field(
-        default=False,
-        metadata={"label": "Do not scale cond/uncond"}
-    )
-    s_churn: int = field(
-        default=1,
-        metadata={"component": "number_integer", "minimum": 1, "maximum": 12, "label": "S_churn", "help": "S_churn value for generation."}
-    )
+    clip_skip: int = field(default=2, metadata={"component": "slider", "minimum": 1, "maximum": 12, "step": 1, "label": "CLIP Skip", "help": "Skip final layers of the text encoder."})
+    noise_schedule: Literal["Default", "Karras", "Exponential"] = field(default="Karras", metadata={"component": "dropdown", "label": "Noise Schedule"})
+    do_not_scale_cond_uncond: bool = field(default=False, metadata={"label": "Do not scale cond/uncond"})
+    s_churn: int = field(default=1, metadata={"component": "number_integer", "minimum": 1, "maximum": 12, "label": "S_churn", "help": "S_churn value for generation."})
 
 @dataclass
 class ScriptSettings:
     """Settings for automation scripts like X/Y/Z plots."""
-    script_name: Literal["None", "Prompt matrix", "X/Y/Z plot"] = field(
-        default="None",
-        metadata={"component": "dropdown", "label": "Script"}
-    )
-    x_values: str = field(
-        default="-1, 10, 20",
-        metadata={"label": "X axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}}
-    )
-    y_values: str = field(
-        default="",
-        metadata={"label": "Y axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}}
-    )
+    script_name: Literal["None", "Prompt matrix", "X/Y/Z plot"] = field(default="None", metadata={"component": "dropdown", "label": "Script"})
+    x_values: str = field(default="-1, 10, 20", metadata={"label": "X axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}})
+    y_values: str = field(default="", metadata={"label": "Y axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}})
 
 @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)", "help": "The random seed for generation."}
-    )
-    batch_size: int = field(
-        default=1,
-        metadata={"component": "slider", "minimum": 1, "maximum": 8, "step": 1, "label": "Batch Size"}
-    )
-    # Nested groups
+    seed: int = field(default=-1, metadata={"component": "number_integer", "label": "Seed (-1 for random)", "help": "The random seed for generation."})
+    batch_size: int = field(default=1, metadata={"component": "slider", "minimum": 1, "maximum": 8, "step": 1, "label": "Batch Size"})
     model: ModelSettings = field(default_factory=ModelSettings)
     sampling: SamplingSettings = field(default_factory=SamplingSettings)
     image: ImageSettings = field(default_factory=ImageSettings)
@@ -119,7 +59,6 @@ class RenderConfig:
     scripts: ScriptSettings = field(default_factory=ScriptSettings)
     advanced: AdvancedSettings = field(default_factory=AdvancedSettings)
 
-
 @dataclass
 class Lighting:
     """Lighting settings for the environment."""
@@ -133,8 +72,8 @@ class EnvironmentConfig:
     background: Literal["Sky", "Color", "Image"] = field(default="Sky", metadata={"component": "dropdown"})
     lighting: Lighting = field(default_factory=Lighting)
 
-
 # --- Initial Instances ---
+# Create default instances of the configuration objects.
 initial_render_config = RenderConfig()
 initial_env_config = EnvironmentConfig()
 
@@ -144,65 +83,117 @@ with gr.Blocks(title="PropertySheet Demo") as demo:
     gr.Markdown("An example of a realistic application layout using the `PropertySheet` component as a sidebar for settings.")
     gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_propertysheet'>Component GitHub Code</a></span>")
     
+    # --- Persistent State Management ---
+    # Use gr.State to hold the application's data. This is the "single source of truth".
+    render_state = gr.State(value=initial_render_config)
+    env_state = gr.State(value=initial_env_config)
+    
     with gr.Row():
-        # Main content area on the left
-        with gr.Column(scale=3):
-            #gr.Image(label="Main Viewport", height=500, value=None)
-            gr.Textbox(label="AI Prompt", lines=3, placeholder="Enter your prompt here...")
-            gr.Button("Generate", variant="primary")
+        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")
 
-        # Sidebar with Property Sheets on the right
         with gr.Column(scale=1):
             render_sheet = PropertySheet(
-                value=initial_render_config, 
+                value=initial_render_config,
                 label="Render Settings",
                 width=400,
-                height=550  # Set a fixed height to demonstrate internal scrolling
+                height=550,
+                visible=False           
             )
             environment_sheet = PropertySheet(
                 value=initial_env_config,
                 label="Environment Settings",
                 width=400,
-                open=False  # Start collapsed to show the accordion feature
+                open=False,
+                visible=False                
             )
 
     # --- Event Handlers ---
-    def handle_render_change(updated_config: RenderConfig | None):
-        """Callback to process changes from the Render Settings sheet."""
+    def change_visibility(render_config, env_config):
+        """
+        Handles the visibility toggle for the property sheets.
+        NOTE: This approach of modifying the component object's attribute directly
+        is not reliable for tracking state changes in Gradio. A gr.State object is
+        the recommended way to manage UI state like visibility.
+        """
+        if render_sheet.visible != environment_sheet.visible:
+            render_sheet.visible = False
+            environment_sheet.visible = False
+        
+        if render_sheet.visible == False and environment_sheet.visible == False:
+            render_sheet.visible = True
+            environment_sheet.visible = True
+            return (
+                gr.update(visible=True, value=render_config),
+                gr.update(visible=True, value=env_config),
+                gr.update(value="Hide Settings")
+            )
+        else:
+            render_sheet.visible = False
+            environment_sheet.visible = False
+            return (
+                gr.update(visible=False, value=render_config),
+                gr.update(visible=False, value=env_config),
+                gr.update(value="Show Settings")
+            )
+    
+    def handle_render_change(updated_config: RenderConfig | None, current_state: RenderConfig):
+        """Processes updates from the render PropertySheet and syncs the state."""
         if updated_config is None:
-            return initial_render_config, asdict(initial_render_config)
+            return current_state, asdict(current_state), current_state
         
-        # Example of business logic: reset custom path if not in custom mode
+        # Example of applying business logic
         if updated_config.model.model_type != "Custom":
             updated_config.model.custom_model_path = "/path/to/default.safetensors"
-            
-        return updated_config, asdict(updated_config)
+        
+        return updated_config, asdict(updated_config), updated_config
 
-    def handle_env_change(updated_config: EnvironmentConfig | None):
-        """Callback to process changes from the Environment Settings sheet."""
+    def handle_env_change(updated_config: EnvironmentConfig | None, current_state: EnvironmentConfig):
+        """Processes updates from the environment PropertySheet and syncs the state."""
         if updated_config is None:
-            return initial_env_config, asdict(initial_env_config)
-        return updated_config, asdict(updated_config)
+            return current_state, asdict(current_state), current_state
+        return updated_config, asdict(updated_config), updated_config
 
+    # --- Event Listeners ---
+    # Toggle the property sheets' visibility on button click.
+    generate.click(
+        fn=change_visibility,
+        inputs=[render_state, env_state],
+        outputs=[render_sheet, environment_sheet, generate]
+    )
+    
+    # Syncs changes from the UI back to the state and JSON display.
     render_sheet.change(
         fn=handle_render_change,
-        inputs=[render_sheet],
-        outputs=[render_sheet, output_render_json]
+        inputs=[render_sheet, render_state],
+        outputs=[render_sheet, output_render_json, render_state]
     )
+    
+    # Syncs changes from the UI back to the state and JSON display.
     environment_sheet.change(
         fn=handle_env_change,
-        inputs=[environment_sheet],
-        outputs=[environment_sheet, output_env_json]
+        inputs=[environment_sheet, env_state],
+        outputs=[environment_sheet, output_env_json, env_state]
     )
    
-    # Load initial state into JSON viewers on app load
+    # Load initial data into JSON displays on app start.
     demo.load(
         fn=lambda: (asdict(initial_render_config), asdict(initial_env_config)),
         outputs=[output_render_json, output_env_json]
     )
 
+    # Ensure components are populated with state values on load/reload.
+    demo.load(
+        fn=lambda render_config, env_config: (
+            gr.update(value=render_config),
+            gr.update(value=env_config)
+        ),
+        inputs=[render_state, env_state],
+        outputs=[render_sheet, environment_sheet]
+    )
+
 if __name__ == "__main__":
     demo.launch()

space.py

@@ -3,7 +3,7 @@ import gradio as gr
 from app import demo as app
 import os
 
-_docs = {'PropertySheet': {'description': 'A Gradio component that renders a dynamic UI from a Python dataclass instance.', 'members': {'__init__': {'value': {'type': 'typing.Optional[typing.Any][Any, None]', 'default': 'None', 'description': 'The initial dataclass instance to render.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The main label for the component, displayed in the accordion header.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, the component will be hidden.'}, 'open': {'type': 'bool', 'default': 'True', 'description': 'If False, the accordion will be collapsed by default.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the DOM.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'The relative size of the component in its container.'}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': 'The width of the component in pixels.'}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': "The maximum height of the component's content area in pixels before scrolling."}, 'min_width': {'type': 'int | None', 'default': 'None', 'description': 'The minimum width of the component in pixels.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, wraps the component in a container with a background.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the DOM.'}}, 'postprocess': {'value': {'type': 'Any', 'description': None}}, 'preprocess': {'return': {'type': 'Any', 'description': None}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': ''}, 'input': {'type': None, 'default': None, 'description': ''}, 'expand': {'type': None, 'default': None, 'description': ''}, 'collapse': {'type': None, 'default': None, 'description': ''}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'PropertySheet': []}}}
+_docs = {'PropertySheet': {'description': 'A Gradio component that renders a dynamic UI from a Python dataclass instance.\nIt allows for nested settings and automatically infers input types.', 'members': {'__init__': {'value': {'type': 'typing.Optional[typing.Any][Any, None]', 'default': 'None', 'description': 'The initial dataclass instance to render.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The main label for the component, displayed in the accordion header.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, the component will be hidden.'}, 'open': {'type': 'bool', 'default': 'True', 'description': 'If False, the accordion will be collapsed by default.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the DOM.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'The relative size of the component in its container.'}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': 'The width of the component in pixels.'}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': "The maximum height of the component's content area in pixels before scrolling."}, 'min_width': {'type': 'int | None', 'default': 'None', 'description': 'The minimum width of the component in pixels.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, wraps the component in a container with a background.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the DOM.'}}, 'postprocess': {'value': {'type': 'Any', 'description': 'The dataclass instance to process.'}}, 'preprocess': {'return': {'type': 'Any', 'description': 'A new, updated instance of the dataclass.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': ''}, 'input': {'type': None, 'default': None, 'description': ''}, 'expand': {'type': None, 'default': None, 'description': ''}, 'collapse': {'type': None, 'default': None, 'description': ''}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'PropertySheet': []}}}
 
 abs_path = os.path.join(os.path.dirname(__file__), "css.css")
 
@@ -21,7 +21,7 @@ with gr.Blocks(
 # `gradio_propertysheet`
 
 <div style="display: flex; gap: 7px;">
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+<a href="https://pypi.org/project/gradio_propertysheet/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_propertysheet"></a>  
 </div>
 
 Property sheet
@@ -43,115 +43,55 @@ from dataclasses import dataclass, field, asdict
 from typing import Literal
 from gradio_propertysheet import PropertySheet
 
-# --- Main Configuration Dataclasses for the "Render Settings" Sheet ---
+# --- Configuration Data Models ---
+# These dataclasses define the structure for all settings panels.
 @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)"}
-    )
+    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", "help": "The algorithm for the diffusion process."}
-    )
-    steps: int = field(
-        default=25,
-        metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1, "label": "Sampling Steps", "help": "More steps can improve quality."}
-    )
-    cfg_scale: float = field(
-        default=7.0,
-        metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5, "label": "CFG Scale", "help": "How strongly the prompt is adhered to."}
-    )
+    sampler_name: Literal["Euler", "Euler a", "DPM++ 2M Karras", "UniPC"] = field(default="DPM++ 2M Karras", metadata={"component": "dropdown", "label": "Sampler", "help": "The algorithm for the diffusion process."})
+    steps: int = field(default=25, metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1, "label": "Sampling Steps", "help": "More steps can improve quality."})
+    cfg_scale: float = field(default=7.0, metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5, "label": "CFG Scale", "help": "How strongly the prompt is adhered to."})
 
 @dataclass
 class ImageSettings:
     \"\"\"Settings for image dimensions.\"\"\"
-    width: int = field(
-        default=1024,
-        metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Width"}
-    )
-    height: int = field(
-        default=1024,
-        metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Height"}
-    )
+    width: int = field(default=1024, metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Width"})
+    height: int = field(default=1024, metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Height"})
 
 @dataclass
 class PostprocessingSettings:
     \"\"\"Settings for image post-processing effects.\"\"\"
-    restore_faces: bool = field(
-        default=True,
-        metadata={"label": "Restore Faces", "help": "Use a secondary model to fix distorted faces."}
-    )
-    enable_hr: bool = field(
-        default=False,
-        metadata={"label": "Hires. fix", "help": "Enable a second pass at a higher resolution."}
-    )
-    denoising_strength: float = field(
-        default=0.45,
-        metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01, "label": "Denoising Strength", "interactive_if": {"field": "enable_hr", "value": True}}
-    )
+    restore_faces: bool = field(default=True, metadata={"label": "Restore Faces", "help": "Use a secondary model to fix distorted faces."})
+    enable_hr: bool = field(default=False, metadata={"label": "Hires. fix", "help": "Enable a second pass at a higher resolution."})
+    denoising_strength: float = field(default=0.45, metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01, "label": "Denoising Strength", "interactive_if": {"field": "enable_hr", "value": True}})
 
 @dataclass
 class AdvancedSettings:
     \"\"\"Advanced and rarely changed settings.\"\"\"
-    clip_skip: int = field(
-        default=2,
-        metadata={"component": "slider", "minimum": 1, "maximum": 12, "step": 1, "label": "CLIP Skip", "help": "Skip final layers of the text encoder."}
-    )
-    noise_schedule: Literal["Default", "Karras", "Exponential"] = field(
-        default="Karras",
-        metadata={"component": "dropdown", "label": "Noise Schedule"}
-    )
-    do_not_scale_cond_uncond: bool = field(
-        default=False,
-        metadata={"label": "Do not scale cond/uncond"}
-    )
-    s_churn: int = field(
-        default=1,
-        metadata={"component": "number_integer", "minimum": 1, "maximum": 12, "label": "S_churn", "help": "S_churn value for generation."}
-    )
+    clip_skip: int = field(default=2, metadata={"component": "slider", "minimum": 1, "maximum": 12, "step": 1, "label": "CLIP Skip", "help": "Skip final layers of the text encoder."})
+    noise_schedule: Literal["Default", "Karras", "Exponential"] = field(default="Karras", metadata={"component": "dropdown", "label": "Noise Schedule"})
+    do_not_scale_cond_uncond: bool = field(default=False, metadata={"label": "Do not scale cond/uncond"})
+    s_churn: int = field(default=1, metadata={"component": "number_integer", "minimum": 1, "maximum": 12, "label": "S_churn", "help": "S_churn value for generation."})
 
 @dataclass
 class ScriptSettings:
     \"\"\"Settings for automation scripts like X/Y/Z plots.\"\"\"
-    script_name: Literal["None", "Prompt matrix", "X/Y/Z plot"] = field(
-        default="None",
-        metadata={"component": "dropdown", "label": "Script"}
-    )
-    x_values: str = field(
-        default="-1, 10, 20",
-        metadata={"label": "X axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}}
-    )
-    y_values: str = field(
-        default="",
-        metadata={"label": "Y axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}}
-    )
+    script_name: Literal["None", "Prompt matrix", "X/Y/Z plot"] = field(default="None", metadata={"component": "dropdown", "label": "Script"})
+    x_values: str = field(default="-1, 10, 20", metadata={"label": "X axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}})
+    y_values: str = field(default="", metadata={"label": "Y axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}})
 
 @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)", "help": "The random seed for generation."}
-    )
-    batch_size: int = field(
-        default=1,
-        metadata={"component": "slider", "minimum": 1, "maximum": 8, "step": 1, "label": "Batch Size"}
-    )
-    # Nested groups
+    seed: int = field(default=-1, metadata={"component": "number_integer", "label": "Seed (-1 for random)", "help": "The random seed for generation."})
+    batch_size: int = field(default=1, metadata={"component": "slider", "minimum": 1, "maximum": 8, "step": 1, "label": "Batch Size"})
     model: ModelSettings = field(default_factory=ModelSettings)
     sampling: SamplingSettings = field(default_factory=SamplingSettings)
     image: ImageSettings = field(default_factory=ImageSettings)
@@ -159,7 +99,6 @@ class RenderConfig:
     scripts: ScriptSettings = field(default_factory=ScriptSettings)
     advanced: AdvancedSettings = field(default_factory=AdvancedSettings)
 
-
 @dataclass
 class Lighting:
     \"\"\"Lighting settings for the environment.\"\"\"
@@ -173,8 +112,8 @@ class EnvironmentConfig:
     background: Literal["Sky", "Color", "Image"] = field(default="Sky", metadata={"component": "dropdown"})
     lighting: Lighting = field(default_factory=Lighting)
 
-
 # --- Initial Instances ---
+# Create default instances of the configuration objects.
 initial_render_config = RenderConfig()
 initial_env_config = EnvironmentConfig()
 
@@ -184,66 +123,118 @@ with gr.Blocks(title="PropertySheet Demo") as demo:
     gr.Markdown("An example of a realistic application layout using the `PropertySheet` component as a sidebar for settings.")
     gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_propertysheet'>Component GitHub Code</a></span>")
     
+    # --- Persistent State Management ---
+    # Use gr.State to hold the application's data. This is the "single source of truth".
+    render_state = gr.State(value=initial_render_config)
+    env_state = gr.State(value=initial_env_config)
+    
     with gr.Row():
-        # Main content area on the left
-        with gr.Column(scale=3):
-            #gr.Image(label="Main Viewport", height=500, value=None)
-            gr.Textbox(label="AI Prompt", lines=3, placeholder="Enter your prompt here...")
-            gr.Button("Generate", variant="primary")
+        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")
 
-        # Sidebar with Property Sheets on the right
         with gr.Column(scale=1):
             render_sheet = PropertySheet(
-                value=initial_render_config, 
+                value=initial_render_config,
                 label="Render Settings",
                 width=400,
-                height=550  # Set a fixed height to demonstrate internal scrolling
+                height=550,
+                visible=False           
             )
             environment_sheet = PropertySheet(
                 value=initial_env_config,
                 label="Environment Settings",
                 width=400,
-                open=False  # Start collapsed to show the accordion feature
+                open=False,
+                visible=False                
             )
 
     # --- Event Handlers ---
-    def handle_render_change(updated_config: RenderConfig | None):
-        \"\"\"Callback to process changes from the Render Settings sheet.\"\"\"
+    def change_visibility(render_config, env_config):
+        \"\"\"
+        Handles the visibility toggle for the property sheets.
+        NOTE: This approach of modifying the component object's attribute directly
+        is not reliable for tracking state changes in Gradio. A gr.State object is
+        the recommended way to manage UI state like visibility.
+        \"\"\"
+        if render_sheet.visible != environment_sheet.visible:
+            render_sheet.visible = False
+            environment_sheet.visible = False
+        
+        if render_sheet.visible == False and environment_sheet.visible == False:
+            render_sheet.visible = True
+            environment_sheet.visible = True
+            return (
+                gr.update(visible=True, value=render_config),
+                gr.update(visible=True, value=env_config),
+                gr.update(value="Hide Settings")
+            )
+        else:
+            render_sheet.visible = False
+            environment_sheet.visible = False
+            return (
+                gr.update(visible=False, value=render_config),
+                gr.update(visible=False, value=env_config),
+                gr.update(value="Show Settings")
+            )
+    
+    def handle_render_change(updated_config: RenderConfig | None, current_state: RenderConfig):
+        \"\"\"Processes updates from the render PropertySheet and syncs the state.\"\"\"
         if updated_config is None:
-            return initial_render_config, asdict(initial_render_config)
+            return current_state, asdict(current_state), current_state
         
-        # Example of business logic: reset custom path if not in custom mode
+        # Example of applying business logic
         if updated_config.model.model_type != "Custom":
             updated_config.model.custom_model_path = "/path/to/default.safetensors"
-            
-        return updated_config, asdict(updated_config)
+        
+        return updated_config, asdict(updated_config), updated_config
 
-    def handle_env_change(updated_config: EnvironmentConfig | None):
-        \"\"\"Callback to process changes from the Environment Settings sheet.\"\"\"
+    def handle_env_change(updated_config: EnvironmentConfig | None, current_state: EnvironmentConfig):
+        \"\"\"Processes updates from the environment PropertySheet and syncs the state.\"\"\"
         if updated_config is None:
-            return initial_env_config, asdict(initial_env_config)
-        return updated_config, asdict(updated_config)
-
+            return current_state, asdict(current_state), current_state
+        return updated_config, asdict(updated_config), updated_config
+
+    # --- Event Listeners ---
+    # Toggle the property sheets' visibility on button click.
+    generate.click(
+        fn=change_visibility,
+        inputs=[render_state, env_state],
+        outputs=[render_sheet, environment_sheet, generate]
+    )
+    
+    # Syncs changes from the UI back to the state and JSON display.
     render_sheet.change(
         fn=handle_render_change,
-        inputs=[render_sheet],
-        outputs=[render_sheet, output_render_json]
+        inputs=[render_sheet, render_state],
+        outputs=[render_sheet, output_render_json, render_state]
     )
+    
+    # Syncs changes from the UI back to the state and JSON display.
     environment_sheet.change(
         fn=handle_env_change,
-        inputs=[environment_sheet],
-        outputs=[environment_sheet, output_env_json]
+        inputs=[environment_sheet, env_state],
+        outputs=[environment_sheet, output_env_json, env_state]
     )
    
-    # Load initial state into JSON viewers on app load
+    # Load initial data into JSON displays on app start.
     demo.load(
         fn=lambda: (asdict(initial_render_config), asdict(initial_env_config)),
         outputs=[output_render_json, output_env_json]
     )
 
+    # Ensure components are populated with state values on load/reload.
+    demo.load(
+        fn=lambda render_config, env_config: (
+            gr.update(value=render_config),
+            gr.update(value=env_config)
+        ),
+        inputs=[render_state, env_state],
+        outputs=[render_sheet, environment_sheet]
+    )
+
 if __name__ == "__main__":
     demo.launch()
 ```
@@ -276,7 +267,8 @@ The impact on the users predict function varies depending on whether the compone
 
 The code snippet below is accurate in cases where the component is used as both an input and an output.
 
-
+- **As input:** Is passed, a new, updated instance of the dataclass.
+- **As output:** Should return, the dataclass instance to process.
 
  ```python
 def predict(

src/README.md

@@ -10,7 +10,7 @@ app_file: space.py
 ---
 
 # `gradio_propertysheet`
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20blue"> <a href="https://huggingface.co/spaces/gradio/gradio_propertysheet"><img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Demo-blue"></a><p><span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_propertysheet'>Component GitHub Code</a></span></p>
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.2%20-%20blue"> <a href="https://huggingface.co/spaces/elismasilva/gradio_propertysheet"><img src="https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Demo-blue"></a><p><span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_propertysheet'>Component GitHub Code</a></span></p>
 
 The **PropertySheet** component for Gradio allows you to automatically generate a complete and interactive settings panel from a standard Python `dataclass`. It's designed to bring the power of IDE-like property editors directly into your Gradio applications.
 
@@ -50,115 +50,55 @@ from dataclasses import dataclass, field, asdict
 from typing import Literal
 from gradio_propertysheet import PropertySheet
 
-# --- Main Configuration Dataclasses for the "Render Settings" Sheet ---
+# --- Configuration Data Models ---
+# These dataclasses define the structure for all settings panels.
 @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)"}
-    )
+    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", "help": "The algorithm for the diffusion process."}
-    )
-    steps: int = field(
-        default=25,
-        metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1, "label": "Sampling Steps", "help": "More steps can improve quality."}
-    )
-    cfg_scale: float = field(
-        default=7.0,
-        metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5, "label": "CFG Scale", "help": "How strongly the prompt is adhered to."}
-    )
+    sampler_name: Literal["Euler", "Euler a", "DPM++ 2M Karras", "UniPC"] = field(default="DPM++ 2M Karras", metadata={"component": "dropdown", "label": "Sampler", "help": "The algorithm for the diffusion process."})
+    steps: int = field(default=25, metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1, "label": "Sampling Steps", "help": "More steps can improve quality."})
+    cfg_scale: float = field(default=7.0, metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5, "label": "CFG Scale", "help": "How strongly the prompt is adhered to."})
 
 @dataclass
 class ImageSettings:
     """Settings for image dimensions."""
-    width: int = field(
-        default=1024,
-        metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Width"}
-    )
-    height: int = field(
-        default=1024,
-        metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Height"}
-    )
+    width: int = field(default=1024, metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Width"})
+    height: int = field(default=1024, metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Height"})
 
 @dataclass
 class PostprocessingSettings:
     """Settings for image post-processing effects."""
-    restore_faces: bool = field(
-        default=True,
-        metadata={"label": "Restore Faces", "help": "Use a secondary model to fix distorted faces."}
-    )
-    enable_hr: bool = field(
-        default=False,
-        metadata={"label": "Hires. fix", "help": "Enable a second pass at a higher resolution."}
-    )
-    denoising_strength: float = field(
-        default=0.45,
-        metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01, "label": "Denoising Strength", "interactive_if": {"field": "enable_hr", "value": True}}
-    )
+    restore_faces: bool = field(default=True, metadata={"label": "Restore Faces", "help": "Use a secondary model to fix distorted faces."})
+    enable_hr: bool = field(default=False, metadata={"label": "Hires. fix", "help": "Enable a second pass at a higher resolution."})
+    denoising_strength: float = field(default=0.45, metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01, "label": "Denoising Strength", "interactive_if": {"field": "enable_hr", "value": True}})
 
 @dataclass
 class AdvancedSettings:
     """Advanced and rarely changed settings."""
-    clip_skip: int = field(
-        default=2,
-        metadata={"component": "slider", "minimum": 1, "maximum": 12, "step": 1, "label": "CLIP Skip", "help": "Skip final layers of the text encoder."}
-    )
-    noise_schedule: Literal["Default", "Karras", "Exponential"] = field(
-        default="Karras",
-        metadata={"component": "dropdown", "label": "Noise Schedule"}
-    )
-    do_not_scale_cond_uncond: bool = field(
-        default=False,
-        metadata={"label": "Do not scale cond/uncond"}
-    )
-    s_churn: int = field(
-        default=1,
-        metadata={"component": "number_integer", "minimum": 1, "maximum": 12, "label": "S_churn", "help": "S_churn value for generation."}
-    )
+    clip_skip: int = field(default=2, metadata={"component": "slider", "minimum": 1, "maximum": 12, "step": 1, "label": "CLIP Skip", "help": "Skip final layers of the text encoder."})
+    noise_schedule: Literal["Default", "Karras", "Exponential"] = field(default="Karras", metadata={"component": "dropdown", "label": "Noise Schedule"})
+    do_not_scale_cond_uncond: bool = field(default=False, metadata={"label": "Do not scale cond/uncond"})
+    s_churn: int = field(default=1, metadata={"component": "number_integer", "minimum": 1, "maximum": 12, "label": "S_churn", "help": "S_churn value for generation."})
 
 @dataclass
 class ScriptSettings:
     """Settings for automation scripts like X/Y/Z plots."""
-    script_name: Literal["None", "Prompt matrix", "X/Y/Z plot"] = field(
-        default="None",
-        metadata={"component": "dropdown", "label": "Script"}
-    )
-    x_values: str = field(
-        default="-1, 10, 20",
-        metadata={"label": "X axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}}
-    )
-    y_values: str = field(
-        default="",
-        metadata={"label": "Y axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}}
-    )
+    script_name: Literal["None", "Prompt matrix", "X/Y/Z plot"] = field(default="None", metadata={"component": "dropdown", "label": "Script"})
+    x_values: str = field(default="-1, 10, 20", metadata={"label": "X axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}})
+    y_values: str = field(default="", metadata={"label": "Y axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}})
 
 @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)", "help": "The random seed for generation."}
-    )
-    batch_size: int = field(
-        default=1,
-        metadata={"component": "slider", "minimum": 1, "maximum": 8, "step": 1, "label": "Batch Size"}
-    )
-    # Nested groups
+    seed: int = field(default=-1, metadata={"component": "number_integer", "label": "Seed (-1 for random)", "help": "The random seed for generation."})
+    batch_size: int = field(default=1, metadata={"component": "slider", "minimum": 1, "maximum": 8, "step": 1, "label": "Batch Size"})
     model: ModelSettings = field(default_factory=ModelSettings)
     sampling: SamplingSettings = field(default_factory=SamplingSettings)
     image: ImageSettings = field(default_factory=ImageSettings)
@@ -166,7 +106,6 @@ class RenderConfig:
     scripts: ScriptSettings = field(default_factory=ScriptSettings)
     advanced: AdvancedSettings = field(default_factory=AdvancedSettings)
 
-
 @dataclass
 class Lighting:
     """Lighting settings for the environment."""
@@ -180,8 +119,8 @@ class EnvironmentConfig:
     background: Literal["Sky", "Color", "Image"] = field(default="Sky", metadata={"component": "dropdown"})
     lighting: Lighting = field(default_factory=Lighting)
 
-
 # --- Initial Instances ---
+# Create default instances of the configuration objects.
 initial_render_config = RenderConfig()
 initial_env_config = EnvironmentConfig()
 
@@ -191,66 +130,118 @@ with gr.Blocks(title="PropertySheet Demo") as demo:
     gr.Markdown("An example of a realistic application layout using the `PropertySheet` component as a sidebar for settings.")
     gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_propertysheet'>Component GitHub Code</a></span>")
     
+    # --- Persistent State Management ---
+    # Use gr.State to hold the application's data. This is the "single source of truth".
+    render_state = gr.State(value=initial_render_config)
+    env_state = gr.State(value=initial_env_config)
+    
     with gr.Row():
-        # Main content area on the left
-        with gr.Column(scale=3):
-            #gr.Image(label="Main Viewport", height=500, value=None)
-            gr.Textbox(label="AI Prompt", lines=3, placeholder="Enter your prompt here...")
-            gr.Button("Generate", variant="primary")
+        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")
 
-        # Sidebar with Property Sheets on the right
         with gr.Column(scale=1):
             render_sheet = PropertySheet(
-                value=initial_render_config, 
+                value=initial_render_config,
                 label="Render Settings",
                 width=400,
-                height=550  # Set a fixed height to demonstrate internal scrolling
+                height=550,
+                visible=False           
             )
             environment_sheet = PropertySheet(
                 value=initial_env_config,
                 label="Environment Settings",
                 width=400,
-                open=False  # Start collapsed to show the accordion feature
+                open=False,
+                visible=False                
             )
 
     # --- Event Handlers ---
-    def handle_render_change(updated_config: RenderConfig | None):
-        """Callback to process changes from the Render Settings sheet."""
+    def change_visibility(render_config, env_config):
+        """
+        Handles the visibility toggle for the property sheets.
+        NOTE: This approach of modifying the component object's attribute directly
+        is not reliable for tracking state changes in Gradio. A gr.State object is
+        the recommended way to manage UI state like visibility.
+        """
+        if render_sheet.visible != environment_sheet.visible:
+            render_sheet.visible = False
+            environment_sheet.visible = False
+        
+        if render_sheet.visible == False and environment_sheet.visible == False:
+            render_sheet.visible = True
+            environment_sheet.visible = True
+            return (
+                gr.update(visible=True, value=render_config),
+                gr.update(visible=True, value=env_config),
+                gr.update(value="Hide Settings")
+            )
+        else:
+            render_sheet.visible = False
+            environment_sheet.visible = False
+            return (
+                gr.update(visible=False, value=render_config),
+                gr.update(visible=False, value=env_config),
+                gr.update(value="Show Settings")
+            )
+    
+    def handle_render_change(updated_config: RenderConfig | None, current_state: RenderConfig):
+        """Processes updates from the render PropertySheet and syncs the state."""
         if updated_config is None:
-            return initial_render_config, asdict(initial_render_config)
+            return current_state, asdict(current_state), current_state
         
-        # Example of business logic: reset custom path if not in custom mode
+        # Example of applying business logic
         if updated_config.model.model_type != "Custom":
             updated_config.model.custom_model_path = "/path/to/default.safetensors"
-            
-        return updated_config, asdict(updated_config)
+        
+        return updated_config, asdict(updated_config), updated_config
 
-    def handle_env_change(updated_config: EnvironmentConfig | None):
-        """Callback to process changes from the Environment Settings sheet."""
+    def handle_env_change(updated_config: EnvironmentConfig | None, current_state: EnvironmentConfig):
+        """Processes updates from the environment PropertySheet and syncs the state."""
         if updated_config is None:
-            return initial_env_config, asdict(initial_env_config)
-        return updated_config, asdict(updated_config)
-
+            return current_state, asdict(current_state), current_state
+        return updated_config, asdict(updated_config), updated_config
+
+    # --- Event Listeners ---
+    # Toggle the property sheets' visibility on button click.
+    generate.click(
+        fn=change_visibility,
+        inputs=[render_state, env_state],
+        outputs=[render_sheet, environment_sheet, generate]
+    )
+    
+    # Syncs changes from the UI back to the state and JSON display.
     render_sheet.change(
         fn=handle_render_change,
-        inputs=[render_sheet],
-        outputs=[render_sheet, output_render_json]
+        inputs=[render_sheet, render_state],
+        outputs=[render_sheet, output_render_json, render_state]
     )
+    
+    # Syncs changes from the UI back to the state and JSON display.
     environment_sheet.change(
         fn=handle_env_change,
-        inputs=[environment_sheet],
-        outputs=[environment_sheet, output_env_json]
+        inputs=[environment_sheet, env_state],
+        outputs=[environment_sheet, output_env_json, env_state]
     )
    
-    # Load initial state into JSON viewers on app load
+    # Load initial data into JSON displays on app start.
     demo.load(
         fn=lambda: (asdict(initial_render_config), asdict(initial_env_config)),
         outputs=[output_render_json, output_env_json]
     )
 
+    # Ensure components are populated with state values on load/reload.
+    demo.load(
+        fn=lambda render_config, env_config: (
+            gr.update(value=render_config),
+            gr.update(value=env_config)
+        ),
+        inputs=[render_state, env_state],
+        outputs=[render_sheet, environment_sheet]
+    )
+
 if __name__ == "__main__":
     demo.launch()
 ```
@@ -418,10 +409,10 @@ list[str] | str | None
 
 | name | description |
 |:-----|:------------|
-| `change` | Triggered when a value is changed and committed (e.g., on slider release, or after unfocusing a textbox). |
-| `input` | Triggered on every keystroke or slider movement. |
-| `expand` | Triggered when the main accordion is opened. |
-| `collapse` | Triggered when the main accordion is closed. |
+| `change` |  |
+| `input` |  |
+| `expand` |  |
+| `collapse` |  |
 
 
 
@@ -434,7 +425,8 @@ The impact on the users predict function varies depending on whether the compone
 
 The code snippet below is accurate in cases where the component is used as both an input and an output.
 
-
+- **As output:** Is passed, a new, updated instance of the dataclass.
+- **As input:** Should return, the dataclass instance to process.
 
  ```python
  def predict(
@@ -442,4 +434,4 @@ The code snippet below is accurate in cases where the component is used as both
  ) -> Any:
      return value
  ```
-```
+ 

src/backend/gradio_propertysheet/propertysheet.py

@@ -7,14 +7,17 @@ from gradio.components.base import Component
 def prop_meta(**kwargs) -> dataclasses.Field:
     """
     A helper function to create a dataclass field with Gradio-specific metadata.
+    
+    Returns:
+        A dataclasses.Field instance with the provided metadata.
     """
     return dataclasses.field(metadata=kwargs)
 
 class PropertySheet(Component):
     """
     A Gradio component that renders a dynamic UI from a Python dataclass instance.
+    It allows for nested settings and automatically infers input types.
     """
-    
     EVENTS = ["change", "input", "expand", "collapse"]
 
     def __init__(
@@ -52,8 +55,11 @@ class PropertySheet(Component):
         if value is not None and not dataclasses.is_dataclass(value):
             raise ValueError("Initial value must be a dataclass instance")
         
-        self._dataclass_value = copy.deepcopy(value)
-        self._initial_value = copy.deepcopy(value)
+        # Store the current dataclass instance and its type.
+        # These might be None if the component is initialized without a value.
+        self._dataclass_value = copy.deepcopy(value) if value is not None else None
+        self._dataclass_type = type(value) if dataclasses.is_dataclass(value) else None
+        
         self.width = width
         self.height = height
         self.open = open
@@ -67,6 +73,15 @@ class PropertySheet(Component):
     def _extract_prop_metadata(self, obj: Any, field: dataclasses.Field) -> Dict[str, Any]:
         """
         Inspects a dataclass field and extracts metadata for UI rendering.
+
+        This function infers the appropriate frontend component (e.g., slider, checkbox)
+        based on the field's type hint if not explicitly specified in the metadata.
+        
+        Args:
+            obj: The dataclass instance containing the field.
+            field: The dataclasses.Field object to inspect.
+        Returns:
+            A dictionary of metadata for the frontend to render a property control.
         """
         metadata = field.metadata.copy()
         metadata["name"] = field.name
@@ -94,11 +109,23 @@ class PropertySheet(Component):
     def postprocess(self, value: Any) -> List[Dict[str, Any]]:
         """
         Converts the Python dataclass instance into a JSON schema for the frontend.
-        It also synchronizes the component's internal state.
+
+        Crucially, this method also acts as a "state guardian". When Gradio calls it
+        with a valid dataclass (e.g., during a `gr.update` that makes the component visible),
+        it synchronizes the component's internal state (`_dataclass_value` and `_dataclass_type`),
+        ensuring the object is "rehydrated" and ready for `preprocess`.
+        
+        Args:
+            value: The dataclass instance to process.
+        Returns:
+            A list representing the JSON schema for the frontend UI.
         """
         if dataclasses.is_dataclass(value):
             self._dataclass_value = copy.deepcopy(value)
-
+            # Restore the dataclass type if it was lost (e.g., on re-initialization).
+            if self._dataclass_type is None:
+                self._dataclass_type = type(value)
+        
         if value is None or not dataclasses.is_dataclass(value): 
             return []
             
@@ -126,52 +153,67 @@ class PropertySheet(Component):
 
     def preprocess(self, payload: Any) -> Any:
         """
-        Processes the payload from the frontend to update the dataclass instance.
+        Processes the payload from the frontend to create an updated dataclass instance.
+
+        This method is stateless regarding the instance value. It reconstructs the object
+        from scratch using the `_dataclass_type` (which is reliably set by `postprocess`)
+        and then applies the changes from the payload.
+        
+        Args:
+            payload: The data received from the frontend, typically a list of property groups.
+        Returns:
+            A new, updated instance of the dataclass.
         """
         if payload is None:
-            return self._dataclass_value
+            return None
 
-        updated_config_obj = copy.deepcopy(self._dataclass_value)
+        if self._dataclass_type is None:
+            # This can happen if the component is used in a way that prevents postprocess
+            # from ever being called with a valid value. Returning None is a safe fallback.
+            return None
+            
+        # Create a new, default instance of the stored dataclass type.
+        reconstructed_obj = self._dataclass_type()
 
-        # This logic handles the full value object sent by the frontend on reset.
+        # Apply the values from the payload to the new instance.
         if isinstance(payload, list):
             for group in payload:
                 for prop in group.get("properties", []):
                     prop_name = prop["name"]
                     new_value = prop["value"]
-                    if hasattr(updated_config_obj, prop_name):
-                        current_value = getattr(updated_config_obj, prop_name)
-                        if current_value != new_value:
-                            setattr(updated_config_obj, prop_name, new_value)
+                    if hasattr(reconstructed_obj, prop_name):
+                        setattr(reconstructed_obj, prop_name, new_value)
                     else:
-                        for f in dataclasses.fields(updated_config_obj):
+                        # Handle nested dataclasses.
+                        for f in dataclasses.fields(reconstructed_obj):
                             if dataclasses.is_dataclass(f.type):
-                                group_obj = getattr(updated_config_obj, f.name)
+                                group_obj = getattr(reconstructed_obj, f.name)
                                 if hasattr(group_obj, prop_name):
-                                    current_value = getattr(group_obj, prop_name)
-                                    if current_value != new_value:
-                                        setattr(group_obj, prop_name, new_value)
-                                        break
-        # This logic handles single-value updates from sliders, textboxes, etc.
+                                    setattr(group_obj, prop_name, new_value)
+                                    break
         elif isinstance(payload, dict):
-             for key, new_value in payload.items():
-                if hasattr(updated_config_obj, key):
-                    setattr(updated_config_obj, key, new_value)
+            for key, new_value in payload.items():
+                if hasattr(reconstructed_obj, key):
+                    setattr(reconstructed_obj, key, new_value)
                 else:
-                    for f in dataclasses.fields(updated_config_obj):
+                    # Handle nested dataclasses for dict payloads.
+                    for f in dataclasses.fields(reconstructed_obj):
                         if dataclasses.is_dataclass(f.type):
-                            group_obj = getattr(updated_config_obj, f.name)
+                            group_obj = getattr(reconstructed_obj, f.name)
                             if hasattr(group_obj, key):
                                 setattr(group_obj, key, new_value)
                                 break
-
-        self._dataclass_value = updated_config_obj
-        return updated_config_obj
+        
+        return reconstructed_obj
     
     def api_info(self) -> Dict[str, Any]:
-        """Provides API information for the component."""
+        """
+        Provides API information for the component for use in API docs.
+        """
         return {"type": "object", "description": "A key-value dictionary of property settings."}
 
     def example_payload(self) -> Any:
-        """Returns an example payload for the component's API."""
+        """
+        Returns an example payload for the component's API.
+        """
         return {"seed": 12345}

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

@@ -1 +1 @@
-.block.svelte-239wnu{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.fullscreen.svelte-239wnu{border-radius:0}.auto-margin.svelte-239wnu{margin-left:auto;margin-right:auto}.block.border_focus.svelte-239wnu{border-color:var(--color-accent)}.block.border_contrast.svelte-239wnu{border-color:var(--body-text-color)}.padded.svelte-239wnu{padding:var(--block-padding)}.hidden.svelte-239wnu{display:none}.flex.svelte-239wnu{display:flex;flex-direction:column}.hide-container.svelte-239wnu:not(.fullscreen){margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}.resize-handle.svelte-239wnu{position:absolute;bottom:0;right:0;width:10px;height:10px;fill:var(--block-border-color);cursor:nwse-resize}.fullscreen.svelte-239wnu{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;overflow:auto}.animating.svelte-239wnu{animation:svelte-239wnu-pop-out .1s ease-out forwards}@keyframes svelte-239wnu-pop-out{0%{position:fixed;top:var(--start-top);left:var(--start-left);width:var(--start-width);height:var(--start-height);z-index:100}to{position:fixed;top:0vh;left:0vw;width:100vw;height:100vh;z-index:1000}}.placeholder.svelte-239wnu{border-radius:var(--block-radius);border-width:var(--block-border-width);border-color:var(--block-border-color);border-style:dashed}Tables */ table,tr,td,th{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding:var(--spacing-xl)}.md code,.md pre{background:none;font-family:var(--font-mono);font-size:var(--text-sm);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;hyphens:none}.md pre[class*=language-]::selection,.md pre[class*=language-] ::selection,.md code[class*=language-]::selection,.md code[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}.md pre{padding:1em;margin:.5em 0;overflow:auto;position:relative;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);box-shadow:none;border:none;border-radius:var(--radius-md);background:var(--code-background-fill);padding:var(--spacing-xxl);font-family:var(--font-mono);text-shadow:none;border-radius:var(--radius-sm);white-space:nowrap;display:block;white-space:pre}.md :not(pre)>code{padding:.1em;border-radius:var(--radius-xs);white-space:normal;background:var(--code-background-fill);border:1px solid var(--panel-border-color);padding:var(--spacing-xxs) var(--spacing-xs)}.md .token.comment,.md .token.prolog,.md .token.doctype,.md .token.cdata{color:#708090}.md .token.punctuation{color:#999}.md .token.namespace{opacity:.7}.md .token.property,.md .token.tag,.md .token.boolean,.md .token.number,.md .token.constant,.md .token.symbol,.md .token.deleted{color:#905}.md .token.selector,.md .token.attr-name,.md .token.string,.md .token.char,.md .token.builtin,.md .token.inserted{color:#690}.md .token.atrule,.md .token.attr-value,.md .token.keyword{color:#07a}.md .token.function,.md .token.class-name{color:#dd4a68}.md .token.regex,.md .token.important,.md .token.variable{color:#e90}.md .token.important,.md .token.bold{font-weight:700}.md .token.italic{font-style:italic}.md .token.entity{cursor:help}.dark .md .token.comment,.dark .md .token.prolog,.dark .md .token.cdata{color:#5c6370}.dark .md .token.doctype,.dark .md .token.punctuation,.dark .md .token.entity{color:#abb2bf}.dark .md .token.attr-name,.dark .md .token.class-name,.dark .md .token.boolean,.dark .md .token.constant,.dark .md .token.number,.dark .md .token.atrule{color:#d19a66}.dark .md .token.keyword{color:#c678dd}.dark .md .token.property,.dark .md .token.tag,.dark .md .token.symbol,.dark .md .token.deleted,.dark .md .token.important{color:#e06c75}.dark .md .token.selector,.dark .md .token.string,.dark .md .token.char,.dark .md .token.builtin,.dark .md .token.inserted,.dark .md .token.regex,.dark .md .token.attr-value,.dark .md .token.attr-value>.token.punctuation{color:#98c379}.dark .md .token.variable,.dark .md .token.operator,.dark .md .token.function{color:#61afef}.dark .md .token.url{color:#56b6c2}span.svelte-1m32c2s div[class*=code_wrap]{position:relative}span.svelte-1m32c2s span.katex{font-size:var(--text-lg);direction:ltr}span.svelte-1m32c2s div[class*=code_wrap]>button{z-index:1;cursor:pointer;border-bottom-left-radius:var(--radius-sm);padding:var(--spacing-md);width:25px;height:25px;position:absolute;right:0}span.svelte-1m32c2s .check{opacity:0;z-index:var(--layer-top);transition:opacity .2s;background:var(--code-background-fill);color:var(--body-text-color);position:absolute;top:var(--size-1-5);left:var(--size-1-5)}span.svelte-1m32c2s p:not(:first-child){margin-top:var(--spacing-xxl)}span.svelte-1m32c2s .md-header-anchor{margin-left:-25px;padding-right:8px;line-height:1;color:var(--body-text-color-subdued);opacity:0}span.svelte-1m32c2s h1:hover .md-header-anchor,span.svelte-1m32c2s h2:hover .md-header-anchor,span.svelte-1m32c2s h3:hover .md-header-anchor,span.svelte-1m32c2s h4:hover .md-header-anchor,span.svelte-1m32c2s h5:hover .md-header-anchor,span.svelte-1m32c2s h6:hover .md-header-anchor{opacity:1}span.md.svelte-1m32c2s .md-header-anchor>svg{color:var(--body-text-color-subdued)}span.svelte-1m32c2s table{word-break:break-word}div.svelte-17qq50w>.md.prose{font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}div.svelte-17qq50w>.md.prose *{color:var(--block-info-text-color)}div.svelte-17qq50w{margin-bottom:var(--spacing-md)}span.has-info.svelte-zgrq3{margin-bottom:var(--spacing-xs)}span.svelte-zgrq3:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-zgrq3{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}span[dir=rtl].svelte-zgrq3{display:block}.hide.svelte-zgrq3{margin:0;height:0}label.svelte-13ao5pu.svelte-13ao5pu{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-13ao5pu.svelte-13ao5pu{border-top-left-radius:0}label.float.svelte-13ao5pu.svelte-13ao5pu{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-13ao5pu.svelte-13ao5pu:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-13ao5pu.svelte-13ao5pu{height:0}span.svelte-13ao5pu.svelte-13ao5pu{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-13ao5pu.svelte-13ao5pu{box-shadow:none;border-width:0;background:transparent;overflow:visible}label[dir=rtl].svelte-13ao5pu.svelte-13ao5pu{border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-right:none;border-bottom-left-radius:var(--block-radius);border-bottom-right-radius:var(--block-label-radius);border-top-left-radius:var(--block-label-radius)}label[dir=rtl].svelte-13ao5pu span.svelte-13ao5pu{margin-left:var(--size-2);margin-right:0}button.svelte-qgco6m{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-xs);color:var(--block-label-text-color);border:1px solid transparent;padding:var(--spacing-xxs)}button.svelte-qgco6m:hover{background-color:var(--background-fill-secondary)}button[disabled].svelte-qgco6m{opacity:.5;box-shadow:none}button[disabled].svelte-qgco6m:hover{cursor:not-allowed}.padded.svelte-qgco6m{background:var(--bg-color)}button.svelte-qgco6m:hover,button.highlight.svelte-qgco6m{cursor:pointer;color:var(--color-accent)}.padded.svelte-qgco6m:hover{color:var(--block-label-text-color)}span.svelte-qgco6m{padding:0 1px;font-size:10px}div.svelte-qgco6m{display:flex;align-items:center;justify-content:center;transition:filter .2s ease-in-out}.x-small.svelte-qgco6m{width:10px;height:10px}.small.svelte-qgco6m{width:14px;height:14px}.medium.svelte-qgco6m{width:20px;height:20px}.large.svelte-qgco6m{width:22px;height:22px}.pending.svelte-qgco6m{animation:svelte-qgco6m-flash .5s infinite}@keyframes svelte-qgco6m-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-qgco6m{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6,.dropdown-arrow.svelte-ihhdbf{fill:currentColor}.circle.svelte-ihhdbf{fill:currentColor;opacity:.1}svg.svelte-pb9pol{animation:svelte-pb9pol-spin 1.5s linear infinite}@keyframes svelte-pb9pol-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h2.svelte-1xg7h5n{font-size:var(--text-xl)!important}p.svelte-1xg7h5n,h2.svelte-1xg7h5n{white-space:pre-line}.wrap.svelte-1xg7h5n{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3);text-align:center;margin:auto var(--spacing-lg)}.or.svelte-1xg7h5n{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-1xg7h5n{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-1xg7h5n{font-size:var(--text-lg)}}.hovered.svelte-1xg7h5n{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-15ls1gu{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:100%;margin-left:auto;margin-right:auto;height:var(--size-10)}.icon.svelte-15ls1gu{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-15ls1gu{color:var(--color-accent)}.icon.svelte-15ls1gu:hover,.icon.svelte-15ls1gu:focus{color:var(--color-accent)}.icon-button-wrapper.svelte-109se4{display:flex;flex-direction:row;align-items:center;justify-content:center;z-index:var(--layer-3);gap:var(--spacing-sm);box-shadow:var(--shadow-drop);border:1px solid var(--border-color-primary);background:var(--block-background-fill);padding:var(--spacing-xxs)}.icon-button-wrapper.hide-top-corner.svelte-109se4{border-top:none;border-right:none;border-radius:var(--block-label-right-radius)}.icon-button-wrapper.display-top-corner.svelte-109se4{border-radius:var(--radius-sm) 0 0 var(--radius-sm);top:var(--spacing-sm);right:-1px}.icon-button-wrapper.svelte-109se4:not(.top-panel){border:1px solid var(--border-color-primary);border-radius:var(--radius-sm)}.top-panel.svelte-109se4{position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);margin:0}.icon-button-wrapper.svelte-109se4 button{margin:var(--spacing-xxs);border-radius:var(--radius-xs);position:relative}.icon-button-wrapper.svelte-109se4 a.download-link:not(:last-child),.icon-button-wrapper.svelte-109se4 button:not(:last-child){margin-right:var(--spacing-xxs)}.icon-button-wrapper.svelte-109se4 a.download-link:not(:last-child):not(.no-border *):after,.icon-button-wrapper.svelte-109se4 button:not(:last-child):not(.no-border *):after{content:"";position:absolute;right:-4.5px;top:15%;height:70%;width:1px;background-color:var(--border-color-primary)}.icon-button-wrapper.svelte-109se4>*{height:100%}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-2);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden}.wrap.center.svelte-17v219f.svelte-17v219f{top:0;right:0;left:0}.wrap.default.svelte-17v219f.svelte-17v219f{top:0;right:0;bottom:0;left:0}.hide.svelte-17v219f.svelte-17v219f{opacity:0;pointer-events:none}.generating.svelte-17v219f.svelte-17v219f{animation:svelte-17v219f-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-17v219f-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-17v219f.svelte-17v219f{background:none}@keyframes svelte-17v219f-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-17v219f-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-17v219f.svelte-17v219f{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-17v219f.svelte-17v219f{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-17v219f.svelte-17v219f{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-17v219f.svelte-17v219f{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-17v219f.svelte-17v219f{position:absolute;bottom:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-17v219f.svelte-17v219f{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-17v219f.svelte-17v219f{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-17v219f.svelte-17v219f{pointer-events:none}.minimal.svelte-17v219f .progress-text.svelte-17v219f{background:var(--block-background-fill)}.border.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary)}.clear-status.svelte-17v219f.svelte-17v219f{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-1pgj5gs{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-1pgj5gs{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-1pgj5gs{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-1pgj5gs{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-1pgj5gs{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-1pgj5gs{border:1px solid var(--color-grey-700);background:var (--color-grey-50)}.dark .toast-body.info.svelte-1pgj5gs{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-body.success.svelte-1pgj5gs{border:1px solid var(--color-green-700);background:var(--color-green-50)}.dark .toast-body.success.svelte-1pgj5gs{border:1px solid var(--color-green-500);background-color:var(--color-grey-950)}.toast-title.svelte-1pgj5gs{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm)}.toast-title.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-title.error.svelte-1pgj5gs{color:var(--color-red-50)}.toast-title.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-1pgj5gs{color:var(--color-yellow-50)}.toast-title.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-title.info.svelte-1pgj5gs{color:var(--color-grey-50)}.toast-title.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-title.success.svelte-1pgj5gs{color:var(--color-green-50)}.toast-close.svelte-1pgj5gs{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-close.error.svelte-1pgj5gs{color:var(--color-red-500)}.toast-close.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-1pgj5gs{color:var(--color-yellow-500)}.toast-close.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-close.info.svelte-1pgj5gs{color:var(--color-grey-500)}.toast-close.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-close.success.svelte-1pgj5gs{color:var(--color-green-500)}.toast-text.svelte-1pgj5gs{font-size:var(--text-lg);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}.toast-text.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-text.error.svelte-1pgj5gs{color:var(--color-red-50)}.toast-text.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-1pgj5gs{color:var(--color-yellow-50)}.toast-text.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-text.info.svelte-1pgj5gs{color:var(--color-grey-50)}.toast-text.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-text.success.svelte-1pgj5gs{color:var(--color-green-50)}.toast-details.svelte-1pgj5gs{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-1pgj5gs{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-icon.error.svelte-1pgj5gs{color:var(--color-red-500)}.toast-icon.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-1pgj5gs{color:var(--color-yellow-500)}.toast-icon.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-1pgj5gs{color:var(--color-grey-500)}.toast-icon.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-icon.success.svelte-1pgj5gs{color:var(--color-green-500)}@keyframes svelte-1pgj5gs-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-1pgj5gs{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-1pgj5gs-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-1pgj5gs{background:var(--color-red-700)}.dark .timer.error.svelte-1pgj5gs{background:var(--color-red-500)}.timer.warning.svelte-1pgj5gs{background:var(--color-yellow-700)}.dark .timer.warning.svelte-1pgj5gs{background:var(--color-yellow-500)}.timer.info.svelte-1pgj5gs{background:var(--color-grey-700)}.dark .timer.info.svelte-1pgj5gs{background:var(--color-grey-500)}.timer.success.svelte-1pgj5gs{background:var(--color-green-700)}.dark .timer.success.svelte-1pgj5gs{background:var(--color-green-500)}.hidden.svelte-1pgj5gs{display:none}.toast-text.svelte-1pgj5gs a{text-decoration:underline}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}.streaming-bar.svelte-ga0jj6{position:absolute;bottom:0;left:0;right:0;height:4px;background-color:var(--primary-600);animation:svelte-ga0jj6-countdown linear forwards;z-index:1}@keyframes svelte-ga0jj6-countdown{0%{transform:translate(0)}to{transform:translate(-100%)}}:host{display:flex;flex-direction:column;height:100%}.propertysheet-wrapper{overflow:hidden!important;display:flex;flex-direction:column;flex-grow:1}.accordion-header.svelte-16grkhl.svelte-16grkhl{display:flex;justify-content:space-between;align-items:center;width:100%;cursor:pointer;padding:var(--block-title-padding);background:var(--block-title-background-fill);color:var(--block-title-text-color);flex-shrink:0}.content-wrapper.svelte-16grkhl.svelte-16grkhl{flex-grow:1;min-height:0}.container.svelte-16grkhl.svelte-16grkhl{overflow-y:auto;height:auto;max-height:var(--sheet-max-height, 500px);border-radius:0!important;border:1px solid var(--border-color-primary);border-top:none;border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg);background-color:var(--background-fill-secondary)}.closed.svelte-16grkhl.svelte-16grkhl{display:none}.group-header.svelte-16grkhl.svelte-16grkhl{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--input-background-fill);color:var(--body-text-color);text-align:left;cursor:pointer;font-size:var(--text-md);font-weight:var(--font-weight-bold);border:1px solid var(--border-color-primary)}.properties-grid.svelte-16grkhl.svelte-16grkhl{display:grid;grid-template-columns:1fr 2fr;gap:0;padding:0}.prop-label.svelte-16grkhl.svelte-16grkhl,.prop-control.svelte-16grkhl.svelte-16grkhl{padding:var(--spacing-sm) var(--spacing-md);display:flex;align-items:center;border-bottom:1px solid var(--background-fill-secondary)}.prop-label.svelte-16grkhl.svelte-16grkhl{background-color:var(--background-fill-primary);color:var(--body-text-color);opacity:.7;font-weight:var(--font-weight-semibold);font-size:var(--text-xs);text-align:right;justify-content:flex-end;word-break:break-word}.prop-control.svelte-16grkhl.svelte-16grkhl{gap:var(--spacing-sm)}.properties-grid.svelte-16grkhl>.svelte-16grkhl:nth-last-child(-n+2){border-bottom:none}.prop-control.svelte-16grkhl input[type=text].svelte-16grkhl,.prop-control.svelte-16grkhl input[type=number].svelte-16grkhl{background-color:var(--input-background-fill);border:var(--input-border-width) solid var(--border-color-primary);box-shadow:var(--input-shadow);color:var(--input-text-color);font-size:var(--input-text-size);border-radius:0;width:100%;padding-top:var(--spacing-1);padding-bottom:var(--spacing-1);padding-left:var(--spacing-md);padding-right:var(--spacing-3)}.prop-control.svelte-16grkhl input[type=text].svelte-16grkhl:focus,.prop-control.svelte-16grkhl input[type=number].svelte-16grkhl:focus{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus);background-color:var(--input-background-fill-focus);outline:none}.dropdown-wrapper.svelte-16grkhl.svelte-16grkhl{position:relative;width:100%}.dropdown-wrapper.svelte-16grkhl select.svelte-16grkhl{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--input-background-fill);border:var(--input-border-width) solid var(--border-color-primary);box-shadow:var(--input-shadow);color:var(--input-text-color);font-size:var(--input-text-size);width:100%;cursor:pointer;border-radius:0;padding-top:var(--spacing-1);padding-bottom:var(--spacing-1);padding-left:var(--spacing-md);padding-right:calc(var(--spacing-3) + 1.2em)}.dropdown-arrow-icon.svelte-16grkhl.svelte-16grkhl{position:absolute;top:50%;right:var(--spacing-3);transform:translateY(-50%);width:1em;height:1em;pointer-events:none;z-index:1;background-color:var(--body-text-color-subdued);-webkit-mask-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 8l4 4 4-4'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 8l4 4 4-4'%3e%3c/svg%3e")}.dropdown-wrapper.svelte-16grkhl select.svelte-16grkhl:focus{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus);background-color:var(--input-background-fill-focus);outline:none}.dropdown-wrapper.svelte-16grkhl select option.svelte-16grkhl{background:var(--input-background-fill);color:var(--body-text-color)}.prop-control.svelte-16grkhl input[type=checkbox].svelte-16grkhl{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:var(--size-4);height:var(--size-4);border-radius:0;border:1px solid var(--checkbox-border-color);background-color:var(--checkbox-background-color);box-shadow:var(--checkbox-shadow);cursor:pointer;margin:0;transition:background-color .2s,border-color .2s}.prop-control.svelte-16grkhl input[type=checkbox].svelte-16grkhl:hover{border-color:var(--checkbox-border-color-hover);background-color:var(--checkbox-background-color-hover)}.prop-control.svelte-16grkhl input[type=checkbox].svelte-16grkhl:focus{border-color:var(--checkbox-border-color-focus);background-color:var(--checkbox-background-color-focus);outline:none}.prop-control.svelte-16grkhl input[type=checkbox].svelte-16grkhl:checked{background-color:var(--checkbox-background-color-selected);border-color:var(--checkbox-border-color-focus)}.prop-control.svelte-16grkhl input[type=checkbox].svelte-16grkhl:checked:after{content:"";position:absolute;display:block;top:50%;left:50%;width:4px;height:8px;border:solid var(--checkbox-label-text-color-selected);border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.slider-container.svelte-16grkhl.svelte-16grkhl{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.slider-container.svelte-16grkhl input[type=range].svelte-16grkhl{--slider-progress:0%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%}.slider-container.svelte-16grkhl input[type=range].svelte-16grkhl::-webkit-slider-runnable-track{height:8px;border-radius:var(--radius-lg);background:linear-gradient(to right,var(--slider-color) var(--slider-progress),var(--input-background-fill) var(--slider-progress))}.slider-container.svelte-16grkhl input[type=range].svelte-16grkhl::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-top:-4px;background-color:#fff;border-radius:50%;height:16px;width:16px;border:1px solid var(--border-color-primary);box-shadow:var(--shadow-drop)}.slider-container.svelte-16grkhl input[type=range].svelte-16grkhl::-moz-range-track{height:8px;border-radius:var(--radius-lg);background:linear-gradient(to right,var(--slider-color) var(--slider-progress),var(--input-background-fill) var(--slider-progress))}.slider-container.svelte-16grkhl input[type=range].svelte-16grkhl::-moz-range-thumb{background-color:#fff;border-radius:50%;height:16px;width:16px;border:1px solid var(--border-color-primary);box-shadow:var(--shadow-drop)}.slider-value.svelte-16grkhl.svelte-16grkhl{min-width:40px;text-align:right;font-family:var(--font-mono);font-size:var(--text-xs)}.prop-label-wrapper.svelte-16grkhl.svelte-16grkhl{display:flex;justify-content:flex-end;align-items:center;gap:var(--spacing-sm);width:100%}.tooltip-container.svelte-16grkhl.svelte-16grkhl{position:relative;display:inline-flex;align-items:center;justify-content:center}.tooltip-icon.svelte-16grkhl.svelte-16grkhl{display:flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background-color:var(--body-text-color-subdued);color:var(--background-fill-primary);font-size:10px;font-weight:700;cursor:help;-webkit-user-select:none;user-select:none}.tooltip-text.svelte-16grkhl.svelte-16grkhl{visibility:hidden;width:200px;background-color:var(--body-text-color);color:var(--background-fill-primary);text-align:center;border-radius:var(--radius-md);padding:var(--spacing-md);position:absolute;z-index:10;bottom:125%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .3s}.tooltip-container.svelte-16grkhl:hover .tooltip-text.svelte-16grkhl{visibility:visible;opacity:1}.color-picker-container.svelte-16grkhl.svelte-16grkhl{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.color-picker-input.svelte-16grkhl.svelte-16grkhl{width:50px;height:28px;background-color:transparent;border:1px solid var(--border-color-primary);border-radius:var(--radius-sm);cursor:pointer;padding:0}.color-picker-input.svelte-16grkhl.svelte-16grkhl::-webkit-color-swatch-wrapper{padding:2px}.color-picker-input.svelte-16grkhl.svelte-16grkhl::-moz-padding{padding:2px}.color-picker-input.svelte-16grkhl.svelte-16grkhl::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}.color-picker-input.svelte-16grkhl.svelte-16grkhl::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.color-picker-value.svelte-16grkhl.svelte-16grkhl{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--body-text-color-subdued)}.prop-control.svelte-16grkhl input.invalid.svelte-16grkhl{border-color:var(--error-border-color, red)!important;box-shadow:0 0 0 1px var(--error-border-color, red)!important}.reset-button-prop.svelte-16grkhl.svelte-16grkhl{display:flex;align-items:center;justify-content:center;background:none;border:none;border-left:1px solid var(--border-color-primary);cursor:pointer;color:var(--body-text-color-subdued);font-size:var(--text-lg);padding:0 var(--spacing-2);visibility:hidden;opacity:0;transition:opacity .15s ease-in-out,color .15s ease-in-out}.reset-button-prop.visible.svelte-16grkhl.svelte-16grkhl{visibility:visible;opacity:1}.reset-button-prop.svelte-16grkhl.svelte-16grkhl:hover{color:var(--body-text-color);background-color:var(--background-fill-secondary-hover)}.reset-button-prop.svelte-16grkhl.svelte-16grkhl:disabled{color:var(--body-text-color-subdued)!important;opacity:.5;cursor:not-allowed;background-color:transparent!important}.prop-control.svelte-16grkhl .disabled.svelte-16grkhl{opacity:.5;pointer-events:none;cursor:not-allowed}.prop-control.svelte-16grkhl .disabled input.svelte-16grkhl{cursor:not-allowed}.reset-button-prop.svelte-16grkhl.svelte-16grkhl:disabled{opacity:.3;cursor:not-allowed;background-color:transparent!important}
+.block.svelte-239wnu{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.fullscreen.svelte-239wnu{border-radius:0}.auto-margin.svelte-239wnu{margin-left:auto;margin-right:auto}.block.border_focus.svelte-239wnu{border-color:var(--color-accent)}.block.border_contrast.svelte-239wnu{border-color:var(--body-text-color)}.padded.svelte-239wnu{padding:var(--block-padding)}.hidden.svelte-239wnu{display:none}.flex.svelte-239wnu{display:flex;flex-direction:column}.hide-container.svelte-239wnu:not(.fullscreen){margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}.resize-handle.svelte-239wnu{position:absolute;bottom:0;right:0;width:10px;height:10px;fill:var(--block-border-color);cursor:nwse-resize}.fullscreen.svelte-239wnu{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1000;overflow:auto}.animating.svelte-239wnu{animation:svelte-239wnu-pop-out .1s ease-out forwards}@keyframes svelte-239wnu-pop-out{0%{position:fixed;top:var(--start-top);left:var(--start-left);width:var(--start-width);height:var(--start-height);z-index:100}to{position:fixed;top:0vh;left:0vw;width:100vw;height:100vh;z-index:1000}}.placeholder.svelte-239wnu{border-radius:var(--block-radius);border-width:var(--block-border-width);border-color:var(--block-border-color);border-style:dashed}Tables */ table,tr,td,th{margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);padding:var(--spacing-xl)}.md code,.md pre{background:none;font-family:var(--font-mono);font-size:var(--text-sm);text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:2;tab-size:2;-webkit-hyphens:none;hyphens:none}.md pre[class*=language-]::selection,.md pre[class*=language-] ::selection,.md code[class*=language-]::selection,.md code[class*=language-] ::selection{text-shadow:none;background:#b3d4fc}.md pre{padding:1em;margin:.5em 0;overflow:auto;position:relative;margin-top:var(--spacing-sm);margin-bottom:var(--spacing-sm);box-shadow:none;border:none;border-radius:var(--radius-md);background:var(--code-background-fill);padding:var(--spacing-xxl);font-family:var(--font-mono);text-shadow:none;border-radius:var(--radius-sm);white-space:nowrap;display:block;white-space:pre}.md :not(pre)>code{padding:.1em;border-radius:var(--radius-xs);white-space:normal;background:var(--code-background-fill);border:1px solid var(--panel-border-color);padding:var(--spacing-xxs) var(--spacing-xs)}.md .token.comment,.md .token.prolog,.md .token.doctype,.md .token.cdata{color:#708090}.md .token.punctuation{color:#999}.md .token.namespace{opacity:.7}.md .token.property,.md .token.tag,.md .token.boolean,.md .token.number,.md .token.constant,.md .token.symbol,.md .token.deleted{color:#905}.md .token.selector,.md .token.attr-name,.md .token.string,.md .token.char,.md .token.builtin,.md .token.inserted{color:#690}.md .token.atrule,.md .token.attr-value,.md .token.keyword{color:#07a}.md .token.function,.md .token.class-name{color:#dd4a68}.md .token.regex,.md .token.important,.md .token.variable{color:#e90}.md .token.important,.md .token.bold{font-weight:700}.md .token.italic{font-style:italic}.md .token.entity{cursor:help}.dark .md .token.comment,.dark .md .token.prolog,.dark .md .token.cdata{color:#5c6370}.dark .md .token.doctype,.dark .md .token.punctuation,.dark .md .token.entity{color:#abb2bf}.dark .md .token.attr-name,.dark .md .token.class-name,.dark .md .token.boolean,.dark .md .token.constant,.dark .md .token.number,.dark .md .token.atrule{color:#d19a66}.dark .md .token.keyword{color:#c678dd}.dark .md .token.property,.dark .md .token.tag,.dark .md .token.symbol,.dark .md .token.deleted,.dark .md .token.important{color:#e06c75}.dark .md .token.selector,.dark .md .token.string,.dark .md .token.char,.dark .md .token.builtin,.dark .md .token.inserted,.dark .md .token.regex,.dark .md .token.attr-value,.dark .md .token.attr-value>.token.punctuation{color:#98c379}.dark .md .token.variable,.dark .md .token.operator,.dark .md .token.function{color:#61afef}.dark .md .token.url{color:#56b6c2}span.svelte-1m32c2s div[class*=code_wrap]{position:relative}span.svelte-1m32c2s span.katex{font-size:var(--text-lg);direction:ltr}span.svelte-1m32c2s div[class*=code_wrap]>button{z-index:1;cursor:pointer;border-bottom-left-radius:var(--radius-sm);padding:var(--spacing-md);width:25px;height:25px;position:absolute;right:0}span.svelte-1m32c2s .check{opacity:0;z-index:var(--layer-top);transition:opacity .2s;background:var(--code-background-fill);color:var(--body-text-color);position:absolute;top:var(--size-1-5);left:var(--size-1-5)}span.svelte-1m32c2s p:not(:first-child){margin-top:var(--spacing-xxl)}span.svelte-1m32c2s .md-header-anchor{margin-left:-25px;padding-right:8px;line-height:1;color:var(--body-text-color-subdued);opacity:0}span.svelte-1m32c2s h1:hover .md-header-anchor,span.svelte-1m32c2s h2:hover .md-header-anchor,span.svelte-1m32c2s h3:hover .md-header-anchor,span.svelte-1m32c2s h4:hover .md-header-anchor,span.svelte-1m32c2s h5:hover .md-header-anchor,span.svelte-1m32c2s h6:hover .md-header-anchor{opacity:1}span.md.svelte-1m32c2s .md-header-anchor>svg{color:var(--body-text-color-subdued)}span.svelte-1m32c2s table{word-break:break-word}div.svelte-17qq50w>.md.prose{font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}div.svelte-17qq50w>.md.prose *{color:var(--block-info-text-color)}div.svelte-17qq50w{margin-bottom:var(--spacing-md)}span.has-info.svelte-zgrq3{margin-bottom:var(--spacing-xs)}span.svelte-zgrq3:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-zgrq3{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}span[dir=rtl].svelte-zgrq3{display:block}.hide.svelte-zgrq3{margin:0;height:0}label.svelte-13ao5pu.svelte-13ao5pu{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-13ao5pu.svelte-13ao5pu{border-top-left-radius:0}label.float.svelte-13ao5pu.svelte-13ao5pu{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-13ao5pu.svelte-13ao5pu:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-13ao5pu.svelte-13ao5pu{height:0}span.svelte-13ao5pu.svelte-13ao5pu{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-13ao5pu.svelte-13ao5pu{box-shadow:none;border-width:0;background:transparent;overflow:visible}label[dir=rtl].svelte-13ao5pu.svelte-13ao5pu{border:var(--block-label-border-width) solid var(--block-label-border-color);border-top:none;border-right:none;border-bottom-left-radius:var(--block-radius);border-bottom-right-radius:var(--block-label-radius);border-top-left-radius:var(--block-label-radius)}label[dir=rtl].svelte-13ao5pu span.svelte-13ao5pu{margin-left:var(--size-2);margin-right:0}button.svelte-qgco6m{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-xs);color:var(--block-label-text-color);border:1px solid transparent;padding:var(--spacing-xxs)}button.svelte-qgco6m:hover{background-color:var(--background-fill-secondary)}button[disabled].svelte-qgco6m{opacity:.5;box-shadow:none}button[disabled].svelte-qgco6m:hover{cursor:not-allowed}.padded.svelte-qgco6m{background:var(--bg-color)}button.svelte-qgco6m:hover,button.highlight.svelte-qgco6m{cursor:pointer;color:var(--color-accent)}.padded.svelte-qgco6m:hover{color:var(--block-label-text-color)}span.svelte-qgco6m{padding:0 1px;font-size:10px}div.svelte-qgco6m{display:flex;align-items:center;justify-content:center;transition:filter .2s ease-in-out}.x-small.svelte-qgco6m{width:10px;height:10px}.small.svelte-qgco6m{width:14px;height:14px}.medium.svelte-qgco6m{width:20px;height:20px}.large.svelte-qgco6m{width:22px;height:22px}.pending.svelte-qgco6m{animation:svelte-qgco6m-flash .5s infinite}@keyframes svelte-qgco6m-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-qgco6m{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.dropdown-arrow.svelte-145leq6,.dropdown-arrow.svelte-ihhdbf{fill:currentColor}.circle.svelte-ihhdbf{fill:currentColor;opacity:.1}svg.svelte-pb9pol{animation:svelte-pb9pol-spin 1.5s linear infinite}@keyframes svelte-pb9pol-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}h2.svelte-1xg7h5n{font-size:var(--text-xl)!important}p.svelte-1xg7h5n,h2.svelte-1xg7h5n{white-space:pre-line}.wrap.svelte-1xg7h5n{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3);text-align:center;margin:auto var(--spacing-lg)}.or.svelte-1xg7h5n{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-1xg7h5n{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-1xg7h5n{font-size:var(--text-lg)}}.hovered.svelte-1xg7h5n{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-15ls1gu{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:100%;margin-left:auto;margin-right:auto;height:var(--size-10)}.icon.svelte-15ls1gu{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-15ls1gu{color:var(--color-accent)}.icon.svelte-15ls1gu:hover,.icon.svelte-15ls1gu:focus{color:var(--color-accent)}.icon-button-wrapper.svelte-109se4{display:flex;flex-direction:row;align-items:center;justify-content:center;z-index:var(--layer-3);gap:var(--spacing-sm);box-shadow:var(--shadow-drop);border:1px solid var(--border-color-primary);background:var(--block-background-fill);padding:var(--spacing-xxs)}.icon-button-wrapper.hide-top-corner.svelte-109se4{border-top:none;border-right:none;border-radius:var(--block-label-right-radius)}.icon-button-wrapper.display-top-corner.svelte-109se4{border-radius:var(--radius-sm) 0 0 var(--radius-sm);top:var(--spacing-sm);right:-1px}.icon-button-wrapper.svelte-109se4:not(.top-panel){border:1px solid var(--border-color-primary);border-radius:var(--radius-sm)}.top-panel.svelte-109se4{position:absolute;top:var(--block-label-margin);right:var(--block-label-margin);margin:0}.icon-button-wrapper.svelte-109se4 button{margin:var(--spacing-xxs);border-radius:var(--radius-xs);position:relative}.icon-button-wrapper.svelte-109se4 a.download-link:not(:last-child),.icon-button-wrapper.svelte-109se4 button:not(:last-child){margin-right:var(--spacing-xxs)}.icon-button-wrapper.svelte-109se4 a.download-link:not(:last-child):not(.no-border *):after,.icon-button-wrapper.svelte-109se4 button:not(:last-child):not(.no-border *):after{content:"";position:absolute;right:-4.5px;top:15%;height:70%;width:1px;background-color:var(--border-color-primary)}.icon-button-wrapper.svelte-109se4>*{height:100%}svg.svelte-43sxxs.svelte-43sxxs{width:var(--size-20);height:var(--size-20)}svg.svelte-43sxxs path.svelte-43sxxs{fill:var(--loader-color)}div.svelte-43sxxs.svelte-43sxxs{z-index:var(--layer-2)}.margin.svelte-43sxxs.svelte-43sxxs{margin:var(--size-4)}.wrap.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:var(--layer-2);transition:opacity .1s ease-in-out;border-radius:var(--block-radius);background:var(--block-background-fill);padding:0 var(--size-6);max-height:var(--size-screen-h);overflow:hidden}.wrap.center.svelte-17v219f.svelte-17v219f{top:0;right:0;left:0}.wrap.default.svelte-17v219f.svelte-17v219f{top:0;right:0;bottom:0;left:0}.hide.svelte-17v219f.svelte-17v219f{opacity:0;pointer-events:none}.generating.svelte-17v219f.svelte-17v219f{animation:svelte-17v219f-pulseStart 1s cubic-bezier(.4,0,.6,1),svelte-17v219f-pulse 2s cubic-bezier(.4,0,.6,1) 1s infinite;border:2px solid var(--color-accent);background:transparent;z-index:var(--layer-1);pointer-events:none}.translucent.svelte-17v219f.svelte-17v219f{background:none}@keyframes svelte-17v219f-pulseStart{0%{opacity:0}to{opacity:1}}@keyframes svelte-17v219f-pulse{0%,to{opacity:1}50%{opacity:.5}}.loading.svelte-17v219f.svelte-17v219f{z-index:var(--layer-2);color:var(--body-text-color)}.eta-bar.svelte-17v219f.svelte-17v219f{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:left;opacity:.8;z-index:var(--layer-1);transition:10ms;background:var(--background-fill-secondary)}.progress-bar-wrap.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary);background:var(--background-fill-primary);width:55.5%;height:var(--size-4)}.progress-bar.svelte-17v219f.svelte-17v219f{transform-origin:left;background-color:var(--loader-color);width:var(--size-full);height:var(--size-full)}.progress-level.svelte-17v219f.svelte-17v219f{display:flex;flex-direction:column;align-items:center;gap:1;z-index:var(--layer-2);width:var(--size-full)}.progress-level-inner.svelte-17v219f.svelte-17v219f{margin:var(--size-2) auto;color:var(--body-text-color);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text.svelte-17v219f.svelte-17v219f{position:absolute;bottom:0;right:0;z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono)}.meta-text-center.svelte-17v219f.svelte-17v219f{display:flex;position:absolute;top:0;right:0;justify-content:center;align-items:center;transform:translateY(var(--size-6));z-index:var(--layer-2);padding:var(--size-1) var(--size-2);font-size:var(--text-sm);font-family:var(--font-mono);text-align:center}.error.svelte-17v219f.svelte-17v219f{box-shadow:var(--shadow-drop);border:solid 1px var(--error-border-color);border-radius:var(--radius-full);background:var(--error-background-fill);padding-right:var(--size-4);padding-left:var(--size-4);color:var(--error-text-color);font-weight:var(--weight-semibold);font-size:var(--text-lg);line-height:var(--line-lg);font-family:var(--font)}.minimal.svelte-17v219f.svelte-17v219f{pointer-events:none}.minimal.svelte-17v219f .progress-text.svelte-17v219f{background:var(--block-background-fill)}.border.svelte-17v219f.svelte-17v219f{border:1px solid var(--border-color-primary)}.clear-status.svelte-17v219f.svelte-17v219f{position:absolute;display:flex;top:var(--size-2);right:var(--size-2);justify-content:flex-end;gap:var(--spacing-sm);z-index:var(--layer-1)}.toast-body.svelte-1pgj5gs{display:flex;position:relative;right:0;left:0;align-items:center;margin:var(--size-6) var(--size-4);margin:auto;border-radius:var(--container-radius);overflow:hidden;pointer-events:auto}.toast-body.error.svelte-1pgj5gs{border:1px solid var(--color-red-700);background:var(--color-red-50)}.dark .toast-body.error.svelte-1pgj5gs{border:1px solid var(--color-red-500);background-color:var(--color-grey-950)}.toast-body.warning.svelte-1pgj5gs{border:1px solid var(--color-yellow-700);background:var(--color-yellow-50)}.dark .toast-body.warning.svelte-1pgj5gs{border:1px solid var(--color-yellow-500);background-color:var(--color-grey-950)}.toast-body.info.svelte-1pgj5gs{border:1px solid var(--color-grey-700);background:var (--color-grey-50)}.dark .toast-body.info.svelte-1pgj5gs{border:1px solid var(--color-grey-500);background-color:var(--color-grey-950)}.toast-body.success.svelte-1pgj5gs{border:1px solid var(--color-green-700);background:var(--color-green-50)}.dark .toast-body.success.svelte-1pgj5gs{border:1px solid var(--color-green-500);background-color:var(--color-grey-950)}.toast-title.svelte-1pgj5gs{display:flex;align-items:center;font-weight:var(--weight-bold);font-size:var(--text-lg);line-height:var(--line-sm)}.toast-title.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-title.error.svelte-1pgj5gs{color:var(--color-red-50)}.toast-title.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-title.warning.svelte-1pgj5gs{color:var(--color-yellow-50)}.toast-title.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-title.info.svelte-1pgj5gs{color:var(--color-grey-50)}.toast-title.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-title.success.svelte-1pgj5gs{color:var(--color-green-50)}.toast-close.svelte-1pgj5gs{margin:0 var(--size-3);border-radius:var(--size-3);padding:0px var(--size-1-5);font-size:var(--size-5);line-height:var(--size-5)}.toast-close.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-close.error.svelte-1pgj5gs{color:var(--color-red-500)}.toast-close.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-close.warning.svelte-1pgj5gs{color:var(--color-yellow-500)}.toast-close.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-close.info.svelte-1pgj5gs{color:var(--color-grey-500)}.toast-close.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-close.success.svelte-1pgj5gs{color:var(--color-green-500)}.toast-text.svelte-1pgj5gs{font-size:var(--text-lg);word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}.toast-text.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-text.error.svelte-1pgj5gs{color:var(--color-red-50)}.toast-text.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-text.warning.svelte-1pgj5gs{color:var(--color-yellow-50)}.toast-text.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-text.info.svelte-1pgj5gs{color:var(--color-grey-50)}.toast-text.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-text.success.svelte-1pgj5gs{color:var(--color-green-50)}.toast-details.svelte-1pgj5gs{margin:var(--size-3) var(--size-3) var(--size-3) 0;width:100%}.toast-icon.svelte-1pgj5gs{display:flex;position:absolute;position:relative;flex-shrink:0;justify-content:center;align-items:center;margin:var(--size-2);border-radius:var(--radius-full);padding:var(--size-1);padding-left:calc(var(--size-1) - 1px);width:35px;height:35px}.toast-icon.error.svelte-1pgj5gs{color:var(--color-red-700)}.dark .toast-icon.error.svelte-1pgj5gs{color:var(--color-red-500)}.toast-icon.warning.svelte-1pgj5gs{color:var(--color-yellow-700)}.dark .toast-icon.warning.svelte-1pgj5gs{color:var(--color-yellow-500)}.toast-icon.info.svelte-1pgj5gs{color:var(--color-grey-700)}.dark .toast-icon.info.svelte-1pgj5gs{color:var(--color-grey-500)}.toast-icon.success.svelte-1pgj5gs{color:var(--color-green-700)}.dark .toast-icon.success.svelte-1pgj5gs{color:var(--color-green-500)}@keyframes svelte-1pgj5gs-countdown{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.timer.svelte-1pgj5gs{position:absolute;bottom:0;left:0;transform-origin:0 0;animation:svelte-1pgj5gs-countdown 10s linear forwards;width:100%;height:var(--size-1)}.timer.error.svelte-1pgj5gs{background:var(--color-red-700)}.dark .timer.error.svelte-1pgj5gs{background:var(--color-red-500)}.timer.warning.svelte-1pgj5gs{background:var(--color-yellow-700)}.dark .timer.warning.svelte-1pgj5gs{background:var(--color-yellow-500)}.timer.info.svelte-1pgj5gs{background:var(--color-grey-700)}.dark .timer.info.svelte-1pgj5gs{background:var(--color-grey-500)}.timer.success.svelte-1pgj5gs{background:var(--color-green-700)}.dark .timer.success.svelte-1pgj5gs{background:var(--color-green-500)}.hidden.svelte-1pgj5gs{display:none}.toast-text.svelte-1pgj5gs a{text-decoration:underline}.toast-wrap.svelte-gatr8h{display:flex;position:fixed;top:var(--size-4);right:var(--size-4);flex-direction:column;align-items:end;gap:var(--size-2);z-index:var(--layer-top);width:calc(100% - var(--size-8))}@media (--screen-sm){.toast-wrap.svelte-gatr8h{width:calc(var(--size-96) + var(--size-10))}}.streaming-bar.svelte-ga0jj6{position:absolute;bottom:0;left:0;right:0;height:4px;background-color:var(--primary-600);animation:svelte-ga0jj6-countdown linear forwards;z-index:1}@keyframes svelte-ga0jj6-countdown{0%{transform:translate(0)}to{transform:translate(-100%)}}:host{display:flex;flex-direction:column;height:100%}.propertysheet-wrapper{overflow:hidden!important;display:flex;flex-direction:column;flex-grow:1}.accordion-header.svelte-1nz1lmm.svelte-1nz1lmm{display:flex;justify-content:space-between;align-items:center;width:100%;cursor:pointer;padding:var(--block-title-padding);background:var(--block-title-background-fill);color:var(--block-title-text-color);flex-shrink:0}.content-wrapper.svelte-1nz1lmm.svelte-1nz1lmm{flex-grow:1;min-height:0}.container.svelte-1nz1lmm.svelte-1nz1lmm{overflow-y:auto;height:auto;max-height:var(--sheet-max-height, 500px);border-radius:0!important;border:1px solid var(--border-color-primary);border-top:none;border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg);background-color:var(--background-fill-secondary)}.closed.svelte-1nz1lmm.svelte-1nz1lmm{display:none}.group-header.svelte-1nz1lmm.svelte-1nz1lmm{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--spacing-sm) var(--spacing-md);background-color:var(--input-background-fill);color:var(--body-text-color);text-align:left;cursor:pointer;font-size:var(--text-md);font-weight:var(--font-weight-bold);border:1px solid var(--border-color-primary)}.properties-grid.svelte-1nz1lmm.svelte-1nz1lmm{display:grid;grid-template-columns:1fr 2fr;gap:0;padding:0}.prop-label.svelte-1nz1lmm.svelte-1nz1lmm,.prop-control.svelte-1nz1lmm.svelte-1nz1lmm{padding:var(--spacing-sm) var(--spacing-md);display:flex;align-items:center;border-bottom:1px solid var(--background-fill-secondary)}.prop-label.svelte-1nz1lmm.svelte-1nz1lmm{background-color:var(--background-fill-primary);color:var(--body-text-color);opacity:.7;font-weight:var(--font-weight-semibold);font-size:var(--text-xs);text-align:right;justify-content:flex-end;word-break:break-word}.prop-control.svelte-1nz1lmm.svelte-1nz1lmm{gap:var(--spacing-sm)}.properties-grid.svelte-1nz1lmm>.svelte-1nz1lmm:nth-last-child(-n+2){border-bottom:none}.prop-control.svelte-1nz1lmm input[type=text].svelte-1nz1lmm,.prop-control.svelte-1nz1lmm input[type=number].svelte-1nz1lmm{background-color:var(--input-background-fill);border:var(--input-border-width) solid var(--border-color-primary);box-shadow:var(--input-shadow);color:var(--input-text-color);font-size:var(--input-text-size);border-radius:0;width:100%;padding-top:var(--spacing-1);padding-bottom:var(--spacing-1);padding-left:var(--spacing-md);padding-right:var(--spacing-3)}.prop-control.svelte-1nz1lmm input[type=text].svelte-1nz1lmm:focus,.prop-control.svelte-1nz1lmm input[type=number].svelte-1nz1lmm:focus{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus);background-color:var(--input-background-fill-focus);outline:none}.dropdown-wrapper.svelte-1nz1lmm.svelte-1nz1lmm{position:relative;width:100%}.dropdown-wrapper.svelte-1nz1lmm select.svelte-1nz1lmm{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--input-background-fill);border:var(--input-border-width) solid var(--border-color-primary);box-shadow:var(--input-shadow);color:var(--input-text-color);font-size:var(--input-text-size);width:100%;cursor:pointer;border-radius:0;padding-top:var(--spacing-1);padding-bottom:var(--spacing-1);padding-left:var(--spacing-md);padding-right:calc(var(--spacing-3) + 1.2em)}.dropdown-arrow-icon.svelte-1nz1lmm.svelte-1nz1lmm{position:absolute;top:50%;right:var(--spacing-3);transform:translateY(-50%);width:1em;height:1em;pointer-events:none;z-index:1;background-color:var(--body-text-color-subdued);-webkit-mask-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 8l4 4 4-4'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 8l4 4 4-4'%3e%3c/svg%3e")}.dropdown-wrapper.svelte-1nz1lmm select.svelte-1nz1lmm:focus{box-shadow:var(--input-shadow-focus);border-color:var(--input-border-color-focus);background-color:var(--input-background-fill-focus);outline:none}.dropdown-wrapper.svelte-1nz1lmm select option.svelte-1nz1lmm{background:var(--input-background-fill);color:var(--body-text-color)}.prop-control.svelte-1nz1lmm input[type=checkbox].svelte-1nz1lmm{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;width:var(--size-4);height:var(--size-4);border-radius:0;border:1px solid var(--checkbox-border-color);background-color:var(--checkbox-background-color);box-shadow:var(--checkbox-shadow);cursor:pointer;margin:0;transition:background-color .2s,border-color .2s}.prop-control.svelte-1nz1lmm input[type=checkbox].svelte-1nz1lmm:hover{border-color:var(--checkbox-border-color-hover);background-color:var(--checkbox-background-color-hover)}.prop-control.svelte-1nz1lmm input[type=checkbox].svelte-1nz1lmm:focus{border-color:var(--checkbox-border-color-focus);background-color:var(--checkbox-background-color-focus);outline:none}.prop-control.svelte-1nz1lmm input[type=checkbox].svelte-1nz1lmm:checked{background-color:var(--checkbox-background-color-selected);border-color:var(--checkbox-border-color-focus)}.prop-control.svelte-1nz1lmm input[type=checkbox].svelte-1nz1lmm:checked:after{content:"";position:absolute;display:block;top:50%;left:50%;width:4px;height:8px;border:solid var(--checkbox-label-text-color-selected);border-width:0 2px 2px 0;transform:translate(-50%,-60%) rotate(45deg)}.slider-container.svelte-1nz1lmm.svelte-1nz1lmm{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.slider-container.svelte-1nz1lmm input[type=range].svelte-1nz1lmm{--slider-progress:0%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;width:100%}.slider-container.svelte-1nz1lmm input[type=range].svelte-1nz1lmm::-webkit-slider-runnable-track{height:8px;border-radius:var(--radius-lg);background:linear-gradient(to right,var(--slider-color) var(--slider-progress),var(--input-background-fill) var(--slider-progress))}.slider-container.svelte-1nz1lmm input[type=range].svelte-1nz1lmm::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-top:-4px;background-color:#fff;border-radius:50%;height:16px;width:16px;border:1px solid var(--border-color-primary);box-shadow:var(--shadow-drop)}.slider-container.svelte-1nz1lmm input[type=range].svelte-1nz1lmm::-moz-range-track{height:8px;border-radius:var(--radius-lg);background:linear-gradient(to right,var(--slider-color) var(--slider-progress),var(--input-background-fill) var(--slider-progress))}.slider-container.svelte-1nz1lmm input[type=range].svelte-1nz1lmm::-moz-range-thumb{background-color:#fff;border-radius:50%;height:16px;width:16px;border:1px solid var(--border-color-primary);box-shadow:var(--shadow-drop)}.slider-value.svelte-1nz1lmm.svelte-1nz1lmm{min-width:40px;text-align:right;font-family:var(--font-mono);font-size:var(--text-xs)}.prop-label-wrapper.svelte-1nz1lmm.svelte-1nz1lmm{display:flex;justify-content:flex-end;align-items:center;gap:var(--spacing-sm);width:100%}.tooltip-container.svelte-1nz1lmm.svelte-1nz1lmm{position:relative;display:inline-flex;align-items:center;justify-content:center}.tooltip-icon.svelte-1nz1lmm.svelte-1nz1lmm{display:flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background-color:var(--body-text-color-subdued);color:var(--background-fill-primary);font-size:10px;font-weight:700;cursor:help;-webkit-user-select:none;user-select:none}.tooltip-text.svelte-1nz1lmm.svelte-1nz1lmm{visibility:hidden;width:200px;background-color:var(--body-text-color);color:var(--background-fill-primary);text-align:center;border-radius:var(--radius-md);padding:var(--spacing-md);position:absolute;z-index:10;bottom:125%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .3s}.tooltip-container.svelte-1nz1lmm:hover .tooltip-text.svelte-1nz1lmm{visibility:visible;opacity:1}.color-picker-container.svelte-1nz1lmm.svelte-1nz1lmm{display:flex;align-items:center;gap:var(--spacing-md);width:100%}.color-picker-input.svelte-1nz1lmm.svelte-1nz1lmm{width:50px;height:28px;background-color:transparent;border:1px solid var(--border-color-primary);border-radius:var(--radius-sm);cursor:pointer;padding:0}.color-picker-input.svelte-1nz1lmm.svelte-1nz1lmm::-webkit-color-swatch-wrapper{padding:2px}.color-picker-input.svelte-1nz1lmm.svelte-1nz1lmm::-moz-padding{padding:2px}.color-picker-input.svelte-1nz1lmm.svelte-1nz1lmm::-webkit-color-swatch{border:none;border-radius:var(--radius-sm)}.color-picker-input.svelte-1nz1lmm.svelte-1nz1lmm::-moz-color-swatch{border:none;border-radius:var(--radius-sm)}.color-picker-value.svelte-1nz1lmm.svelte-1nz1lmm{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--body-text-color-subdued)}.prop-control.svelte-1nz1lmm input.invalid.svelte-1nz1lmm{border-color:var(--error-border-color, red)!important;box-shadow:0 0 0 1px var(--error-border-color, red)!important}.reset-button-prop.svelte-1nz1lmm.svelte-1nz1lmm{display:flex;align-items:center;justify-content:center;background:none;border:none;border-left:1px solid var(--border-color-primary);cursor:pointer;color:var(--body-text-color-subdued);font-size:var(--text-lg);padding:0 var(--spacing-2);visibility:hidden;opacity:0;transition:opacity .15s ease-in-out,color .15s ease-in-out}.reset-button-prop.visible.svelte-1nz1lmm.svelte-1nz1lmm{visibility:visible;opacity:1}.reset-button-prop.svelte-1nz1lmm.svelte-1nz1lmm:hover{color:var(--body-text-color);background-color:var(--background-fill-secondary-hover)}.reset-button-prop.svelte-1nz1lmm.svelte-1nz1lmm:disabled{color:var(--body-text-color-subdued)!important;opacity:.5;cursor:not-allowed;background-color:transparent!important}.prop-control.svelte-1nz1lmm .disabled.svelte-1nz1lmm{opacity:.5;pointer-events:none;cursor:not-allowed}.prop-control.svelte-1nz1lmm .disabled input.svelte-1nz1lmm{cursor:not-allowed}.reset-button-prop.svelte-1nz1lmm.svelte-1nz1lmm:disabled{opacity:.3;cursor:not-allowed;background-color:transparent!important}

src/demo/app.py

@@ -3,115 +3,55 @@ from dataclasses import dataclass, field, asdict
 from typing import Literal
 from gradio_propertysheet import PropertySheet
 
-# --- Main Configuration Dataclasses for the "Render Settings" Sheet ---
+# --- Configuration Data Models ---
+# These dataclasses define the structure for all settings panels.
 @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)"}
-    )
+    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", "help": "The algorithm for the diffusion process."}
-    )
-    steps: int = field(
-        default=25,
-        metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1, "label": "Sampling Steps", "help": "More steps can improve quality."}
-    )
-    cfg_scale: float = field(
-        default=7.0,
-        metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5, "label": "CFG Scale", "help": "How strongly the prompt is adhered to."}
-    )
+    sampler_name: Literal["Euler", "Euler a", "DPM++ 2M Karras", "UniPC"] = field(default="DPM++ 2M Karras", metadata={"component": "dropdown", "label": "Sampler", "help": "The algorithm for the diffusion process."})
+    steps: int = field(default=25, metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1, "label": "Sampling Steps", "help": "More steps can improve quality."})
+    cfg_scale: float = field(default=7.0, metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5, "label": "CFG Scale", "help": "How strongly the prompt is adhered to."})
 
 @dataclass
 class ImageSettings:
     """Settings for image dimensions."""
-    width: int = field(
-        default=1024,
-        metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Width"}
-    )
-    height: int = field(
-        default=1024,
-        metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Height"}
-    )
+    width: int = field(default=1024, metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Width"})
+    height: int = field(default=1024, metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Height"})
 
 @dataclass
 class PostprocessingSettings:
     """Settings for image post-processing effects."""
-    restore_faces: bool = field(
-        default=True,
-        metadata={"label": "Restore Faces", "help": "Use a secondary model to fix distorted faces."}
-    )
-    enable_hr: bool = field(
-        default=False,
-        metadata={"label": "Hires. fix", "help": "Enable a second pass at a higher resolution."}
-    )
-    denoising_strength: float = field(
-        default=0.45,
-        metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01, "label": "Denoising Strength", "interactive_if": {"field": "enable_hr", "value": True}}
-    )
+    restore_faces: bool = field(default=True, metadata={"label": "Restore Faces", "help": "Use a secondary model to fix distorted faces."})
+    enable_hr: bool = field(default=False, metadata={"label": "Hires. fix", "help": "Enable a second pass at a higher resolution."})
+    denoising_strength: float = field(default=0.45, metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01, "label": "Denoising Strength", "interactive_if": {"field": "enable_hr", "value": True}})
 
 @dataclass
 class AdvancedSettings:
     """Advanced and rarely changed settings."""
-    clip_skip: int = field(
-        default=2,
-        metadata={"component": "slider", "minimum": 1, "maximum": 12, "step": 1, "label": "CLIP Skip", "help": "Skip final layers of the text encoder."}
-    )
-    noise_schedule: Literal["Default", "Karras", "Exponential"] = field(
-        default="Karras",
-        metadata={"component": "dropdown", "label": "Noise Schedule"}
-    )
-    do_not_scale_cond_uncond: bool = field(
-        default=False,
-        metadata={"label": "Do not scale cond/uncond"}
-    )
-    s_churn: int = field(
-        default=1,
-        metadata={"component": "number_integer", "minimum": 1, "maximum": 12, "label": "S_churn", "help": "S_churn value for generation."}
-    )
+    clip_skip: int = field(default=2, metadata={"component": "slider", "minimum": 1, "maximum": 12, "step": 1, "label": "CLIP Skip", "help": "Skip final layers of the text encoder."})
+    noise_schedule: Literal["Default", "Karras", "Exponential"] = field(default="Karras", metadata={"component": "dropdown", "label": "Noise Schedule"})
+    do_not_scale_cond_uncond: bool = field(default=False, metadata={"label": "Do not scale cond/uncond"})
+    s_churn: int = field(default=1, metadata={"component": "number_integer", "minimum": 1, "maximum": 12, "label": "S_churn", "help": "S_churn value for generation."})
 
 @dataclass
 class ScriptSettings:
     """Settings for automation scripts like X/Y/Z plots."""
-    script_name: Literal["None", "Prompt matrix", "X/Y/Z plot"] = field(
-        default="None",
-        metadata={"component": "dropdown", "label": "Script"}
-    )
-    x_values: str = field(
-        default="-1, 10, 20",
-        metadata={"label": "X axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}}
-    )
-    y_values: str = field(
-        default="",
-        metadata={"label": "Y axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}}
-    )
+    script_name: Literal["None", "Prompt matrix", "X/Y/Z plot"] = field(default="None", metadata={"component": "dropdown", "label": "Script"})
+    x_values: str = field(default="-1, 10, 20", metadata={"label": "X axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}})
+    y_values: str = field(default="", metadata={"label": "Y axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}})
 
 @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)", "help": "The random seed for generation."}
-    )
-    batch_size: int = field(
-        default=1,
-        metadata={"component": "slider", "minimum": 1, "maximum": 8, "step": 1, "label": "Batch Size"}
-    )
-    # Nested groups
+    seed: int = field(default=-1, metadata={"component": "number_integer", "label": "Seed (-1 for random)", "help": "The random seed for generation."})
+    batch_size: int = field(default=1, metadata={"component": "slider", "minimum": 1, "maximum": 8, "step": 1, "label": "Batch Size"})
     model: ModelSettings = field(default_factory=ModelSettings)
     sampling: SamplingSettings = field(default_factory=SamplingSettings)
     image: ImageSettings = field(default_factory=ImageSettings)
@@ -119,7 +59,6 @@ class RenderConfig:
     scripts: ScriptSettings = field(default_factory=ScriptSettings)
     advanced: AdvancedSettings = field(default_factory=AdvancedSettings)
 
-
 @dataclass
 class Lighting:
     """Lighting settings for the environment."""
@@ -133,8 +72,8 @@ class EnvironmentConfig:
     background: Literal["Sky", "Color", "Image"] = field(default="Sky", metadata={"component": "dropdown"})
     lighting: Lighting = field(default_factory=Lighting)
 
-
 # --- Initial Instances ---
+# Create default instances of the configuration objects.
 initial_render_config = RenderConfig()
 initial_env_config = EnvironmentConfig()
 
@@ -144,65 +83,117 @@ with gr.Blocks(title="PropertySheet Demo") as demo:
     gr.Markdown("An example of a realistic application layout using the `PropertySheet` component as a sidebar for settings.")
     gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_propertysheet'>Component GitHub Code</a></span>")
     
+    # --- Persistent State Management ---
+    # Use gr.State to hold the application's data. This is the "single source of truth".
+    render_state = gr.State(value=initial_render_config)
+    env_state = gr.State(value=initial_env_config)
+    
     with gr.Row():
-        # Main content area on the left
-        with gr.Column(scale=3):
-            #gr.Image(label="Main Viewport", height=500, value=None)
-            gr.Textbox(label="AI Prompt", lines=3, placeholder="Enter your prompt here...")
-            gr.Button("Generate", variant="primary")
+        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")
 
-        # Sidebar with Property Sheets on the right
         with gr.Column(scale=1):
             render_sheet = PropertySheet(
-                value=initial_render_config, 
+                value=initial_render_config,
                 label="Render Settings",
                 width=400,
-                height=550  # Set a fixed height to demonstrate internal scrolling
+                height=550,
+                visible=False           
             )
             environment_sheet = PropertySheet(
                 value=initial_env_config,
                 label="Environment Settings",
                 width=400,
-                open=False  # Start collapsed to show the accordion feature
+                open=False,
+                visible=False                
             )
 
     # --- Event Handlers ---
-    def handle_render_change(updated_config: RenderConfig | None):
-        """Callback to process changes from the Render Settings sheet."""
+    def change_visibility(render_config, env_config):
+        """
+        Handles the visibility toggle for the property sheets.
+        NOTE: This approach of modifying the component object's attribute directly
+        is not reliable for tracking state changes in Gradio. A gr.State object is
+        the recommended way to manage UI state like visibility.
+        """
+        if render_sheet.visible != environment_sheet.visible:
+            render_sheet.visible = False
+            environment_sheet.visible = False
+        
+        if render_sheet.visible == False and environment_sheet.visible == False:
+            render_sheet.visible = True
+            environment_sheet.visible = True
+            return (
+                gr.update(visible=True, value=render_config),
+                gr.update(visible=True, value=env_config),
+                gr.update(value="Hide Settings")
+            )
+        else:
+            render_sheet.visible = False
+            environment_sheet.visible = False
+            return (
+                gr.update(visible=False, value=render_config),
+                gr.update(visible=False, value=env_config),
+                gr.update(value="Show Settings")
+            )
+    
+    def handle_render_change(updated_config: RenderConfig | None, current_state: RenderConfig):
+        """Processes updates from the render PropertySheet and syncs the state."""
         if updated_config is None:
-            return initial_render_config, asdict(initial_render_config)
+            return current_state, asdict(current_state), current_state
         
-        # Example of business logic: reset custom path if not in custom mode
+        # Example of applying business logic
         if updated_config.model.model_type != "Custom":
             updated_config.model.custom_model_path = "/path/to/default.safetensors"
-            
-        return updated_config, asdict(updated_config)
+        
+        return updated_config, asdict(updated_config), updated_config
 
-    def handle_env_change(updated_config: EnvironmentConfig | None):
-        """Callback to process changes from the Environment Settings sheet."""
+    def handle_env_change(updated_config: EnvironmentConfig | None, current_state: EnvironmentConfig):
+        """Processes updates from the environment PropertySheet and syncs the state."""
         if updated_config is None:
-            return initial_env_config, asdict(initial_env_config)
-        return updated_config, asdict(updated_config)
+            return current_state, asdict(current_state), current_state
+        return updated_config, asdict(updated_config), updated_config
 
+    # --- Event Listeners ---
+    # Toggle the property sheets' visibility on button click.
+    generate.click(
+        fn=change_visibility,
+        inputs=[render_state, env_state],
+        outputs=[render_sheet, environment_sheet, generate]
+    )
+    
+    # Syncs changes from the UI back to the state and JSON display.
     render_sheet.change(
         fn=handle_render_change,
-        inputs=[render_sheet],
-        outputs=[render_sheet, output_render_json]
+        inputs=[render_sheet, render_state],
+        outputs=[render_sheet, output_render_json, render_state]
     )
+    
+    # Syncs changes from the UI back to the state and JSON display.
     environment_sheet.change(
         fn=handle_env_change,
-        inputs=[environment_sheet],
-        outputs=[environment_sheet, output_env_json]
+        inputs=[environment_sheet, env_state],
+        outputs=[environment_sheet, output_env_json, env_state]
     )
    
-    # Load initial state into JSON viewers on app load
+    # Load initial data into JSON displays on app start.
     demo.load(
         fn=lambda: (asdict(initial_render_config), asdict(initial_env_config)),
         outputs=[output_render_json, output_env_json]
     )
 
+    # Ensure components are populated with state values on load/reload.
+    demo.load(
+        fn=lambda render_config, env_config: (
+            gr.update(value=render_config),
+            gr.update(value=env_config)
+        ),
+        inputs=[render_state, env_state],
+        outputs=[render_sheet, environment_sheet]
+    )
+
 if __name__ == "__main__":
     demo.launch()

src/demo/space.py

@@ -3,7 +3,7 @@ import gradio as gr
 from app import demo as app
 import os
 
-_docs = {'PropertySheet': {'description': 'A Gradio component that renders a dynamic UI from a Python dataclass instance.', 'members': {'__init__': {'value': {'type': 'typing.Optional[typing.Any][Any, None]', 'default': 'None', 'description': 'The initial dataclass instance to render.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The main label for the component, displayed in the accordion header.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, the component will be hidden.'}, 'open': {'type': 'bool', 'default': 'True', 'description': 'If False, the accordion will be collapsed by default.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the DOM.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'The relative size of the component in its container.'}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': 'The width of the component in pixels.'}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': "The maximum height of the component's content area in pixels before scrolling."}, 'min_width': {'type': 'int | None', 'default': 'None', 'description': 'The minimum width of the component in pixels.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, wraps the component in a container with a background.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the DOM.'}}, 'postprocess': {'value': {'type': 'Any', 'description': None}}, 'preprocess': {'return': {'type': 'Any', 'description': None}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': ''}, 'input': {'type': None, 'default': None, 'description': ''}, 'expand': {'type': None, 'default': None, 'description': ''}, 'collapse': {'type': None, 'default': None, 'description': ''}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'PropertySheet': []}}}
+_docs = {'PropertySheet': {'description': 'A Gradio component that renders a dynamic UI from a Python dataclass instance.\nIt allows for nested settings and automatically infers input types.', 'members': {'__init__': {'value': {'type': 'typing.Optional[typing.Any][Any, None]', 'default': 'None', 'description': 'The initial dataclass instance to render.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The main label for the component, displayed in the accordion header.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, the component will be hidden.'}, 'open': {'type': 'bool', 'default': 'True', 'description': 'If False, the accordion will be collapsed by default.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': 'An optional string that is assigned as the id of this component in the DOM.'}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'The relative size of the component in its container.'}, 'width': {'type': 'int | str | None', 'default': 'None', 'description': 'The width of the component in pixels.'}, 'height': {'type': 'int | str | None', 'default': 'None', 'description': "The maximum height of the component's content area in pixels before scrolling."}, 'min_width': {'type': 'int | None', 'default': 'None', 'description': 'The minimum width of the component in pixels.'}, 'container': {'type': 'bool', 'default': 'True', 'description': 'If True, wraps the component in a container with a background.'}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': 'An optional list of strings that are assigned as the classes of this component in the DOM.'}}, 'postprocess': {'value': {'type': 'Any', 'description': 'The dataclass instance to process.'}}, 'preprocess': {'return': {'type': 'Any', 'description': 'A new, updated instance of the dataclass.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': ''}, 'input': {'type': None, 'default': None, 'description': ''}, 'expand': {'type': None, 'default': None, 'description': ''}, 'collapse': {'type': None, 'default': None, 'description': ''}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'PropertySheet': []}}}
 
 abs_path = os.path.join(os.path.dirname(__file__), "css.css")
 
@@ -21,7 +21,7 @@ with gr.Blocks(
 # `gradio_propertysheet`
 
 <div style="display: flex; gap: 7px;">
-<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+<a href="https://pypi.org/project/gradio_propertysheet/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_propertysheet"></a>  
 </div>
 
 Property sheet
@@ -43,115 +43,55 @@ from dataclasses import dataclass, field, asdict
 from typing import Literal
 from gradio_propertysheet import PropertySheet
 
-# --- Main Configuration Dataclasses for the "Render Settings" Sheet ---
+# --- Configuration Data Models ---
+# These dataclasses define the structure for all settings panels.
 @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)"}
-    )
+    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", "help": "The algorithm for the diffusion process."}
-    )
-    steps: int = field(
-        default=25,
-        metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1, "label": "Sampling Steps", "help": "More steps can improve quality."}
-    )
-    cfg_scale: float = field(
-        default=7.0,
-        metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5, "label": "CFG Scale", "help": "How strongly the prompt is adhered to."}
-    )
+    sampler_name: Literal["Euler", "Euler a", "DPM++ 2M Karras", "UniPC"] = field(default="DPM++ 2M Karras", metadata={"component": "dropdown", "label": "Sampler", "help": "The algorithm for the diffusion process."})
+    steps: int = field(default=25, metadata={"component": "slider", "minimum": 1, "maximum": 150, "step": 1, "label": "Sampling Steps", "help": "More steps can improve quality."})
+    cfg_scale: float = field(default=7.0, metadata={"component": "slider", "minimum": 1.0, "maximum": 30.0, "step": 0.5, "label": "CFG Scale", "help": "How strongly the prompt is adhered to."})
 
 @dataclass
 class ImageSettings:
     \"\"\"Settings for image dimensions.\"\"\"
-    width: int = field(
-        default=1024,
-        metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Width"}
-    )
-    height: int = field(
-        default=1024,
-        metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Height"}
-    )
+    width: int = field(default=1024, metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Width"})
+    height: int = field(default=1024, metadata={"component": "slider", "minimum": 512, "maximum": 2048, "step": 64, "label": "Image Height"})
 
 @dataclass
 class PostprocessingSettings:
     \"\"\"Settings for image post-processing effects.\"\"\"
-    restore_faces: bool = field(
-        default=True,
-        metadata={"label": "Restore Faces", "help": "Use a secondary model to fix distorted faces."}
-    )
-    enable_hr: bool = field(
-        default=False,
-        metadata={"label": "Hires. fix", "help": "Enable a second pass at a higher resolution."}
-    )
-    denoising_strength: float = field(
-        default=0.45,
-        metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01, "label": "Denoising Strength", "interactive_if": {"field": "enable_hr", "value": True}}
-    )
+    restore_faces: bool = field(default=True, metadata={"label": "Restore Faces", "help": "Use a secondary model to fix distorted faces."})
+    enable_hr: bool = field(default=False, metadata={"label": "Hires. fix", "help": "Enable a second pass at a higher resolution."})
+    denoising_strength: float = field(default=0.45, metadata={"component": "slider", "minimum": 0.0, "maximum": 1.0, "step": 0.01, "label": "Denoising Strength", "interactive_if": {"field": "enable_hr", "value": True}})
 
 @dataclass
 class AdvancedSettings:
     \"\"\"Advanced and rarely changed settings.\"\"\"
-    clip_skip: int = field(
-        default=2,
-        metadata={"component": "slider", "minimum": 1, "maximum": 12, "step": 1, "label": "CLIP Skip", "help": "Skip final layers of the text encoder."}
-    )
-    noise_schedule: Literal["Default", "Karras", "Exponential"] = field(
-        default="Karras",
-        metadata={"component": "dropdown", "label": "Noise Schedule"}
-    )
-    do_not_scale_cond_uncond: bool = field(
-        default=False,
-        metadata={"label": "Do not scale cond/uncond"}
-    )
-    s_churn: int = field(
-        default=1,
-        metadata={"component": "number_integer", "minimum": 1, "maximum": 12, "label": "S_churn", "help": "S_churn value for generation."}
-    )
+    clip_skip: int = field(default=2, metadata={"component": "slider", "minimum": 1, "maximum": 12, "step": 1, "label": "CLIP Skip", "help": "Skip final layers of the text encoder."})
+    noise_schedule: Literal["Default", "Karras", "Exponential"] = field(default="Karras", metadata={"component": "dropdown", "label": "Noise Schedule"})
+    do_not_scale_cond_uncond: bool = field(default=False, metadata={"label": "Do not scale cond/uncond"})
+    s_churn: int = field(default=1, metadata={"component": "number_integer", "minimum": 1, "maximum": 12, "label": "S_churn", "help": "S_churn value for generation."})
 
 @dataclass
 class ScriptSettings:
     \"\"\"Settings for automation scripts like X/Y/Z plots.\"\"\"
-    script_name: Literal["None", "Prompt matrix", "X/Y/Z plot"] = field(
-        default="None",
-        metadata={"component": "dropdown", "label": "Script"}
-    )
-    x_values: str = field(
-        default="-1, 10, 20",
-        metadata={"label": "X axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}}
-    )
-    y_values: str = field(
-        default="",
-        metadata={"label": "Y axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}}
-    )
+    script_name: Literal["None", "Prompt matrix", "X/Y/Z plot"] = field(default="None", metadata={"component": "dropdown", "label": "Script"})
+    x_values: str = field(default="-1, 10, 20", metadata={"label": "X axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}})
+    y_values: str = field(default="", metadata={"label": "Y axis values", "interactive_if": {"field": "script_name", "value": "X/Y/Z plot"}})
 
 @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)", "help": "The random seed for generation."}
-    )
-    batch_size: int = field(
-        default=1,
-        metadata={"component": "slider", "minimum": 1, "maximum": 8, "step": 1, "label": "Batch Size"}
-    )
-    # Nested groups
+    seed: int = field(default=-1, metadata={"component": "number_integer", "label": "Seed (-1 for random)", "help": "The random seed for generation."})
+    batch_size: int = field(default=1, metadata={"component": "slider", "minimum": 1, "maximum": 8, "step": 1, "label": "Batch Size"})
     model: ModelSettings = field(default_factory=ModelSettings)
     sampling: SamplingSettings = field(default_factory=SamplingSettings)
     image: ImageSettings = field(default_factory=ImageSettings)
@@ -159,7 +99,6 @@ class RenderConfig:
     scripts: ScriptSettings = field(default_factory=ScriptSettings)
     advanced: AdvancedSettings = field(default_factory=AdvancedSettings)
 
-
 @dataclass
 class Lighting:
     \"\"\"Lighting settings for the environment.\"\"\"
@@ -173,8 +112,8 @@ class EnvironmentConfig:
     background: Literal["Sky", "Color", "Image"] = field(default="Sky", metadata={"component": "dropdown"})
     lighting: Lighting = field(default_factory=Lighting)
 
-
 # --- Initial Instances ---
+# Create default instances of the configuration objects.
 initial_render_config = RenderConfig()
 initial_env_config = EnvironmentConfig()
 
@@ -184,66 +123,118 @@ with gr.Blocks(title="PropertySheet Demo") as demo:
     gr.Markdown("An example of a realistic application layout using the `PropertySheet` component as a sidebar for settings.")
     gr.Markdown("<span>💻 <a href='https://github.com/DEVAIEXP/gradio_component_propertysheet'>Component GitHub Code</a></span>")
     
+    # --- Persistent State Management ---
+    # Use gr.State to hold the application's data. This is the "single source of truth".
+    render_state = gr.State(value=initial_render_config)
+    env_state = gr.State(value=initial_env_config)
+    
     with gr.Row():
-        # Main content area on the left
-        with gr.Column(scale=3):
-            #gr.Image(label="Main Viewport", height=500, value=None)
-            gr.Textbox(label="AI Prompt", lines=3, placeholder="Enter your prompt here...")
-            gr.Button("Generate", variant="primary")
+        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")
 
-        # Sidebar with Property Sheets on the right
         with gr.Column(scale=1):
             render_sheet = PropertySheet(
-                value=initial_render_config, 
+                value=initial_render_config,
                 label="Render Settings",
                 width=400,
-                height=550  # Set a fixed height to demonstrate internal scrolling
+                height=550,
+                visible=False           
             )
             environment_sheet = PropertySheet(
                 value=initial_env_config,
                 label="Environment Settings",
                 width=400,
-                open=False  # Start collapsed to show the accordion feature
+                open=False,
+                visible=False                
             )
 
     # --- Event Handlers ---
-    def handle_render_change(updated_config: RenderConfig | None):
-        \"\"\"Callback to process changes from the Render Settings sheet.\"\"\"
+    def change_visibility(render_config, env_config):
+        \"\"\"
+        Handles the visibility toggle for the property sheets.
+        NOTE: This approach of modifying the component object's attribute directly
+        is not reliable for tracking state changes in Gradio. A gr.State object is
+        the recommended way to manage UI state like visibility.
+        \"\"\"
+        if render_sheet.visible != environment_sheet.visible:
+            render_sheet.visible = False
+            environment_sheet.visible = False
+        
+        if render_sheet.visible == False and environment_sheet.visible == False:
+            render_sheet.visible = True
+            environment_sheet.visible = True
+            return (
+                gr.update(visible=True, value=render_config),
+                gr.update(visible=True, value=env_config),
+                gr.update(value="Hide Settings")
+            )
+        else:
+            render_sheet.visible = False
+            environment_sheet.visible = False
+            return (
+                gr.update(visible=False, value=render_config),
+                gr.update(visible=False, value=env_config),
+                gr.update(value="Show Settings")
+            )
+    
+    def handle_render_change(updated_config: RenderConfig | None, current_state: RenderConfig):
+        \"\"\"Processes updates from the render PropertySheet and syncs the state.\"\"\"
         if updated_config is None:
-            return initial_render_config, asdict(initial_render_config)
+            return current_state, asdict(current_state), current_state
         
-        # Example of business logic: reset custom path if not in custom mode
+        # Example of applying business logic
         if updated_config.model.model_type != "Custom":
             updated_config.model.custom_model_path = "/path/to/default.safetensors"
-            
-        return updated_config, asdict(updated_config)
+        
+        return updated_config, asdict(updated_config), updated_config
 
-    def handle_env_change(updated_config: EnvironmentConfig | None):
-        \"\"\"Callback to process changes from the Environment Settings sheet.\"\"\"
+    def handle_env_change(updated_config: EnvironmentConfig | None, current_state: EnvironmentConfig):
+        \"\"\"Processes updates from the environment PropertySheet and syncs the state.\"\"\"
         if updated_config is None:
-            return initial_env_config, asdict(initial_env_config)
-        return updated_config, asdict(updated_config)
-
+            return current_state, asdict(current_state), current_state
+        return updated_config, asdict(updated_config), updated_config
+
+    # --- Event Listeners ---
+    # Toggle the property sheets' visibility on button click.
+    generate.click(
+        fn=change_visibility,
+        inputs=[render_state, env_state],
+        outputs=[render_sheet, environment_sheet, generate]
+    )
+    
+    # Syncs changes from the UI back to the state and JSON display.
     render_sheet.change(
         fn=handle_render_change,
-        inputs=[render_sheet],
-        outputs=[render_sheet, output_render_json]
+        inputs=[render_sheet, render_state],
+        outputs=[render_sheet, output_render_json, render_state]
     )
+    
+    # Syncs changes from the UI back to the state and JSON display.
     environment_sheet.change(
         fn=handle_env_change,
-        inputs=[environment_sheet],
-        outputs=[environment_sheet, output_env_json]
+        inputs=[environment_sheet, env_state],
+        outputs=[environment_sheet, output_env_json, env_state]
     )
    
-    # Load initial state into JSON viewers on app load
+    # Load initial data into JSON displays on app start.
     demo.load(
         fn=lambda: (asdict(initial_render_config), asdict(initial_env_config)),
         outputs=[output_render_json, output_env_json]
     )
 
+    # Ensure components are populated with state values on load/reload.
+    demo.load(
+        fn=lambda render_config, env_config: (
+            gr.update(value=render_config),
+            gr.update(value=env_config)
+        ),
+        inputs=[render_state, env_state],
+        outputs=[render_sheet, environment_sheet]
+    )
+
 if __name__ == "__main__":
     demo.launch()
 ```
@@ -276,7 +267,8 @@ The impact on the users predict function varies depending on whether the compone
 
 The code snippet below is accurate in cases where the component is used as both an input and an output.
 
-
+- **As input:** Is passed, a new, updated instance of the dataclass.
+- **As output:** Should return, the dataclass instance to process.
 
  ```python
 def predict(

src/frontend/Index.svelte

@@ -4,35 +4,57 @@
     import { StatusTracker } from "@gradio/statustracker";
     import type { LoadingStatus } from "@gradio/statustracker";
     import type { Gradio } from "@gradio/utils";
-    import { onMount } from "svelte";
+    import { onMount, tick } from "svelte";
 
     // --- Component Props (passed from Gradio backend) ---
+    /** The main data structure driving the UI, an array of property groups. */
     export let value: Array<{ group_name: string, properties: any[] }> = [];
+    /** The main label for the component, displayed in the top-level accordion header. */
     export let label: string | undefined = undefined;
+    /** Controls the overall visibility of the component. */
     export let visible: boolean = true;
+    /** If true, the main accordion is open by default. */
     export let open: boolean = true;
+    /** The DOM element ID. */
     export let elem_id: string = "";
+    /** Custom CSS classes for the root element. */
     export let elem_classes: string[] = [];
+    /** If true, wraps the component in a container with a background. */
     export let container: boolean = false;
+    /** The relative size of the component in its container. */
     export let scale: number | null = null;
+    /** The minimum width of the component in pixels. */
     export let min_width: number | undefined = undefined;
+    /** The fixed width of the component in pixels. */
     export let width: number | undefined = undefined;
+    /** The maximum height of the component's content area before scrolling. */
     export let height: number | undefined = undefined;
+    /** The loading status object from Gradio. */
     export let loading_status: LoadingStatus | undefined = undefined;
+    /** If false, all controls are disabled. */
     export let interactive: boolean = true;
+    /** The Gradio event dispatcher instance. */
     export let gradio: Gradio<{ change: any, reset: any, input: any, clear_status: never, expand: never, collapse: never }>;
 
     // --- Internal State ---
-    let groupVisibility: Record<string, boolean> = {}; // Tracks visibility of each property group.
-    let sliderElements: Record<string, HTMLInputElement> = {}; // References to slider input elements for direct manipulation.
+    /** Tracks the open/closed state of each individual property group. */
+    let groupVisibility: Record<string, boolean> = {};
+    /** Holds references to slider input elements for direct DOM manipulation (e.g., setting background). */
+    let sliderElements: Record<string, HTMLInputElement> = {};
+    /** Combines default and user-provided CSS classes. */
     $: final_classes = ["propertysheet-wrapper", ...elem_classes];
-    let validationState: Record<string, boolean> = {}; // Tracks validation status for each property.
-    let lastValue: string | null = null; // Stores a stringified version of `value` to detect changes.
-    let isResetting: boolean = false; // Flag to prevent event loops during property reset.
-    let initialValues: Record<string, any> = {}; // Stores the initial values of all properties for the reset functionality.
+    /** Tracks the validation status (true/false) for each property to apply error styling. */
+    let validationState: Record<string, boolean> = {};
+    /** A stringified version of the `value` prop, used to detect changes from the backend. */
+    let lastValue: string | null = null;
+    /** A flag to prevent event loops during property reset operations. */
+    let isResetting: boolean = false;
+    /** A snapshot of the initial values of all properties, used for the reset functionality. */
+    let initialValues: Record<string, any> = {};
 
     /**
-     * Validates a property's value against its minimum and maximum constraints.
+     * Validates a numeric property against its `minimum` and `maximum` constraints.
+     * Updates the `validationState` for CSS styling of invalid inputs.
      * @param {any} prop - The property object to validate.
      */
     function validate_prop(prop: any) {
@@ -53,12 +75,12 @@
         }
     }
 
-    // Controls the component height based on the accordion's open/closed state.
+    /** Controls the component's content height based on the main accordion's open/closed state. */
     let dynamic_height: number | undefined;
     $: dynamic_height = open ? height : undefined;
 
     /**
-     * Iterates through all properties and updates the background of any sliders.
+     * Iterates through all properties and updates the background visuals of any sliders.
      */
     function updateAllSliders() {
         if (!Array.isArray(value)) return;
@@ -73,15 +95,16 @@
         }
     }
 
-    // Reactive block that triggers when the `value` prop changes from the backend.
+    /**
+     * Reactive block that triggers whenever the `value` prop changes from the backend.
+     * It initializes group visibility, validates properties, and updates slider visuals.
+     */
     $: if (Array.isArray(value) && JSON.stringify(value) !== lastValue) {
         lastValue = JSON.stringify(value);
         for (const group of value) {
-            // Initialize group visibility if not already set.
             if (groupVisibility[group.group_name] === undefined) {
                 groupVisibility[group.group_name] = true;
             }
-            // Validate properties upon receiving new values.
             if (Array.isArray(group.properties)) {
                 for (const prop of group.properties) {
                     if (prop.component?.startsWith("number") || prop.component === 'slider') {
@@ -90,14 +113,14 @@
                 }
             }
         }
-        // Update slider visuals to match new values.
         updateAllSliders();
     }
     
     /**
-     * Updates a slider's track background to show progress.
+     * Updates a slider's track background to visually represent its value as a percentage.
+     * It sets the `--slider-progress` CSS custom property.
      * @param {any} prop - The slider property object.
-     * @param {HTMLInputElement} element - The slider input element.
+     * @param {HTMLInputElement} element - The slider's input element.
      */
     function updateSliderBackground(prop: any, element: HTMLInputElement) {
         if (!element) return;
@@ -109,7 +132,8 @@
     }
 
     /**
-     * Handles the main accordion toggle and dispatches events to Gradio.
+     * Handles the main accordion toggle (the component's top-level header).
+     * Dispatches 'expand' or 'collapse' events to Gradio.
      */
     function handle_toggle() {
         open = !open;
@@ -118,7 +142,7 @@
     }
 
     /**
-     * Toggles the visibility of an individual property group.
+     * Toggles the visibility of an individual property group (e.g., "Model", "Sampling").
      * @param {string} groupName - The name of the group to toggle.
      */
     function toggleGroup(groupName: string) {
@@ -126,9 +150,9 @@
     }
     
     /**
-     * Utility function to get the current value of a specific property by its name.
-     * Used for `interactive_if` logic.
-     * @param {string} prop_name - The name of the property.
+     * Utility function to find the current value of a specific property by its name.
+     * Used to implement the `interactive_if` logic.
+     * @param {string} prop_name - The name of the property to find.
      */
     function get_prop_value(prop_name: string) {
         if (!Array.isArray(value)) return undefined;
@@ -139,19 +163,20 @@
         }
         return undefined;
     }
-    
+
     /**
-     * Dispatches `change` or `input` events to the Gradio backend.
+     * Dispatches a single-property update to the Gradio backend.
+     * Used for simple inputs like textboxes, sliders, and checkboxes.
+     * Creates a small payload like `{ 'prop_name': new_value }`.
      * @param {"change" | "input"} event_name - The type of event to dispatch.
      * @param {any} changed_prop - The property object that was modified.
      */
     function dispatch_update(event_name: "change" | "input", changed_prop: any) {
         if (validationState[changed_prop.name] === false) {
-            return; // Do not dispatch if the value is invalid.
+            return;
         }
         const payload: Record<string, any> = {};
         let final_value = changed_prop.value;
-        // Ensure correct data type for dispatch.
         if (changed_prop.component?.startsWith("number") || changed_prop.component === "slider") {
             final_value = Number(changed_prop.value);
         } else if (changed_prop.component === "checkbox") {
@@ -161,13 +186,39 @@
         gradio.dispatch(event_name, payload);
     }
     
-    function handle_dropdown_change(event: Event, prop: any) {
-        prop.value = (event.target as HTMLSelectElement).value;
-        dispatch_update("change", prop);
+    /**
+     * Handles changes from a dropdown (`select`) element.
+     * It updates the local `value` array and then dispatches the *entire updated object*
+     * to the backend. This is a robust way to ensure state consistency.
+     * @param {Event} event - The DOM change event.
+     * @param {any} prop_to_change - The property object being modified.
+     */
+    async function handle_dropdown_change(event: Event, prop_to_change: any) {
+        const new_prop_value = (event.target as HTMLSelectElement).value;
+
+        // Recreate the entire `value` array to ensure Svelte's reactivity.
+        value = value.map(group => {
+            if (!group.properties) return group;
+            return {
+                ...group,
+                properties: group.properties.map(prop => {
+                    if (prop.name === prop_to_change.name) {
+                        return { ...prop, value: new_prop_value };
+                    }
+                    return prop;
+                })
+            };
+        });
+
+        // Wait for Svelte to process the DOM update before dispatching.
+        await tick();
+        // Dispatch the full, updated value object to the backend.
+        gradio.dispatch("change", value);
     }
-    
+
     /**
-     * Resets a single property to its initial value.
+     * Resets a single property to its initial value, which was stored on mount.
+     * It dispatches the entire updated `value` object to the backend.
      * @param {string} propName - The name of the property to reset.
      */
     function handle_reset_prop(propName: string) {
@@ -177,7 +228,6 @@
             isResetting = false;
             return;
         }
-        // Create a new array to trigger Svelte's reactivity.
         let updatedValue = value.map(group => {
             if (group.properties) {
                 group.properties = group.properties.map(prop => {
@@ -194,8 +244,11 @@
         setTimeout(() => { isResetting = false; }, 100);
     }
 
-    onMount(() => {
-        // Store a snapshot of the initial value state.
+    /**
+     * Creates a snapshot of the initial values of all properties.
+     * This snapshot is used by the reset functionality.
+     */
+    function storeInitialValues() {
         lastValue = JSON.stringify(value);
         if (Array.isArray(value)) {
             value.forEach(group => {
@@ -207,12 +260,19 @@
             });
         }
         
-        // Update sliders on initial mount to ensure they reflect the correct state.
-        // A timeout ensures `bind:this` has completed.
-        setTimeout(updateAllSliders, 0);
+        // Ensure sliders are visually updated on initial load.
+        setTimeout(updateAllSliders, 50);
+    }
+
+    /**
+     * Lifecycle hook that runs when the component is first added to the DOM.
+     */
+    onMount(() => {
+        storeInitialValues();
     });
 </script>
 
+<!-- The HTML template renders the component's UI based on the `value` prop. -->
 <Block {visible} {elem_id} elem_classes={final_classes} {container} {scale} {min_width} {width}>
     {#if loading_status}
         <StatusTracker
@@ -223,7 +283,7 @@
         />
     {/if}
 
-    <!-- Main accordion header that toggles the entire component's visibility -->
+    <!-- Main accordion header that toggles the entire component's content -->
     <button class="accordion-header" on:click={handle_toggle}>
         {#if label}
             <span class="label">{label}</span>
@@ -231,7 +291,7 @@
         <span class="accordion-icon" style:transform={open ? "rotate(0)" : "rotate(-90deg)"}>▼</span>
     </button>
     
-    <!-- Content wrapper that is shown or hidden -->
+    <!-- Content wrapper that is shown or hidden based on the 'open' state -->
     <div class:closed={!open} class="content-wrapper">
         {#if open}
             <div class="container" style="--sheet-max-height: {height ? `${height}px` : 'none'}">
@@ -371,23 +431,18 @@
 </Block>
 
 <style>
-    /* --- Base Layout & Gradio Integration --- */
+    /* All styles remain the same and are included for completeness */
     :host {
-        /* Make the root component a vertical flex container. */
         display: flex;
         flex-direction: column;
         height: 100%;
     }
-
-    /* Target the wrapper div injected by Gradio. */
     :global(.propertysheet-wrapper) {
-        overflow: hidden !important; /* Force removal of external scrollbar. */
+        overflow: hidden !important;
         display: flex;
         flex-direction: column;
         flex-grow: 1;
     }
-    
-    /* --- Main Accordion --- */
     .accordion-header {
         display: flex;
         justify-content: space-between;
@@ -397,18 +452,16 @@
         padding: var(--block-title-padding);
         background: var(--block-title-background-fill);
         color: var(--block-title-text-color);
-        flex-shrink: 0; /* Prevent the header from shrinking. */
+        flex-shrink: 0;
     }
-    
     .content-wrapper {
         flex-grow: 1;
-        min-height: 0; /* Flexbox trick to allow internal scrolling. */
+        min-height: 0;
     }
-    
     .container {
         overflow-y: auto;
         height: auto; 
-        max-height: var(--sheet-max-height, 500px); /* Max height controlled by a prop, with a sensible fallback. */
+        max-height: var(--sheet-max-height, 500px);
         border-radius: 0 !important;
         border: 1px solid var(--border-color-primary);
         border-top: none;
@@ -416,12 +469,9 @@
         border-bottom-right-radius: var(--radius-lg);
         background-color: var(--background-fill-secondary);
     }
-
     .closed {
         display: none;
     }
-   
-    /* --- Property Groups and Grid --- */
     .group-header {
         display: flex;
         justify-content: space-between;
@@ -436,15 +486,12 @@
         font-weight: var(--font-weight-bold);
         border: 1px solid var(--border-color-primary);
     }
-    
-    /* Defines the two-column layout for labels and controls. */
     .properties-grid {
         display: grid;
         grid-template-columns: 1fr 2fr;
         gap: 0;
         padding: 0;
     }
-    
     .prop-label,
     .prop-control {
         padding: var(--spacing-sm) var(--spacing-md);
@@ -452,7 +499,6 @@
         align-items: center;
         border-bottom: 1px solid var(--background-fill-secondary);
     }
-    
     .prop-label {
         background-color: var(--background-fill-primary);
         color: var(--body-text-color);
@@ -463,16 +509,12 @@
         justify-content: flex-end;
         word-break: break-word;
     }
-    
     .prop-control {
         gap: var(--spacing-sm);
     }
-    
     .properties-grid > :nth-last-child(-n+2) {
         border-bottom: none;
     }
-
-    /* --- General Input Styles --- */
     .prop-control input[type="text"],
     .prop-control input[type="number"] {
         background-color: var(--input-background-fill);
@@ -487,7 +529,6 @@
         padding-left: var(--spacing-md);
         padding-right: var(--spacing-3);
     }
-    
     .prop-control input[type="text"]:focus,
     .prop-control input[type="number"]:focus {
         box-shadow: var(--input-shadow-focus);
@@ -495,13 +536,10 @@
         background-color: var(--input-background-fill-focus);
         outline: none;
     }
-
-    /* --- Dropdown Component Styles --- */
     .dropdown-wrapper {
         position: relative;
         width: 100%;
     }
-
     .dropdown-wrapper select {
         -webkit-appearance: none;
         appearance: none;
@@ -518,7 +556,6 @@
         padding-left: var(--spacing-md);
         padding-right: calc(var(--spacing-3) + 1.2em);
     }
-    
     .dropdown-arrow-icon {
         position: absolute;
         top: 50%;
@@ -532,20 +569,16 @@
         -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
         mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 8l4 4 4-4'%3e%3c/svg%3e");
     }
-    
     .dropdown-wrapper select:focus {
         box-shadow: var(--input-shadow-focus);
         border-color: var(--input-border-color-focus);
         background-color: var(--input-background-fill-focus);
         outline: none;
     }
-    
     .dropdown-wrapper select option {
         background: var(--input-background-fill);
         color: var(--body-text-color);
     }
-    
-    /* --- Checkbox Component Styles --- */
     .prop-control input[type="checkbox"] {
         -webkit-appearance: none;
         appearance: none;
@@ -560,23 +593,19 @@
         margin: 0;
         transition: background-color 0.2s, border-color 0.2s;
     }
-    
     .prop-control input[type="checkbox"]:hover {
         border-color: var(--checkbox-border-color-hover);
         background-color: var(--checkbox-background-color-hover);
     }
-    
     .prop-control input[type="checkbox"]:focus {
         border-color: var(--checkbox-border-color-focus);
         background-color: var(--checkbox-background-color-focus);
         outline: none;
     }
-    
     .prop-control input[type="checkbox"]:checked {
         background-color: var(--checkbox-background-color-selected);
         border-color: var(--checkbox-border-color-focus);
     }
-    
     .prop-control input[type="checkbox"]:checked::after {
         content: "";
         position: absolute;
@@ -589,31 +618,25 @@
         border-width: 0 2px 2px 0;
         transform: translate(-50%, -60%) rotate(45deg);
     }
-    
-    /* --- Slider Component Styles --- */
     .slider-container {
         display: flex;
         align-items: center;
         gap: var(--spacing-md);
         width: 100%;
     }
-    
     .slider-container input[type="range"] {
-        --slider-progress: 0%; /* CSS variable to control the track fill percentage. */
+        --slider-progress: 0%;
         -webkit-appearance: none;
         appearance: none;
         background: transparent;
         cursor: pointer;
         width: 100%;
     }
-    
-    /* The track of the slider, filled with a gradient based on --slider-progress. */
     .slider-container input[type="range"]::-webkit-slider-runnable-track {
         height: 8px;
         border-radius: var(--radius-lg);
         background: linear-gradient( to right, var(--slider-color) var(--slider-progress), var(--input-background-fill) var(--slider-progress) );
     }
-    
     .slider-container input[type="range"]::-webkit-slider-thumb {
         -webkit-appearance: none;
         appearance: none;
@@ -625,13 +648,11 @@
         border: 1px solid var(--border-color-primary);
         box-shadow: var(--shadow-drop);
     }
-    
     .slider-container input[type="range"]::-moz-range-track {
         height: 8px;
         border-radius: var(--radius-lg);
         background: linear-gradient( to right, var(--slider-color) var(--slider-progress), var(--input-background-fill) var(--slider-progress) );
     }
-    
     .slider-container input[type="range"]::-moz-range-thumb {
         background-color: white;
         border-radius: 50%;
@@ -640,15 +661,12 @@
         border: 1px solid var(--border-color-primary);
         box-shadow: var(--shadow-drop);
     }
-    
     .slider-value {
         min-width: 40px;
         text-align: right;
         font-family: var(--font-mono);
         font-size: var(--text-xs);
     }
-
-    /* --- Tooltip Styles --- */
     .prop-label-wrapper {
         display: flex;
         justify-content: flex-end;
@@ -656,14 +674,12 @@
         gap: var(--spacing-sm);
         width: 100%;
     }
-
     .tooltip-container {
         position: relative;
         display: inline-flex;
         align-items: center;
         justify-content: center;
     }
-
     .tooltip-icon {
         display: flex;
         align-items: center;
@@ -678,7 +694,6 @@
         cursor: help;
         user-select: none;
     }
-
     .tooltip-text {
         visibility: hidden;
         width: 200px;
@@ -695,20 +710,16 @@
         opacity: 0;
         transition: opacity 0.3s;
     }
-
     .tooltip-container:hover .tooltip-text {
         visibility: visible;
         opacity: 1;
     }
-
-   /* --- Color Picker Styles --- */
 	.color-picker-container {
 		display: flex;
 		align-items: center;
 		gap: var(--spacing-md);
 		width: 100%;
 	}
-
 	.color-picker-input {
 		width: 50px;
 		height: 28px;
@@ -718,15 +729,12 @@
 		cursor: pointer;
 		padding: 0;
 	}
-
-	/* Style the inner color swatch for a clean look. */
 	.color-picker-input::-webkit-color-swatch-wrapper {
 		padding: 2px;
 	}
 	.color-picker-input::-moz-padding {
 	    padding: 2px;
 	}
-
 	.color-picker-input::-webkit-color-swatch {
 		border: none;
 		border-radius: var(--radius-sm);
@@ -735,20 +743,15 @@
 		border: none;
 		border-radius: var(--radius-sm);
 	}
-
 	.color-picker-value {
 		font-family: var(--font-mono);
 		font-size: var(--text-sm);
 		color: var(--body-text-color-subdued);
 	}
-
-    /* --- Validation and State Styles --- */
     .prop-control input.invalid {
         border-color: var(--error-border-color, red) !important;
         box-shadow: 0 0 0 1px var(--error-border-color, red) !important;
     }
-    
-    /* --- Property Reset Button --- */
     .reset-button-prop {
         display: flex;
         align-items: center;
@@ -760,44 +763,35 @@
         color: var(--body-text-color-subdued);
         font-size: var(--text-lg);
         padding: 0 var(--spacing-2);
-        /* Hidden by default, but occupies space to prevent layout shifts. */
         visibility: hidden;
         opacity: 0;
         transition: opacity 150ms ease-in-out, color 150ms ease-in-out;
     }
-
-    /* When the .visible class is added via Svelte, the button appears. */
     .reset-button-prop.visible {
         visibility: visible;
         opacity: 1;
     }
-
     .reset-button-prop:hover {
         color: var(--body-text-color);
         background-color: var(--background-fill-secondary-hover);
     }
-    
     .reset-button-prop:disabled {
 	    color: var(--body-text-color-subdued) !important;
 	    opacity: 0.5;
 	    cursor: not-allowed;
 	    background-color: transparent !important;
 	}
-    
-    /* --- Disabled State --- */
     .prop-control .disabled {
 		opacity: 0.5;
 		pointer-events: none;
 		cursor: not-allowed;
 	}
-
 	.prop-control .disabled input {
 		cursor: not-allowed;
 	}
-	
 	.reset-button-prop:disabled {
 	    opacity: 0.3;
 	    cursor: not-allowed;
-	    background-color: transparent !important; /* Prevents hover effect. */
+	    background-color: transparent !important;
 	}
 </style>

src/pyproject.toml

@@ -8,12 +8,12 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_propertysheet"
-version = "0.0.1"
+version = "0.0.2"
 description = "Property sheet"
 readme = "README.md"
 license = "apache-2.0"
 requires-python = ">=3.10"
-authors = [{ name = "YOUR NAME", email = "YOUREMAIL@domain.com" }]
+authors = [{ name = "Eliseu Silva", email = "elismasilva@gmail.com" }]
 keywords = ["gradio-custom-component", "gradio-template-Fallback"]
 # Add dependencies here
 dependencies = ["gradio>=4.0,<6.0"]