@d34dman/flowdrop 0.0.46 → 0.0.48

package/dist/components/form/FormTemplateEditor.svelte

@@ -4,10 +4,13 @@
   
   Features:
   - Custom syntax highlighting for {{ variable }} placeholders
+  - Inline autocomplete for template variables (triggered on {{ and .)
+  - Support for nested object drilling (user.address.city)
+  - Support for array index access (items[0].name)
   - Dark/light theme support
   - Consistent styling with other form components
   - Line wrapping for better template readability
-  - Optional variable hints display
+  - Optional variable hints display (clickable buttons)
   - Proper ARIA attributes for accessibility
   
   Usage:
@@ -30,10 +33,19 @@
 		type ViewUpdate,
 		MatchDecorator
 	} from '@codemirror/view';
-	import { EditorState } from '@codemirror/state';
+	import { EditorState, Compartment } 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';
+	import type {
+		VariableSchema,
+		TemplateVariablesConfig,
+		WorkflowNode,
+		WorkflowEdge,
+		AuthProvider
+	} from '../../types/index.js';
+	import { createTemplateAutocomplete } from './templateAutocomplete.js';
+	import { getVariableSchema } from '../../services/variableService.js';
 
 	interface Props {
 		/** Field identifier */
@@ -48,8 +60,17 @@
 		darkTheme?: boolean;
 		/** Editor height in pixels or CSS value */
 		height?: string;
-		/** Available variable names for hints (optional) */
-		variableHints?: string[];
+		/**
+		 * Configuration for template variable autocomplete.
+		 * Controls which variables are available and how they are displayed.
+		 */
+		variables?: TemplateVariablesConfig;
+		/**
+		 * Variable schema for advanced autocomplete with nested drilling.
+		 * When provided, enables dot notation (user.name) and array access (items[0]).
+		 * @deprecated Use `variables.schema` instead
+		 */
+		variableSchema?: VariableSchema;
 		/** Placeholder variable example for the hint */
 		placeholderExample?: string;
 		/** Whether the field is disabled (read-only) */
@@ -58,6 +79,16 @@
 		ariaDescribedBy?: string;
 		/** Callback when value changes */
 		onChange: (value: string) => void;
+		/** Current workflow node (required for API mode) */
+		node?: WorkflowNode;
+		/** All workflow nodes (required for port-derived variables) */
+		nodes?: WorkflowNode[];
+		/** All workflow edges (required for port-derived variables) */
+		edges?: WorkflowEdge[];
+		/** Workflow ID (required for API mode) */
+		workflowId?: string;
+		/** Auth provider for API requests */
+		authProvider?: AuthProvider;
 	}
 
 	let {
@@ -67,13 +98,102 @@
 		required = false,
 		darkTheme = false,
 		height = '250px',
-		variableHints = [],
+		variables,
+		variableSchema,
 		placeholderExample = 'Hello {{ name }}, your order #{{ order_id }} is ready!',
 		disabled = false,
 		ariaDescribedBy,
-		onChange
+		onChange,
+		node,
+		nodes = [],
+		edges = [],
+		workflowId,
+		authProvider
 	}: Props = $props();
 
+	/** Loading state for API variable fetching */
+	let isLoadingVariables = $state(false);
+
+	/** Error state for API variable fetching */
+	let variableLoadError = $state<string | null>(null);
+
+	/** The effective variable schema (loaded synchronously or asynchronously) */
+	let effectiveVariableSchema = $state<VariableSchema | undefined>(undefined);
+
+	/**
+	 * Load variable schema on mount or when configuration changes.
+	 * Handles both synchronous (schema-based) and asynchronous (API-based) loading.
+	 */
+	async function loadVariableSchema() {
+		// Reset error state
+		variableLoadError = null;
+
+		// If we have deprecated variableSchema prop, use it directly
+		if (variableSchema && Object.keys(variableSchema.variables).length > 0) {
+			effectiveVariableSchema = variableSchema;
+			return;
+		}
+
+		// If no variables config, clear schema
+		if (!variables) {
+			effectiveVariableSchema = undefined;
+			return;
+		}
+
+		// If variables config has static schema only (no API), use it directly
+		if (variables.schema && !variables.api && Object.keys(variables.schema.variables).length > 0) {
+			effectiveVariableSchema = variables.schema;
+			return;
+		}
+
+		// If variables config requires node context (ports or API mode)
+		if ((variables.ports !== undefined || variables.api) && node && nodes && edges) {
+			try {
+				isLoadingVariables = true;
+				effectiveVariableSchema = await getVariableSchema(
+					node,
+					nodes,
+					edges,
+					variables,
+					workflowId,
+					authProvider
+				);
+			} catch (error) {
+				console.error('Failed to load variable schema:', error);
+				variableLoadError = error instanceof Error ? error.message : 'Failed to load variables';
+				effectiveVariableSchema = undefined;
+			} finally {
+				isLoadingVariables = false;
+			}
+		} else {
+			// No schema available
+			effectiveVariableSchema = undefined;
+		}
+	}
+
+	/**
+	 * Retry loading variables after an error
+	 */
+	function retryLoadVariables() {
+		loadVariableSchema();
+	}
+
+	/**
+	 * Whether to show the variable hints section.
+	 * Controlled by variables.showHints (defaults to true).
+	 */
+	const showHints = $derived(variables?.showHints !== false);
+
+	/**
+	 * Derive the list of top-level variable names for the hints display.
+	 */
+	const displayVariables = $derived.by(() => {
+		if (effectiveVariableSchema) {
+			return Object.keys(effectiveVariableSchema.variables);
+		}
+		return [];
+	});
+
 	/** Reference to the container element */
 	let containerRef: HTMLDivElement | undefined = $state(undefined);
 
@@ -83,13 +203,21 @@
 	/** Flag to prevent update loops */
 	let isInternalUpdate = false;
 
+	/** Compartment for dynamic autocomplete reconfiguration */
+	const autocompleteCompartment = new Compartment();
+
 	/**
 	 * Create a MatchDecorator for {{ variable }} patterns
 	 * This highlights the entire {{ variable }} expression
+	 * Supports:
+	 * - Simple variables: {{ name }}
+	 * - Dot notation: {{ user.name }}, {{ user.address.city }}
+	 * - Array access: {{ items[0] }}, {{ items[0].name }}
+	 * - Mixed: {{ orders[0].items[1].price }}
 	 */
 	const variableMatcher = new MatchDecorator({
-		// Match {{ variable_name }} patterns (with optional whitespace)
-		regexp: /\{\{\s*[\w.]+\s*\}\}/g,
+		// Match {{ variable_name }} patterns with dot notation and array indices
+		regexp: /\{\{\s*[\w]+(?:\.[\w]+|\[\d+\]|\[\*\])*\s*\}\}/g,
 		decoration: Decoration.mark({ class: 'cm-template-variable' })
 	});
 
@@ -125,7 +253,7 @@
 
 	/**
 	 * Create editor extensions array for template editing
-	 * Uses minimal setup for better performance (no auto-closing brackets, no autocompletion)
+	 * Includes autocomplete when variables are available
 	 * When disabled is true, adds readOnly/editable so the editor cannot be modified
 	 */
 	function createExtensions() {
@@ -158,7 +286,7 @@
 			// Update listener (only fires on user edit when not disabled)
 			EditorView.updateListener.of(handleUpdate),
 
-			// Custom theme
+			// Custom theme with autocomplete styling
 			EditorView.theme({
 				'&': {
 					height: height,
@@ -185,20 +313,70 @@
 					borderRadius: '3px',
 					padding: '1px 2px',
 					fontWeight: '500'
+				},
+				// Autocomplete dropdown styling
+				'.cm-tooltip.cm-tooltip-autocomplete': {
+					backgroundColor: 'var(--fd-background, #ffffff)',
+					border: '1px solid var(--fd-border, #e5e7eb)',
+					borderRadius: 'var(--fd-radius-lg, 0.5rem)',
+					boxShadow: 'var(--fd-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1))',
+					padding: '0.25rem',
+					maxHeight: '200px',
+					overflow: 'auto'
+				},
+				'.cm-tooltip.cm-tooltip-autocomplete > ul': {
+					fontFamily: "'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace",
+					fontSize: '0.8125rem'
+				},
+				'.cm-tooltip.cm-tooltip-autocomplete > ul > li': {
+					padding: '0.375rem 0.625rem',
+					borderRadius: 'var(--fd-radius-md, 0.375rem)',
+					display: 'flex',
+					alignItems: 'center',
+					gap: '0.5rem'
+				},
+				'.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]': {
+					backgroundColor: 'var(--fd-accent-muted, rgba(168, 85, 247, 0.1))',
+					color: 'var(--fd-accent-hover, #7c3aed)'
+				},
+				'.cm-completionLabel': {
+					flex: '1'
+				},
+				'.cm-completionDetail': {
+					fontSize: '0.6875rem',
+					color: 'var(--fd-muted-foreground, #6b7280)',
+					opacity: '0.8'
 				}
 			}),
 			EditorView.lineWrapping,
 			EditorState.tabSize.of(2)
 		];
 
+		// Add autocomplete compartment (can be reconfigured dynamically)
+		// When disabled or no schema, use empty array
+		if (!disabled && effectiveVariableSchema) {
+			extensions.push(autocompleteCompartment.of(createTemplateAutocomplete(effectiveVariableSchema)));
+		} else {
+			extensions.push(autocompleteCompartment.of([]));
+		}
+
 		if (darkTheme) {
 			extensions.push(oneDark);
-			// Add dark theme override for variable highlighting
+			// Add dark theme override for variable highlighting and autocomplete
 			extensions.push(
 				EditorView.theme({
 					'.cm-template-variable': {
 						color: '#c084fc',
 						backgroundColor: 'rgba(192, 132, 252, 0.15)'
+					},
+					'.cm-tooltip.cm-tooltip-autocomplete': {
+						backgroundColor: '#1e1e1e',
+						border: '1px solid #3e4451',
+						boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.3)'
+					},
+					'.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]': {
+						backgroundColor: 'rgba(192, 132, 252, 0.2)',
+						color: '#c084fc'
 					}
 				})
 			);
@@ -227,19 +405,23 @@
 	}
 
 	/**
-	 * Initialize CodeMirror editor on mount
+	 * Initialize CodeMirror editor and load variables on mount
 	 */
 	onMount(() => {
 		if (!containerRef) {
 			return;
 		}
 
-		editorView = new EditorView({
-			state: EditorState.create({
-				doc: value,
-				extensions: createExtensions()
-			}),
-			parent: containerRef
+		// Load variables first
+		loadVariableSchema().then(() => {
+			// Then create editor with loaded schema
+			editorView = new EditorView({
+				state: EditorState.create({
+					doc: value,
+					extensions: createExtensions()
+				}),
+				parent: containerRef
+			});
 		});
 	});
 
@@ -275,6 +457,28 @@
 			isInternalUpdate = false;
 		}
 	});
+
+	/**
+	 * Reconfigure editor when variable schema changes (e.g., after async loading)
+	 */
+	$effect(() => {
+		// Only track effectiveVariableSchema changes
+		const schema = effectiveVariableSchema;
+
+		if (!editorView) {
+			return;
+		}
+
+		// When effectiveVariableSchema changes, reconfigure the autocomplete compartment
+		// This happens after async API loading completes
+		const newAutocomplete = !disabled && schema
+			? createTemplateAutocomplete(schema)
+			: [];
+
+		editorView.dispatch({
+			effects: [autocompleteCompartment.reconfigure(newAutocomplete)]
+		});
+	});
 </script>
 
 <div class="form-template-editor">
@@ -298,12 +502,66 @@
 		aria-label="Template editor"
 	></div>
 
-	<!-- Variable hints section (shown when variables are available) -->
-	{#if variableHints.length > 0}
+	<!-- Loading banner (shown while fetching variables from API) -->
+	{#if isLoadingVariables}
+		<div class="form-template-editor__banner form-template-editor__banner--loading">
+			<svg
+				class="form-template-editor__banner-icon form-template-editor__banner-icon--spin"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+			>
+				<circle
+					class="opacity-25"
+					cx="12"
+					cy="12"
+					r="10"
+					stroke="currentColor"
+					stroke-width="4"
+				></circle>
+				<path
+					class="opacity-75"
+					fill="currentColor"
+					d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+				></path>
+			</svg>
+			<span>Loading variables...</span>
+		</div>
+	{/if}
+
+	<!-- Error banner (shown when API fetch fails) -->
+	{#if variableLoadError}
+		<div class="form-template-editor__banner form-template-editor__banner--error">
+			<svg
+				class="form-template-editor__banner-icon"
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 20 20"
+				fill="currentColor"
+			>
+				<path
+					fill-rule="evenodd"
+					d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-5a.75.75 0 01.75.75v4.5a.75.75 0 01-1.5 0v-4.5A.75.75 0 0110 5zm0 10a1 1 0 100-2 1 1 0 000 2z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+			<span>{variableLoadError}</span>
+			<button
+				type="button"
+				class="form-template-editor__banner-btn"
+				onclick={retryLoadVariables}
+				title="Retry loading variables"
+			>
+				Retry
+			</button>
+		</div>
+	{/if}
+
+	<!-- Variable hints section (shown when variables are available and showHints is true) -->
+	{#if showHints && displayVariables.length > 0}
 		<div class="form-template-editor__hints">
 			<span class="form-template-editor__hints-label">Available variables:</span>
 			<div class="form-template-editor__hints-list">
-				{#each variableHints as varName (varName)}
+				{#each displayVariables as varName (varName)}
 					<button
 						type="button"
 						class="form-template-editor__hint-btn"
@@ -499,4 +757,68 @@
 		font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
 		font-size: 0.625rem;
 	}
+
+	/* Loading and error banners */
+	.form-template-editor__banner {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		margin-top: 0.625rem;
+		padding: 0.625rem 0.75rem;
+		border-radius: var(--fd-radius-md);
+		font-size: 0.75rem;
+	}
+
+	.form-template-editor__banner--loading {
+		background-color: rgba(59, 130, 246, 0.1);
+		border: 1px solid rgba(59, 130, 246, 0.3);
+		color: rgb(29, 78, 216);
+	}
+
+	.form-template-editor__banner--error {
+		background-color: rgba(239, 68, 68, 0.1);
+		border: 1px solid rgba(239, 68, 68, 0.3);
+		color: rgb(185, 28, 28);
+	}
+
+	.form-template-editor__banner-icon {
+		width: 1rem;
+		height: 1rem;
+		flex-shrink: 0;
+	}
+
+	.form-template-editor__banner-icon--spin {
+		animation: spin 1s linear infinite;
+	}
+
+	@keyframes spin {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.form-template-editor__banner-btn {
+		margin-left: auto;
+		padding: 0.25rem 0.625rem;
+		background-color: rgba(239, 68, 68, 0.15);
+		border: 1px solid rgba(239, 68, 68, 0.3);
+		border-radius: var(--fd-radius-sm);
+		font-size: 0.6875rem;
+		font-weight: 500;
+		color: rgb(185, 28, 28);
+		cursor: pointer;
+		transition: all var(--fd-transition-fast);
+	}
+
+	.form-template-editor__banner-btn:hover {
+		background-color: rgba(239, 68, 68, 0.25);
+		border-color: rgba(239, 68, 68, 0.5);
+	}
+
+	.form-template-editor__banner-btn:active {
+		transform: scale(0.98);
+	}
 </style>

package/dist/components/form/FormTemplateEditor.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { VariableSchema, TemplateVariablesConfig, WorkflowNode, WorkflowEdge, AuthProvider } from '../../types/index.js';
 interface Props {
     /** Field identifier */
     id: string;
@@ -11,8 +12,17 @@ interface Props {
     darkTheme?: boolean;
     /** Editor height in pixels or CSS value */
     height?: string;
-    /** Available variable names for hints (optional) */
-    variableHints?: string[];
+    /**
+     * Configuration for template variable autocomplete.
+     * Controls which variables are available and how they are displayed.
+     */
+    variables?: TemplateVariablesConfig;
+    /**
+     * Variable schema for advanced autocomplete with nested drilling.
+     * When provided, enables dot notation (user.name) and array access (items[0]).
+     * @deprecated Use `variables.schema` instead
+     */
+    variableSchema?: VariableSchema;
     /** Placeholder variable example for the hint */
     placeholderExample?: string;
     /** Whether the field is disabled (read-only) */
@@ -21,6 +31,16 @@ interface Props {
     ariaDescribedBy?: string;
     /** Callback when value changes */
     onChange: (value: string) => void;
+    /** Current workflow node (required for API mode) */
+    node?: WorkflowNode;
+    /** All workflow nodes (required for port-derived variables) */
+    nodes?: WorkflowNode[];
+    /** All workflow edges (required for port-derived variables) */
+    edges?: WorkflowEdge[];
+    /** Workflow ID (required for API mode) */
+    workflowId?: string;
+    /** Auth provider for API requests */
+    authProvider?: AuthProvider;
 }
 declare const FormTemplateEditor: import("svelte").Component<Props, {}, "">;
 type FormTemplateEditor = ReturnType<typeof FormTemplateEditor>;

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

@@ -44,3 +44,4 @@ export { default as FormCodeEditor } from './FormCodeEditor.svelte';
 export { default as FormMarkdownEditor } from './FormMarkdownEditor.svelte';
 export { default as FormTemplateEditor } from './FormTemplateEditor.svelte';
 export { default as FormAutocomplete } from './FormAutocomplete.svelte';
+export { createTemplateAutocomplete } from './templateAutocomplete.js';

package/dist/components/form/index.js

@@ -48,3 +48,5 @@ export { default as FormCodeEditor } from './FormCodeEditor.svelte';
 export { default as FormMarkdownEditor } from './FormMarkdownEditor.svelte';
 export { default as FormTemplateEditor } from './FormTemplateEditor.svelte';
 export { default as FormAutocomplete } from './FormAutocomplete.svelte';
+// Template autocomplete utilities
+export { createTemplateAutocomplete } from './templateAutocomplete.js';

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

@@ -0,0 +1,29 @@
+/**
+ * Template Variable Autocomplete Extension for CodeMirror
+ * Provides autocomplete suggestions for {{ variable }} syntax in template editors.
+ *
+ * Features:
+ * - Triggers on `{{` to show top-level variables
+ * - Triggers on `.` to show child properties for objects
+ * - Triggers on `[` to show array index options
+ * - Supports deep nesting (e.g., `user.address.city`)
+ *
+ * @module components/form/templateAutocomplete
+ */
+import type { Extension } from "@codemirror/state";
+import type { VariableSchema } from "../../types/index.js";
+/**
+ * Creates a CodeMirror extension for template variable autocomplete.
+ *
+ * @param schema - The variable schema containing available variables
+ * @returns A CodeMirror extension that provides autocomplete
+ *
+ * @example
+ * ```typescript
+ * const extensions = [
+ *   // ... other extensions
+ *   createTemplateAutocomplete(variableSchema)
+ * ];
+ * ```
+ */
+export declare function createTemplateAutocomplete(schema: VariableSchema): Extension;