Delete src/frontend/Index.svelte

src/frontend/Index.svelte

@@ -1,2583 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
-	
-	export let value: { nodes: any[]; edges: any[] } = { nodes: [], edges: [] };
-	export let elem_id = "";
-	export let elem_classes: string[] = [];
-	export let visible = true;
-	export const container = true;
-	export const scale: number | null = null;
-	export let min_width: number | undefined = undefined;
-	export const gradio: any = {};
-
-	const dispatch = createEventDispatcher<{
-		change: { nodes: any[]; edges: any[] };
-		input: { nodes: any[]; edges: any[] };
-	}>();
-
-	// State management
-	let canvas: HTMLDivElement;
-	let canvasContainer: HTMLDivElement;
-	let isDragging = false;
-	let isDraggingFromSidebar = false;
-	let dragNode: any = null;
-	let dragOffset = { x: 0, y: 0 };
-	let isConnecting = false;
-	let connectionStart: any = null;
-	let mousePos = { x: 0, y: 0 };
-	let selectedNode: any = null;
-	let sidebarCollapsed = false;
-	let propertyPanelCollapsed = false;
-	
-	// Workflow metadata
-	let workflowName = "My Workflow";
-	let workflowId = "workflow-" + Date.now();
-	
-	// Zoom and pan state
-	let zoomLevel = 0.6;
-	let panOffset = { x: 0, y: 0 };
-	let isPanning = false;
-	let lastPanPoint = { x: 0, y: 0 };
-
-	// Define default workflow
-    const defaultWorkflow = {
-        workflowName = "My Workflow";
-        workflowId = "workflow-" + Date.now();
-        nodes: [],
-        edges: []
-    };
-    
-
-
-	// Initialize nodes and edges
-    let nodes = [];
-    let edges = [];
-// 	let nodes = value?.nodes?.length > 0 ? [...value.nodes] : defaultWorkflow.nodes;
-// 	let edges = value?.edges?.length > 0 ? [...value.edges] : defaultWorkflow.edges;
-
-	// Initialize workflow metadata
-	if (value?.workflow_name) {
-		workflowName = value.workflow_name;
-	}
-	if (value?.workflow_id) {
-		workflowId = value.workflow_id;
-	}
-
-
-    $: if (!value) {
-        value = { nodes: [], edges: [] };
-    }
-    
-	// Component categories with new node types
-	const componentCategories = {
-		'Input/Output': {
-			icon: '📥',
-			components: {
-				ChatInput: {
-					label: 'Chat Input',
-					icon: '💬',
-					color: '#4CAF50',
-					defaultData: { 
-						display_name: 'Chat Input',
-						template: {
-							input_value: {
-								display_name: 'User Message',
-								type: 'string',
-								value: '',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.1,
-							memory: '128Mi',
-							gpu: 'none'
-						}
-					}
-				},
-				ChatOutput: {
-					label: 'Chat Output',
-					icon: '💭',
-					color: '#F44336',
-					defaultData: { 
-						display_name: 'Chat Output',
-						template: {
-							response: {
-								display_name: 'AI Response',
-								type: 'string',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.1,
-							memory: '128Mi',
-							gpu: 'none'
-						}
-					}
-				},
-				Input: {
-					label: 'Input',
-					icon: '📥',
-					color: '#2196F3',
-					defaultData: { 
-						display_name: 'Source Data',
-						template: {
-							data_type: {
-								display_name: 'Data Type',
-								type: 'options',
-								options: ['string', 'image', 'video', 'audio', 'file'],
-								value: 'string'
-							},
-							value: {
-								display_name: 'Value or Path',
-								type: 'string',
-								value: 'This is the initial text.'
-							},
-							data: {
-								display_name: 'Output Data',
-								type: 'object',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.1,
-							memory: '128Mi',
-							gpu: 'none'
-						}
-					}
-				},
-				Output: {
-					label: 'Output',
-					icon: '📤',
-					color: '#FF9800',
-					defaultData: { 
-						display_name: 'Final Result',
-						template: {
-							input_data: {
-								display_name: 'Input Data',
-								type: 'object',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.1,
-							memory: '128Mi',
-							gpu: 'none'
-						}
-					}
-				}
-			}
-		},
-		'AI & Language': {
-			icon: '🤖',
-			components: {
-               llmNode: {                     // ① 새 노드
-                   label: 'AI Processing',
-                   icon: '🧠',
-                   color: '#2563eb',
-                   defaultData: {
-                       display_name: 'AI Processing',
-                       template: {
-                           provider:     { display_name: 'Provider', type: 'options',
-                                           options: ['VIDraft', 'OpenAI'], value: 'VIDraft' },
-                           model:        { display_name: 'Model', type: 'string',
-                                           value: 'Gemma-3-r1984-27B' },
-                           temperature:  { display_name: 'Temperature', type: 'number',
-                                           value: 0.7, min: 0, max: 2, step: 0.1 },
-                           system_prompt:{ display_name: 'System Prompt', type: 'string',
-                                           value: 'You are a helpful assistant.' },
-                           user_prompt:  { display_name: 'User Prompt', type: 'string',
-                                           value: '',  is_handle: true },      // ⬅ 입력 핸들
-                           response:     { display_name: 'Response',    type: 'string',
-                                           value: '',  is_handle: true }       // ⬅ 출력 핸들
-                       }
-                   }
-               },
-               textNode: {                   // ② 새 노드
-                   label: 'Markdown',
-                   icon: '📝',
-                   color: '#4b5563',
-                   defaultData: {
-                       display_name: 'Markdown',
-                       template: {
-                           text: { display_name: 'Markdown', type: 'string',
-                                   value: '### Write any markdown here', is_handle: true }
-                       }
-                   }
-               },
-
-
-            
-				OpenAIModel: {
-					label: 'OpenAI Model',
-					icon: '🎯',
-					color: '#9C27B0',
-					defaultData: { 
-						display_name: 'OpenAI Model',
-						template: {
-							model: { 
-								display_name: 'Model',
-								type: 'options', 
-								value: 'gpt-4', 
-								options: ['gpt-4o', 'gpt-4o-mini', 'gpt-3.5-turbo']
-							},
-							temperature: { 
-								display_name: 'Temperature',
-								type: 'number', 
-								value: 0.7, 
-								min: 0, 
-								max: 1 
-							},
-							max_tokens: { 
-								display_name: 'Max Tokens',
-								type: 'number', 
-								value: 2048, 
-								min: 1, 
-								max: 4096 
-							},
-							api_key: { 
-								display_name: 'API Key',
-								type: 'SecretStr', 
-								value: '', 
-								env_var: 'OPENAI_API_KEY' 
-							},
-							prompt: {
-								display_name: 'Prompt',
-								type: 'string',
-								is_handle: true
-							},
-							response: {
-								display_name: 'Response',
-								type: 'string',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.5,
-							memory: '512Mi',
-							gpu: 'none'
-						}
-					}
-				},
-				ChatModel: {
-					label: 'Chat Model',
-					icon: '💭',
-					color: '#673AB7',
-					defaultData: { 
-						display_name: 'Chat Model',
-						template: {
-							provider: {
-								display_name: 'Provider',
-								type: 'options',
-								options: ['OpenAI', 'Anthropic'],
-								value: 'OpenAI'
-							},
-							model: {
-								display_name: 'Model',
-								type: 'string',
-								value: 'gpt-4o-mini'
-							},
-							api_key: {
-								display_name: 'API Key',
-								type: 'SecretStr',
-								required: true,
-								env_var: 'OPENAI_API_KEY'
-							},
-							system_prompt: {
-								display_name: 'System Prompt',
-								type: 'string',
-								value: 'You are a helpful assistant.'
-							},
-							prompt: {
-								display_name: 'Prompt',
-								type: 'string',
-								is_handle: true
-							},
-							response: {
-								display_name: 'Response',
-								type: 'string',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.5,
-							memory: '512Mi',
-							gpu: 'none'
-						}
-					}
-				},
-				Prompt: {
-					label: 'Prompt',
-					icon: '📝',
-					color: '#3F51B5',
-					defaultData: { 
-						display_name: 'Prompt',
-						template: {
-							prompt_template: { 
-								display_name: 'Template',
-								type: 'string', 
-								value: '{{input}}',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.1,
-							memory: '128Mi',
-							gpu: 'none'
-						}
-					}
-				},
-				HFTextGeneration: {
-					label: 'HF Text Generation',
-					icon: '🤗',
-					color: '#E91E63',
-					defaultData: { 
-						display_name: 'HF Text Generation',
-						template: {
-							model: { 
-								display_name: 'Model',
-								type: 'string', 
-								value: 'gpt2' 
-							},
-							temperature: { 
-								display_name: 'Temperature',
-								type: 'number', 
-								value: 0.7, 
-								min: 0, 
-								max: 1 
-							},
-							max_tokens: { 
-								display_name: 'Max Tokens',
-								type: 'number', 
-								value: 2048, 
-								min: 1, 
-								max: 4096 
-							},
-							api_key: { 
-								display_name: 'API Key',
-								type: 'SecretStr', 
-								value: '', 
-								env_var: 'HF_API_KEY' 
-							},
-							prompt: {
-								display_name: 'Prompt',
-								type: 'string',
-								is_handle: true
-							},
-							response: {
-								display_name: 'Response',
-								type: 'string',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.3,
-							memory: '256Mi',
-							gpu: 'none'
-						}
-					}
-				},
-				ReActAgent: {
-					label: 'ReAct Agent',
-					icon: '🤖',
-					color: '#9C27B0',
-					defaultData: { 
-						display_name: 'LlamaIndex ReAct Agent',
-						template: {
-							tools_input: {
-								display_name: 'Available Tools',
-								type: 'list',
-								is_handle: true,
-								info: 'Connect WebSearch, ExecutePython, APIRequest, and other tool nodes'
-							},
-							llm_model: {
-								display_name: 'LLM Model',
-								type: 'options',
-								options: ['gpt-4o', 'gpt-4o-mini', 'gpt-3.5-turbo', 'gpt-4', 'gpt-3.5-turbo-16k'],
-								value: 'gpt-4o-mini'
-							},
-							api_key: {
-								display_name: 'OpenAI API Key',
-								type: 'SecretStr',
-								required: true,
-								env_var: 'OPENAI_API_KEY'
-							},
-							system_prompt: {
-								display_name: 'System Prompt',
-								type: 'string',
-								value: 'You are a helpful AI assistant with access to various tools. Use the available tools to answer user questions accurately and efficiently.',
-								multiline: true
-							},
-							user_query: {
-								display_name: 'User Query',
-								type: 'string',
-								is_handle: true
-							},
-							max_iterations: {
-								display_name: 'Max Iterations',
-								type: 'number',
-								value: 8
-							},
-							temperature: {
-								display_name: 'Temperature',
-								type: 'number',
-								value: 0.1,
-								min: 0,
-								max: 2,
-								step: 0.1
-							},
-							verbose: {
-								display_name: 'Verbose Output',
-								type: 'boolean',
-								value: true
-							},
-							agent_response: {
-								display_name: 'Agent Response',
-								type: 'string',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.5,
-							memory: '512Mi',
-							gpu: 'none'
-						}
-					}
-				}
-			}
-		},
-		'API & Web': {
-			icon: '🌐',
-			components: {
-				APIRequest: {
-					label: 'API Request',
-					icon: '🔌',
-					color: '#00BCD4',
-					defaultData: { 
-						display_name: 'API Request',
-						template: {
-							url: { 
-								display_name: 'URL',
-								type: 'string', 
-								value: '' 
-							},
-							method: { 
-								display_name: 'Method',
-								type: 'options', 
-								value: 'GET', 
-								options: ['GET', 'POST', 'PUT', 'DELETE'] 
-							},
-							headers: { 
-								display_name: 'Headers',
-								type: 'dict', 
-								value: {} 
-							},
-							body: { 
-								display_name: 'Body',
-								type: 'string', 
-								value: '' 
-							},
-							response: {
-								display_name: 'Response',
-								type: 'object',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.2,
-							memory: '256Mi',
-							gpu: 'none'
-						}
-					}
-				},
-				WebSearch: {
-					label: 'Web Search',
-					icon: '🔍',
-					color: '#009688',
-					defaultData: { 
-						display_name: 'Web Search',
-						template: {
-							query: { 
-								display_name: 'Query',
-								type: 'string', 
-								value: '',
-								is_handle: true
-							},
-							num_results: { 
-								display_name: 'Number of Results',
-								type: 'number', 
-								value: 5, 
-								min: 1, 
-								max: 10 
-							},
-							api_key: { 
-								display_name: 'API Key',
-								type: 'SecretStr', 
-								value: '', 
-								env_var: 'SERPAPI_KEY' 
-							},
-							results: {
-								display_name: 'Search Results',
-								type: 'list',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.2,
-							memory: '256Mi',
-							gpu: 'none'
-						}
-					}
-				}
-			}
-		},
-		'Data Processing': {
-			icon: '⚙️',
-			components: {
-				ExecutePython: {
-					label: 'Execute Python',
-					icon: '🐍',
-					color: '#FF5722',
-					defaultData: { 
-						display_name: 'Execute Python',
-						template: {
-							code: { 
-								display_name: 'Python Code',
-								type: 'string', 
-								value: 'def process(input_data):\n    return input_data' 
-							},
-							timeout: { 
-								display_name: 'Timeout',
-								type: 'number', 
-								value: 30, 
-								min: 1, 
-								max: 300 
-							},
-							input_data: {
-								display_name: 'Input Data',
-								type: 'object',
-								is_handle: true
-							},
-							output_data: {
-								display_name: 'Output Data',
-								type: 'object',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.3,
-							memory: '256Mi',
-							gpu: 'none'
-						}
-					}
-				},
-				ConditionalLogic: {
-					label: 'Conditional Logic',
-					icon: '🔀',
-					color: '#795548',
-					defaultData: { 
-						display_name: 'Conditional Logic',
-						template: {
-							condition: { 
-								display_name: 'Condition',
-								type: 'string', 
-								value: '{{input}} == True' 
-							},
-							input: {
-								display_name: 'Input',
-								type: 'object',
-								is_handle: true
-							},
-							true_output: {
-								display_name: 'True Output',
-								type: 'object',
-								is_handle: true
-							},
-							false_output: {
-								display_name: 'False Output',
-								type: 'object',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.1,
-							memory: '128Mi',
-							gpu: 'none'
-						}
-					}
-				},
-				Wait: {
-					label: 'Wait',
-					icon: '⏳',
-					color: '#607D8B',
-					defaultData: { 
-						display_name: 'Wait',
-						template: {
-							seconds: { 
-								display_name: 'Seconds',
-								type: 'number', 
-								value: 1, 
-								min: 1, 
-								max: 3600 
-							},
-							input: {
-								display_name: 'Input',
-								type: 'object',
-								is_handle: true
-							},
-							output: {
-								display_name: 'Output',
-								type: 'object',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.1,
-							memory: '128Mi',
-							gpu: 'none'
-						}
-					}
-				}
-			}
-		},
-		'RAG & Knowledge': {
-			icon: '📚',
-			components: {
-				KnowledgeBase: {
-					label: 'Knowledge Base',
-					icon: '📖',
-					color: '#8BC34A',
-					defaultData: { 
-						display_name: 'Knowledge Base',
-						template: {
-							kb_name: {
-								display_name: 'Knowledge Base Name',
-								type: 'string',
-								value: ''
-							},
-							source_type: {
-								display_name: 'Source Type',
-								type: 'options',
-								options: ['Directory', 'URL'],
-								value: 'Directory'
-							},
-							path_or_url: {
-								display_name: 'Path or URL',
-								type: 'string',
-								value: ''
-							},
-							knowledge_base: {
-								display_name: 'Knowledge Base',
-								type: 'object',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.2,
-							memory: '512Mi',
-							gpu: 'none'
-						}
-					}
-				},
-				RAGQuery: {
-					label: 'RAG Query',
-					icon: '🔎',
-					color: '#FFC107',
-					defaultData: { 
-						display_name: 'RAG Query',
-						template: {
-							query: {
-								display_name: 'Query',
-								type: 'string',
-								is_handle: true
-							},
-							knowledge_base: {
-								display_name: 'Knowledge Base',
-								type: 'object',
-								is_handle: true
-							},
-							num_results: { 
-								display_name: 'Number of Results',
-								type: 'number', 
-								value: 3, 
-								min: 1, 
-								max: 10 
-							},
-							rag_prompt: {
-								display_name: 'RAG Prompt',
-								type: 'string',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.3,
-							memory: '512Mi',
-							gpu: 'none'
-						}
-					}
-				}
-			}
-		},
-		'Speech & Vision': {
-			icon: '👁️',
-			components: {
-				HFSpeechToText: {
-					label: 'HF Speech to Text',
-					icon: '🎤',
-					color: '#9E9E9E',
-					defaultData: { 
-						display_name: 'HF Speech to Text',
-						template: {
-							model: { 
-								display_name: 'Model',
-								type: 'string', 
-								value: 'facebook/wav2vec2-base-960h' 
-							},
-							api_key: { 
-								display_name: 'API Key',
-								type: 'SecretStr', 
-								value: '', 
-								env_var: 'HF_API_KEY' 
-							},
-							audio_input: {
-								display_name: 'Audio Input',
-								type: 'file',
-								is_handle: true
-							},
-							text_output: {
-								display_name: 'Text Output',
-								type: 'string',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.4,
-							memory: '512Mi',
-							gpu: 'optional'
-						}
-					}
-				},
-				HFTextToSpeech: {
-					label: 'HF Text to Speech',
-					icon: '🔊',
-					color: '#CDDC39',
-					defaultData: { 
-						display_name: 'HF Text to Speech',
-						template: {
-							model: { 
-								display_name: 'Model',
-								type: 'string', 
-								value: 'facebook/fastspeech2-en-ljspeech' 
-							},
-							api_key: { 
-								display_name: 'API Key',
-								type: 'SecretStr', 
-								value: '', 
-								env_var: 'HF_API_KEY' 
-							},
-							text_input: {
-								display_name: 'Text Input',
-								type: 'string',
-								is_handle: true
-							},
-							audio_output: {
-								display_name: 'Audio Output',
-								type: 'file',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.4,
-							memory: '512Mi',
-							gpu: 'optional'
-						}
-					}
-				},
-				HFSVisionModel: {
-					label: 'HF Vision Model',
-					icon: '👁️',
-					color: '#FF9800',
-					defaultData: { 
-						display_name: 'HF Vision Model',
-						template: {
-							model: { 
-								display_name: 'Model',
-								type: 'string', 
-								value: 'google/vit-base-patch16-224' 
-							},
-							api_key: { 
-								display_name: 'API Key',
-								type: 'SecretStr', 
-								value: '', 
-								env_var: 'HF_API_KEY' 
-							},
-							image_input: {
-								display_name: 'Image Input',
-								type: 'file',
-								is_handle: true
-							},
-							prediction: {
-								display_name: 'Prediction',
-								type: 'object',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.4,
-							memory: '512Mi',
-							gpu: 'required'
-						}
-					}
-				}
-			}
-		},
-		'Image Generation': {
-			icon: '🎨',
-			components: {
-				HFImageGeneration: {
-					label: 'HF Image Generation',
-					icon: '🎨',
-					color: '#E91E63',
-					defaultData: { 
-						display_name: 'HF Image Generation',
-						template: {
-							model: { 
-								display_name: 'Model',
-								type: 'string', 
-								value: 'stabilityai/stable-diffusion-2' 
-							},
-							prompt: { 
-								display_name: 'Prompt',
-								type: 'string', 
-								value: '',
-								is_handle: true
-							},
-							num_images: { 
-								display_name: 'Number of Images',
-								type: 'number', 
-								value: 1, 
-								min: 1, 
-								max: 4 
-							},
-							api_key: { 
-								display_name: 'API Key',
-								type: 'SecretStr', 
-								value: '', 
-								env_var: 'HF_API_KEY' 
-							},
-							images: {
-								display_name: 'Generated Images',
-								type: 'list',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.5,
-							memory: '1Gi',
-							gpu: 'required'
-						}
-					}
-				},
-				NebiusImage: {
-					label: 'Nebius Image',
-					icon: '🖼️',
-					color: '#2196F3',
-					defaultData: { 
-						display_name: 'Nebius Image',
-						template: {
-							model: {
-								display_name: 'Model',
-								type: 'options',
-								options: ['black-forest-labs/flux-dev', 'black-forest-labs/flux-schnell', 'stability-ai/sdxl'],
-								value: 'black-forest-labs/flux-dev'
-							},
-							prompt: { 
-								display_name: 'Prompt',
-								type: 'string', 
-								value: '',
-								is_handle: true
-							},
-							negative_prompt: {
-								display_name: 'Negative Prompt',
-								type: 'string',
-								value: ''
-							},
-							width: {
-								display_name: 'Width',
-								type: 'number',
-								value: 1024
-							},
-							height: {
-								display_name: 'Height',
-								type: 'number',
-								value: 1024
-							},
-							num_inference_steps: {
-								display_name: 'Inference Steps',
-								type: 'number',
-								value: 28
-							},
-							seed: {
-								display_name: 'Seed',
-								type: 'number',
-								value: -1
-							},
-							api_key: { 
-								display_name: 'API Key',
-								type: 'SecretStr', 
-								value: '', 
-								env_var: 'NEBIUS_API_KEY' 
-							},
-							image: {
-								display_name: 'Generated Image',
-								type: 'file',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.5,
-							memory: '1Gi',
-							gpu: 'required'
-						}
-					}
-				}
-			}
-		},
-		'MCP Integration': {
-			icon: '🤝',
-			components: {
-				MCPConnection: {
-					label: 'MCP Connection',
-					icon: '🔌',
-					color: '#673AB7',
-					defaultData: { 
-						display_name: 'MCP Connection',
-						template: {
-							server_url: {
-								display_name: 'Server URL',
-								type: 'string',
-								value: ''
-							},
-							connection_type: {
-								display_name: 'Connection Type',
-								type: 'options',
-								options: ['http', 'stdio'],
-								value: 'http'
-							},
-							allowed_tools: {
-								display_name: 'Allowed Tools',
-								type: 'string',
-								value: ''
-							},
-							api_key: { 
-								display_name: 'API Key',
-								type: 'SecretStr', 
-								value: '', 
-								env_var: 'MCP_API_KEY' 
-							},
-							connection: {
-								display_name: 'MCP Connection',
-								type: 'object',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.2,
-							memory: '256Mi',
-							gpu: 'none'
-						}
-					}
-				},
-				MCPAgent: {
-					label: 'MCP Agent',
-					icon: '🤖',
-					color: '#3F51B5',
-					defaultData: { 
-						display_name: 'MCP Agent',
-						template: {
-							llm_model: {
-								display_name: 'LLM Model',
-								type: 'options',
-								options: ['gpt-4o', 'gpt-4o-mini', 'gpt-3.5-turbo', 'gpt-4', 'gpt-3.5-turbo-16k'],
-								value: 'gpt-4o'
-							},
-							api_key: {
-								display_name: 'OpenAI API Key',
-								type: 'SecretStr',
-								required: true,
-								env_var: 'OPENAI_API_KEY'
-							},
-							system_prompt: {
-								display_name: 'System Prompt',
-								type: 'string',
-								value: 'You are a helpful AI assistant.',
-								multiline: true
-							},
-							max_iterations: {
-								display_name: 'Max Iterations',
-								type: 'number',
-								value: 10,
-								min: 1,
-								max: 20
-							},
-							temperature: {
-								display_name: 'Temperature',
-								type: 'number',
-								value: 0.1,
-								min: 0,
-								max: 2,
-								step: 0.1
-							},
-							verbose: {
-								display_name: 'Verbose Output',
-								type: 'boolean',
-								value: false
-							},
-							user_query: {
-								display_name: 'User Query',
-								type: 'string',
-								is_handle: true
-							},
-							mcp_connection: {
-								display_name: 'MCP Connection',
-								type: 'object',
-								is_handle: true
-							},
-							agent_response: {
-								display_name: 'Agent Response',
-								type: 'string',
-								is_handle: true
-							}
-						},
-						resources: {
-							cpu: 0.5,
-							memory: '512Mi',
-							gpu: 'none'
-						}
-					}
-				}
-			}
-		}
-	};
-
-	// Property fields for each node type
-	const propertyFields = {
-
-        llmNode: [                       // ③ AI Processing 속성 폼
-            { key: 'display_name',            label: 'Display Name',   type: 'text' },
-            { key: 'template.provider.value', label: 'Provider',       type: 'select',
-              options: ['VIDraft', 'OpenAI'] },
-            { key: 'template.model.value',    label: 'Model',          type: 'text' },
-            { key: 'template.temperature.value', label: 'Temperature', type: 'number',
-              min: 0, max: 2, step: 0.1 },
-            { key: 'template.system_prompt.value', label: 'System Prompt',
-              type: 'textarea' }
-        ],
-
-        textNode: [                      // ④ Markdown 노드 속성 폼
-            { key: 'display_name', label: 'Display Name', type: 'text' },
-            { key: 'template.text.value', label: 'Markdown Text', type: 'textarea' }
-        ],
-
-
-
-    
-		// Input/Output nodes
-		ChatInput: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' },
-			{ key: 'template.input_value.display_name', label: 'Input Field Label', type: 'text', help: 'Label shown in the chat input field' },
-			{ key: 'template.input_value.value', label: 'Default Message', type: 'textarea', help: 'Default message shown in the input field' }
-		],
-		ChatOutput: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' },
-			{ key: 'template.response.display_name', label: 'Response Field Label', type: 'text', help: 'Label shown in the chat output field' }
-		],
-		Input: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' },
-			{ key: 'template.data_type.value', label: 'Data Type', type: 'select', options: ['string', 'image', 'video', 'audio', 'file'], help: 'Type of data this node will handle' },
-			{ key: 'template.value.value', label: 'Default Value', type: 'textarea', help: 'Default value or path' }
-		],
-		Output: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' }
-		],
-
-		// AI & Language nodes
-		OpenAIModel: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' },
-			{ key: 'template.model.value', label: 'Model', type: 'select', options: ['gpt-4o', 'gpt-4o-mini', 'gpt-3.5-turbo'] },
-			{ key: 'template.temperature.value', label: 'Temperature', type: 'number', min: 0, max: 1, step: 0.1 },
-			{ key: 'template.max_tokens.value', label: 'Max Tokens', type: 'number', min: 1, max: 4096 }
-		],
-		ChatModel: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' },
-			{ key: 'template.provider.value', label: 'Provider', type: 'select', options: ['OpenAI', 'Anthropic'], help: 'AI model provider' },
-			{ key: 'template.model.value', label: 'Model', type: 'text', help: 'Model name' },
-			{ key: 'template.system_prompt.value', label: 'System Prompt', type: 'textarea', help: 'Optional system prompt' }
-		],
-		Prompt: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' },
-			{ key: 'template.prompt_template.value', label: 'Prompt Template', type: 'textarea', help: 'Prompt template' }
-		],
-		HFTextGeneration: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' },
-			{ key: 'template.model.value', label: 'Model', type: 'text', help: 'Model name' },
-			{ key: 'template.temperature.value', label: 'Temperature', type: 'number', min: 0, max: 1, step: 0.1, help: 'Model temperature' },
-			{ key: 'template.max_tokens.value', label: 'Max Tokens', type: 'number', min: 1, max: 4096, help: 'Maximum tokens' }
-		],
-		ReActAgent: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' },
-			{ key: 'template.llm_model.value', label: 'LLM Model', type: 'select', options: ['gpt-4o', 'gpt-4o-mini', 'gpt-3.5-turbo', 'gpt-4', 'gpt-3.5-turbo-16k'], help: 'Model to use for the agent' },
-			{ key: 'template.system_prompt.value', label: 'System Prompt', type: 'textarea', help: 'System prompt for the agent', multiline: true },
-			{ key: 'template.max_iterations.value', label: 'Max Iterations', type: 'number', min: 1, max: 20, help: 'Maximum number of agent iterations' },
-			{ key: 'template.temperature.value', label: 'Temperature', type: 'number', min: 0, max: 2, step: 0.1, help: 'Model temperature (0-2)' },
-			{ key: 'template.verbose.value', label: 'Verbose Output', type: 'checkbox', help: 'Show detailed agent reasoning' }
-		],
-
-		// API & Web nodes
-		APIRequest: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' },
-			{ key: 'template.url.value', label: 'URL', type: 'text', help: 'API endpoint URL' },
-			{ key: 'template.method.value', label: 'Method', type: 'select', options: ['GET', 'POST', 'PUT', 'DELETE'], help: 'HTTP method' }
-		],
-		WebSearch: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' },
-			{ key: 'template.num_results.value', label: 'Number of Results', type: 'number', help: 'Number of search results' }
-		],
-
-		// Data Processing nodes
-		ExecutePython: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' },
-			{ key: 'template.code.value', label: 'Python Code', type: 'textarea', help: 'Python code to execute' },
-			{ key: 'template.timeout.value', label: 'Timeout', type: 'number', help: 'Execution timeout' }
-		],
-		ConditionalLogic: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' },
-			{ key: 'template.condition.value', label: 'Condition', type: 'text', help: 'Condition expression' }
-		],
-		Wait: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' },
-			{ key: 'template.seconds.value', label: 'Seconds', type: 'number', help: 'Wait time in seconds' }
-		],
-
-		// RAG nodes
-		KnowledgeBase: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' },
-			{ key: 'template.kb_name.value', label: 'Knowledge Base Name', type: 'text', help: 'Name for the knowledge base' },
-			{ key: 'template.source_type.value', label: 'Source Type', type: 'select', options: ['Directory', 'URL'], help: 'Type of source' },
-			{ key: 'template.path_or_url.value', label: 'Path or URL', type: 'text', help: 'Source location' }
-		],
-		RAGQuery: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' },
-			{ key: 'template.num_results.value', label: 'Number of Results', type: 'number', help: 'Number of results to retrieve' }
-		],
-
-		// Speech & Vision nodes
-		HFSpeechToText: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' },
-			{ key: 'template.model.value', label: 'Model', type: 'text', help: 'HuggingFace model ID' }
-		],
-		HFTextToSpeech: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' },
-			{ key: 'template.model.value', label: 'Model', type: 'text', help: 'HuggingFace model ID' }
-		],
-		HFSVisionModel: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' },
-			{ key: 'template.model.value', label: 'Model', type: 'text', help: 'HuggingFace model ID' }
-		],
-
-		// Image Generation nodes
-		HFImageGeneration: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' },
-			{ key: 'template.model.value', label: 'Model', type: 'text', help: 'HuggingFace model ID' },
-			{ key: 'template.num_images.value', label: 'Number of Images', type: 'number', help: 'Number of images to generate' }
-		],
-		NebiusImage: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' },
-			{ key: 'template.model.value', label: 'Model', type: 'select', options: ['black-forest-labs/flux-dev', 'black-forest-labs/flux-schnell', 'stability-ai/sdxl'], help: 'Nebius model to use' },
-			{ key: 'template.width.value', label: 'Width', type: 'number', help: 'Image width' },
-			{ key: 'template.height.value', label: 'Height', type: 'number', help: 'Image height' },
-			{ key: 'template.num_inference_steps.value', label: 'Inference Steps', type: 'number', help: 'Number of inference steps' },
-			{ key: 'template.seed.value', label: 'Seed', type: 'number', help: 'Random seed (-1 for random)' }
-		],
-
-		// MCP nodes
-		MCPConnection: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' },
-			{ key: 'template.server_url.value', label: 'Server URL', type: 'text', help: 'MCP server URL' },
-			{ key: 'template.connection_type.value', label: 'Connection Type', type: 'select', options: ['http', 'stdio'], help: 'Connection type' },
-			{ key: 'template.allowed_tools.value', label: 'Allowed Tools', type: 'text', help: 'Optional list of allowed tools' }
-		],
-		MCPAgent: [
-			{ key: 'display_name', label: 'Display Name', type: 'text', help: 'Name shown in the workflow' },
-			{ key: 'template.llm_model.value', label: 'LLM Model', type: 'select', options: ['gpt-4o', 'gpt-4o-mini', 'gpt-3.5-turbo', 'gpt-4', 'gpt-3.5-turbo-16k'], help: 'Model to use for the agent' },
-			{ key: 'template.system_prompt.value', label: 'System Prompt', type: 'textarea', help: 'System prompt for the agent', multiline: true },
-			{ key: 'template.max_iterations.value', label: 'Max Iterations', type: 'number', min: 1, max: 20, help: 'Maximum number of agent iterations' },
-			{ key: 'template.temperature.value', label: 'Temperature', type: 'number', min: 0, max: 2, step: 0.1, help: 'Model temperature (0-2)' },
-			{ key: 'template.verbose.value', label: 'Verbose Output', type: 'checkbox', help: 'Show detailed agent reasoning' }
-		]
-	};
-
-	// Update parent component when data changes
-	$: {
-		const newValue = { nodes, edges };
-		if (JSON.stringify(newValue) !== JSON.stringify(value)) {
-			value = newValue;
-			dispatch('change', newValue);
-		}
-	}
-
-	// Export workflow to JSON
-
-	// Clear workflow function
-function clearWorkflow() {
-    nodes = [];
-    edges = [];
-    selectedNode = null;
-    workflowName = "My Workflow";
-    workflowId = "workflow-" + Date.now();
-}
-
-
-	function exportWorkflow() {
-		const exportData = {
-			workflow_id: workflowId,
-			workflow_name: workflowName,
-			nodes: nodes.map(node => ({
-				id: node.id,
-				type: node.type,
-				data: {
-					display_name: node.data.display_name,
-					template: node.data.template,
-					resources: node.data.resources || {
-						cpu: 0.1,
-						memory: "128Mi",
-						gpu: "none"
-					}
-				}
-			})),
-			edges: edges.map(edge => ({
-				source: edge.source,
-				source_handle: edge.source_handle || 'output',
-				target: edge.target,
-				target_handle: edge.target_handle || 'input'
-			}))
-		};
-
-		const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
-		const url = URL.createObjectURL(blob);
-		const a = document.createElement('a');
-		a.href = url;
-		a.download = `${workflowName.replace(/\s+/g, '-').toLowerCase()}.json`;
-		document.body.appendChild(a);
-		a.click();
-		document.body.removeChild(a);
-		URL.revokeObjectURL(url);
-	}
-
-	// Zoom functions
-	function zoomIn() {
-		zoomLevel = Math.min(zoomLevel * 1.2, 3);
-	}
-
-	function zoomOut() {
-		zoomLevel = Math.max(zoomLevel / 1.2, 0.3);
-	}
-
-	function resetZoom() {
-		zoomLevel = 1;
-		panOffset = { x: 0, y: 0 };
-	}
-
-	function handleWheel(event: WheelEvent) {
-		event.preventDefault();
-		if (event.ctrlKey || event.metaKey) {
-			const delta = event.deltaY > 0 ? 0.9 : 1.1;
-			zoomLevel = Math.max(0.3, Math.min(3, zoomLevel * delta));
-		} else {
-			panOffset.x -= event.deltaX * 0.5;
-			panOffset.y -= event.deltaY * 0.5;
-			panOffset = { ...panOffset };
-		}
-	}
-
-	// Pan functions
-	function startPanning(event: MouseEvent) {
-		if (event.button === 1 || (event.button === 0 && event.altKey)) {
-			isPanning = true;
-			lastPanPoint = { x: event.clientX, y: event.clientY };
-			event.preventDefault();
-		}
-	}
-
-	function handlePanning(event: MouseEvent) {
-		if (isPanning) {
-			const deltaX = event.clientX - lastPanPoint.x;
-			const deltaY = event.clientY - lastPanPoint.y;
-			panOffset.x += deltaX;
-			panOffset.y += deltaY;
-			panOffset = { ...panOffset };
-			lastPanPoint = { x: event.clientX, y: event.clientY };
-		}
-	}
-
-	function stopPanning() {
-		isPanning = false;
-	}
-
-	// Drag and drop from sidebar
-	function handleSidebarDragStart(event: DragEvent, componentType: string, componentData: any) {
-		if (event.dataTransfer) {
-			event.dataTransfer.setData('application/json', JSON.stringify({
-				type: componentType,
-				data: componentData
-			}));
-			isDraggingFromSidebar = true;
-		}
-	}
-
-	function handleCanvasDropFromSidebar(event: DragEvent) {
-		event.preventDefault();
-		if (!isDraggingFromSidebar) return;
-		
-		const rect = canvas.getBoundingClientRect();
-		const x = (event.clientX - rect.left - panOffset.x) / zoomLevel;
-		const y = (event.clientY - rect.top - panOffset.y) / zoomLevel;
-		
-		try {
-			const dropData = JSON.parse(event.dataTransfer?.getData('application/json') || '{}');
-			if (dropData.type && dropData.data) {
-				const newNode = {
-					id: `${dropData.type}-${Date.now()}`,
-					type: dropData.type,
-					position: { x: Math.max(20, x - 160), y: Math.max(20, y - 80) },
-					data: { ...dropData.data.defaultData, label: dropData.data.label }
-				};
-				nodes = [...nodes, newNode];
-			}
-		} catch (error) {
-			console.error('Failed to parse drop data:', error);
-		}
-		
-		isDraggingFromSidebar = false;
-	}
-
-	function handleCanvasDragOver(event: DragEvent) {
-		event.preventDefault();
-	}
-
-	// Node interaction handlers with proper event handling
-	function handleMouseDown(event: MouseEvent, node: any) {
-		// Only start dragging if clicking on the node header or empty areas
-		if (event.target.closest('.node-property') || 
-			event.target.closest('.property-input') || 
-			event.target.closest('.property-select') ||
-			event.target.closest('.property-checkbox')) {
-			return; // Don't start dragging if clicking on form controls
-		}
-		
-		if (event.button !== 0) return;
-		
-		isDragging = true;
-		dragNode = node;
-		const rect = canvas.getBoundingClientRect();
-		const nodeScreenX = node.position.x * zoomLevel + panOffset.x;
-		const nodeScreenY = node.position.y * zoomLevel + panOffset.y;
-		dragOffset.x = event.clientX - rect.left - nodeScreenX;
-		dragOffset.y = event.clientY - rect.top - nodeScreenY;
-		
-		event.preventDefault();
-		event.stopPropagation();
-	}
-
-	function handleNodeClick(event: MouseEvent, node: any) {
-		event.stopPropagation();
-		selectedNode = { ...node };
-	}
-
-	function handleMouseMove(event: MouseEvent) {
-		const rect = canvas.getBoundingClientRect();
-		mousePos.x = (event.clientX - rect.left - panOffset.x) / zoomLevel;
-		mousePos.y = (event.clientY - rect.top - panOffset.y) / zoomLevel;
-
-		if (isDragging && dragNode) {
-			const nodeIndex = nodes.findIndex(n => n.id === dragNode.id);
-			if (nodeIndex >= 0) {
-				const newX = Math.max(0, (event.clientX - rect.left - dragOffset.x - panOffset.x) / zoomLevel);
-				const newY = Math.max(0, (event.clientY - rect.top - dragOffset.y - panOffset.y) / zoomLevel);
-				nodes[nodeIndex].position.x = newX;
-				nodes[nodeIndex].position.y = newY;
-				nodes = [...nodes];
-				
-				if (selectedNode?.id === dragNode.id) {
-					selectedNode = { ...nodes[nodeIndex] };
-				}
-			}
-		}
-
-		handlePanning(event);
-	}
-
-	function handleMouseUp() {
-		isDragging = false;
-		dragNode = null;
-		isConnecting = false;
-		connectionStart = null;
-		stopPanning();
-	}
-
-	// Connection handling
-	function startConnection(event: MouseEvent, nodeId: string) {
-		event.stopPropagation();
-		isConnecting = true;
-		connectionStart = nodeId;
-	}
-
-	function endConnection(event: MouseEvent, nodeId: string) {
-		event.stopPropagation();
-		if (isConnecting && connectionStart && connectionStart !== nodeId) {
-			const existingEdge = edges.find(e => 
-				(e.source === connectionStart && e.target === nodeId) ||
-				(e.source === nodeId && e.target === connectionStart)
-			);
-			
-			if (!existingEdge) {
-				const newEdge = {
-					id: `e-${connectionStart}-${nodeId}-${Date.now()}`,
-					source: connectionStart,
-					target: nodeId
-				};
-				edges = [...edges, newEdge];
-			}
-		}
-		isConnecting = false;
-		connectionStart = null;
-	}
-
-	// Node and edge management
-	function deleteNode(nodeId: string) {
-		nodes = nodes.filter(n => n.id !== nodeId);
-		edges = edges.filter(e => e.source !== nodeId && e.target !== nodeId);
-		if (selectedNode?.id === nodeId) {
-			selectedNode = null;
-		}
-	}
-
-	function deleteEdge(edgeId: string) {
-		edges = edges.filter(e => e.id !== edgeId);
-	}
-
-	// Property updates with proper reactivity
-	function updateNodeProperty(nodeId: string, key: string, value: any) {
-		const nodeIndex = nodes.findIndex(n => n.id === nodeId);
-		if (nodeIndex >= 0) {
-			// Handle nested property paths
-			const keyParts = key.split('.');
-			let target = nodes[nodeIndex].data;
-			
-			for (let i = 0; i < keyParts.length - 1; i++) {
-				if (!target[keyParts[i]]) {
-					target[keyParts[i]] = {};
-				}
-				target = target[keyParts[i]];
-			}
-			
-			target[keyParts[keyParts.length - 1]] = value;
-			nodes = [...nodes]; // Trigger reactivity
-			
-			if (selectedNode?.id === nodeId) {
-				selectedNode = { ...nodes[nodeIndex] };
-			}
-		}
-	}
-
-	function getNodeProperty(node: any, key: string) {
-		const keyParts = key.split('.');
-		let value = node.data;
-		
-		for (const part of keyParts) {
-			value = value?.[part];
-		}
-		
-		return value;
-	}
-
-	// Panel toggle functions
-	function toggleSidebar() {
-		sidebarCollapsed = !sidebarCollapsed;
-	}
-
-	function togglePropertyPanel() {
-		propertyPanelCollapsed = !propertyPanelCollapsed;
-	}
-
-	// Helper functions
-	function getComponentConfig(type: string) {
-		for (const category of Object.values(componentCategories)) {
-			if (category.components[type]) {
-				return category.components[type];
-			}
-		}
-		return { label: type, icon: '⚡', color: '#6b7280' };
-	}
-
-	function getConnectionPoints(sourceNode: any, targetNode: any) {
-		const sourceX = sourceNode.position.x + 320;
-		const sourceY = sourceNode.position.y + 80;
-		const targetX = targetNode.position.x;
-		const targetY = targetNode.position.y + 80;
-		
-		return { sourceX, sourceY, targetX, targetY };
-	}
-
-	// Canvas setup
-	onMount(() => {
-		document.addEventListener('mousemove', handleMouseMove);
-		document.addEventListener('mouseup', handleMouseUp);
-		
-		return () => {
-			document.removeEventListener('mousemove', handleMouseMove);
-			document.removeEventListener('mouseup', handleMouseUp);
-		};
-	});
-</script>
-
-<div 
-	class="workflow-builder {elem_classes.join(' ')}"
-	class:hide={!visible}
-	style:min-width={min_width && min_width + "px"}
-	id={elem_id}
->
-	<!-- Top Section: Main Workflow Area -->
-	<div class="top-section">
-		<!-- Left Sidebar -->
-		<div class="sidebar" class:collapsed={sidebarCollapsed}>
-			<div class="sidebar-header">
-				{#if !sidebarCollapsed}
-					<h3>Components</h3>
-				{/if}
-				<button 
-					class="toggle-btn sidebar-toggle"
-					on:click={toggleSidebar}
-					title={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-				>
-					{sidebarCollapsed ? '→' : '←'}
-				</button>
-			</div>
-			
-			{#if !sidebarCollapsed}
-				<div class="sidebar-content">
-					{#each Object.entries(componentCategories) as [categoryName, category]}
-						<div class="category">
-							<div class="category-header">
-								<span class="category-icon">{category.icon}</span>
-								<span class="category-name">{categoryName}</span>
-							</div>
-							
-							<div class="category-components">
-								{#each Object.entries(category.components) as [componentType, component]}
-									<div 
-										class="component-item"
-										draggable="true"
-										on:dragstart={(e) => handleSidebarDragStart(e, componentType, component)}
-									>
-										<span class="component-icon">{component.icon}</span>
-										<span class="component-label">{component.label}</span>
-									</div>
-								{/each}
-							</div>
-						</div>
-					{/each}
-				</div>
-			{/if}
-		</div>
-
-		<!-- Main Canvas Area -->
-		<div class="canvas-area">
-			<!-- Toolbar -->
-			<div class="toolbar">
-				<div class="toolbar-left">
-					<input 
-						class="workflow-name-input"
-						type="text"
-						bind:value={workflowName}
-						placeholder="Workflow Name"
-						title="Enter workflow name"
-					/>
-				</div>
-				<div class="toolbar-center">
-					<!-- Zoom Controls -->
-					<div class="zoom-controls">
-						<button class="zoom-btn" on:click={zoomOut} title="Zoom Out">-</button>
-						<span class="zoom-level">{Math.round(zoomLevel * 100)}%</span>
-						<button class="zoom-btn" on:click={zoomIn} title="Zoom In">+</button>
-						<button class="zoom-btn reset" on:click={resetZoom} title="Reset View">⌂</button>
-					</div>
-				</div>
-				<div class="toolbar-right">
-					<span class="node-count">Nodes: {nodes.length}</span>
-					<span class="edge-count">Edges: {edges.length}</span>
-					<button class="clear-btn" on:click={clearWorkflow} title="Clear Workflow">
-						🗑️ Clear
-					</button>
-				</div>
-			</div>
-
-			<!-- Canvas Container -->
-			<div class="canvas-container" bind:this={canvasContainer}>
-				<div 
-					class="canvas"
-					bind:this={canvas}
-					style="transform: scale({zoomLevel}) translate({panOffset.x / zoomLevel}px, {panOffset.y / zoomLevel}px);"
-					on:drop={handleCanvasDropFromSidebar}
-					on:dragover={handleCanvasDragOver}
-					on:wheel={handleWheel}
-					on:mousedown={startPanning}
-					on:click={() => { selectedNode = null; }}
-				>
-					<!-- Grid Background -->
-					<div class="grid-background"></div>
-
-					<!-- Edges (SVG) -->
-					<svg class="edges-layer">
-						{#each edges as edge (edge.id)}
-							{@const sourceNode = nodes.find(n => n.id === edge.source)}
-							{@const targetNode = nodes.find(n => n.id === edge.target)}
-							{#if sourceNode && targetNode}
-								{@const points = getConnectionPoints(sourceNode, targetNode)}
-								<g class="edge-group">
-									<path
-										d="M {points.sourceX} {points.sourceY} C {points.sourceX + 80} {points.sourceY} {points.targetX - 80} {points.targetY} {points.targetX} {points.targetY}"
-										stroke="#64748b"
-										stroke-width="2"
-										fill="none"
-										class="edge-path"
-									/>
-									<circle
-										cx={points.targetX}
-										cy={points.targetY}
-										r="4"
-										fill="#64748b"
-									/>
-									<circle
-										cx={(points.sourceX + points.targetX) / 2}
-										cy={(points.sourceY + points.targetY) / 2}
-										r="10"
-										fill="#ef4444"
-										class="edge-delete"
-										on:click|stopPropagation={() => deleteEdge(edge.id)}
-									/>
-									<text
-										x={(points.sourceX + points.targetX) / 2}
-										y={(points.sourceY + points.targetY) / 2 + 4}
-										text-anchor="middle"
-										class="edge-delete-text"
-										on:click|stopPropagation={() => deleteEdge(edge.id)}
-									>
-										✕
-									</text>
-								</g>
-							{/if}
-						{/each}
-						
-						<!-- Connection preview -->
-						{#if isConnecting && connectionStart}
-							{@const startNode = nodes.find(n => n.id === connectionStart)}
-							{#if startNode}
-								<path
-									d="M {startNode.position.x + 320} {startNode.position.y + 80} L {mousePos.x} {mousePos.y}"
-									stroke="#3b82f6"
-									stroke-width="3"
-									stroke-dasharray="8,4"
-									fill="none"
-									opacity="0.8"
-								/>
-							{/if}
-						{/if}
-					</svg>
-
-					<!-- FIXED: Nodes with guaranteed connection points -->
-					{#each nodes as node (node.id)}
-						{@const config = getComponentConfig(node.type)}
-						<div 
-							class="node"
-							class:selected={selectedNode?.id === node.id}
-							style="left: {node.position.x}px; top: {node.position.y}px; border-color: {config.color};"
-							on:mousedown={(e) => handleMouseDown(e, node)}
-							on:click={(e) => handleNodeClick(e, node)}
-						>
-							<div class="node-header" style="background: {config.color};">
-								<span class="node-icon">{config.icon}</span>
-								<span class="node-title">{node.data.display_name || node.data.label}</span>
-								<button 
-									class="node-delete"
-									on:click|stopPropagation={() => deleteNode(node.id)}
-									title="Delete node"
-								>
-									✕
-								</button>
-							</div>
-							
-							<div class="node-content">
-								<!-- Dynamic property rendering based on node type -->
-								{#if propertyFields[node.type]}
-									{#each propertyFields[node.type].slice(0, 3) as field}
-										<div class="node-property">
-											<label class="property-label">{field.label}:</label>
-											{#if field.type === 'select'}
-												<select 
-													class="property-select"
-													value={getNodeProperty(node, field.key) || ''}
-													on:change={(e) => updateNodeProperty(node.id, field.key, e.target.value)}
-													on:click|stopPropagation
-												>
-													{#each field.options as option}
-														<option value={option}>{option}</option>
-													{/each}
-												</select>
-											{:else if field.type === 'number'}
-												<input 
-													class="property-input"
-													type="number"
-													min={field.min}
-													max={field.max}
-													step={field.step}
-													value={getNodeProperty(node, field.key) || 0}
-													on:input={(e) => updateNodeProperty(node.id, field.key, Number(e.target.value))}
-													on:click|stopPropagation
-												/>
-											{:else if field.type === 'checkbox'}
-												<label class="property-checkbox">
-													<input 
-														type="checkbox"
-														checked={getNodeProperty(node, field.key) || false}
-														on:change={(e) => updateNodeProperty(node.id, field.key, e.target.checked)}
-														on:click|stopPropagation
-													/>
-													<span>Yes</span>
-												</label>
-											{:else if field.type === 'textarea'}
-												<textarea
-													class="property-input"
-													value={getNodeProperty(node, field.key) || ''}
-													on:input={(e) => updateNodeProperty(node.id, field.key, e.target.value)}
-													on:click|stopPropagation
-													rows="2"
-												></textarea>
-											{:else}
-												<input 
-													class="property-input"
-													type="text"
-													value={getNodeProperty(node, field.key) || ''}
-													on:input={(e) => updateNodeProperty(node.id, field.key, e.target.value)}
-													on:click|stopPropagation
-												/>
-											{/if}
-										</div>
-									{/each}
-								{:else}
-									<div class="node-status">Ready</div>
-								{/if}
-							</div>
-
-							<!-- FIXED: Connection points with fallback system -->
-							{#if node.data.template}
-								<!-- Try to create dynamic connection points based on template -->
-								{@const templateHandles = Object.entries(node.data.template).filter(([_, handle]) => handle.is_handle)}
-								{#each templateHandles as [handleId, handle], index}
-									{#if handle.type === 'string' || handle.type === 'object' || handle.type === 'list' || handle.type === 'file'}
-										<div 
-											class="connection-point {handle.type === 'string' || handle.type === 'list' || handle.type === 'file' ? 'output' : 'input'}"
-											style="top: {index * 25 + 40}px; {(handle.type === 'string' || handle.type === 'list' || handle.type === 'file') ? 'right: -6px;' : 'left: -6px;'}"
-											on:mouseup={(e) => (handle.type === 'object') && endConnection(e, node.id)}
-											on:mousedown={(e) => (handle.type === 'string' || handle.type === 'list' || handle.type === 'file') && startConnection(e, node.id)}
-											title={`${handle.display_name || handleId} (${handle.type})`}
-										></div>
-									{/if}
-								{/each}
-								
-								<!-- FALLBACK: Ensure every node has at least basic connection points -->
-								{@const hasInputHandles = templateHandles.some(([_, h]) => h.type === 'object')}
-								{@const hasOutputHandles = templateHandles.some(([_, h]) => h.type === 'string' || h.type === 'list' || h.type === 'file')}
-								
-								{#if !hasInputHandles}
-									<div 
-										class="connection-point input"
-										style="top: 50%; left: -6px; transform: translateY(-50%);"
-										on:mouseup={(e) => endConnection(e, node.id)}
-										title="Input"
-									></div>
-								{/if}
-								
-								{#if !hasOutputHandles}
-									<div 
-										class="connection-point output"
-										style="top: 50%; right: -6px; transform: translateY(-50%);"
-										on:mousedown={(e) => startConnection(e, node.id)}
-										title="Output"
-									></div>
-								{/if}
-							{:else}
-								<!-- FALLBACK: Nodes without templates get basic connection points -->
-								<div 
-									class="connection-point input"
-									style="top: 50%; left: -6px; transform: translateY(-50%);"
-									on:mouseup={(e) => endConnection(e, node.id)}
-									title="Input"
-								></div>
-								<div 
-									class="connection-point output"
-									style="top: 50%; right: -6px; transform: translateY(-50%);"
-									on:mousedown={(e) => startConnection(e, node.id)}
-									title="Output"
-								></div>
-							{/if}
-						</div>
-					{/each}
-				</div>
-			</div>
-		</div>
-
-		<!-- Right Property Panel -->
-		<div class="property-panel" class:collapsed={propertyPanelCollapsed}>
-			<div class="property-header">
-				{#if !propertyPanelCollapsed}
-					<h3>Properties</h3>
-				{/if}
-				<button 
-					class="toggle-btn property-toggle"
-					on:click={togglePropertyPanel}
-					title={propertyPanelCollapsed ? 'Expand properties' : 'Collapse properties'}
-				>
-					{propertyPanelCollapsed ? '←' : '→'}
-				</button>
-			</div>
-			
-			{#if !propertyPanelCollapsed}
-				<div class="property-content">
-					{#if selectedNode && propertyFields[selectedNode.type]}
-						<div class="property-node-info">
-							<h4>{selectedNode.data.display_name || selectedNode.data.label}</h4>
-							<p class="property-node-type">TYPE: {selectedNode.type.toUpperCase()}</p>
-						</div>
-						
-						<div class="property-fields">
-							{#each propertyFields[selectedNode.type] as field}
-								<div class="property-field">
-									<label for={field.key}>{field.label}</label>
-									{#if field.help}
-										<small class="field-help">{field.help}</small>
-									{/if}
-									
-									{#if field.type === 'text'}
-										<input
-											type="text"
-											id={field.key}
-											value={getNodeProperty(selectedNode, field.key) || ''}
-											on:input={(e) => updateNodeProperty(selectedNode.id, field.key, e.target.value)}
-										/>
-									{:else if field.type === 'number'}
-										<input
-											type="number"
-											id={field.key}
-											value={getNodeProperty(selectedNode, field.key) || 0}
-											min={field.min}
-											max={field.max}
-											step={field.step}
-											on:input={(e) => updateNodeProperty(selectedNode.id, field.key, Number(e.target.value))}
-										/>
-									{:else if field.type === 'checkbox'}
-										<label class="checkbox-label">
-											<input
-												type="checkbox"
-												id={field.key}
-												checked={getNodeProperty(selectedNode, field.key) || false}
-												on:change={(e) => updateNodeProperty(selectedNode.id, field.key, e.target.checked)}
-											/>
-											<span class="checkbox-text">Enable</span>
-										</label>
-									{:else if field.type === 'select'}
-										<select
-											id={field.key}
-											value={getNodeProperty(selectedNode, field.key) || ''}
-											on:change={(e) => updateNodeProperty(selectedNode.id, field.key, e.target.value)}
-										>
-											{#each field.options as option}
-												<option value={option}>{option}</option>
-											{/each}
-										</select>
-									{:else if field.type === 'textarea'}
-										<textarea
-											id={field.key}
-											value={getNodeProperty(selectedNode, field.key) || ''}
-											on:input={(e) => updateNodeProperty(selectedNode.id, field.key, e.target.value)}
-											rows="4"
-										></textarea>
-									{/if}
-								</div>
-							{/each}
-						</div>
-					{:else}
-						<div class="property-empty">
-							<div class="empty-icon">🎯</div>
-							<p>Select a node to edit properties</p>
-							<small>Click on any node to configure its detailed settings</small>
-						</div>
-					{/if}
-				</div>
-			{/if}
-		</div>
-	</div>
-</div>
-
-<style>
-	/* Base styles with proper sizing */
-	.workflow-builder {
-		width: 100%;
-		height: 700px;
-		border: 1px solid #e2e8f0;
-		border-radius: 12px;
-		display: flex;
-		flex-direction: column;
-		background: #ffffff;
-		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-		overflow: hidden;
-		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-	}
-
-	.hide {
-		display: none;
-	}
-
-	.top-section {
-		flex: 1;
-		display: flex;
-		min-height: 0;
-	}
-
-	/* Sidebar Styles */
-	.sidebar {
-		width: 240px;
-		min-width: 240px;
-		background: #f8fafc;
-		border-right: 1px solid #e2e8f0;
-		display: flex;
-		flex-direction: column;
-		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-		position: relative;
-	}
-
-	.sidebar.collapsed {
-		width: 48px;
-		min-width: 48px;
-	}
-
-	.sidebar-header {
-		padding: 12px;
-		border-bottom: 1px solid #e2e8f0;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		background: white;
-		min-height: 50px;
-		box-sizing: border-box;
-	}
-
-	.sidebar-header h3 {
-		margin: 0;
-		font-size: 15px;
-		font-weight: 600;
-		color: #1e293b;
-	}
-
-	.toggle-btn {
-		background: #f1f5f9;
-		border: 1px solid #e2e8f0;
-		border-radius: 6px;
-		padding: 6px 8px;
-		cursor: pointer;
-		color: #64748b;
-		font-size: 14px;
-		transition: all 0.2s;
-		min-width: 28px;
-		height: 28px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		z-index: 10;
-		position: relative;
-	}
-
-	.toggle-btn:hover {
-		background: #e2e8f0;
-		color: #475569;
-	}
-
-	.sidebar-toggle {
-		position: absolute;
-		right: 8px;
-		top: 50%;
-		transform: translateY(-50%);
-	}
-
-	.sidebar-content {
-		flex: 1;
-		overflow-y: auto;
-		padding: 12px;
-	}
-
-	.category {
-		margin-bottom: 12px;
-	}
-
-	.category-header {
-		display: flex;
-		align-items: center;
-		padding: 6px 0;
-		font-weight: 600;
-		font-size: 12px;
-		color: #374151;
-		border-bottom: 1px solid #e5e7eb;
-		margin-bottom: 6px;
-	}
-
-	.category-icon {
-		margin-right: 6px;
-		font-size: 14px;
-	}
-
-	.component-item {
-		display: flex;
-		align-items: center;
-		padding: 6px 8px;
-		margin-bottom: 3px;
-		background: white;
-		border: 1px solid #e5e7eb;
-		border-radius: 6px;
-		cursor: grab;
-		transition: all 0.2s ease;
-		font-size: 12px;
-	}
-
-	.component-item:hover {
-		background: #f8fafc;
-		border-color: #cbd5e1;
-		transform: translateX(2px);
-	}
-
-	.component-item:active {
-		cursor: grabbing;
-	}
-
-	.component-icon {
-		margin-right: 6px;
-		font-size: 14px;
-	}
-
-	.component-label {
-		font-weight: 500;
-		color: #374151;
-	}
-
-	/* Canvas Area Styles */
-	.canvas-area {
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		min-width: 400px;
-	}
-
-	.toolbar {
-		height: 50px;
-		border-bottom: 1px solid #e2e8f0;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0 16px;
-		background: white;
-		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-	}
-
-	.workflow-name-input {
-		font-size: 16px;
-		font-weight: 600;
-		color: #1e293b;
-		border: none;
-		background: transparent;
-		outline: none;
-		padding: 4px 8px;
-		border-radius: 4px;
-		transition: background 0.2s;
-	}
-
-	.workflow-name-input:hover,
-	.workflow-name-input:focus {
-		background: #f1f5f9;
-	}
-
-	.toolbar-center {
-		display: flex;
-		align-items: center;
-	}
-
-	.zoom-controls {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		background: #f1f5f9;
-		padding: 4px;
-		border-radius: 8px;
-		border: 1px solid #e2e8f0;
-	}
-
-	.zoom-btn {
-		background: white;
-		border: none;
-		width: 28px;
-		height: 28px;
-		border-radius: 4px;
-		cursor: pointer;
-		font-weight: 600;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		transition: all 0.2s;
-		font-size: 14px;
-	}
-
-	.zoom-btn:hover {
-		background: #e2e8f0;
-	}
-
-	.zoom-btn.reset {
-		font-size: 12px;
-	}
-
-	.zoom-level {
-		font-size: 12px;
-		font-weight: 600;
-		color: #64748b;
-		min-width: 40px;
-		text-align: center;
-	}
-
-	.toolbar-right {
-		display: flex;
-		gap: 12px;
-		font-size: 12px;
-		align-items: center;
-	}
-
-	.node-count, .edge-count {
-		color: #64748b;
-		background: #f1f5f9;
-		padding: 4px 8px;
-		border-radius: 12px;
-		font-weight: 500;
-	}
-
-	.export-btn {
-		background: #3b82f6;
-		color: white;
-		border: none;
-		padding: 6px 12px;
-		border-radius: 6px;
-		font-size: 12px;
-		font-weight: 500;
-		cursor: pointer;
-		transition: all 0.2s;
-		display: flex;
-		align-items: center;
-		gap: 4px;
-	}
-
-	.export-btn:hover {
-		background: #2563eb;
-		transform: translateY(-1px);
-	}
-
-	.canvas-container {
-		flex: 1;
-		position: relative;
-		overflow: hidden;
-		background: #fafbfc;
-		cursor: grab;
-	}
-
-	.canvas-container:active {
-		cursor: grabbing;
-	}
-
-	.canvas {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 4000px;
-		height: 4000px;
-		transform-origin: 0 0;
-	}
-
-	.grid-background {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		background-image: 
-			radial-gradient(circle, #e2e8f0 1px, transparent 1px);
-		background-size: 20px 20px;
-		pointer-events: none;
-		opacity: 0.6;
-	}
-
-	.edges-layer {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		pointer-events: none;
-		z-index: 1;
-	}
-
-	.edge-delete, .edge-delete-text {
-		pointer-events: all;
-		cursor: pointer;
-	}
-
-	.edge-delete-text {
-		font-size: 10px;
-		fill: white;
-		text-anchor: middle;
-		user-select: none;
-	}
-
-	.edge-delete:hover {
-		fill: #dc2626;
-	}
-
-	/* Node styles with proper sizing and no overflow */
-	.node {
-		position: absolute;
-		width: 320px;
-		min-height: 160px;
-		background: white;
-		border: 2px solid #e2e8f0;
-		border-radius: 10px;
-		cursor: move;
-		user-select: none;
-		z-index: 2;
-		transition: all 0.2s ease;
-		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-		overflow: visible;
-	}
-
-	.node:hover {
-		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
-		transform: translateY(-1px);
-	}
-
-	.node.selected {
-		border-color: #3b82f6;
-		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 4px 16px rgba(0, 0, 0, 0.15);
-	}
-
-	.node-header {
-		display: flex;
-		align-items: center;
-		padding: 12px 16px;
-		color: white;
-		font-weight: 600;
-		font-size: 14px;
-		border-radius: 8px 8px 0 0;
-		min-height: 24px;
-	}
-
-	.node-icon {
-		margin-right: 8px;
-		font-size: 16px;
-		flex-shrink: 0;
-	}
-
-	.node-title {
-		flex: 1;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.node-delete {
-		background: rgba(255, 255, 255, 0.2);
-		border: none;
-		color: white;
-		cursor: pointer;
-		font-size: 12px;
-		padding: 4px 6px;
-		border-radius: 4px;
-		transition: all 0.2s;
-		flex-shrink: 0;
-	}
-
-	.node-delete:hover {
-		background: rgba(255, 255, 255, 0.3);
-	}
-
-	.node-content {
-		padding: 12px 16px;
-		max-height: 200px;
-		overflow-y: auto;
-		overflow-x: hidden;
-	}
-
-	.node-property {
-		display: flex;
-		flex-direction: column;
-		gap: 4px;
-		margin-bottom: 12px;
-		font-size: 12px;
-	}
-
-	.property-label {
-		font-weight: 600;
-		color: #374151;
-		font-size: 11px;
-		margin-bottom: 2px;
-	}
-
-	.property-input, .property-select {
-		width: 100%;
-		padding: 6px 8px;
-		border: 1px solid #d1d5db;
-		border-radius: 4px;
-		font-size: 11px;
-		background: white;
-		transition: all 0.2s;
-		box-sizing: border-box;
-		resize: vertical;
-	}
-
-	.property-input:focus, .property-select:focus {
-		outline: none;
-		border-color: #3b82f6;
-		box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
-	}
-
-	.property-input:hover, .property-select:hover {
-		border-color: #9ca3af;
-	}
-
-	.property-checkbox {
-		display: flex;
-		align-items: center;
-		gap: 6px;
-		font-size: 11px;
-		color: #374151;
-		cursor: pointer;
-	}
-
-	.property-checkbox input[type="checkbox"] {
-		width: auto;
-		margin: 0;
-		cursor: pointer;
-	}
-
-	.node-status {
-		font-size: 12px;
-		color: #64748b;
-		text-align: center;
-		padding: 20px;
-		font-style: italic;
-	}
-
-	/* FIXED: Connection points that work for ALL nodes */
-	.connection-point {
-		position: absolute;
-		width: 12px;
-		height: 12px;
-		border-radius: 50%;
-		background: #3b82f6;
-		border: 2px solid white;
-		cursor: crosshair;
-		z-index: 3;
-		transition: all 0.2s ease;
-		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
-	}
-
-	.connection-point.input {
-		left: -6px;
-	}
-
-	.connection-point.output {
-		right: -6px;
-	}
-
-	.connection-point:hover {
-		background: #2563eb;
-		transform: scale(1.2);
-		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-	}
-
-	/* Property Panel Styles */
-	.property-panel {
-		width: 280px;
-		min-width: 280px;
-		background: #f8fafc;
-		border-left: 1px solid #e2e8f0;
-		display: flex;
-		flex-direction: column;
-		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-		position: relative;
-	}
-
-	.property-panel.collapsed {
-		width: 48px;
-		min-width: 48px;
-	}
-
-	.property-header {
-		padding: 12px;
-		border-bottom: 1px solid #e2e8f0;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		background: white;
-		min-height: 50px;
-		box-sizing: border-box;
-	}
-
-	.property-header h3 {
-		margin: 0;
-		font-size: 15px;
-		font-weight: 600;
-		color: #1e293b;
-	}
-
-	.property-toggle {
-		position: absolute;
-		left: 8px;
-		top: 50%;
-		transform: translateY(-50%);
-	}
-
-	.property-content {
-		flex: 1;
-		overflow-y: auto;
-		padding: 16px;
-	}
-
-	.property-node-info {
-		margin-bottom: 20px;
-		padding: 12px;
-		background: white;
-		border-radius: 8px;
-		border: 1px solid #e2e8f0;
-	}
-
-	.property-node-info h4 {
-		margin: 0 0 4px 0;
-		font-size: 16px;
-		color: #1e293b;
-	}
-
-	.property-node-type {
-		margin: 0;
-		font-size: 11px;
-		color: #64748b;
-		text-transform: uppercase;
-		font-weight: 600;
-	}
-
-	.property-field {
-		margin-bottom: 16px;
-	}
-
-	.property-field label {
-		display: block;
-		margin-bottom: 6px;
-		font-size: 13px;
-		font-weight: 600;
-		color: #374151;
-	}
-
-	.field-help {
-		display: block;
-		margin-bottom: 4px;
-		font-size: 11px;
-		color: #64748b;
-		font-style: italic;
-	}
-
-	.property-field input,
-	.property-field select,
-	.property-field textarea {
-		width: 100%;
-		padding: 8px 10px;
-		border: 1px solid #d1d5db;
-		border-radius: 6px;
-		font-size: 13px;
-		background: white;
-		transition: border-color 0.2s;
-		box-sizing: border-box;
-	}
-
-	.property-field input:focus,
-	.property-field select:focus,
-	.property-field textarea:focus {
-		outline: none;
-		border-color: #3b82f6;
-		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-	}
-
-	.checkbox-label {
-		display: flex !important;
-		align-items: center;
-		margin-bottom: 0 !important;
-		cursor: pointer;
-	}
-
-	.checkbox-label input[type="checkbox"] {
-		width: auto !important;
-		margin-right: 8px !important;
-	}
-
-	.property-empty {
-		text-align: center;
-		padding: 40px 16px;
-		color: #64748b;
-	}
-
-	.empty-icon {
-		font-size: 32px;
-		margin-bottom: 12px;
-		opacity: 0.5;
-	}
-
-	.property-empty p {
-		margin: 0 0 6px 0;
-		font-size: 14px;
-		font-weight: 500;
-	}
-
-	.property-empty small {
-		font-size: 12px;
-		opacity: 0.7;
-	}
-	.clear-btn {
-    background: #ef4444;
-    color: white;
-    border: none;
-    padding: 6px 12px;
-    border-radius: 6px;
-    font-size: 12px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-}
-
-.clear-btn:hover {
-    background: #dc2626;
-    transform: translateY(-1px);
-}
-
-</style>