@d34dman/flowdrop 0.0.46 → 0.0.47

package/dist/components/App.svelte

@@ -756,6 +756,8 @@
 				<ConfigForm
 					node={currentNode}
 					workflowId={$workflowStore?.id}
+					workflowNodes={$workflowStore?.nodes}
+					workflowEdges={$workflowStore?.edges}
 					onChange={async (updatedConfig, uiExtensions) => {
 						// Sync config changes to workflow immediately on field blur
 						if (selectedNodeId && currentNode) {
@@ -780,6 +782,10 @@
 
 							workflowActions.updateNode(selectedNodeId, nodeUpdates);
 
+							// Update the local editor state to reflect config changes immediately
+							// This is needed for nodeType changes to take effect visually
+							workflowEditorRef.updateNodeData(selectedNodeId, updatedData);
+
 							// Refresh edge positions in case config changes affect handles
 							await workflowEditorRef.refreshEdgePositions(selectedNodeId);
 						}

package/dist/components/ConfigForm.svelte

@@ -22,6 +22,7 @@
 	import type {
 		ConfigSchema,
 		WorkflowNode,
+		WorkflowEdge,
 		NodeUIExtensions,
 		ConfigEditOptions
 	} from '../types/index.js';
@@ -35,6 +36,7 @@
 		type DynamicSchemaResult
 	} from '../services/dynamicSchemaService.js';
 	import { globalSaveWorkflow } from '../services/globalSave.js';
+	import { getAvailableVariables } from '../services/variableService.js';
 
 	interface Props {
 		/** Optional workflow node (if provided, schema and values are derived from it) */
@@ -49,6 +51,16 @@
 		workflowId?: string;
 		/** Whether to also save the workflow when saving config */
 		saveWorkflowWhenSavingConfig?: boolean;
+		/**
+		 * All workflow nodes (used for deriving template variables from connected nodes).
+		 * When provided along with workflowEdges, enables autocomplete for template fields.
+		 */
+		workflowNodes?: WorkflowNode[];
+		/**
+		 * All workflow edges (used for finding connections to derive template variables).
+		 * When provided along with workflowNodes, enables autocomplete for template fields.
+		 */
+		workflowEdges?: WorkflowEdge[];
 		/** Callback when any field value changes (fired on blur for immediate sync) */
 		onChange?: (config: Record<string, unknown>, uiExtensions?: NodeUIExtensions) => void;
 		/** Callback when form is saved (includes both config and extensions if enabled) */
@@ -64,6 +76,8 @@
 		showUIExtensions = true,
 		workflowId,
 		saveWorkflowWhenSavingConfig = false,
+		workflowNodes = [],
+		workflowEdges = [],
 		onChange,
 		onSave,
 		onCancel
@@ -364,10 +378,46 @@
 	}
 
 	/**
-	 * Convert ConfigProperty to FieldSchema for FormField component
+	 * Convert ConfigProperty to FieldSchema for FormField component.
+	 * Processes template fields to inject computed variable schema.
+	 *
+	 * For template fields, the `variables` config controls which input ports
+	 * provide variables for autocomplete.
 	 */
 	function toFieldSchema(property: Record<string, unknown>): FieldSchema {
-		return property as FieldSchema;
+		const fieldSchema = property as FieldSchema;
+
+		// Process template fields to compute variable schema
+		if (fieldSchema.format === 'template' && node && workflowNodes.length > 0 && workflowEdges.length > 0) {
+			// Get the variables config (may be undefined or partially defined)
+			const variablesConfig = fieldSchema.variables;
+
+			// Compute the variable schema with optional port filtering and port name prefixing
+			const computedSchema = getAvailableVariables(node, workflowNodes, workflowEdges, {
+				targetPortIds: variablesConfig?.ports,
+				includePortName: variablesConfig?.includePortName
+			});
+
+			// Merge computed schema with any pre-defined schema
+			const mergedSchema = variablesConfig?.schema
+				? {
+						variables: {
+							...computedSchema.variables,
+							...variablesConfig.schema.variables
+						}
+					}
+				: computedSchema;
+
+			return {
+				...fieldSchema,
+				variables: {
+					...variablesConfig,
+					schema: mergedSchema
+				}
+			} as FieldSchema;
+		}
+
+		return fieldSchema;
 	}
 </script>
 

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

@@ -1,4 +1,4 @@
-import type { ConfigSchema, WorkflowNode, NodeUIExtensions } from '../types/index.js';
+import type { ConfigSchema, WorkflowNode, WorkflowEdge, NodeUIExtensions } from '../types/index.js';
 interface Props {
     /** Optional workflow node (if provided, schema and values are derived from it) */
     node?: WorkflowNode;
@@ -12,6 +12,16 @@ interface Props {
     workflowId?: string;
     /** Whether to also save the workflow when saving config */
     saveWorkflowWhenSavingConfig?: boolean;
+    /**
+     * All workflow nodes (used for deriving template variables from connected nodes).
+     * When provided along with workflowEdges, enables autocomplete for template fields.
+     */
+    workflowNodes?: WorkflowNode[];
+    /**
+     * All workflow edges (used for finding connections to derive template variables).
+     * When provided along with workflowNodes, enables autocomplete for template fields.
+     */
+    workflowEdges?: WorkflowEdge[];
     /** Callback when any field value changes (fired on blur for immediate sync) */
     onChange?: (config: Record<string, unknown>, uiExtensions?: NodeUIExtensions) => void;
     /** Callback when form is saved (includes both config and extensions if enabled) */

package/dist/components/SettingsPanel.svelte

@@ -89,8 +89,11 @@
 					type: 'string',
 					title: 'Theme Preference',
 					description: 'Choose your preferred color scheme',
-					enum: ['light', 'dark', 'auto'],
-					enumLabels: ['Light', 'Dark', 'Auto (System)'],
+					oneOf: [
+						{ const: 'light', title: 'Light' },
+						{ const: 'dark', title: 'Dark' },
+						{ const: 'auto', title: 'Auto (System)' }
+					],
 					default: 'auto'
 				}
 			}

package/dist/components/WorkflowEditor.svelte

@@ -515,6 +515,32 @@
 	 */
 	let nodeIdToRefresh = $state<string | null>(null);
 
+	/**
+	 * Update a node's data in the local editor state.
+	 * This should be called after updating the node in the global store to ensure
+	 * the visual representation is updated immediately (e.g., for nodeType changes).
+	 *
+	 * @param nodeId - The ID of the node to update
+	 * @param dataUpdates - Partial data updates to merge into the node's data
+	 */
+	export function updateNodeData(
+		nodeId: string,
+		dataUpdates: Partial<WorkflowNodeType['data']>
+	): void {
+		flowNodes = flowNodes.map((node) => {
+			if (node.id === nodeId) {
+				return {
+					...node,
+					data: {
+						...node.data,
+						...dataUpdates
+					}
+				};
+			}
+			return node;
+		});
+	}
+
 	/**
 	 * Force edge position recalculation after node config changes
 	 * This should be called after saving gateway/switch node configs where branches are reordered

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

@@ -16,6 +16,7 @@ interface Props {
     pipelineId?: string;
 }
 declare const WorkflowEditor: import("svelte").Component<Props, {
+    updateNodeData: (nodeId: string, dataUpdates: Partial<WorkflowNodeType["data"]>) => void;
     refreshEdgePositions: (nodeId: string) => Promise<void>;
 }, "">;
 type WorkflowEditor = ReturnType<typeof WorkflowEditor>;

package/dist/components/form/FormField.svelte

@@ -17,12 +17,12 @@
   5. format: 'template' -> FormTemplateEditor (CodeMirror with Twig/Liquid syntax)
   6. enum with multiple: true -> FormCheckboxGroup
   7. enum -> FormSelect (simple values without labels)
-  8. format: 'multiline' -> FormTextarea
-  9. format: 'range' (number/integer) -> FormRangeField
-  10. type: 'string' -> FormTextField
-  11. type: 'number' or 'integer' -> FormNumberField
-  12. type: 'boolean' -> FormToggle
-  13. oneOf with const/title (labeled options) -> FormSelect
+  8. oneOf with const/title (labeled options) -> FormSelect
+  9. format: 'multiline' -> FormTextarea
+  10. format: 'range' (number/integer) -> FormRangeField
+  11. type: 'string' -> FormTextField
+  12. type: 'number' or 'integer' -> FormNumberField
+  13. type: 'boolean' -> FormToggle
   14. type: 'object' (without format) -> FormCodeEditor (for JSON objects)
   15. fallback -> FormTextField
 -->
@@ -122,6 +122,12 @@
 			return 'select-enum';
 		}
 
+		// oneOf with labeled options (standard JSON Schema) or legacy options -> select
+		// Must be checked before basic type checks since oneOf schemas often have type: 'string'
+		if ((schema.oneOf && schema.oneOf.length > 0) || schema.options) {
+			return 'select-options';
+		}
+
 		// Multiline string -> textarea
 		if (schema.type === 'string' && schema.format === 'multiline') {
 			return 'textarea';
@@ -147,11 +153,6 @@
 			return 'toggle';
 		}
 
-		// oneOf with labeled options (standard JSON Schema) or legacy options -> select
-		if ((schema.oneOf && schema.oneOf.length > 0) || schema.options) {
-			return 'select-options';
-		}
-
 		// Future: Array type support
 		if (schema.type === 'array') {
 			return 'array';
@@ -350,6 +351,7 @@
 				{required}
 				height={(schema.height as string | undefined) ?? '250px'}
 				darkTheme={(schema.darkTheme as boolean | undefined) ?? false}
+				variables={schema.variables}
 				variableHints={(schema.variableHints as string[] | undefined) ?? []}
 				placeholderExample={(schema.placeholderExample as string | undefined) ??
 					'Hello {{ name }}, your order #{{ order_id }} is ready!'}

package/dist/components/form/FormFieldLight.svelte

@@ -22,12 +22,12 @@
   2. format: 'hidden' -> skip rendering (return nothing)
   3. enum with multiple: true -> FormCheckboxGroup
   4. enum -> FormSelect (simple values without labels)
-  5. format: 'multiline' -> FormTextarea
-  6. format: 'range' (number/integer) -> FormRangeField
-  7. type: 'string' -> FormTextField
-  8. type: 'number' or 'integer' -> FormNumberField
-  9. type: 'boolean' -> FormToggle
-  10. oneOf with const/title (labeled options) -> FormSelect
+  5. oneOf with const/title (labeled options) -> FormSelect
+  6. format: 'multiline' -> FormTextarea
+  7. format: 'range' (number/integer) -> FormRangeField
+  8. type: 'string' -> FormTextField
+  9. type: 'number' or 'integer' -> FormNumberField
+  10. type: 'boolean' -> FormToggle
   11. type: 'array' -> FormArray
   12. fallback -> FormTextField
 -->
@@ -43,6 +43,7 @@
 	import FormCheckboxGroup from './FormCheckboxGroup.svelte';
 	import FormArray from './FormArray.svelte';
 	import { resolveFieldComponent } from '../../form/fieldRegistry.js';
+	import { resolvedTheme } from '../../stores/settingsStore.js';
 	import type { FieldSchema } from './types.js';
 	import { getSchemaOptions } from './types.js';
 
@@ -127,6 +128,12 @@
 			return 'select-enum';
 		}
 
+		// oneOf with labeled options (standard JSON Schema) or legacy options -> select
+		// Must be checked before basic type checks since oneOf schemas often have type: 'string'
+		if ((schema.oneOf && schema.oneOf.length > 0) || schema.options) {
+			return 'select-options';
+		}
+
 		// Multiline string -> textarea
 		if (schema.type === 'string' && schema.format === 'multiline') {
 			return 'textarea';
@@ -152,11 +159,6 @@
 			return 'toggle';
 		}
 
-		// oneOf with labeled options (standard JSON Schema) or legacy options -> select
-		if ((schema.oneOf && schema.oneOf.length > 0) || schema.options) {
-			return 'select-options';
-		}
-
 		// Array type
 		if (schema.type === 'array') {
 			return 'array';
@@ -226,6 +228,7 @@
 	>
 		{#if fieldType === 'registered' && registeredComponent}
 			<!-- Render registered custom component -->
+			<!-- darkTheme: use schema value if explicitly set, otherwise derive from resolved theme -->
 			<registeredComponent.component
 				id={fieldKey}
 				{value}
@@ -233,11 +236,12 @@
 				{required}
 				ariaDescribedBy={descriptionId}
 				height={schema.height as string | undefined}
-				darkTheme={schema.darkTheme as boolean | undefined}
+				darkTheme={schema.darkTheme ?? $resolvedTheme === 'dark'}
 				autoFormat={schema.autoFormat as boolean | undefined}
 				showToolbar={schema.showToolbar as boolean | undefined}
 				showStatusBar={schema.showStatusBar as boolean | undefined}
 				spellChecker={schema.spellChecker as boolean | undefined}
+				variables={schema.variables}
 				variableHints={schema.variableHints as string[] | undefined}
 				placeholderExample={schema.placeholderExample as string | undefined}
 				onChange={(val: unknown) => onChange(val)}

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:
@@ -34,6 +37,11 @@
 	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 } from '../../types/index.js';
+	import {
+		createTemplateAutocomplete,
+		createSimpleTemplateAutocomplete
+	} from './templateAutocomplete.js';
 
 	interface Props {
 		/** Field identifier */
@@ -48,7 +56,22 @@
 		darkTheme?: boolean;
 		/** Editor height in pixels or CSS value */
 		height?: string;
-		/** Available variable names for hints (optional) */
+		/**
+		 * 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;
+		/**
+		 * Simple variable names for basic hints (backward compatible).
+		 * Used when variableSchema is not provided.
+		 * @deprecated Use `variables.schema` instead
+		 */
 		variableHints?: string[];
 		/** Placeholder variable example for the hint */
 		placeholderExample?: string;
@@ -67,6 +90,8 @@
 		required = false,
 		darkTheme = false,
 		height = '250px',
+		variables,
+		variableSchema,
 		variableHints = [],
 		placeholderExample = 'Hello {{ name }}, your order #{{ order_id }} is ready!',
 		disabled = false,
@@ -74,6 +99,37 @@
 		onChange
 	}: Props = $props();
 
+	/**
+	 * Get the effective variable schema.
+	 * Prefers variables.schema, falls back to deprecated variableSchema prop.
+	 */
+	const effectiveVariableSchema = $derived.by<VariableSchema | undefined>(() => {
+		if (variables?.schema && Object.keys(variables.schema.variables).length > 0) {
+			return variables.schema;
+		}
+		if (variableSchema && Object.keys(variableSchema.variables).length > 0) {
+			return variableSchema;
+		}
+		return undefined;
+	});
+
+	/**
+	 * 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.
+	 * Prefers effectiveVariableSchema if available, falls back to variableHints.
+	 */
+	const displayVariables = $derived.by(() => {
+		if (effectiveVariableSchema) {
+			return Object.keys(effectiveVariableSchema.variables);
+		}
+		return variableHints;
+	});
+
 	/** Reference to the container element */
 	let containerRef: HTMLDivElement | undefined = $state(undefined);
 
@@ -86,10 +142,15 @@
 	/**
 	 * 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 +186,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 +219,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 +246,73 @@
 					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 extension when variables are available (and not disabled)
+		if (!disabled) {
+			if (effectiveVariableSchema) {
+				// Use full autocomplete with nested drilling
+				extensions.push(createTemplateAutocomplete(effectiveVariableSchema));
+			} else if (variableHints.length > 0) {
+				// Fallback to simple autocomplete with just variable names
+				extensions.push(createSimpleTemplateAutocomplete(variableHints));
+			}
+		}
+
 		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'
 					}
 				})
 			);
@@ -298,12 +412,12 @@
 		aria-label="Template editor"
 	></div>
 
-	<!-- Variable hints section (shown when variables are available) -->
-	{#if variableHints.length > 0}
+	<!-- 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"

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

@@ -1,3 +1,4 @@
+import type { VariableSchema, TemplateVariablesConfig } from '../../types/index.js';
 interface Props {
     /** Field identifier */
     id: string;
@@ -11,7 +12,22 @@ interface Props {
     darkTheme?: boolean;
     /** Editor height in pixels or CSS value */
     height?: string;
-    /** Available variable names for hints (optional) */
+    /**
+     * 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;
+    /**
+     * Simple variable names for basic hints (backward compatible).
+     * Used when variableSchema is not provided.
+     * @deprecated Use `variables.schema` instead
+     */
     variableHints?: string[];
     /** Placeholder variable example for the hint */
     placeholderExample?: string;

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, createSimpleTemplateAutocomplete } 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, createSimpleTemplateAutocomplete } from './templateAutocomplete.js';

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

@@ -0,0 +1,38 @@
+/**
+ * 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;
+/**
+ * Creates a simple autocomplete extension that triggers when user types {{
+ * and shows top-level variables only (no drilling).
+ * Used as a fallback when full variable schema is not available.
+ *
+ * @param variableHints - Simple array of variable names
+ * @returns A CodeMirror extension that provides basic autocomplete
+ */
+export declare function createSimpleTemplateAutocomplete(variableHints: string[]): Extension;