@d34dman/flowdrop 0.0.22 → 0.0.23

package/dist/components/nodes/WorkflowNode.svelte

@@ -3,14 +3,19 @@
   Renders individual nodes in the workflow editor with full functionality
   Uses SvelteFlow's Handle for connection ports
   Styled with BEM syntax
+  
+  UI Extensions Support:
+  - hideUnconnectedHandles: Hides ports that are not connected to reduce visual clutter
 -->
 
 <script lang="ts">
 	import { Position, Handle } from '@xyflow/svelte';
-	import type { WorkflowNode } from '../../types/index.js';
+	import type { WorkflowNode, NodePort, DynamicPort } from '../../types/index.js';
+	import { dynamicPortToNodePort } from '../../types/index.js';
 	import Icon from '@iconify/svelte';
 	import { getNodeIcon } from '../../utils/icons.js';
 	import { getDataTypeColorToken, getCategoryColorToken } from '../../utils/colors.js';
+	import { connectedHandles } from '../../stores/workflowStore.js';
 
 	interface Props {
 		data: WorkflowNode['data'] & {
@@ -23,6 +28,84 @@
 	let props: Props = $props();
 	let isHandleInteraction = $state(false);
 
+	/**
+	 * Get the hideUnconnectedHandles setting from extensions
+	 * Merges node type defaults with instance overrides
+	 */
+	const hideUnconnectedHandles = $derived(() => {
+		const typeDefault = props.data.metadata?.extensions?.ui?.hideUnconnectedHandles ?? false;
+		const instanceOverride = props.data.extensions?.ui?.hideUnconnectedHandles;
+		return instanceOverride ?? typeDefault;
+	});
+
+	/**
+	 * Dynamic inputs from config - user-defined input ports
+	 * Similar to how branches work in GatewayNode
+	 */
+	const dynamicInputs = $derived(
+		((props.data.config?.dynamicInputs as DynamicPort[]) || []).map((port) =>
+			dynamicPortToNodePort(port, 'input')
+		)
+	);
+
+	/**
+	 * Dynamic outputs from config - user-defined output ports
+	 * Similar to how branches work in GatewayNode
+	 */
+	const dynamicOutputs = $derived(
+		((props.data.config?.dynamicOutputs as DynamicPort[]) || []).map((port) =>
+			dynamicPortToNodePort(port, 'output')
+		)
+	);
+
+	/**
+	 * Combined input ports: static metadata inputs + dynamic config inputs
+	 */
+	const allInputPorts = $derived([...props.data.metadata.inputs, ...dynamicInputs]);
+
+	/**
+	 * Combined output ports: static metadata outputs + dynamic config outputs
+	 */
+	const allOutputPorts = $derived([...props.data.metadata.outputs, ...dynamicOutputs]);
+
+	/**
+	 * Check if a port should be visible based on connection state and settings
+	 * @param port - The port to check
+	 * @param type - Whether this is an 'input' or 'output' port
+	 * @returns true if the port should be visible
+	 */
+	function isPortVisible(port: NodePort, type: 'input' | 'output'): boolean {
+		// Always show if hideUnconnectedHandles is disabled
+		if (!hideUnconnectedHandles()) {
+			return true;
+		}
+
+		// Always show required ports
+		if (port.required) {
+			return true;
+		}
+
+		// Check if port is connected
+		const handleId = `${props.data.nodeId}-${type}-${port.id}`;
+		return $connectedHandles.has(handleId);
+	}
+
+	/**
+	 * Derived list of visible input ports based on hideUnconnectedHandles setting
+	 * Now includes both static and dynamic inputs
+	 */
+	const visibleInputPorts = $derived(
+		allInputPorts.filter((port) => isPortVisible(port, 'input'))
+	);
+
+	/**
+	 * Derived list of visible output ports based on hideUnconnectedHandles setting
+	 * Now includes both static and dynamic outputs
+	 */
+	const visibleOutputPorts = $derived(
+		allOutputPorts.filter((port) => isPortVisible(port, 'output'))
+	);
+
 	/**
 	 * Handle configuration value changes - now handled by global ConfigSidebar
 	 */
@@ -110,13 +193,13 @@
 	</div>
 
 	<!-- Input Ports Container -->
-	{#if props.data.metadata.inputs.length > 0}
+	{#if visibleInputPorts.length > 0}
 		<div class="flowdrop-workflow-node__ports">
 			<div class="flowdrop-workflow-node__ports-header">
 				<h5 class="flowdrop-workflow-node__ports-title">Inputs</h5>
 			</div>
 			<div class="flowdrop-workflow-node__ports-list">
-				{#each props.data.metadata.inputs as port (port.id)}
+				{#each visibleInputPorts as port (port.id)}
 					<div class="flowdrop-workflow-node__port">
 						<!-- Input Handle -->
 						<Handle
@@ -161,13 +244,13 @@
 	{/if}
 
 	<!-- Output Ports Container -->
-	{#if props.data.metadata.outputs.length > 0}
+	{#if visibleOutputPorts.length > 0}
 		<div class="flowdrop-workflow-node__ports">
 			<div class="flowdrop-workflow-node__ports-header">
 				<h5 class="flowdrop-workflow-node__ports-title">Outputs</h5>
 			</div>
 			<div class="flowdrop-workflow-node__ports-list">
-				{#each props.data.metadata.outputs as port (port.id)}
+				{#each visibleOutputPorts as port (port.id)}
 					<div class="flowdrop-workflow-node__port">
 						<!-- Port Info -->
 						<div class="flowdrop-flex--1 flowdrop-min-w--0 flowdrop-text--right">

package/dist/index.d.ts

@@ -4,7 +4,7 @@
  */
 import './styles/base.css';
 import './registry/builtinNodes.js';
-export type { NodeCategory, NodeDataType, NodePort, NodeMetadata, ConfigValues, WorkflowNode, WorkflowEdge, Workflow, ApiResponse, NodesResponse, WorkflowResponse, WorkflowsResponse, ExecutionStatus, ExecutionResult, FlowDropConfig, WorkflowEvents, BuiltinNodeType } from './types/index.js';
+export type { NodeCategory, NodeDataType, NodePort, NodeMetadata, NodeExtensions, NodeUIExtensions, ConfigValues, WorkflowNode, WorkflowEdge, Workflow, ApiResponse, NodesResponse, WorkflowResponse, WorkflowsResponse, ExecutionStatus, ExecutionResult, FlowDropConfig, WorkflowEvents, BuiltinNodeType } 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 { StaticAuthProvider, CallbackAuthProvider, NoAuthProvider } from './types/auth.js';
@@ -36,7 +36,6 @@ export { default as LogsSidebar } from './components/LogsSidebar.svelte';
 export { default as PipelineStatus } from './components/PipelineStatus.svelte';
 export { default as Navbar } from './components/Navbar.svelte';
 export { default as Logo } from './components/Logo.svelte';
-export { sampleNodes, sampleWorkflow } from './data/samples.js';
 export * from './utils/icons.js';
 export * from './utils/colors.js';
 export * from './utils/connections.js';
@@ -56,7 +55,7 @@ export { globalSaveWorkflow, globalExportWorkflow, initializeGlobalSave } from '
 export { fetchPortConfig, validatePortConfig } from './services/portConfigApi.js';
 export { getDraftStorageKey, saveDraft, loadDraft, deleteDraft, hasDraft, getDraftMetadata, DraftAutoSaveManager } from './services/draftStorage.js';
 export { EdgeStylingHelper, NodeOperationsHelper, WorkflowOperationsHelper, ConfigurationHelper } from './helpers/workflowEditorHelper.js';
-export { workflowStore, workflowActions, workflowId, workflowName, workflowNodes, workflowEdges, workflowMetadata, workflowChanged, workflowValidation, workflowMetadataChanged, isDirtyStore, isDirty, markAsSaved, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange } from './stores/workflowStore.js';
+export { workflowStore, workflowActions, workflowId, workflowName, workflowNodes, workflowEdges, workflowMetadata, workflowChanged, workflowValidation, workflowMetadataChanged, connectedHandles, isDirtyStore, isDirty, markAsSaved, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange } from './stores/workflowStore.js';
 export * from './config/endpoints.js';
 export { DEFAULT_PORT_CONFIG } from './config/defaultPortConfig.js';
 export * from './config/runtimeConfig.js';

package/dist/index.js

@@ -37,8 +37,6 @@ export { default as LogsSidebar } from './components/LogsSidebar.svelte';
 export { default as PipelineStatus } from './components/PipelineStatus.svelte';
 export { default as Navbar } from './components/Navbar.svelte';
 export { default as Logo } from './components/Logo.svelte';
-// Export sample data for development
-export { sampleNodes, sampleWorkflow } from './data/samples.js';
 // Export utilities
 export * from './utils/icons.js';
 export * from './utils/colors.js';
@@ -67,7 +65,7 @@ export { getDraftStorageKey, saveDraft, loadDraft, deleteDraft, hasDraft, getDra
 // Export helpers
 export { EdgeStylingHelper, NodeOperationsHelper, WorkflowOperationsHelper, ConfigurationHelper } from './helpers/workflowEditorHelper.js';
 // Export stores
-export { workflowStore, workflowActions, workflowId, workflowName, workflowNodes, workflowEdges, workflowMetadata, workflowChanged, workflowValidation, workflowMetadataChanged, 
+export { workflowStore, workflowActions, workflowId, workflowName, workflowNodes, workflowEdges, workflowMetadata, workflowChanged, workflowValidation, workflowMetadataChanged, connectedHandles, 
 // Dirty state tracking
 isDirtyStore, isDirty, markAsSaved, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange } from './stores/workflowStore.js';
 // Export endpoint configuration

package/dist/stores/workflowStore.d.ts

@@ -154,3 +154,18 @@ export declare const workflowMetadataChanged: import("svelte/store").Readable<{
     updatedAt: string;
     version: string;
 }>;
+/**
+ * Derived store for connected handles
+ *
+ * Provides a Set of all handle IDs that are currently connected to edges.
+ * Used by node components to implement hideUnconnectedHandles functionality.
+ *
+ * @example
+ * ```typescript
+ * import { connectedHandles } from './workflowStore.js';
+ *
+ * // Check if a specific handle is connected
+ * const isConnected = $connectedHandles.has('node-1-input-data');
+ * ```
+ */
+export declare const connectedHandles: import("svelte/store").Readable<Set<string>>;

package/dist/stores/workflowStore.js

@@ -470,3 +470,31 @@ export const workflowMetadataChanged = derived(workflowMetadata, (metadata) => (
     updatedAt: metadata.updatedAt,
     version: metadata.version ?? '1.0.0'
 }));
+/**
+ * Derived store for connected handles
+ *
+ * Provides a Set of all handle IDs that are currently connected to edges.
+ * Used by node components to implement hideUnconnectedHandles functionality.
+ *
+ * @example
+ * ```typescript
+ * import { connectedHandles } from './workflowStore.js';
+ *
+ * // Check if a specific handle is connected
+ * const isConnected = $connectedHandles.has('node-1-input-data');
+ * ```
+ */
+export const connectedHandles = derived(workflowEdges, (edges) => {
+    const handles = new Set();
+    edges.forEach((edge) => {
+        // Add source handle (output port)
+        if (edge.sourceHandle) {
+            handles.add(edge.sourceHandle);
+        }
+        // Add target handle (input port)
+        if (edge.targetHandle) {
+            handles.add(edge.targetHandle);
+        }
+    });
+    return handles;
+});

package/dist/types/index.d.ts

@@ -70,6 +70,30 @@ export interface NodePort {
     description?: string;
     defaultValue?: unknown;
 }
+/**
+ * Dynamic port configuration for user-defined inputs/outputs
+ * These are defined in the node's config and allow users to create
+ * custom input/output handles at runtime similar to gateway branches
+ */
+export interface DynamicPort {
+    /** Unique identifier for the port (used for handle IDs and connections) */
+    name: string;
+    /** Display label shown in the UI */
+    label: string;
+    /** Description of what this port accepts/provides */
+    description?: string;
+    /** Data type for the port (affects color and connection validation) */
+    dataType: NodeDataType;
+    /** Whether this port is required for execution */
+    required?: boolean;
+}
+/**
+ * Convert a DynamicPort to a NodePort
+ * @param port - The dynamic port configuration
+ * @param portType - Whether this is an input or output port
+ * @returns A NodePort compatible with the rendering system
+ */
+export declare function dynamicPortToNodePort(port: DynamicPort, portType: 'input' | 'output'): NodePort;
 /**
  * Built-in node types for explicit component rendering.
  * These are the node types that ship with FlowDrop.
@@ -92,6 +116,48 @@ export type BuiltinNodeType = 'note' | 'simple' | 'square' | 'tool' | 'gateway'
  * ```
  */
 export type NodeType = BuiltinNodeType | (string & Record<never, never>);
+/**
+ * UI-related extension settings for nodes
+ * Used to control visual behavior in the workflow editor
+ */
+export interface NodeUIExtensions {
+    /** Show/hide unconnected handles (ports) to reduce visual noise */
+    hideUnconnectedHandles?: boolean;
+    /** Custom styles or theme overrides */
+    style?: Record<string, unknown>;
+    /** Any other UI-specific settings */
+    [key: string]: unknown;
+}
+/**
+ * Custom extension properties for 3rd party integrations
+ * Allows storing additional configuration and UI state data
+ *
+ * @example
+ * ```typescript
+ * const extensions: NodeExtensions = {
+ *   ui: {
+ *     hideUnconnectedHandles: true,
+ *     style: { opacity: 0.8 }
+ *   },
+ *   "myapp:analytics": {
+ *     trackUsage: true,
+ *     customField: "value"
+ *   }
+ * };
+ * ```
+ */
+export interface NodeExtensions {
+    /**
+     * UI-related settings for the node
+     * Used to control visual behavior in the workflow editor
+     */
+    ui?: NodeUIExtensions;
+    /**
+     * Namespaced extension data from 3rd party integrations
+     * Use your package/organization name as the key (e.g., "myapp", "acme:analyzer")
+     */
+    [namespace: string]: unknown;
+}
 /**
  * Node configuration metadata
  */
@@ -115,6 +181,11 @@ export interface NodeMetadata {
     outputs: NodePort[];
     configSchema?: ConfigSchema;
     tags?: string[];
+    /**
+     * Custom extension properties for 3rd party integrations
+     * Allows storing additional configuration and UI state data at the node type level
+     */
+    extensions?: NodeExtensions;
 }
 /**
  * Common base interface for all schema properties
@@ -265,6 +336,12 @@ export interface WorkflowNode extends Node {
         nodeId?: string;
         /** Node execution tracking information */
         executionInfo?: NodeExecutionInfo;
+        /**
+         * Per-instance extension properties for 3rd party integrations
+         * Overrides or extends the node type extensions defined in metadata.extensions
+         * Use for instance-specific UI states or custom data
+         */
+        extensions?: NodeExtensions;
     };
 }
 /**

package/dist/types/index.js

@@ -2,3 +2,19 @@
  * Core types for the Workflow Library
  */
 import { ConnectionLineType } from '@xyflow/svelte';
+/**
+ * Convert a DynamicPort to a NodePort
+ * @param port - The dynamic port configuration
+ * @param portType - Whether this is an input or output port
+ * @returns A NodePort compatible with the rendering system
+ */
+export function dynamicPortToNodePort(port, portType) {
+    return {
+        id: port.name,
+        name: port.label,
+        type: portType,
+        dataType: port.dataType,
+        required: port.required ?? false,
+        description: port.description
+    };
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@d34dman/flowdrop",
   "license": "MIT",
   "private": false,
-  "version": "0.0.22",
+  "version": "0.0.23",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run prepack",
@@ -125,7 +125,8 @@
     "vite": "^6.2.6",
     "vite-plugin-devtools-json": "^0.2.1",
     "vitest": "^3.2.3",
-    "vitest-browser-svelte": "^0.1.0"
+    "vitest-browser-svelte": "^0.1.0",
+    "@types/uuid": "^10.0.0"
   },
   "overrides": {
     "@sveltejs/kit": {
@@ -136,7 +137,6 @@
     "svelte"
   ],
   "dependencies": {
-    "@types/uuid": "^10.0.0",
     "@xyflow/svelte": "~1.2",
     "marked": "^16.1.1",
     "svelte-5-french-toast": "^2.0.6",

package/dist/config/demo.d.ts

@@ -1,58 +0,0 @@
-/**
- * Demo configuration for FlowDrop UI
- * Controls which nodes and workflows are shown in demo mode
- */
-import type { DemoConfig } from '../data/samples.js';
-/**
- * Default demo configuration
- * Change this to enable/disable demo mode and control what's shown
- */
-export declare const defaultDemoConfig: DemoConfig;
-/**
- * Demo mode presets for different scenarios
- */
-export declare const demoPresets: Record<string, DemoConfig>;
-/**
- * Get the current demo configuration
- * You can modify this function to read from localStorage, URL params, etc.
- */
-export declare function getCurrentDemoConfig(): DemoConfig;
-/**
- * Set demo configuration (for future use with UI controls)
- */
-export declare function setDemoConfig(config: DemoConfig): void;
-/**
- * Load demo configuration from localStorage
- */
-export declare function loadDemoConfig(): DemoConfig;
-/**
- * Demo workflow configuration
- */
-export declare const demoWorkflowConfig: {
-    defaultWorkflow: string;
-    autoLoadDemo: boolean;
-    sampleWorkflowName: string;
-    sampleWorkflowDescription: string;
-};
-/**
- * Demo instructions for non-technical users
- */
-export declare const demoInstructions: {
-    title: string;
-    description: string;
-    steps: ({
-        step: number;
-        title: string;
-        description: string;
-        example: string;
-        note?: undefined;
-    } | {
-        step: number;
-        title: string;
-        description: string;
-        note: string;
-        example?: undefined;
-    })[];
-    benefits: string[];
-    useCases: string[];
-};

package/dist/config/demo.js

@@ -1,142 +0,0 @@
-/**
- * Demo configuration for FlowDrop UI
- * Controls which nodes and workflows are shown in demo mode
- */
-/**
- * Default demo configuration
- * Change this to enable/disable demo mode and control what's shown
- */
-export const defaultDemoConfig = {
-    enabled: true, // Set to true to enable demo mode
-    mode: 'content-management' // Show only whitelisted content management nodes
-};
-/**
- * Demo mode presets for different scenarios
- */
-export const demoPresets = {
-    // Content management demo mode - show only whitelisted nodes
-    'content-management': {
-        enabled: true,
-        mode: 'content-management'
-    },
-    // Show all nodes (disable demo filtering)
-    'all-nodes': {
-        enabled: false,
-        mode: 'all'
-    }
-};
-/**
- * Get the current demo configuration
- * You can modify this function to read from localStorage, URL params, etc.
- */
-export function getCurrentDemoConfig() {
-    // For now, return the default config
-    // In the future, this could check localStorage or URL parameters
-    return defaultDemoConfig;
-}
-/**
- * Set demo configuration (for future use with UI controls)
- */
-export function setDemoConfig(config) {
-    // Store in localStorage for persistence
-    if (typeof localStorage !== 'undefined') {
-        localStorage.setItem('flowdrop-demo-config', JSON.stringify(config));
-    }
-}
-/**
- * Load demo configuration from localStorage
- */
-export function loadDemoConfig() {
-    if (typeof localStorage !== 'undefined') {
-        const stored = localStorage.getItem('flowdrop-demo-config');
-        if (stored) {
-            try {
-                return JSON.parse(stored);
-            }
-            catch {
-                // Fall back to default if parsing fails
-                return defaultDemoConfig;
-            }
-        }
-    }
-    return defaultDemoConfig;
-}
-/**
- * Demo workflow configuration
- */
-export const demoWorkflowConfig = {
-    // Which workflow to show by default in demo mode
-    defaultWorkflow: 'sample', // Use sample workflow for now
-    // Whether to auto-load a workflow on startup
-    autoLoadDemo: false,
-    // Sample workflow is used in demo mode
-    sampleWorkflowName: 'Simple Chat Workflow',
-    sampleWorkflowDescription: 'A basic workflow demonstrating direct text input to AI model response'
-};
-/**
- * Demo instructions for non-technical users
- */
-export const demoInstructions = {
-    title: 'Multi-Agent Workflow Demo',
-    description: 'This demo shows how FlowDrop uses multiple AI agents working together to process and manage data workflows.',
-    steps: [
-        {
-            step: 1,
-            title: 'User Input',
-            description: 'Start by providing input data or instructions to the main agent.',
-            example: 'Analyze and process the provided dataset'
-        },
-        {
-            step: 2,
-            title: 'Main Agent Orchestration',
-            description: 'The main conversational agent understands your request and coordinates with specialized sub-agents.',
-            note: 'Acts as the intelligent orchestrator of the entire workflow'
-        },
-        {
-            step: 3,
-            title: 'Data Analysis Agent',
-            description: 'Specialized agent analyzes data using search and processing tools to find and examine relevant information.',
-            note: 'Uses connected data sources and search tools for intelligent data discovery'
-        },
-        {
-            step: 4,
-            title: 'Data Processing Agent',
-            description: 'Specialized agent processes and transforms data using available tools and formatters.',
-            note: 'Has access to multiple tools and makes tracked transformations'
-        },
-        {
-            step: 5,
-            title: 'Tool Integration',
-            description: 'Sub-agents use specialized tools for data processing, formatting, and transformation.',
-            note: "Tools are connected via special 'tool' interface ports"
-        },
-        {
-            step: 6,
-            title: 'Agent Collaboration',
-            description: 'Sub-agents report back to the main agent with their findings and completed work.',
-            note: 'Multi-agent coordination ensures comprehensive task completion'
-        },
-        {
-            step: 7,
-            title: 'Orchestrated Response',
-            description: 'Main agent compiles results from all sub-agents and provides a comprehensive response.',
-            note: 'Includes summaries, results, and next steps for review'
-        }
-    ],
-    benefits: [
-        'Multi-agent collaboration for complex tasks',
-        'Specialized agents for specific data processing functions',
-        'Intelligent task orchestration and coordination',
-        'Tool-based architecture for extensibility',
-        'Human oversight through review process',
-        'Scalable agent-to-agent communication patterns'
-    ],
-    useCases: [
-        'Multi-agent data analysis and processing',
-        'Coordinated data transformation workflows',
-        'Agent-orchestrated data quality checks',
-        'Collaborative data processing pipelines',
-        'Tool-assisted bulk data operations',
-        'Intelligent workflow automation'
-    ]
-};

package/dist/data/samples.d.ts

@@ -1,51 +0,0 @@
-/**
- * Sample data for FlowDrop development and testing
- * Includes sample nodes and workflows for demonstration and testing purposes
- */
-import type { NodeMetadata, Workflow } from '../types/index.js';
-import { CATEGORY_ICONS } from '../utils/icons.js';
-/**
- * Sample node data for development and testing
- * These represent the available node types in the workflow editor
- */
-export declare const sampleNodes: NodeMetadata[];
-export { CATEGORY_ICONS as categoryIcons };
-/**
- * Demo mode configuration
- */
-export interface DemoConfig {
-    enabled: boolean;
-    mode: 'content-management' | 'all';
-}
-/**
- * Filter nodes based on demo configuration
- * @param nodes - All available nodes
- * @param config - Demo configuration
- * @returns Filtered array of nodes
- */
-export declare function filterNodesForDemo(nodes: NodeMetadata[], config: DemoConfig): NodeMetadata[];
-/**
- * Get the list of allowed demo node IDs
- */
-export declare function getDemoAllowedNodeIds(): string[];
-/**
- * Check if a node is allowed in demo mode
- */
-export declare function isNodeAllowedInDemo(nodeId: string): boolean;
-/**
- * Get demo-specific nodes only
- */
-export declare function getDemoNodes(): NodeMetadata[];
-/**
- * Get nodes by category with demo filtering
- */
-export declare function getNodesByCategory(category: string, demoConfig?: DemoConfig): NodeMetadata[];
-/**
- * Search nodes with demo filtering
- */
-export declare function searchNodes(query: string, demoConfig?: DemoConfig): NodeMetadata[];
-/**
- * Sample workflow for development
- * Updated to use the new node types
- */
-export declare const sampleWorkflow: Workflow;