@d34dman/flowdrop 0.0.22 → 0.0.24

package/dist/components/nodes/GatewayNode.svelte

@@ -3,20 +3,18 @@
   Visual representation of gateway/branch nodes with branching flow indicators
   Shows active branches and execution paths
   Styled with BEM syntax following WorkflowNode pattern
+  
+  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, Branch } from '../../types/index.js';
 	import Icon from '@iconify/svelte';
 	import { getNodeIcon } from '../../utils/icons.js';
 	import { getDataTypeColorToken, getCategoryColorToken } from '../../utils/colors.js';
-
-	// Define simplified branch interface - conditions are handled by backend
-	interface Branch {
-		name: string;
-		label: string;
-	}
+	import { connectedHandles } from '../../stores/workflowStore.js';
 
 	interface Props {
 		data: WorkflowNode['data'] & {
@@ -28,10 +26,70 @@
 
 	let props: Props = $props();
 
+	/**
+	 * 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;
+	});
+
+	/**
+	 * 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
+	 */
+	const visibleInputPorts = $derived(
+		props.data.metadata.inputs.filter((port) => isPortVisible(port, 'input'))
+	);
+
+	/**
+	 * Check if a branch output should be visible based on connection state
+	 * @param branchName - The branch name to check
+	 * @returns true if the branch should be visible
+	 */
+	function isBranchVisible(branchName: string): boolean {
+		// Always show if hideUnconnectedHandles is disabled
+		if (!hideUnconnectedHandles()) {
+			return true;
+		}
+
+		// Check if branch output is connected
+		const handleId = `${props.data.nodeId}-output-${branchName}`;
+		return $connectedHandles.has(handleId);
+	}
+
 	// Gateway-specific data - branches are calculated at runtime from config
 	let branches = $derived((props.data.config?.branches as Branch[]) || []);
 	let activeBranches = $derived((props.data.executionInfo as any)?.output?.active_branches || []);
 
+	/**
+	 * Derived list of visible branches based on hideUnconnectedHandles setting
+	 */
+	const visibleBranches = $derived(branches.filter((branch) => isBranchVisible(branch.name)));
+
 	/**
 	 * Handle node click - only handle selection, no config opening
 	 */
@@ -107,14 +165,14 @@
 		</p>
 	</div>
 
-	<!-- Input Ports Container -->
-	{#if props.data.metadata.inputs.length > 0}
+	<!-- Input Ports Container (filtered based on hideUnconnectedHandles) -->
+	{#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
@@ -158,17 +216,17 @@
 		</div>
 	{/if}
 
-	<!-- Branches Section (Output Ports) -->
-	{#if branches.length > 0}
+	<!-- Branches Section (Output Ports) - filtered based on hideUnconnectedHandles -->
+	{#if visibleBranches.length > 0}
 		<div class="flowdrop-workflow-node__ports">
 			<div class="flowdrop-workflow-node__ports-header">
 				<h5 class="flowdrop-workflow-node__ports-title">
 					<Icon icon="mdi:source-branch" />
-					<span>Branches ({branches.length})</span>
+					<span>Branches ({visibleBranches.length})</span>
 				</h5>
 			</div>
 			<div class="flowdrop-workflow-node__ports-list">
-				{#each branches as branch (branch.name)}
+				{#each visibleBranches as branch (branch.name)}
 					{@const isActive = isBranchActive(branch.name)}
 					<div class="flowdrop-workflow-node__port">
 						<!-- Port Info -->
@@ -185,7 +243,7 @@
 									class="flowdrop-text--xs flowdrop-font--medium"
 									class:flowdrop-text--active={isActive}
 								>
-									{branch.name}
+									{branch.label || branch.name}
 								</span>
 								<span
 									class="flowdrop-badge flowdrop-badge--sm"
@@ -213,7 +271,8 @@
 				{/each}
 			</div>
 		</div>
-	{:else}
+	{:else if branches.length === 0}
+		<!-- No branches configured at all -->
 		<div class="flowdrop-workflow-node__ports">
 			<div class="workflow-node__no-branches">
 				<Icon icon="mdi:alert-circle-outline" />
@@ -221,6 +280,7 @@
 			</div>
 		</div>
 	{/if}
+	<!-- Note: When all branches are hidden due to hideUnconnectedHandles, we don't show anything -->
 
 	<!-- Config button -->
 	<button

package/dist/components/nodes/SimpleNode.svelte

@@ -2,13 +2,17 @@
   Simple Node Component
   A simple node with optional input and output ports
   Styled with BEM syntax
+  
+  UI Extensions Support:
+  - hideUnconnectedHandles: Hides trigger ports that are not connected to reduce visual clutter
 -->
 
 <script lang="ts">
 	import { Position, Handle } from '@xyflow/svelte';
-	import type { ConfigValues, NodeMetadata } from '../../types/index.js';
+	import type { ConfigValues, NodeMetadata, NodeExtensions } from '../../types/index.js';
 	import Icon from '@iconify/svelte';
 	import { getDataTypeColor } from '../../utils/colors.js';
+	import { connectedHandles } from '../../stores/workflowStore.js';
 
 	const props = $props<{
 		data: {
@@ -16,6 +20,7 @@
 			config: ConfigValues;
 			metadata: NodeMetadata;
 			nodeId?: string;
+			extensions?: NodeExtensions;
 			onConfigOpen?: (node: {
 				id: string;
 				type: string;
@@ -27,6 +32,37 @@
 		isError?: boolean;
 	}>();
 
+	/**
+	 * 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;
+	});
+
+	/**
+	 * Check if a trigger port is connected
+	 * @param portId - The port ID to check
+	 * @param type - Whether this is an 'input' or 'output' port
+	 */
+	function isTriggerPortConnected(portId: string, type: 'input' | 'output'): boolean {
+		const handleId = `${props.data.nodeId}-${type}-${portId}`;
+		return $connectedHandles.has(handleId);
+	}
+
+	/**
+	 * Check if a trigger port should be visible
+	 * Always shows if hideUnconnectedHandles is disabled or if port is connected
+	 */
+	function shouldShowTriggerPort(portId: string, type: 'input' | 'output'): boolean {
+		if (!hideUnconnectedHandles()) {
+			return true;
+		}
+		return isTriggerPortConnected(portId, type);
+	}
+
 	// Removed local config state - now using global ConfigSidebar
 
 	// Prioritize metadata icon over config icon for simple nodes (metadata is the node definition)
@@ -124,8 +160,8 @@
 		id={`${props.data.nodeId}-input-${firstDataInputPort.id}`}
 	/>
 {/if}
-{#if triggerInputPort}
-	<!-- Trigger Input - positioned at bottom-left -->
+{#if triggerInputPort && shouldShowTriggerPort(triggerInputPort.id, 'input')}
+	<!-- Trigger Input - positioned at bottom-left (hidden if hideUnconnectedHandles enabled and not connected) -->
 	<Handle
 		type="target"
 		position={Position.Left}
@@ -217,8 +253,8 @@
 		)}; border-color: '#ffffff'; top: {hasBothOutputTypes ? '25%' : '50%'}; z-index: 30;"
 	/>
 {/if}
-{#if triggerOutputPort}
-	<!-- Trigger Output - positioned at bottom-right -->
+{#if triggerOutputPort && shouldShowTriggerPort(triggerOutputPort.id, 'output')}
+	<!-- Trigger Output - positioned at bottom-right (hidden if hideUnconnectedHandles enabled and not connected) -->
 	<Handle
 		type="source"
 		position={Position.Right}

package/dist/components/nodes/SimpleNode.svelte.d.ts

@@ -1,10 +1,11 @@
-import type { ConfigValues, NodeMetadata } from '../../types/index.js';
+import type { ConfigValues, NodeMetadata, NodeExtensions } from '../../types/index.js';
 type $$ComponentProps = {
     data: {
         label: string;
         config: ConfigValues;
         metadata: NodeMetadata;
         nodeId?: string;
+        extensions?: NodeExtensions;
         onConfigOpen?: (node: {
             id: string;
             type: string;

package/dist/components/nodes/SquareNode.svelte

@@ -2,13 +2,17 @@
   Square Node Component
   A simple square node with optional input and output ports
   Styled with BEM syntax
+  
+  UI Extensions Support:
+  - hideUnconnectedHandles: Hides trigger ports that are not connected to reduce visual clutter
 -->
 
 <script lang="ts">
 	import { Position, Handle } from '@xyflow/svelte';
-	import type { ConfigValues, NodeMetadata } from '../../types/index.js';
+	import type { ConfigValues, NodeMetadata, NodeExtensions } from '../../types/index.js';
 	import Icon from '@iconify/svelte';
 	import { getDataTypeColor } from '../../utils/colors.js';
+	import { connectedHandles } from '../../stores/workflowStore.js';
 
 	const props = $props<{
 		data: {
@@ -16,6 +20,7 @@
 			config: ConfigValues;
 			metadata: NodeMetadata;
 			nodeId?: string;
+			extensions?: NodeExtensions;
 			onConfigOpen?: (node: {
 				id: string;
 				type: string;
@@ -27,6 +32,37 @@
 		isError?: boolean;
 	}>();
 
+	/**
+	 * 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;
+	});
+
+	/**
+	 * Check if a trigger port is connected
+	 * @param portId - The port ID to check
+	 * @param type - Whether this is an 'input' or 'output' port
+	 */
+	function isTriggerPortConnected(portId: string, type: 'input' | 'output'): boolean {
+		const handleId = `${props.data.nodeId}-${type}-${portId}`;
+		return $connectedHandles.has(handleId);
+	}
+
+	/**
+	 * Check if a trigger port should be visible
+	 * Always shows if hideUnconnectedHandles is disabled or if port is connected
+	 */
+	function shouldShowTriggerPort(portId: string, type: 'input' | 'output'): boolean {
+		if (!hideUnconnectedHandles()) {
+			return true;
+		}
+		return isTriggerPortConnected(portId, type);
+	}
+
 	// Removed local config state - now using global ConfigSidebar
 
 	// Prioritize metadata icon over config icon for square nodes (metadata is the node definition)
@@ -110,8 +146,8 @@
 		id={`${props.data.nodeId}-input-${firstDataInputPort.id}`}
 	/>
 {/if}
-{#if triggerInputPort}
-	<!-- Trigger Input - positioned at bottom-left -->
+{#if triggerInputPort && shouldShowTriggerPort(triggerInputPort.id, 'input')}
+	<!-- Trigger Input - positioned at bottom-left (hidden if hideUnconnectedHandles enabled and not connected) -->
 	<Handle
 		type="target"
 		position={Position.Left}
@@ -179,8 +215,8 @@
 		)}; border-color: '#ffffff'; top: {hasBothOutputTypes ? '25%' : '50%'}; z-index: 30;"
 	/>
 {/if}
-{#if triggerOutputPort}
-	<!-- Trigger Output - positioned at bottom-right -->
+{#if triggerOutputPort && shouldShowTriggerPort(triggerOutputPort.id, 'output')}
+	<!-- Trigger Output - positioned at bottom-right (hidden if hideUnconnectedHandles enabled and not connected) -->
 	<Handle
 		type="source"
 		position={Position.Right}

package/dist/components/nodes/SquareNode.svelte.d.ts

@@ -1,10 +1,11 @@
-import type { ConfigValues, NodeMetadata } from '../../types/index.js';
+import type { ConfigValues, NodeMetadata, NodeExtensions } from '../../types/index.js';
 type $$ComponentProps = {
     data: {
         label: string;
         config: ConfigValues;
         metadata: NodeMetadata;
         nodeId?: string;
+        extensions?: NodeExtensions;
         onConfigOpen?: (node: {
             id: string;
             type: string;

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, DynamicPort, Branch, 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;
+});