@d34dman/flowdrop 0.0.62 → 0.0.64

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/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?: (
@@ -35,7 +36,10 @@
 
 	// Initialize API client if not provided
 	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 +273,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}
   />
   ```
 -->

package/dist/components/StatusIcon.stories.svelte

@@ -1,34 +1,34 @@
 <script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import StatusIcon from "./StatusIcon.svelte";
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import StatusIcon from './StatusIcon.svelte';
 
 	const { Story } = defineMeta({
-		title: "Display/StatusIcon",
+		title: 'Display/StatusIcon',
 		component: StatusIcon,
-		tags: ["autodocs"],
+		tags: ['autodocs'],
 		argTypes: {
 			status: {
-				control: { type: "select" },
-				options: ["idle", "pending", "running", "completed", "failed", "cancelled", "skipped"],
+				control: { type: 'select' },
+				options: ['idle', 'pending', 'running', 'completed', 'failed', 'cancelled', 'skipped']
 			},
 			size: {
-				control: { type: "select" },
-				options: ["sm", "md", "lg", "xl"],
+				control: { type: 'select' },
+				options: ['sm', 'md', 'lg', 'xl']
 			},
-			showBackground: { control: "boolean" },
-		},
+			showBackground: { control: 'boolean' }
+		}
 	});
 </script>
 
-<Story name="Idle" args={{ status: "idle" }} />
+<Story name="Idle" args={{ status: 'idle' }} />
 
-<Story name="Running" args={{ status: "running" }} />
+<Story name="Running" args={{ status: 'running' }} />
 
-<Story name="Completed" args={{ status: "completed" }} />
+<Story name="Completed" args={{ status: 'completed' }} />
 
-<Story name="Failed" args={{ status: "failed" }} />
+<Story name="Failed" args={{ status: 'failed' }} />
 
-<Story name="With Background" args={{ status: "completed", showBackground: true }} />
+<Story name="With Background" args={{ status: 'completed', showBackground: true }} />
 
 <Story name="All Statuses">
 	<div style="display: flex; flex-direction: column; gap: 1.5rem;">

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

@@ -11,7 +11,7 @@ declare const StatusIcon: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import StatusIcon from "./StatusIcon.svelte";
+import StatusIcon from './StatusIcon.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/StatusLabel.stories.svelte

@@ -1,17 +1,17 @@
 <script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import StatusLabel from "./StatusLabel.svelte";
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import StatusLabel from './StatusLabel.svelte';
 
 	const { Story } = defineMeta({
-		title: "Display/StatusLabel",
+		title: 'Display/StatusLabel',
 		component: StatusLabel,
-		tags: ["autodocs"],
+		tags: ['autodocs'],
 		argTypes: {
-			label: { control: "text" },
-		},
+			label: { control: 'text' }
+		}
 	});
 </script>
 
-<Story name="Default" args={{ label: "Ready" }} />
+<Story name="Default" args={{ label: 'Ready' }} />
 
-<Story name="Long Text" args={{ label: "Processing workflow execution..." }} />
+<Story name="Long Text" args={{ label: 'Processing workflow execution...' }} />

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

@@ -11,7 +11,7 @@ declare const StatusLabel: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import StatusLabel from "./StatusLabel.svelte";
+import StatusLabel from './StatusLabel.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/ThemeToggle.stories.svelte

@@ -1,25 +1,25 @@
 <script module>
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import ThemeToggle from "./ThemeToggle.svelte";
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import ThemeToggle from './ThemeToggle.svelte';
 
 	const { Story } = defineMeta({
-		title: "Display/ThemeToggle",
+		title: 'Display/ThemeToggle',
 		component: ThemeToggle,
-		tags: ["autodocs"],
+		tags: ['autodocs'],
 		argTypes: {
 			size: {
-				control: { type: "select" },
-				options: ["sm", "md", "lg"],
+				control: { type: 'select' },
+				options: ['sm', 'md', 'lg']
 			},
-			showLabel: { control: "boolean" },
-		},
+			showLabel: { control: 'boolean' }
+		}
 	});
 </script>
 
 <Story name="Default" />
 
-<Story name="Small" args={{ size: "sm" }} />
+<Story name="Small" args={{ size: 'sm' }} />
 
-<Story name="Large" args={{ size: "lg" }} />
+<Story name="Large" args={{ size: 'lg' }} />
 
 <Story name="With Label" args={{ showLabel: true }} />

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

@@ -11,7 +11,7 @@ declare const ThemeToggle: $$__sveltets_2_IsomorphicComponent<{
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-import ThemeToggle from "./ThemeToggle.svelte";
+import ThemeToggle from './ThemeToggle.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;