@d34dman/flowdrop 0.0.21 → 0.0.23

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, 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';
@@ -29,13 +29,13 @@ export { default as NodeStatusOverlay } from './components/NodeStatusOverlay.sve
 export { default as MarkdownDisplay } from './components/MarkdownDisplay.svelte';
 export { default as ConfigForm } from './components/ConfigForm.svelte';
 export { default as ConfigModal } from './components/ConfigModal.svelte';
-export { default as ConfigSidebar } from './components/ConfigSidebar.svelte';
+export { default as ConfigPanel } from './components/ConfigPanel.svelte';
+export { default as ReadOnlyDetails } from './components/ReadOnlyDetails.svelte';
 export { default as ConnectionLine } from './components/ConnectionLine.svelte';
 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';
@@ -55,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

@@ -30,14 +30,13 @@ export { default as NodeStatusOverlay } from './components/NodeStatusOverlay.sve
 export { default as MarkdownDisplay } from './components/MarkdownDisplay.svelte';
 export { default as ConfigForm } from './components/ConfigForm.svelte';
 export { default as ConfigModal } from './components/ConfigModal.svelte';
-export { default as ConfigSidebar } from './components/ConfigSidebar.svelte';
+export { default as ConfigPanel } from './components/ConfigPanel.svelte';
+export { default as ReadOnlyDetails } from './components/ReadOnlyDetails.svelte';
 export { default as ConnectionLine } from './components/ConnectionLine.svelte';
 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';
@@ -66,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.21",
+  "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",