@flowdrop/flowdrop 1.0.0 → 1.1.0

package/dist/components/App.svelte

@@ -5,977 +5,1097 @@
 -->
 
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import MainLayout from './layouts/MainLayout.svelte';
-	import WorkflowEditor from './WorkflowEditor.svelte';
-	import NodeSidebar from './NodeSidebar.svelte';
-	import ConfigForm from './ConfigForm.svelte';
-	import ConfigPanel from './ConfigPanel.svelte';
-	import Navbar from './Navbar.svelte';
-	import { api, setEndpointConfig } from '../services/api.js';
-	import { EnhancedFlowDropApiClient } from '../api/enhanced-client.js';
-	import type {
-		NodeMetadata,
-		Workflow,
-		WorkflowNode,
-		ConfigSchema,
-		NodeUIExtensions
-	} from '../types/index.js';
-	import { DEFAULT_WORKFLOW_FORMAT } from '../types/index.js';
-	import { createEndpointConfig } from '../config/endpoints.js';
-	import type { EndpointConfig } from '../config/endpoints.js';
-	import type { AuthProvider } from '../types/auth.js';
-	import type { FlowDropEventHandlers, FlowDropFeatures } from '../types/events.js';
-	import { mergeFeatures } from '../types/events.js';
-	import {
-		getWorkflowStore,
-		workflowActions,
-		getWorkflowName,
-		getWorkflowFormat,
-		markAsSaved
-	} 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 { 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
-	 */
-	interface Props {
-		/** Initial workflow to load */
-		workflow?: Workflow;
-		/** Pre-loaded node types (if provided, skips API fetch) */
-		nodes?: NodeMetadata[];
-		/** Editor height */
-		height?: string | number;
-		/** Editor width */
-		width?: string | number;
-		/** Show the navbar */
-		showNavbar?: boolean;
-		/** Disable the node sidebar */
-		disableSidebar?: boolean;
-		/** Lock the workflow (prevent changes) */
-		lockWorkflow?: boolean;
-		/** Read-only mode */
-		readOnly?: boolean;
-		/** Node execution statuses */
-		nodeStatuses?: Record<string, 'pending' | 'running' | 'completed' | 'error'>;
-		/** Pipeline ID for fetching node execution info */
-		pipelineId?: string;
-		/** Custom navbar title */
-		navbarTitle?: string;
-		/** Custom navbar actions */
-		navbarActions?: Array<{
-			label: string;
-			href: string;
-			icon?: string;
-			variant?: 'primary' | 'secondary' | 'outline';
-			onclick?: (event: Event) => void;
-		}>;
-		/** Show settings gear icon in navbar */
-		showSettings?: boolean;
-		/** API base URL */
-		apiBaseUrl?: string;
-		/** Endpoint configuration */
-		endpointConfig?: EndpointConfig;
-		/** Authentication provider */
-		authProvider?: AuthProvider;
-		/** Event handlers */
-		eventHandlers?: FlowDropEventHandlers;
-		/** Feature configuration */
-		features?: FlowDropFeatures;
-	}
-
-	let {
-		workflow: initialWorkflow,
-		nodes: propNodes,
-		height = '100vh',
-		width = '100%',
-		showNavbar = false,
-		disableSidebar = false,
-		lockWorkflow = false,
-		readOnly = false,
-		nodeStatuses = {},
-		pipelineId,
-		navbarTitle,
-		navbarActions = [],
-		showSettings = true,
-		apiBaseUrl,
-		endpointConfig: propEndpointConfig,
-		authProvider,
-		eventHandlers,
-		features: propFeatures
-	}: Props = $props();
-
-	// svelte-ignore state_referenced_locally — feature flags don't change at runtime
-	const features = mergeFeatures(propFeatures);
-
-	// Create breadcrumb-style title - at top level to avoid store subscription issues
-	let breadcrumbTitle = $derived(() => {
-		// Use custom navbar title if provided
-		if (navbarTitle) {
-			return navbarTitle;
-		}
-		// Default workflow title logic
-		const wfName = getWorkflowName();
-		if (!wfName || wfName === 'Untitled Workflow') {
-			return 'Workflow / New Workflow';
-		}
-		return `Workflow / ${wfName}`;
-	});
-
-	let nodes = $state<NodeMetadata[]>([]);
-	// Remove workflow prop - use global store directly
-	// let workflow = $derived($workflowStore || initialWorkflow);
-	let error = $state<string | null>(null);
-	let endpointConfig = $state<EndpointConfig | null>(null);
-
-	/**
-	 * Enhanced API client with authProvider support
-	 * Used when authProvider is provided; otherwise falls back to legacy api service
-	 */
-	let apiClient = $state<EnhancedFlowDropApiClient | null>(null);
-
-	// ConfigSidebar state
-	let isConfigSidebarOpen = $state(false);
-	let selectedNodeId = $state<string | null>(null);
-
-	// Workflow settings sidebar state
-	let isWorkflowSettingsOpen = $state(false);
-
-	// Workflow configuration schema (derived to pick up dynamic format options)
-	let workflowConfigSchema: ConfigSchema = $derived({
-		type: 'object' as const,
-		properties: {
-			name: {
-				type: 'string',
-				title: 'Workflow Name',
-				description: 'The name of the workflow',
-				default: ''
-			},
-			description: {
-				type: 'string',
-				title: 'Description',
-				description: 'A description of the workflow',
-				format: 'multiline',
-				default: ''
-			},
-			format: {
-				type: 'string',
-				title: 'Workflow Format',
-				description: 'The specification format for this workflow',
-				oneOf: workflowFormatRegistry.getOneOfOptions(),
-				default: 'flowdrop'
-			}
-		},
-		required: ['name']
-	});
-
-	// Workflow configuration values
-	let workflowConfigValues = $derived({
-		name: getWorkflowName() || '',
-		description: getWorkflowStore()?.description || '',
-		format: getWorkflowStore()?.metadata?.format || 'flowdrop'
-	});
-
-	// Get the current node from the workflow store
-	let selectedNodeForConfig = $derived(() => {
-		const wf = getWorkflowStore();
-		if (!selectedNodeId || !wf) return null;
-		return wf.nodes.find((node) => node.id === selectedNodeId) || null;
-	});
-
-	// WorkflowEditor reference for save functionality
-	let workflowEditorRef: WorkflowEditor | null = null;
-
-	/**
-	 * Fetch node types from the server
-	 *
-	 * If propNodes is provided, uses those instead of fetching from API.
-	 * Uses enhanced API client with authProvider support when available.
-	 */
-	async function fetchNodeTypes(): Promise<void> {
-		// If nodes were provided as props, use them directly (skip API fetch)
-		if (propNodes && propNodes.length > 0) {
-			// Merge format-provided nodes with prop nodes (deduplicate by ID, props take priority)
-			const formatNodes = workflowFormatRegistry.getAllFormatNodes();
-			const existingIds = new Set(propNodes.map((n) => n.id));
-			const uniqueFormatNodes = formatNodes.filter((n) => !existingIds.has(n.id));
-			nodes = [...propNodes, ...uniqueFormatNodes];
-			return;
-		}
-
-		// Show loading toast (if toasts are enabled)
-		const loadingToast = features.showToasts ? apiToasts.loading('Loading node types') : null;
-		try {
-			error = null;
-
-			// Use enhanced client with authProvider if available, otherwise fall back to legacy api
-			let fetchedNodes: NodeMetadata[];
-			if (apiClient) {
-				fetchedNodes = await apiClient.getAvailableNodes();
-			} else {
-				fetchedNodes = await api.nodes.getNodes();
-			}
-
-			// Merge format-provided nodes with API nodes (deduplicate by ID, API takes priority)
-			const formatNodes = workflowFormatRegistry.getAllFormatNodes();
-			const existingIds = new Set(fetchedNodes.map((n) => n.id));
-			const uniqueFormatNodes = formatNodes.filter((n) => !existingIds.has(n.id));
-			nodes = [...fetchedNodes, ...uniqueFormatNodes];
-			error = null;
-
-			// Dismiss loading toast
-			if (loadingToast) {
-				dismissToast(loadingToast);
-			}
-		} catch (err) {
-			// Dismiss loading toast and show error toast
-			if (loadingToast) {
-				dismissToast(loadingToast);
-			}
-
-			const errorMessage = err instanceof Error ? err.message : 'Unknown error';
-
-			// Notify parent via event handler
-			if (eventHandlers?.onApiError) {
-				const suppressToast = eventHandlers.onApiError(
-					err instanceof Error ? err : new Error(errorMessage),
-					'fetchNodes'
-				);
-				if (suppressToast) {
-					// Parent handled the error, keep nodes empty
-					nodes = [];
-					return;
-				}
-			}
-
-			// Show error and set empty nodes array (no fallback to sample data)
-			error = `API Error: ${errorMessage}. No node types available.`;
-			if (features.showToasts) {
-				apiToasts.error('Load node types', errorMessage);
-			}
-
-			// Set empty nodes array instead of fallback data
-			nodes = [];
-		}
-	}
-
-	/**
-	 * Retry loading node types
-	 */
-	function retryLoad(): void {
-		fetchNodeTypes();
-	}
-
-	/**
-	 * Test API connection
-	 */
-	async function testApiConnection(): Promise<void> {
-		try {
-			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');
-			} else {
-				apiToasts.error('API connection test', 'Connection failed');
-			}
-		} catch (err) {
-			apiToasts.error('API connection test', err instanceof Error ? err.message : 'Unknown error');
-		}
-	}
-
-	/**
-	 * Initialize API endpoints and create enhanced client if authProvider is available
-	 * Priority: propEndpointConfig > existingConfig > apiBaseUrl > default
-	 */
-	async function initializeApiEndpoints(): Promise<void> {
-		// First priority: Use endpointConfig prop if provided (from mountFlowDropApp)
-		if (propEndpointConfig) {
-			setEndpointConfig(propEndpointConfig);
-			endpointConfig = propEndpointConfig;
-
-			// Create enhanced API client with authProvider support if provided
-			if (authProvider) {
-				apiClient = new EnhancedFlowDropApiClient(propEndpointConfig, authProvider);
-			}
-			return;
-		}
-
-		// Second priority: Check if endpoint config is already set (e.g., by parent layout)
-		const { getEndpointConfig } = await import('../services/api.js');
-		const existingConfig = getEndpointConfig();
-
-		// If config already exists and no override provided, use existing
-		if (existingConfig && !apiBaseUrl) {
-			endpointConfig = existingConfig;
-
-			// Create enhanced API client with authProvider support if provided
-			if (authProvider) {
-				apiClient = new EnhancedFlowDropApiClient(existingConfig, authProvider);
-			}
-			return;
-		}
-
-		// Third priority: Use provided apiBaseUrl or default
-		const baseUrl = apiBaseUrl || '/api/flowdrop';
-
-		const config = createEndpointConfig(baseUrl, {
-			auth: {
-				type: 'none' // No authentication for now
-			},
-			timeout: 10000, // 10 second timeout
-			retry: {
-				enabled: true,
-				maxAttempts: 2,
-				delay: 1000,
-				backoff: 'exponential'
-			}
-		});
-
-		setEndpointConfig(config);
-		// Store the configuration for passing to WorkflowEditor
-		endpointConfig = config;
-
-		// Create enhanced API client with authProvider support if provided
-		if (authProvider) {
-			apiClient = new EnhancedFlowDropApiClient(config, authProvider);
-		}
-	}
-
-	/**
-	 * ConfigSidebar functions
-	 */
-	function openConfigSidebar(node: WorkflowNode): void {
-		// Close if already open for the same node
-		if (isConfigSidebarOpen && selectedNodeId === node.id) {
-			closeConfigSidebar();
-			return;
-		}
-		selectedNodeId = node.id;
-		isConfigSidebarOpen = true;
-	}
-
-	function closeConfigSidebar(): void {
-		isConfigSidebarOpen = false;
-		selectedNodeId = null;
-	}
-
-	/**
-	 * Toggle workflow settings sidebar
-	 */
-	function toggleWorkflowSettings(): void {
-		isWorkflowSettingsOpen = !isWorkflowSettingsOpen;
-		// Close config sidebar if opening workflow settings
-		if (isWorkflowSettingsOpen) {
-			closeConfigSidebar();
-		}
-	}
-
-	/**
-	 * Handle workflow configuration save
-	 */
-	async function handleWorkflowSave(config: Record<string, unknown>): Promise<void> {
-		// Update the workflow store
-		if (getWorkflowStore()) {
-			workflowActions.batchUpdate({
-				name: config.name as string | undefined,
-				description: config.description as string | undefined
-			});
-		}
-
-		// Close the sidebar
-		isWorkflowSettingsOpen = false;
-
-		// Also save the workflow to the backend
-		try {
-			await saveWorkflow();
-		} catch (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 - thin wrapper that delegates to globalSaveWorkflow().
-	 *
-	 * 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> {
-		await globalSaveWorkflow({
-			apiClient: apiClient ?? undefined,
-			eventHandlers,
-			features,
-			onMarkAsSaved: markAsSaved
-		});
-	}
-
-	/**
-	 * 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 });
-	}
-
-	/**
-	 * 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.');
-				}
-				const data = JSON.parse(text);
-				const validation = validateWorkflowData(data);
-				if (!validation.valid) {
-					if (features.showToasts) {
-						apiToasts.error('Import workflow', validation.error ?? 'Invalid workflow JSON');
-					}
-					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.error('Import workflow', message);
-			}
-		};
-		reader.readAsText(file);
-	}
-
-	/**
-	 * Handle file input change event for workflow import
-	 */
-	function handleImportFileChange(event: Event): void {
-		const input = event.target as HTMLInputElement;
-		const file = input.files?.[0];
-		if (file) {
-			importWorkflow(file);
-		}
-		// 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-main-layout__sidebar--right');
-		if (rightSidebar && !rightSidebar.contains(event.target as Node)) {
-			// Close sidebar when clicking outside of it
-			if (isConfigSidebarOpen) {
-				closeConfigSidebar();
-			}
-		}
-	}
-
-	// Load node types on mount
-	onMount(() => {
-		(async () => {
-			try {
-				await initializeApiEndpoints();
-
-				// Ensure port compatibility checker is initialized (needed for proximity connect, etc.)
-				// mountFlowDropApp initializes this before mounting, but SvelteKit routes need it here.
-				initializePortCompatibility(DEFAULT_PORT_CONFIG);
-
-				await fetchNodeTypes();
-
-				// Initialize the workflow store
-				if (initialWorkflow) {
-					workflowActions.initialize(initialWorkflow);
-
-					// Emit onWorkflowLoad event
-					if (eventHandlers?.onWorkflowLoad) {
-						eventHandlers.onWorkflowLoad(initialWorkflow);
-					}
-				} else {
-					// Initialize with a default empty workflow so the editor is functional
-					// (e.g., drag-and-drop requires a non-null workflow in the store)
-					const defaultWorkflow: Workflow = {
-						id: '',
-						name: 'Untitled Workflow',
-						nodes: [],
-						edges: [],
-						metadata: {
-							version: '1.0.0',
-							format: DEFAULT_WORKFLOW_FORMAT,
-							createdAt: new Date().toISOString(),
-							updatedAt: new Date().toISOString()
-						}
-					};
-					workflowActions.initialize(defaultWorkflow);
-				}
-			} catch (error) {
-				logger.error('Failed to initialize editor:', error);
-			}
-		})();
-
-		// Listen for workflow settings toggle from main navbar
-		const handleWorkflowSettingsToggle = () => {
-			toggleWorkflowSettings();
-		};
-
-		window.addEventListener('workflow-settings-toggle', handleWorkflowSettingsToggle);
-
-		// Initialize auto-save based on user settings
-		const cleanupAutoSave = initAutoSave({
-			onSave: async () => {
-				await saveWorkflow();
-			},
-			onError: (error) => {
-				// Don't show toast for auto-save errors to avoid noise
-				logger.warn('Auto-save failed:', error);
-			},
-			onSuccess: () => {
-				logger.debug('Auto-saved workflow');
-			}
-		});
-
-		return () => {
-			window.removeEventListener('workflow-settings-toggle', handleWorkflowSettingsToggle);
-			cleanupAutoSave();
-		};
-	});
-
-	/**
-	 * Derived value for showing the right config panel
-	 * Config panel always appears on the right side
-	 */
-	const hasConfigPanelOpen = $derived(isWorkflowSettingsOpen || !!selectedNodeForConfig());
-	const showRightPanel = $derived(!disableSidebar && hasConfigPanelOpen);
-
-	/**
-	 * Calculate left sidebar width based on collapsed state
-	 * When collapsed, use 48px; otherwise use user-configured width
-	 */
-	const leftSidebarWidth = $derived(
-		getUiSettings().sidebarCollapsed ? 48 : getUiSettings().sidebarWidth
-	);
-
-	// File input reference for workflow import
-	let fileInputRef = $state<HTMLInputElement | null>(null);
+  import { onMount } from "svelte";
+  import MainLayout from "./layouts/MainLayout.svelte";
+  import WorkflowEditor from "./WorkflowEditor.svelte";
+  import NodeSidebar from "./NodeSidebar.svelte";
+  import ConfigForm from "./ConfigForm.svelte";
+  import ConfigPanel from "./ConfigPanel.svelte";
+  import Navbar from "./Navbar.svelte";
+  import { api, setEndpointConfig } from "../services/api.js";
+  import { EnhancedFlowDropApiClient } from "../api/enhanced-client.js";
+  import type {
+    NodeMetadata,
+    Workflow,
+    WorkflowNode,
+    ConfigSchema,
+    NodeUIExtensions,
+  } from "../types/index.js";
+  import { DEFAULT_WORKFLOW_FORMAT } from "../types/index.js";
+  import { createEndpointConfig } from "../config/endpoints.js";
+  import type { EndpointConfig } from "../config/endpoints.js";
+  import type { AuthProvider } from "../types/auth.js";
+  import type {
+    FlowDropEventHandlers,
+    FlowDropFeatures,
+  } from "../types/events.js";
+  import { mergeFeatures } from "../types/events.js";
+  import type { FlowDropTheme, FlowDropThemeName } from "../types/theme.js";
+  import type { FlowDropSkinTokens } from "../types/skin.js";
+  import { resolveTheme } from "../themes/index.js";
+  import {
+    getWorkflowStore,
+    workflowActions,
+    getWorkflowName,
+    getWorkflowFormat,
+    markAsSaved,
+  } 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 { 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
+   */
+  interface Props {
+    /** Initial workflow to load */
+    workflow?: Workflow;
+    /** Pre-loaded node types (if provided, skips API fetch) */
+    nodes?: NodeMetadata[];
+    /** Editor height */
+    height?: string | number;
+    /** Editor width */
+    width?: string | number;
+    /** Show the navbar */
+    showNavbar?: boolean;
+    /** Disable the node sidebar */
+    disableSidebar?: boolean;
+    /** Lock the workflow (prevent changes) */
+    lockWorkflow?: boolean;
+    /** Read-only mode */
+    readOnly?: boolean;
+    /** Node execution statuses */
+    nodeStatuses?: Record<
+      string,
+      "pending" | "running" | "completed" | "error"
+    >;
+    /** Pipeline ID for fetching node execution info */
+    pipelineId?: string;
+    /** Custom navbar title */
+    navbarTitle?: string;
+    /** Custom navbar actions */
+    navbarActions?: Array<{
+      label: string;
+      href: string;
+      icon?: string;
+      variant?: "primary" | "secondary" | "outline";
+      onclick?: (event: Event) => void;
+    }>;
+    /** Show settings gear icon in navbar */
+    showSettings?: boolean;
+    /** API base URL */
+    apiBaseUrl?: string;
+    /** Endpoint configuration */
+    endpointConfig?: EndpointConfig;
+    /** Authentication provider */
+    authProvider?: AuthProvider;
+    /** Event handlers */
+    eventHandlers?: FlowDropEventHandlers;
+    /** Feature configuration */
+    features?: FlowDropFeatures;
+    /** Visual theme — named built-in ('default' | 'minimal') or custom theme object */
+    theme?: FlowDropTheme | FlowDropThemeName;
+  }
+
+  let {
+    workflow: initialWorkflow,
+    nodes: propNodes,
+    height = "100vh",
+    width = "100%",
+    showNavbar = false,
+    disableSidebar = false,
+    lockWorkflow = false,
+    readOnly = false,
+    nodeStatuses = {},
+    pipelineId,
+    navbarTitle,
+    navbarActions = [],
+    showSettings = true,
+    apiBaseUrl,
+    endpointConfig: propEndpointConfig,
+    authProvider,
+    eventHandlers,
+    features: propFeatures,
+    theme: themeProp,
+  }: Props = $props();
+
+  // svelte-ignore state_referenced_locally — feature flags don't change at runtime
+  const features = mergeFeatures(propFeatures);
+
+  // Theme system — resolve named theme or custom object, inject CSS tokens from skin
+  // Explicit prop wins; falls back to user's persisted theme preference from settings
+  let resolvedTheme = $derived(
+    resolveTheme(themeProp ?? getUiSettings().theme),
+  );
+  let themeConfig = $derived(resolvedTheme.config);
+  
+  // Inject skin tokens as a style tag so light/dark palettes can coexist.
+  // tokens     → :root { ... }              (light mode / base)
+  // darkTokens → [data-theme='dark'] { ... } (dark mode override)
+  // The tag is appended after tokens.css so it wins via source order.
+  $effect(() => {
+    const skin = resolvedTheme.skin;
+    const tokens = skin?.tokens;
+    const darkTokens = skin?.darkTokens;
+    if ((!tokens && !darkTokens) || typeof document === "undefined") return;
+
+    const toRules = (dict: FlowDropSkinTokens) =>
+      Object.entries(dict)
+        .map(([k, v]) => `  --fd-${k}: ${v};`)
+        .join("\n");
+
+    let css = "";
+    if (tokens) css += `:root {\n${toRules(tokens)}\n}\n`;
+    if (darkTokens) css += `[data-theme='dark'] {\n${toRules(darkTokens)}\n}\n`;
+
+    const style = document.createElement("style");
+    style.id = "fd-skin-tokens";
+    document.head.appendChild(style);
+    style.textContent = css;
+
+    return () => style.remove();
+  });
+
+  // Create breadcrumb-style title - at top level to avoid store subscription issues
+  let breadcrumbTitle = $derived(() => {
+    // Use custom navbar title if provided
+    if (navbarTitle) {
+      return navbarTitle;
+    }
+    // Default workflow title logic
+    const wfName = getWorkflowName();
+    if (!wfName || wfName === "Untitled Workflow") {
+      return "Workflow / New Workflow";
+    }
+    return `Workflow / ${wfName}`;
+  });
+
+  let nodes = $state<NodeMetadata[]>([]);
+  // Remove workflow prop - use global store directly
+  // let workflow = $derived($workflowStore || initialWorkflow);
+  let error = $state<string | null>(null);
+  let endpointConfig = $state<EndpointConfig | null>(null);
+
+  /**
+   * Enhanced API client with authProvider support
+   * Used when authProvider is provided; otherwise falls back to legacy api service
+   */
+  let apiClient = $state<EnhancedFlowDropApiClient | null>(null);
+
+  // ConfigSidebar state
+  let isConfigSidebarOpen = $state(false);
+  let selectedNodeId = $state<string | null>(null);
+
+  // Workflow settings sidebar state
+  let isWorkflowSettingsOpen = $state(false);
+
+  // Workflow configuration schema (derived to pick up dynamic format options)
+  let workflowConfigSchema: ConfigSchema = $derived({
+    type: "object" as const,
+    properties: {
+      name: {
+        type: "string",
+        title: "Workflow Name",
+        description: "The name of the workflow",
+        default: "",
+      },
+      description: {
+        type: "string",
+        title: "Description",
+        description: "A description of the workflow",
+        format: "multiline",
+        default: "",
+      },
+      format: {
+        type: "string",
+        title: "Workflow Format",
+        description: "The specification format for this workflow",
+        oneOf: workflowFormatRegistry.getOneOfOptions(),
+        default: "flowdrop",
+      },
+    },
+    required: ["name"],
+  });
+
+  // Workflow configuration values
+  let workflowConfigValues = $derived({
+    name: getWorkflowName() || "",
+    description: getWorkflowStore()?.description || "",
+    format: getWorkflowStore()?.metadata?.format || "flowdrop",
+  });
+
+  // Get the current node from the workflow store
+  let selectedNodeForConfig = $derived(() => {
+    const wf = getWorkflowStore();
+    if (!selectedNodeId || !wf) return null;
+    return wf.nodes.find((node) => node.id === selectedNodeId) || null;
+  });
+
+  // WorkflowEditor reference for save functionality
+  let workflowEditorRef: WorkflowEditor | null = null;
+
+  /**
+   * Fetch node types from the server
+   *
+   * If propNodes is provided, uses those instead of fetching from API.
+   * Uses enhanced API client with authProvider support when available.
+   */
+  async function fetchNodeTypes(): Promise<void> {
+    // If nodes were provided as props, use them directly (skip API fetch)
+    if (propNodes && propNodes.length > 0) {
+      // Merge format-provided nodes with prop nodes (deduplicate by ID, props take priority)
+      const formatNodes = workflowFormatRegistry.getAllFormatNodes();
+      const existingIds = new Set(propNodes.map((n) => n.id));
+      const uniqueFormatNodes = formatNodes.filter(
+        (n) => !existingIds.has(n.id),
+      );
+      nodes = [...propNodes, ...uniqueFormatNodes];
+      return;
+    }
+
+    // Show loading toast (if toasts are enabled)
+    const loadingToast = features.showToasts
+      ? apiToasts.loading("Loading node types")
+      : null;
+    try {
+      error = null;
+
+      // Use enhanced client with authProvider if available, otherwise fall back to legacy api
+      let fetchedNodes: NodeMetadata[];
+      if (apiClient) {
+        fetchedNodes = await apiClient.getAvailableNodes();
+      } else {
+        fetchedNodes = await api.nodes.getNodes();
+      }
+
+      // Merge format-provided nodes with API nodes (deduplicate by ID, API takes priority)
+      const formatNodes = workflowFormatRegistry.getAllFormatNodes();
+      const existingIds = new Set(fetchedNodes.map((n) => n.id));
+      const uniqueFormatNodes = formatNodes.filter(
+        (n) => !existingIds.has(n.id),
+      );
+      nodes = [...fetchedNodes, ...uniqueFormatNodes];
+      error = null;
+
+      // Dismiss loading toast
+      if (loadingToast) {
+        dismissToast(loadingToast);
+      }
+    } catch (err) {
+      // Dismiss loading toast and show error toast
+      if (loadingToast) {
+        dismissToast(loadingToast);
+      }
+
+      const errorMessage = err instanceof Error ? err.message : "Unknown error";
+
+      // Notify parent via event handler
+      if (eventHandlers?.onApiError) {
+        const suppressToast = eventHandlers.onApiError(
+          err instanceof Error ? err : new Error(errorMessage),
+          "fetchNodes",
+        );
+        if (suppressToast) {
+          // Parent handled the error, keep nodes empty
+          nodes = [];
+          return;
+        }
+      }
+
+      // Show error and set empty nodes array (no fallback to sample data)
+      error = `API Error: ${errorMessage}. No node types available.`;
+      if (features.showToasts) {
+        apiToasts.error("Load node types", errorMessage);
+      }
+
+      // Set empty nodes array instead of fallback data
+      nodes = [];
+    }
+  }
+
+  /**
+   * Retry loading node types
+   */
+  function retryLoad(): void {
+    fetchNodeTypes();
+  }
+
+  /**
+   * Test API connection
+   */
+  async function testApiConnection(): Promise<void> {
+    try {
+      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");
+      } else {
+        apiToasts.error("API connection test", "Connection failed");
+      }
+    } catch (err) {
+      apiToasts.error(
+        "API connection test",
+        err instanceof Error ? err.message : "Unknown error",
+      );
+    }
+  }
+
+  /**
+   * Initialize API endpoints and create enhanced client if authProvider is available
+   * Priority: propEndpointConfig > existingConfig > apiBaseUrl > default
+   */
+  async function initializeApiEndpoints(): Promise<void> {
+    // First priority: Use endpointConfig prop if provided (from mountFlowDropApp)
+    if (propEndpointConfig) {
+      setEndpointConfig(propEndpointConfig);
+      endpointConfig = propEndpointConfig;
+
+      // Create enhanced API client with authProvider support if provided
+      if (authProvider) {
+        apiClient = new EnhancedFlowDropApiClient(
+          propEndpointConfig,
+          authProvider,
+        );
+      }
+      return;
+    }
+
+    // Second priority: Check if endpoint config is already set (e.g., by parent layout)
+    const { getEndpointConfig } = await import("../services/api.js");
+    const existingConfig = getEndpointConfig();
+
+    // If config already exists and no override provided, use existing
+    if (existingConfig && !apiBaseUrl) {
+      endpointConfig = existingConfig;
+
+      // Create enhanced API client with authProvider support if provided
+      if (authProvider) {
+        apiClient = new EnhancedFlowDropApiClient(existingConfig, authProvider);
+      }
+      return;
+    }
+
+    // Third priority: Use provided apiBaseUrl or default
+    const baseUrl = apiBaseUrl || "/api/flowdrop";
+
+    const config = createEndpointConfig(baseUrl, {
+      auth: {
+        type: "none", // No authentication for now
+      },
+      timeout: 10000, // 10 second timeout
+      retry: {
+        enabled: true,
+        maxAttempts: 2,
+        delay: 1000,
+        backoff: "exponential",
+      },
+    });
+
+    setEndpointConfig(config);
+    // Store the configuration for passing to WorkflowEditor
+    endpointConfig = config;
+
+    // Create enhanced API client with authProvider support if provided
+    if (authProvider) {
+      apiClient = new EnhancedFlowDropApiClient(config, authProvider);
+    }
+  }
+
+  /**
+   * ConfigSidebar functions
+   */
+  function openConfigSidebar(node: WorkflowNode): void {
+    // Close if already open for the same node
+    if (isConfigSidebarOpen && selectedNodeId === node.id) {
+      closeConfigSidebar();
+      return;
+    }
+    selectedNodeId = node.id;
+    isConfigSidebarOpen = true;
+  }
+
+  function closeConfigSidebar(): void {
+    isConfigSidebarOpen = false;
+    selectedNodeId = null;
+  }
+
+  /**
+   * Toggle workflow settings sidebar
+   */
+  function toggleWorkflowSettings(): void {
+    isWorkflowSettingsOpen = !isWorkflowSettingsOpen;
+    // Close config sidebar if opening workflow settings
+    if (isWorkflowSettingsOpen) {
+      closeConfigSidebar();
+    }
+  }
+
+  /**
+   * Handle workflow configuration save
+   */
+  async function handleWorkflowSave(
+    config: Record<string, unknown>,
+  ): Promise<void> {
+    // Update the workflow store
+    if (getWorkflowStore()) {
+      workflowActions.batchUpdate({
+        name: config.name as string | undefined,
+        description: config.description as string | undefined,
+      });
+    }
+
+    // Close the sidebar
+    isWorkflowSettingsOpen = false;
+
+    // Also save the workflow to the backend
+    try {
+      await saveWorkflow();
+    } catch (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 - thin wrapper that delegates to globalSaveWorkflow().
+   *
+   * 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> {
+    await globalSaveWorkflow({
+      apiClient: apiClient ?? undefined,
+      eventHandlers,
+      features,
+      onMarkAsSaved: markAsSaved,
+    });
+  }
+
+  /**
+   * 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 });
+  }
+
+  /**
+   * 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.");
+        }
+        const data = JSON.parse(text);
+        const validation = validateWorkflowData(data);
+        if (!validation.valid) {
+          if (features.showToasts) {
+            apiToasts.error(
+              "Import workflow",
+              validation.error ?? "Invalid workflow JSON",
+            );
+          }
+          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.error("Import workflow", message);
+      }
+    };
+    reader.readAsText(file);
+  }
+
+  /**
+   * Handle file input change event for workflow import
+   */
+  function handleImportFileChange(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const file = input.files?.[0];
+    if (file) {
+      importWorkflow(file);
+    }
+    // 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-main-layout__sidebar--right",
+    );
+    if (rightSidebar && !rightSidebar.contains(event.target as Node)) {
+      // Close sidebar when clicking outside of it
+      if (isConfigSidebarOpen) {
+        closeConfigSidebar();
+      }
+    }
+  }
+
+  // Load node types on mount
+  onMount(() => {
+    (async () => {
+      try {
+        await initializeApiEndpoints();
+
+        // Ensure port compatibility checker is initialized (needed for proximity connect, etc.)
+        // mountFlowDropApp initializes this before mounting, but SvelteKit routes need it here.
+        initializePortCompatibility(DEFAULT_PORT_CONFIG);
+
+        await fetchNodeTypes();
+
+        // Initialize the workflow store
+        if (initialWorkflow) {
+          workflowActions.initialize(initialWorkflow);
+
+          // Emit onWorkflowLoad event
+          if (eventHandlers?.onWorkflowLoad) {
+            eventHandlers.onWorkflowLoad(initialWorkflow);
+          }
+        } else {
+          // Initialize with a default empty workflow so the editor is functional
+          // (e.g., drag-and-drop requires a non-null workflow in the store)
+          const defaultWorkflow: Workflow = {
+            id: "",
+            name: "Untitled Workflow",
+            nodes: [],
+            edges: [],
+            metadata: {
+              version: "1.0.0",
+              format: DEFAULT_WORKFLOW_FORMAT,
+              createdAt: new Date().toISOString(),
+              updatedAt: new Date().toISOString(),
+            },
+          };
+          workflowActions.initialize(defaultWorkflow);
+        }
+      } catch (error) {
+        logger.error("Failed to initialize editor:", error);
+      }
+    })();
+
+    // Listen for workflow settings toggle from main navbar
+    const handleWorkflowSettingsToggle = () => {
+      toggleWorkflowSettings();
+    };
+
+    window.addEventListener(
+      "workflow-settings-toggle",
+      handleWorkflowSettingsToggle,
+    );
+
+    // Initialize auto-save based on user settings
+    const cleanupAutoSave = initAutoSave({
+      onSave: async () => {
+        await saveWorkflow();
+      },
+      onError: (error) => {
+        // Don't show toast for auto-save errors to avoid noise
+        logger.warn("Auto-save failed:", error);
+      },
+      onSuccess: () => {
+        logger.debug("Auto-saved workflow");
+      },
+    });
+
+    return () => {
+      window.removeEventListener(
+        "workflow-settings-toggle",
+        handleWorkflowSettingsToggle,
+      );
+      cleanupAutoSave();
+    };
+  });
+
+  /**
+   * Derived value for showing the right config panel
+   * Config panel always appears on the right side
+   */
+  const hasConfigPanelOpen = $derived(
+    isWorkflowSettingsOpen || !!selectedNodeForConfig(),
+  );
+  const showRightPanel = $derived(!disableSidebar && hasConfigPanelOpen);
+
+  /**
+   * Calculate left sidebar width based on collapsed state
+   * When collapsed, use 48px; otherwise use user-configured width
+   */
+  const leftSidebarWidth = $derived(
+    getUiSettings().sidebarCollapsed ? 48 : getUiSettings().sidebarWidth,
+  );
+
+  // File input reference for workflow import
+  let fileInputRef = $state<HTMLInputElement | null>(null);
 </script>
 
 <svelte:head>
-	<title>FlowDrop - Visual Workflow Manager</title>
-	<meta name="description" content="A modern drag-and-drop workflow editor for LLM applications" />
+  <title>FlowDrop - Visual Workflow Manager</title>
+  <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}
+  bind:this={fileInputRef}
+  type="file"
+  accept=".json,application/json"
+  style="display: none;"
+  onchange={handleImportFileChange}
 />
 
 <!-- MainLayout wrapper for workflow editor -->
-<MainLayout
-	showHeader={showNavbar}
-	showLeftSidebar={!disableSidebar}
-	showRightSidebar={showRightPanel}
-	showBottomPanel={false}
-	showFooter={false}
-	headerHeight={60}
-	{leftSidebarWidth}
-	rightSidebarWidth={400}
-	leftSidebarMinWidth={getUiSettings().sidebarCollapsed ? 48 : 280}
-	leftSidebarMaxWidth={getUiSettings().sidebarCollapsed ? 48 : 450}
-	rightSidebarMinWidth={320}
-	rightSidebarMaxWidth={550}
-	enableLeftSplitPane={false}
-	enableRightSplitPane={true}
-	class="flowdrop-app-layout"
->
-	<!-- Header: Navbar -->
-	{#snippet header()}
-		<Navbar
-			title={breadcrumbTitle()}
-			primaryActions={navbarActions.length > 0
-				? navbarActions
-				: [
-						{
-							label: 'Save',
-							href: '#save',
-							icon: 'heroicons:document-arrow-down',
-							variant: 'primary',
-							onclick: (e) => {
-								e.preventDefault();
-								saveWorkflow();
-							}
-						},
-						{
-							label: 'Export',
-							href: '#export',
-							icon: 'heroicons:arrow-down-tray',
-							variant: 'outline',
-							onclick: (e) => {
-								e.preventDefault();
-								exportWorkflow();
-							}
-						},
-						{
-							label: 'Import',
-							href: '#import',
-							icon: 'heroicons:arrow-up-tray',
-							variant: 'outline',
-							onclick: (e) => {
-								e.preventDefault();
-								fileInputRef?.click();
-							}
-						},
-						{
-							label: 'Workflow Settings',
-							href: '#settings',
-							icon: 'heroicons:cog-6-tooth',
-							variant: 'outline',
-							onclick: (e) => {
-								e.preventDefault();
-								toggleWorkflowSettings();
-							}
-						}
-					]}
-			showStatus={true}
-			{showSettings}
-		/>
-	{/snippet}
-
-	<!-- Left Sidebar: Node Components -->
-	{#snippet leftSidebar()}
-		<NodeSidebar {nodes} activeFormat={getWorkflowFormat()} />
-	{/snippet}
-
-	<!-- Right Sidebar: Configuration or Workflow Settings -->
-	{#snippet rightSidebar()}
-		{#if isWorkflowSettingsOpen}
-			<ConfigPanel
-				title="Workflow Settings"
-				id={getWorkflowStore()?.id}
-				details={[
-					{ label: 'Nodes', value: String(getWorkflowStore()?.nodes?.length ?? 0) },
-					{ label: 'Connections', value: String(getWorkflowStore()?.edges?.length ?? 0) }
-				]}
-				configTitle="Settings"
-				onClose={() => (isWorkflowSettingsOpen = false)}
-			>
-				<ConfigForm
-					{authProvider}
-					schema={workflowConfigSchema}
-					values={workflowConfigValues}
-					showUIExtensions={false}
-					onChange={(config) => {
-						// Sync workflow settings changes immediately on field blur
-						const wf = getWorkflowStore();
-						if (wf) {
-							const newFormat = (config.format as string) || DEFAULT_WORKFLOW_FORMAT;
-							const currentFormat = wf.metadata?.format || DEFAULT_WORKFLOW_FORMAT;
-
-							// Warn about incompatible nodes when format changes
-							if (newFormat !== currentFormat) {
-								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) {
-									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)
-									);
-								}
-							}
-
-							workflowActions.batchUpdate({
-								name: config.name as string,
-								description: config.description as string | undefined,
-								metadata: {
-									...wf.metadata,
-									format: newFormat
-								}
-							});
-						}
-					}}
-				/>
-			</ConfigPanel>
-		{:else if selectedNodeForConfig()}
-			{@const currentNode = selectedNodeForConfig()!}
-			<ConfigPanel
-				title={currentNode.data.label}
-				id={currentNode.id}
-				description={currentNode.data.metadata?.description || 'Node configuration'}
-				details={[
-					{ label: 'Type', value: currentNode.data.metadata?.type || currentNode.type },
-					{ label: 'Category', value: currentNode.data.metadata?.category || 'general' }
-				]}
-				onClose={closeConfigSidebar}
-			>
-				<ConfigForm
-					{authProvider}
-					node={currentNode}
-					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) {
-							// Build the updated node data
-							const updatedData = {
-								...currentNode.data,
-								config: updatedConfig
-							};
-
-							// Include UI extensions if provided
-							if (uiExtensions) {
-								updatedData.extensions = {
-									...currentNode.data.extensions,
-									ui: uiExtensions
-								};
-							}
-
-							// Update the node in the workflow store
-							const nodeUpdates: Record<string, unknown> = {
-								data: updatedData
-							};
-
-							workflowActions.updateNode(selectedNodeId, nodeUpdates);
-
-							// Update the local editor state to reflect config changes immediately
-							// This is needed for nodeType changes to take effect visually
-							workflowEditorRef?.updateNodeData(selectedNodeId, updatedData);
-
-							// Refresh edge positions in case config changes affect handles
-							await workflowEditorRef?.refreshEdgePositions(selectedNodeId);
-						}
-					}}
-				/>
-			</ConfigPanel>
-		{/if}
-	{/snippet}
-
-	<!-- Main Content: Workflow Editor with Error Status -->
-	<!-- Status Display: aria-live announces API errors dynamically without requiring focus -->
-	{#if 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>
-					<span class="flowdrop-text--sm flowdrop-font--medium">Error: {error}</span>
-				</div>
-				<div class="flowdrop-flex flowdrop-gap--2">
-					<button
-						class="flowdrop-btn flowdrop-btn--sm flowdrop-btn--primary"
-						onclick={retryLoad}
-						type="button"
-					>
-						Retry
-					</button>
-					<button
-						class="flowdrop-btn flowdrop-btn--sm flowdrop-btn--outline"
-						onclick={() => {
-							const defaultUrl = '/api/flowdrop';
-							const newUrl = prompt('Enter Backend API URL:', defaultUrl);
-							if (newUrl) {
-								const endpointConfig = createEndpointConfig(newUrl);
-								setEndpointConfig(endpointConfig);
-								fetchNodeTypes();
-							}
-						}}
-						type="button"
-					>
-						Set API URL
-					</button>
-					<button
-						class="flowdrop-btn flowdrop-btn--sm flowdrop-btn--outline"
-						onclick={testApiConnection}
-						type="button"
-					>
-						Test API
-					</button>
-					<button
-						class="flowdrop-btn flowdrop-btn--ghost flowdrop-btn--sm"
-						onclick={() => (error = null)}
-						type="button"
-					>
-						✕
-					</button>
-				</div>
-			</div>
-		</div>
-	{/if}
-
-	<!-- Main Editor Area -->
-	<!-- svelte-ignore a11y_no_noninteractive_element_interactions — interactive workflow canvas region with keyboard support -->
-	<div
-		class="flowdrop-editor-main"
-		class:pipeline-view={!!pipelineId}
-		onclick={handleCanvasClick}
-		onkeydown={(e) => e.key === 'Escape' && closeConfigSidebar()}
-		role="region"
-		aria-label="Workflow canvas"
-	>
-		<WorkflowEditor
-			bind:this={workflowEditorRef}
-			{nodes}
-			{height}
-			{width}
-			endpointConfig={endpointConfig ?? undefined}
-			{isConfigSidebarOpen}
-			selectedNodeForConfig={selectedNodeForConfig()}
-			{openConfigSidebar}
-			{closeConfigSidebar}
-			{lockWorkflow}
-			{readOnly}
-			{nodeStatuses}
-			{pipelineId}
-		/>
-	</div>
-</MainLayout>
+<div class="flowdrop-root">
+  <MainLayout
+    showHeader={showNavbar}
+    showLeftSidebar={!disableSidebar}
+    showRightSidebar={showRightPanel}
+    showBottomPanel={false}
+    showFooter={false}
+    headerHeight={60}
+    {leftSidebarWidth}
+    rightSidebarWidth={400}
+    leftSidebarMinWidth={getUiSettings().sidebarCollapsed ? 48 : 280}
+    leftSidebarMaxWidth={getUiSettings().sidebarCollapsed ? 48 : 450}
+    rightSidebarMinWidth={320}
+    rightSidebarMaxWidth={550}
+    enableLeftSplitPane={false}
+    enableRightSplitPane={true}
+    class="flowdrop-app-layout"
+  >
+    <!-- Header: Navbar -->
+    {#snippet header()}
+      <Navbar
+        title={breadcrumbTitle()}
+        primaryActions={navbarActions.length > 0
+          ? navbarActions
+          : [
+              {
+                label: "Save",
+                href: "#save",
+                icon: "heroicons:document-arrow-down",
+                variant: "primary",
+                onclick: (e) => {
+                  e.preventDefault();
+                  saveWorkflow();
+                },
+              },
+              {
+                label: "Export",
+                href: "#export",
+                icon: "heroicons:arrow-down-tray",
+                variant: "outline",
+                onclick: (e) => {
+                  e.preventDefault();
+                  exportWorkflow();
+                },
+              },
+              {
+                label: "Import",
+                href: "#import",
+                icon: "heroicons:arrow-up-tray",
+                variant: "outline",
+                onclick: (e) => {
+                  e.preventDefault();
+                  fileInputRef?.click();
+                },
+              },
+              {
+                label: "Workflow Settings",
+                href: "#settings",
+                icon: "heroicons:cog-6-tooth",
+                variant: "outline",
+                onclick: (e) => {
+                  e.preventDefault();
+                  toggleWorkflowSettings();
+                },
+              },
+            ]}
+        showStatus={true}
+        {showSettings}
+      />
+    {/snippet}
+
+    <!-- Left Sidebar: Node Components -->
+    {#snippet leftSidebar()}
+      <NodeSidebar
+        {nodes}
+        activeFormat={getWorkflowFormat()}
+        categoriesDefaultOpen={themeConfig?.sidebar?.categoriesDefaultOpen ??
+          false}
+      />
+    {/snippet}
+
+    <!-- Right Sidebar: Configuration or Workflow Settings -->
+    {#snippet rightSidebar()}
+      {#if isWorkflowSettingsOpen}
+        <ConfigPanel
+          title="Workflow Settings"
+          id={getWorkflowStore()?.id}
+          details={[
+            {
+              label: "Nodes",
+              value: String(getWorkflowStore()?.nodes?.length ?? 0),
+            },
+            {
+              label: "Connections",
+              value: String(getWorkflowStore()?.edges?.length ?? 0),
+            },
+          ]}
+          configTitle="Settings"
+          onClose={() => (isWorkflowSettingsOpen = false)}
+        >
+          <ConfigForm
+            {authProvider}
+            schema={workflowConfigSchema}
+            values={workflowConfigValues}
+            showUIExtensions={false}
+            onChange={(config) => {
+              // Sync workflow settings changes immediately on field blur
+              const wf = getWorkflowStore();
+              if (wf) {
+                const newFormat =
+                  (config.format as string) || DEFAULT_WORKFLOW_FORMAT;
+                const currentFormat =
+                  wf.metadata?.format || DEFAULT_WORKFLOW_FORMAT;
+
+                // Warn about incompatible nodes when format changes
+                if (newFormat !== currentFormat) {
+                  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) {
+                    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),
+                    );
+                  }
+                }
+
+                workflowActions.batchUpdate({
+                  name: config.name as string,
+                  description: config.description as string | undefined,
+                  metadata: {
+                    ...wf.metadata,
+                    format: newFormat,
+                  },
+                });
+              }
+            }}
+          />
+        </ConfigPanel>
+      {:else if selectedNodeForConfig()}
+        {@const currentNode = selectedNodeForConfig()!}
+        <ConfigPanel
+          title={currentNode.data.label}
+          id={currentNode.id}
+          description={currentNode.data.metadata?.description ||
+            "Node configuration"}
+          details={[
+            {
+              label: "Type",
+              value: currentNode.data.metadata?.type || currentNode.type,
+            },
+            {
+              label: "Category",
+              value: currentNode.data.metadata?.category || "general",
+            },
+          ]}
+          onClose={closeConfigSidebar}
+        >
+          <ConfigForm
+            {authProvider}
+            node={currentNode}
+            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) {
+                // Build the updated node data
+                const updatedData = {
+                  ...currentNode.data,
+                  config: updatedConfig,
+                };
+
+                // Include UI extensions if provided
+                if (uiExtensions) {
+                  updatedData.extensions = {
+                    ...currentNode.data.extensions,
+                    ui: uiExtensions,
+                  };
+                }
+
+                // Update the node in the workflow store
+                const nodeUpdates: Record<string, unknown> = {
+                  data: updatedData,
+                };
+
+                workflowActions.updateNode(selectedNodeId, nodeUpdates);
+
+                // Update the local editor state to reflect config changes immediately
+                // This is needed for nodeType changes to take effect visually
+                workflowEditorRef?.updateNodeData(selectedNodeId, updatedData);
+
+                // Refresh edge positions in case config changes affect handles
+                await workflowEditorRef?.refreshEdgePositions(selectedNodeId);
+              }
+            }}
+          />
+        </ConfigPanel>
+      {/if}
+    {/snippet}
+
+    <!-- Main Content: Workflow Editor with Error Status -->
+    <!-- Status Display: aria-live announces API errors dynamically without requiring focus -->
+    {#if 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>
+            <span class="flowdrop-text--sm flowdrop-font--medium"
+              >Error: {error}</span
+            >
+          </div>
+          <div class="flowdrop-flex flowdrop-gap--2">
+            <button
+              class="flowdrop-btn flowdrop-btn--sm flowdrop-btn--primary"
+              onclick={retryLoad}
+              type="button"
+            >
+              Retry
+            </button>
+            <button
+              class="flowdrop-btn flowdrop-btn--sm flowdrop-btn--outline"
+              onclick={() => {
+                const defaultUrl = "/api/flowdrop";
+                const newUrl = prompt("Enter Backend API URL:", defaultUrl);
+                if (newUrl) {
+                  const endpointConfig = createEndpointConfig(newUrl);
+                  setEndpointConfig(endpointConfig);
+                  fetchNodeTypes();
+                }
+              }}
+              type="button"
+            >
+              Set API URL
+            </button>
+            <button
+              class="flowdrop-btn flowdrop-btn--sm flowdrop-btn--outline"
+              onclick={testApiConnection}
+              type="button"
+            >
+              Test API
+            </button>
+            <button
+              class="flowdrop-btn flowdrop-btn--ghost flowdrop-btn--sm"
+              onclick={() => (error = null)}
+              type="button"
+            >
+              ✕
+            </button>
+          </div>
+        </div>
+      </div>
+    {/if}
+
+    <!-- Main Editor Area -->
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions — interactive workflow canvas region with keyboard support -->
+    <div
+      class="flowdrop-editor-main"
+      class:pipeline-view={!!pipelineId}
+      onclick={handleCanvasClick}
+      onkeydown={(e) => e.key === "Escape" && closeConfigSidebar()}
+      role="region"
+      aria-label="Workflow canvas"
+    >
+      <WorkflowEditor
+        bind:this={workflowEditorRef}
+        {nodes}
+        {height}
+        {width}
+        endpointConfig={endpointConfig ?? undefined}
+        {isConfigSidebarOpen}
+        selectedNodeForConfig={selectedNodeForConfig()}
+        {openConfigSidebar}
+        {closeConfigSidebar}
+        {lockWorkflow}
+        {readOnly}
+        {nodeStatuses}
+        {pipelineId}
+      />
+    </div>
+  </MainLayout>
+</div>
 
 <style>
-	/* Status bar styles */
-	.flowdrop-status {
-		background-color: var(--fd-info-muted);
-		border-bottom: 1px solid var(--fd-info);
-		padding: 1rem;
-	}
-
-	.flowdrop-status--error {
-		background-color: var(--fd-error-muted);
-		border-bottom: 1px solid var(--fd-error);
-	}
-
-	.flowdrop-status__content {
-		max-width: 80rem;
-		margin: 0 auto;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-	}
-
-	.flowdrop-status__indicator {
-		width: 0.5rem;
-		height: 0.5rem;
-		border-radius: 50%;
-	}
-
-	.flowdrop-status__indicator--error {
-		background-color: var(--fd-error);
-	}
-
-	/* Button styles */
-	.flowdrop-btn {
-		padding: 0.375rem 0.75rem;
-		border-radius: var(--fd-radius-md);
-		font-size: 0.75rem;
-		font-weight: 500;
-		cursor: pointer;
-		border: 1px solid transparent;
-		transition: all var(--fd-transition-fast);
-	}
-
-	.flowdrop-btn--sm {
-		padding: 0.25rem 0.5rem;
-		font-size: 0.625rem;
-	}
-
-	.flowdrop-btn--outline {
-		background-color: transparent;
-		border-color: var(--fd-border);
-		color: var(--fd-foreground);
-	}
-
-	.flowdrop-btn--outline:hover {
-		background-color: var(--fd-muted);
-		border-color: var(--fd-border-strong);
-	}
-
-	.flowdrop-btn--primary {
-		background-color: var(--fd-primary);
-		border-color: var(--fd-primary);
-		color: var(--fd-primary-foreground);
-	}
-
-	.flowdrop-btn--primary:hover {
-		background-color: var(--fd-primary-hover);
-		border-color: var(--fd-primary-hover);
-	}
-
-	.flowdrop-btn--ghost {
-		background-color: transparent;
-		border-color: transparent;
-		color: var(--fd-muted-foreground);
-	}
-
-	.flowdrop-btn--ghost:hover {
-		background-color: var(--fd-muted);
-		color: var(--fd-foreground);
-	}
-
-	/* Utility classes */
-	.flowdrop-flex {
-		display: flex;
-	}
-
-	.flowdrop-gap--2 {
-		gap: 0.5rem;
-	}
-
-	.flowdrop-gap--3 {
-		gap: 0.75rem;
-	}
-
-	.flowdrop-text--sm {
-		font-size: 0.875rem;
-		line-height: 1.25rem;
-	}
-
-	.flowdrop-font--medium {
-		font-weight: 500;
-	}
-
-	/* Main editor area */
-	.flowdrop-editor-main {
-		flex: 1;
-		position: relative;
-		min-width: 0;
-		height: 100%;
-		overflow: hidden;
-		background: var(--fd-layout-background);
-	}
+  .flowdrop-root {
+    display: contents;
+  }
+  /* Status bar styles */
+  .flowdrop-status {
+    background-color: var(--fd-info-muted);
+    border-bottom: 1px solid var(--fd-info);
+    padding: 1rem;
+  }
+
+  .flowdrop-status--error {
+    background-color: var(--fd-error-muted);
+    border-bottom: 1px solid var(--fd-error);
+  }
+
+  .flowdrop-status__content {
+    max-width: 80rem;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .flowdrop-status__indicator {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+  }
+
+  .flowdrop-status__indicator--error {
+    background-color: var(--fd-error);
+  }
+
+  /* Button styles */
+  .flowdrop-btn {
+    padding: 0.375rem 0.75rem;
+    border-radius: var(--fd-radius-md);
+    font-size: 0.75rem;
+    font-weight: 500;
+    cursor: pointer;
+    border: 1px solid transparent;
+    transition: all var(--fd-transition-fast);
+  }
+
+  .flowdrop-btn--sm {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.625rem;
+  }
+
+  .flowdrop-btn--outline {
+    background-color: transparent;
+    border-color: var(--fd-border);
+    color: var(--fd-foreground);
+  }
+
+  .flowdrop-btn--outline:hover {
+    background-color: var(--fd-muted);
+    border-color: var(--fd-border-strong);
+  }
+
+  .flowdrop-btn--primary {
+    background-color: var(--fd-primary);
+    border-color: var(--fd-primary);
+    color: var(--fd-primary-foreground);
+  }
+
+  .flowdrop-btn--primary:hover {
+    background-color: var(--fd-primary-hover);
+    border-color: var(--fd-primary-hover);
+  }
+
+  .flowdrop-btn--ghost {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--fd-muted-foreground);
+  }
+
+  .flowdrop-btn--ghost:hover {
+    background-color: var(--fd-muted);
+    color: var(--fd-foreground);
+  }
+
+  /* Utility classes */
+  .flowdrop-flex {
+    display: flex;
+  }
+
+  .flowdrop-gap--2 {
+    gap: 0.5rem;
+  }
+
+  .flowdrop-gap--3 {
+    gap: 0.75rem;
+  }
+
+  .flowdrop-text--sm {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  .flowdrop-font--medium {
+    font-weight: 500;
+  }
+
+  /* Main editor area */
+  .flowdrop-editor-main {
+    flex: 1;
+    position: relative;
+    min-width: 0;
+    height: 100%;
+    overflow: hidden;
+    background: var(--fd-layout-background);
+  }
 </style>