@d34dman/flowdrop 0.0.60 → 0.0.62

package/dist/components/App.svelte

@@ -5,7 +5,7 @@
 -->
 
 <script lang="ts">
-	import { onMount, tick } from 'svelte';
+	import { onMount } from 'svelte';
 	import MainLayout from './layouts/MainLayout.svelte';
 	import WorkflowEditor from './WorkflowEditor.svelte';
 	import NodeSidebar from './NodeSidebar.svelte';
@@ -28,18 +28,21 @@
 	import type { FlowDropEventHandlers, FlowDropFeatures } from '../types/events.js';
 	import { mergeFeatures } from '../types/events.js';
 	import {
-		workflowStore,
+		getWorkflowStore,
 		workflowActions,
-		workflowName,
-		workflowFormat,
+		getWorkflowName,
+		getWorkflowFormat,
 		markAsSaved
-	} from '../stores/workflowStore.js';
+	} from '../stores/workflowStore.svelte.js';
+	import { globalSaveWorkflow, globalExportWorkflow } from '../services/globalSave.js';
 	import { apiToasts, dismissToast } from '../services/toastService.js';
 	import { initAutoSave } from '../services/autoSaveService.js';
-	import { uiSettings } from '../stores/settingsStore.js';
+	import { getUiSettings } from '../stores/settingsStore.svelte.js';
 	import { initializePortCompatibility } from '../utils/connections.js';
 	import { DEFAULT_PORT_CONFIG } from '../config/defaultPortConfig.js';
 	import { workflowFormatRegistry } from '../registry/workflowFormatRegistry.js';
+	import { logger } from '../utils/logger.js';
+	import { validateWorkflowData } from '../utils/validation.js';
 
 	/**
 	 * Configuration props for runtime customization
@@ -120,10 +123,11 @@
 			return navbarTitle;
 		}
 		// Default workflow title logic
-		if (!$workflowName || $workflowName === 'Untitled Workflow') {
+		const wfName = getWorkflowName();
+		if (!wfName || wfName === 'Untitled Workflow') {
 			return 'Workflow / New Workflow';
 		}
-		return `Workflow / ${$workflowName}`;
+		return `Workflow / ${wfName}`;
 	});
 
 	let nodes = $state<NodeMetadata[]>([]);
@@ -175,15 +179,16 @@
 
 	// Workflow configuration values
 	let workflowConfigValues = $derived({
-		name: $workflowName || '',
-		description: $workflowStore?.description || '',
-		format: $workflowStore?.metadata?.format || 'flowdrop'
+		name: getWorkflowName() || '',
+		description: getWorkflowStore()?.description || '',
+		format: getWorkflowStore()?.metadata?.format || 'flowdrop'
 	});
 
 	// Get the current node from the workflow store
 	let selectedNodeForConfig = $derived(() => {
-		if (!selectedNodeId || !$workflowStore) return null;
-		return $workflowStore.nodes.find((node) => node.id === selectedNodeId) || null;
+		const wf = getWorkflowStore();
+		if (!selectedNodeId || !wf) return null;
+		return wf.nodes.find((node) => node.id === selectedNodeId) || null;
 	});
 
 	// WorkflowEditor reference for save functionality
@@ -380,11 +385,13 @@
 	/**
 	 * Handle workflow configuration save
 	 */
-	async function handleWorkflowSave(config: any): Promise<void> {
+	async function handleWorkflowSave(config: Record<string, unknown>): Promise<void> {
 		// Update the workflow store
-		if ($workflowStore) {
-			$workflowStore.name = config.name;
-			$workflowStore.description = config.description;
+		if (getWorkflowStore()) {
+			workflowActions.batchUpdate({
+				name: config.name as string | undefined,
+				description: config.description as string | undefined
+			});
 		}
 
 		// Close the sidebar
@@ -394,209 +401,101 @@
 		try {
 			await saveWorkflow();
 		} catch (error) {
-			console.error('Failed to save workflow to backend:', error);
+			logger.error('Failed to save workflow to backend:', error);
 			// Note: We don't throw the error here to avoid breaking the UI flow
 			// The user can still manually save via the main Save button if needed
 		}
 	}
 
 	/**
-	 * Save workflow - exposed API function
+	 * Save workflow - thin wrapper that delegates to globalSaveWorkflow().
 	 *
-	 * Integrates with event handlers for enterprise customization.
-	 * Uses enhanced API client with authProvider support when available.
+	 * All save logic (blur flush, metadata construction, API call, event hooks,
+	 * toast notifications) lives in globalSave.ts — the single source of truth.
 	 */
 	async function saveWorkflow(): Promise<void> {
-		// Flush any pending form changes by blurring the active element.
-		// This ensures focusout handlers (like ConfigForm's handleFormBlur)
-		// sync local state to the global store before we read it.
-		if (document.activeElement instanceof HTMLElement) {
-			document.activeElement.blur();
-		}
-
-		// Wait for any pending DOM updates before saving
-		await tick();
-
-		// Use current workflow from global store
-		const workflowToSave = $workflowStore;
-
-		if (!workflowToSave) {
-			return;
-		}
-
-		// Call onBeforeSave if provided - allows cancellation
-		if (eventHandlers?.onBeforeSave) {
-			const shouldContinue = await eventHandlers.onBeforeSave(workflowToSave);
-			if (shouldContinue === false) {
-				// Save cancelled by event handler
-				return;
-			}
-		}
-
-		// Show loading toast (if enabled)
-		const loadingToast = features.showToasts ? apiToasts.loading('Saving workflow') : null;
-
-		try {
-			// Import uuid for new workflow ID generation
-			const { v4: uuidv4 } = await import('uuid');
-
-			// Determine the workflow ID
-			let workflowId: string;
-			if (workflowToSave.id) {
-				workflowId = workflowToSave.id;
-			} else {
-				workflowId = uuidv4();
-			}
+		await globalSaveWorkflow({
+			apiClient: apiClient ?? undefined,
+			eventHandlers,
+			features,
+			onMarkAsSaved: markAsSaved
+		});
+	}
 
-			// Create workflow object for saving (spread existing metadata to preserve format, tags, etc.)
-			const finalWorkflow: Workflow = {
-				id: workflowId,
-				name: workflowToSave.name || 'Untitled Workflow',
-				description: workflowToSave.description || '',
-				nodes: workflowToSave.nodes || [],
-				edges: workflowToSave.edges || [],
-				metadata: {
-					...workflowToSave.metadata,
-					version: workflowToSave.metadata?.version || '1.0.0',
-					format: workflowToSave.metadata?.format || DEFAULT_WORKFLOW_FORMAT,
-					createdAt: workflowToSave.metadata?.createdAt || new Date().toISOString(),
-					updatedAt: new Date().toISOString()
-				}
-			};
+	/**
+	 * Export workflow - thin wrapper that delegates to globalExportWorkflow().
+	 *
+	 * All export logic (flush, metadata construction, file download) lives
+	 * in globalSave.ts — the single source of truth.
+	 */
+	async function exportWorkflow(): Promise<void> {
+		await globalExportWorkflow({ features });
+	}
 
-			// Use enhanced client with authProvider if available, otherwise fall back to legacy api
-			let savedWorkflow: Workflow;
-			if (apiClient) {
-				// Check if this is an existing workflow (non-UUID ID indicates existing)
-				const isExistingWorkflow =
-					finalWorkflow.id &&
-					finalWorkflow.id.length > 0 &&
-					!finalWorkflow.id.match(
-						/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
-					);
-
-				if (isExistingWorkflow) {
-					savedWorkflow = await apiClient.updateWorkflow(finalWorkflow.id, finalWorkflow);
-				} else {
-					savedWorkflow = await apiClient.saveWorkflow(finalWorkflow);
+	/**
+	 * Import workflow from a JSON file
+	 *
+	 * Reads the selected file, validates its structure, and loads it into the workflow store.
+	 */
+	function importWorkflow(file: File): void {
+		const reader = new FileReader();
+		reader.onload = (event) => {
+			try {
+				const text = event.target?.result;
+				if (typeof text !== 'string') {
+					throw new Error('Could not read file contents.');
 				}
-			} else {
-				// Fall back to legacy workflowApi
-				const { workflowApi } = await import('../services/api.js');
-				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
+				const data = JSON.parse(text);
+				const validation = validateWorkflowData(data);
+				if (!validation.valid) {
+					if (features.showToasts) {
+						apiToasts.error('Import workflow', validation.error ?? 'Invalid workflow JSON');
 					}
-				});
-			}
-
-			// Mark as saved (clears dirty state)
-			markAsSaved();
-
-			// Dismiss loading toast and show success
-			if (loadingToast) {
-				dismissToast(loadingToast);
+					logger.warn('Workflow import validation failed:', validation.error);
+					return;
+				}
+				workflowActions.initialize(data as Workflow);
+				if (features.showToasts) {
+					apiToasts.success('Import workflow', 'Workflow imported successfully');
+				}
+				if (eventHandlers?.onWorkflowLoad) {
+					eventHandlers.onWorkflowLoad(data as Workflow);
+				}
+			} catch (error) {
+				const errorObj = error instanceof Error ? error : new Error('Unknown error occurred');
+				logger.error('Workflow import failed:', errorObj);
+				if (features.showToasts) {
+					apiToasts.error('Import workflow', errorObj.message);
+				}
 			}
+		};
+		reader.onerror = () => {
+			const message = 'Failed to read the selected file.';
+			logger.error(message);
 			if (features.showToasts) {
-				apiToasts.success('Save workflow', 'Workflow saved successfully');
-			}
-
-			// Call onAfterSave if provided
-			if (eventHandlers?.onAfterSave) {
-				await eventHandlers.onAfterSave(savedWorkflow);
-			}
-		} catch (error) {
-			// Dismiss loading toast
-			if (loadingToast) {
-				dismissToast(loadingToast);
-			}
-
-			const errorObj = error instanceof Error ? error : new Error('Unknown error occurred');
-
-			// Call onSaveError if provided
-			if (eventHandlers?.onSaveError && workflowToSave) {
-				await eventHandlers.onSaveError(errorObj, workflowToSave);
-			}
-
-			// Check if parent wants to handle API errors
-			let suppressToast = false;
-			if (eventHandlers?.onApiError) {
-				suppressToast = eventHandlers.onApiError(errorObj, 'save') === true;
-			}
-
-			// Show error toast if not suppressed
-			if (features.showToasts && !suppressToast) {
-				apiToasts.error('Save workflow', errorObj.message);
+				apiToasts.error('Import workflow', message);
 			}
-
-			throw error; // Re-throw to allow calling code to handle if needed
-		}
+		};
+		reader.readAsText(file);
 	}
 
 	/**
-	 * Export workflow - exposed API function
+	 * Handle file input change event for workflow import
 	 */
-	async function exportWorkflow(): Promise<void> {
-		try {
-			// Wait for any pending DOM updates before exporting
-			await tick();
-
-			// Use current workflow from global store
-			const workflowToExport = $workflowStore;
-
-			if (!workflowToExport) {
-				return;
-			}
-
-			// Create workflow object for export (spread existing metadata to preserve format, tags, etc.)
-			const finalWorkflow = {
-				id: workflowToExport.id || 'untitled-workflow',
-				name: workflowToExport.name || 'Untitled Workflow',
-				nodes: workflowToExport.nodes || [],
-				edges: workflowToExport.edges || [],
-				metadata: {
-					...workflowToExport.metadata,
-					version: workflowToExport.metadata?.version || '1.0.0',
-					format: workflowToExport.metadata?.format || DEFAULT_WORKFLOW_FORMAT,
-					createdAt: workflowToExport.metadata?.createdAt || new Date().toISOString(),
-					updatedAt: new Date().toISOString()
-				}
-			};
-
-			// Create and download the file
-			const dataStr = JSON.stringify(finalWorkflow, null, 2);
-			const dataBlob = new Blob([dataStr], { type: 'application/json' });
-			const url = URL.createObjectURL(dataBlob);
-			const link = document.createElement('a');
-			link.href = url;
-			link.download = `${finalWorkflow.name}.json`;
-			link.click();
-			URL.revokeObjectURL(url);
-		} catch {
-			// Export failed
+	function handleImportFileChange(event: Event): void {
+		const input = event.target as HTMLInputElement;
+		const file = input.files?.[0];
+		if (file) {
+			importWorkflow(file);
 		}
-	}
-
-	// Expose save and export functions globally for external access
-	if (typeof window !== 'undefined') {
-		window.flowdropSave = saveWorkflow;
-		window.flowdropExport = exportWorkflow;
+		// Reset input so same file can be re-imported
+		input.value = '';
 	}
 
 	// Function to handle clicks outside the sidebar
 	function handleCanvasClick(event: MouseEvent): void {
 		// Check if the click is outside the right sidebar
-		const rightSidebar = document.querySelector('.flowdrop-sidebar--right');
+		const rightSidebar = document.querySelector('.flowdrop-main-layout__sidebar--right');
 		if (rightSidebar && !rightSidebar.contains(event.target as Node)) {
 			// Close sidebar when clicking outside of it
 			if (isConfigSidebarOpen) {
@@ -657,10 +556,10 @@
 			},
 			onError: (error) => {
 				// Don't show toast for auto-save errors to avoid noise
-				console.warn('Auto-save failed:', error);
+				logger.warn('Auto-save failed:', error);
 			},
 			onSuccess: () => {
-				console.debug('Auto-saved workflow');
+				logger.debug('Auto-saved workflow');
 			}
 		});
 
@@ -672,7 +571,7 @@
 
 	// Monitor workflow store changes for testing node drag updates
 	$effect(() => {
-		const currentWorkflow = $workflowStore;
+		const currentWorkflow = getWorkflowStore();
 		if (currentWorkflow) {
 			// Workflow store updated
 		}
@@ -689,7 +588,12 @@
 	 * Calculate left sidebar width based on collapsed state
 	 * When collapsed, use 48px; otherwise use user-configured width
 	 */
-	const leftSidebarWidth = $derived($uiSettings.sidebarCollapsed ? 48 : $uiSettings.sidebarWidth);
+	const leftSidebarWidth = $derived(
+		getUiSettings().sidebarCollapsed ? 48 : getUiSettings().sidebarWidth
+	);
+
+	// File input reference for workflow import
+	let fileInputRef = $state<HTMLInputElement | null>(null);
 </script>
 
 <svelte:head>
@@ -697,6 +601,15 @@
 	<meta name="description" content="A modern drag-and-drop workflow editor for LLM applications" />
 </svelte:head>
 
+<!-- Hidden file input for workflow JSON import -->
+<input
+	bind:this={fileInputRef}
+	type="file"
+	accept=".json,application/json"
+	style="display: none;"
+	onchange={handleImportFileChange}
+/>
+
 <!-- MainLayout wrapper for workflow editor -->
 <MainLayout
 	showHeader={showNavbar}
@@ -707,8 +620,8 @@
 	headerHeight={60}
 	{leftSidebarWidth}
 	rightSidebarWidth={400}
-	leftSidebarMinWidth={$uiSettings.sidebarCollapsed ? 48 : 280}
-	leftSidebarMaxWidth={$uiSettings.sidebarCollapsed ? 48 : 450}
+	leftSidebarMinWidth={getUiSettings().sidebarCollapsed ? 48 : 280}
+	leftSidebarMaxWidth={getUiSettings().sidebarCollapsed ? 48 : 450}
 	rightSidebarMinWidth={320}
 	rightSidebarMaxWidth={550}
 	enableLeftSplitPane={false}
@@ -742,6 +655,16 @@
 								exportWorkflow();
 							}
 						},
+						{
+							label: 'Import',
+							href: '#import',
+							icon: 'heroicons:arrow-up-tray',
+							variant: 'outline',
+							onclick: (e) => {
+								e.preventDefault();
+								fileInputRef?.click();
+							}
+						},
 						{
 							label: 'Workflow Settings',
 							href: '#settings',
@@ -760,7 +683,7 @@
 
 	<!-- Left Sidebar: Node Components -->
 	{#snippet leftSidebar()}
-		<NodeSidebar {nodes} activeFormat={$workflowFormat} />
+		<NodeSidebar {nodes} activeFormat={getWorkflowFormat()} />
 	{/snippet}
 
 	<!-- Right Sidebar: Configuration or Workflow Settings -->
@@ -768,10 +691,10 @@
 		{#if isWorkflowSettingsOpen}
 			<ConfigPanel
 				title="Workflow Settings"
-				id={$workflowStore?.id}
+				id={getWorkflowStore()?.id}
 				details={[
-					{ label: 'Nodes', value: String($workflowStore?.nodes?.length ?? 0) },
-					{ label: 'Connections', value: String($workflowStore?.edges?.length ?? 0) }
+					{ label: 'Nodes', value: String(getWorkflowStore()?.nodes?.length ?? 0) },
+					{ label: 'Connections', value: String(getWorkflowStore()?.edges?.length ?? 0) }
 				]}
 				configTitle="Settings"
 				onClose={() => (isWorkflowSettingsOpen = false)}
@@ -783,18 +706,19 @@
 					showUIExtensions={false}
 					onChange={(config) => {
 						// Sync workflow settings changes immediately on field blur
-						if ($workflowStore) {
+						const wf = getWorkflowStore();
+						if (wf) {
 							const newFormat = (config.format as string) || DEFAULT_WORKFLOW_FORMAT;
-							const currentFormat = $workflowStore.metadata?.format || DEFAULT_WORKFLOW_FORMAT;
+							const currentFormat = wf.metadata?.format || DEFAULT_WORKFLOW_FORMAT;
 
 							// Warn about incompatible nodes when format changes
 							if (newFormat !== currentFormat) {
-								const incompatibleNodes = $workflowStore.nodes?.filter((node) => {
+								const incompatibleNodes = wf.nodes?.filter((node) => {
 									const formats = node.data?.metadata?.formats;
 									return formats && formats.length > 0 && !formats.includes(newFormat);
 								});
 								if (incompatibleNodes && incompatibleNodes.length > 0) {
-									console.warn(
+									logger.warn(
 										`Format changed to '${newFormat}'. ${incompatibleNodes.length} node(s) are not compatible with this format and may not export correctly:`,
 										incompatibleNodes.map((n) => n.data?.label || n.type)
 									);
@@ -805,7 +729,7 @@
 								name: config.name as string,
 								description: config.description as string | undefined,
 								metadata: {
-									...$workflowStore.metadata,
+									...wf.metadata,
 									format: newFormat
 								}
 							});
@@ -814,7 +738,7 @@
 				/>
 			</ConfigPanel>
 		{:else if selectedNodeForConfig()}
-			{@const currentNode = selectedNodeForConfig()}
+			{@const currentNode = selectedNodeForConfig()!}
 			<ConfigPanel
 				title={currentNode.data.label}
 				id={currentNode.id}
@@ -828,9 +752,9 @@
 				<ConfigForm
 					{authProvider}
 					node={currentNode}
-					workflowId={$workflowStore?.id}
-					workflowNodes={$workflowStore?.nodes}
-					workflowEdges={$workflowStore?.edges}
+					workflowId={getWorkflowStore()?.id}
+					workflowNodes={getWorkflowStore()?.nodes}
+					workflowEdges={getWorkflowStore()?.edges}
 					onChange={async (updatedConfig, uiExtensions) => {
 						// Sync config changes to workflow immediately on field blur
 						if (selectedNodeId && currentNode) {
@@ -857,10 +781,10 @@
 
 							// Update the local editor state to reflect config changes immediately
 							// This is needed for nodeType changes to take effect visually
-							workflowEditorRef.updateNodeData(selectedNodeId, updatedData);
+							workflowEditorRef?.updateNodeData(selectedNodeId, updatedData);
 
 							// Refresh edge positions in case config changes affect handles
-							await workflowEditorRef.refreshEdgePositions(selectedNodeId);
+							await workflowEditorRef?.refreshEdgePositions(selectedNodeId);
 						}
 					}}
 				/>
@@ -869,9 +793,9 @@
 	{/snippet}
 
 	<!-- Main Content: Workflow Editor with Error Status -->
-	<!-- Status Display -->
+	<!-- Status Display: aria-live announces API errors dynamically without requiring focus -->
 	{#if error}
-		<div class="flowdrop-status flowdrop-status--error">
+		<div class="flowdrop-status flowdrop-status--error" aria-live="polite" aria-atomic="true">
 			<div class="flowdrop-status__content">
 				<div class="flowdrop-flex flowdrop-gap--3">
 					<div class="flowdrop-status__indicator flowdrop-status__indicator--error"></div>
@@ -920,7 +844,7 @@
 	{/if}
 
 	<!-- Main Editor Area -->
-	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions — interactive workflow canvas region with keyboard support -->
 	<div
 		class="flowdrop-editor-main"
 		class:pipeline-view={!!pipelineId}
@@ -934,7 +858,7 @@
 			{nodes}
 			{height}
 			{width}
-			{endpointConfig}
+			endpointConfig={endpointConfig ?? undefined}
 			{isConfigSidebarOpen}
 			selectedNodeForConfig={selectedNodeForConfig()}
 			{openConfigSidebar}

package/dist/components/CanvasBanner.stories.svelte

@@ -0,0 +1,25 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import CanvasBanner from "./CanvasBanner.svelte";
+	import CanvasDecorator from "../stories/CanvasDecorator.svelte";
+
+	const { Story } = defineMeta({
+		title: "Display/CanvasBanner",
+		tags: ["autodocs"],
+		parameters: {
+			layout: "centered",
+		},
+	});
+</script>
+
+<Story name="Default">
+	<CanvasDecorator>
+		<CanvasBanner title="Empty Canvas" description="Drag nodes from the sidebar to get started" iconName="heroicons:squares-plus" />
+	</CanvasDecorator>
+</Story>
+
+<Story name="No Icon">
+	<CanvasDecorator>
+		<CanvasBanner title="No Workflows" description="Create your first workflow to begin" />
+	</CanvasDecorator>
+</Story>

package/dist/components/CanvasBanner.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default CanvasBanner;
+type CanvasBanner = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const CanvasBanner: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import CanvasBanner from "./CanvasBanner.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/CanvasBanner.svelte

@@ -47,11 +47,11 @@
 		font-size: 1.125rem;
 		font-weight: 700;
 		margin-bottom: 0.5rem;
-		color: #111827;
+		color: var(--fd-foreground, #111827);
 	}
 
 	.flowdrop-canvas-banner__description {
 		font-size: 0.875rem;
-		color: #6b7280;
+		color: var(--fd-muted-foreground, #6b7280);
 	}
 </style>