@d34dman/flowdrop 0.0.56 → 0.0.58

package/dist/adapters/agentspec/validator.js

@@ -0,0 +1,169 @@
+/**
+ * Agent Spec Validator
+ *
+ * Validates workflows against Agent Spec constraints for export,
+ * and validates imported Agent Spec documents for correctness.
+ */
+/**
+ * Validate a FlowDrop StandardWorkflow for Agent Spec export compatibility.
+ *
+ * Checks:
+ * - Must have exactly 1 start node (terminal/triggers)
+ * - Must have at least 1 end node (terminal/outputs)
+ * - Gateway nodes must have branches defined
+ */
+export function validateForAgentSpecExport(workflow) {
+    const errors = [];
+    const warnings = [];
+    if (workflow.nodes.length === 0) {
+        errors.push('Workflow has no nodes');
+        return { valid: false, errors, warnings };
+    }
+    // Check for start nodes
+    const startNodes = workflow.nodes.filter((n) => {
+        const ext = n.data.metadata.extensions?.['agentspec:component_type'];
+        if (ext === 'start_node')
+            return true;
+        return n.data.metadata.type === 'terminal' && n.data.metadata.category === 'triggers';
+    });
+    if (startNodes.length === 0) {
+        errors.push('Agent Spec requires exactly one StartNode. No start node found (terminal node with triggers category).');
+    }
+    else if (startNodes.length > 1) {
+        errors.push(`Agent Spec requires exactly one StartNode. Found ${startNodes.length}: ${startNodes.map((n) => n.id).join(', ')}`);
+    }
+    // Check for end nodes
+    const endNodes = workflow.nodes.filter((n) => {
+        const ext = n.data.metadata.extensions?.['agentspec:component_type'];
+        if (ext === 'end_node')
+            return true;
+        return n.data.metadata.type === 'terminal' && n.data.metadata.category === 'outputs';
+    });
+    if (endNodes.length === 0) {
+        errors.push('Agent Spec requires at least one EndNode. No end node found (terminal node with outputs category).');
+    }
+    // Check gateway nodes have branches
+    const gatewayNodes = workflow.nodes.filter((n) => {
+        const ext = n.data.metadata.extensions?.['agentspec:component_type'];
+        return ext === 'branching_node' || n.data.metadata.type === 'gateway';
+    });
+    for (const gw of gatewayNodes) {
+        const branches = gw.data.config?.branches;
+        if (!branches || !Array.isArray(branches) || branches.length === 0) {
+            warnings.push(`Gateway node "${gw.data.label || gw.id}" has no branches defined. Agent Spec BranchingNode requires at least one branch.`);
+        }
+    }
+    // Check for disconnected nodes
+    const connectedNodes = new Set();
+    for (const edge of workflow.edges) {
+        connectedNodes.add(edge.source);
+        connectedNodes.add(edge.target);
+    }
+    const disconnected = workflow.nodes.filter((n) => !connectedNodes.has(n.id));
+    if (disconnected.length > 0) {
+        warnings.push(`${disconnected.length} node(s) are not connected to any edges: ${disconnected.map((n) => n.data.label || n.id).join(', ')}`);
+    }
+    return { valid: errors.length === 0, errors, warnings };
+}
+/**
+ * Validate an imported Agent Spec Flow document.
+ *
+ * Checks:
+ * - Has a start_node reference that exists
+ * - At least one end_node exists
+ * - All edge references point to existing nodes
+ * - BranchingNode has branches
+ * - Data flow edges reference valid properties
+ */
+export function validateAgentSpecFlow(flow) {
+    const errors = [];
+    const warnings = [];
+    if (!flow.nodes || flow.nodes.length === 0) {
+        errors.push('Flow has no nodes');
+        return { valid: false, errors, warnings };
+    }
+    // Build node name set
+    const nodeNames = new Set(flow.nodes.map((n) => n.name));
+    // Check start_node exists
+    if (!flow.start_node) {
+        errors.push('Flow is missing start_node reference');
+    }
+    else if (!nodeNames.has(flow.start_node)) {
+        errors.push(`start_node "${flow.start_node}" does not match any node name`);
+    }
+    // Check start_node is actually a start_node type
+    const startNode = flow.nodes.find((n) => n.name === flow.start_node);
+    if (startNode && startNode.component_type !== 'start_node') {
+        warnings.push(`start_node "${flow.start_node}" has component_type "${startNode.component_type}" instead of "start_node"`);
+    }
+    // Check for end nodes
+    const endNodes = flow.nodes.filter((n) => n.component_type === 'end_node');
+    if (endNodes.length === 0) {
+        warnings.push('Flow has no EndNode. Consider adding one for clarity.');
+    }
+    // Check for duplicate node names
+    const nameCount = new Map();
+    for (const node of flow.nodes) {
+        nameCount.set(node.name, (nameCount.get(node.name) || 0) + 1);
+    }
+    for (const [name, count] of nameCount) {
+        if (count > 1) {
+            errors.push(`Duplicate node name: "${name}" appears ${count} times`);
+        }
+    }
+    // Validate control-flow edges
+    for (const edge of flow.control_flow_connections) {
+        if (!nodeNames.has(edge.from_node)) {
+            errors.push(`Control flow edge "${edge.name}" references non-existent from_node "${edge.from_node}"`);
+        }
+        if (!nodeNames.has(edge.to_node)) {
+            errors.push(`Control flow edge "${edge.name}" references non-existent to_node "${edge.to_node}"`);
+        }
+        // Validate from_branch references
+        if (edge.from_branch) {
+            const fromNode = flow.nodes.find((n) => n.name === edge.from_node);
+            if (fromNode && fromNode.component_type === 'branching_node') {
+                const branchingNode = fromNode;
+                if (!branchingNode.branches?.some((b) => b.name === edge.from_branch)) {
+                    errors.push(`Control flow edge "${edge.name}" references branch "${edge.from_branch}" which doesn't exist on node "${edge.from_node}"`);
+                }
+            }
+        }
+    }
+    // Validate data-flow edges
+    if (flow.data_flow_connections) {
+        for (const edge of flow.data_flow_connections) {
+            if (!nodeNames.has(edge.source_node)) {
+                errors.push(`Data flow edge "${edge.name}" references non-existent source_node "${edge.source_node}"`);
+            }
+            if (!nodeNames.has(edge.destination_node)) {
+                errors.push(`Data flow edge "${edge.name}" references non-existent destination_node "${edge.destination_node}"`);
+            }
+            // Check that output/input properties exist on the nodes
+            const sourceNode = flow.nodes.find((n) => n.name === edge.source_node);
+            if (sourceNode?.outputs) {
+                const hasOutput = sourceNode.outputs.some((o) => o.title === edge.source_output);
+                if (!hasOutput) {
+                    warnings.push(`Data flow edge "${edge.name}": source node "${edge.source_node}" has no output named "${edge.source_output}"`);
+                }
+            }
+            const destNode = flow.nodes.find((n) => n.name === edge.destination_node);
+            if (destNode?.inputs) {
+                const hasInput = destNode.inputs.some((i) => i.title === edge.destination_input);
+                if (!hasInput) {
+                    warnings.push(`Data flow edge "${edge.name}": destination node "${edge.destination_node}" has no input named "${edge.destination_input}"`);
+                }
+            }
+        }
+    }
+    // Validate branching nodes have branches
+    for (const node of flow.nodes) {
+        if (node.component_type === 'branching_node') {
+            const bn = node;
+            if (!bn.branches || bn.branches.length === 0) {
+                warnings.push(`BranchingNode "${node.name}" has no branches defined`);
+            }
+        }
+    }
+    return { valid: errors.length === 0, errors, warnings };
+}

package/dist/components/App.svelte

@@ -22,6 +22,7 @@
 		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';
@@ -31,6 +32,7 @@
 		workflowStore,
 		workflowActions,
 		workflowName,
+		workflowFormat,
 		markAsSaved
 	} from '../stores/workflowStore.js';
 	import { apiToasts, dismissToast } from '../services/toastService.js';
@@ -38,6 +40,7 @@
 	import { uiSettings } from '../stores/settingsStore.js';
 	import { initializePortCompatibility } from '../utils/connections.js';
 	import { DEFAULT_PORT_CONFIG } from '../config/defaultPortConfig.js';
+	import { workflowFormatRegistry } from '../registry/workflowFormatRegistry.js';
 
 	/**
 	 * Configuration props for runtime customization
@@ -143,9 +146,9 @@
 	// Workflow settings sidebar state
 	let isWorkflowSettingsOpen = $state(false);
 
-	// Workflow configuration schema
-	const workflowConfigSchema: ConfigSchema = {
-		type: 'object',
+	// Workflow configuration schema (derived to pick up dynamic format options)
+	let workflowConfigSchema: ConfigSchema = $derived({
+		type: 'object' as const,
 		properties: {
 			name: {
 				type: 'string',
@@ -159,15 +162,23 @@
 				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: $workflowName || '',
-		description: $workflowStore?.description || ''
+		description: $workflowStore?.description || '',
+		format: $workflowStore?.metadata?.format || 'flowdrop'
 	});
 
 	// Get the current node from the workflow store
@@ -188,7 +199,11 @@
 	async function fetchNodeTypes(): Promise<void> {
 		// If nodes were provided as props, use them directly (skip API fetch)
 		if (propNodes && propNodes.length > 0) {
-			nodes = propNodes;
+			// 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;
 		}
 
@@ -205,7 +220,11 @@
 				fetchedNodes = await api.nodes.getNodes();
 			}
 
-			nodes = fetchedNodes;
+			// 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
@@ -430,7 +449,7 @@
 				workflowId = uuidv4();
 			}
 
-			// Create workflow object for saving
+			// Create workflow object for saving (spread existing metadata to preserve format, tags, etc.)
 			const finalWorkflow: Workflow = {
 				id: workflowId,
 				name: workflowToSave.name || 'Untitled Workflow',
@@ -438,7 +457,9 @@
 				nodes: workflowToSave.nodes || [],
 				edges: workflowToSave.edges || [],
 				metadata: {
-					version: '1.0.0',
+					...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()
 				}
@@ -538,14 +559,16 @@
 				return;
 			}
 
-			// Create workflow object for export
+			// 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: {
-					version: '1.0.0',
+					...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()
 				}
@@ -722,7 +745,7 @@
 
 	<!-- Left Sidebar: Node Components -->
 	{#snippet leftSidebar()}
-		<NodeSidebar {nodes} />
+		<NodeSidebar {nodes} activeFormat={$workflowFormat} />
 	{/snippet}
 
 	<!-- Right Sidebar: Configuration or Workflow Settings -->
@@ -746,9 +769,30 @@
 					onChange={(config) => {
 						// Sync workflow settings changes immediately on field blur
 						if ($workflowStore) {
+							const newFormat = (config.format as string) || DEFAULT_WORKFLOW_FORMAT;
+							const currentFormat = $workflowStore.metadata?.format || DEFAULT_WORKFLOW_FORMAT;
+
+							// Warn about incompatible nodes when format changes
+							if (newFormat !== currentFormat) {
+								const incompatibleNodes = $workflowStore.nodes?.filter((node) => {
+									const formats = node.data?.metadata?.formats;
+									return formats && formats.length > 0 && !formats.includes(newFormat);
+								});
+								if (incompatibleNodes && incompatibleNodes.length > 0) {
+									console.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
+								description: config.description as string | undefined,
+								metadata: {
+									...$workflowStore.metadata,
+									format: newFormat
+								}
 							});
 						}
 					}}

package/dist/components/ConfigForm.svelte

@@ -28,7 +28,9 @@
 		ConfigEditOptions,
 		AuthProvider
 	} from '../types/index.js';
+	import type { UISchemaElement } from '../types/uischema.js';
 	import { FormField, FormFieldWrapper, FormToggle } from './form/index.js';
+	import FormUISchemaRenderer from './form/FormUISchemaRenderer.svelte';
 	import type { FieldSchema } from './form/index.js';
 	import {
 		getEffectiveConfigEditOptions,
@@ -45,6 +47,13 @@
 		node?: WorkflowNode;
 		/** Direct config schema (used when node is not provided) */
 		schema?: ConfigSchema;
+		/**
+		 * Optional UI Schema that controls field layout and grouping.
+		 * When provided, fields render according to the UISchema tree structure.
+		 * When absent, falls back to node.data.metadata.uiSchema, then flat rendering.
+		 * @see https://jsonforms.io/docs/uischema
+		 */
+		uiSchema?: UISchemaElement;
 		/** Direct config values (used when node is not provided) */
 		values?: Record<string, unknown>;
 		/** Whether to show UI extension settings section */
@@ -76,6 +85,7 @@
 	let {
 		node,
 		schema,
+		uiSchema,
 		values,
 		showUIExtensions = true,
 		workflowId,
@@ -141,6 +151,14 @@
 		return schema ?? (node?.data.metadata?.configSchema as ConfigSchema | undefined);
 	});
 
+	/**
+	 * Get the UI schema from direct prop or node metadata
+	 * Priority: direct uiSchema prop > node metadata uiSchema
+	 */
+	const configUISchema = $derived.by<UISchemaElement | undefined>(() => {
+		return uiSchema ?? (node?.data.metadata?.uiSchema as UISchemaElement | undefined);
+	});
+
 	/**
 	 * Check if the node needs dynamic schema loading
 	 * Loads when: no static schema OR preferDynamicSchema is true
@@ -548,24 +566,40 @@
 
 		{#if configSchema.properties}
 			<div class="config-form__fields">
-				{#each Object.entries(configSchema.properties) as [key, field], index (key)}
-					{@const fieldSchema = toFieldSchema(field as Record<string, unknown>)}
-					{@const required = isFieldRequired(key)}
-
-					<FormField
-						fieldKey={key}
-						schema={fieldSchema}
-						value={configValues[key]}
-						{required}
-						animationIndex={index}
+				{#if configUISchema}
+					<FormUISchemaRenderer
+						element={configUISchema}
+						schema={configSchema}
+						values={configValues}
+						requiredFields={configSchema.required ?? []}
+						onFieldChange={handleFieldChange}
+						{toFieldSchema}
 						{node}
 						nodes={workflowNodes}
 						edges={workflowEdges}
 						{workflowId}
 						{authProvider}
-						onChange={(val) => handleFieldChange(key, val)}
 					/>
-				{/each}
+				{:else}
+					{#each Object.entries(configSchema.properties) as [key, field], index (key)}
+						{@const fieldSchema = toFieldSchema(field as Record<string, unknown>)}
+						{@const required = isFieldRequired(key)}
+
+						<FormField
+							fieldKey={key}
+							schema={fieldSchema}
+							value={configValues[key]}
+							{required}
+							animationIndex={index}
+							{node}
+							nodes={workflowNodes}
+							edges={workflowEdges}
+							{workflowId}
+							{authProvider}
+							onChange={(val) => handleFieldChange(key, val)}
+						/>
+					{/each}
+				{/if}
 			</div>
 		{:else}
 			<!-- If no properties, show the raw schema for debugging -->

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

@@ -1,9 +1,17 @@
 import type { ConfigSchema, WorkflowNode, WorkflowEdge, NodeUIExtensions, AuthProvider } from '../types/index.js';
+import type { UISchemaElement } from '../types/uischema.js';
 interface Props {
     /** Optional workflow node (if provided, schema and values are derived from it) */
     node?: WorkflowNode;
     /** Direct config schema (used when node is not provided) */
     schema?: ConfigSchema;
+    /**
+     * Optional UI Schema that controls field layout and grouping.
+     * When provided, fields render according to the UISchema tree structure.
+     * When absent, falls back to node.data.metadata.uiSchema, then flat rendering.
+     * @see https://jsonforms.io/docs/uischema
+     */
+    uiSchema?: UISchemaElement;
     /** Direct config values (used when node is not provided) */
     values?: Record<string, unknown>;
     /** Whether to show UI extension settings section */

package/dist/components/NodeSidebar.svelte

@@ -5,7 +5,7 @@
 -->
 
 <script lang="ts">
-	import type { NodeMetadata, NodeCategory } from '../types/index.js';
+	import type { NodeMetadata, NodeCategory, WorkflowFormat } from '../types/index.js';
 	import LoadingSpinner from './LoadingSpinner.svelte';
 	import Icon from '@iconify/svelte';
 	import { getNodeIcon, getCategoryIcon } from '../utils/icons.js';
@@ -17,6 +17,7 @@
 	interface Props {
 		nodes: NodeMetadata[];
 		selectedCategory?: NodeCategory;
+		activeFormat?: WorkflowFormat;
 	}
 
 	let props: Props = $props();
@@ -31,6 +32,19 @@
 		updateSettings({ ui: { sidebarCollapsed: !$uiSettings.sidebarCollapsed } });
 	}
 
+	/**
+	 * Check if a node is compatible with the active workflow format.
+	 * Nodes without formats are universal (compatible with all formats).
+	 */
+	function isNodeCompatibleWithFormat(node: NodeMetadata): boolean {
+		if (!props.activeFormat) return true;
+		if (!node.formats || node.formats.length === 0) return true;
+		return node.formats.includes(props.activeFormat);
+	}
+
+	/** Nodes filtered by format compatibility */
+	let formatCompatibleNodes = $derived((props.nodes || []).filter(isNodeCompatibleWithFormat));
+
 	let filteredNodes = $derived(getFilteredNodes());
 	let categories = $derived(getCategories());
 
@@ -39,12 +53,11 @@
 	 * Categories appear in the order their first node appears in the API response
 	 */
 	function getCategories(): NodeCategory[] {
-		const nodes = props.nodes || [];
-		if (nodes.length === 0) return [];
+		if (formatCompatibleNodes.length === 0) return [];
 		// Use a Set to track uniqueness while preserving insertion order
 		const seen = new SvelteSet<NodeCategory>();
 		const orderedCategories: NodeCategory[] = [];
-		for (const node of nodes) {
+		for (const node of formatCompatibleNodes) {
 			if (!seen.has(node.category)) {
 				seen.add(node.category);
 				orderedCategories.push(node.category);
@@ -58,8 +71,8 @@
 	 * Preserves the API order - no client-side sorting applied
 	 */
 	function getFilteredNodes(): NodeMetadata[] {
-		// Use actual node types from props
-		let filtered = props.nodes || [];
+		// Start with format-compatible nodes
+		let filtered = formatCompatibleNodes;
 
 		// Filter by category
 		if (selectedCategory !== 'all') {
@@ -155,8 +168,7 @@
 	 * Preserves the API order - no client-side sorting applied
 	 */
 	function getNodesForCategory(category: NodeCategory): NodeMetadata[] {
-		const nodes = props.nodes || [];
-		return nodes.filter((node) => node.category === category);
+		return formatCompatibleNodes.filter((node) => node.category === category);
 	}
 
 	/**

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

@@ -1,7 +1,8 @@
-import type { NodeMetadata, NodeCategory } from '../types/index.js';
+import type { NodeMetadata, NodeCategory, WorkflowFormat } from '../types/index.js';
 interface Props {
     nodes: NodeMetadata[];
     selectedCategory?: NodeCategory;
+    activeFormat?: WorkflowFormat;
 }
 declare const NodeSidebar: import("svelte").Component<Props, {}, "">;
 type NodeSidebar = ReturnType<typeof NodeSidebar>;

package/dist/components/SchemaForm.svelte

@@ -53,7 +53,9 @@
 	import { setContext } from 'svelte';
 	import Icon from '@iconify/svelte';
 	import type { ConfigSchema, AuthProvider } from '../types/index.js';
+	import type { UISchemaElement } from '../types/uischema.js';
 	import { FormField } from './form/index.js';
+	import FormUISchemaRenderer from './form/FormUISchemaRenderer.svelte';
 	import type { FieldSchema } from './form/index.js';
 
 	/**
@@ -66,6 +68,14 @@
 		 */
 		schema: ConfigSchema;
 
+		/**
+		 * Optional UI Schema that controls field layout and grouping.
+		 * When provided, fields render according to the UISchema tree structure.
+		 * When absent, fields render in flat order from schema.properties.
+		 * @see https://jsonforms.io/docs/uischema
+		 */
+		uiSchema?: UISchemaElement;
+
 		/**
 		 * Current form values as key-value pairs.
 		 * Keys should correspond to properties defined in the schema.
@@ -142,6 +152,7 @@
 
 	let {
 		schema,
+		uiSchema,
 		values = {},
 		onChange,
 		showActions = false,
@@ -297,19 +308,30 @@
 		}}
 	>
 		<div class="schema-form__fields">
-			{#each Object.entries(schema.properties) as [key, field], index (key)}
-				{@const fieldSchema = toFieldSchema(field as Record<string, unknown>)}
-				{@const required = isFieldRequired(key)}
-
-				<FormField
-					fieldKey={key}
-					schema={fieldSchema}
-					value={formValues[key]}
-					{required}
-					animationIndex={index}
-					onChange={(val) => handleFieldChange(key, val)}
+			{#if uiSchema}
+				<FormUISchemaRenderer
+					element={uiSchema}
+					{schema}
+					values={formValues}
+					requiredFields={schema.required ?? []}
+					onFieldChange={handleFieldChange}
+					{toFieldSchema}
 				/>
-			{/each}
+			{:else}
+				{#each Object.entries(schema.properties) as [key, field], index (key)}
+					{@const fieldSchema = toFieldSchema(field as Record<string, unknown>)}
+					{@const required = isFieldRequired(key)}
+
+					<FormField
+						fieldKey={key}
+						schema={fieldSchema}
+						value={formValues[key]}
+						{required}
+						animationIndex={index}
+						onChange={(val) => handleFieldChange(key, val)}
+					/>
+				{/each}
+			{/if}
 		</div>
 
 		{#if showActions}

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

@@ -1,4 +1,5 @@
 import type { ConfigSchema, AuthProvider } from '../types/index.js';
+import type { UISchemaElement } from '../types/uischema.js';
 /**
  * Props interface for SchemaForm component
  */
@@ -8,6 +9,13 @@ interface Props {
      * Should follow JSON Schema draft-07 format with type: "object".
      */
     schema: ConfigSchema;
+    /**
+     * Optional UI Schema that controls field layout and grouping.
+     * When provided, fields render according to the UISchema tree structure.
+     * When absent, fields render in flat order from schema.properties.
+     * @see https://jsonforms.io/docs/uischema
+     */
+    uiSchema?: UISchemaElement;
     /**
      * Current form values as key-value pairs.
      * Keys should correspond to properties defined in the schema.

package/dist/components/WorkflowEditor.svelte

@@ -387,19 +387,20 @@
 
 		// Find the best compatible edge using port-to-port distance
 		const portCoordinates = getPortCoordinateSnapshot();
-		const candidates = portCoordinates.size > 0
-			? ProximityConnectHelper.findCompatibleEdgesByPortCoordinates(
-					targetNode.id,
-					portCoordinates,
-					baseEdges,
-					$editorSettings.proximityConnectDistance
-				)
-			: ProximityConnectHelper.findCompatibleEdges(
-					targetNode,
-					flowNodes,
-					baseEdges,
-					$editorSettings.proximityConnectDistance
-				);
+		const candidates =
+			portCoordinates.size > 0
+				? ProximityConnectHelper.findCompatibleEdgesByPortCoordinates(
+						targetNode.id,
+						portCoordinates,
+						baseEdges,
+						$editorSettings.proximityConnectDistance
+					)
+				: ProximityConnectHelper.findCompatibleEdges(
+						targetNode,
+						flowNodes,
+						baseEdges,
+						$editorSettings.proximityConnectDistance
+					);
 
 		// Create preview edges
 		const previews = ProximityConnectHelper.createPreviewEdges(candidates);