@d34dman/flowdrop 0.0.48 → 0.0.50

package/dist/components/App.svelte

@@ -393,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();
 

package/dist/components/ConfigForm.svelte

@@ -149,7 +149,12 @@
 		if (!node) return false;
 		const staticSchema = schema ?? node.data.metadata?.configSchema;
 		// Need to load if: (no static schema OR preferDynamicSchema is true) AND dynamic schema is configured
-		return (!staticSchema || configEditOptions?.preferDynamicSchema === true) && useDynamicSchema && !fetchedDynamicSchema && !dynamicSchemaLoading;
+		return (
+			(!staticSchema || configEditOptions?.preferDynamicSchema === true) &&
+			useDynamicSchema &&
+			!fetchedDynamicSchema &&
+			!dynamicSchemaLoading
+		);
 	});
 
 	/**
@@ -399,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;
 

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/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/WorkflowEditor.svelte

@@ -72,16 +72,25 @@
 	// Track the workflow ID we're currently editing to detect workflow switches
 	let currentWorkflowId: string | null = null;
 
+	// Track the last store value written by this editor to distinguish
+	// external programmatic changes from our own echoed writes
+	let lastEditorStoreValue: Workflow | null = null;
+
 	// Initialize currentWorkflow from global store
-	// Only sync when workflow ID changes (new workflow loaded) or on initial load
+	// Sync on workflow ID change (new workflow loaded) or external programmatic changes
 	$effect(() => {
 		if ($workflowStore) {
 			const storeWorkflowId = $workflowStore.id;
 
-			// Sync on initial load or when a different workflow is loaded
 			if (currentWorkflowId !== storeWorkflowId) {
+				// New workflow loaded
 				currentWorkflow = $workflowStore;
 				currentWorkflowId = storeWorkflowId;
+				lastEditorStoreValue = null;
+			} else if ($workflowStore !== lastEditorStoreValue) {
+				// External programmatic change (e.g. addEdge, updateNode, updateEdges)
+				// The store value differs from what this editor last wrote, so sync it
+				currentWorkflow = $workflowStore;
 			}
 		} else if (currentWorkflow !== null) {
 			// Store was cleared
@@ -95,6 +104,8 @@
 		setOnRestoreCallback((restoredWorkflow: Workflow) => {
 			// Directly update local state (bypass store sync effect)
 			currentWorkflow = restoredWorkflow;
+			// Mark as our own write so sync effect doesn't re-process it
+			lastEditorStoreValue = restoredWorkflow;
 			// Also update the store without triggering history
 			workflowActions.restoreFromHistory(restoredWorkflow);
 		});
@@ -207,6 +218,7 @@
 	 */
 	const updateGlobalStore = throttle((): void => {
 		if (currentWorkflow) {
+			lastEditorStoreValue = currentWorkflow;
 			workflowActions.updateWorkflow(currentWorkflow);
 		}
 	}, 16);

package/dist/components/form/FormAutocomplete.svelte

@@ -61,7 +61,9 @@
 
 	// 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 getAuthProvider = getContext<(() => AuthProvider | undefined) | undefined>(
+		'flowdrop:getAuthProvider'
+	);
 	const getBaseUrl = getContext<(() => string) | undefined>('flowdrop:getBaseUrl');
 
 	// Configuration with defaults

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

@@ -44,6 +44,7 @@
 	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 */
@@ -345,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}
@@ -373,7 +374,7 @@
 					'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}
 				placeholderExample={(schema.placeholderExample as string | undefined) ??
 					'Hello {{ name }}, your order #{{ order_id }} is ready!'}

package/dist/components/form/FormTemplateEditor.svelte

@@ -27,15 +27,14 @@
 		highlightSpecialChars,
 		highlightActiveLine,
 		keymap,
+		tooltips,
 		Decoration,
-		type DecorationSet,
 		ViewPlugin,
-		type ViewUpdate,
 		MatchDecorator
 	} from '@codemirror/view';
 	import { EditorState, Compartment } from '@codemirror/state';
 	import { history, historyKeymap, defaultKeymap, indentWithTab } from '@codemirror/commands';
-	import { syntaxHighlighting, defaultHighlightStyle, indentOnInput } from '@codemirror/language';
+	import { syntaxHighlighting, defaultHighlightStyle } from '@codemirror/language';
 	import { oneDark } from '@codemirror/theme-one-dark';
 	import type {
 		VariableSchema,
@@ -207,36 +206,37 @@
 	const autocompleteCompartment = new Compartment();
 
 	/**
-	 * Create a MatchDecorator for {{ variable }} patterns
-	 * This highlights the entire {{ variable }} expression
-	 * Supports:
-	 * - Simple variables: {{ name }}
-	 * - Dot notation: {{ user.name }}, {{ user.address.city }}
-	 * - Array access: {{ items[0] }}, {{ items[0].name }}
-	 * - Mixed: {{ orders[0].items[1].price }}
+	 * Custom Twig syntax highlighter using MatchDecorator
+	 * Highlights three Twig delimiter types with different styles:
+	 * - {{ expression }} — variables/output (purple)
+	 * - {% block %}      — control structures (teal)
+	 * - {# comment #}    — comments (gray/italic)
 	 */
-	const variableMatcher = new MatchDecorator({
-		// Match {{ variable_name }} patterns with dot notation and array indices
-		regexp: /\{\{\s*[\w]+(?:\.[\w]+|\[\d+\]|\[\*\])*\s*\}\}/g,
-		decoration: Decoration.mark({ class: 'cm-template-variable' })
+	const twigMatcher = new MatchDecorator({
+		regexp: /\{\{.*?\}\}|\{%.*?%\}|\{#.*?#\}/g,
+		decoration: (match) => {
+			const text = match[0];
+			if (text.startsWith('{{')) {
+				return Decoration.mark({ class: 'cm-twig-expression' });
+			} else if (text.startsWith('{%')) {
+				return Decoration.mark({ class: 'cm-twig-block' });
+			} else {
+				return Decoration.mark({ class: 'cm-twig-comment' });
+			}
+		}
 	});
 
-	/**
-	 * ViewPlugin that applies the variable highlighting decorations
-	 */
-	const variableHighlighter = ViewPlugin.fromClass(
+	const twigHighlighter = ViewPlugin.fromClass(
 		class {
-			decorations: DecorationSet;
+			decorations;
 			constructor(view: EditorView) {
-				this.decorations = variableMatcher.createDeco(view);
+				this.decorations = twigMatcher.createDeco(view);
 			}
-			update(update: ViewUpdate) {
-				this.decorations = variableMatcher.updateDeco(update, this.decorations);
+			update(update: import('@codemirror/view').ViewUpdate) {
+				this.decorations = twigMatcher.updateDeco(update, this.decorations);
 			}
 		},
-		{
-			decorations: (v) => v.decorations
-		}
+		{ decorations: (v) => v.decorations }
 	);
 
 	/**
@@ -258,6 +258,9 @@
 	 */
 	function createExtensions() {
 		const extensions = [
+			// Position tooltips using fixed strategy so they aren't clipped by container overflow
+			tooltips({ position: 'fixed' }),
+
 			// Essential visual features
 			lineNumbers(),
 			highlightActiveLineGutter(),
@@ -268,20 +271,16 @@
 			// 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 ? [] : [syntaxHighlighting(defaultHighlightStyle, { fallback: true })]),
 
-			// Template-specific variable highlighter
-			variableHighlighter,
+			// Twig syntax highlighting ({{ expressions }}, {% blocks %}, {# comments #})
+			twigHighlighter,
 
 			// Update listener (only fires on user edit when not disabled)
 			EditorView.updateListener.of(handleUpdate),
@@ -306,14 +305,27 @@
 				'.cm-line': {
 					padding: '0 0.5rem'
 				},
-				// Style for the highlighted {{ variable }} pattern
-				'.cm-template-variable': {
+				// Twig expression: {{ variable }}
+				'.cm-twig-expression': {
 					color: '#a855f7',
 					backgroundColor: 'rgba(168, 85, 247, 0.1)',
 					borderRadius: '3px',
 					padding: '1px 2px',
 					fontWeight: '500'
 				},
+				// Twig block: {% for ... %}
+				'.cm-twig-block': {
+					color: '#14b8a6',
+					backgroundColor: 'rgba(20, 184, 166, 0.1)',
+					borderRadius: '3px',
+					padding: '1px 2px',
+					fontWeight: '500'
+				},
+				// Twig comment: {# ... #}
+				'.cm-twig-comment': {
+					color: '#6b7280',
+					fontStyle: 'italic'
+				},
 				// Autocomplete dropdown styling
 				'.cm-tooltip.cm-tooltip-autocomplete': {
 					backgroundColor: 'var(--fd-background, #ffffff)',
@@ -355,20 +367,29 @@
 		// Add autocomplete compartment (can be reconfigured dynamically)
 		// When disabled or no schema, use empty array
 		if (!disabled && effectiveVariableSchema) {
-			extensions.push(autocompleteCompartment.of(createTemplateAutocomplete(effectiveVariableSchema)));
+			extensions.push(
+				autocompleteCompartment.of(createTemplateAutocomplete(effectiveVariableSchema))
+			);
 		} else {
 			extensions.push(autocompleteCompartment.of([]));
 		}
 
 		if (darkTheme) {
 			extensions.push(oneDark);
-			// Add dark theme override for variable highlighting and autocomplete
+			// Add dark theme overrides for Twig highlighting and autocomplete
 			extensions.push(
 				EditorView.theme({
-					'.cm-template-variable': {
+					'.cm-twig-expression': {
 						color: '#c084fc',
 						backgroundColor: 'rgba(192, 132, 252, 0.15)'
 					},
+					'.cm-twig-block': {
+						color: '#5eead4',
+						backgroundColor: 'rgba(94, 234, 212, 0.1)'
+					},
+					'.cm-twig-comment': {
+						color: '#6b7280'
+					},
 					'.cm-tooltip.cm-tooltip-autocomplete': {
 						backgroundColor: '#1e1e1e',
 						border: '1px solid #3e4451',
@@ -471,9 +492,7 @@
 
 		// When effectiveVariableSchema changes, reconfigure the autocomplete compartment
 		// This happens after async API loading completes
-		const newAutocomplete = !disabled && schema
-			? createTemplateAutocomplete(schema)
-			: [];
+		const newAutocomplete = !disabled && schema ? createTemplateAutocomplete(schema) : [];
 
 		editorView.dispatch({
 			effects: [autocompleteCompartment.reconfigure(newAutocomplete)]
@@ -511,13 +530,7 @@
 				fill="none"
 				viewBox="0 0 24 24"
 			>
-				<circle
-					class="opacity-25"
-					cx="12"
-					cy="12"
-					r="10"
-					stroke="currentColor"
-					stroke-width="4"
+				<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"
 				></circle>
 				<path
 					class="opacity-75"

package/dist/components/form/templateAutocomplete.d.ts

@@ -10,8 +10,8 @@
  *
  * @module components/form/templateAutocomplete
  */
-import type { Extension } from "@codemirror/state";
-import type { VariableSchema } from "../../types/index.js";
+import type { Extension } from '@codemirror/state';
+import type { VariableSchema } from '../../types/index.js';
 /**
  * Creates a CodeMirror extension for template variable autocomplete.
  *

package/dist/components/form/templateAutocomplete.js

@@ -10,20 +10,20 @@
  *
  * @module components/form/templateAutocomplete
  */
-import { autocompletion } from "@codemirror/autocomplete";
-import { getChildVariables, getArrayIndexSuggestions, isArrayVariable, hasChildren } from "../../services/variableService.js";
+import { autocompletion } from '@codemirror/autocomplete';
+import { getChildVariables, getArrayIndexSuggestions, isArrayVariable, hasChildren } from '../../services/variableService.js';
 /**
  * Icon type hints for different variable types in autocomplete dropdown.
  */
 const TYPE_ICONS = {
-    string: "𝑆",
-    number: "#",
-    integer: "#",
-    float: "#",
-    boolean: "☑",
-    array: "[]",
-    object: "{}",
-    mixed: "⋯"
+    string: '𝑆',
+    number: '#',
+    integer: '#',
+    float: '#',
+    boolean: '☑',
+    array: '[]',
+    object: '{}',
+    mixed: '⋯'
 };
 /**
  * Extracts the current variable path being typed inside {{ }}.
@@ -43,12 +43,12 @@ function extractVariablePath(text, pos) {
     let searchPos = pos - 1;
     while (searchPos >= 0) {
         // Check for opening {{
-        if (text[searchPos] === "{" && searchPos > 0 && text[searchPos - 1] === "{") {
+        if (text[searchPos] === '{' && searchPos > 0 && text[searchPos - 1] === '{') {
             openBracePos = searchPos - 1;
             break;
         }
         // Check for closing }} - means we're outside an expression
-        if (text[searchPos] === "}" && searchPos > 0 && text[searchPos - 1] === "}") {
+        if (text[searchPos] === '}' && searchPos > 0 && text[searchPos - 1] === '}') {
             return null;
         }
         searchPos--;
@@ -65,7 +65,8 @@ function extractVariablePath(text, pos) {
     const content = text.slice(contentStart, pos).trimStart();
     return {
         path: content,
-        startPos: contentStart + (text.slice(contentStart, pos).length - text.slice(contentStart, pos).trimStart().length),
+        startPos: contentStart +
+            (text.slice(contentStart, pos).length - text.slice(contentStart, pos).trimStart().length),
         isInsideExpression: true
     };
 }
@@ -77,35 +78,35 @@ function extractVariablePath(text, pos) {
  */
 function getCompletionType(path) {
     // Empty or only whitespace - show top-level variables
-    if (path.trim() === "") {
-        return { type: "top-level" };
+    if (path.trim() === '') {
+        return { type: 'top-level' };
     }
     // Ends with [ - show array indices
-    if (path.endsWith("[")) {
+    if (path.endsWith('[')) {
         const parentPath = path.slice(0, -1);
-        return { type: "array-index", parentPath };
+        return { type: 'array-index', parentPath };
     }
     // Ends with . - show child properties
-    if (path.endsWith(".")) {
+    if (path.endsWith('.')) {
         const parentPath = path.slice(0, -1);
-        return { type: "property", parentPath };
+        return { type: 'property', parentPath };
     }
     // Otherwise, we're typing a variable name - show matching options
-    const lastDotIndex = path.lastIndexOf(".");
-    const lastBracketIndex = path.lastIndexOf("[");
+    const lastDotIndex = path.lastIndexOf('.');
+    const lastBracketIndex = path.lastIndexOf('[');
     const lastSeparator = Math.max(lastDotIndex, lastBracketIndex);
     if (lastSeparator === -1) {
         // Typing at top level
-        return { type: "top-level" };
+        return { type: 'top-level' };
     }
     // Extract parent path based on separator
     if (lastDotIndex > lastBracketIndex) {
         // Last separator was a dot
-        return { type: "property", parentPath: path.slice(0, lastDotIndex) };
+        return { type: 'property', parentPath: path.slice(0, lastDotIndex) };
     }
     else {
         // Last separator was a bracket
-        return { type: "array-index", parentPath: path.slice(0, lastBracketIndex) };
+        return { type: 'array-index', parentPath: path.slice(0, lastBracketIndex) };
     }
 }
 /**
@@ -115,22 +116,22 @@ function getCompletionType(path) {
  * @param prefix - Prefix to add to the completion label
  * @returns A CodeMirror Completion object
  */
-function variableToCompletion(variable, prefix = "") {
+function variableToCompletion(variable, prefix = '') {
     const icon = TYPE_ICONS[variable.type] ?? TYPE_ICONS.mixed;
     const hasChildProps = variable.properties && Object.keys(variable.properties).length > 0;
-    const isArray = variable.type === "array";
+    const isArray = variable.type === 'array';
     // Add indicator if variable can be drilled into
-    let suffix = "";
+    let suffix = '';
     if (hasChildProps)
-        suffix = ".";
+        suffix = '.';
     else if (isArray)
-        suffix = "[";
+        suffix = '[';
     return {
         label: `${prefix}${variable.name}`,
-        displayLabel: `${icon} ${variable.label ?? variable.name}${suffix ? " " + suffix : ""}`,
+        displayLabel: `${icon} ${variable.label ?? variable.name}${suffix ? ' ' + suffix : ''}`,
         detail: variable.type,
         info: variable.description,
-        type: "variable",
+        type: 'variable',
         boost: hasChildProps || isArray ? 1 : 0 // Boost drillable variables
     };
 }
@@ -149,7 +150,7 @@ function createTemplateCompletionSource(schema) {
         if (!pathInfo) {
             // Check if user just typed {{
             const beforeCursor = text.slice(Math.max(0, pos - 2), pos);
-            if (beforeCursor === "{{") {
+            if (beforeCursor === '{{') {
                 // Show top-level variables
                 const options = Object.values(schema.variables).map((v) => variableToCompletion(v));
                 return {
@@ -165,42 +166,42 @@ function createTemplateCompletionSource(schema) {
         let options = [];
         let from = pos;
         switch (completionType.type) {
-            case "top-level": {
+            case 'top-level': {
                 // Show all top-level variables
                 const currentWord = path.trim();
                 options = Object.values(schema.variables)
-                    .filter((v) => currentWord === "" || v.name.toLowerCase().startsWith(currentWord.toLowerCase()))
+                    .filter((v) => currentWord === '' || v.name.toLowerCase().startsWith(currentWord.toLowerCase()))
                     .map((v) => variableToCompletion(v));
                 // Calculate from position for replacement
                 from = startPos + (path.length - path.trimStart().length);
                 break;
             }
-            case "property": {
+            case 'property': {
                 // Show child properties of the parent
                 const children = getChildVariables(schema, completionType.parentPath);
-                const currentWord = path.slice(path.lastIndexOf(".") + 1);
+                const currentWord = path.slice(path.lastIndexOf('.') + 1);
                 options = children
-                    .filter((v) => currentWord === "" || v.name.toLowerCase().startsWith(currentWord.toLowerCase()))
+                    .filter((v) => currentWord === '' || v.name.toLowerCase().startsWith(currentWord.toLowerCase()))
                     .map((v) => variableToCompletion(v));
                 // From should be right after the last dot
-                from = startPos + path.lastIndexOf(".") + 1;
+                from = startPos + path.lastIndexOf('.') + 1;
                 break;
             }
-            case "array-index": {
+            case 'array-index': {
                 // Check if the parent is actually an array
                 if (isArrayVariable(schema, completionType.parentPath)) {
                     const indices = getArrayIndexSuggestions(5);
-                    const currentIndex = path.slice(path.lastIndexOf("[") + 1);
+                    const currentIndex = path.slice(path.lastIndexOf('[') + 1);
                     options = indices
-                        .filter((idx) => currentIndex === "" || idx.startsWith(currentIndex))
+                        .filter((idx) => currentIndex === '' || idx.startsWith(currentIndex))
                         .map((idx) => ({
                         label: idx,
-                        displayLabel: idx === "*]" ? "* (all items)" : `[${idx}`,
-                        detail: idx === "*]" ? "Iterate all items" : `Index ${idx.slice(0, -1)}`,
-                        type: "keyword"
+                        displayLabel: idx === '*]' ? '* (all items)' : `[${idx}`,
+                        detail: idx === '*]' ? 'Iterate all items' : `Index ${idx.slice(0, -1)}`,
+                        type: 'keyword'
                     }));
                     // From should be right after the [
-                    from = startPos + path.lastIndexOf("[") + 1;
+                    from = startPos + path.lastIndexOf('[') + 1;
                 }
                 break;
             }
@@ -234,13 +235,13 @@ export function createTemplateAutocomplete(schema) {
         override: [createTemplateCompletionSource(schema)],
         activateOnTyping: true,
         defaultKeymap: true,
-        optionClass: () => "cm-template-autocomplete-option",
+        optionClass: () => 'cm-template-autocomplete-option',
         icons: false, // We use our own icons in displayLabel
         addToOptions: [
             {
                 render: (completion) => {
-                    const el = document.createElement("span");
-                    el.className = "cm-template-autocomplete-info";
+                    const el = document.createElement('span');
+                    el.className = 'cm-template-autocomplete-info';
                     if (completion.info) {
                         el.textContent = String(completion.info);
                     }

package/dist/components/nodes/ToolNode.svelte

@@ -230,7 +230,7 @@
 	.flowdrop-tool-node {
 		position: relative;
 		background-color: var(--fd-card);
-		border: 1.5px solid var(--fd-node-border);
+		border: 1.5px solid var(--fd-tool-node-color);
 		border-radius: var(--fd-radius-xl);
 		width: var(--fd-node-default-width);
 		min-height: var(--fd-node-tool-min-height);
@@ -246,7 +246,7 @@
 
 	.flowdrop-tool-node:hover {
 		box-shadow: var(--fd-shadow-lg);
-		border-color: var(--fd-node-border-hover);
+		border-color: var(--fd-tool-node-color);
 	}
 
 	.flowdrop-tool-node--selected {
@@ -282,16 +282,14 @@
 		/* Light mode: mix tool color with white (95%) for subtle tint */
 		background-color: color-mix(in srgb, var(--fd-tool-node-color) 5%, white);
 		border-radius: var(--fd-radius-xl);
-		/* Light mode: mix tool color with white (40%) for border */
-		border: 1px solid color-mix(in srgb, var(--fd-tool-node-color) 40%, white);
+		border: none;
 	}
 
 	/* Dark mode header styles */
 	:global([data-theme='dark']) .flowdrop-tool-node__header {
 		/* Dark mode: mix tool color with dark background (15%) for subtle tint */
 		background-color: color-mix(in srgb, var(--fd-tool-node-color) 15%, #1a1a1e);
-		/* Dark mode: mix tool color with dark background (35%) for border */
-		border-color: color-mix(in srgb, var(--fd-tool-node-color) 35%, #1a1a1e);
+		border: none;
 	}
 
 	.flowdrop-tool-node__header-content {

package/dist/services/globalSave.js

@@ -62,6 +62,12 @@ async function ensureApiConfiguration() {
  * Uses the current workflow from the global store
  */
 export async function globalSaveWorkflow() {
+    // 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 (typeof document !== 'undefined' && document.activeElement instanceof HTMLElement) {
+        document.activeElement.blur();
+    }
     let loadingToast;
     try {
         // Show loading toast

package/dist/services/variableService.d.ts

@@ -5,7 +5,7 @@
  *
  * @module services/variableService
  */
-import type { WorkflowNode, WorkflowEdge, VariableSchema, TemplateVariable, TemplateVariablesConfig, AuthProvider } from "../types/index.js";
+import type { WorkflowNode, WorkflowEdge, VariableSchema, TemplateVariable, TemplateVariablesConfig, AuthProvider } from '../types/index.js';
 /**
  * Options for deriving available variables.
  */

package/dist/services/variableService.js

@@ -13,22 +13,22 @@
  */
 function toTemplateVariableType(schemaType) {
     switch (schemaType) {
-        case "string":
-            return "string";
-        case "number":
-            return "number";
-        case "integer":
-            return "integer";
-        case "boolean":
-            return "boolean";
-        case "array":
-            return "array";
-        case "object":
-            return "object";
-        case "float":
-            return "float";
+        case 'string':
+            return 'string';
+        case 'number':
+            return 'number';
+        case 'integer':
+            return 'integer';
+        case 'boolean':
+            return 'boolean';
+        case 'array':
+            return 'array';
+        case 'object':
+            return 'object';
+        case 'float':
+            return 'float';
         default:
-            return "mixed";
+            return 'mixed';
     }
 }
 /**
@@ -51,15 +51,15 @@ function propertyToTemplateVariable(name, property, sourcePort, sourceNode) {
         sourceNode
     };
     // Handle nested object properties
-    if (property.type === "object" && property.properties) {
+    if (property.type === 'object' && property.properties) {
         variable.properties = {};
         for (const [propName, propValue] of Object.entries(property.properties)) {
             variable.properties[propName] = propertyToTemplateVariable(propName, propValue, sourcePort, sourceNode);
         }
     }
     // Handle array items
-    if (property.type === "array" && property.items) {
-        variable.items = propertyToTemplateVariable("item", property.items, sourcePort, sourceNode);
+    if (property.type === 'array' && property.items) {
+        variable.items = propertyToTemplateVariable('item', property.items, sourcePort, sourceNode);
     }
     return variable;
 }
@@ -78,7 +78,7 @@ function portToTemplateVariable(port, sourceNode) {
             name: port.id,
             label: port.name,
             description: port.description,
-            type: "object",
+            type: 'object',
             sourcePort: port.id,
             sourceNode,
             properties: {}
@@ -186,12 +186,12 @@ export function getAvailableVariables(node, nodes, edges, options) {
     for (const connection of connections) {
         const { sourceNode, sourcePort, targetPort } = connection;
         // Skip trigger ports - they don't carry data
-        if (sourcePort?.dataType === "trigger")
+        if (sourcePort?.dataType === 'trigger')
             continue;
-        if (targetPort?.dataType === "trigger")
+        if (targetPort?.dataType === 'trigger')
             continue;
         // Get the target port ID for filtering
-        const targetPortId = targetPort?.id ?? sourcePort?.id ?? "data";
+        const targetPortId = targetPort?.id ?? sourcePort?.id ?? 'data';
         // Filter by target port IDs if specified
         if (targetPortIds !== undefined) {
             if (!targetPortIds.includes(targetPortId))
@@ -212,7 +212,7 @@ export function getAvailableVariables(node, nodes, edges, options) {
         }
         else {
             // No schema or includePortName is true - use port name as the variable
-            const variableName = includePortName ? targetPortId : (targetPortId);
+            const variableName = includePortName ? targetPortId : targetPortId;
             // Skip if we already have a variable with this name
             if (variables[variableName])
                 continue;
@@ -244,7 +244,7 @@ export function getAvailableVariables(node, nodes, edges, options) {
  * ```
  */
 export function getChildVariables(schema, path) {
-    const parts = path.split(".");
+    const parts = path.split('.');
     let current;
     // Navigate to the target variable
     for (let i = 0; i < parts.length; i++) {
@@ -295,7 +295,7 @@ export function getArrayIndexSuggestions(maxIndex = 2) {
         suggestions.push(`${i}]`);
     }
     // Add wildcard for "all items"
-    suggestions.push("*]");
+    suggestions.push('*]');
     return suggestions;
 }
 /**
@@ -306,7 +306,7 @@ export function getArrayIndexSuggestions(maxIndex = 2) {
  * @returns True if the variable is an array type
  */
 export function isArrayVariable(schema, path) {
-    const parts = path.split(".");
+    const parts = path.split('.');
     let current;
     for (let i = 0; i < parts.length; i++) {
         const part = parts[i];
@@ -335,7 +335,7 @@ export function isArrayVariable(schema, path) {
             return false;
         }
     }
-    return current?.type === "array";
+    return current?.type === 'array';
 }
 /**
  * Checks if a variable at the given path has child properties.
@@ -410,7 +410,7 @@ export async function getVariableSchema(node, nodes, edges, config, workflowId,
     if (config.api) {
         try {
             // Import API variable service dynamically to avoid circular dependencies
-            const { fetchVariableSchema } = await import("./apiVariableService.js");
+            const { fetchVariableSchema } = await import('./apiVariableService.js');
             const apiResult = await fetchVariableSchema(workflowId, node.id, config.api, authProvider);
             if (apiResult.success && apiResult.schema) {
                 resultSchema = apiResult.schema;
@@ -430,13 +430,13 @@ export async function getVariableSchema(node, nodes, edges, config, workflowId,
             }
             else if (!config.api.fallbackOnError) {
                 // API failed and fallback is disabled - return empty schema
-                console.error("Failed to fetch variables from API:", apiResult.error);
+                console.error('Failed to fetch variables from API:', apiResult.error);
                 return { variables: {} };
             }
             // If fallback is enabled (default), continue to schema-based mode below
         }
         catch (error) {
-            console.error("Error fetching variables from API:", error);
+            console.error('Error fetching variables from API:', error);
             // If fallback is disabled, return empty schema
             if (config.api.fallbackOnError === false) {
                 return { variables: {} };

package/dist/svelte-app.d.ts

@@ -10,6 +10,7 @@ import type { Workflow, NodeMetadata, PortConfig } from './types/index.js';
 import type { EndpointConfig } from './config/endpoints.js';
 import type { AuthProvider } from './types/auth.js';
 import type { FlowDropEventHandlers, FlowDropFeatures } from './types/events.js';
+import type { PartialSettings } from './types/settings.js';
 declare global {
     interface Window {
         flowdropSave?: () => Promise<void>;
@@ -66,6 +67,8 @@ export interface FlowDropMountOptions {
     eventHandlers?: FlowDropEventHandlers;
     /** Feature configuration */
     features?: FlowDropFeatures;
+    /** Initial settings overrides (theme, behavior, editor, ui, api) */
+    settings?: PartialSettings;
     /** Custom storage key for localStorage drafts */
     draftStorageKey?: string;
 }

package/dist/svelte-app.js

@@ -15,6 +15,7 @@ import { fetchPortConfig } from './services/portConfigApi.js';
 import { isDirty, markAsSaved, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange } from './stores/workflowStore.js';
 import { DraftAutoSaveManager, getDraftStorageKey } from './services/draftStorage.js';
 import { mergeFeatures } from './types/events.js';
+import { initializeSettings } from './stores/settingsStore.js';
 /**
  * Mount the full FlowDrop App with navbar, sidebars, and workflow editor
  *
@@ -40,9 +41,13 @@ import { mergeFeatures } from './types/events.js';
  * ```
  */
 export async function mountFlowDropApp(container, options = {}) {
-    const { workflow, nodes, endpointConfig, portConfig, height = '100vh', width = '100%', showNavbar = false, disableSidebar, lockWorkflow, readOnly, nodeStatuses, pipelineId, navbarTitle, navbarActions, showSettings, authProvider, eventHandlers, features: userFeatures, draftStorageKey: customDraftKey } = options;
+    const { workflow, nodes, endpointConfig, portConfig, height = '100vh', width = '100%', showNavbar = false, disableSidebar, lockWorkflow, readOnly, nodeStatuses, pipelineId, navbarTitle, navbarActions, showSettings, authProvider, eventHandlers, features: userFeatures, settings: initialSettings, draftStorageKey: customDraftKey } = options;
     // Merge features with defaults
     const features = mergeFeatures(userFeatures);
+    // Apply initial settings overrides and initialize theme
+    await initializeSettings({
+        defaults: initialSettings
+    });
     // Create endpoint configuration
     let config;
     if (endpointConfig) {

package/dist/types/index.d.ts

@@ -8,7 +8,7 @@ import type { EndpointConfig } from '../config/endpoints.js';
  * Node category types for organizing nodes in the sidebar
  * Based on actual API response categories
  */
-export type NodeCategory = 'triggers' | 'inputs' | 'outputs' | 'prompts' | 'models' | 'processing' | 'logic' | 'data' | 'tools' | 'helpers' | 'vector stores' | 'embeddings' | 'memories' | 'agents' | 'ai' | 'bundles';
+export type NodeCategory = 'triggers' | 'inputs' | 'outputs' | 'prompts' | 'models' | 'processing' | 'logic' | 'data' | 'tools' | 'helpers' | 'vector stores' | 'embeddings' | 'memories' | 'agents' | 'ai' | 'interrupts' | 'bundles';
 /**
  * Port data type configuration
  */

package/dist/types/settings.js

@@ -37,7 +37,7 @@ export const SETTINGS_CATEGORY_ICONS = {
  * Default theme settings
  */
 export const DEFAULT_THEME_SETTINGS = {
-    preference: 'auto'
+    preference: 'light'
 };
 /**
  * Default editor settings
@@ -64,8 +64,8 @@ export const DEFAULT_UI_SETTINGS = {
 export const DEFAULT_BEHAVIOR_SETTINGS = {
     autoSave: false,
     autoSaveInterval: 30000,
-    undoHistoryLimit: 50,
-    confirmDelete: true
+    undoHistoryLimit: 0,
+    confirmDelete: false
 };
 /**
  * Default API settings
@@ -74,7 +74,7 @@ export const DEFAULT_API_SETTINGS = {
     timeout: 30000,
     retryEnabled: true,
     retryAttempts: 3,
-    cacheEnabled: true
+    cacheEnabled: false
 };
 /**
  * Complete default settings object

package/dist/utils/colors.js

@@ -24,6 +24,7 @@ export const CATEGORY_COLOR_TOKENS = {
     memories: 'var(--fd-node-blue)',
     agents: 'var(--fd-node-teal)',
     ai: 'var(--fd-node-purple)',
+    interrupts: 'var(--fd-node-red)',
     bundles: 'var(--fd-node-slate)'
 };
 /**

package/dist/utils/icons.js

@@ -95,6 +95,7 @@ export const CATEGORY_ICONS = {
     memories: 'mdi:brain',
     agents: 'mdi:account-cog',
     ai: 'mdi:shimmer',
+    interrupts: 'mdi:hand-back-left',
     bundles: 'mdi:package-variant'
 };
 /**

package/dist/utils/nodeTypes.js

@@ -194,9 +194,9 @@ export function createNodeTypeConfigProperty(metadata, defaultType) {
     const oneOf = getNodeTypeOneOfOptions(metadata);
     const primaryType = defaultType ?? getPrimaryNodeType(metadata);
     return {
-        type: "string",
-        title: "Node Type",
-        description: "Choose the visual representation for this node",
+        type: 'string',
+        title: 'Node Type',
+        description: 'Choose the visual representation for this node',
         default: primaryType,
         oneOf
     };

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@d34dman/flowdrop",
 	"license": "MIT",
 	"private": false,
-	"version": "0.0.48",
+	"version": "0.0.50",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",