@d34dman/flowdrop 0.0.37 → 0.0.39

package/dist/components/interrupt/TextInputPrompt.svelte

@@ -0,0 +1,333 @@
+<!--
+  TextInputPrompt Component
+  
+  Renders a text input prompt for text-type interrupts.
+  Supports single-line input and multiline textarea.
+  Shows the entered text when resolved.
+  Styled with BEM syntax.
+-->
+
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	import type { TextConfig } from '../../types/interrupt.js';
+
+	/**
+	 * Component props
+	 */
+	interface Props {
+		/** Text configuration from the interrupt */
+		config: TextConfig;
+		/** Whether this interrupt has been resolved */
+		isResolved: boolean;
+		/** The resolved value if resolved */
+		resolvedValue?: string;
+		/** Whether the form is currently submitting */
+		isSubmitting: boolean;
+		/** Error message if submission failed */
+		error?: string;
+		/** Callback when user submits text */
+		onSubmit: (value: string) => void;
+	}
+
+	let { config, isResolved, resolvedValue, isSubmitting, error, onSubmit }: Props = $props();
+
+	/** Local state for input value */
+	let inputValue = $state(config.defaultValue ?? '');
+
+	/** Display value - either resolved or current input */
+	const displayValue = $derived(isResolved ? (resolvedValue ?? '') : inputValue);
+
+	/** Whether the input is multiline */
+	const isMultiline = $derived(config.multiline ?? false);
+
+	/** Character count */
+	const charCount = $derived(inputValue.length);
+
+	/** Check if input is valid */
+	const isValidInput = $derived(
+		inputValue.length > 0 &&
+			(config.minLength === undefined || inputValue.length >= config.minLength) &&
+			(config.maxLength === undefined || inputValue.length <= config.maxLength)
+	);
+
+	/**
+	 * Handle input change
+	 */
+	function handleInput(event: Event): void {
+		if (isResolved || isSubmitting) return;
+		const target = event.target as HTMLInputElement | HTMLTextAreaElement;
+		inputValue = target.value;
+	}
+
+	/**
+	 * Handle form submission
+	 */
+	function handleSubmit(): void {
+		if (!isValidInput || isResolved || isSubmitting) return;
+		onSubmit(inputValue);
+	}
+
+	/**
+	 * Handle Enter key for single-line input
+	 */
+	function handleKeyDown(event: KeyboardEvent): void {
+		if (event.key === 'Enter' && !isMultiline && !event.shiftKey) {
+			event.preventDefault();
+			handleSubmit();
+		}
+	}
+</script>
+
+<div
+	class="text-prompt"
+	class:text-prompt--resolved={isResolved}
+	class:text-prompt--submitting={isSubmitting}
+>
+	<!-- Message -->
+	<p class="text-prompt__message">{config.message}</p>
+
+	<!-- Error message -->
+	{#if error}
+		<div class="text-prompt__error">
+			<Icon icon="mdi:alert-circle" />
+			<span>{error}</span>
+		</div>
+	{/if}
+
+	<!-- Input field -->
+	<div class="text-prompt__input-wrapper">
+		{#if isMultiline}
+			<textarea
+				class="text-prompt__textarea"
+				class:text-prompt__textarea--resolved={isResolved}
+				value={displayValue}
+				placeholder={config.placeholder ?? 'Enter your response...'}
+				disabled={isResolved || isSubmitting}
+				oninput={handleInput}
+				onkeydown={handleKeyDown}
+				rows={4}
+				minlength={config.minLength}
+				maxlength={config.maxLength}
+			></textarea>
+		{:else}
+			<input
+				type="text"
+				class="text-prompt__input"
+				class:text-prompt__input--resolved={isResolved}
+				value={displayValue}
+				placeholder={config.placeholder ?? 'Enter your response...'}
+				disabled={isResolved || isSubmitting}
+				oninput={handleInput}
+				onkeydown={handleKeyDown}
+				minlength={config.minLength}
+				maxlength={config.maxLength}
+			/>
+		{/if}
+	</div>
+
+	<!-- Character count -->
+	{#if !isResolved && (config.minLength !== undefined || config.maxLength !== undefined)}
+		<div class="text-prompt__char-count">
+			<span
+				class:text-prompt__char-count--warning={config.maxLength !== undefined &&
+					charCount > config.maxLength * 0.9}
+			>
+				{charCount}
+				{#if config.maxLength !== undefined}
+					/ {config.maxLength}
+				{/if}
+				{#if config.minLength !== undefined}
+					(min: {config.minLength})
+				{/if}
+			</span>
+		</div>
+	{/if}
+
+	<!-- Submit button -->
+	{#if !isResolved}
+		<div class="text-prompt__actions">
+			<button
+				type="button"
+				class="text-prompt__submit"
+				onclick={handleSubmit}
+				disabled={!isValidInput || isSubmitting}
+			>
+				{#if isSubmitting}
+					<span class="text-prompt__spinner"></span>
+				{:else}
+					<Icon icon="mdi:send" />
+				{/if}
+				<span>Submit</span>
+			</button>
+		</div>
+	{/if}
+
+	<!-- Resolved indicator -->
+	{#if isResolved}
+		<div class="text-prompt__resolved-badge">
+			<Icon icon="mdi:check-circle" />
+			<span>Response submitted</span>
+		</div>
+	{/if}
+</div>
+
+<style>
+	/* Uses design tokens from base.css: --flowdrop-interrupt-*, --color-ref-* */
+	.text-prompt {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.text-prompt--resolved {
+		opacity: 0.85;
+	}
+
+	.text-prompt--submitting {
+		pointer-events: none;
+	}
+
+	.text-prompt__message {
+		margin: 0;
+		font-size: 0.9375rem;
+		line-height: 1.5;
+		color: var(--color-ref-gray-800, #1f2937);
+	}
+
+	.text-prompt__error {
+		display: flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.5rem 0.75rem;
+		background-color: var(--color-ref-red-50, #fef2f2);
+		border-radius: 0.375rem;
+		color: var(--color-ref-red-600, #dc2626);
+		font-size: 0.8125rem;
+	}
+
+	.text-prompt__input-wrapper {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.text-prompt__input,
+	.text-prompt__textarea {
+		width: 100%;
+		padding: 0.75rem 1rem;
+		font-size: 0.9375rem;
+		font-family: inherit;
+		line-height: 1.5;
+		color: var(--color-ref-gray-800, #1f2937);
+		background-color: #ffffff;
+		border: 1px solid var(--color-ref-gray-300, #d1d5db);
+		border-radius: 0.5rem;
+		outline: none;
+		transition: all 0.15s ease;
+	}
+
+	.text-prompt__input::placeholder,
+	.text-prompt__textarea::placeholder {
+		color: var(--color-ref-gray-400, #9ca3af);
+	}
+
+	.text-prompt__input:focus,
+	.text-prompt__textarea:focus {
+		border-color: var(--flowdrop-interrupt-completed-border);
+		box-shadow: 0 0 0 3px var(--flowdrop-interrupt-completed-shadow);
+	}
+
+	.text-prompt__input:disabled,
+	.text-prompt__textarea:disabled {
+		background-color: var(--color-ref-gray-50, #f9fafb);
+		cursor: not-allowed;
+	}
+
+	/* Resolved state - neutral blue to match other interrupt prompts */
+	.text-prompt__input--resolved,
+	.text-prompt__textarea--resolved {
+		background-color: var(--color-ref-blue-50, #eff6ff);
+		border-color: var(--flowdrop-interrupt-completed-border);
+	}
+
+	.text-prompt__textarea {
+		resize: vertical;
+		min-height: 100px;
+	}
+
+	.text-prompt__char-count {
+		font-size: 0.75rem;
+		color: var(--color-ref-gray-500, #6b7280);
+		text-align: right;
+		padding-right: 0.25rem;
+	}
+
+	.text-prompt__char-count--warning {
+		color: var(--color-ref-amber-500, #f59e0b);
+	}
+
+	.text-prompt__actions {
+		display: flex;
+		gap: 0.75rem;
+	}
+
+	.text-prompt__submit {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		gap: 0.5rem;
+		padding: 0.625rem 1.25rem;
+		border-radius: 0.5rem;
+		font-size: 0.875rem;
+		font-weight: 600;
+		font-family: inherit;
+		cursor: pointer;
+		transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+		border: none;
+		min-height: 2.5rem;
+		background: var(--flowdrop-interrupt-btn-primary-bg);
+		color: #ffffff;
+		box-shadow: 0 1px 3px var(--flowdrop-interrupt-btn-primary-shadow);
+	}
+
+	.text-prompt__submit:hover:not(:disabled) {
+		background: var(--flowdrop-interrupt-btn-primary-bg-hover);
+		box-shadow: 0 4px 12px var(--flowdrop-interrupt-btn-primary-shadow);
+		transform: translateY(-1px);
+	}
+
+	.text-prompt__submit:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+		transform: none;
+		box-shadow: none;
+	}
+
+	.text-prompt__spinner {
+		width: 1rem;
+		height: 1rem;
+		border: 2px solid rgba(255, 255, 255, 0.3);
+		border-top-color: #ffffff;
+		border-radius: 50%;
+		animation: text-spin 0.6s linear infinite;
+	}
+
+	@keyframes text-spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* Resolved badge - neutral blue theme */
+	.text-prompt__resolved-badge {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.375rem;
+		padding: 0.375rem 0.75rem;
+		background-color: var(--flowdrop-interrupt-badge-completed-bg);
+		border-radius: 9999px;
+		color: var(--flowdrop-interrupt-badge-completed-text);
+		font-size: 0.75rem;
+		font-weight: 500;
+		align-self: flex-start;
+	}
+</style>

package/dist/components/interrupt/TextInputPrompt.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { TextConfig } from '../../types/interrupt.js';
+/**
+ * Component props
+ */
+interface Props {
+    /** Text configuration from the interrupt */
+    config: TextConfig;
+    /** Whether this interrupt has been resolved */
+    isResolved: boolean;
+    /** The resolved value if resolved */
+    resolvedValue?: string;
+    /** Whether the form is currently submitting */
+    isSubmitting: boolean;
+    /** Error message if submission failed */
+    error?: string;
+    /** Callback when user submits text */
+    onSubmit: (value: string) => void;
+}
+declare const TextInputPrompt: import("svelte").Component<Props, {}, "">;
+type TextInputPrompt = ReturnType<typeof TextInputPrompt>;
+export default TextInputPrompt;

package/dist/components/interrupt/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Interrupt Components
+ *
+ * UI components for Human-in-the-Loop (HITL) interrupt handling
+ * in the FlowDrop playground.
+ *
+ * @module components/interrupt
+ */
+export { default as InterruptBubble } from './InterruptBubble.svelte';
+export { default as ConfirmationPrompt } from './ConfirmationPrompt.svelte';
+export { default as ChoicePrompt } from './ChoicePrompt.svelte';
+export { default as TextInputPrompt } from './TextInputPrompt.svelte';
+export { default as FormPrompt } from './FormPrompt.svelte';

package/dist/components/interrupt/index.js

@@ -0,0 +1,15 @@
+/**
+ * Interrupt Components
+ *
+ * UI components for Human-in-the-Loop (HITL) interrupt handling
+ * in the FlowDrop playground.
+ *
+ * @module components/interrupt
+ */
+// Main container component
+export { default as InterruptBubble } from './InterruptBubble.svelte';
+// Prompt components
+export { default as ConfirmationPrompt } from './ConfirmationPrompt.svelte';
+export { default as ChoicePrompt } from './ChoicePrompt.svelte';
+export { default as TextInputPrompt } from './TextInputPrompt.svelte';
+export { default as FormPrompt } from './FormPrompt.svelte';

package/dist/components/nodes/GatewayNode.svelte

@@ -31,9 +31,7 @@
 	 * 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
-	);
+	const displayTitle = $derived((props.data.config?.instanceTitle as string) || props.data.label);
 
 	/**
 	 * Instance-specific description override from config.

package/dist/components/nodes/IdeaNode.svelte

@@ -7,10 +7,10 @@
 -->
 
 <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";
+	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
@@ -44,7 +44,7 @@
 			(props.data.config?.title as string) ||
 			props.data.label ||
 			props.data.metadata?.name ||
-			"New Idea"
+			'New Idea'
 	);
 
 	/**
@@ -57,7 +57,7 @@
 		(props.data.config?.instanceDescription as string) ||
 			(props.data.config?.description as string) ||
 			props.data.metadata?.description ||
-			"Click to add description..."
+			'Click to add description...'
 	);
 
 	/**
@@ -66,39 +66,29 @@
 	const ideaIcon = $derived(
 		(props.data.config?.icon as string) ||
 			(props.data.metadata?.icon as string) ||
-			"mdi:lightbulb-outline"
+			'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"
+		(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
-	);
+	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";
+	const IDEA_DATA_TYPE = 'idea';
 
 	/**
 	 * Opens the configuration sidebar for editing idea properties
@@ -106,8 +96,8 @@
 	function openConfigSidebar(): void {
 		if (props.data.onConfigOpen) {
 			const nodeForConfig = {
-				id: props.data.nodeId || "unknown",
-				type: "idea",
+				id: props.data.nodeId || 'unknown',
+				type: 'idea',
 				data: props.data
 			};
 			props.data.onConfigOpen(nodeForConfig);
@@ -133,7 +123,7 @@
 	 * @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();
 		}
@@ -159,7 +149,9 @@
 		<Handle
 			type="target"
 			position={Position.Left}
-			style="background-color: {getDataTypeColor(IDEA_DATA_TYPE)}; border-color: #ffffff; top: 50%; transform: translateY(-50%); z-index: 30;"
+			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}
@@ -169,7 +161,9 @@
 		<Handle
 			type="target"
 			position={Position.Top}
-			style="background-color: {getDataTypeColor(IDEA_DATA_TYPE)}; border-color: #ffffff; left: 50%; transform: translateX(-50%); z-index: 30;"
+			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}
@@ -210,11 +204,7 @@
 	</div>
 
 	<!-- Config button -->
-	<button
-		class="flowdrop-idea-node__config-btn"
-		onclick={openConfigSidebar}
-		title="Configure idea"
-	>
+	<button class="flowdrop-idea-node__config-btn" onclick={openConfigSidebar} title="Configure idea">
 		<Icon icon="mdi:cog" />
 	</button>
 
@@ -223,7 +213,9 @@
 		<Handle
 			type="source"
 			position={Position.Right}
-			style="background-color: {getDataTypeColor(IDEA_DATA_TYPE)}; border-color: #ffffff; top: 50%; transform: translateY(-50%); z-index: 30;"
+			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}
@@ -233,7 +225,9 @@
 		<Handle
 			type="source"
 			position={Position.Bottom}
-			style="background-color: {getDataTypeColor(IDEA_DATA_TYPE)}; border-color: #ffffff; left: 50%; transform: translateX(-50%); z-index: 30;"
+			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}
@@ -337,6 +331,7 @@
 		line-height: 1.5;
 		display: -webkit-box;
 		-webkit-line-clamp: 3;
+		line-clamp: 3;
 		-webkit-box-orient: vertical;
 		overflow: hidden;
 	}

package/dist/components/nodes/IdeaNode.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;

package/dist/components/nodes/SimpleNode.svelte

@@ -57,9 +57,7 @@
 	 * 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
-	);
+	const displayTitle = $derived((props.data.config?.instanceTitle as string) || props.data.label);
 
 	/**
 	 * Instance-specific description override from config.

package/dist/components/nodes/TerminalNode.svelte

@@ -167,9 +167,7 @@
 	 * 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 ||
-			""
+		(props.data.config?.instanceDescription as string) || props.data.metadata?.description || ''
 	);
 
 	/**

package/dist/components/nodes/ToolNode.svelte

@@ -58,7 +58,7 @@
 			(props.data.metadata?.name as string) ||
 			(props.data.config?.toolName as string) ||
 			props.data.label ||
-			"Tool"
+			'Tool'
 	);
 
 	/**
@@ -70,7 +70,7 @@
 		(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(

package/dist/components/nodes/WorkflowNode.svelte

@@ -33,9 +33,7 @@
 	 * 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
-	);
+	const displayTitle = $derived((props.data.config?.instanceTitle as string) || props.data.label);
 
 	/**
 	 * Instance-specific description override from config.