Upload folder using huggingface_hub

.gitignore

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

README.md

@@ -1,12 +1,269 @@
 ---
-title: Gradio Gradiodesigner
-emoji: 🔥
-colorFrom: pink
-colorTo: purple
+tags: [gradio-custom-component, SimpleTextbox, designer, drag and drop, custom designs]
+title: gradio_gradiodesigner
+short_description: gradio designer
+colorFrom: blue
+colorTo: yellow
 sdk: gradio
-sdk_version: 5.33.1
-app_file: app.py
 pinned: false
+app_file: space.py
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# `gradio_gradiodesigner`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+gradio designer
+
+## Installation
+
+```bash
+pip install gradio_gradiodesigner
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_gradiodesigner import GradioDesigner
+import json
+
+def analyze_design(design_config):
+    """Analyze the design configuration"""
+    if not design_config or not isinstance(design_config, dict):
+        return "No design configuration provided"
+    
+    components = design_config.get('components', [])
+    
+    # Count components by type
+    component_types = {}
+    for comp in components:
+        comp_type = comp.get('type', 'Unknown')
+        component_types[comp_type] = component_types.get(comp_type, 0) + 1
+    
+    # Calculate coverage area
+    if components:
+        positions = [(comp['position']['x'], comp['position']['y']) for comp in components]
+        min_x, min_y = min(pos[0] for pos in positions), min(pos[1] for pos in positions)
+        max_x, max_y = max(pos[0] for pos in positions), max(pos[1] for pos in positions)
+        coverage = f"{max_x - min_x} x {max_y - min_y} pixels"
+    else:
+        coverage = "No components"
+    
+    analysis = f"""📊 **Design Analysis**
+
+**Component Summary:**
+• Total components: {len(components)}
+• Component types: {dict(component_types)}
+• Canvas coverage: {coverage}
+
+**Component Details:**
+"""
+    
+    for i, comp in enumerate(components, 1):
+        analysis += f"\n{i}. **{comp['type']}** (`{comp['id']}`)"
+        analysis += f"\n   - Position: ({comp['position']['x']}, {comp['position']['y']})"
+        analysis += f"\n   - Size: {comp['size']['width']}×{comp['size']['height']}"
+        if comp.get('props', {}).get('label'):
+            analysis += f"\n   - Label: \"{comp['props']['label']}\""
+    
+    return analysis
+
+def generate_gradio_code(design_config):
+    """Generate complete Gradio code from design"""
+    if not design_config or not isinstance(design_config, dict):
+        return "# No design to generate code from"
+    
+    components = design_config.get('components', [])
+    
+    code = '''import gradio as gr
+
+def process_input(*args):
+    """Process the inputs from your app"""
+    return "Hello from your generated app!"
+
+with gr.Blocks(title="Generated Gradio App") as demo:
+    gr.Markdown("# 🚀 Generated Gradio App")
+    gr.Markdown("This app was generated from your visual design!")
+    
+'''
+    
+    # Sort components by position (top to bottom, left to right)
+    sorted_components = sorted(components, key=lambda c: (c['position']['y'], c['position']['x']))
+    
+    component_vars = []
+    
+    for comp in sorted_components:
+        comp_type = comp.get('type', 'Textbox')
+        comp_id = comp.get('id', 'component')
+        props = comp.get('props', {})
+        
+        # Build component declaration
+        prop_parts = []
+        for key, value in props.items():
+            if key in ['label', 'placeholder', 'value'] and isinstance(value, str):
+                prop_parts.append(f'{key}="{value}"')
+            elif key in ['minimum', 'maximum', 'step', 'lines', 'max_length', 'precision'] and isinstance(value, (int, float)):
+                prop_parts.append(f'{key}={value}')
+            elif key == 'choices' and isinstance(value, list):
+                prop_parts.append(f'{key}={value}')
+            elif isinstance(value, bool):
+                prop_parts.append(f'{key}={value}')
+        
+        prop_string = ", ".join(prop_parts) if prop_parts else ""
+        
+        code += f"    {comp_id} = gr.{comp_type}({prop_string})\n"
+        component_vars.append(comp_id)
+    
+    # Add a simple interaction if there are components
+    if component_vars:
+        inputs = [var for var in component_vars if not var.startswith('button')]
+        outputs = [var for var in component_vars if var.startswith('button')]
+        
+        if not outputs:
+            outputs = inputs[:1]  # Use first input as output if no buttons
+        
+        if inputs and outputs:
+            code += f"\n    # Add interactions\n"
+            code += f"    # Example: connect inputs to outputs\n"
+            code += f"    # {outputs[0]}.click(process_input, inputs=[{', '.join(inputs)}], outputs=[{outputs[0]}])\n"
+    
+    code += '''
+if __name__ == "__main__":
+    demo.launch()
+'''
+    
+    return code
+
+with gr.Blocks(title="Gradio Visual Designer Pro", theme=gr.themes.Soft()) as demo:
+    gr.Markdown("""
+    # 🎨 Gradio Visual Designer Pro
+    
+    **Build your Gradio apps visually!** Drag and drop components, customize properties, and generate production-ready code.
+    
+    **Features:** 25+ Gradio components • Real-time editing • Code generation • Export options
+    """)
+    
+    with gr.Row():
+        designer = GradioDesigner(
+            label="Visual App Designer",
+            value={"components": [], "layout": "blocks"}
+        )
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            analysis_output = gr.Markdown(
+                value="Design analysis will appear here...",
+                label="Design Analysis"
+            )
+        
+        with gr.Column(scale=1):
+            code_output = gr.Code(
+                label="Generated Gradio Code",
+                language="python",
+                value="# Design your app above to see generated code",
+                lines=20
+            )
+    
+    with gr.Row():
+        analyze_btn = gr.Button("📊 Analyze Design", variant="secondary")
+        generate_btn = gr.Button("🚀 Generate Code", variant="primary")
+        clear_btn = gr.Button("🗑️ Clear All", variant="stop")
+    
+    # Event handlers
+    designer.change(
+        fn=analyze_design,
+        inputs=[designer], 
+        outputs=[analysis_output]
+    )
+    
+    analyze_btn.click(
+        fn=analyze_design,
+        inputs=[designer],
+        outputs=[analysis_output]
+    )
+    
+    generate_btn.click(
+        fn=generate_gradio_code,
+        inputs=[designer],
+        outputs=[code_output]
+    )
+    
+    clear_btn.click(
+        fn=lambda: {"components": [], "layout": "blocks"},
+        outputs=[designer]
+    )
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `GradioDesigner`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+dict | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the GradioDesigner changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
+| `input` | This listener is triggered when the user changes the value of the GradioDesigner. |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+
+
+ ```python
+ def predict(
+     value: dict | None
+ ) -> dict | None:
+     return value
+ ```
+ 

app.py

@@ -0,0 +1,172 @@
+import gradio as gr
+from gradio_gradiodesigner import GradioDesigner
+import json
+
+def analyze_design(design_config):
+    """Analyze the design configuration"""
+    if not design_config or not isinstance(design_config, dict):
+        return "No design configuration provided"
+    
+    components = design_config.get('components', [])
+    
+    # Count components by type
+    component_types = {}
+    for comp in components:
+        comp_type = comp.get('type', 'Unknown')
+        component_types[comp_type] = component_types.get(comp_type, 0) + 1
+    
+    # Calculate coverage area
+    if components:
+        positions = [(comp['position']['x'], comp['position']['y']) for comp in components]
+        min_x, min_y = min(pos[0] for pos in positions), min(pos[1] for pos in positions)
+        max_x, max_y = max(pos[0] for pos in positions), max(pos[1] for pos in positions)
+        coverage = f"{max_x - min_x} x {max_y - min_y} pixels"
+    else:
+        coverage = "No components"
+    
+    analysis = f"""📊 **Design Analysis**
+
+**Component Summary:**
+• Total components: {len(components)}
+• Component types: {dict(component_types)}
+• Canvas coverage: {coverage}
+
+**Component Details:**
+"""
+    
+    for i, comp in enumerate(components, 1):
+        analysis += f"\n{i}. **{comp['type']}** (`{comp['id']}`)"
+        analysis += f"\n   - Position: ({comp['position']['x']}, {comp['position']['y']})"
+        analysis += f"\n   - Size: {comp['size']['width']}×{comp['size']['height']}"
+        if comp.get('props', {}).get('label'):
+            analysis += f"\n   - Label: \"{comp['props']['label']}\""
+    
+    return analysis
+
+def generate_gradio_code(design_config):
+    """Generate complete Gradio code from design"""
+    if not design_config or not isinstance(design_config, dict):
+        return "# No design to generate code from"
+    
+    components = design_config.get('components', [])
+    
+    code = '''import gradio as gr
+
+def process_input(*args):
+    """Process the inputs from your app"""
+    return "Hello from your generated app!"
+
+with gr.Blocks(title="Generated Gradio App") as demo:
+    gr.Markdown("# 🚀 Generated Gradio App")
+    gr.Markdown("This app was generated from your visual design!")
+    
+'''
+    
+    # Sort components by position (top to bottom, left to right)
+    sorted_components = sorted(components, key=lambda c: (c['position']['y'], c['position']['x']))
+    
+    component_vars = []
+    
+    for comp in sorted_components:
+        comp_type = comp.get('type', 'Textbox')
+        comp_id = comp.get('id', 'component')
+        props = comp.get('props', {})
+        
+        # Build component declaration
+        prop_parts = []
+        for key, value in props.items():
+            if key in ['label', 'placeholder', 'value'] and isinstance(value, str):
+                prop_parts.append(f'{key}="{value}"')
+            elif key in ['minimum', 'maximum', 'step', 'lines', 'max_length', 'precision'] and isinstance(value, (int, float)):
+                prop_parts.append(f'{key}={value}')
+            elif key == 'choices' and isinstance(value, list):
+                prop_parts.append(f'{key}={value}')
+            elif isinstance(value, bool):
+                prop_parts.append(f'{key}={value}')
+        
+        prop_string = ", ".join(prop_parts) if prop_parts else ""
+        
+        code += f"    {comp_id} = gr.{comp_type}({prop_string})\n"
+        component_vars.append(comp_id)
+    
+    # Add a simple interaction if there are components
+    if component_vars:
+        inputs = [var for var in component_vars if not var.startswith('button')]
+        outputs = [var for var in component_vars if var.startswith('button')]
+        
+        if not outputs:
+            outputs = inputs[:1]  # Use first input as output if no buttons
+        
+        if inputs and outputs:
+            code += f"\n    # Add interactions\n"
+            code += f"    # Example: connect inputs to outputs\n"
+            code += f"    # {outputs[0]}.click(process_input, inputs=[{', '.join(inputs)}], outputs=[{outputs[0]}])\n"
+    
+    code += '''
+if __name__ == "__main__":
+    demo.launch()
+'''
+    
+    return code
+
+with gr.Blocks(title="Gradio Visual Designer Pro", theme=gr.themes.Soft()) as demo:
+    gr.Markdown("""
+    # 🎨 Gradio Visual Designer Pro
+    
+    **Build your Gradio apps visually!** Drag and drop components, customize properties, and generate production-ready code.
+    
+    **Features:** 25+ Gradio components • Real-time editing • Code generation • Export options
+    """)
+    
+    with gr.Row():
+        designer = GradioDesigner(
+            label="Visual App Designer",
+            value={"components": [], "layout": "blocks"}
+        )
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            analysis_output = gr.Markdown(
+                value="Design analysis will appear here...",
+                label="Design Analysis"
+            )
+        
+        with gr.Column(scale=1):
+            code_output = gr.Code(
+                label="Generated Gradio Code",
+                language="python",
+                value="# Design your app above to see generated code",
+                lines=20
+            )
+    
+    with gr.Row():
+        analyze_btn = gr.Button("📊 Analyze Design", variant="secondary")
+        generate_btn = gr.Button("🚀 Generate Code", variant="primary")
+        clear_btn = gr.Button("🗑️ Clear All", variant="stop")
+    
+    # Event handlers
+    designer.change(
+        fn=analyze_design,
+        inputs=[designer], 
+        outputs=[analysis_output]
+    )
+    
+    analyze_btn.click(
+        fn=analyze_design,
+        inputs=[designer],
+        outputs=[analysis_output]
+    )
+    
+    generate_btn.click(
+        fn=generate_gradio_code,
+        inputs=[designer],
+        outputs=[code_output]
+    )
+    
+    clear_btn.click(
+        fn=lambda: {"components": [], "layout": "blocks"},
+        outputs=[designer]
+    )
+
+if __name__ == "__main__":
+    demo.launch()

css.css

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

requirements.txt

@@ -0,0 +1 @@
+gradio_gradiodesigner

space.py

@@ -0,0 +1,293 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'GradioDesigner': {'description': 'A visual designer component for building Gradio layouts with all components', 'members': {'__init__': {'value': {'type': 'dict | None', 'default': 'None', 'description': None}, 'label': {'type': 'str | None', 'default': 'None', 'description': None}}, 'postprocess': {'value': {'type': 'dict | None', 'description': None}}, 'preprocess': {'return': {'type': 'dict | None', 'description': None}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the GradioDesigner changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'input': {'type': None, 'default': None, 'description': 'This listener is triggered when the user changes the value of the GradioDesigner.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'GradioDesigner': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_gradiodesigner`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+gradio designer
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_gradiodesigner
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_gradiodesigner import GradioDesigner
+import json
+
+def analyze_design(design_config):
+    \"\"\"Analyze the design configuration\"\"\"
+    if not design_config or not isinstance(design_config, dict):
+        return "No design configuration provided"
+    
+    components = design_config.get('components', [])
+    
+    # Count components by type
+    component_types = {}
+    for comp in components:
+        comp_type = comp.get('type', 'Unknown')
+        component_types[comp_type] = component_types.get(comp_type, 0) + 1
+    
+    # Calculate coverage area
+    if components:
+        positions = [(comp['position']['x'], comp['position']['y']) for comp in components]
+        min_x, min_y = min(pos[0] for pos in positions), min(pos[1] for pos in positions)
+        max_x, max_y = max(pos[0] for pos in positions), max(pos[1] for pos in positions)
+        coverage = f"{max_x - min_x} x {max_y - min_y} pixels"
+    else:
+        coverage = "No components"
+    
+    analysis = f\"\"\"📊 **Design Analysis**
+
+**Component Summary:**
+• Total components: {len(components)}
+• Component types: {dict(component_types)}
+• Canvas coverage: {coverage}
+
+**Component Details:**
+\"\"\"
+    
+    for i, comp in enumerate(components, 1):
+        analysis += f"\n{i}. **{comp['type']}** (`{comp['id']}`)"
+        analysis += f"\n   - Position: ({comp['position']['x']}, {comp['position']['y']})"
+        analysis += f"\n   - Size: {comp['size']['width']}×{comp['size']['height']}"
+        if comp.get('props', {}).get('label'):
+            analysis += f"\n   - Label: \"{comp['props']['label']}\""
+    
+    return analysis
+
+def generate_gradio_code(design_config):
+    \"\"\"Generate complete Gradio code from design\"\"\"
+    if not design_config or not isinstance(design_config, dict):
+        return "# No design to generate code from"
+    
+    components = design_config.get('components', [])
+    
+    code = '''import gradio as gr
+
+def process_input(*args):
+    \"\"\"Process the inputs from your app\"\"\"
+    return "Hello from your generated app!"
+
+with gr.Blocks(title="Generated Gradio App") as demo:
+    gr.Markdown("# 🚀 Generated Gradio App")
+    gr.Markdown("This app was generated from your visual design!")
+    
+'''
+    
+    # Sort components by position (top to bottom, left to right)
+    sorted_components = sorted(components, key=lambda c: (c['position']['y'], c['position']['x']))
+    
+    component_vars = []
+    
+    for comp in sorted_components:
+        comp_type = comp.get('type', 'Textbox')
+        comp_id = comp.get('id', 'component')
+        props = comp.get('props', {})
+        
+        # Build component declaration
+        prop_parts = []
+        for key, value in props.items():
+            if key in ['label', 'placeholder', 'value'] and isinstance(value, str):
+                prop_parts.append(f'{key}="{value}"')
+            elif key in ['minimum', 'maximum', 'step', 'lines', 'max_length', 'precision'] and isinstance(value, (int, float)):
+                prop_parts.append(f'{key}={value}')
+            elif key == 'choices' and isinstance(value, list):
+                prop_parts.append(f'{key}={value}')
+            elif isinstance(value, bool):
+                prop_parts.append(f'{key}={value}')
+        
+        prop_string = ", ".join(prop_parts) if prop_parts else ""
+        
+        code += f"    {comp_id} = gr.{comp_type}({prop_string})\n"
+        component_vars.append(comp_id)
+    
+    # Add a simple interaction if there are components
+    if component_vars:
+        inputs = [var for var in component_vars if not var.startswith('button')]
+        outputs = [var for var in component_vars if var.startswith('button')]
+        
+        if not outputs:
+            outputs = inputs[:1]  # Use first input as output if no buttons
+        
+        if inputs and outputs:
+            code += f"\n    # Add interactions\n"
+            code += f"    # Example: connect inputs to outputs\n"
+            code += f"    # {outputs[0]}.click(process_input, inputs=[{', '.join(inputs)}], outputs=[{outputs[0]}])\n"
+    
+    code += '''
+if __name__ == "__main__":
+    demo.launch()
+'''
+    
+    return code
+
+with gr.Blocks(title="Gradio Visual Designer Pro", theme=gr.themes.Soft()) as demo:
+    gr.Markdown(\"\"\"
+    # 🎨 Gradio Visual Designer Pro
+    
+    **Build your Gradio apps visually!** Drag and drop components, customize properties, and generate production-ready code.
+    
+    **Features:** 25+ Gradio components • Real-time editing • Code generation • Export options
+    \"\"\")
+    
+    with gr.Row():
+        designer = GradioDesigner(
+            label="Visual App Designer",
+            value={"components": [], "layout": "blocks"}
+        )
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            analysis_output = gr.Markdown(
+                value="Design analysis will appear here...",
+                label="Design Analysis"
+            )
+        
+        with gr.Column(scale=1):
+            code_output = gr.Code(
+                label="Generated Gradio Code",
+                language="python",
+                value="# Design your app above to see generated code",
+                lines=20
+            )
+    
+    with gr.Row():
+        analyze_btn = gr.Button("📊 Analyze Design", variant="secondary")
+        generate_btn = gr.Button("🚀 Generate Code", variant="primary")
+        clear_btn = gr.Button("🗑️ Clear All", variant="stop")
+    
+    # Event handlers
+    designer.change(
+        fn=analyze_design,
+        inputs=[designer], 
+        outputs=[analysis_output]
+    )
+    
+    analyze_btn.click(
+        fn=analyze_design,
+        inputs=[designer],
+        outputs=[analysis_output]
+    )
+    
+    generate_btn.click(
+        fn=generate_gradio_code,
+        inputs=[designer],
+        outputs=[code_output]
+    )
+    
+    clear_btn.click(
+        fn=lambda: {"components": [], "layout": "blocks"},
+        outputs=[designer]
+    )
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `GradioDesigner`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["GradioDesigner"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["GradioDesigner"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+
+
+ ```python
+def predict(
+    value: dict | None
+) -> dict | None:
+    return value
+```
+""", elem_classes=["md-custom", "GradioDesigner-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          GradioDesigner: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/.gitignore

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

src/README.md

@@ -0,0 +1,269 @@
+---
+tags: [gradio-custom-component, SimpleTextbox, designer, drag and drop, custom designs]
+title: gradio_gradiodesigner
+short_description: gradio designer
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# `gradio_gradiodesigner`
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+
+gradio designer
+
+## Installation
+
+```bash
+pip install gradio_gradiodesigner
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_gradiodesigner import GradioDesigner
+import json
+
+def analyze_design(design_config):
+    """Analyze the design configuration"""
+    if not design_config or not isinstance(design_config, dict):
+        return "No design configuration provided"
+    
+    components = design_config.get('components', [])
+    
+    # Count components by type
+    component_types = {}
+    for comp in components:
+        comp_type = comp.get('type', 'Unknown')
+        component_types[comp_type] = component_types.get(comp_type, 0) + 1
+    
+    # Calculate coverage area
+    if components:
+        positions = [(comp['position']['x'], comp['position']['y']) for comp in components]
+        min_x, min_y = min(pos[0] for pos in positions), min(pos[1] for pos in positions)
+        max_x, max_y = max(pos[0] for pos in positions), max(pos[1] for pos in positions)
+        coverage = f"{max_x - min_x} x {max_y - min_y} pixels"
+    else:
+        coverage = "No components"
+    
+    analysis = f"""📊 **Design Analysis**
+
+**Component Summary:**
+• Total components: {len(components)}
+• Component types: {dict(component_types)}
+• Canvas coverage: {coverage}
+
+**Component Details:**
+"""
+    
+    for i, comp in enumerate(components, 1):
+        analysis += f"\n{i}. **{comp['type']}** (`{comp['id']}`)"
+        analysis += f"\n   - Position: ({comp['position']['x']}, {comp['position']['y']})"
+        analysis += f"\n   - Size: {comp['size']['width']}×{comp['size']['height']}"
+        if comp.get('props', {}).get('label'):
+            analysis += f"\n   - Label: \"{comp['props']['label']}\""
+    
+    return analysis
+
+def generate_gradio_code(design_config):
+    """Generate complete Gradio code from design"""
+    if not design_config or not isinstance(design_config, dict):
+        return "# No design to generate code from"
+    
+    components = design_config.get('components', [])
+    
+    code = '''import gradio as gr
+
+def process_input(*args):
+    """Process the inputs from your app"""
+    return "Hello from your generated app!"
+
+with gr.Blocks(title="Generated Gradio App") as demo:
+    gr.Markdown("# 🚀 Generated Gradio App")
+    gr.Markdown("This app was generated from your visual design!")
+    
+'''
+    
+    # Sort components by position (top to bottom, left to right)
+    sorted_components = sorted(components, key=lambda c: (c['position']['y'], c['position']['x']))
+    
+    component_vars = []
+    
+    for comp in sorted_components:
+        comp_type = comp.get('type', 'Textbox')
+        comp_id = comp.get('id', 'component')
+        props = comp.get('props', {})
+        
+        # Build component declaration
+        prop_parts = []
+        for key, value in props.items():
+            if key in ['label', 'placeholder', 'value'] and isinstance(value, str):
+                prop_parts.append(f'{key}="{value}"')
+            elif key in ['minimum', 'maximum', 'step', 'lines', 'max_length', 'precision'] and isinstance(value, (int, float)):
+                prop_parts.append(f'{key}={value}')
+            elif key == 'choices' and isinstance(value, list):
+                prop_parts.append(f'{key}={value}')
+            elif isinstance(value, bool):
+                prop_parts.append(f'{key}={value}')
+        
+        prop_string = ", ".join(prop_parts) if prop_parts else ""
+        
+        code += f"    {comp_id} = gr.{comp_type}({prop_string})\n"
+        component_vars.append(comp_id)
+    
+    # Add a simple interaction if there are components
+    if component_vars:
+        inputs = [var for var in component_vars if not var.startswith('button')]
+        outputs = [var for var in component_vars if var.startswith('button')]
+        
+        if not outputs:
+            outputs = inputs[:1]  # Use first input as output if no buttons
+        
+        if inputs and outputs:
+            code += f"\n    # Add interactions\n"
+            code += f"    # Example: connect inputs to outputs\n"
+            code += f"    # {outputs[0]}.click(process_input, inputs=[{', '.join(inputs)}], outputs=[{outputs[0]}])\n"
+    
+    code += '''
+if __name__ == "__main__":
+    demo.launch()
+'''
+    
+    return code
+
+with gr.Blocks(title="Gradio Visual Designer Pro", theme=gr.themes.Soft()) as demo:
+    gr.Markdown("""
+    # 🎨 Gradio Visual Designer Pro
+    
+    **Build your Gradio apps visually!** Drag and drop components, customize properties, and generate production-ready code.
+    
+    **Features:** 25+ Gradio components • Real-time editing • Code generation • Export options
+    """)
+    
+    with gr.Row():
+        designer = GradioDesigner(
+            label="Visual App Designer",
+            value={"components": [], "layout": "blocks"}
+        )
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            analysis_output = gr.Markdown(
+                value="Design analysis will appear here...",
+                label="Design Analysis"
+            )
+        
+        with gr.Column(scale=1):
+            code_output = gr.Code(
+                label="Generated Gradio Code",
+                language="python",
+                value="# Design your app above to see generated code",
+                lines=20
+            )
+    
+    with gr.Row():
+        analyze_btn = gr.Button("📊 Analyze Design", variant="secondary")
+        generate_btn = gr.Button("🚀 Generate Code", variant="primary")
+        clear_btn = gr.Button("🗑️ Clear All", variant="stop")
+    
+    # Event handlers
+    designer.change(
+        fn=analyze_design,
+        inputs=[designer], 
+        outputs=[analysis_output]
+    )
+    
+    analyze_btn.click(
+        fn=analyze_design,
+        inputs=[designer],
+        outputs=[analysis_output]
+    )
+    
+    generate_btn.click(
+        fn=generate_gradio_code,
+        inputs=[designer],
+        outputs=[code_output]
+    )
+    
+    clear_btn.click(
+        fn=lambda: {"components": [], "layout": "blocks"},
+        outputs=[designer]
+    )
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `GradioDesigner`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+dict | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the GradioDesigner changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
+| `input` | This listener is triggered when the user changes the value of the GradioDesigner. |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+
+
+ ```python
+ def predict(
+     value: dict | None
+ ) -> dict | None:
+     return value
+ ```
+ 

src/backend/gradio_gradiodesigner/__init__.py

@@ -0,0 +1,4 @@
+
+from .gradiodesigner import GradioDesigner
+
+__all__ = ['GradioDesigner']

src/backend/gradio_gradiodesigner/gradiodesigner.py

@@ -0,0 +1,232 @@
+from __future__ import annotations
+from gradio.components.base import Component
+from gradio.events import Events
+import json
+
+class GradioDesigner(Component):
+    """
+    A visual designer component for building Gradio layouts with all components
+    """
+    
+    EVENTS = [Events.change, Events.input]
+    
+    # Complete component definitions with their properties
+    COMPONENT_DEFINITIONS = {
+        "Textbox": {
+            "properties": ["label", "placeholder", "lines", "max_length", "type", "value"],
+            "defaults": {"label": "Text Input", "placeholder": "Enter text...", "lines": 1, "value": ""},
+            "icon": "📝",
+            "category": "Input"
+        },
+        "TextArea": {
+            "properties": ["label", "placeholder", "lines", "max_length", "value"],
+            "defaults": {"label": "Text Area", "placeholder": "Enter multiple lines...", "lines": 3, "value": ""},
+            "icon": "📄",
+            "category": "Input"
+        },
+        "Button": {
+            "properties": ["value", "variant", "size"],
+            "defaults": {"value": "Click me", "variant": "secondary", "size": "sm"},
+            "icon": "🔘",
+            "category": "Action"
+        },
+        "Slider": {
+            "properties": ["minimum", "maximum", "step", "value", "label"],
+            "defaults": {"label": "Slider", "minimum": 0, "maximum": 100, "step": 1, "value": 50},
+            "icon": "🎚️",
+            "category": "Input"
+        },
+        "Number": {
+            "properties": ["label", "value", "precision"],
+            "defaults": {"label": "Number", "value": 0, "precision": 0},
+            "icon": "🔢",
+            "category": "Input"
+        },
+        "Checkbox": {
+            "properties": ["label", "value"],
+            "defaults": {"label": "Checkbox", "value": False},
+            "icon": "☑️",
+            "category": "Input"
+        },
+        "CheckboxGroup": {
+            "properties": ["label", "choices", "value"],
+            "defaults": {"label": "Checkbox Group", "choices": ["Option 1", "Option 2"], "value": []},
+            "icon": "☑️",
+            "category": "Input"
+        },
+        "Radio": {
+            "properties": ["label", "choices", "value"],
+            "defaults": {"label": "Radio", "choices": ["Option 1", "Option 2"], "value": "Option 1"},
+            "icon": "🔘",
+            "category": "Input"
+        },
+        "Dropdown": {
+            "properties": ["label", "choices", "value", "multiselect"],
+            "defaults": {"label": "Dropdown", "choices": ["Option 1", "Option 2"], "value": "Option 1", "multiselect": False},
+            "icon": "📋",
+            "category": "Input"
+        },
+        "Toggle": {
+            "properties": ["label", "value"],
+            "defaults": {"label": "Toggle", "value": False},
+            "icon": "🔄",
+            "category": "Input"
+        },
+        "ColorPicker": {
+            "properties": ["label", "value"],
+            "defaults": {"label": "Color Picker", "value": "#ff0000"},
+            "icon": "🎨",
+            "category": "Input"
+        },
+        "Date": {
+            "properties": ["label", "value"],
+            "defaults": {"label": "Date", "value": "2025-01-01"},
+            "icon": "📅",
+            "category": "Input"
+        },
+        "Time": {
+            "properties": ["label", "value"],
+            "defaults": {"label": "Time", "value": "12:00"},
+            "icon": "⏰",
+            "category": "Input"
+        },
+        "File": {
+            "properties": ["label", "file_types"],
+            "defaults": {"label": "Upload File", "file_types": [".txt", ".pdf"]},
+            "icon": "📁",
+            "category": "Input"
+        },
+        "Image": {
+            "properties": ["label", "type", "tool", "interactive"],
+            "defaults": {"label": "Image", "type": "pil", "interactive": True},
+            "icon": "🖼️",
+            "category": "Media"
+        },
+        "Video": {
+            "properties": ["label", "format"],
+            "defaults": {"label": "Video", "format": "mp4"},
+            "icon": "🎥",
+            "category": "Media"
+        },
+        "Audio": {
+            "properties": ["label"],
+            "defaults": {"label": "Audio"},
+            "icon": "🎵",
+            "category": "Media"
+        },
+        "Dataframe": {
+            "properties": ["headers", "datatype", "value"],
+            "defaults": {"headers": ["Column 1", "Column 2"], "datatype": ["str", "str"], "value": []},
+            "icon": "📊",
+            "category": "Data"
+        },
+        "JSON": {
+            "properties": ["value"],
+            "defaults": {"value": "{}"},
+            "icon": "📋",
+            "category": "Data"
+        },
+        "Markdown": {
+            "properties": ["value"],
+            "defaults": {"value": "# Markdown Text"},
+            "icon": "📝",
+            "category": "Display"
+        },
+        "HTML": {
+            "properties": ["value"],
+            "defaults": {"value": "<p>HTML Content</p>"},
+            "icon": "🌐",
+            "category": "Display"
+        },
+        "Label": {
+            "properties": ["value"],
+            "defaults": {"value": "Label Text"},
+            "icon": "🏷️",
+            "category": "Display"
+        },
+        "Progress": {
+            "properties": ["value"],
+            "defaults": {"value": 0.5},
+            "icon": "📈",
+            "category": "Display"
+        }
+    }
+    
+    def __init__(
+        self,
+        value: dict | None = None,
+        label: str | None = None,
+        **kwargs,
+    ):
+        self.value = value or {"components": [], "layout": "blocks"}
+        super().__init__(label=label, **kwargs)
+
+    def preprocess(self, payload: dict | None) -> dict | None:
+        """Process the layout configuration from frontend"""
+        if payload is None:
+            return None
+        return payload
+
+    def postprocess(self, value: dict | None) -> dict | None:
+        """Send layout configuration to frontend"""
+        if value is None:
+            return {"components": [], "layout": "blocks"}
+        return value
+    
+    def api_info(self) -> dict[str, list[str]]:
+        """API info for the component"""
+        return {
+            "info": {
+                "type": "object",
+                "properties": {
+                    "components": {
+                        "type": "array",
+                        "items": {
+                            "type": "object",
+                            "properties": {
+                                "id": {"type": "string"},
+                                "type": {"type": "string"},
+                                "position": {
+                                    "type": "object",
+                                    "properties": {
+                                        "x": {"type": "number"},
+                                        "y": {"type": "number"}
+                                    }
+                                },
+                                "size": {
+                                    "type": "object", 
+                                    "properties": {
+                                        "width": {"type": "number"},
+                                        "height": {"type": "number"}
+                                    }
+                                },
+                                "props": {"type": "object"}
+                            }
+                        }
+                    },
+                    "layout": {"type": "string"}
+                }
+            },
+            "serialized_info": False
+        }
+    
+    def get_component_definitions(self):
+        """Get all component definitions for frontend"""
+        return self.COMPONENT_DEFINITIONS
+    
+    def example_payload(self) -> dict:
+        return {
+            "components": [
+                {
+                    "id": "textbox_1",
+                    "type": "Textbox", 
+                    "position": {"x": 100, "y": 50},
+                    "size": {"width": 200, "height": 100},
+                    "props": {"label": "Input", "placeholder": "Enter text..."}
+                }
+            ],
+            "layout": "blocks"
+        }
+    
+    def example_value(self) -> dict:
+        return self.example_payload()

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

@@ -0,0 +1,1450 @@
+const {
+  SvelteComponent: Ze,
+  add_render_callback: $e,
+  append_hydration: f,
+  attr: h,
+  binding_callbacks: et,
+  children: j,
+  claim_element: k,
+  claim_space: C,
+  claim_text: oe,
+  destroy_block: tt,
+  destroy_each: Ae,
+  detach: b,
+  element: m,
+  empty: Se,
+  ensure_array_like: Le,
+  get_svelte_dataset: R,
+  init: lt,
+  insert_hydration: O,
+  listen: x,
+  noop: Ie,
+  run_all: je,
+  safe_not_equal: st,
+  select_option: xe,
+  select_value: nt,
+  set_data: Te,
+  set_input_value: Pe,
+  set_style: we,
+  space: y,
+  stop_propagation: it,
+  text: re,
+  toggle_class: Ue,
+  update_keyed_each: at
+} = window.__gradio__svelte__internal, { onMount: ot } = window.__gradio__svelte__internal;
+function Be(n, e, l) {
+  const i = n.slice();
+  return i[50] = e[l], i;
+}
+function Me(n, e, l) {
+  const i = n.slice();
+  return i[50] = e[l], i;
+}
+function Ve(n, e, l) {
+  const i = n.slice();
+  return i[55] = e[l], i;
+}
+function Re(n) {
+  let e, l = (
+    /*category*/
+    n[55] + ""
+  ), i;
+  return {
+    c() {
+      e = m("option"), i = re(l), this.h();
+    },
+    l(t) {
+      e = k(t, "OPTION", {});
+      var r = j(e);
+      i = oe(r, l), r.forEach(b), this.h();
+    },
+    h() {
+      e.__value = /*category*/
+      n[55], Pe(e, e.__value);
+    },
+    m(t, r) {
+      O(t, e, r), f(e, i);
+    },
+    p: Ie,
+    d(t) {
+      t && b(e);
+    }
+  };
+}
+function He(n) {
+  let e, l, i;
+  function t(v, s) {
+    return s[0] & /*searchFilter*/
+    4 && (l = null), l == null && (l = !!/*searchFilter*/
+    v[2].trim()), l ? ut : rt;
+  }
+  let r = t(n, [-1, -1]), p = r(n);
+  return {
+    c() {
+      e = m("div"), p.c(), i = y(), this.h();
+    },
+    l(v) {
+      e = k(v, "DIV", { class: !0 });
+      var s = j(e);
+      p.l(s), i = C(s), s.forEach(b), this.h();
+    },
+    h() {
+      h(e, "class", "no-components svelte-zk15k");
+    },
+    m(v, s) {
+      O(v, e, s), p.m(e, null), f(e, i);
+    },
+    p(v, s) {
+      r === (r = t(v, s)) && p ? p.p(v, s) : (p.d(1), p = r(v), p && (p.c(), p.m(e, i)));
+    },
+    d(v) {
+      v && b(e), p.d();
+    }
+  };
+}
+function rt(n) {
+  let e;
+  return {
+    c() {
+      e = re("Loading components...");
+    },
+    l(l) {
+      e = oe(l, "Loading components...");
+    },
+    m(l, i) {
+      O(l, e, i);
+    },
+    p: Ie,
+    d(l) {
+      l && b(e);
+    }
+  };
+}
+function ut(n) {
+  let e, l, i;
+  return {
+    c() {
+      e = re('No components match "'), l = re(
+        /*searchFilter*/
+        n[2]
+      ), i = re('"');
+    },
+    l(t) {
+      e = oe(t, 'No components match "'), l = oe(
+        t,
+        /*searchFilter*/
+        n[2]
+      ), i = oe(t, '"');
+    },
+    m(t, r) {
+      O(t, e, r), O(t, l, r), O(t, i, r);
+    },
+    p(t, r) {
+      r[0] & /*searchFilter*/
+      4 && Te(
+        l,
+        /*searchFilter*/
+        t[2]
+      );
+    },
+    d(t) {
+      t && (b(e), b(l), b(i));
+    }
+  };
+}
+function Fe(n) {
+  let e, l, i = (
+    /*component*/
+    n[50].icon + ""
+  ), t, r, p, v = (
+    /*component*/
+    n[50].label + ""
+  ), s, c, ee, q;
+  function S(...D) {
+    return (
+      /*dragstart_handler*/
+      n[29](
+        /*component*/
+        n[50],
+        ...D
+      )
+    );
+  }
+  return {
+    c() {
+      e = m("div"), l = m("span"), t = re(i), r = y(), p = m("span"), s = re(v), c = y(), this.h();
+    },
+    l(D) {
+      e = k(D, "DIV", { class: !0, draggable: !0 });
+      var N = j(e);
+      l = k(N, "SPAN", { class: !0 });
+      var M = j(l);
+      t = oe(M, i), M.forEach(b), r = C(N), p = k(N, "SPAN", { class: !0 });
+      var g = j(p);
+      s = oe(g, v), g.forEach(b), c = C(N), N.forEach(b), this.h();
+    },
+    h() {
+      h(l, "class", "icon svelte-zk15k"), h(p, "class", "label svelte-zk15k"), h(e, "class", "palette-item svelte-zk15k"), h(e, "draggable", "true");
+    },
+    m(D, N) {
+      O(D, e, N), f(e, l), f(l, t), f(e, r), f(e, p), f(p, s), f(e, c), ee || (q = x(e, "dragstart", S), ee = !0);
+    },
+    p(D, N) {
+      n = D, N[0] & /*displayComponents*/
+      64 && i !== (i = /*component*/
+      n[50].icon + "") && Te(t, i), N[0] & /*displayComponents*/
+      64 && v !== (v = /*component*/
+      n[50].label + "") && Te(s, v);
+    },
+    d(D) {
+      D && b(e), ee = !1, q();
+    }
+  };
+}
+function Ge(n, e) {
+  let l, i, t, r, p = (
+    /*component*/
+    e[50].type + ""
+  ), v, s, c, ee = "❌", q, S, D = (
+    /*component*/
+    (e[50].props.label || /*component*/
+    e[50].props.value || "Component") + ""
+  ), N, M, g, G;
+  function te() {
+    return (
+      /*click_handler*/
+      e[30](
+        /*component*/
+        e[50]
+      )
+    );
+  }
+  function J() {
+    return (
+      /*click_handler_1*/
+      e[31](
+        /*component*/
+        e[50]
+      )
+    );
+  }
+  function Z(...I) {
+    return (
+      /*mousedown_handler*/
+      e[32](
+        /*component*/
+        e[50],
+        ...I
+      )
+    );
+  }
+  return {
+    key: n,
+    first: null,
+    c() {
+      l = m("div"), i = m("div"), t = m("div"), r = m("span"), v = re(p), s = y(), c = m("button"), c.textContent = ee, q = y(), S = m("span"), N = re(D), M = y(), this.h();
+    },
+    l(I) {
+      l = k(I, "DIV", { class: !0, style: !0 });
+      var T = j(l);
+      i = k(T, "DIV", { class: !0 });
+      var U = j(i);
+      t = k(U, "DIV", { class: !0 });
+      var X = j(t);
+      r = k(X, "SPAN", { class: !0 });
+      var W = j(r);
+      v = oe(W, p), W.forEach(b), s = C(X), c = k(X, "BUTTON", {
+        class: !0,
+        type: !0,
+        "data-svelte-h": !0
+      }), R(c) !== "svelte-1dvzppr" && (c.textContent = ee), X.forEach(b), q = C(U), S = k(U, "SPAN", { class: !0 });
+      var pe = j(S);
+      N = oe(pe, D), pe.forEach(b), U.forEach(b), M = C(T), T.forEach(b), this.h();
+    },
+    h() {
+      var I;
+      h(r, "class", "type svelte-zk15k"), h(c, "class", "delete-btn svelte-zk15k"), h(c, "type", "button"), h(t, "class", "component-header svelte-zk15k"), h(S, "class", "label svelte-zk15k"), h(i, "class", "component-preview svelte-zk15k"), h(l, "class", "canvas-component svelte-zk15k"), we(
+        l,
+        "left",
+        /*component*/
+        e[50].position.x + "px"
+      ), we(
+        l,
+        "top",
+        /*component*/
+        e[50].position.y + "px"
+      ), we(
+        l,
+        "width",
+        /*component*/
+        e[50].size.width + "px"
+      ), we(
+        l,
+        "height",
+        /*component*/
+        e[50].size.height + "px"
+      ), Ue(
+        l,
+        "selected",
+        /*selectedComponent*/
+        ((I = e[5]) == null ? void 0 : I.id) === /*component*/
+        e[50].id
+      ), this.first = l;
+    },
+    m(I, T) {
+      O(I, l, T), f(l, i), f(i, t), f(t, r), f(r, v), f(t, s), f(t, c), f(i, q), f(i, S), f(S, N), f(l, M), g || (G = [
+        x(c, "click", it(te)),
+        x(l, "click", J),
+        x(l, "mousedown", Z)
+      ], g = !0);
+    },
+    p(I, T) {
+      var U;
+      e = I, T[0] & /*value*/
+      1 && p !== (p = /*component*/
+      e[50].type + "") && Te(v, p), T[0] & /*value*/
+      1 && D !== (D = /*component*/
+      (e[50].props.label || /*component*/
+      e[50].props.value || "Component") + "") && Te(N, D), T[0] & /*value*/
+      1 && we(
+        l,
+        "left",
+        /*component*/
+        e[50].position.x + "px"
+      ), T[0] & /*value*/
+      1 && we(
+        l,
+        "top",
+        /*component*/
+        e[50].position.y + "px"
+      ), T[0] & /*value*/
+      1 && we(
+        l,
+        "width",
+        /*component*/
+        e[50].size.width + "px"
+      ), T[0] & /*value*/
+      1 && we(
+        l,
+        "height",
+        /*component*/
+        e[50].size.height + "px"
+      ), T[0] & /*selectedComponent, value*/
+      33 && Ue(
+        l,
+        "selected",
+        /*selectedComponent*/
+        ((U = e[5]) == null ? void 0 : U.id) === /*component*/
+        e[50].id
+      );
+    },
+    d(I) {
+      I && b(l), g = !1, je(G);
+    }
+  };
+}
+function pt(n) {
+  let e, l = "Select a component to edit properties", i, t, r = '<strong>How to use:</strong> <ul class="svelte-zk15k"><li class="svelte-zk15k">Drag components from the palette to the canvas</li> <li class="svelte-zk15k">Click components to select and edit them</li> <li class="svelte-zk15k">Drag components around the canvas to reposition</li> <li class="svelte-zk15k">Use the properties panel to customize</li></ul>';
+  return {
+    c() {
+      e = m("p"), e.textContent = l, i = y(), t = m("div"), t.innerHTML = r, this.h();
+    },
+    l(p) {
+      e = k(p, "P", { "data-svelte-h": !0 }), R(e) !== "svelte-ilodow" && (e.textContent = l), i = C(p), t = k(p, "DIV", { class: !0, "data-svelte-h": !0 }), R(t) !== "svelte-15cgtbi" && (t.innerHTML = r), this.h();
+    },
+    h() {
+      h(t, "class", "help-text svelte-zk15k");
+    },
+    m(p, v) {
+      O(p, e, v), O(p, i, v), O(p, t, v);
+    },
+    p: Ie,
+    d(p) {
+      p && (b(e), b(i), b(t));
+    }
+  };
+}
+function ct(n) {
+  let e, l, i, t = "Type:", r, p = (
+    /*selectedComponent*/
+    n[5].type + ""
+  ), v, s, c, ee, q, S, D = (
+    /*selectedComponent*/
+    n[5].id + ""
+  ), N, M, g, G, te, J, Z, I, T, U, X, W = "Size & Position", pe, L, H, _e = "Width:", ke, F, fe, K, le, Ce = "Height:", Q, ie, he, se, $, Oe = "X Position:", ge, ne, me, ce, A, ae = "Y Position:", B, P, de, ye, De, o = (
+    /*selectedComponent*/
+    n[5].props.label !== void 0 && Je(n)
+  ), d = (
+    /*selectedComponent*/
+    n[5].props.placeholder !== void 0 && Xe(n)
+  ), u = (
+    /*selectedComponent*/
+    n[5].props.value !== void 0 && Ye(n)
+  ), _ = (
+    /*selectedComponent*/
+    n[5].props.choices !== void 0 && qe(n)
+  ), a = (
+    /*selectedComponent*/
+    n[5].props.minimum !== void 0 && We(n)
+  ), E = (
+    /*selectedComponent*/
+    n[5].props.maximum !== void 0 && Ke(n)
+  ), V = (
+    /*selectedComponent*/
+    n[5].props.step !== void 0 && Qe(n)
+  );
+  return {
+    c() {
+      e = m("div"), l = m("div"), i = m("strong"), i.textContent = t, r = y(), v = re(p), s = y(), c = m("br"), ee = y(), q = m("small"), S = re("ID: "), N = re(D), M = y(), o && o.c(), g = y(), d && d.c(), G = y(), u && u.c(), te = y(), _ && _.c(), J = y(), a && a.c(), Z = y(), E && E.c(), I = y(), V && V.c(), T = y(), U = m("div"), X = m("h5"), X.textContent = W, pe = y(), L = m("div"), H = m("label"), H.textContent = _e, ke = y(), F = m("input"), K = y(), le = m("label"), le.textContent = Ce, Q = y(), ie = m("input"), se = y(), $ = m("label"), $.textContent = Oe, ge = y(), ne = m("input"), ce = y(), A = m("label"), A.textContent = ae, B = y(), P = m("input"), this.h();
+    },
+    l(w) {
+      e = k(w, "DIV", { class: !0 });
+      var z = j(e);
+      l = k(z, "DIV", { class: !0 });
+      var ue = j(l);
+      i = k(ue, "STRONG", { "data-svelte-h": !0 }), R(i) !== "svelte-1y9dw9w" && (i.textContent = t), r = C(ue), v = oe(ue, p), s = C(ue), c = k(ue, "BR", {}), ee = C(ue), q = k(ue, "SMALL", {});
+      var be = j(q);
+      S = oe(be, "ID: "), N = oe(be, D), be.forEach(b), ue.forEach(b), M = C(z), o && o.l(z), g = C(z), d && d.l(z), G = C(z), u && u.l(z), te = C(z), _ && _.l(z), J = C(z), a && a.l(z), Z = C(z), E && E.l(z), I = C(z), V && V.l(z), T = C(z), U = k(z, "DIV", { class: !0 });
+      var ze = j(U);
+      X = k(ze, "H5", { class: !0, "data-svelte-h": !0 }), R(X) !== "svelte-u9anyo" && (X.textContent = W), pe = C(ze), L = k(ze, "DIV", { class: !0 });
+      var Y = j(L);
+      H = k(Y, "LABEL", { class: !0, "data-svelte-h": !0 }), R(H) !== "svelte-19lukby" && (H.textContent = _e), ke = C(Y), F = k(Y, "INPUT", { type: !0, class: !0 }), K = C(Y), le = k(Y, "LABEL", { class: !0, "data-svelte-h": !0 }), R(le) !== "svelte-1ls0h4v" && (le.textContent = Ce), Q = C(Y), ie = k(Y, "INPUT", { type: !0, class: !0 }), se = C(Y), $ = k(Y, "LABEL", { class: !0, "data-svelte-h": !0 }), R($) !== "svelte-1wkby0j" && ($.textContent = Oe), ge = C(Y), ne = k(Y, "INPUT", { type: !0, class: !0 }), ce = C(Y), A = k(Y, "LABEL", { class: !0, "data-svelte-h": !0 }), R(A) !== "svelte-t7u7hk" && (A.textContent = ae), B = C(Y), P = k(Y, "INPUT", { type: !0, class: !0 }), Y.forEach(b), ze.forEach(b), z.forEach(b), this.h();
+    },
+    h() {
+      h(l, "class", "property-header svelte-zk15k"), h(X, "class", "svelte-zk15k"), h(H, "class", "svelte-zk15k"), h(F, "type", "number"), F.value = fe = /*selectedComponent*/
+      n[5].size.width, h(F, "class", "svelte-zk15k"), h(le, "class", "svelte-zk15k"), h(ie, "type", "number"), ie.value = he = /*selectedComponent*/
+      n[5].size.height, h(ie, "class", "svelte-zk15k"), h($, "class", "svelte-zk15k"), h(ne, "type", "number"), ne.value = me = /*selectedComponent*/
+      n[5].position.x, h(ne, "class", "svelte-zk15k"), h(A, "class", "svelte-zk15k"), h(P, "type", "number"), P.value = de = /*selectedComponent*/
+      n[5].position.y, h(P, "class", "svelte-zk15k"), h(L, "class", "size-controls svelte-zk15k"), h(U, "class", "size-section svelte-zk15k"), h(e, "class", "property-group svelte-zk15k");
+    },
+    m(w, z) {
+      O(w, e, z), f(e, l), f(l, i), f(l, r), f(l, v), f(l, s), f(l, c), f(l, ee), f(l, q), f(q, S), f(q, N), f(e, M), o && o.m(e, null), f(e, g), d && d.m(e, null), f(e, G), u && u.m(e, null), f(e, te), _ && _.m(e, null), f(e, J), a && a.m(e, null), f(e, Z), E && E.m(e, null), f(e, I), V && V.m(e, null), f(e, T), f(e, U), f(U, X), f(U, pe), f(U, L), f(L, H), f(L, ke), f(L, F), f(L, K), f(L, le), f(L, Q), f(L, ie), f(L, se), f(L, $), f(L, ge), f(L, ne), f(L, ce), f(L, A), f(L, B), f(L, P), ye || (De = [
+        x(
+          F,
+          "input",
+          /*input_handler_8*/
+          n[43]
+        ),
+        x(
+          ie,
+          "input",
+          /*input_handler_9*/
+          n[44]
+        ),
+        x(
+          ne,
+          "input",
+          /*input_handler_10*/
+          n[45]
+        ),
+        x(
+          P,
+          "input",
+          /*input_handler_11*/
+          n[46]
+        )
+      ], ye = !0);
+    },
+    p(w, z) {
+      z[0] & /*selectedComponent*/
+      32 && p !== (p = /*selectedComponent*/
+      w[5].type + "") && Te(v, p), z[0] & /*selectedComponent*/
+      32 && D !== (D = /*selectedComponent*/
+      w[5].id + "") && Te(N, D), /*selectedComponent*/
+      w[5].props.label !== void 0 ? o ? o.p(w, z) : (o = Je(w), o.c(), o.m(e, g)) : o && (o.d(1), o = null), /*selectedComponent*/
+      w[5].props.placeholder !== void 0 ? d ? d.p(w, z) : (d = Xe(w), d.c(), d.m(e, G)) : d && (d.d(1), d = null), /*selectedComponent*/
+      w[5].props.value !== void 0 ? u ? u.p(w, z) : (u = Ye(w), u.c(), u.m(e, te)) : u && (u.d(1), u = null), /*selectedComponent*/
+      w[5].props.choices !== void 0 ? _ ? _.p(w, z) : (_ = qe(w), _.c(), _.m(e, J)) : _ && (_.d(1), _ = null), /*selectedComponent*/
+      w[5].props.minimum !== void 0 ? a ? a.p(w, z) : (a = We(w), a.c(), a.m(e, Z)) : a && (a.d(1), a = null), /*selectedComponent*/
+      w[5].props.maximum !== void 0 ? E ? E.p(w, z) : (E = Ke(w), E.c(), E.m(e, I)) : E && (E.d(1), E = null), /*selectedComponent*/
+      w[5].props.step !== void 0 ? V ? V.p(w, z) : (V = Qe(w), V.c(), V.m(e, T)) : V && (V.d(1), V = null), z[0] & /*selectedComponent*/
+      32 && fe !== (fe = /*selectedComponent*/
+      w[5].size.width) && F.value !== fe && (F.value = fe), z[0] & /*selectedComponent*/
+      32 && he !== (he = /*selectedComponent*/
+      w[5].size.height) && ie.value !== he && (ie.value = he), z[0] & /*selectedComponent*/
+      32 && me !== (me = /*selectedComponent*/
+      w[5].position.x) && ne.value !== me && (ne.value = me), z[0] & /*selectedComponent*/
+      32 && de !== (de = /*selectedComponent*/
+      w[5].position.y) && P.value !== de && (P.value = de);
+    },
+    d(w) {
+      w && b(e), o && o.d(), d && d.d(), u && u.d(), _ && _.d(), a && a.d(), E && E.d(), V && V.d(), ye = !1, je(De);
+    }
+  };
+}
+function Je(n) {
+  let e, l = "Label:", i, t, r, p, v;
+  return {
+    c() {
+      e = m("label"), e.textContent = l, i = y(), t = m("input"), this.h();
+    },
+    l(s) {
+      e = k(s, "LABEL", { class: !0, "data-svelte-h": !0 }), R(e) !== "svelte-1mvyv0k" && (e.textContent = l), i = C(s), t = k(s, "INPUT", {
+        type: !0,
+        placeholder: !0,
+        class: !0
+      }), this.h();
+    },
+    h() {
+      h(e, "class", "svelte-zk15k"), h(t, "type", "text"), h(t, "placeholder", "Label"), t.value = r = /*selectedComponent*/
+      n[5].props.label, h(t, "class", "svelte-zk15k");
+    },
+    m(s, c) {
+      O(s, e, c), O(s, i, c), O(s, t, c), p || (v = x(
+        t,
+        "input",
+        /*input_handler*/
+        n[34]
+      ), p = !0);
+    },
+    p(s, c) {
+      c[0] & /*selectedComponent*/
+      32 && r !== (r = /*selectedComponent*/
+      s[5].props.label) && t.value !== r && (t.value = r);
+    },
+    d(s) {
+      s && (b(e), b(i), b(t)), p = !1, v();
+    }
+  };
+}
+function Xe(n) {
+  let e, l = "Placeholder:", i, t, r, p, v;
+  return {
+    c() {
+      e = m("label"), e.textContent = l, i = y(), t = m("input"), this.h();
+    },
+    l(s) {
+      e = k(s, "LABEL", { class: !0, "data-svelte-h": !0 }), R(e) !== "svelte-s3gzvr" && (e.textContent = l), i = C(s), t = k(s, "INPUT", {
+        type: !0,
+        placeholder: !0,
+        class: !0
+      }), this.h();
+    },
+    h() {
+      h(e, "class", "svelte-zk15k"), h(t, "type", "text"), h(t, "placeholder", "Placeholder"), t.value = r = /*selectedComponent*/
+      n[5].props.placeholder, h(t, "class", "svelte-zk15k");
+    },
+    m(s, c) {
+      O(s, e, c), O(s, i, c), O(s, t, c), p || (v = x(
+        t,
+        "input",
+        /*input_handler_1*/
+        n[35]
+      ), p = !0);
+    },
+    p(s, c) {
+      c[0] & /*selectedComponent*/
+      32 && r !== (r = /*selectedComponent*/
+      s[5].props.placeholder) && t.value !== r && (t.value = r);
+    },
+    d(s) {
+      s && (b(e), b(i), b(t)), p = !1, v();
+    }
+  };
+}
+function Ye(n) {
+  let e, l = "Value:", i, t;
+  function r(s, c) {
+    return typeof /*selectedComponent*/
+    s[5].props.value == "boolean" ? ht : typeof /*selectedComponent*/
+    s[5].props.value == "number" ? ft : dt;
+  }
+  let p = r(n), v = p(n);
+  return {
+    c() {
+      e = m("label"), e.textContent = l, i = y(), v.c(), t = Se(), this.h();
+    },
+    l(s) {
+      e = k(s, "LABEL", { class: !0, "data-svelte-h": !0 }), R(e) !== "svelte-1m0lw4v" && (e.textContent = l), i = C(s), v.l(s), t = Se(), this.h();
+    },
+    h() {
+      h(e, "class", "svelte-zk15k");
+    },
+    m(s, c) {
+      O(s, e, c), O(s, i, c), v.m(s, c), O(s, t, c);
+    },
+    p(s, c) {
+      p === (p = r(s)) && v ? v.p(s, c) : (v.d(1), v = p(s), v && (v.c(), v.m(t.parentNode, t)));
+    },
+    d(s) {
+      s && (b(e), b(i), b(t)), v.d(s);
+    }
+  };
+}
+function dt(n) {
+  let e, l, i, t;
+  return {
+    c() {
+      e = m("input"), this.h();
+    },
+    l(r) {
+      e = k(r, "INPUT", {
+        type: !0,
+        placeholder: !0,
+        class: !0
+      }), this.h();
+    },
+    h() {
+      h(e, "type", "text"), h(e, "placeholder", "Value"), e.value = l = /*selectedComponent*/
+      n[5].props.value, h(e, "class", "svelte-zk15k");
+    },
+    m(r, p) {
+      O(r, e, p), i || (t = x(
+        e,
+        "input",
+        /*input_handler_3*/
+        n[38]
+      ), i = !0);
+    },
+    p(r, p) {
+      p[0] & /*selectedComponent*/
+      32 && l !== (l = /*selectedComponent*/
+      r[5].props.value) && e.value !== l && (e.value = l);
+    },
+    d(r) {
+      r && b(e), i = !1, t();
+    }
+  };
+}
+function ft(n) {
+  let e, l, i, t;
+  return {
+    c() {
+      e = m("input"), this.h();
+    },
+    l(r) {
+      e = k(r, "INPUT", { type: !0, class: !0 }), this.h();
+    },
+    h() {
+      h(e, "type", "number"), e.value = l = /*selectedComponent*/
+      n[5].props.value, h(e, "class", "svelte-zk15k");
+    },
+    m(r, p) {
+      O(r, e, p), i || (t = x(
+        e,
+        "input",
+        /*input_handler_2*/
+        n[37]
+      ), i = !0);
+    },
+    p(r, p) {
+      p[0] & /*selectedComponent*/
+      32 && l !== (l = /*selectedComponent*/
+      r[5].props.value) && e.value !== l && (e.value = l);
+    },
+    d(r) {
+      r && b(e), i = !1, t();
+    }
+  };
+}
+function ht(n) {
+  let e, l, i, t;
+  return {
+    c() {
+      e = m("input"), this.h();
+    },
+    l(r) {
+      e = k(r, "INPUT", { type: !0, class: !0 }), this.h();
+    },
+    h() {
+      h(e, "type", "checkbox"), e.checked = l = /*selectedComponent*/
+      n[5].props.value, h(e, "class", "svelte-zk15k");
+    },
+    m(r, p) {
+      O(r, e, p), i || (t = x(
+        e,
+        "change",
+        /*change_handler*/
+        n[36]
+      ), i = !0);
+    },
+    p(r, p) {
+      p[0] & /*selectedComponent*/
+      32 && l !== (l = /*selectedComponent*/
+      r[5].props.value) && (e.checked = l);
+    },
+    d(r) {
+      r && b(e), i = !1, t();
+    }
+  };
+}
+function qe(n) {
+  let e, l = "Choices (comma-separated):", i, t, r, p, v;
+  return {
+    c() {
+      e = m("label"), e.textContent = l, i = y(), t = m("input"), this.h();
+    },
+    l(s) {
+      e = k(s, "LABEL", { class: !0, "data-svelte-h": !0 }), R(e) !== "svelte-s5zbc2" && (e.textContent = l), i = C(s), t = k(s, "INPUT", {
+        type: !0,
+        placeholder: !0,
+        class: !0
+      }), this.h();
+    },
+    h() {
+      h(e, "class", "svelte-zk15k"), h(t, "type", "text"), h(t, "placeholder", "Option 1, Option 2, Option 3"), t.value = r = Array.isArray(
+        /*selectedComponent*/
+        n[5].props.choices
+      ) ? (
+        /*selectedComponent*/
+        n[5].props.choices.join(", ")
+      ) : (
+        /*selectedComponent*/
+        n[5].props.choices
+      ), h(t, "class", "svelte-zk15k");
+    },
+    m(s, c) {
+      O(s, e, c), O(s, i, c), O(s, t, c), p || (v = x(
+        t,
+        "input",
+        /*input_handler_4*/
+        n[39]
+      ), p = !0);
+    },
+    p(s, c) {
+      c[0] & /*selectedComponent*/
+      32 && r !== (r = Array.isArray(
+        /*selectedComponent*/
+        s[5].props.choices
+      ) ? (
+        /*selectedComponent*/
+        s[5].props.choices.join(", ")
+      ) : (
+        /*selectedComponent*/
+        s[5].props.choices
+      )) && t.value !== r && (t.value = r);
+    },
+    d(s) {
+      s && (b(e), b(i), b(t)), p = !1, v();
+    }
+  };
+}
+function We(n) {
+  let e, l = "Minimum:", i, t, r, p, v;
+  return {
+    c() {
+      e = m("label"), e.textContent = l, i = y(), t = m("input"), this.h();
+    },
+    l(s) {
+      e = k(s, "LABEL", { class: !0, "data-svelte-h": !0 }), R(e) !== "svelte-v7nxz2" && (e.textContent = l), i = C(s), t = k(s, "INPUT", { type: !0, class: !0 }), this.h();
+    },
+    h() {
+      h(e, "class", "svelte-zk15k"), h(t, "type", "number"), t.value = r = /*selectedComponent*/
+      n[5].props.minimum, h(t, "class", "svelte-zk15k");
+    },
+    m(s, c) {
+      O(s, e, c), O(s, i, c), O(s, t, c), p || (v = x(
+        t,
+        "input",
+        /*input_handler_5*/
+        n[40]
+      ), p = !0);
+    },
+    p(s, c) {
+      c[0] & /*selectedComponent*/
+      32 && r !== (r = /*selectedComponent*/
+      s[5].props.minimum) && t.value !== r && (t.value = r);
+    },
+    d(s) {
+      s && (b(e), b(i), b(t)), p = !1, v();
+    }
+  };
+}
+function Ke(n) {
+  let e, l = "Maximum:", i, t, r, p, v;
+  return {
+    c() {
+      e = m("label"), e.textContent = l, i = y(), t = m("input"), this.h();
+    },
+    l(s) {
+      e = k(s, "LABEL", { class: !0, "data-svelte-h": !0 }), R(e) !== "svelte-elhw0w" && (e.textContent = l), i = C(s), t = k(s, "INPUT", { type: !0, class: !0 }), this.h();
+    },
+    h() {
+      h(e, "class", "svelte-zk15k"), h(t, "type", "number"), t.value = r = /*selectedComponent*/
+      n[5].props.maximum, h(t, "class", "svelte-zk15k");
+    },
+    m(s, c) {
+      O(s, e, c), O(s, i, c), O(s, t, c), p || (v = x(
+        t,
+        "input",
+        /*input_handler_6*/
+        n[41]
+      ), p = !0);
+    },
+    p(s, c) {
+      c[0] & /*selectedComponent*/
+      32 && r !== (r = /*selectedComponent*/
+      s[5].props.maximum) && t.value !== r && (t.value = r);
+    },
+    d(s) {
+      s && (b(e), b(i), b(t)), p = !1, v();
+    }
+  };
+}
+function Qe(n) {
+  let e, l = "Step:", i, t, r, p, v;
+  return {
+    c() {
+      e = m("label"), e.textContent = l, i = y(), t = m("input"), this.h();
+    },
+    l(s) {
+      e = k(s, "LABEL", { class: !0, "data-svelte-h": !0 }), R(e) !== "svelte-rqjdj4" && (e.textContent = l), i = C(s), t = k(s, "INPUT", { type: !0, class: !0 }), this.h();
+    },
+    h() {
+      h(e, "class", "svelte-zk15k"), h(t, "type", "number"), t.value = r = /*selectedComponent*/
+      n[5].props.step, h(t, "class", "svelte-zk15k");
+    },
+    m(s, c) {
+      O(s, e, c), O(s, i, c), O(s, t, c), p || (v = x(
+        t,
+        "input",
+        /*input_handler_7*/
+        n[42]
+      ), p = !0);
+    },
+    p(s, c) {
+      c[0] & /*selectedComponent*/
+      32 && r !== (r = /*selectedComponent*/
+      s[5].props.step) && t.value !== r && (t.value = r);
+    },
+    d(s) {
+      s && (b(e), b(i), b(t)), p = !1, v();
+    }
+  };
+}
+function vt(n) {
+  let e, l, i, t, r = "🎨 Gradio Designer", p, v, s = (
+    /*value*/
+    n[0].components.length + ""
+  ), c, ee, q, S, D, N = "📄 Export JSON", M, g, G = "🖼️ Export PNG", te, J, Z, I, T, U = "Components", X, W, pe, L, H, _e = "All Categories", ke, F, fe, K, le, Ce, Q = [], ie = /* @__PURE__ */ new Map(), he, se, $, Oe = "Properties", ge, ne, me, ce = Le(Object.keys(
+    /*componentsByCategory*/
+    n[7]
+  )), A = [];
+  for (let u = 0; u < ce.length; u += 1)
+    A[u] = Re(Ve(n, ce, u));
+  let ae = Le(
+    /*displayComponents*/
+    n[6]
+  ), B = [];
+  for (let u = 0; u < ae.length; u += 1)
+    B[u] = Fe(Me(n, ae, u));
+  let P = null;
+  ae.length || (P = He(n));
+  let de = Le(
+    /*value*/
+    n[0].components
+  );
+  const ye = (u) => (
+    /*component*/
+    u[50].id
+  );
+  for (let u = 0; u < de.length; u += 1) {
+    let _ = Be(n, de, u), a = ye(_);
+    ie.set(a, Q[u] = Ge(a, _));
+  }
+  function De(u, _) {
+    return (
+      /*selectedComponent*/
+      u[5] ? ct : pt
+    );
+  }
+  let o = De(n), d = o(n);
+  return {
+    c() {
+      e = m("div"), l = m("div"), i = m("div"), t = m("h3"), t.textContent = r, p = y(), v = m("span"), c = re(s), ee = re(" components"), q = y(), S = m("div"), D = m("button"), D.textContent = N, M = y(), g = m("button"), g.textContent = G, te = y(), J = m("div"), Z = m("div"), I = m("div"), T = m("h4"), T.textContent = U, X = y(), W = m("input"), pe = y(), L = m("select"), H = m("option"), H.textContent = _e;
+      for (let u = 0; u < A.length; u += 1)
+        A[u].c();
+      ke = y(), F = m("div");
+      for (let u = 0; u < B.length; u += 1)
+        B[u].c();
+      P && P.c(), fe = y(), K = m("div"), le = m("div"), Ce = y();
+      for (let u = 0; u < Q.length; u += 1)
+        Q[u].c();
+      he = y(), se = m("div"), $ = m("h4"), $.textContent = Oe, ge = y(), d.c(), this.h();
+    },
+    l(u) {
+      e = k(u, "DIV", { class: !0, id: !0 });
+      var _ = j(e);
+      l = k(_, "DIV", { class: !0 });
+      var a = j(l);
+      i = k(a, "DIV", { class: !0 });
+      var E = j(i);
+      t = k(E, "H3", { class: !0, "data-svelte-h": !0 }), R(t) !== "svelte-1dsn5ql" && (t.textContent = r), p = C(E), v = k(E, "SPAN", { class: !0 });
+      var V = j(v);
+      c = oe(V, s), ee = oe(V, " components"), V.forEach(b), E.forEach(b), q = C(a), S = k(a, "DIV", { class: !0 });
+      var w = j(S);
+      D = k(w, "BUTTON", {
+        class: !0,
+        type: !0,
+        "data-svelte-h": !0
+      }), R(D) !== "svelte-1n26als" && (D.textContent = N), M = C(w), g = k(w, "BUTTON", {
+        class: !0,
+        type: !0,
+        "data-svelte-h": !0
+      }), R(g) !== "svelte-1yzlvvh" && (g.textContent = G), w.forEach(b), a.forEach(b), te = C(_), J = k(_, "DIV", { class: !0 });
+      var z = j(J);
+      Z = k(z, "DIV", { class: !0 });
+      var ue = j(Z);
+      I = k(ue, "DIV", { class: !0 });
+      var be = j(I);
+      T = k(be, "H4", { class: !0, "data-svelte-h": !0 }), R(T) !== "svelte-6fxyga" && (T.textContent = U), X = C(be), W = k(be, "INPUT", {
+        type: !0,
+        placeholder: !0,
+        class: !0
+      }), pe = C(be), L = k(be, "SELECT", { class: !0 });
+      var ze = j(L);
+      H = k(ze, "OPTION", { "data-svelte-h": !0 }), R(H) !== "svelte-1dzjcyu" && (H.textContent = _e);
+      for (let ve = 0; ve < A.length; ve += 1)
+        A[ve].l(ze);
+      ze.forEach(b), be.forEach(b), ke = C(ue), F = k(ue, "DIV", { class: !0 });
+      var Y = j(F);
+      for (let ve = 0; ve < B.length; ve += 1)
+        B[ve].l(Y);
+      P && P.l(Y), Y.forEach(b), ue.forEach(b), fe = C(z), K = k(z, "DIV", { class: !0 });
+      var Ee = j(K);
+      le = k(Ee, "DIV", { class: !0 }), j(le).forEach(b), Ce = C(Ee);
+      for (let ve = 0; ve < Q.length; ve += 1)
+        Q[ve].l(Ee);
+      Ee.forEach(b), he = C(z), se = k(z, "DIV", { class: !0 });
+      var Ne = j(se);
+      $ = k(Ne, "H4", { class: !0, "data-svelte-h": !0 }), R($) !== "svelte-100vz0b" && ($.textContent = Oe), ge = C(Ne), d.l(Ne), Ne.forEach(b), z.forEach(b), _.forEach(b), this.h();
+    },
+    h() {
+      h(t, "class", "svelte-zk15k"), h(v, "class", "component-count svelte-zk15k"), h(i, "class", "toolbar-left svelte-zk15k"), h(D, "class", "export-btn svelte-zk15k"), h(D, "type", "button"), h(g, "class", "export-btn svelte-zk15k"), h(g, "type", "button"), h(S, "class", "toolbar-right svelte-zk15k"), h(l, "class", "toolbar svelte-zk15k"), h(T, "class", "svelte-zk15k"), h(W, "type", "text"), h(W, "placeholder", "Search components..."), h(W, "class", "search-input svelte-zk15k"), H.__value = "All", Pe(H, H.__value), h(L, "class", "category-select svelte-zk15k"), /*selectedCategory*/
+      n[3] === void 0 && $e(() => (
+        /*select_change_handler*/
+        n[28].call(L)
+      )), h(I, "class", "palette-header svelte-zk15k"), h(F, "class", "palette-content svelte-zk15k"), h(Z, "class", "palette svelte-zk15k"), h(le, "class", "canvas-grid svelte-zk15k"), h(K, "class", "canvas svelte-zk15k"), h($, "class", "svelte-zk15k"), h(se, "class", "properties svelte-zk15k"), h(J, "class", "designer-content svelte-zk15k"), h(e, "class", "designer-container svelte-zk15k"), h(
+        e,
+        "id",
+        /*elem_id*/
+        n[1]
+      );
+    },
+    m(u, _) {
+      O(u, e, _), f(e, l), f(l, i), f(i, t), f(i, p), f(i, v), f(v, c), f(v, ee), f(l, q), f(l, S), f(S, D), f(S, M), f(S, g), f(e, te), f(e, J), f(J, Z), f(Z, I), f(I, T), f(I, X), f(I, W), Pe(
+        W,
+        /*searchFilter*/
+        n[2]
+      ), f(I, pe), f(I, L), f(L, H);
+      for (let a = 0; a < A.length; a += 1)
+        A[a] && A[a].m(L, null);
+      xe(
+        L,
+        /*selectedCategory*/
+        n[3],
+        !0
+      ), f(Z, ke), f(Z, F);
+      for (let a = 0; a < B.length; a += 1)
+        B[a] && B[a].m(F, null);
+      P && P.m(F, null), f(J, fe), f(J, K), f(K, le), f(K, Ce);
+      for (let a = 0; a < Q.length; a += 1)
+        Q[a] && Q[a].m(K, null);
+      n[33](K), f(J, he), f(J, se), f(se, $), f(se, ge), d.m(se, null), ne || (me = [
+        x(
+          window,
+          "mousemove",
+          /*onCanvasMouseMove*/
+          n[18]
+        ),
+        x(
+          window,
+          "mouseup",
+          /*onCanvasMouseUp*/
+          n[19]
+        ),
+        x(
+          D,
+          "click",
+          /*exportAsJSON*/
+          n[15]
+        ),
+        x(
+          g,
+          "click",
+          /*exportAsPNG*/
+          n[16]
+        ),
+        x(
+          W,
+          "input",
+          /*input_input_handler*/
+          n[27]
+        ),
+        x(
+          L,
+          "change",
+          /*select_change_handler*/
+          n[28]
+        ),
+        x(K, "dragover", _t),
+        x(
+          K,
+          "drop",
+          /*onDrop*/
+          n[9]
+        )
+      ], ne = !0);
+    },
+    p(u, _) {
+      if (_[0] & /*value*/
+      1 && s !== (s = /*value*/
+      u[0].components.length + "") && Te(c, s), _[0] & /*searchFilter*/
+      4 && W.value !== /*searchFilter*/
+      u[2] && Pe(
+        W,
+        /*searchFilter*/
+        u[2]
+      ), _[0] & /*componentsByCategory*/
+      128) {
+        ce = Le(Object.keys(
+          /*componentsByCategory*/
+          u[7]
+        ));
+        let a;
+        for (a = 0; a < ce.length; a += 1) {
+          const E = Ve(u, ce, a);
+          A[a] ? A[a].p(E, _) : (A[a] = Re(E), A[a].c(), A[a].m(L, null));
+        }
+        for (; a < A.length; a += 1)
+          A[a].d(1);
+        A.length = ce.length;
+      }
+      if (_[0] & /*selectedCategory, componentsByCategory*/
+      136 && xe(
+        L,
+        /*selectedCategory*/
+        u[3]
+      ), _[0] & /*onDragStart, displayComponents, searchFilter*/
+      324) {
+        ae = Le(
+          /*displayComponents*/
+          u[6]
+        );
+        let a;
+        for (a = 0; a < ae.length; a += 1) {
+          const E = Me(u, ae, a);
+          B[a] ? B[a].p(E, _) : (B[a] = Fe(E), B[a].c(), B[a].m(F, null));
+        }
+        for (; a < B.length; a += 1)
+          B[a].d(1);
+        B.length = ae.length, !ae.length && P ? P.p(u, _) : ae.length ? P && (P.d(1), P = null) : (P = He(u), P.c(), P.m(F, null));
+      }
+      _[0] & /*value, selectedComponent, selectComponent, onComponentMouseDown, deleteComponent*/
+      148513 && (de = Le(
+        /*value*/
+        u[0].components
+      ), Q = at(Q, _, ye, 1, u, de, ie, K, tt, Ge, null, Be)), o === (o = De(u)) && d ? d.p(u, _) : (d.d(1), d = o(u), d && (d.c(), d.m(se, null))), _[0] & /*elem_id*/
+      2 && h(
+        e,
+        "id",
+        /*elem_id*/
+        u[1]
+      );
+    },
+    i: Ie,
+    o: Ie,
+    d(u) {
+      u && b(e), Ae(A, u), Ae(B, u), P && P.d();
+      for (let _ = 0; _ < Q.length; _ += 1)
+        Q[_].d();
+      n[33](null), d.d(), ne = !1, je(me);
+    }
+  };
+}
+function _t(n) {
+  n.preventDefault(), n.dataTransfer && (n.dataTransfer.dropEffect = "copy");
+}
+function kt(n) {
+  return {
+    Textbox: {
+      label: "Text Input",
+      placeholder: "Enter text...",
+      value: ""
+    },
+    TextArea: {
+      label: "Text Area",
+      placeholder: "Enter multiple lines...",
+      lines: 3,
+      value: ""
+    },
+    Button: {
+      value: "Click me",
+      variant: "secondary",
+      size: "sm"
+    },
+    Slider: {
+      label: "Slider",
+      minimum: 0,
+      maximum: 100,
+      step: 1,
+      value: 50
+    },
+    Number: { label: "Number", value: 0, precision: 0 },
+    Checkbox: { label: "Checkbox", value: !1 },
+    CheckboxGroup: {
+      label: "Checkbox Group",
+      choices: ["Option 1", "Option 2"],
+      value: []
+    },
+    Radio: {
+      label: "Radio",
+      choices: ["Option 1", "Option 2"],
+      value: "Option 1"
+    },
+    Dropdown: {
+      label: "Dropdown",
+      choices: ["Option 1", "Option 2"],
+      value: "Option 1",
+      multiselect: !1
+    },
+    Toggle: { label: "Toggle", value: !1 },
+    ColorPicker: { label: "Color Picker", value: "#ff0000" },
+    Date: { label: "Date", value: "2025-01-01" },
+    Time: { label: "Time", value: "12:00" },
+    File: {
+      label: "Upload File",
+      file_types: [".txt", ".pdf"]
+    },
+    Image: {
+      label: "Image",
+      type: "pil",
+      interactive: !0
+    },
+    Video: { label: "Video", format: "mp4" },
+    Audio: { label: "Audio" },
+    Dataframe: {
+      headers: ["Column 1", "Column 2"],
+      datatype: ["str", "str"],
+      value: []
+    },
+    JSON: { value: "{}" },
+    Markdown: { value: "# Markdown Text" },
+    HTML: { value: "<p>HTML Content</p>" },
+    Label: { value: "Label Text" },
+    Progress: { value: 0.5 }
+  }[n] || {};
+}
+function mt(n, e, l) {
+  let i, t, r, { gradio: p } = e, { elem_id: v = "" } = e;
+  const s = [];
+  let { value: c = { components: [], layout: "blocks" } } = e;
+  const ee = void 0, q = "interactive", S = {
+    Input: [
+      {
+        type: "Textbox",
+        label: "Text Input",
+        icon: "📝"
+      },
+      {
+        type: "TextArea",
+        label: "Text Area",
+        icon: "📄"
+      },
+      {
+        type: "Number",
+        label: "Number",
+        icon: "🔢"
+      },
+      {
+        type: "Slider",
+        label: "Slider",
+        icon: "🎚️"
+      },
+      {
+        type: "Checkbox",
+        label: "Checkbox",
+        icon: "☑️"
+      },
+      {
+        type: "CheckboxGroup",
+        label: "Checkbox Group",
+        icon: "☑️"
+      },
+      {
+        type: "Radio",
+        label: "Radio",
+        icon: "🔘"
+      },
+      {
+        type: "Dropdown",
+        label: "Dropdown",
+        icon: "📋"
+      },
+      {
+        type: "Toggle",
+        label: "Toggle",
+        icon: "🔄"
+      },
+      {
+        type: "ColorPicker",
+        label: "Color Picker",
+        icon: "🎨"
+      },
+      { type: "Date", label: "Date", icon: "📅" },
+      { type: "Time", label: "Time", icon: "⏰" },
+      {
+        type: "File",
+        label: "File Upload",
+        icon: "📁"
+      }
+    ],
+    Action: [
+      {
+        type: "Button",
+        label: "Button",
+        icon: "🔘"
+      }
+    ],
+    Media: [
+      {
+        type: "Image",
+        label: "Image",
+        icon: "🖼️"
+      },
+      {
+        type: "Video",
+        label: "Video",
+        icon: "🎥"
+      },
+      {
+        type: "Audio",
+        label: "Audio",
+        icon: "🎵"
+      }
+    ],
+    Data: [
+      {
+        type: "Dataframe",
+        label: "Dataframe",
+        icon: "📊"
+      },
+      { type: "JSON", label: "JSON", icon: "📋" }
+    ],
+    Display: [
+      {
+        type: "Markdown",
+        label: "Markdown",
+        icon: "📝"
+      },
+      { type: "HTML", label: "HTML", icon: "🌐" },
+      {
+        type: "Label",
+        label: "Label",
+        icon: "🏷️"
+      },
+      {
+        type: "Progress",
+        label: "Progress",
+        icon: "📈"
+      }
+    ]
+  };
+  let D = !1;
+  ot(() => {
+    l(24, D = !0);
+  });
+  let N = null, M, g = null, G = "", te = "All";
+  function J(o, d) {
+    N = d, o.dataTransfer && (o.dataTransfer.effectAllowed = "copy");
+  }
+  function Z(o) {
+    if (o.preventDefault(), !N) return;
+    const d = M.getBoundingClientRect(), u = o.clientX - d.left, _ = o.clientY - d.top, a = {
+      id: `${N.type.toLowerCase()}_${Date.now()}`,
+      type: N.type,
+      position: { x: u, y: _ },
+      size: { width: 200, height: 100 },
+      props: kt(N.type)
+    };
+    l(0, c = Object.assign(Object.assign({}, c), {
+      components: [...c.components, a]
+    })), p.dispatch("change", c), N = null;
+  }
+  function I(o) {
+    l(5, g = o);
+  }
+  function T(o, d) {
+    if (!g) return;
+    o === "choices" && typeof d == "string" ? d = d.split(",").map((_) => _.trim()).filter((_) => _) : o === "file_types" && typeof d == "string" && (d = d.split(",").map((_) => _.trim()).filter((_) => _));
+    const u = c.components.map((_) => _.id === g.id ? Object.assign(Object.assign({}, _), {
+      props: Object.assign(Object.assign({}, _.props), { [o]: d })
+    }) : _);
+    l(5, g = Object.assign(Object.assign({}, g), {
+      props: Object.assign(Object.assign({}, g.props), { [o]: d })
+    })), l(0, c = Object.assign(Object.assign({}, c), { components: u })), p.dispatch("change", c);
+  }
+  function U(o, d, u) {
+    const _ = c.components.map((a) => a.id === o.id ? Object.assign(Object.assign({}, a), { position: { x: d, y: u } }) : a);
+    l(0, c = Object.assign(Object.assign({}, c), { components: _ })), p.dispatch("change", c);
+  }
+  function X(o, d, u) {
+    const _ = c.components.map((a) => a.id === o.id ? Object.assign(Object.assign({}, a), {
+      size: { width: d, height: u }
+    }) : a);
+    (g == null ? void 0 : g.id) === o.id && l(5, g = Object.assign(Object.assign({}, g), {
+      size: { width: d, height: u }
+    })), l(0, c = Object.assign(Object.assign({}, c), { components: _ })), p.dispatch("change", c);
+  }
+  function W(o) {
+    const d = c.components.filter((u) => u.id !== o);
+    l(0, c = Object.assign(Object.assign({}, c), { components: d })), l(5, g = null), p.dispatch("change", c);
+  }
+  function pe() {
+    const o = Object.assign(Object.assign({}, c), {
+      metadata: {
+        version: "1.0",
+        created_at: (/* @__PURE__ */ new Date()).toISOString(),
+        app_type: "gradio_interface",
+        component_count: c.components.length
+      }
+    }), d = JSON.stringify(o, null, 2), u = new Blob([d], { type: "application/json" }), _ = URL.createObjectURL(u), a = document.createElement("a");
+    a.href = _, a.download = "gradio-design.json", a.click(), URL.revokeObjectURL(_);
+  }
+  function L() {
+    try {
+      const o = document.createElement("canvas"), d = o.getContext("2d"), u = M.getBoundingClientRect();
+      o.width = u.width * 2, o.height = u.height * 2, d.scale(2, 2), d.fillStyle = "#ffffff", d.fillRect(0, 0, u.width, u.height), d.strokeStyle = "rgba(0,0,0,0.1)", d.lineWidth = 1;
+      for (let a = 0; a <= u.width; a += 20)
+        d.moveTo(a, 0), d.lineTo(a, u.height);
+      for (let a = 0; a <= u.height; a += 20)
+        d.moveTo(0, a), d.lineTo(u.width, a);
+      d.stroke(), c.components.forEach((a) => {
+        const E = i.find((V) => V.type === a.type);
+        d.fillStyle = "#ffffff", d.strokeStyle = "#ddd", d.lineWidth = 2, d.fillRect(a.position.x, a.position.y, a.size.width, a.size.height), d.strokeRect(a.position.x, a.position.y, a.size.width, a.size.height), d.fillStyle = "#333", d.font = "16px Arial", d.textAlign = "center", d.fillText(
+          (E == null ? void 0 : E.icon) || "📦",
+          a.position.x + a.size.width / 2,
+          a.position.y + 25
+        ), d.font = "12px Arial", d.fillText(a.type, a.position.x + a.size.width / 2, a.position.y + a.size.height / 2), d.fillText(a.props.label || a.props.value || "", a.position.x + a.size.width / 2, a.position.y + a.size.height / 2 + 15);
+      });
+      const _ = document.createElement("a");
+      _.download = "gradio-design.png", _.href = o.toDataURL("image/png"), _.click();
+    } catch (o) {
+      console.error("Canvas export failed:", o), alert("PNG export failed. Check console for details.");
+    }
+  }
+  let H = !1, _e = { x: 0, y: 0 };
+  function ke(o, d) {
+    if (o.button !== 0) return;
+    H = !0, l(5, g = d);
+    const u = M.getBoundingClientRect();
+    _e.x = o.clientX - u.left - d.position.x, _e.y = o.clientY - u.top - d.position.y, o.preventDefault();
+  }
+  function F(o) {
+    if (!H || !g) return;
+    const d = M.getBoundingClientRect(), u = o.clientX - d.left - _e.x, _ = o.clientY - d.top - _e.y;
+    U(g, Math.max(0, u), Math.max(0, _));
+  }
+  function fe() {
+    H = !1;
+  }
+  function K() {
+    G = this.value, l(2, G);
+  }
+  function le() {
+    te = nt(this), l(3, te), l(7, S);
+  }
+  const Ce = (o, d) => J(d, o), Q = (o) => W(o.id), ie = (o) => I(o), he = (o, d) => ke(d, o);
+  function se(o) {
+    et[o ? "unshift" : "push"](() => {
+      M = o, l(4, M);
+    });
+  }
+  const $ = (o) => T("label", o.target.value), Oe = (o) => T("placeholder", o.target.value), ge = (o) => T("value", o.target.checked), ne = (o) => T("value", parseFloat(o.target.value) || 0), me = (o) => T("value", o.target.value), ce = (o) => T("choices", o.target.value), A = (o) => T("minimum", parseFloat(o.target.value) || 0), ae = (o) => T("maximum", parseFloat(o.target.value) || 100), B = (o) => T("step", parseFloat(o.target.value) || 1), P = (o) => X(g, parseInt(o.target.value) || 200, g.size.height), de = (o) => X(g, g.size.width, parseInt(o.target.value) || 100), ye = (o) => U(g, parseInt(o.target.value) || 0, g.position.y), De = (o) => U(g, g.position.x, parseInt(o.target.value) || 0);
+  return n.$$set = (o) => {
+    "gradio" in o && l(20, p = o.gradio), "elem_id" in o && l(1, v = o.elem_id), "value" in o && l(0, c = o.value);
+  }, n.$$.update = () => {
+    n.$$.dirty[0] & /*selectedCategory, allComponents, searchFilter*/
+    33554444 && l(26, t = (() => {
+      if (te === "All") {
+        let o = i;
+        return G.trim() ? o.filter((d) => d.type.toLowerCase().includes(G.toLowerCase()) || d.label.toLowerCase().includes(G.toLowerCase())) : o;
+      } else {
+        let o = S[te] || [];
+        return G.trim() ? o.filter((d) => d.type.toLowerCase().includes(G.toLowerCase()) || d.label.toLowerCase().includes(G.toLowerCase())) : o;
+      }
+    })()), n.$$.dirty[0] & /*mounted, filteredComponents, allComponents*/
+    117440512 && l(6, r = D ? t : i);
+  }, l(25, i = Object.values(S).flat()), [
+    c,
+    v,
+    G,
+    te,
+    M,
+    g,
+    r,
+    S,
+    J,
+    Z,
+    I,
+    T,
+    U,
+    X,
+    W,
+    pe,
+    L,
+    ke,
+    F,
+    fe,
+    p,
+    s,
+    ee,
+    q,
+    D,
+    i,
+    t,
+    K,
+    le,
+    Ce,
+    Q,
+    ie,
+    he,
+    se,
+    $,
+    Oe,
+    ge,
+    ne,
+    me,
+    ce,
+    A,
+    ae,
+    B,
+    P,
+    de,
+    ye,
+    De
+  ];
+}
+class bt extends Ze {
+  constructor(e) {
+    super(), lt(
+      this,
+      e,
+      mt,
+      vt,
+      st,
+      {
+        gradio: 20,
+        elem_id: 1,
+        elem_classes: 21,
+        value: 0,
+        loading_status: 22,
+        mode: 23
+      },
+      null,
+      [-1, -1]
+    );
+  }
+  get elem_classes() {
+    return this.$$.ctx[21];
+  }
+  get loading_status() {
+    return this.$$.ctx[22];
+  }
+  get mode() {
+    return this.$$.ctx[23];
+  }
+}
+export {
+  bt as default
+};

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

@@ -0,0 +1 @@
+.designer-container.svelte-zk15k.svelte-zk15k{display:flex;flex-direction:column;height:700px;border:1px solid #ddd;border-radius:8px;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.toolbar.svelte-zk15k.svelte-zk15k{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#f8f9fa;border-bottom:1px solid #ddd}.toolbar-left.svelte-zk15k.svelte-zk15k{display:flex;align-items:center;gap:12px}.toolbar.svelte-zk15k h3.svelte-zk15k{margin:0;font-size:16px;font-weight:600}.component-count.svelte-zk15k.svelte-zk15k{background:#e9ecef;padding:2px 8px;border-radius:12px;font-size:12px;color:#495057}.toolbar-right.svelte-zk15k.svelte-zk15k{display:flex;gap:8px}.export-btn.svelte-zk15k.svelte-zk15k{padding:6px 12px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px}.export-btn.svelte-zk15k.svelte-zk15k:hover{background:#0056b3}.designer-content.svelte-zk15k.svelte-zk15k{display:grid!important;grid-template-columns:250px 1fr 280px!important;grid-template-areas:"palette canvas properties"!important;flex:1;height:100%;min-height:0}.palette.svelte-zk15k.svelte-zk15k{grid-area:palette!important;background:#f8f9fa;border-right:1px solid #ddd;display:flex;flex-direction:column;overflow:hidden}.canvas.svelte-zk15k.svelte-zk15k{grid-area:canvas!important;position:relative;background:#fff;overflow:hidden;-webkit-user-select:none;user-select:none}.properties.svelte-zk15k.svelte-zk15k{grid-area:properties!important;background:#f8f9fa;padding:16px;border-left:1px solid #ddd;overflow-y:auto}.palette-header.svelte-zk15k.svelte-zk15k{padding:12px 16px;border-bottom:1px solid #ddd;background:#fff;flex-shrink:0;min-height:120px;max-height:120px;overflow:hidden}.palette.svelte-zk15k h4.svelte-zk15k{margin:0 0 8px;font-size:14px;font-weight:600}.search-input.svelte-zk15k.svelte-zk15k,.category-select.svelte-zk15k.svelte-zk15k{width:100%;padding:6px 8px;border:1px solid #ddd;border-radius:4px;font-size:12px;margin-bottom:6px;box-sizing:border-box}.palette-content.svelte-zk15k.svelte-zk15k{flex:1;overflow-y:auto;padding:8px;min-height:0;background:#f8f9fa}.palette-item.svelte-zk15k.svelte-zk15k{display:flex;align-items:center;padding:8px;margin-bottom:4px;background:#fff;border:1px solid #e1e5e9;border-radius:4px;cursor:grab;-webkit-user-select:none;user-select:none}.palette-item.svelte-zk15k.svelte-zk15k:hover{background:#f0f0f0}.no-components.svelte-zk15k.svelte-zk15k{padding:20px;text-align:center;color:#666;font-size:12px;background:#fff;border-radius:4px;border:1px solid #e1e5e9}.icon.svelte-zk15k.svelte-zk15k{margin-right:8px;font-size:16px}.label.svelte-zk15k.svelte-zk15k{font-size:12px}.canvas-grid.svelte-zk15k.svelte-zk15k{position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(rgba(0,0,0,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.1) 1px,transparent 1px);background-size:20px 20px;opacity:.3}.canvas-component.svelte-zk15k.svelte-zk15k{position:absolute;border:2px solid #ddd;border-radius:4px;background:#fff;cursor:move;padding:8px;box-sizing:border-box}.canvas-component.svelte-zk15k.svelte-zk15k:hover{border-color:#007bff}.canvas-component.selected.svelte-zk15k.svelte-zk15k{border-color:#ff6b6b;box-shadow:0 0 0 2px #ff6b6b4d}.component-preview.svelte-zk15k.svelte-zk15k{display:flex;flex-direction:column;height:100%;text-align:center;pointer-events:none}.component-header.svelte-zk15k.svelte-zk15k{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.type.svelte-zk15k.svelte-zk15k{font-weight:700;font-size:12px;color:#666}.delete-btn.svelte-zk15k.svelte-zk15k{background:none;border:none;cursor:pointer;font-size:10px;padding:2px;opacity:.7;pointer-events:auto}.delete-btn.svelte-zk15k.svelte-zk15k:hover{opacity:1}.properties.svelte-zk15k h4.svelte-zk15k{margin:0 0 16px;font-size:14px;font-weight:600}.property-group.svelte-zk15k.svelte-zk15k{display:flex;flex-direction:column;gap:8px}.property-header.svelte-zk15k.svelte-zk15k{padding:12px;background:#fff;border-radius:4px;border:1px solid #e1e5e9;margin-bottom:12px}.size-section.svelte-zk15k.svelte-zk15k{margin-top:16px;padding-top:16px;border-top:1px solid #ddd}.size-section.svelte-zk15k h5.svelte-zk15k{margin:0 0 8px;font-size:12px;font-weight:600}.size-controls.svelte-zk15k.svelte-zk15k{display:grid;grid-template-columns:1fr 1fr;gap:8px}.property-group.svelte-zk15k label.svelte-zk15k{font-size:12px;font-weight:500;color:#333}.property-group.svelte-zk15k input.svelte-zk15k{padding:6px 8px;border:1px solid #ddd;border-radius:4px;font-size:12px}.help-text.svelte-zk15k.svelte-zk15k{margin-top:20px;padding:12px;background:#fff;border-radius:4px;border:1px solid #e1e5e9}.help-text.svelte-zk15k ul.svelte-zk15k{margin:8px 0 0;padding-left:16px}.help-text.svelte-zk15k li.svelte-zk15k{font-size:11px;margin-bottom:4px}

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

@@ -0,0 +1,126 @@
+const {
+  SvelteComponent: h,
+  add_iframe_resize_listener: g,
+  add_render_callback: v,
+  append_hydration: y,
+  attr: b,
+  binding_callbacks: m,
+  children: w,
+  claim_element: z,
+  claim_text: k,
+  detach: c,
+  element: p,
+  init: E,
+  insert_hydration: S,
+  noop: o,
+  safe_not_equal: q,
+  set_data: C,
+  text: D,
+  toggle_class: _
+} = window.__gradio__svelte__internal, { onMount: I } = window.__gradio__svelte__internal;
+function M(t) {
+  let e, i = (
+    /*value*/
+    (t[0] ? (
+      /*value*/
+      t[0]
+    ) : "") + ""
+  ), s, d;
+  return {
+    c() {
+      e = p("div"), s = D(i), this.h();
+    },
+    l(l) {
+      e = z(l, "DIV", { class: !0 });
+      var n = w(e);
+      s = k(n, i), n.forEach(c), this.h();
+    },
+    h() {
+      b(e, "class", "svelte-84cxb8"), v(() => (
+        /*div_elementresize_handler*/
+        t[5].call(e)
+      )), _(
+        e,
+        "table",
+        /*type*/
+        t[1] === "table"
+      ), _(
+        e,
+        "gallery",
+        /*type*/
+        t[1] === "gallery"
+      ), _(
+        e,
+        "selected",
+        /*selected*/
+        t[2]
+      );
+    },
+    m(l, n) {
+      S(l, e, n), y(e, s), d = g(
+        e,
+        /*div_elementresize_handler*/
+        t[5].bind(e)
+      ), t[6](e);
+    },
+    p(l, [n]) {
+      n & /*value*/
+      1 && i !== (i = /*value*/
+      (l[0] ? (
+        /*value*/
+        l[0]
+      ) : "") + "") && C(s, i), n & /*type*/
+      2 && _(
+        e,
+        "table",
+        /*type*/
+        l[1] === "table"
+      ), n & /*type*/
+      2 && _(
+        e,
+        "gallery",
+        /*type*/
+        l[1] === "gallery"
+      ), n & /*selected*/
+      4 && _(
+        e,
+        "selected",
+        /*selected*/
+        l[2]
+      );
+    },
+    i: o,
+    o,
+    d(l) {
+      l && c(e), d(), t[6](null);
+    }
+  };
+}
+function P(t, e) {
+  t.style.setProperty("--local-text-width", `${e && e < 150 ? e : 200}px`), t.style.whiteSpace = "unset";
+}
+function V(t, e, i) {
+  let { value: s } = e, { type: d } = e, { selected: l = !1 } = e, n, r;
+  I(() => {
+    P(r, n);
+  });
+  function u() {
+    n = this.clientWidth, i(3, n);
+  }
+  function f(a) {
+    m[a ? "unshift" : "push"](() => {
+      r = a, i(4, r);
+    });
+  }
+  return t.$$set = (a) => {
+    "value" in a && i(0, s = a.value), "type" in a && i(1, d = a.type), "selected" in a && i(2, l = a.selected);
+  }, [s, d, l, n, r, u, f];
+}
+class W extends h {
+  constructor(e) {
+    super(), E(this, e, V, M, q, { value: 0, type: 1, selected: 2 });
+  }
+}
+export {
+  W as default
+};

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

@@ -0,0 +1 @@
+.gallery.svelte-84cxb8{padding:var(--size-1) var(--size-2)}div.svelte-84cxb8{overflow:hidden;min-width:var(--local-text-width);white-space:nowrap}

src/demo/app.py

@@ -0,0 +1,172 @@
+import gradio as gr
+from gradio_gradiodesigner import GradioDesigner
+import json
+
+def analyze_design(design_config):
+    """Analyze the design configuration"""
+    if not design_config or not isinstance(design_config, dict):
+        return "No design configuration provided"
+    
+    components = design_config.get('components', [])
+    
+    # Count components by type
+    component_types = {}
+    for comp in components:
+        comp_type = comp.get('type', 'Unknown')
+        component_types[comp_type] = component_types.get(comp_type, 0) + 1
+    
+    # Calculate coverage area
+    if components:
+        positions = [(comp['position']['x'], comp['position']['y']) for comp in components]
+        min_x, min_y = min(pos[0] for pos in positions), min(pos[1] for pos in positions)
+        max_x, max_y = max(pos[0] for pos in positions), max(pos[1] for pos in positions)
+        coverage = f"{max_x - min_x} x {max_y - min_y} pixels"
+    else:
+        coverage = "No components"
+    
+    analysis = f"""📊 **Design Analysis**
+
+**Component Summary:**
+• Total components: {len(components)}
+• Component types: {dict(component_types)}
+• Canvas coverage: {coverage}
+
+**Component Details:**
+"""
+    
+    for i, comp in enumerate(components, 1):
+        analysis += f"\n{i}. **{comp['type']}** (`{comp['id']}`)"
+        analysis += f"\n   - Position: ({comp['position']['x']}, {comp['position']['y']})"
+        analysis += f"\n   - Size: {comp['size']['width']}×{comp['size']['height']}"
+        if comp.get('props', {}).get('label'):
+            analysis += f"\n   - Label: \"{comp['props']['label']}\""
+    
+    return analysis
+
+def generate_gradio_code(design_config):
+    """Generate complete Gradio code from design"""
+    if not design_config or not isinstance(design_config, dict):
+        return "# No design to generate code from"
+    
+    components = design_config.get('components', [])
+    
+    code = '''import gradio as gr
+
+def process_input(*args):
+    """Process the inputs from your app"""
+    return "Hello from your generated app!"
+
+with gr.Blocks(title="Generated Gradio App") as demo:
+    gr.Markdown("# 🚀 Generated Gradio App")
+    gr.Markdown("This app was generated from your visual design!")
+    
+'''
+    
+    # Sort components by position (top to bottom, left to right)
+    sorted_components = sorted(components, key=lambda c: (c['position']['y'], c['position']['x']))
+    
+    component_vars = []
+    
+    for comp in sorted_components:
+        comp_type = comp.get('type', 'Textbox')
+        comp_id = comp.get('id', 'component')
+        props = comp.get('props', {})
+        
+        # Build component declaration
+        prop_parts = []
+        for key, value in props.items():
+            if key in ['label', 'placeholder', 'value'] and isinstance(value, str):
+                prop_parts.append(f'{key}="{value}"')
+            elif key in ['minimum', 'maximum', 'step', 'lines', 'max_length', 'precision'] and isinstance(value, (int, float)):
+                prop_parts.append(f'{key}={value}')
+            elif key == 'choices' and isinstance(value, list):
+                prop_parts.append(f'{key}={value}')
+            elif isinstance(value, bool):
+                prop_parts.append(f'{key}={value}')
+        
+        prop_string = ", ".join(prop_parts) if prop_parts else ""
+        
+        code += f"    {comp_id} = gr.{comp_type}({prop_string})\n"
+        component_vars.append(comp_id)
+    
+    # Add a simple interaction if there are components
+    if component_vars:
+        inputs = [var for var in component_vars if not var.startswith('button')]
+        outputs = [var for var in component_vars if var.startswith('button')]
+        
+        if not outputs:
+            outputs = inputs[:1]  # Use first input as output if no buttons
+        
+        if inputs and outputs:
+            code += f"\n    # Add interactions\n"
+            code += f"    # Example: connect inputs to outputs\n"
+            code += f"    # {outputs[0]}.click(process_input, inputs=[{', '.join(inputs)}], outputs=[{outputs[0]}])\n"
+    
+    code += '''
+if __name__ == "__main__":
+    demo.launch()
+'''
+    
+    return code
+
+with gr.Blocks(title="Gradio Visual Designer Pro", theme=gr.themes.Soft()) as demo:
+    gr.Markdown("""
+    # 🎨 Gradio Visual Designer Pro
+    
+    **Build your Gradio apps visually!** Drag and drop components, customize properties, and generate production-ready code.
+    
+    **Features:** 25+ Gradio components • Real-time editing • Code generation • Export options
+    """)
+    
+    with gr.Row():
+        designer = GradioDesigner(
+            label="Visual App Designer",
+            value={"components": [], "layout": "blocks"}
+        )
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            analysis_output = gr.Markdown(
+                value="Design analysis will appear here...",
+                label="Design Analysis"
+            )
+        
+        with gr.Column(scale=1):
+            code_output = gr.Code(
+                label="Generated Gradio Code",
+                language="python",
+                value="# Design your app above to see generated code",
+                lines=20
+            )
+    
+    with gr.Row():
+        analyze_btn = gr.Button("📊 Analyze Design", variant="secondary")
+        generate_btn = gr.Button("🚀 Generate Code", variant="primary")
+        clear_btn = gr.Button("🗑️ Clear All", variant="stop")
+    
+    # Event handlers
+    designer.change(
+        fn=analyze_design,
+        inputs=[designer], 
+        outputs=[analysis_output]
+    )
+    
+    analyze_btn.click(
+        fn=analyze_design,
+        inputs=[designer],
+        outputs=[analysis_output]
+    )
+    
+    generate_btn.click(
+        fn=generate_gradio_code,
+        inputs=[designer],
+        outputs=[code_output]
+    )
+    
+    clear_btn.click(
+        fn=lambda: {"components": [], "layout": "blocks"},
+        outputs=[designer]
+    )
+
+if __name__ == "__main__":
+    demo.launch()

src/demo/css.css

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

src/demo/requirements.txt

@@ -0,0 +1 @@
+gradio_gradiodesigner

src/demo/space.py

@@ -0,0 +1,293 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'GradioDesigner': {'description': 'A visual designer component for building Gradio layouts with all components', 'members': {'__init__': {'value': {'type': 'dict | None', 'default': 'None', 'description': None}, 'label': {'type': 'str | None', 'default': 'None', 'description': None}}, 'postprocess': {'value': {'type': 'dict | None', 'description': None}}, 'preprocess': {'return': {'type': 'dict | None', 'description': None}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the GradioDesigner changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input.'}, 'input': {'type': None, 'default': None, 'description': 'This listener is triggered when the user changes the value of the GradioDesigner.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'GradioDesigner': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_gradiodesigner`
+
+<div style="display: flex; gap: 7px;">
+<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.1%20-%20orange">  
+</div>
+
+gradio designer
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_gradiodesigner
+```
+
+## Usage
+
+```python
+import gradio as gr
+from gradio_gradiodesigner import GradioDesigner
+import json
+
+def analyze_design(design_config):
+    \"\"\"Analyze the design configuration\"\"\"
+    if not design_config or not isinstance(design_config, dict):
+        return "No design configuration provided"
+    
+    components = design_config.get('components', [])
+    
+    # Count components by type
+    component_types = {}
+    for comp in components:
+        comp_type = comp.get('type', 'Unknown')
+        component_types[comp_type] = component_types.get(comp_type, 0) + 1
+    
+    # Calculate coverage area
+    if components:
+        positions = [(comp['position']['x'], comp['position']['y']) for comp in components]
+        min_x, min_y = min(pos[0] for pos in positions), min(pos[1] for pos in positions)
+        max_x, max_y = max(pos[0] for pos in positions), max(pos[1] for pos in positions)
+        coverage = f"{max_x - min_x} x {max_y - min_y} pixels"
+    else:
+        coverage = "No components"
+    
+    analysis = f\"\"\"📊 **Design Analysis**
+
+**Component Summary:**
+• Total components: {len(components)}
+• Component types: {dict(component_types)}
+• Canvas coverage: {coverage}
+
+**Component Details:**
+\"\"\"
+    
+    for i, comp in enumerate(components, 1):
+        analysis += f"\n{i}. **{comp['type']}** (`{comp['id']}`)"
+        analysis += f"\n   - Position: ({comp['position']['x']}, {comp['position']['y']})"
+        analysis += f"\n   - Size: {comp['size']['width']}×{comp['size']['height']}"
+        if comp.get('props', {}).get('label'):
+            analysis += f"\n   - Label: \"{comp['props']['label']}\""
+    
+    return analysis
+
+def generate_gradio_code(design_config):
+    \"\"\"Generate complete Gradio code from design\"\"\"
+    if not design_config or not isinstance(design_config, dict):
+        return "# No design to generate code from"
+    
+    components = design_config.get('components', [])
+    
+    code = '''import gradio as gr
+
+def process_input(*args):
+    \"\"\"Process the inputs from your app\"\"\"
+    return "Hello from your generated app!"
+
+with gr.Blocks(title="Generated Gradio App") as demo:
+    gr.Markdown("# 🚀 Generated Gradio App")
+    gr.Markdown("This app was generated from your visual design!")
+    
+'''
+    
+    # Sort components by position (top to bottom, left to right)
+    sorted_components = sorted(components, key=lambda c: (c['position']['y'], c['position']['x']))
+    
+    component_vars = []
+    
+    for comp in sorted_components:
+        comp_type = comp.get('type', 'Textbox')
+        comp_id = comp.get('id', 'component')
+        props = comp.get('props', {})
+        
+        # Build component declaration
+        prop_parts = []
+        for key, value in props.items():
+            if key in ['label', 'placeholder', 'value'] and isinstance(value, str):
+                prop_parts.append(f'{key}="{value}"')
+            elif key in ['minimum', 'maximum', 'step', 'lines', 'max_length', 'precision'] and isinstance(value, (int, float)):
+                prop_parts.append(f'{key}={value}')
+            elif key == 'choices' and isinstance(value, list):
+                prop_parts.append(f'{key}={value}')
+            elif isinstance(value, bool):
+                prop_parts.append(f'{key}={value}')
+        
+        prop_string = ", ".join(prop_parts) if prop_parts else ""
+        
+        code += f"    {comp_id} = gr.{comp_type}({prop_string})\n"
+        component_vars.append(comp_id)
+    
+    # Add a simple interaction if there are components
+    if component_vars:
+        inputs = [var for var in component_vars if not var.startswith('button')]
+        outputs = [var for var in component_vars if var.startswith('button')]
+        
+        if not outputs:
+            outputs = inputs[:1]  # Use first input as output if no buttons
+        
+        if inputs and outputs:
+            code += f"\n    # Add interactions\n"
+            code += f"    # Example: connect inputs to outputs\n"
+            code += f"    # {outputs[0]}.click(process_input, inputs=[{', '.join(inputs)}], outputs=[{outputs[0]}])\n"
+    
+    code += '''
+if __name__ == "__main__":
+    demo.launch()
+'''
+    
+    return code
+
+with gr.Blocks(title="Gradio Visual Designer Pro", theme=gr.themes.Soft()) as demo:
+    gr.Markdown(\"\"\"
+    # 🎨 Gradio Visual Designer Pro
+    
+    **Build your Gradio apps visually!** Drag and drop components, customize properties, and generate production-ready code.
+    
+    **Features:** 25+ Gradio components • Real-time editing • Code generation • Export options
+    \"\"\")
+    
+    with gr.Row():
+        designer = GradioDesigner(
+            label="Visual App Designer",
+            value={"components": [], "layout": "blocks"}
+        )
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            analysis_output = gr.Markdown(
+                value="Design analysis will appear here...",
+                label="Design Analysis"
+            )
+        
+        with gr.Column(scale=1):
+            code_output = gr.Code(
+                label="Generated Gradio Code",
+                language="python",
+                value="# Design your app above to see generated code",
+                lines=20
+            )
+    
+    with gr.Row():
+        analyze_btn = gr.Button("📊 Analyze Design", variant="secondary")
+        generate_btn = gr.Button("🚀 Generate Code", variant="primary")
+        clear_btn = gr.Button("🗑️ Clear All", variant="stop")
+    
+    # Event handlers
+    designer.change(
+        fn=analyze_design,
+        inputs=[designer], 
+        outputs=[analysis_output]
+    )
+    
+    analyze_btn.click(
+        fn=analyze_design,
+        inputs=[designer],
+        outputs=[analysis_output]
+    )
+    
+    generate_btn.click(
+        fn=generate_gradio_code,
+        inputs=[designer],
+        outputs=[code_output]
+    )
+    
+    clear_btn.click(
+        fn=lambda: {"components": [], "layout": "blocks"},
+        outputs=[designer]
+    )
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `GradioDesigner`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["GradioDesigner"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["GradioDesigner"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+
+
+ ```python
+def predict(
+    value: dict | None
+) -> dict | None:
+    return value
+```
+""", elem_classes=["md-custom", "GradioDesigner-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          GradioDesigner: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/frontend/Example.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	export let value: string | null;
+	export let type: "gallery" | "table";
+	export let selected = false;
+
+	let size: number;
+	let el: HTMLDivElement;
+
+	function set_styles(element: HTMLElement, el_width: number): void {
+		element.style.setProperty(
+			"--local-text-width",
+			`${el_width && el_width < 150 ? el_width : 200}px`
+		);
+		element.style.whiteSpace = "unset";
+	}
+
+	onMount(() => {
+		set_styles(el, size);
+	});
+</script>
+
+<div
+	bind:clientWidth={size}
+	bind:this={el}
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{value ? value : ""}
+</div>
+
+<style>
+	.gallery {
+		padding: var(--size-1) var(--size-2);
+	}
+
+	div {
+		overflow: hidden;
+		min-width: var(--local-text-width);
+
+		white-space: nowrap;
+	}
+</style>

src/frontend/Index.svelte

@@ -0,0 +1,890 @@
+<script lang="ts">
+    import type { LoadingStatus } from "@gradio/statustracker";
+    import type { Gradio } from "@gradio/utils";
+    import { onMount } from 'svelte';
+    
+    export let gradio: Gradio<{
+        change: never;
+        input: never;
+    }>;
+    export let elem_id = "";
+    export const elem_classes: string[] = [];
+    export let value: any = { components: [], layout: "blocks" };
+    export const loading_status: LoadingStatus | undefined = undefined;
+    export const mode: "static" | "interactive" = "interactive";
+
+    // Complete component definitions organized by category
+    const componentsByCategory = {
+        "Input": [
+            { type: "Textbox", label: "Text Input", icon: "📝" },
+            { type: "TextArea", label: "Text Area", icon: "📄" },
+            { type: "Number", label: "Number", icon: "🔢" },
+            { type: "Slider", label: "Slider", icon: "🎚️" },
+            { type: "Checkbox", label: "Checkbox", icon: "☑️" },
+            { type: "CheckboxGroup", label: "Checkbox Group", icon: "☑️" },
+            { type: "Radio", label: "Radio", icon: "🔘" },
+            { type: "Dropdown", label: "Dropdown", icon: "📋" },
+            { type: "Toggle", label: "Toggle", icon: "🔄" },
+            { type: "ColorPicker", label: "Color Picker", icon: "🎨" },
+            { type: "Date", label: "Date", icon: "📅" },
+            { type: "Time", label: "Time", icon: "⏰" },
+            { type: "File", label: "File Upload", icon: "📁" }
+        ],
+        "Action": [
+            { type: "Button", label: "Button", icon: "🔘" }
+        ],
+        "Media": [
+            { type: "Image", label: "Image", icon: "🖼️" },
+            { type: "Video", label: "Video", icon: "🎥" },
+            { type: "Audio", label: "Audio", icon: "🎵" }
+        ],
+        "Data": [
+            { type: "Dataframe", label: "Dataframe", icon: "📊" },
+            { type: "JSON", label: "JSON", icon: "📋" }
+        ],
+        "Display": [
+            { type: "Markdown", label: "Markdown", icon: "📝" },
+            { type: "HTML", label: "HTML", icon: "🌐" },
+            { type: "Label", label: "Label", icon: "🏷️" },
+            { type: "Progress", label: "Progress", icon: "📈" }
+        ]
+    };
+
+    // Force components to show immediately on mount
+    let mounted = false;
+    onMount(() => {
+        mounted = true;
+    });
+
+    let draggedComponent: any = null;
+    let canvasRef: HTMLElement;
+    let selectedComponent: any = null;
+    let searchFilter = "";
+    let selectedCategory = "All";
+
+    // Ensure components are always available
+    $: allComponents = Object.values(componentsByCategory).flat();
+    
+    $: filteredComponents = (() => {
+        if (selectedCategory === "All") {
+            let components = allComponents;
+            
+            if (searchFilter.trim()) {
+                return components.filter(comp => 
+                    comp.type.toLowerCase().includes(searchFilter.toLowerCase()) ||
+                    comp.label.toLowerCase().includes(searchFilter.toLowerCase())
+                );
+            }
+            
+            return components;
+        } else {
+            let components = componentsByCategory[selectedCategory] || [];
+            
+            if (searchFilter.trim()) {
+                return components.filter(comp => 
+                    comp.type.toLowerCase().includes(searchFilter.toLowerCase()) ||
+                    comp.label.toLowerCase().includes(searchFilter.toLowerCase())
+                );
+            }
+            
+            return components;
+        }
+    })();
+    
+    // Use this to display components on initial load
+    $: displayComponents = mounted ? filteredComponents : allComponents;
+
+    function onDragStart(event: DragEvent, componentType: any) {
+        draggedComponent = componentType;
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = "copy";
+        }
+    }
+
+    function onDragOver(event: DragEvent) {
+        event.preventDefault();
+        if (event.dataTransfer) {
+            event.dataTransfer.dropEffect = "copy";
+        }
+    }
+
+    function onDrop(event: DragEvent) {
+        event.preventDefault();
+        if (!draggedComponent) return;
+
+        const rect = canvasRef.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+
+        const newComponent = {
+            id: `${draggedComponent.type.toLowerCase()}_${Date.now()}`,
+            type: draggedComponent.type,
+            position: { x, y },
+            size: { width: 200, height: 100 },
+            props: getDefaultProps(draggedComponent.type)
+        };
+
+        value = {
+            ...value,
+            components: [...value.components, newComponent]
+        };
+
+        gradio.dispatch("change", value);
+        draggedComponent = null;
+    }
+
+    function getDefaultProps(type: string) {
+        const defaults = {
+            Textbox: { label: "Text Input", placeholder: "Enter text...", value: "" },
+            TextArea: { label: "Text Area", placeholder: "Enter multiple lines...", lines: 3, value: "" },
+            Button: { value: "Click me", variant: "secondary", size: "sm" },
+            Slider: { label: "Slider", minimum: 0, maximum: 100, step: 1, value: 50 },
+            Number: { label: "Number", value: 0, precision: 0 },
+            Checkbox: { label: "Checkbox", value: false },
+            CheckboxGroup: { label: "Checkbox Group", choices: ["Option 1", "Option 2"], value: [] },
+            Radio: { label: "Radio", choices: ["Option 1", "Option 2"], value: "Option 1" },
+            Dropdown: { label: "Dropdown", choices: ["Option 1", "Option 2"], value: "Option 1", multiselect: false },
+            Toggle: { label: "Toggle", value: false },
+            ColorPicker: { label: "Color Picker", value: "#ff0000" },
+            Date: { label: "Date", value: "2025-01-01" },
+            Time: { label: "Time", value: "12:00" },
+            File: { label: "Upload File", file_types: [".txt", ".pdf"] },
+            Image: { label: "Image", type: "pil", interactive: true },
+            Video: { label: "Video", format: "mp4" },
+            Audio: { label: "Audio" },
+            Dataframe: { headers: ["Column 1", "Column 2"], datatype: ["str", "str"], value: [] },
+            JSON: { value: "{}" },
+            Markdown: { value: "# Markdown Text" },
+            HTML: { value: "<p>HTML Content</p>" },
+            Label: { value: "Label Text" },
+            Progress: { value: 0.5 }
+        };
+        return defaults[type] || {};
+    }
+
+    function selectComponent(component: any) {
+        selectedComponent = component;
+    }
+
+    function updateComponentProp(prop: string, newValue: any) {
+        if (!selectedComponent) return;
+        
+        // Handle special input types
+        if (prop === "choices" && typeof newValue === "string") {
+            newValue = newValue.split(",").map(s => s.trim()).filter(s => s);
+        } else if (prop === "file_types" && typeof newValue === "string") {
+            newValue = newValue.split(",").map(s => s.trim()).filter(s => s);
+        }
+        
+        const updatedComponents = value.components.map(comp => 
+            comp.id === selectedComponent.id 
+                ? { ...comp, props: { ...comp.props, [prop]: newValue }}
+                : comp
+        );
+        
+        selectedComponent = { ...selectedComponent, props: { ...selectedComponent.props, [prop]: newValue }};
+        value = { ...value, components: updatedComponents };
+        gradio.dispatch("change", value);
+    }
+
+    function updateComponentPosition(component: any, newX: number, newY: number) {
+        const updatedComponents = value.components.map(comp => 
+            comp.id === component.id 
+                ? { ...comp, position: { x: newX, y: newY }}
+                : comp
+        );
+        
+        value = { ...value, components: updatedComponents };
+        gradio.dispatch("change", value);
+    }
+
+    function updateComponentSize(component: any, newWidth: number, newHeight: number) {
+        const updatedComponents = value.components.map(comp => 
+            comp.id === component.id 
+                ? { ...comp, size: { width: newWidth, height: newHeight }}
+                : comp
+        );
+        
+        if (selectedComponent?.id === component.id) {
+            selectedComponent = { ...selectedComponent, size: { width: newWidth, height: newHeight }};
+        }
+        
+        value = { ...value, components: updatedComponents };
+        gradio.dispatch("change", value);
+    }
+
+    function deleteComponent(componentId: string) {
+        const updatedComponents = value.components.filter(comp => comp.id !== componentId);
+        value = { ...value, components: updatedComponents };
+        selectedComponent = null;
+        gradio.dispatch("change", value);
+    }
+
+    function exportAsJSON() {
+        const exportData = {
+            ...value,
+            metadata: {
+                version: "1.0",
+                created_at: new Date().toISOString(),
+                app_type: "gradio_interface",
+                component_count: value.components.length
+            }
+        };
+        
+        const jsonString = JSON.stringify(exportData, null, 2);
+        const blob = new Blob([jsonString], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'gradio-design.json';
+        a.click();
+        URL.revokeObjectURL(url);
+    }
+
+    function exportAsPNG() {
+        try {
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            
+            const rect = canvasRef.getBoundingClientRect();
+            canvas.width = rect.width * 2;
+            canvas.height = rect.height * 2;
+            
+            ctx.scale(2, 2);
+            
+            // White background
+            ctx.fillStyle = '#ffffff';
+            ctx.fillRect(0, 0, rect.width, rect.height);
+            
+            // Draw grid
+            ctx.strokeStyle = 'rgba(0,0,0,0.1)';
+            ctx.lineWidth = 1;
+            for (let x = 0; x <= rect.width; x += 20) {
+                ctx.moveTo(x, 0);
+                ctx.lineTo(x, rect.height);
+            }
+            for (let y = 0; y <= rect.height; y += 20) {
+                ctx.moveTo(0, y);
+                ctx.lineTo(rect.width, y);
+            }
+            ctx.stroke();
+            
+            // Draw components
+            value.components.forEach(component => {
+                const componentDef = allComponents.find(c => c.type === component.type);
+                
+                ctx.fillStyle = '#ffffff';
+                ctx.strokeStyle = '#ddd';
+                ctx.lineWidth = 2;
+                
+                ctx.fillRect(component.position.x, component.position.y, component.size.width, component.size.height);
+                ctx.strokeRect(component.position.x, component.position.y, component.size.width, component.size.height);
+                
+                // Component icon and text
+                ctx.fillStyle = '#333';
+                ctx.font = '16px Arial';
+                ctx.textAlign = 'center';
+                ctx.fillText(
+                    componentDef?.icon || '📦', 
+                    component.position.x + component.size.width/2, 
+                    component.position.y + 25
+                );
+                
+                ctx.font = '12px Arial';
+                ctx.fillText(
+                    component.type, 
+                    component.position.x + component.size.width/2, 
+                    component.position.y + component.size.height/2
+                );
+                
+                ctx.fillText(
+                    component.props.label || component.props.value || '', 
+                    component.position.x + component.size.width/2, 
+                    component.position.y + component.size.height/2 + 15
+                );
+            });
+            
+            const link = document.createElement('a');
+            link.download = 'gradio-design.png';
+            link.href = canvas.toDataURL('image/png');
+            link.click();
+            
+        } catch (error) {
+            console.error('Canvas export failed:', error);
+            alert('PNG export failed. Check console for details.');
+        }
+    }
+
+    // Make components draggable within canvas
+    let isDragging = false;
+    let dragOffset = { x: 0, y: 0 };
+
+    function onComponentMouseDown(event: MouseEvent, component: any) {
+        if (event.button !== 0) return; // Only left click
+        
+        isDragging = true;
+        selectedComponent = component;
+        
+        const rect = canvasRef.getBoundingClientRect();
+        dragOffset.x = event.clientX - rect.left - component.position.x;
+        dragOffset.y = event.clientY - rect.top - component.position.y;
+        
+        event.preventDefault();
+    }
+
+    function onCanvasMouseMove(event: MouseEvent) {
+        if (!isDragging || !selectedComponent) return;
+        
+        const rect = canvasRef.getBoundingClientRect();
+        const newX = event.clientX - rect.left - dragOffset.x;
+        const newY = event.clientY - rect.top - dragOffset.y;
+        
+        updateComponentPosition(selectedComponent, Math.max(0, newX), Math.max(0, newY));
+    }
+
+    function onCanvasMouseUp() {
+        isDragging = false;
+    }
+</script>
+
+<svelte:window on:mousemove={onCanvasMouseMove} on:mouseup={onCanvasMouseUp} />
+
+<div class="designer-container" id={elem_id}>
+    <!-- Top Toolbar -->
+    <div class="toolbar">
+        <div class="toolbar-left">
+            <h3>🎨 Gradio Designer</h3>
+            <span class="component-count">{value.components.length} components</span>
+        </div>
+        <div class="toolbar-right">
+            <button class="export-btn" on:click={exportAsJSON} type="button">
+                📄 Export JSON
+            </button>
+            <button class="export-btn" on:click={exportAsPNG} type="button">
+                🖼️ Export PNG
+            </button>
+        </div>
+    </div>
+
+    <div class="designer-content">
+        <!-- Component Palette - Always on the left -->
+        <div class="palette">
+            <div class="palette-header">
+                <h4>Components</h4>
+                <input 
+                    type="text" 
+                    placeholder="Search components..." 
+                    bind:value={searchFilter}
+                    class="search-input"
+                />
+                <select bind:value={selectedCategory} class="category-select">
+                    <option value="All">All Categories</option>
+                    {#each Object.keys(componentsByCategory) as category}
+                        <option value={category}>{category}</option>
+                    {/each}
+                </select>
+            </div>
+            
+            <div class="palette-content">
+                {#each displayComponents as component}
+                    <div 
+                        class="palette-item"
+                        draggable="true"
+                        on:dragstart={(e) => onDragStart(e, component)}
+                    >
+                        <span class="icon">{component.icon}</span>
+                        <span class="label">{component.label}</span>
+                    </div>
+                {:else}
+                    <div class="no-components">
+                        {#if searchFilter.trim()}
+                            No components match "{searchFilter}"
+                        {:else}
+                            Loading components...
+                        {/if}
+                    </div>
+                {/each}
+            </div>
+        </div>
+
+        <!-- Design Canvas -->
+        <div 
+            class="canvas"
+            bind:this={canvasRef}
+            on:dragover={onDragOver}
+            on:drop={onDrop}
+        >
+            <div class="canvas-grid"></div>
+            {#each value.components as component (component.id)}
+                <div 
+                    class="canvas-component"
+                    class:selected={selectedComponent?.id === component.id}
+                    style="
+                        left: {component.position.x}px; 
+                        top: {component.position.y}px;
+                        width: {component.size.width}px;
+                        height: {component.size.height}px;
+                    "
+                    on:click={() => selectComponent(component)}
+                    on:mousedown={(e) => onComponentMouseDown(e, component)}
+                >
+                    <div class="component-preview">
+                        <div class="component-header">
+                            <span class="type">{component.type}</span>
+                            <button 
+                                class="delete-btn" 
+                                on:click|stopPropagation={() => deleteComponent(component.id)}
+                                type="button"
+                            >
+                                ❌
+                            </button>
+                        </div>
+                        <span class="label">{component.props.label || component.props.value || 'Component'}</span>
+                    </div>
+                </div>
+            {/each}
+        </div>
+
+        <!-- Properties Panel -->
+        <div class="properties">
+            <h4>Properties</h4>
+            {#if selectedComponent}
+                <div class="property-group">
+                    <div class="property-header">
+                        <strong>Type:</strong> {selectedComponent.type}
+                        <br>
+                        <small>ID: {selectedComponent.id}</small>
+                    </div>
+                    
+                    <!-- Component Properties -->
+                    {#if selectedComponent.props.label !== undefined}
+                        <label>Label:</label>
+                        <input 
+                            type="text" 
+                            placeholder="Label"
+                            value={selectedComponent.props.label}
+                            on:input={(e) => updateComponentProp('label', e.target.value)}
+                        />
+                    {/if}
+                    
+                    {#if selectedComponent.props.placeholder !== undefined}
+                        <label>Placeholder:</label>
+                        <input 
+                            type="text" 
+                            placeholder="Placeholder"
+                            value={selectedComponent.props.placeholder}
+                            on:input={(e) => updateComponentProp('placeholder', e.target.value)}
+                        />
+                    {/if}
+                    
+                    {#if selectedComponent.props.value !== undefined}
+                        <label>Value:</label>
+                        {#if typeof selectedComponent.props.value === 'boolean'}
+                            <input 
+                                type="checkbox" 
+                                checked={selectedComponent.props.value}
+                                on:change={(e) => updateComponentProp('value', e.target.checked)}
+                            />
+                        {:else if typeof selectedComponent.props.value === 'number'}
+                            <input 
+                                type="number" 
+                                value={selectedComponent.props.value}
+                                on:input={(e) => updateComponentProp('value', parseFloat(e.target.value) || 0)}
+                            />
+                        {:else}
+                            <input 
+                                type="text" 
+                                placeholder="Value"
+                                value={selectedComponent.props.value}
+                                on:input={(e) => updateComponentProp('value', e.target.value)}
+                            />
+                        {/if}
+                    {/if}
+                    
+                    {#if selectedComponent.props.choices !== undefined}
+                        <label>Choices (comma-separated):</label>
+                        <input 
+                            type="text" 
+                            placeholder="Option 1, Option 2, Option 3"
+                            value={Array.isArray(selectedComponent.props.choices) ? selectedComponent.props.choices.join(", ") : selectedComponent.props.choices}
+                            on:input={(e) => updateComponentProp('choices', e.target.value)}
+                        />
+                    {/if}
+                    
+                    {#if selectedComponent.props.minimum !== undefined}
+                        <label>Minimum:</label>
+                        <input 
+                            type="number" 
+                            value={selectedComponent.props.minimum}
+                            on:input={(e) => updateComponentProp('minimum', parseFloat(e.target.value) || 0)}
+                        />
+                    {/if}
+                    
+                    {#if selectedComponent.props.maximum !== undefined}
+                        <label>Maximum:</label>
+                        <input 
+                            type="number" 
+                            value={selectedComponent.props.maximum}
+                            on:input={(e) => updateComponentProp('maximum', parseFloat(e.target.value) || 100)}
+                        />
+                    {/if}
+                    
+                    {#if selectedComponent.props.step !== undefined}
+                        <label>Step:</label>
+                        <input 
+                            type="number" 
+                            value={selectedComponent.props.step}
+                            on:input={(e) => updateComponentProp('step', parseFloat(e.target.value) || 1)}
+                        />
+                    {/if}
+
+                    <!-- Size Controls -->
+                    <div class="size-section">
+                        <h5>Size & Position</h5>
+                        <div class="size-controls">
+                            <label>Width:</label>
+                            <input 
+                                type="number" 
+                                value={selectedComponent.size.width}
+                                on:input={(e) => updateComponentSize(selectedComponent, parseInt(e.target.value) || 200, selectedComponent.size.height)}
+                            />
+                            
+                            <label>Height:</label>
+                            <input 
+                                type="number" 
+                                value={selectedComponent.size.height}
+                                on:input={(e) => updateComponentSize(selectedComponent, selectedComponent.size.width, parseInt(e.target.value) || 100)}
+                            />
+                            
+                            <label>X Position:</label>
+                            <input 
+                                type="number" 
+                                value={selectedComponent.position.x}
+                                on:input={(e) => updateComponentPosition(selectedComponent, parseInt(e.target.value) || 0, selectedComponent.position.y)}
+                            />
+                            
+                            <label>Y Position:</label>
+                            <input 
+                                type="number" 
+                                value={selectedComponent.position.y}
+                                on:input={(e) => updateComponentPosition(selectedComponent, selectedComponent.position.x, parseInt(e.target.value) || 0)}
+                            />
+                        </div>
+                    </div>
+                </div>
+            {:else}
+                <p>Select a component to edit properties</p>
+                <div class="help-text">
+                    <strong>How to use:</strong>
+                    <ul>
+                        <li>Drag components from the palette to the canvas</li>
+                        <li>Click components to select and edit them</li>
+                        <li>Drag components around the canvas to reposition</li>
+                        <li>Use the properties panel to customize</li>
+                    </ul>
+                </div>
+            {/if}
+        </div>
+    </div>
+</div>
+
+<style>
+    .designer-container {
+        display: flex;
+        flex-direction: column;
+        height: 700px;
+        border: 1px solid #ddd;
+        border-radius: 8px;
+        overflow: hidden;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    }
+
+    .toolbar {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 12px 16px;
+        background: #f8f9fa;
+        border-bottom: 1px solid #ddd;
+    }
+
+    .toolbar-left {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+    }
+
+    .toolbar h3 {
+        margin: 0;
+        font-size: 16px;
+        font-weight: 600;
+    }
+
+    .component-count {
+        background: #e9ecef;
+        padding: 2px 8px;
+        border-radius: 12px;
+        font-size: 12px;
+        color: #495057;
+    }
+
+    .toolbar-right {
+        display: flex;
+        gap: 8px;
+    }
+
+    .export-btn {
+        padding: 6px 12px;
+        background: #007bff;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 12px;
+    }
+
+    .export-btn:hover {
+        background: #0056b3;
+    }
+
+    /* CRITICAL FIX: Force grid layout with !important to ensure initial render is correct */
+    .designer-content {
+        display: grid !important;
+        grid-template-columns: 250px 1fr 280px !important;
+        grid-template-areas: "palette canvas properties" !important;
+        flex: 1;
+        height: 100%;
+        min-height: 0; /* Force grid to work immediately */
+    }
+
+    /* CRITICAL FIX: Use grid-area with !important to lock positions */
+    .palette {
+        grid-area: palette !important;
+        background: #f8f9fa;
+        border-right: 1px solid #ddd;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+    }
+
+    .canvas {
+        grid-area: canvas !important;
+        position: relative;
+        background: white;
+        overflow: hidden;
+        user-select: none;
+    }
+
+    .properties {
+        grid-area: properties !important;
+        background: #f8f9fa;
+        padding: 16px;
+        border-left: 1px solid #ddd;
+        overflow-y: auto;
+    }
+
+    .palette-header {
+        padding: 12px 16px;
+        border-bottom: 1px solid #ddd;
+        background: white;
+        flex-shrink: 0;
+        min-height: 120px;
+        max-height: 120px;
+        overflow: hidden;
+    }
+
+    .palette h4 {
+        margin: 0 0 8px 0;
+        font-size: 14px;
+        font-weight: 600;
+    }
+
+    .search-input, .category-select {
+        width: 100%;
+        padding: 6px 8px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        font-size: 12px;
+        margin-bottom: 6px;
+        box-sizing: border-box;
+    }
+
+    .palette-content {
+        flex: 1;
+        overflow-y: auto;
+        padding: 8px;
+        min-height: 0;
+        background: #f8f9fa;
+    }
+
+    .palette-item {
+        display: flex;
+        align-items: center;
+        padding: 8px;
+        margin-bottom: 4px;
+        background: white;
+        border: 1px solid #e1e5e9;
+        border-radius: 4px;
+        cursor: grab;
+        user-select: none;
+    }
+
+    .palette-item:hover {
+        background: #f0f0f0;
+    }
+
+    .no-components {
+        padding: 20px;
+        text-align: center;
+        color: #666;
+        font-size: 12px;
+        background: white;
+        border-radius: 4px;
+        border: 1px solid #e1e5e9;
+    }
+
+    .icon {
+        margin-right: 8px;
+        font-size: 16px;
+    }
+
+    .label {
+        font-size: 12px;
+    }
+
+    .canvas-grid {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-image: 
+            linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px);
+        background-size: 20px 20px;
+        opacity: 0.3;
+    }
+
+    .canvas-component {
+        position: absolute;
+        border: 2px solid #ddd;
+        border-radius: 4px;
+        background: white;
+        cursor: move;
+        padding: 8px;
+        box-sizing: border-box;
+    }
+
+    .canvas-component:hover {
+        border-color: #007bff;
+    }
+
+    .canvas-component.selected {
+        border-color: #ff6b6b;
+        box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.3);
+    }
+
+    .component-preview {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        text-align: center;
+        pointer-events: none;
+    }
+
+    .component-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 4px;
+    }
+
+    .type {
+        font-weight: bold;
+        font-size: 12px;
+        color: #666;
+    }
+
+    .delete-btn {
+        background: none;
+        border: none;
+        cursor: pointer;
+        font-size: 10px;
+        padding: 2px;
+        opacity: 0.7;
+        pointer-events: auto;
+    }
+
+    .delete-btn:hover {
+        opacity: 1;
+    }
+
+    .properties h4 {
+        margin: 0 0 16px 0;
+        font-size: 14px;
+        font-weight: 600;
+    }
+
+    .property-group {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .property-header {
+        padding: 12px;
+        background: white;
+        border-radius: 4px;
+        border: 1px solid #e1e5e9;
+        margin-bottom: 12px;
+    }
+
+    .size-section {
+        margin-top: 16px;
+        padding-top: 16px;
+        border-top: 1px solid #ddd;
+    }
+
+    .size-section h5 {
+        margin: 0 0 8px 0;
+        font-size: 12px;
+        font-weight: 600;
+    }
+
+    .size-controls {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 8px;
+    }
+
+    .property-group label {
+        font-size: 12px;
+        font-weight: 500;
+        color: #333;
+    }
+
+    .property-group input, .property-group select {
+        padding: 6px 8px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        font-size: 12px;
+    }
+
+    .help-text {
+        margin-top: 20px;
+        padding: 12px;
+        background: white;
+        border-radius: 4px;
+        border: 1px solid #e1e5e9;
+    }
+
+    .help-text ul {
+        margin: 8px 0 0 0;
+        padding-left: 16px;
+    }
+
+    .help-text li {
+        font-size: 11px;
+        margin-bottom: 4px;
+    }
+</style>

src/frontend/gradio.config.js

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

src/frontend/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "gradio_gradiodesigner",
+  "version": "0.3.22",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "main_changeset": true,
+  "exports": {
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@gradio/atoms": "0.16.1",
+    "@gradio/icons": "0.12.0",
+    "@gradio/statustracker": "0.10.12",
+    "@gradio/utils": "0.10.2",
+    "svelte-moveable": "^0.45.0",
+    "html-to-image": "^1.9.0"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.13.1"
+  },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/simpletextbox"
+  }
+}

src/frontend/tsconfig.json

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

src/pyproject.toml

@@ -0,0 +1,51 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_gradiodesigner"
+version = "0.0.1"
+description = "gradio designer"
+readme = "README.md"
+license = "apache-2.0"
+requires-python = ">=3.10"
+authors = [{ name = "YOUR NAME", email = "YOUREMAIL@domain.com" }]
+keywords = ["gradio-custom-component", "gradio-template-SimpleTextbox", "designer", "drag and drop", "custom designs"]
+# Add dependencies here
+dependencies = ["gradio>=4.0,<6.0"]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  'Operating System :: OS Independent',
+  'Programming Language :: Python :: 3',
+  'Programming Language :: Python :: 3 :: Only',
+  'Programming Language :: Python :: 3.8',
+  'Programming Language :: Python :: 3.9',
+  'Programming Language :: Python :: 3.10',
+  'Programming Language :: Python :: 3.11',
+  'Topic :: Scientific/Engineering',
+  'Topic :: Scientific/Engineering :: Artificial Intelligence',
+  'Topic :: Scientific/Engineering :: Visualization',
+]
+
+# The repository and space URLs are optional, but recommended.
+# Adding a repository URL will create a badge in the auto-generated README that links to the repository.
+# Adding a space URL will create a badge in the auto-generated README that links to the space.
+# This will make it easy for people to find your deployed demo or source code when they
+# encounter your project in the wild.
+
+# [project.urls]
+# repository = "your github repository"
+# space = "your space url"
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_gradiodesigner/templates", "*.pyi"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_gradiodesigner"]