@d34dman/flowdrop 0.0.50 → 0.0.52

package/dist/api/client.d.ts

@@ -1,7 +1,7 @@
 /**
  * API Client for FlowDrop Workflow Library
  */
-import type { NodeMetadata, Workflow, ExecutionResult, PortConfig } from '../types/index.js';
+import type { NodeMetadata, Workflow, ExecutionResult, PortConfig, CategoryDefinition } from '../types/index.js';
 /**
  * HTTP API client for FlowDrop
  */
@@ -80,6 +80,10 @@ export declare class FlowDropApiClient {
      * Fetch port configuration
      */
     getPortConfig(): Promise<PortConfig>;
+    /**
+     * Fetch category definitions
+     */
+    getCategories(): Promise<CategoryDefinition[]>;
     /**
      * Fetch pipeline data including job information and status
      */

package/dist/api/client.js

@@ -215,6 +215,16 @@ export class FlowDropApiClient {
         }
         return response.data;
     }
+    /**
+     * Fetch category definitions
+     */
+    async getCategories() {
+        const response = await this.request('/categories');
+        if (!response.success || !response.data) {
+            throw new Error(response.error || 'Failed to fetch categories');
+        }
+        return response.data;
+    }
     /**
      * Fetch pipeline data including job information and status
      */

package/dist/components/NodeSidebar.svelte

@@ -10,6 +10,7 @@
 	import Icon from '@iconify/svelte';
 	import { getNodeIcon, getCategoryIcon } from '../utils/icons.js';
 	import { getCategoryColorToken } from '../utils/colors.js';
+	import { getCategoryLabel } from '../stores/categoriesStore.js';
 	import { SvelteSet } from 'svelte/reactivity';
 	import { uiSettings, updateSettings } from '../stores/settingsStore.js';
 
@@ -142,29 +143,11 @@
 	}
 
 	/**
-	 * Get category display name
+	 * Get category display name from the categories store.
+	 * Falls back to auto-capitalizing the category machine name.
 	 */
 	function getCategoryDisplayName(category: NodeCategory): string {
-		const names: Record<NodeCategory, string> = {
-			triggers: 'Triggers',
-			inputs: 'Inputs',
-			outputs: 'Outputs',
-			prompts: 'Prompts',
-			models: 'Models',
-			processing: 'Processing',
-			logic: 'Logic',
-			data: 'Data',
-			tools: 'Tools',
-			helpers: 'Helpers',
-			'vector stores': 'Vector Stores',
-			embeddings: 'Embeddings',
-			memories: 'Memories',
-			agents: 'Agents',
-			ai: 'AI',
-			interrupts: 'Interrupts',
-			bundles: 'Bundles'
-		};
-		return names[category] || category;
+		return getCategoryLabel(category);
 	}
 
 	/**

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,6 +74,9 @@
 	// 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;
 
@@ -334,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];
 	}
 
 	/**
@@ -344,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);
@@ -636,6 +716,7 @@
 							onbeforedelete={handleBeforeDelete}
 							ondelete={handleNodesDelete}
 							onnodedragstart={handleNodeDragStart}
+							onnodedrag={handleNodeDrag}
 							onnodedragstop={handleNodeDragStop}
 							minZoom={0.2}
 							maxZoom={3}
@@ -884,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/config/defaultCategories.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Default category definitions for FlowDrop
+ * Provides built-in categories with icons, colors, and display labels.
+ * These serve as fallbacks when the /categories API endpoint is unavailable.
+ */
+import type { CategoryDefinition } from '../types/index.js';
+export declare const DEFAULT_CATEGORIES: CategoryDefinition[];

package/dist/config/defaultCategories.js

@@ -0,0 +1,126 @@
+/**
+ * Default category definitions for FlowDrop
+ * Provides built-in categories with icons, colors, and display labels.
+ * These serve as fallbacks when the /categories API endpoint is unavailable.
+ */
+export const DEFAULT_CATEGORIES = [
+    {
+        name: 'triggers',
+        label: 'Triggers',
+        icon: 'mdi:lightning-bolt',
+        color: 'var(--fd-node-cyan)',
+        weight: 0
+    },
+    {
+        name: 'inputs',
+        label: 'Inputs',
+        icon: 'mdi:arrow-down-circle',
+        color: 'var(--fd-node-emerald)',
+        weight: 1
+    },
+    {
+        name: 'outputs',
+        label: 'Outputs',
+        icon: 'mdi:arrow-up-circle',
+        color: 'var(--fd-node-blue)',
+        weight: 2
+    },
+    {
+        name: 'prompts',
+        label: 'Prompts',
+        icon: 'mdi:message-text',
+        color: 'var(--fd-node-amber)',
+        weight: 3
+    },
+    {
+        name: 'models',
+        label: 'Models',
+        icon: 'mdi:robot',
+        color: 'var(--fd-node-indigo)',
+        weight: 4
+    },
+    {
+        name: 'processing',
+        label: 'Processing',
+        icon: 'mdi:cog',
+        color: 'var(--fd-node-teal)',
+        weight: 5
+    },
+    {
+        name: 'logic',
+        label: 'Logic',
+        icon: 'mdi:source-branch',
+        color: 'var(--fd-node-purple)',
+        weight: 6
+    },
+    {
+        name: 'data',
+        label: 'Data',
+        icon: 'mdi:database',
+        color: 'var(--fd-node-orange)',
+        weight: 7
+    },
+    {
+        name: 'tools',
+        label: 'Tools',
+        icon: 'mdi:wrench',
+        color: 'var(--fd-node-amber)',
+        weight: 8
+    },
+    {
+        name: 'helpers',
+        label: 'Helpers',
+        icon: 'mdi:help-circle',
+        color: 'var(--fd-node-slate)',
+        weight: 9
+    },
+    {
+        name: 'vector stores',
+        label: 'Vector Stores',
+        icon: 'mdi:vector-square',
+        color: 'var(--fd-node-emerald)',
+        weight: 10
+    },
+    {
+        name: 'embeddings',
+        label: 'Embeddings',
+        icon: 'mdi:vector-polygon',
+        color: 'var(--fd-node-indigo)',
+        weight: 11
+    },
+    {
+        name: 'memories',
+        label: 'Memories',
+        icon: 'mdi:brain',
+        color: 'var(--fd-node-blue)',
+        weight: 12
+    },
+    {
+        name: 'agents',
+        label: 'Agents',
+        icon: 'mdi:account-cog',
+        color: 'var(--fd-node-teal)',
+        weight: 13
+    },
+    {
+        name: 'ai',
+        label: 'AI',
+        icon: 'mdi:shimmer',
+        color: 'var(--fd-node-purple)',
+        weight: 14
+    },
+    {
+        name: 'interrupts',
+        label: 'Interrupts',
+        icon: 'mdi:hand-back-left',
+        color: 'var(--fd-node-red)',
+        weight: 15
+    },
+    {
+        name: 'bundles',
+        label: 'Bundles',
+        icon: 'mdi:package-variant',
+        color: 'var(--fd-node-slate)',
+        weight: 16
+    }
+];

package/dist/config/endpoints.d.ts

@@ -14,6 +14,7 @@ export interface EndpointConfig {
             metadata: string;
         };
         portConfig: string;
+        categories: string;
         workflows: {
             list: string;
             get: string;

package/dist/config/endpoints.js

@@ -15,6 +15,7 @@ export const defaultEndpointConfig = {
             metadata: '/nodes/{id}/metadata'
         },
         portConfig: '/port-config',
+        categories: '/categories',
         workflows: {
             list: '/workflows',
             get: '/workflows/{id}',

package/dist/core/index.d.ts

@@ -14,7 +14,7 @@
  * import { getStatusColor, createDefaultExecutionInfo } from "@d34dman/flowdrop/core";
  * ```
  */
-export type { NodeCategory, NodeDataType, NodePort, DynamicPort, Branch, NodeMetadata, NodeExtensions, NodeUIExtensions, ConfigValues, WorkflowNode, WorkflowEdge, Workflow, ApiResponse, NodesResponse, WorkflowResponse, WorkflowsResponse, ExecutionStatus, ExecutionResult, FlowDropConfig, WorkflowEvents, BuiltinNodeType, PortConfig, PortCompatibilityRule, ConfigSchema, ConfigProperty, HttpMethod, DynamicSchemaEndpoint, ExternalEditLink, ConfigEditOptions, EdgeCategory } from '../types/index.js';
+export type { NodeCategory, BuiltinNodeCategory, CategoryDefinition, NodeDataType, NodePort, DynamicPort, Branch, NodeMetadata, NodeExtensions, NodeUIExtensions, ConfigValues, WorkflowNode, WorkflowEdge, Workflow, ApiResponse, NodesResponse, WorkflowResponse, WorkflowsResponse, ExecutionStatus, ExecutionResult, FlowDropConfig, WorkflowEvents, BuiltinNodeType, PortConfig, PortCompatibilityRule, ConfigSchema, ConfigProperty, HttpMethod, DynamicSchemaEndpoint, ExternalEditLink, ConfigEditOptions, EdgeCategory } from '../types/index.js';
 export type { WorkflowEditorConfig, EditorFeatures, UIConfig, APIConfig, ExecutionConfig, StorageConfig } from '../types/config.js';
 export type { AuthProvider, StaticAuthConfig, CallbackAuthConfig } from '../types/auth.js';
 export type { WorkflowChangeType, FlowDropEventHandlers, FlowDropFeatures } from '../types/events.js';

package/dist/editor/index.d.ts

@@ -74,6 +74,7 @@ export { currentSession, sessions, messages, isExecuting, isLoading, error as pl
 export { saveWorkflow, updateWorkflow, getWorkflow, getWorkflows, deleteWorkflow, getWorkflowCount, initializeSampleWorkflows } from '../services/workflowStorage.js';
 export { globalSaveWorkflow, globalExportWorkflow, initializeGlobalSave } from '../services/globalSave.js';
 export { fetchPortConfig, validatePortConfig } from '../services/portConfigApi.js';
+export { fetchCategories, validateCategories } from '../services/categoriesApi.js';
 export { fetchDynamicSchema, resolveExternalEditUrl, getEffectiveConfigEditOptions, clearSchemaCache, invalidateSchemaCache, hasConfigEditOptions, shouldShowExternalEdit, shouldUseDynamicSchema } from '../services/dynamicSchemaService.js';
 export { getDraftStorageKey, saveDraft, loadDraft, deleteDraft, hasDraft, getDraftMetadata, DraftAutoSaveManager } from '../services/draftStorage.js';
 export { FlowDropApiClient } from '../api/client.js';

package/dist/editor/index.js

@@ -115,6 +115,7 @@ export { currentSession, sessions, messages, isExecuting, isLoading, error as pl
 export { saveWorkflow, updateWorkflow, getWorkflow, getWorkflows, deleteWorkflow, getWorkflowCount, initializeSampleWorkflows } from '../services/workflowStorage.js';
 export { globalSaveWorkflow, globalExportWorkflow, initializeGlobalSave } from '../services/globalSave.js';
 export { fetchPortConfig, validatePortConfig } from '../services/portConfigApi.js';
+export { fetchCategories, validateCategories } from '../services/categoriesApi.js';
 export { fetchDynamicSchema, resolveExternalEditUrl, getEffectiveConfigEditOptions, clearSchemaCache, invalidateSchemaCache, hasConfigEditOptions, shouldShowExternalEdit, shouldUseDynamicSchema } from '../services/dynamicSchemaService.js';
 export { getDraftStorageKey, saveDraft, loadDraft, deleteDraft, hasDraft, getDraftMetadata, DraftAutoSaveManager } from '../services/draftStorage.js';
 // ============================================================================

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[];
+}