@d34dman/flowdrop 0.0.21 → 0.0.23

package/dist/components/nodes/NotesNode.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-	import type { ConfigValues, NodeMetadata } from '../../types/index.js';
-	import Icon from '@iconify/svelte';
-	import { createEventDispatcher } from 'svelte';
-	import MarkdownDisplay from '../MarkdownDisplay.svelte';
-
-	const dispatch = createEventDispatcher();
-
+	import type { ConfigValues, NodeMetadata } from "../../types/index.js";
+	import Icon from "@iconify/svelte";
+	import MarkdownDisplay from "../MarkdownDisplay.svelte";
+
+	/**
+	 * NotesNode component props
+	 * Displays a styled note with markdown content
+	 */
 	const props = $props<{
 		data: {
 			label: string;
@@ -21,131 +22,94 @@
 		selected?: boolean;
 		isProcessing?: boolean;
 		isError?: boolean;
-		isEditing?: boolean;
 	}>();
 
-	// Internal state for edit mode
-	let isInternalEditing = $state(false);
-
-	// Reactive values that update when props change
-	let noteContent = $state((props.data.config?.content as string) || 'Add your notes here...');
-	let noteType = $state((props.data.config?.noteType as string) || 'info');
+	/** Note content derived from config */
+	const noteContent = $derived(
+		(props.data.config?.content as string) || "Add your notes here..."
+	);
 
-	// Update reactive values when props change
-	$effect(() => {
-		const newContent = (props.data.config?.content as string) || 'Add your notes here...';
-		const newType = (props.data.config?.noteType as string) || 'info';
-
-		if (noteContent !== newContent) {
-			noteContent = newContent;
-		}
-		if (noteType !== newType) {
-			noteType = newType;
-		}
-	});
+	/** Note type derived from config */
+	const noteType = $derived(
+		(props.data.config?.noteType as string) || "info"
+	);
 
-	// Note type configuration
+	/** Note type configuration with styling for each type */
 	const noteTypes = {
 		info: {
-			name: 'Info',
-			bgColor: 'bg-blue-50',
-			borderColor: 'border-blue-200',
-			textColor: 'text-blue-800',
-			iconColor: 'text-blue-500',
-			icon: 'mdi:information'
+			name: "Info",
+			bgColor: "bg-blue-50",
+			borderColor: "border-blue-200",
+			textColor: "text-blue-800",
+			iconColor: "text-blue-500",
+			icon: "mdi:information"
 		},
 		warning: {
-			name: 'Warning',
-			bgColor: 'bg-yellow-50',
-			borderColor: 'border-yellow-200',
-			textColor: 'text-yellow-800',
-			iconColor: 'text-yellow-500',
-			icon: 'mdi:alert'
+			name: "Warning",
+			bgColor: "bg-yellow-50",
+			borderColor: "border-yellow-200",
+			textColor: "text-yellow-800",
+			iconColor: "text-yellow-500",
+			icon: "mdi:alert"
 		},
 		success: {
-			name: 'Success',
-			bgColor: 'bg-green-50',
-			borderColor: 'border-green-200',
-			textColor: 'text-green-800',
-			iconColor: 'text-green-500',
-			icon: 'mdi:check-circle'
+			name: "Success",
+			bgColor: "bg-green-50",
+			borderColor: "border-green-200",
+			textColor: "text-green-800",
+			iconColor: "text-green-500",
+			icon: "mdi:check-circle"
 		},
 		error: {
-			name: 'Error',
-			bgColor: 'bg-red-50',
-			borderColor: 'border-red-200',
-			textColor: 'text-red-800',
-			iconColor: 'text-red-500',
-			icon: 'mdi:close-circle'
+			name: "Error",
+			bgColor: "bg-red-50",
+			borderColor: "border-red-200",
+			textColor: "text-red-800",
+			iconColor: "text-red-500",
+			icon: "mdi:close-circle"
 		},
 		note: {
-			name: 'Note',
-			bgColor: 'bg-gray-50',
-			borderColor: 'border-gray-200',
-			textColor: 'text-gray-800',
-			iconColor: 'text-gray-500',
-			icon: 'mdi:note-text'
+			name: "Note",
+			bgColor: "bg-gray-50",
+			borderColor: "border-gray-200",
+			textColor: "text-gray-800",
+			iconColor: "text-gray-500",
+			icon: "mdi:note-text"
 		}
 	};
 
-	// Reactive derived values
-	let currentType = $derived(noteTypes[noteType as keyof typeof noteTypes] || noteTypes.info);
-
-	// Handle content updates
-	function handleContentChange(event: Event) {
-		const target = event.target as HTMLTextAreaElement;
-		noteContent = target.value;
-		if (props.data.config) {
-			props.data.config.content = target.value;
-			// Dispatch event to notify parent of config change
-			dispatch('configChange', { config: props.data.config });
-		}
-	}
-
-	// Handle note type changes
-	function handleTypeChange(event: Event) {
-		const target = event.target as HTMLSelectElement;
-		noteType = target.value;
-		if (props.data.config) {
-			props.data.config.noteType = target.value;
-			// Dispatch event to notify parent of config change
-			dispatch('configChange', { config: props.data.config });
-		}
-	}
+	/** Current note type configuration based on selected type */
+	const currentType = $derived(
+		noteTypes[noteType as keyof typeof noteTypes] || noteTypes.info
+	);
 
-	// Toggle edit mode
-	function toggleEditMode() {
-		isInternalEditing = !isInternalEditing;
-		// Dispatch event to notify parent of state change
-		dispatch('editModeChange', { isEditing: isInternalEditing });
-	}
-
-	// Handle configuration sidebar - now using global ConfigSidebar
+	/**
+	 * Opens the configuration sidebar for editing note properties
+	 */
 	function openConfigSidebar(): void {
 		if (props.data.onConfigOpen) {
-			// Create a WorkflowNodeType-like object for the global ConfigSidebar
 			const nodeForConfig = {
-				id: props.data.nodeId || 'unknown',
-				type: 'note',
+				id: props.data.nodeId || "unknown",
+				type: "note",
 				data: props.data
 			};
 			props.data.onConfigOpen(nodeForConfig);
 		}
 	}
 
-	// Handle node click - only handle selection, no config opening
-	function handleNodeClick(): void {
-		// Node selection is handled by Svelte Flow
-	}
-
-	// Handle double-click to open config
+	/**
+	 * Handles double-click to open config sidebar
+	 */
 	function handleDoubleClick(): void {
 		openConfigSidebar();
 	}
 
-	// Handle keyboard events
+	/**
+	 * Handles keyboard events for accessibility
+	 * @param event - The keyboard event
+	 */
 	function handleKeydown(event: KeyboardEvent): void {
-		if (event.key === 'Enter' || event.key === ' ') {
+		if (event.key === "Enter" || event.key === " ") {
 			event.preventDefault();
 			handleDoubleClick();
 		}
@@ -157,96 +121,42 @@
 	class:flowdrop-notes-node--selected={props.selected}
 	class:flowdrop-notes-node--processing={props.isProcessing}
 	class:flowdrop-notes-node--error={props.isError}
-	onclick={handleNodeClick}
 	ondblclick={handleDoubleClick}
 	onkeydown={handleKeydown}
 	role="button"
 	tabindex="0"
 >
-	{#if isInternalEditing || props.isEditing}
-		<!-- Edit Mode -->
-		<div class="flowdrop-notes-node__edit">
-			<!-- Note Type Selector -->
-			<div class="flowdrop-notes-node__type-selector">
-				<label for="note-type" class="flowdrop-notes-node__label">Note Type:</label>
-				<select
-					id="note-type"
-					class="flowdrop-notes-node__select"
-					value={noteType}
-					onchange={handleTypeChange}
-				>
-					{#each Object.entries(noteTypes) as [key, type] (key)}
-						<option value={key}>{type.name}</option>
-					{/each}
-				</select>
-			</div>
-
-			<!-- Markdown Textarea -->
-			<div class="flowdrop-notes-node__textarea-container">
-				<label for="note-content" class="flowdrop-notes-node__label">Content (Markdown):</label>
-				<textarea
-					id="note-content"
-					class="flowdrop-notes-node__textarea"
-					placeholder="Write your note in Markdown..."
-					value={noteContent}
-					oninput={handleContentChange}
-				></textarea>
+	<!-- Display Mode -->
+	<div class="flowdrop-notes-node__content {currentType.borderColor} {currentType.textColor}">
+		<!-- Header with icon and type -->
+		<div class="flowdrop-notes-node__header">
+			<div class="flowdrop-notes-node__header-left">
+				<Icon icon={currentType.icon} class="flowdrop-notes-node__icon {currentType.iconColor}" />
+				<span class="flowdrop-notes-node__type">{currentType.name}</span>
 			</div>
+		</div>
 
-			<!-- Save/Cancel Buttons -->
-			<div class="flowdrop-notes-node__edit-actions">
-				<button
-					class="flowdrop-notes-node__btn flowdrop-notes-node__btn--save"
-					onclick={toggleEditMode}
-				>
-					<Icon icon="mdi:check" />
-					Save
-				</button>
-				<button
-					class="flowdrop-notes-node__btn flowdrop-notes-node__btn--cancel"
-					onclick={toggleEditMode}
-				>
-					<Icon icon="mdi:close" />
-					Cancel
-				</button>
-			</div>
+		<!-- Rendered markdown content -->
+		<div class="flowdrop-notes-node__body">
+			<MarkdownDisplay content={noteContent} className="flowdrop-notes-node__markdown" />
 		</div>
-	{:else}
-		<!-- Display Mode -->
-		<div class="flowdrop-notes-node__content {currentType.borderColor} {currentType.textColor}">
-			<!-- Header with icon, type, and edit button -->
-			<div class="flowdrop-notes-node__header">
-				<div class="flowdrop-notes-node__header-left">
-					<Icon icon={currentType.icon} class="flowdrop-notes-node__icon {currentType.iconColor}" />
-					<span class="flowdrop-notes-node__type">{currentType.name}</span>
-				</div>
-				<button class="flowdrop-notes-node__edit-btn" onclick={toggleEditMode} title="Edit note">
-					<Icon icon="mdi:pencil" />
-				</button>
-			</div>
 
-			<!-- Rendered markdown content -->
-			<div class="flowdrop-notes-node__body">
-				<MarkdownDisplay content={noteContent} className="flowdrop-notes-node__markdown" />
+		<!-- Processing indicator -->
+		{#if props.isProcessing}
+			<div class="flowdrop-notes-node__processing">
+				<div class="flowdrop-notes-node__spinner"></div>
+				<span>Processing...</span>
 			</div>
+		{/if}
 
-			<!-- Processing indicator -->
-			{#if props.isProcessing}
-				<div class="flowdrop-notes-node__processing">
-					<div class="flowdrop-notes-node__spinner"></div>
-					<span>Processing...</span>
-				</div>
-			{/if}
-
-			<!-- Error indicator -->
-			{#if props.isError}
-				<div class="flowdrop-notes-node__error">
-					<Icon icon="mdi:alert-circle" class="flowdrop-notes-node__error-icon" />
-					<span>Error occurred</span>
-				</div>
-			{/if}
-		</div>
-	{/if}
+		<!-- Error indicator -->
+		{#if props.isError}
+			<div class="flowdrop-notes-node__error">
+				<Icon icon="mdi:alert-circle" class="flowdrop-notes-node__error-icon" />
+				<span>Error occurred</span>
+			</div>
+		{/if}
+	</div>
 
 	<!-- Config button -->
 	<button
@@ -258,9 +168,6 @@
 	</button>
 </div>
 
-<!-- Configuration Sidebar -->
-<!-- ConfigSidebar removed - now using global ConfigSidebar in WorkflowEditor -->
-
 <style>
 	.flowdrop-notes-node {
 		min-width: var(--notes-node-min-width);
@@ -319,106 +226,6 @@
 		border-color: #ef4444 !important;
 	}
 
-	/* Edit Mode Styles */
-	.flowdrop-notes-node__edit {
-		padding: var(--notes-node-padding);
-		height: 100%;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.flowdrop-notes-node__type-selector {
-		margin-bottom: 1rem;
-		flex-shrink: 0;
-	}
-
-	.flowdrop-notes-node__label {
-		display: block;
-		font-size: 0.875rem;
-		font-weight: 600;
-		margin-bottom: 0.5rem;
-		color: #374151;
-	}
-
-	.flowdrop-notes-node__select {
-		width: 100%;
-		padding: 0.5rem;
-		border: 1px solid #d1d5db;
-		border-radius: 0.375rem;
-		font-size: 0.875rem;
-		background-color: white;
-	}
-
-	.flowdrop-notes-node__textarea-container {
-		margin-bottom: 1rem;
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.flowdrop-notes-node__textarea {
-		width: 100%;
-		min-height: 120px;
-		flex: 1;
-		padding: 0.75rem;
-		border: 1px solid #d1d5db;
-		border-radius: 0.375rem;
-		font-size: 0.875rem;
-		font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-		line-height: 1.5;
-		resize: none; /* Prevent resizing to maintain consistent size */
-		background-color: white;
-	}
-
-	.flowdrop-notes-node__textarea:focus {
-		outline: none;
-		border-color: #3b82f6;
-		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-	}
-
-	.flowdrop-notes-node__edit-actions {
-		display: flex;
-		gap: 0.5rem;
-		margin-top: 1rem;
-		justify-content: flex-end;
-		flex-shrink: 0;
-	}
-
-	.flowdrop-notes-node__btn {
-		display: flex;
-		align-items: center;
-		gap: 0.25rem;
-		padding: 0.5rem 1rem;
-		border: 1px solid;
-		border-radius: 0.375rem;
-		font-size: 0.875rem;
-		font-weight: 500;
-		cursor: pointer;
-		transition: all 0.2s ease-in-out;
-	}
-
-	.flowdrop-notes-node__btn--save {
-		background-color: #10b981;
-		border-color: #10b981;
-		color: white;
-	}
-
-	.flowdrop-notes-node__btn--save:hover {
-		background-color: #059669;
-		border-color: #059669;
-	}
-
-	.flowdrop-notes-node__btn--cancel {
-		background-color: transparent;
-		border-color: #d1d5db;
-		color: #374151;
-	}
-
-	.flowdrop-notes-node__btn--cancel:hover {
-		background-color: #f3f4f6;
-		border-color: #9ca3af;
-	}
-
 	/* Display Mode Styles */
 	.flowdrop-notes-node__content {
 		padding: var(--notes-node-padding);
@@ -443,26 +250,6 @@
 		gap: 0.5rem;
 	}
 
-	.flowdrop-notes-node__edit-btn {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 2rem;
-		height: 2rem;
-		border: none;
-		background: transparent;
-		color: currentColor;
-		opacity: 0.7;
-		cursor: pointer;
-		border-radius: 0.25rem;
-		transition: all 0.2s ease-in-out;
-	}
-
-	.flowdrop-notes-node__edit-btn:hover {
-		opacity: 1;
-		background-color: rgba(0, 0, 0, 0.1);
-	}
-
 	.flowdrop-notes-node__icon {
 		width: 1.75rem;
 		height: 1.75rem;
@@ -554,13 +341,8 @@
 			max-width: 350px;
 		}
 
-		.flowdrop-notes-node__edit,
 		.flowdrop-notes-node__content {
 			padding: 0.75rem;
 		}
-
-		.flowdrop-notes-node__textarea {
-			min-height: 100px;
-		}
 	}
 </style>

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

@@ -1,4 +1,4 @@
-import type { ConfigValues, NodeMetadata } from '../../types/index.js';
+import type { ConfigValues, NodeMetadata } from "../../types/index.js";
 type $$ComponentProps = {
     data: {
         label: string;
@@ -18,26 +18,7 @@ type $$ComponentProps = {
     selected?: boolean;
     isProcessing?: boolean;
     isError?: boolean;
-    isEditing?: boolean;
 };
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const NotesNode: $$__sveltets_2_IsomorphicComponent<$$ComponentProps, {
-    configChange: CustomEvent<any>;
-    editModeChange: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "">;
-type NotesNode = InstanceType<typeof NotesNode>;
+declare const NotesNode: import("svelte").Component<$$ComponentProps, {}, "">;
+type NotesNode = ReturnType<typeof NotesNode>;
 export default NotesNode;

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;