Upload Index (2).svelte

src/frontend/Index (2).svelte

@@ -0,0 +1,2600 @@
+<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 };
+
+
+    
+    const defaultWorkflow = {
+        workflow_id: "workflow-" + Date.now(),    // ✅ 콜론(:) 사용
+        workflow_name: "My Workflow",             // ✅ 콜론(:) 사용
+        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);
+}
+
+
+
+// Canvas setup
+onMount(() => {
+    // 강제로 빈 상태로 초기화
+    nodes = [];
+    edges = [];
+    value = { nodes: [], edges: [] };
+    
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+    
+    return () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+    };
+});
+
+</style>