@d34dman/flowdrop 0.0.29 → 0.0.31

package/dist/components/App.svelte

@@ -14,6 +14,7 @@
 	import ConfigPanel from './ConfigPanel.svelte';
 	import Navbar from './Navbar.svelte';
 	import { api, setEndpointConfig } from '../services/api.js';
+	import { EnhancedFlowDropApiClient } from '../api/enhanced-client.js';
 	import type {
 		NodeMetadata,
 		Workflow,
@@ -122,6 +123,12 @@
 	let error = $state<string | null>(null);
 	let endpointConfig = $state<EndpointConfig | null>(null);
 
+	/**
+	 * Enhanced API client with authProvider support
+	 * Used when authProvider is provided; otherwise falls back to legacy api service
+	 */
+	let apiClient = $state<EnhancedFlowDropApiClient | null>(null);
+
 	// ConfigSidebar state
 	let isConfigSidebarOpen = $state(false);
 	let selectedNodeId = $state<string | null>(null);
@@ -172,7 +179,7 @@
 	 * Fetch node types from the server
 	 *
 	 * If propNodes is provided, uses those instead of fetching from API.
-	 * This fixes the bug where propNodes was ignored.
+	 * Uses enhanced API client with authProvider support when available.
 	 */
 	async function fetchNodeTypes(): Promise<void> {
 		// If nodes were provided as props, use them directly (skip API fetch)
@@ -186,7 +193,13 @@
 		try {
 			error = null;
 
-			const fetchedNodes = await api.nodes.getNodes();
+			// Use enhanced client with authProvider if available, otherwise fall back to legacy api
+			let fetchedNodes: NodeMetadata[];
+			if (apiClient) {
+				fetchedNodes = await apiClient.getAvailableNodes();
+			} else {
+				fetchedNodes = await api.nodes.getNodes();
+			}
 
 			nodes = fetchedNodes;
 			error = null;
@@ -256,7 +269,7 @@
 	}
 
 	/**
-	 * Initialize API endpoints
+	 * Initialize API endpoints and create enhanced client if authProvider is available
 	 * Priority: propEndpointConfig > existingConfig > apiBaseUrl > default
 	 */
 	async function initializeApiEndpoints(): Promise<void> {
@@ -264,6 +277,11 @@
 		if (propEndpointConfig) {
 			setEndpointConfig(propEndpointConfig);
 			endpointConfig = propEndpointConfig;
+
+			// Create enhanced API client with authProvider support if provided
+			if (authProvider) {
+				apiClient = new EnhancedFlowDropApiClient(propEndpointConfig, authProvider);
+			}
 			return;
 		}
 
@@ -274,6 +292,11 @@
 		// If config already exists and no override provided, use existing
 		if (existingConfig && !apiBaseUrl) {
 			endpointConfig = existingConfig;
+
+			// Create enhanced API client with authProvider support if provided
+			if (authProvider) {
+				apiClient = new EnhancedFlowDropApiClient(existingConfig, authProvider);
+			}
 			return;
 		}
 
@@ -296,6 +319,11 @@
 		setEndpointConfig(config);
 		// Store the configuration for passing to WorkflowEditor
 		endpointConfig = config;
+
+		// Create enhanced API client with authProvider support if provided
+		if (authProvider) {
+			apiClient = new EnhancedFlowDropApiClient(config, authProvider);
+		}
 	}
 
 	/**
@@ -357,6 +385,7 @@
 	 * Save workflow - exposed API function
 	 *
 	 * Integrates with event handlers for enterprise customization.
+	 * Uses enhanced API client with authProvider support when available.
 	 */
 	async function saveWorkflow(): Promise<void> {
 		// Wait for any pending DOM updates before saving
@@ -382,8 +411,7 @@
 		const loadingToast = features.showToasts ? apiToasts.loading('Saving workflow') : null;
 
 		try {
-			// Import necessary modules
-			const { workflowApi } = await import('../services/api.js');
+			// Import uuid for new workflow ID generation
 			const { v4: uuidv4 } = await import('uuid');
 
 			// Determine the workflow ID
@@ -408,7 +436,27 @@
 				}
 			};
 
-			const savedWorkflow = await workflowApi.saveWorkflow(finalWorkflow);
+			// Use enhanced client with authProvider if available, otherwise fall back to legacy api
+			let savedWorkflow: Workflow;
+			if (apiClient) {
+				// Check if this is an existing workflow (non-UUID ID indicates existing)
+				const isExistingWorkflow =
+					finalWorkflow.id &&
+					finalWorkflow.id.length > 0 &&
+					!finalWorkflow.id.match(
+						/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
+					);
+
+				if (isExistingWorkflow) {
+					savedWorkflow = await apiClient.updateWorkflow(finalWorkflow.id, finalWorkflow);
+				} else {
+					savedWorkflow = await apiClient.saveWorkflow(finalWorkflow);
+				}
+			} else {
+				// Fall back to legacy workflowApi
+				const { workflowApi } = await import('../services/api.js');
+				savedWorkflow = await workflowApi.saveWorkflow(finalWorkflow);
+			}
 
 			// Update the workflow ID if it changed (new workflow)
 			// Keep our current workflow state, only update ID and metadata from backend

package/dist/components/NodeSidebar.svelte

@@ -25,18 +25,27 @@
 	let categories = $derived(getCategories());
 
 	/**
-	 * Get all unique categories from node types
+	 * Get all unique categories from node types, preserving API order
+	 * Categories appear in the order their first node appears in the API response
 	 */
 	function getCategories(): NodeCategory[] {
 		const nodes = props.nodes || [];
 		if (nodes.length === 0) return [];
-		const categories = new SvelteSet<NodeCategory>();
-		nodes.forEach((node) => categories.add(node.category));
-		return Array.from(categories).sort();
+		// Use a Set to track uniqueness while preserving insertion order
+		const seen = new SvelteSet<NodeCategory>();
+		const orderedCategories: NodeCategory[] = [];
+		for (const node of nodes) {
+			if (!seen.has(node.category)) {
+				seen.add(node.category);
+				orderedCategories.push(node.category);
+			}
+		}
+		return orderedCategories;
 	}
 
 	/**
 	 * Filter node types based on search query and selected category
+	 * Preserves the API order - no client-side sorting applied
 	 */
 	function getFilteredNodes(): NodeMetadata[] {
 		// Use actual node types from props
@@ -58,8 +67,8 @@
 			);
 		}
 
-		// Create a new array and sort it to avoid mutating the original
-		return [...filtered].sort((a, b) => a.name.localeCompare(b.name));
+		// Return filtered results preserving API order
+		return filtered;
 	}
 
 	/**
@@ -149,12 +158,11 @@
 
 	/**
 	 * Get node types for category
+	 * Preserves the API order - no client-side sorting applied
 	 */
 	function getNodesForCategory(category: NodeCategory): NodeMetadata[] {
 		const nodes = props.nodes || [];
-		return [...nodes]
-			.filter((node) => node.category === category)
-			.sort((a, b) => a.name.localeCompare(b.name));
+		return nodes.filter((node) => node.category === category);
 	}
 
 	/**

package/dist/components/SchemaForm.svelte

@@ -50,10 +50,10 @@
 -->
 
 <script lang="ts">
-	import Icon from "@iconify/svelte";
-	import type { ConfigSchema } from "../types/index.js";
-	import { FormField } from "./form/index.js";
-	import type { FieldSchema } from "./form/index.js";
+	import Icon from '@iconify/svelte';
+	import type { ConfigSchema } from '../types/index.js';
+	import { FormField } from './form/index.js';
+	import type { FieldSchema } from './form/index.js';
 
 	/**
 	 * Props interface for SchemaForm component
@@ -132,13 +132,13 @@
 		values = {},
 		onChange,
 		showActions = false,
-		saveLabel = "Save",
-		cancelLabel = "Cancel",
+		saveLabel = 'Save',
+		cancelLabel = 'Cancel',
 		onSave,
 		onCancel,
 		loading = false,
 		disabled = false,
-		class: className = ""
+		class: className = ''
 	}: Props = $props();
 
 	/**
@@ -182,7 +182,7 @@
 	 */
 	function handleFieldChange(key: string, value: unknown): void {
 		formValues[key] = value;
-		
+
 		// Notify parent of the change
 		if (onChange) {
 			onChange({ ...formValues });
@@ -199,22 +199,22 @@
 		}
 
 		// Collect all form values including hidden fields
-		const form = document.querySelector(".schema-form");
+		const form = document.querySelector('.schema-form');
 		const updatedValues: Record<string, unknown> = { ...formValues };
 
 		if (form) {
-			const inputs = form.querySelectorAll("input, select, textarea");
+			const inputs = form.querySelectorAll('input, select, textarea');
 			inputs.forEach((input: Element) => {
 				const inputEl = input as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
 				if (inputEl.id) {
-					if (inputEl instanceof HTMLInputElement && inputEl.type === "checkbox") {
+					if (inputEl instanceof HTMLInputElement && inputEl.type === 'checkbox') {
 						updatedValues[inputEl.id] = inputEl.checked;
 					} else if (
 						inputEl instanceof HTMLInputElement &&
-						(inputEl.type === "number" || inputEl.type === "range")
+						(inputEl.type === 'number' || inputEl.type === 'range')
 					) {
 						updatedValues[inputEl.id] = inputEl.value ? Number(inputEl.value) : inputEl.value;
-					} else if (inputEl instanceof HTMLInputElement && inputEl.type === "hidden") {
+					} else if (inputEl instanceof HTMLInputElement && inputEl.type === 'hidden') {
 						// Parse hidden field values that might be JSON
 						try {
 							const parsed = JSON.parse(inputEl.value);
@@ -234,7 +234,7 @@
 		if (values && schema?.properties) {
 			Object.entries(schema.properties).forEach(
 				([key, property]: [string, Record<string, unknown>]) => {
-					if (property.format === "hidden" && !(key in updatedValues) && key in values) {
+					if (property.format === 'hidden' && !(key in updatedValues) && key in values) {
 						updatedValues[key] = values[key];
 					}
 				}

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

@@ -1,4 +1,4 @@
-import type { ConfigSchema } from "../types/index.js";
+import type { ConfigSchema } from '../types/index.js';
 /**
  * Props interface for SchemaForm component
  */

package/dist/components/WorkflowEditor.svelte

@@ -37,6 +37,7 @@
 	} from '../helpers/workflowEditorHelper.js';
 	import type { NodeExecutionInfo } from '../types/index.js';
 	import { areNodeArraysEqual, areEdgeArraysEqual, throttle } from '../utils/performanceUtils.js';
+	import { Toaster } from 'svelte-5-french-toast';
 
 	interface Props {
 		nodes?: NodeMetadata[];
@@ -457,6 +458,9 @@
 	</div>
 </SvelteFlowProvider>
 
+<!-- Toast notifications container -->
+<Toaster position="bottom-center" />
+
 <style>
 	.flowdrop-workflow-editor {
 		display: flex;

package/dist/components/form/FormFieldLight.svelte

@@ -32,17 +32,17 @@
 -->
 
 <script lang="ts">
-	import FormFieldWrapper from "./FormFieldWrapper.svelte";
-	import FormTextField from "./FormTextField.svelte";
-	import FormTextarea from "./FormTextarea.svelte";
-	import FormNumberField from "./FormNumberField.svelte";
-	import FormRangeField from "./FormRangeField.svelte";
-	import FormToggle from "./FormToggle.svelte";
-	import FormSelect from "./FormSelect.svelte";
-	import FormCheckboxGroup from "./FormCheckboxGroup.svelte";
-	import FormArray from "./FormArray.svelte";
-	import { resolveFieldComponent } from "../../form/fieldRegistry.js";
-	import type { FieldSchema, FieldOption } from "./types.js";
+	import FormFieldWrapper from './FormFieldWrapper.svelte';
+	import FormTextField from './FormTextField.svelte';
+	import FormTextarea from './FormTextarea.svelte';
+	import FormNumberField from './FormNumberField.svelte';
+	import FormRangeField from './FormRangeField.svelte';
+	import FormToggle from './FormToggle.svelte';
+	import FormSelect from './FormSelect.svelte';
+	import FormCheckboxGroup from './FormCheckboxGroup.svelte';
+	import FormArray from './FormArray.svelte';
+	import { resolveFieldComponent } from '../../form/fieldRegistry.js';
+	import type { FieldSchema, FieldOption } from './types.js';
 
 	interface Props {
 		/** Unique key/id for the field */
@@ -89,79 +89,79 @@
 	const fieldType = $derived.by(() => {
 		// If a custom component is registered, use it
 		if (registeredComponent) {
-			return "registered";
+			return 'registered';
 		}
 
 		// Hidden fields should not be rendered
-		if (schema.format === "hidden") {
-			return "hidden";
+		if (schema.format === 'hidden') {
+			return 'hidden';
 		}
 
 		// Check for heavy editor formats that need registration
-		if (schema.format === "json" || schema.format === "code") {
-			return "code-editor-fallback";
+		if (schema.format === 'json' || schema.format === 'code') {
+			return 'code-editor-fallback';
 		}
 
-		if (schema.format === "markdown") {
-			return "markdown-editor-fallback";
+		if (schema.format === 'markdown') {
+			return 'markdown-editor-fallback';
 		}
 
-		if (schema.format === "template") {
-			return "template-editor-fallback";
+		if (schema.format === 'template') {
+			return 'template-editor-fallback';
 		}
 
 		// Object type without specific format would use code editor
-		if (schema.type === "object" && !schema.format) {
-			return "code-editor-fallback";
+		if (schema.type === 'object' && !schema.format) {
+			return 'code-editor-fallback';
 		}
 
 		// Enum with multiple selection -> checkbox group
 		if (schema.enum && schema.multiple) {
-			return "checkbox-group";
+			return 'checkbox-group';
 		}
 
 		// Enum with single selection -> select
 		if (schema.enum) {
-			return "select-enum";
+			return 'select-enum';
 		}
 
 		// Multiline string -> textarea
-		if (schema.type === "string" && schema.format === "multiline") {
-			return "textarea";
+		if (schema.type === 'string' && schema.format === 'multiline') {
+			return 'textarea';
 		}
 
 		// Range slider for number/integer with format: "range"
-		if ((schema.type === "number" || schema.type === "integer") && schema.format === "range") {
-			return "range";
+		if ((schema.type === 'number' || schema.type === 'integer') && schema.format === 'range') {
+			return 'range';
 		}
 
 		// String -> text field
-		if (schema.type === "string") {
-			return "text";
+		if (schema.type === 'string') {
+			return 'text';
 		}
 
 		// Number or integer -> number field
-		if (schema.type === "number" || schema.type === "integer") {
-			return "number";
+		if (schema.type === 'number' || schema.type === 'integer') {
+			return 'number';
 		}
 
 		// Boolean -> toggle
-		if (schema.type === "boolean") {
-			return "toggle";
+		if (schema.type === 'boolean') {
+			return 'toggle';
 		}
 
 		// Select type or has options -> select
-		if (schema.type === "select" || schema.options) {
-			return "select-options";
+		if (schema.type === 'select' || schema.options) {
+			return 'select-options';
 		}
 
 		// Array type
-		if (schema.type === "array") {
-			return "array";
+		if (schema.type === 'array') {
+			return 'array';
 		}
 
 		// Fallback to text
-		return "text";
+		return 'text';
 	});
 
 	/**
@@ -183,7 +183,7 @@
 	/**
 	 * Get current value as the appropriate type
 	 */
-	const stringValue = $derived(String(value ?? ""));
+	const stringValue = $derived(String(value ?? ''));
 	const numberValue = $derived(value as number | string);
 	const booleanValue = $derived(Boolean(value ?? schema.default ?? false));
 	const arrayValue = $derived.by((): string[] => {
@@ -204,19 +204,19 @@
 	 */
 	function getEditorHint(editorType: string): string {
 		switch (editorType) {
-			case "code-editor-fallback":
+			case 'code-editor-fallback':
 				return "Code editor requires: import { registerCodeEditorField } from '@d34dman/flowdrop/form/code'; registerCodeEditorField();";
-			case "markdown-editor-fallback":
+			case 'markdown-editor-fallback':
 				return "Markdown editor requires: import { registerMarkdownEditorField } from '@d34dman/flowdrop/form/markdown'; registerMarkdownEditorField();";
-			case "template-editor-fallback":
+			case 'template-editor-fallback':
 				return "Template editor requires: import { registerTemplateEditorField } from '@d34dman/flowdrop/form/code'; registerTemplateEditorField();";
 			default:
-				return "This field type requires additional registration.";
+				return 'This field type requires additional registration.';
 		}
 	}
 </script>
 
-{#if fieldType !== "hidden"}
+{#if fieldType !== 'hidden'}
 	<FormFieldWrapper
 		id={fieldKey}
 		label={fieldLabel}
@@ -224,12 +224,12 @@
 		description={schema.title ? schema.description : undefined}
 		{animationDelay}
 	>
-		{#if fieldType === "registered" && registeredComponent}
+		{#if fieldType === 'registered' && registeredComponent}
 			<!-- Render registered custom component -->
 			<registeredComponent.component
 				id={fieldKey}
 				{value}
-				placeholder={schema.placeholder ?? ""}
+				placeholder={schema.placeholder ?? ''}
 				{required}
 				ariaDescribedBy={descriptionId}
 				height={schema.height as string | undefined}
@@ -242,7 +242,7 @@
 				placeholderExample={schema.placeholderExample as string | undefined}
 				onChange={(val: unknown) => onChange(val)}
 			/>
-		{:else if fieldType === "checkbox-group"}
+		{:else if fieldType === 'checkbox-group'}
 			<FormCheckboxGroup
 				id={fieldKey}
 				value={arrayValue}
@@ -250,7 +250,7 @@
 				ariaDescribedBy={descriptionId}
 				onChange={(val) => onChange(val)}
 			/>
-		{:else if fieldType === "select-enum"}
+		{:else if fieldType === 'select-enum'}
 			<FormSelect
 				id={fieldKey}
 				value={stringValue}
@@ -259,36 +259,36 @@
 				ariaDescribedBy={descriptionId}
 				onChange={(val) => onChange(val)}
 			/>
-		{:else if fieldType === "textarea"}
+		{:else if fieldType === 'textarea'}
 			<FormTextarea
 				id={fieldKey}
 				value={stringValue}
-				placeholder={schema.placeholder ?? ""}
+				placeholder={schema.placeholder ?? ''}
 				{required}
 				ariaDescribedBy={descriptionId}
 				onChange={(val) => onChange(val)}
 			/>
-		{:else if fieldType === "text"}
+		{:else if fieldType === 'text'}
 			<FormTextField
 				id={fieldKey}
 				value={stringValue}
-				placeholder={schema.placeholder ?? ""}
+				placeholder={schema.placeholder ?? ''}
 				{required}
 				ariaDescribedBy={descriptionId}
 				onChange={(val) => onChange(val)}
 			/>
-		{:else if fieldType === "number"}
+		{:else if fieldType === 'number'}
 			<FormNumberField
 				id={fieldKey}
 				value={numberValue}
-				placeholder={schema.placeholder ?? ""}
+				placeholder={schema.placeholder ?? ''}
 				min={schema.minimum}
 				max={schema.maximum}
 				{required}
 				ariaDescribedBy={descriptionId}
 				onChange={(val) => onChange(val)}
 			/>
-		{:else if fieldType === "range"}
+		{:else if fieldType === 'range'}
 			<FormRangeField
 				id={fieldKey}
 				value={numberValue}
@@ -299,14 +299,14 @@
 				ariaDescribedBy={descriptionId}
 				onChange={(val) => onChange(val)}
 			/>
-		{:else if fieldType === "toggle"}
+		{:else if fieldType === 'toggle'}
 			<FormToggle
 				id={fieldKey}
 				value={booleanValue}
 				ariaDescribedBy={descriptionId}
 				onChange={(val) => onChange(val)}
 			/>
-		{:else if fieldType === "select-options"}
+		{:else if fieldType === 'select-options'}
 			<FormSelect
 				id={fieldKey}
 				value={stringValue}
@@ -315,17 +315,17 @@
 				ariaDescribedBy={descriptionId}
 				onChange={(val) => onChange(val)}
 			/>
-		{:else if fieldType === "array" && schema.items}
+		{:else if fieldType === 'array' && schema.items}
 			<FormArray
 				id={fieldKey}
 				value={arrayItems}
 				itemSchema={schema.items}
 				minItems={schema.minItems}
 				maxItems={schema.maxItems}
-				addLabel={`Add ${schema.items.title ?? "Item"}`}
+				addLabel={`Add ${schema.items.title ?? 'Item'}`}
 				onChange={(val) => onChange(val)}
 			/>
-		{:else if fieldType.endsWith("-fallback")}
+		{:else if fieldType.endsWith('-fallback')}
 			<!-- Fallback for unregistered heavy editors -->
 			<div class="form-field-fallback">
 				<div class="form-field-fallback__message">
@@ -349,13 +349,13 @@
 				<!-- Provide a basic textarea fallback for editing -->
 				<FormTextarea
 					id={fieldKey}
-					value={typeof value === "string" ? value : JSON.stringify(value, null, 2)}
-					placeholder={schema.placeholder ?? "Enter value..."}
+					value={typeof value === 'string' ? value : JSON.stringify(value, null, 2)}
+					placeholder={schema.placeholder ?? 'Enter value...'}
 					{required}
 					ariaDescribedBy={descriptionId}
 					onChange={(val) => {
 						// Try to parse as JSON for object types
-						if (schema.type === "object" || schema.format === "json") {
+						if (schema.type === 'object' || schema.format === 'json') {
 							try {
 								onChange(JSON.parse(val));
 							} catch {
@@ -372,7 +372,7 @@
 			<FormTextField
 				id={fieldKey}
 				value={stringValue}
-				placeholder={schema.placeholder ?? ""}
+				placeholder={schema.placeholder ?? ''}
 				ariaDescribedBy={descriptionId}
 				onChange={(val) => onChange(val)}
 			/>
@@ -413,7 +413,7 @@
 		background-color: var(--color-ref-gray-50, #f9fafb);
 		border: 1px solid var(--color-ref-gray-200, #e5e7eb);
 		border-radius: 0.375rem;
-		font-family: "JetBrains Mono", "Fira Code", "Monaco", "Menlo", monospace;
+		font-family: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Menlo', monospace;
 		font-size: 0.6875rem;
 		line-height: 1.5;
 		color: var(--color-ref-gray-600, #4b5563);

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

@@ -1,4 +1,4 @@
-import type { FieldSchema } from "./types.js";
+import type { FieldSchema } from './types.js';
 interface Props {
     /** Unique key/id for the field */
     fieldKey: string;

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

@@ -306,7 +306,7 @@ export interface SchemaFormProps {
      * Properties define the form fields to render.
      */
     schema: {
-        type: "object";
+        type: 'object';
         properties: Record<string, FieldSchema>;
         required?: string[];
         additionalProperties?: boolean;