@d34dman/flowdrop 0.0.47 → 0.0.49

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,
@@ -390,6 +393,13 @@
 	 * Uses enhanced API client with authProvider support when available.
 	 */
 	async function saveWorkflow(): Promise<void> {
+		// Flush any pending form changes by blurring the active element.
+		// This ensures focusout handlers (like ConfigForm's handleFormBlur)
+		// sync local state to the global store before we read it.
+		if (document.activeElement instanceof HTMLElement) {
+			document.activeElement.blur();
+		}
+
 		// Wait for any pending DOM updates before saving
 		await tick();
 
@@ -705,6 +715,7 @@
 						}
 					]}
 			showStatus={true}
+			{showSettings}
 		/>
 	{/snippet}
 

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,13 +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';
@@ -61,6 +63,8 @@
 		 * 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) */
@@ -78,11 +82,17 @@
 		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
 	 */
@@ -132,13 +142,19 @@
 	});
 
 	/**
-	 * 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
+		);
 	});
 
 	/**
@@ -388,7 +404,12 @@
 		const fieldSchema = property as FieldSchema;
 
 		// Process template fields to compute variable schema
-		if (fieldSchema.format === 'template' && node && workflowNodes.length > 0 && workflowEdges.length > 0) {
+		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;
 
@@ -537,6 +558,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, WorkflowEdge, 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;
@@ -22,6 +22,8 @@ interface Props {
      * 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/NodeSidebar.svelte

@@ -161,6 +161,7 @@
 			memories: 'Memories',
 			agents: 'Agents',
 			ai: 'AI',
+			interrupts: 'Interrupts',
 			bundles: 'Bundles'
 		};
 		return names[category] || category;

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

@@ -188,10 +188,10 @@
 				undoHistoryLimit: {
 					type: 'number',
 					title: 'Undo History Limit',
-					description: 'Maximum number of undo steps',
-					minimum: 10,
+					description: 'Maximum number of undo steps (0 to disable)',
+					minimum: 0,
 					maximum: 200,
-					default: 50
+					default: 0
 				},
 				confirmDelete: {
 					type: 'boolean',

package/dist/components/form/FormAutocomplete.svelte

@@ -59,9 +59,12 @@
 		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 +145,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 +198,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/FormCodeEditor.svelte

@@ -25,12 +25,12 @@
 	import { EditorState } from '@codemirror/state';
 	import { history, historyKeymap } from '@codemirror/commands';
 	import { highlightSpecialChars, highlightActiveLine } from '@codemirror/view';
-	import { syntaxHighlighting, defaultHighlightStyle, indentOnInput } from '@codemirror/language';
+	import { syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language';
 	import { keymap } from '@codemirror/view';
 	import { defaultKeymap, indentWithTab } from '@codemirror/commands';
 	import { json, jsonParseLinter } from '@codemirror/lang-json';
 	import { oneDark } from '@codemirror/theme-one-dark';
-	import { linter, lintGutter } from '@codemirror/lint';
+	import { linter } from '@codemirror/lint';
 
 	interface Props {
 		/** Field identifier */
@@ -80,6 +80,9 @@
 	/** Flag to prevent update loops */
 	let isInternalUpdate = false;
 
+	/** Flag to skip $effect when change originated from the editor */
+	let isEditorUpdate = false;
+
 	/**
 	 * Convert value to JSON string for editor display
 	 */
@@ -129,6 +132,7 @@
 		const content = update.state.doc.toString();
 		const result = validateAndParse(content);
 
+		isEditorUpdate = true;
 		if (result.valid) {
 			validationError = undefined;
 			// Emit the parsed value (object) not the string
@@ -184,22 +188,17 @@
 			// Editing features (skip when read-only)
 			...(disabled
 				? []
-				: [
-						history(),
-						indentOnInput(),
-						keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab])
-					]),
+				: [history(), keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab])]),
 
 			// Read-only: prevent document changes and mark content as non-editable
 			...(disabled ? [EditorState.readOnly.of(true), EditorView.editable.of(false)] : []),
 
-			// Syntax highlighting
-			syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+			// Syntax highlighting - use default for light mode, oneDark handles dark mode
+			...(darkTheme ? [oneDark] : [syntaxHighlighting(defaultHighlightStyle, { fallback: true })]),
 
 			// JSON-specific features
 			json(),
-			linter(jsonParseLinter()),
-			lintGutter(),
+			linter(jsonParseLinter(), { delay: 1000 }),
 
 			// Update listener (only fires on user edit when not disabled)
 			EditorView.updateListener.of(handleUpdate),
@@ -224,10 +223,6 @@
 			EditorView.lineWrapping
 		];
 
-		if (darkTheme) {
-			extensions.push(oneDark);
-		}
-
 		return extensions;
 	}
 
@@ -276,6 +271,13 @@
 		}
 
 		const newContent = valueToString(value);
+
+		// Skip if the change originated from the editor itself
+		if (isEditorUpdate) {
+			isEditorUpdate = false;
+			return;
+		}
+
 		const currentContent = editorView.state.doc.toString();
 
 		// Only update if content actually changed and wasn't from internal edit

package/dist/components/form/FormField.svelte

@@ -43,6 +43,8 @@
 	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';
+	import { resolvedTheme } from '../../stores/settingsStore.js';
 
 	interface Props {
 		/** Unique key/id for the field */
@@ -57,9 +59,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).
@@ -322,7 +346,7 @@
 				placeholder={schema.placeholder ?? '{}'}
 				{required}
 				height={(schema.height as string | undefined) ?? '200px'}
-				darkTheme={(schema.darkTheme as boolean | undefined) ?? false}
+				darkTheme={(schema.darkTheme as boolean | undefined) ?? $resolvedTheme === 'dark'}
 				autoFormat={(schema.autoFormat as boolean | undefined) ?? true}
 				ariaDescribedBy={descriptionId}
 				disabled={isReadOnly}
@@ -350,13 +374,17 @@
 					'Enter your template here...\nUse {{ variable }} for dynamic values.'}
 				{required}
 				height={(schema.height as string | undefined) ?? '250px'}
-				darkTheme={(schema.darkTheme as boolean | undefined) ?? false}
+				darkTheme={(schema.darkTheme as boolean | undefined) ?? $resolvedTheme === 'dark'}
 				variables={schema.variables}
-				variableHints={(schema.variableHints as string[] | undefined) ?? []}
 				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

@@ -242,7 +242,6 @@
 				showStatusBar={schema.showStatusBar as boolean | undefined}
 				spellChecker={schema.spellChecker as boolean | undefined}
 				variables={schema.variables}
-				variableHints={schema.variableHints as string[] | undefined}
 				placeholderExample={schema.placeholderExample as string | undefined}
 				onChange={(val: unknown) => onChange(val)}
 			/>