@d34dman/flowdrop 0.0.46 → 0.0.48

package/dist/components/App.svelte

@@ -71,6 +71,8 @@
 			variant?: 'primary' | 'secondary' | 'outline';
 			onclick?: (event: Event) => void;
 		}>;
+		/** Show settings gear icon in navbar */
+		showSettings?: boolean;
 		/** API base URL */
 		apiBaseUrl?: string;
 		/** Endpoint configuration */
@@ -96,6 +98,7 @@
 		pipelineId,
 		navbarTitle,
 		navbarActions = [],
+		showSettings = true,
 		apiBaseUrl,
 		endpointConfig: propEndpointConfig,
 		authProvider,
@@ -705,6 +708,7 @@
 						}
 					]}
 			showStatus={true}
+			{showSettings}
 		/>
 	{/snippet}
 
@@ -756,6 +760,8 @@
 				<ConfigForm
 					node={currentNode}
 					workflowId={$workflowStore?.id}
+					workflowNodes={$workflowStore?.nodes}
+					workflowEdges={$workflowStore?.edges}
 					onChange={async (updatedConfig, uiExtensions) => {
 						// Sync config changes to workflow immediately on field blur
 						if (selectedNodeId && currentNode) {
@@ -780,6 +786,10 @@
 
 							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);
 						}

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

@@ -36,6 +36,8 @@ interface Props {
         variant?: 'primary' | 'secondary' | 'outline';
         onclick?: (event: Event) => void;
     }>;
+    /** Show settings gear icon in navbar */
+    showSettings?: boolean;
     /** API base URL */
     apiBaseUrl?: string;
     /** Endpoint configuration */

package/dist/components/ConfigForm.svelte

@@ -18,12 +18,15 @@
 -->
 
 <script lang="ts">
+	import { setContext } from 'svelte';
 	import Icon from '@iconify/svelte';
 	import type {
 		ConfigSchema,
 		WorkflowNode,
+		WorkflowEdge,
 		NodeUIExtensions,
-		ConfigEditOptions
+		ConfigEditOptions,
+		AuthProvider
 	} from '../types/index.js';
 	import { FormField, FormFieldWrapper, FormToggle } from './form/index.js';
 	import type { FieldSchema } from './form/index.js';
@@ -35,6 +38,7 @@
 		type DynamicSchemaResult
 	} from '../services/dynamicSchemaService.js';
 	import { globalSaveWorkflow } from '../services/globalSave.js';
+	import { getAvailableVariables } from '../services/variableService.js';
 
 	interface Props {
 		/** Optional workflow node (if provided, schema and values are derived from it) */
@@ -49,6 +53,18 @@
 		workflowId?: string;
 		/** Whether to also save the workflow when saving config */
 		saveWorkflowWhenSavingConfig?: boolean;
+		/**
+		 * All workflow nodes (used for deriving template variables from connected nodes).
+		 * When provided along with workflowEdges, enables autocomplete for template fields.
+		 */
+		workflowNodes?: WorkflowNode[];
+		/**
+		 * All workflow edges (used for finding connections to derive template variables).
+		 * When provided along with workflowNodes, enables autocomplete for template fields.
+		 */
+		workflowEdges?: WorkflowEdge[];
+		/** Auth provider for API requests (used for template variable API mode) */
+		authProvider?: AuthProvider;
 		/** Callback when any field value changes (fired on blur for immediate sync) */
 		onChange?: (config: Record<string, unknown>, uiExtensions?: NodeUIExtensions) => void;
 		/** Callback when form is saved (includes both config and extensions if enabled) */
@@ -64,11 +80,19 @@
 		showUIExtensions = true,
 		workflowId,
 		saveWorkflowWhenSavingConfig = false,
+		workflowNodes = [],
+		workflowEdges = [],
+		authProvider,
 		onChange,
 		onSave,
 		onCancel
 	}: Props = $props();
 
+	// Set context for child components (e.g., FormAutocomplete)
+	// Use getter functions to ensure child components always get the current prop value,
+	// even if the prop changes after initial mount
+	setContext<() => AuthProvider | undefined>('flowdrop:getAuthProvider', () => authProvider);
+
 	/**
 	 * State for dynamic schema loading
 	 */
@@ -118,13 +142,14 @@
 	});
 
 	/**
-	 * Check if the node has no static schema and needs dynamic loading
+	 * Check if the node needs dynamic schema loading
+	 * Loads when: no static schema OR preferDynamicSchema is true
 	 */
 	const needsDynamicSchemaLoad = $derived.by(() => {
 		if (!node) return false;
 		const staticSchema = schema ?? node.data.metadata?.configSchema;
-		// Need to load if: no static schema AND dynamic schema is configured
-		return !staticSchema && useDynamicSchema && !fetchedDynamicSchema && !dynamicSchemaLoading;
+		// Need to load if: (no static schema OR preferDynamicSchema is true) AND dynamic schema is configured
+		return (!staticSchema || configEditOptions?.preferDynamicSchema === true) && useDynamicSchema && !fetchedDynamicSchema && !dynamicSchemaLoading;
 	});
 
 	/**
@@ -364,10 +389,46 @@
 	}
 
 	/**
-	 * Convert ConfigProperty to FieldSchema for FormField component
+	 * Convert ConfigProperty to FieldSchema for FormField component.
+	 * Processes template fields to inject computed variable schema.
+	 *
+	 * For template fields, the `variables` config controls which input ports
+	 * provide variables for autocomplete.
 	 */
 	function toFieldSchema(property: Record<string, unknown>): FieldSchema {
-		return property as FieldSchema;
+		const fieldSchema = property as FieldSchema;
+
+		// Process template fields to compute variable schema
+		if (fieldSchema.format === 'template' && node && workflowNodes.length > 0 && workflowEdges.length > 0) {
+			// Get the variables config (may be undefined or partially defined)
+			const variablesConfig = fieldSchema.variables;
+
+			// Compute the variable schema with optional port filtering and port name prefixing
+			const computedSchema = getAvailableVariables(node, workflowNodes, workflowEdges, {
+				targetPortIds: variablesConfig?.ports,
+				includePortName: variablesConfig?.includePortName
+			});
+
+			// Merge computed schema with any pre-defined schema
+			const mergedSchema = variablesConfig?.schema
+				? {
+						variables: {
+							...computedSchema.variables,
+							...variablesConfig.schema.variables
+						}
+					}
+				: computedSchema;
+
+			return {
+				...fieldSchema,
+				variables: {
+					...variablesConfig,
+					schema: mergedSchema
+				}
+			} as FieldSchema;
+		}
+
+		return fieldSchema;
 	}
 </script>
 
@@ -487,6 +548,11 @@
 						value={configValues[key]}
 						{required}
 						animationIndex={index}
+						{node}
+						nodes={workflowNodes}
+						edges={workflowEdges}
+						{workflowId}
+						{authProvider}
 						onChange={(val) => handleFieldChange(key, val)}
 					/>
 				{/each}

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

@@ -1,4 +1,4 @@
-import type { ConfigSchema, WorkflowNode, NodeUIExtensions } from '../types/index.js';
+import type { ConfigSchema, WorkflowNode, WorkflowEdge, NodeUIExtensions, AuthProvider } from '../types/index.js';
 interface Props {
     /** Optional workflow node (if provided, schema and values are derived from it) */
     node?: WorkflowNode;
@@ -12,6 +12,18 @@ interface Props {
     workflowId?: string;
     /** Whether to also save the workflow when saving config */
     saveWorkflowWhenSavingConfig?: boolean;
+    /**
+     * All workflow nodes (used for deriving template variables from connected nodes).
+     * When provided along with workflowEdges, enables autocomplete for template fields.
+     */
+    workflowNodes?: WorkflowNode[];
+    /**
+     * All workflow edges (used for finding connections to derive template variables).
+     * When provided along with workflowNodes, enables autocomplete for template fields.
+     */
+    workflowEdges?: WorkflowEdge[];
+    /** Auth provider for API requests (used for template variable API mode) */
+    authProvider?: AuthProvider;
     /** Callback when any field value changes (fired on blur for immediate sync) */
     onChange?: (config: Record<string, unknown>, uiExtensions?: NodeUIExtensions) => void;
     /** Callback when form is saved (includes both config and extensions if enabled) */

package/dist/components/SchemaForm.svelte

@@ -157,8 +157,10 @@
 	}: Props = $props();
 
 	// Set context for child components (e.g., FormAutocomplete)
-	setContext<AuthProvider | undefined>('flowdrop:authProvider', authProvider);
-	setContext<string>('flowdrop:baseUrl', baseUrl);
+	// Use getter functions to ensure child components always get the current prop value,
+	// even if the prop changes after initial mount
+	setContext<() => AuthProvider | undefined>('flowdrop:getAuthProvider', () => authProvider);
+	setContext<() => string>('flowdrop:getBaseUrl', () => baseUrl);
 
 	/**
 	 * Internal reactive state for form values

package/dist/components/SettingsPanel.svelte

@@ -89,8 +89,11 @@
 					type: 'string',
 					title: 'Theme Preference',
 					description: 'Choose your preferred color scheme',
-					enum: ['light', 'dark', 'auto'],
-					enumLabels: ['Light', 'Dark', 'Auto (System)'],
+					oneOf: [
+						{ const: 'light', title: 'Light' },
+						{ const: 'dark', title: 'Dark' },
+						{ const: 'auto', title: 'Auto (System)' }
+					],
 					default: 'auto'
 				}
 			}

package/dist/components/WorkflowEditor.svelte

@@ -515,6 +515,32 @@
 	 */
 	let nodeIdToRefresh = $state<string | null>(null);
 
+	/**
+	 * Update a node's data in the local editor state.
+	 * This should be called after updating the node in the global store to ensure
+	 * the visual representation is updated immediately (e.g., for nodeType changes).
+	 *
+	 * @param nodeId - The ID of the node to update
+	 * @param dataUpdates - Partial data updates to merge into the node's data
+	 */
+	export function updateNodeData(
+		nodeId: string,
+		dataUpdates: Partial<WorkflowNodeType['data']>
+	): void {
+		flowNodes = flowNodes.map((node) => {
+			if (node.id === nodeId) {
+				return {
+					...node,
+					data: {
+						...node.data,
+						...dataUpdates
+					}
+				};
+			}
+			return node;
+		});
+	}
+
 	/**
 	 * Force edge position recalculation after node config changes
 	 * This should be called after saving gateway/switch node configs where branches are reordered

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

@@ -16,6 +16,7 @@ interface Props {
     pipelineId?: string;
 }
 declare const WorkflowEditor: import("svelte").Component<Props, {
+    updateNodeData: (nodeId: string, dataUpdates: Partial<WorkflowNodeType["data"]>) => void;
     refreshEdgePositions: (nodeId: string) => Promise<void>;
 }, "">;
 type WorkflowEditor = ReturnType<typeof WorkflowEditor>;

package/dist/components/form/FormAutocomplete.svelte

@@ -59,9 +59,10 @@
 		onChange
 	}: Props = $props();
 
-	// Get AuthProvider from context (set by SchemaForm or parent)
-	const authProvider = getContext<AuthProvider | undefined>('flowdrop:authProvider');
-	const baseUrl = getContext<string | undefined>('flowdrop:baseUrl') ?? '';
+	// Get AuthProvider and baseUrl from context via getter functions
+	// This pattern ensures we always get the current value, even if props change after mount
+	const getAuthProvider = getContext<(() => AuthProvider | undefined) | undefined>('flowdrop:getAuthProvider');
+	const getBaseUrl = getContext<(() => string) | undefined>('flowdrop:getBaseUrl');
 
 	// Configuration with defaults
 	const queryParam = $derived(autocomplete.queryParam ?? 'q');
@@ -142,6 +143,7 @@
 	 * @returns Full URL with query parameter
 	 */
 	function buildUrl(query: string): string {
+		const baseUrl = getBaseUrl?.() ?? '';
 		const url = autocomplete.url.startsWith('http')
 			? autocomplete.url
 			: `${baseUrl}${autocomplete.url}`;
@@ -194,7 +196,8 @@
 				'Content-Type': 'application/json'
 			};
 
-			// Add auth headers if provider is available
+			// Add auth headers if provider is available (call getter to get current value)
+			const authProvider = getAuthProvider?.();
 			if (authProvider) {
 				const authHeaders = await authProvider.getAuthHeaders();
 				Object.assign(headers, authHeaders);

package/dist/components/form/FormField.svelte

@@ -17,12 +17,12 @@
   5. format: 'template' -> FormTemplateEditor (CodeMirror with Twig/Liquid syntax)
   6. enum with multiple: true -> FormCheckboxGroup
   7. enum -> FormSelect (simple values without labels)
-  8. format: 'multiline' -> FormTextarea
-  9. format: 'range' (number/integer) -> FormRangeField
-  10. type: 'string' -> FormTextField
-  11. type: 'number' or 'integer' -> FormNumberField
-  12. type: 'boolean' -> FormToggle
-  13. oneOf with const/title (labeled options) -> FormSelect
+  8. oneOf with const/title (labeled options) -> FormSelect
+  9. format: 'multiline' -> FormTextarea
+  10. format: 'range' (number/integer) -> FormRangeField
+  11. type: 'string' -> FormTextField
+  12. type: 'number' or 'integer' -> FormNumberField
+  13. type: 'boolean' -> FormToggle
   14. type: 'object' (without format) -> FormCodeEditor (for JSON objects)
   15. fallback -> FormTextField
 -->
@@ -43,6 +43,7 @@
 	import FormAutocomplete from './FormAutocomplete.svelte';
 	import type { FieldSchema } from './types.js';
 	import { getSchemaOptions } from './types.js';
+	import type { WorkflowNode, WorkflowEdge, AuthProvider } from '../../types/index.js';
 
 	interface Props {
 		/** Unique key/id for the field */
@@ -57,9 +58,31 @@
 		animationIndex?: number;
 		/** Callback when the field value changes */
 		onChange: (value: unknown) => void;
+		/** Current workflow node (optional, used for template variable API mode) */
+		node?: WorkflowNode;
+		/** All workflow nodes (optional, used for port-derived variables) */
+		nodes?: WorkflowNode[];
+		/** All workflow edges (optional, used for port-derived variables) */
+		edges?: WorkflowEdge[];
+		/** Workflow ID (optional, used for template variable API mode) */
+		workflowId?: string;
+		/** Auth provider (optional, used for API requests) */
+		authProvider?: AuthProvider;
 	}
 
-	let { fieldKey, schema, value, required = false, animationIndex = 0, onChange }: Props = $props();
+	let {
+		fieldKey,
+		schema,
+		value,
+		required = false,
+		animationIndex = 0,
+		onChange,
+		node,
+		nodes,
+		edges,
+		workflowId,
+		authProvider
+	}: Props = $props();
 
 	/**
 	 * When schema.readOnly is true, disable all inputs (no editing).
@@ -122,6 +145,12 @@
 			return 'select-enum';
 		}
 
+		// oneOf with labeled options (standard JSON Schema) or legacy options -> select
+		// Must be checked before basic type checks since oneOf schemas often have type: 'string'
+		if ((schema.oneOf && schema.oneOf.length > 0) || schema.options) {
+			return 'select-options';
+		}
+
 		// Multiline string -> textarea
 		if (schema.type === 'string' && schema.format === 'multiline') {
 			return 'textarea';
@@ -147,11 +176,6 @@
 			return 'toggle';
 		}
 
-		// oneOf with labeled options (standard JSON Schema) or legacy options -> select
-		if ((schema.oneOf && schema.oneOf.length > 0) || schema.options) {
-			return 'select-options';
-		}
-
 		// Future: Array type support
 		if (schema.type === 'array') {
 			return 'array';
@@ -350,11 +374,16 @@
 				{required}
 				height={(schema.height as string | undefined) ?? '250px'}
 				darkTheme={(schema.darkTheme as boolean | undefined) ?? false}
-				variableHints={(schema.variableHints as string[] | undefined) ?? []}
+				variables={schema.variables}
 				placeholderExample={(schema.placeholderExample as string | undefined) ??
 					'Hello {{ name }}, your order #{{ order_id }} is ready!'}
 				ariaDescribedBy={descriptionId}
 				disabled={isReadOnly}
+				{node}
+				{nodes}
+				{edges}
+				{workflowId}
+				{authProvider}
 				onChange={(val) => onChange(val)}
 			/>
 		{:else if fieldType === 'autocomplete' && schema.autocomplete}

package/dist/components/form/FormField.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { FieldSchema } from './types.js';
+import type { WorkflowNode, WorkflowEdge, AuthProvider } from '../../types/index.js';
 interface Props {
     /** Unique key/id for the field */
     fieldKey: string;
@@ -12,6 +13,16 @@ interface Props {
     animationIndex?: number;
     /** Callback when the field value changes */
     onChange: (value: unknown) => void;
+    /** Current workflow node (optional, used for template variable API mode) */
+    node?: WorkflowNode;
+    /** All workflow nodes (optional, used for port-derived variables) */
+    nodes?: WorkflowNode[];
+    /** All workflow edges (optional, used for port-derived variables) */
+    edges?: WorkflowEdge[];
+    /** Workflow ID (optional, used for template variable API mode) */
+    workflowId?: string;
+    /** Auth provider (optional, used for API requests) */
+    authProvider?: AuthProvider;
 }
 declare const FormField: import("svelte").Component<Props, {}, "">;
 type FormField = ReturnType<typeof FormField>;

package/dist/components/form/FormFieldLight.svelte

@@ -22,12 +22,12 @@
   2. format: 'hidden' -> skip rendering (return nothing)
   3. enum with multiple: true -> FormCheckboxGroup
   4. enum -> FormSelect (simple values without labels)
-  5. format: 'multiline' -> FormTextarea
-  6. format: 'range' (number/integer) -> FormRangeField
-  7. type: 'string' -> FormTextField
-  8. type: 'number' or 'integer' -> FormNumberField
-  9. type: 'boolean' -> FormToggle
-  10. oneOf with const/title (labeled options) -> FormSelect
+  5. oneOf with const/title (labeled options) -> FormSelect
+  6. format: 'multiline' -> FormTextarea
+  7. format: 'range' (number/integer) -> FormRangeField
+  8. type: 'string' -> FormTextField
+  9. type: 'number' or 'integer' -> FormNumberField
+  10. type: 'boolean' -> FormToggle
   11. type: 'array' -> FormArray
   12. fallback -> FormTextField
 -->
@@ -43,6 +43,7 @@
 	import FormCheckboxGroup from './FormCheckboxGroup.svelte';
 	import FormArray from './FormArray.svelte';
 	import { resolveFieldComponent } from '../../form/fieldRegistry.js';
+	import { resolvedTheme } from '../../stores/settingsStore.js';
 	import type { FieldSchema } from './types.js';
 	import { getSchemaOptions } from './types.js';
 
@@ -127,6 +128,12 @@
 			return 'select-enum';
 		}
 
+		// oneOf with labeled options (standard JSON Schema) or legacy options -> select
+		// Must be checked before basic type checks since oneOf schemas often have type: 'string'
+		if ((schema.oneOf && schema.oneOf.length > 0) || schema.options) {
+			return 'select-options';
+		}
+
 		// Multiline string -> textarea
 		if (schema.type === 'string' && schema.format === 'multiline') {
 			return 'textarea';
@@ -152,11 +159,6 @@
 			return 'toggle';
 		}
 
-		// oneOf with labeled options (standard JSON Schema) or legacy options -> select
-		if ((schema.oneOf && schema.oneOf.length > 0) || schema.options) {
-			return 'select-options';
-		}
-
 		// Array type
 		if (schema.type === 'array') {
 			return 'array';
@@ -226,6 +228,7 @@
 	>
 		{#if fieldType === 'registered' && registeredComponent}
 			<!-- Render registered custom component -->
+			<!-- darkTheme: use schema value if explicitly set, otherwise derive from resolved theme -->
 			<registeredComponent.component
 				id={fieldKey}
 				{value}
@@ -233,12 +236,12 @@
 				{required}
 				ariaDescribedBy={descriptionId}
 				height={schema.height as string | undefined}
-				darkTheme={schema.darkTheme as boolean | undefined}
+				darkTheme={schema.darkTheme ?? $resolvedTheme === 'dark'}
 				autoFormat={schema.autoFormat as boolean | undefined}
 				showToolbar={schema.showToolbar as boolean | undefined}
 				showStatusBar={schema.showStatusBar as boolean | undefined}
 				spellChecker={schema.spellChecker as boolean | undefined}
-				variableHints={schema.variableHints as string[] | undefined}
+				variables={schema.variables}
 				placeholderExample={schema.placeholderExample as string | undefined}
 				onChange={(val: unknown) => onChange(val)}
 			/>