@d34dman/flowdrop 0.0.5 → 0.0.7

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;
 		}
 	}
 
@@ -166,29 +164,41 @@
 	 */
 	async function testApiConnection(): Promise<void> {
 		try {
-			const testUrl = '/api/flowdrop/nodes';
+			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");
 		}
 	}
 
 	/**
 	 * Initialize API endpoints
+	 * Only initializes if not already configured (respects configuration from parent)
 	 */
 	async function initializeApiEndpoints(): Promise<void> {
-		// Use default API base URL - can be overridden via runtime configuration
-		const apiBaseUrl = '/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
 			},
@@ -268,60 +278,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
+			});
 		}
 	}
 
@@ -362,16 +368,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;
 	}
 
@@ -649,7 +655,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">
@@ -659,7 +665,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"
@@ -696,7 +702,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>
@@ -742,7 +748,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

@@ -30,7 +30,7 @@
 	let { pipelineId, workflow, apiClient, baseUrl, onActionsReady }: Props = $props();
 
 	// Initialize API client if not provided
-	const client = apiClient || new FlowDropApiClient(baseUrl || window.location.origin);
+	const client = apiClient || new FlowDropApiClient(baseUrl || "/api/flowdrop");
 
 	// Pipeline status and job data
 	let pipelineStatus = $state<string>('unknown');
@@ -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);

package/dist/components/SquareNode.svelte

@@ -93,13 +93,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);

package/dist/components/UniversalNode.svelte

@@ -20,14 +20,6 @@
 	} from '../utils/nodeWrapper.js';
 	import { resolveComponentName } from '../utils/nodeTypes.js';
 
-	interface Props {
-		data: WorkflowNode['data'] & {
-			nodeId?: string;
-			onConfigOpen?: (node: { id: string; type: string; data: WorkflowNode['data'] }) => void;
-		};
-		selected?: boolean;
-	}
-
 	let {
 		data,
 		selected = false