@d34dman/flowdrop 0.0.49 → 0.0.51

package/dist/components/SettingsPanel.svelte

@@ -140,6 +140,21 @@
 					title: 'Fit View on Load',
 					description: 'Automatically fit workflow to view when loading',
 					default: true
+				},
+				proximityConnect: {
+					type: 'boolean',
+					title: 'Proximity Connect',
+					description:
+						'Auto-connect compatible ports when dragging nodes near each other',
+					default: false
+				},
+				proximityConnectDistance: {
+					type: 'number',
+					title: 'Proximity Distance',
+					description: 'Distance threshold in pixels for proximity connect',
+					minimum: 50,
+					maximum: 500,
+					default: 150
 				}
 			}
 		},

package/dist/components/ThemeToggle.svelte

@@ -7,8 +7,7 @@
 
 <script lang="ts">
 	import Icon from '@iconify/svelte';
-	// Use settingsStore for theme (themeStore is deprecated)
-	import { theme, resolvedTheme, cycleTheme } from '../stores/settingsStore.js';
+	import { theme, resolvedTheme, cycleTheme } from '../stores/themeStore.js';
 	import type { ThemePreference } from '../types/settings.js';
 
 	/**

package/dist/components/WorkflowEditor.svelte

@@ -16,7 +16,8 @@
 		type ColorMode
 	} from '@xyflow/svelte';
 	import '@xyflow/svelte/dist/style.css';
-	import { resolvedTheme, editorSettings, behaviorSettings } from '../stores/settingsStore.js';
+	import { resolvedTheme } from '../stores/themeStore.js';
+	import { editorSettings, behaviorSettings } from '../stores/settingsStore.js';
 	import type {
 		WorkflowNode as WorkflowNodeType,
 		NodeMetadata,
@@ -42,6 +43,10 @@
 	import { areNodeArraysEqual, areEdgeArraysEqual, throttle } from '../utils/performanceUtils.js';
 	import { Toaster } from 'svelte-5-french-toast';
 	import { flowdropToastOptions, FLOWDROP_TOASTER_CLASS } from '../services/toastService.js';
+	import {
+		ProximityConnectHelper,
+		type ProximityEdgeCandidate
+	} from '../helpers/proximityConnect.js';
 
 	interface Props {
 		nodes?: NodeMetadata[];
@@ -69,19 +74,31 @@
 	// Track if we're currently dragging a node (for history debouncing)
 	let isDraggingNode = $state(false);
 
+	// Proximity connect state
+	let currentProximityCandidates = $state<ProximityEdgeCandidate[]>([]);
+
 	// 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 +112,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 +226,7 @@
 	 */
 	const updateGlobalStore = throttle((): void => {
 		if (currentWorkflow) {
+			lastEditorStoreValue = currentWorkflow;
 			workflowActions.updateWorkflow(currentWorkflow);
 		}
 	}, 16);
@@ -322,6 +342,46 @@
 	 */
 	function handleNodeDragStart(): void {
 		isDraggingNode = true;
+		// Clear any leftover proximity previews
+		currentProximityCandidates = [];
+	}
+
+	/**
+	 * Handle node drag - compute proximity connect preview edges
+	 * Called continuously during drag if proximity connect is enabled
+	 */
+	function handleNodeDrag({
+		targetNode
+	}: {
+		targetNode: WorkflowNodeType | null;
+		nodes: WorkflowNodeType[];
+		event: MouseEvent | TouchEvent;
+	}): void {
+		if (!$editorSettings.proximityConnect || !targetNode || props.readOnly || props.lockWorkflow) {
+			if (currentProximityCandidates.length > 0) {
+				flowEdges = ProximityConnectHelper.removePreviewEdges(flowEdges);
+				currentProximityCandidates = [];
+			}
+			return;
+		}
+
+		// Remove previous preview edges
+		const baseEdges = ProximityConnectHelper.removePreviewEdges(flowEdges);
+
+		// Find the best compatible edge with nearby nodes
+		const candidates = ProximityConnectHelper.findCompatibleEdges(
+			targetNode,
+			flowNodes,
+			baseEdges,
+			$editorSettings.proximityConnectDistance
+		);
+
+		// Create preview edges
+		const previews = ProximityConnectHelper.createPreviewEdges(candidates);
+
+		// Update state
+		currentProximityCandidates = candidates;
+		flowEdges = [...baseEdges, ...previews];
 	}
 
 	/**
@@ -332,6 +392,38 @@
 	 */
 	function handleNodeDragStop(): void {
 		isDraggingNode = false;
+
+		// Finalize proximity connect if there are candidates
+		if ($editorSettings.proximityConnect && currentProximityCandidates.length > 0) {
+			// Remove all preview edges
+			const baseEdges = ProximityConnectHelper.removePreviewEdges(flowEdges);
+
+			// Create permanent edges from candidates
+			const permanentEdges = ProximityConnectHelper.createPermanentEdges(
+				currentProximityCandidates
+			);
+
+			// Apply proper styling to each new permanent edge
+			for (const edge of permanentEdges) {
+				const sourceNode = flowNodes.find((n) => n.id === edge.source);
+				const targetNode = flowNodes.find((n) => n.id === edge.target);
+				if (sourceNode && targetNode) {
+					EdgeStylingHelper.applyConnectionStyling(edge, sourceNode, targetNode);
+				}
+			}
+
+			// Set final edges
+			flowEdges = [...baseEdges, ...permanentEdges];
+
+			// Clear proximity state
+			currentProximityCandidates = [];
+
+			// Update workflow
+			if (currentWorkflow) {
+				updateCurrentWorkflowFromSvelteFlow();
+			}
+		}
+
 		// Push the current state AFTER the drag completed
 		if (currentWorkflow) {
 			workflowActions.pushHistory('Move node', currentWorkflow);
@@ -624,6 +716,7 @@
 							onbeforedelete={handleBeforeDelete}
 							ondelete={handleNodesDelete}
 							onnodedragstart={handleNodeDragStart}
+							onnodedrag={handleNodeDrag}
 							onnodedragstop={handleNodeDragStop}
 							minZoom={0.2}
 							maxZoom={3}
@@ -872,4 +965,19 @@
 		filter: drop-shadow(0 0 3px rgba(139, 92, 246, 0.4));
 		opacity: 1;
 	}
+
+	/* Proximity Connect Preview Edge: animated dashed line */
+	:global(.flowdrop--edge--proximity-preview path.svelte-flow__edge-path) {
+		stroke: var(--fd-primary);
+		stroke-width: 2;
+		stroke-dasharray: 5 5;
+		opacity: 0.6;
+		animation: flowdrop-proximity-dash 0.5s linear infinite;
+	}
+
+	@keyframes flowdrop-proximity-dash {
+		to {
+			stroke-dashoffset: -10;
+		}
+	}
 </style>

package/dist/components/form/FormField.svelte

@@ -44,7 +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';
+	import { resolvedTheme } from '../../stores/themeStore.js';
 
 	interface Props {
 		/** Unique key/id for the field */

package/dist/components/form/FormFieldLight.svelte

@@ -43,7 +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 { resolvedTheme } from '../../stores/themeStore.js';
 	import type { FieldSchema } from './types.js';
 	import { getSchemaOptions } from './types.js';
 

package/dist/components/nodes/ToolNode.svelte

@@ -61,6 +61,17 @@
 			'Tool'
 	);
 
+	/**
+	 * Instance-specific badge label override from config.
+	 * Falls back to metadata badge or default 'TOOL' if not set.
+	 * This allows users to customize the badge text per-instance via config.
+	 */
+	const displayBadge = $derived(
+		(props.data.config?.instanceBadge as string) ||
+			(props.data.metadata?.badge as string) ||
+			'TOOL'
+	);
+
 	/**
 	 * Instance-specific description override from config.
 	 * Falls back to metadata description or toolDescription config if not set.
@@ -185,7 +196,7 @@
 			</div>
 
 			<!-- Tool Badge - tinted style matching icon wrappers -->
-			<div class="flowdrop-tool-node__badge">TOOL</div>
+			<div class="flowdrop-tool-node__badge">{displayBadge}</div>
 		</div>
 
 		<!-- Tool Description - uses instanceDescription override if set -->

package/dist/helpers/proximityConnect.d.ts

@@ -0,0 +1,78 @@
+/**
+ * Proximity Connect Helper
+ *
+ * Provides type-aware proximity connect logic for the workflow editor.
+ * When a node is dragged near another node, this helper finds the best
+ * compatible port pair and creates a preview/permanent edge.
+ */
+import type { WorkflowNode as WorkflowNodeType, WorkflowEdge, NodePort } from '../types/index.js';
+/** A candidate proximity edge before it is finalized */
+export interface ProximityEdgeCandidate {
+    id: string;
+    source: string;
+    target: string;
+    sourceHandle: string;
+    targetHandle: string;
+    sourcePortDataType: string;
+    targetPortDataType: string;
+}
+export declare class ProximityConnectHelper {
+    /**
+     * Get ALL ports (static + dynamic + gateway branches) for a node.
+     */
+    static getAllPorts(node: WorkflowNodeType, direction: 'input' | 'output'): NodePort[];
+    /**
+     * Build handle ID in the standard format.
+     */
+    static buildHandleId(nodeId: string, direction: 'input' | 'output', portId: string): string;
+    /**
+     * Calculate center-to-center Euclidean distance between two nodes.
+     */
+    static getNodeDistance(nodeA: {
+        position: {
+            x: number;
+            y: number;
+        };
+        measured?: {
+            width?: number;
+            height?: number;
+        };
+    }, nodeB: {
+        position: {
+            x: number;
+            y: number;
+        };
+        measured?: {
+            width?: number;
+            height?: number;
+        };
+    }): number;
+    /**
+     * Find the single best compatible edge between a dragged node and nearby nodes.
+     *
+     * Algorithm:
+     * 1. Find the closest node within minDistance
+     * 2. Check both directions (dragged->nearby and nearby->dragged)
+     * 3. Return the first exact-type match, or first compatible match
+     * 4. Skip pairs where an edge already exists or input handle is already connected
+     *
+     * @returns Array with at most ONE ProximityEdgeCandidate
+     */
+    static findCompatibleEdges(draggedNode: WorkflowNodeType, allNodes: WorkflowNodeType[], existingEdges: WorkflowEdge[], minDistance: number): ProximityEdgeCandidate[];
+    /**
+     * Convert candidates to temporary (preview) WorkflowEdge objects with dashed styling.
+     */
+    static createPreviewEdges(candidates: ProximityEdgeCandidate[]): WorkflowEdge[];
+    /**
+     * Convert candidates to permanent WorkflowEdge objects.
+     */
+    static createPermanentEdges(candidates: ProximityEdgeCandidate[]): WorkflowEdge[];
+    /**
+     * Check if an edge is a temporary proximity preview edge.
+     */
+    static isProximityPreviewEdge(edge: WorkflowEdge): boolean;
+    /**
+     * Remove all proximity preview edges from an edge array.
+     */
+    static removePreviewEdges(edges: WorkflowEdge[]): WorkflowEdge[];
+}

package/dist/helpers/proximityConnect.js

@@ -0,0 +1,224 @@
+/**
+ * Proximity Connect Helper
+ *
+ * Provides type-aware proximity connect logic for the workflow editor.
+ * When a node is dragged near another node, this helper finds the best
+ * compatible port pair and creates a preview/permanent edge.
+ */
+import { dynamicPortToNodePort } from '../types/index.js';
+import { getPortCompatibilityChecker } from '../utils/connections.js';
+import { v4 as uuidv4 } from 'uuid';
+/** CSS class applied to proximity preview edges */
+const PROXIMITY_EDGE_CLASS = 'flowdrop--edge--proximity-preview';
+export class ProximityConnectHelper {
+    /**
+     * Get ALL ports (static + dynamic + gateway branches) for a node.
+     */
+    static getAllPorts(node, direction) {
+        // Static ports from metadata
+        const staticPorts = direction === 'output'
+            ? (node.data?.metadata?.outputs ?? [])
+            : (node.data?.metadata?.inputs ?? []);
+        // Dynamic ports from config
+        const dynamicKey = direction === 'output' ? 'dynamicOutputs' : 'dynamicInputs';
+        const rawDynamic = node.data?.config?.[dynamicKey] ?? [];
+        const dynamicPorts = rawDynamic.map((p) => dynamicPortToNodePort(p, direction));
+        // Gateway branches (output only, dataType = 'trigger')
+        if (direction === 'output') {
+            const branches = node.data?.config?.branches;
+            const nodeType = node.data?.metadata?.type || node.type;
+            if (nodeType === 'gateway' && branches?.length) {
+                const branchPorts = branches
+                    .filter((b) => !staticPorts.some((sp) => sp.id === b.name))
+                    .map((b) => ({
+                    id: b.name,
+                    name: b.name,
+                    type: 'output',
+                    dataType: 'trigger'
+                }));
+                return [...staticPorts, ...dynamicPorts, ...branchPorts];
+            }
+        }
+        return [...staticPorts, ...dynamicPorts];
+    }
+    /**
+     * Build handle ID in the standard format.
+     */
+    static buildHandleId(nodeId, direction, portId) {
+        return `${nodeId}-${direction}-${portId}`;
+    }
+    /**
+     * Calculate center-to-center Euclidean distance between two nodes.
+     */
+    static getNodeDistance(nodeA, nodeB) {
+        const ax = nodeA.position.x + (nodeA.measured?.width ?? 0) / 2;
+        const ay = nodeA.position.y + (nodeA.measured?.height ?? 0) / 2;
+        const bx = nodeB.position.x + (nodeB.measured?.width ?? 0) / 2;
+        const by = nodeB.position.y + (nodeB.measured?.height ?? 0) / 2;
+        return Math.sqrt((ax - bx) ** 2 + (ay - by) ** 2);
+    }
+    /**
+     * Find the single best compatible edge between a dragged node and nearby nodes.
+     *
+     * Algorithm:
+     * 1. Find the closest node within minDistance
+     * 2. Check both directions (dragged->nearby and nearby->dragged)
+     * 3. Return the first exact-type match, or first compatible match
+     * 4. Skip pairs where an edge already exists or input handle is already connected
+     *
+     * @returns Array with at most ONE ProximityEdgeCandidate
+     */
+    static findCompatibleEdges(draggedNode, allNodes, existingEdges, minDistance) {
+        const checker = getPortCompatibilityChecker();
+        // Build lookup sets for O(1) duplicate/connected checks
+        const existingEdgeSet = new Set(existingEdges.map((e) => `${e.source}:${e.sourceHandle}->${e.target}:${e.targetHandle}`));
+        const connectedTargetHandles = new Set(existingEdges.map((e) => `${e.target}:${e.targetHandle}`));
+        // Find the closest node within distance
+        let closestNode = null;
+        let closestDistance = Infinity;
+        for (const node of allNodes) {
+            if (node.id === draggedNode.id)
+                continue;
+            const dist = this.getNodeDistance(draggedNode, node);
+            if (dist < minDistance && dist < closestDistance) {
+                closestDistance = dist;
+                closestNode = node;
+            }
+        }
+        if (!closestNode)
+            return [];
+        const draggedOutputs = this.getAllPorts(draggedNode, 'output');
+        const draggedInputs = this.getAllPorts(draggedNode, 'input');
+        const nearbyInputs = this.getAllPorts(closestNode, 'input');
+        const nearbyOutputs = this.getAllPorts(closestNode, 'output');
+        // Collect all compatible pairs, then pick the best one
+        let exactMatch = null;
+        let compatibleMatch = null;
+        // Direction A: dragged (source) -> nearby (target)
+        for (const outPort of draggedOutputs) {
+            for (const inPort of nearbyInputs) {
+                if (!checker.areDataTypesCompatible(outPort.dataType, inPort.dataType))
+                    continue;
+                const sourceHandle = this.buildHandleId(draggedNode.id, 'output', outPort.id);
+                const targetHandle = this.buildHandleId(closestNode.id, 'input', inPort.id);
+                const edgeKey = `${draggedNode.id}:${sourceHandle}->${closestNode.id}:${targetHandle}`;
+                const targetHandleKey = `${closestNode.id}:${targetHandle}`;
+                if (existingEdgeSet.has(edgeKey))
+                    continue;
+                if (connectedTargetHandles.has(targetHandleKey))
+                    continue;
+                const candidate = {
+                    id: `proximity-${uuidv4()}`,
+                    source: draggedNode.id,
+                    target: closestNode.id,
+                    sourceHandle,
+                    targetHandle,
+                    sourcePortDataType: outPort.dataType,
+                    targetPortDataType: inPort.dataType
+                };
+                if (outPort.dataType === inPort.dataType) {
+                    if (!exactMatch)
+                        exactMatch = candidate;
+                }
+                else {
+                    if (!compatibleMatch)
+                        compatibleMatch = candidate;
+                }
+                // Early exit if we found an exact match
+                if (exactMatch)
+                    break;
+            }
+            if (exactMatch)
+                break;
+        }
+        // Direction B: nearby (source) -> dragged (target)
+        if (!exactMatch) {
+            for (const outPort of nearbyOutputs) {
+                for (const inPort of draggedInputs) {
+                    if (!checker.areDataTypesCompatible(outPort.dataType, inPort.dataType))
+                        continue;
+                    const sourceHandle = this.buildHandleId(closestNode.id, 'output', outPort.id);
+                    const targetHandle = this.buildHandleId(draggedNode.id, 'input', inPort.id);
+                    const edgeKey = `${closestNode.id}:${sourceHandle}->${draggedNode.id}:${targetHandle}`;
+                    const targetHandleKey = `${draggedNode.id}:${targetHandle}`;
+                    if (existingEdgeSet.has(edgeKey))
+                        continue;
+                    if (connectedTargetHandles.has(targetHandleKey))
+                        continue;
+                    const candidate = {
+                        id: `proximity-${uuidv4()}`,
+                        source: closestNode.id,
+                        target: draggedNode.id,
+                        sourceHandle,
+                        targetHandle,
+                        sourcePortDataType: outPort.dataType,
+                        targetPortDataType: inPort.dataType
+                    };
+                    if (outPort.dataType === inPort.dataType) {
+                        if (!exactMatch)
+                            exactMatch = candidate;
+                    }
+                    else {
+                        if (!compatibleMatch)
+                            compatibleMatch = candidate;
+                    }
+                    if (exactMatch)
+                        break;
+                }
+                if (exactMatch)
+                    break;
+            }
+        }
+        const best = exactMatch ?? compatibleMatch;
+        return best ? [best] : [];
+    }
+    /**
+     * Convert candidates to temporary (preview) WorkflowEdge objects with dashed styling.
+     */
+    static createPreviewEdges(candidates) {
+        return candidates.map((c) => ({
+            id: c.id,
+            source: c.source,
+            target: c.target,
+            sourceHandle: c.sourceHandle,
+            targetHandle: c.targetHandle,
+            class: PROXIMITY_EDGE_CLASS,
+            style: 'stroke-dasharray: 5 5; opacity: 0.6;',
+            animated: true,
+            selectable: false,
+            deletable: false,
+            data: {
+                metadata: {
+                    edgeType: 'data',
+                    sourcePortDataType: c.sourcePortDataType,
+                    isProximityPreview: true
+                }
+            }
+        }));
+    }
+    /**
+     * Convert candidates to permanent WorkflowEdge objects.
+     */
+    static createPermanentEdges(candidates) {
+        return candidates.map((c) => ({
+            id: uuidv4(),
+            source: c.source,
+            target: c.target,
+            sourceHandle: c.sourceHandle,
+            targetHandle: c.targetHandle
+        }));
+    }
+    /**
+     * Check if an edge is a temporary proximity preview edge.
+     */
+    static isProximityPreviewEdge(edge) {
+        return (edge.id.startsWith('proximity-') ||
+            edge.data?.metadata?.isProximityPreview === true);
+    }
+    /**
+     * Remove all proximity preview edges from an edge array.
+     */
+    static removePreviewEdges(edges) {
+        return edges.filter((e) => !this.isProximityPreviewEdge(e));
+    }
+}

package/dist/helpers/workflowEditorHelper.js

@@ -95,6 +95,15 @@ export class EdgeStylingHelper {
                 return port.dataType;
             }
         }
+        // Check dynamic ports from config (dynamicInputs/dynamicOutputs)
+        const dynamicKey = portType === 'output' ? 'dynamicOutputs' : 'dynamicInputs';
+        const dynamicPorts = node.data?.config?.[dynamicKey];
+        if (dynamicPorts && Array.isArray(dynamicPorts)) {
+            const dynamicPort = dynamicPorts.find((p) => p.name === portId);
+            if (dynamicPort?.dataType) {
+                return dynamicPort.dataType;
+            }
+        }
         // For output ports, also check dynamic Gateway branches
         // Gateway branches are always trigger type (control flow)
         if (portType === 'output' && this.isGatewayBranch(node, portId)) {

package/dist/index.d.ts

@@ -34,8 +34,4 @@ export * from './form/index.js';
 export * from './display/index.js';
 export * from './playground/index.js';
 export * from './editor/index.js';
-export { default as ThemeToggle } from './components/ThemeToggle.svelte';
-export { default as SettingsPanel } from './components/SettingsPanel.svelte';
-export { default as SettingsModal } from './components/SettingsModal.svelte';
-export { settingsStore, themeSettings, editorSettings, uiSettings, behaviorSettings, apiSettings, syncStatusStore, theme, resolvedTheme, updateSettings, resetSettings, getSettings, setTheme, toggleTheme, cycleTheme, initializeTheme, initializeSettings, setSettingsService, syncSettingsToApi, loadSettingsFromApi, onSettingsChange } from './stores/settingsStore.js';
-export { settingsApi, SettingsService, createSettingsService, setSettingsEndpointConfig, getSettingsEndpointConfig } from './services/settingsService.js';
+export * from './settings/index.js';

package/dist/index.js

@@ -56,15 +56,6 @@ export * from './playground/index.js';
 // ============================================================================
 export * from './editor/index.js';
 // ============================================================================
-// Theme Component Export
+// Settings Exports (stores, services, components, types)
 // ============================================================================
-export { default as ThemeToggle } from './components/ThemeToggle.svelte';
-// ============================================================================
-// Settings Component & Store Exports
-// ============================================================================
-export { default as SettingsPanel } from './components/SettingsPanel.svelte';
-export { default as SettingsModal } from './components/SettingsModal.svelte';
-// Settings store exports
-export { settingsStore, themeSettings, editorSettings, uiSettings, behaviorSettings, apiSettings, syncStatusStore, theme, resolvedTheme, updateSettings, resetSettings, getSettings, setTheme, toggleTheme, cycleTheme, initializeTheme, initializeSettings, setSettingsService, syncSettingsToApi, loadSettingsFromApi, onSettingsChange } from './stores/settingsStore.js';
-// Settings service exports
-export { settingsApi, SettingsService, createSettingsService, setSettingsEndpointConfig, getSettingsEndpointConfig } from './services/settingsService.js';
+export * from './settings/index.js';

package/dist/settings/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * FlowDrop Settings Module
+ *
+ * Provides settings stores, services, and components for user-configurable
+ * preferences with hybrid persistence (localStorage + optional API sync).
+ *
+ * Theme stores and functions (theme, resolvedTheme, setTheme, toggleTheme,
+ * cycleTheme, initializeTheme) are exported from `@d34dman/flowdrop/core`.
+ *
+ * @module settings
+ *
+ * @example
+ * ```typescript
+ * import { settingsStore, updateSettings, SettingsPanel } from "@d34dman/flowdrop/settings";
+ * import { theme, setTheme } from "@d34dman/flowdrop/core";
+ * ```
+ */
+export { default as ThemeToggle } from '../components/ThemeToggle.svelte';
+export { default as SettingsPanel } from '../components/SettingsPanel.svelte';
+export { default as SettingsModal } from '../components/SettingsModal.svelte';
+export type { ThemeSettings, EditorSettings, UISettings, BehaviorSettings, ApiSettings, FlowDropSettings, SettingsCategory, PartialSettings, DeepPartial, SettingsChangeEvent, SettingsChangeCallback, SyncStatus, SettingsStoreState } from '../types/settings.js';
+export { SETTINGS_CATEGORIES, SETTINGS_CATEGORY_LABELS, SETTINGS_CATEGORY_ICONS, DEFAULT_THEME_SETTINGS, DEFAULT_EDITOR_SETTINGS, DEFAULT_UI_SETTINGS, DEFAULT_BEHAVIOR_SETTINGS, DEFAULT_API_SETTINGS, DEFAULT_SETTINGS, SETTINGS_STORAGE_KEY } from '../types/settings.js';
+export { settingsStore, themeSettings, editorSettings, uiSettings, behaviorSettings, apiSettings, syncStatusStore, updateSettings, resetSettings, getSettings, initializeSettings, setSettingsService, syncSettingsToApi, loadSettingsFromApi, onSettingsChange } from '../stores/settingsStore.js';
+export { settingsApi, SettingsService, createSettingsService, setSettingsEndpointConfig, getSettingsEndpointConfig } from '../services/settingsService.js';

package/dist/settings/index.js

@@ -0,0 +1,32 @@
+/**
+ * FlowDrop Settings Module
+ *
+ * Provides settings stores, services, and components for user-configurable
+ * preferences with hybrid persistence (localStorage + optional API sync).
+ *
+ * Theme stores and functions (theme, resolvedTheme, setTheme, toggleTheme,
+ * cycleTheme, initializeTheme) are exported from `@d34dman/flowdrop/core`.
+ *
+ * @module settings
+ *
+ * @example
+ * ```typescript
+ * import { settingsStore, updateSettings, SettingsPanel } from "@d34dman/flowdrop/settings";
+ * import { theme, setTheme } from "@d34dman/flowdrop/core";
+ * ```
+ */
+// ============================================================================
+// Components
+// ============================================================================
+export { default as ThemeToggle } from '../components/ThemeToggle.svelte';
+export { default as SettingsPanel } from '../components/SettingsPanel.svelte';
+export { default as SettingsModal } from '../components/SettingsModal.svelte';
+export { SETTINGS_CATEGORIES, SETTINGS_CATEGORY_LABELS, SETTINGS_CATEGORY_ICONS, DEFAULT_THEME_SETTINGS, DEFAULT_EDITOR_SETTINGS, DEFAULT_UI_SETTINGS, DEFAULT_BEHAVIOR_SETTINGS, DEFAULT_API_SETTINGS, DEFAULT_SETTINGS, SETTINGS_STORAGE_KEY } from '../types/settings.js';
+// ============================================================================
+// Settings Stores
+// ============================================================================
+export { settingsStore, themeSettings, editorSettings, uiSettings, behaviorSettings, apiSettings, syncStatusStore, updateSettings, resetSettings, getSettings, initializeSettings, setSettingsService, syncSettingsToApi, loadSettingsFromApi, onSettingsChange } from '../stores/settingsStore.js';
+// ============================================================================
+// Settings Service
+// ============================================================================
+export { settingsApi, SettingsService, createSettingsService, setSettingsEndpointConfig, getSettingsEndpointConfig } from '../services/settingsService.js';

package/dist/stores/settingsStore.d.ts

@@ -9,7 +9,7 @@
  *
  * @module stores/settingsStore
  */
-import type { FlowDropSettings, ThemeSettings, EditorSettings, UISettings, BehaviorSettings, ApiSettings, PartialSettings, SyncStatus, ResolvedTheme, ThemePreference, SettingsChangeCallback, SettingsCategory } from '../types/settings.js';
+import type { FlowDropSettings, ThemeSettings, EditorSettings, UISettings, BehaviorSettings, ApiSettings, PartialSettings, SyncStatus, SettingsChangeCallback, SettingsCategory } from '../types/settings.js';
 /**
  * Main settings store (read-only access to current settings)
  */
@@ -42,15 +42,6 @@ export declare const behaviorSettings: import("svelte/store").Readable<BehaviorS
  * API settings store
  */
 export declare const apiSettings: import("svelte/store").Readable<ApiSettings>;
-/**
- * Theme preference store (backward compatible with themeStore)
- */
-export declare const theme: import("svelte/store").Readable<ThemePreference>;
-/**
- * Resolved theme store
- * Always returns the actual theme being applied ('light' or 'dark')
- */
-export declare const resolvedTheme: import("svelte/store").Readable<ResolvedTheme>;
 /**
  * Update settings with partial values
  *
@@ -67,26 +58,6 @@ export declare function resetSettings(categories?: SettingsCategory[]): void;
  * Get current settings synchronously
  */
 export declare function getSettings(): FlowDropSettings;
-/**
- * Set the theme preference
- *
- * @param newTheme - The new theme preference ('light', 'dark', or 'auto')
- */
-export declare function setTheme(newTheme: ThemePreference): void;
-/**
- * Toggle between light and dark themes
- * If currently 'auto', switches to the opposite of system preference
- */
-export declare function toggleTheme(): void;
-/**
- * Cycle through theme options: light -> dark -> auto -> light
- */
-export declare function cycleTheme(): void;
-/**
- * Initialize the theme system
- * Should be called once on app startup
- */
-export declare function initializeTheme(): void;
 /**
  * Set the settings service for API operations
  *

package/dist/stores/settingsStore.js

@@ -188,14 +188,13 @@ if (typeof window !== 'undefined') {
     }
 }
 /**
- * Theme preference store (backward compatible with themeStore)
+ * Theme preference (internal - exported via core/themeStore)
  */
-export const theme = derived(themeSettings, ($theme) => $theme.preference);
+const theme = derived(themeSettings, ($theme) => $theme.preference);
 /**
- * Resolved theme store
- * Always returns the actual theme being applied ('light' or 'dark')
+ * Resolved theme (internal - exported via core/themeStore)
  */
-export const resolvedTheme = derived([themeSettings, systemTheme], ([$themeSettings, $systemTheme]) => {
+const resolvedTheme = derived([themeSettings, systemTheme], ([$themeSettings, $systemTheme]) => {
     if ($themeSettings.preference === 'auto') {
         return $systemTheme;
     }
@@ -292,18 +291,15 @@ export function getSettings() {
 // Theme-Specific Functions (backward compatible with themeStore)
 // =========================================================================
 /**
- * Set the theme preference
- *
- * @param newTheme - The new theme preference ('light', 'dark', or 'auto')
+ * Set the theme preference (internal - exported via core/themeStore)
  */
-export function setTheme(newTheme) {
+function setTheme(newTheme) {
     updateSettings({ theme: { preference: newTheme } });
 }
 /**
- * Toggle between light and dark themes
- * If currently 'auto', switches to the opposite of system preference
+ * Toggle between light and dark themes (internal - exported via core/themeStore)
  */
-export function toggleTheme() {
+function toggleTheme() {
     const currentTheme = get(theme);
     const currentResolved = get(resolvedTheme);
     if (currentTheme === 'auto') {
@@ -314,9 +310,9 @@ export function toggleTheme() {
     }
 }
 /**
- * Cycle through theme options: light -> dark -> auto -> light
+ * Cycle through theme options (internal - exported via core/themeStore)
  */
-export function cycleTheme() {
+function cycleTheme() {
     const currentTheme = get(theme);
     switch (currentTheme) {
         case 'light':
@@ -342,10 +338,9 @@ function applyTheme(resolved) {
     document.documentElement.setAttribute('data-theme', resolved);
 }
 /**
- * Initialize the theme system
- * Should be called once on app startup
+ * Initialize the theme system (internal - exported via core/themeStore)
  */
-export function initializeTheme() {
+function initializeTheme() {
     const resolved = get(resolvedTheme);
     applyTheme(resolved);
     // Subscribe to resolved theme changes and apply them

package/dist/types/index.d.ts

@@ -476,6 +476,8 @@ export interface NodeMetadata {
     version: string;
     icon?: string;
     color?: string;
+    /** Badge label displayed in the node header (e.g., "TOOL", "API", "LLM"). Overridable per-instance via config.instanceBadge. */
+    badge?: string;
     inputs: NodePort[];
     outputs: NodePort[];
     configSchema?: ConfigSchema;

package/dist/types/settings.d.ts

@@ -40,6 +40,10 @@ export interface EditorSettings {
     defaultZoom: number;
     /** Automatically fit workflow to view on load */
     fitViewOnLoad: boolean;
+    /** Enable proximity connect when dragging nodes near other nodes */
+    proximityConnect: boolean;
+    /** Distance threshold in pixels for proximity connect */
+    proximityConnectDistance: number;
 }
 /**
  * UI layout and display settings

package/dist/types/settings.js

@@ -48,7 +48,9 @@ export const DEFAULT_EDITOR_SETTINGS = {
     gridSize: 20,
     showMinimap: true,
     defaultZoom: 1,
-    fitViewOnLoad: true
+    fitViewOnLoad: true,
+    proximityConnect: false,
+    proximityConnectDistance: 150
 };
 /**
  * Default UI settings

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@d34dman/flowdrop",
 	"license": "MIT",
 	"private": false,
-	"version": "0.0.49",
+	"version": "0.0.51",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -128,6 +128,11 @@
 			"svelte": "./dist/playground/index.js",
 			"default": "./dist/playground/index.js"
 		},
+		"./settings": {
+			"types": "./dist/settings/index.d.ts",
+			"svelte": "./dist/settings/index.js",
+			"default": "./dist/settings/index.js"
+		},
 		"./styles": "./dist/styles/base.css",
 		"./styles/*": "./dist/styles/*"
 	},