@d34dman/flowdrop 0.0.22 → 0.0.23

package/dist/components/form/index.js

@@ -0,0 +1,45 @@
+/**
+ * Form Components Module
+ *
+ * Modular form components for dynamic form rendering based on JSON Schema.
+ * Designed for extensibility to support complex types like arrays and objects.
+ *
+ * @module form
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { FormField } from "./";
+ *   import type { FieldSchema } from "./";
+ *
+ *   const schema: FieldSchema = {
+ *     type: "string",
+ *     title: "Name",
+ *     description: "Enter your name"
+ *   };
+ *
+ *   let value = $state("");
+ * </script>
+ *
+ * <FormField
+ *   fieldKey="name"
+ *   {schema}
+ *   {value}
+ *   onChange={(v) => value = v}
+ * />
+ * ```
+ */
+// Types
+export * from "./types.js";
+// Main factory component
+export { default as FormField } from "./FormField.svelte";
+// Wrapper component
+export { default as FormFieldWrapper } from "./FormFieldWrapper.svelte";
+// Individual field components
+export { default as FormTextField } from "./FormTextField.svelte";
+export { default as FormTextarea } from "./FormTextarea.svelte";
+export { default as FormNumberField } from "./FormNumberField.svelte";
+export { default as FormToggle } from "./FormToggle.svelte";
+export { default as FormSelect } from "./FormSelect.svelte";
+export { default as FormCheckboxGroup } from "./FormCheckboxGroup.svelte";
+export { default as FormArray } from "./FormArray.svelte";

package/dist/components/form/types.d.ts

@@ -0,0 +1,208 @@
+/**
+ * Form Field Types
+ * Shared types for form components in the FlowDrop workflow editor
+ *
+ * These types provide a foundation for dynamic form rendering based on JSON Schema
+ * and support extensibility for complex field types like arrays and objects.
+ */
+/**
+ * Supported field types for form rendering
+ * Can be extended to support complex types like 'array' and 'object'
+ */
+export type FieldType = "string" | "number" | "integer" | "boolean" | "select" | "array" | "object";
+/**
+ * Field format for specialized rendering
+ * - multiline: Renders as textarea
+ * - hidden: Field is hidden from UI but included in form submission
+ */
+export type FieldFormat = "multiline" | "hidden" | string;
+/**
+ * Option type for select and checkbox group fields
+ */
+export interface FieldOption {
+    /** The value stored when this option is selected */
+    value: string;
+    /** The display label for this option */
+    label: string;
+}
+/**
+ * Base properties shared by all form fields
+ */
+export interface BaseFieldProps {
+    /** Unique identifier for the field (used for id and name attributes) */
+    id: string;
+    /** Current value of the field */
+    value: unknown;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Placeholder text for input fields */
+    placeholder?: string;
+    /** ARIA description ID for accessibility */
+    ariaDescribedBy?: string;
+    /** Callback when the field value changes */
+    onChange: (value: unknown) => void;
+}
+/**
+ * Properties for text input fields
+ */
+export interface TextFieldProps extends BaseFieldProps {
+    value: string;
+    onChange: (value: string) => void;
+}
+/**
+ * Properties for multiline text fields (textarea)
+ */
+export interface TextareaFieldProps extends BaseFieldProps {
+    value: string;
+    /** Number of visible rows */
+    rows?: number;
+    onChange: (value: string) => void;
+}
+/**
+ * Properties for number input fields
+ */
+export interface NumberFieldProps extends BaseFieldProps {
+    value: number | string;
+    /** Minimum allowed value */
+    min?: number;
+    /** Maximum allowed value */
+    max?: number;
+    /** Step increment for the input */
+    step?: number;
+    onChange: (value: number | string) => void;
+}
+/**
+ * Properties for boolean toggle fields
+ */
+export interface ToggleFieldProps extends BaseFieldProps {
+    value: boolean;
+    /** Label shown when toggle is on */
+    onLabel?: string;
+    /** Label shown when toggle is off */
+    offLabel?: string;
+    onChange: (value: boolean) => void;
+}
+/**
+ * Properties for select dropdown fields
+ */
+export interface SelectFieldProps extends BaseFieldProps {
+    value: string;
+    /** Available options for selection */
+    options: FieldOption[] | string[];
+    onChange: (value: string) => void;
+}
+/**
+ * Properties for checkbox group fields (multiple selection)
+ */
+export interface CheckboxGroupFieldProps extends BaseFieldProps {
+    value: string[];
+    /** Available options for selection */
+    options: string[];
+    onChange: (value: string[]) => void;
+}
+/**
+ * Properties for array fields (dynamic lists)
+ */
+export interface ArrayFieldProps extends BaseFieldProps {
+    value: unknown[];
+    /** Schema for array items */
+    itemSchema: FieldSchema;
+    /** Minimum number of items required */
+    minItems?: number;
+    /** Maximum number of items allowed */
+    maxItems?: number;
+    /** Label for the add button */
+    addLabel?: string;
+    onChange: (value: unknown[]) => void;
+}
+/**
+ * Field schema definition derived from JSON Schema property
+ * Used to determine which field component to render
+ */
+export interface FieldSchema {
+    /** The field type from JSON Schema */
+    type: FieldType | string;
+    /** Display title for the field */
+    title?: string;
+    /** Description for help text */
+    description?: string;
+    /** Default value for the field */
+    default?: unknown;
+    /** Enum values for select/checkbox fields */
+    enum?: unknown[];
+    /** Whether multiple values can be selected */
+    multiple?: boolean;
+    /** Format hint for specialized rendering */
+    format?: FieldFormat;
+    /** Options for select type fields (alternative to enum) */
+    options?: FieldOption[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Minimum value for numbers */
+    minimum?: number;
+    /** Maximum value for numbers */
+    maximum?: number;
+    /** Minimum length for strings */
+    minLength?: number;
+    /** Maximum length for strings */
+    maxLength?: number;
+    /** Validation pattern for strings */
+    pattern?: string;
+    /** Item schema for array fields */
+    items?: FieldSchema;
+    /** Minimum number of items for array fields */
+    minItems?: number;
+    /** Maximum number of items for array fields */
+    maxItems?: number;
+    /** Property schemas for object fields (future use) */
+    properties?: Record<string, FieldSchema>;
+    /** Required properties for object fields (future use) */
+    required?: string[];
+    /** Allow additional properties not defined by the schema */
+    [key: string]: unknown;
+}
+/**
+ * Props for the FormField factory component
+ * Renders the appropriate field component based on schema
+ */
+export interface FormFieldFactoryProps {
+    /** Unique key/id for the field */
+    fieldKey: string;
+    /** Field schema definition */
+    schema: FieldSchema;
+    /** Current field value */
+    value: unknown;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Animation delay index for staggered animations */
+    animationIndex?: number;
+    /** Callback when the field value changes */
+    onChange: (value: unknown) => void;
+}
+/**
+ * Props for the FormFieldWrapper component
+ * Provides label, description, and layout for field content
+ */
+export interface FormFieldWrapperProps {
+    /** Field identifier for label association */
+    id: string;
+    /** Display label text */
+    label: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Description/help text for the field */
+    description?: string;
+    /** Animation delay in milliseconds */
+    animationDelay?: number;
+}
+/**
+ * Type guard to check if options are FieldOption objects
+ */
+export declare function isFieldOptionArray(options: FieldOption[] | string[]): options is FieldOption[];
+/**
+ * Normalize options to FieldOption format
+ * Converts string arrays to FieldOption arrays for consistent handling
+ */
+export declare function normalizeOptions(options: FieldOption[] | string[] | unknown[]): FieldOption[];

package/dist/components/form/types.js

@@ -0,0 +1,29 @@
+/**
+ * Form Field Types
+ * Shared types for form components in the FlowDrop workflow editor
+ *
+ * These types provide a foundation for dynamic form rendering based on JSON Schema
+ * and support extensibility for complex field types like arrays and objects.
+ */
+/**
+ * Type guard to check if options are FieldOption objects
+ */
+export function isFieldOptionArray(options) {
+    return options.length > 0 && typeof options[0] === "object" && "value" in options[0];
+}
+/**
+ * Normalize options to FieldOption format
+ * Converts string arrays to FieldOption arrays for consistent handling
+ */
+export function normalizeOptions(options) {
+    if (!options || options.length === 0) {
+        return [];
+    }
+    if (isFieldOptionArray(options)) {
+        return options;
+    }
+    return options.map((opt) => ({
+        value: String(opt),
+        label: String(opt)
+    }));
+}

package/dist/components/nodes/GatewayNode.svelte

@@ -3,19 +3,29 @@
   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 } 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';
 
-	// Define simplified branch interface - conditions are handled by backend
+	/**
+	 * Branch interface for gateway nodes
+	 * - name: Internal identifier used for handle IDs and connections
+	 * - label: Display label shown in the UI (optional, defaults to name)
+	 * - value: Optional value associated with the branch (e.g., for Switch matching)
+	 */
 	interface Branch {
 		name: string;
-		label: string;
+		label?: string;
+		value?: string;
 	}
 
 	interface Props {
@@ -28,10 +38,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 +177,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 +228,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 +255,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 +283,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 +292,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;