@d34dman/flowdrop 0.0.4 → 0.0.6

package/README.md

@@ -42,34 +42,34 @@ npm install @d34dman/flowdrop
 ### Basic Import
 
 ```javascript
-import { WorkflowEditor } from "@d34dman/flowdrop";
-import "@d34dman/flowdrop/styles/base.css";
+import { WorkflowEditor } from '@d34dman/flowdrop';
+import '@d34dman/flowdrop/styles/base.css';
 ```
 
 ### Using the WorkflowEditor Component
 
 ```svelte
 <script lang="ts">
-  import { WorkflowEditor } from "@d34dman/flowdrop";
-  import type { NodeMetadata, Workflow } from "@d34dman/flowdrop";
-
-  let nodes: NodeMetadata[] = [
-    {
-      id: "text_input",
-      name: "Text Input",
-      category: "input_output",
-      description: "User input field",
-      inputs: [],
-      outputs: [{ id: "value", name: "Value", type: "output", dataType: "string" }]
-    }
-  ];
-
-  let workflow: Workflow = {
-    id: "workflow_1",
-    name: "My Workflow",
-    nodes: [],
-    edges: []
-  };
+	import { WorkflowEditor } from '@d34dman/flowdrop';
+	import type { NodeMetadata, Workflow } from '@d34dman/flowdrop';
+
+	let nodes: NodeMetadata[] = [
+		{
+			id: 'text_input',
+			name: 'Text Input',
+			category: 'input_output',
+			description: 'User input field',
+			inputs: [],
+			outputs: [{ id: 'value', name: 'Value', type: 'output', dataType: 'string' }]
+		}
+	];
+
+	let workflow: Workflow = {
+		id: 'workflow_1',
+		name: 'My Workflow',
+		nodes: [],
+		edges: []
+	};
 </script>
 
 <WorkflowEditor {nodes} />
@@ -81,34 +81,34 @@ import "@d34dman/flowdrop/styles/base.css";
 
 ```svelte
 <script>
-  import { WorkflowEditor, NodeSidebar } from "@d34dman/flowdrop";
+	import { WorkflowEditor, NodeSidebar } from '@d34dman/flowdrop';
 </script>
 
 <div class="editor-container">
-  <NodeSidebar {nodes} />
-  <WorkflowEditor {nodes} />
+	<NodeSidebar {nodes} />
+	<WorkflowEditor {nodes} />
 </div>
 ```
 
 #### 2. Using Mount Functions (Vanilla JS/Other Frameworks)
 
 ```javascript
-import { mountWorkflowEditor } from "@d34dman/flowdrop";
+import { mountWorkflowEditor } from '@d34dman/flowdrop';
 
-const container = document.getElementById("workflow-container");
+const container = document.getElementById('workflow-container');
 const editor = mountWorkflowEditor(container, {
-  nodes: availableNodes,
-  endpointConfig: {
-    baseUrl: "/api/flowdrop",
-    endpoints: {
-      workflows: {
-        list: "/workflows",
-        get: "/workflows/{id}",
-        create: "/workflows",
-        update: "/workflows/{id}"
-      }
-    }
-  }
+	nodes: availableNodes,
+	endpointConfig: {
+		baseUrl: '/api/flowdrop',
+		endpoints: {
+			workflows: {
+				list: '/workflows',
+				get: '/workflows/{id}',
+				create: '/workflows',
+				update: '/workflows/{id}'
+			}
+		}
+	}
 });
 
 // Cleanup
@@ -121,15 +121,15 @@ editor.destroy();
 
 ```javascript
 Drupal.behaviors.flowdropEditor = {
-  attach: function (context, settings) {
-    const container = context.querySelector(".flowdrop-container");
-    if (container && window.FlowDrop) {
-      window.FlowDrop.mountWorkflowEditor(container, {
-        endpointConfig: settings.flowdrop.endpointConfig,
-        nodes: settings.flowdrop.nodes
-      });
-    }
-  }
+	attach: function (context, settings) {
+		const container = context.querySelector('.flowdrop-container');
+		if (container && window.FlowDrop) {
+			window.FlowDrop.mountWorkflowEditor(container, {
+				endpointConfig: settings.flowdrop.endpointConfig,
+				nodes: settings.flowdrop.nodes
+			});
+		}
+	}
 };
 ```
 
@@ -140,6 +140,7 @@ Drupal.behaviors.flowdropEditor = {
 Main editor component for creating and editing workflows.
 
 **Props:**
+
 - `nodes`: Array of available node types
 - `endpointConfig`: API endpoint configuration
 - `height`: Editor height (default: "100vh")
@@ -152,6 +153,7 @@ Main editor component for creating and editing workflows.
 Sidebar displaying available node types.
 
 **Props:**
+
 - `nodes`: Array of node types to display
 
 ### ConfigSidebar
@@ -159,6 +161,7 @@ Sidebar displaying available node types.
 Configuration panel for selected nodes.
 
 **Props:**
+
 - `isOpen`: Sidebar visibility
 - `configSchema`: JSON schema for configuration
 - `configValues`: Current configuration values
@@ -170,29 +173,29 @@ Configuration panel for selected nodes.
 Configure the API client to connect to your backend:
 
 ```typescript
-import { createEndpointConfig } from "@d34dman/flowdrop";
+import { createEndpointConfig } from '@d34dman/flowdrop';
 
 const config = createEndpointConfig({
-  baseUrl: "https://api.example.com",
-  endpoints: {
-    nodes: {
-      list: "/nodes",
-      get: "/nodes/{id}"
-    },
-    workflows: {
-      list: "/workflows",
-      get: "/workflows/{id}",
-      create: "/workflows",
-      update: "/workflows/{id}",
-      delete: "/workflows/{id}",
-      execute: "/workflows/{id}/execute"
-    }
-  },
-  timeout: 30000,
-  auth: {
-    type: "bearer",
-    token: "your-token"
-  }
+	baseUrl: 'https://api.example.com',
+	endpoints: {
+		nodes: {
+			list: '/nodes',
+			get: '/nodes/{id}'
+		},
+		workflows: {
+			list: '/workflows',
+			get: '/workflows/{id}',
+			create: '/workflows',
+			update: '/workflows/{id}',
+			delete: '/workflows/{id}',
+			execute: '/workflows/{id}/execute'
+		}
+	},
+	timeout: 30000,
+	auth: {
+		type: 'bearer',
+		token: 'your-token'
+	}
 });
 ```
 
@@ -204,10 +207,10 @@ Override CSS custom properties:
 
 ```css
 :root {
-  --flowdrop-background-color: #f9fafb;
-  --flowdrop-primary-color: #3b82f6;
-  --flowdrop-border-color: #e5e7eb;
-  --flowdrop-text-color: #1f2937;
+	--flowdrop-background-color: #f9fafb;
+	--flowdrop-primary-color: #3b82f6;
+	--flowdrop-border-color: #e5e7eb;
+	--flowdrop-text-color: #1f2937;
 }
 ```
 
@@ -217,37 +220,37 @@ Define custom node types:
 
 ```typescript
 const customNode: NodeMetadata = {
-  id: "custom_processor",
-  name: "Custom Processor",
-  category: "data_processing",
-  description: "Process data with custom logic",
-  icon: "mdi:cog",
-  color: "#3b82f6",
-  inputs: [
-    {
-      id: "input",
-      name: "Input",
-      type: "input",
-      dataType: "mixed"
-    }
-  ],
-  outputs: [
-    {
-      id: "output",
-      name: "Output",
-      type: "output",
-      dataType: "mixed"
-    }
-  ],
-  configSchema: {
-    type: "object",
-    properties: {
-      operation: {
-        type: "string",
-        title: "Operation"
-      }
-    }
-  }
+	id: 'custom_processor',
+	name: 'Custom Processor',
+	category: 'data_processing',
+	description: 'Process data with custom logic',
+	icon: 'mdi:cog',
+	color: '#3b82f6',
+	inputs: [
+		{
+			id: 'input',
+			name: 'Input',
+			type: 'input',
+			dataType: 'mixed'
+		}
+	],
+	outputs: [
+		{
+			id: 'output',
+			name: 'Output',
+			type: 'output',
+			dataType: 'mixed'
+		}
+	],
+	configSchema: {
+		type: 'object',
+		properties: {
+			operation: {
+				type: 'string',
+				title: 'Operation'
+			}
+		}
+	}
 };
 ```
 

package/dist/components/App.svelte

@@ -17,7 +17,6 @@
 	import { createEndpointConfig } from '../config/endpoints.js';
 	import type { EndpointConfig } from '../config/endpoints.js';
 	import { workflowStore, workflowActions, workflowName } from '../stores/workflowStore.js';
-	import { resolveComponentName } from '../utils/nodeTypes.js';
 	import { apiToasts, dismissToast } from '../services/toastService.js';
 
 	// Configuration props for runtime customization
@@ -42,6 +41,8 @@
 			variant?: 'primary' | 'secondary' | 'outline';
 			onclick?: (event: Event) => void;
 		}>;
+		// API configuration - optional, defaults to '/api/flowdrop'
+		apiBaseUrl?: string;
 	}
 
 	let {
@@ -55,7 +56,8 @@
 		nodeStatuses = {},
 		pipelineId,
 		navbarTitle,
-		navbarActions = []
+		navbarActions = [],
+		apiBaseUrl
 	}: Props = $props();
 
 	// Create breadcrumb-style title - at top level to avoid store subscription issues
@@ -75,7 +77,6 @@
 	// Remove workflow prop - use global store directly
 	// let workflow = $derived($workflowStore || initialWorkflow);
 	let error = $state<string | null>(null);
-	let loading = $state(true);
 	let endpointConfig = $state<EndpointConfig | null>(null);
 
 	// ConfigSidebar state
@@ -130,7 +131,6 @@
 		// Show loading toast
 		const loadingToast = apiToasts.loading('Loading node types');
 		try {
-			loading = true;
 			error = null;
 
 			const fetchedNodes = await api.nodes.getNodes();
@@ -149,8 +149,6 @@
 
 			// Fallback to sample data
 			nodes = sampleNodes;
-		} finally {
-			loading = false;
 		}
 	}
 
@@ -183,14 +181,23 @@
 
 	/**
 	 * Initialize API endpoints
+	 * Only initializes if not already configured (respects configuration from parent)
 	 */
 	async function initializeApiEndpoints(): Promise<void> {
-		// Use the same environment variable priority as the global save function
-		// Prioritize VITE_API_BASE_URL since it's configured correctly
-		const apiBaseUrl =
-			import.meta.env.VITE_API_BASE_URL || import.meta.env.VITE_DRUPAL_API_URL || '/api/flowdrop';
+		// Check if endpoint config is already set (e.g., by parent layout)
+		const { getEndpointConfig } = await import('../services/api.js');
+		const existingConfig = getEndpointConfig();
 
-		const config = createEndpointConfig(apiBaseUrl, {
+		// If config already exists and no override provided, use existing
+		if (existingConfig && !apiBaseUrl) {
+			endpointConfig = existingConfig;
+			return;
+		}
+
+		// Use provided apiBaseUrl or default
+		const baseUrl = apiBaseUrl || '/api/flowdrop';
+
+		const config = createEndpointConfig(baseUrl, {
 			auth: {
 				type: 'none' // No authentication for now
 			},
@@ -270,60 +277,56 @@
 	 * Save workflow - exposed API function
 	 */
 	async function saveWorkflow(): Promise<void> {
-		try {
-			// Wait for any pending DOM updates before saving
-			await tick();
+		// 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');
+		// 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;
+		// Use current workflow from global store
+		const workflowToSave = $workflowStore;
 
-			if (!workflowToSave) {
-				return;
-			}
+		if (!workflowToSave) {
+			return;
+		}
 
-			// Determine the workflow ID
-			let workflowId: string;
-			if (workflowToSave.id) {
-				workflowId = workflowToSave.id;
-			} else {
-				workflowId = uuidv4();
+		// Determine the workflow ID
+		let workflowId: string;
+		if (workflowToSave.id) {
+			workflowId = workflowToSave.id;
+		} else {
+			workflowId = uuidv4();
+		}
+
+		// 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()
 			}
+		};
 
-			// Create workflow object for saving
-			const finalWorkflow = {
-				id: workflowId,
-				name: workflowToSave.name || 'Untitled Workflow',
-				description: workflowToSave.description || '',
-				nodes: workflowToSave.nodes || [],
-				edges: workflowToSave.edges || [],
+		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: {
-					version: '1.0.0',
-					createdAt: workflowToSave.metadata?.createdAt || new Date().toISOString(),
-					updatedAt: new Date().toISOString()
+					...finalWorkflow.metadata,
+					...savedWorkflow.metadata
 				}
-			};
-
-			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
-					}
-				});
-			}
-		} catch (error) {
-			throw error; // Re-throw so caller can handle
+			});
 		}
 	}
 
@@ -364,16 +367,16 @@
 			link.download = `${finalWorkflow.name}.json`;
 			link.click();
 			URL.revokeObjectURL(url);
-		} catch (error) {
+		} catch {
 			// Export failed
 		}
 	}
 
 	// Expose save and export functions globally for external access
 	if (typeof window !== 'undefined') {
-		// @ts-ignore - Adding to window for external access
+		// @ts-expect-error - Adding to window for external access
 		window.flowdropSave = saveWorkflow;
-		// @ts-ignore - Adding to window for external access
+		// @ts-expect-error - Adding to window for external access
 		window.flowdropExport = exportWorkflow;
 	}
 
@@ -651,7 +654,7 @@
 
 										<!-- Render configuration fields based on schema -->
 										{#if configSchema.properties}
-											{#each Object.entries(configSchema.properties) as [key, field]}
+											{#each Object.entries(configSchema.properties) as [key, field] (key)}
 												{@const fieldConfig = field as any}
 												{#if fieldConfig.format !== 'hidden'}
 													<div class="flowdrop-config-sidebar__field">
@@ -661,7 +664,7 @@
 														{#if fieldConfig.enum && fieldConfig.multiple}
 															<!-- Checkboxes for enum with multiple selection -->
 															<div class="flowdrop-config-sidebar__checkbox-group">
-																{#each fieldConfig.enum as option}
+																{#each fieldConfig.enum as option (String(option))}
 																	<label class="flowdrop-config-sidebar__checkbox-item">
 																		<input
 																			type="checkbox"
@@ -698,7 +701,7 @@
 																class="flowdrop-config-sidebar__select"
 																bind:value={configValues[key]}
 															>
-																{#each fieldConfig.enum as option}
+																{#each fieldConfig.enum as option (String(option))}
 																	<option value={String(option)}>{String(option)}</option>
 																{/each}
 															</select>
@@ -744,7 +747,7 @@
 																bind:value={configValues[key]}
 															>
 																{#if fieldConfig.options}
-																	{#each fieldConfig.options as option}
+																	{#each fieldConfig.options as option (String(option.value))}
 																		{@const optionConfig = option as any}
 																		<option value={String(optionConfig.value)}
 																			>{String(optionConfig.label)}</option

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

@@ -17,6 +17,7 @@ interface Props {
         variant?: 'primary' | 'secondary' | 'outline';
         onclick?: (event: Event) => void;
     }>;
+    apiBaseUrl?: string;
 }
 declare const App: import("svelte").Component<Props, {}, "">;
 type App = ReturnType<typeof App>;

package/dist/components/Navbar.svelte

@@ -33,19 +33,9 @@
 
 	let { primaryActions = [], showStatus = true, title, breadcrumbs = [] }: Props = $props();
 
-	// Simple current path tracking without SvelteKit dependency
-	let currentPath = $state(typeof window !== 'undefined' ? window.location.pathname : '/');
-
 	// Dropdown state
 	let isDropdownOpen = $state(false);
 
-	function isActive(href: string): boolean {
-		if (href === '/') {
-			return currentPath === '/';
-		}
-		return currentPath.startsWith(href);
-	}
-
 	// Close dropdown when clicking outside
 	function handleClickOutside(event: MouseEvent) {
 		const target = event.target as HTMLElement;
@@ -93,7 +83,7 @@
 				<div class="flowdrop-navbar__breadcrumb-container">
 					<nav class="flowdrop-navbar__breadcrumb" aria-label="Breadcrumb">
 						<ol class="flowdrop-navbar__breadcrumb-list">
-							{#each breadcrumbs as breadcrumb, index}
+							{#each breadcrumbs as breadcrumb, index (index)}
 								<li class="flowdrop-navbar__breadcrumb-item">
 									{#if breadcrumb.href && index < breadcrumbs.length - 1}
 										<a href={breadcrumb.href} class="flowdrop-navbar__breadcrumb-link">

package/dist/components/NodeSidebar.svelte

@@ -10,6 +10,7 @@
 	import Icon from '@iconify/svelte';
 	import { getNodeIcon, getCategoryIcon } from '../utils/icons.js';
 	import { getCategoryColorToken } from '../utils/colors.js';
+	import { SvelteSet } from 'svelte/reactivity';
 
 	interface Props {
 		nodes: NodeMetadata[];
@@ -29,7 +30,7 @@
 	function getCategories(): NodeCategory[] {
 		const nodes = props.nodes || [];
 		if (nodes.length === 0) return [];
-		const categories = new Set<NodeCategory>();
+		const categories = new SvelteSet<NodeCategory>();
 		nodes.forEach((node) => categories.add(node.category));
 		return Array.from(categories).sort();
 	}

package/dist/components/NodeStatusOverlay.svelte

@@ -19,7 +19,6 @@
 	} from '../utils/nodeStatus.js';
 
 	interface Props {
-		nodeId: string;
 		executionInfo?: NodeExecutionInfo;
 		position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 		size?: 'sm' | 'md' | 'lg';

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

@@ -1,6 +1,5 @@
 import type { NodeExecutionInfo } from '../types/index.js';
 interface Props {
-    nodeId: string;
     executionInfo?: NodeExecutionInfo;
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
     size?: 'sm' | 'md' | 'lg';

package/dist/components/PipelineStatus.svelte

@@ -63,7 +63,6 @@
 
 	// Loading and error states
 	let isLoadingJobStatus = $state(false);
-	let error = $state<string | null>(null);
 
 	// Logs sidebar state
 	let isLogsSidebarOpen = $state(false);
@@ -147,42 +146,6 @@
 		isLogsSidebarOpen = !isLogsSidebarOpen;
 	}
 
-	/**
-	 * Get status color for visual indicators
-	 */
-	function getStatusColor(status: string): string {
-		switch (status) {
-			case 'completed':
-				return '#10b981'; // green
-			case 'running':
-				return '#3b82f6'; // blue
-			case 'error':
-			case 'failed':
-				return '#ef4444'; // red
-			case 'pending':
-			default:
-				return '#6b7280'; // gray
-		}
-	}
-
-	/**
-	 * Get status icon for visual indicators
-	 */
-	function getStatusIcon(status: string): string {
-		switch (status) {
-			case 'completed':
-				return 'mdi:check-circle';
-			case 'running':
-				return 'mdi:loading';
-			case 'error':
-			case 'failed':
-				return 'mdi:alert-circle';
-			case 'pending':
-			default:
-				return 'mdi:clock-outline';
-		}
-	}
-
 	/**
 	 * Get pipeline actions for the parent navbar
 	 */

package/dist/components/SimpleNode.svelte

@@ -107,13 +107,6 @@
 		props.data.metadata?.outputs?.find((port) => port.dataType !== 'trigger')
 	);
 
-	// Use trigger port if present, otherwise use first data port
-	let firstInputPort = $derived(triggerInputPort || firstDataInputPort);
-	let firstOutputPort = $derived(triggerOutputPort || firstDataOutputPort);
-
-	let hasInput = $derived(!!firstInputPort);
-	let hasOutput = $derived(!!firstOutputPort);
-
 	// Check if we need to show both trigger and data ports
 	let hasBothInputTypes = $derived(!!triggerInputPort && !!firstDataInputPort);
 	let hasBothOutputTypes = $derived(!!triggerOutputPort && !!firstDataOutputPort);