@d34dman/flowdrop 0.0.25 → 0.0.27

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,41 @@
+<!--
+  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,38 @@
 			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>
-

package/dist/components/form/FormField.svelte

@@ -333,16 +333,5 @@
 {/if}
 
 <style>
-	.form-field__unsupported {
-		padding: 0.75rem;
-		background-color: var(--color-ref-amber-50, #fffbeb);
-		border: 1px solid var(--color-ref-amber-200, #fde68a);
-		border-radius: 0.5rem;
-		color: var(--color-ref-amber-800, #92400e);
-		font-size: 0.8125rem;
-	}
-
-	.form-field__unsupported p {
-		margin: 0;
-	}
+	/* Styles moved to individual form components */
 </style>

package/dist/components/form/FormFieldWrapper.svelte

@@ -10,7 +10,7 @@
 -->
 
 <script lang="ts">
-	import type { Snippet } from "svelte";
+	import type { Snippet } from 'svelte';
 
 	interface Props {
 		/** Field identifier for label association */
@@ -27,14 +27,7 @@
 		children: Snippet;
 	}
 
-	let {
-		id,
-		label,
-		required = false,
-		description,
-		animationDelay = 0,
-		children
-	}: Props = $props();
+	let { id, label, required = false, description, animationDelay = 0, children }: Props = $props();
 
 	/**
 	 * Computed description ID for ARIA association
@@ -130,4 +123,3 @@
 		padding-left: 0.125rem;
 	}
 </style>
-

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

@@ -1,4 +1,4 @@
-import type { Snippet } from "svelte";
+import type { Snippet } from 'svelte';
 interface Props {
     /** Field identifier for label association */
     id: string;

package/dist/components/form/FormMarkdownEditor.svelte

@@ -100,8 +100,6 @@
 		'table',
 		'|',
 		'preview',
-		'side-by-side',
-		'fullscreen',
 		'|',
 		'guide'
 	] as const;

package/dist/components/form/FormNumberField.svelte

@@ -32,8 +32,8 @@
 
 	let {
 		id,
-		value = "",
-		placeholder = "",
+		value = '',
+		placeholder = '',
 		min,
 		max,
 		step,
@@ -50,8 +50,8 @@
 		const target = event.currentTarget as HTMLInputElement;
 		const inputValue = target.value;
 
-		if (inputValue === "") {
-			onChange("");
+		if (inputValue === '') {
+			onChange('');
 		} else {
 			const numValue = Number(inputValue);
 			onChange(isNaN(numValue) ? inputValue : numValue);
@@ -63,7 +63,7 @@
 	{id}
 	type="number"
 	class="form-number-field"
-	value={value ?? ""}
+	value={value ?? ''}
 	{placeholder}
 	{min}
 	{max}
@@ -106,4 +106,3 @@
 			0 1px 2px rgba(0, 0, 0, 0.04);
 	}
 </style>
-

package/dist/components/form/FormRangeField.svelte

@@ -46,7 +46,7 @@
 	 * Handles string values and defaults
 	 */
 	const numericValue = $derived.by((): number => {
-		if (typeof value === "number") {
+		if (typeof value === 'number') {
 			return value;
 		}
 		const parsed = Number(value);
@@ -85,7 +85,6 @@
 			{max}
 			{step}
 			aria-describedby={ariaDescribedBy}
-			aria-required={required}
 			aria-valuemin={min}
 			aria-valuemax={max}
 			aria-valuenow={numericValue}
@@ -144,11 +143,7 @@
 		width: 18px;
 		height: 18px;
 		border-radius: 50%;
-		background: linear-gradient(
-			135deg,
-			#ffffff 0%,
-			var(--color-ref-gray-50, #f9fafb) 100%
-		);
+		background: linear-gradient(135deg, #ffffff 0%, var(--color-ref-gray-50, #f9fafb) 100%);
 		border: 2px solid var(--color-ref-blue-500, #3b82f6);
 		box-shadow:
 			0 2px 6px rgba(59, 130, 246, 0.25),
@@ -189,11 +184,7 @@
 		width: 18px;
 		height: 18px;
 		border-radius: 50%;
-		background: linear-gradient(
-			135deg,
-			#ffffff 0%,
-			var(--color-ref-gray-50, #f9fafb) 100%
-		);
+		background: linear-gradient(135deg, #ffffff 0%, var(--color-ref-gray-50, #f9fafb) 100%);
 		border: 2px solid var(--color-ref-blue-500, #3b82f6);
 		box-shadow:
 			0 2px 6px rgba(59, 130, 246, 0.25),
@@ -249,4 +240,3 @@
 		text-align: center;
 	}
 </style>
-

package/dist/components/form/FormSelect.svelte

@@ -9,8 +9,8 @@
 -->
 
 <script lang="ts">
-	import Icon from "@iconify/svelte";
-	import { normalizeOptions, type FieldOption } from "./types.js";
+	import Icon from '@iconify/svelte';
+	import { normalizeOptions, type FieldOption } from './types.js';
 
 	interface Props {
 		/** Field identifier */
@@ -29,7 +29,7 @@
 
 	let {
 		id,
-		value = "",
+		value = '',
 		options = [],
 		required = false,
 		ariaDescribedBy,
@@ -54,7 +54,7 @@
 	<select
 		{id}
 		class="form-select"
-		value={value ?? ""}
+		value={value ?? ''}
 		aria-describedby={ariaDescribedBy}
 		aria-required={required}
 		onchange={handleChange}
@@ -123,4 +123,3 @@
 		color: var(--color-ref-blue-500, #3b82f6);
 	}
 </style>
-

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

@@ -1,4 +1,4 @@
-import { type FieldOption } from "./types.js";
+import { type FieldOption } from './types.js';
 interface Props {
     /** Field identifier */
     id: string;

package/dist/components/form/FormTextField.svelte

@@ -26,8 +26,8 @@
 
 	let {
 		id,
-		value = "",
-		placeholder = "",
+		value = '',
+		placeholder = '',
 		required = false,
 		ariaDescribedBy,
 		onChange
@@ -46,7 +46,7 @@
 	{id}
 	type="text"
 	class="form-text-field"
-	value={value ?? ""}
+	value={value ?? ''}
 	{placeholder}
 	aria-describedby={ariaDescribedBy}
 	aria-required={required}
@@ -85,4 +85,3 @@
 			0 1px 2px rgba(0, 0, 0, 0.04);
 	}
 </style>
-

package/dist/components/form/FormTextarea.svelte

@@ -28,8 +28,8 @@
 
 	let {
 		id,
-		value = "",
-		placeholder = "",
+		value = '',
+		placeholder = '',
 		rows = 4,
 		required = false,
 		ariaDescribedBy,
@@ -48,7 +48,7 @@
 <textarea
 	{id}
 	class="form-textarea"
-	value={value ?? ""}
+	value={value ?? ''}
 	{placeholder}
 	{rows}
 	aria-describedby={ariaDescribedBy}
@@ -91,4 +91,3 @@
 			0 1px 2px rgba(0, 0, 0, 0.04);
 	}
 </style>
-

package/dist/components/form/FormToggle.svelte

@@ -27,8 +27,8 @@
 	let {
 		id,
 		value = false,
-		onLabel = "Enabled",
-		offLabel = "Disabled",
+		onLabel = 'Enabled',
+		offLabel = 'Disabled',
 		ariaDescribedBy,
 		onChange
 	}: Props = $props();
@@ -120,4 +120,3 @@
 		color: var(--color-ref-blue-600, #2563eb);
 	}
 </style>
-

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

@@ -29,17 +29,17 @@
  * />
  * ```
  */
-export * from "./types.js";
-export { default as FormField } from "./FormField.svelte";
-export { default as FormFieldWrapper } from "./FormFieldWrapper.svelte";
-export { default as FormTextField } from "./FormTextField.svelte";
-export { default as FormTextarea } from "./FormTextarea.svelte";
-export { default as FormNumberField } from "./FormNumberField.svelte";
-export { default as FormRangeField } from "./FormRangeField.svelte";
-export { default as FormToggle } from "./FormToggle.svelte";
-export { default as FormSelect } from "./FormSelect.svelte";
-export { default as FormCheckboxGroup } from "./FormCheckboxGroup.svelte";
-export { default as FormArray } from "./FormArray.svelte";
-export { default as FormCodeEditor } from "./FormCodeEditor.svelte";
-export { default as FormMarkdownEditor } from "./FormMarkdownEditor.svelte";
-export { default as FormTemplateEditor } from "./FormTemplateEditor.svelte";
+export * from './types.js';
+export { default as FormField } from './FormField.svelte';
+export { default as FormFieldWrapper } from './FormFieldWrapper.svelte';
+export { default as FormTextField } from './FormTextField.svelte';
+export { default as FormTextarea } from './FormTextarea.svelte';
+export { default as FormNumberField } from './FormNumberField.svelte';
+export { default as FormRangeField } from './FormRangeField.svelte';
+export { default as FormToggle } from './FormToggle.svelte';
+export { default as FormSelect } from './FormSelect.svelte';
+export { default as FormCheckboxGroup } from './FormCheckboxGroup.svelte';
+export { default as FormArray } from './FormArray.svelte';
+export { default as FormCodeEditor } from './FormCodeEditor.svelte';
+export { default as FormMarkdownEditor } from './FormMarkdownEditor.svelte';
+export { default as FormTemplateEditor } from './FormTemplateEditor.svelte';

package/dist/components/form/index.js

@@ -30,20 +30,20 @@
  * ```
  */
 // Types
-export * from "./types.js";
+export * from './types.js';
 // Main factory component
-export { default as FormField } from "./FormField.svelte";
+export { default as FormField } from './FormField.svelte';
 // Wrapper component
-export { default as FormFieldWrapper } from "./FormFieldWrapper.svelte";
+export { default as FormFieldWrapper } from './FormFieldWrapper.svelte';
 // Individual field components
-export { default as FormTextField } from "./FormTextField.svelte";
-export { default as FormTextarea } from "./FormTextarea.svelte";
-export { default as FormNumberField } from "./FormNumberField.svelte";
-export { default as FormRangeField } from "./FormRangeField.svelte";
-export { default as FormToggle } from "./FormToggle.svelte";
-export { default as FormSelect } from "./FormSelect.svelte";
-export { default as FormCheckboxGroup } from "./FormCheckboxGroup.svelte";
-export { default as FormArray } from "./FormArray.svelte";
-export { default as FormCodeEditor } from "./FormCodeEditor.svelte";
-export { default as FormMarkdownEditor } from "./FormMarkdownEditor.svelte";
-export { default as FormTemplateEditor } from "./FormTemplateEditor.svelte";
+export { default as FormTextField } from './FormTextField.svelte';
+export { default as FormTextarea } from './FormTextarea.svelte';
+export { default as FormNumberField } from './FormNumberField.svelte';
+export { default as FormRangeField } from './FormRangeField.svelte';
+export { default as FormToggle } from './FormToggle.svelte';
+export { default as FormSelect } from './FormSelect.svelte';
+export { default as FormCheckboxGroup } from './FormCheckboxGroup.svelte';
+export { default as FormArray } from './FormArray.svelte';
+export { default as FormCodeEditor } from './FormCodeEditor.svelte';
+export { default as FormMarkdownEditor } from './FormMarkdownEditor.svelte';
+export { default as FormTemplateEditor } from './FormTemplateEditor.svelte';

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

@@ -9,7 +9,7 @@
  * Supported field types for form rendering
  * Can be extended to support complex types like 'array' and 'object'
  */
-export type FieldType = "string" | "number" | "integer" | "boolean" | "select" | "array" | "object";
+export type FieldType = 'string' | 'number' | 'integer' | 'boolean' | 'select' | 'array' | 'object';
 /**
  * Field format for specialized rendering
  * - multiline: Renders as textarea
@@ -20,7 +20,7 @@ export type FieldType = "string" | "number" | "integer" | "boolean" | "select" |
  * - markdown: Renders as SimpleMDE Markdown editor
  * - template: Renders as CodeMirror editor with Twig/Liquid syntax highlighting
  */
-export type FieldFormat = "multiline" | "hidden" | "range" | "json" | "code" | "markdown" | "template" | string;
+export type FieldFormat = 'multiline' | 'hidden' | 'range' | 'json' | 'code' | 'markdown' | 'template' | string;
 /**
  * Option type for select and checkbox group fields
  */

package/dist/components/form/types.js

@@ -9,7 +9,7 @@
  * Type guard to check if options are FieldOption objects
  */
 export function isFieldOptionArray(options) {
-    return options.length > 0 && typeof options[0] === "object" && "value" in options[0];
+    return options.length > 0 && typeof options[0] === 'object' && 'value' in options[0];
 }
 /**
  * Normalize options to FieldOption format