@d34dman/flowdrop 0.0.24 → 0.0.26

package/README.md

@@ -51,13 +51,12 @@ npm install @d34dman/flowdrop
 
 You get a production-ready workflow UI. You keep full control of everything else.
 
-
 ## Quickstart
 
 ```svelte
 <script lang="ts">
-  import { WorkflowEditor } from "@d34dman/flowdrop";
-  import "@d34dman/flowdrop/styles/base.css";
+	import { WorkflowEditor } from '@d34dman/flowdrop';
+	import '@d34dman/flowdrop/styles/base.css';
 </script>
 
 <WorkflowEditor />
@@ -65,11 +64,10 @@ You get a production-ready workflow UI. You keep full control of everything else
 
 **5 lines. One fully-functional workflow editor.**
 
-
 ## Features
 
-|                             |                                                                           |
-| --------------------------- | ------------------------------------------------------------------------- |
+|                              |                                                                           |
+| ---------------------------- | ------------------------------------------------------------------------- |
 | 🎨 **Visual Editor Only**    | Pure UI component. No hidden backend, no external dependencies            |
 | 🔐 **You Own Everything**    | Your data, your servers, your orchestration logic, your security policies |
 | 🔌 **Backend Agnostic**      | Connect to any API: Drupal, Laravel, Express, FastAPI, or your own        |
@@ -77,7 +75,6 @@ You get a production-ready workflow UI. You keep full control of everything else
 | 🎭 **Framework Flexible**    | Use as Svelte component or mount into React, Vue, Angular, or vanilla JS  |
 | 🐳 **Deploy Anywhere**       | Runtime config means build once, deploy everywhere                        |
 
-
 ## Node Types
 
 FlowDrop ships with 7 beautifully designed node types:
@@ -105,27 +102,27 @@ FlowDrop ships with 7 beautifully designed node types:
 
 ```svelte
 <script>
-  import { WorkflowEditor, NodeSidebar } from "@d34dman/flowdrop";
+	import { WorkflowEditor, NodeSidebar } from '@d34dman/flowdrop';
 </script>
 
 <div class="flex h-screen">
-  <NodeSidebar {nodes} />
-  <WorkflowEditor {nodes} />
+	<NodeSidebar {nodes} />
+	<WorkflowEditor {nodes} />
 </div>
 ```
 
 ### Vanilla JS / React / Vue / Angular
 
 ```javascript
-import { mountFlowDropApp, createEndpointConfig } from "@d34dman/flowdrop";
-
-const app = await mountFlowDropApp(document.getElementById("editor"), {
-  workflow: myWorkflow,
-  endpointConfig: createEndpointConfig("/api/flowdrop"),
-  eventHandlers: {
-    onDirtyStateChange: (isDirty) => console.log("Unsaved changes:", isDirty),
-    onAfterSave: (workflow) => console.log("Saved!", workflow)
-  }
+import { mountFlowDropApp, createEndpointConfig } from '@d34dman/flowdrop';
+
+const app = await mountFlowDropApp(document.getElementById('editor'), {
+	workflow: myWorkflow,
+	endpointConfig: createEndpointConfig('/api/flowdrop'),
+	eventHandlers: {
+		onDirtyStateChange: (isDirty) => console.log('Unsaved changes:', isDirty),
+		onAfterSave: (workflow) => console.log('Saved!', workflow)
+	}
 });
 
 // Full control over the editor
@@ -137,69 +134,66 @@ app.destroy();
 ### Enterprise Integration
 
 ```javascript
-import { mountFlowDropApp, CallbackAuthProvider } from "@d34dman/flowdrop";
+import { mountFlowDropApp, CallbackAuthProvider } from '@d34dman/flowdrop';
 
 const app = await mountFlowDropApp(container, {
-  // Dynamic token refresh
-  authProvider: new CallbackAuthProvider({
-    getToken: () => authService.getAccessToken(),
-    onUnauthorized: () => authService.refreshToken()
-  }),
-
-  // Lifecycle hooks
-  eventHandlers: {
-    onBeforeUnmount: (workflow, isDirty) => {
-      if (isDirty) saveDraft(workflow);
-    }
-  },
-
-  // Auto-save, toasts, and more
-  features: {
-    autoSaveDraft: true,
-    autoSaveDraftInterval: 30000
-  }
+	// Dynamic token refresh
+	authProvider: new CallbackAuthProvider({
+		getToken: () => authService.getAccessToken(),
+		onUnauthorized: () => authService.refreshToken()
+	}),
+
+	// Lifecycle hooks
+	eventHandlers: {
+		onBeforeUnmount: (workflow, isDirty) => {
+			if (isDirty) saveDraft(workflow);
+		}
+	},
+
+	// Auto-save, toasts, and more
+	features: {
+		autoSaveDraft: true,
+		autoSaveDraftInterval: 30000
+	}
 });
 ```
 
-
 ## API Configuration
 
 Connect to any backend in seconds:
 
 ```typescript
-import { createEndpointConfig } from "@d34dman/flowdrop";
+import { createEndpointConfig } from '@d34dman/flowdrop';
 
 const config = createEndpointConfig({
-  baseUrl: "https://api.example.com",
-  endpoints: {
-    nodes: { list: "/nodes", get: "/nodes/{id}" },
-    workflows: {
-      list: "/workflows",
-      get: "/workflows/{id}",
-      create: "/workflows",
-      update: "/workflows/{id}",
-      execute: "/workflows/{id}/execute"
-    }
-  },
-  auth: { type: "bearer", token: "your-token" }
+	baseUrl: 'https://api.example.com',
+	endpoints: {
+		nodes: { list: '/nodes', get: '/nodes/{id}' },
+		workflows: {
+			list: '/workflows',
+			get: '/workflows/{id}',
+			create: '/workflows',
+			update: '/workflows/{id}',
+			execute: '/workflows/{id}/execute'
+		}
+	},
+	auth: { type: 'bearer', token: 'your-token' }
 });
 ```
 
-
 ## Customization
 
 Make it yours with CSS custom properties:
 
 ```css
 :root {
-  --flowdrop-background-color: #0a0a0a;
-  --flowdrop-primary-color: #6366f1;
-  --flowdrop-border-color: #27272a;
-  --flowdrop-text-color: #fafafa;
+	--flowdrop-background-color: #0a0a0a;
+	--flowdrop-primary-color: #6366f1;
+	--flowdrop-border-color: #27272a;
+	--flowdrop-text-color: #fafafa;
 }
 ```
 
-
 ## Deploy
 
 ### Docker (Recommended)
@@ -218,8 +212,6 @@ FLOWDROP_API_BASE_URL=http://your-backend/api node build
 
 Runtime configuration means you build once and deploy to staging, production, or anywhere else with just environment variables.
 
-
-
 ## Documentation
 
 | Resource                           | Description              |
@@ -238,12 +230,10 @@ npm run build        # Build library
 npm test             # Run all tests
 ```
 
-
 ## Contributing
 
 FlowDrop is stabilizing. Contributions will open soon. Star the repo to stay updated.
 
-
 <p align="center">
   <strong>FlowDrop</strong> - The visual workflow editor you own completely
 </p>

package/dist/components/App.svelte

@@ -14,7 +14,13 @@
 	import ConfigPanel from './ConfigPanel.svelte';
 	import Navbar from './Navbar.svelte';
 	import { api, setEndpointConfig } from '../services/api.js';
-	import type { NodeMetadata, Workflow, WorkflowNode, ConfigSchema, NodeUIExtensions } from '../types/index.js';
+	import type {
+		NodeMetadata,
+		Workflow,
+		WorkflowNode,
+		ConfigSchema,
+		NodeUIExtensions
+	} from '../types/index.js';
 	import { createEndpointConfig } from '../config/endpoints.js';
 	import type { EndpointConfig } from '../config/endpoints.js';
 	import type { AuthProvider } from '../types/auth.js';
@@ -663,7 +669,7 @@
 			>
 				<ConfigForm
 					node={currentNode}
-					onSave={(updatedConfig, uiExtensions?: NodeUIExtensions) => {
+					onSave={async (updatedConfig, uiExtensions?: NodeUIExtensions) => {
 						if (selectedNodeId && currentNode) {
 							// Build the updated node data
 							const updatedData = {
@@ -687,6 +693,13 @@
 							// NOTE: We do NOT change the node's type field anymore
 							// All nodes use 'universalNode' and UniversalNode handles internal switching
 							workflowActions.updateNode(selectedNodeId, nodeUpdates);
+
+							// For gateway nodes (which have branches), refresh edge positions
+							// This fixes the bug where reordering branches doesn't update connections visually
+							const nodeType = currentNode.data?.metadata?.type;
+							if (nodeType === "gateway" && workflowEditorRef && selectedNodeId) {
+								await workflowEditorRef.refreshEdgePositions(selectedNodeId);
+							}
 						}
 
 						closeConfigSidebar();

package/dist/components/ConfigForm.svelte

@@ -131,7 +131,10 @@
 				if (inputEl.id && !inputEl.id.startsWith('ext-')) {
 					if (inputEl instanceof HTMLInputElement && inputEl.type === 'checkbox') {
 						updatedConfig[inputEl.id] = inputEl.checked;
-					} else if (inputEl instanceof HTMLInputElement && (inputEl.type === 'number' || inputEl.type === 'range')) {
+					} else if (
+						inputEl instanceof HTMLInputElement &&
+						(inputEl.type === 'number' || inputEl.type === 'range')
+					) {
 						updatedConfig[inputEl.id] = inputEl.value ? Number(inputEl.value) : inputEl.value;
 					} else if (inputEl instanceof HTMLInputElement && inputEl.type === 'hidden') {
 						// Parse hidden field values that might be JSON

package/dist/components/ConfigModal.svelte

@@ -19,10 +19,6 @@
 		cancel: void;
 	}>();
 
-	function handleSave() {
-		dispatch('save', { values: localConfigValues });
-	}
-
 	function handleCancel() {
 		dispatch('cancel');
 	}
@@ -79,29 +75,13 @@
 				<ConfigForm
 					schema={props.configSchema}
 					values={localConfigValues}
-					on:change={({ detail }) => {
-						localConfigValues = detail.values;
+					showUIExtensions={false}
+					onSave={(config) => {
+						dispatch('save', { values: config });
 					}}
+					onCancel={handleCancel}
 				/>
 			</div>
-
-			<!-- Modal Footer -->
-			<div class="config-modal__footer">
-				<button
-					type="button"
-					class="config-modal__btn config-modal__btn--secondary"
-					onclick={handleCancel}
-				>
-					Cancel
-				</button>
-				<button
-					type="button"
-					class="config-modal__btn config-modal__btn--primary"
-					onclick={handleSave}
-				>
-					Save Configuration
-				</button>
-			</div>
 		</div>
 	</div>
 {/if}
@@ -179,48 +159,6 @@
 		min-height: 0;
 	}
 
-	.config-modal__footer {
-		display: flex;
-		align-items: center;
-		justify-content: flex-end;
-		gap: 0.75rem;
-		padding: 1rem 1.5rem 1.5rem 1.5rem;
-		border-top: 1px solid #e5e7eb;
-		background-color: #f9fafb;
-	}
-
-	.config-modal__btn {
-		padding: 0.5rem 1rem;
-		border-radius: 0.375rem;
-		font-size: 0.875rem;
-		font-weight: 500;
-		cursor: pointer;
-		transition: all 0.2s;
-		border: 1px solid transparent;
-	}
-
-	.config-modal__btn--primary {
-		background-color: #3b82f6;
-		color: white;
-		border-color: #3b82f6;
-	}
-
-	.config-modal__btn--primary:hover {
-		background-color: #2563eb;
-		border-color: #2563eb;
-	}
-
-	.config-modal__btn--secondary {
-		background-color: white;
-		color: #374151;
-		border-color: #d1d5db;
-	}
-
-	.config-modal__btn--secondary:hover {
-		background-color: #f9fafb;
-		border-color: #9ca3af;
-	}
-
 	/* Responsive adjustments */
 	@media (max-width: 1024px) {
 		.config-modal {
@@ -242,10 +180,6 @@
 		.config-modal__content {
 			padding: 1rem;
 		}
-
-		.config-modal__footer {
-			padding: 0.75rem 1rem 1rem 1rem;
-		}
 	}
 
 	@media (max-width: 640px) {

package/dist/components/ConfigPanel.svelte

@@ -60,13 +60,7 @@
 	<!-- Header -->
 	<div class="config-panel__header">
 		<h2 class="config-panel__title">{title}</h2>
-		<button
-			class="config-panel__close"
-			onclick={onClose}
-			aria-label="Close panel"
-		>
-			×
-		</button>
+		<button class="config-panel__close" onclick={onClose} aria-label="Close panel"> × </button>
 	</div>
 
 	<!-- Details Section (between header and content) -->
@@ -121,7 +115,9 @@
 		color: #6b7280;
 		padding: 0.25rem;
 		border-radius: 0.25rem;
-		transition: color 0.15s, background-color 0.15s;
+		transition:
+			color 0.15s,
+			background-color 0.15s;
 	}
 
 	.config-panel__close:hover {
@@ -157,4 +153,3 @@
 		letter-spacing: 0.05em;
 	}
 </style>
-

package/dist/components/EdgeRefresher.svelte

@@ -0,0 +1,42 @@
+<!--
+  EdgeRefresher Component
+  Helper component that uses useUpdateNodeInternals to force edge recalculation
+  Must be rendered inside SvelteFlowProvider context
+-->
+
+<script lang="ts">
+	import { useUpdateNodeInternals } from '@xyflow/svelte';
+
+	interface Props {
+		/** Node ID to refresh - when this changes, edges are recalculated */
+		nodeIdToRefresh: string | null;
+		/** Callback when refresh is complete */
+		onRefreshComplete?: () => void;
+	}
+
+	let { nodeIdToRefresh, onRefreshComplete }: Props = $props();
+
+	/**
+	 * Get the updateNodeInternals function from Svelte Flow context
+	 * This recalculates handle positions and forces edge path updates
+	 */
+	const updateNodeInternals = useUpdateNodeInternals();
+
+	/**
+	 * Watch for nodeIdToRefresh changes and trigger edge recalculation
+	 */
+	$effect(() => {
+		if (nodeIdToRefresh) {
+			// Tell Svelte Flow to recalculate node internals (handle positions)
+			updateNodeInternals(nodeIdToRefresh);
+
+			// Notify parent that refresh is complete
+			if (onRefreshComplete) {
+				onRefreshComplete();
+			}
+		}
+	});
+</script>
+
+<!-- This component renders nothing - it's just for the hook logic -->
+

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

@@ -0,0 +1,9 @@
+interface Props {
+    /** Node ID to refresh - when this changes, edges are recalculated */
+    nodeIdToRefresh: string | null;
+    /** Callback when refresh is complete */
+    onRefreshComplete?: () => void;
+}
+declare const EdgeRefresher: import("svelte").Component<Props, {}, "">;
+type EdgeRefresher = ReturnType<typeof EdgeRefresher>;
+export default EdgeRefresher;

package/dist/components/ReadOnlyDetails.svelte

@@ -147,7 +147,9 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		transition: color 0.15s, background-color 0.15s;
+		transition:
+			color 0.15s,
+			background-color 0.15s;
 	}
 
 	.readonly-details__copy-btn:hover {

package/dist/components/UniversalNode.svelte

@@ -128,9 +128,12 @@
 </script>
 
 <div class="universal-node">
-	<!-- Render the node component dynamically -->
-	<!-- svelte-ignore binding_property_non_reactive -->
-	<svelte:component this={nodeComponent} {data} {selected} />
+	<!-- Render the node component dynamically (Svelte 5 dynamic component syntax) -->
+	{#if nodeComponent}
+		<!-- svelte-ignore binding_property_non_reactive -->
+		{@const NodeComponent = nodeComponent}
+		<NodeComponent {data} {selected} />
+	{/if}
 
 	<!-- Status overlay - only show if there's meaningful status information -->
 	{#if shouldShowStatus}

package/dist/components/WorkflowEditor.svelte

@@ -23,6 +23,7 @@
 	} from '../types/index.js';
 	import CanvasBanner from './CanvasBanner.svelte';
 	import FlowDropZone from './FlowDropZone.svelte';
+	import EdgeRefresher from './EdgeRefresher.svelte';
 	import { tick } from 'svelte';
 	import type { EndpointConfig } from '../config/endpoints.js';
 	import ConnectionLine from './ConnectionLine.svelte';
@@ -359,9 +360,41 @@
 			console.warn('No currentWorkflow available for new node');
 		}
 	}
+
+	/**
+	 * Node ID that needs edge refresh - used to trigger EdgeRefresher component
+	 */
+	let nodeIdToRefresh = $state<string | null>(null);
+
+	/**
+	 * Force edge position recalculation after node config changes
+	 * This should be called after saving gateway/switch node configs where branches are reordered
+	 * Svelte Flow doesn't automatically recalculate edge paths when handle positions change
+	 * @param nodeId - The ID of the node whose handles have changed position
+	 */
+	export async function refreshEdgePositions(nodeId: string): Promise<void> {
+		// Wait for DOM to update with new handle positions
+		await tick();
+
+		// Trigger the EdgeRefresher component to call updateNodeInternals
+		nodeIdToRefresh = nodeId;
+	}
+
+	/**
+	 * Callback when edge refresh is complete
+	 */
+	function handleEdgeRefreshComplete(): void {
+		nodeIdToRefresh = null;
+	}
 </script>
 
 <SvelteFlowProvider>
+	<!-- EdgeRefresher component - handles updateNodeInternals calls -->
+	<EdgeRefresher
+		{nodeIdToRefresh}
+		onRefreshComplete={handleEdgeRefreshComplete}
+	/>
+
 	<div class="flowdrop-workflow-editor">
 		<!-- Main Editor Area -->
 		<div class="flowdrop-workflow-editor__main">

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

@@ -15,6 +15,8 @@ interface Props {
     nodeStatuses?: Record<string, 'pending' | 'running' | 'completed' | 'error'>;
     pipelineId?: string;
 }
-declare const WorkflowEditor: import("svelte").Component<Props, {}, "">;
+declare const WorkflowEditor: import("svelte").Component<Props, {
+    refreshEdgePositions: (nodeId: string) => Promise<void>;
+}, "">;
 type WorkflowEditor = ReturnType<typeof WorkflowEditor>;
 export default WorkflowEditor;

package/dist/components/form/FormCheckboxGroup.svelte

@@ -9,7 +9,7 @@
 -->
 
 <script lang="ts">
-	import Icon from "@iconify/svelte";
+	import Icon from '@iconify/svelte';
 
 	interface Props {
 		/** Field identifier (used for ARIA) */
@@ -24,13 +24,7 @@
 		onChange: (value: string[]) => void;
 	}
 
-	let {
-		id,
-		value = [],
-		options = [],
-		ariaDescribedBy,
-		onChange
-	}: Props = $props();
+	let { id, value = [], options = [], ariaDescribedBy, onChange }: Props = $props();
 
 	/**
 	 * Handle checkbox toggle
@@ -149,4 +143,3 @@
 		line-height: 1.4;
 	}
 </style>
-