@d34dman/flowdrop 0.0.35 → 0.0.37

package/dist/components/ConfigForm.svelte

@@ -34,6 +34,7 @@
 		invalidateSchemaCache,
 		type DynamicSchemaResult
 	} from '../services/dynamicSchemaService.js';
+	import { globalSaveWorkflow } from '../services/globalSave.js';
 
 	interface Props {
 		/** Optional workflow node (if provided, schema and values are derived from it) */
@@ -46,6 +47,8 @@
 		showUIExtensions?: boolean;
 		/** Optional workflow ID for context in external links */
 		workflowId?: string;
+		/** Whether to also save the workflow when saving config */
+		saveWorkflowWhenSavingConfig?: boolean;
 		/** Callback when form is saved (includes both config and extensions if enabled) */
 		onSave: (config: Record<string, unknown>, uiExtensions?: NodeUIExtensions) => void;
 		/** Callback when form is cancelled */
@@ -58,6 +61,7 @@
 		values,
 		showUIExtensions = true,
 		workflowId,
+		saveWorkflowWhenSavingConfig = false,
 		onSave,
 		onCancel
 	}: Props = $props();
@@ -137,6 +141,11 @@
 	 */
 	let uiExtensionValues = $state<NodeUIExtensions>({});
 
+	/**
+	 * Flag to track if workflow save is in progress
+	 */
+	let isSavingWorkflow = $state(false);
+
 	/**
 	 * Get initial UI extensions from node (instance level overrides type level)
 	 */
@@ -270,8 +279,9 @@
 	/**
 	 * Handle form submission
 	 * Collects both config values and UI extension values
+	 * Optionally saves the workflow if the option is enabled
 	 */
-	function handleSave(): void {
+	async function handleSave(): Promise<void> {
 		// Collect all form values including hidden fields
 		const form = document.querySelector('.config-form');
 		const updatedConfig: Record<string, unknown> = { ...configValues };
@@ -322,6 +332,18 @@
 		} else {
 			onSave(updatedConfig);
 		}
+
+		// Save workflow if the option is enabled
+		if (saveWorkflowWhenSavingConfig) {
+			isSavingWorkflow = true;
+			try {
+				await globalSaveWorkflow();
+			} catch (error) {
+				console.error('Failed to save workflow after config save:', error);
+			} finally {
+				isSavingWorkflow = false;
+			}
+		}
 	}
 
 	/**
@@ -498,13 +520,23 @@
 				type="button"
 				class="config-form__button config-form__button--secondary"
 				onclick={onCancel}
+				disabled={isSavingWorkflow}
 			>
 				<Icon icon="heroicons:x-mark" class="config-form__button-icon" />
 				<span>Cancel</span>
 			</button>
-			<button type="submit" class="config-form__button config-form__button--primary">
-				<Icon icon="heroicons:check" class="config-form__button-icon" />
-				<span>Save Changes</span>
+			<button
+				type="submit"
+				class="config-form__button config-form__button--primary"
+				disabled={isSavingWorkflow}
+			>
+				{#if isSavingWorkflow}
+					<span class="config-form__button-spinner"></span>
+					<span>Saving...</span>
+				{:else}
+					<Icon icon="heroicons:check" class="config-form__button-icon" />
+					<span>Save Changes</span>
+				{/if}
 			</button>
 		</div>
 	</form>
@@ -560,6 +592,16 @@
 		margin-top: 0.5rem;
 	}
 
+	/* Button Spinner */
+	.config-form__button-spinner {
+		width: 1rem;
+		height: 1rem;
+		border: 2px solid rgba(255, 255, 255, 0.3);
+		border-top-color: #ffffff;
+		border-radius: 50%;
+		animation: config-form-spin 0.6s linear infinite;
+	}
+
 	.config-form__button {
 		display: inline-flex;
 		align-items: center;

package/dist/components/ConfigForm.svelte.d.ts

@@ -10,6 +10,8 @@ interface Props {
     showUIExtensions?: boolean;
     /** Optional workflow ID for context in external links */
     workflowId?: string;
+    /** Whether to also save the workflow when saving config */
+    saveWorkflowWhenSavingConfig?: boolean;
     /** Callback when form is saved (includes both config and extensions if enabled) */
     onSave: (config: Record<string, unknown>, uiExtensions?: NodeUIExtensions) => void;
     /** Callback when form is cancelled */

package/dist/components/form/FormCodeEditor.svelte

@@ -16,8 +16,13 @@
 
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
-	import { EditorView, basicSetup } from 'codemirror';
+	import { EditorView, lineNumbers, highlightActiveLineGutter, drawSelection } from '@codemirror/view';
 	import { EditorState } from '@codemirror/state';
+	import { history, historyKeymap } from '@codemirror/commands';
+	import { highlightSpecialChars, highlightActiveLine } from '@codemirror/view';
+	import { syntaxHighlighting, defaultHighlightStyle, indentOnInput } from '@codemirror/language';
+	import { keymap } from '@codemirror/view';
+	import { defaultKeymap, indentWithTab } from '@codemirror/commands';
 	import { json, jsonParseLinter } from '@codemirror/lang-json';
 	import { oneDark } from '@codemirror/theme-one-dark';
 	import { linter, lintGutter } from '@codemirror/lint';
@@ -156,14 +161,36 @@
 
 	/**
 	 * Create editor extensions array
+	 * Uses minimal setup for better performance (no auto-closing brackets, no autocompletion)
 	 */
 	function createExtensions() {
 		const extensions = [
-			basicSetup,
+			// Essential visual features
+			lineNumbers(),
+			highlightActiveLineGutter(),
+			highlightSpecialChars(),
+			highlightActiveLine(),
+			drawSelection(),
+
+			// Editing features
+			history(),
+			indentOnInput(),
+
+			// Syntax highlighting
+			syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+
+			// Keymaps for basic editing
+			keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
+
+			// JSON-specific features
 			json(),
 			linter(jsonParseLinter()),
 			lintGutter(),
+
+			// Update listener
 			EditorView.updateListener.of(handleUpdate),
+
+			// Custom theme
 			EditorView.theme({
 				'&': {
 					height: height,

package/dist/components/form/FormTemplateEditor.svelte

@@ -16,15 +16,23 @@
 
 <script lang="ts">
 	import { onMount, onDestroy } from 'svelte';
-	import { EditorView, basicSetup } from 'codemirror';
-	import { EditorState } from '@codemirror/state';
 	import {
+		EditorView,
+		lineNumbers,
+		highlightActiveLineGutter,
+		drawSelection,
+		highlightSpecialChars,
+		highlightActiveLine,
+		keymap,
 		Decoration,
 		type DecorationSet,
 		ViewPlugin,
 		type ViewUpdate,
 		MatchDecorator
 	} from '@codemirror/view';
+	import { EditorState } from '@codemirror/state';
+	import { history, historyKeymap, defaultKeymap, indentWithTab } from '@codemirror/commands';
+	import { syntaxHighlighting, defaultHighlightStyle, indentOnInput } from '@codemirror/language';
 	import { oneDark } from '@codemirror/theme-one-dark';
 
 	interface Props {
@@ -114,12 +122,34 @@
 
 	/**
 	 * Create editor extensions array for template editing
+	 * Uses minimal setup for better performance (no auto-closing brackets, no autocompletion)
 	 */
 	function createExtensions() {
 		const extensions = [
-			basicSetup,
+			// Essential visual features
+			lineNumbers(),
+			highlightActiveLineGutter(),
+			highlightSpecialChars(),
+			highlightActiveLine(),
+			drawSelection(),
+
+			// Editing features
+			history(),
+			indentOnInput(),
+
+			// Syntax highlighting
+			syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+
+			// Keymaps for basic editing
+			keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
+
+			// Template-specific variable highlighter
 			variableHighlighter,
+
+			// Update listener
 			EditorView.updateListener.of(handleUpdate),
+
+			// Custom theme
 			EditorView.theme({
 				'&': {
 					height: height,

package/dist/components/nodes/GatewayNode.svelte

@@ -26,6 +26,24 @@
 
 	let props: Props = $props();
 
+	/**
+	 * Instance-specific title override from config.
+	 * Falls back to the original label if not set.
+	 * This allows users to customize the node title per-instance via config.
+	 */
+	const displayTitle = $derived(
+		(props.data.config?.instanceTitle as string) || props.data.label
+	);
+
+	/**
+	 * Instance-specific description override from config.
+	 * Falls back to the metadata description if not set.
+	 * This allows users to customize the node description per-instance via config.
+	 */
+	const displayDescription = $derived(
+		(props.data.config?.instanceDescription as string) || props.data.metadata.description
+	);
+
 	/**
 	 * Get the hideUnconnectedHandles setting from extensions
 	 * Merges node type defaults with instance overrides
@@ -137,7 +155,7 @@
 	onkeydown={handleKeydown}
 	role="button"
 	tabindex="0"
-	aria-label="Gateway node: {props.data.metadata.name}"
+	aria-label="Gateway node: {displayTitle}"
 	aria-describedby="node-description-{props.data.nodeId || 'unknown'}"
 >
 	<!-- Node Header -->
@@ -151,17 +169,17 @@
 				<Icon icon={getNodeIcon(props.data.metadata.icon, props.data.metadata.category)} />
 			</div>
 
-			<!-- Node Title -->
+			<!-- Node Title - uses instanceTitle override if set -->
 			<h3 class="flowdrop-text--sm flowdrop-font--medium flowdrop-truncate flowdrop-flex--1">
-				{props.data.label}
+				{displayTitle}
 			</h3>
 		</div>
-		<!-- Node Description -->
+		<!-- Node Description - uses instanceDescription override if set -->
 		<p
 			class="flowdrop-text--xs flowdrop-text--gray flowdrop-truncate flowdrop-mt--1"
 			id="node-description-{props.data.nodeId || 'unknown'}"
 		>
-			{props.data.metadata.description}
+			{displayDescription}
 		</p>
 	</div>
 

package/dist/components/nodes/IdeaNode.svelte

@@ -0,0 +1,490 @@
+<!--
+  Idea Node Component
+  A BPMN-like conceptual flow node with card design and configurable ports.
+  Allows users to create and chain ideas together without committing to specific node types.
+  Supports 4 connection points: left, right, top, and bottom (configurable via checkboxes).
+  Styled with BEM syntax
+-->
+
+<script lang="ts">
+	import { Position, Handle } from "@xyflow/svelte";
+	import type { ConfigValues, NodeMetadata } from "../../types/index.js";
+	import Icon from "@iconify/svelte";
+	import { getDataTypeColor } from "../../utils/colors.js";
+
+	/**
+	 * IdeaNode component props
+	 * Displays a card-style node for conceptual flow diagrams
+	 */
+	const props = $props<{
+		data: {
+			label: string;
+			config: ConfigValues;
+			metadata: NodeMetadata;
+			nodeId?: string;
+			onConfigOpen?: (node: {
+				id: string;
+				type: string;
+				data: { label: string; config: ConfigValues; metadata: NodeMetadata };
+			}) => void;
+		};
+		selected?: boolean;
+		isProcessing?: boolean;
+		isError?: boolean;
+	}>();
+
+	/**
+	 * Instance-specific title override from config.
+	 * Falls back to the original label if not set.
+	 * This allows users to customize the node title per-instance via config.
+	 * Note: Also supports legacy 'title' property for backward compatibility.
+	 */
+	const displayTitle = $derived(
+		(props.data.config?.instanceTitle as string) ||
+			(props.data.config?.title as string) ||
+			props.data.label ||
+			props.data.metadata?.name ||
+			"New Idea"
+	);
+
+	/**
+	 * Instance-specific description override from config.
+	 * Falls back to the metadata description if not set.
+	 * This allows users to customize the node description per-instance via config.
+	 * Note: Also supports legacy 'description' property for backward compatibility.
+	 */
+	const displayDescription = $derived(
+		(props.data.config?.instanceDescription as string) ||
+			(props.data.config?.description as string) ||
+			props.data.metadata?.description ||
+			"Click to add description..."
+	);
+
+	/**
+	 * Get custom icon from config or metadata, with fallback
+	 */
+	const ideaIcon = $derived(
+		(props.data.config?.icon as string) ||
+			(props.data.metadata?.icon as string) ||
+			"mdi:lightbulb-outline"
+	);
+
+	/**
+	 * Get accent color from config or metadata, with fallback
+	 */
+	const ideaColor = $derived(
+		(props.data.config?.color as string) ||
+			(props.data.metadata?.color as string) ||
+			"#6366f1"
+	);
+
+	/**
+	 * Port visibility configuration from config
+	 * Left and Right are enabled by default, Top and Bottom are disabled by default
+	 */
+	const enableLeftPort = $derived(
+		(props.data.config?.enableLeftPort as boolean) ?? true
+	);
+	const enableRightPort = $derived(
+		(props.data.config?.enableRightPort as boolean) ?? true
+	);
+	const enableTopPort = $derived(
+		(props.data.config?.enableTopPort as boolean) ?? false
+	);
+	const enableBottomPort = $derived(
+		(props.data.config?.enableBottomPort as boolean) ?? false
+	);
+
+	/**
+	 * Data type for idea flow connections
+	 */
+	const IDEA_DATA_TYPE = "idea";
+
+	/**
+	 * Opens the configuration sidebar for editing idea properties
+	 */
+	function openConfigSidebar(): void {
+		if (props.data.onConfigOpen) {
+			const nodeForConfig = {
+				id: props.data.nodeId || "unknown",
+				type: "idea",
+				data: props.data
+			};
+			props.data.onConfigOpen(nodeForConfig);
+		}
+	}
+
+	/**
+	 * Handles double-click to open config sidebar
+	 */
+	function handleDoubleClick(): void {
+		openConfigSidebar();
+	}
+
+	/**
+	 * Handle single click - selection handled by SvelteFlow
+	 */
+	function handleClick(): void {
+		// Node selection is handled by Svelte Flow
+	}
+
+	/**
+	 * Handles keyboard events for accessibility
+	 * @param event - The keyboard event
+	 */
+	function handleKeydown(event: KeyboardEvent): void {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			handleDoubleClick();
+		}
+	}
+</script>
+
+<!-- Idea Node -->
+<div
+	class="flowdrop-idea-node"
+	class:flowdrop-idea-node--selected={props.selected}
+	class:flowdrop-idea-node--processing={props.isProcessing}
+	class:flowdrop-idea-node--error={props.isError}
+	style="--idea-accent-color: {ideaColor};"
+	onclick={handleClick}
+	ondblclick={handleDoubleClick}
+	onkeydown={handleKeydown}
+	role="button"
+	tabindex="0"
+	aria-label="Idea node: {displayTitle}"
+>
+	<!-- Left Port (Target/Input) -->
+	{#if enableLeftPort}
+		<Handle
+			type="target"
+			position={Position.Left}
+			style="background-color: {getDataTypeColor(IDEA_DATA_TYPE)}; border-color: #ffffff; top: 50%; transform: translateY(-50%); z-index: 30;"
+			id={`${props.data.nodeId}-input-left`}
+		/>
+	{/if}
+
+	<!-- Top Port (Target/Input) -->
+	{#if enableTopPort}
+		<Handle
+			type="target"
+			position={Position.Top}
+			style="background-color: {getDataTypeColor(IDEA_DATA_TYPE)}; border-color: #ffffff; left: 50%; transform: translateX(-50%); z-index: 30;"
+			id={`${props.data.nodeId}-input-top`}
+		/>
+	{/if}
+
+	<!-- Card Content -->
+	<div class="flowdrop-idea-node__card">
+		<!-- Accent Bar -->
+		<div class="flowdrop-idea-node__accent-bar"></div>
+
+		<!-- Header with icon and title -->
+		<div class="flowdrop-idea-node__header">
+			<div class="flowdrop-idea-node__icon-wrapper">
+				<Icon icon={ideaIcon} class="flowdrop-idea-node__icon" />
+			</div>
+			<h3 class="flowdrop-idea-node__title">{displayTitle}</h3>
+		</div>
+
+		<!-- Description Body -->
+		<div class="flowdrop-idea-node__body">
+			<p class="flowdrop-idea-node__description">{displayDescription}</p>
+		</div>
+
+		<!-- Processing indicator -->
+		{#if props.isProcessing}
+			<div class="flowdrop-idea-node__processing">
+				<div class="flowdrop-idea-node__spinner"></div>
+				<span>Processing...</span>
+			</div>
+		{/if}
+
+		<!-- Error indicator -->
+		{#if props.isError}
+			<div class="flowdrop-idea-node__error">
+				<Icon icon="mdi:alert-circle" class="flowdrop-idea-node__error-icon" />
+				<span>Error</span>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Config button -->
+	<button
+		class="flowdrop-idea-node__config-btn"
+		onclick={openConfigSidebar}
+		title="Configure idea"
+	>
+		<Icon icon="mdi:cog" />
+	</button>
+
+	<!-- Right Port (Source/Output) -->
+	{#if enableRightPort}
+		<Handle
+			type="source"
+			position={Position.Right}
+			style="background-color: {getDataTypeColor(IDEA_DATA_TYPE)}; border-color: #ffffff; top: 50%; transform: translateY(-50%); z-index: 30;"
+			id={`${props.data.nodeId}-output-right`}
+		/>
+	{/if}
+
+	<!-- Bottom Port (Source/Output) -->
+	{#if enableBottomPort}
+		<Handle
+			type="source"
+			position={Position.Bottom}
+			style="background-color: {getDataTypeColor(IDEA_DATA_TYPE)}; border-color: #ffffff; left: 50%; transform: translateX(-50%); z-index: 30;"
+			id={`${props.data.nodeId}-output-bottom`}
+		/>
+	{/if}
+</div>
+
+<style>
+	.flowdrop-idea-node {
+		position: relative;
+		width: 18rem;
+		cursor: pointer;
+		transition: all 0.2s ease-in-out;
+		z-index: 10;
+	}
+
+	.flowdrop-idea-node__card {
+		background-color: #ffffff;
+		border-radius: 0.75rem;
+		border: 1px solid #e5e7eb;
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.06);
+		overflow: hidden;
+		transition: all 0.2s ease-in-out;
+	}
+
+	.flowdrop-idea-node:hover .flowdrop-idea-node__card {
+		box-shadow:
+			0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 4px 6px -2px rgba(0, 0, 0, 0.05);
+		transform: translateY(-1px);
+	}
+
+	.flowdrop-idea-node--selected .flowdrop-idea-node__card {
+		border-color: #3b82f6;
+		box-shadow:
+			0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 0 0 3px rgba(59, 130, 246, 0.3);
+	}
+
+	.flowdrop-idea-node--processing .flowdrop-idea-node__card {
+		opacity: 0.8;
+	}
+
+	.flowdrop-idea-node--error .flowdrop-idea-node__card {
+		border-color: #ef4444 !important;
+		background-color: #fef2f2 !important;
+	}
+
+	/* Accent bar at top of card */
+	.flowdrop-idea-node__accent-bar {
+		height: 4px;
+		background-color: var(--idea-accent-color, #6366f1);
+		transition: background-color 0.2s ease-in-out;
+	}
+
+	/* Header section */
+	.flowdrop-idea-node__header {
+		display: flex;
+		align-items: center;
+		gap: 0.625rem;
+		padding: 0.75rem 1rem 0.5rem;
+	}
+
+	.flowdrop-idea-node__icon-wrapper {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2rem;
+		height: 2rem;
+		background-color: color-mix(in srgb, var(--idea-accent-color, #6366f1) 15%, transparent);
+		border-radius: 0.5rem;
+		flex-shrink: 0;
+	}
+
+	:global(.flowdrop-idea-node__icon) {
+		width: 1.25rem;
+		height: 1.25rem;
+		color: var(--idea-accent-color, #6366f1);
+	}
+
+	.flowdrop-idea-node__title {
+		font-size: 0.9375rem;
+		font-weight: 600;
+		color: #1f2937;
+		margin: 0;
+		line-height: 1.3;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	/* Body section */
+	.flowdrop-idea-node__body {
+		padding: 0 1rem 0.875rem;
+	}
+
+	.flowdrop-idea-node__description {
+		font-size: 0.8125rem;
+		color: #6b7280;
+		margin: 0;
+		line-height: 1.5;
+		display: -webkit-box;
+		-webkit-line-clamp: 3;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	/* Processing indicator */
+	.flowdrop-idea-node__processing {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 1rem;
+		font-size: 0.75rem;
+		color: #6b7280;
+		border-top: 1px solid #f3f4f6;
+	}
+
+	.flowdrop-idea-node__spinner {
+		width: 0.875rem;
+		height: 0.875rem;
+		border: 2px solid #e5e7eb;
+		border-top-color: var(--idea-accent-color, #6366f1);
+		border-radius: 50%;
+		animation: idea-spin 1s linear infinite;
+	}
+
+	/* Error indicator */
+	.flowdrop-idea-node__error {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.5rem 1rem;
+		font-size: 0.75rem;
+		color: #ef4444;
+		border-top: 1px solid #fecaca;
+		background-color: #fef2f2;
+	}
+
+	:global(.flowdrop-idea-node__error-icon) {
+		width: 0.875rem;
+		height: 0.875rem;
+	}
+
+	@keyframes idea-spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* Config button */
+	.flowdrop-idea-node__config-btn {
+		position: absolute;
+		top: 0.625rem;
+		right: 0.625rem;
+		width: 1.5rem;
+		height: 1.5rem;
+		background-color: rgba(255, 255, 255, 0.95);
+		border: 1px solid #e5e7eb;
+		border-radius: 0.375rem;
+		color: #6b7280;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		opacity: 0;
+		transition: all 0.2s ease-in-out;
+		backdrop-filter: blur(4px);
+		z-index: 15;
+		font-size: 0.875rem;
+	}
+
+	.flowdrop-idea-node:hover .flowdrop-idea-node__config-btn {
+		opacity: 1;
+	}
+
+	.flowdrop-idea-node__config-btn:hover {
+		background-color: #f9fafb;
+		border-color: #d1d5db;
+		color: #374151;
+		transform: scale(1.05);
+	}
+
+	/* Handle styles */
+	:global(.flowdrop-idea-node .svelte-flow__handle) {
+		width: 16px !important;
+		height: 16px !important;
+		border-radius: 50% !important;
+		border: 2px solid #ffffff !important;
+		transition: all 0.2s ease-in-out !important;
+		cursor: pointer !important;
+		z-index: 20 !important;
+		pointer-events: auto !important;
+	}
+
+	/* Left handle positioning */
+	:global(.flowdrop-idea-node .svelte-flow__handle-left) {
+		left: -8px !important;
+	}
+
+	/* Right handle positioning */
+	:global(.flowdrop-idea-node .svelte-flow__handle-right) {
+		right: -8px !important;
+	}
+
+	/* Top handle positioning */
+	:global(.flowdrop-idea-node .svelte-flow__handle-top) {
+		top: -8px !important;
+	}
+
+	/* Bottom handle positioning */
+	:global(.flowdrop-idea-node .svelte-flow__handle-bottom) {
+		bottom: -8px !important;
+	}
+
+	/* Handle hover effects */
+	:global(.flowdrop-idea-node .svelte-flow__handle-left:hover),
+	:global(.flowdrop-idea-node .svelte-flow__handle-right:hover) {
+		transform: translateY(-50%) scale(1.2) !important;
+	}
+
+	:global(.flowdrop-idea-node .svelte-flow__handle-top:hover),
+	:global(.flowdrop-idea-node .svelte-flow__handle-bottom:hover) {
+		transform: translateX(-50%) scale(1.2) !important;
+	}
+
+	:global(.flowdrop-idea-node .svelte-flow__handle:focus) {
+		outline: 2px solid #3b82f6 !important;
+		outline-offset: 2px !important;
+	}
+
+	/* Responsive design */
+	@media (max-width: 640px) {
+		.flowdrop-idea-node {
+			width: 16rem;
+		}
+
+		.flowdrop-idea-node__header {
+			padding: 0.625rem 0.75rem 0.375rem;
+		}
+
+		.flowdrop-idea-node__body {
+			padding: 0 0.75rem 0.625rem;
+		}
+
+		.flowdrop-idea-node__title {
+			font-size: 0.875rem;
+		}
+
+		.flowdrop-idea-node__description {
+			font-size: 0.75rem;
+		}
+	}
+</style>

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

@@ -0,0 +1,24 @@
+import type { ConfigValues, NodeMetadata } from "../../types/index.js";
+type $$ComponentProps = {
+    data: {
+        label: string;
+        config: ConfigValues;
+        metadata: NodeMetadata;
+        nodeId?: string;
+        onConfigOpen?: (node: {
+            id: string;
+            type: string;
+            data: {
+                label: string;
+                config: ConfigValues;
+                metadata: NodeMetadata;
+            };
+        }) => void;
+    };
+    selected?: boolean;
+    isProcessing?: boolean;
+    isError?: boolean;
+};
+declare const IdeaNode: import("svelte").Component<$$ComponentProps, {}, "">;
+type IdeaNode = ReturnType<typeof IdeaNode>;
+export default IdeaNode;

package/dist/components/nodes/SimpleNode.svelte

@@ -52,6 +52,26 @@
 		(props.data.metadata?.color as string) || (props.data.config?.color as string) || '#6366f1'
 	);
 
+	/**
+	 * Instance-specific title override from config.
+	 * Falls back to the original label if not set.
+	 * This allows users to customize the node title per-instance via config.
+	 */
+	const displayTitle = $derived(
+		(props.data.config?.instanceTitle as string) || props.data.label
+	);
+
+	/**
+	 * Instance-specific description override from config.
+	 * Falls back to the metadata description if not set.
+	 * This allows users to customize the node description per-instance via config.
+	 */
+	const displayDescription = $derived(
+		(props.data.config?.instanceDescription as string) ||
+			props.data.metadata?.description ||
+			'A configurable simple node'
+	);
+
 	// Handle configuration sidebar - now using global ConfigSidebar
 	function openConfigSidebar(): void {
 		if (props.data.onConfigOpen) {
@@ -198,13 +218,13 @@
 
 			<!-- Node Title -->
 			<h3 class="flowdrop-simple-node__title">
-				{props.data.label}
+				{displayTitle}
 			</h3>
 		</div>
 
 		<!-- Node Description -->
 		<p class="flowdrop-simple-node__description">
-			{props.data.metadata?.description || 'A configurable simple node'}
+			{displayDescription}
 		</p>
 	</div>
 

package/dist/components/nodes/TerminalNode.svelte

@@ -150,9 +150,27 @@
 	);
 
 	/**
-	 * Get display label
+	 * Instance-specific title override from config.
+	 * Falls back to the original label if not set.
+	 * This allows users to customize the node title per-instance via config.
 	 */
-	let displayLabel = $derived(props.data.label || props.data.metadata?.name || variantConfig.label);
+	const displayTitle = $derived(
+		(props.data.config?.instanceTitle as string) ||
+			props.data.label ||
+			props.data.metadata?.name ||
+			variantConfig.label
+	);
+
+	/**
+	 * Instance-specific description override from config.
+	 * Falls back to the metadata description if not set.
+	 * This allows users to customize the node description per-instance via config.
+	 */
+	const displayDescription = $derived(
+		(props.data.config?.instanceDescription as string) ||
+			props.data.metadata?.description ||
+			""
+	);
 
 	/**
 	 * Check if metadata explicitly defines inputs (including empty array)
@@ -282,7 +300,7 @@
 	onkeydown={handleKeydown}
 	role="button"
 	tabindex="0"
-	aria-label="{variant} node: {displayLabel}"
+	aria-label="{variant} node: {displayTitle}"
 >
 	<!-- Config button at top -->
 	<button
@@ -333,9 +351,16 @@
 		{/if}
 	</div>
 
-	<!-- Label below the circle -->
-	<div class="flowdrop-terminal-node__label">
-		{displayLabel}
+	<!-- Label and description below the circle -->
+	<div class="flowdrop-terminal-node__label-container">
+		<div class="flowdrop-terminal-node__label">
+			{displayTitle}
+		</div>
+		{#if displayDescription}
+			<div class="flowdrop-terminal-node__description">
+				{displayDescription}
+			</div>
+		{/if}
 	</div>
 
 	<!-- Processing indicator -->
@@ -440,19 +465,37 @@
 		filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
 	}
 
+	.flowdrop-terminal-node__label-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 0.125rem;
+		background-color: rgba(255, 255, 255, 0.9);
+		padding: 0.25rem 0.5rem;
+		border-radius: 0.25rem;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+		max-width: 140px;
+	}
+
 	.flowdrop-terminal-node__label {
 		font-size: 0.75rem;
 		font-weight: 500;
 		color: #374151;
 		text-align: center;
-		max-width: 100px;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
-		background-color: rgba(255, 255, 255, 0.9);
-		padding: 0.125rem 0.5rem;
-		border-radius: 0.25rem;
-		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+		max-width: 100%;
+	}
+
+	.flowdrop-terminal-node__description {
+		font-size: 0.625rem;
+		color: #6b7280;
+		text-align: center;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		max-width: 100%;
 	}
 
 	.flowdrop-terminal-node__processing {

package/dist/components/nodes/ToolNode.svelte

@@ -47,17 +47,32 @@
 	let toolColor = $derived(
 		(props.data.metadata?.color as string) || (props.data.config?.color as string) || '#f59e0b'
 	);
-	let toolName = $derived(
-		(props.data.metadata?.name as string) ||
+
+	/**
+	 * Instance-specific title override from config.
+	 * Falls back to metadata name, toolName config, or label if not set.
+	 * This allows users to customize the tool title per-instance via config.
+	 */
+	const displayTitle = $derived(
+		(props.data.config?.instanceTitle as string) ||
+			(props.data.metadata?.name as string) ||
 			(props.data.config?.toolName as string) ||
 			props.data.label ||
-			'Tool'
+			"Tool"
 	);
-	let toolDescription = $derived(
-		(props.data.metadata?.description as string) ||
+
+	/**
+	 * Instance-specific description override from config.
+	 * Falls back to metadata description or toolDescription config if not set.
+	 * This allows users to customize the tool description per-instance via config.
+	 */
+	const displayDescription = $derived(
+		(props.data.config?.instanceDescription as string) ||
+			(props.data.metadata?.description as string) ||
 			(props.data.config?.toolDescription as string) ||
-			'A configurable tool for agents'
+			"A configurable tool for agents"
 	);
+
 	let toolVersion = $derived(
 		(props.data.metadata?.version as string) ||
 			(props.data.config?.toolVersion as string) ||
@@ -159,7 +174,7 @@
 			<!-- Tool Info -->
 			<div class="flowdrop-tool-node__info">
 				<h3 class="flowdrop-tool-node__title">
-					{toolName}
+					{displayTitle}
 				</h3>
 				<div class="flowdrop-tool-node__version">
 					v{toolVersion}
@@ -170,9 +185,9 @@
 			<div class="flowdrop-tool-node__badge">TOOL</div>
 		</div>
 
-		<!-- Tool Description -->
+		<!-- Tool Description - uses instanceDescription override if set -->
 		<p class="flowdrop-tool-node__description">
-			{toolDescription}
+			{displayDescription}
 		</p>
 	</div>
 

package/dist/components/nodes/WorkflowNode.svelte

@@ -28,6 +28,24 @@
 	let props: Props = $props();
 	let isHandleInteraction = $state(false);
 
+	/**
+	 * Instance-specific title override from config.
+	 * Falls back to the original label if not set.
+	 * This allows users to customize the node title per-instance via config.
+	 */
+	const displayTitle = $derived(
+		(props.data.config?.instanceTitle as string) || props.data.label
+	);
+
+	/**
+	 * Instance-specific description override from config.
+	 * Falls back to the metadata description if not set.
+	 * This allows users to customize the node description per-instance via config.
+	 */
+	const displayDescription = $derived(
+		(props.data.config?.instanceDescription as string) || props.data.metadata.description
+	);
+
 	/**
 	 * Get the hideUnconnectedHandles setting from extensions
 	 * Merges node type defaults with instance overrides
@@ -173,7 +191,7 @@
 
 			<!-- Node Title - Icon and Title on same line -->
 			<h3 class="flowdrop-text--sm flowdrop-font--medium flowdrop-truncate flowdrop-flex--1">
-				{props.data.label}
+				{displayTitle}
 			</h3>
 
 			<!-- Status Indicators -->
@@ -186,7 +204,7 @@
 			class="flowdrop-text--xs flowdrop-text--gray flowdrop-truncate flowdrop-mt--1"
 			id="node-description-{props.data.nodeId || 'unknown'}"
 		>
-			{props.data.metadata.description}
+			{displayDescription}
 		</p>
 	</div>
 

package/dist/registry/builtinNodes.d.ts

@@ -70,7 +70,7 @@ export declare function getBuiltinTypes(): string[];
  * Type for built-in node types.
  * Use this when you specifically need a built-in type.
  */
-export type BuiltinNodeType = 'workflowNode' | 'simple' | 'square' | 'tool' | 'gateway' | 'note' | 'terminal';
+export type BuiltinNodeType = 'workflowNode' | 'simple' | 'square' | 'tool' | 'gateway' | 'note' | 'terminal' | 'idea';
 /**
  * Array of built-in type strings for runtime validation.
  */

package/dist/registry/builtinNodes.js

@@ -13,6 +13,7 @@ import ToolNode from '../components/nodes/ToolNode.svelte';
 import GatewayNode from '../components/nodes/GatewayNode.svelte';
 import NotesNode from '../components/nodes/NotesNode.svelte';
 import TerminalNode from '../components/nodes/TerminalNode.svelte';
+import IdeaNode from '../components/nodes/IdeaNode.svelte';
 /**
  * Source identifier for built-in FlowDrop components
  */
@@ -98,6 +99,17 @@ export const BUILTIN_NODE_COMPONENTS = [
         source: FLOWDROP_SOURCE,
         statusPosition: 'top-right',
         statusSize: 'sm'
+    },
+    {
+        type: 'idea',
+        displayName: 'Idea (Conceptual Flow)',
+        description: 'Conceptual idea node for BPMN-like flow diagrams',
+        component: IdeaNode,
+        icon: 'mdi:lightbulb-outline',
+        category: 'layout',
+        source: FLOWDROP_SOURCE,
+        statusPosition: 'top-right',
+        statusSize: 'sm'
     }
 ];
 /**
@@ -188,7 +200,8 @@ export const BUILTIN_NODE_TYPES = [
     'tool',
     'gateway',
     'note',
-    'terminal'
+    'terminal',
+    'idea'
 ];
 // Auto-register built-ins when this module is imported
 registerBuiltinNodes();

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@d34dman/flowdrop",
 	"license": "MIT",
 	"private": false,
-	"version": "0.0.35",
+	"version": "0.0.37",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",