@d34dman/flowdrop 0.0.12 → 0.0.14

package/dist/adapters/WorkflowAdapter.js

@@ -14,6 +14,27 @@
  * - Systems that need to generate or modify workflows programmatically
  */
 import { v4 as uuidv4 } from 'uuid';
+/**
+ * Generate a unique node ID based on node type and existing nodes
+ * Format: <node_type>.<number>
+ * Example: boolean_gateway.1, calculator.2
+ */
+function generateStandardNodeId(nodeTypeId, existingNodes) {
+    // Count how many nodes of this type already exist
+    const existingNodeIds = existingNodes
+        .filter((node) => node.data?.metadata?.id === nodeTypeId)
+        .map((node) => node.id);
+    // Extract the numbers from existing IDs with the same prefix
+    const existingNumbers = existingNodeIds
+        .map((id) => {
+        const match = id.match(new RegExp(`^${nodeTypeId}\\.(\\d+)$`));
+        return match ? parseInt(match[1], 10) : 0;
+    })
+        .filter((num) => num > 0);
+    // Find the next available number (highest + 1)
+    const nextNumber = existingNumbers.length > 0 ? Math.max(...existingNumbers) + 1 : 1;
+    return `${nodeTypeId}.${nextNumber}`;
+}
 /**
  * Workflow Adapter Class
  * Provides a clean API for workflow operations without exposing SvelteFlow internals
@@ -48,8 +69,10 @@ export class WorkflowAdapter {
         if (!metadata) {
             throw new Error(`Node type '${nodeType}' not found`);
         }
+        // Generate node ID based on node type and existing nodes
+        const nodeId = generateStandardNodeId(nodeType, workflow.nodes);
         const node = {
-            id: uuidv4(),
+            id: nodeId,
             type: nodeType,
             position,
             data: {
@@ -313,9 +336,17 @@ export class WorkflowAdapter {
         const cloned = JSON.parse(JSON.stringify(workflow));
         // Generate new IDs for all nodes and edges
         const idMapping = new Map();
+        // Count nodes by type to generate proper sequential IDs
+        const nodeTypeCounts = new Map();
         cloned.nodes.forEach((node) => {
             const oldId = node.id;
-            node.id = uuidv4();
+            const nodeTypeId = node.data.metadata.id;
+            // Get the current count for this node type
+            const currentCount = nodeTypeCounts.get(nodeTypeId) || 0;
+            const newCount = currentCount + 1;
+            nodeTypeCounts.set(nodeTypeId, newCount);
+            // Generate new ID with the sequential number
+            node.id = `${nodeTypeId}.${newCount}`;
             idMapping.set(oldId, node.id);
         });
         cloned.edges.forEach((edge) => {

package/dist/components/App.svelte

@@ -167,19 +167,19 @@
 	 */
 	async function testApiConnection(): Promise<void> {
 		try {
-			const baseUrl = endpointConfig?.baseUrl || apiBaseUrl || "/api/flowdrop";
+			const baseUrl = endpointConfig?.baseUrl || apiBaseUrl || '/api/flowdrop';
 			const testUrl = `${baseUrl}/nodes`;
 
 			const response = await fetch(testUrl);
 			const data = await response.json();
 
 			if (response.ok && data.success) {
-				apiToasts.success("API connection test", "Connection successful");
+				apiToasts.success('API connection test', 'Connection successful');
 			} else {
-				apiToasts.error("API connection test", "Connection failed");
+				apiToasts.error('API connection test', 'Connection failed');
 			}
 		} catch (err) {
-			apiToasts.error("API connection test", err instanceof Error ? err.message : "Unknown error");
+			apiToasts.error('API connection test', err instanceof Error ? err.message : 'Unknown error');
 		}
 	}
 
@@ -288,53 +288,69 @@
 		// Wait for any pending DOM updates before saving
 		await tick();
 
-		// Import necessary modules
-		const { workflowApi } = await import('../services/api.js');
-		const { v4: uuidv4 } = await import('uuid');
-
-		// Use current workflow from global store
-		const workflowToSave = $workflowStore;
+		// Show loading toast
+		const loadingToast = apiToasts.loading('Saving workflow');
 
-		if (!workflowToSave) {
-			return;
-		}
+		try {
+			// Import necessary modules
+			const { workflowApi } = await import('../services/api.js');
+			const { v4: uuidv4 } = await import('uuid');
 
-		// Determine the workflow ID
-		let workflowId: string;
-		if (workflowToSave.id) {
-			workflowId = workflowToSave.id;
-		} else {
-			workflowId = uuidv4();
-		}
+			// Use current workflow from global store
+			const workflowToSave = $workflowStore;
 
-		// Create workflow object for saving
-		const finalWorkflow = {
-			id: workflowId,
-			name: workflowToSave.name || 'Untitled Workflow',
-			description: workflowToSave.description || '',
-			nodes: workflowToSave.nodes || [],
-			edges: workflowToSave.edges || [],
-			metadata: {
-				version: '1.0.0',
-				createdAt: workflowToSave.metadata?.createdAt || new Date().toISOString(),
-				updatedAt: new Date().toISOString()
+			if (!workflowToSave) {
+				dismissToast(loadingToast);
+				return;
 			}
-		};
 
-		const savedWorkflow = await workflowApi.saveWorkflow(finalWorkflow);
+			// Determine the workflow ID
+			let workflowId: string;
+			if (workflowToSave.id) {
+				workflowId = workflowToSave.id;
+			} else {
+				workflowId = uuidv4();
+			}
 
-		// Update the workflow ID if it changed (new workflow)
-		// Keep our current workflow state, only update ID and metadata from backend
-		if (savedWorkflow.id && savedWorkflow.id !== finalWorkflow.id) {
-			workflowActions.batchUpdate({
-				nodes: finalWorkflow.nodes,
-				edges: finalWorkflow.edges,
-				name: finalWorkflow.name,
+			// Create workflow object for saving
+			const finalWorkflow = {
+				id: workflowId,
+				name: workflowToSave.name || 'Untitled Workflow',
+				description: workflowToSave.description || '',
+				nodes: workflowToSave.nodes || [],
+				edges: workflowToSave.edges || [],
 				metadata: {
-					...finalWorkflow.metadata,
-					...savedWorkflow.metadata
+					version: '1.0.0',
+					createdAt: workflowToSave.metadata?.createdAt || new Date().toISOString(),
+					updatedAt: new Date().toISOString()
 				}
-			});
+			};
+
+			const savedWorkflow = await workflowApi.saveWorkflow(finalWorkflow);
+
+			// Update the workflow ID if it changed (new workflow)
+			// Keep our current workflow state, only update ID and metadata from backend
+			if (savedWorkflow.id && savedWorkflow.id !== finalWorkflow.id) {
+				workflowActions.batchUpdate({
+					nodes: finalWorkflow.nodes,
+					edges: finalWorkflow.edges,
+					name: finalWorkflow.name,
+					metadata: {
+						...finalWorkflow.metadata,
+						...savedWorkflow.metadata
+					}
+				});
+			}
+
+			// Dismiss loading toast and show success
+			dismissToast(loadingToast);
+			apiToasts.success('Save workflow', 'Workflow saved successfully');
+		} catch (error) {
+			// Dismiss loading toast and show error
+			dismissToast(loadingToast);
+			const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
+			apiToasts.error('Save workflow', errorMessage);
+			throw error; // Re-throw to allow calling code to handle if needed
 		}
 	}
 
@@ -616,6 +632,24 @@
 							<div class="flowdrop-config-sidebar__section">
 								<h3 class="flowdrop-config-sidebar__section-title">Node Details</h3>
 								<div class="flowdrop-config-sidebar__details">
+									<div class="flowdrop-config-sidebar__detail">
+										<span class="flowdrop-config-sidebar__detail-label">Node ID:</span>
+										<div class="flowdrop-config-sidebar__detail-value-with-copy">
+											<span class="flowdrop-config-sidebar__detail-value" style="font-family: monospace;">
+												{selectedNodeForConfig().id}
+											</span>
+											<button
+												class="flowdrop-config-sidebar__copy-btn"
+												onclick={() => {
+													navigator.clipboard.writeText(selectedNodeForConfig().id);
+												}}
+												title="Copy Node ID"
+												aria-label="Copy node ID to clipboard"
+											>
+												📋
+											</button>
+										</div>
+									</div>
 									<div class="flowdrop-config-sidebar__detail">
 										<span class="flowdrop-config-sidebar__detail-label">Type:</span>
 										<span class="flowdrop-config-sidebar__detail-value"
@@ -942,6 +976,43 @@
 		font-weight: 500;
 	}
 
+	.flowdrop-config-sidebar__detail-value-with-copy {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		background-color: #f3f4f6;
+		padding: 0.5rem;
+		border-radius: 0.375rem;
+		border: 1px solid #e5e7eb;
+	}
+
+	.flowdrop-config-sidebar__detail-value-with-copy .flowdrop-config-sidebar__detail-value {
+		flex: 1;
+		font-size: 0.8125rem;
+		word-break: break-all;
+	}
+
+	.flowdrop-config-sidebar__copy-btn {
+		background: white;
+		border: 1px solid #d1d5db;
+		border-radius: 0.25rem;
+		padding: 0.25rem 0.5rem;
+		cursor: pointer;
+		font-size: 1rem;
+		transition: all 0.2s;
+		flex-shrink: 0;
+	}
+
+	.flowdrop-config-sidebar__copy-btn:hover {
+		background-color: #f9fafb;
+		border-color: #9ca3af;
+		transform: scale(1.05);
+	}
+
+	.flowdrop-config-sidebar__copy-btn:active {
+		transform: scale(0.95);
+	}
+
 	.flowdrop-config-sidebar__detail-description {
 		margin: 0;
 		font-size: 0.875rem;

package/dist/components/ConfigForm.svelte

@@ -5,96 +5,89 @@
 -->
 
 <script lang="ts">
-	import type { ConfigSchema, WorkflowNode } from "../types/index.js"
+	import type { ConfigSchema, WorkflowNode } from '../types/index.js';
 
 	interface Props {
-		node: WorkflowNode
-		onSave: (config: Record<string, unknown>) => void
-		onCancel: () => void
+		node: WorkflowNode;
+		onSave: (config: Record<string, unknown>) => void;
+		onCancel: () => void;
 	}
 
-	let { node, onSave, onCancel }: Props = $props()
+	let { node, onSave, onCancel }: Props = $props();
 
 	/**
 	 * Get the configuration schema from node metadata
 	 */
-	const configSchema = $derived(
-		node.data.metadata?.configSchema as ConfigSchema | undefined
-	)
+	const configSchema = $derived(node.data.metadata?.configSchema as ConfigSchema | undefined);
 
 	/**
 	 * Get the current node configuration
 	 */
-	const nodeConfig = $derived(node.data.config || {})
+	const nodeConfig = $derived(node.data.config || {});
 
 	/**
 	 * Create reactive configuration values using $state
 	 * This fixes the Svelte 5 reactivity warnings
 	 */
-	let configValues = $state<Record<string, unknown>>({})
+	let configValues = $state<Record<string, unknown>>({});
 
 	/**
 	 * Initialize config values when node or schema changes
 	 */
 	$effect(() => {
 		if (configSchema?.properties) {
-			const mergedConfig: Record<string, unknown> = {}
+			const mergedConfig: Record<string, unknown> = {};
 			Object.entries(configSchema.properties).forEach(([key, field]) => {
-				const fieldConfig = field as any
+				const fieldConfig = field as any;
 				// Use existing value if available, otherwise use default
-				mergedConfig[key] =
-					nodeConfig[key] !== undefined ? nodeConfig[key] : fieldConfig.default
-			})
-			configValues = mergedConfig
+				mergedConfig[key] = nodeConfig[key] !== undefined ? nodeConfig[key] : fieldConfig.default;
+			});
+			configValues = mergedConfig;
 		}
-	})
+	});
 
 	/**
 	 * Handle form submission
 	 */
 	function handleSave(): void {
 		// Collect all form values including hidden fields
-		const form = document.querySelector(".flowdrop-config-sidebar__form")
-		const updatedConfig: Record<string, unknown> = { ...configValues }
+		const form = document.querySelector('.flowdrop-config-sidebar__form');
+		const updatedConfig: Record<string, unknown> = { ...configValues };
 
 		if (form) {
-			const inputs = form.querySelectorAll("input, select, textarea")
+			const inputs = form.querySelectorAll('input, select, textarea');
 			inputs.forEach((input: any) => {
 				if (input.id) {
-					if (input.type === "checkbox") {
-						updatedConfig[input.id] = input.checked
-					} else if (input.type === "number") {
-						updatedConfig[input.id] = input.value ? Number(input.value) : input.value
-					} else if (input.type === "hidden") {
+					if (input.type === 'checkbox') {
+						updatedConfig[input.id] = input.checked;
+					} else if (input.type === 'number') {
+						updatedConfig[input.id] = input.value ? Number(input.value) : input.value;
+					} else if (input.type === 'hidden') {
 						// Parse hidden field values that might be JSON
 						try {
-							const parsed = JSON.parse(input.value)
-							updatedConfig[input.id] = parsed
+							const parsed = JSON.parse(input.value);
+							updatedConfig[input.id] = parsed;
 						} catch {
 							// If not JSON, use raw value
-							updatedConfig[input.id] = input.value
+							updatedConfig[input.id] = input.value;
 						}
 					} else {
-						updatedConfig[input.id] = input.value
+						updatedConfig[input.id] = input.value;
 					}
 				}
-			})
+			});
 		}
 
 		// Preserve hidden field values from original config if not collected from form
 		if (node.data.config && configSchema?.properties) {
 			Object.entries(configSchema.properties).forEach(([key, property]: [string, any]) => {
-				if (
-					property.format === "hidden" &&
-					!(key in updatedConfig) &&
-					key in node.data.config
-				) {
-					updatedConfig[key] = node.data.config[key]
+				if (property.format === 'hidden' && !(key in updatedConfig) && key in node.data.config) {
+					updatedConfig[key] = node.data.config[key];
 				}
-			})
+			});
 		}
 
-		onSave(updatedConfig)
+		onSave(updatedConfig);
 	}
 </script>
 
@@ -103,7 +96,7 @@
 		{#if configSchema.properties}
 			{#each Object.entries(configSchema.properties) as [key, field] (key)}
 				{@const fieldConfig = field as any}
-				{#if fieldConfig.format !== "hidden"}
+				{#if fieldConfig.format !== 'hidden'}
 					<div class="flowdrop-config-sidebar__field">
 						<label class="flowdrop-config-sidebar__field-label" for={key}>
 							{fieldConfig.title || fieldConfig.description || key}
@@ -120,18 +113,16 @@
 											checked={Array.isArray(configValues[key]) &&
 												configValues[key].includes(String(option))}
 											onchange={(e) => {
-												const checked = e.currentTarget.checked
+												const checked = e.currentTarget.checked;
 												const currentValues = Array.isArray(configValues[key])
 													? [...(configValues[key] as unknown[])]
-													: []
+													: [];
 												if (checked) {
 													if (!currentValues.includes(String(option))) {
-														configValues[key] = [...currentValues, String(option)]
+														configValues[key] = [...currentValues, String(option)];
 													}
 												} else {
-													configValues[key] = currentValues.filter(
-														(v) => v !== String(option)
-													)
+													configValues[key] = currentValues.filter((v) => v !== String(option));
 												}
 											}}
 										/>
@@ -152,42 +143,42 @@
 									<option value={String(option)}>{String(option)}</option>
 								{/each}
 							</select>
-						{:else if fieldConfig.type === "string" && fieldConfig.format === "multiline"}
+						{:else if fieldConfig.type === 'string' && fieldConfig.format === 'multiline'}
 							<!-- Textarea for multiline strings -->
 							<textarea
 								id={key}
 								class="flowdrop-config-sidebar__textarea"
 								bind:value={configValues[key]}
-								placeholder={String(fieldConfig.placeholder || "")}
+								placeholder={String(fieldConfig.placeholder || '')}
 								rows="4"
 							></textarea>
-						{:else if fieldConfig.type === "string"}
+						{:else if fieldConfig.type === 'string'}
 							<input
 								id={key}
 								type="text"
 								class="flowdrop-config-sidebar__input"
 								bind:value={configValues[key]}
-								placeholder={String(fieldConfig.placeholder || "")}
+								placeholder={String(fieldConfig.placeholder || '')}
 							/>
-						{:else if fieldConfig.type === "number"}
+						{:else if fieldConfig.type === 'number'}
 							<input
 								id={key}
 								type="number"
 								class="flowdrop-config-sidebar__input"
 								bind:value={configValues[key]}
-								placeholder={String(fieldConfig.placeholder || "")}
+								placeholder={String(fieldConfig.placeholder || '')}
 							/>
-						{:else if fieldConfig.type === "boolean"}
+						{:else if fieldConfig.type === 'boolean'}
 							<input
 								id={key}
 								type="checkbox"
 								class="flowdrop-config-sidebar__checkbox"
 								checked={Boolean(configValues[key] || fieldConfig.default || false)}
 								onchange={(e) => {
-									configValues[key] = e.currentTarget.checked
+									configValues[key] = e.currentTarget.checked;
 								}}
 							/>
-						{:else if fieldConfig.type === "select" || fieldConfig.options}
+						{:else if fieldConfig.type === 'select' || fieldConfig.options}
 							<select
 								id={key}
 								class="flowdrop-config-sidebar__select"
@@ -196,9 +187,7 @@
 								{#if fieldConfig.options}
 									{#each fieldConfig.options as option (String(option.value))}
 										{@const optionConfig = option as any}
-										<option value={String(optionConfig.value)}
-											>{String(optionConfig.label)}</option
-										>
+										<option value={String(optionConfig.value)}>{String(optionConfig.label)}</option>
 									{/each}
 								{/if}
 							</select>
@@ -209,7 +198,7 @@
 								type="text"
 								class="flowdrop-config-sidebar__input"
 								bind:value={configValues[key]}
-								placeholder={String(fieldConfig.placeholder || "")}
+								placeholder={String(fieldConfig.placeholder || '')}
 							/>
 						{/if}
 						{#if fieldConfig.description}

package/dist/components/ConfigForm.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { WorkflowNode } from "../types/index.js";
+import type { WorkflowNode } from '../types/index.js';
 interface Props {
     node: WorkflowNode;
     onSave: (config: Record<string, unknown>) => void;

package/dist/components/FlowDropZone.svelte

@@ -0,0 +1,68 @@
+<!--
+  Flow Drop Zone Component
+  Handles drag and drop with proper coordinate transformation
+  Must be used inside SvelteFlowProvider
+-->
+
+<script lang="ts">
+	import { useSvelteFlow } from "@xyflow/svelte";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		ondrop: (nodeTypeData: string, position: { x: number; y: number }) => void;
+		children: Snippet;
+	}
+
+	let props: Props = $props();
+
+	// Access SvelteFlow instance for coordinate transformation
+	const { screenToFlowPosition } = useSvelteFlow();
+
+	/**
+	 * Handle drag over event
+	 */
+	function handleDragOver(e: DragEvent): void {
+		e.preventDefault();
+		if (e.dataTransfer) {
+			e.dataTransfer.dropEffect = "copy";
+		}
+	}
+
+	/**
+	 * Handle drop event with proper coordinate transformation
+	 */
+	function handleDrop(e: DragEvent): void {
+		e.preventDefault();
+
+		// Get the data from the drag event
+		const nodeTypeData = e.dataTransfer?.getData("application/json");
+		if (nodeTypeData) {
+			// Convert screen coordinates to flow coordinates (accounts for zoom and pan)
+			const position = screenToFlowPosition({
+				x: e.clientX,
+				y: e.clientY
+			});
+
+			// Call the parent handler with the converted position
+			props.ondrop(nodeTypeData, position);
+		}
+	}
+</script>
+
+<div
+	class="flow-drop-zone"
+	role="application"
+	aria-label="Workflow canvas"
+	ondragover={handleDragOver}
+	ondrop={handleDrop}
+>
+	{@render props.children()}
+</div>
+
+<style>
+	.flow-drop-zone {
+		width: 100%;
+		height: 100%;
+	}
+</style>
+

package/dist/components/FlowDropZone.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+interface Props {
+    ondrop: (nodeTypeData: string, position: {
+        x: number;
+        y: number;
+    }) => void;
+    children: Snippet;
+}
+declare const FlowDropZone: import("svelte").Component<Props, {}, "">;
+type FlowDropZone = ReturnType<typeof FlowDropZone>;
+export default FlowDropZone;

package/dist/components/PipelineStatus.svelte

@@ -29,10 +29,12 @@
 		) => void;
 	}
 
-	let { pipelineId, workflow, apiClient, baseUrl, endpointConfig, onActionsReady }: Props = $props();
+	let { pipelineId, workflow, apiClient, baseUrl, endpointConfig, onActionsReady }: Props =
+		$props();
 
 	// Initialize API client if not provided
-	const client = apiClient || new FlowDropApiClient(endpointConfig?.baseUrl || baseUrl || "/api/flowdrop");
+	const client =
+		apiClient || new FlowDropApiClient(endpointConfig?.baseUrl || baseUrl || '/api/flowdrop');
 
 	// Pipeline status and job data
 	let pipelineStatus = $state<string>('unknown');

package/dist/components/WorkflowEditor.svelte

@@ -22,6 +22,7 @@
 		WorkflowEdge
 	} from '../types/index.js';
 	import CanvasBanner from './CanvasBanner.svelte';
+	import FlowDropZone from './FlowDropZone.svelte';
 	import { tick } from 'svelte';
 	import type { EndpointConfig } from '../config/endpoints.js';
 	import ConnectionLine from './ConnectionLine.svelte';
@@ -34,11 +35,7 @@
 		ConfigurationHelper
 	} from '../helpers/workflowEditorHelper.js';
 	import type { NodeExecutionInfo } from '../types/index.js';
-	import {
-		areNodeArraysEqual,
-		areEdgeArraysEqual,
-		throttle
-	} from '../utils/performanceUtils.js';
+	import { areNodeArraysEqual, areEdgeArraysEqual, throttle } from '../utils/performanceUtils.js';
 
 	interface Props {
 		nodes?: NodeMetadata[];
@@ -115,7 +112,7 @@
 				previousPipelineId = props.pipelineId;
 
 				// Use requestIdleCallback for non-critical updates (falls back to setTimeout)
-				if (typeof requestIdleCallback !== "undefined") {
+				if (typeof requestIdleCallback !== 'undefined') {
 					loadExecutionInfoTimeout = requestIdleCallback(
 						() => {
 							loadNodeExecutionInfo();
@@ -167,7 +164,7 @@
 
 			// Default execution info for nodes without data
 			const defaultExecutionInfo: NodeExecutionInfo = {
-				status: "idle" as const,
+				status: 'idle' as const,
 				executionCount: 0,
 				isExecuting: false
 			};
@@ -191,8 +188,8 @@
 			executionInfoAbortController = null;
 		} catch (error) {
 			// Only log if it's not an abort error
-			if (error instanceof Error && error.name !== "AbortError") {
-				console.error("Failed to load node execution info:", error);
+			if (error instanceof Error && error.name !== 'AbortError') {
+				console.error('Failed to load node execution info:', error);
 			}
 		}
 	}
@@ -278,6 +275,23 @@
 		}
 	}
 
+	/**
+	 * Handle node deletion - automatically remove connected edges
+	 */
+	function handleNodesDelete(params: { nodes: WorkflowNodeType[]; edges: WorkflowEdge[] }): void {
+		const deletedNodeIds = new Set(params.nodes.map((node) => node.id));
+
+		// Filter out edges connected to deleted nodes
+		flowEdges = flowEdges.filter(
+			(edge) => !deletedNodeIds.has(edge.source) && !deletedNodeIds.has(edge.target)
+		);
+
+		// Update currentWorkflow
+		if (currentWorkflow) {
+			updateCurrentWorkflowFromSvelteFlow();
+		}
+	}
+
 	/**
 	 * Update existing edges with our custom styling rules
 	 * This ensures all edges (including existing ones) follow our rules
@@ -316,6 +330,30 @@
 	function checkWorkflowCycles(): boolean {
 		return WorkflowOperationsHelper.checkWorkflowCycles(flowNodes, flowEdges);
 	}
+
+	/**
+	 * Handle drop event and add new node to canvas
+	 * This will be called from the inner DropZone component
+	 */
+	async function handleNodeDrop(
+		nodeTypeData: string,
+		position: { x: number; y: number }
+	): Promise<void> {
+		// Create the node using the helper, passing existing nodes for ID generation
+		const newNode = NodeOperationsHelper.createNodeFromDrop(nodeTypeData, position, flowNodes);
+
+		if (newNode && currentWorkflow) {
+			currentWorkflow = WorkflowOperationsHelper.addNode(currentWorkflow, newNode);
+
+			// Update the global store
+			updateGlobalStore();
+
+			// Wait for DOM update to ensure SvelteFlow updates
+			await tick();
+		} else if (!currentWorkflow) {
+			console.warn('No currentWorkflow available for new node');
+		}
+	}
 </script>
 
 <SvelteFlowProvider>
@@ -323,75 +361,41 @@
 		<!-- Main Editor Area -->
 		<div class="flowdrop-workflow-editor__main">
 			<!-- Flow Canvas -->
-			<div
-				class="flowdrop-canvas"
-				role="application"
-				aria-label="Workflow canvas"
-				ondragover={(e: DragEvent) => {
-					e.preventDefault();
-					e.dataTransfer!.dropEffect = 'copy';
-				}}
-				ondrop={async (e: DragEvent) => {
-					e.preventDefault();
-
-					// Get the data from the drag event
-					const nodeTypeData = e.dataTransfer?.getData('application/json');
-					if (nodeTypeData) {
-						// Get the position relative to the canvas
-						const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-						const position = {
-							x: e.clientX - rect.left,
-							y: e.clientY - rect.top
-						};
-
-						// Create the node using the helper
-						const newNode = NodeOperationsHelper.createNodeFromDrop(nodeTypeData, position);
-
-						if (newNode && currentWorkflow) {
-							currentWorkflow = WorkflowOperationsHelper.addNode(currentWorkflow, newNode);
-
-							// Update the global store
-							updateGlobalStore();
-
-							// Wait for DOM update to ensure SvelteFlow updates
-							await tick();
-						} else if (!currentWorkflow) {
-							console.warn('No currentWorkflow available for new node');
-						}
-					}
-				}}
-			>
-				<SvelteFlow
-					bind:nodes={flowNodes}
-					bind:edges={flowEdges}
-					{nodeTypes}
-					{defaultEdgeOptions}
-					onconnect={handleConnect}
-					minZoom={0.2}
-					maxZoom={3}
-					clickConnect={true}
-					elevateEdgesOnSelect={true}
-					connectionLineType={ConnectionLineType.Bezier}
-					connectionLineComponent={ConnectionLine}
-					snapGrid={[10, 10]}
-					fitView
-				>
-					<Controls />
-					<Background
-						gap={10}
-						bgColor="var(--flowdrop-background-color)"
-						variant={BackgroundVariant.Dots}
-					/>
-					<MiniMap />
-				</SvelteFlow>
-				<!-- Drop Zone Indicator -->
-				{#if flowNodes.length === 0}
-					<CanvasBanner
-						title="Drag components here to start building"
-						description="Use the sidebar to add components to your workflow"
-						iconName="mdi:graph"
-					/>
-				{/if}
+			<div class="flowdrop-canvas">
+				<FlowDropZone ondrop={handleNodeDrop}>
+					<SvelteFlow
+						bind:nodes={flowNodes}
+						bind:edges={flowEdges}
+						{nodeTypes}
+						{defaultEdgeOptions}
+						onconnect={handleConnect}
+						ondelete={handleNodesDelete}
+						minZoom={0.2}
+						maxZoom={3}
+						clickConnect={true}
+						elevateEdgesOnSelect={true}
+						connectionLineType={ConnectionLineType.Bezier}
+						connectionLineComponent={ConnectionLine}
+						snapGrid={[10, 10]}
+						fitView
+					>
+						<Controls />
+						<Background
+							gap={10}
+							bgColor="var(--flowdrop-background-color)"
+							variant={BackgroundVariant.Dots}
+						/>
+						<MiniMap />
+					</SvelteFlow>
+					<!-- Drop Zone Indicator -->
+					{#if flowNodes.length === 0}
+						<CanvasBanner
+							title="Drag components here to start building"
+							description="Use the sidebar to add components to your workflow"
+							iconName="mdi:graph"
+						/>
+					{/if}
+				</FlowDropZone>
 			</div>
 
 			<!-- Status Bar -->

package/dist/helpers/workflowEditorHelper.d.ts

@@ -4,6 +4,12 @@
  */
 import type { WorkflowNode as WorkflowNodeType, NodeMetadata, Workflow, WorkflowEdge, NodeExecutionInfo } from '../types/index.js';
 import type { EndpointConfig } from '../config/endpoints.js';
+/**
+ * Generate a unique node ID based on node type and existing nodes
+ * Format: <node_type>.<number>
+ * Example: boolean_gateway.1, calculator.2
+ */
+export declare function generateNodeId(nodeTypeId: string, existingNodes: WorkflowNodeType[]): string;
 /**
  * Edge styling configuration
  */
@@ -37,7 +43,7 @@ export declare class NodeOperationsHelper {
     static createNodeFromDrop(nodeTypeData: string, position: {
         x: number;
         y: number;
-    }): WorkflowNodeType | null;
+    }, existingNodes?: WorkflowNodeType[]): WorkflowNodeType | null;
 }
 /**
  * Workflow operations helper

package/dist/helpers/workflowEditorHelper.js

@@ -8,6 +8,27 @@ import { workflowApi, nodeApi, setEndpointConfig } from '../services/api.js';
 import { v4 as uuidv4 } from 'uuid';
 import { workflowActions } from '../stores/workflowStore.js';
 import { nodeExecutionService } from '../services/nodeExecutionService.js';
+/**
+ * Generate a unique node ID based on node type and existing nodes
+ * Format: <node_type>.<number>
+ * Example: boolean_gateway.1, calculator.2
+ */
+export function generateNodeId(nodeTypeId, existingNodes) {
+    // Count how many nodes of this type already exist
+    const existingNodeIds = existingNodes
+        .filter((node) => node.data?.metadata?.id === nodeTypeId)
+        .map((node) => node.id);
+    // Extract the numbers from existing IDs with the same prefix
+    const existingNumbers = existingNodeIds
+        .map((id) => {
+        const match = id.match(new RegExp(`^${nodeTypeId}\\.(\\d+)$`));
+        return match ? parseInt(match[1], 10) : 0;
+    })
+        .filter((num) => num > 0);
+    // Find the next available number (highest + 1)
+    const nextNumber = existingNumbers.length > 0 ? Math.max(...existingNumbers) + 1 : 1;
+    return `${nodeTypeId}.${nextNumber}`;
+}
 /**
  * Edge styling configuration
  */
@@ -132,7 +153,7 @@ export class NodeOperationsHelper {
     /**
      * Create a new node from dropped data
      */
-    static createNodeFromDrop(nodeTypeData, position) {
+    static createNodeFromDrop(nodeTypeData, position, existingNodes = []) {
         try {
             const parsedData = JSON.parse(nodeTypeData);
             // Handle both old format (with type: "node") and new format (direct NodeMetadata)
@@ -169,7 +190,8 @@ export class NodeOperationsHelper {
                     metadata: nodeType
                 };
             }
-            const newNodeId = uuidv4();
+            // Generate node ID based on node type and existing nodes
+            const newNodeId = generateNodeId(nodeType.id, existingNodes);
             // All nodes use "universalNode" type
             // UniversalNode component handles internal switching based on metadata and config
             const newNode = {

package/dist/services/api.js

@@ -51,10 +51,37 @@ async function apiRequest(endpointKey, endpointPath, params, options = {}) {
         headers,
         ...options
     });
-    const data = await response.json();
+    // Check if response is JSON
+    const contentType = response.headers.get('content-type');
+    const isJson = contentType?.includes('application/json');
     if (!response.ok) {
-        throw new Error(data.error || `HTTP ${response.status}: ${response.statusText}`);
+        // Try to get error details
+        let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
+        if (isJson) {
+            try {
+                const data = await response.json();
+                errorMessage = data.error || data.message || errorMessage;
+            }
+            catch {
+                // Failed to parse JSON, use default error message
+            }
+        }
+        else {
+            // Response is not JSON (probably HTML error page)
+            try {
+                const text = await response.text();
+                // Extract first 200 characters for debugging
+                const preview = text.substring(0, 200).trim();
+                errorMessage = `${errorMessage}. Server returned: ${preview}...`;
+            }
+            catch {
+                // Failed to read response text
+            }
+        }
+        throw new Error(errorMessage);
     }
+    // Parse successful response
+    const data = await response.json();
     return data;
 }
 /**
@@ -135,9 +162,16 @@ export const workflowApi = {
         if (!endpointConfig) {
             throw new Error('Endpoint configuration not set');
         }
+        // Transform workflow data for Drupal backend compatibility
+        // Drupal expects "label" instead of "name"
+        const drupalWorkflow = {
+            ...workflow,
+            label: workflow.name, // Map name to label for Drupal
+            name: workflow.name // Keep name as well for compatibility
+        };
         const response = await apiRequest('workflows.create', endpointConfig.endpoints.workflows.create, undefined, {
             method: 'POST',
-            body: JSON.stringify(workflow)
+            body: JSON.stringify(drupalWorkflow)
         });
         if (!response.data) {
             throw new Error('Failed to create workflow');
@@ -151,9 +185,18 @@ export const workflowApi = {
         if (!endpointConfig) {
             throw new Error('Endpoint configuration not set');
         }
+        // Transform workflow data for Drupal backend compatibility
+        // Drupal expects "label" instead of "name"
+        const drupalWorkflow = workflow.name
+            ? {
+                ...workflow,
+                label: workflow.name, // Map name to label for Drupal
+                name: workflow.name // Keep name as well for compatibility
+            }
+            : workflow;
         const response = await apiRequest('workflows.update', endpointConfig.endpoints.workflows.update, { id }, {
             method: 'PUT',
-            body: JSON.stringify(workflow)
+            body: JSON.stringify(drupalWorkflow)
         });
         if (!response.data) {
             throw new Error('Failed to update workflow');

package/dist/utils/performanceUtils.d.ts

@@ -2,7 +2,7 @@
  * Performance Utilities
  * Helper functions for optimizing performance in the FlowDrop app
  */
-import type { WorkflowNode, WorkflowEdge } from "../types/index.js";
+import type { WorkflowNode, WorkflowEdge } from '../types/index.js';
 /**
  * Fast shallow comparison for workflow nodes
  * Avoids expensive JSON.stringify operations

package/dist/utils/performanceUtils.js

@@ -16,8 +16,7 @@ export function areNodeArraysEqual(nodes1, nodes2) {
         if (node1?.id !== node2?.id)
             return false;
         // Check position (most common change during drag)
-        if (node1?.position?.x !== node2?.position?.x ||
-            node1?.position?.y !== node2?.position?.y) {
+        if (node1?.position?.x !== node2?.position?.x || node1?.position?.y !== node2?.position?.y) {
             return false;
         }
         // Check selected state

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@d34dman/flowdrop",
 	"license": "MIT",
 	"private": false,
-	"version": "0.0.12",
+	"version": "0.0.14",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",