@d34dman/flowdrop 0.0.11 → 0.0.13

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/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

@@ -34,11 +34,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 +111,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 +163,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 +187,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 +274,23 @@
 		}
 	}
 
+	/**
+	 * Handle node deletion - automatically remove connected edges
+	 */
+	function handleNodesDelete(event: { detail: { nodes: WorkflowNodeType[] } }): void {
+		const deletedNodeIds = new Set(event.detail.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
@@ -344,8 +357,12 @@
 							y: e.clientY - rect.top
 						};
 
-						// Create the node using the helper
-						const newNode = NodeOperationsHelper.createNodeFromDrop(nodeTypeData, position);
+						// 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);
@@ -367,6 +384,7 @@
 					{nodeTypes}
 					{defaultEdgeOptions}
 					onconnect={handleConnect}
+					onnodesdelete={handleNodesDelete}
 					minZoom={0.2}
 					maxZoom={3}
 					clickConnect={true}

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/styles/base.css

@@ -5,27 +5,6 @@
 	box-sizing: border-box;
 }
 
-html,
-body {
-	height: 100%;
-	margin: 0;
-	padding: 0;
-	font-family:
-		system-ui,
-		-apple-system,
-		BlinkMacSystemFont,
-		'Segoe UI',
-		Roboto,
-		'Helvetica Neue',
-		Arial,
-		sans-serif;
-	overflow: hidden;
-}
-
-#svelte {
-	height: 100%;
-}
-
 /* Layout utilities */
 .flowdrop-layout {
 	display: flex;

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.11",
+	"version": "0.0.13",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",