@d34dman/flowdrop 0.0.47 → 0.0.49

package/dist/components/form/templateAutocomplete.js

@@ -10,20 +10,20 @@
  *
  * @module components/form/templateAutocomplete
  */
-import { autocompletion } from "@codemirror/autocomplete";
-import { getChildVariables, getArrayIndexSuggestions, isArrayVariable, hasChildren } from "../../services/variableService.js";
+import { autocompletion } from '@codemirror/autocomplete';
+import { getChildVariables, getArrayIndexSuggestions, isArrayVariable, hasChildren } from '../../services/variableService.js';
 /**
  * Icon type hints for different variable types in autocomplete dropdown.
  */
 const TYPE_ICONS = {
-    string: "𝑆",
-    number: "#",
-    integer: "#",
-    float: "#",
-    boolean: "☑",
-    array: "[]",
-    object: "{}",
-    mixed: "⋯"
+    string: '𝑆',
+    number: '#',
+    integer: '#',
+    float: '#',
+    boolean: '☑',
+    array: '[]',
+    object: '{}',
+    mixed: '⋯'
 };
 /**
  * Extracts the current variable path being typed inside {{ }}.
@@ -43,12 +43,12 @@ function extractVariablePath(text, pos) {
     let searchPos = pos - 1;
     while (searchPos >= 0) {
         // Check for opening {{
-        if (text[searchPos] === "{" && searchPos > 0 && text[searchPos - 1] === "{") {
+        if (text[searchPos] === '{' && searchPos > 0 && text[searchPos - 1] === '{') {
             openBracePos = searchPos - 1;
             break;
         }
         // Check for closing }} - means we're outside an expression
-        if (text[searchPos] === "}" && searchPos > 0 && text[searchPos - 1] === "}") {
+        if (text[searchPos] === '}' && searchPos > 0 && text[searchPos - 1] === '}') {
             return null;
         }
         searchPos--;
@@ -65,7 +65,8 @@ function extractVariablePath(text, pos) {
     const content = text.slice(contentStart, pos).trimStart();
     return {
         path: content,
-        startPos: contentStart + (text.slice(contentStart, pos).length - text.slice(contentStart, pos).trimStart().length),
+        startPos: contentStart +
+            (text.slice(contentStart, pos).length - text.slice(contentStart, pos).trimStart().length),
         isInsideExpression: true
     };
 }
@@ -77,35 +78,35 @@ function extractVariablePath(text, pos) {
  */
 function getCompletionType(path) {
     // Empty or only whitespace - show top-level variables
-    if (path.trim() === "") {
-        return { type: "top-level" };
+    if (path.trim() === '') {
+        return { type: 'top-level' };
     }
     // Ends with [ - show array indices
-    if (path.endsWith("[")) {
+    if (path.endsWith('[')) {
         const parentPath = path.slice(0, -1);
-        return { type: "array-index", parentPath };
+        return { type: 'array-index', parentPath };
     }
     // Ends with . - show child properties
-    if (path.endsWith(".")) {
+    if (path.endsWith('.')) {
         const parentPath = path.slice(0, -1);
-        return { type: "property", parentPath };
+        return { type: 'property', parentPath };
     }
     // Otherwise, we're typing a variable name - show matching options
-    const lastDotIndex = path.lastIndexOf(".");
-    const lastBracketIndex = path.lastIndexOf("[");
+    const lastDotIndex = path.lastIndexOf('.');
+    const lastBracketIndex = path.lastIndexOf('[');
     const lastSeparator = Math.max(lastDotIndex, lastBracketIndex);
     if (lastSeparator === -1) {
         // Typing at top level
-        return { type: "top-level" };
+        return { type: 'top-level' };
     }
     // Extract parent path based on separator
     if (lastDotIndex > lastBracketIndex) {
         // Last separator was a dot
-        return { type: "property", parentPath: path.slice(0, lastDotIndex) };
+        return { type: 'property', parentPath: path.slice(0, lastDotIndex) };
     }
     else {
         // Last separator was a bracket
-        return { type: "array-index", parentPath: path.slice(0, lastBracketIndex) };
+        return { type: 'array-index', parentPath: path.slice(0, lastBracketIndex) };
     }
 }
 /**
@@ -115,22 +116,22 @@ function getCompletionType(path) {
  * @param prefix - Prefix to add to the completion label
  * @returns A CodeMirror Completion object
  */
-function variableToCompletion(variable, prefix = "") {
+function variableToCompletion(variable, prefix = '') {
     const icon = TYPE_ICONS[variable.type] ?? TYPE_ICONS.mixed;
     const hasChildProps = variable.properties && Object.keys(variable.properties).length > 0;
-    const isArray = variable.type === "array";
+    const isArray = variable.type === 'array';
     // Add indicator if variable can be drilled into
-    let suffix = "";
+    let suffix = '';
     if (hasChildProps)
-        suffix = ".";
+        suffix = '.';
     else if (isArray)
-        suffix = "[";
+        suffix = '[';
     return {
         label: `${prefix}${variable.name}`,
-        displayLabel: `${icon} ${variable.label ?? variable.name}${suffix ? " " + suffix : ""}`,
+        displayLabel: `${icon} ${variable.label ?? variable.name}${suffix ? ' ' + suffix : ''}`,
         detail: variable.type,
         info: variable.description,
-        type: "variable",
+        type: 'variable',
         boost: hasChildProps || isArray ? 1 : 0 // Boost drillable variables
     };
 }
@@ -149,7 +150,7 @@ function createTemplateCompletionSource(schema) {
         if (!pathInfo) {
             // Check if user just typed {{
             const beforeCursor = text.slice(Math.max(0, pos - 2), pos);
-            if (beforeCursor === "{{") {
+            if (beforeCursor === '{{') {
                 // Show top-level variables
                 const options = Object.values(schema.variables).map((v) => variableToCompletion(v));
                 return {
@@ -165,42 +166,42 @@ function createTemplateCompletionSource(schema) {
         let options = [];
         let from = pos;
         switch (completionType.type) {
-            case "top-level": {
+            case 'top-level': {
                 // Show all top-level variables
                 const currentWord = path.trim();
                 options = Object.values(schema.variables)
-                    .filter((v) => currentWord === "" || v.name.toLowerCase().startsWith(currentWord.toLowerCase()))
+                    .filter((v) => currentWord === '' || v.name.toLowerCase().startsWith(currentWord.toLowerCase()))
                     .map((v) => variableToCompletion(v));
                 // Calculate from position for replacement
                 from = startPos + (path.length - path.trimStart().length);
                 break;
             }
-            case "property": {
+            case 'property': {
                 // Show child properties of the parent
                 const children = getChildVariables(schema, completionType.parentPath);
-                const currentWord = path.slice(path.lastIndexOf(".") + 1);
+                const currentWord = path.slice(path.lastIndexOf('.') + 1);
                 options = children
-                    .filter((v) => currentWord === "" || v.name.toLowerCase().startsWith(currentWord.toLowerCase()))
+                    .filter((v) => currentWord === '' || v.name.toLowerCase().startsWith(currentWord.toLowerCase()))
                     .map((v) => variableToCompletion(v));
                 // From should be right after the last dot
-                from = startPos + path.lastIndexOf(".") + 1;
+                from = startPos + path.lastIndexOf('.') + 1;
                 break;
             }
-            case "array-index": {
+            case 'array-index': {
                 // Check if the parent is actually an array
                 if (isArrayVariable(schema, completionType.parentPath)) {
                     const indices = getArrayIndexSuggestions(5);
-                    const currentIndex = path.slice(path.lastIndexOf("[") + 1);
+                    const currentIndex = path.slice(path.lastIndexOf('[') + 1);
                     options = indices
-                        .filter((idx) => currentIndex === "" || idx.startsWith(currentIndex))
+                        .filter((idx) => currentIndex === '' || idx.startsWith(currentIndex))
                         .map((idx) => ({
                         label: idx,
-                        displayLabel: idx === "*]" ? "* (all items)" : `[${idx}`,
-                        detail: idx === "*]" ? "Iterate all items" : `Index ${idx.slice(0, -1)}`,
-                        type: "keyword"
+                        displayLabel: idx === '*]' ? '* (all items)' : `[${idx}`,
+                        detail: idx === '*]' ? 'Iterate all items' : `Index ${idx.slice(0, -1)}`,
+                        type: 'keyword'
                     }));
                     // From should be right after the [
-                    from = startPos + path.lastIndexOf("[") + 1;
+                    from = startPos + path.lastIndexOf('[') + 1;
                 }
                 break;
             }
@@ -234,13 +235,13 @@ export function createTemplateAutocomplete(schema) {
         override: [createTemplateCompletionSource(schema)],
         activateOnTyping: true,
         defaultKeymap: true,
-        optionClass: () => "cm-template-autocomplete-option",
+        optionClass: () => 'cm-template-autocomplete-option',
         icons: false, // We use our own icons in displayLabel
         addToOptions: [
             {
                 render: (completion) => {
-                    const el = document.createElement("span");
-                    el.className = "cm-template-autocomplete-info";
+                    const el = document.createElement('span');
+                    el.className = 'cm-template-autocomplete-info';
                     if (completion.info) {
                         el.textContent = String(completion.info);
                     }
@@ -251,59 +252,3 @@ export function createTemplateAutocomplete(schema) {
         ]
     });
 }
-/**
- * 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 function createSimpleTemplateAutocomplete(variableHints) {
-    const completionSource = (context) => {
-        const { state, pos } = context;
-        const text = state.doc.toString();
-        // Check if we're inside a {{ }} expression
-        const pathInfo = extractVariablePath(text, pos);
-        if (!pathInfo) {
-            // Check if user just typed {{
-            const beforeCursor = text.slice(Math.max(0, pos - 2), pos);
-            if (beforeCursor === "{{") {
-                const options = variableHints.map((hint) => ({
-                    label: hint,
-                    displayLabel: `⋯ ${hint}`,
-                    type: "variable"
-                }));
-                return {
-                    from: pos,
-                    options,
-                    validFor: /^[\w]*$/
-                };
-            }
-            return null;
-        }
-        // Filter based on current input
-        const currentWord = pathInfo.path.trim();
-        const options = variableHints
-            .filter((hint) => currentWord === "" || hint.toLowerCase().startsWith(currentWord.toLowerCase()))
-            .map((hint) => ({
-            label: hint,
-            displayLabel: `⋯ ${hint}`,
-            type: "variable"
-        }));
-        if (options.length === 0) {
-            return null;
-        }
-        return {
-            from: pathInfo.startPos + (pathInfo.path.length - pathInfo.path.trimStart().length),
-            options,
-            validFor: /^[\w]*$/
-        };
-    };
-    return autocompletion({
-        override: [completionSource],
-        activateOnTyping: true,
-        defaultKeymap: true,
-        icons: false
-    });
-}

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

@@ -231,12 +231,6 @@ export interface TemplateEditorFieldProps extends BaseFieldProps {
      * @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;
     /** Callback when value changes */

package/dist/components/nodes/TerminalNode.svelte

@@ -14,6 +14,7 @@
 	import Icon from '@iconify/svelte';
 	import { getDataTypeColor, getCategoryColorToken } from '../../utils/colors.js';
 	import { getNodeIcon } from '../../utils/icons.js';
+	import { getCircleHandlePosition } from '../../utils/handlePositioning.js';
 
 	/**
 	 * Terminal node variant types
@@ -316,13 +317,14 @@
 	<div class="flowdrop-terminal-node__circle-wrapper">
 		<!-- Input Handles (for end/exit variants) -->
 		{#if showInputs}
-			{#each inputPorts as port (port.id)}
+			{#each inputPorts as port, index (port.id)}
+				{@const pos = getCircleHandlePosition(index, inputPorts.length, 'left')}
 				<Handle
 					type="target"
 					position={Position.Left}
 					style="--fd-handle-fill: {getDataTypeColor(
 						port.dataType
-					)}; --fd-handle-border-color: var(--fd-handle-border); top: 40px; transform: translateY(-50%); margin-left: -10px; z-index: 30;"
+					)}; --fd-handle-border-color: var(--fd-handle-border); left: {pos.left}px; top: {pos.top}px; transform: translate(-50%, -50%); z-index: 30;"
 					id={`${props.data.nodeId}-input-${port.id}`}
 				/>
 			{/each}
@@ -337,14 +339,15 @@
 
 		<!-- Output Handles (for start variant) -->
 		{#if showOutputs}
-			{#each outputPorts as port (port.id)}
+			{#each outputPorts as port, index (port.id)}
+				{@const pos = getCircleHandlePosition(index, outputPorts.length, 'right')}
 				<Handle
 					type="source"
 					position={Position.Right}
 					id={`${props.data.nodeId}-output-${port.id}`}
 					style="--fd-handle-fill: {getDataTypeColor(
 						port.dataType
-					)}; --fd-handle-border-color: var(--fd-handle-border); top: 40px; transform: translateY(-50%); margin-right: -10px; z-index: 30;"
+					)}; --fd-handle-border-color: var(--fd-handle-border); left: {pos.left}px; top: {pos.top}px; transform: translate(-50%, -50%); z-index: 30;"
 				/>
 			{/each}
 		{/if}
@@ -614,25 +617,34 @@
 		}
 	}
 
-	/* Handle: 20px/12px from base.css; position offsets for 20px handle */
-	:global(.flowdrop-terminal-node__circle-wrapper .svelte-flow__handle),
-	:global(.svelte-flow__node-terminal .svelte-flow__handle) {
+	/* Handle styles - positioned along circle arc using cos/sin */
+	:global(.flowdrop-terminal-node__circle-wrapper .svelte-flow__handle) {
+		width: 16px !important;
+		height: 16px !important;
+		border-radius: 50% !important;
+		border: 2px solid var(--fd-handle-border) !important;
+		transition: all var(--fd-transition-normal) !important;
+		cursor: pointer !important;
 		z-index: 20 !important;
 		pointer-events: auto !important;
 	}
 
-	:global(.flowdrop-terminal-node__circle-wrapper .svelte-flow__handle-left),
-	:global(.svelte-flow__node-terminal .svelte-flow__handle-left) {
-		left: -10px !important;
+	:global(.flowdrop-terminal-node__circle-wrapper .svelte-flow__handle:hover) {
+		transform: translate(-50%, -50%) scale(1.2) !important;
+	}
+
+	:global(.flowdrop-terminal-node__circle-wrapper .svelte-flow__handle:focus) {
+		outline: 2px solid var(--fd-ring) !important;
+		outline-offset: 2px !important;
 	}
 
-	:global(.flowdrop-terminal-node__circle-wrapper .svelte-flow__handle-right),
-	:global(.svelte-flow__node-terminal .svelte-flow__handle-right) {
-		right: -10px !important;
+	/* Also keep node-level handle styles for fallback */
+	:global(.svelte-flow__node-terminal .svelte-flow__handle) {
+		z-index: 20 !important;
+		pointer-events: auto !important;
 	}
 
-	:global(.flowdrop-terminal-node__circle-wrapper .svelte-flow__handle:hover),
 	:global(.svelte-flow__node-terminal .svelte-flow__handle:hover) {
-		transform: translateY(-50%) scale(1.2) !important;
+		transform: translate(-50%, -50%) scale(1.2) !important;
 	}
 </style>

package/dist/components/nodes/ToolNode.svelte

@@ -230,7 +230,7 @@
 	.flowdrop-tool-node {
 		position: relative;
 		background-color: var(--fd-card);
-		border: 1.5px solid var(--fd-node-border);
+		border: 1.5px solid var(--fd-tool-node-color);
 		border-radius: var(--fd-radius-xl);
 		width: var(--fd-node-default-width);
 		min-height: var(--fd-node-tool-min-height);
@@ -246,7 +246,7 @@
 
 	.flowdrop-tool-node:hover {
 		box-shadow: var(--fd-shadow-lg);
-		border-color: var(--fd-node-border-hover);
+		border-color: var(--fd-tool-node-color);
 	}
 
 	.flowdrop-tool-node--selected {
@@ -282,16 +282,14 @@
 		/* Light mode: mix tool color with white (95%) for subtle tint */
 		background-color: color-mix(in srgb, var(--fd-tool-node-color) 5%, white);
 		border-radius: var(--fd-radius-xl);
-		/* Light mode: mix tool color with white (40%) for border */
-		border: 1px solid color-mix(in srgb, var(--fd-tool-node-color) 40%, white);
+		border: none;
 	}
 
 	/* Dark mode header styles */
 	:global([data-theme='dark']) .flowdrop-tool-node__header {
 		/* Dark mode: mix tool color with dark background (15%) for subtle tint */
 		background-color: color-mix(in srgb, var(--fd-tool-node-color) 15%, #1a1a1e);
-		/* Dark mode: mix tool color with dark background (35%) for border */
-		border-color: color-mix(in srgb, var(--fd-tool-node-color) 35%, #1a1a1e);
+		border: none;
 	}
 
 	.flowdrop-tool-node__header-content {

package/dist/services/apiVariableService.d.ts

@@ -0,0 +1,116 @@
+/**
+ * API Variable Service
+ * Handles fetching template variable schemas from REST endpoints at runtime.
+ * Enables dynamic variable suggestions from backend APIs for template editors.
+ *
+ * @module services/apiVariableService
+ */
+import type { VariableSchema, ApiVariablesConfig, AuthProvider } from '../types/index.js';
+/**
+ * Context for variable API requests
+ */
+interface VariableContext {
+    /** Workflow ID */
+    workflowId?: string;
+    /** Node instance ID */
+    nodeId: string;
+}
+/**
+ * Result of a variable schema fetch operation
+ */
+export interface ApiVariableResult {
+    /** Whether the fetch was successful */
+    success: boolean;
+    /** The fetched variable schema (if successful) */
+    schema?: VariableSchema;
+    /** Error message (if failed) */
+    error?: string;
+    /** Whether the schema was loaded from cache */
+    fromCache?: boolean;
+}
+/**
+ * Default cache TTL in milliseconds (5 minutes)
+ */
+export declare const DEFAULT_VARIABLE_CACHE_TTL: number;
+/**
+ * Replaces {workflowId} and {nodeId} placeholders in URL template.
+ *
+ * @param template - The URL template string
+ * @param context - The variable context with workflowId and nodeId
+ * @returns The resolved URL with placeholders replaced
+ *
+ * @example
+ * ```typescript
+ * const url = "/api/variables/{workflowId}/{nodeId}";
+ * const context = { workflowId: "wf-123", nodeId: "node-456" };
+ * resolveEndpointUrl(url, context);
+ * // Returns "/api/variables/wf-123/node-456"
+ * ```
+ */
+export declare function resolveEndpointUrl(template: string, context: VariableContext): string;
+/**
+ * Fetches variable schema from a backend API endpoint.
+ *
+ * @param workflowId - The workflow ID (optional)
+ * @param nodeId - The node instance ID
+ * @param config - The API variables configuration
+ * @param authProvider - Optional auth provider for auth headers
+ * @returns A promise that resolves to the variable schema result
+ *
+ * @example
+ * ```typescript
+ * const config: ApiVariablesConfig = {
+ *   endpoint: {
+ *     url: "/api/variables/{workflowId}/{nodeId}",
+ *     method: "GET"
+ *   },
+ *   cacheTtl: 300000
+ * };
+ *
+ * const result = await fetchVariableSchema("wf-123", "node-456", config);
+ * if (result.success && result.schema) {
+ *   // Use the fetched variable schema
+ * }
+ * ```
+ */
+export declare function fetchVariableSchema(workflowId: string | undefined, nodeId: string, config: ApiVariablesConfig, authProvider?: AuthProvider): Promise<ApiVariableResult>;
+/**
+ * Clears the variable schema cache.
+ * Can optionally clear only entries matching a specific pattern.
+ *
+ * @param pattern - Optional pattern to match cache keys (e.g., workflow ID or node ID)
+ *
+ * @example
+ * ```typescript
+ * // Clear all cache
+ * clearVariableCache();
+ *
+ * // Clear cache for a specific workflow
+ * clearVariableCache("wf-123");
+ *
+ * // Clear cache for a specific node
+ * clearVariableCache("node-456");
+ * ```
+ */
+export declare function clearVariableCache(pattern?: string): void;
+/**
+ * Invalidates a specific variable cache entry.
+ *
+ * @param workflowId - The workflow ID (optional)
+ * @param nodeId - The node instance ID
+ */
+export declare function invalidateVariableCache(workflowId: string | undefined, nodeId: string): void;
+/**
+ * Gets the current cache size (number of entries).
+ *
+ * @returns The number of cached variable schemas
+ */
+export declare function getVariableCacheSize(): number;
+/**
+ * Gets all cache keys currently stored.
+ * Useful for debugging and monitoring.
+ *
+ * @returns Array of cache keys
+ */
+export declare function getVariableCacheKeys(): string[];
+export {};