@d34dman/flowdrop 0.0.63 → 0.0.65

package/dist/components/Navbar.stories.svelte

@@ -1,41 +1,53 @@
 <script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import Navbar from "./Navbar.svelte";
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Navbar from './Navbar.svelte';
 
 	const { Story } = defineMeta({
-		title: "Editor/Navbar",
+		title: 'Editor/Navbar',
 		component: Navbar,
-		tags: ["autodocs"],
+		tags: ['autodocs'],
 		parameters: {
-			layout: "fullscreen",
-		},
+			layout: 'fullscreen'
+		}
 	});
 </script>
 
-<Story name="Default" args={{
-	title: "My Workflow",
-	showStatus: true,
-	showSettings: true,
-}} />
+<Story
+	name="Default"
+	args={{
+		title: 'My Workflow',
+		showStatus: true,
+		showSettings: true
+	}}
+/>
 
-<Story name="With Actions" args={{
-	title: "Workflow Editor",
-	primaryActions: [
-		{ label: "Save", href: "#", icon: "mdi:content-save", variant: "primary" },
-		{ label: "Export", href: "#", icon: "mdi:download", variant: "outline" },
-	],
-	showStatus: true,
-}} />
+<Story
+	name="With Actions"
+	args={{
+		title: 'Workflow Editor',
+		primaryActions: [
+			{ label: 'Save', href: '#', icon: 'mdi:content-save', variant: 'primary' },
+			{ label: 'Export', href: '#', icon: 'mdi:download', variant: 'outline' }
+		],
+		showStatus: true
+	}}
+/>
 
-<Story name="With Breadcrumbs" args={{
-	breadcrumbs: [
-		{ label: "Workflows", href: "#", icon: "mdi:folder" },
-		{ label: "My Workflow", href: "#" },
-	],
-	showSettings: true,
-}} />
+<Story
+	name="With Breadcrumbs"
+	args={{
+		breadcrumbs: [
+			{ label: 'Workflows', href: '#', icon: 'mdi:folder' },
+			{ label: 'My Workflow', href: '#' }
+		],
+		showSettings: true
+	}}
+/>
 
-<Story name="Minimal" args={{
-	showStatus: false,
-	showSettings: false,
-}} />
+<Story
+	name="Minimal"
+	args={{
+		showStatus: false,
+		showSettings: false
+	}}
+/>

package/dist/components/Navbar.stories.svelte.d.ts

@@ -11,7 +11,7 @@ declare const Navbar: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import Navbar from "./Navbar.svelte";
+import Navbar from './Navbar.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/Navbar.svelte

@@ -62,10 +62,13 @@
 		}
 	}
 
-	// Add event listener for click outside
-	if (typeof window !== 'undefined') {
+	// Add event listener for click outside with proper cleanup
+	$effect(() => {
 		document.addEventListener('click', handleClickOutside);
-	}
+		return () => {
+			document.removeEventListener('click', handleClickOutside);
+		};
+	});
 </script>
 
 <div class="flowdrop-navbar">

package/dist/components/NodeSidebar.svelte

@@ -22,6 +22,7 @@
 
 	let props: Props = $props();
 	let searchInput = $state('');
+	// svelte-ignore state_referenced_locally — initial default, user selects interactively
 	let selectedCategory = $state(props.selectedCategory || 'all');
 
 	/**

package/dist/components/NodeStatusOverlay.stories.svelte

@@ -1,74 +1,85 @@
 <script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import NodeStatusOverlay from "./NodeStatusOverlay.svelte";
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import NodeStatusOverlay from './NodeStatusOverlay.svelte';
 
 	const { Story } = defineMeta({
-		title: "Editor/NodeStatusOverlay",
-		tags: ["autodocs"],
+		title: 'Editor/NodeStatusOverlay',
+		tags: ['autodocs'],
 		parameters: {
-			layout: "centered",
-		},
+			layout: 'centered'
+		}
 	});
 </script>
 
-{#snippet nodeBox(label)}
-	<div style="position: relative; width: 220px; height: 100px; margin-top: 60px; border: 1px solid var(--fd-border, #e5e7eb); border-radius: 8px; background: var(--fd-card, white);">
-		<NodeStatusOverlay executionInfo={{
-			status: "idle",
-			executionCount: 3,
-			isExecuting: false,
-			lastExecuted: new Date().toISOString(),
-		}} />
-		<div style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);">{label}</div>
-	</div>
-{/snippet}
-
 <Story name="Idle (with history)">
-	<div style="position: relative; width: 220px; height: 100px; margin-top: 60px; border: 1px solid var(--fd-border, #e5e7eb); border-radius: 8px; background: var(--fd-card, white);">
-		<NodeStatusOverlay executionInfo={{
-			status: "idle",
-			executionCount: 3,
-			isExecuting: false,
-			lastExecuted: new Date().toISOString(),
-		}} showDetails />
-		<div style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);">Node Content</div>
+	<div
+		style="position: relative; width: 220px; height: 100px; margin-top: 60px; border: 1px solid var(--fd-border, #e5e7eb); border-radius: 8px; background: var(--fd-card, white);"
+	>
+		<NodeStatusOverlay
+			executionInfo={{
+				status: 'idle',
+				executionCount: 3,
+				isExecuting: false,
+				lastExecuted: new Date().toISOString()
+			}}
+			showDetails
+		/>
+		<div style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);">
+			Node Content
+		</div>
 	</div>
 </Story>
 
 <Story name="Running">
-	<div style="position: relative; width: 220px; height: 100px; margin-top: 60px; border: 1px solid var(--fd-border, #e5e7eb); border-radius: 8px; background: var(--fd-card, white);">
-		<NodeStatusOverlay executionInfo={{
-			status: "running",
-			executionCount: 1,
-			isExecuting: true,
-		}} />
-		<div style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);">Processing...</div>
+	<div
+		style="position: relative; width: 220px; height: 100px; margin-top: 60px; border: 1px solid var(--fd-border, #e5e7eb); border-radius: 8px; background: var(--fd-card, white);"
+	>
+		<NodeStatusOverlay
+			executionInfo={{
+				status: 'running',
+				executionCount: 1,
+				isExecuting: true
+			}}
+		/>
+		<div style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);">
+			Processing...
+		</div>
 	</div>
 </Story>
 
 <Story name="Completed">
-	<div style="position: relative; width: 220px; height: 100px; margin-top: 60px; border: 1px solid var(--fd-border, #e5e7eb); border-radius: 8px; background: var(--fd-card, white);">
-		<NodeStatusOverlay executionInfo={{
-			status: "completed",
-			executionCount: 5,
-			isExecuting: false,
-			lastExecuted: new Date().toISOString(),
-			lastExecutionDuration: 1250,
-		}} showDetails />
+	<div
+		style="position: relative; width: 220px; height: 100px; margin-top: 60px; border: 1px solid var(--fd-border, #e5e7eb); border-radius: 8px; background: var(--fd-card, white);"
+	>
+		<NodeStatusOverlay
+			executionInfo={{
+				status: 'completed',
+				executionCount: 5,
+				isExecuting: false,
+				lastExecuted: new Date().toISOString(),
+				lastExecutionDuration: 1250
+			}}
+			showDetails
+		/>
 		<div style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);">Done!</div>
 	</div>
 </Story>
 
 <Story name="Failed">
-	<div style="position: relative; width: 220px; height: 100px; margin-top: 60px; border: 1px solid var(--fd-border, #e5e7eb); border-radius: 8px; background: var(--fd-card, white);">
-		<NodeStatusOverlay executionInfo={{
-			status: "failed",
-			executionCount: 2,
-			isExecuting: false,
-			lastError: "Connection timeout",
-			lastExecuted: new Date().toISOString(),
-			lastExecutionDuration: 30000,
-		}} showDetails />
+	<div
+		style="position: relative; width: 220px; height: 100px; margin-top: 60px; border: 1px solid var(--fd-border, #e5e7eb); border-radius: 8px; background: var(--fd-card, white);"
+	>
+		<NodeStatusOverlay
+			executionInfo={{
+				status: 'failed',
+				executionCount: 2,
+				isExecuting: false,
+				lastError: 'Connection timeout',
+				lastExecuted: new Date().toISOString(),
+				lastExecutionDuration: 30000
+			}}
+			showDetails
+		/>
 		<div style="padding: 1rem; text-align: center; color: var(--fd-text, #374151);">Error</div>
 	</div>
 </Story>

package/dist/components/NodeStatusOverlay.stories.svelte.d.ts

@@ -11,7 +11,7 @@ declare const NodeStatusOverlay: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import NodeStatusOverlay from "./NodeStatusOverlay.svelte";
+import NodeStatusOverlay from './NodeStatusOverlay.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/NodeStatusOverlay.svelte

@@ -29,9 +29,9 @@
 	let props: Props = $props();
 
 	// Default values
-	let position = $state(props.position || 'top-right');
-	let size = $state(props.size || 'md');
-	let showDetails = $state(props.showDetails || false);
+	let position = $derived(props.position || 'top-right');
+	let size = $derived(props.size || 'md');
+	let showDetails = $derived(props.showDetails || false);
 	let isHovered = $state(false);
 
 	// Size configurations - optimized for larger, centered overlay
@@ -56,7 +56,7 @@
 		}
 	};
 
-	const config = sizeConfig[size];
+	const config = $derived(sizeConfig[size]);
 
 	// Position styles - horizontal center aligned with top edge of node
 	const positionStyles = {

package/dist/components/PipelineStatus.svelte

@@ -8,7 +8,8 @@
 	import { onMount } from 'svelte';
 	import App from './App.svelte';
 	import LogsSidebar from './LogsSidebar.svelte';
-	import { FlowDropApiClient } from '../api/client.js';
+	import { EnhancedFlowDropApiClient } from '../api/enhanced-client.js';
+	import { createEndpointConfig } from '../config/endpoints.js';
 	import type { Workflow } from '../types/index.js';
 	import type { EndpointConfig } from '../config/endpoints.js';
 	import { logger } from '../utils/logger.js';
@@ -16,7 +17,7 @@
 	interface Props {
 		pipelineId: string;
 		workflow: Workflow;
-		apiClient?: FlowDropApiClient;
+		apiClient?: EnhancedFlowDropApiClient;
 		baseUrl?: string;
 		endpointConfig?: EndpointConfig;
 		onActionsReady?: (
@@ -34,8 +35,12 @@
 		$props();
 
 	// Initialize API client if not provided
+	// svelte-ignore state_referenced_locally — client created once from props
 	const client =
-		apiClient || new FlowDropApiClient(endpointConfig?.baseUrl || baseUrl || '/api/flowdrop');
+		apiClient ||
+		new EnhancedFlowDropApiClient(
+			endpointConfig ?? createEndpointConfig(baseUrl || '/api/flowdrop')
+		);
 
 	// Pipeline status and job data
 	let pipelineStatus = $state<string>('unknown');
@@ -269,15 +274,8 @@
 		}
 	});
 
-	// Cleanup on unmount
-	onMount(() => {
-		return () => {
-			if (refreshInterval) {
-				clearInterval(refreshInterval);
-				refreshInterval = null;
-			}
-		};
-	});
+	// Note: Interval cleanup is handled by the $effect above.
+	// In Svelte 5, $effect cleanup runs both on re-execution and component destroy.
 </script>
 
 <div class="pipeline-status-container">

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

@@ -1,10 +1,10 @@
-import { FlowDropApiClient } from '../api/client.js';
+import { EnhancedFlowDropApiClient } from '../api/enhanced-client.js';
 import type { Workflow } from '../types/index.js';
 import type { EndpointConfig } from '../config/endpoints.js';
 interface Props {
     pipelineId: string;
     workflow: Workflow;
-    apiClient?: FlowDropApiClient;
+    apiClient?: EnhancedFlowDropApiClient;
     baseUrl?: string;
     endpointConfig?: EndpointConfig;
     onActionsReady?: (actions: Array<{

package/dist/components/SchemaForm.stories.svelte

@@ -1,101 +1,116 @@
 <script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import SchemaForm from "./SchemaForm.svelte";
-	import { fn } from "storybook/test";
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import SchemaForm from './SchemaForm.svelte';
+	import { fn } from 'storybook/test';
 
 	const { Story } = defineMeta({
-		title: "Form/SchemaForm",
+		title: 'Form/SchemaForm',
 		component: SchemaForm,
-		tags: ["autodocs"],
+		tags: ['autodocs'],
 		args: {
 			onChange: fn(),
 			onSave: fn(),
-			onCancel: fn(),
-		},
+			onCancel: fn()
+		}
 	});
 </script>
 
-<Story name="Simple Form" args={{
-	schema: {
-		type: "object",
-		properties: {
-			name: { type: "string", title: "Name", description: "Enter your full name" },
-			age: { type: "number", title: "Age", minimum: 0, maximum: 120 },
-			active: { type: "boolean", title: "Active", default: true },
+<Story
+	name="Simple Form"
+	args={{
+		schema: {
+			type: 'object',
+			properties: {
+				name: { type: 'string', title: 'Name', description: 'Enter your full name' },
+				age: { type: 'number', title: 'Age', minimum: 0, maximum: 120 },
+				active: { type: 'boolean', title: 'Active', default: true }
+			},
+			required: ['name']
 		},
-		required: ["name"],
-	},
-	values: { name: "Alice", age: 30, active: true },
-}} />
+		values: { name: 'Alice', age: 30, active: true }
+	}}
+/>
 
-<Story name="Select Fields" args={{
-	schema: {
-		type: "object",
-		properties: {
-			model: {
-				type: "string",
-				title: "AI Model",
-				oneOf: [
-					{ const: "gpt-4", title: "GPT-4" },
-					{ const: "gpt-3.5", title: "GPT-3.5 Turbo" },
-					{ const: "claude-3", title: "Claude 3" },
-				],
-			},
-			temperature: {
-				type: "number",
-				title: "Temperature",
-				format: "range",
-				minimum: 0,
-				maximum: 2,
-				step: 0.1,
-				default: 0.7,
-			},
-			prompt: {
-				type: "string",
-				title: "System Prompt",
-				format: "multiline",
-				description: "The system prompt for the AI model",
-			},
+<Story
+	name="Select Fields"
+	args={{
+		schema: {
+			type: 'object',
+			properties: {
+				model: {
+					type: 'string',
+					title: 'AI Model',
+					oneOf: [
+						{ const: 'gpt-4', title: 'GPT-4' },
+						{ const: 'gpt-3.5', title: 'GPT-3.5 Turbo' },
+						{ const: 'claude-3', title: 'Claude 3' }
+					]
+				},
+				temperature: {
+					type: 'number',
+					title: 'Temperature',
+					format: 'range',
+					minimum: 0,
+					maximum: 2,
+					step: 0.1,
+					default: 0.7
+				},
+				prompt: {
+					type: 'string',
+					title: 'System Prompt',
+					format: 'multiline',
+					description: 'The system prompt for the AI model'
+				}
+			}
 		},
-	},
-	values: { model: "gpt-4", temperature: 0.7, prompt: "You are a helpful assistant." },
-}} />
+		values: { model: 'gpt-4', temperature: 0.7, prompt: 'You are a helpful assistant.' }
+	}}
+/>
 
-<Story name="With Actions" args={{
-	schema: {
-		type: "object",
-		properties: {
-			email: { type: "string", title: "Email" },
-			notifications: { type: "boolean", title: "Enable Notifications" },
+<Story
+	name="With Actions"
+	args={{
+		schema: {
+			type: 'object',
+			properties: {
+				email: { type: 'string', title: 'Email' },
+				notifications: { type: 'boolean', title: 'Enable Notifications' }
+			},
+			required: ['email']
 		},
-		required: ["email"],
-	},
-	values: { email: "", notifications: true },
-	showActions: true,
-	saveLabel: "Save Settings",
-	cancelLabel: "Reset",
-}} />
+		values: { email: '', notifications: true },
+		showActions: true,
+		saveLabel: 'Save Settings',
+		cancelLabel: 'Reset'
+	}}
+/>
 
-<Story name="Loading" args={{
-	schema: {
-		type: "object",
-		properties: {
-			name: { type: "string", title: "Name" },
+<Story
+	name="Loading"
+	args={{
+		schema: {
+			type: 'object',
+			properties: {
+				name: { type: 'string', title: 'Name' }
+			}
 		},
-	},
-	values: { name: "Test" },
-	showActions: true,
-	loading: true,
-}} />
+		values: { name: 'Test' },
+		showActions: true,
+		loading: true
+	}}
+/>
 
-<Story name="Disabled" args={{
-	schema: {
-		type: "object",
-		properties: {
-			name: { type: "string", title: "Name" },
-			role: { type: "string", title: "Role" },
+<Story
+	name="Disabled"
+	args={{
+		schema: {
+			type: 'object',
+			properties: {
+				name: { type: 'string', title: 'Name' },
+				role: { type: 'string', title: 'Role' }
+			}
 		},
-	},
-	values: { name: "Admin", role: "Super User" },
-	disabled: true,
-}} />
+		values: { name: 'Admin', role: 'Super User' },
+		disabled: true
+	}}
+/>

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

@@ -11,7 +11,7 @@ declare const SchemaForm: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import SchemaForm from "./SchemaForm.svelte";
+import SchemaForm from './SchemaForm.svelte';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/SchemaForm.svelte

@@ -34,7 +34,11 @@
     }
 
     function handleSave(finalValues: Record<string, unknown>) {
-      console.log("Saved:", finalValues);
+      // Process saved form values
+    }
+
+    function handleCancel() {
+      // Handle form cancellation
     }
   </script>
 
@@ -44,7 +48,7 @@
     onChange={handleChange}
     showActions={true}
     onSave={handleSave}
-    onCancel={() => console.log("Cancelled")}
+    onCancel={handleCancel}
   />
   ```
 -->

package/dist/components/SettingsPanel.svelte

@@ -14,11 +14,15 @@
   ```svelte
   <script>
     import { SettingsPanel } from "@d34dman/flowdrop";
+
+    function handleClose() {
+      // Handle settings panel close
+    }
   </script>
 
   <SettingsPanel
     showSyncButton={true}
-    onClose={() => console.log("Closed")}
+    onClose={handleClose}
   />
   ```
 -->
@@ -72,6 +76,7 @@
 	/**
 	 * Currently active tab
 	 */
+	// svelte-ignore state_referenced_locally — initial default, user switches tabs
 	let activeTab = $state<SettingsCategory>(categories[0] ?? 'theme');
 
 	/**